欢迎加入开源鸿蒙PC社区https://harmonypc.csdn.net/atomgit仓库地址https://atomgit.com/Math_teacher_fan/xinqingword一、项目概述心情诗文集是一款专注于情感表达的文学创作应用用户可以根据不同的心情状态获得针对性的写作技巧指导创作属于自己的诗歌和文章。本文将详细介绍从需求分析到代码实现的完整过程。1.1 项目目标提供沉浸式的文学创作体验根据心情提供个性化的写作指导欣赏经典诗歌作品保存和管理个人作品1.2 技术选型技术用途优势HTML5页面结构语义化标签CSS3样式设计渐变、动画、毛玻璃JavaScript ES6核心逻辑面向对象LocalStorage数据持久化本地存储二、系统架构设计2.1 整体架构┌─────────────────────────────────────────────────────────────┐ │ 用户界面层 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 心情选择 │ │ 创作区域 │ │ 技巧提示 │ │ 灵感词库 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 业务逻辑层 │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ PoetryApp 类 │ │ │ │ - 心情管理 (moods) │ │ │ │ - 技巧库 (tips) │ │ │ │ - 经典库 (classics) │ │ │ │ - 灵感词库 (words) │ │ │ │ - 作品管理 (works) │ │ │ └──────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 数据持久化层 │ │ LocalStorage: poetryWorks (用户作品) │ └─────────────────────────────────────────────────────────────┘2.2 核心类设计classPoetryApp{// 状态管理currentMoodnull// 当前心情currentGenrepoetry// 当前文体works[]// 用户作品列表currentWorkIdnull// 当前查看的作品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.currentMoodmoodKey;// 2. 更新UI选中状态document.querySelectorAll(.mood-btn).forEach(btn{btn.classList.remove(active);if(btn.dataset.moodmoodKey){btn.classList.add(active);}});// 3. 获取心情数据constmoodthis.moods[moodKey];// 4. 更新编辑器占位符consteditordocument.getElementById(editor);editor.placeholdermood.placeholder;// 5. 渲染对应的写作技巧和灵感词this.renderTips();this.renderWords();}4.2 写作技巧系统根据不同的心情和文体提供个性化的写作指导initializeTips(){return{// 喜悦的通用技巧joy:[喜悦是最美的情感用明快的语言描绘你心中的阳光,可以运用跳跃的意象如阳光、飞翔、绽放,节奏上可以轻快一些用短句和感叹句,试着描述让你感到快乐的具体场景和细节,喜悦时写作可以多使用明亮的颜色词],// 忧伤的技巧按文体分类sadness:{poetry:[忧伤需要克制用平淡的语言表达深沉的情感,善用留白不说破让读者自己感受,可以借景抒情用雨、夜、风等意象烘托氛围,注意意境的营造追求情景交融,避免过于直白的悲伤表达节制反而更有力量],prose:[散文写作中忧伤适合用细腻的心理描写,可以回忆过去的美好时光对比现在的失落,运用通感让读者通过文字感受到你的情绪,在忧伤中寻找一丝光亮让文章有层次感,长句和短句交错增加文字的节奏感],essay:[随笔写作忧伤主题可以从一件小事切入,注重细节描写让情感有依托,可以探讨忧伤的意义赋予它更深层的思考,在结尾处给出一个开放性的思考,真实的情感比华丽的辞藻更能打动人心],haiku:[俳句要求简洁用最少的字表达最深的情感,遵循5-7-5的音节格式,选择一个意象深入刻画不要贪多,可以运用季语增强意境,留白是俳句的灵魂不要说尽]},// ...其他心情的技巧};}4.3 技巧渲染系统renderTips(){constcontainerdocument.getElementById(tipsContent);// 如果没有选择心情if(!this.currentMood){container.innerHTMLp classtip-intro选择心情后这里会显示相应的写作技巧提示/p;return;}// 获取当前心情的技巧consttipsthis.tips[this.currentMood];// 根据技巧数据类型渲染if(Array.isArray(tips)){// 通用技巧数组container.innerHTMLtips.map(tipp•${tip}/p).join();}else{// 文体分类技巧对象constgenreTipstips[this.currentGenre]||tips.poetry;container.innerHTMLgenreTips.map(tipp•${tip}/p).join();}}4.4 灵感词库系统initializeWords(){return{joy:[阳光,微笑,飞翔,绽放,幸福,温暖,欢唱,金色,希望,彩虹],sadness:[雨,泪,风,雾,枯叶,孤灯,黄昏,长夜,落花,流水],// ...其他心情的词汇};}renderWords(){constcontainerdocument.getElementById(wordsCloud);container.innerHTML;// 根据当前心情筛选词汇constwordsthis.currentMood?this.words[this.currentMood]:Object.values(this.words).flat();// 未选择时显示全部words.forEach(word{consttagdocument.createElement(span);tag.classNameword-tag;tag.textContentword;tag.addEventListener(click,()this.insertWord(word));container.appendChild(tag);});}// 插入词汇到编辑器insertWord(word){consteditordocument.getElementById(editor);constcursorPoseditor.selectionStart;consttextBeforeeditor.value.substring(0,cursorPos);consttextAftereditor.value.substring(cursorPos);editor.valuetextBeforewordtextAfter;editor.focus();editor.selectionStarteditor.selectionEndcursorPosword.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(){constcontainerdocument.getElementById(classicsList);container.innerHTML;this.classics.forEach(classic{constitemdocument.createElement(div);item.classNameclassic-item;item.innerHTMLdiv classclassic-title${classic.title}/div div classclassic-author${classic.author}/div div classclassic-preview${classic.content.substring(0,50)}.../div;item.addEventListener(click,()this.showClassic(classic));container.appendChild(item);});}六、作品管理系统6.1 保存作品saveWork(){consttitledocument.getElementById(titleInput).value.trim();constcontentdocument.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{constsavedlocalStorage.getItem(poetryWorks);if(saved){this.worksJSON.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 核心技术要点本文详细介绍了心情诗文集应用的完整实现心情系统8种心情状态的完整管理写作技巧根据心情和文体提供个性化指导灵感词库分类词汇辅助创作经典赏析名家作品欣赏与学习作品管理完整的CRUD功能数据持久化LocalStorage存储用户作品10.2 核心代码模块文件说明[app.js](file:///d:/save/systemIso/electron-openharmony-vue3/ohos_hap/web_engine/src/main/resources/resfile/resources/app/app.js)完整的应用逻辑实现[index.html](file:///d:/save/systemIso/electron-openharmony-vue3/ohos_hap/web_engine/src/main/resources/resfile/resources/app/index.html)页面结构[style.css](file:///d:/save/systemIso/electron-openharmony-vue3/ohos_hap/web_engine/src/main/resources/resfile/resources/app/style.css)样式和动画10.3 学习收获通过这个项目深入学习了数据驱动UI通过状态变化驱动界面更新面向对象设计类的封装与组织LocalStorage使用浏览器本地存储响应式设计媒体查询适配多端文学创作辅助内容管理系统的设计作者Web Developer更新时间2026年6月标签#诗歌创作 #心情写作 #文学创作 #JavaScript #前端开发 #HarmonyOS #Electron