@svadmin/ui 0.46.0 → 0.48.0

package/dist/components/PermissionMatrix.svelte

@@ -56,7 +56,7 @@
 
 <div class="h-full flex flex-col pt-2">
   <!-- Header Title -->
-  <div class="mb-6 flex items-center justify-between">
+  <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
     <div>
       <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
         <Shield class="w-6 h-6 text-primary" />
@@ -78,10 +78,19 @@
     {/if}
   </div>
 
-  <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
+  <div class="flex flex-col lg:flex-row gap-6 flex-1 min-h-[500px]">
+    <div class="w-full rounded-lg border border-border bg-card p-4 shadow-sm lg:hidden">
+      <label for="permission-role-select" class="mb-2 block text-sm font-medium text-foreground">{i18n.t('permissions.roles') || 'Roles'}</label>
+      <select id="permission-role-select" bind:value={selectedRole} class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" disabled={roles.length === 0}>
+        {#each roles as role (role.code)}<option value={role.code}>{role.name}</option>{/each}
+      </select>
+      {#if roles.length === 0}<p class="mt-2 text-sm text-muted-foreground">{i18n.t('permissions.noRoles') || 'No roles available'}</p>{/if}
+      {#if sidebarExtra}<div class="mt-4 border-t border-border pt-4">{@render sidebarExtra()}</div>{/if}
+    </div>
+
     <!-- Left: Role Selector Sidebar -->
-    <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-lg shadow-sm border border-border p-4 flex flex-col">
-      <h2 class="text-sm font-semibold text-muted-foregroundr mb-4 px-2">{i18n.t('permissions.roles') || 'Roles'}</h2>
+    <div class="hidden w-full flex-shrink-0 flex-col rounded-lg border border-border bg-card p-4 shadow-sm lg:flex lg:w-64">
+      <h2 class="mb-4 px-2 text-sm font-semibold text-muted-foreground">{i18n.t('permissions.roles') || 'Roles'}</h2>
       <div class="space-y-1 flex-1 overflow-y-auto">
         {#each roles as role, _i (_i)}
           <button 
@@ -89,7 +98,7 @@
             class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 {selectedRole === role.code ? 'bg-primary/10 text-primary font-medium shadow-sm ring-1 ring-primary/20' : 'text-foreground hover:bg-muted'}"
           >
             {role.name}
-            <div class="text-[10px] mt-0.5 opacity-60 font-monoer">{role.code}</div>
+            <div class="mt-0.5 font-mono text-[10px] opacity-60">{role.code}</div>
           </button>
         {/each}
         {#if roles.length === 0}
@@ -108,8 +117,8 @@
     <!-- Right: Matrix Grid -->
     <div class="flex-1 bg-card rounded-lg shadow-sm border border-border overflow-hidden flex flex-col">
       <!-- Matrix Header -->
-      <div class="p-5 border-b border-border bg-muted/30 flex items-center justify-between">
-        <div class="flex items-center gap-4">
+      <div class="p-5 border-b border-border bg-muted/30 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
           <div>
             <h2 class="text-lg font-bold text-foreground">{i18n.t('permissions.currentRole') || 'Current role'}:
               <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || (i18n.t('permissions.noneSelected') || 'None selected')}</span>
@@ -156,7 +165,7 @@
               <!-- Section Grouping Header -->
               {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
                 <tr class="bg-primary/5">
-                  <td colspan="{actions.length + 1}" class="px-4 py-2 text-xs font-bold text-primaryr">{resource.section}</td>
+                  <td colspan="{actions.length + 1}" class="px-4 py-2 text-xs font-bold text-primary">{resource.section}</td>
                 </tr>
               {/if}
               

package/dist/components/RowActions.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import { Ellipsis } from '@lucide/svelte';
+  import type { Component, Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../utils.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
+  import { Button } from './ui/button/index.js';
+
+  export type RowActionItem = {
+    label: string;
+    icon?: Component<{ class?: string }>;
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    disabled?: boolean;
+    title?: string;
+    danger?: boolean;
+    hidden?: boolean;
+  };
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    actions?: RowActionItem[];
+    maxVisible?: number;
+    moreLabel?: string;
+    children?: Snippet;
+    moreContent?: Snippet;
+  };
+
+  let {
+    actions = [],
+    maxVisible = 2,
+    moreLabel = 'More actions',
+    ref = $bindable(null),
+    class: className,
+    children,
+    moreContent,
+    ...restProps
+  }: Props = $props();
+
+  let overflowOpen = $state(false);
+  const availableActions = $derived(actions.filter((action) => !action.hidden));
+  const visibleLimit = $derived(
+    Number.isFinite(maxVisible)
+      ? Math.max(0, Math.floor(maxVisible))
+      : availableActions.length
+  );
+  const visibleActions = $derived(availableActions.slice(0, visibleLimit));
+  const overflowActions = $derived(availableActions.slice(visibleLimit));
+
+  function resolvedVariant(action: RowActionItem): RowActionItem['variant'] {
+    return action.variant ?? (action.danger ? 'destructive' : 'ghost');
+  }
+
+  function handleOverflowAction(action: RowActionItem, event: MouseEvent): void {
+    if (action.disabled) {
+      event.preventDefault();
+      return;
+    }
+    overflowOpen = false;
+    action.onclick?.(event);
+  }
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="row-actions"
+  class={cn("inline-flex items-center gap-1.5", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+
+  {#each visibleActions as action (action)}
+    {#if action.href}
+      <Button
+        variant={resolvedVariant(action)}
+        size="sm"
+        href={action.href}
+        disabled={action.disabled}
+        title={action.title || action.label}
+        class="h-8 px-2 text-xs"
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="mr-1 size-3.5" />
+        {/if}
+        {action.label}
+      </Button>
+    {:else}
+      <Button
+        variant={resolvedVariant(action)}
+        size="sm"
+        onclick={action.onclick}
+        disabled={action.disabled}
+        title={action.title || action.label}
+        class="h-8 px-2 text-xs"
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="mr-1 size-3.5" />
+        {/if}
+        {action.label}
+      </Button>
+    {/if}
+  {/each}
+
+  {#if overflowActions.length > 0 || moreContent}
+    <DropdownMenu.Root bind:open={overflowOpen}>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Button {...props} variant="ghost" size="icon-sm" title={moreLabel} aria-label={moreLabel}>
+            <Ellipsis class="size-4" />
+          </Button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end" class="min-w-[8rem]">
+        {#each overflowActions as action (action)}
+          {#if action.href}
+            <Button
+              href={action.href}
+              variant={resolvedVariant(action)}
+              size="sm"
+              disabled={action.disabled}
+              onclick={(event) => handleOverflowAction(action, event)}
+              class="h-auto w-full justify-start rounded-md px-2 py-1.5 text-sm font-normal"
+            >
+              {#if action.icon}
+                {@const Icon = action.icon}
+                <Icon class="size-3.5" />
+              {/if}
+              {action.label}
+            </Button>
+          {:else}
+            <DropdownMenu.Item
+              onclick={(event) => handleOverflowAction(action, event)}
+              disabled={action.disabled}
+              destructive={action.danger || action.variant === 'destructive'}
+            >
+              {#if action.icon}
+                {@const Icon = action.icon}
+                <Icon class="size-3.5" />
+              {/if}
+              {action.label}
+            </DropdownMenu.Item>
+          {/if}
+        {/each}
+        {#if moreContent}
+          {@render moreContent()}
+        {/if}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {/if}
+</div>

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

@@ -0,0 +1,26 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+export type RowActionItem = {
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    disabled?: boolean;
+    title?: string;
+    danger?: boolean;
+    hidden?: boolean;
+};
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    actions?: RowActionItem[];
+    maxVisible?: number;
+    moreLabel?: string;
+    children?: Snippet;
+    moreContent?: Snippet;
+};
+declare const RowActions: Component<Props, {}, "ref">;
+type RowActions = ReturnType<typeof RowActions>;
+export default RowActions;

package/dist/components/SecuritySettings.svelte

@@ -1,176 +1,201 @@
 <script lang="ts">
-  import { useNotification } from '@svadmin/core';
+  import { captureAdminContext, notifyWithProvider, type SessionInfo } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-
-  import { AlertTriangle, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
-  import type { Component } from 'svelte';
+  import { AlertTriangle, Monitor, Smartphone, Trash2 } from '@lucide/svelte';
   import * as Alert from './ui/alert/index.js';
-  import * as Card from './ui/card/index.js';
   import { Button } from './ui/button/index.js';
-  import { Label } from './ui/label/index.js';
   import { Switch } from './ui/switch/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import SettingsGroup from './content/SettingsGroup.svelte';
+  import SettingsFieldRow from './content/SettingsFieldRow.svelte';
+  import DataState from './content/DataState.svelte';
+  import FeedbackNotice from './content/FeedbackNotice.svelte';
 
   const i18n = useTranslation();
-  const notification = useNotification();
-
-  interface SessionInfo {
-    id: string;
-    os: string;
-    browser: string;
-    ip: string;
-    lastActive: string;
-    isCurrent: boolean;
-    Icon: Component;
-  }
+  const adminContext = captureAdminContext();
+  const authProvider = $derived(adminContext.authProvider);
+  const sessionProvider = $derived(adminContext.sessionProvider);
+  const isZh = $derived(i18n.locale === 'zh-CN');
 
   let is2faEnabled = $state(false);
-  let sessions = $state<SessionInfo[]>([
-    { id: 'current', os: 'macOS', browser: 'Chrome', ip: '192.168.1.102', lastActive: 'Active now', isCurrent: true, Icon: Monitor },
-    { id: 'mobile', os: 'iOS', browser: 'Safari', ip: '192.168.1.105', lastActive: '2 hours ago', isCurrent: false, Icon: Smartphone },
-    { id: 'desktop', os: 'Windows', browser: 'Edge', ip: '10.0.0.4', lastActive: '2 days ago', isCurrent: false, Icon: Monitor },
-  ]);
-
+  let sessions = $state.raw<SessionInfo[]>([]);
+  let loadingSessions = $state(false);
+  let sessionError = $state<string | null>(null);
+  let updatingMfa = $state(false);
+  let revoking = $state<string | null>(null);
   let currentPassword = $state('');
   let newPassword = $state('');
   let confirmPassword = $state('');
   let passwordErrorMessage = $state('');
-  let lastChanged = $state('3 months ago');
+  let changingPassword = $state(false);
+  let requestId = 0;
 
-  function handlePasswordChange(event: SubmitEvent) {
-    event.preventDefault();
-    passwordErrorMessage = '';
+  function message(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+  }
 
-    if (!currentPassword) {
-      passwordErrorMessage = i18n.t('profile.currentPassword');
-      return;
-    }
-    if (newPassword.length < 8) {
-      passwordErrorMessage = i18n.t('validation.minLength', { min: 8 });
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      passwordErrorMessage = i18n.t('auth.passwordMismatch');
-      return;
+  async function loadSecurity(): Promise<void> {
+    const currentRequest = ++requestId;
+    const provider = sessionProvider;
+    const context = adminContext.enterpriseRequestContext;
+    sessions = [];
+    is2faEnabled = false;
+    sessionError = null;
+    loadingSessions = false;
+    if (!provider) return;
+    loadingSessions = true;
+    try {
+      const [nextSessions, mfa] = await Promise.all([
+        provider.listSessions(context),
+        provider.getMfaState?.(context) ?? { enabled: false },
+      ]);
+      if (currentRequest !== requestId) return;
+      sessions = nextSessions;
+      is2faEnabled = mfa.enabled;
+    } catch (caught) {
+      if (currentRequest === requestId) sessionError = message(caught);
+    } finally {
+      if (currentRequest === requestId) loadingSessions = false;
     }
+  }
 
-    notification.success(i18n.t('profile.passwordChanged'), 3000);
-    lastChanged = 'Just now';
+  $effect(() => {
+    void authProvider;
+    void sessionProvider;
+    void adminContext.tenantCacheKey?.__svadminTenant;
     currentPassword = '';
     newPassword = '';
     confirmPassword = '';
+    passwordErrorMessage = '';
+    changingPassword = false;
+    updatingMfa = false;
+    revoking = null;
+    void loadSecurity();
+    return () => { requestId += 1; };
+  });
+
+  async function handleMfaChange(enabled: boolean): Promise<void> {
+    const provider = sessionProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider?.setMfaEnabled) return;
+    updatingMfa = true;
+    try {
+      const result = await provider.setMfaEnabled(enabled, context);
+      if (currentRequest !== requestId) return;
+      is2faEnabled = result.enabled;
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) updatingMfa = false;
+    }
+  }
+
+  async function handlePasswordChange(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+    passwordErrorMessage = '';
+    const provider = authProvider;
+    const currentRequest = requestId;
+    if (!provider?.updatePassword) return;
+    if (!currentPassword) passwordErrorMessage = i18n.t('profile.currentPassword');
+    else if (newPassword.length < 8) passwordErrorMessage = i18n.t('validation.minLength', { min: 8 });
+    else if (newPassword !== confirmPassword) passwordErrorMessage = i18n.t('auth.passwordMismatch');
+    if (passwordErrorMessage) return;
+
+    changingPassword = true;
+    try {
+      const result = await provider.updatePassword({ currentPassword, password: newPassword, confirmPassword });
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '密码修改失败' : 'Password update failed'));
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'success', message: i18n.t('profile.passwordChanged') }, adminContext.notificationProvider);
+      currentPassword = '';
+      newPassword = '';
+      confirmPassword = '';
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      passwordErrorMessage = message(caught);
+    } finally {
+      if (currentRequest === requestId) changingPassword = false;
+    }
   }
 
-  function revokeSession(id: string) {
-    sessions = sessions.filter((session) => session.id !== id);
+  async function revokeSession(id: string): Promise<void> {
+    const provider = sessionProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    revoking = id;
+    try {
+      const result = await provider.revokeSession(id, context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '会话撤销失败' : 'Session revocation failed'));
+      if (currentRequest !== requestId) return;
+      sessions = sessions.filter((session) => session.id !== id);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) revoking = null;
+    }
   }
 
-  function revokeAllOthers() {
-    sessions = sessions.filter((session) => session.isCurrent);
+  async function revokeAllOthers(): Promise<void> {
+    const provider = sessionProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    revoking = '*';
+    try {
+      const result = await provider.revokeOtherSessions(context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '会话撤销失败' : 'Session revocation failed'));
+      if (currentRequest !== requestId) return;
+      sessions = sessions.filter((session) => session.current);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) revoking = null;
+    }
   }
 </script>
 
 <div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.security')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.securityDescription')}</p>
-  </div>
-
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        {#if is2faEnabled}
-          <ShieldCheck class="h-5 w-5 text-green-500" />
-        {:else}
-          <ShieldAlert class="h-5 w-5 text-amber-500" />
-        {/if}
-        {i18n.t('security.twoFactorAuth')}
-      </Card.CardTitle>
-      <Card.CardDescription>{i18n.t('security.twoFactorDescription')}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="flex items-center justify-between gap-4 border-t pt-4">
-        <div class="space-y-1">
-          <Label for="two-factor" class="text-sm font-medium">{i18n.t('security.enable2fa')}</Label>
-          <p class="text-xs text-muted-foreground">
-            {is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}
-          </p>
-        </div>
-        <Switch id="two-factor" bind:checked={is2faEnabled} />
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <KeyRound class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('profile.changePassword')}
-      </Card.CardTitle>
-      <Card.CardDescription>{i18n.t('security.passwordLastChanged', { time: lastChanged })}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <form onsubmit={handlePasswordChange} class="max-w-sm space-y-4">
-        {#if passwordErrorMessage}
-          <Alert.Root variant="destructive">
-            <AlertTriangle class="h-4 w-4" />
-            <Alert.Description>{passwordErrorMessage}</Alert.Description>
-          </Alert.Root>
-        {/if}
-
-        <PasswordInput id="security-current-password" label={i18n.t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" />
-        <PasswordInput id="security-new-password" label={i18n.t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength />
-        <PasswordInput id="security-confirm-password" label={i18n.t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" />
-
-        <Button type="submit">{i18n.t('profile.updatePassword')}</Button>
-      </form>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader class="flex flex-row items-start justify-between gap-4">
-      <div class="space-y-1">
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Shield class="h-4 w-4 text-muted-foreground" />
-          {i18n.t('security.activeSessions')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('security.sessionsDescription')}</Card.CardDescription>
-      </div>
-      {#if sessions.length > 1}
-        <Button variant="outline" size="sm" onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>
-      {/if}
-    </Card.CardHeader>
-    <Card.CardContent>
+  <div><h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.security')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.securityDescription')}</p></div>
+  {#if !sessionProvider}
+    <FeedbackNotice tone="warning" message={isZh ? '未配置 SessionProvider。会话和 MFA 设置不会使用模拟数据。' : 'SessionProvider is not configured. Session and MFA controls do not use simulated data.'} />
+  {/if}
+  <SettingsGroup title={i18n.t('security.twoFactorAuth')} description={i18n.t('security.twoFactorDescription')}>
+    <SettingsFieldRow label={i18n.t('security.enable2fa')} description={is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}>
+      {#snippet control()}<Switch checked={is2faEnabled} disabled={!sessionProvider?.setMfaEnabled || updatingMfa} onCheckedChange={handleMfaChange} />{/snippet}
+    </SettingsFieldRow>
+  </SettingsGroup>
+  <SettingsGroup title={i18n.t('profile.changePassword')} description={isZh ? '密码修改由 AuthProvider 持久化。' : 'Password changes are persisted by AuthProvider.'}>
+    {#if !authProvider?.updatePassword}<FeedbackNotice tone="warning" message={isZh ? '当前 AuthProvider 不支持修改密码。' : 'The current AuthProvider does not support password updates.'} />{/if}
+    <form onsubmit={handlePasswordChange} class="max-w-lg space-y-4">
+      {#if passwordErrorMessage}<Alert.Root variant="destructive"><AlertTriangle class="h-4 w-4" /><Alert.Description>{passwordErrorMessage}</Alert.Description></Alert.Root>{/if}
+      <PasswordInput id="security-current-password" label={i18n.t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" disabled={!authProvider?.updatePassword || changingPassword} />
+      <PasswordInput id="security-new-password" label={i18n.t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength disabled={!authProvider?.updatePassword || changingPassword} />
+      <PasswordInput id="security-confirm-password" label={i18n.t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" disabled={!authProvider?.updatePassword || changingPassword} />
+      <Button type="submit" disabled={!authProvider?.updatePassword || changingPassword}>{changingPassword ? (isZh ? '更新中...' : 'Updating...') : i18n.t('profile.updatePassword')}</Button>
+    </form>
+  </SettingsGroup>
+  <SettingsGroup title={i18n.t('security.activeSessions')} description={i18n.t('security.sessionsDescription')}>
+    {#snippet actions()}{#if sessions.some((session) => !session.current)}<Button variant="outline" size="sm" disabled={revoking !== null} onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>{/if}{/snippet}
+    {#if loadingSessions}
+      <DataState state="loading" />
+    {:else if sessionError}
+      <DataState state="error" description={sessionError} retry={loadSecurity} />
+    {:else if sessions.length === 0}
+      <DataState state="empty" title={i18n.t('security.noSessions')} description={sessionProvider ? (isZh ? 'Provider 未返回活跃会话。' : 'The provider returned no active sessions.') : (isZh ? '配置 SessionProvider 后可管理真实会话。' : 'Configure SessionProvider to manage real sessions.')} />
+    {:else}
       <div class="divide-y">
         {#each sessions as session (session.id)}
           <div class="flex items-center justify-between gap-4 py-3">
-            <div class="flex min-w-0 items-center gap-3">
-              <div class="rounded-lg bg-muted p-2 text-muted-foreground">
-                <session.Icon class="h-5 w-5" />
-              </div>
-              <div class="min-w-0 space-y-1">
-                <div class="flex flex-wrap items-center gap-2">
-                  <span class="text-sm font-medium">{session.os} - {session.browser}</span>
-                  {#if session.isCurrent}
-                    <span class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">{i18n.t('security.currentSession')}</span>
-                  {/if}
-                </div>
-                <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                  <span>{session.ip}</span>
-                  <span>{session.lastActive}</span>
-                </div>
-              </div>
-            </div>
-            {#if !session.isCurrent}
-              <Button variant="ghost" size="icon-sm" onclick={() => revokeSession(session.id)} title={i18n.t('security.revokeSession')}>
-                <Trash2 class="h-4 w-4" />
-              </Button>
-            {/if}
+            <div class="flex min-w-0 items-center gap-3"><div class="rounded-lg bg-muted p-2 text-muted-foreground">{#if (session.os ?? '').toLowerCase().includes('ios') || (session.os ?? '').toLowerCase().includes('android')}<Smartphone class="h-5 w-5" />{:else}<Monitor class="h-5 w-5" />{/if}</div><div class="min-w-0 space-y-1"><div class="flex flex-wrap items-center gap-2"><span class="text-sm font-medium">{session.os ?? (isZh ? '未知系统' : 'Unknown OS')} - {session.browser ?? (isZh ? '未知浏览器' : 'Unknown browser')}</span>{#if session.current}<span class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">{i18n.t('security.currentSession')}</span>{/if}</div><div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground"><span>{session.ipAddress ?? '-'}</span><span>{session.lastActiveAt ? new Date(session.lastActiveAt).toLocaleString() : '-'}</span></div></div></div>
+            {#if !session.current}<Button variant="ghost" size="icon-sm" disabled={revoking !== null} onclick={() => revokeSession(session.id)} title={i18n.t('security.revokeSession')}><Trash2 class="h-4 w-4" /></Button>{/if}
           </div>
-        {:else}
-          <div class="py-6 text-center text-sm text-muted-foreground">{i18n.t('security.noSessions')}</div>
         {/each}
       </div>
-    </Card.CardContent>
-  </Card.Card>
+    {/if}
+  </SettingsGroup>
 </div>

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

@@ -1,4 +1,3 @@
-import type { Component } from 'svelte';
-declare const SecuritySettings: Component<Record<string, never>, {}, "">;
+declare const SecuritySettings: import("svelte").Component<Record<string, never>, {}, "">;
 type SecuritySettings = ReturnType<typeof SecuritySettings>;
 export default SecuritySettings;

package/dist/components/SettingsPage.svelte

@@ -115,6 +115,16 @@
     return content ? alias : "profile";
   });
 
+  const contentWidth = $derived(
+    activeKey === 'roles' || activeKey === 'audit'
+      ? 'max-w-[92rem]'
+      : activeKey === 'api'
+        ? 'max-w-[78rem]'
+        : activeKey === 'integrations'
+          ? 'max-w-[64rem]'
+          : 'max-w-3xl',
+  );
+
   // Default redirect to profile
   $effect(() => {
     if (getRoute() === "/settings") {
@@ -151,7 +161,7 @@
       </div>
       {#each resolvedSections as section, _i (_i)}
         <div>
-          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+          <h3 class="px-3 mb-1 text-xs font-medium text-muted-foreground">
             {i18n.t(section.group)}
           </h3>
           <div class="space-y-0.5">
@@ -175,7 +185,7 @@
   </nav>
 
   <!-- Right content area -->
-  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' || activeKey === 'integrations' || activeKey === 'api' ? 'max-w-6xl' : 'max-w-3xl'}">
+  <div class="min-w-0 w-full flex-1 p-6 lg:p-8 {contentWidth}">
     {#if activeKey === "profile"}
       {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
     {:else if activeKey === "appearance"}