Skip to content

Commit 7013c94

Browse files
No-GithubNo-Github
committed
feat(SSH): 优化终端页面工具栏布局和视觉设计
refactor(design): 重构颜色系统文档，明确品牌色与内容色调关系 style(SSH): 统一输入框边框为 gray-200，调整按钮样式 优化 SSH 终端页面工具栏按钮为纯图标+tooltip 设计以节省空间，端口转发计数改为圆形徽标样式。重构设计文档，明确品牌红色主题与内容页面 gray-900 主色调的关系。统一所有输入框边框为 border-gray-200，调整确认弹窗布局增加警告图标。
1 parent 9d41d8b commit 7013c94

File tree

3 files changed

+107
-65
lines changed

3 files changed

+107
-65
lines changed

‎doc/design/3.8-gui-design.md‎

Lines changed: 74 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -36,29 +36,65 @@
3636

3737
## 2. 颜色系统
3838

39-
### 2.1 主色调
39+
### 2.1 品牌主题色
4040

41-
> **注意**：大部分页面（仪表盘、场景、模板、设置等）使用蓝色主色调。
42-
> **SSH 终端页面**和 **AI 对话页面** 采用红色主色调（`bg-red-600`），与 RedC 品牌色一致。详见 9.2 SSH 终端页面。
41+
> **RedC 的主题色是红色。** 红色贯穿整个应用的品牌识别、交互重点和视觉锚点。
42+
43+
#### 品牌红色
44+
45+
| 用途 | 颜色 | 色值 | 说明 |
46+
|------|------|------|------|
47+
| Logo 背景 | 自定义 | `#ed0040` | RedC 品牌红，About 页 R 标志 |
48+
| Logo 渐变 | `from-rose-500 to-red-600` | #F43F5E → #DC2626 | 侧边栏 Logo 渐变 |
49+
| 侧边栏强调 | `text-rose-600` | #E11D48 | 选中项品牌色标记 |
50+
51+
#### 红色主色调页面
52+
53+
SSH 终端、AI 对话等核心交互页面使用红色作为主操作色，强化品牌感知：
54+
55+
| 用途 | 颜色类 | 色值 |
56+
|------|--------|------|
57+
| 主按钮背景 | `bg-red-600` | #DC2626 |
58+
| 主按钮悬停 | `hover:bg-red-700` | #B91C1C |
59+
| 输入框聚焦 | `focus:ring-red-500` | #EF4444 |
60+
| 面板激活态 | `bg-red-50 text-red-600` | 浅红底+红文字 |
61+
| 空状态图标容器 | `bg-red-50` + `text-red-400` | 品牌调空态 |
62+
| 浮动操作按钮 | `bg-red-600 shadow-red-600/25` | 红色阴影 |
63+
| 悬停强调 | `hover:text-red-600 hover:bg-red-50` | Tab 关闭/新建等 |
64+
| 选中项高亮 | `border-red-400 bg-red-50` | 列表/模板选中 |
65+
66+
> **适用页面**：SSH 终端（SSHManager）、AI 对话（AIChat）停止按钮、以及所有品牌展示场景。
67+
68+
#### 中性主色调页面
69+
70+
内容管理页面（仪表盘、场景、模板、设置、任务中心、插件等）使用 `gray-900` 作为主按钮色。这是为了让按钮不与状态色（红=错误/绿=成功/黄=警告）产生语义冲突，同时保持视觉克制：
4371

4472
| 用途 | 颜色类 | 色值 |
4573
|------|--------|------|
46-
| 主按钮背景（通用页面） | `bg-blue-600` | #2563EB |
47-
| 主按钮悬停（通用页面） | `bg-blue-700` | #1D4ED8 |
48-
| 主按钮背景（SSH/AI Chat） | `bg-red-600` | #DC2626 |
49-
| 主按钮悬停（SSH/AI Chat） | `bg-red-700` | #B91C1C |
74+
| 主按钮背景 | `bg-gray-900` | #111827 |
75+
| 主按钮悬停 | `hover:bg-gray-800` | #1F2937 |
5076
| 主按钮文字 | `text-white` | #FFFFFF |
51-
| 链接/强调 | `text-blue-600` | #2563EB |
52-
| 链接悬停 | `text-blue-700` | #1D4ED8 |
53-
| 标签背景 | `bg-blue-100` | #DBEAFE |
54-
| 标签文字 | `text-blue-700` | #1D4ED8 |
55-
| 图标背景(主) | `bg-blue-50` | #EFF6FF |
56-
| 图标颜色(主) | `text-blue-600` | #2563EB |
77+
| 输入框聚焦 | `focus:ring-gray-900` | #111827 |
78+
| Pill Tab 激活 | `bg-white shadow-sm`（容器 `bg-gray-100`） | 白底浮起 |
79+
| 选择按钮激活 | `bg-gray-900 text-white` | 深色实心 |
80+
81+
> **适用页面**：Dashboard、Cases、Templates、Settings、TaskCenter、PluginManager、About、Web Service 等。
82+
83+
#### 两套主色调的关系
84+
85+
```
86+
品牌层：红色 #ed0040 / red-600 ← 贯穿 Logo、侧边栏、SSH、AI Chat
87+
内容层：gray-900 ← 内容页面主按钮，避免与状态色冲突
88+
状态层：emerald（成功）/ red（错误）/ amber（警告）← 语义色，所有页面通用
89+
```
90+
91+
> **原则**：用户直接与核心功能交互时（终端操作、AI 对话）看到红色品牌强化；管理内容时看到克制的深灰，让状态色发挥语义作用。
5792
58-
### 2.2 品牌色（侧边栏）
93+
### 2.2 品牌色（侧边栏 & Logo）
5994

6095
| 用途 | 颜色类 | 色值 |
6196
|------|--------|------|
97+
| Logo 品牌红（About 页） | 自定义 `style` | `#ed0040` |
6298
| Logo 渐变起始 | `from-rose-500` | #F43F5E |
6399
| Logo 渐变结束 | `to-red-600` | #DC2626 |
64100
| 侧边栏选中背景 | `bg-gray-900` | #111827 |
@@ -122,24 +158,25 @@
122158

123159
## 3. 按钮规范
124160

125-
### 3.1 主要按钮（Primary / 蓝色）
161+
### 3.1 主要按钮（Primary）
162+
163+
RedC 有两种主按钮色，根据页面类型选用：
164+
165+
#### 3.1.1 内容页主按钮（gray-900）
126166

127167
```html
128-
<button class="h-10 px-5 bg-blue-600 text-white text-[13px] font-medium rounded-lg hover:bg-blue-700 transition-colors cursor-pointer">
168+
<button class="h-10 px-5 bg-gray-900 text-white text-[13px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">
129169
```
130170

131-
| 属性 | 值 |
132-
|------|-----|
133-
| 高度 | `h-10` (40px) |
134-
| 水平内边距 | `px-5` (20px) |
135-
| 背景色 | `bg-blue-600` |
136-
| 文字颜色 | `text-white` |
137-
| 文字大小 | `text-[13px]` |
138-
| 字体粗细 | `font-medium` (500) |
139-
| 圆角 | `rounded-lg` (8px) |
140-
| 悬停背景 | `hover:bg-blue-700` |
141-
| 过渡动画 | `transition-colors` |
142-
| 光标 | `cursor-pointer`（Wails 桌面应用必需） |
171+
> 适用于：Dashboard、Cases、Templates、Settings、TaskCenter、PluginManager、About 等内容管理页面。
172+
173+
#### 3.1.2 品牌页主按钮（red-600）
174+
175+
```html
176+
<button class="h-10 px-5 bg-red-600 text-white text-[13px] font-medium rounded-lg hover:bg-red-700 transition-colors cursor-pointer">
177+
```
178+
179+
> 适用于：SSH 终端、AI 对话停止按钮等核心交互页面。
143180
144181
### 3.2 成功按钮（Success / 绿色）
145182

@@ -266,12 +303,10 @@
266303

267304
| 页面类型 | 聚焦样式 | 使用场景 |
268305
|----------|----------|----------|
269-
| 通用页面（默认） | `focus:ring-2 focus:ring-gray-900` | Dashboard、模板、自定义部署等 |
306+
| 内容管理页面（默认） | `focus:ring-2 focus:ring-gray-900` | Dashboard、模板、设置、任务中心等 |
270307
| SSH 终端页面 | `focus:ring-2 focus:ring-red-500` | SSH 面板内输入框 |
271-
| 蓝色语义输入框 | `focus:ring-2 focus:ring-blue-500 focus:border-blue-500` | 搜索框、Compose 配置项、特殊模块 |
272-
| 轻量内联输入框 | `focus:outline-none focus:border-blue-400` | Settings Agent 配置、分页跳转 |
273308

274-
> 原则：聚焦色跟随页面主色调。通用页面用 `gray-900`，SSH 用 `red-500`，含搜索/筛选功能的嵌入式输入框用 `blue-500`。
309+
> 原则：聚焦色跟随页面主色调。内容页面用 `gray-900`，SSH/品牌页面用 `red-500`。
275310
276311
---
277312

@@ -896,8 +931,10 @@ Dashboard ← 顶层项（无分组）
896931

897932
## 18. 关键原则
898933

899-
1. **一致性优先**: 所有按钮高度统一使用 `h-10`，圆角统一使用 `rounded-lg`，所有可点击元素必须添加 `cursor-pointer`
900-
2. **色彩语义**: 通用页面蓝色用于主要操作，SSH/AI Chat 页面红色用于主要操作，绿色用于成功状态，红色用于错误状态，amber 用于警告/执行中状态
901-
3. **层级分明**: 页面背景(`bg-gray-50`) → 卡片背景(`bg-white`，对比突出) → 输入框背景(`bg-gray-50`，嵌套区分)
902-
4. **窗口自适应**: 基于 Tailwind 断点实现窗口缩放自适应，小窗口用较小尺寸，大窗口自动适配
903-
5. **可访问性**: 确保文字与背景有足够对比度，使用 `aria-label` 等属性
934+
1. **品牌色是红色**: RedC 品牌主题色为红色（`#ed0040` / `red-600`），贯穿 Logo、侧边栏、SSH 终端、AI 对话等核心交互场景
935+
2. **双主色调体系**: 核心交互页面（SSH/AI Chat）用红色主按钮强化品牌；内容管理页面用 `gray-900` 主按钮，避免与状态色（红=错误/绿=成功/黄=警告）产生语义冲突
936+
3. **一致性优先**: 所有按钮高度统一使用 `h-10`，圆角统一使用 `rounded-lg`，所有可点击元素必须添加 `cursor-pointer`
937+
4. **色彩语义**: 绿色用于成功状态，红色用于错误状态，amber 用于警告/执行中状态——这些语义色在所有页面通用
938+
5. **层级分明**: 页面背景(`bg-gray-50`) → 卡片背景(`bg-white`，对比突出) → 输入框背景(`bg-gray-50`，嵌套区分)
939+
6. **窗口自适应**: 基于 Tailwind 断点实现窗口缩放自适应，小窗口用较小尺寸，大窗口自动适配
940+
7. **可访问性**: 确保文字与背景有足够对比度，使用 `aria-label` 等属性

‎frontend/public/changelog.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"优化：关于页面 UI/UX — 去除 max-w-4xl 居中限制改为全宽布局、Header 精简为品牌+版本+MIT+更新检查一行式布局、开发者按钮移至右侧、项目简介从文本墙改为带图标的亮点条目、核心特性图标统一灰色调+三列网格+浅色底卡片、License 合并至 Header 作为 badge、相关链接改为横向三列卡片、更新日志版本号改 gray-900 标签+变更条目自动解析类型标签（新增/修复/优化）彩色显示、加载和空状态增加图标动画",
1212
"优化：插件管理页面 UI/UX — 统计卡片改为工具栏内 inline 状态点+计数、新增搜索框支持按名称/描述/标签过滤、安装表单去除卡片包裹改为紧凑行、安装按钮增加图标和 spinner 动画、刷新按钮从文字↻改为 SVG 图标+旋转动画、标签颜色从蓝色统一为灰色调、更新按钮从 amber 统一为 gray-900、所有 emoji（🔌🌐⚠️）替换为 SVG 图标、加载状态增加 spinner、已安装列表增加启用状态指示点、确认弹窗改用圆形图标、切换视图时自动清空搜索、外层 p-6 改为 space-y-4",
1313
"优化：AI 对话页面 UI/UX — 模式选择栏改为紧凑 pill tabs（去除图标减少拥挤）、历史/新建/导出按钮改为纯图标、工具调用卡片所有 emoji（✅❌⏳🔧💬）替换为 SVG 图标、历史面板选中态从 rose-600 改为灰色加粗、ask_user 交互卡片从蓝色主题统一为 gray-900、新对话增加快速提示词建议卡片（按模式显示 2-3 个示例）、代码块增加悬浮复制按钮、修复停止按钮模式判断条件（error→errorAnalysis）、去除外层多余 padding",
14-
"优化：任务中心页面 UI/UX — 去除 max-w-5xl 居中限制改为 space-y-4 全宽布局、统计卡片改为工具栏内 inline 状态点+计数、去除冗余标题描述、刷新按钮改为纯图标+旋转动画、所有 emoji（📅⏳🔄🔔❌▶⏹⌨⏱）替换为 SVG 图标、待执行区蓝色调统一为灰色、历史区图标精简+空状态增加图标、查看结果按钮从蓝色改灰色、SSH 命令行显示颜色从 cyan 改灰色、取消确认按钮从 amber 改红色、表单 focus:ring 统一为 gray-900"
14+
"优化：任务中心页面 UI/UX — 去除 max-w-5xl 居中限制改为 space-y-4 全宽布局、统计卡片改为工具栏内 inline 状态点+计数、去除冗余标题描述、刷新按钮改为纯图标+旋转动画、所有 emoji（📅⏳🔄🔔❌▶⏹⌨⏱）替换为 SVG 图标、待执行区蓝色调统一为灰色、历史区图标精简+空状态增加图标、查看结果按钮从蓝色改灰色、SSH 命令行显示颜色从 cyan 改灰色、取消确认按钮从 amber 改红色、表单 focus:ring 统一为 gray-900",
15+
"优化：SSH 终端页面 UI/UX — 工具栏按钮（命令片段/文件管理器/端口转发）从图标+文字改为纯图标+tooltip 节省水平空间、端口转发计数改为右上角圆形小徽标、关闭全部确认弹窗增加圆形警告图标+布局优化、输入框边框统一为 border-gray-200"
1516
]
1617
},
1718
{

0 commit comments

Comments
 (0)