docs: 补充现代工作台设计规范

- 完善产品主题、组件语言与交互动效的设计说明

- 补充导航骨架、表面层级与设计 Token 的现代化规范

docs/design/design-tokens-draft.md

@@ -9,6 +9,7 @@
 - 为后续主题统一提供命名和分层标准
 - 为设计与前端提供同一套语义映射
 - 为浅色 / 深色、三端统一和组件族一致性提供基础
+- 为 EasyFlow 从传统管理后台视觉演进到现代工作台视觉提供稳定底座
 
 ## 2. Token 设计原则
 
@@ -43,6 +44,17 @@
 
 页面层可消费组件 Token 或语义 Token，不直接定义新的品牌色、中性色、阴影和圆角体系。
 
+### 2.4 Token 必须服务现代工作台体验
+
+Token 不只是为了“统一”，还要确保 EasyFlow 能稳定呈现更现代的产品气质。
+
+应优先支持：
+
+- 更鲜明的品牌色角色，而不是只剩一个主按钮蓝
+- 更清晰的表面层级，而不是靠边框堆结构
+- 更轻的导航骨架材质，如轻度液态玻璃、弱染色表面、轻悬浮
+- 更开放的大屏工作台布局，而不是传统表单后台的硬切分区
+
 ## 3. 推荐目录与命名方向
 
 建议未来逐步按以下能力组织：
@@ -79,8 +91,14 @@ design-tokens/
 | `--color-primary-hover` | `#3D8BFF` | 主按钮悬停 |
 | `--color-primary-active` | `#0F5FD6` | 主按钮按下 |
 | `--color-primary-soft` | `#EAF3FF` | 品牌浅底 |
+| `--color-primary-container` | `#DDEBFF` | 品牌容器 / 当前态柔和承载面 |
 | `--color-primary-foreground` | `#FFFFFF` | 品牌色上的文字 |
 
+补充：
+
+- 参考 Material Design 3 的 `color roles` 思路，品牌色不应只出现在按钮，还应进入导航当前态、局部染色表面、焦点和关键反馈。
+- 参考 Apple 导航骨架表达，品牌色进入表面层时应优先使用低浓度容器色，而不是整块纯色铺底。
+
 ### 4.2 中性色
 
 | Token | 值 | 说明 |
@@ -89,6 +107,8 @@ design-tokens/
 | `--color-bg-canvas` | `#F2F5F9` | 内容画布或区域底色 |
 | `--color-bg-panel` | `#FFFFFF` | 卡片、面板、弹窗主背景 |
 | `--color-bg-subtle` | `#F8FAFD` | 次层背景 |
+| `--color-bg-elevated` | `#FCFDFF` | 轻浮起表面 |
+| `--color-bg-glass` | `rgba(255,255,255,0.72)` | 轻度液态玻璃表面 |
 | `--color-bg-hover` | `#EEF3F9` | hover 背景 |
 | `--color-border` | `#DCE3EC` | 常规边框 |
 | `--color-border-strong` | `#CBD6E2` | 稍强边框 |
@@ -122,6 +142,25 @@ design-tokens/
 - `--color-text-strong-dark`: 高亮浅灰
 - `--color-primary-dark`: 延续主蓝，但不大幅提高饱和度
 
+### 4.5 导航与骨架表面 Token 草案
+
+这组 Token 用于支撑顶栏、侧栏、tab、搜索入口、浮层等“现代工作台骨架”。
+
+| Token | 建议值 | 说明 |
+| --- | --- | --- |
+| `--color-nav-surface` | `rgba(255,255,255,0.78)` | 导航主表面 |
+| `--color-nav-surface-subtle` | `rgba(255,255,255,0.64)` | 导航次层表面 |
+| `--color-nav-item-hover` | `rgba(22,119,255,0.08)` | 导航 hover |
+| `--color-nav-item-active` | `rgba(22,119,255,0.14)` | 导航当前态容器 |
+| `--color-nav-item-active-text` | `#125ACC` | 导航当前态文字 |
+| `--color-nav-muted-text` | `#536174` | 导航弱文本 |
+| `--color-glass-border` | `rgba(255,255,255,0.68)` | 玻璃表面边界高光 |
+
+说明：
+
+- 这组 Token 不鼓励厚边框和强高光，而是为“轻度液态玻璃 + 柔和染色 + 轻悬浮”提供统一语义。
+- 页面层不得自己发明玻璃 rgba 值，应优先回到 Token。
+
 ## 5. 圆角 Token 草案
 
 | Token | 值 | 用途 |
@@ -137,6 +176,7 @@ design-tokens/
 
 - 圆角应该柔和但理性，不做玩具化超大圆角。
 - 页面层禁止新增“只适合本页”的圆角数值。
+- 导航工具按钮、搜索入口、轻浮层控制点可适度更圆润，但必须通过共享 Token 表达，而不是页面层临时放大圆角。
 
 ## 6. 阴影 Token 草案
 
@@ -145,11 +185,13 @@ design-tokens/
 | `--shadow-sm` | `0 10px 24px -24px rgba(18, 36, 62, 0.18)` | 基础卡片 |
 | `--shadow-md` | `0 18px 36px -28px rgba(18, 36, 62, 0.22)` | 菜单、浮层 |
 | `--shadow-lg` | `0 28px 56px -32px rgba(18, 36, 62, 0.26)` | 弹窗、抽屉 |
+| `--shadow-glass` | `0 18px 40px -30px rgba(18, 36, 62, 0.2)` | 玻璃骨架 / 导航悬浮 |
 
 说明：
 
 - 阴影用于表达层级，不用于制造厚重“高级感”。
 - 同一页面内避免多套阴影并存。
+- 对导航骨架，优先使用轻玻璃阴影和表面层差，而不是把阴影做厚。
 
 ## 7. 间距 Token 草案
 
@@ -266,7 +308,27 @@ design-tokens/
 --input-placeholder: var(--color-text-muted)
 ```
 
-### 11.3 Panel
+### 11.3 Navigation Shell
+
+```text
+--nav-surface: var(--color-nav-surface)
+--nav-surface-subtle: var(--color-nav-surface-subtle)
+--nav-item-hover-bg: var(--color-nav-item-hover)
+--nav-item-active-bg: var(--color-nav-item-active)
+--nav-item-active-text: var(--color-nav-item-active-text)
+--nav-item-muted-text: var(--color-nav-muted-text)
+--nav-glass-border: var(--color-glass-border)
+--nav-shadow: var(--shadow-glass)
+--nav-radius: var(--radius-lg)
+--nav-control-radius: var(--radius-pill)
+```
+
+说明：
+
+- 这组别名 Token 服务顶栏、侧栏、Tab、Breadcrumb、全局搜索、工具按钮等统一导航骨架。
+- 导航骨架的现代感必须来自统一别名 Token，而不是页面层散落的 rgba、blur、shadow 临时值。
+
+### 11.4 Panel
 
 ```text
 --panel-radius: var(--radius-lg)
@@ -275,7 +337,7 @@ design-tokens/
 --panel-shadow: var(--shadow-sm)
 ```
 
-### 11.4 Modal / Drawer
+### 11.5 Modal / Drawer
 
 ```text
 --overlay-bg: rgba(15, 23, 42, 0.4)