文档版本 ：V3.0
核心定位 ：以 CEP 三阶递进记忆闭环为绝对主导，Zoggin 液态玻璃设计语言为沉浸载体，辅助功能（可视化、SRS、计划）为认知增强飞轮
交付对象：前端开发组、后端开发组、测试组、运维组
一、项目概述
1.1 项目背景
现有记单词功能存在被动翻转作弊、自评偏差、SRS 算法黑盒化、学习模式单一等痛点。本次重构以 CEP 三阶递进记忆闭环 为唯一核心学习流，以 Zoggin 液态玻璃设计语言 为沉浸载体，打造"个人词汇认知实验室"------用户不仅背单词，更在过程中理解"如何记住"，建立对自己认知能力的掌控感。
1.2 业务目标
| 维度 | 目标 | 衡量标准 |
|---|---|---|
| 认知层面 | 完成 CEP 闭环的用户，三维能力向量完整度 ≥ 90% | 后端数据审计 |
| 体验层面 | 用户主动回忆率提升 80%，交互沉浸感满意度 ≥ 90% | 用户调研 + 行为数据 |
| 视觉层面 | 所有组件严格遵循 Zoggin 液态玻璃规范，无视觉割裂 | 设计走查 |
| 技术层面 | 系统稳定性 99.9%，支持模块化平滑扩展 | 监控数据 |
1.3 核心约束
-
UI 约束：所有新增组件必须使用 Zoggin 液态玻璃体系（半透明 + backdrop-filter + 紫色系渐变 + 圆角 16px），与现有 LandingPage.vue、StudyBackground.vue 保持绝对统一
-
逻辑约束：CEP 三阶闭环为唯一主流程，任何功能不得打断或替代 Stage I→II→III 的强制顺序
-
主题约束：支持亮/暗/护眼三种模式，每日色彩由 colorEngine.js 日期种子算法生成，确保"每日一色"的品牌记忆点
-
技术约束：Vue3 + Vite + Pinia + Supabase + IndexedDB，45 个工作日交付
二、Zoggin 液态玻璃 UI 设计体系（全局规范）
2.1 设计哲学：液态玻璃（Liquid Glass）
┌─────────────────────────────────────────────────────┐
│ 核心特征： │
│ • 半透明背景 (backdrop-filter: blur(12px)) │
│ • 柔和渐变色彩（每日一色，由日期种子算法生成） │
│ • 细腻光影层次（高光边框 + 柔和阴影） │
│ • 流动感动画（呼吸、极光、粒子等背景模式） │
│ • GPU 加速（will-change 优化） │
└─────────────────────────────────────────────────────┘2.2 三层色彩体系（强制规范）
| 层级 | 作用 | 实现方式 | CEP 应用 |
|---|---|---|---|
| 主色调 | 品牌识别 | 紫色系渐变 #667eea → #764ba2 |
CEP 核心按钮、能力雷达图主色 |
| 功能色 | 状态指示 | 绿 #4ade80 / 黄 #fbbf24 / 红 #f87171 |
Stage I 选项反馈、Stage II 拼写差异高亮 |
| 中性色 | 内容展示 | 灰度阶梯 #1f2937 → #f8f9fb |
释义文本、例句展示 |
2.3 玻璃态层级变体（组件强制使用）
| 类型 | 透明度 | 模糊度 | 边框 | 用途 |
|---|---|---|---|---|
| 轻玻璃 | rgba(255,255,255,0.95) |
10px | rgba(255,255,255,0.5) |
认知仪表盘、科学提示浮层 |
| 中玻璃 | rgba(255,255,255,0.75) |
12px | rgba(255,255,255,0.4) |
Stage I/II/III 主卡片、词汇全景解析 |
| 重玻璃 | rgba(255,255,255,0.25) |
20px | rgba(255,255,255,0.3) |
背景遮罩、休息提示层 |
2.4 动态背景系统（StudyBackground.vue 集成）
CEP 各 Stage 适配不同背景模式，增强沉浸感：
| CEP 阶段 | 背景模式 | 设计意图 |
|---|---|---|
| Stage I（语义再认） | Breath（呼吸） | 中心圆点呼吸律动，引导用户聚焦中央单词 |
| Stage II（拼写提取） | Fog（雾效） | 朦胧漂浮光晕，降低环境干扰，强化专注 |
| Stage III（语音辨识） | Aurora（极光） | 流动扭曲效果，配合音频波形增强听觉沉浸 |
| 词汇全景解析 | Particles（粒子） | 50 粒子连线，象征知识网络的展开 |
| 休息/过渡 | Ripple（涟漪） | 随机扩散圆环，缓解认知负荷 |
背景切换 ：阶段切换时背景模式 1 秒平滑过渡（transition: background 1s ease）。
2.5 微交互动画规范（全局统一）
| 交互场景 | 效果 | 时长 | 缓动函数 |
|---|---|---|---|
| 选项选择（Stage I） | scale(0.95) + 颜色填充 | 80ms | cubic-bezier(0.4, 0, 0.2, 1) |
| 音节块输入（Stage II） | 正确时绿色脉冲，错误时红色震动 | 200ms | ease-out |
| 卡片阶段切换 | 淡入淡出 + 轻微上移 | 300ms | ease |
| 正字法揭示（Stage II 错误） | 差异高亮滑入 | 400ms | ease-in-out |
| 音频播放（Stage III） | 声波可视化动画 | 持续 | linear |
| 星云图光点 hover | 光晕放大 + 信息浮现 | 200ms | ease |
三、CEP 核心记忆引擎（主导系统）
3.1 架构总览
CEP 为唯一学习主流程，所有用户必须完成 Stage I→II→III 的强制顺序，不可跳过、不可提前查看答案。
┌─────────────────────────────────────────────────────────────┐
│ Plan System（计划系统）→ 生成今日 New Queue / Review Queue │
└──────────────────────┬──────────────────────────────────────┘
▼
┌─────────────────────────────────────────────────────────────┐
│ CEP 核心引擎（Liquid Glass 沉浸载体） │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Stage I：语义再认（Semantic Recognition） │ │
│ │ • 界面：中玻璃卡片 + Breath 背景 + 四迫选按钮 │ │
│ │ • 操作：用户必须选择选项，无"显示答案"按钮 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ ↓ 强制进入 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Stage II：正字法提取（Orthographic Recall） │ │
│ │ • 界面：中玻璃卡片 + Fog 背景 + 音节化拼写支架 │ │
│ │ • 操作：用户必须输入拼写，无"提示"按钮 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ ↓ 强制进入（或触发 EIP） │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Stage III：语音辨识（Phonological Discrimination） │ │
│ │ • 界面：中玻璃卡片 + Aurora 背景 + 听音选项 │ │
│ │ • 操作：用户必须从 4 个英文选项中选择 │ │
│ └─────────────────────────────────────────────────────────┘ │
└──────────────────────┬──────────────────────────────────────┘
▼
┌─────────────────────────────────────────────────────────────┐
│ Lexical Panorama（词汇全景解析，Particles 背景） │
│ 中玻璃双栏布局，左侧固定单词，右侧滚动解析 │
└──────────────────────┬──────────────────────────────────────┘
▼
┌─────────────────────────────────────────────────────────────┐
│ 辅助飞轮：可视化 + SRS + 计划系统 │
└─────────────────────────────────────────────────────────────┘3.2 Stage I：语义再认 --- 界面与交互规范
3.2.1 布局规范（Liquid Glass 适配）
┌──────────────────────────────────────────────┐
│ [轻玻璃] 认知仪表盘（可折叠） │
│ 今日进度 | 当前 Block BMI | 认知负荷状态 │
├──────────────────────────────────────────────┤
│ │
│ [中玻璃主卡片] │
│ │
│ ┌────────────────────────────┐ │
│ │ │ │
│ │ domestic │ ← Headword
│ │ /dəˈmɛstɪk/ │ ← 音标（发音按钮）
│ │ │ │
│ └────────────────────────────┘ │
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 家庭的 │ │ 统治的 │ │ 外国的 │ │ ← 四迫选按钮
│ │ │ │ │ │ │ │ （中玻璃变体）
│ └────────┘ └────────┘ └────────┘ │
│ │
│ ┌────────┐ │
│ │ 国内的 │ ← 正确答案（用户选择后揭示） │
│ └────────┘ │
│ │
├──────────────────────────────────────────────┤
│ [轻玻璃] 元认知校准浮层（选择正确后滑出） │
│ [熟悉] [模糊] [忘记] [上一词] │
└──────────────────────────────────────────────┘3.2.2 视觉规范
| 元素 | 样式 | 动画 |
|---|---|---|
| 主卡片 | 中玻璃（rgba(255,255,255,0.75), blur(12px)），圆角 24px，阴影 0 8px 32px rgba(102,126,234,0.15) |
进入时 translateY(20px)→0 + opacity 0→1，600ms |
| Headword | 字体 48px，字重 700，颜色 #1f2937（暗色模式 #f8f9fb） |
无 |
| 选项按钮 | 中玻璃变体（rgba(255,255,255,0.6)），圆角 16px，边框 1px solid rgba(255,255,255,0.4) |
hover 时 brightness(1.05) + translateY(-2px) |
| 选中反馈 | 正确：background: linear-gradient(135deg, #4ade80, #22c55e)，文字变白；错误：background: #f87171 |
正确时脉冲光晕 box-shadow: 0 0 20px rgba(74,222,128,0.4) |
| 元认知浮层 | 轻玻璃，从底部滑入 translateY(100%)→0，圆角 20px 20px 0 0 |
300ms ease-out |
3.2.3 逻辑规范（与 V3.0 一致）
首次呈现 + 选择错误 → [Unacquired]，不纳入能力1，直接进入 Stage II
非首次 + 选择错误 → [Decay Detected]，能力1减分，SRS间隔压缩30%
首次呈现 + 选择正确 → [Tentative Acquisition]，触发元认知校准元认知校准评分：
-
熟悉：
receptive +1.0（高权重），浮层按钮使用 紫色渐变#667eea → #764ba2 -
模糊：
receptive +0.6（标准权重），按钮使用 黄色#fbbf24 -
忘记：
receptive 0，状态回退，按钮使用 红色#f87171 -
上一词：回退至上词，按钮使用 中性灰
#9ca3af
防作弊嵌入：系统后台记录 ORT。若"熟悉"但 ORT > 3000ms，标记元认知偏差，下次强制 Stage II。
3.3 Stage II：正字法提取 --- 界面与交互规范
3.3.1 布局规范（Liquid Glass 适配）
┌──────────────────────────────────────────────┐
│ [轻玻璃] 认知仪表盘 │
├──────────────────────────────────────────────┤
│ │
│ [中玻璃主卡片] │
│ │
│ ┌────────────────────────────┐ │
│ │ │ │
│ │ adj. 家庭的；国内的 │ ← 释义线索
│ │ │ │
│ │ ┌────┬─────┬─────┐ │ │
│ │ │ __ │ ___ │ ___ │ │ ← 音节化支架
│ │ │/də/│/mɛs/│/tɪk/│ │ ← 音标锚点
│ │ └────┴─────┴─────┘ │ │
│ │ │ │
│ │ [🔊 发音] │ ← 主动发音按钮
│ │ │ │
│ └────────────────────────────┘ │
│ │
│ [EIP-1 触发时] │
│ ┌────────────────────────────────────────┐ │
│ │ 正字法揭示：domestic │ │
│ │ 差异高亮：d✅ o✅ m❌ e✅ s✅ t✅ i✅ c✅ │ │
│ │ [敲击任意键继续...] │ │
│ └────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────┘3.3.2 视觉规范
| 元素 | 样式 | 动画 |
|---|---|---|
| 释义线索 | 字体 24px，字重 500，颜色 #4b5563，居中 |
进入时打字机效果，50ms/字符 |
| 音节支架 | 每个音节块：中玻璃变体，圆角 12px，宽度按字母数动态计算 | 当前输入块边框变为紫色 #667eea，脉冲动画 |
| 音标锚点 | 字体 14px，颜色 #9ca3af，位于音节块下方 |
无 |
| 输入字符 | 字体 32px，字重 700，颜色 #1f2937 |
输入时 scale(1.1)→1，100ms |
| 错误震动 | 输入非预期字符时，音节块 translateX(-5px)→5px→0，200ms |
ease-in-out |
| EIP-1 揭示层 | 重玻璃遮罩 + 中玻璃内容卡片，圆角 16px | 滑入 translateY(-20px)→0 + opacity 0→1 |
3.3.3 音节化拼写支架（核心交互）
音形双锚点实现：
// 音节拆分规则（按发音逻辑，非纯字母）
const syllableMap = {
'domestic': [
{ letters: 'do', phoneme: '/də/', length: 2 },
{ letters: 'mes', phoneme: '/mɛs/', length: 3 },
{ letters: 'tic', phoneme: '/tɪk/', length: 3 }
]
};
// UI 渲染
// [__] 宽度 = length * 1.2em + padding
// /də/ 位于下方，字体 0.6em，颜色 #9ca3af输入规则：
-
按音节顺序输入，当前块填满自动跳转
-
Backspace回退，跨音节支持 -
三次错误后支架失效，强制进入全景解析
3.3.4 分级评分与视觉反馈
| 尝试 | 视觉反馈 | 能力2评分 |
|---|---|---|
| 第1次正确 | 所有音节块绿色脉冲 + 对勾动画 | +1.0 |
| 第1次错误 | 触发 EIP-1，差异高亮显示 | - |
| 第2次正确 | 绿色脉冲（亮度略低） | +0.7 |
| 第3次正确 | 绿色脉冲 + "勉强掌握"提示 | +0.4 |
| >3次错误 | 红色闪烁 + "需要加强"提示 | 0/减分 |
3.4 Stage III：语音辨识 --- 界面与交互规范
3.4.1 布局规范（Liquid Glass 适配）
┌──────────────────────────────────────────────┐
│ [轻玻璃] 认知仪表盘 │
│ Block 3/5 | BMI: 85% | 复测队列: 1词 │
├──────────────────────────────────────────────┤
│ │
│ [中玻璃主卡片] │
│ │
│ ┌────────────────────────────┐ │
│ │ │ │
│ │ 🎵 音频波形可视化 🎵 │ ← 声波动画
│ │ │ │
│ │ [🔊 重播] │ ← 重播按钮
│ │ │ │
│ └────────────────────────────┘ │
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │domestic│ │dominate│ │foreign │ │ ← 四英文选项
│ │ │ │ │ │ │ │ （中玻璃变体）
│ └────────┘ └────────┘ └────────┘ │
│ │
│ ┌────────┐ │
│ │ doctor │ ← 干扰项 │
│ └────────┘ │
│ │
└──────────────────────────────────────────────┘3.4.2 视觉规范
| 元素 | 样式 | 动画 |
|---|---|---|
| 音频波形 | Canvas 绘制，紫色渐变 #667eea → #764ba2，随音频频率跳动 |
实时渲染，requestAnimationFrame |
| 重播按钮 | 圆形轻玻璃，图标白色，hover 时 scale(1.1) + rotate(30deg) |
200ms |
| 选项按钮 | 中玻璃变体，圆角 16px | 同 Stage I |
| 正确反馈 | 选项变为绿色 + 播放正确读音，其他选项淡出 | 400ms |
| 错误反馈 | 错误选项标红 + 播放其读音，正确选项标绿 + 播放目标读音 | 600ms，顺序执行 |
3.4.3 Block 机制与复测队列
-
每 4 词触发：完成 4 个词的 Stage I+II 后，自动进入 Stage III BSR
-
复测队列：错误词压入队列，首轮完成后统一复测
-
Double Fault ：复测再次错误，选项边框变为 红色闪烁，能力3减分
3.5 词汇全景解析 --- 界面规范
3.5.1 布局（非对称双栏 + Particles 背景）
┌──────────────────────────────────────────────────────────────┐
│ [Particles 背景] 50粒子缓慢流动，象征知识网络 │
├──────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌─────────────────────────────────────┐ │
│ │ │ │ [可折叠] Contextual Layer │ │
│ │ domestic │ │ 真题例句 + 年份/题型标注 + 译文 │ │
│ │ /dəˈmɛstɪk/│ │ │ │
│ │ │ │ [可折叠] Collocational Layer │ │
│ │ adj. │ │ domestic flight │ │
│ │ 家庭的；国内的│ │ domestic violence │ │
│ │ │ │ │ │
│ │ [发音按钮] │ │ [可折叠] Propositional Layer │ │
│ │ │ │ 考研注意：熟词僻义"国内的" │ │
│ │ [三维雷达图] │ │ 态度色彩：中性 │ │
│ │ （迷你版） │ │ │ │
│ │ │ │ [标签切换] Expansional Layer │ │
│ │ │ │ [派生] [词根] [近义辨析] │ │
│ │ │ │ │ │
│ └──────────────┘ └─────────────────────────────────────┘ │
│ ↑ ↑ │
│ Sticky（固定） Scrollable（滚动） │
│ 中玻璃卡片 中玻璃卡片 │
│ │
└──────────────────────────────────────────────────────────────┘3.5.2 视觉规范
| 元素 | 样式 |
|---|---|
| 左侧卡片 | 中玻璃，宽度 40%，position: sticky; top: 20px，圆角 24px |
| 右侧卡片 | 中玻璃，宽度 58%，圆角 24px，内部滚动 |
| 折叠层标题 | 字体 16px，字重 600，颜色 #667eea，右侧箭头图标 |
| 展开内容 | 字体 15px，行高 1.8，颜色 #374151 |
| 标签切换 | 轻玻璃按钮，选中时紫色渐变填充，未选中时透明 |
四、辅助功能系统（围绕 CEP 的增强飞轮）
4.1 记忆可视化系统（CEP 数据的可视化表达）
4.1.1 能力星云图（3D Mastery Nebula）
位置：Statistics.vue 页面 / 词汇全景解析左侧迷你版
视觉规范：
-
画布：深色背景（暗色模式）或浅紫渐变（亮色模式），重玻璃质感
-
光点：每个单词一个圆点，RGB 三通道对应三维能力
-
R（红）= Receptive，G（绿）= Productive，B（蓝）= Phonological
-
亮度 = Overall Mastery（短板优先）
-
-
交互：hover 光点 → 中玻璃浮层显示单词 + 三维评分 + "进入 CEP 复习"按钮
-
动画 ：光点缓慢浮动（
translateY正弦波动），模拟星云呼吸感
代码规范：
// Canvas 绘制
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`;
ctx.shadowBlur = 15;
ctx.shadowColor = `rgba(${r}, ${g}, ${b}, 0.5)`; // 光晕效果
ctx.fill();4.1.2 认知仪表盘（Cognition Dashboard）
位置：顶部轻玻璃条，可折叠
视觉规范：
-
高度 48px，轻玻璃（
rgba(255,255,255,0.95),blur(10px)） -
左侧：Zoggin Logo + 今日进度（紫色渐变进度条）
-
中间：当前 Block BMI（数字 + 迷你环形图）
-
右侧：认知负荷状态（绿色/黄色/红色指示灯）
负荷预警：
-
负荷升高时，整个仪表盘边框变为 黄色脉冲
#fbbf24 -
严重负荷时，全屏重玻璃遮罩 + 休息提示："检测到认知负荷升高，建议休息 2 分钟"，按钮使用紫色渐变
4.1.3 认知实验报告
位置：每日/周自动生成的报告页面
视觉规范：
-
顶部：中玻璃卡片，总评分环形图（紫色渐变）
-
中部：能力变化折线图（ECharts，紫色系配色）
-
底部：关键洞察卡片（轻玻璃，圆角 16px）
-
分享按钮：紫色渐变，生成截图时自动添加 Zoggin 水印
4.2 SRS 调度系统（接收 CEP 输出）
4.2.1 算法透明化展示
位置：词汇全景解析 → 记忆轨迹 → SRS 决策日志
视觉规范：
-
中玻璃卡片，内部使用等宽字体展示决策过程
-
关键参数使用 紫色高亮
#667eea -
公式使用 LaTeX 渲染风格
示例展示：
┌────────────────────────────────────────────┐
│ SRS 决策日志 │
│ │
│ 下次复习：2026-04-26 │
│ 计算依据： │
│ 基础间隔：4.2 天 │
│ × 能力稳定性系数：0.8 (Productive < 0.6) │
│ × 元认知偏差修正：0.9 (ORT 3200ms > 阈值)│
│ ───────────────────────────────────── │
│ 最终间隔：3.0 天 │
│ │
│ [查看完整公式] [接受调整] [手动修改] │
└────────────────────────────────────────────┘4.3 计划系统（为 CEP 生成队列）
4.3.1 认知风格诊断
位置：新用户首次进入
视觉规范：
-
全屏液态玻璃背景（每日一色）
-
中央中玻璃卡片，10 词快速 CEP 预测试
-
进度指示器：顶部紫色渐变条
-
结果页：三维雷达图（Canvas）+ 记忆画像卡片（轻玻璃）
4.3.2 计划管理页
视觉规范：
-
左侧：计划列表（轻玻璃卡片，圆角 16px），选中时紫色左边框
-
右侧：计划详情（中玻璃卡片），包含：
-
每日 CEP 新词量（滑块调节，紫色轨道）
-
三维能力目标（雷达图）
-
弹性缓冲设置（每周休息天数）
-
五、主题系统与色彩引擎
5.1 三种主题模式
| 模式 | 背景基调 | CEP 卡片适配 | 应用场景 |
|---|---|---|---|
| 亮色（Light） | 每日一色（colorEngine.js 生成） | 中玻璃透明度 0.75 | 日间学习 |
| 暗色（Dark） | #1A1A2E → #16213E |
中玻璃透明度 0.25，文字变白 | 夜间学习 |
| 护眼（Eye-care） | 莫兰迪色系，低饱和度 | 中玻璃透明度 0.85，减少对比 | 长时间学习 |
5.2 每日色彩生成（colorEngine.js）
// 基于日期的 LCG 伪随机算法
function getDailySeed() {
const now = new Date();
return now.getFullYear() * 10000 +
(now.getMonth() + 1) * 100 +
now.getDate();
}
// 生成今日配色（确保同一日期相同，不同日期不同）
const todayPalette = generatePalette(getDailySeed());
// 应用至 CEP 背景、按钮、强调色
document.documentElement.style.setProperty('--primary-gradient',
`linear-gradient(135deg, ${todayPalette.primary}, ${todayPalette.secondary})`);5.3 主题切换动画
-
切换时全局
transition: background 0.5s ease, color 0.3s ease -
CEP 卡片背景色平滑过渡
-
星云图光点颜色重新计算
六、异常流与边界处理（CEP 内）
| 边界情况 | UI 处理 | 视觉反馈 |
|---|---|---|
| Stage I 首次错误 | 直接进入 Stage II，无惩罚感 | 选项标红 → 绿色正确答案滑入 |
| Stage II 中途刷新 | 保存已输入音节块，下次恢复 | 重玻璃遮罩："恢复上次进度..." |
| Stage III 音频失败 | 降级为视觉迫选（显示音标） | 黄色提示条："音频加载失败，已切换视觉模式" |
| Block 内 4 词全错 | 触发强制重学模式 | 全屏紫色渐变遮罩："需要更多练习，已调整难度" |
| 连续 3 Block BMI < 60% | 触发学习诊断 | 重玻璃休息页 + 认知负荷曲线图 |
| 元认知偏差检测 | 后台标记，用户无感知 | 下次该词 Stage II 强制显示首字母支架 |
七、前端组件架构（Liquid Glass + CEP 强制规范）
src/
├── core/ # CEP 核心引擎（不可绕过）
│ ├── stages/
│ │ ├── StageI_Semantic.vue # 语义再认（中玻璃 + Breath 背景）
│ │ ├── StageII_Spelling.vue # 正字法提取（中玻璃 + Fog 背景）
│ │ └── StageIII_Auditory.vue # 语音辨识（中玻璃 + Aurora 背景）
│ ├── LexicalPanorama.vue # 词汇全景解析（Particles 背景）
│ ├── CepEngine.js # 状态机与阶段控制
│ └── ui-kit/ # CEP 专用 UI 组件
│ ├── GlassCard.vue # 中玻璃卡片（强制规范）
│ ├── GlassButton.vue # 玻璃按钮（四状态色）
│ ├── SyllableScaffold.vue # 音节化拼写支架
│ ├── WaveVisualizer.vue # 音频波形可视化
│ └── MetaCognitiveBar.vue # 元认知校准浮层
├── support/ # 辅助飞轮
│ ├── visual/
│ │ ├── NebulaGraph.vue # 能力星云图（Canvas + Liquid Glass）
│ │ ├── Trajectory.vue # 记忆轨迹（时间轴 + 玻璃卡片）
│ │ ├── Dashboard.vue # 认知仪表盘（轻玻璃）
│ │ └── Report.vue # 认知实验报告（中玻璃 + ECharts）
│ ├── srs/
│ │ ├── SrsEngine.js # 间隔计算
│ │ └── DecisionLog.vue # 算法决策日志（等宽字体 + 紫色高亮）
│ └── plan/
│ ├── Diagnosis.vue # 认知诊断（全屏液态玻璃）
│ └── PlanView.vue # 计划管理（双栏玻璃布局）
├── theme/ # Zoggin 设计系统
│ ├── colorEngine.js # 每日色彩生成
│ ├── glassTokens.js # 玻璃态 Token 系统
│ └── backgroundModes/ # 六种背景模式
│ ├── BreathMode.vue
│ ├── FogMode.vue
│ ├── AuroraMode.vue
│ ├── ParticlesMode.vue
│ ├── RippleMode.vue
│ └── TextureMode.vue
├── modules/ # 语境数据（可扩展）
│ ├── kaoyan/
│ │ └── contextData.json # 考研真题语境
│ ├── cet6/ # 预留
│ └── ielts/ # 预留
└── stores/
├── cepStore.js # CEP 状态机
├── masteryStore.js # 三维能力向量
└── profileStore.js # 记忆画像 + 主题设置八、实施路线图（CEP 优先，Liquid Glass 同步）
Phase 1：CEP 核心 + Liquid Glass 基础（Week 1-3）
目标：最小可用记忆引擎，视觉风格统一
| 任务 | 交付物 | 视觉验收 |
|---|---|---|
StageI_Semantic.vue |
四迫选 + 元认知校准 | 中玻璃卡片 + Breath 背景 + 紫色渐变按钮 |
StageII_Spelling.vue |
音节化支架 + EIP-1 | 中玻璃卡片 + Fog 背景 + 音节块脉冲动画 |
StageIII_Auditory.vue |
BSR Block + 复测队列 | 中玻璃卡片 + Aurora 背景 + 波形可视化 |
LexicalPanorama.vue |
双栏解析 + 真题语境 | Particles 背景 + Sticky 左侧卡片 |
GlassCard.vue / GlassButton.vue |
UI Kit 基础组件 | 严格符合 2.3 玻璃态层级规范 |
Phase 2：辅助飞轮 + 主题系统（Week 4-5）
| 任务 | 交付物 | 视觉验收 |
|---|---|---|
| 能力星云图 | NebulaGraph.vue |
Canvas RGB 光点 + 呼吸动画 + hover 玻璃浮层 |
| 认知仪表盘 | Dashboard.vue |
轻玻璃顶部条 + 负荷预警脉冲 |
| SRS 决策日志 | DecisionLog.vue |
等宽字体 + 紫色高亮参数 |
| colorEngine.js | 每日一色系统 | 日期种子算法 + 三种主题平滑切换 |
Phase 3：计划系统 + 扩展准备（Week 6-7）
| 任务 | 交付物 | 视觉验收 |
|---|---|---|
| 认知诊断 | Diagnosis.vue |
全屏液态玻璃 + 10 词预测试 |
| 计划管理 | PlanView.vue |
双栏玻璃布局 + 紫色滑块 |
| 模块化接口 | modules/ 规范 |
语境数据标签化，支持未来扩展 |
Phase 4：同步与性能（Week 8）
| 任务 | 交付物 | 视觉验收 |
|---|---|---|
| Supabase + IndexedDB | 离线 CEP 支持 | 离线时仪表盘显示"本地模式"标识 |
| 性能优化 | 大数据量星云图 | 虚拟滚动 + 光点 LOD（Level of Detail） |
九、验收标准（CEP + Liquid Glass 双维度）
| 维度 | 标准 | 验证方式 |
|---|---|---|
| CEP 功能 | 用户不可跳过任何 Stage，不可提前查看答案 | 端到端测试（Cypress）模拟作弊行为 |
| CEP 数据 | 每次交互输出标准事件流，SRS 正确接收 | 单元测试（Jest）验证事件格式 |
| 视觉统一 | 所有组件使用 GlassCard / GlassButton，无自定义样式 |
代码扫描 + 设计走查 |
| 主题切换 | 亮/暗/护眼三种模式，切换时 0.5s 平滑过渡 | 手动测试 + 截图对比 |
| 每日一色 | 同一日期生成相同配色，不同日期不同 | 单元测试验证种子算法 |
| 背景模式 | CEP 各 Stage 对应不同背景，切换 1s 平滑 | 手动测试 |
| 性能 | 页面加载 ≤ 1.5s，星云图 1000 词流畅 | Lighthouse + 性能测试 |
| 兼容性 | Chrome/Edge/Safari 最新版，移动端 iPhone 12+/Android 10+ | 兼容性测试 |
十、一句话产品定义
"在 Zoggin 的液态玻璃世界里，记住一个单词不是点击按钮，而是完成一次完整的认知仪式------从呼吸般的聚焦中看见它，在迷雾般的专注中写出它，于极光般的流动中听出它。每一次提取的挣扎，都在星云图上点亮一颗属于你的光点。"
此文档将 CEP 记忆引擎、Zoggin 液态玻璃 UI、辅助功能飞轮三者熔铸为不可分割的整体。任何开发决策必须以"是否服务于 CEP 闭环"和"是否符合 Liquid Glass 规范"为双重准绳。