refactor(ui): [UI7-1] 为其余配置与边缘页面应用新版空壳布局

client/src/pages/WorkflowTasksPage.tsx

@@ -4,6 +4,9 @@ import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { fetchWorkflowTasks } from "../api/workflow";
 import { PageHeader } from "../components/common/PageHeader";
+import { Pagination } from "../components/common/Pagination";
+import { StatusBadge } from "../components/common/StatusBadge";
+import { TableSkeleton } from "../components/common/TableSkeleton";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
@@ -60,16 +63,16 @@ export function WorkflowTasksPage() {
           </TabsList>
         </Tabs>
 
-        {query.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+        {query.isLoading ? <TableSkeleton columns={5} rows={5} /> : null}
 
         {query.isError ? (
           <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
             {isApiError(query.error)
               ? `${query.error.code}: ${mapApiErrorMessage(
-                  query.error.code,
-                  query.error.details,
-                  query.error.message,
-                )}`
+                query.error.code,
+                query.error.details,
+                query.error.message,
+              )}`
               : "加载待办失败，请稍后重试"}
           </p>
         ) : null}
@@ -97,7 +100,7 @@ export function WorkflowTasksPage() {
                       <TableCell className="font-mono text-xs">
                         {task.workflowInstance?.entityId}
                       </TableCell>
-                      <TableCell>{task.status}</TableCell>
+                      <TableCell><StatusBadge status={task.status} /></TableCell>
                       <TableCell>{new Date(task.createdAt).toLocaleString()}</TableCell>
                       <TableCell>
                         <Button
@@ -123,33 +126,12 @@ export function WorkflowTasksPage() {
           </div>
         ) : null}
 
-        <div className="flex items-center justify-between text-sm">
-          <span>
-            第 {page} / {totalPages} 页
-          </span>
-          <div className="flex gap-2">
-            <Button
-              data-testid="workflow-tasks-prev-page"
-              variant="secondary"
-              disabled={page <= 1}
-              onClick={() => setSearchParams({ status, page: String(Math.max(1, page - 1)) })}
-              type="button"
-            >
-              上一页
-            </Button>
-            <Button
-              data-testid="workflow-tasks-next-page"
-              variant="secondary"
-              disabled={page >= totalPages}
-              onClick={() =>
-                setSearchParams({ status, page: String(Math.min(totalPages, page + 1)) })
-              }
-              type="button"
-            >
-              下一页
-            </Button>
-          </div>
-        </div>
+        <Pagination
+          page={page}
+          totalPages={totalPages}
+          onPageChange={(p) => setSearchParams({ status, page: String(p) })}
+          testIdPrefix="workflow-tasks"
+        />
       </Card>
     </div>
   );