AnsonTang UI
Fluid Orchestrated UI — 设计与动效技术规范完整演示。打造具有 Palantir AIP / Linear / Vercel Dashboard 高级感的企业级软件界面。面板平滑滑入、图层有序堆叠、信息渐进式展开，所有动画都基于 弹簧物理模型 (Spring Physics)。
20
演示章节
110+
交互示例
4
弹簧预设
24+
设计令牌
110+
Vue3 代码
5
布局状态
目标服务器架构
后端
ASP.NET MVC + Web API
前端框架
Vue3 + Element Plus
CSS
Tabler + TailwindCSS
数据库
SQL Server 2012
设计令牌
§1 Design Tokens & Color System
设计令牌是整个 UI 系统的基础。所有颜色、间距、阴影等视觉属性都通过 CSS 自定义属性（Custom Properties）定义，确保全局一致性和可维护性。深色模式以深蓝黑色系(#0D1117)为主基调，浅色模式以暖灰白(#F4F2EE)为主基调，均避免使用纯黑(#000)或纯白(#FFF)。
1.1 背景色系统 (Background Colors)
规则 R-01六层背景色构建空间深度，从最深的应用背景到半透明的卡片表面
--bg-app
应用主背景
--bg-sidebar
侧边栏背景
--bg-card
卡片表面
--bg-card-hover
卡片悬停
--bg-elevated
悬浮层表面
--bg-focus-overlay
聚焦遮罩
1.2 语义化强调色 (Semantic Accent Colors)
规则 R-029种语义化强调色，每种颜色都有明确的使用场景和含义
--accent-blue
AI 动作
--accent-blue-light
AI 步骤标题
--accent-magenta
选中/聚焦
--accent-green
正向 KPI
--accent-red
警报/警告
--accent-yellow
图谱连接线
--accent-orange
传感器数据
--accent-teal
区域类型
--accent-cyan
设备类型
1.3 文字色阶 (Text Color Hierarchy)
规则 R-03四级文字色阶构建信息层次
--text-primary
主文字 — The quick brown fox jumps over the lazy dog
--text-secondary
次要文字 — The quick brown fox jumps over the lazy dog
--text-tertiary
辅助文字 — The quick brown fox jumps over the lazy dog
--text-link
链接文字 — The quick brown fox jumps over the lazy dog
1.4 阴影与层级 (Elevation & Shadows)
规则 R-04三级阴影系统定义界面的空间层次
--shadow-panel
--shadow-card
--shadow-card-hover
1.5 圆角系统 (Border Radius)
规则 R-05三级圆角系统，从紧凑的6px到宽松的16px
小圆角
中圆角
大圆角
布局架构 — 五种核心状态
§2 Layout Architecture — Five Core States
该 UI 是一个单页空间画布(Single-page spatial canvas)。它从不进行整页跳转，而是通过动画改变面板的宽度、位置和透明度，在五种布局状态之间过渡。用户始终清楚自己从哪里来，现在处于界面的什么空间位置。
2.1 布局状态切换器 (Layout State Switcher)
布局 L-01~L-05 | springLayout点击按钮切换不同布局状态，观察面板的平滑过渡动画
2.2 状态过渡规则 (Transition Rules)
编排规则 C-01 方向一致性所有布局状态之间的过渡都遵循严格的方向一致性和编排规则
主内容区向右侧收缩，同时新面板从左侧滑入
新面板向左侧滑出，主内容区恢复全屏
三个栏目同时从左侧滑入，每个栏目依次延迟 50ms (Stagger)
背景三栏淡出(opacity 0, scale 0.98)，聚焦遮罩层淡入
上述过程反转
抽屉从右侧边缘滑入，或模态框从中心放大出现(scale 0.95→1)
动画引擎 — 弹簧物理模型
§3 Animation Engine — Spring Physics (Mandatory)
所有布局动画必须使用弹簧物理模型(Spring Physics)，绝不使用生硬的 CSS 缓动(ease)。弹簧动画由三个物理参数控制：刚度(Stiffness)决定弹簧的紧绷程度，阻尼(Damping)控制振荡的衰减速度，质量(Mass)影响运动的惯性。
3.1 四种弹簧预设对比 (Spring Presets Comparison)
弹簧预设 SP-01~04同时触发四种预设，直观对比不同物理参数的运动特性
springLayout
S:250 D:28 M:1
springSnappy
S:500 D:35 M:0.8
springGentle
S:150 D:20 M:1
springModal
S:400 D:30 M:0.9
3.2 弹簧参数调节器 (Interactive Spring Tuner)
弹簧公式 F=-k(x-t)-dv拖动滑块实时调节弹簧参数，观察运动曲线变化
当前配置: { type: "spring", stiffness: 250, damping: 28, mass: 1.0 }
3.3 CSS ease vs Spring Physics 对比
规范要求：禁用CSS ease直观对比传统 CSS 缓动和弹簧物理模型的运动差异
注意弹簧物理模型产生的自然回弹效果 — 这是 CSS ease 无法实现的。弹簧动画没有固定时长， 它由物理参数(刚度、阻尼、质量)决定运动轨迹，因此感觉更加自然和有机。
3.4 弹簧预设参数速查表 (Spring Presets Reference)
速查表四种预设的完整参数和适用场景
| 预设名称 | Stiffness | Damping | Mass | 适用场景 |
|---|---|---|---|---|
| springLayout | 250 | 28 | 1 | 面板滑入、双面板尺寸调整 |
| springSnappy | 500 | 35 | 0.8 | 悬停、选中、开关切换 |
| springGentle | 150 | 20 | 1 | 内容淡入、AI 步骤出现 |
| springModal | 400 | 30 | 0.9 | 遮罩层/模态框的入场 |
动画引擎可视化
§3.1 Animation Engine Visualization
弹簧物理模型是整个动效系统的核心引擎。通过调节刚度(stiffness)、阻尼(damping)和质量(mass)三个参数，可以精确控制动画的速度、弹性和手感。此区域提供实时可视化工具，帮助理解每个参数对运动曲线的影响。
3.1.1 弹簧曲线可视化 (Spring Curve Visualization)
引擎核心四种预设弹簧的运动曲线对比，点击预设名称可单独查看
3.1.2 交互式参数调节器 (Interactive Parameter Tuner)
弹簧公式 F = -k(x-t) - dv拖动滑块实时调节弹簧参数，观察运动效果变化
3.1.3 预设小球下落对比 (Preset Ball Drop)
四种预设对比四种预设弹簧同时释放小球，直观对比运动特性差异
Layout
布局变化
s:250 d:28 m:1
Snappy
微交互
s:500 d:35 m:0.8
Gentle
柔和展现
s:150 d:20 m:1
Modal
模态框
s:400 d:30 m:0.9
3.1.4 CSS Ease vs Spring 对比 (CSS vs Spring)
为什么选择弹簧传统CSS缓动函数与弹簧物理模型的运动差异对比
弹簧动画具有自然的过冲(overshoot)和回弹，而CSS ease-out只有单调减速
动效编排规则
§3.2 Choreography Rules
动效编排确保所有动画作为协调的整体运动，而不是各自独立。四条核心规则：子元素交错(Staggered Children)让多个元素依次出现；先出后入(Exit Before Enter)确保内容切换的流畅性；共享布局ID(Shared Layout ID)创建无缝变形；方向一致性保持空间上下文。
4.1 子元素交错 (Staggered Children)
编排规则 C-02 交错延迟多个卡片或列表项依次延迟 40-60ms 出现
staggerChildren: 0.06 — 每个子元素依次延迟 60ms 出现，使用 springGentle 弹簧预设
4.2 先出后入 / 穿透淡入 (Fade-Through)
编排规则 C-03 先出后入旧内容先淡出(y: -8)，新内容再淡入(y: 8→0)，不会同时存在
系统概览
穿透淡入 (Fade-through): 旧内容先淡出 (y: -8)，新内容再淡入 (y: 8→0)
4.3 共享布局 ID (Shared Layout ID)
编排规则 C-04 共享布局使用 layoutId 属性让元素在不同状态间无缝变形过渡
共享布局 ID (layoutId): 点击卡片观察无缝变形过渡效果，使用 springLayout 弹簧预设
4.4 方向一致性 (Directional Consistency)
编排规则 C-01 方向一致性前进导航从左到右/从上到下，后退导航反转方向
首页
步骤 1 / 4
方向一致性: 前进导航从左到右，后退导航从右到左，使用 springLayout 弹簧预设
交互模式目录
§4 Interaction Pattern Catalog (A-G)
七种核心交互模式覆盖了企业级软件界面的所有常见场景。从微交互(悬停/选中)到宏观布局变化(面板滑入/聚焦模式)，每种模式都有明确的触发条件、动画参数和视觉规范。
5.1 模式 A — 悬停与选中 (Hover & Select)
交互模式 IA-01 | springSnappy鼠标进入卡片时边框高亮+弹簧缩放，选中时展开隐藏内容
生产线 A-01
仓储区 B-03
设备 C-07
5.2 模式 B — 面板滑入与上下文缩放 (Panel Slide-in)
交互模式 IA-02 | springLayout点击卡片触发详情面板从左滑入(springLayout)，原内容同时缩小到50%
5.3 模式 C — 三栏 Master-Detail-Context
交互模式 IA-03 | C-02 交错[收件箱 25%] [AI处理 20%] [详情 55%]，三栏从左滑入依次延迟50ms
5.4 模式 D — AI 思维链 (Chain of Thought Timeline)
交互模式 IA-04 | springGentle最具特色的模式：AI步骤沿垂直时间线逐个出现，模拟'大声思考'过程
Searching Alerts
First I will retrieve all active alerts from the monitoring system...
Thinking about the next step...
5.5 模式 E — 聚焦模式 (Focus Mode)
交互模式 IA-05 | springModal背景淡出(scale 0.98)，深色遮罩淡入，聚焦内容放大(scale 0.95→1)
5.6 模式 F — 图谱/节点渐进式展开 (Graph Expansion)
交互模式 IA-06 | springGentle根节点先出现，子节点从父节点向外展开，连接线动画绘制路径
5.7 模式 G — 平滑地图/画布缩放 (Smooth Zoom)
交互模式 IA-07 | springLayout点击标记时摄像机平滑平移并缩放，其他标记淡出(opacity 0.3)