@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { t } 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 { Switch } from '../ui/switch/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { Loader2, Shield, Building2, Lock, Globe } from '@lucide/svelte';
+
+  let ssoEnabled = $state(false);
+  let ssoProvider = $state('');
+  let domainRestriction = $state('');
+  let passwordPolicy = $state('strong');
+  let sessionTimeout = $state('30');
+  let ipWhitelist = $state('');
+  let auditLogging = $state(true);
+  let dataRetention = $state('365');
+  let saving = $state(false);
+
+  async function handleSave() {
+    saving = true;
+    await new Promise(r => setTimeout(r, 800));
+    saving = false;
+  }
+</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.settingsEnterprise')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsEnterpriseDescription')}</p>
+    </div>
+    <Badge variant="secondary"><Building2 class="h-3 w-3 mr-1" />Enterprise</Badge>
+  </div>
+
+  <!-- SSO -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Shield class="h-4 w-4 text-muted-foreground" />
+        单点登录 (SSO)
+      </Card.CardTitle>
+      <Card.CardDescription>配置企业身份提供商以实现统一登录体验。</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>
+        </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>
+            <Input id="sso-provider" bind:value={ssoProvider} placeholder="Okta, Azure AD, etc." />
+          </div>
+          <div class="space-y-2">
+            <Label for="domain-restriction">域名限制</Label>
+            <Input id="domain-restriction" bind:value={domainRestriction} placeholder="@company.com" />
+          </div>
+        </div>
+      {/if}
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Security Policy -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Lock class="h-4 w-4 text-muted-foreground" />
+        安全策略
+      </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>
+          <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>
+          </select>
+        </div>
+        <div class="space-y-2">
+          <Label for="session-timeout">会话超时（分钟）</Label>
+          <Input id="session-timeout" bind:value={sessionTimeout} type="number" />
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <Label for="ip-whitelist">IP 白名单</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>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Data & Compliance -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Globe class="h-4 w-4 text-muted-foreground" />
+        数据与合规
+      </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>
+        </div>
+        <Switch id="audit-logging" bind:checked={auditLogging} />
+      </div>
+
+      <div class="space-y-2">
+        <Label for="data-retention">数据保留天数</Label>
+        <Input id="data-retention" bind:value={dataRetention} type="number" />
+      </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')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/account/SettingsEnterprisePage.svelte.d.ts

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

package/dist/components/account/SettingsPlainPage.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { t } 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 { Switch } from '../ui/switch/index.js';
+  import { Separator } from '../ui/separator/index.js';
+  import { Loader2 } from '@lucide/svelte';
+
+  let displayName = $state('Alex Chen');
+  let email = $state('alex@example.com');
+  let emailNotifications = $state(true);
+  let pushNotifications = $state(true);
+  let twoFactor = $state(false);
+  let saving = $state(false);
+
+  async function handleSave() {
+    saving = true;
+    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">{t('account.settingsPlain')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsPlainDescription')}</p>
+  </div>
+
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{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>
+          <Input id="display-name" bind:value={displayName} />
+        </div>
+        <div class="space-y-2">
+          <Label for="email">Email</Label>
+          <Input id="email" bind:value={email} type="email" />
+        </div>
+      </div>
+
+      <Separator />
+
+      <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>
+        </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>
+        </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>
+        </div>
+        <Switch id="two-factor" bind:checked={twoFactor} />
+      </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')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/account/SettingsPlainPage.svelte.d.ts

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

package/dist/components/account/SettingsSidebarPage.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { t } 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';
+  import { Switch } from '../ui/switch/index.js';
+  import { Separator } from '../ui/separator/index.js';
+  import { Loader2, PanelLeft } from '@lucide/svelte';
+
+  let defaultCollapsed = $state(false);
+  let pinSidebar = $state(true);
+  let showLabels = $state(true);
+  let showIcons = $state(true);
+  let density = $state<'compact' | 'standard'>('standard');
+  let saving = $state(false);
+
+  async function handleSave() {
+    saving = true;
+    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">{t('account.settingsSidebar')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{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')}
+      </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="default-collapsed">默认折叠</Label>
+          <p class="text-xs text-muted-foreground">启动时自动折叠侧边栏</p>
+        </div>
+        <Switch id="default-collapsed" bind:checked={defaultCollapsed} />
+      </div>
+
+      <Separator />
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="pin-sidebar">{t('settings.general')}</Label>
+          <p class="text-xs text-muted-foreground">固定侧边栏，防止自动收起</p>
+        </div>
+        <Switch id="pin-sidebar" bind:checked={pinSidebar} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="show-labels">显示标签文字</Label>
+          <p class="text-xs text-muted-foreground">在图标旁显示菜单项名称</p>
+        </div>
+        <Switch id="show-labels" bind:checked={showLabels} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="show-icons">显示图标</Label>
+          <p class="text-xs text-muted-foreground">在标签旁显示菜单图标</p>
+        </div>
+        <Switch id="show-icons" bind:checked={showIcons} />
+      </div>
+
+      <Separator />
+
+      <div class="space-y-2">
+        <Label>{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>
+          <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>
+        </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')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/account/SettingsSidebarPage.svelte.d.ts

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

package/dist/components/account/TeamMembersPage.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { t } 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';
+
+  interface TeamMember {
+    id: string;
+    name: string;
+    email: string;
+    role: 'Admin' | 'Editor' | 'Viewer';
+    avatar?: string;
+    department: string;
+    status: 'active' | 'invited' | 'inactive';
+    lastActive: string;
+  }
+
+  let searchQuery = $state('');
+
+  let members = $state<TeamMember[]>([
+    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: 'Just now' },
+    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', department: 'Design', status: 'active', lastActive: '5 min ago' },
+    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', department: 'Marketing', status: 'invited', lastActive: 'Pending' },
+    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', department: 'Engineering', status: 'active', lastActive: '1 hour ago' },
+    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'Viewer', department: 'Sales', status: 'inactive', lastActive: '2 weeks ago' },
+    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: '10 min ago' },
+  ]);
+
+  const filtered = $derived(
+    searchQuery
+      ? members.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
+      : members
+  );
+
+  const roleColors = {
+    'Admin': 'bg-red-500/10 text-red-600',
+    'Editor': 'bg-blue-500/10 text-blue-600',
+    'Viewer': 'bg-green-500/10 text-green-600',
+  };
+
+  const statusColors = {
+    'active': 'bg-green-500/10 text-green-600',
+    'invited': 'bg-amber-500/10 text-amber-600',
+    'inactive': 'bg-muted text-muted-foreground',
+  };
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+</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.membersStarter')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.membersStarterDescription')}</p>
+    </div>
+    <Button size="sm">
+      <UserPlus class="h-4 w-4 mr-1" />{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" />
+  </div>
+
+  <!-- Members grid -->
+  <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    {#each filtered as member (member.id)}
+      <Card.Card class="border-border/60 hover:border-primary/30 transition-colors">
+        <Card.CardContent class="p-4">
+          <div class="flex items-start gap-3">
+            <div class="shrink-0">
+              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold">
+                {initials(member.name)}
+              </div>
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2">
+                <h4 class="text-sm font-semibold text-foreground truncate">{member.name}</h4>
+              </div>
+              <p class="text-xs text-muted-foreground truncate">{member.email}</p>
+              <div class="mt-2 flex flex-wrap gap-1.5">
+                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {roleColors[member.role]}">{member.role}</span>
+                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {statusColors[member.status]}">{member.status}</span>
+              </div>
+              <div class="mt-2 flex items-center justify-between">
+                <span class="text-xs text-muted-foreground">{member.department}</span>
+                <span class="text-xs text-muted-foreground">{member.lastActive}</span>
+              </div>
+            </div>
+            <Button variant="ghost" size="icon-sm"><MoreHorizontal class="h-4 w-4" /></Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+    {/each}
+  </div>
+</div>

package/dist/components/account/TeamMembersPage.svelte.d.ts

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

package/dist/components/network/TeamCrewTablePage.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { t } 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, UserPlus, MoreHorizontal, CheckCircle2, Clock, XCircle } from '@lucide/svelte';
+
+  interface CrewMember {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    department: string;
+    status: 'active' | 'away' | 'offline';
+    avatar?: string;
+    joinedAt: string;
+    projects: number;
+  }
+
+  let searchQuery = $state('');
+
+  const crew: CrewMember[] = [
+    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Tech Lead', department: 'Engineering', status: 'active', joinedAt: '2022-03-15', projects: 12 },
+    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Senior Designer', department: 'Design', status: 'active', joinedAt: '2022-06-22', projects: 8 },
+    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Product Manager', department: 'Product', status: 'away', joinedAt: '2023-01-10', projects: 6 },
+    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Backend Engineer', department: 'Engineering', status: 'active', joinedAt: '2023-04-05', projects: 10 },
+    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'QA Engineer', department: 'Engineering', status: 'offline', joinedAt: '2022-11-20', projects: 4 },
+    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Engineering Manager', department: 'Engineering', status: 'active', joinedAt: '2022-02-14', projects: 15 },
+    { id: '7', name: 'James Wilson', email: 'james@acme.com', role: 'DevOps Engineer', department: 'Infrastructure', status: 'active', joinedAt: '2023-08-01', projects: 7 },
+    { id: '8', name: 'Yuki Tanaka', email: 'yuki@acme.com', role: 'Frontend Engineer', department: 'Engineering', status: 'away', joinedAt: '2023-05-12', projects: 9 },
+  ];
+
+  const filtered = $derived(
+    searchQuery
+      ? crew.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
+      : crew
+  );
+
+  const statusConfig = {
+    'active': { icon: CheckCircle2, color: 'text-green-500', dot: 'bg-green-500', label: t('account.active') },
+    'away': { icon: Clock, color: 'text-amber-500', dot: 'bg-amber-500', label: t('account.invited') },
+    'offline': { icon: XCircle, color: 'text-muted-foreground', dot: 'bg-muted-foreground', label: t('account.inactive') },
+  };
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+</script>
+
+<div class="space-y-6" data-svadmin-content-page="network">
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h2 class="text-xl font-semibold text-foreground">{t('network.teamCrew')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('network.teamCrewDescription')}</p>
+    </div>
+    <div class="flex gap-2">
+      <Button variant="outline" size="sm">
+        <Download class="h-3.5 w-3.5 mr-1" />{t('common.export')}
+      </Button>
+      <Button size="sm">
+        <UserPlus class="h-3.5 w-3.5 mr-1" />{t('account.inviteMember')}
+      </Button>
+    </div>
+  </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" />
+  </div>
+
+  <!-- Table -->
+  <Card.Card class="border-border/60">
+    <Card.CardContent class="p-0">
+      <div class="hidden overflow-x-auto lg:block">
+        <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('account.member')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.role')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">Department</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.status')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('publicProfile.projects')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.joined')}</th>
+              <th class="px-4 py-3 w-12"></th>
+            </tr>
+          </thead>
+          <tbody class="divide-y">
+            {#each filtered as member (member.id)}
+              {@const sc = statusConfig[member.status]}
+              <tr class="hover:bg-accent/30 transition-colors">
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-3">
+                    <div class="relative shrink-0">
+                      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold">
+                        {initials(member.name)}
+                      </div>
+                      <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
+                    </div>
+                    <div class="min-w-0">
+                      <p class="text-sm font-medium text-foreground truncate">{member.name}</p>
+                      <p class="text-xs text-muted-foreground truncate">{member.email}</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-3 text-sm text-foreground">{member.role}</td>
+                <td class="px-4 py-3 text-sm text-muted-foreground">{member.department}</td>
+                <td class="px-4 py-3">
+                  <span class="flex items-center gap-1 text-xs {sc.color}">
+                    <sc.icon class="h-3 w-3" />{sc.label}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-sm text-foreground">{member.projects}</td>
+                <td class="px-4 py-3 text-sm text-muted-foreground whitespace-nowrap">{member.joinedAt}</td>
+                <td class="px-4 py-3">
+                  <Button variant="ghost" size="icon-sm"><MoreHorizontal class="h-4 w-4" /></Button>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+      <div class="divide-y lg:hidden">
+        {#each filtered as member (member.id)}
+          {@const sc = statusConfig[member.status]}
+          <div class="space-y-3 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex min-w-0 items-center gap-3">
+                <div class="relative shrink-0">
+                  <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
+                    {initials(member.name)}
+                  </div>
+                  <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
+                </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>
+              <Button variant="ghost" size="icon-sm" class="shrink-0"><MoreHorizontal class="h-4 w-4" /></Button>
+            </div>
+            <div class="grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
+              <div class="min-w-0">
+                <span class="block font-medium text-foreground">{member.role}</span>
+                <span class="truncate">{member.department}</span>
+              </div>
+              <div class="flex items-center gap-1 {sc.color}">
+                <sc.icon class="h-3 w-3" />{sc.label}
+              </div>
+              <div>{t('publicProfile.projects')}: <span class="font-medium text-foreground">{member.projects}</span></div>
+              <div>{t('account.joined')}: <span class="font-medium text-foreground">{member.joinedAt}</span></div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/network/TeamCrewTablePage.svelte.d.ts

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