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
@@ -245,7 +245,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                step === s.id
                  ? 'bg-blue-600 text-white'
                  : step > s.id
-                    ? 'bg-emerald-600/20 text-emerald-400'
+                    ? 'bg-emerald-600/20 dg-text-green'
                    : 'bg-[var(--dg-bg-secondary)] text-[var(--dg-text-muted)]'
              }`}>
                <s.icon className="h-4 w-4" />
@@ -304,7 +304,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                  >
                    <CardContent className="p-3 flex items-center justify-between">
                      <div className="flex items-center gap-3">
-                        <Key className="h-5 w-5 text-blue-400" />
+                        <Key className="h-5 w-5 dg-text-blue" />
                        <div>
                          <p className="font-medium text-[var(--dg-text-primary)]">{account.name}</p>
                          <p className="text-xs text-[var(--dg-text-muted)]">
@@ -313,7 +313,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                        </div>
                      </div>
                      <div className="text-right">
-                        <Badge className="bg-emerald-500/20 text-emerald-400 border-0">
+                        <Badge className="bg-emerald-500/20 dg-text-green border-0">
                          {account.region_count ?? account.regionCount ?? 0} 区域
                        </Badge>
                        <p className="text-xs text-[var(--dg-text-muted)] mt-1">{account.server_count ?? account.serverCount ?? 0} 服务器</p>
@@ -355,7 +355,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {

            {isSyncingRegions ? (
              <div className="text-center py-12">
-                <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin text-blue-400" />
+                <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin dg-text-blue" />
                <p className="text-[var(--dg-text-secondary)]">正在从云平台同步区域列表...</p>
              </div>
            ) : regions.length === 0 ? (
@@ -365,7 +365,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                <Button
                  variant="outline"
                  size="sm"
-                  className="mt-3 border-[var(--dg-border)] text-blue-400"
+                  className="mt-3 border-[var(--dg-border)] dg-text-blue"
                  onClick={() => selectedAccount && syncRegions(selectedAccount.id)}
                >
                  <RefreshCw className="h-3 w-3 mr-1" />
@@ -422,7 +422,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                          <td className="px-3 py-2">
                            <Checkbox checked={selectedRegions.includes(region.code)} />
                          </td>
-                          <td className="px-3 py-2 text-sm text-blue-400 font-mono">{region.code}</td>
+                          <td className="px-3 py-2 text-sm dg-text-blue font-mono">{region.code}</td>
                          <td className="px-3 py-2 text-sm text-[var(--dg-text-primary)]">{region.name}</td>
                          <td className="px-3 py-2 text-xs text-[var(--dg-text-muted)] font-mono truncate max-w-[200px]">{region.endpoint || '-'}</td>
                        </tr>
@@ -441,14 +441,14 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
            {importResult ? (
              /* 导入结果 */
              <div className="text-center py-12">
-                <CheckCircle className="h-12 w-12 mx-auto mb-3 text-emerald-400" />
+                <CheckCircle className="h-12 w-12 mx-auto mb-3 dg-text-green" />
                <p className="text-lg font-medium text-[var(--dg-text-primary)]">导入完成</p>
                <div className="flex items-center justify-center gap-6 mt-4">
-                  <Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-base px-4 py-1">
+                  <Badge className="bg-emerald-500/20 dg-text-green border-0 text-base px-4 py-1">
                    成功导入 {importResult.imported} 台
                  </Badge>
                  {importResult.skipped > 0 && (
-                    <Badge className="bg-amber-500/20 text-amber-400 border-0 text-base px-4 py-1">
+                    <Badge className="bg-amber-500/20 dg-text-yellow border-0 text-base px-4 py-1">
                      跳过 {importResult.skipped} 台（已存在）
                    </Badge>
                  )}
@@ -469,7 +469,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                        <Button variant="outline" size="sm" onClick={handleSelectAllServers} className="border-[var(--dg-border)]">
                          {selectedServers.length === cloudServers.length && cloudServers.length > 0 ? '取消全选' : '全选'}
                        </Button>
-                        <Badge className="bg-blue-500/20 text-blue-400 border-0">
+                        <Badge className="bg-blue-500/20 dg-text-blue border-0">
                          已选 {selectedServers.length} 台
                        </Badge>
                      </>
@@ -479,7 +479,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                      size="sm"
                      onClick={discoverInstances}
                      disabled={isDiscovering || selectedRegions.length === 0}
-                      className="border-[var(--dg-border)] text-blue-400"
+                      className="border-[var(--dg-border)] dg-text-blue"
                    >
                      <RefreshCw className={`h-3 w-3 mr-1 ${isDiscovering ? 'animate-spin' : ''}`} />
                      {isDiscovering ? '发现中...' : cloudServers.length > 0 ? '重新发现' : '发现主机'}
@@ -502,7 +502,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {

                {/* 发现错误提示 */}
                {discoverErrors.length > 0 && (
-                  <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-400 text-sm">
+                  <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 dg-text-yellow text-sm">
                    <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="font-medium">部分区域发现失败：</p>
@@ -516,7 +516,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                {/* 主机列表 */}
                {isDiscovering ? (
                  <div className="text-center py-12">
-                    <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin text-blue-400" />
+                    <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin dg-text-blue" />
                    <p className="text-[var(--dg-text-secondary)]">正在发现云主机，请稍候...</p>
                    <p className="text-xs text-[var(--dg-text-muted)] mt-1">正在逐区域查询，可能需要数秒</p>
                  </div>
@@ -315,7 +315,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
-                      <FileSpreadsheet className="h-5 w-5 text-emerald-400" />
+                      <FileSpreadsheet className="h-5 w-5 dg-text-green" />
                    </div>
                    <div>
                      <p className="font-medium text-[var(--dg-text-primary)]">主机导入模板</p>
@@ -417,7 +417,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
              <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
                <CardContent className="p-3 flex items-center justify-between">
                  <div className="flex items-center gap-3">
-                    <FileSpreadsheet className="h-8 w-8 text-emerald-400" />
+                    <FileSpreadsheet className="h-8 w-8 dg-text-green" />
                    <div>
                      <p className="text-sm text-[var(--dg-text-primary)]">{selectedFile.name}</p>
                      <p className="text-xs text-[var(--dg-text-muted)]">{(selectedFile.size / 1024).toFixed(2)} KB</p>
@@ -426,7 +426,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
                  <Button
                    variant="ghost"
                    size="icon"
-                    className="text-[var(--dg-text-muted)] hover:text-red-400"
+                    className="text-[var(--dg-text-muted)] hover:dg-text-red"
                    onClick={() => setSelectedFile(null)}
                  >
                    <X className="h-4 w-4" />
@@ -450,18 +450,18 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
            <div className="flex items-center justify-between">
              <p className="text-[var(--dg-text-secondary)] text-sm">数据预览</p>
              <div className="flex items-center gap-2">
-                <Badge className="bg-emerald-500/20 text-emerald-400 border-0">
+                <Badge className="bg-emerald-500/20 dg-text-green border-0">
                  <Check className="h-3 w-3 mr-1" />
                  {validCount} 有效
                </Badge>
                {warningCount > 0 && (
-                  <Badge className="bg-amber-500/20 text-amber-400 border-0">
+                  <Badge className="bg-amber-500/20 dg-text-yellow border-0">
                    <AlertCircle className="h-3 w-3 mr-1" />
                    {warningCount} 警告
                  </Badge>
                )}
                {errorCount > 0 && (
-                  <Badge className="bg-red-500/20 text-red-400 border-0">
+                  <Badge className="bg-red-500/20 dg-text-red border-0">
                    <X className="h-3 w-3 mr-1" />
                    {errorCount} 错误
                  </Badge>
@@ -488,19 +488,19 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
                      <td className="px-3 py-2">
                        <div className="flex items-center gap-1">
                          {row.status === 'valid' && (
-                            <Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-xs">
+                            <Badge className="bg-emerald-500/20 dg-text-green border-0 text-xs">
                              <Check className="h-3 w-3 mr-1" />
                              {row.message}
                            </Badge>
                          )}
                          {row.status === 'warning' && (
-                            <Badge className="bg-amber-500/20 text-amber-400 border-0 text-xs">
+                            <Badge className="bg-amber-500/20 dg-text-yellow border-0 text-xs">
                              <AlertCircle className="h-3 w-3 mr-1" />
                              {row.message}
                            </Badge>
                          )}
                          {row.status === 'error' && (
-                            <Badge className="bg-red-500/20 text-red-400 border-0 text-xs">
+                            <Badge className="bg-red-500/20 dg-text-red border-0 text-xs">
                              <X className="h-3 w-3 mr-1" />
                              {row.message}
                            </Badge>
@@ -515,7 +515,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {

            {errorCount > 0 && (
              <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30">
-                <div className="flex items-center gap-2 text-red-400">
+                <div className="flex items-center gap-2 dg-text-red">
                  <AlertCircle className="h-4 w-4" />
                  <span className="text-sm">存在 {errorCount} 条错误数据，请修正后重新上传</span>
                </div>
@@ -210,7 +210,7 @@ export function ServerFileBrowser({ open, onOpenChange, serverId, serverName }:
            <FolderPlus className="h-3.5 w-3.5 mr-1" />新建目录
          </Button>
          {error && (
-            <Badge variant="outline" className="border-red-500/30 text-red-400 ml-auto">
+            <Badge variant="outline" className="border-red-500/30 dg-text-red ml-auto">
              <X className="h-3 w-3 mr-1 cursor-pointer" onClick={() => setError('')} />
              {error}
            </Badge>
@@ -285,7 +285,7 @@ export function ServerFileBrowser({ open, onOpenChange, serverId, serverName }:
                  >
                    <td className="py-2 pl-4">
                      {item.is_dir ? (
-                        <Folder className="h-4 w-4 text-amber-400" />
+                        <Folder className="h-4 w-4 dg-text-yellow" />
                      ) : (
                        <File className="h-4 w-4 text-sky-400" />
                      )}
@@ -320,7 +320,7 @@ export function ServerFileBrowser({ open, onOpenChange, serverId, serverName }:
                        )}
                        <button
                          onClick={(e) => { e.stopPropagation(); handleDelete(item.path, item.is_dir); }}
-                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-red-400 hover:text-red-300"
+                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] dg-text-red hover:dg-text-red"
                          title="删除"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
@@ -157,7 +157,7 @@ export function ServerForm({
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-1.5">
              <Label className="text-[var(--dg-text-secondary)]">
-                主机名 <span className="text-red-400">*</span>
+                主机名 <span className="dg-text-red">*</span>
              </Label>
              <Input
                placeholder="web-server-01"
@@ -168,7 +168,7 @@ export function ServerForm({
            </div>
            <div className="space-y-1.5">
              <Label className="text-[var(--dg-text-secondary)]">
-                IP地址 <span className="text-red-400">*</span>
+                IP地址 <span className="dg-text-red">*</span>
              </Label>
              <Input
                placeholder="10.0.0.1"
@@ -206,7 +206,7 @@ export function ServerForm({
          <div className="space-y-1.5">
            <Label className="text-[var(--dg-text-secondary)] flex items-center gap-1.5">
              <Key className="h-3.5 w-3.5" /> SSH 凭证
-              {!editingId && !formData.credential_id && <span className="text-red-400 ml-1">*</span>}
+              {!editingId && !formData.credential_id && <span className="dg-text-red ml-1">*</span>}
            </Label>
            <Select
              value={formData.credential_id ? String(formData.credential_id) : ''}
@@ -219,7 +219,7 @@ export function ServerForm({
                {sshCredentials.map((cred) => (
                  <SelectItem key={cred.id} value={String(cred.id)}>
                    <span className="flex items-center gap-2">
-                      <Shield className="h-3 w-3 text-blue-400" />
+                      <Shield className="h-3 w-3 dg-text-blue" />
                      {cred.name} ({cred.username}@{ (cred.auth_type || '').toLowerCase() === 'key' ? '密钥' : '密码'})
                    </span>
                  </SelectItem>
@@ -243,7 +243,7 @@ export function ServerForm({
            )}

            {formData.credential_id && (
-              <p className="text-[10px] text-green-400/70">已关联凭证，登录信息从凭证自动获取（登录用户和认证方式由凭证决定）</p>
+              <p className="text-[10px] dg-text-green/70">已关联凭证，登录信息从凭证自动获取（登录用户和认证方式由凭证决定）</p>
            )}
          </div>

@@ -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>
  );
 }
@@ -196,7 +196,7 @@ export function ServerTableRow({
              <>
              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
              <DropdownMenuItem
-                className="text-red-400 focus:bg-[var(--dg-bg-hover)] focus:text-red-400 cursor-pointer"
+                className="dg-text-red focus:bg-[var(--dg-bg-hover)] focus:dg-text-red cursor-pointer"
                onClick={() => onDelete(server.id)}
              >
                <Trash2 className="h-4 w-4 mr-2" />
@@ -224,7 +224,7 @@ export function TerminalDialog({
        {/* 凭据选择器（无认证凭据时显示） */} 
        {!authReady && (
          <div className="p-6 flex flex-col items-center justify-center gap-4" style={{ height: '480px' }}>
-            <Shield className="h-12 w-12 text-amber-400" />
+            <Shield className="h-12 w-12 dg-text-yellow" />
            <div className="text-center">
              <p className="text-[var(--dg-text-primary)] font-medium mb-1">服务器未配置认证凭据</p>
              <p className="text-sm text-[var(--dg-text-muted)]">请选择一个凭据用于 SSH 连接</p>
@@ -29,7 +29,7 @@ export function getStatusBadge(status: ServerType['status']) {
  switch (status) {
    case 'running':
      return (
-        <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+        <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
          <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5 animate-pulse" />
          运行中
        </Badge>
@@ -42,14 +42,14 @@ export function getStatusBadge(status: ServerType['status']) {
      );
    case 'maintenance':
      return (
-        <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+        <Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
          <div className="w-1.5 h-1.5 rounded-full bg-amber-400 mr-1.5" />
          维护中
        </Badge>
      );
    case 'offline':
      return (
-        <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+        <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
          离线
        </Badge>
      );