refactor(ui): 深度翻新仪表盘与边缘配置页的骨架与组件

client/src/pages/BudgetsPage.tsx

@@ -138,11 +138,11 @@ export function BudgetsPage() {
         </p>
       ) : null}
 
-      <Card className="space-y-3 p-6">
+      <div className="card-std space-y-3">
         <h3 className="text-base font-semibold text-zinc-900">筛选条件</h3>
         <div className="grid gap-3 md:grid-cols-3">
           <select
-            className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+            className="select-std"
             value={status}
             onChange={(event) => {
               setStatus(event.target.value as "active" | "archived" | "");
@@ -155,7 +155,7 @@ export function BudgetsPage() {
           </select>
 
           <select
-            className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+            className="select-std"
             value={departmentId}
             onChange={(event) => {
               setDepartmentId(event.target.value);
@@ -178,26 +178,26 @@ export function BudgetsPage() {
             刷新列表
           </Button>
         </div>
-      </Card>
+      </div>
 
       {canManageBudget ? (
-        <Card className="space-y-3 p-6">
+        <div className="card-std space-y-3">
           <h3 className="text-base font-semibold text-zinc-900">新建预算池</h3>
           <div className="grid gap-3 md:grid-cols-3">
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               placeholder="编码（例如 BGT-2026-RD）"
               value={code}
               onChange={(event) => setCode(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               placeholder="名称"
               value={name}
               onChange={(event) => setName(event.target.value)}
             />
             <select
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="select-std"
               value={formDepartmentId}
               onChange={(event) => setFormDepartmentId(event.target.value)}
             >
@@ -209,25 +209,25 @@ export function BudgetsPage() {
               ))}
             </select>
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="date"
               value={periodStart}
               onChange={(event) => setPeriodStart(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="date"
               value={periodEnd}
               onChange={(event) => setPeriodEnd(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               placeholder="预算总额（例如 100000.00）"
               value={allocatedAmount}
               onChange={(event) => setAllocatedAmount(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="number"
               min={1}
               max={100}
@@ -250,10 +250,10 @@ export function BudgetsPage() {
           >
             {createMutation.isPending ? "创建中..." : "创建预算池"}
           </Button>
-        </Card>
+        </div>
       ) : null}
 
-      <Card className="space-y-3 p-6">
+      <div className="card-std space-y-3">
         <h3 className="text-base font-semibold text-zinc-900">预算池列表</h3>
 
         {budgetsQuery.isLoading ? <TableSkeleton columns={7} rows={4} /> : null}
@@ -319,7 +319,7 @@ export function BudgetsPage() {
             <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
           </>
         ) : null}
-      </Card>
+      </div>
 
       <ConfirmDialog
         open={Boolean(confirmArchiveId)}