feat: refactor dashboard components to use new layout structure and improve UI consistency

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() {
     </>
   )
 }
-