复刻明代架阁库分类归档流程的轻量纯前端实操指南

一、前置准备：1分钟搭建基础开发环境

我们用无需后端的本地单页技术栈实现，避免服务器部署门槛，需准备：

• 任意纯文本编辑器（推荐VS Code稳定版：https://code.visualstudio.com/）
• 电脑自带的Chrome/Edge浏览器

环境验证操作

打开VS Code，新建文件夹命名为MingDangSystem，在文件夹内新建index.html、style.css、app.js三个文件，文件夹结构为：

``` MingDangSystem/ ├── index.html ├── style.css └── app.js ```

二、核心架构设计（贴合明代架阁库逻辑）

复刻流程映射：

• 黄册造册 → 档案录入表单
• 千字文编号 → 自动生成千字文分区+顺序双重编号
• 架阁库分区存贮 → 左侧分区列表筛选
• 架阁标签检索 → 顶部关键词/编号/年份多维度搜索
• 拆页销毁标注 → 点击修改状态为“已销毁”

三、代码实现：可直接复制粘贴到对应文件

1. index.html（页面骨架，对应黄册库布局）

```html

查档

造册录入

当前分区档案

双重编号	档案名称	造册年份	状态	操作

```

2. style.css（复古极简布局，适配移动端）

```css { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", "SimSun", serif; } body { background-color: f8f4e9; color: 333; } .search-area { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: d7c8b0; border-bottom: 2px solid 8b6f47; } .search-box { display: flex; gap: 10px; } input[type="text"], input[type="number"] { padding: 8px 12px; border: 1px solid 8b6f47; border-radius: 3px; background-color: fff; } button { padding: 8px 16px; border: 1px solid 8b6f47; border-radius: 3px; background-color: f0e6d3; cursor: pointer; } .primary-btn { background-color: 8b6f47; color: fff; } .main-content { display: flex; height: calc(100vh - 70px); } .partition-list { width: 20%; min-width: 150px; background-color: e9e2d3; border-right: 2px solid 8b6f47; padding: 15px; overflow-y: auto; } .partition-list h3, .archive-list h3 { font-size: 18px; margin-bottom: 15px; border-bottom: 1px dashed 8b6f47; padding-bottom: 5px; } .partition-list li { padding: 8px 10px; margin-bottom: 5px; border-radius: 3px; cursor: pointer; } .partition-list li.active { background-color: 8b6f47; color: fff; } .archive-list { width: 80%; padding: 15px; overflow-y: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid d7c8b0; } th { background-color: e9e2d3; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } .hidden { display: none; } .modal-content { background-color: f8f4e9; padding: 30px; border-radius: 5px; width: 400px; border: 2px solid 8b6f47; } .close { float: right; font-size: 24px; cursor: pointer; color: 8b6f47; } .form-item { margin-bottom: 15px; } .form-item label { display: block; margin-bottom: 5px; } .form-item input { width: 100%; } ```

3. app.js（核心逻辑，含千字文编号生成、本地存储）

```javascript // 前置数据：千字文前50字（模拟明代常用架阁分区） const thousandCharacters = "天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈"; // 本地存储键名 const STORAGE_KEY = "ming_dang_archives"; // 当前选中分区索引 let currentPartitionIndex = 0; // 获取DOM元素 const partitionUl = document.getElementById("partitionUl"); const archiveTbody = document.getElementById("archiveTbody"); const addBtn = document.getElementById("addBtn"); const addModal = document.getElementById("addModal"); const closeBtn = document.querySelector(".close"); const addForm = document.getElementById("addForm"); const searchInput = document.getElementById("searchInput"); const searchBtn = document.getElementById("searchBtn"); // 初始化函数 function init() { renderPartitions(); renderArchives(); bindEvents(); } // 渲染架阁分区 function renderPartitions() { partitionUl.innerHTML = thousandCharacters.split("").map((char, index) => `

${char}字号架阁

` ).join(""); } // 渲染档案列表（默认当前分区，搜索时覆盖） function renderArchives(archives = null) { // 获取所有档案，无则返回空数组 let allArchives = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; // 未传入搜索结果时，筛选当前分区 if (!archives) { archives = allArchives.filter(archive => archive.partitionIndex === currentPartitionIndex); } // 渲染表格 archiveTbody.innerHTML = archives.length ? archives.map(archive => ` ${thousandCharacters[archive.partitionIndex]}-${archive.sequence} ${archive.name} ${archive.year} ${archive.status === 'normal' ? '存贮中' : '已销毁'} ${archive.status === 'normal' ? `销毁` : ''} `).join("") : `当前架阁无档案`; } // 自动生成千字文分区+顺序双重编号 function generateDualNumber() { let allArchives = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; // 筛选当前分区的档案 let currentArchives = allArchives.filter(archive => archive.partitionIndex === currentPartitionIndex); // 生成顺序号（自动补零到3位） let sequence = (currentArchives.length + 1).toString().padStart(3, '0'); // 生成唯一ID（时间戳+分区索引+顺序） let id = `${Date.now()}-${currentPartitionIndex}-${sequence}`; return { id, sequence }; } // 销毁档案（修改状态） function destroyArchive(id) { let allArchives = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; allArchives = allArchives.map(archive => { if (archive.id === id) { archive.status = 'destroyed'; } return archive; }); localStorage.setItem(STORAGE_KEY, JSON.stringify(allArchives)); renderArchives(); } // 绑定事件 function bindEvents() { // 点击分区切换 partitionUl.addEventListener('click', (e) => { if (e.target.tagName === 'LI') { currentPartitionIndex = parseInt(e.target.dataset.index); renderPartitions(); renderArchives(); } }); // 打开/关闭造册弹窗 addBtn.addEventListener('click', () => addModal.classList.remove('hidden')); closeBtn.addEventListener('click', () => addModal.classList.add('hidden')); window.addEventListener('click', (e) => e.target === addModal && addModal.classList.add('hidden')); // 提交造册 addForm.addEventListener('submit', (e) => { e.preventDefault(); let { id, sequence } = generateDualNumber(); let newArchive = { id, partitionIndex: currentPartitionIndex, sequence, name: document.getElementById('archiveName').value.trim(), year: document.getElementById('archiveYear').value, keywords: document.getElementById('archiveKeywords').value.trim().split(',').map(k => k.trim()), status: 'normal' }; let allArchives = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; allArchives.push(newArchive); localStorage.setItem(STORAGE_KEY, JSON.stringify(allArchives)); // 重置表单并关闭弹窗 addForm.reset(); addModal.classList.add('hidden'); renderArchives(); }); // 检索档案（支持编号、名称、关键词、年份） const doSearch = () => { let keyword = searchInput.value.trim().toLowerCase(); if (!keyword) { renderArchives(); return; } let allArchives = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; let result = allArchives.filter(archive => { let archiveStr = `${thousandCharacters[archive.partitionIndex]}-${archive.sequence}${archive.name}${archive.year}${archive.keywords.join('')}`.toLowerCase(); return archiveStr.includes(keyword); }); renderArchives(result); }; searchBtn.addEventListener('click', doSearch); searchInput.addEventListener('keypress', (e) => e.key === 'Enter' && doSearch()); } // 暴露销毁函数到全局（因模板字符串中绑定的事件需要） window.destroyArchive = destroyArchive; // 页面加载完成后初始化 window.addEventListener('DOMContentLoaded', init); ```

四、操作流程验证（零出错步骤）

1. 用VS Code打开MingDangSystem文件夹，右键点击index.html，选择Open with Live Server（若没有该插件，直接双击文件在浏览器打开也可，但本地存储功能在部分浏览器文件模式下受限，推荐VS Code安装Live Server插件）
2. 造册录入：点击顶部造册录入，填写必填项（关键词用中文逗号或英文逗号分隔均可，年份必须在1368-1644之间），点击提交造册
3. 分区筛选：点击左侧架阁分区，查看不同分区的档案
4. 检索档案：在顶部输入框输入编号（如“天-001”）、名称、年份或关键词，按回车或点击查档
5. 销毁档案：点击存贮中档案的销毁按钮，状态变为红色已销毁

五、数据备份与恢复

所有数据存储在浏览器本地存储中，备份恢复操作：

1. 备份：按F12打开开发者工具，切换到Application标签（Chrome），左侧点击Local Storage下的本地地址，复制ming_dang_archives键对应的值到记事本保存
2. 恢复：在本地存储中找到ming_dang_archives键，粘贴备份值后刷新页面