diff --git a/rpa-workstation-theme.md b/rpa-workstation-theme.md new file mode 100644 index 0000000..6aa2616 --- /dev/null +++ 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 主界面以任务状态和可操作数据为核心。 +- 不采用无边界入口卡片作为主结构;桌面工具需要卡片/表格边界清晰。 diff --git a/taobao-open-style-card.md b/taobao-open-style-card.md new file mode 100644 index 0000000..32d9d2f --- /dev/null +++ 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` 分割线。