feat: add dashboard and simplify deployment tasks

Author: 15367279252qq.com

.github/workflows/docs-pages.yml

@@ -6,8 +6,8 @@ on:
       - main
     paths:
       - "docs/**"
-      - "package.json"
-      - "package-lock.json"
+      - "deno.json"
+      - "deno.lock"
       - ".github/workflows/docs-pages.yml"
   workflow_dispatch:
 
@@ -28,19 +28,13 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup Deno
+        uses: denoland/setup-deno@v2
         with:
-          node-version: 20
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
+          deno-version: v2.x
 
       - name: Build docs
-        env:
-          NODE_ENV: production
-        run: npm run docs:build
+        run: deno task docs build
 
       - name: Setup Pages
         uses: actions/configure-pages@v5

CHANGELOG.md

@@ -2,6 +2,98 @@
 
 ## [Unreleased]
 
+## [1.0.10] - 2026-05-22
+
+### Dashboard 工程化
+
+- 新增独立 `dashboard/` 前端工程，使用 React、Vite、TypeScript 和 Tailwind CSS
+  构建运行看板，不再使用原来的内联 HTML 作为主实现。
+- Dashboard 固定挂载到 `/dashboard`，本地服务、Docker 镜像和 Cloudflare Worker
+  使用同一套构建产物。
+- 新增 API key 登录页，密钥仅保存在浏览器 `sessionStorage`，后续请求通过
+  `Authorization: Bearer <key>` 调用后端 API。
+- 首页展示运行环境、健康状态、脱敏配置摘要、最近运行和当前存储 / workflow
+  状态，便于快速判断部署是否可用。
+- 运行列表支持状态筛选、手动刷新和自动刷新；运行详情展示步骤时间线、状态、耗时、
+  attempt、错误信息、summary 和产物列表。
+- Artifact 面板支持 HTML、JSON、文本和图片预览，所有产物仍通过认证 API 读取，
+  不直接公开本地目录或 R2 bucket。
+- 触发任务弹窗默认执行 dry-run；真实发布必须勾选确认并发送
+  `forcePublish: true`，降低误发布风险。
+
+### API 与服务端
+
+- 本地服务新增 `GET /api/health`，与 Cloudflare Worker 健康检查接口保持一致。
+- 新增 `GET /api/config/summary`，仅返回脱敏后的运行配置摘要，不暴露 provider
+  secret。
+- 本地服务新增 dashboard 静态资源托管。存在 `dist/dashboard`
+  时直接读取；缺少构建产物时返回提示页。
+- Cloudflare Worker 新增 Workers Static Assets 支持，`/dashboard` 和
+  `/dashboard/*` 直接托管前端资源，`/api/*` 继续走 Worker 后端逻辑。
+- Cloudflare Worker 同步支持 `/api/config/summary`，Dashboard 在本地、Docker 和
+  Cloudflare 下使用一致 API。
+- 微信文章 workflow 识别 `forcePublish`，Dashboard 二次确认后可以覆盖默认
+  dry-run 配置并创建微信公众号草稿。
+
+### 部署体验
+
+- Dockerfile 在镜像构建阶段自动构建 dashboard，GHCR
+  镜像内置控制台，部署后可直接访问 `/dashboard`。
+- `wrangler.jsonc` 增加 Workers Static Assets 绑定，Cloudflare 部署会同时上传
+  dashboard 静态资源。
+- `deno task cf dry-run` 和 `deno task cf deploy` 会自动先构建 dashboard，再执行
+  Wrangler 打包或部署。
+- 文档站构建改为 Deno 直接驱动 VitePress，GitHub Pages workflow 不再依赖
+  Node/npm 安装步骤。
+- 删除 `package.json` 和 `package-lock.json`，项目命令、文档站、Dashboard 和
+  Wrangler 入口统一由 Deno task / npm compatibility 执行。
+- 微信 relay 继续支持源码运行、Docker 运行和 systemd 保活安装；systemd 模板和
+  compose 配置统一使用新的 `deno task relay` 入口。
+
+### 命令行体验
+
+- 新增基于 `@cliffy/command` 的统一任务入口 `scripts/task-runner.ts`。
+- 任务入口由声明式命令树维护，不再手写 if/else 分发。
+- 精简 `deno task` 公共命令，只保留日常入口：`dev`、`doctor`、`verify`、`test`、
+  `article`、`preview`、`relay`、`docker`、`cf`、`build`、`dashboard`、`docs`。
+- 将大量重复别名收敛为参数式子命令：
+  - `deno task article --dry-run`
+  - `deno task docker logs`
+  - `deno task docker relay`
+  - `deno task docker relay logs`
+  - `deno task cf dry-run`
+  - `deno task cf migrate`
+  - `deno task cf deploy`
+  - `deno task relay install`
+  - `deno task relay systemd`
+  - `deno task docs build`
+  - `deno task dashboard build`
+- 暂时保留 `deno task weixin:relay` 作为兼容别名，避免已经安装的旧 systemd
+  服务立即失效。
+
+### 文档
+
+- 重写 README 常用命令和部署说明，突出 Deno-only、Docker、Cloudflare、relay 和
+  dashboard 的推荐入口。
+- 更新 `docs/deployment.md`，补充 Docker 推荐部署和 Cloudflare dashboard
+  静态资源说明。
+- 补充 relay 源码部署、Docker 部署、systemd 保活安装，以及新的参数式命令。
+- 更新快速开始、配置说明、帮助文档和 JSON-RPC API 文档，统一使用
+  `deno task article --dry-run`、`deno task cf deploy` 等新命令。
+- 文档中不再推荐 npm 命令、旧 `article:dry`、旧 `cf:*`、旧 `docker:*` 或旧
+  `relay:*` 任务。
+
+### 验证
+
+- 已通过 `deno task verify`：格式检查、lint、后端类型检查、dashboard 类型检查、
+  dashboard 生产构建和 78 个测试全部通过。
+- 已通过 `deno task doctor`：当前配置 0 个失败，提醒项仅为 Cloudflare
+  绑定、通知渠道、未启用向量去重。
+- 已通过 `deno task docs build`：VitePress 文档站可以正常构建。
+- 已通过 `deno task cf dry-run`：Wrangler 能识别 Worker、Workflow、KV、D1 和
+  Workers Static Assets 绑定。沙箱环境下 Wrangler 写本地日志会出现 EPERM 提示，
+  但 dry-run 打包本身成功。
+
 ## [1.0.9] - 2026-05-21
 
 ### 架构与配置

Dockerfile

@@ -7,6 +7,7 @@ ENV TRENDPUBLISH_RUNTIME=docker
 ENV TRENDPUBLISH_CONFIG=/app/config/trendpublish.config.ts
 
 COPY deno.json deno.lock ./
+COPY dashboard ./dashboard
 COPY src ./src
 COPY scripts ./scripts
 COPY migrations ./migrations
@@ -15,6 +16,7 @@ COPY trendpublish.config.docker.example.ts ./trendpublish.config.docker.example.
 COPY trendpublish.config.cloudflare.ts ./trendpublish.config.cloudflare.ts
 COPY wrangler.jsonc ./wrangler.jsonc
 
+RUN deno run --config dashboard/deno.json -A npm:vite@8.0.13 build --config dashboard/vite.config.ts
 RUN deno cache src/index.ts src/apps/weixin-relay/server.ts scripts/run.workflow.ts scripts/doctor.ts scripts/preview.weixin.ts
 RUN mkdir -p /app/config /app/src/temp \
   && ln -s /app/src /app/config/src \

README.md

@@ -115,13 +115,14 @@ deno task doctor
 deno task preview
 
 # 跑一次微信文章流程，不上传、不发布
-deno task article:dry
+deno task article --dry-run
 
 # 启动服务和定时任务
 deno task dev
 ```
 
-`article:dry` 会把渲染后的 HTML 输出到 `src/temp/`，适合正式发布前检查正文效果。
+`article --dry-run` 会把渲染后的 HTML 输出到
+`src/temp/`，适合正式发布前检查正文效果。
 
 ## 配置原则
 
@@ -288,58 +289,25 @@ features: {
 ## 常用命令
 
 ```bash
-# 配置体检
+# 日常使用
 deno task doctor
+deno task dev
+deno task article --dry-run
+deno task article
+deno task preview
 
-# 格式化、lint、类型检查和单元测试
+# 质量检查
 deno task verify
-
-# 只运行单元测试
 deno task test
 
-# 本地模板预览
-deno task preview
-
-# 微信文章 dry-run
-deno task article:dry
-
-# 正式执行微信文章工作流
-deno task article
-
-# Docker 本地开发构建
-deno task docker:build
-
-# 固定 IP 机器上的微信发布中转服务
-deno task weixin:relay
+# 本地服务
+deno task dashboard
+deno task docs
 
-# 一键安装 relay 为 systemd 保活服务
-deno task relay:install --config ./config/trendpublish.config.ts --port 8080
-
-# 生成 relay 的 systemd 保活服务文件
-deno task relay:systemd
-
-# Cloudflare Worker/Workflow 类型检查
-deno task cf:check
-
-# Cloudflare 打包 dry-run，不真正部署
-deno task cf:dry-run
-
-# Cloudflare 本地 D1 migration + 本地 Worker
-deno task cf:migrate:local
-deno task cf:dev
-
-# Cloudflare 远端 D1 migration + 部署
-deno task cf:migrate:remote
-deno task cf:deploy
-
-# 部署后健康检查和 dry-run 冒烟
-deno task cf:smoke --url https://your-worker.workers.dev --api-key your-api-key
-
-# 编译当前平台二进制
-deno task build
-
-# 编译全部平台
-deno task build:all
+# 部署
+deno task docker
+deno task relay
+deno task cf deploy
 ```
 
 ## 项目结构
@@ -364,7 +332,7 @@ src/
 
 ```bash
 deno task doctor
-deno task article:dry
+deno task article --dry-run
 deno task dev
 ```
 
@@ -377,22 +345,27 @@ docker compose up -d
 
 容器默认读取 `/app/config/trendpublish.config.ts`，通常把本地
 `./config/trendpublish.config.ts` 挂载进去即可。镜像由 GitHub Actions 自动构建，
-不需要在服务器上本地构建。
+不需要在服务器上本地构建。镜像内已经包含 dashboard 构建产物，启动后访问
+`http://localhost:8000/dashboard`。
 
 微信 relay 也是同一个镜像、同一个配置文件名，只是启动命令不同：
 
 ```bash
 cp trendpublish.config.example.ts config/trendpublish.config.ts
-deno task docker:relay:up
+deno task docker relay
 ```
 
 Cloudflare 提供 Worker / Workflows 原生入口，适合远程 HTTP 触发或 Cron
 定时发布。运行状态写入 KV/D1，文章产物和 dry-run HTML 写入 R2 或 KV
 fallback，并可通过 `/dashboard` 查看步骤、错误和产物。部署后可以用
-`deno task cf:smoke` 检查 `/api/health`、创建一次 dry-run
+`deno task cf smoke` 检查 `/api/health`、创建一次 dry-run
 Workflow，并轮询到最终结果。Cloudflare 真实发布 建议调用固定 IP 机器上的
 `weixin-relay`，避免微信 IP 白名单问题。
 
+源码部署时，`deno task dev`、`deno task cf dry-run` 和 `deno task cf deploy`
+都会自动构建 dashboard。Cloudflare 部署会把 dashboard 作为 Workers Static Assets
+发布。
+
 正式发布微信公众号前，需要：
 
 1. 本地/Docker 直连发布：配置 `providers.publish.weixin.appId` 和

dashboard/deno.json

@@ -0,0 +1,17 @@
+{
+  "nodeModulesDir": "auto",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "npm:react@19.2.6",
+    "lib": ["dom", "dom.iterable", "esnext"]
+  },
+  "imports": {
+    "@tailwindcss/vite": "npm:@tailwindcss/vite@4.3.0",
+    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@6.0.2",
+    "lucide-react": "npm:lucide-react@^0.561.0",
+    "react": "npm:react@19.2.6",
+    "react-dom/client": "npm:react-dom@19.2.6/client",
+    "tailwindcss": "npm:tailwindcss@4.3.0",
+    "vite": "npm:vite@8.0.13"
+  }
+}

dashboard/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TrendPublish Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>