@svadmin/ui 0.88.1 → 0.91.0

package/dist/components/TreeSelect.svelte.d.ts

@@ -7,6 +7,10 @@ export interface TreeSelectOption {
     expanded?: boolean;
 }
 interface Props {
+    id?: string;
+    ariaLabel?: string;
+    describedby?: string;
+    invalid?: boolean;
     options?: TreeSelectOption[];
     value?: string | number | (string | number)[];
     multiple?: boolean;

package/dist/components/TreeTable.svelte

@@ -151,7 +151,12 @@
       && new Set(columns.map(column => column.key)).size === columns.length
       && (!ordering || (columns.some(column => column.key === ordering.key) && ['asc', 'desc'].includes(ordering.direction)));
   });
-  const displayError = $derived(error || (!fullIndex.valid || !index.valid || !columnsValid ? i18n.t('treeTable.invalidData') : ''));
+  const hasInvalidData = $derived(!fullIndex.valid || !index.valid || !columnsValid);
+  // 宿主传入的 error 可能包含 provider/internal diagnostic，只映射为稳定本地化文案；
+  // 本地数据/列校验失败优先保留更具体、可操作的 invalidData 说明。
+  const displayError = $derived(hasInvalidData
+    ? i18n.t('treeTable.invalidData')
+    : (error ? i18n.t('common.operationFailed') : ''));
   const available = $derived(!loading && !displayError);
   const selection = $derived(treeTableSelection(fullIndex.nodes, new Set(selectedKeys)));
   function isExpanded(id: TreeTableId): boolean {

package/dist/components/TwoFactorAuthPage.svelte

@@ -18,6 +18,7 @@
   let { enrollmentProvider }: { enrollmentProvider?: MfaEnrollmentProvider } = $props();
   const i18n = useTranslation();
   const context = captureAdminContext();
+  const controlId = $props.id();
   const isZh = $derived(i18n.locale === 'zh-CN');
   let secret = $state('');
   let code = $state('');
@@ -34,6 +35,9 @@
     secret = ''; code = ''; recoveryCodes = null; pending = false; error = ''; copied = false;
     return () => { epoch += 1; };
   });
+  function failureMessage(): string {
+    return i18n.t('common.operationFailed');
+  }
   async function enroll(verify: boolean) {
     const provider = enrollmentProvider;
     if (!provider || pending) return;
@@ -55,8 +59,8 @@
         if (!result.secret) throw new Error(isZh ? '未返回登记密钥' : 'No enrollment secret returned');
         secret = result.secret;
       }
-    } catch (caught) {
-      if (request === epoch) error = caught instanceof Error ? caught.message : String(caught);
+    } catch {
+      if (request === epoch) error = failureMessage();
     } finally {
       if (request === epoch) pending = false;
     }
@@ -87,8 +91,8 @@
     <p>{isZh ? '将此登记密钥添加到身份验证器，然后输入验证码。' : 'Add this enrollment secret to your authenticator, then enter its verification code.'}</p>
     <code>{secret}</code>
     <form onsubmit={(event) => { event.preventDefault(); void enroll(true); }}>
-      <label for="mfa-code">{i18n.t('auth.twoFactorEnterCode')}</label>
-      <Input id="mfa-code" bind:value={code} inputmode="numeric" autocomplete="one-time-code" maxlength={6} disabled={pending} />
+      <label for={`${controlId}-mfa-code`}>{i18n.t('auth.twoFactorEnterCode')}</label>
+      <Input id={`${controlId}-mfa-code`} bind:value={code} inputmode="numeric" autocomplete="one-time-code" maxlength={6} disabled={pending} />
       <Button type="submit" disabled={pending}>{pending ? i18n.t('common.loading') : i18n.t('common.confirm')}</Button>
     </form>
   {:else}

package/dist/components/UpdatePasswordPage.svelte

@@ -30,7 +30,7 @@
 
     const result = await updatePw.mutate({ password, confirmPassword });
     if (!result.success) {
-      error = result.error?.message ?? i18n.t('common.operationFailed');
+      error = i18n.t('common.operationFailed');
     }
   }
 </script>

package/dist/components/VersionDiffViewer.svelte

@@ -82,31 +82,33 @@
 
 <div class={cn('svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-cef5b893cf23 svadmin-u-2cd02d11d1af', className)}>
   <!-- Header & Toolbar -->
-  <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-56796a90bec5 svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff svadmin-u-967d113a1451">
-    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+  <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-56796a90bec5 svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff svadmin-u-967d113a1451 svadmin-u-1eb5c6df38c1">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-7e0b7cdf1a94">
       <h4 class="svadmin-u-359090c2d529 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">Record Comparison</h4>
       <Badge variant="outline" class="svadmin-u-d058ca6de60f">
         {modifiedCount} change{modifiedCount === 1 ? '' : 's'}
       </Badge>
     </div>
 
-    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-1eb5c6df38c1">
       <Button
         variant={mode === 'split' ? 'secondary' : 'ghost'}
         size="sm"
-        class="svadmin-u-d0a52b312f7d svadmin-u-359090c2d529 svadmin-u-44ee8ba0a421 svadmin-u-d5eab218aa34"
+        class="svadmin-u-d0a52b312f7d svadmin-u-359090c2d529 svadmin-u-44ee8ba0a421 svadmin-u-d5eab218aa34 svadmin-u-012fbd121f37"
+        aria-pressed={mode === 'split'}
         onclick={() => { mode = 'split'; }}
       >
-        <Columns2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
+        <Columns2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" aria-hidden="true" />
         Side by Side
       </Button>
       <Button
         variant={mode === 'unified' ? 'secondary' : 'ghost'}
         size="sm"
-        class="svadmin-u-d0a52b312f7d svadmin-u-359090c2d529 svadmin-u-44ee8ba0a421 svadmin-u-d5eab218aa34"
+        class="svadmin-u-d0a52b312f7d svadmin-u-359090c2d529 svadmin-u-44ee8ba0a421 svadmin-u-d5eab218aa34 svadmin-u-012fbd121f37"
+        aria-pressed={mode === 'unified'}
         onclick={() => { mode = 'unified'; }}
       >
-        <AlignJustify class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
+        <AlignJustify class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" aria-hidden="true" />
         Unified
       </Button>
     </div>

package/dist/components/account/CompanyProfilePage.svelte

@@ -10,28 +10,29 @@
 
   const context = captureAdminContext();
   const i18n = useTranslation();
+  const controlId = $props.id();
   const isZh = $derived(i18n.locale === 'zh-CN');
   const provider = $derived(context.organizationProvider);
   let organization = $state<Organization | null>(null);
   let name = $state('');
   let loading = $state(false);
   let saving = $state(false);
-  let error = $state('');
-  let loadError = $state('');
+  let error = $state(false);
+  let loadError = $state(false);
   let status = $state('');
   let epoch = 0;
   async function load() {
     const current = provider;
     const request = ++epoch;
-    organization = null; name = ''; error = ''; loadError = ''; status = ''; saving = false;
+    organization = null; name = ''; error = false; loadError = false; status = ''; saving = false;
     loading = Boolean(current);
     if (!current) return;
     try {
       const result = await current.getCurrentOrganization(context.enterpriseRequestContext);
       if (request !== epoch) return;
       organization = result; name = result?.name ?? '';
-    } catch (caught) {
-      if (request === epoch) loadError = caught instanceof Error ? caught.message : String(caught);
+    } catch {
+      if (request === epoch) loadError = true;
     } finally {
       if (request === epoch) loading = false;
     }
@@ -46,14 +47,14 @@
     const current = provider;
     if (!current?.updateCurrentOrganization || !organization || !name.trim() || saving) return;
     const request = epoch;
-    saving = true; error = ''; status = '';
+    saving = true; error = false; status = '';
     try {
       const result = await current.updateCurrentOrganization({ name: name.trim() }, context.enterpriseRequestContext);
       if (request !== epoch) return;
       organization = result; name = result.name;
       status = isZh ? '组织信息已保存' : 'Organization saved';
-    } catch (caught) {
-      if (request === epoch) error = caught instanceof Error ? caught.message : String(caught);
+    } catch {
+      if (request === epoch) error = true;
     } finally {
       if (request === epoch) saving = false;
     }
@@ -67,16 +68,16 @@
   {:else if loading}
     <DataState state="loading" />
   {:else if loadError}
-    <DataState state="error" description={loadError} retry={load} />
+    <DataState state="error" description={i18n.t('common.operationFailed')} retry={load} />
   {:else if !organization}
     <DataState state="empty" title={isZh ? '暂无组织资料' : 'No organization details'} />
   {:else}
     <form onsubmit={save}>
-      <label for="company-name">{isZh ? '组织名称' : 'Organization name'}</label>
-      <Input id="company-name" bind:value={name} required disabled={saving || !provider.updateCurrentOrganization} />
+      <label for={`${controlId}-company-name`}>{isZh ? '组织名称' : 'Organization name'}</label>
+      <Input id={`${controlId}-company-name`} bind:value={name} required disabled={saving || !provider.updateCurrentOrganization} />
       {#if !provider.updateCurrentOrganization}<p>{isZh ? '当前组织资料为只读。' : 'Organization details are read-only.'}</p>{/if}
       <Button type="submit" disabled={saving || !provider.updateCurrentOrganization || !name.trim() || name.trim() === organization.name}>{saving ? i18n.t('common.loading') : i18n.t('common.save')}</Button>
-      {#if error}<p role="alert">{error}</p>{/if}
+      {#if error}<p role="alert">{i18n.t('common.operationFailed')}</p>{/if}
       {#if status}<p role="status">{status}</p>{/if}
     </form>
   {/if}

package/dist/components/account/MemberDirectory.svelte

@@ -14,6 +14,7 @@
   }
 </script>
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
@@ -34,7 +35,8 @@
   let loading = $state(false);
   let sending = $state(false);
   let error = $state('');
-  let loadError = $state('');
+  let requestError = $state(false);
+  let loadError = $state(false);
   let status = $state('');
   let epoch = 0;
   const filtered = $derived(rows.filter(row => `${row.name} ${row.email}`.toLowerCase().includes(query.toLowerCase())));
@@ -43,22 +45,23 @@
     searchInput?.focus();
   }
   async function load() {
+    if (untrack(() => sending)) return;
     const current = provider;
     const request = ++epoch;
-    rows = []; loadError = ''; loading = Boolean(current);
+    rows = []; loadError = false; requestError = false; loading = Boolean(current);
     if (!current) return;
     try {
       const result = await current.list();
       if (request === epoch) rows = result;
-    } catch (caught) {
-      if (request === epoch) loadError = caught instanceof Error ? caught.message : String(caught);
+    } catch {
+      if (request === epoch) loadError = true;
     } finally {
       if (request === epoch) loading = false;
     }
   }
   $effect(() => {
     void provider; void context.authProvider; void context.tenantCacheKey?.__svadminTenant;
-    email = ''; query = ''; error = ''; status = ''; sending = false;
+    email = ''; query = ''; error = ''; requestError = false; status = ''; sending = false;
     void load();
     return () => { epoch += 1; };
   });
@@ -66,6 +69,7 @@
     event.preventDefault();
     const current = provider;
     if (!current?.invite || sending || loading) return;
+    requestError = false;
     if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
       error = isZh ? '请输入有效邮箱' : 'Enter a valid email address';
       return;
@@ -77,8 +81,8 @@
       if (request !== epoch) return;
       email = '';
       status = isZh ? '邀请已提交' : 'Invitation submitted';
-    } catch (caught) {
-      if (request === epoch) error = caught instanceof Error ? caught.message : String(caught);
+    } catch {
+      if (request === epoch) requestError = true;
     } finally {
       if (request === epoch) sending = false;
     }
@@ -86,7 +90,7 @@
   async function copyLink() {
     if (!provider?.invitationUrl) return;
     const request = epoch;
-    status = ''; error = '';
+    status = ''; error = ''; requestError = false;
     try {
       await navigator.clipboard.writeText(provider.invitationUrl);
       if (request === epoch) status = isZh ? '链接已复制' : 'Link copied';
@@ -113,12 +117,12 @@
     <p class="text-sm text-muted-foreground">{isZh ? '当前目录为只读，未配置邀请发送能力。' : 'This directory is read-only. Invitation delivery is not configured.'}</p>
   {/if}
   {#if provider.invitationUrl}<div><Button variant="outline" onclick={copyLink}><Copy size={16} />{i18n.t('account.copyLink')}</Button></div>{/if}
-  {#if error}<p role="alert" class="text-sm text-destructive">{error}</p>{/if}
+  {#if requestError || error}<p role="alert" class="text-sm text-destructive">{requestError ? i18n.t('common.operationFailed') : error}</p>{/if}
   {#if status}<p role="status" class="text-sm text-foreground">{status}</p>{/if}
   {#if loading}
     <DataState state="loading" />
   {:else if loadError}
-    <DataState state="error" description={loadError} retry={load} />
+    <DataState state="error" description={i18n.t('common.operationFailed')} {...(sending ? {} : { retry: load })} />
   {:else}
     <div class="w-full max-w-sm space-y-2">
       <label for={`${controlId}-search`} class="block text-sm font-medium text-foreground">{isZh ? '搜索成员' : 'Search members'}</label>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -43,7 +43,7 @@
   let saving = $state(false);
   let savingOrganization = $state(false);
   let testing = $state(false);
-  let error = $state<string | null>(null);
+  let error = $state(false);
   let requestId = 0;
   const organizationChanged = $derived(Boolean(
     organizationProvider?.updateCurrentOrganization
@@ -58,8 +58,8 @@
   const auditRetentionValid = $derived(isPositiveInteger(auditRetentionValue));
   const policyNumbersValid = $derived(sessionTimeoutValid && auditRetentionValid);
 
-  function message(error: unknown): string {
-    return error instanceof Error ? error.message : String(error);
+  function failureMessage(): string {
+    return i18n.t('common.operationFailed');
   }
 
   async function loadSettings(): Promise<void> {
@@ -74,7 +74,7 @@
     auditRetentionValue = '';
     identityProviders = [];
     events = [];
-    error = null;
+    error = false;
     loading = false;
     saving = false;
     savingOrganization = false;
@@ -97,8 +97,8 @@
       organization = nextOrganization;
       organizationName = nextOrganization?.name ?? '';
       metadataUrl = nextIdentityProviders[0]?.metadataUrl ?? '';
-    } catch (caught) {
-      if (currentRequest === requestId) error = message(caught);
+    } catch {
+      if (currentRequest === requestId) error = true;
     } finally {
       if (currentRequest === requestId) loading = false;
     }
@@ -116,7 +116,7 @@
     const provider = identityProvider;
     const currentRequest = requestId;
     const context = adminContext.enterpriseRequestContext;
-    if (!provider || !policy || !policyNumbersValid) return;
+    if (!provider || !policy || !policyNumbersValid || saving) return;
     saving = true;
     try {
       const updatedPolicy = await provider.updateSecurityPolicy({
@@ -129,9 +129,9 @@
       sessionTimeoutValue = String(updatedPolicy.sessionTimeoutMinutes);
       auditRetentionValue = String(updatedPolicy.auditRetentionDays);
       notifyWithProvider({ type: 'success', message: isZh ? '企业策略已保存' : 'Enterprise policy saved' }, adminContext.notificationProvider);
-    } catch (caught) {
+    } catch {
       if (currentRequest !== requestId) return;
-      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+      notifyWithProvider({ type: 'error', message: failureMessage() }, adminContext.notificationProvider);
     } finally {
       if (currentRequest === requestId) saving = false;
     }
@@ -142,7 +142,7 @@
     const currentRequest = requestId;
     const context = adminContext.enterpriseRequestContext;
     const name = organizationName.trim();
-    if (!provider?.updateCurrentOrganization || !organization || !name || name === organization.name) return;
+    if (!provider?.updateCurrentOrganization || !organization || !name || name === organization.name || savingOrganization) return;
     savingOrganization = true;
     try {
       const updatedOrganization = await provider.updateCurrentOrganization({ name }, context);
@@ -150,9 +150,9 @@
       organization = updatedOrganization;
       organizationName = updatedOrganization.name;
       notifyWithProvider({ type: 'success', message: isZh ? '组织信息已保存' : 'Organization saved' }, adminContext.notificationProvider);
-    } catch (caught) {
+    } catch {
       if (currentRequest !== requestId) return;
-      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+      notifyWithProvider({ type: 'error', message: failureMessage() }, adminContext.notificationProvider);
     } finally {
       if (currentRequest === requestId) savingOrganization = false;
     }
@@ -162,7 +162,7 @@
     const provider = identityProvider;
     const currentRequest = requestId;
     const context = adminContext.enterpriseRequestContext;
-    if (!provider) return;
+    if (!provider || testing || loading || error) return;
     testing = true;
     try {
       const selectedProvider = target ?? identityProviders[0];
@@ -178,11 +178,11 @@
         type: result.success ? 'success' : 'error',
         message: result.success
           ? (isZh ? '身份源连接测试通过' : 'Identity provider connection succeeded')
-          : (result.error?.message ?? (isZh ? '身份源连接测试失败' : 'Identity provider connection failed')),
+          : failureMessage(),
       }, adminContext.notificationProvider);
-    } catch (caught) {
+    } catch {
       if (currentRequest !== requestId) return;
-      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+      notifyWithProvider({ type: 'error', message: failureMessage() }, adminContext.notificationProvider);
     } finally {
       if (currentRequest === requestId) testing = false;
     }
@@ -214,7 +214,7 @@
   {#if loading}
     <DataState state="loading" />
   {:else if error}
-    <DataState state="error" title={isZh ? '企业设置加载失败' : 'Enterprise settings failed to load'} description={error} retry={loadSettings} />
+    <DataState state="error" title={isZh ? '企业设置加载失败' : 'Enterprise settings failed to load'} description={failureMessage()} retry={loadSettings} />
   {:else}
     <div class="svadmin-u-f3c543ad5fe9 svadmin-u-60541e1e26f8 svadmin-u-0c3bc98565dd svadmin-u-2f27a80ed92b">
       <SettingsGroup title={i18n.t('account.securityPolicy')} description={isZh ? '配置组织级身份、会话与审计策略。' : 'Configure organization-wide identity, session, and audit controls.'} bodyClass="space-y-4">
@@ -244,7 +244,7 @@
         <DataState state="empty" title={isZh ? '尚未配置身份源' : 'No identity provider configured'} description={isZh ? '请在后端 IdentityGovernanceProvider 中创建并验证身份源。' : 'Create and verify an identity provider through the backend IdentityGovernanceProvider.'} />
       {:else}
         {#each identityProviders as connection (connection.id)}
-          <IntegrationCard integration={definedOptions({ id: connection.id, name: connection.name, account: connection.protocol.toUpperCase(), connected: connection.status === 'connected', description: connection.domain ?? connection.metadataUrl })} onconnect={() => testConnection(connection)} />
+          <IntegrationCard integration={definedOptions({ id: connection.id, name: connection.name, account: connection.protocol.toUpperCase(), connected: connection.status === 'connected', description: connection.domain ?? connection.metadataUrl })} actionLabel={i18n.t('common.test')} disabled={testing} onconnect={() => testConnection(connection)} />
         {/each}
       {/if}
     </section>

package/dist/components/content/AuditTimeline.svelte

@@ -16,6 +16,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { cn } from '../../utils.js';
   import StatusBadge from './StatusBadge.svelte';
   import DataState from './DataState.svelte';
@@ -37,8 +38,8 @@
 
   let {
     items = [],
-    emptyTitle = 'No timeline events',
-    emptyDescription = 'Activity events and status transitions will appear here.',
+    emptyTitle,
+    emptyDescription,
     state,
     stateTitle,
     stateDescription,
@@ -49,6 +50,7 @@
     class: className = '',
   }: Props = $props();
 
+  const i18n = useTranslation();
   const dotClass: Record<Status, string> = {
     success: 'svadmin-u-3355648fe22b svadmin-u-18a6e7a36f29 svadmin-u-76747e5e02ff',
     warning: 'svadmin-u-a486cacb3a15 svadmin-u-2f960aa0c478 svadmin-u-3a4ff758c2ab',
@@ -64,8 +66,8 @@
     <DataState
       state={resolvedState}
       {...definedOptions({
-        title: stateTitle ?? (resolvedState === 'empty' ? emptyTitle : undefined),
-        description: stateDescription ?? (resolvedState === 'empty' ? emptyDescription : undefined),
+        title: stateTitle ?? (resolvedState === 'empty' ? emptyTitle ?? i18n.t('audit.emptyTitle') : undefined),
+        description: stateDescription ?? (resolvedState === 'empty' ? emptyDescription ?? i18n.t('audit.emptyDescription') : undefined),
         retry,
         retryLabel,
         loadingLabel,
@@ -89,10 +91,10 @@
             <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
               <span class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{item.title}</span>
               {#if item.actor}
-                <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">by {item.actor}</span>
+                <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{i18n.t('audit.actorPrefix')}{item.actor}</span>
               {/if}
               {#if item.status}
-                <StatusBadge status={item.status} label={item.tag ?? item.status} class="svadmin-u-d058ca6de60f svadmin-u-68ecb30dbec6 svadmin-u-11e59c6d5f6b" />
+                <StatusBadge status={item.status} label={item.tag ?? i18n.t(`audit.status.${item.status}`)} class="svadmin-u-d058ca6de60f svadmin-u-68ecb30dbec6 svadmin-u-11e59c6d5f6b" />
               {:else if item.tag}
                 <span class="svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-d058ca6de60f svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-2ef11f1cb219">
                   {item.tag}

package/dist/components/content/DataState.svelte

@@ -32,7 +32,7 @@
     loading: [i18n.t('common.loading'), i18n.t('common.loading')],
     empty: [i18n.t('empty.title'), i18n.t('empty.description')],
     'filtered-empty': [isZh ? '没有匹配结果' : 'No matching results', isZh ? '请调整或清除筛选条件。' : 'Adjust or clear your filters.'],
-    error: [i18n.t('common.error'), i18n.t('common.retry')],
+    error: [i18n.t('common.error'), i18n.t('common.operationFailed')],
     forbidden: [isZh ? '无权访问' : 'Access restricted', isZh ? '你没有查看此内容的权限。' : 'You do not have permission to view this content.'],
   } as const);
   const resolvedTitle = $derived(title ?? defaults[state][0]);

package/dist/components/content/FileList.svelte

@@ -1,23 +1,54 @@
 <script lang="ts">
   import { definedOptions } from '@svadmin/core/options';
-
-  import { Download, File, Trash2 } from '@lucide/svelte';
-  import { useTranslation } from '@svadmin/core/i18n';
-  import { Button } from '../ui/button/index.js';
   import DataState from './DataState.svelte';
   import type { DataStateKind } from './DataState.svelte';
+  import FileListRow from './FileListRow.svelte';
+
   export interface FileItem { id?: string; name: string; size?: string; type?: string; updatedAt?: string; }
-  interface Props { files?: FileItem[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; ondownload?: (file: FileItem) => void; onremove?: (file: FileItem) => void; class?: string; }
-  const i18n = useTranslation();
-  let { files = [], state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, ondownload, onremove, class: className = '' }: Props = $props();
+  type FileActionHandler = (file: FileItem) => void;
+  interface Props {
+    files?: FileItem[];
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
+    ondownload?: FileActionHandler;
+    onpreview?: FileActionHandler;
+    onremove?: FileActionHandler;
+    class?: string;
+  }
+  let {
+    files = [], state, stateTitle, stateDescription, emptyTitle, emptyDescription,
+    retry, retryLabel, loadingLabel, ondownload, onpreview, onremove, class: className = '',
+  }: Props = $props();
   const resolvedState = $derived(state ?? (files.length === 0 ? 'empty' : undefined));
+  const isEmptyState = $derived(resolvedState === 'empty' || resolvedState === 'filtered-empty');
+
+  const rows = $derived.by(() => {
+    const occurrences = new Map<string, number>();
+    return files.map((file, index) => {
+      if (file.id === undefined) return { file, key: JSON.stringify(['index', index, file.name]) };
+      const occurrence = occurrences.get(file.id) ?? 0;
+      occurrences.set(file.id, occurrence + 1);
+      return { file, key: JSON.stringify(['id', file.id, occurrence]) };
+    });
+  });
 </script>
+
 {#if resolvedState}
-  <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
+  <DataState state={resolvedState} {...definedOptions({
+    title: stateTitle ?? (isEmptyState ? emptyTitle : undefined),
+    description: stateDescription ?? (isEmptyState ? emptyDescription : undefined),
+    retry, retryLabel, loadingLabel,
+  })} class={className} />
 {:else}
-<div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
-  {#each files as file, index (file.id ?? file.name + '-' + index)}
-    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12"><span class="svadmin-u-60fbb7713999 svadmin-u-665f07fe73cc svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748"><File class="svadmin-u-f7b5fa971871" /></span><div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"><p class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{file.name}</p><p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{file.size ?? file.type ?? (i18n.locale === 'zh-CN' ? '文件' : 'File')}{file.updatedAt ? ' / ' + file.updatedAt : ''}</p></div>{#if ondownload}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '下载 ' : 'Download ') + file.name} onclick={() => ondownload?.(file)}><Download class="svadmin-u-f7b5fa971871" /></Button>{/if}{#if onremove}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '移除 ' : 'Remove ') + file.name} onclick={() => onremove?.(file)}><Trash2 class="svadmin-u-f7b5fa971871" /></Button>{/if}</div>
-  {/each}
-</div>
+  <div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className} role="list" data-svadmin-file-list>
+    {#each rows as { file, key } (key)}
+      <FileListRow {file} {...definedOptions({ ondownload, onpreview, onremove })} />
+    {/each}
+  </div>
 {/if}

package/dist/components/content/FileList.svelte.d.ts

@@ -6,6 +6,7 @@ export interface FileItem {
     type?: string;
     updatedAt?: string;
 }
+type FileActionHandler = (file: FileItem) => void;
 interface Props {
     files?: FileItem[];
     state?: DataStateKind;
@@ -16,8 +17,9 @@ interface Props {
     retry?: () => void;
     retryLabel?: string;
     loadingLabel?: string;
-    ondownload?: (file: FileItem) => void;
-    onremove?: (file: FileItem) => void;
+    ondownload?: FileActionHandler;
+    onpreview?: FileActionHandler;
+    onremove?: FileActionHandler;
     class?: string;
 }
 declare const FileList: import("svelte").Component<Props, {}, "">;

package/dist/components/content/FileListRow.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { onDestroy, untrack } from 'svelte';
+  import { Download, Eye, File, Trash2 } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import type { FileItem } from './FileList.svelte';
+
+  type Action = 'download' | 'preview' | 'remove';
+  type Handler = (file: FileItem) => void;
+  interface Props { file: FileItem; ondownload?: Handler; onpreview?: Handler; onremove?: Handler; }
+  let { file, ondownload, onpreview, onremove }: Props = $props();
+  const i18n = useTranslation();
+  const instanceId = $props.id();
+  const errorId = `${instanceId}-error`;
+  let pending = $state<Action | undefined>();
+  let failed = $state<Action | undefined>();
+  let generation = 0;
+  let destroyed = false;
+  let observed = untrack(() => ({ file, ondownload, onpreview, onremove }));
+
+  $effect.pre(() => {
+    if (file === observed.file && ondownload === observed.ondownload
+      && onpreview === observed.onpreview && onremove === observed.onremove) return;
+    observed = { file, ondownload, onpreview, onremove };
+    generation += 1;
+    pending = undefined;
+    failed = undefined;
+  });
+
+  onDestroy(() => { destroyed = true; generation += 1; });
+
+  function label(action: Action): string {
+    return i18n.t(action === 'download' ? 'common.download'
+      : action === 'preview' ? 'common.preview' : 'common.remove');
+  }
+
+  async function run(action: Action): Promise<void> {
+    if (destroyed || pending) return;
+    const handler = action === 'download' ? ondownload : action === 'preview' ? onpreview : onremove;
+    if (!handler) return;
+    const owner = { file, ondownload, onpreview, onremove };
+    const current = ++generation;
+    const isCurrent = () => !destroyed && generation === current && file === owner.file
+      && ondownload === owner.ondownload && onpreview === owner.onpreview && onremove === owner.onremove;
+    pending = action;
+    failed = undefined;
+    try {
+      await handler(file);
+    } catch {
+      if (isCurrent()) failed = action;
+    } finally {
+      if (isCurrent()) pending = undefined;
+    }
+  }
+</script>
+
+<div class="file-list-row svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12"
+  role="listitem" aria-label={file.name} aria-busy={Boolean(pending)}>
+  <span class="svadmin-u-60fbb7713999 svadmin-u-665f07fe73cc svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748" aria-hidden="true"><File class="svadmin-u-f7b5fa971871" /></span>
+  <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c">
+    <p class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359" title={file.name}>{file.name}</p>
+    {#if pending}
+      <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748" role="status">{i18n.t('common.loading')}</p>
+    {:else}
+      <p class="file-list-row-meta svadmin-u-359090c2d529 svadmin-u-bfa603190748">{file.size ?? file.type ?? i18n.t('common.file')}{file.updatedAt ? ' / ' + file.updatedAt : ''}</p>
+    {/if}
+    {#if failed}<p class="file-list-row-error" role="alert" id={errorId}>{label(failed)}: {i18n.t('common.error')}</p>{/if}
+  </div>
+  {#if onpreview}<Button type="button" variant="ghost" size="icon-sm"
+    aria-label={`${label('preview')} ${file.name}`} title={`${label('preview')} ${file.name}`}
+    aria-describedby={failed ? errorId : undefined} disabled={Boolean(pending)}
+    onclick={() => { void run('preview'); }}><Eye aria-hidden="true" class="svadmin-u-f7b5fa971871" /></Button>{/if}
+  {#if ondownload}<Button type="button" variant="ghost" size="icon-sm"
+    aria-label={`${label('download')} ${file.name}`} title={`${label('download')} ${file.name}`}
+    aria-describedby={failed ? errorId : undefined} disabled={Boolean(pending)}
+    onclick={() => { void run('download'); }}><Download aria-hidden="true" class="svadmin-u-f7b5fa971871" /></Button>{/if}
+  {#if onremove}<Button type="button" variant="ghost" size="icon-sm"
+    aria-label={`${label('remove')} ${file.name}`} title={`${label('remove')} ${file.name}`}
+    aria-describedby={failed ? errorId : undefined} disabled={Boolean(pending)}
+    onclick={() => { void run('remove'); }}><Trash2 aria-hidden="true" class="svadmin-u-f7b5fa971871" /></Button>{/if}
+</div>
+
+<style>
+  .file-list-row-error { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--destructive); overflow-wrap: anywhere; }
+  .file-list-row-meta { overflow-wrap: anywhere; }
+  .file-list-row :global(button) { flex-shrink: 0; }
+</style>