@svadmin/ui 0.73.0 → 0.75.0

package/dist/components/account/ImportMembersPage.svelte

@@ -1,176 +1,31 @@
 <script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import ImportWizard from '../ImportWizard.svelte';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import FeedbackNotice from '../content/FeedbackNotice.svelte';
   import { Button } from '../ui/button/index.js';
-  import { Switch } from '../ui/switch/index.js';
-  import { Label } from '../ui/label/index.js';
-  import { Upload, Download, FileText, CheckCircle2, Loader2 } from '@lucide/svelte';
+  import { Upload } from '@lucide/svelte';
 
+  let { resourceName = 'users' }: { resourceName?: string } = $props();
+  const context = captureAdminContext();
   const i18n = useTranslation();
-
-  let isDragging = $state(false);
-  let fileName = $state('');
-  let importState = $state<'idle' | 'uploading' | 'processing' | 'complete' | 'error'>('idle');
-  let progress = $state(0);
-  let importCount = $state(0);
-
-  const importOptions = [
-    { key: 'account.importCreateUsers', checked: true },
-    { key: 'account.importUpdateUsers', checked: false },
-    { key: 'account.importNotifyPassword', checked: false },
-    { key: 'account.importExternalIds', checked: false },
-    { key: 'account.importWelcomeEmail', checked: true },
-  ];
-  let optionStates = $state<boolean[]>(importOptions.map(o => o.checked));
-
-  function handleDragOver(e: DragEvent) {
-    e.preventDefault();
-    isDragging = true;
-  }
-
-  function handleDragLeave() {
-    isDragging = false;
-  }
-
-  function handleDrop(e: DragEvent) {
-    e.preventDefault();
-    isDragging = false;
-    const file = e.dataTransfer?.files?.[0];
-    if (file) processFile(file);
-  }
-
-  function handleFileSelect(e: Event) {
-    const file = e.target instanceof HTMLInputElement ? e.target.files?.[0] : undefined;
-    if (file) processFile(file);
-  }
-
-  function processFile(file: File) {
-    fileName = file.name;
-    importState = 'uploading';
-    progress = 0;
-
-    // Simulate upload
-    const interval = setInterval(() => {
-      progress += 10;
-      if (progress >= 100) {
-        clearInterval(interval);
-        importState = 'processing';
-        // Simulate processing
-        setTimeout(() => {
-          importCount = Math.floor(Math.random() * 50) + 20;
-          importState = 'complete';
-        }, 1500);
-      }
-    }, 200);
-  }
-
-  function resetImport() {
-    fileName = '';
-    importState = 'idle';
-    progress = 0;
-    importCount = 0;
-  }
+  const resource = $derived(context.resources.find(item => item.name === resourceName));
+  const available = $derived(resource && resource.canCreate !== false);
+  let open = $state(false);
+  let result = $state<{ succeeded: number; failed: number } | null>(null);
+  $effect(() => { void resourceName; void context.authProvider; void context.tenantCacheKey; open = false; result = null; });
 </script>
 
-<div class="svadmin-u-b3542e058833" data-svadmin-content-page="account">
-  <div>
-    <h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.importMembers')}</h2>
-    <p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('account.importMembersDescription')}</p>
-  </div>
-
-  {#if importState === 'complete'}
-    <Card.Card class="svadmin-u-18a6e7a36f29 svadmin-u-338625ff877e">
-      <Card.CardContent class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-0c3bc98565dd svadmin-u-845f53365c8d">
-        <div class="svadmin-u-60fbb7713999 svadmin-u-73a1340934c0 svadmin-u-7e74e5fe798a svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-68f2db624df7 svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff">
-          <CheckCircle2 class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828" />
-        </div>
-        <div class="svadmin-u-ca6bf63030aa">
-          <h3 class="svadmin-u-42536e69e639 svadmin-u-e83a7042bc91 svadmin-u-76747e5e02ff">{i18n.t('account.importComplete')}</h3>
-          <p class="svadmin-u-fc7473ca09eb svadmin-u-083abb355258 svadmin-u-b6b02c0ebef6">{i18n.t('account.imported', { count: importCount })}</p>
-        </div>
-        <Button variant="outline" onclick={resetImport}>{i18n.t('common.back')}</Button>
-      </Card.CardContent>
-    </Card.Card>
+<ContentPageShell pageId="account-import-members" width="wide">
+  <ContentPageHeader title={i18n.t('account.importMembers')} />
+  <p>{i18n.locale === 'zh-CN' ? '导入成员记录到所配置的数据源；不会自动发送邀请或欢迎邮件。' : 'Import member records into the configured data source. Invitations and welcome emails are not sent automatically.'}</p>
+  {#if available}
+    <Button onclick={() => open = true}><Upload size={16} />{i18n.t('common.import')}</Button>
+    <ImportWizard {resourceName} bind:open onSuccess={(value) => result = value} />
+    {#if result}<p role="status">{i18n.locale === 'zh-CN' ? '成功 / 失败' : 'Succeeded / failed'}: {result.succeeded} / {result.failed}</p>{/if}
   {:else}
-    <!-- Upload area -->
-    <Card.Card class="svadmin-u-05faf5c801ff">
-      <Card.CardContent class="svadmin-u-0478c89a150f">
-        <label
-          for="file-input"
-          class="svadmin-u-0214b4b355d1 svadmin-u-34516836730d svadmin-u-a217b4eaa918 svadmin-u-65935df577ba svadmin-u-a29b7a649c77 svadmin-u-845f53365c8d svadmin-u-ca6bf63030aa svadmin-u-ceb69a6b0e5f
-            {isDragging ? 'svadmin-u-6cbc84dd9e1a svadmin-u-989c466fdbe7' : 'svadmin-u-05faf5c801ff svadmin-u-7d7df768f912'}"
-          ondragover={handleDragOver}
-          ondragleave={handleDragLeave}
-          ondrop={handleDrop}
-        >
-          {#if importState === 'idle'}
-            <Upload class="svadmin-u-0e12dc7de920 svadmin-u-426b8b75185b svadmin-u-d854e5698b57 svadmin-u-bfa603190748" />
-            <p class="svadmin-u-eccd13ef4f2f svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('account.dragOrClick')}</p>
-            <p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-bfa603190748">{i18n.t('account.supportedFormats')}</p>
-            <div class="svadmin-u-0ab8667228fd">
-              <span class="svadmin-u-52083e7da442 svadmin-u-ed8a5df7b2fb svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-cef5b893cf23 svadmin-u-ceb69a6b0e5f svadmin-u-0557b88819cd svadmin-u-3a99b2b8fbbe">
-                {i18n.t('common.upload')}
-              </span>
-              <input id="file-input" type="file" accept=".csv,.xlsx" class="svadmin-u-2daa8e5e2f2e" onchange={handleFileSelect} />
-            </div>
-          {:else if importState === 'uploading' || importState === 'processing'}
-            <div class="svadmin-u-6ed543e2fbbb">
-              <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-77a2a20e90d4 svadmin-u-fc7473ca09eb">
-                {#if importState === 'processing'}
-                  <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
-                {:else}
-                  <FileText class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-bfa603190748" />
-                {/if}
-                <span class="svadmin-u-2689f3958069">{fileName}</span>
-              </div>
-              <div class="svadmin-u-2f2a842e50fa svadmin-u-74b2435a1d40 svadmin-u-0e12dc7de920 svadmin-u-ac204c108886 svadmin-u-2ef11f1cb219 svadmin-u-2cd02d11d1af">
-                <div class="svadmin-u-668b21aa5409 svadmin-u-ac204c108886 svadmin-u-75b1bec3ea0e svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63" style="width: {progress}%"></div>
-              </div>
-              <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">
-                {importState === 'uploading' ? i18n.t('account.importProgress') : i18n.t('account.startImport')}...
-              </p>
-            </div>
-          {/if}
-        </label>
-      </Card.CardContent>
-    </Card.Card>
-
-    <!-- Template download -->
-    <Card.Card class="svadmin-u-05faf5c801ff">
-      <Card.CardContent class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-8e63407b5ceb">
-        <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c">
-          <div class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-ae2181c7b10f svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-5f22e64f2282 svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1">
-            <FileText class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
-          </div>
-          <div>
-            <p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('account.downloadTemplate')}</p>
-            <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">CSV template.csv</p>
-          </div>
-        </div>
-        <Button variant="outline" size="sm">
-          <Download class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-618162408e7a" />{i18n.t('account.downloadTemplate')}
-        </Button>
-      </Card.CardContent>
-    </Card.Card>
-
-    <!-- Import options -->
-    <Card.Card class="svadmin-u-05faf5c801ff">
-      <Card.CardHeader>
-        <Card.CardTitle class="svadmin-u-4ee734926ff6">{i18n.t('account.importOptions')}</Card.CardTitle>
-      </Card.CardHeader>
-      <Card.CardContent class="svadmin-u-3e7ce58d64fa">
-        {#each importOptions as option, i (option.key)}
-          <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-0c3bc98565dd">
-            <Label for="import-option-{i}" class="svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6 svadmin-u-d4108abe6359">{i18n.t(option.key)}</Label>
-            <Switch id="import-option-{i}" checked={optionStates[i] ?? option.checked} onCheckedChange={(checked) => { optionStates[i] = checked; }} />
-          </div>
-        {/each}
-        <div class="svadmin-u-60fbb7713999 svadmin-u-77c08e015d14 svadmin-u-b950dda299d3 svadmin-u-173fa8f06789">
-          <Button onclick={() => { const input = document.getElementById('file-input'); input?.click(); }}>
-            {i18n.t('account.startImport')}
-          </Button>
-        </div>
-      </Card.CardContent>
-    </Card.Card>
+    <FeedbackNotice tone="warning" message={i18n.locale === 'zh-CN' ? '未配置可导入的成员资源。' : 'No importable member resource is configured.'} />
   {/if}
-</div>
+</ContentPageShell>

package/dist/components/account/ImportMembersPage.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const ImportMembersPage: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    resourceName?: string;
+};
+declare const ImportMembersPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type ImportMembersPage = ReturnType<typeof ImportMembersPage>;
 export default ImportMembersPage;

package/dist/components/account/MemberDirectory.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" module>
+  export interface DirectoryMember {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+  }
+  export interface MemberDirectoryProvider {
+    /** 宿主提供的目录来源或服务边界说明。 */
+    description?: string;
+    list: () => Promise<DirectoryMember[]>;
+    invite?: (email: string) => Promise<void>;
+    invitationUrl?: string;
+  }
+</script>
+<script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Input } from '../ui/input/index.js';
+  import DataState from '../content/DataState.svelte';
+  import FeedbackNotice from '../content/FeedbackNotice.svelte';
+  import { Copy, Send } from '@lucide/svelte';
+
+  let { provider }: { provider?: MemberDirectoryProvider | undefined } = $props();
+  const context = captureAdminContext();
+  const i18n = useTranslation();
+  const isZh = $derived(i18n.locale === 'zh-CN');
+  const controlId = $props.id();
+  let rows = $state<DirectoryMember[]>([]);
+  let query = $state('');
+  let email = $state('');
+  let loading = $state(false);
+  let sending = $state(false);
+  let error = $state('');
+  let loadError = $state('');
+  let status = $state('');
+  let epoch = 0;
+  const filtered = $derived(rows.filter(row => `${row.name} ${row.email}`.toLowerCase().includes(query.toLowerCase())));
+  async function load() {
+    const current = provider;
+    const request = ++epoch;
+    rows = []; loadError = ''; 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);
+    } finally {
+      if (request === epoch) loading = false;
+    }
+  }
+  $effect(() => {
+    void provider; void context.authProvider; void context.tenantCacheKey?.__svadminTenant;
+    email = ''; query = ''; error = ''; status = ''; sending = false;
+    void load();
+    return () => { epoch += 1; };
+  });
+  async function invite(event: SubmitEvent) {
+    event.preventDefault();
+    const current = provider;
+    if (!current?.invite || sending || loading) return;
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
+      error = isZh ? '请输入有效邮箱' : 'Enter a valid email address';
+      return;
+    }
+    const request = epoch;
+    sending = true; error = ''; status = '';
+    try {
+      await current.invite(email.trim());
+      if (request !== epoch) return;
+      email = '';
+      status = isZh ? '邀请已提交' : 'Invitation submitted';
+    } catch (caught) {
+      if (request === epoch) error = caught instanceof Error ? caught.message : String(caught);
+    } finally {
+      if (request === epoch) sending = false;
+    }
+  }
+  async function copyLink() {
+    if (!provider?.invitationUrl) return;
+    const request = epoch;
+    status = ''; error = '';
+    try {
+      await navigator.clipboard.writeText(provider.invitationUrl);
+      if (request === epoch) status = isZh ? '链接已复制' : 'Link copied';
+    } catch {
+      if (request === epoch) error = isZh ? '复制失败' : 'Copy failed';
+    }
+  }
+</script>
+
+{#if !provider}
+  <FeedbackNotice tone="warning" message={isZh ? '未配置成员目录服务，不会模拟成员或发送邀请。' : 'A member directory is not configured. No members or invitations are simulated.'} />
+{:else}
+  <div class="min-w-0 space-y-4">
+  {#if provider.description}<p role="note" class="text-sm text-muted-foreground">{provider.description}</p>{/if}
+  {#if provider.invite}
+    <form onsubmit={invite} class="w-full max-w-xl space-y-2">
+      <label for={`${controlId}-invite`} class="block text-sm font-medium text-foreground">{isZh ? '成员邮箱' : 'Member email'}</label>
+      <div class="flex flex-col items-stretch gap-2 sm:flex-row">
+        <Input id={`${controlId}-invite`} class="min-w-0 flex-1" type="email" required bind:value={email} disabled={sending} />
+        <Button type="submit" class="shrink-0" disabled={sending || loading}><Send size={16} />{sending ? i18n.t('common.loading') : i18n.t('account.sendInvite')}</Button>
+      </div>
+    </form>
+  {:else}
+    <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 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} />
+  {: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>
+      <Input id={`${controlId}-search`} type="search" bind:value={query} />
+    </div>
+    {#if filtered.length === 0}
+      <DataState state="empty" title={isZh ? '没有匹配的成员' : 'No matching members'} />
+    {:else}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex (横向滚动区域需支持键盘聚焦与滚动) -->
+      <div class="member-directory-scroll w-full min-w-0 overflow-x-auto" role="region" aria-label={isZh ? '成员目录' : 'Member directory'} tabindex="0">
+        <table class="member-directory-table w-full border-collapse text-left text-sm" aria-label={isZh ? '成员列表' : 'Members'}>
+          <thead class="border-b border-border bg-muted text-muted-foreground">
+            <tr>
+              <th scope="col" class="px-4 py-3 font-medium">{isZh ? '姓名' : 'Name'}</th>
+              <th scope="col" class="px-4 py-3 font-medium">{isZh ? '邮箱' : 'Email'}</th>
+              <th scope="col" class="px-4 py-3 font-medium">{isZh ? '角色' : 'Role'}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each filtered as row (row.id)}
+              <tr class="border-b border-border hover:bg-muted/50">
+                <th scope="row" class="px-4 py-3 font-medium text-foreground break-words">{row.name}</th>
+                <td class="px-4 py-3 text-muted-foreground break-all">{row.email}</td>
+                <td class="px-4 py-3 text-foreground break-words">{row.role}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {/if}
+  </div>
+{/if}
+
+<style>
+  /* 保持可读列宽；局部尺寸合同优先于 clean-flat 的通用表格收缩规则。 */
+  .member-directory-scroll > table.member-directory-table {
+    min-width: var(--container-xl, 36rem);
+  }
+</style>

package/dist/components/account/MemberDirectory.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface DirectoryMember {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+}
+export interface MemberDirectoryProvider {
+    /** 宿主提供的目录来源或服务边界说明。 */
+    description?: string;
+    list: () => Promise<DirectoryMember[]>;
+    invite?: (email: string) => Promise<void>;
+    invitationUrl?: string;
+}
+type $$ComponentProps = {
+    provider?: MemberDirectoryProvider | undefined;
+};
+declare const MemberDirectory: import("svelte").Component<$$ComponentProps, {}, "">;
+type MemberDirectory = ReturnType<typeof MemberDirectory>;
+export default MemberDirectory;

package/dist/components/account/MembersStarterPage.svelte

@@ -1,63 +1,17 @@
 <script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-  import { ArrowRight, Check, Download, Mail, Upload, UserPlus, Users } from '@lucide/svelte';
-  import * as Card from '../ui/card/index.js';
-  import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Badge } from '../ui/badge/index.js';
+  import MemberDirectory, { type MemberDirectoryProvider } from './MemberDirectory.svelte';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
-
+  import { Button } from '../ui/button/index.js';
+  import { Upload } from '@lucide/svelte';
+  let { memberProvider }: { memberProvider?: MemberDirectoryProvider } = $props();
+  const context = captureAdminContext();
   const i18n = useTranslation();
-  let inviteOpen = $state(false);
-  let email = $state('');
-  let invited = $state<string[]>([]);
-  const isZh = $derived(i18n.locale === 'zh-CN');
-
-  function sendInvite() {
-    const normalized = email.trim();
-    if (!normalized || invited.includes(normalized)) return;
-    invited = [...invited, normalized];
-    email = '';
-  }
 </script>
-
 <ContentPageShell pageId="account-members-starter" width="wide">
-  <ContentPageHeader title={isZh ? '开始组建团队' : 'Start building your team'} description={isZh ? '这是零成员工作区的起始页。邀请第一位成员，或通过 CSV 批量导入。' : 'This is the starting state for a workspace with no members. Invite the first teammate or import a CSV roster.'} />
-
-  <section class="svadmin-u-f3c543ad5fe9 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-687e17559be1">
-    <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-f92d02360b8f svadmin-u-61357c0c2f29 svadmin-u-ca6bf63030aa">
-      <span class="svadmin-u-60fbb7713999 svadmin-u-7a9ad020b130 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-5f22e64f2282 svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1"><Users class="svadmin-u-9af3b4b6dc9e" /></span>
-      <Badge variant="outline" class="svadmin-u-fb77735ed17c">0 {isZh ? '名成员' : 'members'}</Badge>
-      <h2 class="svadmin-u-0ab8667228fd svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{isZh ? '邀请你的第一位团队成员' : 'Invite your first team member'}</h2>
-      <p class="svadmin-u-50d0d216a2f8 svadmin-u-6199866f612f svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{isZh ? '成员加入后，你可以继续分配角色、设置权限、查看活动状态，并在团队成员页批量管理。' : 'After members join, assign roles, configure access, review activity, and manage them in the full team member table.'}</p>
-      <div class="svadmin-u-31f2553311b6 svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-86843cf1e227 svadmin-u-77a2a20e90d4"><Button onclick={() => inviteOpen = true}><UserPlus class="svadmin-u-f7b5fa971871" />{isZh ? '邀请成员' : 'Invite member'}</Button><Button href="#/account/members/import-members" variant="outline"><Upload class="svadmin-u-f7b5fa971871" />{isZh ? '导入 CSV' : 'Import CSV'}</Button></div>
-    </div>
-
-    <aside class="svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-46daeb0b661f svadmin-u-c07e54fd1439 svadmin-u-bb3e95154365 svadmin-u-7d283214b870">
-      <h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{isZh ? '团队准备清单' : 'Team setup checklist'}</h2>
-      <div class="svadmin-u-0ab8667228fd svadmin-u-3e7ce58d64fa">
-        {#each [isZh ? '邀请至少一名管理员' : 'Invite at least one admin', isZh ? '确认默认成员角色' : 'Confirm the default member role', isZh ? '准备成员 CSV 模板' : 'Prepare the member CSV template'] as item, index (item)}
-          {@const completed = index === 0 && invited.length > 0}
-          <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c" data-checklist-status={completed ? 'complete' : 'pending'}><span class={'svadmin-u-15e1b1f444fe svadmin-u-60fbb7713999 svadmin-u-9af3b4b6dc9e svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f ' + (completed ? 'svadmin-u-18a6e7a36f29 svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff' : 'svadmin-u-18049387f0af svadmin-u-bfa603190748')}>{#if completed}<Check class="svadmin-u-783b0d9d1e2c" />{:else}<span class="svadmin-u-359090c2d529">{index + 1}</span>{/if}</span><p class="svadmin-u-fc7473ca09eb svadmin-u-7054e2767710 svadmin-u-bfa603190748">{item}</p></div>
-        {/each}
-      </div>
-      <a href="#/account/members/team-members" class="svadmin-u-31f2553311b6 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-173fa8f06789 svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-20aaf08a7ed1">{isZh ? '查看完整成员管理' : 'Open full member management'}<ArrowRight class="svadmin-u-783b0d9d1e2c" /></a>
-      <Button variant="outline" size="sm" class="svadmin-u-eccd13ef4f2f svadmin-u-6da6a3c3f741"><Download class="svadmin-u-783b0d9d1e2c" />{isZh ? '下载 CSV 模板' : 'Download CSV template'}</Button>
-    </aside>
-  </section>
-
-  {#if inviteOpen}
-    <Card.Card data-member-invite-panel>
-      <Card.CardContent class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-c07e54fd1439 svadmin-u-d7bf6780c9a5 svadmin-u-bf60a82ffbd9">
-        <span class="svadmin-u-60fbb7713999 svadmin-u-7bbb00f9ba7a svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1"><Mail class="svadmin-u-f7b5fa971871" /></span>
-        <label><span class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{isZh ? '成员邮箱' : 'Member email'}</span><Input class="svadmin-u-50d0d216a2f8" type="email" bind:value={email} placeholder="teammate@example.com" /></label>
-        <div class="svadmin-u-60fbb7713999 svadmin-u-77a2a20e90d4"><Button variant="outline" onclick={() => inviteOpen = false}>{i18n.t('common.cancel')}</Button><Button onclick={sendInvite}>{isZh ? '发送邀请' : 'Send invite'}</Button></div>
-      </Card.CardContent>
-    </Card.Card>
-  {/if}
-
-  {#if invited.length > 0}
-    <section class="svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558"><div class="svadmin-u-65fdbade2025 svadmin-u-18049387f0af svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12"><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{isZh ? '待接受邀请' : 'Pending invitations'}</h2></div><div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">{#each invited as invite (invite)}<div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12"><div><p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{invite}</p><p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{isZh ? '刚刚发送' : 'Sent just now'}</p></div><Badge variant="outline">{isZh ? '已邀请' : 'Invited'}</Badge></div>{/each}</div></section>
-  {/if}
+  <ContentPageHeader title={i18n.locale === 'zh-CN' ? '开始组建团队' : 'Start building your team'} />
+  <MemberDirectory provider={memberProvider} />
+  <Button variant="outline" onclick={() => context.navigate('/account/members/import-members')}><Upload size={16} />{i18n.t('common.import')}</Button>
 </ContentPageShell>

package/dist/components/account/MembersStarterPage.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const MembersStarterPage: import("svelte").Component<Record<string, never>, {}, "">;
+import { type MemberDirectoryProvider } from './MemberDirectory.svelte';
+type $$ComponentProps = {
+    memberProvider?: MemberDirectoryProvider;
+};
+declare const MembersStarterPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type MembersStarterPage = ReturnType<typeof MembersStarterPage>;
 export default MembersStarterPage;

package/dist/components/account/SecurityLogPage.svelte

@@ -10,6 +10,8 @@
   import SecurityEventTable from '../content/SecurityEventTable.svelte';
   import type { SecurityEvent } from '../content/SecurityEventTable.svelte';
   import { referenceDemoData } from '../../reference-data.js';
+  import ReferenceNotice from '../content/ReferenceNotice.svelte';
+  import { downloadRows } from '../export-reference.js';
   const i18n = useTranslation();
   let query = $state('');
   const events: SecurityEvent[] = referenceDemoData.securityEvents;
@@ -17,8 +19,9 @@
 </script>
 
 <ContentPageShell pageId="account-security-log" width="wide">
+  <ReferenceNotice />
   <ContentPageHeader title={i18n.t('account.securityLog')} description={i18n.t('account.securityLogDescription')} {...definedOptions({ "actions": undefined })} />
-  <div class="svadmin-u-60fbb7713999 svadmin-u-77c08e015d14"><Button variant="outline" size="sm"><Download class="svadmin-u-783b0d9d1e2c" />{i18n.t('common.export')}</Button></div>
+  <div class="svadmin-u-60fbb7713999 svadmin-u-77c08e015d14"><Button variant="outline" size="sm" onclick={() => downloadRows('sample-security-events.json', filtered)}><Download class="svadmin-u-783b0d9d1e2c" />{i18n.t('common.export')}</Button></div>
   <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
   <SecurityEventTable events={filtered} />
 </ContentPageShell>

package/dist/components/account/SettingsPlainPage.svelte

@@ -1,44 +1,13 @@
 <script lang="ts">
-  import { useTranslation } from '@svadmin/core/i18n';
-  import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Label } from '../ui/label/index.js';
-  import { Switch } from '../ui/switch/index.js';
+  import ProfilePage from '../ProfilePage.svelte';
+  import NotificationsSettings from '../NotificationsSettings.svelte';
+  import SecuritySettings from '../SecuritySettings.svelte';
   import ContentPageShell from '../content/ContentPageShell.svelte';
-  import ContentPageHeader from '../content/ContentPageHeader.svelte';
-  import SettingsGroup from '../content/SettingsGroup.svelte';
-  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
-  const i18n = useTranslation();
-  let displayName = $state('Alex Chen');
-  let email = $state('alex@example.com');
-  let notifications = $state(true);
-  let twoFactor = $state(true);
-  let saving = $state(false);
-  async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
+  let { preferencesProvider }: { preferencesProvider?: import('../NotificationsSettings.svelte').NotificationPreferencesProvider } = $props();
 </script>
 
-{#snippet headerActions()}
-  <Button size="sm" onclick={save} disabled={saving}>{i18n.t('common.save')}</Button>
-{/snippet}
-
-{#snippet notificationControl()}
-  <Switch bind:checked={notifications} aria-label={i18n.t('settings.notifications')} />
-{/snippet}
-
-{#snippet twoFactorControl()}
-  <Switch bind:checked={twoFactor} aria-label={i18n.t('account.twoFactorAuth')} />
-{/snippet}
-
 <ContentPageShell pageId="account-settings-plain" width="narrow">
-  <ContentPageHeader title={i18n.t('account.settingsPlain')} description={i18n.t('account.settingsPlainDescription')} actions={headerActions} />
-  <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.settingsPlainDescription')} bodyClass="space-y-5">
-    <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e00ad81645a2">
-      <div class="svadmin-u-6f7e013d6499"><Label for="settings-name">{i18n.t('profile.name')}</Label><Input id="settings-name" bind:value={displayName} /></div>
-      <div class="svadmin-u-6f7e013d6499"><Label for="settings-email">Email</Label><Input id="settings-email" bind:value={email} type="email" /></div>
-    </div>
-    <div>
-      <SettingsFieldRow label={i18n.t('settings.notifications')} description="Receive account and workflow updates." control={notificationControl} />
-      <SettingsFieldRow label={i18n.t('account.twoFactorAuth')} description="Require an additional verification code when signing in." control={twoFactorControl} separated />
-    </div>
-  </SettingsGroup>
+  <ProfilePage />
+  <NotificationsSettings {...preferencesProvider ? { preferencesProvider } : {}} />
+  <SecuritySettings />
 </ContentPageShell>

package/dist/components/account/SettingsPlainPage.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const SettingsPlainPage: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    preferencesProvider?: import('../NotificationsSettings.svelte').NotificationPreferencesProvider;
+};
+declare const SettingsPlainPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type SettingsPlainPage = ReturnType<typeof SettingsPlainPage>;
 export default SettingsPlainPage;

package/dist/components/account/SettingsSidebarPage.svelte

@@ -2,31 +2,21 @@
   import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Switch } from '../ui/switch/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import SettingsGroup from '../content/SettingsGroup.svelte';
-  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   import FeedbackNotice from '../content/FeedbackNotice.svelte';
+  import ProfilePage from '../ProfilePage.svelte';
+  import IntegrationsSettings from '../IntegrationsSettings.svelte';
+  import AppearanceSettings from '../AppearanceSettings.svelte';
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
   const credentialProvider = $derived(adminContext.credentialProvider);
   const isZh = $derived(i18n.locale === 'zh-CN');
-  const sections = [{ id: 'profile', title: i18n.t('account.basicSettings') }, { id: 'signin', title: i18n.t('account.socialSignIn') }, { id: 'preferences', title: i18n.t('account.preferences') }, { id: 'api', title: i18n.t('account.manageApi') }];
+  const sections = $derived([{ id: 'profile', title: i18n.t('account.basicSettings') }, { id: 'signin', title: i18n.t('account.socialSignIn') }, { id: 'preferences', title: i18n.t('account.preferences') }, { id: 'api', title: i18n.t('account.manageApi') }]);
   let active = $state('profile');
-  let visible = $state(true);
-  let available = $state(true);
 </script>
 
-{#snippet visibilityControl()}
-  <Switch bind:checked={visible} aria-label={i18n.t('account.visibility')} />
-{/snippet}
-
-{#snippet availabilityControl()}
-  <Switch bind:checked={available} aria-label={i18n.t('account.availability')} />
-{/snippet}
-
 <ContentPageShell pageId="account-settings-sidebar" width="wide">
   <ContentPageHeader title={i18n.t('account.settingsSidebar')} description={i18n.t('account.settingsSidebarDescription')} />
   <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0d304f904cb0 svadmin-u-7178afa5bad6">
@@ -37,14 +27,11 @@
     </nav>
     <div class="svadmin-u-7e0b7cdf1a94">
       {#if active === 'profile'}
-        <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.settingsPlainDescription')} bodyClass="space-y-4">
-          <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e00ad81645a2"><Input value="Alex Chen" aria-label={i18n.t('profile.name')} /><Input value="Nebula Labs" aria-label="Company" /></div>
-          <div><SettingsFieldRow label={i18n.t('account.visibility')} control={visibilityControl} separated /><SettingsFieldRow label={i18n.t('account.availability')} control={availabilityControl} separated /></div>
-        </SettingsGroup>
+        <ProfilePage />
       {:else if active === 'signin'}
-        <SettingsGroup title={i18n.t('account.socialSignIn')} description="Connect the providers your team trusts for sign in." bodyClass="flex flex-wrap gap-2"><Button variant="outline">GitHub</Button><Button variant="outline">Google</Button></SettingsGroup>
+        <IntegrationsSettings />
       {:else if active === 'preferences'}
-        <SettingsGroup title={i18n.t('account.preferences')} bodyClass="grid gap-4 sm:grid-cols-3"><Input value="English" aria-label={i18n.t('account.language')} /><Input value="Asia/Shanghai" aria-label={i18n.t('account.timezone')} /><Input value="CNY" aria-label={i18n.t('account.currency')} /></SettingsGroup>
+        <AppearanceSettings />
       {:else}
         <SettingsGroup title={i18n.t('account.manageApi')} description={isZh ? '使用有作用域的真实凭据，并在权限变更时轮换。' : 'Use scoped credentials and rotate them when access changes.'} bodyClass="space-y-3">
           {#if credentialProvider}