@svadmin/ui 0.38.1 → 0.38.5

package/dist/components/account/CompanyProfilePage.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   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';
 
+  const i18n = useTranslation();
+
   let companyName = $state('Acme Corporation');
   let industry = $state('Technology');
   let website = $state('https://acme.com');
@@ -23,8 +25,8 @@
 
 <div class="space-y-6" data-svadmin-content-page="account">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('account.companyProfile')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('account.companyProfileDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.companyProfile')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.companyProfileDescription')}</p>
   </div>
 
   <!-- Company Avatar & Banner -->
@@ -54,33 +56,33 @@
   <!-- Company Details Form -->
   <Card.Card class="border-border/60">
     <Card.CardHeader>
-      <Card.CardTitle class="text-base">{t('profile.companyName')}</Card.CardTitle>
+      <Card.CardTitle class="text-base">{i18n.t('profile.companyName')}</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="company-name">{t('profile.companyName')}</Label>
+          <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">{t('profile.industry')}</Label>
+          <Label for="company-industry">{i18n.t('profile.industry')}</Label>
           <Input id="company-industry" bind:value={industry} />
         </div>
         <div class="space-y-2">
-          <Label for="company-website">{t('profile.website')}</Label>
+          <Label for="company-website">{i18n.t('profile.website')}</Label>
           <Input id="company-website" bind:value={website} type="url" />
         </div>
         <div class="space-y-2">
-          <Label for="company-employees">{t('profile.employees')}</Label>
+          <Label for="company-employees">{i18n.t('profile.employees')}</Label>
           <Input id="company-employees" bind:value={employeeCount} />
         </div>
         <div class="space-y-2">
-          <Label for="company-founded">{t('profile.founded')}</Label>
+          <Label for="company-founded">{i18n.t('profile.founded')}</Label>
           <Input id="company-founded" bind:value={foundedYear} />
         </div>
       </div>
       <div class="space-y-2">
-        <Label for="company-description">{t('profile.companyDescription')}</Label>
+        <Label for="company-description">{i18n.t('profile.companyDescription')}</Label>
         <textarea
           id="company-description"
           bind:value={description}
@@ -91,7 +93,7 @@
       <div class="flex justify-end">
         <Button onclick={handleSave} disabled={saving}>
           {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-          {t('common.save')}
+          {i18n.t('common.save')}
         </Button>
       </div>
     </Card.CardContent>

package/dist/components/account/GetStartedPage.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Badge } from '../ui/badge/index.js';
   import { Camera, UserPlus, Puzzle, Users, CheckCircle2, ArrowRight, Sparkles } from '@lucide/svelte';
   import type { Component } from 'svelte';
 
+  const i18n = useTranslation();
+
   interface Step {
     key: string;
     title: string;
@@ -17,10 +19,10 @@
   let currentStep = $state(0);
 
   let steps = $state<Step[]>([
-    { key: 'avatar', title: t('account.uploadAvatar'), description: t('account.getStartedDescription'), icon: Camera, completed: false },
-    { key: 'profile', title: t('account.setupProfile'), description: t('account.getStartedDescription'), icon: UserPlus, completed: false },
-    { key: 'connect', title: t('account.connectProvider'), description: t('account.getStartedDescription'), icon: Puzzle, completed: false },
-    { key: 'team', title: t('account.setupTeam'), description: t('account.getStartedDescription'), icon: Users, completed: false },
+    { key: 'avatar', title: i18n.t('account.uploadAvatar'), description: i18n.t('account.getStartedDescription'), icon: Camera, completed: false },
+    { key: 'profile', title: i18n.t('account.setupProfile'), description: i18n.t('account.getStartedDescription'), icon: UserPlus, completed: false },
+    { key: 'connect', title: i18n.t('account.connectProvider'), description: i18n.t('account.getStartedDescription'), icon: Puzzle, completed: false },
+    { key: 'team', title: i18n.t('account.setupTeam'), description: i18n.t('account.getStartedDescription'), icon: Users, completed: false },
   ]);
 
   const completedCount = $derived(steps.filter(s => s.completed).length);
@@ -50,8 +52,8 @@
 <div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('account.getStarted')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('account.getStartedDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.getStarted')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.getStartedDescription')}</p>
     </div>
     <Badge variant="secondary">{progressPercent}%</Badge>
   </div>
@@ -61,7 +63,7 @@
     <div class="h-2 rounded-full bg-muted overflow-hidden">
       <div class="h-full rounded-full bg-primary transition-all duration-500" style="width: {progressPercent}%"></div>
     </div>
-    <p class="text-xs text-muted-foreground">{t('account.step', { current: completedCount, total: steps.length })}</p>
+    <p class="text-xs text-muted-foreground">{i18n.t('account.step', { current: completedCount, total: steps.length })}</p>
   </div>
 
   {#if allCompleted}
@@ -71,8 +73,8 @@
           <Sparkles class="h-6 w-6" />
         </div>
         <div>
-          <h3 class="font-semibold text-success">{t('account.completeSetup')}</h3>
-          <p class="text-sm text-success/70">{t('account.getStartedDescription')}</p>
+          <h3 class="font-semibold text-success">{i18n.t('account.completeSetup')}</h3>
+          <p class="text-sm text-success/70">{i18n.t('account.getStartedDescription')}</p>
         </div>
       </Card.CardContent>
     </Card.Card>
@@ -98,7 +100,7 @@
                 <div class="flex items-center gap-2">
                   <h4 class="font-medium text-foreground">{step.title}</h4>
                   {#if currentStep === i && !step.completed}
-                    <Badge variant="outline" class="text-[10px]">{t('account.step', { current: i + 1, total: steps.length })}</Badge>
+                    <Badge variant="outline" class="text-[10px]">{i18n.t('account.step', { current: i + 1, total: steps.length })}</Badge>
                   {/if}
                 </div>
                 <p class="text-sm text-muted-foreground mt-0.5">{step.description}</p>
@@ -106,10 +108,10 @@
                 {#if currentStep === i && !step.completed}
                   <div class="mt-3 flex gap-2">
                     <Button size="sm" onclick={() => markComplete(i)}>
-                      {t('account.completeSetup')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
+                      {i18n.t('account.completeSetup')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
                     </Button>
                     <Button size="sm" variant="ghost" onclick={skipStep}>
-                      {t('account.skipSetup')}
+                      {i18n.t('account.skipSetup')}
                     </Button>
                   </div>
                 {/if}

package/dist/components/account/ImportMembersPage.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Upload, Download, FileText, CheckCircle2, Loader2 } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let isDragging = $state(false);
   let fileName = $state('');
   let importState = $state<'idle' | 'uploading' | 'processing' | 'complete' | 'error'>('idle');
@@ -61,8 +63,8 @@
 
 <div class="space-y-6" data-svadmin-content-page="account">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('account.importMembers')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('account.importMembersDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.importMembers')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.importMembersDescription')}</p>
   </div>
 
   {#if importState === 'complete'}
@@ -72,10 +74,10 @@
           <CheckCircle2 class="h-7 w-7" />
         </div>
         <div class="text-center">
-          <h3 class="text-lg font-semibold text-success">{t('account.importComplete')}</h3>
-          <p class="text-sm text-success/70 mt-1">{t('account.imported', { count: importCount })}</p>
+          <h3 class="text-lg font-semibold text-success">{i18n.t('account.importComplete')}</h3>
+          <p class="text-sm text-success/70 mt-1">{i18n.t('account.imported', { count: importCount })}</p>
         </div>
-        <Button variant="outline" onclick={resetImport}>{t('common.back')}</Button>
+        <Button variant="outline" onclick={resetImport}>{i18n.t('common.back')}</Button>
       </Card.CardContent>
     </Card.Card>
   {:else}
@@ -92,11 +94,11 @@
         >
           {#if importState === 'idle'}
             <Upload class="mx-auto h-10 w-10 text-muted-foreground" />
-            <p class="mt-3 text-sm font-medium text-foreground">{t('account.dragOrClick')}</p>
-            <p class="mt-1 text-xs text-muted-foreground">{t('account.supportedFormats')}</p>
+            <p class="mt-3 text-sm font-medium text-foreground">{i18n.t('account.dragOrClick')}</p>
+            <p class="mt-1 text-xs text-muted-foreground">{i18n.t('account.supportedFormats')}</p>
             <div class="mt-4">
               <span class="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground">
-                {t('common.upload')}
+                {i18n.t('common.upload')}
               </span>
               <input id="file-input" type="file" accept=".csv,.xlsx" class="sr-only" onchange={handleFileSelect} />
             </div>
@@ -114,7 +116,7 @@
                 <div class="h-full rounded-full bg-primary transition-all duration-300" style="width: {progress}%"></div>
               </div>
               <p class="text-xs text-muted-foreground">
-                {importState === 'uploading' ? t('account.importProgress') : t('account.startImport')}...
+                {importState === 'uploading' ? i18n.t('account.importProgress') : i18n.t('account.startImport')}...
               </p>
             </div>
           {/if}
@@ -130,12 +132,12 @@
             <FileText class="h-4 w-4" />
           </div>
           <div>
-            <p class="text-sm font-medium text-foreground">{t('account.downloadTemplate')}</p>
+            <p class="text-sm font-medium text-foreground">{i18n.t('account.downloadTemplate')}</p>
             <p class="text-xs text-muted-foreground">CSV template.csv</p>
           </div>
         </div>
         <Button variant="outline" size="sm">
-          <Download class="h-3.5 w-3.5 mr-1" />{t('account.downloadTemplate')}
+          <Download class="h-3.5 w-3.5 mr-1" />{i18n.t('account.downloadTemplate')}
         </Button>
       </Card.CardContent>
     </Card.Card>

package/dist/components/account/MembersStarterPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Badge } from '../ui/badge/index.js';
@@ -7,6 +7,8 @@
   import { Input } from '../ui/input/index.js';
   import { Search, UserPlus, MoreHorizontal, Clock, CheckCircle2, XCircle } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface Member {
     id: string;
     name: string;
@@ -35,9 +37,9 @@
   );
 
   const statusConfig = {
-    'active': { icon: CheckCircle2, color: 'text-green-500', label: t('account.active') },
-    'invited': { icon: Clock, color: 'text-amber-500', label: t('account.invited') },
-    'inactive': { icon: XCircle, color: 'text-muted-foreground', label: t('account.inactive') },
+    'active': { icon: CheckCircle2, color: 'text-green-500', label: i18n.t('account.active') },
+    'invited': { icon: Clock, color: 'text-amber-500', label: i18n.t('account.invited') },
+    'inactive': { icon: XCircle, color: 'text-muted-foreground', label: i18n.t('account.inactive') },
   };
 
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
@@ -46,11 +48,11 @@
 <div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('account.membersStarter')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('account.membersStarterDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.membersStarter')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.membersStarterDescription')}</p>
     </div>
     <Button size="sm">
-      <UserPlus class="h-4 w-4 mr-1" />{t('account.inviteMember')}
+      <UserPlus class="h-4 w-4 mr-1" />{i18n.t('account.inviteMember')}
     </Button>
   </div>
 
@@ -58,7 +60,7 @@
   <div class="relative">
     <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
     <Input
-      placeholder={t('common.search')}
+      placeholder={i18n.t('common.search')}
       bind:value={searchQuery}
       class="pl-9"
     />

package/dist/components/account/SecurityLogPage.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Search, Download } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface LogEntry {
     id: string;
     event: string;
@@ -20,14 +22,14 @@
   let filterSeverity = $state<'all' | 'info' | 'warning' | 'critical'>('all');
 
   const logs: LogEntry[] = [
-    { id: '1', event: 'loginSuccess', eventLabel: t('securityLog.loginSuccess'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 minutes ago', severity: 'info' },
-    { id: '2', event: 'apiKeyCreated', eventLabel: t('securityLog.apiKeyCreated'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 hour ago', severity: 'info' },
-    { id: '3', event: 'loginFailed', eventLabel: t('securityLog.loginFailed'), ip: '203.0.113.42', device: 'Firefox / Windows', location: 'Unknown', time: '3 hours ago', severity: 'warning' },
-    { id: '4', event: 'twoFactorEnabled', eventLabel: t('securityLog.twoFactorEnabled'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 day ago', severity: 'info' },
-    { id: '5', event: 'passwordChanged', eventLabel: t('securityLog.passwordChanged'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 days ago', severity: 'info' },
-    { id: '6', event: 'loginFailed', eventLabel: t('securityLog.loginFailed'), ip: '198.51.100.77', device: 'Safari / iOS', location: 'Beijing, CN', time: '3 days ago', severity: 'critical' },
-    { id: '7', event: 'sessionRevoked', eventLabel: t('securityLog.sessionRevoked'), ip: '192.168.1.105', device: 'Safari / iOS', location: 'Shanghai, CN', time: '5 days ago', severity: 'info' },
-    { id: '8', event: 'apiKeyRevoked', eventLabel: t('securityLog.apiKeyRevoked'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 week ago', severity: 'warning' },
+    { id: '1', event: 'loginSuccess', eventLabel: i18n.t('securityLog.loginSuccess'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 minutes ago', severity: 'info' },
+    { id: '2', event: 'apiKeyCreated', eventLabel: i18n.t('securityLog.apiKeyCreated'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 hour ago', severity: 'info' },
+    { id: '3', event: 'loginFailed', eventLabel: i18n.t('securityLog.loginFailed'), ip: '203.0.113.42', device: 'Firefox / Windows', location: 'Unknown', time: '3 hours ago', severity: 'warning' },
+    { id: '4', event: 'twoFactorEnabled', eventLabel: i18n.t('securityLog.twoFactorEnabled'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 day ago', severity: 'info' },
+    { id: '5', event: 'passwordChanged', eventLabel: i18n.t('securityLog.passwordChanged'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 days ago', severity: 'info' },
+    { id: '6', event: 'loginFailed', eventLabel: i18n.t('securityLog.loginFailed'), ip: '198.51.100.77', device: 'Safari / iOS', location: 'Beijing, CN', time: '3 days ago', severity: 'critical' },
+    { id: '7', event: 'sessionRevoked', eventLabel: i18n.t('securityLog.sessionRevoked'), ip: '192.168.1.105', device: 'Safari / iOS', location: 'Shanghai, CN', time: '5 days ago', severity: 'info' },
+    { id: '8', event: 'apiKeyRevoked', eventLabel: i18n.t('securityLog.apiKeyRevoked'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 week ago', severity: 'warning' },
   ];
 
   const filteredLogs = $derived(
@@ -46,11 +48,11 @@
 <div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('account.securityLog')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('account.securityLogDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.securityLog')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.securityLogDescription')}</p>
     </div>
     <Button variant="outline" size="sm">
-      <Download class="h-3.5 w-3.5 mr-1" />{t('common.export')}
+      <Download class="h-3.5 w-3.5 mr-1" />{i18n.t('common.export')}
     </Button>
   </div>
 
@@ -58,7 +60,7 @@
   <div class="flex flex-wrap gap-3">
     <div class="relative flex-1 min-w-[200px]">
       <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-      <Input placeholder={t('common.search')} bind:value={searchQuery} class="pl-9" />
+      <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
     </div>
     <div class="flex rounded-lg border border-input overflow-hidden">
       {#each ['all', 'info', 'warning', 'critical'] as sev (sev)}
@@ -66,7 +68,7 @@
           class="px-3 py-1.5 text-xs font-medium transition-colors capitalize
             {filterSeverity === sev ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
           onclick={() => filterSeverity = sev as typeof filterSeverity}
-        >{sev === 'all' ? t('common.filter') : sev}</button>
+        >{sev === 'all' ? i18n.t('common.filter') : sev}</button>
       {/each}
     </div>
   </div>
@@ -78,11 +80,11 @@
         <table class="w-full">
           <thead>
             <tr class="border-b bg-muted/30">
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.event')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.ip')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.device')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.location')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.time')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.event')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.ip')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.device')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.location')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.time')}</th>
             </tr>
           </thead>
           <tbody class="divide-y">
@@ -115,15 +117,15 @@
             </div>
             <div class="grid gap-2 text-xs text-muted-foreground">
               <div class="flex items-center justify-between gap-3">
-                <span>{t('securityLog.ip')}</span>
+                <span>{i18n.t('securityLog.ip')}</span>
                 <span class="font-mono text-foreground">{log.ip}</span>
               </div>
               <div class="flex items-center justify-between gap-3">
-                <span>{t('securityLog.device')}</span>
+                <span>{i18n.t('securityLog.device')}</span>
                 <span class="truncate text-foreground">{log.device}</span>
               </div>
               <div class="flex items-center justify-between gap-3">
-                <span>{t('securityLog.location')}</span>
+                <span>{i18n.t('securityLog.location')}</span>
                 <span class="truncate text-foreground">{log.location}</span>
               </div>
             </div>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -8,6 +8,8 @@
   import { Badge } from '../ui/badge/index.js';
   import { Loader2, Shield, Building2, Lock, Globe } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let ssoEnabled = $state(false);
   let ssoProvider = $state('');
   let domainRestriction = $state('');
@@ -28,8 +30,8 @@
 <div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('account.settingsEnterprise')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsEnterpriseDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsEnterprise')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsEnterpriseDescription')}</p>
     </div>
     <Badge variant="secondary"><Building2 class="h-3 w-3 mr-1" />Enterprise</Badge>
   </div>
@@ -123,7 +125,7 @@
       <div class="flex justify-end">
         <Button onclick={handleSave} disabled={saving}>
           {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-          {t('common.save')}
+          {i18n.t('common.save')}
         </Button>
       </div>
     </Card.CardContent>

package/dist/components/account/SettingsPlainPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -8,6 +8,8 @@
   import { Separator } from '../ui/separator/index.js';
   import { Loader2 } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let displayName = $state('Alex Chen');
   let email = $state('alex@example.com');
   let emailNotifications = $state(true);
@@ -24,18 +26,18 @@
 
 <div class="space-y-6" data-svadmin-content-page="account">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('account.settingsPlain')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsPlainDescription')}</p>
+    <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>
 
   <Card.Card class="border-border/60">
     <Card.CardHeader>
-      <Card.CardTitle class="text-base">{t('settings.general')}</Card.CardTitle>
+      <Card.CardTitle class="text-base">{i18n.t('settings.general')}</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="display-name">{t('profile.name')}</Label>
+          <Label for="display-name">{i18n.t('profile.name')}</Label>
           <Input id="display-name" bind:value={displayName} />
         </div>
         <div class="space-y-2">
@@ -48,24 +50,24 @@
 
       <div class="flex items-center justify-between gap-4">
         <div class="space-y-1">
-          <Label for="email-notif">{t('notifications.emailTitle')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.emailDescription')}</p>
+          <Label for="email-notif">{i18n.t('notifications.emailTitle')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.emailDescription')}</p>
         </div>
         <Switch id="email-notif" bind:checked={emailNotifications} />
       </div>
 
       <div class="flex items-center justify-between gap-4">
         <div class="space-y-1">
-          <Label for="push-notif">{t('notifications.pushTitle')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.pushDescription')}</p>
+          <Label for="push-notif">{i18n.t('notifications.pushTitle')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.pushDescription')}</p>
         </div>
         <Switch id="push-notif" bind:checked={pushNotifications} />
       </div>
 
       <div class="flex items-center justify-between gap-4">
         <div class="space-y-1">
-          <Label for="two-factor">{t('security.twoFactorAuth')}</Label>
-          <p class="text-xs text-muted-foreground">{t('security.twoFactorDescription')}</p>
+          <Label for="two-factor">{i18n.t('security.twoFactorAuth')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
         </div>
         <Switch id="two-factor" bind:checked={twoFactor} />
       </div>
@@ -73,7 +75,7 @@
       <div class="flex justify-end">
         <Button onclick={handleSave} disabled={saving}>
           {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-          {t('common.save')}
+          {i18n.t('common.save')}
         </Button>
       </div>
     </Card.CardContent>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Label } from '../ui/label/index.js';
@@ -7,6 +7,8 @@
   import { Separator } from '../ui/separator/index.js';
   import { Loader2, PanelLeft } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let defaultCollapsed = $state(false);
   let pinSidebar = $state(true);
   let showLabels = $state(true);
@@ -23,15 +25,15 @@
 
 <div class="space-y-6" data-svadmin-content-page="account">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('account.settingsSidebar')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsSidebarDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsSidebar')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsSidebarDescription')}</p>
   </div>
 
   <Card.Card class="border-border/60">
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <PanelLeft class="h-4 w-4 text-muted-foreground" />
-        {t('account.settingsSidebar')}
+        {i18n.t('account.settingsSidebar')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent class="space-y-4">
@@ -47,7 +49,7 @@
 
       <div class="flex items-center justify-between gap-4">
         <div class="space-y-1">
-          <Label for="pin-sidebar">{t('settings.general')}</Label>
+          <Label for="pin-sidebar">{i18n.t('settings.general')}</Label>
           <p class="text-xs text-muted-foreground">固定侧边栏，防止自动收起</p>
         </div>
         <Switch id="pin-sidebar" bind:checked={pinSidebar} />
@@ -72,25 +74,25 @@
       <Separator />
 
       <div class="space-y-2">
-        <Label>{t('settings.sidebarDensity')}</Label>
+        <Label>{i18n.t('settings.sidebarDensity')}</Label>
         <div class="flex rounded-lg border border-input overflow-hidden">
           <button
             class="flex-1 px-4 py-2 text-sm font-medium transition-colors
               {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
             onclick={() => density = 'compact'}
-          >{t('settings.compact')}</button>
+          >{i18n.t('settings.compact')}</button>
           <button
             class="flex-1 px-4 py-2 text-sm font-medium transition-colors
               {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
             onclick={() => density = 'standard'}
-          >{t('settings.standard')}</button>
+          >{i18n.t('settings.standard')}</button>
         </div>
       </div>
 
       <div class="flex justify-end">
         <Button onclick={handleSave} disabled={saving}>
           {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-          {t('common.save')}
+          {i18n.t('common.save')}
         </Button>
       </div>
     </Card.CardContent>

package/dist/components/account/TeamMembersPage.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Search, UserPlus, MoreHorizontal } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface TeamMember {
     id: string;
     name: string;
@@ -48,26 +50,26 @@
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 
   function statusLabel(status: TeamMember['status']) {
-    if (status === 'active') return t('account.active');
-    if (status === 'invited') return t('account.invited');
-    return t('account.inactive');
+    if (status === 'active') return i18n.t('account.active');
+    if (status === 'invited') return i18n.t('account.invited');
+    return i18n.t('account.inactive');
   }
 </script>
 
 <div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('account.teamMembers')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('account.teamMembersDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.teamMembers')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.teamMembersDescription')}</p>
     </div>
     <Button size="sm">
-      <UserPlus class="h-4 w-4 mr-1" />{t('account.inviteMember')}
+      <UserPlus class="h-4 w-4 mr-1" />{i18n.t('account.inviteMember')}
     </Button>
   </div>
 
   <div class="relative">
     <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <Input placeholder={t('common.search')} bind:value={searchQuery} class="pl-9" />
+    <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
   </div>
 
   <!-- Members grid -->