desktop_rpa/rpa-workstation-theme.md

RPA工作站风格主题

1. 主题来源

• 产品依据：PRD.md。
• 风格依据：taobao-open-style-card.md。
• 生成日期：2026-06-26。
• 主题目标：把淘宝开放平台的“深色技术导航 + 白底业务入口 + 蓝色交互高亮”转译为 RPA 工作站的“本地优先、可审计、可托管、专业工具型桌面产品”视觉系统。

2. 一句话主题定位

深色技术控制台骨架 + 靛蓝/技术蓝高亮 + 白底高密度业务面板，表达本地 AI + RPA 的可信托管、显式授权、审计可追溯和桌面工具效率。

3. 设计原则

1. 专业克制：遵循 PRD 的“专业、克制、工具型、低饱和科技感”，避免消费营销感和高饱和橙色。
2. 安全优先：托管、权限、高风险动作使用更高对比度的阻断层和语义色，不用纯装饰动效稀释风险。
3. 本地可信：以深 Slate 导航和低亮蓝色状态表达“本地运行、可控、稳定”。
4. 高信息密度：知识库、AI 员工、任务、审计日志以表格、状态 chip、紧凑卡片呈现。
5. 显式授权：所有权限、托管、AI 员工操作范围都要有清晰边界、标题、说明和取消路径。
6. 桌面优先：主窗口固定左侧导航 + 右侧内容，壳内滚动，适配 Windows/Mac 桌面壳。

4. 风格关键词

• 本地技术控制台：沿用淘宝开放平台 #373942 深色技术导航，但转为桌面左侧窄栏。
• 靛蓝 AI 感：PRD 指定蓝紫/靛蓝主色，覆盖主按钮、激活导航、托管进度、关键动作。
• 技术蓝辅助：继承淘宝开放平台 #5eb5fe 作为链接、图标 hover、信息型高亮。
• 白底数据面板：工作台、知识库、AI 员工、自动化任务保留白底卡片与细分割线，提升可读性。
• 低圆角工具感：比当前原型的超大圆角更收敛；桌面壳保留平台特征，业务组件使用 8–14px 圆角。
• 审计可追溯：日志、权限、任务状态使用表格化、时间线化、可筛选的视觉模式。

5. 配色系统

5.1 核心色

Token	Hex	用途	来源/理由
--rpa-primary	#4f46e5	主按钮、激活状态、关键流程	PRD 指定蓝紫/靛蓝方向
--rpa-primary-hover	#4338ca	主按钮 hover/pressed	靛蓝加深，适合桌面工具
--rpa-primary-soft	#eef2ff	主色浅底、选中卡片背景	保持低饱和科技感
--rpa-tech-blue	#5eb5fe	链接、图标 hover、信息强调	淘宝开放平台交互蓝
--rpa-tech-blue-hover	#6cb5f4	次级链接 hover	淘宝开放平台 hover 蓝
--rpa-nav-bg	#373942	左侧导航背景、托管深色面板	淘宝开放平台技术导航
--rpa-nav-panel	#2b2d34	导航 hover/active 深色底	淘宝开放平台菜单面板
--rpa-hosting-bg	#0a091e	RPA 托管遮罩核心面板	淘宝开放平台 Hero 深底

5.2 中性色

Token	Hex	用途
--rpa-bg	#f7f8fa	应用内容区背景
--rpa-surface	#ffffff	卡片、表格、模态主体
--rpa-surface-subtle	#f3f4f6	次级分组、输入背景
--rpa-border	#e6e6e6	表格线、卡片边框、公告分割
--rpa-border-strong	#cbd5e1	输入框、可交互边框
--rpa-text	#333333	主文本
--rpa-heading	#1f2937	标题、页面 Header
--rpa-muted	#666666	描述、公告、表格次级文本
--rpa-subtle	#7c7c7c	弱提示、空状态补充
--rpa-inverse	#e5e9ee	深色导航文字
--rpa-inverse-muted	#a3a3a3	深色导航次级文字

5.3 语义色

Token	Hex	场景
--rpa-success	#4ab933	ready、模型在线、检测通过
--rpa-success-bg	#edffe9	成功 toast / 成功 chip 背景
--rpa-info	#28a3ef	indexing、处理中、普通信息
--rpa-info-bg	#eef8ff	信息提示浅底
--rpa-warning	#f59e0b	waiting_user、需手动处理、高风险前置提醒
--rpa-warning-bg	#fffbeb	警告浅底
--rpa-danger	#d44044	failed、停止托管、高风险取消
--rpa-danger-bg	#fff2f2	错误与阻断提示背景
--rpa-danger-border	#ffe3e0	错误边框

6. CSS 主题 Tokens

:root {
  color-scheme: light;

  --rpa-primary: #4f46e5;
  --rpa-primary-hover: #4338ca;
  --rpa-primary-soft: #eef2ff;
  --rpa-tech-blue: #5eb5fe;
  --rpa-tech-blue-hover: #6cb5f4;

  --rpa-nav-bg: #373942;
  --rpa-nav-panel: #2b2d34;
  --rpa-nav-border: #383a45;
  --rpa-hosting-bg: #0a091e;

  --rpa-bg: #f7f8fa;
  --rpa-surface: #ffffff;
  --rpa-surface-subtle: #f3f4f6;
  --rpa-border: #e6e6e6;
  --rpa-border-strong: #cbd5e1;

  --rpa-text: #333333;
  --rpa-heading: #1f2937;
  --rpa-muted: #666666;
  --rpa-subtle: #7c7c7c;
  --rpa-inverse: #e5e9ee;
  --rpa-inverse-muted: #a3a3a3;

  --rpa-success: #4ab933;
  --rpa-success-bg: #edffe9;
  --rpa-success-border: #dcf9d6;
  --rpa-info: #28a3ef;
  --rpa-info-bg: #eef8ff;
  --rpa-warning: #f59e0b;
  --rpa-warning-bg: #fffbeb;
  --rpa-danger: #d44044;
  --rpa-danger-bg: #fff2f2;
  --rpa-danger-border: #ffe3e0;

  --rpa-font-sans: Inter, Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
  --rpa-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --rpa-text-xs: 12px;
  --rpa-text-sm: 14px;
  --rpa-text-md: 16px;
  --rpa-text-lg: 18px;
  --rpa-text-xl: 20px;
  --rpa-text-2xl: 24px;
  --rpa-text-3xl: 32px;

  --rpa-space-1: 4px;
  --rpa-space-2: 8px;
  --rpa-space-3: 12px;
  --rpa-space-4: 16px;
  --rpa-space-6: 24px;
  --rpa-space-8: 32px;
  --rpa-space-12: 48px;

  --rpa-radius-xs: 4px;
  --rpa-radius-sm: 8px;
  --rpa-radius-md: 12px;
  --rpa-radius-lg: 16px;
  --rpa-radius-shell: 28px;

  --rpa-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --rpa-shadow-float: 0 8px 24px rgba(15, 23, 42, 0.14);
  --rpa-shadow-menu: 1px 1px 5px rgba(0, 0, 0, 0.45);
  --rpa-shadow-blocking: 0 24px 60px rgba(0, 0, 0, 0.35);

  --rpa-sidebar-width: 92px;
  --rpa-header-height: 80px;
  --rpa-control-height: 40px;
  --rpa-hit-target: 32px;
  --rpa-transition-fast: 0.18s ease-out;
  --rpa-transition-normal: 0.28s ease-in-out;
}

7. 字体与字号规则

层级	Size	Weight	Line-height	用途
Display	32px	700	1.2	销售演示标题、核心闭环页标题
Page Title	24px	650	1.25	页面 Header 标题
Section Title	20px	600	1.35	卡片组、表格区标题
Card Title	16px	600	1.45	状态卡、设置分组
Body	14px	400	1.6	表格、说明、表单正文
Dense Label	12px	500	1.4	chip、状态、表格辅助信息
Log / Code	12–13px	400/500	1.6	托管日志、错误码、bounds、API Key 脱敏字段

规则：不继承淘宝开放平台 12px 全局正文；RPA 工作站按 PRD 字号阶梯提升正文可读性，12px 只用于辅助标签。

8. 布局系统

主窗口

• Shell：Windows/Mac 外壳固定，壳内业务区域 flex flex-col overflow-hidden。
• 左侧导航：92px，深色 --rpa-nav-bg，符合 PRD 80–100px。
• Header：80px，白底，左侧标题/摘要，右侧状态 chip。
• 内容区：min-h-0 flex-1 overflow-y-auto，背景 --rpa-bg。

页面布局

• 工作台：3 张状态卡 + 快速入口 + 核心闭环步骤条。
• 知识库 / AI 员工 / 自动化任务：工具栏 + 表格 + 详情/弹窗。
• 标注应用：应用概览卡 + 四 Tab + 节点表格。
• 设置：双列分组卡，诊断/备份/许可证保持可扫描。

密度

• 页面外边距：24px。
• 卡片间距：16px 或 24px。
• 表格行高：48–56px。
• 控件高度：普通 40px，紧凑 chip 28–32px。

9. 组件主题规则

左侧导航

• 背景：--rpa-nav-bg。
• 默认文字/icon：--rpa-inverse-muted。
• hover：背景 rgba(255,255,255,.08)，icon --rpa-tech-blue。
• active：背景 --rpa-primary，文字白色，阴影 0 8px 20px rgba(79,70,229,.25)。
• 底部状态：深色面 --rpa-nav-panel，在线点 --rpa-success，托管中改为 --rpa-warning。

Header 状态 Chip

• 模型在线：success。
• RPA 空闲：neutral。
• RPA 托管中：warning 或 primary breathing dot。
• 本地模式：info。
• 试用 14天：warning soft。

Card

• 背景：--rpa-surface。
• 边框：1px solid --rpa-border。
• 圆角：12–16px。
• 阴影：--rpa-shadow-card，hover 可略微上浮但不改变布局。
• 标题：16px/600，icon 使用 --rpa-primary 或页面语义色。

Table

• 表头：--rpa-surface-subtle，12px/500，文字 --rpa-muted。
• 行分割：--rpa-border。
• hover：#f8fafc。
• 状态列必须用 chip + 文本，不只靠颜色。
• 错误码使用 mono 字体和浅红底。

Button

• Primary：--rpa-primary，hover --rpa-primary-hover，高度 40px，圆角 10–12px。
• Secondary：白底 + --rpa-border-strong，hover --rpa-surface-subtle。
• Danger：--rpa-danger，仅用于停止托管、高风险取消、失败重试危险动作。
• Link：--rpa-tech-blue，hover --rpa-tech-blue-hover。

Modal / Blocking Overlay

• 必须限制在 shell 内容区内。
• Scrim：rgba(10,9,30,.55)，取自 Hero 深色。
• 主体：白底，16px 圆角，--rpa-shadow-blocking。
• 阻断操作必须有取消路径。
• 高风险确认标题使用 danger，说明包含“原因 + 后果 + 恢复/取消方式”。

RPA 托管遮罩

• 背景：--rpa-hosting-bg + 90% opacity。
• 面板：深色 #111827 或 --rpa-nav-panel。
• 进度：--rpa-primary 到 --rpa-tech-blue 渐变。
• 日志：mono 字体，深色日志区，时间戳弱化，当前动作高亮。
• 停止按钮：danger 实心，视觉优先级高于“下一步动作”。

标注遮罩

• Scrim：深色半透明，主窗口“退后”。
• 框选矩形：边框 --rpa-primary，填充 rgba(79,70,229,.16)。
• 当前 bounds：mono 字体，浅色信息底。
• 保存失败：danger soft，必须显示原因和恢复动作。

Toast / Notification

• 成功：复用淘宝开放平台 success #edffe9 / #4ab933。
• 错误：复用 #fff2f2 / #d44044。
• 位置：壳内右上角，不能挂到 body。
• 动效：opacity + translateY，180–240ms。

10. 页面级主题映射

页面	主视觉重点	推荐主色	组件重点
工作台	环境、资产、执行三态	Primary + success/info/warning	状态卡、快速入口、闭环步骤条
首次配置	检查与恢复	Info + warning	步骤侧栏、权限列表、恢复动作区
知识库	可索引、可授权、可审计	Tech blue	表格、权限 badge、索引状态
AI 员工	角色与授权边界	Primary	员工表格、启动确认、权限说明
标注应用	视觉节点与框选	Primary + tech blue	Tab、节点表、标注遮罩
自动化任务	状态机、托管、安全	Hosting dark + danger	任务表、托管遮罩、审计日志
设置	本地配置与诊断	Neutral + info	分组卡、表单、诊断按钮

11. 状态色映射

知识库索引状态

• pending：info soft。
• indexing：warning soft + spinner。
• ready：success soft。
• failed：danger soft + 错误原因 + 重试按钮。

AI 员工状态

• idle：neutral。
• running：primary。
• waiting_user：warning。
• failed：danger。
• disabled：muted。

自动化任务状态

• queued：info。
• running：primary。
• succeeded：success。
• failed：danger。
• canceled：neutral + 审计说明。

许可证状态

• trial：warning soft。
• active：success。
• expired：danger。
• offline_grace：warning。
• invalid：danger strong。

12. 图标规则

• 使用 Lucide 或同一套 SVG 图标，禁止 emoji。
• 导航 icon：20px，stroke 2px。
• 状态 chip icon：14–16px。
• 卡片标题 icon：16–20px。
• 危险/阻断 icon 不只靠颜色，必须搭配文字。

13. 动效规则

• 普通 hover：180–220ms。
• Tab/导航切换：180ms，颜色/背景过渡即可。
• Modal：fade + scale 0.98→1，220ms。
• 托管日志追加：新日志淡入 180ms，不自动大幅滚动抢焦点。
• 异步超过 300ms：按钮 loading 或 spinner。
• 避免淘宝旧式大面积 3D 翻转；RPA 工具应保持稳定可控。

14. 可访问性与安全交互

• 点击区域至少 32px，关键按钮至少 40px。
• focus-visible 使用 2px --rpa-primary ring。
• 错误信息必须同时说明原因和恢复动作。
• 高风险动作必须二次确认。
• ESC 始终停止托管；UI 上持续展示“ESC 紧急停止始终可用”。
• 模态/遮罩必须有取消路径。
• 颜色不作为唯一状态表达：状态 chip 必须包含文本。

15. 应用到当前 HTML 原型的建议

1. 将左侧导航背景从纯 slate-950 调整为 #373942，hover/底部状态使用 #2b2d34。
2. 保留 PRD 主色 #4f46e5 作为 active 和主按钮；把普通 hover icon 改为 #5eb5fe。
3. 内容卡片边框统一为 #e6e6e6，背景保持白色，减少重阴影。
4. 托管遮罩底色改为 #0a091e，日志面板使用深 Slate，停止按钮使用 #d44044。
5. 表格、审计日志、错误码使用更紧凑的 14px/12px 层级，增强工具感。
6. 首次配置、权限、托管确认等阻断弹窗使用更强 scrim 和明确的原因/恢复文案。

16. 不采用项

• 不采用淘宝/阿里 Logo、橙色品牌识别、原始 banner 图、iconfont 字形。
• 不采用 12px 全局正文；RPA 工作站正文以 14px 起步。
• 不采用大面积营销 Hero；RPA 主界面以任务状态和可操作数据为核心。
• 不采用无边界入口卡片作为主结构；桌面工具需要卡片/表格边界清晰。