@svadmin/ui 0.72.0 → 0.74.0

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

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
+import { type TreeTableId, type TreeTableSort } from '../tree-table-model.js';
 export interface TreeTableColumn {
     key: string;
     label: string;
     width?: string;
+    sortable?: boolean;
 }
 interface Props {
     data: Record<string, unknown>[];
@@ -21,8 +23,29 @@ interface Props {
         record: Record<string, unknown>;
         value: unknown;
     }]>;
+    scopeKey?: string | number;
+    ariaLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    filterText?: string;
+    filterable?: boolean;
+    filterPlaceholder?: string;
+    filterKeys?: string[];
+    sort?: TreeTableSort | undefined;
+    onsortchange?: (sort: TreeTableSort | undefined) => void;
+    page?: number;
+    pageSize?: number;
+    onpagechange?: (page: number) => void;
+    loadChildren?: (record: Record<string, unknown>, id: TreeTableId) => Promise<Record<string, unknown>[]>;
+    canLoadChildren?: (record: Record<string, unknown>) => boolean;
+    virtualized?: boolean;
+    height?: number;
+    rowHeight?: number;
+    overscan?: number;
     class?: string;
 }
-declare const TreeTable: import("svelte").Component<Props, {}, "selectedKeys">;
+declare const TreeTable: import("svelte").Component<Props, {}, "sort" | "page" | "selectedKeys" | "filterText">;
 type TreeTable = ReturnType<typeof TreeTable>;
 export default TreeTable;

package/dist/components/TwoFactorAuthPage.svelte

@@ -1,61 +1,98 @@
+<script lang="ts" module>
+  export interface MfaEnrollmentProvider {
+    begin: () => Promise<{ secret: string }>;
+    verify: (code: string) => Promise<{ recoveryCodes: string[] }>;
+  }
+</script>
+
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import { ArrowLeft, ArrowRight, Check, CheckCircle2, Copy, Shield } from '@lucide/svelte';
+  import { captureAdminContext } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
-  import * as Card from './ui/card/index.js';
-  import * as Alert from './ui/alert/index.js';
+  import { Input } from './ui/input/index.js';
   import ContentPageShell from './content/ContentPageShell.svelte';
   import ContentPageHeader from './content/ContentPageHeader.svelte';
-  import OtpInput from './content/OtpInput.svelte';
-  import TwoFactorStepper from './content/TwoFactorStepper.svelte';
-  import { Badge } from './ui/badge/index.js';
-  import { Separator } from './ui/separator/index.js';
+  import FeedbackNotice from './content/FeedbackNotice.svelte';
+  import { Copy, ShieldCheck } from '@lucide/svelte';
 
-  type Step = 'intro' | 'scan' | 'verify' | 'recovery';
+  let { enrollmentProvider }: { enrollmentProvider?: MfaEnrollmentProvider } = $props();
   const i18n = useTranslation();
-  let currentStep = $state<Step>('intro');
-  let enabled = $state(false);
-  let codeDigits = $state<string[]>(Array.from({ length: 6 }, () => ''));
+  const context = captureAdminContext();
+  const isZh = $derived(i18n.locale === 'zh-CN');
+  let secret = $state('');
+  let code = $state('');
+  let recoveryCodes = $state<string[] | null>(null);
+  let pending = $state(false);
   let error = $state('');
   let copied = $state(false);
-  const recoveryCodes = ['A1B2-C3D4', 'E5F6-G7H8', 'I9J0-K1L2', 'M3N4-O5P6', 'Q7R8-S9T0', 'U1V2-W3X4'];
-  const currentIndex = $derived(currentStep === 'intro' ? 0 : currentStep === 'scan' ? 1 : currentStep === 'verify' ? 2 : 3);
-  function verify() { if (codeDigits.join('').length !== 6) { error = i18n.t('auth.twoFactorEnterCode'); return; } error = ''; currentStep = 'recovery'; }
-  function copyCodes() { navigator.clipboard?.writeText(recoveryCodes.join('\n')); copied = true; setTimeout(() => copied = false, 1500); }
+  let epoch = 0;
+  $effect(() => {
+    void enrollmentProvider;
+    void context.authProvider;
+    void context.tenantCacheKey?.__svadminTenant;
+    epoch += 1;
+    secret = ''; code = ''; recoveryCodes = null; pending = false; error = ''; copied = false;
+    return () => { epoch += 1; };
+  });
+  async function enroll(verify: boolean) {
+    const provider = enrollmentProvider;
+    if (!provider || pending) return;
+    if (verify && !/^\d{6}$/.test(code)) {
+      error = i18n.t('auth.twoFactorEnterCode');
+      return;
+    }
+    const request = epoch;
+    pending = true; error = '';
+    try {
+      if (verify) {
+        const result = await provider.verify(code);
+        if (request !== epoch) return;
+        recoveryCodes = result.recoveryCodes;
+        secret = ''; code = '';
+      } else {
+        const result = await provider.begin();
+        if (request !== epoch) return;
+        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);
+    } finally {
+      if (request === epoch) pending = false;
+    }
+  }
+  async function copyCodes() {
+    if (!recoveryCodes) return;
+    const request = epoch;
+    try {
+      await navigator.clipboard.writeText(recoveryCodes.join('\n'));
+      if (request === epoch) copied = true;
+    } catch {
+      if (request === epoch) error = isZh ? '复制失败，请手动保存恢复码' : 'Copy failed. Save the recovery codes manually.';
+    }
+  }
 </script>
 
 <ContentPageShell pageId="auth-2fa" width="narrow">
-  <ContentPageHeader title={i18n.t('auth.twoFactorSetup')} description={i18n.t('security.twoFactorDescription')} />
-  {#if !enabled}<TwoFactorStepper current={currentIndex} steps={[i18n.t('auth.twoFactorSetup'), i18n.t('auth.twoFactorScanQR'), i18n.t('auth.twoFactorVerify'), i18n.t('auth.twoFactorRecovery')]} />{/if}
-  <Card.Card><Card.CardContent class="svadmin-u-b3542e058833 svadmin-u-0478c89a150f">
-    {#if currentStep === 'intro' && !enabled}
-      <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c"><span class="svadmin-u-60fbb7713999 svadmin-u-7bbb00f9ba7a svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1"><Shield class="svadmin-u-add63bc6753d" /></span><div><h2 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('auth.twoFactorSetup')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('security.twoFactorDescription')}</p></div></div>
-      <ol class="svadmin-u-6f7e013d6499 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748"><li class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-eb6e8b881acd">1. {i18n.t('auth.twoFactorScanQR')}</li><li class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-eb6e8b881acd">2. {i18n.t('auth.twoFactorEnterCode')}</li><li class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-eb6e8b881acd">3. {i18n.t('auth.twoFactorSaveRecovery')}</li></ol>
-      <Button class="svadmin-u-6da6a3c3f741" onclick={() => currentStep = 'scan'}>{i18n.t('common.next')}<ArrowRight class="svadmin-u-f7b5fa971871" /></Button>
-    {:else if currentStep === 'scan'}
-      <div class="svadmin-u-3e7ce58d64fa svadmin-u-ca6bf63030aa"><div class="svadmin-u-0e12dc7de920 svadmin-u-f3c543ad5fe9 svadmin-u-b06f8413aa63 svadmin-u-e31889b585dc svadmin-u-a3899220f90e svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-2ef11f1cb219 svadmin-u-c07e54fd1439">{#each Array(64) as _, index (index)}<span class={'svadmin-u-b59cd297c349 ' + ((index * 11 + index % 7) % 3 === 0 ? 'svadmin-u-64643d78ed9b' : 'svadmin-u-7f19cdf4c5bb')}></span>{/each}</div><p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('auth.twoFactorScanQR')}</p></div>
-      <div class="svadmin-u-60fbb7713999 svadmin-u-8ef2268efbbc svadmin-u-77a2a20e90d4"><Button variant="outline" onclick={() => currentStep = 'intro'}><ArrowLeft class="svadmin-u-f7b5fa971871" />{i18n.t('common.back')}</Button><Button onclick={() => currentStep = 'verify'}>{i18n.t('common.next')}<ArrowRight class="svadmin-u-f7b5fa971871" /></Button></div>
-    {:else if currentStep === 'verify'}
-      <div class="svadmin-u-3e7ce58d64fa"><div><h2 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('auth.twoFactorVerify')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('auth.twoFactorEnterCode')}</p></div>{#if error}<Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>{/if}<OtpInput bind:value={codeDigits} /><div class="svadmin-u-60fbb7713999 svadmin-u-8ef2268efbbc svadmin-u-77a2a20e90d4"><Button variant="outline" onclick={() => currentStep = 'scan'}><ArrowLeft class="svadmin-u-f7b5fa971871" />{i18n.t('common.back')}</Button><Button onclick={verify}>{i18n.t('common.next')}<ArrowRight class="svadmin-u-f7b5fa971871" /></Button></div></div>
-    {:else if currentStep === 'recovery'}
-      <div class="svadmin-u-3e7ce58d64fa"><div><h2 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('auth.twoFactorRecovery')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('auth.twoFactorRecoveryHint')}</p></div><div class="svadmin-u-f3c543ad5fe9 svadmin-u-8e75e3db482b svadmin-u-77a2a20e90d4 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-2ef11f1cb219 svadmin-u-8e63407b5ceb svadmin-u-0e65706bcccd svadmin-u-fc7473ca09eb">{#each recoveryCodes as code (code)}<span>{code}</span>{/each}</div><div class="svadmin-u-60fbb7713999 svadmin-u-77c08e015d14 svadmin-u-77a2a20e90d4"><Button variant="outline" onclick={copyCodes}>{#if copied}<Check class="svadmin-u-f7b5fa971871" />{:else}<Copy class="svadmin-u-f7b5fa971871" />{/if}{i18n.t('common.copy')}</Button><Button onclick={() => { enabled = true; currentStep = 'intro'; }}>{i18n.t('account.completeSetup')}</Button></div>{#if enabled}<p class="svadmin-u-fc7473ca09eb svadmin-u-76747e5e02ff">{i18n.t('security.twoFactorActive')}</p>{/if}</div>
-    {:else}
-      <div class="svadmin-u-b3542e058833 svadmin-u-0478c89a150f svadmin-u-ca6bf63030aa">
-        <div class="svadmin-u-0e12dc7de920 svadmin-u-60fbb7713999 svadmin-u-9939b97359ce svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-a217b4eaa918 svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff">
-          <Shield class="svadmin-u-9af3b4b6dc9e" />
-        </div>
-        <div>
-          <h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('auth.twoFactorVerifySuccess')}</h2>
-          <p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('security.twoFactorActive')}</p>
-        </div>
-        <Badge variant="secondary" class="svadmin-u-0e12dc7de920 svadmin-u-92e7450ad20d svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff">
-          <CheckCircle2 class="svadmin-u-783b0d9d1e2c" />{i18n.t('securityLog.twoFactorEnabled')}
-        </Badge>
-        <Separator />
-        <Button variant="destructive" onclick={() => { enabled = false; currentStep = 'intro'; }}>
-          {i18n.t('auth.twoFactorDisable')}
-        </Button>
-      </div>
-    {/if}
-  </Card.CardContent></Card.Card>
+  <ContentPageHeader title={i18n.t('auth.twoFactorSetup')} />
+  {#if !enrollmentProvider}
+    <FeedbackNotice tone="warning" message={isZh ? '未配置验证码登记与验证服务。此页面不会生成模拟密钥、恢复码或宣称已启用 MFA。' : 'Enrollment and verification are not configured. No simulated secrets, recovery codes, or MFA success will be generated.'} />
+    <Button variant="outline" onclick={() => context.navigate('/settings/security')}>{i18n.t('settings.security')}</Button>
+  {:else if recoveryCodes !== null}
+    <p role="status"><ShieldCheck size={18} />{i18n.t('auth.twoFactorVerifySuccess')}</p>
+    <p>{i18n.t('auth.twoFactorSaveRecovery')}</p>
+    <pre>{recoveryCodes.join('\n')}</pre>
+    <Button variant="outline" disabled={recoveryCodes.length === 0} onclick={copyCodes}><Copy size={16} />{copied ? (isZh ? '已复制' : 'Copied') : i18n.t('common.copy')}</Button>
+  {:else if secret}
+    <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} />
+      <Button type="submit" disabled={pending}>{pending ? i18n.t('common.loading') : i18n.t('common.confirm')}</Button>
+    </form>
+  {:else}
+    <Button disabled={pending} onclick={() => enroll(false)}>{pending ? i18n.t('common.loading') : i18n.t('auth.twoFactorSetup')}</Button>
+  {/if}
+  {#if error}<p role="alert">{error}</p>{/if}
 </ContentPageShell>

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

@@ -1,3 +1,14 @@
-declare const TwoFactorAuthPage: import("svelte").Component<Record<string, never>, {}, "">;
+export interface MfaEnrollmentProvider {
+    begin: () => Promise<{
+        secret: string;
+    }>;
+    verify: (code: string) => Promise<{
+        recoveryCodes: string[];
+    }>;
+}
+type $$ComponentProps = {
+    enrollmentProvider?: MfaEnrollmentProvider;
+};
+declare const TwoFactorAuthPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type TwoFactorAuthPage = ReturnType<typeof TwoFactorAuthPage>;
 export default TwoFactorAuthPage;

package/dist/components/VirtualTable.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { untrack } from 'svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { RotateCw } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
   import { cn } from '../utils.js';
 
   export interface VirtualTableColumn {
@@ -16,6 +20,11 @@
     height?: number;
     overscan?: number;
     rowKey?: string;
+    scopeKey?: string | number;
+    ariaLabel?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    onRetry?: () => void;
     class?: string;
     rowSnippet?: Snippet<[Record<string, unknown>, number]>;
   }
@@ -27,34 +36,101 @@
     height = 360,
     overscan = 4,
     rowKey = 'id',
+    scopeKey,
+    ariaLabel,
+    loading = false,
+    error,
+    onRetry,
     class: className = '',
     rowSnippet,
   }: Props = $props();
 
   let scrollTop = $state(0);
+  let viewport: HTMLDivElement | undefined = $state();
+  let observedScope = untrack(() => scopeKey);
+  const i18n = useTranslation();
 
   function handleScroll(e: Event) {
-    const target = e.currentTarget as HTMLElement;
-    scrollTop = target.scrollTop;
+    const target = e.currentTarget;
+    if (target instanceof HTMLElement) scrollTop = target.scrollTop;
   }
 
-  const totalHeight = $derived(items.length * itemHeight);
-  const startIndex = $derived(Math.max(0, Math.floor(scrollTop / itemHeight) - overscan));
-  const endIndex = $derived(Math.min(items.length, Math.ceil((scrollTop + height) / itemHeight) + overscan));
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.target !== event.currentTarget || event.altKey || event.metaKey || event.ctrlKey) return;
+    let next: number;
+    switch (event.key) {
+      case 'ArrowDown': next = boundedScrollTop + normalizedItemHeight; break;
+      case 'ArrowUp': next = boundedScrollTop - normalizedItemHeight; break;
+      case 'PageDown': next = boundedScrollTop + normalizedHeight; break;
+      case 'PageUp': next = boundedScrollTop - normalizedHeight; break;
+      case 'Home': next = 0; break;
+      case 'End': next = totalHeight - normalizedHeight; break;
+      default: return;
+    }
+    event.preventDefault();
+    scrollTop = Math.min(Math.max(0, next), Math.max(0, totalHeight - normalizedHeight));
+  }
+
+  // 固定高度窗口有明确尺寸上限，防止异常配置退化成全量 DOM。
+  const normalizedItemHeight = $derived(Number.isFinite(itemHeight) && itemHeight > 0
+    ? Math.min(1000, Math.max(16, Math.floor(itemHeight))) : 44);
+  const normalizedHeight = $derived(Number.isFinite(height) && height > 0
+    ? Math.min(4000, Math.max(16, Math.floor(height))) : 360);
+  const normalizedOverscan = $derived(Number.isFinite(overscan) && overscan >= 0
+    ? Math.min(100, Math.floor(overscan)) : 4);
+  const identities = $derived.by(() => {
+    const keys: string[] = [];
+    const seen = new Set<string>();
+    for (const [index, item] of items.entries()) {
+      const id = item[rowKey];
+      if (id != null && typeof id !== 'string' && (typeof id !== 'number' || !Number.isFinite(id))) return undefined;
+      const key = id == null ? `index:${index}` : `${typeof id}:${id}`;
+      if (seen.has(key)) return undefined;
+      seen.add(key);
+      keys.push(key);
+    }
+    return keys;
+  });
+  const displayError = $derived(error || (identities === undefined ? i18n.t('virtualTable.invalidKeys') : ''));
+  const available = $derived(!loading && !displayError);
+  const totalHeight = $derived(available ? items.length * normalizedItemHeight : 0);
+  const boundedScrollTop = $derived(Math.min(
+    Math.max(0, Number.isFinite(scrollTop) ? scrollTop : 0),
+    Math.max(0, totalHeight - normalizedHeight),
+  ));
+  const startIndex = $derived(Math.max(0, Math.floor(boundedScrollTop / normalizedItemHeight) - normalizedOverscan));
+  const endIndex = $derived(Math.min(items.length, Math.ceil((boundedScrollTop + normalizedHeight) / normalizedItemHeight) + normalizedOverscan));
   const visibleSlice = $derived(
-    items.slice(startIndex, endIndex).map((item, idx) => ({
+    (available ? items.slice(startIndex, endIndex) : []).map((item, idx) => ({
       item,
       index: startIndex + idx,
-      top: (startIndex + idx) * itemHeight,
+      top: (startIndex + idx) * normalizedItemHeight,
+      key: identities?.[startIndex + idx] ?? `index:${startIndex + idx}`,
     }))
   );
+
+  $effect.pre(() => {
+    if (scopeKey !== observedScope) {
+      observedScope = scopeKey;
+      scrollTop = 0;
+      if (viewport) viewport.scrollTop = 0;
+    }
+  });
+  $effect(() => {
+    const top = boundedScrollTop;
+    if (viewport && viewport.scrollTop !== top) viewport.scrollTop = top;
+    if (scrollTop !== top) scrollTop = top;
+  });
 </script>
 
-<div class={cn('svadmin-u-6da6a3c3f741 svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-cef5b893cf23 svadmin-u-2cd02d11d1af svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-359090c2d529', className)}>
+<div role="table" aria-label={ariaLabel ?? i18n.t('virtualTable.label')}
+  aria-rowcount={(available ? items.length : 0) + 1} aria-colcount={columns.length} aria-busy={loading}
+  class={cn('svadmin-u-6da6a3c3f741 svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-cef5b893cf23 svadmin-u-2cd02d11d1af svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-359090c2d529', className)}>
   <!-- Sticky Header -->
-  <div class="svadmin-u-65fdbade2025 svadmin-u-c9ed8c5f79ae svadmin-u-b00f43c30c2b svadmin-u-e83a7042bc91 svadmin-u-bfa603190748 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-426b8b75185b svadmin-u-f0faeb26d656 svadmin-u-7f6912283f11 svadmin-u-012fbd121f37">
+  <div role="row" aria-rowindex="1" class="svadmin-u-65fdbade2025 svadmin-u-c9ed8c5f79ae svadmin-u-b00f43c30c2b svadmin-u-e83a7042bc91 svadmin-u-bfa603190748 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-426b8b75185b svadmin-u-f0faeb26d656 svadmin-u-7f6912283f11 svadmin-u-012fbd121f37">
     {#each columns as col (col.key)}
       <div
+        role="columnheader"
         style={col.width ? `width: ${col.width}; flex-shrink: 0;` : 'flex: 1; min-width: 0;'}
         class={cn('svadmin-u-f283ea9bea0e svadmin-u-d5eab218aa34', col.align === 'right' ? 'svadmin-u-308fc069e46e' : col.align === 'center' ? 'svadmin-u-ca6bf63030aa' : 'svadmin-u-2eba0d65d059')}
       >
@@ -64,22 +140,35 @@
   </div>
 
   <!-- Virtual Scroll Viewport -->
+  <!-- 只读表格的滚动区域需要独立焦点；方向键只滚动，不伪装成可编辑网格。 -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
   <div
+    bind:this={viewport}
+    role="region"
+    tabindex="0"
+    aria-label={ariaLabel ?? i18n.t('virtualTable.label')}
+    data-testid="virtual-table-viewport"
     class="svadmin-u-92bf82f493b1 svadmin-u-d89972fe17d6 svadmin-u-6da6a3c3f741"
-    style="height: {height}px;"
+    style="height: {normalizedHeight}px; min-height: 0; flex-shrink: 0; overflow: auto;"
     onscroll={handleScroll}
+    onkeydown={handleKeydown}
   >
-    <div style="height: {totalHeight}px; width: 100%; position: relative;">
-      {#each visibleSlice as { item, index, top } (item[rowKey] ?? index)}
+    <div role="rowgroup" style="height: {totalHeight}px; width: 100%; position: relative;">
+      {#key scopeKey}
+      {#each visibleSlice as { item, index, top, key } (key)}
         <div
+          role="row"
+          aria-rowindex={index + 2}
           class="svadmin-u-da4dbfbc4fdc svadmin-u-c78facc7a0a6 svadmin-u-d8cdcad240d1 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-f0faeb26d656 svadmin-u-65fdbade2025 svadmin-u-6ee2d41e2d2d svadmin-u-12251b8f1749 svadmin-u-ceb69a6b0e5f"
-          style="top: {top}px; height: {itemHeight}px;"
+          style="top: {top}px; height: {normalizedItemHeight}px; overflow: hidden;"
         >
           {#if rowSnippet}
             {@render rowSnippet(item, index)}
           {:else}
             {#each columns as col (col.key)}
               <div
+                role="cell"
                 style={col.width ? `width: ${col.width}; flex-shrink: 0;` : 'flex: 1; min-width: 0;'}
                 class={cn('svadmin-u-f283ea9bea0e svadmin-u-d5eab218aa34 svadmin-u-2689f3958069 svadmin-u-d4108abe6359', col.align === 'right' ? 'svadmin-u-308fc069e46e' : col.align === 'center' ? 'svadmin-u-ca6bf63030aa' : 'svadmin-u-2eba0d65d059')}
               >
@@ -89,18 +178,25 @@
           {/if}
         </div>
       {/each}
+      {/key}
 
-      {#if items.length === 0}
-        <div class="svadmin-u-b5f3ff77f4f9 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-bfa603190748 svadmin-u-359090c2d529">
-          No records to display
-        </div>
-      {/if}
     </div>
+    {#if loading}
+      <div role="status">{i18n.t('common.loading')}</div>
+    {:else if displayError}
+      <div role="alert">{displayError}</div>
+      {#if error && onRetry}
+        <Button type="button" variant="ghost" size="sm" onclick={onRetry}>
+          <RotateCw aria-hidden="true" />{i18n.t('common.retry')}
+        </Button>
+      {/if}
+    {:else if items.length === 0}
+      <div role="status">{i18n.t('common.noData')}</div>
+    {/if}
   </div>
 
   <!-- Footer Info -->
   <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-b950dda299d3 svadmin-u-05faf5c801ff svadmin-u-967d113a1451 svadmin-u-d058ca6de60f svadmin-u-bfa603190748 svadmin-u-012fbd121f37">
-    <span>Total <strong class="svadmin-u-d4108abe6359 svadmin-u-e83a7042bc91">{items.length}</strong> rows</span>
-    <span>Rendered {visibleSlice.length} in viewport</span>
+    <span>{i18n.t('virtualTable.totalRows', { count: String(available ? items.length : 0) })}</span>
   </div>
 </div>

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

@@ -12,6 +12,11 @@ interface Props {
     height?: number;
     overscan?: number;
     rowKey?: string;
+    scopeKey?: string | number;
+    ariaLabel?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    onRetry?: () => void;
     class?: string;
     rowSnippet?: Snippet<[Record<string, unknown>, number]>;
 }

package/dist/components/account/CompanyProfilePage.svelte

@@ -1,47 +1,83 @@
 <script lang="ts">
+  import { captureAdminContext, type Organization } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-  import { Loader2 } from '@lucide/svelte';
-  import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Label } from '../ui/label/index.js';
-  import { Textarea } from '../ui/textarea/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
-  import DescriptionList from '../content/DescriptionList.svelte';
-  import MemberList from '../content/MemberList.svelte';
-  import SectionHeader from '../content/SectionHeader.svelte';
-  import SettingsGroup from '../content/SettingsGroup.svelte';
-  import WorkspaceLayout from '../content/WorkspaceLayout.svelte';
-  import type { MemberSummary } from '../content/MemberList.svelte';
+  import DataState from '../content/DataState.svelte';
+  import FeedbackNotice from '../content/FeedbackNotice.svelte';
+  import { Input } from '../ui/input/index.js';
+  import { Button } from '../ui/button/index.js';
+
+  const context = captureAdminContext();
   const i18n = useTranslation();
-  let companyName = $state('Acme Corporation');
-  let industry = $state('Technology');
-  let website = $state('https://acme.com');
-  let description = $state('Building the future of enterprise software with dependable AI and cloud workflows.');
+  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);
-  const members: MemberSummary[] = [
-    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', status: 'success' },
-    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', status: 'success' },
-    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', status: 'neutral' },
-    { id: '4', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', status: 'success' },
-  ];
-  async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
+  let error = $state('');
+  let loadError = $state('');
+  let status = $state('');
+  let epoch = 0;
+  async function load() {
+    const current = provider;
+    const request = ++epoch;
+    organization = null; name = ''; error = ''; loadError = ''; 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);
+    } finally {
+      if (request === epoch) loading = false;
+    }
+  }
+  $effect(() => {
+    void provider; void context.authProvider; void context.tenantCacheKey?.__svadminTenant;
+    void load();
+    return () => { epoch += 1; };
+  });
+  async function save(event: SubmitEvent) {
+    event.preventDefault();
+    const current = provider;
+    if (!current?.updateCurrentOrganization || !organization || !name.trim() || saving) return;
+    const request = epoch;
+    saving = true; error = ''; 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);
+    } finally {
+      if (request === epoch) saving = false;
+    }
+  }
 </script>
 
-{#snippet headerActions()}
-  <Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="svadmin-u-783b0d9d1e2c svadmin-u-afbdd13a380e" />{/if}{i18n.t('common.save')}</Button>
-{/snippet}
-
-{#snippet primary()}
-  <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.companyProfileDescription')} bodyClass="space-y-4"><div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e00ad81645a2"><div class="svadmin-u-6f7e013d6499"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="svadmin-u-6f7e013d6499"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="svadmin-u-6f7e013d6499 svadmin-u-d378a2461dc3"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="svadmin-u-6f7e013d6499"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><Textarea id="company-description" bind:value={description} rows={4} /></div></SettingsGroup>
-{/snippet}
-
-{#snippet secondary()}
-  <SettingsGroup title={i18n.t('profile.companyName')} description={industry} bodyClass="space-y-4"><p class="svadmin-u-42536e69e639 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{companyName}</p><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></SettingsGroup>
-{/snippet}
-
-<ContentPageShell pageId="account-company-profile" width="wide">
-  <ContentPageHeader title={i18n.t('account.companyProfile')} description={i18n.t('account.companyProfileDescription')} actions={headerActions} />
-  <WorkspaceLayout {primary} {secondary} secondaryWidth="20rem" />
-  <section class="svadmin-u-6ed543e2fbbb"><SectionHeader title={i18n.t('profileSections.members')} /><MemberList {members} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
+<ContentPageShell pageId="account-company-profile" width="narrow">
+  <ContentPageHeader title={i18n.t('account.companyProfile')} />
+  {#if !provider}
+    <FeedbackNotice tone="warning" message={isZh ? '未配置组织资料服务，无法加载或保存公司资料。' : 'OrganizationProvider is not configured. Company details cannot be loaded or saved.'} />
+  {:else if loading}
+    <DataState state="loading" />
+  {:else if loadError}
+    <DataState state="error" description={loadError} 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} />
+      {#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 status}<p role="status">{status}</p>{/if}
+    </form>
+  {/if}
 </ContentPageShell>

package/dist/components/account/GetStartedPage.svelte

@@ -8,7 +8,7 @@
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
 
   const i18n = useTranslation();
-  let completed = $state<string[]>(['profile', 'security']);
+  let completed = $state<string[]>([]);
   const isZh = $derived(i18n.locale === 'zh-CN');
   const entries = $derived([
     { id: 'profile', title: isZh ? '个人资料' : 'User profile', description: isZh ? '维护联系人、工作状态、文件和日历连接。' : 'Maintain contact details, work status, files, and calendar connections.', href: '#/account/home/user-profile', icon: UserRound },
@@ -26,6 +26,7 @@
 </script>
 
 <ContentPageShell pageId="account-get-started" width="wide">
+  <p role="note">{isZh ? '本会话的个人检查清单；手动勾选不代表组织或安全配置已生效。' : 'A personal checklist for this session. Checking an item does not activate organization or security settings.'}</p>
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93">
     <ContentPageHeader title={i18n.t('account.getStarted')} description={isZh ? '从账户功能入口快速完成组织、成员、安全和集成配置。' : 'Use the account hub to complete organization, member, security, and integration setup.'} />
     <Badge variant="outline">{progress}% {isZh ? '已完成' : 'complete'}</Badge>