存档

2026-07-01 09:22:26 +00:00
parent 4aa1dab283
commit aa47a19e98
53 changed files with 4721 additions and 77 deletions
@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import { Plus, Trash2, Loader2, Key, Eye, EyeOff } from 'lucide-react';
+import { usePluginContext } from './client';
+import type { S3Credential } from './types';
+
+const API_BASE = '/api/v1/plugin/data_analytics';
+
+interface Props {
+  credentials: S3Credential[];
+  loading: boolean;
+  onChanged: () => void;
+}
+
+export function CredentialPanel({ credentials, loading, onChanged }: Props) {
+  const { client } = usePluginContext();
+  const [showForm, setShowForm] = useState(false);
+  const [showSecret, setShowSecret] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [form, setForm] = useState({
+    display_name: '',
+    endpoint_url: '',
+    region: 'us-east-1',
+    access_key: '',
+    secret_key: '',
+  });
+
+  const reset = () => {
+    setForm({ display_name: '', endpoint_url: '', region: 'us-east-1', access_key: '', secret_key: '' });
+    setError('');
+    setShowSecret(false);
+  };
+
+  const submit = async () => {
+    if (!form.display_name.trim() || !form.access_key.trim() || !form.secret_key.trim()) {
+      setError('显示名 / Access Key / Secret Key 必填');
+      return;
+    }
+    setBusy(true);
+    setError('');
+    try {
+      await client.post(`${API_BASE}/credentials`, {
+        display_name: form.display_name.trim(),
+        endpoint_url: form.endpoint_url.trim() || null,
+        region: form.region.trim() || 'us-east-1',
+        access_key: form.access_key,
+        secret_key: form.secret_key,
+      });
+      reset();
+      setShowForm(false);
+      onChanged();
+    } catch (e: unknown) {
+      const msg = (e as { response?: { data?: { detail?: string } } }).response?.data?.detail;
+      setError(msg || '保存失败');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const remove = async (cred_id: string) => {
+    if (!confirm('确定删除该凭证？删除后该凭证下的任务将无法继续运行。')) return;
+    try {
+      await client.delete(`${API_BASE}/credentials/${cred_id}`);
+      onChanged();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <div className="bg-bg-card rounded-2xl border border-border-primary p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="font-semibold text-text-primary flex items-center gap-2">
+            <Key size={16} className="text-accent" /> S3 凭证
+          </h3>
+          <p className="text-xs text-text-muted mt-0.5">访问密钥加密存储于本地 SQLite。</p>
+        </div>
+        <button
+          className="px-3 py-1.5 text-xs rounded-lg bg-accent text-white hover:opacity-90 transition flex items-center gap-1.5"
+          onClick={() => { setShowForm((s) => !s); setError(''); }}
+        >
+          <Plus size={14} /> {showForm ? '取消' : '新增'}
+        </button>
+      </div>
+
+      {showForm && (
+        <div className="space-y-3 mb-4 p-4 bg-bg-secondary rounded-xl border border-border-secondary">
+          <input
+            className="w-full px-3 py-2 text-sm rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
+            placeholder="显示名（如 prod-aws）"
+            value={form.display_name}
+            onChange={(e) => setForm({ ...form, display_name: e.target.value })}
+          />
+          <input
+            className="w-full px-3 py-2 text-sm rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
+            placeholder="Endpoint URL（可选，自托管 S3 / MinIO 填写）"
+            value={form.endpoint_url}
+            onChange={(e) => setForm({ ...form, endpoint_url: e.target.value })}
+          />
+          <input
+            className="w-full px-3 py-2 text-sm rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
+            placeholder="Region（默认 us-east-1）"
+            value={form.region}
+            onChange={(e) => setForm({ ...form, region: e.target.value })}
+          />
+          <input
+            className="w-full px-3 py-2 text-sm font-mono rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
+            placeholder="Access Key"
+            value={form.access_key}
+            onChange={(e) => setForm({ ...form, access_key: e.target.value })}
+          />
+          <div className="relative">
+            <input
+              type={showSecret ? 'text' : 'password'}
+              className="w-full px-3 py-2 pr-10 text-sm font-mono rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
+              placeholder="Secret Key"
+              value={form.secret_key}
+              onChange={(e) => setForm({ ...form, secret_key: e.target.value })}
+            />
+            <button
+              type="button"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary"
+              onClick={() => setShowSecret((s) => !s)}
+            >
+              {showSecret ? <EyeOff size={14} /> : <Eye size={14} />}
+            </button>
+          </div>
+          {error && <div className="text-xs text-danger">{error}</div>}
+          <button
+            className="w-full px-3 py-2 text-sm rounded-lg bg-accent text-white hover:opacity-90 disabled:opacity-50 transition flex items-center justify-center gap-2"
+            onClick={submit}
+            disabled={busy}
+          >
+            {busy && <Loader2 size={14} className="animate-spin" />} 保存
+          </button>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="flex items-center justify-center py-8 text-text-muted">
+          <Loader2 size={20} className="animate-spin" />
+        </div>
+      ) : credentials.length === 0 ? (
+        <div className="text-sm text-text-muted text-center py-8 border border-dashed border-border-primary rounded-xl">
+          还没有凭证，点右上角「新增」开始。
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {credentials.map((c) => (
+            <div
+              key={c.cred_id}
+              className="flex items-center justify-between p-3 bg-bg-secondary rounded-xl border border-border-secondary"
+            >
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium text-text-primary truncate">{c.display_name}</div>
+                <div className="text-[11px] text-text-muted font-mono mt-0.5">
+                  {c.endpoint_url || 'aws-s3'} · {c.region} · {c.access_key}
+                </div>
+              </div>
+              <button
+                className="p-1.5 text-text-muted hover:text-danger transition"
+                onClick={() => remove(c.cred_id)}
+                title="删除"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}