# 灵猫链 (Lingma Chain) UI 设计规范

> Design System v2.3 — Premium Compliance Edition
> 本文档是 `clients/ui-design/` 下所有页面的唯一设计准则，任何新增页面 / 修改样式都必须遵守本规范。
> 代码实现见 [`css/design-system.css`](./css/design-system.css)，修改颜色/间距/动效时应同步更新本文档与 CSS 变量。
> 当前规模：33 个页面（含全生态导航中心 portal.html）+ 7 个样式文件 + 7 个脚本引擎，全部零依赖纯 HTML+CSS+JS。
> **统一入口**：`portal.html` 导航中心（收录全部 32 个功能页，支持搜索/分组筛选）；本地双击项目根目录 `启动灵猫链UI.bat` 一键启动服务器并打开导航页。
> **线上部署**：已全量部署至公网 `https://rpc.blackhorsevideo.com/`，根路径 `/` 直达 `portal.html` 导航中心；钱包页 `/index.html`（PIN `123456`）已**只读**接入线上链节点（同源 `/rpc` 代理 → `127.0.0.1:9400`），实时展示真实余额/交易/区块高度/TPS，离线自动回落演示数据（详见 §7.9）。

## 快速导航（页面入口）
| 模块 | 文件 | 核心体验点 |
|------|------|-----------|
| 🧭 全生态导航中心 | `portal.html` | **统一入口**：32 页分组卡片 + 搜索筛选 + 一键启动说明 |
| 🖥️ 桌面钱包 | `index.html` | 锁屏 PIN（123456）→ 余额滚动 → 转账全流程 |
| 📱 移动钱包 | `mobile.html` | 5 步引导（含 24 词助记词验证）+ 4 Tab |
| 🔍 区块浏览器 | `explorer.html` | DAG Canvas 粒子动画 + 实时统计 |
| 🏪 DApp 商店 | `dapp-store.html` | Hero 轮播 + 分类 + 趋势网格 |
| 💰 积分详情 | `token.html` | 官方积分说明 + 服务调用柱状图 + 合规芯片 |
| ⛓️ 节点共建 | `staking.html` | 验证者排序 + 两步共建模态（无收益承诺） |
| 🗳️ 治理投票 | `governance.html` | 提案进度条 + 三选一投票 |
| 🧩 插件钱包 | `extension.html` | 360×600 三屏审批（连接/签名） |
| 🛠️ 管理中心 | `wallet-tools.html` | 账户/地址簿/通知/授权/站点（支持方向键导航） |
| 🧪 合约演练 | `playground.html` | BO 编译/部署/调用沙盒 |
| 📍 地址详情 | `address-detail.html` | 交易/持有种类/共建三 Tab |
| 🖌️ 品牌图标 | `brand-icons.html` | 16 个 SVG 图标库 + 中英双语演示 |
| 🖼️ 数字藏品馆 | `nft-gallery.html` | 生成式艺术 + 稀有度筛选 + 转赠/展示（无买卖） |
| 🧾 服务中心 | `services.html` | 6 项人民币明码标价服务 + 分类筛选 + 数字滚动 |
| 🏛️ 联盟链控制台 | `consortium.html` | 7 模块 SPA（仪表盘/成员/节点/交易/审计/治理/合约） |
| 🪪 实名认证 | `kyc.html` | 个人/企业双通道四步认证流程 + 权限矩阵 + 认证回执（链上仅存哈希） |

---

## 1. 设计哲学

| 原则 | 说明 |
|------|------|
| **干净优先** | 大面积留白，内容密度克制；一屏只有一个视觉焦点 |
| **靛蓝品牌感** | 主色不用普通蓝 `#2563EB`，用偏紫的靛蓝 `#4F46E5 → #7C3AED` 渐变，体现高级感 |
| **柔和层次** | 用带靛蓝色调的阴影（而非纯黑阴影）营造"浮起"感 |
| **动效有弹性** | 关键交互（卡片悬浮、成功反馈、解锁）使用弹性曲线；常规过渡用平滑曲线 |
| **双主题对等** | 亮色 / 暗色主题是一等公民，通过 `data-theme` 属性切换，组件不允许写死颜色 |
| **合规优先** | 所有页面遵守第 0 节合规设计红线，无任何二级交易/价格/融资/炒作元素 |

### 品牌关键词
灵猫（Civet）· 信誉共识 · DAG · 快速 · 可信

---

## 0. 合规设计红线（Compliance Red Lines）—— 最高优先级

> LMP（灵猫积分）是灵猫链生态的**信誉贡献积分**——通过官方活动发放 / 服务消费返还 / 节点共建 / 治理贡献获得的链上燃料积分，**不是代币、不具有货币属性**，只消耗、无市场价格、不可买卖兑换提现。**严禁任何“国家发行 / 官方发行总量 / 总量恒定 / 发行量 / 币龄”等发币话术**（虚构国家背书涉虚假宣传；固定总量 + 可自由转赠 = 代币实质，叫“积分”也改变不了）。任何页面、组件、文案、图表都不得出现二级交易、价格波动、融资、炒作相关元素。本节优先级高于本文档其余所有章节。

### 0.1 绝对禁止（出现即违规）
- ❌ 价格类：LMP 任何法币/虚拟币折算（≈ $xxx、USD、USDT、BTC、ETH）、K 线图、涨跌幅、走势曲线、地板价
- ❌ 交易类：买卖、兑换（Swap）、提现、挂单、撮合、行情、交易所、借贷、杠杆
- ❌ 收益类：APY/APR、年化收益率、利息、质押奖励、收益承诺、“稳赚”类话术
- ❌ 融资类：ICO/IDO、代币发行、募资、认购、份额、通缩升值预期
- ❌ 称谓类：把 LMP 称为“代币/币/资产”，把质押称为“理财”，把用户称为“投资者”（仅否认语境可用，如“LMP 不是代币”）
- ❌ 境外加密货币相关：稳定币、 gas 以美元计价、境外交易所名称

### 0.2 统一合规口径（必须遵守）
| 领域 | 唯一口径 |
|------|----------|
| LMP 定性 | “灵猫链生态的信誉贡献积分 / 链上燃料积分”，只消耗、无市场价格、不可买卖兑换提现；**不得称“发行”、不得展示“总量/发行量”、不得虚构国家背书** |
| 获取途径 | 仅限：官方活动发放 / 服务消耗返还 / 共建与治理贡献；不可充值购买 |
| C 端服务计价 | 一律人民币明码标价（如存证 ¥9.9/次、签约 ¥19.9/份），LMP/gas 对用户透明或由平台代付 |
| 质押→共建 | “节点共建”：保证金锁定可解除，回报用信誉分/信誉贡献值/治理权重（如 1.8×）表达，永不提货币收益 |
| NFT→数字藏品 | 仅收藏/展示/转赠/存证确权；展示“获得方式”而非价格；页面需标注“不支持买卖交易” |
| 转账→转赠 | 积分在用户间流转称“转赠”，不得附带任何法币价值提示 |
| 免责页脚 | 关键页面页脚需声明“不涉及任何虚拟货币交易与融资” |

### 0.3 合规组件（design-system.css §18，禁止页面重复定义）
- `.official-notice` + `.official-seal`：官方积分说明公告卡（渐变浅底 + 盾形印章），用于 token/services 等页首屏
- `.compliance-chips` + `.compliance-chip`：合规芯片组（✓ 只消耗不交易 · 无市场价格 · 不可买卖兑换 · 不涉及任何融资）
- 徽章口径：「信誉贡献积分」「不可交易」「不可提现」用 `badge-primary/badge-info`，永不使用涨跌红绿色表达 LMP 价值，永不使用「官方发行」「总量恒定」等发币字样

---

## 2. 色彩系统

### 2.1 主色（靛蓝 50–900 色阶）

| Token | 亮色模式 | 用途 |
|-------|----------|------|
| `--color-primary-50` | `#EEF2FF` | 选中行背景、hover 底色 |
| `--color-primary-100` | `#E0E7FF` | chip 背景、标签底色 |
| `--color-primary-300` | `#A5B4FC` | 边框 hover |
| `--color-primary-500` | `#6366F1` | 图标、链接（暗色模式提亮为 `#818CF8`） |
| `--color-primary-600` | `#4F46E5` | **品牌主色**，按钮/强调文字（暗色模式为 `#6366F1`） |
| `--color-primary-700` | `#4338CA` | 按钮 hover 加深 |
| `--color-primary-900` | `#312E81` | 深色强调 |

### 2.2 品牌渐变

| Token | 值 | 用途 |
|-------|----|----|
| `--gradient-primary` | `135°, #4F46E5 → #7C3AED` | 主按钮、Hero 横幅、选中 tab |
| `--gradient-primary-soft` | 主渐变 8% 透明度 | 卡片底色点缀 |
| `--gradient-gold` | `135°, #F59E0B → #D97706` | 信誉分、VIP/奖励 |
| `--gradient-success` | `135°, #10B981 → #059669` | 收款/收入 |
| `--gradient-danger` | `135°, #F43F5E → #E11D48` | 删除/危险操作 |

### 2.3 功能色

| 语义 | 主色 | 浅底（10% 透明） |
|------|------|------------------|
| 成功 / 收入 | `#10B981` 翡翠绿 | `rgba(16,185,129,0.1)` |
| 警告 / 确认中 | `#F59E0B` 琥珀金 | `rgba(245,158,11,0.1)` |
| 危险 / 支出 | `#F43F5E` 玫红 | `rgba(244,63,94,0.1)` |

### 2.4 中性色 & 文字色阶

| 层级 | 亮色 | 暗色 |
|------|------|------|
| 页面背景 `--color-bg` | `#FFFFFF` | `#0F172A` |
| 次级背景 `--color-bg-secondary` | `#F8FAFC` | `#1E293B` |
| 三级背景 `--color-bg-tertiary` | `#F1F5F9` | `#273548` |
| 卡片 `--color-surface` | `#FFFFFF` | `#1E293B` |
| 边框 `--color-border` | `#E2E8F0` | `#334155` |
| 主文字 `--text-primary` | `#0F172A` | `#F8FAFC` |
| 次文字 `--text-secondary` | `#475569` | `#94A3B8` |
| 弱文字 `--text-tertiary` | `#94A3B8` | `#64748B` |

### 2.5 暗色模式规则
- 切换方式：`document.documentElement.setAttribute('data-theme', 'dark')`，持久化到 `localStorage`（见 `js/theme.js`）
- 暗色下主色整体**提亮一档**（500/600 → `#818CF8/#6366F1`），保证对比度
- 暗色阴影改用更重的纯黑阴影；辉光 `--shadow-glow` 改为 `#818CF8` 40% 透明

---

## 3. 字体系统

| Token | 字体 | 用途 |
|-------|------|------|
| `--font-display` | Inter Display | 大标题、余额数字、统计值 |
| `--font-body` | Inter | 正文 |
| `--font-mono` | JetBrains Mono | 地址、哈希、交易号（`lmx...` 地址必须等宽） |

### 字号阶梯

| Token | 大小 | 用途 |
|-------|------|------|
| `--text-display` | 48px / 700 | Hero 大标题 |
| `--text-h1` | 32px / 600 | 页面主标题、余额数字 |
| `--text-h2` | 24px / 600 | 卡片标题、统计值 |
| `--text-h3` | 20px / 600 | 区块标题 |
| `--text-body` | 15px / 400 | 正文 |
| `--text-small` | 13px | 次级信息 |
| `--text-caption` | 12px | 时间、备注（用 `--text-tertiary`） |
| `--text-mini` | 11px | 角标 |

规则：标题字距 `letter-spacing: -0.01em ~ -0.02em`（收紧），正文 `line-height: 1.6`。

---

## 4. 间距与圆角

### 间距（8px 基础单位）
`--space-1: 4px` · `--space-2: 8px` · `--space-3: 12px` · `--space-4: 16px` · `--space-5: 20px` · `--space-6: 24px` · `--space-8: 32px` · `--space-10: 40px` · `--space-12: 48px` · `--space-16: 64px` · `--space-20: 80px`

**布局约定**：
- 卡片内边距：`--space-6`（24px）
- 页面区块间距：`--space-8` ~ `--space-12`（奢侈留白）
- 桌面钱包侧边栏：`--sidebar-width: 72px`（展开 240px）
- 内容最大宽度：1200px 居中

### 圆角
`--radius-sm: 6px` · `--radius-md: 10px` · `--radius-lg: 12px` · `--radius-xl: 16px`（卡片）· `--radius-2xl: 20px`（Hero/模态）· `--radius-full: 999px`（按钮/chip/头像）

---

## 5. 阴影系统（带靛蓝色调）

| Token | 亮色值 | 用途 |
|-------|--------|------|
| `--shadow-xs` | `0 1px 2px rgba(0,0,0,0.03)` | 静态小元素 |
| `--shadow-sm` | 双层轻阴影 | 输入框、列表项 |
| `--shadow-md` | 含 `rgba(79,70,229,0.06)` | 卡片默认 |
| `--shadow-lg` | 含 `rgba(79,70,229,0.10)` | 卡片 hover、下拉 |
| `--shadow-xl` | `0 24px 64px` | 模态框 |
| `--shadow-glow` | `0 0 20px rgba(79,70,229,0.3)` | 发光强调（解锁按钮、焦点） |

---

## 6. 动效规范

### 6.1 缓动曲线

| Token | 值 | 用途 |
|-------|-----|------|
| `--ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 弹性：卡片悬浮、成功弹窗、解锁 |
| `--ease-smooth` | `cubic-bezier(0.16, 1, 0.3, 1)` | 平滑：页面切换、模态展开 |
| `--ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | 常规：颜色/背景过渡 |
| `--ease-bounce` | `cubic-bezier(0.68, -0.55, 0.27, 1.55)` | 回弹：PIN 输入错误抖动 |

### 6.2 时长阶梯
`--duration-fast: 150ms`（hover）· `--duration-normal: 300ms`（默认）· `--duration-slow: 500ms`（页面切换）· `--duration-slower: 800ms`（入场/余额滚动）

### 6.3 关键动画（已定义在 design-system.css）
| 名称 | 效果 | 场景 |
|------|------|------|
| `fadeInUp` | 淡入+上移 16px | 页面/列表项入场 |
| `scaleIn` | 缩放淡入 | 模态框 |
| `pulse` | 脉冲 | 实时状态点、DAG tip 节点 |
| `glow` | 光晕呼吸 | 解锁按钮 |
| `float` | 上下浮动 | 装饰元素 |
| `shimmer` | 扫光 | 骨架屏 |
| `shake` | 水平抖动 | 输入错误 |

### 6.4 交互动线约定
- **涟漪点击**：所有 `.btn` 点击产生涟漪扩散（JS 注入 `.ripple`）
- **余额数字滚动**：`requestAnimationFrame` + ease-out cubic，`eased = 1 - Math.pow(1 - p, 3)`，时长 800ms
- **Toast**：右上角滑入，3.5s 自动消失，分 success/warning/danger/info 四型
- **趋势图**：SVG 描边动画（`stroke-dashoffset` 过渡）
- **DAG 画布**：Canvas 粒子沿边流动 + tip 节点脉冲光晕（见 `js/explorer.js`）

### 6.5 声音设计（`js/sound.js`）
纯 WebAudio 合成，零音频文件依赖；开关持久化于 `localStorage['lingma-sound']`，设置页「音效提示」开关（`#sound-toggle`）控制。
| 音效 | 设计 | 触发点 |
|------|------|--------|
| `success` | 上行双音 C5→G5，柔和确认 | Toast ✓ / 设置开启音效 |
| `error` | 下行小二度，短促警示 | Toast ✕ |
| `info` | 单音轻点 | 普通 Toast |
| `click` | 高频极短按键声 | PIN 键盘按键 |
| `unlock` | 上行琶音 | 钱包解锁成功 |
| `send` | 上滑「嗖」（400→950Hz） | 转账成功模态弹出 |
接入方式：MutationObserver 零侵入监听 Toast / 模态 / 锁屏状态变化，页面只需引入 `sound.js`（当前已在桌面钱包 `index.html` 启用）。

### 6.6 无障碍约定（Accessibility）
- **焦点可见**：全局 `:focus-visible` 3px 靛蓝 outline（暗色提亮），按钮/卡片改用光晕环（已定义在 `design-system.css` 第 16 节）
- **跳转链接**：键盘用户可用 `.skip-link` 直达主内容（`#main-content`）
- **键盘操作**：模态框支持 `Esc` 关闭；管理中心侧边菜单支持方向键导航（`role="tablist"`）；NFT 卡片可 `Enter` 打开详情；可交互元素禁止纯 `onclick` 无语义标签（用 `<button>`）
- **装饰图标**：功能型 SVG 图标一律 `aria-hidden="true"`，图标按钮必须带 `aria-label`
- **减弱动效**：`@media (prefers-reduced-motion: reduce)` 下所有动画瞬时完成（已全局生效）
- **emoji 替换**：功能型 emoji 已替换为品牌 SVG（管理中心/质押/地址详情/插件弹窗）；品牌图标源码见 `brand-icons.html`

---

## 7. 组件规范

### 7.1 按钮 `.btn`
- 变体：`primary`（品牌渐变）/ `secondary`（白底描边）/ `ghost`（透明）/ `danger`
- 尺寸：默认高 44px；`btn-lg` 52px；`btn-sm` 36px
- 状态：hover 上浮 `translateY(-1px)` + `--shadow-lg`；active 下沉；disabled 透明度 0.5；主按钮 hover 光泽扫过（`::after` 斜向高光，0.7s）
- 全圆角 `--radius-full`
- 数字展示（余额/统计/金额）统一 `font-variant-numeric: tabular-nums` 等宽对齐（已在 design-system.css 全局声明，覆盖 .market-stat/.row-value/.tx-amount 等）

### 7.2 卡片 `.card`
- 白底（暗色 `--color-surface`）、`--radius-xl`、`--shadow-md`、内边距 `--space-6`
- 可点击卡片（`.card-hover`）：hover 时 `translateY(-4px)` + `--shadow-lg`，弹性曲线

### 7.3 输入框 `.input`
- 高 44px、`--radius-md`、`--color-border` 描边
- focus：边框变 `--color-primary-500` + 外圈光晕 `0 0 0 3px var(--color-primary-100)`
- error：边框 `--color-danger` + `shake` 动画

### 7.4 徽标 `.badge`
四色底（success/warning/danger/info 各用 10% 浅底 + 实色文字），`--radius-full`，12px 字号

### 7.5 模态框 `.modal`
遮罩 `rgba(15,23,42,0.5)` + backdrop-blur；容器 `--radius-2xl`、`--shadow-xl`、`scaleIn` 入场

### 7.6 骨架屏 `.skeleton`
`--color-bg-tertiary` 底色 + `shimmer` 扫光，加载时替代内容避免闪烁

### 7.7 品牌 Logo `.brand-logo-*`（官方资产，禁止手绘 SVG 替代）
| 场景 | 用法 |
|------|------|
| 导航/侧边栏/插件头（28/32/22/16px） | `<img class="brand-logo-mark [sm/xs]" src="assets/logo-mark.png" alt="">` + HTML 文字（如“灵猫链钱包”，随主题变色） |
| 页首/徽章位（40px） | `.brand-logo-mark.lg` |
| 亮色首屏/移动引导页 | `.brand-logo-full`（+ `.lg` 64px）；暗色主题需同时放置 `logo-full-dark.png` 并用 `.logo-light-only/.logo-dark-only` 双图切换 |
| 渐变/彩色底（锁屏） | `logo-mark-white.png`（白色单色标） |
| 浏览器图标 | head 引入 `favicon-32.png` + `apple-touch-icon.png`（全站 15 页已加） |
规则：图形标本身为蓝渐变，亮/暗主题通用；组合标文字色随背景选亮/暗版；禁止修改 Logo 比例（`object-fit: contain`）、禁止重着色、禁止加描边/阴影。

### 7.8 KYC 实名认证组件 `.kyc-*`（design-system.css §20）
| 组件 | 用途 |
|------|------|
| `.kyc-badge.unverified/.pending/.verified` | 认证状态徽章，挂在头像/昵称/设置项/顶栏旁；`pending` 自带呼吸动画 |
| `.kyc-gate-banner` | 实名前置门控横幅（琥珀色），用于治理/藏品/共建页首，带“去认证”按钮 |
| `.kyc-steps` + `.kyc-step.active/.done` | 四步流程步骤条（选择主体→填写信息→身份核验→完成认证） |
| `.kyc-type-toggle` / `.kyc-upload` / `.kyc-face` | 主体通道卡、证件上传框（点击模拟已上传变绿）、人脸核验扫描动画 |
| `.kyc-receipt` / `.kyc-perm-table` | 认证回执凭证卡（脱敏展示）、认证前后权限矩阵表 |

合规口径：认证免费；链上仅存认证结果与信息哈希（对应链层 `IdentityRegistry` 合约与 DID 体系）；姓名/证件号明文不上传、不上链，回执一律脱敏展示（如“张*明”“3301**********34”）；未实名仅保留小额转账（单日 ≤ 100 LMP）。门控已全端接入：`index.html` 顶栏徽章+设置项、`mobile.html` 我的页、`extension.html` 弹窗紧凑横幅、`wallet-tools.html` 实名认证面板、`token/governance/nft-gallery/staking/services.html` 页首横幅、`consortium.html` 成员页机构实名准入（KYB）横幅+添加成员实名字段。

### 7.9 实时链上数据组件 `.chain-live` / `.network-badge.is-live`（design-system.css §21）

钱包页只读接入线上链的可视化组件，由 `js/app.js` 的 `Chain` 模块驱动（仅桌面钱包 `index.html` 使用）。

| 组件 | 用途 |
|------|------|
| `.chain-live` | 实时链上状态条：区块高度 / 已确认交易 / 在线节点 / 实时 TPS 四指标 + 右侧状态徽章，弹性入场 |
| `.chain-live-value` | 指标数值，`--font-display` + `tabular-nums` 等宽，避免数字跳动 |
| `.chain-live-badge` | 状态徽章：已连接「链上实时数据」（success 底），离线「离线 · 演示数据」（warning 底） |
| `.network-badge.is-live` | 顶栏网络徽章已连接态：绿点 `chain-pulse` 呼吸动画 + 文案「开发网 · 已连接」 |
| `.network-badge.is-offline` | 顶栏网络徽章离线态：琥珀点 + 文案「离线 · 演示」 |

**连链契约（只读，同源 `/rpc` 代理）**：
- 调用格式 `POST /rpc {jsonrpc:'2.0', id, method, params}`，nginx 反代 `127.0.0.1:9400` 并自动注入 Bearer token
- 方法：`get_info`（区块高度/确认数/peers）· `get_balance{address}`（余额，单位 lam）· `get_address_txs{address,limit}`（地址交易）
- 单位 `LAM_PER_LMP = 1_000_000`（余额 ÷1e6 = LMP）；轮询 `CHAIN_POLL_MS = 5000`（5s，TPS 由确认数增量 ÷ 时间差算出）
- 只读演示账户 `DEMO_ADDRESS`（链上真实活跃地址），原型无私钥，**仅读不写**，不发起任何转账/上链操作
- 降级：`/rpc` 不可达（本地打开）时 `Chain.connect()` catch → 保留 MOCK 演示数据，徽章切离线态，`cl-*` 的「—」填「演示」
- 同源模式与 `explorer.js` / `consortium.js` 一致（均已连真链），三者共享 `/rpc` 契约

---

## 8. 文件结构与页面清单

```
clients/ui-design/
├── DESIGN_SYSTEM.md          ← 本文档
├── portal.html               ← 全生态导航中心（统一入口，32 页分组卡片+搜索；配套项目根目录 启动灵猫链UI.bat）
├── assets/                   ← 官方品牌资产（透明底 PNG，由根目录 gen_logo_assets.py 从原图裁剪生成）
│   ├── logo-mark.png         ← 纯图形标（蓝渐变猫头，279×252）——导航/侧边栏/图标位
│   ├── logo-full.png         ← 横版组合标（图形+灵猫链+LINGMA CHAIN，704×252）——亮色首屏/引导页
│   ├── logo-full-dark.png    ← 组合标白字版——暗色主题/暗色背景
│   ├── logo-mark-white.png   ← 白色单色图形标——渐变底（锁屏）
│   ├── favicon-32/64.png、apple-touch-icon.png ← 浏览器图标（全站 head 已引入）
│   └── logo-original.png     ← 原图归档（禁止直接用于页面）
├── css/
│   ├── design-system.css     ← 设计令牌 + 基础组件（所有页面必须引入）
│   ├── desktop.css           ← 桌面钱包专属样式
│   ├── mobile.css            ← 移动钱包
│   ├── explorer.css          ← 区块浏览器
│   ├── dapp-store.css        ← DApp 商店
│   ├── finance.css           ← 金融页共享样式（积分/共建/治理/工具/Playground/地址详情/图标页）
│   └── consortium.css        ← 联盟链控制台专属样式（表格/拓扑图/时间线/节点卡片）
├── js/
│   ├── theme.js              ← 主题切换引擎（localStorage 持久化）
│   ├── app.js                ← 桌面钱包：锁屏/导航/转账/交易列表 + Chain 模块只读接入线上链（实时余额/交易/网络状态，离线降级）
│   ├── mobile.js             ← 移动钱包：5 步引导流程 + 4 Tab
│   ├── explorer.js           ← DAG Canvas 可视化引擎
│   ├── token.js              ← 积分详情：服务调用量柱状图引擎（Canvas + 确定性伪随机 + 入场动画）
│   └── sound.js              ← 声音引擎（WebAudio 合成 6 种音效，零音频文件）
│   └── consortium.js         ← 联盟链控制台：导航/锁屏/成员CRUD/节点监控/审计/治理/合约
├── index.html                ← 桌面钱包（锁屏密码 123456）
├── mobile.html               ← 移动钱包（手机外壳内嵌）
├── explorer.html             ← 区块浏览器
├── dapp-store.html           ← DApp 商店
├── token.html                ← 积分详情页（官方积分说明 + 服务调用柱状图，无价格/K 线）
├── staking.html              ← 节点共建页（两步共建模态，信誉/治理权重口径，无 APY）
├── governance.html           ← 治理投票页（提案+投票模态，页首实名门控横幅）
├── kyc.html                  ← 实名认证页（个人/企业双通道四步流程 + 人脸核验动画 + 认证回执 + 权限矩阵）
├── extension.html            ← 浏览器插件钱包（360×600 弹窗，含连接/签名审批）
├── wallet-tools.html         ← 管理中心（多账户/地址簿/通知/授权/已连站点）
├── playground.html           ← BO Playground 合约演练场（编译/部署/调用沙盒）
├── address-detail.html       ← 地址详情页（交易/持有种类/共建三 Tab）
├── brand-icons.html          ← 品牌图标系统（16 个 24×24 SVG，点击复制）
├── nft-gallery.html          ← 数字藏品馆（确定性生成式艺术 + 获得方式徽章 + 转赠/展示，无买卖）
├── services.html             ← 服务中心（6 项人民币明码标价服务 + 分类筛选，替代原行情中心 markets.html）
├── consortium.html           ← 联盟链管理控制台（7 模块 SPA：仪表盘/成员/节点/交易/审计/治理/合约）
```

零依赖纯 HTML+CSS+JS，浏览器直接打开即可运行。

### 关键交互流程
1. **桌面钱包**：锁屏（6 位 PIN）→ 解锁（弹性动画）→ 仪表盘（余额滚动/饼图/趋势图/信誉分）→ 转账（地址→金额→三档手续费→确认模态→成功对勾描边动画）
2. **移动钱包**：欢迎 → 设置密码 → 助记词备份（24 词）→ 验证（点选填 6 槽位）→ 完成 → 主界面 4 Tab（首页/服务/DApp/我的）
3. **区块浏览器**：统计卡片（数字滚动）→ DAG 实时可视化 → 最新区块/交易流 → 网络健康；地址详情页支持交易/持有种类/共建三 Tab 切换
4. **DApp 商店**：Hero 轮播 → 分类芯片 → 精选 3 卡 → 趋势 4 列网格
5. **积分详情页**：官方积分说明公告卡 + 合规芯片 → 时间周期切换（7d/30d/12m）→ 服务调用量柱状图逐根入场动画 → 悬停提示框 → 生态统计 + 获取途径 + 积分流水（无任何价格元素）
6. **节点共建**：验证者排序（保证金/在线率/信誉分）→ 共建模态（大额输入+快捷百分比，展示预计治理权重 (1+amount/10000)×）→ 确认页（网络燃料 0.0005 LMP）→ 成功动画；错误金额输入框闪红边
7. **治理投票**：提案列表（双色投票进度条+投票率）→ 投票模态（赞成/反对/弃权选择后才可提交）→ 投票后徽章更新为已投票
8. **插件钱包**：模拟浏览器（灵猫签存证服务场景）内 360×600 弹窗，三屏切换（主界面/站点连接审批/存证服务签名审批，服务费 ¥9.9 + 网络燃料 10 LMP 平台代付），权限清单明标「无法转走资产」，账户切换余额数字滚动，底部按钮文案随场景变化（管理/连接/签名）
9. **Playground**：代码编辑 → 编译（修改代码后需重新编译，部署按钮自动禁用）→ 部署沙盒 → 调用函数（increment 触发 underflow revert 演示）
10. **品牌图标**：16 个 24×24/1.8px 圆头描边 SVG 图标，点击复制源码，页面内置中英双语切换（data-i18n 机制）
11. **数字藏品馆**：确定性伪随机生成式艺术（mulberry 种子）→ 系列筛选（全部/创世灵猫/DAG 几何/荣誉徽章）→ 详情模态（属性芯片 + 获得方式 + 转赠/展示，无买卖）；支持 Esc 关闭与键盘回车打开
12. **服务中心**：分类筛选（全部/政务/企业/文化）→ 服务卡人民币明码标价 + 本月使用量 → Hero 合规徽章（官方合规运营/人民币明码标价/无融资无炒作）→ 统计数字滚动
13. **声音反馈**：设置页开启音效 → PIN 按键轻响 → 解锁琶音 → 转账成功上滑音；全部 WebAudio 合成，可随时关闭
14. **联盟链控制台**：锁屏 PIN → 仪表盘（统计数字滚动/网络拓扑 SVG/审计时间线/信誉排行）→ 成员管理（表格+搜索+角色筛选+冻结/解冻）→ 节点监控（状态卡片网格+共识轮次+Quorum 进度+在线率仪表）→ 交易管理（表格+筛选+详情模态含 60/40 信誉分配）→ 审计日志（垂直时间线+事件类型过滤+CSV 导出）→ 联盟治理（提案列表+信誉权重投票+投票模态）→ 合约管理（BO 编辑器+编译部署+权限矩阵）

---

## 9. 修改指南

| 想改什么 | 改哪里 |
|----------|--------|
| 品牌主色 | `design-system.css` `--color-primary-*` + `--gradient-primary`（亮暗两套都要改），并同步本文档 |
| 暗色背景 | `[data-theme="dark"]` 区块 |
| 动效手感 | `--ease-*` / `--duration-*` |
| 字号 | `--text-*` 阶梯（不要局部硬编码 px） |
| 新增页面 | 复制现有 HTML 骨架，引入 `design-system.css` + 专属 css，遵守第 2–7 节规范 |

### 禁止事项
- ❌ 违反第 0 节合规设计红线的任何元素（价格/K 线/涨跌/兑换/APY/代币称谓/融资话术）
- ❌ 组件内写死颜色（如 `color: #4F46E5`），必须用 CSS 变量
- ❌ 页面内重复定义 design-system.css 已有组件（如 `.official-notice`/`.compliance-chip`）
- ❌ 引入外部 CDN 字体/脚本，字体一律本地化（`css/fonts.css`）
- ❌ 使用纯黑阴影破坏品牌色调（`--shadow-md` 以上必须含靛蓝成分）
- ❌ 动画时长超过 800ms（会显得拖沓）
- ❌ 同一屏出现两个以上渐变色块（视觉噪音）
- ❌ 地址/哈希用非等宽字体

---

## 10. 待实现清单（后续迭代）

- [x] 积分详情页（服务调用柱状图，合规重塑）→ `token.html` + `js/token.js`
- [x] 节点共建页（去 APY，信誉/治理权重口径）→ `staking.html`
- [x] 治理投票页 → `governance.html`
- [x] 品牌图标系统 → `brand-icons.html`（16 个 SVG）；功能型 emoji 已在管理中心/质押/地址详情/插件弹窗替换为品牌 SVG 图标
- [x] 多账户管理、地址簿、通知中心、Token 授权管理 → `wallet-tools.html`
- [x] 浏览器插件钱包弹窗 → `extension.html`
- [x] BO Playground 合约演练 → `playground.html`
- [x] 地址详情页 → `address-detail.html`
- [x] 国际化（i18n）→ `brand-icons.html` 演示了 data-i18n 机制，待推广到全站
- [x] 无障碍核心项 → 全局 `:focus-visible` / `.skip-link` / 减弱动效偏好（`design-system.css` 第 16 节）+ 模态 `Esc` 关闭 + 管理中心方向键导航 + 图标按钮 `aria-label`
- [x] 声音设计 → `js/sound.js`（WebAudio 合成 6 种音效，已接入桌面钱包，设置页可开关）
- [x] 数字藏品馆 → `nft-gallery.html`（去买卖/地板价）；服务中心 → `services.html`（人民币明码标价，替代已删除的违规页 `markets.html`）
- [x] 全站合规化重塑（第 0 节红线）：14 个文件去除价格/涨跌/兑换/APY/代币称谓/USD 折算；合规组件提升至 `design-system.css` §18；导航统一为钱包/积分/服务/共建/治理
- [x] KYC 实名认证 → `kyc.html`（双通道四步流程）+ `design-system.css` §20 组件；门控徽章/横幅全端接入：桌面钱包、移动端、插件弹窗、管理中心、积分/治理/藏品/共建/服务页、联盟链控制台（KYB 机构实名准入）
- [x] 全生态统一入口 → `portal.html` 导航中心（32 页分组卡片+搜索筛选）+ 项目根目录 `启动灵猫链UI.bat` 一键启动
- [x] 公网部署 + 钱包只读接真链 → 全量部署至 `https://rpc.blackhorsevideo.com/`（根路径落 `portal.html`，违规页 `markets.html` 已下线）；`js/app.js` 新增 `Chain` 模块只读接入线上 9400 节点（同源 `/rpc`），钱包页实时展示真实余额/交易/区块高度/TPS + `design-system.css` §21 链上状态条，离线自动回落演示数据
- [ ] 无障碍剩余：全站对比度 AA 审计、屏幕阅读器全流程测试、其余页面方向键导航推广、i18n 全站推广
- [ ] 声音设计推广：移动钱包 / 质押 / 治理等页面接入 `sound.js`
- [ ] 移动端深色模式细节适配、iOS 安全区适配