@svadmin/ui 0.46.0 → 0.48.0

package/dist/components/account/CompanyProfilePage.svelte

@@ -11,6 +11,7 @@
   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';
   const i18n = useTranslation();
   let companyName = $state('Acme Corporation');
@@ -31,11 +32,16 @@
   <Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/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="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><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="text-lg font-semibold text-foreground">{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} />
-  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-    <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.companyProfileDescription')} bodyClass="space-y-4"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><Textarea id="company-description" bind:value={description} rows={4} /></div></SettingsGroup>
-    <SettingsGroup title={i18n.t('profile.companyName')} description={industry} bodyClass="space-y-4"><p class="text-lg font-semibold text-foreground">{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>
-  </div>
+  <WorkspaceLayout {primary} {secondary} secondaryWidth="20rem" />
   <section class="space-y-3"><SectionHeader title={i18n.t('profileSections.members')} /><MemberList {members} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
 </ContentPageShell>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -1,4 +1,12 @@
 <script lang="ts">
+  import {
+    captureAdminContext,
+    notifyWithProvider,
+    type EnterpriseSecurityEvent,
+    type EnterpriseSecurityPolicy,
+    type IdentityProviderSummary,
+    type Organization,
+  } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -10,38 +18,234 @@
   import SettingsGroup from '../content/SettingsGroup.svelte';
   import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   import IntegrationCard from '../content/IntegrationCard.svelte';
-  import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
-  import SecurityEventTable from '../content/SecurityEventTable.svelte';
-  import type { SecurityEvent } from '../content/SecurityEventTable.svelte';
+  import SecurityEventTable, { type SecurityEvent } from '../content/SecurityEventTable.svelte';
+  import DataState from '../content/DataState.svelte';
+  import FeedbackNotice from '../content/FeedbackNotice.svelte';
+
   const i18n = useTranslation();
-  let ssoEnabled = $state(false);
-  let auditLogging = $state(true);
-  const identity: IntegrationSummary[] = [{ id: 'sso', name: 'Enterprise identity provider', description: i18n.t('account.ssoDescription'), account: 'SAML / OIDC', connected: false }];
-  const events: SecurityEvent[] = [{ id: '1', event: 'SSO policy updated', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Today, 09:12', severity: 'info' }, { id: '2', event: 'Audit log retention changed', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Yesterday, 16:40', severity: 'warning' }];
+  const adminContext = captureAdminContext();
+  const identityProvider = $derived(adminContext.identityGovernanceProvider);
+  const organizationProvider = $derived(adminContext.organizationProvider);
+  const isZh = $derived(i18n.locale === 'zh-CN');
+
+  let policy = $state<EnterpriseSecurityPolicy | null>(null);
+  let organization = $state<Organization | null>(null);
+  let organizationName = $state('');
+  let sessionTimeoutValue = $state('');
+  let auditRetentionValue = $state('');
+  let identityProviders = $state.raw<IdentityProviderSummary[]>([]);
+  let events = $state.raw<EnterpriseSecurityEvent[]>([]);
+  let metadataUrl = $state('');
+  let loading = $state(false);
+  let saving = $state(false);
+  let savingOrganization = $state(false);
+  let testing = $state(false);
+  let error = $state<string | null>(null);
+  let requestId = 0;
+  const organizationChanged = $derived(Boolean(
+    organizationProvider?.updateCurrentOrganization
+    && organization
+    && organizationName.trim()
+    && organizationName.trim() !== organization.name,
+  ));
+  const policyNumbersValid = $derived.by(() => {
+    const sessionTimeout = Number(sessionTimeoutValue);
+    const auditRetention = Number(auditRetentionValue);
+    return /^\d+$/.test(sessionTimeoutValue)
+      && /^\d+$/.test(auditRetentionValue)
+      && Number.isSafeInteger(sessionTimeout)
+      && Number.isSafeInteger(auditRetention)
+      && sessionTimeout > 0
+      && auditRetention > 0;
+  });
+
+  function message(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+  }
+
+  async function loadSettings(): Promise<void> {
+    const currentRequest = ++requestId;
+    const scopedIdentityProvider = identityProvider;
+    const scopedOrganizationProvider = organizationProvider;
+    const context = adminContext.enterpriseRequestContext;
+    policy = null;
+    organization = null;
+    organizationName = '';
+    sessionTimeoutValue = '';
+    auditRetentionValue = '';
+    identityProviders = [];
+    events = [];
+    error = null;
+    loading = false;
+    saving = false;
+    savingOrganization = false;
+    testing = false;
+    if (!scopedIdentityProvider && !scopedOrganizationProvider) return;
+    loading = true;
+    try {
+      const [nextPolicy, nextIdentityProviders, nextEvents, nextOrganization] = await Promise.all([
+        scopedIdentityProvider?.getSecurityPolicy(context) ?? null,
+        scopedIdentityProvider?.listIdentityProviders(context) ?? [],
+        scopedIdentityProvider?.listSecurityEvents?.({ page: 1, pageSize: 20 }, context) ?? { data: [], total: 0 },
+        scopedOrganizationProvider?.getCurrentOrganization(context) ?? null,
+      ]);
+      if (currentRequest !== requestId) return;
+      policy = nextPolicy;
+      sessionTimeoutValue = nextPolicy ? String(nextPolicy.sessionTimeoutMinutes) : '';
+      auditRetentionValue = nextPolicy ? String(nextPolicy.auditRetentionDays) : '';
+      identityProviders = nextIdentityProviders;
+      events = nextEvents.data;
+      organization = nextOrganization;
+      organizationName = nextOrganization?.name ?? '';
+      metadataUrl = nextIdentityProviders[0]?.metadataUrl ?? '';
+    } catch (caught) {
+      if (currentRequest === requestId) error = message(caught);
+    } finally {
+      if (currentRequest === requestId) loading = false;
+    }
+  }
+
+  $effect(() => {
+    void identityProvider;
+    void organizationProvider;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+    void loadSettings();
+    return () => { requestId += 1; };
+  });
+
+  async function saveSettings(): Promise<void> {
+    const provider = identityProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider || !policy || !policyNumbersValid) return;
+    saving = true;
+    try {
+      const updatedPolicy = await provider.updateSecurityPolicy({
+        ...policy,
+        sessionTimeoutMinutes: Number(sessionTimeoutValue),
+        auditRetentionDays: Number(auditRetentionValue),
+      }, context);
+      if (currentRequest !== requestId) return;
+      policy = updatedPolicy;
+      sessionTimeoutValue = String(updatedPolicy.sessionTimeoutMinutes);
+      auditRetentionValue = String(updatedPolicy.auditRetentionDays);
+      notifyWithProvider({ type: 'success', message: isZh ? '企业策略已保存' : 'Enterprise policy saved' }, adminContext.notificationProvider);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) saving = false;
+    }
+  }
+
+  async function saveOrganization(): Promise<void> {
+    const provider = organizationProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    const name = organizationName.trim();
+    if (!provider?.updateCurrentOrganization || !organization || !name || name === organization.name) return;
+    savingOrganization = true;
+    try {
+      const updatedOrganization = await provider.updateCurrentOrganization({ name }, context);
+      if (currentRequest !== requestId) return;
+      organization = updatedOrganization;
+      organizationName = updatedOrganization.name;
+      notifyWithProvider({ type: 'success', message: isZh ? '组织信息已保存' : 'Organization saved' }, adminContext.notificationProvider);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) savingOrganization = false;
+    }
+  }
+
+  async function testConnection(target?: IdentityProviderSummary): Promise<void> {
+    const provider = identityProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    testing = true;
+    try {
+      const selectedProvider = target ?? identityProviders[0];
+      const result = await provider.testIdentityProvider({
+        id: selectedProvider?.id,
+        protocol: selectedProvider?.protocol,
+        metadataUrl: target
+          ? target.metadataUrl
+          : (metadataUrl.trim() || selectedProvider?.metadataUrl),
+      }, context);
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({
+        type: result.success ? 'success' : 'error',
+        message: result.success
+          ? (isZh ? '身份源连接测试通过' : 'Identity provider connection succeeded')
+          : (result.error?.message ?? (isZh ? '身份源连接测试失败' : 'Identity provider connection failed')),
+      }, adminContext.notificationProvider);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) testing = false;
+    }
+  }
+
+  const displayEvents = $derived(events.map((event): SecurityEvent => ({
+    id: event.id,
+    event: event.event,
+    actor: event.actor,
+    location: event.location,
+    createdAt: event.createdAt instanceof Date ? event.createdAt.toLocaleString() : String(event.createdAt),
+    severity: event.severity === 'critical' ? 'danger' : (event.severity ?? 'info'),
+  })));
 </script>
 
 {#snippet auditControl()}
-  <Switch bind:checked={auditLogging} aria-label={i18n.t('account.auditLogging')} />
+  <Switch checked={policy?.auditLoggingEnabled ?? false} disabled={!policy || saving} aria-label={i18n.t('account.auditLogging')} onCheckedChange={(checked) => { if (policy) policy = { ...policy, auditLoggingEnabled: checked }; }} />
 {/snippet}
 
 {#snippet ssoControl()}
-  <Switch bind:checked={ssoEnabled} aria-label={i18n.t('account.enableSso')} />
+  <Switch checked={policy?.requireSso ?? false} disabled={!policy || saving} aria-label={i18n.t('account.enableSso')} onCheckedChange={(checked) => { if (policy) policy = { ...policy, requireSso: checked }; }} />
 {/snippet}
 
 <ContentPageShell pageId="account-settings-enterprise" width="wide">
   <ContentPageHeader title={i18n.t('account.settingsEnterprise')} description={i18n.t('account.settingsEnterpriseDescription')} />
-  <div class="grid gap-4 lg:grid-cols-2">
-    <SettingsGroup title={i18n.t('account.securityPolicy')} description="Set organization-wide controls for authentication and sessions." bodyClass="space-y-4">
-      <div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div></div>
-      <SettingsFieldRow label={i18n.t('account.auditLogging')} description="Preserve an auditable record of organization-level changes." control={auditControl} separated />
-      <Button size="sm">{i18n.t('common.save')}</Button>
-    </SettingsGroup>
-    <SettingsGroup title={i18n.t('account.singleSignOn')} description={i18n.t('account.ssoDescription')} bodyClass="space-y-4">
-      <SettingsFieldRow label={i18n.t('account.enableSso')} description="Require the configured identity provider for organization members." control={ssoControl} />
-      <Input value="https://idp.example.com/metadata" aria-label={i18n.t('account.ssoProvider')} />
-      <Button variant="outline" size="sm">{i18n.t('common.test')}</Button>
-    </SettingsGroup>
-  </div>
-  <section class="space-y-3"><SectionHeader title={i18n.t('account.connections')} />{#each identity as integration (integration.id)}<IntegrationCard {integration} />{/each}</section>
-  <section class="space-y-3"><SectionHeader title={i18n.t('account.securityLog')} /><SecurityEventTable events={events} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
+  {#if !identityProvider}
+    <FeedbackNotice tone="warning" message={isZh ? '未配置 IdentityGovernanceProvider。企业策略、SSO 测试和安全事件保持不可用，不会伪造保存结果。' : 'IdentityGovernanceProvider is not configured. Enterprise policy, SSO tests, and security events remain unavailable instead of simulating persistence.'} />
+  {/if}
+  {#if loading}
+    <DataState state="loading" />
+  {:else if error}
+    <DataState state="error" title={isZh ? '企业设置加载失败' : 'Enterprise settings failed to load'} description={error} retry={loadSettings} />
+  {:else}
+    <div class="grid items-start gap-4 lg:grid-cols-2">
+      <SettingsGroup title={i18n.t('account.securityPolicy')} description={isZh ? '配置组织级身份、会话与审计策略。' : 'Configure organization-wide identity, session, and audit controls.'} bodyClass="space-y-4">
+        {#if organizationProvider}
+          <div class="space-y-2"><Label for="organization-name">{isZh ? '组织名称' : 'Organization name'}</Label><div class="flex gap-2"><Input id="organization-name" bind:value={organizationName} disabled={!organizationProvider.updateCurrentOrganization || savingOrganization} /><Button variant="outline" size="sm" disabled={!organizationChanged || savingOrganization} onclick={saveOrganization}>{savingOrganization ? (isZh ? '保存中...' : 'Saving...') : i18n.t('common.save')}</Button></div></div>
+        {/if}
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" type="number" min="1" step="1" bind:value={sessionTimeoutValue} disabled={!policy || saving} /></div>
+          <div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" type="number" min="1" step="1" bind:value={auditRetentionValue} disabled={!policy || saving} /></div>
+        </div>
+        {#if policy && !policyNumbersValid}<FeedbackNotice tone="warning" message={isZh ? '会话超时和审计保留天数必须为正整数。' : 'Session timeout and audit retention must be positive integers.'} />{/if}
+        <SettingsFieldRow label={i18n.t('account.auditLogging')} description={isZh ? '由后端持久化组织级审计策略。' : 'Persist the organization audit policy through the backend provider.'} control={auditControl} separated />
+        <Button size="sm" disabled={!identityProvider || !policy || !policyNumbersValid || saving} onclick={saveSettings}>{saving ? (isZh ? '保存中...' : 'Saving...') : i18n.t('common.save')}</Button>
+      </SettingsGroup>
+      <SettingsGroup title={i18n.t('account.singleSignOn')} description={i18n.t('account.ssoDescription')} bodyClass="space-y-4">
+        <SettingsFieldRow label={i18n.t('account.enableSso')} description={isZh ? '启用后由已配置身份源执行组织登录策略。' : 'Require the configured identity provider for organization members.'} control={ssoControl} />
+        <Input bind:value={metadataUrl} placeholder="https://idp.example.com/.well-known/openid-configuration" aria-label={i18n.t('account.ssoProvider')} disabled={!identityProvider || testing} />
+        <Button variant="outline" size="sm" disabled={!identityProvider || testing} onclick={() => testConnection()}>{testing ? (isZh ? '测试中...' : 'Testing...') : i18n.t('common.test')}</Button>
+      </SettingsGroup>
+    </div>
+    <section class="space-y-3">
+      <SectionHeader title={i18n.t('account.connections')} />
+      {#if identityProviders.length === 0}
+        <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={{ id: connection.id, name: connection.name, account: connection.protocol.toUpperCase(), connected: connection.status === 'connected', description: connection.domain ?? connection.metadataUrl }} onconnect={() => testConnection(connection)} />
+        {/each}
+      {/if}
+    </section>
+    <section class="space-y-3"><SectionHeader title={i18n.t('account.securityLog')} /><SecurityEventTable events={displayEvents} emptyTitle={i18n.t('common.noData')} emptyDescription={isZh ? '当前 Provider 未返回安全事件。' : 'The provider returned no security events.'} /></section>
+  {/if}
 </ContentPageShell>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -7,7 +8,11 @@
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import SettingsGroup from '../content/SettingsGroup.svelte';
   import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
+  import FeedbackNotice from '../content/FeedbackNotice.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') }];
   let active = $state('profile');
   let visible = $state(true);
@@ -41,7 +46,13 @@
       {: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>
       {:else}
-        <SettingsGroup title={i18n.t('account.manageApi')} description="Use scoped credentials and rotate them when access changes." bodyClass="flex flex-col gap-3 sm:flex-row"><Input readonly value="sv_demo_pub_9f3e********41ab" aria-label="API key" /><Button variant="outline">{i18n.t('common.copy')}</Button></SettingsGroup>
+        <SettingsGroup title={i18n.t('account.manageApi')} description={isZh ? '使用有作用域的真实凭据，并在权限变更时轮换。' : 'Use scoped credentials and rotate them when access changes.'} bodyClass="space-y-3">
+          {#if credentialProvider}
+            <Button variant="outline" onclick={() => void adminContext.navigate('/settings/api')}>{isZh ? '打开 API 凭据管理' : 'Open API credential management'}</Button>
+          {:else}
+            <FeedbackNotice tone="warning" message={isZh ? '未配置 CredentialProvider，不会显示或生成演示密钥。' : 'CredentialProvider is not configured. No demo credential is displayed or generated.'} />
+          {/if}
+        </SettingsGroup>
       {/if}
     </div>
   </div>

package/dist/components/account/UserProfilePage.svelte

@@ -9,6 +9,7 @@
   import DescriptionList from '../content/DescriptionList.svelte';
   import FileList from '../content/FileList.svelte';
   import IntegrationCard from '../content/IntegrationCard.svelte';
+  import WorkspaceLayout from '../content/WorkspaceLayout.svelte';
   import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
   import { referenceDemoData } from '../../reference-data.js';
   const i18n = useTranslation();
@@ -22,8 +23,8 @@
 
 <ContentPageShell pageId="account-user-profile" width="wide">
   <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('account.userProfile')} description={i18n.t('account.userProfileDescription')} /><Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t('common.save')}</Button></div>
-  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-5 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.personalInfo')}</h2><p class="mt-1 text-sm text-muted-foreground">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div class="flex items-center justify-between gap-3"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.work')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="flex flex-wrap gap-1.5">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>
-    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>
-  </div>
+  <WorkspaceLayout secondaryWidth="20rem">
+    {#snippet primary()}<div class="space-y-4"><Card.Card><Card.CardContent class="space-y-5 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.personalInfo')}</h2><p class="mt-1 text-sm text-muted-foreground">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div class="flex items-center justify-between gap-3"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.work')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="flex flex-wrap gap-1.5">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>{/snippet}
+    {#snippet secondary()}<div class="space-y-4"><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>{/snippet}
+  </WorkspaceLayout>
 </ContentPageShell>

package/dist/components/content/ApiKeyList.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
-  import { Copy, KeyRound, Trash2 } from '@lucide/svelte';
+  import { Check, Copy, KeyRound, Trash2 } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
+  import { Badge } from '../ui/badge/index.js';
   import { Button } from '../ui/button/index.js';
   import DataState from './DataState.svelte';
   import type { DataStateKind } from './DataState.svelte';
-  export interface ApiKeySummary { id: string; name: string; prefix: string; createdAt?: string; lastUsedAt?: string; }
-  interface Props { keys?: ApiKeySummary[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
+  export interface ApiKeySummary {
+    id: string;
+    name: string;
+    prefix: string;
+    maskedToken?: string;
+    createdAt?: string;
+    lastUsedAt?: string;
+    permissions?: string[];
+  }
+  interface Props { keys?: ApiKeySummary[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; copiedKeyId?: string | null; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
   const i18n = useTranslation();
-  let { keys = [], state, stateTitle, stateDescription, retry, retryLabel, loadingLabel, oncopy, onrevoke, class: className = '' }: Props = $props();
+  let { keys = [], state, stateTitle, stateDescription, retry, retryLabel, loadingLabel, copiedKeyId = null, oncopy, onrevoke, class: className = '' }: Props = $props();
   const resolvedState = $derived(state ?? (keys.length === 0 ? 'empty' : undefined));
   const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
@@ -16,7 +25,23 @@
 {:else}
 <div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
   {#each keys as apiKey (apiKey.id)}
-    <div class="flex flex-wrap items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p><p class="font-mono text-xs text-muted-foreground">{apiKey.prefix}********</p></div><div class="text-right text-xs text-muted-foreground"><p>{apiKey.createdAt ?? (isZh ? '最近创建' : 'Created recently')}</p><p>{apiKey.lastUsedAt ?? (isZh ? '从未使用' : 'Never used')}</p></div><div class="flex items-center gap-1">{#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.copy') + ' ' + apiKey.name} onclick={() => oncopy?.(apiKey)}><Copy class="size-4" /></Button>{/if}{#if onrevoke}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.delete') + ' ' + apiKey.name} onclick={() => onrevoke?.(apiKey)}><Trash2 class="size-4" /></Button>{/if}</div></div>
+    <div class="flex flex-wrap items-center gap-3 px-4 py-3">
+      <span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span>
+      <div class="min-w-48 flex-1">
+        <p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p>
+        <p class="truncate font-mono text-xs text-muted-foreground">{apiKey.maskedToken ?? `${apiKey.prefix}********`}</p>
+        {#if apiKey.permissions?.length}
+          <div class="mt-2 flex flex-wrap gap-1">
+            {#each apiKey.permissions as permission (permission)}<Badge variant="secondary" class="px-2 py-0 text-[10px]">{permission}</Badge>{/each}
+          </div>
+        {/if}
+      </div>
+      <div class="text-left text-xs text-muted-foreground sm:text-right"><p>{apiKey.createdAt ?? (isZh ? '最近创建' : 'Created recently')}</p><p>{apiKey.lastUsedAt ?? (isZh ? '从未使用' : 'Never used')}</p></div>
+      <div class="ml-auto flex items-center gap-1">
+        {#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.copy') + ' ' + apiKey.name} onclick={() => oncopy?.(apiKey)}>{#if copiedKeyId === apiKey.id}<Check class="size-4 text-success" />{:else}<Copy class="size-4" />{/if}</Button>{/if}
+        {#if onrevoke}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.delete') + ' ' + apiKey.name} onclick={() => onrevoke?.(apiKey)}><Trash2 class="size-4" /></Button>{/if}
+      </div>
+    </div>
   {/each}
 </div>
 {/if}

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

@@ -3,8 +3,10 @@ export interface ApiKeySummary {
     id: string;
     name: string;
     prefix: string;
+    maskedToken?: string;
     createdAt?: string;
     lastUsedAt?: string;
+    permissions?: string[];
 }
 interface Props {
     keys?: ApiKeySummary[];
@@ -14,6 +16,7 @@ interface Props {
     retry?: () => void;
     retryLabel?: string;
     loadingLabel?: string;
+    copiedKeyId?: string | null;
     oncopy?: (key: ApiKeySummary) => void;
     onrevoke?: (key: ApiKeySummary) => void;
     class?: string;

package/dist/components/content/WorkspaceLayout.svelte

@@ -7,6 +7,7 @@
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
   }
 
@@ -15,14 +16,16 @@
     secondary,
     summary,
     secondaryWidth = '22rem',
+    mobileOrder = 'primary-first',
     class: className = '',
   }: Props = $props();
 </script>
 
 <div class={cn('flex flex-col gap-6', className)} data-svadmin-workspace-layout style:--workspace-secondary-width={secondaryWidth}>
-  {#if summary}<div class="order-2 sm:order-1">{@render summary()}</div>{/if}
-  <div class="order-1 grid min-w-0 gap-6 sm:order-2 lg:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]">
-    <div class="min-w-0" data-svadmin-workspace-primary>{@render primary()}</div>
-    {#if secondary}<aside class="min-w-0">{@render secondary()}</aside>{/if}
+  {#if summary}<div data-svadmin-workspace-summary>{@render summary()}</div>{/if}
+  <div class={cn('grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]', mobileOrder === 'secondary-first' && 'grid-rows-[auto_auto]')}>
+    {#if mobileOrder === 'secondary-first' && secondary}<aside class="order-1 min-w-0 xl:order-2">{@render secondary()}</aside>{/if}
+    <div class={cn('min-w-0', mobileOrder === 'secondary-first' ? 'order-2 xl:order-1' : 'order-1')} data-svadmin-workspace-primary>{@render primary()}</div>
+    {#if mobileOrder !== 'secondary-first' && secondary}<aside class="order-2 min-w-0 xl:order-2">{@render secondary()}</aside>{/if}
   </div>
 </div>

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

@@ -4,6 +4,7 @@ interface Props {
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
 }
 declare const WorkspaceLayout: import("svelte").Component<Props, {}, "">;