# 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. **过渡动画**: 是否需要平滑的折叠/展开动画？