更新

2026-06-26 18:14:10 +08:00 · 2026-06-26 18:14:10 +08:00 · e27e6392e0
commit e27e6392e0
parent 7551f5d123
2 changed files with 495 additions and 0 deletions
--- a/rpa-workstation-theme.md
+++ b/rpa-workstation-theme.md
@ -0,0 +1,321 @@
+# 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
+```css
+: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 主界面以任务状态和可操作数据为核心。
+- 不采用无边界入口卡片作为主结构；桌面工具需要卡片/表格边界清晰。
--- a/taobao-open-style-card.md
+++ b/taobao-open-style-card.md
@ -0,0 +1,174 @@
+# 淘宝开放平台风格采集卡
+
+## 1. 采集信息
+- 来源：`https://open.taobao.com/index.htm`；辅助参考：`https://developer.alibaba.com/en/index.htm`、淘宝开放平台 Color 颜色文档。
+- 采集日期：2026-06-26。
+- 视口/页面：首页 HTML、首页公开 CSS、导航/公告/业务入口/能力模块/文档颜色规范。
+- 可信度：中。`open.taobao.com/index.htm` 当前页面为 Rax 应用壳，静态 HTML 只暴露资源入口；本文件的精确色值主要来自公开 CSS 与文档页源码，布局与组件来自可读取首页结构。
+
+## 2. 一句话风格定位
+深色技术导航 + 白底业务入口 + 蓝色交互高亮的 B2B 开放平台风格，强调开发者可信、信息密度和平台能力展示。
+
+## 3. 风格关键词
+- 开发者平台感：顶部深色导航 `#373942`，二级菜单 `#2b2d34`，适合承载控制台、文档、解决方案等技术入口。
+- 蓝色高亮交互：链接 hover、菜单标题、查看更多使用 `#5eb5fe` / `#6cb5f4`，形成“技术服务”而非电商促销的视觉语气。
+- 白底轻量内容：业务卡片、公告、能力模块主要使用白底、灰字、细分割线，信息密度高但克制。
+- 图片型 Hero：首屏轮播使用 1920 宽大图，外层深背景 `#0a091e`，品牌视觉主要交给 banner 图承担。
+- 低圆角、轻阴影：组件多为直角或小圆角，通知/菜单使用 2–4px 圆角，阴影只在浮层中使用。
+
+## 4. 配色系统
+| Token | Hex/RGB | 用途 | 观察证据 |
+|---|---:|---|---|
+| color-nav-bg | `#373942` | 顶部/侧边深色导航背景 | `.openplatform-nav { background:#373942 }` |
+| color-nav-panel | `#2b2d34` | hover 状态、二级菜单背景、激活导航 | `.top-openplatform-nav ul li.active/hover` 与 `.sub-nav` |
+| color-hero-bg | `#0a091e` | 首页轮播深色承托背景 | `.slide { background-color:#0a091e }` |
+| color-primary | `#5eb5fe` | 菜单标题、链接 hover、阅读更多 | `.sub-nav dl dt`、`.page-tips a.read-more` |
+| color-primary-hover | `#6cb5f4` | 顶部菜单项 hover | `.open-nav-menu > li > a:hover` |
+| color-tech-blue | `#28a3ef` | 技术能力模块数字/步骤高亮 | `.cols-3 .grid .step-1` |
+| color-text-main | `#333333` | 主要正文/图标 | `.cols-1 i`、`.bottom-item` |
+| color-text-heading | `#444444` | 业务入口标题 | `.cols-1 h4` |
+| color-text-muted | `#666666` | 公告、段落、弱信息 | `.page-tips a`、`.cols-1 p` |
+| color-text-subtle | `#7c7c7c` | 次级说明文本 | `.cols-3 p` |
+| color-nav-text | `#e5e9ee` | 深色导航主文字/Logo | `.logo-container h1 a`、`.top-openplatform-nav a` |
+| color-nav-muted | `#a3a3a3` | 二级菜单普通链接 | `.sub-nav dl dd a` |
+| color-border | `#e6e6e6` | 公告底线、表格分割线 | `.page-tips`、`.table-bordered` |
+| color-nav-border | `#383a45` | 深色菜单内部分割线 | `.sub-nav dl dd` |
+| color-success-bg | `#edffe9` | 成功通知背景 | `.open-success` |
+| color-success | `#4ab933` | 成功通知文字 | `.open-success` |
+| color-error-bg | `#fff2f2` | 错误通知背景 | `.open-alert` |
+| color-error-border | `#ffe3e0` | 错误通知边框 | `.open-alert` |
+| color-danger | `#d44044` | 通知红点 hover / 强提醒 | `.notify-container.has-message:hover` |
+
+## 5. 字体与字号
+| 层级 | Font | Size | Weight | Line-height | 说明 |
+|---|---|---:|---:|---:|---|
+| Body | 系统 sans-serif / Bootstrap 默认 | `12px` | 400 | 默认 | 首页 CSS 明确 `body{font-size:12px}`，偏传统门户密度。 |
+| Nav | 系统 sans-serif | `14px` | 400 | `64px` | 顶部导航高 64，文字垂直居中。 |
+| Logo | iconfont + sans-serif | `18px` | 400 | `64px` | Logo 文案不加粗，依靠图标与深色背景建立品牌识别。 |
+| Section H3 | 系统 sans-serif | `22px` | 400/默认 | 默认 | 模块标题使用较大字号但非粗重风格。 |
+| Business H4 | 系统 sans-serif | `20px` | 400/默认 | 默认 | 四列业务入口标题。 |
+| Paragraph | 系统 sans-serif | `12–14px` | 400 | `1.8–2` | 段落行高较松，缓解小字号带来的拥挤。 |
+| Iconfont | Alibaba iconfont | `16–105px` | normal | 1 | 大图标用于业务入口和能力模块。 |
+
+## 6. 布局与间距
+- 页面宽度：核心容器 `max-width:1170px`，文档页内容 `990px`。
+- 顶部导航：高度 `64px`，深色通栏，Logo 左置，主导航横排，登录/搜索右置。
+- 首页 Hero：全宽轮播，图片 1800–1920px 级别，背景深色兜底。
+- 公告条：Hero 下方 `15px` 上下外边距，底部 `1px #e6e6e6` 分割线。
+- 业务入口：四列栅格 `.col-md-3`，容器左右内边距 `45px`，每项图标/图片 + 标题 + 描述。
+- Section spacing：模块常用 `margin-top:20–80px`、`margin-bottom:40–60px`。
+- 信息密度：导航和表格偏紧凑，营销/能力模块留白较多。
+
+## 7. 组件拆解
+
+### Nav
+- 尺寸：高 `64px`，主导航项左右 padding `20px`。
+- 背景：默认 `#373942`，hover/active `#2b2d34`。
+- 文本：默认 `#e5e9ee`，菜单子项 `#a3a3a3`，标题/hover `#5eb5fe`。
+- 下拉：深色大面板，顶部贴合导航，padding `25px 20px 20px`，内部按 `dl/dt/dd` 分组。
+- 动效：hover 展开，opacity 0.3s；箭头旋转 180 度，0.5s。
+- 可复用规则：适合控制台型产品的顶栏或左侧导航；导航背景不要纯黑，使用带蓝灰倾向的深 Slate。
+
+### Button / CTA
+- 首页强 CTA 不突出；更多使用链接、图片卡片、`btn-knowmore`。
+- `btn-knowmore`：高 `44px`，透明蓝背景 `rgba(80,133,177,0.8)`，边框 `#3199f4`，hover 背景 `rgba(49,153,244,0.8)`。
+- 可复用规则：主按钮可使用蓝色描边/半透明填充，不要大面积淘宝橙；橙色只适合品牌点缀或营销态。
+
+### Card / Business Entry
+- 结构：图标/图片在上，`h4` 标题，`p` 描述。
+- 背景：白底或透明，无明显卡片边框。
+- Hover：整项文字/图标变蓝 `#5eb5fe`。
+- 尺寸：图形资源约 `135px × 85px`；标题 `20px`。
+- 可复用规则：入口卡片应轻边界、重图标，避免厚重阴影。
+
+### Announcement Bar
+- 结构：公告图标 + 多条横向链接 + “查看更多”。
+- 颜色：普通链接 `#666`，查看更多 `#5eb5fe`。
+- 行为：文本单行截断，宽度约 `16em`，适合密集公告。
+
+### Tech Grid
+- 形态：蜂窝/网格图形背景，hover 翻转 `rotateY(180deg)`。
+- 高亮：数字/步骤用 `#28a3ef`，hover 后白字。
+- 动效：transform 0.3s ease-in-out。
+- 可复用规则：可用于“能力矩阵”“流程步骤”“开放能力”展示。
+
+### Notification
+- 浮层：高 `46px`，顶部 fixed，阴影 `0 2px 5px rgba(0,0,0,.26)`，圆角 `2px`。
+- 成功：`#edffe9` 背景、`#dcf9d6` 边框、`#4ab933` 文本。
+- 错误：`#fff2f2` 背景、`#ffe3e0` 边框、red 文本。
+
+## 8. 圆角、边框、阴影、质感
+- Radius scale：`2px` 用于通知，`3px` 用于选中胶囊，`4px` 用于下拉菜单；整体偏低圆角。
+- Border：浅色分割线 `#e6e6e6`；深色菜单分割线 `#383a45`。
+- Shadow：只在通知和下拉菜单中使用；菜单阴影 `1px 1px 5px rgba(0,0,0,.75)`，通知阴影 `0 2px 5px rgba(0,0,0,.26)`。
+- Texture：部分模块使用背景图纹理，不是纯色卡片风格；复用时建议用极淡网格/渐变替代老旧纹理图。
+
+## 9. 动效与交互
+- 顶部下拉：hover 展开，opacity 0.3s ease-in-out。
+- 箭头旋转：0.5s。
+- 搜索框：border-color 0.3s，input width 0.3s。
+- 技术网格：hover 翻转，transform 0.3s ease-in-out。
+- 云环境卡片：hover 后内容上移/淡入，all 0.3s。
+- 复用建议：保留 0.2–0.3s 的快速反馈；避免大面积 3D 翻转，可改为轻微 translate/opacity 以现代化。
+
+## 10. 可复用主题 Tokens
+```css
+:root {
+  --tbop-bg: #ffffff;
+  --tbop-bg-muted: #f7f8fa;
+  --tbop-nav-bg: #373942;
+  --tbop-nav-panel: #2b2d34;
+  --tbop-hero-bg: #0a091e;
+
+  --tbop-primary: #5eb5fe;
+  --tbop-primary-hover: #6cb5f4;
+  --tbop-tech-blue: #28a3ef;
+  --tbop-link: #5eb5fe;
+
+  --tbop-text: #333333;
+  --tbop-text-heading: #444444;
+  --tbop-text-muted: #666666;
+  --tbop-text-subtle: #7c7c7c;
+  --tbop-text-inverse: #e5e9ee;
+  --tbop-text-inverse-muted: #a3a3a3;
+
+  --tbop-border: #e6e6e6;
+  --tbop-border-dark: #383a45;
+
+  --tbop-success: #4ab933;
+  --tbop-success-bg: #edffe9;
+  --tbop-success-border: #dcf9d6;
+  --tbop-error: #d44044;
+  --tbop-error-bg: #fff2f2;
+  --tbop-error-border: #ffe3e0;
+
+  --tbop-font-sans: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
+  --tbop-font-size-xs: 12px;
+  --tbop-font-size-sm: 14px;
+  --tbop-font-size-md: 20px;
+  --tbop-font-size-lg: 22px;
+
+  --tbop-radius-xs: 2px;
+  --tbop-radius-sm: 3px;
+  --tbop-radius-md: 4px;
+
+  --tbop-shadow-menu: 1px 1px 5px rgba(0, 0, 0, 0.75);
+  --tbop-shadow-notify: 0 2px 5px rgba(0, 0, 0, 0.26);
+
+  --tbop-nav-height: 64px;
+  --tbop-container: 1170px;
+  --tbop-doc-container: 990px;
+  --tbop-transition-fast: 0.2s ease-in-out;
+  --tbop-transition-normal: 0.3s ease-in-out;
+}
+```
+
+## 11. 适合用于 / 不适合用于
+- 适合：开放平台、开发者门户、插件市场、企业 SaaS 控制台、API 文档中心、技术生态官网。
+- 不适合：强消费转化型落地页、年轻化社交产品、移动端优先 C 端 App、需要大量圆角/玻璃拟态的现代品牌页面。
+
+## 12. 复刻注意事项
+- 保留：深色技术导航、蓝色交互高亮、白底四列能力入口、公告条、能力矩阵、低圆角与轻阴影。
+- 避免：直接复制淘宝/阿里 Logo、banner 原图、iconfont 字形、具体文案和品牌名称。
+- 现代化变体：保持 `#373942 + #5eb5fe` 的骨架，把小字号从 12px 提升到 14px，把老式图片纹理替换为浅蓝渐变/网格背景，把 3D 翻转改为轻微浮起与淡入。
+- 用于当前 RPA 工作站原型时：可将左侧导航改成 `#373942` 深 Slate，激活/hover 用 `#2b2d34`，图标高亮用 `#5eb5fe`，内容区继续保持白底与 `#e6e6e6` 分割线。