Skip to content

Latest commit

 

History

History
846 lines (737 loc) · 52.3 KB

File metadata and controls

846 lines (737 loc) · 52.3 KB

龙虾管家 (OpenClaw Manager) - 开发计划

项目名称: 龙虾管家 (OpenClaw Manager)
目标: 为 OpenClaw 提供跨平台图形化管理工具,面向新手用户
支持平台: macOS, Windows, Ubuntu (Linux) + Web 版本(测试用)


一、需求分析

1.1 核心功能清单

功能模块 描述 CLI 命令对应
🆕 接管现有安装 检测并接管已安装的 OpenClaw,读取现有配置 openclaw config file + 读取配置
安装 傻瓜式安装 OpenClaw(检测环境、安装 Node.js、npm install) npm install -g openclaw
初始化 配置向导,设置工作区、默认模型 openclaw setup / openclaw configure
配置管理 可视化编辑配置文件 openclaw config get/set
网关管理 启动/停止/重启/状态查看 openclaw gateway start/stop/restart/status
卸载 完全卸载 OpenClaw openclaw uninstall --all
Skills 管理 浏览、搜索、安装、更新、卸载 Skills clawhub search/install/update/uninstall
Channels 管理 连接/断开通信工具(Telegram, Discord, 飞书等) openclaw channels login/add/remove
模型配置 设置 API Key、选择默认模型、配置 fallback openclaw models set/auth
离线文档 预缓存 OpenClaw 官方文档,断网可查看 -
多实例管理 管理多个 OpenClaw 实例(不同端口、不同配置) 多配置文件切换
Agent 管理 创建/删除/配置多个 Agent openclaw agents add/delete/list
更新 检查并更新 OpenClaw openclaw update
日志查看 查看运行日志 openclaw logs
⏳ 本地模型 OpenVINO 加速本地推理(后续版本) -

1.2 用户角色

主要用户:新手用户

  • 完全不熟悉命令行
  • 需要向导式引导(每一步都有说明)
  • 界面简洁,术语通俗
  • 默认值合理,减少选择

次要用户:进阶用户

  • 了解 OpenClaw 基础
  • 需要快速管理工具
  • 可切换到高级模式

1.3 非功能需求

  • 启动速度 < 3 秒
  • 安装包体积尽可能小(目标 < 50MB)
  • 内存占用 < 200MB(空闲状态)
  • 支持暗色/亮色主题
  • 多语言支持(优先中文、英文)

二、技术架构

2.1 技术选型

层级 技术选择 理由
桌面框架 Tauri 2.x 比 Electron 轻量 10 倍,使用系统 WebView
🆕 Web 版本 Vite + React SPA 同一套代码,方便开发测试
前端框架 React 18 + TypeScript 生态成熟,组件库丰富
UI 组件库 Shadcn/ui + Tailwind CSS 现代、可定制、体积小
状态管理 Zustand 轻量、简单
后端通信 Tauri Commands / HTTP API 桌面用 IPC,Web 用后端代理
数据存储 本地 JSON + Tauri Store 简单可靠

2.2 双模式架构

一套代码,两种运行方式:

┌─────────────────────────────────────────────────────────────┐
│                     龙虾管家 - 双模式                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              前端代码 (React + TypeScript)           │   │
│  │                                                      │   │
│  │   完全共享的 UI 组件和业务逻辑                        │   │
│  │                                                      │   │
│  └─────────────────────────────────────────────────────┘   │
│                          │                                  │
│         ┌────────────────┴────────────────┐                │
│         │                                  │                │
│         ▼                                  ▼                │
│  ┌─────────────────┐              ┌─────────────────┐      │
│  │  Desktop 模式   │              │    Web 模式     │      │
│  │    (Tauri)      │              │     (Vite)      │      │
│  │                 │              │                 │      │
│  │  Tauri IPC      │              │  HTTP API       │      │
│  │  直接调用 CLI   │              │  后端代理 CLI   │      │
│  │                 │              │                 │      │
│  └─────────────────┘              └─────────────────┘      │
│         │                                  │                │
│         └────────────────┬────────────────┘                │
│                          ▼                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              OpenClaw CLI                            │   │
│  │  openclaw gateway/config/channels/models/...        │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Web 模式后端(用于测试):

┌─────────────────────────────────────────┐
│         Web Backend (Node.js)           │
│                                         │
│  GET  /api/gateway/status              │
│  POST /api/gateway/start               │
│  POST /api/gateway/stop                │
│  GET  /api/config                      │
│  POST /api/config                      │
│  GET  /api/channels                    │
│  POST /api/channels/:id                │
│  GET  /api/system/detect               │
│  ...                                   │
│                                         │
│  内部调用 openclaw CLI 命令             │
└─────────────────────────────────────────┘

开发流程:

  1. 开发阶段: 用 Web 模式 (npm run dev:web) 快速迭代
  2. 测试阶段: Web 模式 + Desktop 模式并行测试
  3. 发布阶段: 打包 Desktop 版本

三、UI/UX 设计

3.1 整体布局

采用 侧边栏 + 主内容区 经典布局:

┌─────────────────────────────────────────────────────────────┐
│ ┌──────────┐ ┌───────────────────────────────────────────┐ │
│ │  🦞 Logo │ │  Header (当前页面标题 + 操作按钮)          │ │
│ │ 龙虾管家 │ ├───────────────────────────────────────────┤ │
│ │          │ │                                           │ │
│ │  Sidebar │ │                                           │ │
│ │          │ │                                           │ │
│ │  ◉ 概览  │ │         Main Content                      │ │
│ │  ○ 网关  │ │                                           │ │
│ │  ○ 通道  │ │                                           │ │
│ │  ○ 模型  │ │                                           │ │
│ │  ○ 技能  │ │                                           │ │
│ │  ○ 代理  │ │                                           │ │
│ │  ○ 配置  │ │                                           │ │
│ │  ○ 文档  │ │                                           │ │
│ │  ○ 日志  │ │                                           │ │
│ │  ○ 设置  │ │                                           │ │
│ │          │ │                                           │ │
│ │  ──────  │ └───────────────────────────────────────────┘ │
│ │ 实例: [▼]│                                               │
│ └──────────┘                                               │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Gateway ● Running | 模型: GLM-5 | v2026.3.8            │ │
│ └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

3.2 🆕 启动检测流程

应用启动时自动检测环境,决定进入哪个流程:

┌─────────────────────────────────────────────────────────┐
│                                                         │
│                    🦞 龙虾管家                          │
│                                                         │
│                  正在检测环境...                         │
│                                                         │
│  ○ Node.js...                                          │
│  ○ OpenClaw CLI...                                     │
│  ○ 现有配置...                                         │
│                                                         │
└─────────────────────────────────────────────────────────┘

检测结果三种情况:

情况 1:检测到现有安装 → 接管模式

┌─────────────────────────────────────────────────────────┐
│                                                         │
│              ✓ 检测到 OpenClaw 已安装                   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 版本: OpenClaw 2026.3.8                          │   │
│  │ 配置: ~/.openclaw/openclaw.json                 │   │
│  │ 网关: 端口 18789                                 │   │
│  │ 模型: GLM-5                                      │   │
│  │ 通道: Feishu (已连接)                            │   │
│  │ Agent: 4 个已配置                                │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  龙虾管家可以接管管理这个 OpenClaw 安装。               │
│  你将能够:                                              │
│  • 查看和修改所有配置                                    │
│  • 管理 Gateway 启停                                    │
│  • 添加/删除 Channels                                   │
│  • 安装/卸载 Skills                                     │
│                                                         │
│  [接管现有安装]        [全新安装(覆盖现有)]            │
│                                                         │
└─────────────────────────────────────────────────────────┘

情况 2:未安装 → 新安装向导

┌─────────────────────────────────────────────────────────┐
│                                                         │
│              ✗ 未检测到 OpenClaw                        │
│                                                         │
│  龙虾管家可以帮你安装 OpenClaw。                         │
│                                                         │
│  [开始安装]                                              │
│                                                         │
│  💡 如果你已经安装了 OpenClaw,请检查:                  │
│     • Node.js 是否正确安装                              │
│     • openclaw 命令是否在 PATH 中                       │
│                                                         │
└─────────────────────────────────────────────────────────┘

情况 3:环境不满足 → 引导安装

┌─────────────────────────────────────────────────────────┐
│                                                         │
│              ⚠️ 环境需要更新                            │
│                                                         │
│  ✗ Node.js 未安装或版本过低                             │
│    需要: Node.js 18+                                    │
│                                                         │
│  龙虾管家可以帮你安装 Node.js,或者你可以手动安装。      │
│                                                         │
│  [自动安装 Node.js]    [我手动安装,完成后刷新]          │
│                                                         │
└─────────────────────────────────────────────────────────┘

3.3 页面规划

3.3.1 Dashboard (概览)

┌─────────────────────────────────────────────────────────┐
│  概览                                                   │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌──────────────────┐  ┌──────────────────┐            │
│  │ 网关状态         │  │ 通道连接         │            │
│  │                  │  │                  │            │
│  │ ● 运行中         │  │ 🟢 飞书 已连接   │            │
│  │ 端口: 18789      │  │ ⚪ Telegram 未配置│            │
│  │ 运行: 2小时34分   │  │ ⚪ Discord 未配置 │            │
│  │                  │  │                  │            │
│  │ [停止] [重启]    │  │ [管理通道]       │            │
│  └──────────────────┘  └──────────────────┘            │
│                                                         │
│  ┌──────────────────┐  ┌──────────────────┐            │
│  │ 当前模型         │  │ 技能插件         │            │
│  │                  │  │                  │            │
│  │ GLM-5 (默认)     │  │ 已安装 12 个     │            │
│  │ Kimi (备选)      │  │ 3 个可更新       │            │
│  │                  │  │                  │            │
│  │ [配置模型]       │  │ [浏览技能]       │            │
│  └──────────────────┘  └──────────────────┘            │
│                                                         │
│  快捷操作                                               │
│  [📊 打开控制台] [💻 打开终端] [📝 查看日志]            │
│                                                         │
└─────────────────────────────────────────────────────────┘

3.3.2 Gateway (网关管理)

┌─────────────────────────────────────────────────────────┐
│  网关管理                                               │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │                 ● 运行中                          │   │
│  │           ws://127.0.0.1:18789                    │   │
│  │                                                   │   │
│  │    [停止]  [重启]  [在浏览器打开]                 │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  配置                                                   │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 端口:        [18789        ]                     │   │
│  │ 绑定模式:    [○ 本地  ● 局域网  ○ Tailscale]    │   │
│  │ 认证方式:    [● Token  ○ 密码  ○ 无]            │   │
│  │ Token:       [cb209f29de...    ] [复制] [重新生成]│   │
│  │                                                   │   │
│  │ [保存配置]                                        │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  最近日志 (最后 20 行)                                  │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 12:34:56 [INFO] Gateway started on port 18789    │   │
│  │ 12:34:57 [INFO] Channel feishu connected         │   │
│  │ 12:35:01 [INFO] Session started: cipher          │   │
│  │ ...                                 [查看全部 →] │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

3.3.3 Channels (通道管理)

┌─────────────────────────────────────────────────────────┐
│  通道管理                                               │
├─────────────────────────────────────────────────────────┤
│  [+ 添加通道]                                           │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🟢 飞书                               已连接     │   │
│  │ 账号: 小龙虾 (default)                           │   │
│  │ 模式: WebSocket                                  │   │
│  │                              [配置] [移除]       │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ ⚪ Telegram                          未配置      │   │
│  │ 点击设置 Telegram 机器人                         │   │
│  │                              [设置]             │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ ⚪ Discord                           未配置      │   │
│  │ 点击设置 Discord 机器人                          │   │
│  │                              [设置]             │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ ⚪ WhatsApp                          未配置      │   │
│  │ 需要扫描二维码                                   │   │
│  │                              [设置]             │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

3.3.4 Models (模型配置)

┌─────────────────────────────────────────────────────────┐
│  模型配置                                               │
├─────────────────────────────────────────────────────────┤
│  默认模型: [GLM-5 ▼]                                    │
│                                                         │
│  已配置的提供商                                          │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🟢 智谱 AI (zai)                                 │   │
│  │ API Key: sk-••••••••••••1234   [编辑] [测试]    │   │
│  │ 模型: GLM-5, GLM-4.7, GLM-4.7-Flash             │   │
│  │ 状态: ✓ 已连接                                   │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🟢 月之暗面 (moonshot)                           │   │
│  │ API Key: sk-••••••••••••5678   [编辑] [测试]    │   │
│  │ 模型: Kimi K2.5                                  │   │
│  │ 状态: ✓ 已连接                                   │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ ⚪ OpenRouter                                    │   │
│  │ 未配置                                           │   │
│  │                              [设置]             │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  [+ 添加提供商]                                          │
│                                                         │
│  备选链                                                 │
│  ┌─────────────────────────────────────────────────┐   │
│  │ GLM-5 → Kimi K2.5 → (添加备选)                   │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

3.3.5 Skills (技能管理)

┌─────────────────────────────────────────────────────────┐
│  技能管理                                               │
├─────────────────────────────────────────────────────────┤
│  [已安装] [浏览市场]                                     │
│  ┌─────────────────────────────────────────────────────┐│
│  │ 🔍 搜索技能...                                      ││
│  └─────────────────────────────────────────────────────┘│
│                                                         │
│  已安装 (12)                                            │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 📁 feishu-doc                    v2026.3.7       │   │
│  │ 飞书文档读写操作                                 │   │
│  │                              [更新] [卸载]       │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🌤️ weather                       v1.2.0         │   │
│  │ 获取天气和预报                                   │   │
│  │ ✓ 已是最新版本                                   │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🤖 coding-agent                   v2.1.0   ⬆️    │   │
│  │ 委托编程任务给 AI 代理                           │   │
│  │                              [更新] [卸载]       │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  可更新 (3)  [全部更新]                                  │
└─────────────────────────────────────────────────────────┘

3.3.6 Agents (代理管理)

┌─────────────────────────────────────────────────────────┐
│  代理管理                                               │
├─────────────────────────────────────────────────────────┤
│  [+ 创建代理]                                           │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🔐 Cipher                          GLM-5         │   │
│  │ 工作区: ~/.openclaw/workspace-cipher             │   │
│  │ 路由: 飞书 → cipher 账号                         │   │
│  │                              [编辑] [删除]       │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🎯 Vector                          GLM-5         │   │
│  │ 工作区: ~/.openclaw/workspace-vector             │   │
│  │ 路由: 飞书 → vector 账号                         │   │
│  │                              [编辑] [删除]       │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 🌸 Anya                            GLM-5         │   │
│  │ 工作区: ~/.openclaw/workspace-anya               │   │
│  │ 路由: 飞书 → anya 账号                           │   │
│  │                              [编辑] [删除]       │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

3.3.7 Config (配置编辑)

┌─────────────────────────────────────────────────────────┐
│  配置编辑                                               │
├─────────────────────────────────────────────────────────┤
│  [可视化编辑] [JSON 编辑器]                              │
│                                                         │
│  可视化编辑                                             │
│  ┌─────────────────────────────────────────────────┐   │
│  │ ▼ 网关 (Gateway)                                 │   │
│  │   端口: [18789        ]                          │   │
│  │   模式: [● 本地  ○ 远程]                         │   │
│  │   绑定: [Loopback ▼]                             │   │
│  │   认证模式: [Token ▼]                            │   │
│  │                                                   │   │
│  │ ▼ 代理默认设置 (Agents Defaults)                 │   │
│  │   默认模型: [GLM-5 ▼]                            │   │
│  │   最大并发: [4    ]                              │   │
│  │   工作区: [~/.openclaw/workspace    ] [浏览]     │   │
│  │                                                   │   │
│  │ ▼ 消息 (Messages)                                │   │
│  │   确认反应范围: [Group Mentions ▼]               │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  [验证] [保存] [重置] [导出] [导入]                      │
└─────────────────────────────────────────────────────────┘

3.3.8 Docs (文档中心)

┌─────────────────────────────────────────────────────────┐
│  文档中心                                    [更新文档]   │
├─────────────────────────────────────────────────────────┤
│  ┌──────────────┐ ┌────────────────────────────────────┐│
│  │ 目录         │ │ 🔍 搜索文档...                     ││
│  │              │ ├────────────────────────────────────┤│
│  │ ▼ 入门指南   │ │                                    ││
│  │   安装       │ │ ## 安装 OpenClaw                   ││
│  │   快速开始   │ │                                    ││
│  │   配置向导   │ │ ### 系统要求                       ││
│  │              │ │                                    ││
│  │ ▼ 基础功能   │ │ - Node.js 18 或更高版本            ││
│  │   网关       │ │ - npm 或 yarn                      ││
│  │   通道       │ │ - Git(可选)                      ││
│  │   模型       │ │                                    ││
│  │              │ │ ### 安装步骤                       ││
│  │ ▼ 进阶功能   │ │                                    ││
│  │   Skills     │ │ ```bash                            ││
│  │   Agents     │ │ npm install -g openclaw            ││
│  │   配置文件   │ │ ```                                ││
│  │              │ │                                    ││
│  │ ▼ 常见问题   │ │ 安装完成后,运行:                 ││
│  │              │ │                                    ││
│  │ ───────────  │ │ ```bash                            ││
│  │              │ │ openclaw setup                     ││
│  │ 📥 离线缓存  │ │ ```                                ││
│  │ 更新于 3天前 │ │                                    ││
│  └──────────────┘ └────────────────────────────────────┘│
│                                                         │
│  文档状态: ✓ 已缓存 (可离线访问) | 最后更新: 2026-03-17  │
└─────────────────────────────────────────────────────────┘

3.3.9 Logs (日志查看)

┌─────────────────────────────────────────────────────────┐
│  日志                                                   │
├─────────────────────────────────────────────────────────┤
│  [全部 ▼] [🔍 搜索...] [导出] [清空] [⬇️ 自动滚动]       │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 2026-03-20 00:13:45 [INFO] Gateway health check │   │
│  │ 2026-03-20 00:13:46 [DEBUG] WebSocket connected │   │
│  │ 2026-03-20 00:13:50 [INFO] Session: cipher started│  │
│  │ 2026-03-20 00:14:01 [DEBUG] Model request: GLM-5│   │
│  │ 2026-03-20 00:14:02 [WARN] Rate limit approaching│   │
│  │ 2026-03-20 00:14:15 [INFO] Response sent (234 tok│  │
│  │ 2026-03-20 00:15:00 [INFO] Heartbeat OK         │   │
│  │ ...                                              │   │
│  │ ...                                              │   │
│  │ ...                                              │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

3.3.10 Settings (设置)

┌─────────────────────────────────────────────────────────┐
│  设置                                                   │
├─────────────────────────────────────────────────────────┤
│  外观                                                   │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 主题:    [● 跟随系统  ○ 浅色  ○ 深色]           │   │
│  │ 语言:    [简体中文 ▼]                            │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  系统                                                   │
│  ┌─────────────────────────────────────────────────┐   │
│  │ [✓] 开机时启动                                   │   │
│  │ [✓] 显示系统托盘图标                             │   │
│  │ [✓] 关闭时最小化到托盘                           │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  更新                                                   │
│  ┌─────────────────────────────────────────────────┐   │
│  │ 龙虾管家: v1.0.0 (最新)                          │   │
│  │ OpenClaw CLI: v2026.3.8                          │   │
│  │ [检查更新]                                        │   │
│  │ 更新通道: [Stable ▼]                             │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  危险操作                                               │
│  ┌─────────────────────────────────────────────────┐   │
│  │ [重置配置]  (保留 CLI 安装)                       │   │
│  │ [卸载 OpenClaw]   (删除所有内容)                 │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  关于                                                   │
│  龙虾管家 v1.0.0                                        │
│  基于 Tauri + React 构建                                │
│  © 2026 OpenClaw Team                                   │
└─────────────────────────────────────────────────────────┘

3.4 多实例管理

侧边栏底部实例切换:

│ │  ──────  │
│ │ 实例: [▼]│
│ └──────────┘

实例管理弹窗:

┌─────────────────────────────────────────────────────────┐
│  实例管理                                    [+ 新建实例] │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ ● 默认实例                              活跃     │   │
│  │ 配置: ~/.openclaw/openclaw.json                 │   │
│  │ 端口: 18789                                     │   │
│  │ 模型: GLM-5                                     │   │
│  │                              [切换] [设置]      │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ ○ 测试实例                              已停止   │   │
│  │ 配置: ~/.openclaw-instances/test/config.json    │   │
│  │ 端口: 18888                                     │   │
│  │ 模型: Kimi K2.5                                 │   │
│  │                    [切换] [启动] [设置] [删除]  │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  💡 提示:不同实例使用不同端口,可同时运行               │
└─────────────────────────────────────────────────────────┘

四、开发计划

4.1 阶段划分

阶段 内容 预计工时 交付物
P0: 基础架构 项目初始化、双模式架构、基础 UI 2-3 天 可运行的 Web + Desktop 空壳
P1: 核心功能 接管检测、Gateway 管理、Dashboard 3-4 天 基本可用的应用
P2: 配置管理 Models、Channels、Config 编辑 3-4 天 配置功能完整
P3: 扩展功能 Skills、Agents、Logs 2-3 天 全功能版本
P4: 辅助功能 文档中心、多实例管理 2-3 天 完整版本
P5: 打磨发布 UI 优化、测试、打包 2-3 天 可发布版本

总预计: 14-20 天

4.2 详细任务列表

Phase 0: 基础架构

  • 创建项目结构(前端 + Web 后端 + Tauri)
  • 配置 React + TypeScript + Vite
  • 集成 Shadcn/ui + Tailwind
  • 实现双模式架构(Web/Desktop 切换)
  • 创建侧边栏布局组件
  • 设置路由和状态管理
  • 设计 Logo 占位符

Phase 1: 核心功能

  • 实现环境检测逻辑(Node.js, npm, OpenClaw)
  • 🆕 实现启动检测流程(接管/新安装/环境不满足)
  • 🆕 实现接管现有安装功能
  • 实现 Dashboard 页面
  • 实现 Gateway 状态读取
  • 实现 Gateway 启停控制
  • 实现配置文件读取/保存

Phase 2: 配置管理

  • 实现 Models 配置页面
  • 实现 API Key 管理组件(脱敏显示)
  • 实现 Channels 配置页面
  • 实现 Config 可视化编辑器
  • 实现 Config JSON 编辑器

Phase 3: 扩展功能

  • 实现 Skills 市场浏览
  • 实现 Skills 安装/卸载
  • 实现 Agents 管理
  • 实现 Logs 实时查看
  • 实现 Settings 页面

Phase 4: 辅助功能

  • 实现离线文档中心
  • 实现多实例管理
  • 完善错误处理

Phase 5: 打磨发布

  • UI 细节优化
  • 暗色主题支持
  • 多语言支持(中英文)
  • Web 模式完整测试
  • Desktop 打包测试(三平台)
  • 编写用户文档
  • 制作安装包

4.3 项目结构

openclaw-manager/
├── packages/
│   ├── web/                    # React 前端(共享)
│   │   ├── src/
│   │   │   ├── components/
│   │   │   │   ├── ui/         # Shadcn 组件
│   │   │   │   ├── layout/     # 布局组件
│   │   │   │   └── features/   # 功能组件
│   │   │   ├── pages/          # 页面组件
│   │   │   ├── hooks/          # 自定义 Hooks
│   │   │   ├── stores/         # Zustand stores
│   │   │   ├── lib/            # 工具函数
│   │   │   ├── types/          # TypeScript 类型
│   │   │   └── adapters/       # 平台适配层
│   │   │       ├── tauri.ts    # Tauri 适配
│   │   │       └── web.ts      # Web API 适配
│   │   ├── package.json
│   │   └── vite.config.ts
│   │
│   ├── backend/                # Web 模式后端
│   │   ├── src/
│   │   │   ├── routes/         # API 路由
│   │   │   ├── services/       # CLI 调用封装
│   │   │   └── index.ts
│   │   └── package.json
│   │
│   └── tauri/                  # Tauri 桌面应用
│       ├── src/
│       │   ├── commands/       # Tauri commands
│       │   └── main.rs
│       ├── Cargo.toml
│       └── tauri.conf.json
│
├── package.json                # Monorepo 根配置
├── pnpm-workspace.yaml
└── README.md

4.4 API 设计

Web API (Backend)

// 系统检测
GET  /api/system/detect
Response: {
  nodejs: { installed: boolean, version: string },
  npm: { installed: boolean, version: string },
  openclaw: { installed: boolean, version: string, configPath: string }
}

// 网关
GET  /api/gateway/status
POST /api/gateway/start
POST /api/gateway/stop
POST /api/gateway/restart

// 配置
GET  /api/config
POST /api/config
GET  /api/config/:path    # 获取特定配置项
POST /api/config/:path    # 设置特定配置项

// 通道
GET  /api/channels
POST /api/channels
DELETE /api/channels/:id

// 模型
GET  /api/models
POST /api/models/default
POST /api/models/auth

// 技能
GET  /api/skills
GET  /api/skills/search?q=xxx
POST /api/skills/install
POST /api/skills/uninstall

// 代理
GET  /api/agents
POST /api/agents
DELETE /api/agents/:id

// 日志
GET  /api/logs?lines=100
WebSocket /api/logs/stream

Tauri Commands (Desktop)

// 对应相同功能,通过 Tauri IPC 调用
#[tauri::command]
fn detect_system() -> SystemInfo;

#[tauri::command]
fn get_gateway_status() -> GatewayStatus;

#[tauri::command]
fn start_gateway() -> Result<(), String>;

// ... 其他命令类似

五、风险与备选方案

5.1 技术风险

风险 影响 缓解方案
Tauri 在某平台打包失败 保留 Electron 作为备选,Web 版本始终可用
CLI 输出格式变化 使用 --json 输出 + 版本检测
某些 Channel 登录需要 GUI 引导用户到浏览器完成登录
Web 版本安全限制 文件操作需通过后端代理

5.2 备选技术栈

如果 Tauri 遇到问题:

  • Electron + React - 更成熟,但体积大
  • Flutter - 跨平台一致性好
  • 纯 Web 版 - 部署到服务器,用户通过浏览器访问

六、已确认事项

事项 决定
目标用户 新手为主,界面简洁友好
开发模式 Web + Desktop 双模式,Web 用于快速测试
接管功能 支持接管现有 OpenClaw 安装
离线文档 文档中心支持离线查看
多实例 支持管理多个 OpenClaw 实例
品牌名称 龙虾管家 (OpenClaw Manager)
Logo 使用占位符,预留品牌规范位置
本地模型 后续版本开发
发布渠道 待定

七、下一步

确认以上计划后,我将:

  1. 初始化项目代码结构(Monorepo)
  2. 搭建双模式架构
  3. 实现 Phase 0 (基础架构)
  4. 逐步推进各阶段开发

准备好开始了吗? 🦞