# Hive CN 现代化 UI/UX 设计稿初稿

**状态：** Draft v0.2  
**日期：** 2026-03-27  
**范围：** 基于 Hive CN 现有主工作台布局做现代化优化，不改页面骨架，不改核心对象模型

---

## 1. 这轮设计的真实目标

这轮不是重做产品，不是重做信息架构，也不是借别的桌面产品重新画一遍 Hive。

这轮真正要做的是：

**基于 Hive 已经成立的主工作台布局，只优化配色、组件、状态表达、层级、留白和动效，让它更像一个成熟的现代桌面应用。**

换句话说：

- 保留 Hive 的布局逻辑
- 保留 Hive 的操作心智
- 不做概念稿式改造
- 不做网站首页式表达
- 只做“in-place modernization”

---

## 2. Hive 当前布局里合理的地方

先明确一点：Hive 当前布局本身并不落后，很多结构其实是合理的。

### 2.1 三栏骨架是合理的

当前的核心布局是：

- 左侧：项目 / connection / worktree 导航
- 中间：session 主内容
- 右侧：changes / files / diffs / merge 等改动上下文
- 底部：输入区

这个骨架对开发工具来说是对的，因为它对应了非常清晰的工作分工：

- 左侧负责切换上下文
- 中间负责推进当前主任务
- 右侧负责查看当前代码结果和后续操作
- 底部负责继续输入和推进

所以，这个骨架不应该被推翻。

### 2.2 中间以会话为主舞台是合理的

对当前 Hive 来说，session 仍然是主工作对象之一。  
用户打开 Hive 后，本质上还是围绕当前项目中的某个 session 持续推进工作。

因此，中间区域继续以 session 为中心没有问题。  
真正的问题不是“为什么中间是会话”，而是“为什么这个会话区域看起来还不够像成熟桌面应用的主舞台”。

### 2.3 右侧改动区存在的理由是充分的

当前右侧的 `Changes / Files / Diffs` 很合理，因为它让用户不需要跳转页面，就能完成：

- 看当前改动
- 看文件列表
- 看 diff
- push / pull / merge

这说明右侧区块不是设计错误。  
真正要改的是它的状态表达、按钮组织和视觉噪音。

### 2.4 底部输入区继续保留是正确的

Hive 的底部 composer 是高频核心入口。  
这不应该因为“现代化”而被改掉。

问题不在于输入区位置，而在于：

- 它当前更像漂浮输入卡片
- 组件层级不够成熟
- 和主内容区的关系不够顺

### 2.5 左侧项目树不是问题本身

项目树、worktree 列表、connection 分组，这些都很符合当前产品使用逻辑。  
不需要为了现代化而把它们改成全新的导航范式。

要做的是：

- 让它更清晰
- 更稳
- 更顺手
- 更像桌面应用，而不是默认树控件堆出来的界面

---

## 3. Hive 当前布局里的主要缺点

问题的核心不是布局错了，而是“表达方式太粗糙”，导致它更像一个可用工具，而不是一个成熟产品。

### 3.1 顶部栏主次不清

当前顶部同时承载：

- 项目名
- 当前分支
- 外部工具入口
- Review
- 设置 / 历史 / 同步
- Session tab

这些内容本身都合理，但现在更像“全部并列”，而不是有主次的上下文栏。

这会导致：

- 用户第一眼抓不到当前上下文
- 外部工具入口和核心状态入口权重过于接近
- 顶部看起来像功能堆叠，而不是状态条

### 3.2 左侧栏层级不够精致

左侧栏的问题不是结构，而是表达。

具体体现在：

- 搜索框、section 标题、树节点、状态标签之间的节奏偏碎
- connection / project / worktree 的视觉颗粒度不够统一
- 当前选中项不够稳
- 时间、状态、分支这些信息缺少更有秩序的表达

它“能用”，但还不够“顺手”。

### 3.3 中间主内容区过于默认

当前中间区域像一张默认白纸，内容本身存在，但容器感很弱。

这会带来两个问题：

- 会话内容没有形成真正的主舞台气质
- 大面积空白不是“高级留白”，而是“没有被设计过”

也就是说，它不是因为空，而是因为空得没有结构。

### 3.4 右侧区块像工具抽屉，不像判断面板

右侧区块现在的信息并不少，但缺少“当前状态结论”。

问题在于：

- tabs、文件列表、push / pull / merge、setup / run / terminal 之间关系偏散
- 用户需要自己判断“我现在是不是 ready”
- 操作很多，但界面没有很好地告诉用户“该先做什么”

### 3.5 底部输入区稳定感不足

现在 composer 的问题不是位置，而是形态。

它看起来更像：

- 悬浮输入块
- 独立存在的功能卡片

而不是：

- 工作台的一部分
- 一个成熟的桌面端输入 dock

### 3.6 视觉系统不够高级

这一点是你特别指出的，也是当前最明显的问题之一。

主要表现为：

- 配色偏默认、偏轻
- 强调色不够克制
- 图标语言不统一
- 组件像是“有了”，但没有形成风格
- 动效逻辑缺失，所以页面切换和交互显得生硬

---

## 4. 这轮必须遵守的约束

为了避免继续做偏，我们明确列出必须遵守的约束。

### 4.1 不能做的事

- 不能重做 Hive 三栏布局
- 不能把它改成 Codex 那种单主列线程布局
- 不能加入 hero、大标题、大指标卡
- 不能做 dashboard 式首页
- 不能用网站式展示语言替代桌面工作台语言
- 不能通过新增概念来掩盖设计问题

### 4.2 必须保留的事

- 左侧项目 / connection / worktree 结构
- 中间 session 主内容区
- 右侧 changes / files / diffs 面板
- 底部 composer
- 顶部当前项目与操作入口

也就是说：

**只允许在现有 Hive 布局里做表达优化，不允许借“现代化”的名义换产品骨架。**

---

## 5. 现代化方向：只改“表现层”

### 5.1 顶部栏：从功能并列改成上下文优先

顶部不需要大改结构，只需要重新分配主次。

建议保留的信息：

- 当前项目名
- 当前分支 / worktree
- 当前会话名
- Review
- VS Code / Warp / Finder
- 设置 / 历史 / 同步

优化方向：

- 当前项目与分支作为第一优先级
- 外部工具入口降一层
- Review 作为更明确的当前态动作
- 顶部整体更像 “Context Bar”，不是按钮堆

### 5.2 左侧栏：从树控件感变成桌面导航感

左侧不改结构，只优化：

- section 标题的节奏
- 搜索框形态
- 节点行高
- 当前选中项样式
- 状态标签样式
- connection / project / worktree 的缩进和视觉一致性

目标不是更花，而是：

- 扫一眼更清楚
- 长时间看不累
- 选中态更稳

### 5.3 中间区：让会话内容更像主舞台

中间区不需要加更多模块，而是要增强“内容容器感”。

建议优化：

- 控制会话内容阅读宽度
- 统一命令块、结果块、表格、说明文字的模块语言
- 避免纯白大平面
- 用轻底色、轻边界和更好的留白建立结构

关键点：

- 不是增加更多卡片
- 而是让现有内容更有秩序

### 5.4 右侧区：从操作集合变成判断面板

右侧仍然保留：

- Changes
- Files
- Diffs
- Push / Pull / Merge
- Setup / Run / Terminal

但要优化为：

- 顶部 tabs 更安静、更清楚
- 中间文件列表更好扫
- 下半区动作分组更明确
- 用户更容易判断“当前改动是否 ready”

也就是说，右侧区不改功能，只加强“状态判断”。

### 5.5 底部 composer：从浮层改成桌面 dock

输入区不换位置，但要改观感。

建议：

- 更稳定的容器轮廓
- 和主内容区衔接更自然
- model / plan / attachment / timer 的层级更清楚
- 输入区视觉更平静，不要像一个大浮层

这里的关键词不是“炫”，而是：

- steady
- quiet
- precise

---

## 6. 现代桌面风应该是什么样

你给 Codex 的参考不是为了让我照搬布局，而是为了说明：

**桌面端工作台的现代感来自“安静、克制、留白、低噪音、内容优先”，而不是来自花哨或展示感。**

所以 Hive CN 这轮应该遵循的风格是：

### 6.1 关键词

- 简洁
- 高效
- 克制
- 清爽
- 安静
- 低噪音
- 内容优先
- 桌面化

### 6.2 配色方向

不再走“白底 + 默认紫强调”。

建议方向：

- 基础底色：更柔和的浅中性色
- 主表面：低对比、轻边界的近白色
- 强调色：克制、偏成熟的单一主色
- 状态色：尽量轻，不要像网页仪表盘

重点不是“颜色更多”，而是“颜色更干净”。

### 6.3 图标和组件方向

- 图标统一成低噪音线性风格
- 组件尺寸更像桌面应用，而不是网页按钮
- 圆角适中，不要过大
- 阴影更轻
- 边框更淡
- 状态标签更克制

### 6.4 动效方向

动效不是用来做存在感，而是用来降低生硬感。

建议：

- hover 更轻
- 切换更快
- 过渡更短
- 少做弹跳和夸张位移
- 用微妙透明度和背景变化表达状态

---

## 7. 第一批最值得做的改造

### P0

- 顶部栏重新分层
- 左侧 sidebar 项目行与状态标签重做
- 中间内容区模块样式统一
- composer 现代化

### P1

- 右侧 changes / files / diffs 面板重组
- 顶部 session tab 和内容区关系优化
- 右侧底部动作分组优化

### P2

- 细节动效
- 空状态与加载状态
- 更一致的中文文案语气

---

## 8. 初版结论

Hive CN 这一轮现代化，不应该被理解成“重新设计一个产品”，而应该被理解成：

**保留 Hive 原布局，只把它的表现层打磨到成熟桌面应用的水准。**

也就是：

- 优点保留
- 缺点修掉
- 布局不推翻
- 风格更现代
- 体验更安静

---

## 9. 下一步

下一步不再做偏展示稿的高保真，而是应当产出：

1. 一版严格沿用 Hive 原布局的高保真改款稿
2. 一套组件级现代化规范
3. 一个按页面拆分的落地改造清单
