refactor(frontend): P1-P2 续 — API 子模块化、大组件拆分、Query 铺开

- api/server/ 与 api/cloud/ 子目录拆分，保持 @/api 导入不变 - hooks/api 新增 useCredentials、usePromDatasources，增强 useServers - 拆分 CredentialManager、DeploymentWorkload、PrometheusDatasourceManager - ServerManager、CredentialManager、PromDs 接入 TanStack Query
2026-06-26 00:22:50 +08:00
1 parent f45e203e21
commit 480e677042
@@ -0,0 +1,180 @@
+import { useState } from 'react';
+import {
+  Key, Lock, Eye, EyeOff, Copy,
+  CheckCircle2, XCircle, AlertTriangle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { toast } from 'sonner';
+import { useCredentialDetail } from '@/hooks/api';
+import type { SecretType } from './types';
+import { TYPE_CONFIG, TYPE_BADGE_CLASS } from './constants';
+
+export interface CredDetailDialogProps {
+  open: boolean;
+  onClose: () => void;
+  credId: number | null;
+}
+
+// 凭据详情弹窗 // Logan.Li
+export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProps) {
+  const [showMap, setShowMap] = useState<Record<string, boolean>>({});
+  const { data: detail, isLoading: loading } = useCredentialDetail(credId, open);
+
+  if (!open || !credId) return null;
+
+  const toggleShow = (key: string) => setShowMap(prev => ({ ...prev, [key]: !prev[key] }));
+  const copyValue = (val: string) => { navigator.clipboard.writeText(val); toast.success('已复制'); };
+
+  const st = detail?.secret_type as SecretType;
+  const cfg = TYPE_CONFIG[st];
+  const content = (detail as Record<string, unknown>)?.content as Record<string, unknown> || {};
+
+  const Field = ({ label, value, sensitive, fieldKey }: { label: string; value: unknown; sensitive?: boolean; fieldKey?: string }) => {
+    if (value === undefined || value === null || value === '') return null;
+    const isLong = typeof value === 'string' && value.length > 80;
+    const show = fieldKey ? showMap[fieldKey] : false;
+    return (
+      <div className="mb-3">
+        <div className="flex items-center gap-2 text-xs text-[var(--dg-text-muted)] mb-1">
+          <Lock className="h-3 w-3" />{label}
+        </div>
+        <div className="flex gap-1">
+          {isLong ? (
+            <textarea readOnly value={sensitive && !show ? '••••••••' : String(value)}
+              className="flex-1 rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] p-2 text-xs font-mono resize-none"
+              rows={4} />
+          ) : (
+            <Input readOnly value={sensitive && !show ? '••••••••' : String(value)}
+              className="flex-1 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-xs" />
+          )}
+          <div className="flex flex-col gap-0.5 shrink-0">
+            {sensitive && (
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => toggleShow(fieldKey!)}>
+                {show ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+              </Button>
+            )}
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => copyValue(String(value))}>
+              <Copy className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const detailRecord = detail as Record<string, unknown> | undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[680px] max-h-[85vh] overflow-y-auto bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <DialogHeader>
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            {cfg ? <cfg.icon className={`h-5 w-5 ${cfg.color}`} /> : <Key className="h-5 w-5 text-[var(--dg-text-muted)]" />}
+            凭据详情
+          </DialogTitle>
+        </DialogHeader>
+        {loading ? (
+          <div className="text-center py-8 text-[var(--dg-text-muted)]">加载中...</div>
+        ) : detail ? (
+          <div className="space-y-4">
+            {/* 基本信息 // Logan.Li */}
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div><span className="text-[var(--dg-text-muted)]">名称：</span><span className="text-[var(--dg-text-primary)] font-medium">{detailRecord?.name as string}</span></div>
+              <div><span className="text-[var(--dg-text-muted)]">类型：</span>
+                <Badge variant="outline" className={`text-xs ml-1 ${TYPE_BADGE_CLASS[st] || ''}`}>{cfg?.label || st}</Badge>
+              </div>
+              <div><span className="text-[var(--dg-text-muted)]">状态：</span>
+                {detailRecord?.is_active
+                  ? <Badge className="bg-green-500/20 text-green-400 text-xs ml-1"><CheckCircle2 className="h-3 w-3 mr-0.5" />启用</Badge>
+                  : <Badge className="bg-red-500/20 text-red-400 text-xs ml-1"><XCircle className="h-3 w-3 mr-0.5" />禁用</Badge>}
+                {detailRecord?.expires_at && new Date(detailRecord.expires_at as string) < new Date() && (
+                  <Badge className="bg-yellow-500/20 text-yellow-400 text-xs ml-1"><AlertTriangle className="h-3 w-3 mr-0.5" />已过期</Badge>
+                )}
+              </div>
+              <div className="col-span-2 cursor-pointer" onClick={() => copyValue((detailRecord?.env_prefix as string) || '')}>
+                <span className="text-[var(--dg-text-muted)]">引用ID：</span>
+                <code className="text-[var(--dg-blue)] font-mono text-xs">{detailRecord?.env_prefix as string || '无'}</code>
+                <Copy className="h-3 w-3 inline ml-1 text-[var(--dg-text-muted)]" />
+              </div>
+              {(detailRecord?.tags as string[])?.length > 0 && (
+                <div className="col-span-2">
+                  <span className="text-[var(--dg-text-muted)]">标签：</span>
+                  {(detailRecord?.tags as string[]).map((t: string) => (
+                    <Badge key={t} variant="outline" className="text-xs ml-1 border-[var(--dg-border)]">{t}</Badge>
+                  ))}
+                </div>
+              )}
+              <div className="col-span-2"><span className="text-[var(--dg-text-muted)]">描述：</span><span className="text-[var(--dg-text-secondary)]">{(detailRecord?.description as string) || '无'}</span></div>
+              <div><span className="text-[var(--dg-text-muted)]">创建：</span><span className="text-[var(--dg-text-secondary)] text-xs">{new Date(detailRecord?.created_at as string).toLocaleString()}</span></div>
+              <div><span className="text-[var(--dg-text-muted)]">更新：</span><span className="text-[var(--dg-text-secondary)] text-xs">{new Date(detailRecord?.updated_at as string).toLocaleString()}</span></div>
+            </div>
+
+            {/* 密钥数据 // Logan.Li */}
+            <div className="border-t border-[var(--dg-border)] pt-3">
+              <div className="flex items-center gap-2 text-sm text-[var(--dg-text-primary)] font-medium mb-3">
+                <Key className="h-4 w-4 text-yellow-500" />密钥数据
+              </div>
+              <div className="p-3 rounded-md bg-yellow-500/5 border border-yellow-500/20 mb-3">
+                <p className="text-xs text-yellow-400/80">以下内容包含敏感信息，请妥善保管，不要泄露给他人。</p>
+              </div>
+
+              {st === 'ssh' && <>
+                <Field label="SSH 用户" value={content.ssh_user} />
+                <Field label="SSH 端口" value={content.ssh_port} />
+                <Field label="SSH 密码" value={content.password} sensitive fieldKey="ssh_password" />
+                <Field label="私钥" value={content.private_key} sensitive fieldKey="ssh_private_key" />
+                <Field label="公钥" value={content.public_key} fieldKey="ssh_public_key" />
+              </>}
+              {st === 'docker' && <>
+                <Field label="Registry 地址" value={content.server} />
+                <Field label="用户名" value={content.username} />
+                <Field label="密码" value={content.password} sensitive fieldKey="docker_password" />
+              </>}
+              {st === 'tls' && <>
+                <Field label="证书" value={content.cert} sensitive fieldKey="tls_cert" />
+                <Field label="私钥" value={content.key} sensitive fieldKey="tls_key" />
+                <Field label="CA 证书" value={content.ca} sensitive fieldKey="tls_ca" />
+              </>}
+              {st === 'aksk' && <>
+                <Field label="Access Key ID" value={content.access_key} />
+                <Field label="Secret Access Key" value={content.secret_key} sensitive fieldKey="aksk_secret_key" />
+              </>}
+              {st === 'database' && <>
+                <Field label="数据库类型" value={String(content.db_type || '').toUpperCase()} />
+                <Field label="主机" value={content.host} />
+                <Field label="端口" value={content.port} />
+                <Field label="数据库名" value={content.db_name} />
+                <Field label="用户名" value={content.username} />
+                <Field label="密码" value={content.password} sensitive fieldKey="db_password" />
+              </>}
+              {st === 'api' && <>
+                <Field label="API Key" value={content.api_key} sensitive fieldKey="api_key" />
+                <Field label="API 端点" value={content.endpoint} />
+              </>}
+              {st === 'generic' && <>
+                <Field label="Key" value={content.generic_key} />
+                <Field label="Value" value={content.generic_value} sensitive fieldKey="generic_value" />
+              </>}
+            </div>
+
+            {/* 引用提示 // Logan.Li */}
+            <div className="border-t border-[var(--dg-border)] pt-3">
+              <div className="text-xs text-[var(--dg-text-muted)] mb-2">在流水线/脚本中引用此凭据：</div>
+              <code className="text-xs bg-[var(--dg-bg-tertiary)] px-3 py-1.5 rounded block text-[var(--dg-blue)]">
+                {'${'}{String(detailRecord?.variable_name || String(detailRecord?.name || '').toUpperCase().replace(/[^A-Z0-9]/g, '_'))}{'}'}
+              </code>
+            </div>
+          </div>
+        ) : (
+          <div className="text-center py-8 text-[var(--dg-text-muted)]">未找到凭据数据</div>
+        )}
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>关闭</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,395 @@
+import { useState, useEffect } from 'react';
+import { Key, Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { toast } from 'sonner';
+import { credentialApi } from '@/api';
+import type { Credential, SecretType } from './types';
+import { TYPE_CONFIG } from './constants';
+
+export interface CredFormDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSaved: () => void;
+  editData: Credential | null;
+}
+
+// 凭据新增/编辑弹窗 // Logan.Li
+export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDialogProps) {
+  const isEdit = !!editData;
+  const [name, setName] = useState('');
+  const [varName, setVarName] = useState('');
+  const [secretType, setSecretType] = useState<SecretType>('ssh');
+  const [description, setDescription] = useState('');
+  const [tags, setTags] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [showMap, setShowMap] = useState<Record<string, boolean>>({});
+
+  // SSH 字段 // Logan.Li
+  const [sshUser, setSshUser] = useState('root');
+  const [sshPort, setSshPort] = useState('22');
+  const [sshPassword, setSshPassword] = useState('');
+  const [sshPrivateKey, setSshPrivateKey] = useState('');
+  const [sshPublicKey, setSshPublicKey] = useState('');
+  // Docker 字段
+  const [dockerServer, setDockerServer] = useState('');
+  const [dockerUsername, setDockerUsername] = useState('');
+  const [dockerPassword, setDockerPassword] = useState('');
+  // TLS 字段
+  const [tlsCert, setTlsCert] = useState('');
+  const [tlsKey, setTlsKey] = useState('');
+  const [tlsCa, setTlsCa] = useState('');
+  // AKSK 字段
+  const [, setAkskProvider] = useState('');
+  const [akskAccessKey, setAkskAccessKey] = useState('');
+  const [akskSecretKey, setAkskSecretKey] = useState('');
+  const [, setAkskRegion] = useState('');
+  // 数据库字段
+  const [dbType, setDbType] = useState('mysql');
+  const [dbHost, setDbHost] = useState('');
+  const [dbPort, setDbPort] = useState('3306');
+  const [dbName, setDbName] = useState('');
+  const [dbUsername, setDbUsername] = useState('');
+  const [dbPassword, setDbPassword] = useState('');
+  // API 字段
+  const [apiKey, setApiKey] = useState('');
+  const [apiEndpoint, setApiEndpoint] = useState('');
+  // 通用字段
+  const [genericKey, setGenericKey] = useState('');
+  const [genericValue, setGenericValue] = useState('');
+
+  useEffect(() => {
+    if (!open) return;
+    if (editData) {
+      setName(editData.name);
+      setVarName(editData.variable_name || '');
+      setSecretType(editData.secret_type);
+      setDescription(editData.description || '');
+      setTags((editData.tags || []).join(', '));
+      setIsActive(editData.is_active);
+      // 编辑时不预填类型字段，仅修改用户填写的项 // Logan.Li
+      setSshUser(''); setSshPort('22'); setSshPassword(''); setSshPrivateKey(''); setSshPublicKey('');
+      setDockerServer(''); setDockerUsername(''); setDockerPassword('');
+      setTlsCert(''); setTlsKey(''); setTlsCa('');
+      setAkskProvider(''); setAkskAccessKey(''); setAkskSecretKey(''); setAkskRegion('');
+      setDbType('mysql'); setDbHost(''); setDbPort('3306'); setDbName(''); setDbUsername(''); setDbPassword('');
+      setApiKey(''); setApiEndpoint('');
+      setGenericKey(''); setGenericValue('');
+    } else {
+      setName(''); setVarName(''); setSecretType('ssh'); setDescription(''); setTags(''); setIsActive(true);
+      setSshUser('root'); setSshPort('22'); setSshPassword(''); setSshPrivateKey(''); setSshPublicKey('');
+      setDockerServer(''); setDockerUsername(''); setDockerPassword('');
+      setTlsCert(''); setTlsKey(''); setTlsCa('');
+      setAkskProvider(''); setAkskAccessKey(''); setAkskSecretKey(''); setAkskRegion('');
+      setDbType('mysql'); setDbHost(''); setDbPort('3306'); setDbName(''); setDbUsername(''); setDbPassword('');
+      setApiKey(''); setApiEndpoint('');
+      setGenericKey(''); setGenericValue('');
+    }
+    setShowMap({});
+  }, [editData, open]);
+
+  const toggleShow = (key: string) => setShowMap(prev => ({ ...prev, [key]: !prev[key] }));
+
+  const handleSubmit = async () => {
+    if (!name.trim()) { toast.error('请填写凭据名称'); return; }
+    setSubmitting(true);
+    try {
+      const payload: Record<string, unknown> = {
+        name: name.trim(),
+        secret_type: secretType,
+        description: description.trim(),
+        tags: tags.split(',').map(t => t.trim()).filter(Boolean),
+        is_active: isActive,
+      };
+      if (varName.trim()) payload.variable_name = varName.trim();
+
+      if (secretType === 'ssh') {
+        if (sshUser.trim()) payload.ssh_user = sshUser.trim();
+        if (sshPort) payload.ssh_port = parseInt(sshPort) || 22;
+        if (sshPassword.trim()) payload.ssh_password = sshPassword.trim();
+        if (sshPrivateKey.trim()) payload.ssh_private_key = sshPrivateKey.trim();
+        if (sshPublicKey.trim()) payload.ssh_public_key = sshPublicKey.trim();
+      } else if (secretType === 'docker') {
+        if (dockerServer.trim()) payload.docker_server = dockerServer.trim();
+        if (dockerUsername.trim()) payload.docker_username = dockerUsername.trim();
+        if (dockerPassword.trim()) payload.docker_password = dockerPassword.trim();
+      } else if (secretType === 'tls') {
+        if (tlsCert.trim()) payload.tls_cert = tlsCert.trim();
+        if (tlsKey.trim()) payload.tls_key = tlsKey.trim();
+        if (tlsCa.trim()) payload.tls_ca = tlsCa.trim();
+      } else if (secretType === 'aksk') {
+        if (akskAccessKey.trim()) payload.aksk_access_key = akskAccessKey.trim();
+        if (akskSecretKey.trim()) payload.aksk_secret_key = akskSecretKey.trim();
+      } else if (secretType === 'database') {
+        if (dbType.trim()) payload.db_type = dbType.trim();
+        if (dbHost.trim()) payload.db_host = dbHost.trim();
+        if (dbPort) payload.db_port = parseInt(dbPort) || 3306;
+        if (dbName.trim()) payload.db_name = dbName.trim();
+        if (dbUsername.trim()) payload.db_username = dbUsername.trim();
+        if (dbPassword.trim()) payload.db_password = dbPassword.trim();
+      } else if (secretType === 'api') {
+        if (apiKey.trim()) payload.api_key = apiKey.trim();
+        if (apiEndpoint.trim()) payload.api_endpoint = apiEndpoint.trim();
+      } else if (secretType === 'generic') {
+        if (genericKey.trim()) payload.generic_key = genericKey.trim();
+        if (genericValue.trim()) payload.generic_value = genericValue.trim();
+      }
+
+      if (isEdit) {
+        await credentialApi.update(editData!.id, payload);
+        toast.success('已更新');
+      } else {
+        await credentialApi.create(payload);
+        toast.success('已创建');
+      }
+      onSaved();
+      onClose();
+    } catch (e: unknown) {
+      const err = e as { response?: { data?: { message?: string } } };
+      toast.error(err?.response?.data?.message || '操作失败');
+    } finally { setSubmitting(false); }
+  };
+
+  const FieldWithToggle = ({ label, value, onChange, placeholder, fieldKey, required, isLong }: {
+    label: string; value: string; onChange: (v: string) => void; placeholder: string;
+    fieldKey: string; required?: boolean; isLong?: boolean;
+  }) => {
+    const show = showMap[fieldKey];
+    return (
+      <div className="space-y-1">
+        <Label className="text-[var(--dg-text-secondary)] text-xs">{label}{required && !isEdit && <span className="text-red-400"> *</span>}</Label>
+        <div className="relative">
+          {isLong ? (
+            <textarea value={value} onChange={e => onChange(e.target.value)}
+              placeholder={placeholder} rows={5}
+              className="w-full rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] p-2 text-sm font-mono placeholder:text-[var(--dg-text-muted)]" />
+          ) : (
+            <Input value={value} onChange={e => onChange(e.target.value)}
+              type={show ? 'text' : 'password'} placeholder={placeholder}
+              className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] pr-10 font-mono text-sm" />
+          )}
+          <button type="button" onClick={() => toggleShow(fieldKey)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] text-xs">
+            {show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  const TI = TYPE_CONFIG[secretType];
+  const TIicon = TI?.icon || Key;
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[620px] max-h-[90vh] overflow-y-auto bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <DialogHeader>
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <TIicon className={`h-5 w-5 ${TI?.color || ''}`} />
+            {isEdit ? '编辑凭据' : '新增凭据'}
+          </DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-muted)] text-xs">
+            {TI?.desc || '管理敏感凭据信息'}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          {/* 基本信息 // Logan.Li */}
+          <div className="border-b border-[var(--dg-border)] pb-3">
+            <div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2">基本信息</div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-[var(--dg-text-secondary)] text-xs">凭据名称 <span className="text-red-400">*</span></Label>
+                <Input value={name} onChange={e => setName(e.target.value)} placeholder="如：生产环境 SSH"
+                  className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[var(--dg-text-secondary)] text-xs">变量别名</Label>
+                <Input value={varName} onChange={e => setVarName(e.target.value)} placeholder="如：MYSQL_PROD"
+                  className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm" />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[var(--dg-text-secondary)] text-xs">类型{!isEdit && <span className="text-red-400"> *</span>}</Label>
+                <Select value={secretType} onValueChange={(v) => setSecretType(v as SecretType)} disabled={isEdit}>
+                  <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-[300px]">
+                    {(Object.entries(TYPE_CONFIG) as [SecretType, typeof TYPE_CONFIG[SecretType]][]).map(([k, v]) => (
+                      <SelectItem key={k} value={k}>
+                        <span className="flex items-center gap-2"><v.icon className="h-4 w-4" />{v.label}</span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[var(--dg-text-secondary)] text-xs">标签</Label>
+                <Input value={tags} onChange={e => setTags(e.target.value)} placeholder="生产环境, 阿里云"
+                  className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+              </div>
+            </div>
+            <div className="mt-2 space-y-1">
+              <Label className="text-[var(--dg-text-secondary)] text-xs">描述</Label>
+              <Input value={description} onChange={e => setDescription(e.target.value)} placeholder="可选备注信息"
+                className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+            </div>
+          </div>
+
+          {/* 类型专属字段 // Logan.Li */}
+          <div>
+            <div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2 flex items-center gap-2">
+              <TIicon className="h-3.5 w-3.5" />{TI?.label || secretType} 配置
+              {isEdit && <span className="text-[var(--dg-text-muted)]">（仅填写需要修改的字段）</span>}
+            </div>
+
+            {secretType === 'ssh' && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">SSH 用户</Label>
+                  <Input value={sshUser} onChange={e => setSshUser(e.target.value)} placeholder="root"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">SSH 端口</Label>
+                  <Input value={sshPort} onChange={e => setSshPort(e.target.value)} placeholder="22" type="number"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                </div>
+                <div className="col-span-2">
+                  <FieldWithToggle label="SSH 密码" value={sshPassword} onChange={setSshPassword}
+                    placeholder="密码（或留空用密钥）" fieldKey="ssh_pwd" />
+                </div>
+                <div className="col-span-2">
+                  <FieldWithToggle label="私钥内容" value={sshPrivateKey} onChange={setSshPrivateKey}
+                    placeholder="粘贴 SSH 私钥..." fieldKey="ssh_pk" isLong />
+                </div>
+                <div className="col-span-2">
+                  <FieldWithToggle label="公钥内容" value={sshPublicKey} onChange={setSshPublicKey}
+                    placeholder="粘贴 SSH 公钥..." fieldKey="ssh_pub" isLong />
+                </div>
+              </div>
+            )}
+
+            {secretType === 'docker' && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="col-span-2 space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">Registry 地址 <span className="text-red-400">*</span></Label>
+                  <Input value={dockerServer} onChange={e => setDockerServer(e.target.value)} placeholder="registry.example.com"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">用户名</Label>
+                  <Input value={dockerUsername} onChange={e => setDockerUsername(e.target.value)} placeholder="admin"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                </div>
+                <div><FieldWithToggle label="密码" value={dockerPassword} onChange={setDockerPassword}
+                  placeholder="Registry 密码" fieldKey="docker_pwd" required /></div>
+              </div>
+            )}
+
+            {secretType === 'tls' && (
+              <div className="space-y-3">
+                <FieldWithToggle label="证书 (PEM)" value={tlsCert} onChange={setTlsCert}
+                  placeholder="-----BEGIN CERTIFICATE-----" fieldKey="tls_cert" isLong required />
+                <FieldWithToggle label="私钥 (PEM)" value={tlsKey} onChange={setTlsKey}
+                  placeholder="-----BEGIN PRIVATE KEY-----" fieldKey="tls_key" isLong required />
+                <FieldWithToggle label="CA 证书" value={tlsCa} onChange={setTlsCa}
+                  placeholder="CA 证书内容..." fieldKey="tls_ca" isLong />
+              </div>
+            )}
+
+            {secretType === 'aksk' && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="col-span-2 space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">Access Key ID <span className="text-red-400">*</span></Label>
+                  <Input value={akskAccessKey} onChange={e => setAkskAccessKey(e.target.value)} placeholder="AKIDxxxx..."
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
+                </div>
+                <div className="col-span-2">
+                  <FieldWithToggle label="Secret Access Key" value={akskSecretKey} onChange={setAkskSecretKey}
+                    placeholder="输入 Secret Key" fieldKey="aksk_sk" required />
+                </div>
+              </div>
+            )}
+
+            {secretType === 'database' && (
+              <div className="grid grid-cols-3 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">数据库类型</Label>
+                  <Select value={dbType} onValueChange={setDbType}>
+                    <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="mysql">MySQL</SelectItem>
+                      <SelectItem value="postgres">PostgreSQL</SelectItem>
+                      <SelectItem value="mongodb">MongoDB</SelectItem>
+                      <SelectItem value="redis">Redis</SelectItem>
+                      <SelectItem value="mssql">SQL Server</SelectItem>
+                      <SelectItem value="oracle">Oracle</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">主机 <span className="text-red-400">*</span></Label>
+                  <Input value={dbHost} onChange={e => setDbHost(e.target.value)} placeholder="10.0.0.1"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">端口</Label>
+                  <Input value={dbPort} onChange={e => setDbPort(e.target.value)} placeholder="3306" type="number"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">数据库名</Label>
+                  <Input value={dbName} onChange={e => setDbName(e.target.value)} placeholder="aiops"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">用户名</Label>
+                  <Input value={dbUsername} onChange={e => setDbUsername(e.target.value)} placeholder="root"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                </div>
+                <div><FieldWithToggle label="密码" value={dbPassword} onChange={setDbPassword}
+                  placeholder="数据库密码" fieldKey="db_pwd" /></div>
+              </div>
+            )}
+
+            {secretType === 'api' && (
+              <div className="space-y-3">
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">API 端点</Label>
+                  <Input value={apiEndpoint} onChange={e => setApiEndpoint(e.target.value)} placeholder="https://api.example.com"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
+                </div>
+                <FieldWithToggle label="API Key / Token" value={apiKey} onChange={setApiKey}
+                  placeholder="sk-xxxx..." fieldKey="api_key" required />
+              </div>
+            )}
+
+            {secretType === 'generic' && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">Key <span className="text-red-400">*</span></Label>
+                  <Input value={genericKey} onChange={e => setGenericKey(e.target.value)} placeholder="MY_SECRET"
+                    className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
+                </div>
+                <FieldWithToggle label="Value" value={genericValue} onChange={setGenericValue}
+                  placeholder="密钥值" fieldKey="generic_val" required />
+              </div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>取消</Button>
+          <Button onClick={handleSubmit} disabled={submitting} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/80">
+            {submitting ? '保存中...' : (isEdit ? '更新' : '创建')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,26 @@
+// 凭据类型配置常量 // Logan.Li
+
+import {
+  Key, Server, Container, Shield, Cloud, Database, FileText, Globe,
+} from 'lucide-react';
+import type { SecretType } from './types';
+
+export const TYPE_CONFIG: Record<SecretType, { label: string; icon: typeof Key; color: string; desc: string }> = {
+  ssh:      { label: 'SSH 密钥', icon: Server, color: 'text-amber-400', desc: 'SSH 私钥/公钥/密码' },
+  docker:   { label: 'Docker 凭证', icon: Container, color: 'text-cyan-400', desc: 'Docker Registry 登录凭据' },
+  tls:      { label: 'TLS 证书', icon: Shield, color: 'text-green-400', desc: 'TLS/SSL 证书与私钥' },
+  aksk:     { label: 'AKSK 密钥', icon: Cloud, color: 'text-purple-400', desc: '云服务 AccessKey/SecretKey' },
+  database: { label: '数据库凭证', icon: Database, color: 'text-blue-400', desc: '数据库连接信息' },
+  api:      { label: 'API 密钥', icon: Globe, color: 'text-orange-400', desc: 'API Token/Key + 端点' },
+  generic:  { label: '通用凭证', icon: FileText, color: 'text-gray-400', desc: '自定义 Key/Value 键值对' },
+};
+
+export const TYPE_BADGE_CLASS: Record<SecretType, string> = {
+  ssh: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  docker: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
+  tls: 'bg-green-500/20 text-green-400 border-green-500/30',
+  aksk: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
+  database: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+  api: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
+  generic: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+};
@@ -0,0 +1,18 @@
+// 凭据管理类型定义 // Logan.Li
+
+export interface Credential {
+  id: number;
+  name: string;
+  variable_name: string;
+  secret_type: SecretType;
+  summary: string;
+  tags: string[];
+  description: string;
+  expires_at: string | null;
+  is_active: boolean;
+  env_prefix: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export type SecretType = 'ssh' | 'docker' | 'tls' | 'aksk' | 'database' | 'api' | 'generic';