@svadmin/ui 0.46.0 → 0.48.0

package/dist/components/ApiSettings.svelte

@@ -1,279 +1,186 @@
 <script lang="ts">
+  import { captureAdminContext, notifyWithProvider, type ApiCredentialSummary, type WebhookSummary } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-
-  import { AlertCircle, Calendar, Check, Copy, Key, Plus, ShieldCheck, Trash2, Webhook } from '@lucide/svelte';
-  import * as Card from './ui/card/index.js';
-  import { Badge } from './ui/badge/index.js';
+  import { Check, Copy, Plus, ShieldCheck, Trash2 } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
   import { Checkbox } from './ui/checkbox/index.js';
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
+  import ApiKeyList from './content/ApiKeyList.svelte';
+  import ContentPageShell from './content/ContentPageShell.svelte';
+  import DataState from './content/DataState.svelte';
+  import FeedbackNotice from './content/FeedbackNotice.svelte';
+  import SettingsGroup from './content/SettingsGroup.svelte';
+  import WorkspaceLayout from './content/WorkspaceLayout.svelte';
 
   const i18n = useTranslation();
+  const adminContext = captureAdminContext();
+  const credentialProvider = $derived(adminContext.credentialProvider);
+  const isZh = $derived(i18n.locale === 'zh-CN');
 
-  interface ApiKey {
-    id: string;
-    name: string;
-    maskedToken: string;
-    created: string;
-    permissions: string[];
-  }
-
-  let keys = $state<ApiKey[]>([
-    { id: 'prod-sync', name: 'Production Sync Service', maskedToken: 'sv_demo_prod_••••_4d3e', created: '2026-03-10', permissions: ['Read', 'Write'] },
-    { id: 'reporting', name: 'Internal Reporting Tool', maskedToken: 'sv_demo_report_••••_9e8f', created: '2026-05-18', permissions: ['Read'] },
-  ]);
-
+  let keys = $state.raw<ApiCredentialSummary[]>([]);
+  let webhooks = $state.raw<WebhookSummary[]>([]);
   let newKeyName = $state('');
   let newKeyPermissions = $state({ Read: true, Write: false, Delete: false, Admin: false });
-  let generatedToken = $state('');
-  let showCreatedToken = $state(false);
-  let copiedKeyId = $state<string | null>(null);
-
-  interface WebhookEntry {
-    id: string;
-    name: string;
-    url: string;
-    eventType: string;
-  }
-
-  let webhooks = $state<WebhookEntry[]>([
-    { id: 'wh-1', name: 'Order Events', url: 'https://api.acme.com/hooks/orders', eventType: 'resource.updated' },
-  ]);
+  let generatedSecret = $state('');
+  let copied = $state(false);
   let newWebhookName = $state('');
   let newWebhookUrl = $state('');
   let newWebhookEvent = $state('resource.created');
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+  let submitting = $state(false);
+  let requestId = 0;
 
-  function handleAddWebhook(event: SubmitEvent) {
-    event.preventDefault();
-    if (!newWebhookName.trim() || !newWebhookUrl.trim()) return;
-    webhooks = [
-      ...webhooks,
-      { id: Date.now().toString(), name: newWebhookName.trim(), url: newWebhookUrl.trim(), eventType: newWebhookEvent },
-    ];
-    newWebhookName = '';
-    newWebhookUrl = '';
+  function message(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
   }
 
-  function deleteWebhook(id: string) {
-    webhooks = webhooks.filter(w => w.id !== id);
+  async function loadCredentials(): Promise<void> {
+    const currentRequest = ++requestId;
+    const provider = credentialProvider;
+    const context = adminContext.enterpriseRequestContext;
+    keys = [];
+    webhooks = [];
+    generatedSecret = '';
+    copied = false;
+    error = null;
+    loading = false;
+    submitting = false;
+    if (!provider) return;
+    loading = true;
+    try {
+      const [nextKeys, nextWebhooks] = await Promise.all([provider.listApiCredentials(context), provider.listWebhooks(context)]);
+      if (currentRequest !== requestId) return;
+      keys = nextKeys;
+      webhooks = nextWebhooks;
+    } catch (caught) {
+      if (currentRequest === requestId) error = message(caught);
+    } finally {
+      if (currentRequest === requestId) loading = false;
+    }
   }
 
-  function generateDemoToken() {
-    const randomHex = Array.from({ length: 24 }, () => Math.floor(Math.random() * 16).toString(16)).join('');
-    return `sv_demo_${randomHex}`;
-  }
+  $effect(() => {
+    void credentialProvider;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+    void loadCredentials();
+    return () => { requestId += 1; };
+  });
 
-  function handleGenerateKey(event: SubmitEvent) {
+  async function handleAddWebhook(event: SubmitEvent): Promise<void> {
     event.preventDefault();
-    if (!newKeyName.trim()) return;
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider || !newWebhookName.trim() || !newWebhookUrl.trim()) return;
+    submitting = true;
+    try {
+      const webhook = await provider.createWebhook({ name: newWebhookName.trim(), url: newWebhookUrl.trim(), eventType: newWebhookEvent }, context);
+      if (currentRequest !== requestId) return;
+      webhooks = [...webhooks, webhook];
+      newWebhookName = '';
+      newWebhookUrl = '';
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) submitting = false;
+    }
+  }
 
-    const token = generateDemoToken();
-    const permissions = Object.entries(newKeyPermissions)
-      .filter(([, enabled]) => enabled)
-      .map(([name]) => name);
+  async function handleGenerateKey(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider || !newKeyName.trim()) return;
+    submitting = true;
+    try {
+      const permissions = Object.entries(newKeyPermissions).filter(([, enabled]) => enabled).map(([name]) => name);
+      const created = await provider.createApiCredential({ name: newKeyName.trim(), permissions }, context);
+      if (currentRequest !== requestId) return;
+      keys = [...keys, created.credential];
+      generatedSecret = created.secret;
+      copied = false;
+      newKeyName = '';
+      newKeyPermissions = { Read: true, Write: false, Delete: false, Admin: false };
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) submitting = false;
+    }
+  }
 
-    keys = [
-      ...keys,
-      {
-        id: Date.now().toString(),
-        name: newKeyName.trim(),
-        maskedToken: `${token.slice(0, 14)}••••${token.slice(-4)}`,
-        created: new Date().toISOString().split('T')[0],
-        permissions,
-      },
-    ];
-    generatedToken = token;
-    showCreatedToken = true;
-    newKeyName = '';
-    newKeyPermissions = { Read: true, Write: false, Delete: false, Admin: false };
+  async function revokeKey(id: string): Promise<void> {
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    try {
+      const result = await provider.revokeApiCredential(id, context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '密钥撤销失败' : 'Credential revocation failed'));
+      if (currentRequest !== requestId) return;
+      keys = keys.filter((key) => key.id !== id);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    }
   }
 
-  function deleteKey(id: string) {
-    keys = keys.filter((key) => key.id !== id);
+  async function deleteWebhook(id: string): Promise<void> {
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    try {
+      const result = await provider.deleteWebhook(id, context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? 'Webhook 删除失败' : 'Webhook deletion failed'));
+      if (currentRequest !== requestId) return;
+      webhooks = webhooks.filter((webhook) => webhook.id !== id);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    }
   }
 
-  async function copyToken(token: string, id: string) {
+  async function copySecret(): Promise<void> {
     try {
-      await navigator.clipboard.writeText(token);
-      copiedKeyId = id;
-      setTimeout(() => {
-        if (copiedKeyId === id) copiedKeyId = null;
-      }, 2000);
+      await navigator.clipboard.writeText(generatedSecret);
+      copied = true;
     } catch {
-      copiedKeyId = null;
+      copied = false;
     }
   }
 </script>
 
-<div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.api')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.apiDescription')}</p>
-  </div>
-
-  <div class="grid gap-6 lg:grid-cols-3">
-    <Card.Card class="lg:col-span-1">
-      <Card.CardHeader>
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Plus class="h-4 w-4" />
-          {i18n.t('api.generateTitle')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('api.generateDesc')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <form onsubmit={handleGenerateKey} class="space-y-4">
-          <div class="space-y-2">
-            <Label for="api-key-name">{i18n.t('api.keyName')}</Label>
-            <Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required />
-          </div>
-
-          <div class="space-y-3">
-            <Label>{i18n.t('api.permissions')}</Label>
-            {#each Object.keys(newKeyPermissions) as permission (permission)}
-              <div class="flex items-center gap-2">
-                <Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} />
-                <Label for={`perm-${permission}`} class="cursor-pointer text-sm font-normal">{permission}</Label>
-              </div>
-            {/each}
-          </div>
-
-          <Button type="submit" class="w-full">{i18n.t('api.generateButton')}</Button>
-        </form>
-      </Card.CardContent>
-    </Card.Card>
-
-    <Card.Card class="lg:col-span-2">
-      <Card.CardHeader>
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Key class="h-4 w-4 text-muted-foreground" />
-          {i18n.t('api.activeKeysTitle')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('api.activeKeysDesc')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent>
-        {#if showCreatedToken}
-          <div class="mb-6 space-y-3 rounded-lg border border-green-500/20 bg-green-500/5 p-4">
-            <div class="flex items-start gap-2 text-sm text-green-700 dark:text-green-300">
-              <ShieldCheck class="mt-0.5 h-5 w-5 shrink-0" />
-              <div>
-                <h4 class="font-semibold">{i18n.t('api.successTitle')}</h4>
-                <p class="mt-0.5 text-xs">{i18n.t('api.successHint')}</p>
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <Input readonly value={generatedToken} class="h-9 font-mono text-xs" />
-              <Button size="sm" onclick={() => copyToken(generatedToken, 'new-token')}>
-                {#if copiedKeyId === 'new-token'}
-                  <Check class="h-4 w-4" />
-                {:else}
-                  <Copy class="h-4 w-4" />
-                {/if}
-              </Button>
-            </div>
-            <div class="flex justify-end">
-              <Button variant="ghost" size="sm" onclick={() => { showCreatedToken = false; generatedToken = ''; }}>{i18n.t('common.close')}</Button>
-            </div>
-          </div>
-        {/if}
-
-        <div class="divide-y">
-          {#each keys as key (key.id)}
-            <div class="space-y-3 py-4 first:pt-0 last:pb-0">
-              <div class="flex items-start justify-between gap-4">
-                <div class="min-w-0 space-y-1">
-                  <h4 class="text-sm font-semibold text-foreground">{key.name}</h4>
-                  <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                    <span class="font-mono">{key.maskedToken}</span>
-                    <span class="flex items-center gap-1">
-                      <Calendar class="h-3 w-3" />
-                      {key.created}
-                    </span>
-                  </div>
-                </div>
-                <div class="flex shrink-0 items-center gap-1">
-                  <Button variant="ghost" size="icon-sm" onclick={() => copyToken(key.maskedToken, key.id)} title={i18n.t('common.copy')}>
-                    {#if copiedKeyId === key.id}
-                      <Check class="h-4 w-4 text-green-500" />
-                    {:else}
-                      <Copy class="h-4 w-4" />
-                    {/if}
-                  </Button>
-                  <Button variant="ghost" size="icon-sm" onclick={() => deleteKey(key.id)} title={i18n.t('common.delete')}>
-                    <Trash2 class="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-              <div class="flex flex-wrap gap-1">
-                {#each key.permissions as permission (permission)}
-                  <Badge variant="secondary" class="px-2 py-0 text-[10px]">{permission}</Badge>
-                {/each}
-              </div>
-            </div>
-          {:else}
-            <div class="flex flex-col items-center gap-2 py-8 text-center text-sm text-muted-foreground">
-              <AlertCircle class="h-8 w-8 opacity-60" />
-              <span>{i18n.t('api.noKeys')}</span>
-            </div>
-          {/each}
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-
-    <!-- Webhooks -->
-    <Card.Card>
-      <Card.CardHeader>
-        <Card.CardTitle class="flex items-center gap-2">
-          <Webhook class="h-4 w-4 text-muted-foreground" />
-          {i18n.t('api.webhooks')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('api.webhooksDesc')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-4">
-        <form class="grid gap-3 sm:grid-cols-[1fr_1fr_180px_auto]" onsubmit={handleAddWebhook}>
-          <div class="space-y-1.5">
-            <Label for="webhook-name">{i18n.t('api.webhookName')}</Label>
-            <Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" />
-          </div>
-          <div class="space-y-1.5">
-            <Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label>
-            <Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" />
-          </div>
-          <div class="space-y-1.5">
-            <Label for="webhook-event">{i18n.t('api.eventType')}</Label>
-            <select id="webhook-event" bind:value={newWebhookEvent} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring">
-              <option value="resource.created">resource.created</option>
-              <option value="resource.updated">resource.updated</option>
-              <option value="resource.deleted">resource.deleted</option>
-              <option value="auth.login">auth.login</option>
-            </select>
-          </div>
-          <div class="flex items-end">
-            <Button type="submit" size="sm" disabled={!newWebhookName.trim() || !newWebhookUrl.trim()}>
-              <Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('api.addWebhook')}
-            </Button>
-          </div>
-        </form>
-
-        <div class="divide-y border-t">
-          {#each webhooks as hook (hook.id)}
-            <div class="flex items-center justify-between gap-4 py-3">
-              <div class="min-w-0">
-                <p class="truncate text-sm font-medium text-foreground">{hook.name}</p>
-                <p class="truncate font-mono text-xs text-muted-foreground">{hook.url}</p>
-              </div>
-              <div class="flex shrink-0 items-center gap-2">
-                <Badge variant="secondary" class="px-2 py-0 text-[10px]">{hook.eventType}</Badge>
-                <Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} title={i18n.t('common.delete')}>
-                  <Trash2 class="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          {:else}
-            <p class="py-4 text-center text-sm text-muted-foreground">{i18n.t('api.noWebhooks')}</p>
-          {/each}
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-  </div>
-</div>
+<ContentPageShell pageId="api-settings" width="wide" title={i18n.t('settings.api')} description={i18n.t('settings.apiDescription')}>
+  {#if !credentialProvider}<FeedbackNotice tone="warning" message={isZh ? '未配置 CredentialProvider。页面不会在浏览器内生成假密钥或假 Webhook。' : 'CredentialProvider is not configured. This page does not generate simulated browser credentials or webhooks.'} />{/if}
+  <WorkspaceLayout secondaryWidth="21rem">
+    {#snippet summary()}
+      {#if generatedSecret}
+        <section class="rounded-lg border border-primary/20 bg-primary/5 p-4" role="status" aria-live="polite">
+          <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"><div class="flex min-w-0 items-start gap-3"><ShieldCheck class="mt-0.5 size-5 shrink-0 text-primary" /><div class="min-w-0"><h2 class="text-sm font-semibold text-foreground">{i18n.t('api.successTitle')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('api.successHint')}</p></div></div><Button variant="ghost" size="sm" onclick={() => { generatedSecret = ''; copied = false; }}>{i18n.t('common.close')}</Button></div>
+          <div class="mt-4 flex min-w-0 items-center gap-2"><Input readonly value={generatedSecret} class="min-w-0 font-mono text-xs" aria-label={i18n.t('api.successTitle')} /><Button size="icon" onclick={copySecret} aria-label={i18n.t('common.copy')}>{#if copied}<Check class="size-4" />{:else}<Copy class="size-4" />{/if}</Button></div>
+        </section>
+      {/if}
+    {/snippet}
+    {#snippet primary()}
+      <div class="space-y-6">
+        <SettingsGroup title={i18n.t('api.activeKeysTitle')} description={i18n.t('api.activeKeysDesc')} bodyClass="p-0">
+          {#if loading}<DataState state="loading" />{:else if error}<DataState state="error" description={error} retry={loadCredentials} />{:else}<ApiKeyList class="rounded-none border-0" keys={keys.map((key) => ({ id: key.id, name: key.name, prefix: key.prefix, createdAt: new Date(key.createdAt).toLocaleString(), lastUsedAt: key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleString() : undefined, permissions: key.permissions }))} stateTitle={i18n.t('api.noKeys')} stateDescription={credentialProvider ? i18n.t('api.generateDesc') : (isZh ? '配置 CredentialProvider 后可管理真实凭据。' : 'Configure CredentialProvider to manage real credentials.')} onrevoke={credentialProvider ? (key) => revokeKey(key.id) : undefined} />{/if}
+        </SettingsGroup>
+        <SettingsGroup title={i18n.t('api.webhooks')} description={i18n.t('api.webhooksDesc')} bodyClass="space-y-5">
+          <form class="grid min-w-0 gap-4 md:grid-cols-2" onsubmit={handleAddWebhook}><div class="space-y-2"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="flex items-end"><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="size-4" />{i18n.t('api.addWebhook')}</Button></div></form>
+          {#if webhooks.length === 0}<DataState state="empty" title={i18n.t('api.noWebhooks')} description={credentialProvider ? i18n.t('api.webhooksDesc') : (isZh ? '配置 CredentialProvider 后可管理真实 Webhook。' : 'Configure CredentialProvider to manage real webhooks.')} />{:else}<div class="divide-y divide-border border-t border-border">{#each webhooks as hook (hook.id)}<div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between"><div class="min-w-0"><p class="text-sm font-medium text-foreground">{hook.name}</p><p class="truncate font-mono text-xs text-muted-foreground">{hook.url}</p></div><div class="flex items-center justify-between gap-3 sm:justify-end"><span class="rounded bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="size-4" /></Button></div></div>{/each}</div>{/if}
+        </SettingsGroup>
+      </div>
+    {/snippet}
+    {#snippet secondary()}
+      <SettingsGroup title={i18n.t('api.generateTitle')} description={i18n.t('api.generateDesc')}>
+        <form onsubmit={handleGenerateKey} class="space-y-5"><div class="space-y-2"><Label for="api-key-name">{i18n.t('api.keyName')}</Label><Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} /></div><fieldset class="space-y-3" disabled={!credentialProvider || submitting}><legend class="text-sm font-medium text-foreground">{i18n.t('api.permissions')}</legend>{#each Object.keys(newKeyPermissions) as permission (permission)}<div class="flex items-center gap-2"><Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} /><Label for={`perm-${permission}`} class="cursor-pointer text-sm font-normal">{permission}</Label></div>{/each}</fieldset><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button></form>
+      </SettingsGroup>
+    {/snippet}
+  </WorkspaceLayout>
+</ContentPageShell>