企业官网建设流程全解析

欢迎加入开源鸿蒙PC社区：
https://harmonypc.csdn.net/

atomgit仓库地址：https://atomgit.com/Math_teacher_fan/xinqingword

一、项目概述

"心情诗文集"是一款专注于情感表达的文学创作应用，用户可以根据不同的心情状态，获得针对性的写作技巧指导，创作属于自己的诗歌和文章。本文将详细介绍从需求分析到代码实现的完整过程。

1.1 项目目标

• 提供沉浸式的文学创作体验
• 根据心情提供个性化的写作指导
• 欣赏经典诗歌作品
• 保存和管理个人作品

1.2 技术选型

二、系统架构设计

2.1 整体架构

┌─────────────────────────────────────────────────────────────┐ │ 用户界面层 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 心情选择 │ │ 创作区域 │ │ 技巧提示 │ │ 灵感词库 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 业务逻辑层 │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ PoetryApp 类 │ │ │ │ - 心情管理 (moods) │ │ │ │ - 技巧库 (tips) │ │ │ │ - 经典库 (classics) │ │ │ │ - 灵感词库 (words) │ │ │ │ - 作品管理 (works) │ │ │ └──────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 数据持久化层 │ │ LocalStorage: poetryWorks (用户作品) │ └─────────────────────────────────────────────────────────────┘

2.2 核心类设计

classPoetryApp{// 状态管理currentMood=null// 当前心情currentGenre='poetry'// 当前文体works=[]// 用户作品列表currentWorkId=null// 当前查看的作品ID// 数据moods={}// 心情数据tips={}// 写作技巧classics=[]// 经典作品words={}// 灵感词库// 核心方法selectMood()// 选择心情renderTips()// 渲染写作技巧renderClassics()// 渲染经典作品renderWords()// 渲染灵感词库saveWork()// 保存作品// ...}

三、数据模型设计

3.1 心情数据模型

moods={joy:{name:'喜悦',icon:'😊',color:'#ffd89b',keywords:['阳光','微笑','快乐','幸福','温暖'],placeholder:'阳光洒在窗台，心中满是欢喜...'},// ...其他心情}

3.2 心情分类体系

四、核心功能实现

4.1 心情选择系统

selectMood(moodKey){// 1. 更新当前心情状态this.currentMood=moodKey;// 2. 更新UI选中状态document.querySelectorAll('.mood-btn').forEach(btn=>{btn.classList.remove('active');if(btn.dataset.mood===moodKey){btn.classList.add('active');}});// 3. 获取心情数据constmood=this.moods[moodKey];// 4. 更新编辑器占位符consteditor=document.getElementById('editor');editor.placeholder=mood.placeholder;// 5. 渲染对应的写作技巧和灵感词this.renderTips();this.renderWords();}

4.2 写作技巧系统

根据不同的心情和文体，提供个性化的写作指导：

initializeTips(){return{// 喜悦的通用技巧joy:['喜悦是最美的情感，用明快的语言描绘你心中的阳光','可以运用"跳跃"的意象，如阳光、飞翔、绽放','节奏上可以轻快一些，用短句和感叹句','试着描述让你感到快乐的具体场景和细节','喜悦时写作，可以多使用明亮的颜色词'],// 忧伤的技巧（按文体分类）sadness:{poetry:['忧伤需要克制，用平淡的语言表达深沉的情感','善用"留白"，不说破，让读者自己感受','可以借景抒情，用雨、夜、风等意象烘托氛围','注意意境的营造，追求情景交融','避免过于直白的悲伤表达，节制反而更有力量'],prose:['散文写作中，忧伤适合用细腻的心理描写','可以回忆过去的美好时光，对比现在的失落','运用通感，让读者通过文字感受到你的情绪','在忧伤中寻找一丝光亮，让文章有层次感','长句和短句交错，增加文字的节奏感'],essay:['随笔写作忧伤主题，可以从一件小事切入','注重细节描写，让情感有依托','可以探讨忧伤的意义，赋予它更深层的思考','在结尾处给出一个开放性的思考','真实的情感比华丽的辞藻更能打动人心'],haiku:['俳句要求简洁，用最少的字表达最深的情感','遵循"5-7-5"的音节格式','选择一个意象，深入刻画，不要贪多','可以运用季语，增强意境','留白是俳句的灵魂，不要说尽']},// ...其他心情的技巧};}

4.3 技巧渲染系统

renderTips(){constcontainer=document.getElementById('tipsContent');// 如果没有选择心情if(!this.currentMood){container.innerHTML='<p class="tip-intro">选择心情后，这里会显示相应的写作技巧提示</p>';return;}// 获取当前心情的技巧consttips=this.tips[this.currentMood];// 根据技巧数据类型渲染if(Array.isArray(tips)){// 通用技巧（数组）container.innerHTML=tips.map(tip=>`<p>•${tip}</p>`).join('');}else{// 文体分类技巧（对象）constgenreTips=tips[this.currentGenre]||tips.poetry;container.innerHTML=genreTips.map(tip=>`<p>•${tip}</p>`).join('');}}

4.4 灵感词库系统

initializeWords(){return{joy:['阳光','微笑','飞翔','绽放','幸福','温暖','欢唱','金色','希望','彩虹'],sadness:['雨','泪','风','雾','枯叶','孤灯','黄昏','长夜','落花','流水'],// ...其他心情的词汇};}renderWords(){constcontainer=document.getElementById('wordsCloud');container.innerHTML='';// 根据当前心情筛选词汇constwords=this.currentMood?this.words[this.currentMood]:Object.values(this.words).flat();// 未选择时显示全部words.forEach(word=>{consttag=document.createElement('span');tag.className='word-tag';tag.textContent=word;tag.addEventListener('click',()=>this.insertWord(word));container.appendChild(tag);});}// 插入词汇到编辑器insertWord(word){consteditor=document.getElementById('editor');constcursorPos=editor.selectionStart;consttextBefore=editor.value.substring(0,cursorPos);consttextAfter=editor.value.substring(cursorPos);editor.value=textBefore+word+textAfter;editor.focus();editor.selectionStart=editor.selectionEnd=cursorPos+word.length;this.updateCharCount();}

五、经典作品赏析

5.1 经典作品数据结构

initializeClassics(){return[{id:1,title:'面朝大海，春暖花开',author:'海子',mood:'joy',content:'从明天起，做一个幸福的人\n喂马、劈柴，周游世界\n...'},{id:2,title:'雨巷',author:'戴望舒',mood:'sadness',content:'撑着油纸伞，独自\n彷徨在悠长、悠长\n又寂寥的雨巷\n...'},// ...更多经典作品];}

5.2 经典作品渲染

renderClassics(){constcontainer=document.getElementById('classicsList');container.innerHTML='';this.classics.forEach(classic=>{constitem=document.createElement('div');item.className='classic-item';item.innerHTML=`<div class="classic-title">${classic.title}</div> <div class="classic-author">${classic.author}</div> <div class="classic-preview">${classic.content.substring(0,50)}...</div>`;item.addEventListener('click',()=>this.showClassic(classic));container.appendChild(item);});}

六、作品管理系统

6.1 保存作品

saveWork(){consttitle=document.getElementById('titleInput').value.trim();constcontent=document.getElementById('editor').value.trim();// 验证输入if(!title||!content){alert('请填写标题和内容');return;}// 创建作品对象constwork={id:Date.now(),title,content,mood:this.currentMood,moodName:this.moods[this.currentMood]?.name||'未选择',genre:this.currentGenre,genreName:this.getGenreName(this.currentGenre),date:newDate().toLocaleDateString('zh-CN'),timestamp:Date.now()};// 添加到作品列表（头部）this.works.unshift(work);// 保存到LocalStoragethis.saveWorks();// 更新UIthis.renderWorks();// 清空编辑器document.getElementById('titleInput').value='';document.getElementById('editor').value='';this.updateCharCount();alert('保存成功！');}

6.2 LocalStorage持久化

saveWorks(){try{localStorage.setItem('poetryWorks',JSON.stringify(this.works));}catch(e){console.warn('保存作品失败');}}loadWorks(){try{constsaved=localStorage.getItem('poetryWorks');if(saved){this.works=JSON.parse(saved);}}catch(e){console.warn('加载作品失败');}this.renderWorks();}

七、界面设计

7.1 主题色彩

body{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#e2e8f0;}

7.2 心情按钮样式

.mood-btn{background:rgba(255,255,255,0.1);border:2px solidrgba(255,255,255,0.1);border-radius:16px;padding:20px 15px;cursor:pointer;transition:all 0.3s ease;}.mood-btn:hover{background:rgba(255,255,255,0.2);transform:translateY(-3px);box-shadow:0 10px 30pxrgba(0,0,0,0.3);}.mood-btn.active{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border-color:transparent;transform:scale(1.05);}

八、响应式设计

8.1 媒体查询

/* 平板设备 */@media(max-width:1200px){.main-content{grid-template-columns:1fr;}.sidebar{flex-direction:row;flex-wrap:wrap;}}/* 移动设备 */@media(max-width:768px){.header h1{font-size:2rem;}.mood-grid{grid-template-columns:repeat(2,1fr);}}/* 小屏手机 */@media(max-width:480px){.mood-btn{padding:15px 10px;}.mood-icon{font-size:2rem;}}

九、完整心情与技巧对照表

十、总结

10.1 核心技术要点

本文详细介绍了"心情诗文集"应用的完整实现：

1. 心情系统：8种心情状态的完整管理
2. 写作技巧：根据心情和文体提供个性化指导
3. 灵感词库：分类词汇辅助创作
4. 经典赏析：名家作品欣赏与学习
5. 作品管理：完整的CRUD功能
6. 数据持久化：LocalStorage存储用户作品

10.2 核心代码模块

10.3 学习收获

通过这个项目，深入学习了：

• 数据驱动UI：通过状态变化驱动界面更新
• 面向对象设计：类的封装与组织
• LocalStorage使用：浏览器本地存储
• 响应式设计：媒体查询适配多端
• 文学创作辅助：内容管理系统的设计

作者：Web Developer

更新时间：2026年6月

标签：#诗歌创作 #心情写作 #文学创作 #JavaScript #前端开发 #HarmonyOS #Electron