@svadmin/ui 0.38.5 → 0.39.0

package/dist/components/Sidebar.svelte

@@ -9,6 +9,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import * as Tooltip from './ui/tooltip/index.js';
   import SidebarItem from './SidebarItem.svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
 
   import { ScrollArea } from './ui/scroll-area/index.js';
   import * as Collapsible from './ui/collapsible/index.js';
@@ -218,13 +219,18 @@
 >
   <div class="flex h-[70px] items-center shrink-0" class:px-5={!collapsed} class:justify-center={collapsed}>
     {#if !collapsed}
-      <a href={formatSidebarLink('/')} class="flex items-center gap-2.5 group" onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
-        <div class="w-[34px] h-[34px] rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 transition-transform group-hover:scale-105" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+      <a href={formatSidebarLink('/')} class="group flex items-center gap-2.5" onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
+        <SvadminLogo />
         <span class="font-semibold text-[15px] tracking-[-0.01em] text-sidebar-foreground">{title}</span>
       </a>
     {:else}
-      <a href={formatSidebarLink('/')} class="group" aria-label={title} onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
-        <div class="w-[34px] h-[34px] rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 transition-transform group-hover:scale-105" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+      <a
+        href={formatSidebarLink('/')}
+        class="group"
+        aria-label={title}
+        onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}
+      >
+        <SvadminLogo />
       </a>
     {/if}
   </div>

package/dist/components/SvadminLogo.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  let {
+    size = 34,
+    onDark = false,
+  }: {
+    size?: number;
+    onDark?: boolean;
+  } = $props();
+</script>
+
+<span
+  aria-hidden="true"
+  class="inline-block shrink-0 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shadow-sm {onDark ? 'ring-1 ring-white/35' : ''}"
+  style:width={`${size}px`}
+  style:height={`${size}px`}
+></span>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: number;
+    onDark?: boolean;
+};
+declare const SvadminLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+type SvadminLogo = ReturnType<typeof SvadminLogo>;
+export default SvadminLogo;

package/dist/components/UpdatePasswordPage.svelte

@@ -5,7 +5,8 @@
   import { Button } from './ui/button/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { ShieldCheck, Loader2, AlertCircle, Shield } from '@lucide/svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
+  import { Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -47,9 +48,7 @@
 
     <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
       <div class="flex items-center gap-3">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
-          <Shield class="h-5 w-5 text-white" />
-        </div>
+        <SvadminLogo size={36} onDark />
         <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
       </div>
 
@@ -73,10 +72,8 @@
   <!-- Right form panel -->
   <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
     <div class="w-full max-w-[400px]">
-      <div class="flex items-center gap-3 mb-8 lg:hidden">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-          <ShieldCheck class="h-5 w-5" />
-        </div>
+      <div class="mb-8 flex items-center gap-3 lg:hidden">
+        <SvadminLogo size={36} />
         <span class="text-lg font-semibold tracking-tight">{title}</span>
       </div>
 

package/dist/components/account/CompanyProfilePage.svelte

@@ -4,7 +4,9 @@
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
-  import { Upload, Loader2 } from '@lucide/svelte';
+  import { Badge } from '../ui/badge/index.js';
+  import * as Table from '../ui/table/index.js';
+  import { Upload, Loader2, ShieldCheck, ShieldOff } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -16,6 +18,14 @@
   let description = $state('Building the future of enterprise software with cutting-edge AI and cloud solutions.');
   let saving = $state(false);
 
+  const members = [
+    { name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', twoFactor: true, joined: '2022-03-15' },
+    { name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', twoFactor: true, joined: '2022-06-22' },
+    { name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', twoFactor: false, joined: '2023-01-10' },
+    { name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', twoFactor: true, joined: '2022-02-14' },
+    { name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', twoFactor: false, joined: '2023-04-05' },
+  ];
+
   async function handleSave() {
     saving = true;
     await new Promise(r => setTimeout(r, 800));
@@ -98,4 +108,49 @@
       </div>
     </Card.CardContent>
   </Card.Card>
+
+  <!-- Members -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{i18n.t('profileSections.members')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="p-0">
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.Head>{i18n.t('profile.name')}</Table.Head>
+            <Table.Head>{i18n.t('account.role')}</Table.Head>
+            <Table.Head>2FA</Table.Head>
+            <Table.Head class="text-right">{i18n.t('account.joined')}</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {#each members as member (member.email)}
+            <Table.Row>
+              <Table.Cell>
+                <div class="flex items-center gap-3">
+                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold">
+                    {member.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
+                  </div>
+                  <div class="min-w-0">
+                    <p class="truncate text-sm font-medium text-foreground">{member.name}</p>
+                    <p class="truncate text-xs text-muted-foreground">{member.email}</p>
+                  </div>
+                </div>
+              </Table.Cell>
+              <Table.Cell><Badge variant="secondary" class="text-[10px]">{member.role}</Badge></Table.Cell>
+              <Table.Cell>
+                {#if member.twoFactor}
+                  <ShieldCheck class="h-4 w-4 text-green-500" />
+                {:else}
+                  <ShieldOff class="h-4 w-4 text-muted-foreground/50" />
+                {/if}
+              </Table.Cell>
+              <Table.Cell class="text-right text-muted-foreground">{member.joined}</Table.Cell>
+            </Table.Row>
+          {/each}
+        </Table.Body>
+      </Table.Root>
+    </Card.CardContent>
+  </Card.Card>
 </div>

package/dist/components/account/ImportMembersPage.svelte

@@ -2,6 +2,8 @@
   import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   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';
 
   const i18n = useTranslation();
@@ -12,6 +14,15 @@
   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;
@@ -141,5 +152,25 @@
         </Button>
       </Card.CardContent>
     </Card.Card>
+
+    <!-- Import options -->
+    <Card.Card class="border-border/60">
+      <Card.CardHeader>
+        <Card.CardTitle class="text-base">{i18n.t('account.importOptions')}</Card.CardTitle>
+      </Card.CardHeader>
+      <Card.CardContent class="space-y-4">
+        {#each importOptions as option, i (option.key)}
+          <div class="flex items-center justify-between gap-4">
+            <Label for="import-option-{i}" class="text-sm font-normal text-foreground">{i18n.t(option.key)}</Label>
+            <Switch id="import-option-{i}" bind:checked={optionStates[i]} />
+          </div>
+        {/each}
+        <div class="flex justify-end border-t pt-4">
+          <Button onclick={() => { const input = document.getElementById('file-input'); input?.click(); }}>
+            {i18n.t('account.startImport')}
+          </Button>
+        </div>
+      </Card.CardContent>
+    </Card.Card>
   {/if}
 </div>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -6,10 +6,33 @@
   import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
   import { Badge } from '../ui/badge/index.js';
-  import { Loader2, Shield, Building2, Lock, Globe } from '@lucide/svelte';
+  import { Loader2, Shield, Building2, Lock, Globe, Calendar, Link2, Database } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
+  const trustedDevices = [
+    { name: 'MacBook Pro 16"', detail: 'macOS · Shanghai, CN', lastSeen: '2026-08-04 09:12', current: true },
+    { name: 'iPhone 17', detail: 'iOS · Shanghai, CN', lastSeen: '2026-08-03 22:41', current: false },
+    { name: 'Windows Workstation', detail: 'Windows · Beijing, CN', lastSeen: '2026-07-28 18:05', current: false },
+  ];
+
+  const paymentHistory = [
+    { date: '2026-08-01', type: 'Enterprise · Monthly', amount: '$299.00' },
+    { date: '2026-07-01', type: 'Enterprise · Monthly', amount: '$299.00' },
+    { date: '2026-06-01', type: 'Enterprise · Monthly', amount: '$299.00' },
+  ];
+
+  const calendarAccounts = [
+    { name: 'Work Calendar', account: 'alex@acme.com', active: true },
+    { name: 'Personal Calendar', account: 'alex@example.com', active: false },
+  ];
+
+  const connections = [
+    { name: 'Source Control', account: 'alexchen', linked: true },
+    { name: 'ChatOps', account: '@alex.chen', linked: true },
+    { name: 'Cloud Drive', account: 'alex@acme.com', linked: false },
+  ];
+
   let ssoEnabled = $state(false);
   let ssoProvider = $state('');
   let domainRestriction = $state('');
@@ -41,26 +64,26 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <Shield class="h-4 w-4 text-muted-foreground" />
-        单点登录 (SSO)
+        {i18n.t('account.singleSignOn')}
       </Card.CardTitle>
-      <Card.CardDescription>配置企业身份提供商以实现统一登录体验。</Card.CardDescription>
+      <Card.CardDescription>{i18n.t('account.ssoDescription')}</Card.CardDescription>
     </Card.CardHeader>
     <Card.CardContent class="space-y-4">
       <div class="flex items-center justify-between gap-4">
         <div class="space-y-1">
-          <Label for="sso-enabled">启用 SSO</Label>
-          <p class="text-xs text-muted-foreground">允许员工通过企业 IdP 登录</p>
+          <Label for="sso-enabled">{i18n.t('account.enableSso')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('account.enableSsoDesc')}</p>
         </div>
         <Switch id="sso-enabled" bind:checked={ssoEnabled} />
       </div>
       {#if ssoEnabled}
         <div class="grid gap-4 sm:grid-cols-2">
           <div class="space-y-2">
-            <Label for="sso-provider">SSO 提供商</Label>
+            <Label for="sso-provider">{i18n.t('account.ssoProvider')}</Label>
             <Input id="sso-provider" bind:value={ssoProvider} placeholder="Okta, Azure AD, etc." />
           </div>
           <div class="space-y-2">
-            <Label for="domain-restriction">域名限制</Label>
+            <Label for="domain-restriction">{i18n.t('account.domainRestriction')}</Label>
             <Input id="domain-restriction" bind:value={domainRestriction} placeholder="@company.com" />
           </div>
         </div>
@@ -73,29 +96,29 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <Lock class="h-4 w-4 text-muted-foreground" />
-        安全策略
+        {i18n.t('account.securityPolicy')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent class="space-y-4">
       <div class="grid gap-4 sm:grid-cols-2">
         <div class="space-y-2">
-          <Label for="password-policy">密码策略</Label>
+          <Label for="password-policy">{i18n.t('account.passwordPolicy')}</Label>
           <select id="password-policy" bind:value={passwordPolicy} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring">
-            <option value="basic">基本</option>
-            <option value="strong">强密码</option>
-            <option value="very-strong">非常强</option>
+            <option value="basic">{i18n.t('account.policyBasic')}</option>
+            <option value="strong">{i18n.t('account.policyStrong')}</option>
+            <option value="very-strong">{i18n.t('account.policyVeryStrong')}</option>
           </select>
         </div>
         <div class="space-y-2">
-          <Label for="session-timeout">会话超时（分钟）</Label>
+          <Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label>
           <Input id="session-timeout" bind:value={sessionTimeout} type="number" />
         </div>
       </div>
 
       <div class="space-y-2">
-        <Label for="ip-whitelist">IP 白名单</Label>
+        <Label for="ip-whitelist">{i18n.t('account.ipWhitelist')}</Label>
         <Input id="ip-whitelist" bind:value={ipWhitelist} placeholder="10.0.0.0/8, 192.168.1.0/24" />
-        <p class="text-xs text-muted-foreground">留空表示不限制 IP</p>
+        <p class="text-xs text-muted-foreground">{i18n.t('account.ipWhitelistHint')}</p>
       </div>
     </Card.CardContent>
   </Card.Card>
@@ -105,20 +128,20 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <Globe class="h-4 w-4 text-muted-foreground" />
-        数据与合规
+        {i18n.t('account.dataCompliance')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent class="space-y-4">
       <div class="flex items-center justify-between gap-4">
         <div class="space-y-1">
-          <Label for="audit-logging">审计日志</Label>
-          <p class="text-xs text-muted-foreground">记录所有管理操作以备合规审查</p>
+          <Label for="audit-logging">{i18n.t('account.auditLogging')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('account.auditLoggingDesc')}</p>
         </div>
         <Switch id="audit-logging" bind:checked={auditLogging} />
       </div>
 
       <div class="space-y-2">
-        <Label for="data-retention">数据保留天数</Label>
+        <Label for="data-retention">{i18n.t('account.dataRetention')}</Label>
         <Input id="data-retention" bind:value={dataRetention} type="number" />
       </div>
 
@@ -130,4 +153,134 @@
       </div>
     </Card.CardContent>
   </Card.Card>
+
+  <div class="grid gap-4 lg:grid-cols-2">
+    <!-- Trusted Devices -->
+    <Card.Card class="border-border/60">
+      <Card.CardHeader>
+        <Card.CardTitle class="text-base">{i18n.t('account.trustedDevices')}</Card.CardTitle>
+      </Card.CardHeader>
+      <Card.CardContent class="p-0">
+        <div class="divide-y">
+          {#each trustedDevices as device (device.name)}
+            <div class="flex items-center justify-between gap-3 px-6 py-3">
+              <div class="min-w-0">
+                <p class="truncate text-sm font-medium text-foreground">{device.name}</p>
+                <p class="truncate text-xs text-muted-foreground">{device.detail} · {device.lastSeen}</p>
+              </div>
+              {#if device.current}
+                <Badge variant="secondary" class="shrink-0 text-[10px]">{i18n.t('security.currentSession')}</Badge>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </Card.CardContent>
+    </Card.Card>
+
+    <!-- Current Plan + Payment History -->
+    <div class="space-y-4">
+      <Card.Card class="border-primary/30 bg-primary/5">
+        <Card.CardHeader class="pb-3">
+          <div class="flex items-center justify-between">
+            <Card.CardTitle class="text-base">{i18n.t('account.currentPlan')}</Card.CardTitle>
+            <Badge variant="secondary">Enterprise</Badge>
+          </div>
+        </Card.CardHeader>
+        <Card.CardContent>
+          <div class="flex items-baseline gap-1">
+            <span class="text-2xl font-bold text-foreground">$299</span>
+            <span class="text-sm text-muted-foreground">{i18n.t('account.perMonth')}</span>
+          </div>
+          <p class="mt-1 text-xs text-muted-foreground">Unlimited seats · SSO · Audit retention 365d</p>
+        </Card.CardContent>
+      </Card.Card>
+
+      <Card.Card class="border-border/60">
+        <Card.CardHeader class="pb-3">
+          <Card.CardTitle class="text-base">{i18n.t('account.paymentHistory')}</Card.CardTitle>
+        </Card.CardHeader>
+        <Card.CardContent class="p-0">
+          <div class="divide-y">
+            <div class="grid grid-cols-3 px-6 py-2 text-xs font-medium text-muted-foreground">
+              <span>{i18n.t('account.date')}</span>
+              <span>{i18n.t('account.type')}</span>
+              <span class="text-right">{i18n.t('account.amount')}</span>
+            </div>
+            {#each paymentHistory as row (row.date)}
+              <div class="grid grid-cols-3 px-6 py-2.5 text-sm">
+                <span class="text-muted-foreground">{row.date}</span>
+                <span class="text-foreground">{row.type}</span>
+                <span class="text-right font-medium text-foreground">{row.amount}</span>
+              </div>
+            {/each}
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+    </div>
+  </div>
+
+  <div class="grid gap-4 lg:grid-cols-3">
+    <!-- Calendar Accounts -->
+    <Card.Card class="border-border/60">
+      <Card.CardHeader>
+        <Card.CardTitle class="flex items-center gap-2 text-base">
+          <Calendar class="h-4 w-4 text-muted-foreground" />{i18n.t('account.calendarAccounts')}
+        </Card.CardTitle>
+      </Card.CardHeader>
+      <Card.CardContent class="space-y-3">
+        {#each calendarAccounts as cal (cal.account)}
+          <div class="flex items-center justify-between gap-3">
+            <div class="min-w-0">
+              <p class="truncate text-sm font-medium text-foreground">{cal.name}</p>
+              <p class="truncate text-xs text-muted-foreground">{cal.account}</p>
+            </div>
+            <Badge variant={cal.active ? 'secondary' : 'outline'} class="shrink-0 text-[10px]">
+              {cal.active ? i18n.t('account.active') : i18n.t('account.inactive')}
+            </Badge>
+          </div>
+        {/each}
+      </Card.CardContent>
+    </Card.Card>
+
+    <!-- Connections -->
+    <Card.Card class="border-border/60">
+      <Card.CardHeader>
+        <Card.CardTitle class="flex items-center gap-2 text-base">
+          <Link2 class="h-4 w-4 text-muted-foreground" />{i18n.t('account.connections')}
+        </Card.CardTitle>
+      </Card.CardHeader>
+      <Card.CardContent class="space-y-3">
+        {#each connections as conn (conn.name)}
+          <div class="flex items-center justify-between gap-3">
+            <div class="min-w-0">
+              <p class="truncate text-sm font-medium text-foreground">{conn.name}</p>
+              <p class="truncate text-xs text-muted-foreground">{conn.account}</p>
+            </div>
+            <Badge variant={conn.linked ? 'secondary' : 'outline'} class="shrink-0 text-[10px]">
+              {conn.linked ? i18n.t('integrations.statusConnected') : i18n.t('integrations.statusDisconnected')}
+            </Badge>
+          </div>
+        {/each}
+      </Card.CardContent>
+    </Card.Card>
+
+    <!-- Data import -->
+    <Card.Card class="border-border/60">
+      <Card.CardHeader>
+        <Card.CardTitle class="flex items-center gap-2 text-base">
+          <Database class="h-4 w-4 text-muted-foreground" />{i18n.t('account.dataImport')}
+        </Card.CardTitle>
+        <Card.CardDescription>{i18n.t('account.dataImportDescription')}</Card.CardDescription>
+      </Card.CardHeader>
+      <Card.CardContent>
+        <div class="flex items-center justify-between gap-3 rounded-lg border border-border/60 p-3">
+          <div class="min-w-0">
+            <p class="truncate text-sm font-medium text-foreground">Google Analytics</p>
+            <p class="truncate text-xs text-muted-foreground">analytics.google.com</p>
+          </div>
+          <Button size="sm" variant="outline">{i18n.t('network.connect')}</Button>
+        </div>
+      </Card.CardContent>
+    </Card.Card>
+  </div>
 </div>