feat: 全站 PageShell 设计系统与专业 UI 统一

- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架 - index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩） - 全站路由页接入 PageShell，云账单三 Tab 为标杆 - 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化 - 登录页/侧栏/顶栏去渐变光球，企业克制风 - 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
2026-07-01 12:45:38 +08:00
1 parent 1acb0c49af
commit e363ded445
@@ -2,7 +2,6 @@ import { useState, useEffect, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from '@tanstack/react-query';
 import { cn } from '@/lib/utils';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -55,6 +54,9 @@ import { ServerForm, EMPTY_FORM, type ServerFormData } from './ServerForm';
 import { getTags } from './serverHelpers';
 import { ServerTableRow } from './ServerTableRow';
 import { usePermission } from '@/hooks/usePermission';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { Server } from 'lucide-react';

 export function ServerManager() {
  const { t } = useTranslation();
@@ -362,125 +364,99 @@ export function ServerManager() {
    toast.success(t('server.exported', { count: servers.length }));
  };

-  const colSpanCount = 8;
+  const colSpanCount = 9;
+
+  const tableToolbar = (
+    <>
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative w-64">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+          <Input
+            placeholder={t('server.searchPlaceholder')}
+            value={searchQuery}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="pl-9 h-9 dg-input"
+          />
+        </div>
+        <Select value={statusFilter} onValueChange={handleStatusFilter}>
+          <SelectTrigger className="w-32 h-9 dg-input">
+            <SelectValue placeholder={t('common.status')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('server.allStatus')}</SelectItem>
+            <SelectItem value="running">{t('common.running')}</SelectItem>
+            <SelectItem value="stopped">{t('common.stopped')}</SelectItem>
+            <SelectItem value="maintenance">{t('common.maintenance')}</SelectItem>
+            <SelectItem value="offline">{t('common.offline')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      {selectedServers.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm dg-text-secondary">{t('server.selected', { count: selectedServers.length })}</span>
+          {hasPermission('server:delete') && (
+            <Button variant="outline" size="sm" className="dg-btn-danger dg-btn-sm" onClick={handleBatchDelete}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              {t('server.batchDelete')}
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );

  return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('server.title')}</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">{t('server.subtitle')}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-            onClick={() => refetch()}
-          >
+    <PageShell
+      variant="list"
+      title={t('server.title')}
+      subtitle={t('server.subtitle')}
+      icon={<Server className="h-5 w-5" />}
+      metrics={<ServerStatsStrip servers={servers} />}
+      actions={(
+        <>
+          <Button variant="outline" className="dg-btn-secondary" onClick={() => refetch()}>
            <RefreshCw className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
            {t('common.refresh')}
          </Button>
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-            onClick={handleExport}
-          >
+          <Button variant="outline" className="dg-btn-secondary" onClick={handleExport}>
            <Download className="h-4 w-4 mr-2" />
            {t('common.export')}
          </Button>
          {hasPermission('server:create') && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]">
-                <Upload className="h-4 w-4 mr-2" />
-                {t('server.batchImport')}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-              <DropdownMenuLabel>{t('server.importMethod')}</DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
-              <DropdownMenuItem
-                className="hover:bg-[var(--dg-bg-hover)] cursor-pointer focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]"
-                onClick={() => setCloudImportOpen(true)}
-              >
-                <Cloud className="h-4 w-4 mr-2 text-[var(--dg-blue)]" />
-                {t('server.cloudImport')}
-                <span className="ml-2 text-xs text-[var(--dg-text-muted)]">{t('server.cloudImportHint')}</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="hover:bg-[var(--dg-bg-hover)] cursor-pointer focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]"
-                onClick={() => setExcelImportOpen(true)}
-              >
-                <FileSpreadsheet className="h-4 w-4 mr-2 text-emerald-400" />
-                {t('server.csvImport')}
-                <span className="ml-2 text-xs text-[var(--dg-text-muted)]">{t('server.csvImportHint')}</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="dg-btn-secondary">
+                  <Upload className="h-4 w-4 mr-2" />
+                  {t('server.batchImport')}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>{t('server.importMethod')}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setCloudImportOpen(true)}>
+                  <Cloud className="h-4 w-4 mr-2 dg-text-blue" />
+                  {t('server.cloudImport')}
+                  <span className="ml-2 text-xs dg-text-muted">{t('server.cloudImportHint')}</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setExcelImportOpen(true)}>
+                  <FileSpreadsheet className="h-4 w-4 mr-2 dg-text-green" />
+                  {t('server.csvImport')}
+                  <span className="ml-2 text-xs dg-text-muted">{t('server.csvImportHint')}</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
          )}
          {hasPermission('server:create') && (
-            <Button
-              className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
-              onClick={openCreateForm}
-            >
+            <Button className="dg-btn-primary" onClick={openCreateForm}>
              <Plus className="h-4 w-4 mr-2" />
              {t('server.addServer')}
            </Button>
          )}
-        </div>
-      </div>
-
-      {/* Stats Cards */}
-      <ServerStatsStrip servers={servers} />
-
-      {/* Filters & Table */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          {/* Toolbar */}
-          <div className="flex items-center justify-between flex-wrap gap-4 p-4">
-            <div className="flex items-center gap-3 flex-wrap">
-              <div className="relative w-64">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-                <Input
-                  placeholder={t('server.searchPlaceholder')}
-                  value={searchQuery}
-                  onChange={(e) => handleSearch(e.target.value)}
-                  className="pl-9 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]"
-                />
-              </div>
-              <Select value={statusFilter} onValueChange={handleStatusFilter}>
-                <SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-                  <SelectValue placeholder={t('common.status')} />
-                </SelectTrigger>
-                <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-                  <SelectItem value="all">{t('server.allStatus')}</SelectItem>
-                  <SelectItem value="running">{t('common.running')}</SelectItem>
-                  <SelectItem value="stopped">{t('common.stopped')}</SelectItem>
-                  <SelectItem value="maintenance">{t('common.maintenance')}</SelectItem>
-                  <SelectItem value="offline">{t('common.offline')}</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            {selectedServers.length > 0 && (
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-[var(--dg-text-secondary)]">{t('server.selected', { count: selectedServers.length })}</span>
-                {hasPermission('server:delete') && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="border-red-500/30 text-red-400 hover:bg-red-500/10"
-                  onClick={handleBatchDelete}
-                >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  {t('server.batchDelete')}
-                </Button>
-                )}
-              </div>
-            )}
-          </div>
-
-          <div className="border-t border-[var(--dg-border)]">
+        </>
+      )}
+    >
+      <ContentPanel toolbar={tableToolbar}>
+          <div>
            <Table>
              <TableHeader>
                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -576,8 +552,7 @@ export function ServerManager() {
              </Button>
            </div>
          </div>
-        </CardContent>
-      </Card>
+      </ContentPanel>

      {/* 创建/编辑服务器 Dialog */}
      <ServerForm
@@ -625,6 +600,6 @@ export function ServerManager() {
        serverId={fileBrowserServer?.id ?? null}
        serverName={fileBrowserServer?.name ?? ''}
      />
-    </div>
+    </PageShell>
  );
 }