听风手记网站重构设计档案

状态：设计归档 日期：2026-06-10 用途：记录本站从 Aurora Archives 到「听风手记」全量重构的设计思路与决策，供后续迭代回看。

---

1. 重构背景与目标

1.1 背景

前一版站点（Aurora Archives / 光层档案馆）页面数量多（首页、文章、归档、关于、下载、画廊、时间线、视频、笔记），但实际有效内容只有 9 篇已发布文档。结构大于内容，维护成本与呈现价值不匹配。

1.2 重构目标

只保留已发布文档，其余全部重做
要求：足够现代化、足够炫酷

拆解为三条设计原则：

• 内容优先：结构为 9 篇文档服务，砍掉一切空壳页面
• 视觉记忆点：第一屏要有明确的风格态度，不做”安全的模板感”
• 长期可维护：纯静态、零运行时依赖、数据单点维护

---

2. 品牌定位

2.1 命名决策

候选方向	结论
Aurora Archives（旧名）	弃用，与新定位脱节
科幻系（信号站 / 深空 / 频道）	弃用，名字过于概念化
听风手记 / Tingfeng Notes	采用

决策理由：

• 「听风」呼应域名 tingfeng.ink，名字质朴、长期不过时
• 「手记」准确描述内容属性：项目文档、方案、笔记
• 名字收敛、视觉张扬 —— 反差本身构成记忆点

2.2 品牌符号

• 终端式 logo：TF:// + 闪烁下划线光标
• 一句话定位：风把信号送到这里，我把它们记下来
• 域名 / 邮箱 / GitHub / 云盘入口全部保留不变

---

3. 视觉系统：极光终端风

3.1 风格定义

在四个候选方向（极光终端、暗黑极简编辑、新粗野主义、流体渐变）中选定极光科幻终端风：

深色为主 + 霓虹极光光晕 + 玻璃拟态 + 等宽字体点缀 + 扫描线/网格动效

气质参照：未来感的数据档案终端，冷静但有光。

3.2 色彩 Token

Token	值	用途
--bg	#05070d	近黑深蓝底色
--cyan	#22d3ee	主强调色 / A01 集合色
--violet	#a855f7	次强调色 / W01 集合色
--mint	#34d399	状态灯 / 渐变收尾
--gradient-aurora	cyan → violet → mint	按钮、进度条、品牌渐变

单暗色主题，移除了旧版的明暗切换 —— 极光与霓虹只在深色底上成立，双主题会稀释风格纯度。

3.3 背景层（全站固定）

由四层叠加构成”天空”：

1. 三团大型模糊极光 blob（青 / 紫 / 翠），blur(90px)，各自 26–38s 缓慢漂移
2. 细网格线，顶部径向 mask 渐隐
3. SVG fractalNoise 动态噪点，steps() 跳帧模拟胶片颗粒
4. 扫描线自上而下循环掠过（11s）

3.4 字体策略

角色	字体
标题 Display	Space Grotesk
正文	Inter + PingFang SC / Microsoft YaHei
终端点缀	JetBrains Mono

等宽字体承担”终端感”：kicker 用 // 前缀、搜索提示符 ›、状态行、标签、日期全部走 mono。

3.5 玻璃卡片

统一 .glass 原语：

• backdrop-filter: blur(18px) + 半透明面板色
• 1px 渐变描边用 mask-composite 技巧实现，默认隐藏、hover 浮现
• hover：上浮 4px + 青色光晕投影

---

4. 页面结构

4.1 精简为四页

/            首页（含 #about 关于段落）
/docs/       手记索引（合并旧归档的筛选与搜索）
/docs/[slug] 文档详情（9 篇 md，正文零改动）
/404         信号丢失页

删除页面：archive（并入 /docs/）、about（并入首页锚点）、以及旧版全部空壳页。旧路径通过 Astro redirects 配置 301 兜底。

4.2 首页叙事顺序

1. Hero：全屏，「听风手记」两行大字逐行升起 + 乱码解码动画 + SYSTEM ONLINE 状态灯
2. 精选手记：featured 大卡片 + 最近 4 篇信号流
3. 内容集合：A01 / W01 双卡片，集合色发光编号 + 占比进度条入场动画
4. 关于本站：身份说明 + Email / GitHub / 云盘联系行

4.3 文档详情页

• 顶部 2px 霓虹渐变阅读进度条，scroll 驱动
• 代码块做成终端窗口：红黄绿三点 + tingfeng@notes:~$ 提示符
• 引用块紫色霓虹左边线；h2 自动带 # 终端前缀
• 底部上一篇 / 下一篇导航，从文档元数据按日期自动推导

---

5. 交互与动效

交互	实现
命令面板	⌘K / / 唤起，纯 JS 过滤，数据来自构建期注入的 commandEntries
索引筛选	分类 pill + 实时搜索，支持 ?cat=A01 深链
滚动入场	IntersectionObserver + .reveal，触发一次即解除观察
页面切换	Astro View Transitions（ClientRouter）
404	glitch 故障文字 + conic-gradient 旋转雷达

动效纪律：

• 所有事件绑定走 document 级委托或 astro:page-load，兼容视图过渡后的 DOM 替换
• prefers-reduced-motion 下全部动画降级为静态

---

6. 技术决策

• 栈不变：Astro 6 + Tailwind 4（仅作 reset / 工具层，设计系统手写 CSS 变量）
• 零客户端框架：全部交互用原生 JS，无 React/Vue 孤岛
• 数据单点：src/data/content.ts 维护站点信息、文档元数据、导航与命令面板条目，页面全部从此派生
• 文档零迁移：9 篇 md 的 frontmatter layout 路径不变，重写 DocLayout 即完成换皮

---

7. 后续迭代方向

• 新文档发布只需：放入 src/pages/docs/ + 在 content.ts 注册一条元数据
• 若集合增多（A01 / W01 之外），徽章色与集合卡片需同步扩展
• 可选增强：RSS、OG 图自动生成、文档目录（TOC）侧栏