feat(admin): 增强分页功能并添加移动端响应式布局

- 在评论管理页面添加完整的分页控件，包括页码跳转和省略号显示 - 实现移动端侧边栏菜单和操作按钮的响应式布局 - 添加移动端菜单切换和操作下拉菜单功能 - 更新文档配置和快速开始页面结构
2026-01-20 21:30:03 +08:00
parent 1920bba7ba
commit 94172ab782
4 changed files with 363 additions and 25 deletions
--- a/cwd-comments-admin/src/views/CommentsView.vue
+++ b/cwd-comments-admin/src/views/CommentsView.vue
@@ -100,9 +100,49 @@
        >
          上一页
        </button>
-        <span class="pagination-info"
-          >{{ pagination.page }} / {{ pagination.total }}</span
+        <button
+          class="pagination-button"
+          :class="{ 'pagination-button-active': pagination.page === 1 }"
+          :disabled="pagination.page === 1"
+          @click="goPage(1)"
        >
+          1
+        </button>
+        <span
+          v-if="visiblePages.length && visiblePages[0] > 2"
+          class="pagination-ellipsis"
+        >
+          ...
+        </span>
+        <button
+          v-for="page in visiblePages"
+          v-if="page !== 1 && page !== pagination.total"
+          :key="page"
+          class="pagination-button"
+          :class="{ 'pagination-button-active': page === pagination.page }"
+          :disabled="page === pagination.page"
+          @click="goPage(page)"
+        >
+          {{ page }}
+        </button>
+        <span
+          v-if="
+            visiblePages.length &&
+            visiblePages[visiblePages.length - 1] < pagination.total - 1
+          "
+          class="pagination-ellipsis"
+        >
+          ...
+        </span>
+        <button
+          v-if="pagination.total > 1"
+          class="pagination-button"
+          :class="{ 'pagination-button-active': pagination.page === pagination.total }"
+          :disabled="pagination.page === pagination.total"
+          @click="goPage(pagination.total)"
+        >
+          {{ pagination.total }}
+        </button>
        <button
          class="pagination-button"
          :disabled="pagination.page >= pagination.total"
@@ -110,6 +150,19 @@
        >
          下一页
        </button>
+        <div class="pagination-jump">
+          <span>跳转到</span>
+          <input
+            v-model="jumpPageInput"
+            class="pagination-input"
+            type="number"
+            min="1"
+            :max="pagination.total"
+            @keyup.enter="handleJumpPage"
+          />
+          <span>页</span>
+          <button class="pagination-button" @click="handleJumpPage">确定</button>
+        </div>
      </div>
    </div>
  </div>
@@ -130,6 +183,7 @@ const pagination = ref<{ page: number; total: number }>({ page: 1, total: 1 });
 const loading = ref(false);
 const error = ref("");
 const statusFilter = ref("");
+const jumpPageInput = ref("");

 const filteredComments = computed(() => {
  if (!statusFilter.value) {
@@ -138,6 +192,29 @@ const filteredComments = computed(() => {
  return comments.value.filter((item) => item.status === statusFilter.value);
 });

+const visiblePages = computed(() => {
+  const total = pagination.value.total;
+  const current = pagination.value.page;
+  const maxVisible = 5;
+  if (total <= maxVisible) {
+    return Array.from({ length: total }, (_, index) => index + 1);
+  }
+  let start = current - Math.floor(maxVisible / 2);
+  let end = current + Math.floor(maxVisible / 2);
+  if (start < 1) {
+    start = 1;
+    end = maxVisible;
+  } else if (end > total) {
+    end = total;
+    start = total - maxVisible + 1;
+  }
+  const pages: number[] = [];
+  for (let i = start; i <= end; i += 1) {
+    pages.push(i);
+  }
+  return pages;
+});
+
 function formatDate(value: number) {
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) {
@@ -181,6 +258,19 @@ async function goPage(page: number) {
  await loadComments(page);
 }

+function handleJumpPage() {
+  const value = Number(jumpPageInput.value);
+  if (!Number.isFinite(value)) {
+    return;
+  }
+  const page = Math.floor(value);
+  if (page < 1 || page > pagination.value.total) {
+    return;
+  }
+  jumpPageInput.value = "";
+  loadComments(page);
+}
+
 async function changeStatus(item: CommentItem, status: string) {
  try {
    await updateCommentStatus(item.id, status);
@@ -269,12 +359,12 @@ onMounted(() => {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  overflow: hidden;
+  overflow-x: auto;
 }

 .table-header {
  display: flex;
  background-color: #f6f8fa;
-  border-bottom: 1px solid #d0d7de;
 }

 .table-row {
@@ -347,6 +437,8 @@ onMounted(() => {
  font-weight: 500;
  color: #57606a;
  align-items: center;
+  background-color: #f6f8fa;
+  border-bottom: 1px solid #d0d7de;
 }

 .cell-id {
@@ -474,7 +566,7 @@ onMounted(() => {
 }

 .pagination {
-  margin-top: 20px;
+  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
@@ -494,8 +586,33 @@ onMounted(() => {
  cursor: not-allowed;
 }

-.pagination-info {
-  font-size: 13px;
+.pagination-button-active {
+  background-color: #0969da;
+  color: #ffffff;
+  border-color: #0969da;
+}
+
+.pagination-ellipsis {
+  padding: 0 2px;
+  font-size: 12px;
  color: #57606a;
 }
+
+.pagination-jump {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #57606a;
+}
+
+.pagination-input {
+  width: 60px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 2px 4px;
+  border-radius: 4px;
+  border: 1px solid #d0d7de;
+  font-size: 12px;
+}
 </style>
--- a/cwd-comments-admin/src/views/LayoutView.vue
+++ b/cwd-comments-admin/src/views/LayoutView.vue
@@ -1,27 +1,61 @@
 <template>
  <div class="layout">
    <header class="layout-header">
+      <button class="layout-menu-toggle" @click="toggleSider" aria-label="切换菜单" type="button">
+        <svg class="layout-menu-icon" viewBox="0 0 24 24" width="18" height="18">
+          <path
+            d="M4 7h16a1 1 0 0 0 0-2H4a1 1 0 0 0 0 2zm0 6h16a1 1 0 0 0 0-2H4a1 1 0 0 0 0 2zm0 6h16a1 1 0 0 0 0-2H4a1 1 0 0 0 0 2z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
      <div class="layout-title">CWD 评论后台</div>
-      <div class="layout-actions">
-        <a
-          class="layout-button"
-          href="https://cwd-comments-docs.zishu.me"
-          target="_blank"
+      <div class="layout-actions-wrapper">
+        <div class="layout-actions">
+          <a
+            class="layout-button"
+            href="https://cwd-comments-docs.zishu.me"
+            target="_blank"
+          >
+            使用文档
+          </a>
+          <a
+            class="layout-button"
+            href="https://github.com/anghunk/cwd-comments"
+            target="_blank"
+          >
+            Github
+          </a>
+          <button class="layout-button" @click="handleLogout">退出</button>
+        </div>
+        <button
+          class="layout-actions-toggle"
+          @click="toggleActions"
+          aria-label="更多操作"
+          type="button"
        >
-          使用文档
-        </a>
-        <a
-          class="layout-button"
-          href="https://github.com/anghunk/cwd-comments"
-          target="_blank"
-        >
-          Github
-        </a>
-        <button class="layout-button" @click="handleLogout">退出</button>
+          <svg class="layout-actions-icon" viewBox="0 0 24 24" width="18" height="18">
+            <path
+              d="M12 5.5a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5zm0 8a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5zm0 8a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+        <div v-if="isActionsOpen" class="layout-actions-dropdown">
+          <button class="layout-actions-item" type="button" @click="openDocs">
+            使用文档
+          </button>
+          <button class="layout-actions-item" type="button" @click="openGithub">
+            Github
+          </button>
+          <button class="layout-actions-item layout-actions-item-danger" type="button" @click="handleLogoutFromActions">
+            退出
+          </button>
+        </div>
      </div>
    </header>
    <div class="layout-body">
-      <nav class="layout-sider">
+      <nav class="layout-sider" :class="{ 'layout-sider-mobile-open': isMobileSiderOpen }">
        <ul class="menu">
          <li
            class="menu-item"
@@ -46,6 +80,11 @@
          </li>
        </ul>
      </nav>
+      <div
+        v-if="isMobileSiderOpen"
+        class="layout-sider-mask"
+        @click="closeSider"
+      />
      <main class="layout-content">
        <router-view />
      </main>
@@ -54,31 +93,70 @@
 </template>

 <script setup lang="ts">
+import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { logoutAdmin } from "../api/admin";

 const router = useRouter();
 const route = useRoute();

+const isMobileSiderOpen = ref(false);
+const isActionsOpen = ref(false);
+
 function isRouteActive(name: string) {
  return route.name === name;
 }

+function closeSider() {
+  isMobileSiderOpen.value = false;
+}
+
+function toggleSider() {
+  isMobileSiderOpen.value = !isMobileSiderOpen.value;
+}
+
+function toggleActions() {
+  isActionsOpen.value = !isActionsOpen.value;
+}
+
+function closeActions() {
+  isActionsOpen.value = false;
+}
+
 function goComments() {
  router.push({ name: "comments" });
+  closeSider();
 }

 function goData() {
  router.push({ name: "data" });
+  closeSider();
 }

 function goSettings() {
  router.push({ name: "settings" });
+  closeSider();
+}
+
+function openDocs() {
+  window.open("https://cwd-comments-docs.zishu.me", "_blank");
+  closeActions();
+}
+
+function openGithub() {
+  window.open("https://github.com/anghunk/cwd-comments", "_blank");
+  closeActions();
 }

 function handleLogout() {
  logoutAdmin();
  router.push({ name: "login" });
+  closeSider();
+}
+
+function handleLogoutFromActions() {
+  closeActions();
+  handleLogout();
 }
 </script>

@@ -104,6 +182,13 @@ function handleLogout() {
  font-weight: 600;
 }

+.layout-actions-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
 .layout-actions {
  display: flex;
  gap: 8px;
@@ -124,6 +209,22 @@ function handleLogout() {
  background-color: #32383f;
 }

+.layout-actions-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: 4px;
+  border: 1px solid #57606a;
+  background-color: #24292f;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.layout-actions-dropdown {
+  display: none;
+}
+
 .layout-body {
  display: flex;
  flex: 1;
@@ -160,7 +261,125 @@ function handleLogout() {

 .layout-content {
  flex: 1;
-  padding: 16px 20px;
+  padding: 16px 20px 40px;
  overflow: auto;
 }
+
+.layout-menu-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: 1px solid #57606a;
+  background-color: #24292f;
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.layout-sider-mask {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .layout {
+    height: 100vh;
+  }
+
+  .layout-header {
+    padding: 0 12px;
+    gap: 8px;
+  }
+
+  .layout-title {
+    font-size: 16px;
+  }
+
+  .layout-body {
+    position: relative;
+  }
+
+  .layout-menu-toggle {
+    display: inline-flex;
+  }
+
+  .layout-sider {
+    position: fixed;
+    top: 56px;
+    left: 0;
+    bottom: 0;
+    width: 220px;
+    max-width: 80%;
+    border-right: 1px solid #d0d7de;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease-out;
+    z-index: 1000;
+  }
+
+  .layout-sider-mobile-open {
+    transform: translateX(0);
+  }
+
+  .layout-sider-mask {
+    position: fixed;
+    top: 56px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 900;
+    display: block;
+  }
+
+  .layout-content {
+    padding: 12px;
+  }
+
+  .layout-actions {
+    display: none;
+  }
+
+  .layout-actions-toggle {
+    display: inline-flex;
+  }
+
+  .layout-actions-dropdown {
+    position: fixed;
+    top: 56px;
+    right: 12px;
+    background-color: #ffffff;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.3);
+    padding: 6px 0;
+    min-width: 160px;
+    z-index: 1100;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .layout-actions-item {
+    padding: 8px 14px;
+    font-size: 13px;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    color: #24292f;
+    width: 100%;
+  }
+
+  .layout-actions-item:hover {
+    background-color: #f6f8fa;
+  }
+
+  .layout-actions-item-danger {
+    color: #d1242f;
+  }
+
+  .layout-actions-item-danger:hover {
+    background-color: #ffebe9;
+  }
+}
 </style>
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -26,9 +26,9 @@ export default defineConfig({

 		sidebar: [
 			{
-				text: '配置',
+				text: '快速开始',
 				items: [
-					{ text: '快速开始', link: '/guide/getting-started' },
+					{ text: '项目介绍', link: '/guide/getting-started' },
 					{ text: '后端配置', link: '/guide/backend-config' },
 					{ text: '前端配置', link: '/guide/frontend-config' },
 				],
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -7,6 +7,8 @@ Cloudflare Worker 版本基于 Cloudflare Workers + D1 + KV 实现，无需服

 [文档地址](https://cwd-comments-docs.zishu.me)

+![](https://github.com/user-attachments/assets/6ac091d8-e349-4d40-9d68-485817f63236)
+
 ## 特性

 - ⚡️ **极速响应**：基于 Cloudflare 全球边缘网络