底栏重做（方舟 dock）方案
DOCK REDESIGN
状态：🟢 现行 · 最后核对 2026-08-20
把底部 tab 栏从「iOS/微信扁平四等分」重做成「明日方舟 dock」。 2026-08-19 · 🟢 已实施（视觉层 + 指示器 spring 滑动 + 次级系统浮窗 + 四格图标全面重绘 + ambient ticker）
这是 visual-redesign.md 四根杠杆（材质/字体/几何/呼吸感）里 「字体 + 几何」两杠杆在底栏这一小块上的落地样板。做对了，它能反过来当 「技术标签层 + 斜切几何」在全 app 复制的范本；做砸了，就是又一套写死的 iOS 值。
⚠️ 2026-08-20 三杠杆蔓延：
--dock-hairline/--dock-cut已改名--hairline-cold/--cut并蔓延到全 app 的 chrome/卡片；新增--tech-tracking/--cut-sm。本表里的旧名作废，以style.css为准。
定位
底栏在聊天 App 里本身是好 UX（拇指可达、可扫读），问题不在「有底栏」， 在于它长得像通用 iOS 底栏 + 四个 tab 无差别。这一轮的目标是：
- 保留可用性（仍是常驻底栏、仍是四个 slot）；
- 消灭 AI 味（几何、字体、层次三件事，不是调色板）；
- 立起层次（三个「关系面」 + 一个「世界面」，让玩家一眼读出「这是不同的东西」）。
叙事锚点（Diegetic 的最浅层）：整个 app 是一块「罗德岛终端」的屏幕，所有 chrome 都该长得像它的一部分。这里只取「视觉隐喻」，不做字面 diegetic UI——我们 没有游戏里那个「物理界面」层，硬做就是 cosplay。
已定决策（2026-08-19 讨论）
| # | 点 | 结论 |
|---|---|---|
| 1 | 中文技术 readout | 中文主标 + 英文微标（英文大写小字距那层才是 readout 载体） |
| 2 | 切角几何 | 只激活格斜切高亮块（平时底栏是安静轨道，激活时亮一块斜切块） |
| 3 | 激活态指示器 | 顶部发丝线 + 图标填充（双重信号但都不重） |
| 4 | 交易所 | 保持第四格等权，但分区分义（关系面 ｜ 世界面），改名 「泰拉」 |
| 5 | 色相 | 冰蓝（冷光发丝线 + accent） |
| 6 | 范围 | token 化 + 守卫测试；动效后置（指示器 spring 滑动留到 juice 层） |
为什么「分区分义」而不是「降权」
经济不是「第四个功能」，是「第四根支柱」——目标是一个自循环、反向扩展世界的 经济体系。所以交易所不该靠后，该等权但异质：和三个关系面平起平坐，但有一套 自己的身份（微标、读数、图标），不跟聊天抢同一套视觉语言。「显要」和「喧宾」的 区别，就在于是不是有独立身份。
架构原则：次级系统用浮窗，不是 tab（同 canvas）
方舟交互最典范的一条：玩家在复杂系统里从没离开过同一张 canvas。升级/升阶/合卡/ 升技能，按钮从不跳转到全新页面，而是横移淡入、人物位移、透明浮窗、原位展开。
落到我们：次级系统（设置/邮箱/通知/送礼）不该做成「跳走」的页面或 tab，而该是 「在原页之上呼出」的毛玻璃浮窗。这恰好闭环了「交易所该不该独立成 tab」的纠结：
- 主角（三个关系面 + 世界面） → 占用 dock 的 slot；
- 次级系统 → 一律浮窗呼出，不占 tab。
这是「喧宾夺主」的根解：不是把 tab 减到 3 个，而是让次级系统根本不进 tab。
（本次只立原则 + 分区分义；把次级系统逐个迁成浮窗，2026-08-20 已落地为右侧 .sheet-view。）
材质：散点（grain）+ 条纹（警戒线）
方舟用得最多的底图处理是两类：
- 散点（grain）：低密度高颗粒度噪声。用在按钮/卡片背景能让留白不单薄、 提升对比度。中性纹理，10 套主题通用，是「材质」杠杆里最安全、最便宜的一刀。
- 条纹（警戒线）：粗条纹的工业感。适合点缀（分隔、激活指示），别铺满， 否则从「工业」滑向「赛车涂装」。
这轮先在 dock 上试：grain 铺在 dock 底、条纹做在激活斜切块或分隔线上，跑顺了再
蔓延到卡片。grain 用 SVG noise 或重复小噪点的 background-image，零请求；
⚠️ 别用全屏 filter: contrast()/noise 造噪点（烧 GPU + 挡可读性）。
具体规格
HTML（frontend/index.html 底部 #tab-bar）
[ 消息 ] [ 联系人 ] [ 动态 ] │ [ 泰拉 ]
关系面（她的世界） 发丝线 世界面（泰拉）
- 每个
.tab-btn加一个英文微标<span class="tab-sub">（在.tab-label之下）； - 第四个 tab 文字
交易所→泰拉； - 关系面三个与「泰拉」之间插一根分隔线
<span class="tab-divider">（或伪元素）。
微标词（实施时定，我给的默认）：
| tab | 中文主标 | 英文微标 |
|---|---|---|
| 消息 | 消息 | MESSAGES |
| 联系人 | 联系人 | OPERATORS |
| 动态 | 动态 | MOMENTS |
| 世界面 | 泰拉 | TERRA |
「联系人 → OPERATORS」是刻意的小心思：联系人就是干员名册，英文层叫 OPERATORS 比叫 CONTACTS 更像方舟本体。
Token（:root 新增，theme-aware）
| token | 用途 | 说明 |
|---|---|---|
--dock-accent |
激活色 | 默认冰蓝；浅底主题要用压暗的冰蓝 |
--hairline-cold |
冷光发丝线（分隔线 + 顶部指示线） | 默认冰蓝 tint 的白/青；浅底压暗 |
--cut |
斜切角尺寸 | 纯几何，主题无关，只放 :root，各主题不覆盖 |
--fs-tech |
技术标签字号 + 字距 + 字体栈 | 英文微标层：工业等距无衬线（大写+字距），非 serif |
--grain |
散点噪声纹理（overlay） | 材质第一刀：填「留白单薄」，中性、10 套主题通用 |
--stripe |
警戒线粗条纹 | 工业点缀，只在分隔/激活态试，别铺满 |
CSS
.tab-btn.active：clip-path斜切高亮块 +--dock-accent+ 顶部--hairline-cold发丝线 + 图标从描边切填充；.tab-sub：英文微标，text-transform: uppercase+letter-spacing+ 比主标更小、 更灰（--text-tertiary量级）；.tab-divider：一根--hairline-cold竖线。
图标填充的实现
现在图标是描边 SVG mask（stroke-width=1.7、round cap）。填充态需要每格两套
mask：描边（未激活）+ 实心（激活）。做法是给每个 data-icon 再挂一个
--tab-icon-mask-fill（fill 而非 stroke 的同形状 SVG），激活时 .active 规则把
--tab-icon-mask 切到填充版。不新增图片请求，仍是零请求的 mask。
泰拉图标
现有 data-icon="market" 是折线图（趋势图），偏「炒股 App」。既然身份从「交易所」
升成「世界面/泰拉」，图标值得换成世界/罗盘/六边形一类（实施时定，我给罗盘或
六边形两个候选）。
范围（in / out）
| 内容 | |
|---|---|
| ✅ In | dock 视觉语言：斜切几何、技术标签（中文+英文工业等距）、冷光发丝线、分区分义、改名泰拉、泰拉图标、grain+条纹材质 |
| ✅ 补 | 指示器 spring 滑动、次级系统迁浮窗、四格图标全面重绘、ambient ticker（原 Out，2026-08-20 补齐） |
2026-08-20 补：上面两件 Out 已补完 —— 指示器 spring 滑动（
.tab-indicator滑动到激活 tab）和次级系统迁浮窗（设置 + 6 子页 + 观察者收件箱改成右侧.sheet-view玻璃面板 +#sheet-backdrop，见tests/test_sheet_views.py）。
2026-08-20 补（图标）：四格图标已全部重绘成「方舟斜切/细线几何」——消息=斜切气泡 （右上切角，呼应 dock 激活指示器的单角斜切）、联系人=六边形头双干员、动态=菱形罗盘、 泰拉=尖顶六边形。描边/实心两套 mask 各格都保留（激活时描边→实心）。
2026-08-20 补（ticker）：ambient ticker 落在泰拉行情页顶栏——
#market-index-ticker常驻源石指数读数（指数值 + 红涨绿跌的涨跌幅），和余额并排，数据走现成的/market/state的index.value/index.change（不改后端）。见tests/test_market_ticker.py。
主题兼容（唯一的坑）
--dock-accent / --hairline-cold 是 theme-aware，10 套主题都要覆盖。浅底主题
（夕/青绿/纸/绢/墨）漏一个 = 浅底上刷一块深色，重演 CLAUDE.md 里
「漏一个 token = 浅底刷深色，不报错不告警」的翻车。
所以这轮必须带守卫一起走：
- 扩展
tests/test_theme_polarity.py：--dock-accent/--hairline-cold在 10 套 主题都有定义，且明暗极性正确； - 扩展语义色对比度守卫：
--dock-accent在浅底主题上对比度达标（≥ 4.5）。
守卫测试（新增）
- 静态：4 个
.tab-btn都有.tab-label+.tab-sub；第四个是「泰拉」； 分隔线存在；.tab-btn.active用了clip-path+ 顶部发丝线（防「改了又没生效」）。 - 主题：上述两个新 token 的极性与对比度（并入既有主题测试）。
实施顺序
- token（
:root+ 10 套主题 + 极性/对比度守卫；含--grain/--stripe/--fs-tech） - CSS（
.tab-btn.active斜切 +.tab-sub+.tab-divider+ 图标填充变体 + grain/条纹材质） - HTML（微标 + 改名 + 分隔线）
- 图标（泰拉 SVG + 各 tab 填充变体）
- 静态守卫测试
python scripts/bump_frontend_cache.py
实施时已定（原「未决」）
| 未决 | 落地 |
|---|---|
| 泰拉微标 | TERRA（呼应「世界」身份） |
| 泰拉图标 | 六边形（M12 4 L18.9 8 … Z 尖顶六边形，方舟几何签名） |
--dock-accent 各主题 |
跟随各自 accent（--dock-accent: var(--active-color)）；默认暗色签名是冰蓝 #6cc9ea |
| 斜切形状 | 单角切右上，--cut: 10px |
| 技术字体落地 | letter-spacing + 等距/几何栈 仿（--tech-font），零成本零请求 |