欢迎加入开源鸿蒙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 核心类设计

class PoetryApp {
    // 状态管理
    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. 获取心情数据
    const mood = this.moods[moodKey];
    
    // 4. 更新编辑器占位符
    const editor = 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() {
    const container = document.getElementById('tipsContent');
    
    // 如果没有选择心情
    if (!this.currentMood) {
        container.innerHTML = '<p class="tip-intro">选择心情后，这里会显示相应的写作技巧提示</p>';
        return;
    }
    
    // 获取当前心情的技巧
    const tips = this.tips[this.currentMood];
    
    // 根据技巧数据类型渲染
    if (Array.isArray(tips)) {
        // 通用技巧（数组）
        container.innerHTML = tips.map(tip => `<p>• ${tip}</p>`).join('');
    } else {
        // 文体分类技巧（对象）
        const genreTips = tips[this.currentGenre] || tips.poetry;
        container.innerHTML = genreTips.map(tip => `<p>• ${tip}</p>`).join('');
    }
}

4.4 灵感词库系统

initializeWords() {
    return {
        joy: ['阳光', '微笑', '飞翔', '绽放', '幸福', '温暖', '欢唱', '金色', '希望', '彩虹'],
        sadness: ['雨', '泪', '风', '雾', '枯叶', '孤灯', '黄昏', '长夜', '落花', '流水'],
        // ...其他心情的词汇
    };
}

renderWords() {
    const container = document.getElementById('wordsCloud');
    container.innerHTML = '';
    
    // 根据当前心情筛选词汇
    const words = this.currentMood 
        ? this.words[this.currentMood] 
        : Object.values(this.words).flat();  // 未选择时显示全部
    
    words.forEach(word => {
        const tag = document.createElement('span');
        tag.className = 'word-tag';
        tag.textContent = word;
        tag.addEventListener('click', () => this.insertWord(word));
        container.appendChild(tag);
    });
}

// 插入词汇到编辑器
insertWord(word) {
    const editor = document.getElementById('editor');
    const cursorPos = editor.selectionStart;
    const textBefore = editor.value.substring(0, cursorPos);
    const textAfter = 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() {
    const container = document.getElementById('classicsList');
    container.innerHTML = '';
    
    this.classics.forEach(classic => {
        const item = 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() {
    const title = document.getElementById('titleInput').value.trim();
    const content = document.getElementById('editor').value.trim();
    
    // 验证输入
    if (!title || !content) {
        alert('请填写标题和内容');
        return;
    }
    
    // 创建作品对象
    const work = {
        id: Date.now(),
        title,
        content,
        mood: this.currentMood,
        moodName: this.moods[this.currentMood]?.name || '未选择',
        genre: this.currentGenre,
        genreName: this.getGenreName(this.currentGenre),
        date: new Date().toLocaleDateString('zh-CN'),
        timestamp: Date.now()
    };
    
    // 添加到作品列表（头部）
    this.works.unshift(work);
    
    // 保存到LocalStorage
    this.saveWorks();
    
    // 更新UI
    this.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 {
        const saved = 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 solid rgba(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 30px rgba(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 核心代码模块

文件	说明
[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