From aca50b95118d3722314f6217aed74d96a77a0490 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sat, 23 May 2026 23:16:01 +0800
Subject: [PATCH] feat: refactor dashboard components to use new layout
 structure and improve UI consistency

---
 web/app/dashboard/channels/page.tsx      |  86 +++++++-----
 web/app/dashboard/companies/page.tsx     | 114 ++++++++--------
 web/app/dashboard/permissions/page.tsx   | 127 ++++++++----------
 web/app/dashboard/quick-replies/page.tsx | 161 +++++++++++------------
 web/app/dashboard/roles/page.tsx         |  88 ++++++++-----
 web/app/dashboard/tags/page.tsx          |  68 ++++++----
 web/components/dashboard-page.tsx        | 121 +++++++++++++++++
 7 files changed, 454 insertions(+), 311 deletions(-)
 create mode 100644 web/components/dashboard-page.tsx

diff --git a/web/app/dashboard/channels/page.tsx b/web/app/dashboard/channels/page.tsx
index 23d8cd0..1622f32 100644
--- a/web/app/dashboard/channels/page.tsx
+++ b/web/app/dashboard/channels/page.tsx
@@ -23,6 +23,12 @@ import {
   type CreateAdminChannelPayload,
   type PageResult,
 } from "@/lib/api/admin"
+import {
+  DashboardPage,
+  DashboardTableShell,
+  DashboardTableStateRow,
+  DashboardToolbar,
+} from "@/components/dashboard-page"
 import { OptionCombobox } from "@/components/option-combobox"
 import { EditDialog } from "./_components/edit"
 import { Badge } from "@/components/ui/badge"
@@ -205,16 +211,29 @@ export default function DashboardChannelsPage() {
 
   return (
     <>
-      <div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
-        <div className="flex flex-col gap-2 xl:flex-row xl:flex-wrap xl:items-center xl:justify-end">
+      <DashboardPage>
+        <DashboardToolbar
+          actions={
+            <>
+              <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
+                <RefreshCwIcon className={loading ? "animate-spin" : ""} />
+                刷新
+              </Button>
+              <Button onClick={openCreateDialog}>
+                <PlusIcon />
+                新建渠道
+              </Button>
+            </>
+          }
+        >
           <Input
             value={nameInput}
             onChange={(event) => setNameInput(event.target.value)}
             onKeyDown={handleFilterKeyDown}
             placeholder="按渠道名称筛选"
-            className="w-full xl:w-56"
+            className="w-full sm:w-56"
           />
-          <div className="relative min-w-72">
+          <div className="relative w-full sm:w-72">
             <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={channelIdInput}
@@ -224,7 +243,7 @@ export default function DashboardChannelsPage() {
               className="pl-9"
             />
           </div>
-          <div className="w-full xl:w-40">
+          <div className="w-full sm:w-40">
             <OptionCombobox
               value={channelTypeInput}
               options={[...channelTypeOptions]}
@@ -234,7 +253,7 @@ export default function DashboardChannelsPage() {
               onChange={setChannelTypeInput}
             />
           </div>
-          <div className="w-full xl:w-36">
+          <div className="w-full sm:w-36">
             <OptionCombobox
               value={statusInput}
               options={[...statusOptions]}
@@ -248,17 +267,23 @@ export default function DashboardChannelsPage() {
             <SearchIcon />
             查询
           </Button>
-          <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
-            <RefreshCwIcon className={loading ? "animate-spin" : ""} />
-            刷新列表
-          </Button>
-          <Button onClick={openCreateDialog}>
-            <PlusIcon />
-            新建渠道
-          </Button>
-        </div>
+        </DashboardToolbar>
 
-        <div className="rounded-xl border bg-card">
+        <DashboardTableShell
+          pagination={
+            <ListPagination
+              page={result.page.page}
+              limit={result.page.limit}
+              total={result.page.total}
+              loading={loading}
+              onPageChange={(nextPage) => setPage(nextPage)}
+              onLimitChange={(nextLimit) => {
+                setLimit(nextLimit)
+                setPage(1)
+              }}
+            />
+          }
+        >
           <Table>
             <TableHeader>
               <TableRow>
@@ -271,12 +296,13 @@ export default function DashboardChannelsPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {result.results.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={6} className="py-12 text-center text-muted-foreground">
-                    {loading ? "正在加载接入渠道..." : "暂无接入渠道"}
-                  </TableCell>
-                </TableRow>
+              {loading || result.results.length === 0 ? (
+                <DashboardTableStateRow
+                  colSpan={6}
+                  loading={loading}
+                  loadingText="正在加载接入渠道..."
+                  emptyText="暂无接入渠道"
+                />
               ) : null}
               {result.results.map((item) => (
                 <TableRow key={item.id}>
@@ -338,20 +364,8 @@ export default function DashboardChannelsPage() {
               ))}
             </TableBody>
           </Table>
-          <div className="border-t px-4 py-3">
-            <ListPagination
-              page={result.page.page}
-              limit={result.page.limit}
-              total={result.page.total}
-              onPageChange={(nextPage) => setPage(nextPage)}
-              onLimitChange={(nextLimit) => {
-                setLimit(nextLimit)
-                setPage(1)
-              }}
-            />
-          </div>
-        </div>
-      </div>
+        </DashboardTableShell>
+      </DashboardPage>
 
       <EditDialog
         open={dialogOpen}
diff --git a/web/app/dashboard/companies/page.tsx b/web/app/dashboard/companies/page.tsx
index 615d12f..c4ae01e 100644
--- a/web/app/dashboard/companies/page.tsx
+++ b/web/app/dashboard/companies/page.tsx
@@ -12,7 +12,14 @@ import {
 import { useCallback, useEffect, useState } from "react"
 import { toast } from "sonner"
 
+import {
+  DashboardPage,
+  DashboardTableShell,
+  DashboardTableStateRow,
+  DashboardToolbar,
+} from "@/components/dashboard-page"
 import { ListPagination } from "@/components/list-pagination"
+import { OptionCombobox } from "@/components/option-combobox"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { ButtonGroup } from "@/components/ui/button-group"
@@ -23,13 +30,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
 import {
   Table,
   TableBody,
@@ -62,13 +62,6 @@ const listStatusOptions = [
     })),
 ] as const
 
-function getStatusLabel(
-  value: string,
-  options: ReadonlyArray<{ value: string; label: string }>
-) {
-  return options.find((item) => item.value === value)?.label ?? "请选择状态"
-}
-
 export default function DashboardCompaniesPage() {
   const [nameInput, setNameInput] = useState("")
   const [codeInput, setCodeInput] = useState("")
@@ -194,9 +187,22 @@ export default function DashboardCompaniesPage() {
 
   return (
     <>
-      <div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
-        <div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end">
-          <div className="relative min-w-72">
+      <DashboardPage>
+        <DashboardToolbar
+          actions={
+            <>
+              <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
+                <RefreshCwIcon className={loading ? "animate-spin" : ""} />
+                刷新
+              </Button>
+              <Button onClick={openCreateDialog}>
+                <PlusIcon />
+                新建公司
+              </Button>
+            </>
+          }
+        >
+          <div className="relative w-full sm:w-72">
             <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={nameInput}
@@ -211,31 +217,37 @@ export default function DashboardCompaniesPage() {
             onChange={(event) => setCodeInput(event.target.value)}
             onKeyDown={handleFilterKeyDown}
             placeholder="按公司编码筛选"
-            className="w-full xl:w-48"
+            className="w-full sm:w-44"
           />
-          <Select value={statusFilterInput} onValueChange={(v) => setStatusFilterInput(v ?? "all")}>
-            <SelectTrigger className="w-full xl:w-36">
-              <SelectValue>{getStatusLabel(statusFilterInput, listStatusOptions)}</SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              {listStatusOptions.map((item) => (
-                <SelectItem key={item.value} value={item.value}>
-                  {item.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="w-full sm:w-36">
+            <OptionCombobox
+              value={statusFilterInput}
+              onChange={setStatusFilterInput}
+              placeholder="全部状态"
+              options={[...listStatusOptions]}
+            />
+          </div>
           <Button variant="outline" onClick={applyFilters} disabled={loading}>
             <SearchIcon />
             查询
           </Button>
-          <Button onClick={openCreateDialog}>
-            <PlusIcon />
-            新建
-          </Button>
-        </div>
+        </DashboardToolbar>
 
-        <div className="overflow-hidden rounded-lg border bg-card">
+        <DashboardTableShell
+          pagination={
+            <ListPagination
+              page={result.page.page}
+              total={result.page.total}
+              limit={result.page.limit}
+              loading={loading}
+              onPageChange={handlePageChange}
+              onLimitChange={(nextLimit) => {
+                setLimit(nextLimit)
+                setPage(1)
+              }}
+            />
+          }
+        >
           <Table>
             <TableHeader>
               <TableRow>
@@ -249,12 +261,13 @@ export default function DashboardCompaniesPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {result.results.length === 0 && !loading ? (
-                <TableRow>
-                  <TableCell colSpan={7} className="py-10 text-center text-muted-foreground">
-                    暂无公司数据
-                  </TableCell>
-                </TableRow>
+              {loading || result.results.length === 0 ? (
+                <DashboardTableStateRow
+                  colSpan={7}
+                  loading={loading}
+                  loadingText="正在加载公司数据..."
+                  emptyText="暂无公司数据"
+                />
               ) : (
                 result.results.map((item) => {
                   const actionLoading = actionLoadingId === item.id
@@ -331,20 +344,8 @@ export default function DashboardCompaniesPage() {
               )}
             </TableBody>
           </Table>
-        </div>
-
-        <ListPagination
-          page={result.page.page}
-          total={result.page.total}
-          limit={result.page.limit}
-          loading={loading}
-          onPageChange={handlePageChange}
-          onLimitChange={(nextLimit) => {
-            setLimit(nextLimit)
-            setPage(1)
-          }}
-        />
-      </div>
+        </DashboardTableShell>
+      </DashboardPage>
 
       <EditDialog
         open={dialogOpen}
@@ -356,4 +357,3 @@ export default function DashboardCompaniesPage() {
     </>
   )
 }
-
diff --git a/web/app/dashboard/permissions/page.tsx b/web/app/dashboard/permissions/page.tsx
index bdec0bb..d778876 100644
--- a/web/app/dashboard/permissions/page.tsx
+++ b/web/app/dashboard/permissions/page.tsx
@@ -5,22 +5,16 @@ import { KeyRoundIcon, RefreshCwIcon, RouteIcon, SearchIcon } from "lucide-react
 import { toast } from "sonner"
 
 import {
-  fetchPermissions,
-  type AdminPermission,
-  type PageResult,
-} from "@/lib/api/admin"
-import { Status, StatusLabels } from "@/lib/generated/enums"
+  DashboardPage,
+  DashboardTableShell,
+  DashboardTableStateRow,
+  DashboardToolbar,
+} from "@/components/dashboard-page"
+import { ListPagination } from "@/components/list-pagination"
+import { OptionCombobox } from "@/components/option-combobox"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { ListPagination } from "@/components/list-pagination"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
 import {
   Table,
   TableBody,
@@ -29,6 +23,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import {
+  fetchPermissions,
+  type AdminPermission,
+  type PageResult,
+} from "@/lib/api/admin"
+import { Status, StatusLabels } from "@/lib/generated/enums"
 
 const listStatusOptions = [
   { value: "all", label: "全部状态" },
@@ -37,13 +37,6 @@ const listStatusOptions = [
   { value: String(Status.Deleted), label: StatusLabels[Status.Deleted] },
 ] as const
 
-function getStatusLabel(
-  value: string,
-  options: ReadonlyArray<{ value: string; label: string }>
-) {
-  return options.find((item) => item.value === value)?.label ?? "请选择状态"
-}
-
 export default function DashboardPermissionsPage() {
   const [keywordInput, setKeywordInput] = useState("")
   const [groupNameInput, setGroupNameInput] = useState("")
@@ -81,10 +74,6 @@ export default function DashboardPermissionsPage() {
     void loadData()
   }, [loadData])
 
-  function handleStatusFilterChange(value: string | null) {
-    setStatusFilterInput(value ?? "all")
-  }
-
   function applyFilters() {
     setKeyword(keywordInput)
     setGroupName(groupNameInput)
@@ -109,9 +98,16 @@ export default function DashboardPermissionsPage() {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
-      <div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end">
-        <div className="relative min-w-72">
+    <DashboardPage>
+      <DashboardToolbar
+        actions={
+          <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
+            <RefreshCwIcon className={loading ? "animate-spin" : ""} />
+            刷新
+          </Button>
+        }
+      >
+        <div className="relative w-full sm:w-72">
           <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={keywordInput}
@@ -126,34 +122,36 @@ export default function DashboardPermissionsPage() {
           onChange={(event) => setGroupNameInput(event.target.value)}
           onKeyDown={handleFilterKeyDown}
           placeholder="按分组筛选"
-          className="w-full xl:w-48"
+          className="w-full sm:w-44"
         />
-        <Select
-          value={statusFilterInput}
-          onValueChange={handleStatusFilterChange}
-        >
-          <SelectTrigger className="w-full xl:w-36">
-            <SelectValue>{getStatusLabel(statusFilterInput, listStatusOptions)}</SelectValue>
-          </SelectTrigger>
-          <SelectContent>
-            {listStatusOptions.map((item) => (
-              <SelectItem key={item.value} value={item.value}>
-                {item.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <div className="w-full sm:w-36">
+          <OptionCombobox
+            value={statusFilterInput}
+            onChange={setStatusFilterInput}
+            placeholder="全部状态"
+            options={[...listStatusOptions]}
+          />
+        </div>
         <Button variant="outline" onClick={applyFilters} disabled={loading}>
           <SearchIcon />
           查询
         </Button>
-        <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
-          <RefreshCwIcon className={loading ? "animate-spin" : ""} />
-          刷新列表
-        </Button>
-      </div>
-      <div className="space-y-4">
-        <div className="overflow-hidden rounded-2xl border bg-background">
+      </DashboardToolbar>
+      <DashboardTableShell
+        pagination={
+          <ListPagination
+            page={result.page.page}
+            total={result.page.total}
+            limit={limit}
+            loading={loading}
+            onPageChange={handlePageChange}
+            onLimitChange={(nextLimit) => {
+              setLimit(nextLimit)
+              setPage(1)
+            }}
+          />
+        }
+      >
           <Table>
             <TableHeader className="bg-muted/40">
               <TableRow>
@@ -202,28 +200,17 @@ export default function DashboardPermissionsPage() {
                   </TableCell>
                 </TableRow>
               ))}
-              {!loading && result.results.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={5} className="py-12 text-center text-muted-foreground">
-                    没有匹配的权限数据
-                  </TableCell>
-                </TableRow>
+              {loading || result.results.length === 0 ? (
+                <DashboardTableStateRow
+                  colSpan={5}
+                  loading={loading}
+                  loadingText="正在加载权限数据..."
+                  emptyText="没有匹配的权限数据"
+                />
               ) : null}
             </TableBody>
           </Table>
-        </div>
-        <ListPagination
-          page={result.page.page}
-          total={result.page.total}
-          limit={limit}
-          loading={loading}
-          onPageChange={handlePageChange}
-          onLimitChange={(nextLimit) => {
-            setLimit(nextLimit)
-            setPage(1)
-          }}
-        />
-      </div>
-    </div>
+      </DashboardTableShell>
+    </DashboardPage>
   )
 }
diff --git a/web/app/dashboard/quick-replies/page.tsx b/web/app/dashboard/quick-replies/page.tsx
index 2aee8fc..67b1ed1 100644
--- a/web/app/dashboard/quick-replies/page.tsx
+++ b/web/app/dashboard/quick-replies/page.tsx
@@ -11,6 +11,32 @@ import {
 } from "lucide-react"
 import { toast } from "sonner"
 
+import {
+  DashboardPage,
+  DashboardTableShell,
+  DashboardTableStateRow,
+  DashboardToolbar,
+} from "@/components/dashboard-page"
+import { ListPagination } from "@/components/list-pagination"
+import { OptionCombobox } from "@/components/option-combobox"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { ButtonGroup } from "@/components/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
 import {
   createQuickReply,
   deleteQuickReply,
@@ -23,32 +49,6 @@ import {
 import { getEnumLabel, getEnumOptions } from "@/lib/enums"
 import { Status, StatusLabels } from "@/lib/generated/enums"
 import { EditDialog } from "./_components/edit"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { ButtonGroup } from "@/components/ui/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Input } from "@/components/ui/input"
-import { ListPagination } from "@/components/list-pagination"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
 
 const listStatusOptions = [
   { value: "all", label: "全部状态" },
@@ -60,13 +60,6 @@ const listStatusOptions = [
     })),
 ] as const
 
-function getStatusLabel(
-  value: string,
-  options: ReadonlyArray<{ value: string; label: string }>
-) {
-  return options.find((item) => item.value === value)?.label ?? "请选择状态"
-}
-
 export default function DashboardQuickRepliesPage() {
   const [keywordInput, setKeywordInput] = useState("")
   const [groupNameInput, setGroupNameInput] = useState("")
@@ -108,10 +101,6 @@ export default function DashboardQuickRepliesPage() {
     void loadData()
   }, [loadData])
 
-  function handleStatusFilterChange(value: string | null) {
-    setStatusFilterInput(value ?? "all")
-  }
-
   function applyFilters() {
     setKeyword(keywordInput)
     setGroupName(groupNameInput)
@@ -221,9 +210,22 @@ export default function DashboardQuickRepliesPage() {
 
   return (
     <>
-      <div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
-        <div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end">
-          <div className="relative min-w-72">
+      <DashboardPage>
+        <DashboardToolbar
+          actions={
+            <>
+              <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
+                <RefreshCwIcon className={loading ? "animate-spin" : undefined} />
+                刷新
+              </Button>
+              <Button onClick={openCreateDialog}>
+                <PlusIcon />
+                新建快捷回复
+              </Button>
+            </>
+          }
+        >
+          <div className="relative w-full sm:w-72">
             <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={keywordInput}
@@ -238,34 +240,36 @@ export default function DashboardQuickRepliesPage() {
             onChange={(event) => setGroupNameInput(event.target.value)}
             onKeyDown={handleFilterKeyDown}
             placeholder="按分组筛选"
-            className="w-full xl:w-48"
+            className="w-full sm:w-44"
           />
-          <Select
-            value={statusFilterInput}
-            onValueChange={handleStatusFilterChange}
-          >
-            <SelectTrigger className="w-full xl:w-36">
-              <SelectValue>{getStatusLabel(statusFilterInput, listStatusOptions)}</SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              {listStatusOptions.map((item) => (
-                <SelectItem key={item.value} value={item.value}>
-                  {item.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="w-full sm:w-36">
+            <OptionCombobox
+              value={statusFilterInput}
+              onChange={setStatusFilterInput}
+              placeholder="全部状态"
+              options={[...listStatusOptions]}
+            />
+          </div>
           <Button variant="outline" onClick={applyFilters} disabled={loading}>
             <SearchIcon />
             查询
           </Button>
-          <Button onClick={openCreateDialog}>
-            <PlusIcon />
-            新建
-          </Button>
-        </div>
-        <div className="space-y-4">
-          <div className="overflow-hidden rounded-2xl border bg-background">
+        </DashboardToolbar>
+        <DashboardTableShell
+          pagination={
+            <ListPagination
+              page={result.page.page}
+              total={result.page.total}
+              limit={limit}
+              loading={loading}
+              onPageChange={handlePageChange}
+              onLimitChange={(nextLimit) => {
+                setLimit(nextLimit)
+                setPage(1)
+              }}
+            />
+          }
+        >
             <Table>
               <TableHeader className="bg-muted/40">
                 <TableRow>
@@ -282,7 +286,7 @@ export default function DashboardQuickRepliesPage() {
                   <TableRow key={item.id}>
                     <TableCell>
                       <div className="flex items-start gap-3">
-                        <div className="mt-0.5 flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                        <div className="mt-0.5 flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
                           <FileTextIcon className="size-4" />
                         </div>
                         <div className="min-w-0">
@@ -345,29 +349,18 @@ export default function DashboardQuickRepliesPage() {
                     </TableCell>
                   </TableRow>
                 ))}
-                {!loading && result.results.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={6} className="py-12 text-center text-muted-foreground">
-                      没有匹配的快捷回复
-                    </TableCell>
-                  </TableRow>
+                {loading || result.results.length === 0 ? (
+                  <DashboardTableStateRow
+                    colSpan={6}
+                    loading={loading}
+                    loadingText="正在加载快捷回复..."
+                    emptyText="没有匹配的快捷回复"
+                  />
                 ) : null}
               </TableBody>
             </Table>
-          </div>
-          <ListPagination
-            page={result.page.page}
-            total={result.page.total}
-            limit={limit}
-            loading={loading}
-            onPageChange={handlePageChange}
-            onLimitChange={(nextLimit) => {
-              setLimit(nextLimit)
-              setPage(1)
-            }}
-          />
-        </div>
-      </div>
+        </DashboardTableShell>
+      </DashboardPage>
       <EditDialog
         open={dialogOpen}
         saving={saving}
diff --git a/web/app/dashboard/roles/page.tsx b/web/app/dashboard/roles/page.tsx
index a4b983c..4269370 100644
--- a/web/app/dashboard/roles/page.tsx
+++ b/web/app/dashboard/roles/page.tsx
@@ -41,6 +41,13 @@ import {
   type PageResult,
   updateRoleSort,
 } from "@/lib/api/admin"
+import {
+  DashboardPage,
+  DashboardTableShell,
+  DashboardTableStateRow,
+  DashboardTableSummary,
+  DashboardToolbar,
+} from "@/components/dashboard-page"
 import { cn } from "@/lib/utils"
 import { AssignPermissionsDrawer } from "./_components/assign-permissions"
 import { CreateRoleDrawer } from "./_components/create"
@@ -311,23 +318,43 @@ export default function DashboardRolesPage() {
   }, [])
 
   return (
-    <div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
-      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end">
-        <Button
-          type="button"
-          onClick={() => setCreatingOpen(true)}
-          disabled={loading || sorting}
-        >
-          <PlusIcon className="size-4" />
-          添加角色
-        </Button>
-        <Button onClick={() => void loadRoles()} disabled={loading || sorting}>
-          <RefreshCwIcon className={cn((loading || sorting) && "animate-spin")} />
-          刷新列表
-        </Button>
-      </div>
-      <div className="space-y-4">
-        <div className="overflow-hidden rounded-2xl border bg-background">
+    <DashboardPage>
+      <DashboardToolbar
+        actions={
+          <>
+            <Button
+              type="button"
+              onClick={() => setCreatingOpen(true)}
+              disabled={loading || sorting}
+            >
+              <PlusIcon className="size-4" />
+              添加角色
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => void loadRoles()}
+              disabled={loading || sorting}
+            >
+              <RefreshCwIcon className={cn((loading || sorting) && "animate-spin")} />
+              刷新
+            </Button>
+          </>
+        }
+      >
+        <div className="text-sm text-muted-foreground">
+          拖拽行可调整角色顺序
+        </div>
+      </DashboardToolbar>
+      <DashboardTableShell
+        pagination={
+          <DashboardTableSummary>
+            <span>
+              第 {result.page.page} 页 / 每页 {result.page.limit} 条
+            </span>
+            <span>共 {result.page.total} 条记录</span>
+          </DashboardTableSummary>
+        }
+      >
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -361,27 +388,18 @@ export default function DashboardRolesPage() {
                     />
                   ))}
                 </SortableContext>
-                {!loading && result.results.length === 0 ? (
-                  <TableRow>
-                    <TableCell
-                      colSpan={6}
-                      className="py-12 text-center text-muted-foreground"
-                    >
-                      暂无角色数据
-                    </TableCell>
-                  </TableRow>
+                {loading || result.results.length === 0 ? (
+                  <DashboardTableStateRow
+                    colSpan={6}
+                    loading={loading}
+                    loadingText="正在加载角色数据..."
+                    emptyText="暂无角色数据"
+                  />
                 ) : null}
               </TableBody>
             </Table>
           </DndContext>
-        </div>
-        <div className="flex items-center justify-between text-sm text-muted-foreground">
-          <span>
-            第 {result.page.page} 页 / 每页 {result.page.limit} 条
-          </span>
-          <span>共 {result.page.total} 条记录</span>
-        </div>
-      </div>
+      </DashboardTableShell>
       <AssignPermissionsDrawer
         open={!!assigningRole}
         saving={savingPermissions}
@@ -398,6 +416,6 @@ export default function DashboardRolesPage() {
         onOpenChange={handleCreateDrawerOpenChange}
         onSubmit={handleCreateRole}
       />
-    </div>
+    </DashboardPage>
   )
 }
diff --git a/web/app/dashboard/tags/page.tsx b/web/app/dashboard/tags/page.tsx
index 71820e2..ac820bc 100644
--- a/web/app/dashboard/tags/page.tsx
+++ b/web/app/dashboard/tags/page.tsx
@@ -44,6 +44,12 @@ import {
   type Tag,
   type TagTree,
 } from "@/lib/api/admin"
+import {
+  DashboardPage,
+  DashboardTableShell,
+  DashboardTableStateRow,
+  DashboardToolbar,
+} from "@/components/dashboard-page"
 import { EditDialog } from "./_components/edit"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -531,9 +537,28 @@ export default function DashboardTagsPage() {
 
   return (
     <>
-      <div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
-        <div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end">
-          <div className="relative min-w-72">
+      <DashboardPage>
+        <DashboardToolbar
+          actions={
+            <>
+              <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
+                <RefreshCwIcon className={loading ? "animate-spin" : ""} />
+                刷新
+              </Button>
+              <Button variant="outline" onClick={expandAll} disabled={loading}>
+                展开全部
+              </Button>
+              <Button variant="outline" onClick={collapseAll} disabled={loading}>
+                折叠全部
+              </Button>
+              <Button onClick={openCreateDialog}>
+                <PlusIcon />
+                新建标签
+              </Button>
+            </>
+          }
+        >
+          <div className="relative w-full sm:w-72">
             <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={keywordInput}
@@ -558,23 +583,8 @@ export default function DashboardTagsPage() {
             <SearchIcon />
             查询
           </Button>
-          <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
-            <RefreshCwIcon className={loading ? "animate-spin" : ""} />
-            刷新
-          </Button>
-          <Button variant="outline" onClick={expandAll} disabled={loading}>
-            展开全部
-          </Button>
-          <Button variant="outline" onClick={collapseAll} disabled={loading}>
-            折叠全部
-          </Button>
-          <Button onClick={openCreateDialog}>
-            <PlusIcon />
-            新建
-          </Button>
-        </div>
-        <div className="space-y-4">
-          <div className="overflow-hidden rounded-2xl border bg-background">
+        </DashboardToolbar>
+        <DashboardTableShell>
             <DndContext
               sensors={sensors}
               collisionDetection={closestCenter}
@@ -610,19 +620,19 @@ export default function DashboardTagsPage() {
                       />
                     ))}
                   </SortableContext>
-                  {!loading && flatList.length === 0 ? (
-                    <TableRow>
-                      <TableCell colSpan={6} className="py-12 text-center text-muted-foreground">
-                        没有匹配的标签
-                      </TableCell>
-                    </TableRow>
+                  {loading || flatList.length === 0 ? (
+                    <DashboardTableStateRow
+                      colSpan={6}
+                      loading={loading}
+                      loadingText="正在加载标签..."
+                      emptyText="没有匹配的标签"
+                    />
                   ) : null}
                 </TableBody>
               </Table>
             </DndContext>
-          </div>
-        </div>
-      </div>
+        </DashboardTableShell>
+      </DashboardPage>
       <EditDialog
         open={dialogOpen}
         saving={saving}
diff --git a/web/components/dashboard-page.tsx b/web/components/dashboard-page.tsx
new file mode 100644
index 0000000..bf80f43
--- /dev/null
+++ b/web/components/dashboard-page.tsx
@@ -0,0 +1,121 @@
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+import { TableCell, TableRow } from "@/components/ui/table"
+
+export function DashboardPage({
+  className,
+  children,
+}: {
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <div className={cn("flex flex-1 flex-col gap-5 p-4 lg:p-6", className)}>
+      {children}
+    </div>
+  )
+}
+
+export function DashboardPageHeader({
+  title,
+  description,
+  actions,
+}: {
+  title: string
+  description?: ReactNode
+  actions?: ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between">
+      <div className="min-w-0 space-y-1">
+        <h1 className="truncate text-xl font-semibold tracking-tight">{title}</h1>
+        {description ? (
+          <div className="text-sm leading-6 text-muted-foreground">
+            {description}
+          </div>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>
+      ) : null}
+    </div>
+  )
+}
+
+export function DashboardToolbar({
+  className,
+  actions,
+  children,
+}: {
+  className?: string
+  actions?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3 rounded-lg border bg-card p-3 lg:flex-row lg:items-center lg:justify-between",
+        className
+      )}
+    >
+      <div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+        {children}
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>
+      ) : null}
+    </div>
+  )
+}
+
+export function DashboardTableShell({
+  className,
+  pagination,
+  children,
+}: {
+  className?: string
+  pagination?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="overflow-hidden rounded-lg border bg-card text-card-foreground">
+        {children}
+      </div>
+      {pagination ? <div>{pagination}</div> : null}
+    </div>
+  )
+}
+
+export function DashboardTableStateRow({
+  colSpan,
+  loading,
+  loadingText = "正在加载数据...",
+  emptyText = "暂无数据",
+}: {
+  colSpan: number
+  loading?: boolean
+  loadingText?: string
+  emptyText?: string
+}) {
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} className="py-12 text-center text-muted-foreground">
+        {loading ? loadingText : emptyText}
+      </TableCell>
+    </TableRow>
+  )
+}
+
+export function DashboardTableSummary({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return (
+    <div className="flex items-center justify-between text-sm text-muted-foreground">
+      {children}
+    </div>
+  )
+}