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

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

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

docs/design/README.md

@@ -2,6 +2,12 @@
 
 本目录用于沉淀 EasyFlow 的长期设计资产，作为产品、设计、前端共同维护的正式知识库。
 
+当前整体方向：
+
+- 以 `冷静智能` 为主题核心
+- 默认以 Apple HIG 作为第一视觉与交互参照，再用 Google Material Design 3 补足系统化落地
+- 目标是让 EasyFlow 从传统表单式管理系统视觉中走出来，成为简约、现代、富有活力的工作台
+
 ## 文档清单
 
 ### 1. 产品主题与总规范
@@ -12,6 +18,7 @@
 
 - 统一产品主题和体验方向
 - 定义品牌气质、色彩哲学、UI 风格、交互哲学与三端一致性
+- 定义 EasyFlow 如何摆脱传统后台式视觉，建立现代工作台语言
 
 ### 2. Design Tokens 草案
 
@@ -22,6 +29,7 @@
 - 设计 Token 规划
 - 前端变量命名、主题映射与公共层沉淀
 - 浅色 / 深色主题统一策略
+- 导航骨架材质、表面层级、品牌色角色与现代工作台表达
 
 ### 3. 基础组件规范
 
@@ -31,6 +39,7 @@
 
 - 按钮、输入框、卡片、表格、抽屉、弹窗、标签等组件统一
 - 页面工具栏、筛选区、空状态等常见组合层设计
+- 列表页、导航骨架、工具栏和工作台组合层的现代化设计
 
 ### 4. 交互与动效规范
 
@@ -40,6 +49,7 @@
 
 - 表单交互、异步反馈、危险操作、状态页
 - 页面切换、面板出现、微交互、动效时长与缓动策略
+- 提升系统“活力”和“流动感”，避免僵硬表单后台交互
 
 ## 使用建议
 

docs/design/component-guidelines.md

@@ -18,6 +18,7 @@ EasyFlow 的组件应遵守以下统一气质：
 - 轻盈但稳定
 - 精致但克制
 - 现代但不花哨
+- 鲜明但不失控
 
 统一要求：
 
@@ -25,6 +26,13 @@ EasyFlow 的组件应遵守以下统一气质：
 - 同类组件状态规则一致
 - 同类组件交互反馈一致
 - 同类组件在不同端只允许密度差异，不允许语言割裂
+- 不做传统表单后台式的强框架、重线条、死板排布
+
+补充原则：
+
+- Apple HIG 强调层级、材质、清晰与内容优先，EasyFlow 可大胆借鉴其导航骨架和控制点表达。
+- Material Design 3 强调 `color roles`、`tonal surfaces`、`adaptive layouts`，EasyFlow 可大胆借鉴其色彩和表面层组织方式。
+- 最终目标不是“像 Apple”或“像 Google”，而是让 EasyFlow 像一个现代工作台，而不是传统管理系统模板。
 
 ## 3. 按钮 Button
 
@@ -41,6 +49,7 @@ EasyFlow 的组件应遵守以下统一气质：
 - 主按钮明确，但不刺眼、不厚重、不夸张。
 - 同一区域内按钮高度、圆角、左右内边距和图标尺寸统一。
 - 图标按钮必须有足够点击热区，不可只按图标本体大小计算。
+- 导航骨架中的工具按钮可以更有材质感和触感，但不应厚重、拟物或果冻化。
 
 ### 3.3 状态要求
 
@@ -69,6 +78,7 @@ EasyFlow 的组件应遵守以下统一气质：
 - 搜索是效率辅助，不应默认比主按钮更抢眼。
 - 搜索图标优先弱化，placeholder 保持清楚但不过深。
 - 高级筛选展开后，信息层级仍需清晰，不形成工具栏拥堵。
+- 在现代工作台场景中，搜索入口可使用轻玻璃、轻染色和更圆润的容器，但应作为“柔和工具”而不是“表单输入框”。
 
 ### 4.3 校验与提示
 
@@ -88,6 +98,7 @@ EasyFlow 的组件应遵守以下统一气质：
 - 默认低饱和背景 + 清晰文字
 - 相同状态在不同页面使用相同颜色和风格
 - 控制一页中高彩状态标签的数量
+- 状态表达仍以语义优先，但当前态、品牌态和重点态可以更鲜明，不必做得过灰。
 
 ## 6. 卡片 Card / Panel
 
@@ -106,6 +117,7 @@ EasyFlow 的组件应遵守以下统一气质：
 
 - 主要通过内边距、标题层级、弱分隔建立结构
 - 弱边框或极轻阴影即可，不做厚重悬浮卡片
+- 正文主面板应保持清晰稳定，导航骨架和轻浮层才是更适合使用轻玻璃和柔和悬浮感的位置。
 
 ## 7. 弹窗 Modal / 抽屉 Drawer / 浮层 Popover
 
@@ -167,6 +179,13 @@ EasyFlow 的组件应遵守以下统一气质：
 - 避免同时叠加过多输入框、下拉、标签和按钮
 - 高级筛选建议折叠或分层展示
 
+### 9.4 现代工作台工具栏
+
+- 工具栏不应看起来像一排传统表单控件堆叠。
+- 可用更开放的留白、更柔和的按钮组、更轻的搜索容器来提升现代感。
+- 应优先减少“每个操作一个线框框”的传统后台视觉。
+- 在 toB 页面中，工具栏要更像操作系统级控制层，而不是审批系统式字段条。
+
 ## 10. Tabs / Breadcrumb / 导航类组件
 
 ### 10.1 Tabs
@@ -185,6 +204,13 @@ EasyFlow 的组件应遵守以下统一气质：
 - 导航风格轻量，重点是帮助定位，不抢占内容区注意力
 - 选中态与 hover 态要统一，避免不同模块风格分裂
 
+### 10.4 现代导航骨架
+
+- 顶栏、侧栏、tab、breadcrumb、搜索入口、工具按钮应被视为统一导航骨架系统。
+- 默认允许轻度液态玻璃、柔和模糊、弱染色和轻悬浮。
+- 当前态可以更鲜明、更像“现代工作台中的激活项”，而不是传统树菜单里一条蓝字。
+- 导航骨架的任务是“提升流动感和定位感”，不是把页面切成一块块硬区域。
+
 ## 11. 表单 Form
 
 ### 11.1 结构原则
@@ -250,6 +276,11 @@ EasyFlow 的组件应遵守以下统一气质：
 4. 表格 / 卡片列表
 5. 分页 / 列表底部说明
 
+要求：
+
+- 列表页应尽量摆脱传统“标题下方一整排表单 + 粗边框表格”的后台感。
+- 可以通过更轻的工具栏、更开阔的内容面、更清晰的主操作强调来提升活力。
+
 ### 14.2 详情页
 
 推荐结构：
@@ -270,6 +301,8 @@ EasyFlow 的组件应遵守以下统一气质：
 
 - 更紧凑
 - 更强调检索、管理、批量操作和信息秩序
+- 但视觉上应更像“现代工作台”，而不是“传统表单管理系统”
+- 导航骨架允许轻度液态玻璃、更鲜明的品牌当前态和更通透的控制层表达
 
 ### 15.2 User Center
 

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)

docs/design/easyflow-product-design-spec.md

@@ -14,7 +14,7 @@
 
 ### 2.2 一句话定义
 
-EasyFlow 是一个克制、可信、现代、交互友好的智能工作台。
+EasyFlow 是一个克制、可信、现代、富有表达力且交互友好的智能工作台。
 
 ### 2.3 品牌气质关键词
 
@@ -25,6 +25,9 @@ EasyFlow 是一个克制、可信、现代、交互友好的智能工作台。
 - 可信
 - 精致
 - 顺手
+- 现代
+- 鲜明
+- 灵动
 
 ### 2.4 明确避免的方向
 
@@ -33,6 +36,12 @@ EasyFlow 是一个克制、可信、现代、交互友好的智能工作台。
 - 为了“科技感”牺牲信息层级和可读性
 - 为了“高级感”弱化交互反馈或降低操作效率
 
+说明：
+
+- 顶栏、侧栏、浮层等导航骨架允许使用轻度液态玻璃质感，包括低对比半透明表面、柔和背景染色与克制的模糊。
+- 这种玻璃质感必须服务于空间分层和手感提升，不能依赖重描边、强高光、厚阴影或大面积彩色铺底制造存在感。
+- `冷静智能` 不等于保守、僵硬、缺乏表现力，不应默认落成传统 ERP 式的重线条后台。
+
 ## 3. 产品体验目标
 
 EasyFlow 需要同时承载企业级管理平台与 AI 应用开发平台的双重身份，因此整体体验必须同时传达以下四类感受：
@@ -52,6 +61,30 @@ EasyFlow 需要同时承载企业级管理平台与 AI 应用开发平台的双
 
 界面不喧宾夺主，主任务、主操作与主信息始终占据视觉优先级。
 
+### 4.2A 现代但不保守
+
+EasyFlow 应主动吸收 Apple HIG 与 Google Material Design 3 中成熟的现代界面语言，包括：
+
+- 用表面层、材质、色调和留白建立层级，而不是依赖大量分割线
+- 用语义色和色彩角色建立品牌表达，而不是把色彩收缩到只剩按钮
+- 用流动、适配和组件一致性提升高级感，而不是靠硬框和堆叠结构显得“专业”
+
+克制不是收缩表达，而是让表达有秩序、有重点。
+
+### 4.2B Apple-first 的 toB 应用策略
+
+EasyFlow 在视觉与交互方向上，默认以 Apple HIG 作为第一参照系，再用 Material Design 3 补足系统化的色彩角色、自适应布局与组件一致性。
+
+这不意味着机械模仿平台样式，而是意味着：
+
+- toB 系统不必天然长成传统 ERP 的厚边框、重分区、强表单压迫感界面
+- 导航骨架可以更通透、更轻盈、更有悬浮感，让内容真正成为主角
+- 工具栏、搜索、筛选、切换控件应更像现代工作台的控制层，而不是一排表单框堆叠
+- 组件要像高质量产品控件，而不是“能用就行”的业务控件
+- 大屏界面要保留留白、呼吸感和动态层次，不因空间变大而自动增加线框和容器
+
+若 `传统后台习惯` 与 `现代工作台体验` 冲突，默认优先后者，但必须保证可读性、可学习性和操作效率。
+
 ### 4.3 统一胜过局部惊艳
 
 单页的“特别设计”如果破坏了全局一致性，不应视为正向设计资产。
@@ -95,6 +128,8 @@ EasyFlow v1 使用 `冷静智能蓝` 作为统一品牌色策略。
 - 色彩比例建议控制为：`70% 中性背景 + 20% 结构层级色 + 10% 品牌强调色`。
 - 成功、警告、错误色属于语义系统，不参与品牌表达，不作为页面主装饰色。
 - 深色模式延续同一品牌策略，但背景使用石墨深灰体系，避免纯黑带来的生硬与失真。
+- 品牌色不应只停留在按钮，可合理参与导航当前态、重点操作、选中反馈、局部染色表面和关键数据强调。
+- 参考 Material 3 的 `color roles` 思路，未来 EasyFlow 应逐步建立主色、表面色、容器色、文本色、状态色的语义映射。
 
 ### 5.4 语义色原则
 
@@ -116,12 +151,31 @@ EasyFlow 的界面风格定义为：
 - 大留白
 - 强对齐
 - 少装饰
+- 轻材质
+- 鲜明重点
 
 ### 6.2 层级建立方式
 
 - 优先依赖留白、分组、对齐、字号、字重和弱分隔线建立层次。
 - 少用“卡片套卡片”“面板套面板”建立结构。
 - 避免粗边框、重阴影、过多色块同时出现。
+- 对于全局导航骨架，可适度使用轻度液态玻璃表面替代硬分割线，但仍应以低对比、低装饰为前提。
+- 参考 Material 3 的 `tonal elevation` 思路，优先通过表面明度、色调差和轻阴影区分层级，而不是靠边框切出一个个盒子。
+
+### 6.2A 导航骨架材质
+
+导航骨架默认可以更现代一些：
+
+- 侧栏、顶栏、tab 区、搜索框、轻浮层允许使用轻度液态玻璃
+- 导航项的当前态允许更鲜明的品牌强调、柔和胶囊和轻染色背景
+- 工具按钮、搜索入口、切换控件可以比正文组件更具材质感，但不能厚重
+- 内容区仍应保持清晰和稳定，避免整页都被玻璃化
+
+补充：
+
+- 导航骨架的现代感优先来自透明度、模糊、染色、圆角、轻阴影和动态响应，而不是边框和分隔条
+- 面包屑、标签导航、全局搜索、工具按钮应作为同一套“控制层语言”统一设计
+- 这种表达要让页面看起来更像现代软件工作台，而不是更像传统管理表单容器
 
 ### 6.3 字体与信息层级
 
@@ -142,6 +196,11 @@ EasyFlow 的圆角应柔和但理性，不追求玩具感或夸张圆润。
 - 弹窗 / 抽屉 / 高阶浮层：`20px`
 - 徽标 / 标签胶囊：`999px` 或 `8px`
 
+补充：
+
+- 导航工具按钮、搜索入口、轻浮层中的控制点，可以适度更圆润，以获得更现代的触感。
+- 这种更圆润的表达应集中在骨架和交互热点，不扩散到整页所有容器。
+
 ### 6.5 阴影策略
 
 阴影只承担“层级提示”功能，不承担风格表达主角。
@@ -208,6 +267,13 @@ EasyFlow 的圆角应柔和但理性，不追求玩具感或夸张圆润。
 - 次级动作、帮助说明、附属信息应主动退后。
 - 响应式下优先保持层级和操作顺序，再压缩尺寸与布局。
 
+### 8.3 自适应与现代布局
+
+- 参考 Material Design 的 `adaptive layout` 思路，页面骨架应优先考虑不同窗口尺寸下的重排，而不是仅靠缩小组件。
+- 大屏页面应保留呼吸感和内容聚焦，不因空间变大而增加无意义边框和容器。
+- 导航和内容的关系应尽量“浮于内容之上”或“包裹内容而不压迫内容”，避免传统后台式的刚性框架感。
+- toB 页面不应因为信息复杂就默认采用“满屏表单 + 满屏线框”的保守构图；复杂度应通过层级与编排解决，而不是通过框线堆砌解决。
+
 ## 9. 交互哲学
 
 ### 9.1 总体方向

docs/design/interaction-motion-guidelines.md

@@ -12,6 +12,7 @@ EasyFlow 的交互原则是：
 - 可预期
 - 低打扰
 - 可恢复
+- 有活力
 
 界面应始终让用户知道：
 
@@ -20,6 +21,11 @@ EasyFlow 的交互原则是：
 - 下一步可以做什么
 - 出错了如何恢复
 
+补充：
+
+- Apple HIG 所强调的直接、顺滑、层级清晰的控制感，应成为 EasyFlow 的默认交互目标。
+- toB 系统不应因为强调稳定，就牺牲流动感、反馈质量和控件手感。
+
 ## 3. 交互优先级规则
 
 ### 3.1 主操作稳定
@@ -36,6 +42,7 @@ EasyFlow 的交互原则是：
 
 - 任何视觉变化都应优先承担反馈职责
 - 不为“好看”增加没有业务意义的动画
+- 但也不应因为“稳”而做成死板、僵硬、毫无气息的后台交互
 
 ## 4. 表单交互规范
 
@@ -151,6 +158,7 @@ EasyFlow 的动效关键词固定为：
 - 帮助理解层级变化
 - 帮助理解状态切换
 - 帮助降低跳变感
+- 帮助界面保持现代、轻盈和有生命力
 
 ## 10. 动效时长与缓动
 
@@ -181,6 +189,7 @@ EasyFlow 的动效关键词固定为：
 - 颜色轻微变化
 - 背景轻微提亮
 - 轻微阴影或轻微上浮
+- 导航骨架中的 hover 可以有更明显一点的材质变化，但不应造成大幅跳动
 
 ### 11.2 Focus
 
@@ -191,6 +200,7 @@ EasyFlow 的动效关键词固定为：
 
 - 淡入 + 轻微位移
 - 避免大幅滑入造成压迫感
+- 顶栏、侧栏、轻浮层可结合轻度模糊和透明度变化，形成更现代的进入感
 
 ### 11.4 弹窗 / 抽屉
 
@@ -220,6 +230,12 @@ EasyFlow 的动效关键词固定为：
 - 不要简单缩小所有控件到影响手感
 - 小屏下优先重排而不是一味压缩
 
+### 12.4 现代工作台感
+
+- 页面切换、导航激活、工具区状态变化应体现“流动感”，而不是生硬闪现。
+- 动效应让界面更像一个现代系统工作台，而不是一组静态表单页面之间的硬切换。
+- 动效与反馈应帮助用户感知“控制层浮于内容之上”的空间关系，而不是通过硬分隔线提醒区域切换。
+
 ## 13. AI 模块交互建议
 
 ### 13.1 生成中