From 943225cc7ff9a8e4bd34179420c4d9df52f12726 Mon Sep 17 00:00:00 2001 From: anghunk Date: Wed, 21 Jan 2026 13:30:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E6=B7=BB=E5=8A=A0=E8=AF=84?= =?UTF-8?q?=E8=AE=BA=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增数据看板页面，展示评论统计信息 - 添加 echarts 依赖用于数据可视化 - 实现后端统计接口，包括总数、按域名和最近7天数据 - 完善前端统计页面样式和交互 - 更新文档说明和版本更新指南 --- cwd-admin/package.json | 3 +- cwd-admin/src/api/admin.ts | 24 ++ cwd-admin/src/router/index.ts | 7 +- cwd-admin/src/views/DataView.vue | 66 ++++++ cwd-admin/src/views/LayoutView.vue | 12 + cwd-admin/src/views/StatsView.vue | 339 +++++++++++++++++++++++++++++ cwd-api/src/api/admin/getStats.ts | 133 +++++++++++ cwd-api/src/index.ts | 2 + docs/guide/update-version.md | 10 +- docs/index.md | 2 +- 10 files changed, 592 insertions(+), 6 deletions(-) create mode 100644 cwd-admin/src/views/StatsView.vue create mode 100644 cwd-api/src/api/admin/getStats.ts diff --git a/cwd-admin/package.json b/cwd-admin/package.json index 6f592c3..ae3e89c 100644 --- a/cwd-admin/package.json +++ b/cwd-admin/package.json @@ -12,7 +12,8 @@ }, "dependencies": { "vue": "^3.5.13", - "vue-router": "^4.4.5" + "vue-router": "^4.4.5", + "echarts": "^5.5.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.1.4", diff --git a/cwd-admin/src/api/admin.ts b/cwd-admin/src/api/admin.ts index e91e3f9..5d86a8c 100644 --- a/cwd-admin/src/api/admin.ts +++ b/cwd-admin/src/api/admin.ts @@ -62,6 +62,26 @@ export type EmailNotifySettingsResponse = { }; }; +export type CommentStatsResponse = { + summary: { + total: number; + approved: number; + pending: number; + rejected: number; + }; + domains: { + domain: string; + total: number; + approved: number; + pending: number; + rejected: number; + }[]; + last7Days: { + date: string; + total: number; + }[]; +}; + export async function loginAdmin(name: string, password: string): Promise { const res = await post('/admin/login', { name, password }); const key = res.data.key; @@ -160,3 +180,7 @@ export function exportComments(): Promise { export function importComments(data: any[]): Promise<{ message: string }> { return post<{ message: string }>('/admin/comments/import', data); } + +export function fetchCommentStats(): Promise { + return get('/admin/stats/comments'); +} diff --git a/cwd-admin/src/router/index.ts b/cwd-admin/src/router/index.ts index 55c5e4b..52dc22e 100644 --- a/cwd-admin/src/router/index.ts +++ b/cwd-admin/src/router/index.ts @@ -4,6 +4,7 @@ import LayoutView from '../views/LayoutView.vue'; import CommentsView from '../views/CommentsView.vue'; import SettingsView from '../views/SettingsView.vue'; import DataView from '../views/DataView.vue'; +import StatsView from '../views/StatsView.vue'; const routes: RouteRecordRaw[] = [ { @@ -24,6 +25,11 @@ const routes: RouteRecordRaw[] = [ name: 'comments', component: CommentsView }, + { + path: 'stats', + name: 'stats', + component: StatsView + }, { path: 'settings', name: 'settings', @@ -55,4 +61,3 @@ router.beforeEach((to, from, next) => { } next(); }); - diff --git a/cwd-admin/src/views/DataView.vue b/cwd-admin/src/views/DataView.vue index c8084fc..a4c256f 100644 --- a/cwd-admin/src/views/DataView.vue +++ b/cwd-admin/src/views/DataView.vue @@ -425,6 +425,72 @@ async function executeImport(comments: any[]) { font-size: 15px; } +.stats-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.stats-item { + padding: 10px 12px; + border-radius: 6px; + background-color: #f6f8fa; + border: 1px solid #d0d7de; +} + +.stats-label { + font-size: 12px; + color: #57606a; + margin-bottom: 4px; +} + +.stats-value { + font-size: 18px; + font-weight: 600; + color: #24292f; +} + +.stats-value-approved { + color: #1a7f37; +} + +.stats-value-pending { + color: #9a6700; +} + +.stats-value-rejected { + color: #d1242f; +} + +.domain-table { + border: 1px solid #d0d7de; + border-radius: 6px; + overflow: hidden; +} + +.domain-table-header { + display: flex; + background-color: #f6f8fa; +} + +.domain-table-row { + display: flex; + border-top: 1px solid #eaeae0; +} + +.domain-cell { + flex: 1; + padding: 8px 10px; + font-size: 13px; + color: #24292f; + box-sizing: border-box; +} + +.domain-cell-domain { + flex: 2; + font-weight: 500; +} + .card-desc { font-size: 14px; color: #57606a; diff --git a/cwd-admin/src/views/LayoutView.vue b/cwd-admin/src/views/LayoutView.vue index 7b7cb48..9c2525c 100644 --- a/cwd-admin/src/views/LayoutView.vue +++ b/cwd-admin/src/views/LayoutView.vue @@ -68,6 +68,13 @@ > 评论管理 +
  • + 数据看板 +
  • +
    +

    数据看板

    +
    + {{ toastMessage }} +
    + +
    +

    最近 7 天评论数趋势

    +
    加载中...
    +
    {{ statsError }}
    +
    +
    +
    +
    + +
    +

    整体概览

    +
    加载中...
    +
    {{ statsError }}
    +
    +
    +
    +
    总评论数
    +
    {{ statsSummary.total }}
    +
    +
    +
    已通过
    +
    {{ statsSummary.approved }}
    +
    +
    +
    待审核
    +
    {{ statsSummary.pending }}
    +
    +
    +
    已拒绝
    +
    {{ statsSummary.rejected }}
    +
    +
    +
    +
    + +
    +

    按域名统计

    +
    加载中...
    +
    {{ statsError }}
    +
    暂无评论数据
    +
    +
    +
    域名
    +
    总数
    +
    已通过
    +
    待审核
    +
    已拒绝
    +
    +
    +
    {{ item.domain }}
    +
    {{ item.total }}
    +
    {{ item.approved }}
    +
    {{ item.pending }}
    +
    {{ item.rejected }}
    +
    +
    +
    +
    + + + + + diff --git a/cwd-api/src/api/admin/getStats.ts b/cwd-api/src/api/admin/getStats.ts new file mode 100644 index 0000000..9cc3bbe --- /dev/null +++ b/cwd-api/src/api/admin/getStats.ts @@ -0,0 +1,133 @@ +import { Context } from 'hono'; +import { Bindings } from '../../bindings'; + +type StatusCounts = { + total: number; + approved: number; + pending: number; + rejected: number; +}; + +type DomainCounts = StatusCounts & { + domain: string; +}; + +function extractDomain(source: string | null | undefined): string | null { + if (!source) { + return null; + } + const value = source.trim(); + if (!value) { + return null; + } + if (!/^https?:\/\//i.test(value)) { + return null; + } + try { + const url = new URL(value); + return url.hostname.toLowerCase(); + } catch { + return null; + } +} + +export const getStats = async (c: Context<{ Bindings: Bindings }>) => { + try { + const summaryRow = await c.env.CWD_DB.prepare( + "SELECT COUNT(*) as total, SUM(CASE WHEN status = 'approved' THEN 1 ELSE 0 END) as approved, SUM(CASE WHEN status = 'pending' THEN 1 ELSE 0 END) as pending, SUM(CASE WHEN status = 'rejected' THEN 1 ELSE 0 END) as rejected FROM Comment" + ).first<{ + total: number | null; + approved: number | null; + pending: number | null; + rejected: number | null; + }>(); + + const summary: StatusCounts = { + total: summaryRow?.total || 0, + approved: summaryRow?.approved || 0, + pending: summaryRow?.pending || 0, + rejected: summaryRow?.rejected || 0 + }; + + const { results } = await c.env.CWD_DB.prepare( + 'SELECT post_slug, url, status FROM Comment' + ).all<{ + post_slug: string; + url: string | null; + status: string; + }>(); + + const domainMap = new Map(); + + for (const row of results) { + const domain = + extractDomain(row.post_slug) || extractDomain(row.url) || 'unknown'; + + let counts = domainMap.get(domain); + if (!counts) { + counts = { + total: 0, + approved: 0, + pending: 0, + rejected: 0 + }; + domainMap.set(domain, counts); + } + counts.total += 1; + if (row.status === 'approved') { + counts.approved += 1; + } else if (row.status === 'pending') { + counts.pending += 1; + } else if (row.status === 'rejected') { + counts.rejected += 1; + } + } + + const domains: DomainCounts[] = Array.from(domainMap.entries()) + .map(([domain, counts]) => ({ + domain, + total: counts.total, + approved: counts.approved, + pending: counts.pending, + rejected: counts.rejected + })) + .sort((a, b) => b.total - a.total); + + const now = Date.now(); + const sevenDaysAgo = now - 6 * 24 * 60 * 60 * 1000; + + const { results: dailyRows } = await c.env.CWD_DB.prepare( + "SELECT date(created / 1000, 'unixepoch') as day, COUNT(*) as total FROM Comment WHERE created >= ? GROUP BY day ORDER BY day ASC" + ) + .bind(sevenDaysAgo) + .all<{ day: string; total: number }>(); + + const dailyMap = new Map(); + for (const row of dailyRows) { + if (row && row.day) { + dailyMap.set(row.day, row.total || 0); + } + } + + const last7Days: { date: string; total: number }[] = []; + for (let i = 6; i >= 0; i--) { + const d = new Date(now - i * 24 * 60 * 60 * 1000); + const year = d.getUTCFullYear(); + const month = String(d.getUTCMonth() + 1).padStart(2, '0'); + const day = String(d.getUTCDate()).padStart(2, '0'); + const key = `${year}-${month}-${day}`; + last7Days.push({ + date: key, + total: dailyMap.get(key) || 0 + }); + } + + return c.json({ + summary, + domains, + last7Days + }); + } catch (e: any) { + return c.json({ message: e.message || '获取统计数据失败' }, 500); + } +}; diff --git a/cwd-api/src/index.ts b/cwd-api/src/index.ts index 56bef16..edcdf5c 100644 --- a/cwd-api/src/index.ts +++ b/cwd-api/src/index.ts @@ -21,6 +21,7 @@ import { updateStatus } from './api/admin/updateStatus'; import { getAdminEmail } from './api/admin/getAdminEmail'; import { setAdminEmail } from './api/admin/setAdminEmail'; import { testEmail } from './api/admin/testEmail'; +import { getStats } from './api/admin/getStats'; const app = new Hono<{ Bindings: Bindings }>(); const VERSION = `v${packageJson.version}`; @@ -236,6 +237,7 @@ app.get('/admin/comments/list', listComments); app.get('/admin/comments/export', exportComments); app.post('/admin/comments/import', importComments); app.put('/admin/comments/status', updateStatus); +app.get('/admin/stats/comments', getStats); app.get('/admin/settings/email', getAdminEmail); app.put('/admin/settings/email', setAdminEmail); app.get('/admin/settings/email-notify', async (c) => { diff --git a/docs/guide/update-version.md b/docs/guide/update-version.md index 8750064..2729ae6 100644 --- a/docs/guide/update-version.md +++ b/docs/guide/update-version.md @@ -2,7 +2,9 @@ 重新拉取 GitHub 项目代码 -## 接口更新 +## 后端更新 + +接口逻辑相关的更新，需要重新部署到 Cloudflare Workers. ``` cd cwd-api @@ -12,7 +14,9 @@ npm run deploy 重新部署到 Cloudflare Workers. -## 后台更新 +## 前端更新 + +### 管理后台 如果使用官方后台不需要更新。 @@ -24,7 +28,7 @@ npm run build 将打包后的代码更新到你托管的地方（例如 Cloudflare Pages、GitHub Pages、Netlify 等）。 -## 评论端更新 +### 评论端 如果使用官方评论端 js `https://cwd.zishu.me/cwd.js`，不需要更新。 diff --git a/docs/index.md b/docs/index.md index 14732f2..e6c5c6b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -37,5 +37,5 @@ features: ---