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

atomgit仓库地址：https://atomgit.com/feng8403000/wodeshici

示例效果：

一、项目概述与设计理念

1.1 应用背景

在数字化时代的喧嚣中，我们常常渴望一份心灵的宁静。中国古典诗词，承载着千百年的文化智慧，是滋养精神世界的绝佳养料。从"床前明月光"的乡愁，到"大江东去"的豪迈，每一首诗词都蕴含着古人对生命、自然、情感的深刻感悟。

然而，现代生活节奏飞快，我们很难静下心来品读诗词。市面上的诗词类应用大多设计繁琐，功能复杂，反而削弱了诗词本身的美感。有的应用只是简单的文本展示，缺乏互动性；有的过度商业化，广告满天飞，破坏了阅读体验。

"我的诗词"的设计初衷，是打造一款简约、优雅、具有古典韵味的诗词应用。我们希望通过现代技术，让用户能够轻松地接触、阅读、收藏、甚至创作诗词，在数字世界中感受传统文化的魅力。

1.2 技术架构选型

本项目基于鸿蒙系统的Electron框架进行开发，采用Web技术栈构建用户界面。这种技术选型有以下几个方面的考量：

技术方案	优势	适用场景
鸿蒙Electron	原生性能优秀，系统集成度高	需要与鸿蒙系统深度交互的应用
Web前端技术	开发效率高，跨平台能力强	快速迭代，界面复杂的应用
LocalStorage	数据持久化简单，无需后端支持	单机应用，数据量较小的场景
Web Speech API	浏览器原生支持，无需额外依赖	语音朗读功能

整个应用采用三层架构设计：

┌─────────────────────────────────────────────────────────┐
│                    用户界面层                             │
│  ┌─────────────────────┐ ┌──────────────────────────┐  │
│  │   左侧分类面板      │ │      中央诗词列表        │  │
│  │  - 分类导航         │ │     - 诗词卡片展示       │  │
│  │  - 作者筛选         │ │     - 点击查看详情       │  │
│  │  - 朝代筛选         │ │                          │  │
│  │  - 搜索功能         │ │                          │  │
│  └─────────────────────┘ └──────────────────────────┘  │
│  ┌───────────────────────────────────────────────────┐  │
│  │              右侧详情面板                          │  │
│  │  - 诗词详情展示  - 创作工具  - 每日推荐          │  │
│  └───────────────────────────────────────────────────┘  │
├─────────────────────────────────────────────────────────┤
│                    业务逻辑层                             │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│  │  分类显示│ │  筛选搜索│ │  收藏管理│ │  朗读功能│ │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
├─────────────────────────────────────────────────────────┤
│                    数据存储层                             │
│  ┌───────────────────────────────────────────────────┐ │
│  │           LocalStorage / 内存                      │ │
│  └───────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

1.3 功能模块划分

"我的诗词"将诗词应用的核心需求归纳为四大功能模块：

诗词浏览模块：这是应用最核心的功能。用户可以通过分类、作者、朝代等多种方式浏览诗词，支持关键词搜索，快速找到自己感兴趣的作品。

详情展示模块：展示诗词的完整内容、作者信息、解析和标签。支持语音朗读功能，让用户能够"听"诗词。

收藏管理模块：用户可以收藏自己喜爱的诗词，建立个人收藏夹。收藏数据本地持久化，支持随时查看。

创作工具模块：鼓励用户创作自己的诗词作品。提供简单的创作界面，支持保存和展示原创作品。

---

二、核心代码实现详解

2.1 诗词数据库设计与实现

诗词数据库是应用的核心数据基础。我们构建了一个包含20首经典诗词的数据库，涵盖唐诗、宋词、元曲等不同体裁：

const poemDatabase = [
    {
        id: 1,
        title: '静夜思',
        author: '李白',
        dynasty: '唐',
        form: '五言绝句',
        content: ['床前明月光', '疑是地上霜', '举头望明月', '低头思故乡'],
        tags: ['思乡', '月亮', '抒情'],
        analysis: '这首诗是李白在扬州旅居时所作，表达了诗人深沉的思乡之情。诗中通过"明月"这一意象，将抽象的思乡之情具象化，语言朴素自然，意境深远。',
        type: 'shi'
    },
    // ... 更多诗词
];

数据库的设计有几个值得注意的细节：

数据结构清晰：每首诗词包含id、标题、作者、朝代、体裁、内容、标签、解析、类型等字段。这种结构既方便数据的维护和扩展，又能满足各种展示需求。

体裁分类：type字段标识诗词的体裁（shi表示诗，ci表示词，song表示曲），便于分类筛选。

标签系统：tags字段用数组存储多个标签，这些标签可以用于搜索、推荐和情感分类。

解析字段：analysis字段提供诗词的详细解析，帮助用户理解作品的意境和背景。

基于数据库，我们还预生成了作者和朝代列表，用于筛选功能：

// 作者列表
const authors = [...new Set(poemDatabase.map(p => p.author))];

// 朝代列表
const dynasties = [...new Set(poemDatabase.map(p => p.dynasty))];

2.2 智能诗词过滤系统

诗词过滤系统支持多维度筛选，包括分类、作者、朝代、关键词搜索。这是应用的核心功能之一：

function filterPoems() {
    return poemDatabase.filter(poem => {
        // 分类匹配
        const matchCategory = appState.currentCategory === 'all' || 
                             (appState.currentCategory === 'collection' ? 
                              appState.collections.includes(poem.id) : 
                              poem.type === appState.currentCategory);
                              
        // 作者匹配
        const matchAuthor = !appState.currentAuthor || poem.author === appState.currentAuthor;
        
        // 朝代匹配
        const matchDynasty = !appState.currentDynasty || poem.dynasty === appState.currentDynasty;
        
        // 关键词搜索
        const matchSearch = !appState.searchKeyword || 
                           poem.title.includes(appState.searchKeyword) ||
                           poem.author.includes(appState.searchKeyword) ||
                           poem.content.some(line => line.includes(appState.searchKeyword));
                           
        return matchCategory && matchAuthor && matchDynasty && matchSearch;
    });
}

这个函数采用了组合筛选的方式，每个筛选条件都是独立的，但又能协同工作。用户可以同时使用多个筛选条件，精确找到想要的诗词。

特别注意收藏分类的处理逻辑：

appState.currentCategory === 'collection' ? 
    appState.collections.includes(poem.id) : 
    poem.type === appState.currentCategory

这里使用了三元运算符，判断当前分类是否为"收藏"。如果是，则检查诗词的id是否在收藏数组中；否则按体裁筛选。

2.3 每日推荐算法

每日推荐功能根据日期自动推荐一首诗词，让用户每天都有新的发现：

function getDailyPoem() {
    const today = new Date();
    const dayOfYear = Math.floor((today - new Date(today.getFullYear(), 0, 0)) / 86400000);
    return poemDatabase[dayOfYear % poemDatabase.length];
}

这个算法的核心思想是：

1. 计算今天是一年中的第几天（dayOfYear）
2. 将这个数字对诗词总数取模
3. 用结果作为索引从数据库中选取诗词

数学原理如下：

$$索引=一年中的第几天\mathrm{mod}诗词总数$$

这种算法的优点是：

确定性：同一天的推荐结果是固定的，用户刷新页面不会改变推荐内容。

循环性：当诗词数量有限时，可以循环推荐，确保每首诗都有机会被展示。

简单高效：计算过程非常简单，不需要复杂的算法。

2.4 诗词列表渲染系统

诗词列表采用卡片式布局，每首诗一个卡片，美观且实用：

function renderPoemList() {
    const container = document.getElementById('poemList');
    const poems = filterPoems();
    
    if (poems.length === 0) {
        container.innerHTML = `
            <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #999;">
                <div style="font-size: 48px; margin-bottom: 10px;">📭</div>
                <div>暂无匹配的诗词</div>
            </div>
        `;
        return;
    }
    
    let html = '';
    poems.forEach((poem, index) => {
        const isCollected = appState.collections.includes(poem.id);
        html += `
            <div class="poem-card" onclick="showPoemDetail(${index})">
                <div class="poem-header">
                    <h3 class="poem-title">${poem.title}</h3>
                    <span class="poem-author">${poem.author} · ${poem.dynasty}</span>
                </div>
                <div class="poem-content">
                    ${poem.content.slice(0, 2).map(line => `<p>${line}</p>`).join('')}
                    ${poem.content.length > 2 ? '<p>...</p>' : ''}
                </div>
                <div class="poem-tags">
                    ${poem.tags.slice(0, 3).map(tag => `<span class="tag">${tag}</span>`).join('')}
                </div>
                <div class="poem-actions">
                    <button class="action-btn" onclick="event.stopPropagation(); toggleCollect(${index})">${isCollected ? '❤️' : '🤍'}</button>
                    <button class="action-btn" onclick="event.stopPropagation(); readPoem(${index})">🔊</button>
                </div>
            </div>
        `;
    });
    
    container.innerHTML = html;
}

这个函数有几个设计亮点：

空状态处理：当没有匹配的诗词时，显示友好的空状态提示，而不是空白页面。

内容截断：诗词内容只显示前两句，后面用省略号表示，避免卡片过长。这样既能展示诗词的意境，又能保持界面的整洁。

${poem.content.slice(0, 2).map(line => `<p>${line}</p>`).join('')}
${poem.content.length > 2 ? '<p>...</p>' : ''}

事件冒泡处理：在收藏和朗读按钮上使用event.stopPropagation()，防止点击按钮时触发展示详情的事件。

onclick="event.stopPropagation(); toggleCollect(${index})"

2.5 收藏管理与本地存储

收藏功能使用LocalStorage实现数据持久化，即使关闭应用，收藏的诗词也不会丢失：

function toggleCollect(index) {
    const poems = filterPoems();
    const poem = poems[index];
    
    if (!poem) return;
    
    const collectionIndex = appState.collections.indexOf(poem.id);
    
    if (collectionIndex >= 0) {
        appState.collections.splice(collectionIndex, 1);
    } else {
        appState.collections.push(poem.id);
    }
    
    saveCollections();
    updateStats();
    renderPoemList();
}

function saveCollections() {
    localStorage.setItem('poemCollections', JSON.stringify(appState.collections));
}

function loadCollections() {
    const saved = localStorage.getItem('poemCollections');
    if (saved) {
        appState.collections = JSON.parse(saved);
    }
}

收藏管理的核心逻辑：

1. 检查诗词是否已收藏（通过id判断）
2. 如果已收藏则移除，否则添加
3. 保存到LocalStorage
4. 更新统计和界面

这种设计非常简洁，但功能完整。用户可以随时切换诗词的收藏状态，数据自动持久化。

2.6 语音朗读功能

语音朗读功能使用Web Speech API实现，让用户能够"听"诗词：

function readPoem(index) {
    const poems = filterPoems();
    const poem = poems[index];
    
    if (!poem || !window.speechSynthesis) {
        alert('您的浏览器不支持语音朗读功能');
        return;
    }
    
    // 停止之前的朗读
    window.speechSynthesis.cancel();
    
    const text = `${poem.title}，${poem.author}。${poem.content.join('，')}。`;
    
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'zh-CN';
    utterance.rate = 0.8;
    utterance.pitch = 1;
    
    window.speechSynthesis.speak(utterance);
}

朗读功能的几个关键设计：

文本拼接：将诗词标题、作者、内容拼接成完整的朗读文本，并用适当的标点符号分隔。

const text = `${poem.title}，${poem.author}。${poem.content.join('，')}。`;

参数调整：设置语速为0.8（稍慢于正常速度），让用户能够听清每个字；音高为1（正常音高）。

停止机制：在开始新的朗读前，先取消之前的朗读，避免多个声音重叠。

2.7 原创诗词创作功能

创作功能鼓励用户创作自己的诗词作品：

function createPoem() {
    const title = document.getElementById('createTitle').value.trim();
    const author = document.getElementById('createAuthor').value.trim() || '佚名';
    const content = document.getElementById('createContent').value.trim();
    
    if (!title || !content) {
        alert('请填写标题和内容');
        return;
    }
    
    const lines = content.split('\n').filter(line => line.trim());
    
    if (lines.length < 2) {
        alert('请至少输入两句');
        return;
    }
    
    const newPoem = {
        id: poemDatabase.length + 1,
        title: title,
        author: author,
        dynasty: '当代',
        form: '自由诗',
        content: lines,
        tags: ['原创'],
        analysis: '这是一首原创诗词',
        type: 'shi'
    };
    
    poemDatabase.push(newPoem);
    appState.poems = poemDatabase;
    
    // 清空表单
    document.getElementById('createTitle').value = '';
    document.getElementById('createAuthor').value = '';
    document.getElementById('createContent').value = '';
    
    updateStats();
    renderPoemList();
    
    alert('发表成功！');
}

创作功能的设计考虑：

输入验证：检查标题和内容是否为空，要求至少输入两句。

换行处理：将文本按换行符分割成数组，每一行作为诗词的一句。

const lines = content.split('\n').filter(line => line.trim());

自动填充：作者默认为"佚名"，朝代标记为"当代"，体裁标记为"自由诗"，方便用户快速发布。

---

三、界面设计与视觉风格

3.1 古典雅致的色彩系统

应用的色彩系统灵感来源于中国传统美学。我们选择了温暖的宣纸色作为主背景，朱砂红作为强调色，墨色作为主文字色：

:root {
    /* 主色调 - 墨色 */
    --primary: #2c3e50;
    --primary-light: #34495e;
    --primary-dark: #1a252f;
    
    /* 强调色 - 朱砂红 */
    --accent: #c0392b;
    --accent-light: #d64541;
    
    /* 金色点缀 */
    --gold: #c9a227;
    --gold-light: #e6c84a;
    
    /* 背景色 */
    --bg-paper: #f5f0e6;
    --bg-panel: #fffef5;
    --bg-card: #ffffff;
    
    /* 边框色 */
    --border: #d4c4a8;
    --border-dark: #b8a88a;
    
    /* 文字色 */
    --text-primary: #2c3e50;
    --text-secondary: #5d6d7e;
    --text-muted: #95a5a6;
    
    /* 阴影 */
    --shadow: 0 4px 12px rgba(44, 62, 80, 0.1);
    --shadow-hover: 0 8px 24px rgba(44, 62, 80, 0.15);
}

这个色彩系统的设计理念：

宣纸色背景：#f5f0e6这个颜色接近传统宣纸的颜色，给人温暖、舒适的感觉。

朱砂红强调：#c0392b这个颜色来源于传统的朱砂颜料，常用于印章和重要标记，非常醒目。

墨色文字：#2c3e50这个颜色类似墨色，既不像纯黑那样生硬，又有足够的对比度保证可读性。

3.2 水墨背景效果

为了增强古典韵味，我们设计了水墨风格的背景效果：

.ink-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -2;
    background: 
        radial-gradient(ellipse at 20% 10%, rgba(44, 62, 80, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(44, 62, 80, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(44, 62, 80, 0.02) 0%, transparent 70%);
}

这个效果使用了多层径向渐变，模拟水墨在宣纸上晕染的效果。每一层的位置、大小、透明度都经过精心调整，营造出自然、淡雅的视觉效果。

3.3 宣纸纹理叠加

为了进一步增强质感，我们添加了宣纸纹理效果：

.paper-texture {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

这里使用了一个SVG噪声滤镜作为纹理，通过Data URI的方式嵌入到CSS中。这样做的优点：

无需额外文件：纹理数据直接包含在CSS中，不需要网络请求或文件系统访问。

可维护性：纹理参数可以直接在CSS中调整。

透明度控制：opacity设置为0.03，让纹理非常淡，只在潜意识中影响用户的视觉感受。

3.4 诗词卡片设计

诗词卡片是应用最核心的视觉元素，我们的设计兼顾了美观和实用性：

.poem-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
}

.poem-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    border-color: var(--accent);
}

卡片设计的几个关键细节：

悬停效果：当鼠标悬停时，卡片会轻微上浮（translateY(-2px)），阴影加深，边框变为朱砂红，给用户明确的交互反馈。

过渡动画：所有变化都有0.3秒的过渡动画，让界面更加流畅自然。

适中的内边距：padding设置为20px，既不显得拥挤，又不会浪费空间。

3.5 三栏布局的信息架构

应用采用经典的三栏布局，在信息密度和视觉平衡之间取得了良好的折中：

┌─────────────────────────────────────────────────────────────┐
│                        顶部标题栏                            │
│  [诗] 我的诗词 - 诗意生活        [20]诗词  [0]收藏  [...]佳句│
├──────────────┬─────────────────────────┬────────────────────┤
│   分类导航   │                         │   诗词详情         │
│              │    诗词列表展示         │                    │
│   作者筛选   │   [卡片1][卡片2][卡片3] │   创作工具         │
│              │                         │                    │
│   朝代筛选   │   [卡片4][卡片5][卡片6] │   每日推荐         │
│              │                         │                    │
│   搜索功能   │                         │                    │
└──────────────┴─────────────────────────┴────────────────────┘

左侧面板：聚焦于导航和筛选功能，包括分类导航、作者筛选、朝代筛选、搜索功能。这种布局让用户能够快速找到想要的诗词。

中间面板：诗词列表展示区域，使用网格布局展示诗词卡片。这是用户浏览和选择诗词的主要区域。

右侧面板：诗词详情展示、创作工具、每日推荐。用户选择诗词后，可以在这里查看完整内容和解析。

3.6 响应式设计考量

虽然当前版本主要面向桌面端，但我们也考虑了基本的响应式设计：

@media (max-width: 1024px) {
    .main-container {
        flex-direction: column;
        height: auto;
        margin-top: 100px;
    }
    
    .left-panel,
    .center-panel,
    .right-panel {
        width: 100%;
        max-height: 400px;
    }
    
    .poem-list {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

在小屏幕设备上，布局会自动调整为垂直排列，确保应用在各种设备上都能正常使用。

---

四、诗词分析与推荐系统

4.1 风格分析数据库

我们构建了诗词风格分析数据库，能够根据诗词的体裁给出风格描述：

const styleAnalysis = {
    shi: {
        '五言绝句': { description: '短小精悍，意境深远', characteristics: ['精炼', '含蓄', '意境优美'] },
        '七言绝句': { description: '形式优美，音韵和谐', characteristics: ['流畅', '典雅', '韵味悠长'] },
        '五言古诗': { description: '自由灵活，情感真挚', characteristics: ['自由', '真挚', '自然流畅'] }
    },
    ci: {
        '词': { description: '长短句相间，音乐性强', characteristics: ['婉约', '细腻', '音律美'] }
    },
    song: {
        '曲': { description: '语言通俗，贴近生活', characteristics: ['通俗', '生动', '生活气息'] }
    }
};

这个数据库根据诗词的体裁（form字段）进行分类，每一体裁都有对应的风格描述和特点标签。

4.2 情感分类系统

我们定义了多种情感分类，帮助用户理解诗词的情感基调：

const emotionCategories = {
    '思乡': { color: '#c0392b', icon: '🏠' },
    '爱情': { color: '#e91e63', icon: '❤️' },
    '写景': { color: '#4caf50', icon: '🌲' },
    '怀古': { color: '#795548', icon: '🏛️' },
    '爱国': { color: '#f44336', icon: '🇨🇳' },
    '壮志': { color: '#ff9800', icon: '⚔️' },
    '哲理': { color: '#9c27b0', icon: '💭' },
    '惜春': { color: '#ffeb3b', icon: '🌸' },
    '羁旅': { color: '#2196f3', icon: '🚶' },
    '母爱': { color: '#ff5722', icon: '👩' },
    '边塞': { color: '#607d8b', icon: '🏰' },
    '豪放': { color: '#00bcd4', icon: '🌊' },
    '婉约': { color: '#f48fb1', icon: '🎀' },
    '孤独': { color: '#78909c', icon: '🌙' },
    '感恩': { color: '#8bc34a', icon: '🙏' }
};

每个情感分类都有对应的颜色和图标，这种视觉化的方式让情感分类更加直观。

4.3 作者简介数据库

我们为每位诗人构建了详细的简介数据库：

const authorProfiles = {
    '李白': {
        dynasty: '唐代',
        style: '豪放飘逸',
        description: '字太白，号青莲居士，唐代伟大的浪漫主义诗人，被后人誉为"诗仙"。其诗豪放飘逸，想象丰富，语言流转自然，音律和谐多变。',
        famousWorks: ['静夜思', '望庐山瀑布', '早发白帝城', '将进酒']
    },
    '杜甫': {
        dynasty: '唐代',
        style: '沉郁顿挫',
        description: '字子美，自号少陵野老，唐代伟大的现实主义诗人，被后人称为"诗圣"。其诗深刻反映社会现实，忧国忧民，格律严谨。',
        famousWorks: ['春望', '登高', '茅屋为秋风所破歌']
    },
    // ... 更多作者
};

这个数据库包含了作者的朝代、风格、描述、代表作等信息，帮助用户了解诗人的背景和特点。

4.4 综合分析函数

基于以上数据库，我们实现了综合分析函数：

function analyzePoem(poem) {
    const analysis = {
        title: poem.title,
        author: poem.author,
        dynasty: poem.dynasty,
        form: poem.form,
        style: getStyleInfo(poem),
        emotions: getEmotions(poem),
        authorProfile: getAuthorProfile(poem.author),
        metrics: getMetrics(poem),
        summary: generateSummary(poem)
    };
    
    return analysis;
}

这个函数整合了风格分析、情感分类、作者简介、统计指标等多个维度的信息，为用户提供全面的诗词分析。

4.5 智能推荐算法

基于用户当前浏览的诗词，我们可以推荐相关的作品：

function getRecommendations(poem, count = 3) {
    const recommendations = [];
    const currentTags = poem.tags;
    
    poemDatabase.forEach(p => {
        if (p.id === poem.id) return;
        
        // 计算标签匹配度
        let matchScore = 0;
        currentTags.forEach(tag => {
            if (p.tags.includes(tag)) {
                matchScore++;
            }
        });
        
        // 同一作者加分
        if (p.author === poem.author) {
            matchScore += 2;
        }
        
        // 同一朝代加分
        if (p.dynasty === poem.dynasty) {
            matchScore += 1;
        }
        
        if (matchScore > 0) {
            recommendations.push({
                poem: p,
                score: matchScore
            });
        }
    });
    
    // 按匹配度排序
    recommendations.sort((a, b) => b.score - a.score);
    
    return recommendations.slice(0, count).map(r => r.poem);
}

这个推荐算法考虑了三个因素：

1. 标签匹配度：标签重合越多，相似度越高
2. 同一作者：同一作者的作品自然更相关
3. 同一朝代：同一朝代的作品风格通常更接近

通过加权计分的方式，计算每首诗的相似度，然后推荐相似度最高的作品。

---

五、统计数据与状态管理

5.1 应用状态对象设计

整个应用的数据状态由一个全局对象appState统一管理：

const appState = {
    poems: poemDatabase,
    collections: [],
    currentCategory: 'all',
    currentAuthor: '',
    currentDynasty: '',
    searchKeyword: '',
    selectedPoemIndex: -1,
    dailyPoem: null
};

这个状态对象包含了应用运行所需的所有关键数据：

• poems：诗词数据库
• collections：收藏列表
• currentCategory：当前分类
• currentAuthor：当前选中的作者
• currentDynasty：当前选中的朝代
• searchKeyword：搜索关键词
• selectedPoemIndex：当前选中的诗词索引
• dailyPoem：今日推荐诗词

这种集中式状态管理的设计有几个优势：

数据一致性：所有模块共享同一数据源，避免了数据分散导致的同步问题。

易于扩展：当需要添加新功能时，只需在appState中增加相应的字段。

便于持久化：整个状态对象可以直接序列化存储到LocalStorage。

5.2 统计数据计算

我们实现了统计数据计算函数，用于展示诗词的总体情况：

function getStats() {
    return {
        total: poemDatabase.length,
        shi: poemDatabase.filter(p => p.type === 'shi').length,
        ci: poemDatabase.filter(p => p.type === 'ci').length,
        song: poemDatabase.filter(p => p.type === 'song').length,
        collections: appState.collections.length
    };
}

这个函数计算以下统计数据：

• total：诗词总数
• shi：诗的数量
• ci：词的数量
• song：曲的数量
• collections：收藏数量

这些统计数据展示在应用的顶部标题栏，让用户对应用的内容一目了然。

5.3 统计数据更新机制

当数据变化时，我们需要及时更新统计显示：

function updateStats() {
    const stats = getStats();
    
    document.getElementById('poemCount').textContent = stats.total;
    document.getElementById('collectionCount').textContent = stats.collections;
    document.getElementById('countAll').textContent = stats.total;
    document.getElementById('countShi').textContent = stats.shi;
    document.getElementById('countCi').textContent = stats.ci;
    document.getElementById('countSong').textContent = stats.song;
    document.getElementById('countCollection').textContent = stats.collections;
}

这个函数在以下情况会被调用：

1. 应用初始化时
2. 用户收藏或取消收藏时
3. 用户添加原创诗词时

通过这种方式，统计数据始终保持最新。

---

六、性能优化与工程实践

6.1 DOM操作优化

在渲染诗词列表时，我们采用了批量更新的策略，避免频繁的DOM操作：

let html = '';
poems.forEach((poem, index) => {
    // ... 生成HTML ...
    html += /* ... */;
});
container.innerHTML = html;

这种方式先在内存中拼接完整的HTML字符串，然后一次性更新到DOM。相比逐个添加元素，这种方式性能更好。

6.2 事件处理优化

诗词卡片使用了事件委托的思想，虽然我们使用了内联onclick，但整个卡片只绑定了一个点击事件：

<div class="poem-card" onclick="showPoemDetail(${index})">
    <!-- 内容 -->
    <div class="poem-actions">
        <button class="action-btn" onclick="event.stopPropagation(); toggleCollect(${index})">❤️</button>
        <button class="action-btn" onclick="event.stopPropagation(); readPoem(${index})">🔊</button>
    </div>
</div>

内部的按钮使用event.stopPropagation()阻止事件冒泡，避免触发展示详情的事件。这种设计既简单又有效。

6.3 筛选功能优化

筛选功能的实现非常高效，因为：

1. 所有筛选条件都是同步计算的，没有网络请求
2. 使用Array.filter()等原生方法，性能优秀
3. 筛选后只重新渲染列表，不影响其他部分

function filterPoems() {
    return poemDatabase.filter(poem => {
        // 多个筛选条件
        return matchCategory && matchAuthor && matchDynasty && matchSearch;
    });
}

6.4 内存管理考虑

虽然这个应用相对简单，但我们仍然考虑了内存管理：

1. 收藏数据只保存诗词的id，而不是整个对象，节省内存
2. 没有使用不必要的全局变量
3. 语音朗读在开始新的朗读前会取消之前的朗读

// 停止之前的朗读
window.speechSynthesis.cancel();

---

七、扩展功能与未来规划

7.1 更多诗词内容

当前版本只包含20首经典诗词，未来可以扩展诗词库，收录更多优秀作品。可以考虑以下方向：

• 增加更多朝代的诗词
• 收录更多诗人的作品
• 增加主题分类（如山水诗、边塞诗等）
• 添加诗词的注释和译文

7.2 学习功能

可以添加学习功能，帮助用户更好地理解和记忆诗词：

• 诗词背诵功能
• 诗词填空游戏
• 诗词知识问答
• 诗词历史背景介绍

7.3 社交功能

添加社交功能，让用户可以分享和交流：

• 分享诗词到社交平台
• 查看其他用户的创作
• 诗词点赞和评论
• 诗词主题社区

7.4 数据导出与同步

实现数据导出和同步功能，方便用户在多设备间使用：

• 导出收藏列表
• 导出原创作品
• 云端数据同步
• 跨设备数据迁移

7.5 智能推荐增强

增强推荐算法，提供更精准的推荐：

• 基于用户阅读历史的个性化推荐
• 关联推荐（比如阅读李白时推荐杜甫）
• 每日一句精选
• 根据心情推荐诗词

---

八、总结与心得

8.1 技术收获

通过开发"我的诗词"这款应用，我在以下几个方面获得了宝贵的技术经验：

数据结构设计：诗词数据库的设计让我对如何组织复杂的文本数据有了更深入的理解。如何平衡数据的完整性和可用性，是一个有趣的挑战。

状态管理模式：采用集中式状态对象管理应用数据，这种模式虽然简单，但对于中小型应用来说非常实用。它避免了复杂的状态管理库引入，同时保持了代码的清晰性。

用户体验优化：通过水墨背景、宣纸纹理等视觉元素，营造古典氛围，让我认识到细节设计的重要性。好的用户体验往往来自这些看似微小的细节。

Web Speech API应用：集成语音朗读功能，让我对浏览器的原生API有了更多了解，也体会到了无障碍设计的价值。

8.2 产品思考

从产品角度，这次开发让我对文化类应用的设计有了更深的认识：

简约即美：诗词本身已经足够优美，应用不需要太多花哨的功能。保持界面简洁，让用户专注于诗词内容，这是最重要的设计原则。

文化氛围营造：通过色彩、字体、背景等视觉元素，营造与诗词相匹配的文化氛围，能够大大提升用户的沉浸感。

功能聚焦：做好核心功能（浏览、阅读、收藏）比添加一堆不实用的功能更重要。用户使用诗词应用的目的很明确，就是读诗，其他功能都是辅助。

激励创作：提供简单易用的创作工具，鼓励用户创作自己的诗词，这不仅能增加用户粘性，更能传承和发扬传统文化。

8.3 未来展望

"我的诗词"目前是一个功能完整但相对简单的应用。未来可以在以下几个方向继续深化：

内容扩展：收录更多诗词，添加注释、译文、创作背景等内容，让应用成为一个完整的诗词学习平台。

智能分析：使用自然语言处理技术，对诗词进行更深入的分析，比如格律分析、意象分析等。

社区建设：构建诗词爱好者社区，让用户可以分享自己的作品和感悟，互相学习和交流。

AI辅助创作：集成AI写诗功能，帮助用户学习和创作诗词，比如给出格律建议、润色建议等。

---

九、附录：完整代码结构

9.1 文件组织

web_engine/src/main/resources/resfile/resources/app/
├── index.html          # 主页面结构
├── style.css           # 样式文件
├── main.js             # Electron主进程
├── preload.js          # 预加载脚本
└── js/
    ├── config.js       # 诗词数据库与配置
    ├── battle.js       # 核心业务逻辑
    └── ai.js           # 诗词分析模块

9.2 主要函数清单

函数名称	功能描述	所属文件
initApp	应用初始化	battle.js
showCategory	切换分类	battle.js
filterPoems	筛选诗词	config.js
renderPoemList	渲染诗词列表	battle.js
showPoemDetail	展示诗词详情	battle.js
toggleCollect	切换收藏状态	battle.js
saveCollections	保存收藏数据	battle.js
loadCollections	加载收藏数据	battle.js
readPoem	朗读诗词	battle.js
createPoem	创作诗词	battle.js
getDailyPoem	获取每日推荐	config.js
updateStats	更新统计数据	battle.js
analyzePoem	分析诗词	ai.js
getRecommendations	获取推荐	ai.js

9.3 数据库统计

类别	数量	示例
诗词总数	20	静夜思、春晓等
诗	14	五言绝句、七言绝句等
词	4	念奴娇、水调歌头等
曲	2	天净沙、山坡羊等
作者	14	李白、杜甫、苏轼等
朝代	3	唐、宋、元

---

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