@svadmin/ui 0.38.7 → 0.40.0

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>

package/dist/components/account/SettingsPlainPage.svelte

@@ -6,35 +6,67 @@
   import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
   import { Separator } from '../ui/separator/index.js';
-  import { Loader2 } from '@lucide/svelte';
+  import { Loader2, Camera, Trash2 } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
   let displayName = $state('Alex Chen');
   let email = $state('alex@example.com');
+  let phone = $state('+86 138 **** 9527');
+  let dateOfBirth = $state('1995-04-18');
+  let bio = $state('Full-stack developer focused on design systems and developer tooling.');
+  let country = $state('China');
+  let region = $state('Shanghai');
+  let city = $state('Shanghai');
+  let postcode = $state('200120');
+  let currentPassword = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');
   let emailNotifications = $state(true);
-  let pushNotifications = $state(true);
   let twoFactor = $state(false);
+  let confirmDelete = $state(false);
   let saving = $state(false);
 
   async function handleSave() {
     saving = true;
-    await new Promise(r => setTimeout(r, 800));
+    await new Promise((r) => setTimeout(r, 800));
     saving = false;
   }
 </script>
 
 <div class="space-y-6" data-svadmin-content-page="account">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsPlain')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsPlainDescription')}</p>
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsPlain')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsPlainDescription')}</p>
+    </div>
+    <Button onclick={handleSave} disabled={saving} size="sm">
+      {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
+      {i18n.t('common.save')}
+    </Button>
   </div>
 
+  <!-- General Settings -->
   <Card.Card class="border-border/60">
     <Card.CardHeader>
       <Card.CardTitle class="text-base">{i18n.t('settings.general')}</Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent class="space-y-4">
+      <div class="flex items-center gap-4">
+        <div class="relative">
+          <div class="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary text-xl font-bold">AC</div>
+          <button class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
+            <Camera class="h-3 w-3" />
+          </button>
+        </div>
+        <div>
+          <p class="text-sm font-medium text-foreground">{i18n.t('account.photo')}</p>
+          <p class="text-xs text-muted-foreground">150x150px JPEG, PNG Image</p>
+        </div>
+      </div>
+
+      <Separator />
+
       <div class="grid gap-4 sm:grid-cols-2">
         <div class="space-y-2">
           <Label for="display-name">{i18n.t('profile.name')}</Label>
@@ -44,6 +76,24 @@
           <Label for="email">Email</Label>
           <Input id="email" bind:value={email} type="email" />
         </div>
+        <div class="space-y-2">
+          <Label for="phone">{i18n.t('account.phone')}</Label>
+          <Input id="phone" bind:value={phone} />
+        </div>
+        <div class="space-y-2">
+          <Label for="dob">{i18n.t('account.dateOfBirth')}</Label>
+          <Input id="dob" bind:value={dateOfBirth} type="date" />
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <Label for="bio">{i18n.t('account.bio')}</Label>
+        <textarea
+          id="bio"
+          bind:value={bio}
+          rows={3}
+          class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ></textarea>
       </div>
 
       <Separator />
@@ -58,24 +108,78 @@
 
       <div class="flex items-center justify-between gap-4">
         <div class="space-y-1">
-          <Label for="push-notif">{i18n.t('notifications.pushTitle')}</Label>
-          <p class="text-xs text-muted-foreground">{i18n.t('notifications.pushDescription')}</p>
+          <Label for="two-factor">{i18n.t('account.twoFactorAuth')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
         </div>
-        <Switch id="push-notif" bind:checked={pushNotifications} />
+        <Switch id="two-factor" bind:checked={twoFactor} />
       </div>
+    </Card.CardContent>
+  </Card.Card>
 
-      <div class="flex items-center justify-between gap-4">
-        <div class="space-y-1">
-          <Label for="two-factor">{i18n.t('security.twoFactorAuth')}</Label>
-          <p class="text-xs text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
+  <!-- Address -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{i18n.t('account.address')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-4 sm:grid-cols-2">
+        <div class="space-y-2">
+          <Label for="country">{i18n.t('account.country')}</Label>
+          <Input id="country" bind:value={country} />
+        </div>
+        <div class="space-y-2">
+          <Label for="state">{i18n.t('account.state')}</Label>
+          <Input id="state" bind:value={region} />
+        </div>
+        <div class="space-y-2">
+          <Label for="city">{i18n.t('account.city')}</Label>
+          <Input id="city" bind:value={city} />
+        </div>
+        <div class="space-y-2">
+          <Label for="postcode">{i18n.t('account.postcode')}</Label>
+          <Input id="postcode" bind:value={postcode} />
         </div>
-        <Switch id="two-factor" bind:checked={twoFactor} />
       </div>
+    </Card.CardContent>
+  </Card.Card>
 
+  <!-- Password -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{i18n.t('account.password')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div class="space-y-2">
+          <Label for="current-password">{i18n.t('profile.currentPassword')}</Label>
+          <Input id="current-password" bind:value={currentPassword} type="password" />
+        </div>
+        <div class="space-y-2">
+          <Label for="new-password">{i18n.t('profile.newPassword')}</Label>
+          <Input id="new-password" bind:value={newPassword} type="password" />
+        </div>
+        <div class="space-y-2">
+          <Label for="confirm-password">{i18n.t('auth.confirmPassword')}</Label>
+          <Input id="confirm-password" bind:value={confirmPassword} type="password" />
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Delete Account -->
+  <Card.Card class="border-destructive/30">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base text-destructive">{i18n.t('account.deleteAccount')}</Card.CardTitle>
+      <Card.CardDescription>{i18n.t('account.deleteAccountDescription')}</Card.CardDescription>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="flex items-center justify-between gap-4">
+        <Label for="confirm-delete" class="text-sm font-normal">{i18n.t('account.confirmDeleteAccount')}</Label>
+        <Switch id="confirm-delete" bind:checked={confirmDelete} />
+      </div>
       <div class="flex justify-end">
-        <Button onclick={handleSave} disabled={saving}>
-          {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-          {i18n.t('common.save')}
+        <Button variant="destructive" size="sm" disabled={!confirmDelete}>
+          <Trash2 class="h-4 w-4 mr-1" />{i18n.t('account.deleteAccount')}
         </Button>
       </div>
     </Card.CardContent>