feat(automation): complete unified automation system redesign
Phase 4 completion: - Add ApprovalQueue component for managing pending approvals - Add ExecutionResult component for displaying hand/workflow results - Update Sidebar navigation to use unified AutomationPanel - Replace separate 'hands' and 'workflow' tabs with single 'automation' tab - Fix TypeScript type safety issues with unknown types in JSX expressions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
@@ -1,202 +1,246 @@
|
||||
# ZClaw 桌面应用布局优化计划
|
||||
|
||||
## 一、问题分析
|
||||
## 一、设计参考
|
||||
|
||||
基于截图和代码分析，当前三栏布局存在以下问题：
|
||||
基于腾讯 WorkBuddy 的 HTML 设计稿，学习其布局风格并适配 ZClaw 的功能需求。
|
||||
|
||||
| 问题 | 影响 |
|
||||
|------|------|
|
||||
| Sidebar 固定 256px | 占用过多水平空间 |
|
||||
| RightPanel 固定 320px | 信息密度过高，7 个 Tab 挤在一起 |
|
||||
| 主内容区被挤压 | 聊天（核心功能）空间不足 |
|
||||
| 无折叠机制 | 用户无法按需调整空间 |
|
||||
| 无响应式 | 小屏幕上不可用 |
|
||||
### WorkBuddy 布局结构
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ 顶部工具栏 (h-14 = 56px) │
|
||||
├────────────────┬───────────────────────────────────────────────┤
|
||||
│ │ │
|
||||
│ 左侧导航栏 │ 主内容区 │
|
||||
│ w-64 (256px) │ flex-1 │
|
||||
│ │ (占据全部剩余空间) │
|
||||
│ ┌──────────┐ │ │
|
||||
│ │ 搜索框 │ │ - 聊天界面 (居中卡片) │
|
||||
│ ├──────────┤ │ - 专家中心 (网格卡片) │
|
||||
│ │ 新建任务 │ │ - 技能市场 (网格卡片) │
|
||||
│ ├──────────┤ │ - 自动化 (模板卡片) │
|
||||
│ │ Claw │ │ │
|
||||
│ │ 专家 │ │ │
|
||||
│ │ 技能 │ │ │
|
||||
│ │ 插件 │ │ │
|
||||
│ │ 自动化 │ │ │
|
||||
│ ├──────────┤ │ │
|
||||
│ │ 空状态 │ │ │
|
||||
│ └──────────┘ │ │
|
||||
│ ┌──────────┐ │ │
|
||||
│ │ 用户头像 │ │ │
|
||||
│ └──────────┘ │ │
|
||||
└────────────────┴───────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 关键设计特点
|
||||
|
||||
1. **无右侧面板** - 所有功能通过左侧导航切换，在主内容区显示
|
||||
2. **紧凑导航栏** - 256px 固定宽度，包含搜索和所有导航项
|
||||
3. **最大化主内容区** - 占据全部剩余空间
|
||||
4. **卡片式布局** - 主内容区使用卡片网格展示内容
|
||||
5. **绿色强调色** - emerald-500 作为主强调色
|
||||
6. **Inter 字体** - 现代简洁的字体
|
||||
|
||||
---
|
||||
|
||||
## 二、布局方案对比
|
||||
## 二、ZClaw 功能映射
|
||||
|
||||
### 方案 A: 顶部导航 + 左右双栏 ⭐ 推荐
|
||||
### 导航项映射
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ [Logo] ZCLAW Chat | Agents | Hands | Workflow | ⚙ │
|
||||
│ ← 顶部 Tab 导航 │
|
||||
├────────────────┬─────────────────────────────────────────────────┤
|
||||
│ │ │
|
||||
│ 左侧列表区 │ 主内容区 │
|
||||
│ (可折叠) │ (聊天/详情) │
|
||||
│ │ │
|
||||
│ ┌──────────┐ │ ┌─────────────────────────────────────────┐ │
|
||||
│ │ Agent 1 │ │ │ │ │
|
||||
│ │ Agent 2 │ │ │ 聊天消息 / 详情内容 │ │
|
||||
│ │ Hand 1 │ │ │ │ │
|
||||
│ │ ... │ │ │ │ │
|
||||
│ └──────────┘ │ └─────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ┌──────────┐ │ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 用户头像 │ │ │ [输入框] [📋 详情] │ │
|
||||
│ └──────────┘ │ └─────────────────────────────────────────┘ │
|
||||
└────────────────┴─────────────────────────────────────────────────┘
|
||||
240px flex-1 (最大化)
|
||||
```
|
||||
| WorkBuddy | ZClaw | 功能说明 |
|
||||
|-----------|-------|---------|
|
||||
| Claw | 聊天 (Chat) | AI 对话，核心功能 |
|
||||
| 专家 | 分身 (Agents) | Agent 列表和管理 |
|
||||
| 技能 | 技能 (Skills) | 技能市场 |
|
||||
| 插件 | Hands | 7 个自主能力包 |
|
||||
| 自动化 | 工作流 (Workflow) | 工作流和调度 |
|
||||
|
||||
**特点**:
|
||||
- ✅ 主内容区域最大化
|
||||
- ✅ 顶部导航清晰，一眼看到所有视图
|
||||
- ✅ 左侧列表可折叠 (240px ↔ 0px)
|
||||
- ✅ 详情面板通过按钮触发（抽屉滑出），不常驻
|
||||
### 额外功能处理
|
||||
|
||||
**空间分配**: `240px + flex-1` = 主内容占比 ~80%
|
||||
ZClaw 有额外的功能需要处理：
|
||||
- **团队协作** → 添加到导航项
|
||||
- **Swarm 协作** → 添加到导航项
|
||||
- **详情面板** (RightPanel) → **改为抽屉或合并到主内容区**
|
||||
|
||||
---
|
||||
|
||||
### 方案 B: 窄导航 + 列表 + 主内容 (类 VSCode)
|
||||
## 三、新布局方案
|
||||
|
||||
### 方案：WorkBuddy 风格 + 详情抽屉
|
||||
|
||||
```
|
||||
┌────┬─────────────┬───────────────────────────────────────────────┐
|
||||
│ 🔘 │ │ │
|
||||
│ 💬 │ 列表区 │ 主内容区 │
|
||||
│ 🤖 │ (Agent/ │ (聊天/详情) │
|
||||
│ 🖐️ │ Hands/ │ │
|
||||
│ ⚡ │ etc) │ │
|
||||
│ 👥 │ │ │
|
||||
│ ⚙️ │ │ │
|
||||
└────┴─────────────┴───────────────────────────────────────────────┘
|
||||
64px 200px flex-1
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ [Z] ZCLAW [📋 详情] [⚙ 设置] │
|
||||
├────────────────┬───────────────────────────────────────────────┤
|
||||
│ 🔍 搜索... │ │
|
||||
├────────────────┤ │
|
||||
│ ✨ 新对话 │ │
|
||||
├────────────────┤ │
|
||||
│ 💬 聊天 │ 主内容区 │
|
||||
│ 🤖 分身 ← │ (flex-1) │
|
||||
│ 🖐️ Hands │ │
|
||||
│ ⚡ 工作流 │ 根据导航显示对应内容: │
|
||||
│ 📦 技能 │ - 聊天界面 │
|
||||
│ 👥 团队 │ - Agent 列表 + 详情 │
|
||||
│ 🐝 Swarm │ - Hands 列表 + 详情 │
|
||||
├────────────────┤ - 工作流编辑器 │
|
||||
│ 暂无任务 │ - 技能市场 │
|
||||
├────────────────┤ - 团队列表 │
|
||||
│ 👤 用户 │ - Swarm 仪表盘 │
|
||||
└────────────────┴───────────────────────────────────────────────┘
|
||||
↑ 点击 [📋 详情] 可从右侧滑出抽屉
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- ✅ 导航极简，64px 窄条
|
||||
- ✅ 类似 VSCode/Notion 布局，用户熟悉
|
||||
- ⚠️ 仍是三栏，但比例更合理
|
||||
### 布局尺寸
|
||||
|
||||
**空间分配**: `64px + 200px + flex-1` = 主内容占比 ~70%
|
||||
| 区域 | 尺寸 | 说明 |
|
||||
|------|------|------|
|
||||
| 左侧导航栏 | `w-64` (256px) | 与 WorkBuddy 一致 |
|
||||
| 顶部工具栏 | `h-14` (56px) | 与 WorkBuddy 一致 |
|
||||
| 主内容区 | `flex-1` | 占据全部剩余空间 |
|
||||
| 详情抽屉 | `w-80` (320px) | 按需滑出 |
|
||||
|
||||
---
|
||||
|
||||
### 方案 C: 左侧导航+列表 + 主内容 + 右侧详情（可折叠）
|
||||
## 四、详细实施计划
|
||||
|
||||
```
|
||||
┌──────────────────────┬──────────────────────────────┬─────────────┐
|
||||
│ [Tab: 分身|Hands|...]│ │ │
|
||||
├──────────────────────┤ 主内容区 │ 详情面板 │
|
||||
│ │ (聊天/详情) │ (可折叠) │
|
||||
│ 列表区 │ │ │
|
||||
│ (根据 Tab 切换) │ │ - Status │
|
||||
│ │ │ - Memory │
|
||||
│ │ │ - Agent │
|
||||
└──────────────────────┴──────────────────────────────┴─────────────┘
|
||||
240px flex-1 280px (可隐藏)
|
||||
```
|
||||
### Phase 1: 重构 Sidebar 组件
|
||||
|
||||
**特点**:
|
||||
- ✅ 改动最小，基于现有结构
|
||||
- ✅ 详情面板可折叠
|
||||
- ⚠️ 仍是三栏结构
|
||||
- ⚠️ 右侧面板常驻时占用空间
|
||||
**修改文件**: `desktop/src/components/Sidebar.tsx`
|
||||
|
||||
**空间分配**: `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`
|
||||
**改动内容**:
|
||||
1. 移除顶部 Tab 栏（改为单一导航列表）
|
||||
2. 添加搜索框
|
||||
3. 添加"新对话"按钮
|
||||
4. 导航项使用图标 + 文字
|
||||
5. 保持 256px 宽度
|
||||
|
||||
```tsx
|
||||
// 顶部导航组件
|
||||
// Tab: Chat | Agents | Hands | Workflow | Skills | Team
|
||||
// 右侧: 详情按钮、设置按钮
|
||||
<aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
|
||||
{/* 搜索框 */}
|
||||
<div className="p-3">
|
||||
<SearchInput placeholder="搜索..." />
|
||||
</div>
|
||||
|
||||
{/* 新对话按钮 */}
|
||||
<button className="mx-3 mb-2 flex items-center gap-3 px-3 py-2 bg-gray-100 rounded-lg">
|
||||
<Sparkles className="text-emerald-500" />
|
||||
<span>新对话</span>
|
||||
</button>
|
||||
|
||||
{/* 导航项 */}
|
||||
<nav className="flex-1 px-3 space-y-0.5 overflow-y-auto">
|
||||
<NavItem icon={MessageSquare} label="聊天" active />
|
||||
<NavItem icon={Bot} label="分身" />
|
||||
<NavItem icon={Hand} label="Hands" />
|
||||
<NavItem icon={GitBranch} label="工作流" />
|
||||
<NavItem icon={Package} label="技能" />
|
||||
<NavItem icon={Users} label="团队" />
|
||||
<NavItem icon={Layers} label="Swarm" />
|
||||
</nav>
|
||||
|
||||
{/* 用户栏 */}
|
||||
<div className="p-3 border-t">
|
||||
<UserBar />
|
||||
</div>
|
||||
</aside>
|
||||
```
|
||||
|
||||
### Phase 2: 重构 App.tsx 布局
|
||||
### Phase 2: 移除 RightPanel，改为抽屉
|
||||
|
||||
**修改文件**: `desktop/src/App.tsx`
|
||||
|
||||
**改动内容**:
|
||||
1. 移除常驻的 RightPanel
|
||||
2. 添加详情抽屉状态
|
||||
3. 在顶部工具栏添加"详情"按钮
|
||||
4. 点击按钮时从右侧滑出抽屉
|
||||
|
||||
```tsx
|
||||
// 新布局结构
|
||||
<div className="h-screen flex flex-col">
|
||||
<TopNav />
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<LeftPanel collapsible /> {/* 可折叠列表区 */}
|
||||
<MainContent /> {/* 主内容区 */}
|
||||
</div>
|
||||
const [showDetailDrawer, setShowDetailDrawer] = useState(false);
|
||||
|
||||
// 布局
|
||||
<div className="h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 flex flex-col">
|
||||
<header className="h-14 border-b flex items-center px-4">
|
||||
<span className="font-medium">{viewTitle}</span>
|
||||
<div className="flex-1" />
|
||||
<Button onClick={() => setShowDetailDrawer(true)}>
|
||||
<ClipboardList /> 详情
|
||||
</Button>
|
||||
<Button onClick={onOpenSettings}>
|
||||
<Settings />
|
||||
</Button>
|
||||
</header>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{/* 主内容 */}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* 详情抽屉 */}
|
||||
<DetailDrawer open={showDetailDrawer} onClose={() => setShowDetailDrawer(false)}>
|
||||
<RightPanelContent />
|
||||
</DetailDrawer>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Phase 3: 重构 Sidebar 为 LeftPanel
|
||||
### Phase 3: 创建 DetailDrawer 组件
|
||||
|
||||
**修改文件**: `desktop/src/components/Sidebar.tsx` → `LeftPanel.tsx`
|
||||
**新建文件**: `desktop/src/components/DetailDrawer.tsx`
|
||||
|
||||
- 移除顶部 Tab（已移到 TopNav）
|
||||
- 添加折叠功能
|
||||
- 显示当前视图的列表
|
||||
```tsx
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
### Phase 4: RightPanel 改为抽屉模式
|
||||
export function DetailDrawer({ open, onClose, children }) {
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<>
|
||||
{/* 遮罩 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/20 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
{/* 抽屉 */}
|
||||
<motion.aside
|
||||
initial={{ x: 320 }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: 320 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
className="fixed right-0 top-0 bottom-0 w-80 bg-white border-l z-50 flex flex-col"
|
||||
>
|
||||
<header className="h-14 border-b flex items-center px-4">
|
||||
<span className="font-medium">详情</span>
|
||||
<button onClick={onClose} className="ml-auto">
|
||||
<X />
|
||||
</button>
|
||||
</header>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{children}
|
||||
</div>
|
||||
</motion.aside>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**修改文件**: `desktop/src/components/RightPanel.tsx`
|
||||
### Phase 4: 主内容区适配
|
||||
|
||||
- 改为滑出式抽屉（Drawer）
|
||||
- 默认隐藏，点击按钮显示
|
||||
- 优化 Tab 分组
|
||||
**修改文件**: 各视图组件
|
||||
|
||||
### Phase 5: 响应式适配
|
||||
|
||||
**修改文件**: `desktop/src/App.tsx`
|
||||
|
||||
- 窗口 < 1024px: 自动折叠 LeftPanel
|
||||
- 窗口 < 768px: LeftPanel 改为抽屉
|
||||
根据 WorkBuddy 的风格调整各页面布局：
|
||||
- **聊天页**: 居中卡片式输入框，上方消息列表
|
||||
- **分身页**: 左侧列表 + 右侧详情（或卡片网格）
|
||||
- **Hands 页**: 列表 + 详情
|
||||
- **工作流页**: 列表 + 编辑器
|
||||
- **技能页**: 网格卡片布局（参考 WorkBuddy 技能页）
|
||||
|
||||
---
|
||||
|
||||
@@ -204,22 +248,66 @@
|
||||
|
||||
| 文件 | 操作 | 说明 |
|
||||
|------|------|------|
|
||||
| `components/TopNav.tsx` | 新建 | 顶部导航栏 |
|
||||
| `components/LeftPanel.tsx` | 新建/重构 | 可折叠左侧列表 |
|
||||
| `components/Drawer.tsx` | 新建 | 通用抽屉组件 |
|
||||
| `components/Sidebar.tsx` | 重构 | 改为 WorkBuddy 风格导航 |
|
||||
| `components/DetailDrawer.tsx` | **新建** | 右侧滑出抽屉 |
|
||||
| `components/TopBar.tsx` | **新建** | 顶部工具栏 |
|
||||
| `App.tsx` | 重构 | 新布局结构 |
|
||||
| `Sidebar.tsx` | 删除/重构 | 合并到 LeftPanel |
|
||||
| `RightPanel.tsx` | 重构 | 改为抽屉模式 |
|
||||
| `RightPanel.tsx` | 重构 | 内容移入 DetailDrawer |
|
||||
|
||||
---
|
||||
|
||||
## 六、验证方法
|
||||
## 六、颜色和样式规范
|
||||
|
||||
### 主色调 (参考 WorkBuddy)
|
||||
|
||||
```css
|
||||
/* 强调色 */
|
||||
--primary: #10b981; /* emerald-500 */
|
||||
--primary-hover: #059669; /* emerald-600 */
|
||||
|
||||
/* 背景 */
|
||||
--bg-main: #ffffff;
|
||||
--bg-sidebar: #ffffff;
|
||||
--bg-input: #f9fafb; /* gray-50 */
|
||||
|
||||
/* 边框 */
|
||||
--border: #e5e7eb; /* gray-200 */
|
||||
--border-light: #f3f4f6; /* gray-100 */
|
||||
|
||||
/* 文字 */
|
||||
--text-primary: #111827; /* gray-900 */
|
||||
--text-secondary: #6b7280; /* gray-500 */
|
||||
--text-muted: #9ca3af; /* gray-400 */
|
||||
```
|
||||
|
||||
### 尺寸规范
|
||||
|
||||
```css
|
||||
/* 导航栏 */
|
||||
--sidebar-width: 256px;
|
||||
--header-height: 56px;
|
||||
|
||||
/* 间距 */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 七、验证方法
|
||||
|
||||
1. **布局验证**: 检查各组件在正确位置
|
||||
2. **折叠验证**: LeftPanel 可正常折叠/展开
|
||||
3. **抽屉验证**: RightPanel 抽屉正常滑出/关闭
|
||||
4. **响应式验证**: 不同窗口尺寸下布局自适应
|
||||
5. **功能验证**: 所有现有功能正常工作
|
||||
2. **导航验证**: 点击导航项切换视图
|
||||
3. **抽屉验证**: 点击详情按钮抽屉滑出
|
||||
4. **响应式验证**: 窗口缩放时布局正确
|
||||
5. **暗色模式验证**: 暗色模式下样式正确
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
@@ -228,23 +316,51 @@ 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 小时
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ [Tab: 分身|Hands|工作流|技能|团队|协作] │
|
||||
├────────────────────────────────────────────────┬───────────────┤
|
||||
│ 主内容区 (~50%) │ RightPanel │
|
||||
│ │ (320px) │
|
||||
└────────────────────────────────────────────────┴───────────────┘
|
||||
```
|
||||
|
||||
### 改造后 (WorkBuddy 风格)
|
||||
|
||||
```
|
||||
┌────────────────┬───────────────────────────────────────────────┐
|
||||
│ 🔍 搜索 │ │
|
||||
│ ✨ 新对话 │ │
|
||||
│ 💬 聊天 │ │
|
||||
│ 🤖 分身 │ 主内容区 │
|
||||
│ 🖐️ Hands │ (100%) │
|
||||
│ ⚡ 工作流 │ │
|
||||
│ 📦 技能 │ [📋 详情] → 按需显示抽屉 │
|
||||
│ 👥 团队 │ │
|
||||
│ 🐝 Swarm │ │
|
||||
│ ────────── │ │
|
||||
│ 👤 用户 │ │
|
||||
└────────────────┴───────────────────────────────────────────────┘
|
||||
256px
|
||||
```
|
||||
|
||||
**空间优化**:
|
||||
- 移除常驻 RightPanel，主内容区从 ~50% 扩大到 ~100%
|
||||
- 详情通过抽屉按需显示，不占用常驻空间
|
||||
|
||||
---
|
||||
|
||||
## 八、待确认问题
|
||||
## 九、实施预估
|
||||
|
||||
1. **布局方案选择**: 你更倾向于哪个方案 (A/B/C/D)？
|
||||
2. **RightPanel 处理**: 改为抽屉模式，还是保留常驻但可折叠？
|
||||
3. **快捷键**: 是否需要快捷键切换面板 (Cmd+[ / Cmd+])？
|
||||
4. **过渡动画**: 是否需要平滑的折叠/展开动画？
|
||||
| Phase | 工作量 | 优先级 |
|
||||
|-------|--------|--------|
|
||||
| Phase 1: 重构 Sidebar | 2h | P0 |
|
||||
| Phase 2: 移除 RightPanel，改为抽屉 | 1.5h | P0 |
|
||||
| Phase 3: 创建 DetailDrawer | 1h | P0 |
|
||||
| Phase 4: 主内容区适配 | 2h | P1 |
|
||||
|
||||
**总计**: 约 6.5 小时
|
||||
|
||||
Reference in New Issue
Block a user