Skip to content

feat: Admin UI 全面增强 — Bot 详情页 + 6 个管理 Tab#5

Open
acvnace wants to merge 11 commits intofastclaw-ai:devfrom
acvnace:my/admin-ui-enhancement
Open

feat: Admin UI 全面增强 — Bot 详情页 + 6 个管理 Tab#5
acvnace wants to merge 11 commits intofastclaw-ai:devfrom
acvnace:my/admin-ui-enhancement

Conversation

@acvnace
Copy link
Copy Markdown

@acvnace acvnace commented Apr 5, 2026

概述

大幅增强 Admin UI,从仅有 Apps/Bots 列表页扩展为完整的 Bot 管理平台。新增 Bot 详情页(含 6 个功能 Tab),覆盖所有现有 API 端点。

主要变更

后端(Go)

安全修复:

  • 修复 skill_update.gobot_channel_wechat.go 中的 heredoc shell 注入漏洞,改用 stdin 安全写入(ExecInPodWithStdin
  • 列表 API 返回中隐藏敏感 token(access_token / api_token

Admin API 补全:

  • 新增 GET /admin/bots/:id(单个 Bot 详情)
  • 新增 POST /admin/bots/:id/restart(单个 Bot 重启)
  • Admin token 跳过 BotOwnerAuth 所有权检查,Admin UI 可直接调用所有 Bot 子资源端点
  • 将 channels/skills/models/devices/config 等子资源路由全部挂载到 admin 路由组
  • Admin Start Bot 超时从 120s 调整为 300s(适配大镜像启动时间)

前端(Next.js / React)

基础设施:

  • 引入 @tanstack/react-query 进行数据获取和缓存管理
  • 重构 API Client,支持 admin + bot 双路径(adminReq / botReq),新增 40+ API 函数
  • 添加 dev 模式 proxy rewrite,支持 next dev 直连 Go 后端开发
  • 提取共享组件:ConfirmDialogStatusBadgeErrorBoundaryQueryProvider
  • SiteHeader 支持动态面包屑导航

Bot 详情页(/bots/?id=xxx):

  • Overview Tab — 状态/连接/配置三卡片、快速操作(Start/Stop/Restart/Upgrade)、Edit/Reset Token 弹窗、5s 自动轮询 starting 状态
  • Channels Tab — 7 平台 IM 渠道管理(Telegram/Discord/Slack/Feishu/Teams/LINE/WeChat),动态表单字段,DM/Group 策略配置,Channel Pairing 配对管理(审批/撤销),WeChat QR 码扫码登录
  • Skills Tab — Skill 列表/创建/编辑/删除,Markdown 内容编辑器
  • Models Tab — Model Provider CRUD(支持 API 返回 object 格式),Agent Defaults 主/备模型配置
  • Devices Tab — Pending/Paired 设备筛选,批准/撤销设备配对
  • Config Tab — JSON 代码编辑器(语法高亮、深色主题),Format/Copy/Wrap 工具栏,Merge/Replace 模式切换,实时 JSON 校验

Bots 列表页改进:

  • Bot 名称可点击跳转到详情页
  • 显示 App 名称替代截断的 App ID
  • 表头 "App ID" → "App"

文件变更

  • 后端:7 个 Go 文件修改(+246/-34 行)
  • 前端:18 个文件新增/修改(+4293/-72 行)
  • 新增依赖:@tanstack/react-query@uiw/react-textarea-code-editorqrcode

测试计划

  • Apps 页面 CRUD 功能正常,token 列表中不再暴露
  • Bots 列表显示 App 名称,点击跳转到详情页
  • Bot 详情页 Overview:Start/Stop/Restart/Upgrade/Edit/Reset Token
  • Bot 详情页 Channels:添加/删除渠道,Pairing 配对管理,WeChat QR 登录
  • Bot 详情页 Skills:创建/编辑/删除 Skill
  • Bot 详情页 Models:Provider CRUD,Agent Defaults 保存
  • Bot 详情页 Devices:Pending/Paired 筛选,Approve/Revoke
  • Bot 详情页 Config:JSON 编辑器加载/保存/格式化/校验
  • next build 静态导出正常
  • go build 编译通过
  • go vet 无警告

🤖 Generated with Claude Code

acvnace and others added 11 commits April 5, 2026 20:26
Security fixes:
- Fix shell command injection via heredoc in skill_update.go and
  bot_channel_wechat.go by using stdin-based file writing (ExecInPodWithStdin)
- Redact access_token and api_token from list API responses
- Add ContextKeyIsAdmin to auth middleware for admin bypass

New endpoints:
- GET /admin/bots/:id — single bot detail
- POST /admin/bots/:id/restart — single bot restart

Admin API expansion:
- Mount all bot sub-resource routes (skills, channels, channel pairing,
  WeChat, devices, model providers, agent defaults, raw config) under
  /admin/bots/:id/ with BotOwnerAuth middleware that skips ownership
  check for admin-authenticated requests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add @tanstack/react-query for data fetching with QueryProvider
- Refactor API client with dual base paths (adminReq/botReq) and
  all bot sub-resource endpoints (skills, channels, devices, models,
  config, WeChat, pairing)
- Add dev proxy rewrite in next.config.ts for local development
  (conditionally disables output:export in dev mode)
- Extract shared components: ConfirmDialog, StatusBadge, ErrorBoundary
- Update SiteHeader with dynamic breadcrumbs for bot detail page
- Add getErrorMessage utility and typed ApiResponse interface

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New BotDetail component with tabbed layout (Overview active,
  Channels/Skills/Models/Devices/Config placeholder tabs)
- Overview tab: status/connection/config info cards, quick actions
  (start/stop/restart/upgrade), edit dialog, token reset
- Auto-refresh bot status every 5s when in "starting" state
- Query-param routing: /bots/?id=xxx renders detail view
- Bots list: rows now clickable, show app name instead of truncated ID
- Uses React Query for data fetching with cache invalidation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace router.push() with native <a> for back navigation to avoid
query params being preserved in static export mode. Use
history.replaceState for tab switching to avoid full page reload.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
OpenClaw image is 3.7GB and has a 60s readiness probe delay,
causing the 120s WaitForPodReady timeout to expire before the
pod becomes ready. This resulted in bots being marked as error
even though the pod was actually starting successfully.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Check connectInfo.ready before rendering ws_url/webchat_url fields.
Show "Waiting for bot to be ready..." when connect info exists but
ready is false. Use ternary instead of && for stricter falsy checks.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… config)

Models Tab:
- Model providers CRUD (add/edit/delete with dialog forms)
- Agent defaults configuration (primary/fallback model)

Channels Tab:
- Add/remove IM channels (Telegram, Discord, Slack, Feishu, Teams, LINE)
- Dynamic form fields per channel type with policy settings
- WeChat note directing to QR login flow

Skills Tab:
- List/create/edit/delete bot skills with markdown content editor

Devices Tab:
- Pending/Paired device filtering with nested tabs
- Approve pending devices, revoke paired devices

Config Tab:
- Raw JSON config editor with merge/replace mode toggle
- JSON validation before save, reset from server

All tabs use React Query for data fetching, show "bot must be running"
guard when applicable, and follow existing component patterns.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The listModelProviders API returns { providerName: config } object,
not an array. Normalize to ModelProvider[] in the query function.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…editor

Channels Tab:
- Add "Manage Pairing" expandable section per channel card with
  approve-by-code, pending requests list, and paired users list
- Add WeChat QR login flow with QR code display and auto-polling
- Add "WeChat Login" button in header alongside "Add Channel"

Config Tab:
- Replace plain textarea with @uiw/react-textarea-code-editor
  (dark theme, JSON syntax highlighting, line count)
- Add toolbar: Format JSON, Copy, Word Wrap toggle
- Add VS Code-style status bar showing line count and validation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
OpenClaw requires allowFrom=["*"] when dmPolicy or groupPolicy is
"open", otherwise config validation fails with an error.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The WeChat API returns a webpage URL, not an image. Use the qrcode
library to generate a QR code data URL from the login URL so it
renders correctly in the img tag.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant