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

atomgit仓库地址： https://atomgit.com/xiaomei11/songchaoguanjie

一、项目概述

宋朝官阶制度APP是一个历史文化知识类应用，旨在向用户系统展示中国宋朝的官僚体系结构。该应用通过现代化的UI设计和交互方式，将复杂的古代官制知识以直观、易懂的形式呈现给用户。

1.1 系统架构设计

┌─────────────────────────────────────────────────────────────┐
│                    宋朝官阶制度APP系统                       │
├─────────────────────────────────────────────────────────────┤
│                    UI层 (index.html)                        │
│  ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
│  │   中央官制   │   地方官制   │   官阶品级   │   著名官员   │  │
│  │    展示区    │    展示区    │    展示区    │    展示区    │  │
│  └─────────────┴─────────────┴─────────────┴─────────────┘  │
├─────────────────────────────────────────────────────────────┤
│                  业务逻辑层 (app.js)                         │
│  ┌────────────┬────────────┬────────────┬────────────┐    │
│  │  导航管理   │  数据渲染   │  筛选过滤   │  模态弹窗   │    │
│  └────────────┴────────────┴────────────┴────────────┘    │
├─────────────────────────────────────────────────────────────┤
│                  数据层 (JSON数据结构)                       │
│  ┌──────────────────────────────────────────────────────┐ │
│  │  官阶品级数据 · 著名官员数据 · 机构职能数据          │ │
│  └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

1.2 核心功能模块

模块	功能描述	技术要点
中央官制	展示三省六部制的层级结构	层级可视化、卡片交互
地方官制	展示路、州、县三级行政体系	分级展示、信息组织
官阶品级	展示九品十八级的官阶制度	筛选过滤、详情弹窗
著名官员	展示宋朝著名文臣武将	分类筛选、人物详情
数据管理	管理官制数据和官员数据	JSON数据结构、动态渲染

1.3 设计理念

应用采用中国古典风格配色方案，以深棕色和金色为主色调，营造出典雅庄重的历史氛围。同时结合现代UI设计原则，确保良好的用户体验和视觉效果。

---

二、数据模型设计

2.1 官阶品级数据结构

{
    id: 1,                          // 唯一标识
    grade: '正一品',                 // 品级名称
    level: 'high',                   // 级别分类（high/mid/low）
    description: '宋朝最高品级...',   // 品级说明
    officials: ['太师', '太傅', ...] // 代表官职列表
}

设计要点：

• id：唯一标识，用于详情查询
• grade：完整的品级名称，包含"正/从"和品数
• level：便于筛选过滤的级别分类
• description：详细的品级说明文字
• officials：该品级对应的代表性官职列表

2.2 著名官员数据结构

{
    id: 1,                          // 唯一标识
    name: '包拯',                    // 姓名
    alias: '包青天',                 // 别名/称号
    dynasty: '北宋',                 // 所属朝代
    category: 'politics',            // 分类（politics/military/literature）
    avatar: '⚖️',                    // 头像图标
    rank: '从三品',                  // 最高官职品级
    positions: ['开封府尹', ...],     // 历任官职
    description: '北宋著名清官...',   // 人物简介
    achievements: ['改革诉讼制度...'] // 主要成就
}

设计要点：

• category：支持按政治、军事、文学分类筛选
• avatar：使用Emoji图标直观展示人物特点
• positions：展示人物历任的重要官职
• achievements：突出人物的历史贡献

2.3 机构职能数据结构

{
    '中书门下': {
        description: '宋朝最高行政机构...',
        responsibilities: ['决策国家重大事务', ...],
        history: '宋初沿用唐制...'
    }
}

2.4 官阶品级数据示例

品级	级别	代表官职
正一品	高级	太师、太傅、太保、中书令
从一品	高级	枢密使、开府仪同三司、太子太师
正二品	高级	尚书左仆射、尚书右仆射、参知政事
正三品	高级	吏部尚书、户部尚书、礼部尚书
从三品	中级	翰林学士、龙图阁直学士、枢密副使
正四品	中级	吏部侍郎、户部侍郎、中书舍人
正七品	低级	太常寺博士、太学博士、知县
从九品	低级	诸州文学、助教、典史

---

三、UI组件设计

3.1 页面布局结构

应用采用经典的"顶部导航 + 内容区域"布局模式：

┌─────────────────────────────────────────────────────┐
│  Header: 标题 + 副标题                              │
├─────────────────────────────────────────────────────┤
│  Navigation: 中央官制 | 地方官制 | 官阶品级 | 著名官员 │
├─────────────────────────────────────────────────────┤
│  Main Content: 对应Tab的内容区域                     │
├─────────────────────────────────────────────────────┤
│  Footer: 版权信息                                   │
└─────────────────────────────────────────────────────┘

3.2 颜色方案

颜色变量	色值	用途
--primary-color	#8B4513	主色调，用于标题、按钮
--secondary-color	#D2691E	辅助色，用于强调
--gold-color	#FFD700	金色，用于装饰和高亮
--bg-color	#F5F0E6	背景色
--card-bg	#FFF8DC	卡片背景色
--border-color	#DEB887	边框色

3.3 核心组件设计

3.3.1 机构卡片组件

<div class="office-card" data-id="...">
    <div class="office-icon">📄</div>
    <div class="office-info">
        <h3>机构名称</h3>
        <p>机构职能描述</p>
    </div>
</div>

3.3.2 官阶卡片组件

<div class="rank-card" data-id="...">
    <div class="rank-header">
        <span class="rank-title">正一品</span>
        <span class="rank-grade">高级</span>
    </div>
    <ul class="rank-offices">
        <li>太师</li>
        <li>太傅</li>
    </ul>
</div>

3.3.3 官员卡片组件

<div class="official-card" data-id="...">
    <div class="official-avatar">⚖️</div>
    <div class="official-name">包拯</div>
    <div class="official-dynasty">北宋 · 从三品</div>
    <div class="official-description">...</div>
</div>

---

四、核心代码实现

4.1 导航切换功能

导航系统采用Tab切换模式，点击不同按钮显示对应内容区域：

function initNavigation() {
    const navBtns = document.querySelectorAll('.nav-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    navBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const tabId = btn.dataset.tab;
            
            navBtns.forEach(b => b.classList.remove('active'));
            tabContents.forEach(tab => tab.classList.remove('active'));
            
            btn.classList.add('active');
            document.getElementById(tabId).classList.add('active');
        });
    });
}

实现要点：

• 使用data-tab属性存储目标Tab的ID
• 通过切换active类实现Tab的显示/隐藏
• 支持任意数量的Tab扩展

4.2 官阶数据渲染与筛选

官阶展示区支持按级别筛选，筛选逻辑如下：

function renderRanks(filter = 'all') {
    const ranksGrid = document.getElementById('ranksGrid');
    let filteredRanks = rankData;
    
    if (filter === 'high') {
        filteredRanks = rankData.filter(r => r.level === 'high');
    } else if (filter === 'mid') {
        filteredRanks = rankData.filter(r => r.level === 'mid');
    } else if (filter === 'low') {
        filteredRanks = rankData.filter(r => r.level === 'low');
    }
    
    ranksGrid.innerHTML = filteredRanks.map(rank => `
        <div class="rank-card" data-id="${rank.id}">
            <div class="rank-header">
                <span class="rank-title">${rank.grade}</span>
                <span class="rank-grade">${getLevelLabel(rank.level)}</span>
            </div>
            <ul class="rank-offices">
                ${rank.officials.slice(0, 4).map(o => `<li>${o}</li>`).join('')}
            </ul>
        </div>
    `).join('');
    
    attachRankCardEvents();
}

实现要点：

• 使用Array.filter()进行数据筛选
• 使用Array.map()和模板字符串动态生成HTML
• 使用slice(0, 4)限制显示数量，保持卡片整洁
• 事件绑定在渲染完成后进行，确保元素存在

4.3 详情模态弹窗

点击卡片后弹出详情模态框，展示完整信息：

function showRankDetail(rank) {
    const modal = document.getElementById('detailModal');
    const title = document.getElementById('modalTitle');
    const body = document.getElementById('modalBody');
    
    title.textContent = rank.grade;
    body.innerHTML = `
        <h4>品级说明</h4>
        <p>${rank.description}</p>
        <h4>代表官职</h4>
        <ul>
            ${rank.officials.map(o => `<li>${o}</li>`).join('')}
        </ul>
    `;
    
    modal.style.display = 'block';
}

function initModal() {
    const modal = document.getElementById('detailModal');
    const overlay = document.getElementById('modalOverlay');
    const closeBtn = document.getElementById('closeModalBtn');
    
    overlay.addEventListener('click', () => { modal.style.display = 'none'; });
    closeBtn.addEventListener('click', () => { modal.style.display = 'none'; });
    
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && modal.style.display === 'block') {
            modal.style.display = 'none';
        }
    });
}

实现要点：

• 支持三种关闭方式：点击遮罩、点击关闭按钮、按Esc键
• 使用innerHTML动态填充内容
• 模态框居中显示，支持滚动

4.4 官员分类筛选

官员展示区支持按政治、军事、文学分类筛选：

function renderOfficials(filter = 'all') {
    const officialsGrid = document.getElementById('officialsGrid');
    let filteredOfficials = officialData;
    
    if (filter !== 'all') {
        filteredOfficials = officialData.filter(o => o.category === filter);
    }
    
    officialsGrid.innerHTML = filteredOfficials.map(official => `
        <div class="official-card" data-id="${official.id}">
            <div class="official-avatar">${official.avatar}</div>
            <div class="official-name">${official.name}</div>
            <div class="official-dynasty">${official.dynasty} · ${official.rank}</div>
            <div class="official-description">${official.description.substring(0, 60)}...</div>
        </div>
    `).join('');
    
    attachOfficialCardEvents();
}

实现要点：

• 使用substring(0, 60)截取简介，保持卡片高度一致
• 通过data-id关联完整数据
• Emoji头像增强视觉识别度

---

五、CSS样式设计

5.1 响应式布局

应用采用移动端优先的响应式设计：

@media (max-width: 768px) {
    .header-content h1 {
        font-size: 1.8rem;
    }
    
    .nav-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-btn {
        width: 100%;
        max-width: 250px;
    }
    
    .office-grid, .ranks-grid, .officials-grid {
        grid-template-columns: 1fr;
    }
    
    .office-card {
        flex-direction: column;
        text-align: center;
    }
}

5.2 卡片悬停效果

.office-card {
    transition: all 0.3s ease;
}

.office-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.2);
    border-color: var(--secondary-color);
}

5.3 模态框样式

.modal-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

---

六、数据完整性验证

6.1 官阶数据完整性

品级等级	数据量	验证结果
高级（一品-三品）	6条	✅ 完整
中级（四品-六品）	6条	✅ 完整
低级（七品-九品）	6条	✅ 完整
总计	18条	✅ 完整覆盖九品十八级

6.2 官员数据完整性

分类	数据量	代表人物
政治	4人	包拯、王安石、范仲淹、司马光
军事	4人	岳飞、辛弃疾、文天祥、韩世忠
文学	4人	苏轼、欧阳修、陆游、柳永
总计	12人	✅ 涵盖各领域代表人物

---

七、功能测试清单

测试项	预期结果	测试状态
导航切换	点击导航按钮正确切换内容	✅ 通过
官阶筛选	筛选按钮正确过滤品级数据	✅ 通过
官员筛选	筛选按钮正确过滤官员数据	✅ 通过
详情弹窗	点击卡片弹出详细信息	✅ 通过
弹窗关闭	支持点击遮罩、按钮、Esc关闭	✅ 通过
响应式布局	移动端显示正常	✅ 通过
悬停效果	卡片悬停有动画效果	✅ 通过
数据渲染	所有数据正确显示	✅ 通过

---

八、扩展功能建议

8.1 搜索功能

function searchOfficials(keyword) {
    return officialData.filter(o => 
        o.name.includes(keyword) ||
        o.alias.includes(keyword) ||
        o.description.includes(keyword)
    );
}

8.2 收藏功能

使用LocalStorage保存用户收藏的官员：

function addToFavorites(officialId) {
    const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
    if (!favorites.includes(officialId)) {
        favorites.push(officialId);
        localStorage.setItem('favorites', JSON.stringify(favorites));
    }
}

8.3 官职对比功能

function compareRanks(rankIds) {
    return rankData.filter(r => rankIds.includes(r.id));
}

---

九、总结

宋朝官阶制度APP通过清晰的数据结构设计和现代化的UI展示，成功将复杂的古代官制知识呈现给用户。应用包含以下核心特性：

1. 完整的数据覆盖：涵盖九品十八级官阶和12位著名官员
2. 直观的分类展示：支持按级别和领域筛选
3. 丰富的交互体验：卡片悬停效果、详情弹窗、平滑切换
4. 响应式设计：适配各种屏幕尺寸
5. 古典风格配色：深棕色+金色营造历史氛围

项目采用纯前端技术栈实现，无需后端支持，便于部署和维护。代码结构清晰，易于扩展新功能。