From 1863e864e84eb5da696fa2c58be526308afcfbe0 Mon Sep 17 00:00:00 2001 From: Codebuddy Date: Mon, 17 Aug 2026 10:10:52 +0800 Subject: [PATCH] =?utf8?q?feat:=20=E5=B8=AE=E5=8A=A9=E9=A1=B5=E6=94=B9?= =?utf8?q?=E7=89=88=EF=BC=88=E8=A7=84=E6=A0=BC=E9=A3=8E=E6=A0=BC+=E4=BE=A7?= =?utf8?q?=E8=BE=B9=E7=9B=AE=E5=BD=95+MD=E4=B8=8B=E8=BD=BD=EF=BC=8C?= =?utf8?q?=E7=A7=BB=E9=99=A4FAQ=EF=BC=89=EF=BC=9B=E4=B8=8A=E4=BC=A0?= =?utf8?q?=E4=B8=8A=E9=99=90=E7=BB=9F=E4=B8=80=E6=8F=90=E5=8D=87=E8=87=B32?= =?utf8?q?0MB?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- backend/app.py | 2 +- frontend/help.html | 550 ++++++++++++++++++++++++++++++++------------ frontend/index.html | 6 +- 3 files changed, 407 insertions(+), 151 deletions(-) diff --git a/backend/app.py b/backend/app.py index b9bb272..1d88ed9 100644 --- a/backend/app.py +++ b/backend/app.py @@ -734,7 +734,7 @@ async def api_kill(pid: int, request: Request): # 前端把粘贴的截图 POST 到这里，后端存盘后返回绝对路径 # 前端再把 路径 当作输入发到 CLI PASTES_DIR = Path(__file__).resolve().parent.parent / "data" / "pastes" -MAX_UPLOAD_SIZE = 5 * 1024 * 1024 # 5MB（粘贴栏上传上限：图片/视频/zip/任意格式） +MAX_UPLOAD_SIZE = 20 * 1024 * 1024 # 20MB（粘贴栏上传上限：图片/视频/zip/任意格式，统一上限） _MIME_EXT = {"image/png": "png", "image/jpeg": "jpg", "image/jpg": "jpg", "image/gif": "gif", "image/webp": "webp", "image/bmp": "bmp"} diff --git a/frontend/help.html b/frontend/help.html index dc41b66..3793b63 100644 --- a/frontend/help.html +++ b/frontend/help.html @@ -5,167 +5,423 @@ Codebuddy Web Console · 设计说明 -
-
-
-

Codebuddy Web Console · 设计说明

-
通过浏览器远程使用 Codebuddy CLI 的 Web 控制台 · 多会话 / 全局技能 / 文件上传 / 移动端适配
-
- -
- -

一、整体架构

- - -

二、页面与功能

- -
-

1. 登录页

-
    -
  • 输入访问密码进入控制台(密码保存在浏览器 localStorage)。
    • -
-
-
-

2. 任务列表页(首页)

-

默认展示“启用中”的任务,可勾选“显示全部任务”查看包括已暂停的全部任务。

-

左侧 · 技能侧边栏(🧩 技能 全局)

-
    -
  • 上传:选择 skill 的 zip(须以单个 skill 目录为顶层,内含 SKILL.md),上传后对所有会话全局可见。
    • -
  • 技能列表卡片:每张卡片提供 更新编辑加载删除。 -
      -
    • 更新:用新 zip 覆盖同名 skill(按 zip 内声明名匹配,避免产生重复目录)。
      • -
    • 编辑:直接修改 SKILL.md 内容。
      • -
    • 加载:选择“运行中的会话”注入热加载通知(可多选,或一键“全部运行中的会话”);若无运行会话则技能已全局就位,下次打开自动发现。
      • -
    • 删除:移除该全局 skill。
      • -
    + + +
    +
-

主区 · 任务卡片

-
    -
  • 展示:任务名、工作目录、状态、最近使用时间。
    • -
  • 状态指示:● 前台已登录⚙ 后台运行中⏸ 后台等待中⏳ 后台任务待确认⏸ 已暂停○ 空闲。
    • -
  • 操作:打开终端、重启会话、暂停/恢复、删除(可同时删除历史会话记录与工作目录)。
    • -
-

列表页每 5 秒自动刷新一次,实时反映各会话状态。

-
+
  • 终端页 +
      +
    1. 顶部操作栏
      2. +
    2. 终端输出区
      3. +
    3. 粘贴弹窗
      4. +
    4. 技能弹窗
      5. +
    +
    • +
  • 已上传文件弹窗
    • +
  • 移动端适配
    • +
  • 快捷操作
    • + + -
    -

    3. 终端页(/?task=<ID>)

    -

    顶部栏

    -
      -
    • 连接状态指示灯 + 文本、任务名、工作目录。
      • -
    • 模型切换下拉(切换后重启会话以应用)。
      • -
    • 按钮:↻ 重启会话≡ 列表📋 粘贴🧩 技能❓ 帮助✕ 关闭。
      • -
    -

    终端输出区(xterm)

    -
      -
    • 实时显示 CLI 输出;新输出自动滚动贴底。
      • -
    • 手动上滑查看历史时,右下角出现 ↓ 回到底部 按钮,点击即回到最新。
      • -
    -

    粘贴框(📋)

    -
      -
    • 文本直接输入;Ctrl+Enter 发送到终端输入行(不自动提交,需自行回车)。
      • -
    • 📎 附件:支持上传 图片 / 视频 / zip / 任意格式 文件,单文件上限 5MB。
      • -
    • 待发送文件以 chip 展示(图标区分 🖼 图片 / 🎬 视频 / 📦 压缩包 / 📄 其他)。
      • -
    • 发送规则:图片包装为 <image_local_path>路径</image_local_path>;其它文件发送其本地路径文本,供命令行引用。
      • -
    • 粘贴框内“已上传文件”区:列出本次/历史上传文件,可单独删除。
      • -
    -

    技能弹窗(🧩,终端页内)

    -
      -
    • 功能与列表页左侧技能侧边栏一致(上传/更新/编辑/加载/删除)。
      • -
    -
    +
    +
    +
    +

    Codebuddy Web Console · 设计说明

    +
    通过浏览器远程使用 Codebuddy CLI 的 Web 控制台 — 多会话 / 全局技能 / 文件上传 / 移动端适配
    +
    + + +
    -
    -

    4. 已上传文件弹窗

    -

    从列表页「📂 已上传文件」按钮打开,以表格管理所有上传文件:

    - - - - - - - - - - -
    列说明
    选择框每行可勾选;表头“全选”一键勾选全部。
    文件名服务端存储的文件名。
    上传时间文件写入时间(本地时间)。
    所属会话任务上传时所在的终端会话名;历史文件(升级前上传)显示 —。
    文件类型按扩展名/格式显示,如 .png / .zip / .mp4。
    操作单条“删除”。
    -
      -
    • 批量删除:勾选多个后点“删除所选”(带二次确认)。
      • -
    • 删除同时从服务端磁盘移除文件,并清理其会话归属索引。
      • -
    -
    +
    -

    三、移动端(iPad / 手机)适配

    -
      -
    • 顶栏固定:顶部菜单栏锁定在视口顶部,不随页面滚动;整页只有终端区内部滚动。
      • -
    • 键盘适配:软键盘弹起时,终端区自动缩小到键盘上方,输入内容始终可见。
      • -
    • 自动滚动:CLI 新输出自动贴底,无需手动下拉。
      • -
    • 标签页标题:浏览器标签页显示为 会话名 - CLI(如 Words - CLI),便于多标签区分。
      • -
    • 安全区域:适配刘海与底部指示条(env(safe-area-inset))。
      • -
    - -

    四、快捷操作

    -
      -
    • Ctrl+Enter:在粘贴框发送内容。
      • -
    • Esc:关闭弹窗(粘贴框 / 技能框 / 已上传文件框)。
      • -
    • 多会话选择 + “全部运行中的会话”:一键把 skill 热加载到多个会话。
      • -
    - -

    五、常见问题

    -
    - Q:上传视频/zip 提示不支持或过大?
    - 服务端已内置“任意格式 + 5MB”支持;若仍报错,多为服务端尚未重启生效,重启 codebuddy-web.service 即可。 -
    -
    - Q:已上传文件的“所属会话任务”是空/—?
    - 仅“升级后、从终端页新上传”的文件会记录所属会话;升级前上传的历史文件因当时未记录归属,故显示 —,无法反查。 -
    +

    整体架构

    +
      +
    • 后端：FastAPI + WebSocket PTY。每个「任务」对应一个独立运行的 codebuddy CLI 进程，经由 PTY 与前端双向通信。
      • +
    • 前端：单文件原生 HTML（无前端框架）。通过 URL 参数区分页面：/ 为任务列表页，/?task=<任务ID> 为对应任务的终端页。
      • +
    • 技能：存储于全局目录 ~/.codebuddy/skills。上传后对所有会话可见；运行中的会话可「热加载」即时生效，否则下次打开会话时由 codebuddy 自动发现。
      • +
    • 上传文件：统一存于服务端的 data/pastes/ 目录，并在「已上传文件」面板中集中管理（含所属会话关联）。
      • +
    • 鉴权：通过访问密码进入，令牌保存于浏览器 localStorage，后续请求经请求头携带。
      • +
    + +

    登录页

    +
      +
    • 密码输入框：聚焦态自动获得焦点；输入访问密码。
      • +
    • 进入控制台：提交密码进行鉴权；成功后进入任务列表页，并将令牌写入 localStorage 以便后续自动携带。
      • +
    • 错误提示：鉴权失败时显示错误文案，不写入令牌。
      • +
    + +

    任务列表页

    + +

    页面头部

    +
      +
    • 标题与计数：显示「任务清单」及当前筛选下的任务数量、暂停数量统计。
      • +
    • 显示全部任务（复选框）：默认仅列出「启用中」任务；勾选后展示包含已暂停的全部任务。
      • +
    • ❓ 帮助：新标签页打开本设计说明（/help）。
      • +
    • 退出登录：清除本地令牌并返回登录页。
      • +
    + +

    技能侧边栏（🧩 技能 · 全局）

    +
      +
    • 上传：选择 skill 的 zip（须以单个 skill 目录为顶层，内含 SKILL.md），上传后对所有会话全局可见。
      • +
    • 技能列表卡片：每张卡片提供 更新编辑加载删除。 +
        +
      • 更新：用新 zip 覆盖同名 skill（按 zip 内声明名匹配，避免产生重复目录）。
        • +
      • 编辑：直接修改 SKILL.md 内容并保存。
        • +
      • 加载：选择「运行中的会话」注入热加载通知（可多选，或勾选「全部运行中的会话」）；若无运行会话则技能已全局就位，下次打开自动发现。
        • +
      • 删除：移除该全局 skill。
        • +
      +
      • +
    • 📂 已上传文件：打开「已上传文件」管理弹窗（见第 5 节）。
      • +
    + +

    任务卡片区

    +
      +
    • 卡片字段：任务名、工作目录、最近使用时间、实时状态。
      • +
    • 状态指示：● 前台已登录⚙ 后台运行中⏸ 后台等待中⏳ 后台任务待确认⏸ 已暂停○ 空闲。
      • +
    • 进入：打开该任务的终端页（/?task=<ID>）。
      • +
    • 暂停 / 恢复：运行中显示「暂停」（⏸），已暂停显示「恢复」（▶）；暂停后需满 24 小时才允许删除。
      • +
    • 删除（✕）：仅对暂停满 24 小时的任务出现，触发删除确认弹窗。
      • +
    • ＋ 新建任务：输入新任务名称（将作为 /home/<名称> 工作目录）以创建会话。
      • +
    +

    列表页每 5 秒自动刷新一次，实时反映各会话状态。

    + +

    删除确认弹窗

    +
      +
    • 二次确认后方可删除；「确认删除」按钮初始禁用，需勾选至少一项附加操作后才可点击。
      • +
    • 同时删除历史会话：勾选后清理对话记录。
      • +
    • 同时删除工作目录：勾选后移除 /home/<名称> 目录（显示其路径供核对）。
      • +
    + +

    终端页

    + +

    顶部操作栏

    +
      +
    • 连接状态：状态指示灯 + 文本，反映当前 PTY 连接状态。
      • +
    • 任务名 / 工作目录：显示当前会话标识。
      • +
    • 模型切换下拉：切换后重启会话以应用新模型。
      • +
    • ↻ 重启会话：重启当前 PTY 并续接上次历史。
      • +
    • ≡ 列表：返回任务列表页。
      • +
    • 📋 粘贴：打开粘贴弹窗。
      • +
    • 🧩 技能：打开技能弹窗（同列表页技能侧栏功能）。
      • +
    • ❓ 帮助：新标签页打开本设计说明。
      • +
    • ✕ 关闭：关闭窗口。
      • +
    + +

    终端输出区（xterm）

    +
      +
    • 实时显示 CLI 输出；新输出默认自动滚动贴底。
      • +
    • 手动上滑查看历史时，右下角出现 ↓ 回到底部 按钮，点击即回到最新输出。
      • +
    + +

    粘贴弹窗（📋）

    +
      +
    • 文本输入：直接输入；Ctrl+Enter 发送到终端输入行（不自动提交，需自行回车）。
      • +
    • 📎 附件：支持上传 图片 / 视频 / zip / 任意格式 文件，单文件上限 20MB。
      • +
    • ✕ 清空：清空当前输入与待发送文件。
      • +
    • 发送：将文本与待发送文件一并提交。
      • +
    • 待发送文件 chip：图标区分 🖼 图片 / 🎬 视频 / 📦 压缩包 / 📄 其他。
      • +
    • 发送规则：图片包装为 <image_local_path>路径</image_local_path>；其它文件发送其本地路径文本，供命令行引用。
      • +
    • 已上传文件区：列出历史/本次上传文件，可单独删除；⟳ 按钮刷新列表。
      • +
    -
    - Codebuddy Web Console · 设计说明(随仓库 frontend/help.html 提供) · 在应用内点「❓ 帮助」可随时打开 -
    +

    技能弹窗（🧩，终端页内）

    +
      +
    • 功能与列表页左侧技能侧边栏一致：上传 / 更新 / 编辑 / 加载 / 删除。
      • +
    + +

    已上传文件弹窗

    +

    从列表页「📂 已上传文件」按钮打开，以表格管理所有上传文件：

    + + + + + + + + + + +
    列说明
    选择框每行可勾选；表头「全选」一键勾选全部。
    文件名服务端存储的文件名。
    上传时间文件写入时间（本地时间）。
    所属会话任务上传时所在的终端会话名；历史文件（升级前上传）显示 —。
    文件类型按扩展名/格式显示，如 .png / .zip / .mp4。
    操作单条「删除」。
    +
      +
    • 删除所选：勾选多个后点击（带二次确认）；初始禁用，至少勾选一项后启用。
      • +
    • 删除同时从服务端磁盘移除文件，并清理其会话归属索引。
      • +
    + +

    移动端（iPad / 手机）适配

    +
      +
    • 顶栏固定：顶部菜单栏锁定在视口顶部，不随页面滚动；整页只有终端区内部滚动。
      • +
    • 键盘适配：软键盘弹起时，终端区自动缩小到键盘上方，输入内容始终可见。
      • +
    • 自动滚动：CLI 新输出自动贴底，无需手动下拉。
      • +
    • 标签页标题：浏览器标签页显示为 会话名 - CLI（如 Words - CLI），便于多标签区分。
      • +
    • 安全区域：适配刘海与底部指示条（env(safe-area-inset)）。
      • +
    + +

    快捷操作

    +
      +
    • Ctrl+Enter：在粘贴框发送内容。
      • +
    • Esc：关闭弹窗（粘贴框 / 技能框 / 已上传文件框）。
      • +
    • 多会话选择 + 「全部运行中的会话」：一键把 skill 热加载到多个会话。
      • +
    + +
    + Codebuddy Web Console · 设计说明（随仓库 frontend/help.html 提供） · 在应用内点「❓ 帮助」可随时打开 +
    +
    +
    + + diff --git a/frontend/index.html b/frontend/index.html index ab739c6..eeddea9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -845,12 +845,12 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh // 待发送的图片列表：[{path, name}] let pendingFiles = []; - // 上传任意文件到后端，返回 {path, name} 或抛错（上限 5MB） + // 上传任意文件到后端，返回 {path, name} 或抛错（上限 20MB） async function uploadFile(blob) { - const MAX = 5 * 1024 * 1024; + const MAX = 20 * 1024 * 1024; if (blob.size > MAX) { const mb = Math.round(blob.size / 1024 / 1024 * 10) / 10; - throw new Error('文件过大（' + mb + 'MB），上限 5MB'); + throw new Error('文件过大（' + mb + 'MB），上限 20MB'); } const sizeKB = Math.max(1, Math.round(blob.size / 1024)); const name = blob.name || ('文件_' + Date.now() + '.' + ((blob.type.split('/')[1]) || 'bin')); -- 2.43.0