iven/zclaw_openfang

Fork 0

Files

iven e262200f1e 首页布局优化前

2026-03-17 23:26:16 +08:00

11 KiB

Raw Blame History

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 的理由：

聊天是核心功能，应给予最大空间
顶部导航符合现代应用设计趋势
左侧列表可折叠，灵活控制
详情面板按需显示，不常驻占用

四、实施计划（基于方案 A）

Phase 1: 创建顶部导航组件

新建文件: desktop/src/components/TopNav.tsx

// 顶部导航组件
// Tab: Chat | Agents | Hands | Workflow | Skills | Team
// 右侧: 详情按钮、设置按钮

Phase 2: 重构 App.tsx 布局

修改文件: desktop/src/App.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: 响应式适配