shumengya/cwd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): 优化表格展示并限制访问页面数据数量

Browse Source 
docs: 更新项目描述为更详细的介绍
refactor(api): 限制访问页面接口返回数量为20条
style(admin): 为表格添加响应式布局和滚动支持
This commit is contained in:
anghunk
2026-01-22 09:29:58 +08:00
parent 1899449cc6
commit 6c1651b4e9
4 changed files with 106 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
cwd-admin/src/views/AnalyticsVisitView.vue
View File

@@ -53,28 +53,35 @@
<div v-if="loading" class="page-hint">加载中...</div> <div v-if="loading" class="page-hint">加载中...</div>
<div v-else-if="error" class="page-error">{{ error }}</div> <div v-else-if="error" class="page-error">{{ error }}</div>
<div v-else-if="items.length === 0" class="page-hint">暂无访问数据</div> <div v-else-if="items.length === 0" class="page-hint">暂无访问数据</div>
<div v-else class="domain-table"> <div v-else class="domain-table-wrapper">
<div class="domain-table-header"> <div class="domain-table">
<div class="domain-cell domain-cell-domain">页面标题</div> <div class="domain-table-header">
<div class="domain-cell">访问量</div> <div class="domain-cell domain-cell-title">页面标题</div>
<div class="domain-cell">最后访问时间</div> <div class="domain-cell domain-cell-pv">访问量</div>
<div class="domain-cell">页面地址</div> <div class="domain-cell domain-cell-time">最后访问时间</div>
</div> <div class="domain-cell domain-cell-url">页面地址</div>
<div v-for="item in items" :key="item.postSlug" class="domain-table-row">
<div class="domain-cell domain-cell-domain">
{{ item.postTitle || item.postSlug }}
</div> </div>
<div class="domain-cell"> <div v-for="item in items" :key="item.postSlug" class="domain-table-row">
{{ item.pv }} <div class="domain-cell domain-cell-title">
</div> {{ item.postTitle || item.postSlug }}
<div class="domain-cell"> </div>
{{ formatTime(item.lastVisitAt) }} <div class="domain-cell domain-cell-pv">
</div> {{ item.pv }}
<div class="domain-cell"> </div>
<a v-if="item.postUrl" :href="item.postUrl" target="_blank" rel="noreferrer"> <div class="domain-cell domain-cell-time">
{{ item.postUrl }} {{ formatTime(item.lastVisitAt) }}
</a> </div>
<span v-else>-</span> <div class="domain-cell domain-cell-url">
<a
v-if="item.postUrl"
:href="item.postUrl"
target="_blank"
rel="noreferrer"
>
{{ item.postUrl }}
</a>
<span v-else>-</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -392,9 +399,16 @@ watch(
color: #24292f; color: #24292f;
} }
.domain-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.domain-table { .domain-table {
border: 1px solid #d0d7de; border: 1px solid #d0d7de;
border-radius: 6px; border-radius: 6px;
min-width: 520px;
overflow: hidden; overflow: hidden;
} }
@@ -420,11 +434,48 @@ watch(
color: #57606a; color: #57606a;
} }
.domain-cell-domain { .domain-cell-title {
flex: 2;
font-weight: 500; font-weight: 500;
} }
.domain-cell-pv {
text-align: center;
}
.domain-cell-time {
flex: 0 0 170px;
}
.domain-cell-url {
word-break: break-all;
}
@media (max-width: 768px) {
.domain-table {
width: 610px;
}
.domain-cell {
flex: none;
}
.domain-cell-title {
width: 160px;
}
.domain-cell-pv {
width: 100px;
}
.domain-cell-time {
width: 150px;
}
.domain-cell-url {
width: 200px;
}
}
.chart-wrapper { .chart-wrapper {
margin-top: 4px; margin-top: 4px;
} }
@@ -457,10 +508,4 @@ watch(
background-color: #d1242f; background-color: #d1242f;
color: #ffffff; color: #ffffff;
} }
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
</style> </style>

41
cwd-admin/src/views/StatsView.vue
View File

@@ -65,20 +65,26 @@
<div v-if="statsLoading" class="page-hint">加载中...</div> <div v-if="statsLoading" class="page-hint">加载中...</div>
<div v-else-if="statsError" class="page-error">{{ statsError }}</div> <div v-else-if="statsError" class="page-error">{{ statsError }}</div>
<div v-else-if="domainStats.length === 0" class="page-hint">暂无评论数据</div> <div v-else-if="domainStats.length === 0" class="page-hint">暂无评论数据</div>
<div v-else class="domain-table"> <div v-else class="domain-table-wrapper">
<div class="domain-table-header"> <div class="domain-table">
<div class="domain-cell domain-cell-domain">域名</div> <div class="domain-table-header">
<div class="domain-cell">总数</div> <div class="domain-cell domain-cell-domain">域名</div>
<div class="domain-cell">已通过</div> <div class="domain-cell">总数</div>
<div class="domain-cell">待审核</div> <div class="domain-cell">已通过</div>
<div class="domain-cell">已拒绝</div> <div class="domain-cell">待审核</div>
</div> <div class="domain-cell">已拒绝</div>
<div v-for="item in domainStats" :key="item.domain" class="domain-table-row"> </div>
<div class="domain-cell domain-cell-domain">{{ item.domain }}</div> <div
<div class="domain-cell">{{ item.total }}</div> v-for="item in domainStats"
<div class="domain-cell">{{ item.approved }}</div> :key="item.domain"
<div class="domain-cell">{{ item.pending }}</div> class="domain-table-row"
<div class="domain-cell">{{ item.rejected }}</div> >
<div class="domain-cell domain-cell-domain">{{ item.domain }}</div>
<div class="domain-cell">{{ item.total }}</div>
<div class="domain-cell">{{ item.approved }}</div>
<div class="domain-cell">{{ item.pending }}</div>
<div class="domain-cell">{{ item.rejected }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -346,9 +352,16 @@ onBeforeUnmount(() => {
color: #d1242f; color: #d1242f;
} }
.domain-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.domain-table { .domain-table {
border: 1px solid #d0d7de; border: 1px solid #d0d7de;
border-radius: 6px; border-radius: 6px;
min-width: 520px;
overflow: hidden; overflow: hidden;
} }

4
cwd-api/src/api/admin/visitAnalytics.ts
View File

@@ -163,7 +163,7 @@ export const getVisitPages = async (c: Context<{ Bindings: Bindings }>) => {
last_visit_at: number | null; last_visit_at: number | null;
}>(); }>();
const items: VisitPageItem[] = []; let items: VisitPageItem[] = [];
for (const row of results) { for (const row of results) {
const domain = const domain =
@@ -184,6 +184,8 @@ export const getVisitPages = async (c: Context<{ Bindings: Bindings }>) => {
}); });
} }
items = items.slice(0, 20);
return c.json({ items }); return c.json({ items });
} catch (e: any) { } catch (e: any) {
return c.json( return c.json(

4
docs/.vitepress/config.mjs
View File

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitepress';
export default defineConfig({ export default defineConfig({
title: 'CWD 评论系统文档', title: 'CWD 评论系统文档',
description: '基于 Cloudflare Workers 的轻量级评论系统', description: '基于 Cloudflare Workers 与全球边缘网络的免服务器、极速安全、即插即用评论系统。',
lang: 'zh-CN', lang: 'zh-CN',
head: [ head: [
[ [
@@ -19,7 +19,7 @@ export default defineConfig({
nav, nav,
sidebar, sidebar,
outline: { outline: {
level: [2,3], level: [2, 3],
label: 'On this page', label: 'On this page',
}, },
editLink: { editLink: {