三国演义人物志应用 - 鸿蒙PC Electron框架完整技术实现指南

摘要：三国演义人物志应用该项目是一款展示三国时期48位经典人物的百科应用，采用现代化深色主题设计，包含人物筛选、搜索、详情查看等功能。系统采用三层架构（UI层、业务逻辑层、数据层），核心功能包括：人物展示：响应式网格布局展示人物卡片势力筛选：按蜀汉/魏国/吴国/其他分类智能搜索：支持姓名/字的模糊匹配详情弹窗：展示人物属性、关系网和经典故事数据模型：包含武力/智力/统率/政治等多维度属

AI_零食

26人浏览 · 2026-06-06 15:52:15

AI_零食 · 2026-06-06 15:52:15 发布

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

atomgit仓库地址： https://atomgit.com/ai_lingshi/sanguorenwuzhuanji
在这里插入图片描述

一、项目概述

三国演义人物志是一款展示三国时期主要人物信息的百科应用，包含48位经典人物的详细资料。该应用采用现代化的深色主题设计，提供人物筛选、搜索、详情查看等功能。

1.1 系统架构设计

┌─────────────────────────────────────────────────────────────┐
│                   三国演义人物志应用                        │
├─────────────────────────────────────────────────────────────┤
│                    UI层 (index.html)                        │
│  ┌───────────┬───────────┬───────────┬───────────┐        │
│  │ 人物筛选  │ 人物卡片  │ 详情弹窗  │ 故事展示  │        │
│  └───────────┴───────────┴───────────┴───────────┘        │
├─────────────────────────────────────────────────────────────┤
│                  业务逻辑层 (app.js)                         │
│  ┌────────────┬────────────┬────────────┬────────────┐     │
│  │ 数据管理   │ 筛选搜索   │ 详情展示   │ 故事渲染   │     │
│  └────────────┴────────────┴────────────┴────────────┘     │
├─────────────────────────────────────────────────────────────┤
│                    数据层 (内置数据)                        │
│  ┌──────────────────────────────────────────────────────┐  │
│  │ 人物数据 · 故事数据 · 势力数据                       │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

1.2 功能模块

模块	功能描述	技术要点
人物展示	48位三国人物卡片展示	响应式网格布局
势力筛选	按蜀汉/魏国/吴国/其他筛选	按钮切换、数据过滤
人物搜索	按姓名搜索人物	实时搜索、模糊匹配
详情弹窗	人物详细信息展示	模态框、动态数据填充
经典故事	三国经典故事介绍	卡片列表渲染
势力分布	三国势力地图展示	CSS定位布局

二、数据模型设计

2.1 人物数据结构

{
    id: 1,
    name: '刘备',
    style: '玄德',
    faction: 'shu',
    birthplace: '涿郡涿县',
    position: '昭烈皇帝',
    weapon: '双股剑',
    force: 75,
    intelligence: 80,
    leadership: 95,
    politics: 85,
    description: '刘备，字玄德，蜀汉开国皇帝...',
    stories: ['桃园三结义', '三顾茅庐', '白帝城托孤'],
    relations: ['关羽', '张飞', '诸葛亮', '刘禅']
}

2.2 数据字段说明

字段	类型	说明
id	number	唯一标识
name	string	人物姓名
style	string	字
faction	string	势力（shu/wei/wu/other）
birthplace	string	籍贯
position	string	官职
weapon	string	使用武器
force	number	武力值(0-100)
intelligence	number	智力值(0-100)
leadership	number	统率值(0-100)
politics	number	政治值(0-100)
description	string	人物简介
stories	array	相关故事列表
relations	array	人物关系列表

2.3 势力编码表

编码	势力名称	颜色标识
shu	蜀汉	🔴 红色
wei	魏国	🔵 蓝色
wu	吴国	🟢 绿色
other	其他	⚪ 灰色

三、核心代码实现详解

3.1 应用类设计

class ThreeKingdomsApp {
    constructor() {
        this.characters = this.getCharactersData();
        this.stories = this.getStoriesData();
        this.currentFaction = 'all';
        this.searchQuery = '';
        this.init();
    }

    init() {
        this.initDOMReferences();
        this.bindEventListeners();
        this.renderCharacters();
        this.renderStories();
    }
}

初始化流程：

加载人物数据和故事数据
设置默认筛选条件
初始化DOM引用
绑定事件监听器
渲染人物列表和故事列表

3.2 人物数据加载

getCharactersData() {
    return [
        {
            id: 1,
            name: '刘备',
            style: '玄德',
            faction: 'shu',
            birthplace: '涿郡涿县',
            position: '昭烈皇帝',
            weapon: '双股剑',
            force: 75,
            intelligence: 80,
            leadership: 95,
            politics: 85,
            description: '刘备，字玄德，蜀汉开国皇帝...',
            stories: ['桃园三结义', '三顾茅庐', '白帝城托孤'],
            relations: ['关羽', '张飞', '诸葛亮', '刘禅']
        },
        // ... 其他47位人物
    ];
}

数据特点：

包含48位三国时期主要人物
涵盖蜀汉、魏国、吴国三大势力及其他群雄
每个人物包含完整的属性数据

3.3 人物卡片渲染

renderCharacters() {
    let filtered = this.characters;

    if (this.currentFaction !== 'all') {
        filtered = filtered.filter(c => c.faction === this.currentFaction);
    }

    if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        filtered = filtered.filter(c => 
            c.name.toLowerCase().includes(query) ||
            c.style.toLowerCase().includes(query)
        );
    }

    if (filtered.length === 0) {
        this.charactersGrid.innerHTML = `<p style="text-align: center; color: rgba(255,255,255,0.5); padding: 40px;">未找到匹配的人物</p>`;
        return;
    }

    this.charactersGrid.innerHTML = filtered.map(character => {
        return `
            <div class="character-card ${character.faction}" onclick="app.showCharacterDetail(${character.id})">
                <div class="character-header">
                    <div class="character-icon">👤</div>
                    <div class="character-name">
                        <h3>${character.name}</h3>
                        <span class="faction-badge ${character.faction}">${this.getFactionName(character.faction)}</span>
                    </div>
                </div>
                <div class="character-stats">
                    <div class="stat-item">
                        <span class="label">武力</span>
                        <span class="value ${this.getStatClass(character.force)}">${character.force}</span>
                    </div>
                    <div class="stat-item">
                        <span class="label">智力</span>
                        <span class="value ${this.getStatClass(character.intelligence)}">${character.intelligence}</span>
                    </div>
                    <div class="stat-item">
                        <span class="label">统率</span>
                        <span class="value ${this.getStatClass(character.leadership)}">${character.leadership}</span>
                    </div>
                    <div class="stat-item">
                        <span class="label">政治</span>
                        <span class="value ${this.getStatClass(character.politics)}">${character.politics}</span>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

渲染流程：

应用筛选条件（势力筛选）
应用搜索条件（姓名/字搜索）
处理空结果情况
生成人物卡片HTML

3.4 属性值颜色编码

getStatClass(value) {
    if (value >= 85) return 'high';
    if (value >= 60) return 'medium';
    return 'low';
}

颜色等级划分：

高(85-100)：绿色
中(60-84)：黄色
低(0-59)：红色

3.5 人物详情弹窗

showCharacterDetail(id) {
    const character = this.characters.find(c => c.id === id);
    if (!character) return;

    this.modalIcon.textContent = '👤';
    this.modalName.textContent = character.name;
    this.modalFaction.textContent = this.getFactionName(character.faction);
    this.modalFaction.className = `faction-badge ${character.faction}`;
    this.modalStyle.textContent = character.style;
    this.modalBirthplace.textContent = character.birthplace;
    this.modalPosition.textContent = character.position;
    this.modalWeapon.textContent = character.weapon;
    
    this.modalForce.style.width = `${character.force}%`;
    this.modalIntelligence.style.width = `${character.intelligence}%`;
    this.modalLeadership.style.width = `${character.leadership}%`;
    this.modalPolitics.style.width = `${character.politics}%`;
    
    this.modalDescription.textContent = character.description;
    
    this.modalStories.innerHTML = character.stories.map(story => 
        `<li>${story}</li>`
    ).join('');
    
    this.modalRelations.innerHTML = character.relations.map(relation => 
        `<span class="relation-tag">${relation}</span>`
    ).join('');
    
    this.modalOverlay.style.display = 'flex';
}

弹窗内容：

人物基本信息（姓名、字、籍贯、官职、武器）
属性进度条（武力、智力、统率、政治）
人物简介
相关故事列表
人物关系标签

3.6 势力筛选功能

this.filterButtons.forEach(btn => {
    btn.addEventListener('click', (e) => {
        this.filterButtons.forEach(b => b.classList.remove('active'));
        e.target.classList.add('active');
        this.currentFaction = e.target.dataset.faction;
        this.renderCharacters();
    });
});

筛选逻辑：

移除所有按钮的active状态
添加当前按钮的active状态
更新当前筛选的势力
重新渲染人物列表

3.7 人物搜索功能

this.searchBtn.addEventListener('click', () => {
    this.searchQuery = this.searchInput.value.trim();
    this.renderCharacters();
});

this.searchInput.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') {
        this.searchQuery = this.searchInput.value.trim();
        this.renderCharacters();
    }
});

搜索特性：

支持点击搜索按钮
支持回车键搜索
支持按姓名或字搜索
支持模糊匹配

3.8 故事数据加载

getStoriesData() {
    return [
        {
            id: 1,
            title: '桃园三结义',
            description: '刘备、关羽、张飞在桃园结拜为异姓兄弟...'
        },
        // ... 其他故事
    ];
}

故事卡片渲染：

renderStories() {
    this.storiesGrid.innerHTML = this.stories.map(story => {
        return `
            <div class="story-card">
                <h3>${story.title}</h3>
                <p>${story.description}</p>
            </div>
        `;
    }).join('');
}

四、UI设计与样式

4.1 深色主题背景

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

配色方案：

深蓝紫色渐变背景
营造历史厚重感
适合三国主题

4.2 人物卡片样式

.character-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.character-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.character-card.shu {
    border-left: 4px solid #dc143c;
}

.character-card.wei {
    border-left: 4px solid #4a90d9;
}

.character-card.wu {
    border-left: 4px solid #2ecc71;
}

设计特点：

半透明背景卡片
左侧势力颜色标识条
悬停上移动画效果

4.3 属性进度条样式

.stat-bar {
    flex: 1;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #e74c3c 0%, #f39c12 100%);
}

.stat-fill.intelligence {
    background: linear-gradient(90deg, #9b59b6 0%, #8e44ad 100%);
}

.stat-fill.leadership {
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
}

.stat-fill.politics {
    background: linear-gradient(90deg, #1abc9c 0%, #16a085 100%);
}

进度条配色：

武力：红橙渐变
智力：紫色渐变
统率：蓝色渐变
政治：青绿渐变

4.4 势力分布图

.faction-area.wei {
    top: 20px;
    left: 5%;
    width: 40%;
    height: 70%;
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.3) 0%, rgba(53, 122, 189, 0.2) 100%);
}

.faction-area.shu {
    top: 30%;
    right: 5%;
    width: 35%;
    height: 60%;
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.3) 0%, rgba(255, 68, 68, 0.2) 100%);
}

.faction-area.wu {
    bottom: 20px;
    left: 35%;
    width: 30%;
    height: 40%;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.3) 0%, rgba(39, 174, 96, 0.2) 100%);
}

布局特点：

魏国在左上（北方）
蜀汉在右上（西川）
吴国在下方（江东）

4.5 响应式设计

@media (max-width: 768px) {
    .characters-grid {
        grid-template-columns: 1fr;
    }
    
    .faction-area {
        position: static;
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    .stats-section {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .search-section {
        flex-direction: column;
    }
}

适配策略：

桌面端：多列网格布局
平板端：单列布局
移动端：紧凑布局

五、功能扩展建议

5.1 人物对比功能

compareCharacters(ids) {
    const characters = ids.map(id => this.characters.find(c => c.id === id));
    
    // 生成对比表格
    const html = `
        <table>
            <tr>
                <th>属性</th>
                ${characters.map(c => `<th>${c.name}</th>`).join('')}
            </tr>
            <tr>
                <td>武力</td>
                ${characters.map(c => `<td>${c.force}</td>`).join('')}
            </tr>
            <!-- 其他属性... -->
        </table>
    `;
    
    this.compareModal.innerHTML = html;
    this.compareModal.style.display = 'flex';
}

5.2 人物收藏功能

toggleFavorite(id) {
    if (!this.favorites) {
        this.favorites = [];
    }
    
    const index = this.favorites.indexOf(id);
    if (index >= 0) {
        this.favorites.splice(index, 1);
    } else {
        this.favorites.push(id);
    }
    
    localStorage.setItem('threeKingdomsFavorites', JSON.stringify(this.favorites));
}

5.3 故事详情页

showStoryDetail(id) {
    const story = this.stories.find(s => s.id === id);
    // 显示故事详细内容、相关人物、历史背景等
}

六、总结

三国演义人物志应用通过完整的功能实现，为用户提供了一个全面了解三国人物的平台。核心功能包括：

人物展示：48位三国人物卡片展示
势力筛选：按蜀汉/魏国/吴国/其他筛选
人物搜索：按姓名或字搜索
详情查看：人物完整信息展示
经典故事：16个三国故事介绍
势力分布：三国势力地图

技术亮点

数据驱动设计：所有人物和故事数据均采用数据驱动
响应式布局：适配各种设备尺寸
深色主题：营造历史厚重感
交互丰富：悬停效果、弹窗动画、进度条动画

未来扩展方向

人物对比：支持多人对比
收藏功能：收藏喜欢的人物
故事详情：详细的故事介绍
历史时间线：三国历史时间线展示
人物关系图：可视化人物关系

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

HarmonyOS 服务卡片实战教程：结合 CheckMe 项目拆解完整实现思路

人工智能6S服务平台

星座运势-万能词汇应用 - 鸿蒙PC Electron框架完整技术实现指南

人工智能6S服务平台

甄嬛人物日志 - 鸿蒙PC Electron框架完整技术实现指南

人工智能6S服务平台

所有评论(0)

查看更多评论

AI_零食

@ai_lingshi

已为社区贡献9条内容

三国演义人物志应用 - 鸿蒙PC Electron框架完整技术实现指南

AI_零食

一、项目概述

1.1 系统架构设计

1.2 功能模块

二、数据模型设计

2.1 人物数据结构

2.2 数据字段说明

2.3 势力编码表

三、核心代码实现详解

3.1 应用类设计

3.2 人物数据加载

3.3 人物卡片渲染

3.4 属性值颜色编码

3.5 人物详情弹窗

3.6 势力筛选功能

3.7 人物搜索功能

3.8 故事数据加载

四、UI设计与样式

4.1 深色主题背景

4.2 人物卡片样式

4.3 属性进度条样式

4.4 势力分布图

4.5 响应式设计

五、功能扩展建议

5.1 人物对比功能

5.2 人物收藏功能

5.3 故事详情页

六、总结

技术亮点

未来扩展方向

所有评论(0)

温馨提示：您尚未绑定手机号

AI_零食