首页布局优化前
This commit is contained in:
iven
250
plans/humble-popping-anchor.md
Normal file
250
plans/humble-popping-anchor.md
Normal file
@@ -0,0 +1,250 @@
|
||||
# ZClaw 桌面应用布局优化计划
|
||||
|
||||
## 一、问题分析
|
||||
|
||||
基于截图和代码分析，当前三栏布局存在以下问题：
|
||||
|
||||
| 问题 | 影响 |
|
||||
|------|------|
|
||||
| Sidebar 固定 256px | 占用过多水平空间 |
|
||||
| RightPanel 固定 320px | 信息密度过高，7 个 Tab 挤在一起 |
|
||||
| 主内容区被挤压 | 聊天（核心功能）空间不足 |
|
||||
| 无折叠机制 | 用户无法按需调整空间 |
|
||||
| 无响应式 | 小屏幕上不可用 |
|
||||
|
||||
---
|
||||
|
||||
## 二、布局方案对比
|
||||
|
||||
### 方案 A: 顶部导航 + 左右双栏 ⭐ 推荐
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ [Logo] ZCLAW Chat | Agents | Hands | Workflow | ⚙ │
|
||||
│ ← 顶部 Tab 导航 │
|
||||
├────────────────┬─────────────────────────────────────────────────┤
|
||||
│ │ │
|
||||
│ 左侧列表区 │ 主内容区 │
|
||||
│ (可折叠) │ (聊天/详情) │
|
||||
│ │ │
|
||||
│ ┌──────────┐ │ ┌─────────────────────────────────────────┐ │
|
||||
│ │ Agent 1 │ │ │ │ │
|
||||
│ │ Agent 2 │ │ │ 聊天消息 / 详情内容 │ │
|
||||
│ │ Hand 1 │ │ │ │ │
|
||||
│ │ ... │ │ │ │ │
|
||||
│ └──────────┘ │ └─────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ┌──────────┐ │ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 用户头像 │ │ │ [输入框] [📋 详情] │ │
|
||||
│ └──────────┘ │ └─────────────────────────────────────────┘ │
|
||||
└────────────────┴─────────────────────────────────────────────────┘
|
||||
240px flex-1 (最大化)
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- ✅ 主内容区域最大化
|
||||
- ✅ 顶部导航清晰，一眼看到所有视图
|
||||
- ✅ 左侧列表可折叠 (240px ↔ 0px)
|
||||
- ✅ 详情面板通过按钮触发（抽屉滑出），不常驻
|
||||
|
||||
**空间分配**: `240px + flex-1` = 主内容占比 ~80%
|
||||
|
||||
---
|
||||
|
||||
### 方案 B: 窄导航 + 列表 + 主内容 (类 VSCode)
|
||||
|
||||
```
|
||||
┌────┬─────────────┬───────────────────────────────────────────────┐
|
||||
│ 🔘 │ │ │
|
||||
│ 💬 │ 列表区 │ 主内容区 │
|
||||
│ 🤖 │ (Agent/ │ (聊天/详情) │
|
||||
│ 🖐️ │ Hands/ │ │
|
||||
│ ⚡ │ etc) │ │
|
||||
│ 👥 │ │ │
|
||||
│ ⚙️ │ │ │
|
||||
└────┴─────────────┴───────────────────────────────────────────────┘
|
||||
64px 200px flex-1
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- ✅ 导航极简，64px 窄条
|
||||
- ✅ 类似 VSCode/Notion 布局，用户熟悉
|
||||
- ⚠️ 仍是三栏，但比例更合理
|
||||
|
||||
**空间分配**: `64px + 200px + flex-1` = 主内容占比 ~70%
|
||||
|
||||
---
|
||||
|
||||
### 方案 C: 左侧导航+列表 + 主内容 + 右侧详情（可折叠）
|
||||
|
||||
```
|
||||
┌──────────────────────┬──────────────────────────────┬─────────────┐
|
||||
│ [Tab: 分身|Hands|...]│ │ │
|
||||
├──────────────────────┤ 主内容区 │ 详情面板 │
|
||||
│ │ (聊天/详情) │ (可折叠) │
|
||||
│ 列表区 │ │ │
|
||||
│ (根据 Tab 切换) │ │ - Status │
|
||||
│ │ │ - Memory │
|
||||
│ │ │ - Agent │
|
||||
└──────────────────────┴──────────────────────────────┴─────────────┘
|
||||
240px flex-1 280px (可隐藏)
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- ✅ 改动最小，基于现有结构
|
||||
- ✅ 详情面板可折叠
|
||||
- ⚠️ 仍是三栏结构
|
||||
- ⚠️ 右侧面板常驻时占用空间
|
||||
|
||||
**空间分配**: `240px + flex-1 + 280px` = 主内容占比 ~50% (面板展开时)
|
||||
|
||||
---
|
||||
|
||||
### 方案 D: 单栏 + 抽屉模式（极简）
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ [≡ 菜单] ZCLAW [⚙ 详情] [🔔] │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ 主内容区 │
|
||||
│ (聊天/详情) │
|
||||
│ │
|
||||
│ 最大化空间 │
|
||||
│ │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ [💬 输入框] │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
|
||||
点击 [≡ 菜单] → 左侧滑出抽屉导航
|
||||
点击 [⚙ 详情] → 右侧滑出详情面板
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- ✅ 主内容区域最大化 (100%)
|
||||
- ✅ 极简界面，专注当前任务
|
||||
- ⚠️ 需要额外点击访问导航
|
||||
- ⚠️ 不适合频繁切换视图
|
||||
|
||||
**空间分配**: 主内容 100%，抽屉按需滑出
|
||||
|
||||
---
|
||||
|
||||
## 三、方案推荐
|
||||
|
||||
| 方案 | 主内容占比 | 改动量 | 适合场景 |
|
||||
|------|-----------|--------|---------|
|
||||
| **A: 顶部导航+双栏** ⭐ | ~80% | 中 | **推荐** - 平衡空间和功能 |
|
||||
| B: 窄导航+三栏 | ~70% | 小 | 保守升级，用户熟悉 |
|
||||
| C: 改良三栏 | ~50% | 最小 | 最小改动，渐进优化 |
|
||||
| D: 单栏+抽屉 | 100% | 大 | 极简主义，移动端友好 |
|
||||
|
||||
**推荐方案 A** 的理由：
|
||||
1. 聊天是核心功能，应给予最大空间
|
||||
2. 顶部导航符合现代应用设计趋势
|
||||
3. 左侧列表可折叠，灵活控制
|
||||
4. 详情面板按需显示，不常驻占用
|
||||
|
||||
---
|
||||
|
||||
## 四、实施计划（基于方案 A）
|
||||
|
||||
### Phase 1: 创建顶部导航组件
|
||||
|
||||
**新建文件**: `desktop/src/components/TopNav.tsx`
|
||||
|
||||
```tsx
|
||||
// 顶部导航组件
|
||||
// Tab: Chat | Agents | Hands | Workflow | Skills | Team
|
||||
// 右侧: 详情按钮、设置按钮
|
||||
```
|
||||
|
||||
### Phase 2: 重构 App.tsx 布局
|
||||
|
||||
**修改文件**: `desktop/src/App.tsx`
|
||||
|
||||
```tsx
|
||||
// 新布局结构
|
||||
<div className="h-screen flex flex-col">
|
||||
<TopNav />
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<LeftPanel collapsible /> {/* 可折叠列表区 */}
|
||||
<MainContent /> {/* 主内容区 */}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Phase 3: 重构 Sidebar 为 LeftPanel
|
||||
|
||||
**修改文件**: `desktop/src/components/Sidebar.tsx` → `LeftPanel.tsx`
|
||||
|
||||
- 移除顶部 Tab（已移到 TopNav）
|
||||
- 添加折叠功能
|
||||
- 显示当前视图的列表
|
||||
|
||||
### Phase 4: RightPanel 改为抽屉模式
|
||||
|
||||
**修改文件**: `desktop/src/components/RightPanel.tsx`
|
||||
|
||||
- 改为滑出式抽屉（Drawer）
|
||||
- 默认隐藏，点击按钮显示
|
||||
- 优化 Tab 分组
|
||||
|
||||
### Phase 5: 响应式适配
|
||||
|
||||
**修改文件**: `desktop/src/App.tsx`
|
||||
|
||||
- 窗口 < 1024px: 自动折叠 LeftPanel
|
||||
- 窗口 < 768px: LeftPanel 改为抽屉
|
||||
|
||||
---
|
||||
|
||||
## 五、关键文件清单
|
||||
|
||||
| 文件 | 操作 | 说明 |
|
||||
|------|------|------|
|
||||
| `components/TopNav.tsx` | 新建 | 顶部导航栏 |
|
||||
| `components/LeftPanel.tsx` | 新建/重构 | 可折叠左侧列表 |
|
||||
| `components/Drawer.tsx` | 新建 | 通用抽屉组件 |
|
||||
| `App.tsx` | 重构 | 新布局结构 |
|
||||
| `Sidebar.tsx` | 删除/重构 | 合并到 LeftPanel |
|
||||
| `RightPanel.tsx` | 重构 | 改为抽屉模式 |
|
||||
|
||||
---
|
||||
|
||||
## 六、验证方法
|
||||
|
||||
1. **布局验证**: 检查各组件在正确位置
|
||||
2. **折叠验证**: LeftPanel 可正常折叠/展开
|
||||
3. **抽屉验证**: RightPanel 抽屉正常滑出/关闭
|
||||
4. **响应式验证**: 不同窗口尺寸下布局自适应
|
||||
5. **功能验证**: 所有现有功能正常工作
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
# 手动测试各项功能
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 七、实施预估
|
||||
|
||||
| Phase | 工作量 | 优先级 |
|
||||
|-------|--------|--------|
|
||||
| Phase 1: TopNav | 2h | P0 |
|
||||
| Phase 2: App 重构 | 2h | P0 |
|
||||
| Phase 3: LeftPanel | 2h | P0 |
|
||||
| Phase 4: RightPanel 抽屉 | 1.5h | P1 |
|
||||
| Phase 5: 响应式 | 1h | P1 |
|
||||
|
||||
**总计**: 约 8.5 小时
|
||||
|
||||
---
|
||||
|
||||
## 八、待确认问题
|
||||
|
||||
1. **布局方案选择**: 你更倾向于哪个方案 (A/B/C/D)？
|
||||
2. **RightPanel 处理**: 改为抽屉模式，还是保留常驻但可折叠？
|
||||
3. **快捷键**: 是否需要快捷键切换面板 (Cmd+[ / Cmd+])？
|
||||
4. **过渡动画**: 是否需要平滑的折叠/展开动画？
|
||||
Reference in New Issue
Block a user