@svadmin/ui 0.29.0 → 0.29.2

package/src/components/PermissionMatrix.svelte

@@ -1,185 +0,0 @@
-<script lang="ts">
-  import { Shield, AlertCircle, Check } from '@lucide/svelte';
-  import type { Snippet } from 'svelte';
-  import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
-  
-  let {
-    // Basic metadata lists
-    roles = [],
-    resources = [],
-    actions = [],
-    
-    // Authorization state resolver
-    // isGranted(roleCode, resourceCode, actionCode) => boolean
-    isGranted,
-    
-    // Interactive states
-    selectedRole = $bindable(roles[0]?.code || ''),
-    loading = false,
-    
-    // Feedback and alerts (passed down from upper business logic)
-    message = '',
-    messageType = 'success', // 'success' | 'error' | 'warning'
-    conflictCount = 0,
-    
-    // Custom slots for injecting multi-tenant switchers or security filters
-    sidebarExtra,
-    headerExtra,
-
-    // Callback event
-    onToggle
-  }: {
-    roles: RoleInfo[];
-    resources: ResourceInfo[];
-    actions: ActionInfo[];
-    isGranted: (role: string, resource: string, action: string) => boolean;
-    selectedRole?: string;
-    loading?: boolean;
-    message?: string;
-    messageType?: 'success' | 'error' | 'warning';
-    conflictCount?: number;
-    sidebarExtra?: Snippet;
-    headerExtra?: Snippet;
-    onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
-  } = $props();
-
-</script>
-
-<div class="h-full flex flex-col pt-2">
-  <!-- Header Title -->
-  <div class="mb-6 flex items-center justify-between">
-    <div>
-      <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
-        <Shield class="w-6 h-6 text-primary" />
-        统一操作权限矩阵
-      </h1>
-      <p class="text-muted-foreground mt-1 text-sm">直观配置系统模块与角色的鉴权规则网络。</p>
-    </div>
-    
-    <!-- Toast Feedback -->
-    {#if message}
-      <div class={`px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all flex items-center gap-2 ${messageType === 'success' ? 'bg-green-500/10 text-green-600 dark:text-green-400 ring-1 ring-green-500/20' : 'bg-destructive/10 text-destructive ring-1 ring-destructive/20'}`}>
-        {#if messageType === 'success'}
-           <Check class="w-4 h-4" />
-        {:else}
-           <AlertCircle class="w-4 h-4" />
-        {/if}
-        {message}
-      </div>
-    {/if}
-  </div>
-
-  <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
-    <!-- Left: Role Selector Sidebar -->
-    <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-xl shadow-sm border border-border p-4 flex flex-col">
-      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">业务受众角色</h2>
-      <div class="space-y-1 flex-1 overflow-y-auto">
-        {#each roles as role}
-          <button 
-            onclick={() => selectedRole = role.code}
-            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-mono tracking-tighter">{role.code}</div>
-          </button>
-        {/each}
-        {#if roles.length === 0}
-          <p class="text-center text-muted-foreground text-sm p-4">暂无角色</p>
-        {/if}
-      </div>
-      
-      <!-- Slot for Upper Logic inject (e.g. Org Switcher, Security Level Filter) -->
-      {#if sidebarExtra}
-         <div class="mt-4 pt-4 border-t border-border">
-           {@render sidebarExtra()}
-         </div>
-      {/if}
-    </div>
-
-    <!-- Right: Matrix Grid -->
-    <div class="flex-1 bg-card rounded-xl 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>
-            <h2 class="text-lg font-bold text-foreground">当前视角: 
-              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || '未选择'}</span>
-            </h2>
-            <p class="text-xs text-muted-foreground mt-1">勾选以即时挂载/收回操作权限</p>
-          </div>
-          
-          <!-- Slot for header extra logic -->
-          {#if headerExtra}
-            {@render headerExtra()}
-          {/if}
-        </div>
-        
-        {#if conflictCount > 0}
-          <div class="px-3 py-1.5 bg-destructive/10 text-destructive rounded-lg text-xs font-medium ring-1 ring-destructive/20 flex items-center gap-1.5">
-            <AlertCircle class="w-4 h-4" /> {conflictCount} 重叠/冲突规则
-          </div>
-        {/if}
-      </div>
-      
-      <!-- Table Area -->
-      <div class="flex-1 overflow-auto p-4">
-        <table class="min-w-full rounded-lg overflow-hidden shadow-sm ring-1 ring-border/10">
-          <thead class="bg-muted/50">
-            <tr>
-              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">模块域与资源点</th>
-              {#each actions as action}
-                <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground">
-                  <div class="flex flex-col items-center">
-                    <span>{action.name}</span>
-                    <span class="text-[10px] text-muted-foreground font-mono">{action.code}</span>
-                  </div>
-                </th>
-              {/each}
-            </tr>
-          </thead>
-          <tbody class="bg-card">
-            {#if resources.length === 0}
-              <tr>
-                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">暂无可用资源</td>
-              </tr>
-            {/if}
-            {#each resources as resource, i}
-              <!-- 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-primary uppercase tracking-wider">{resource.section}</td>
-                </tr>
-              {/if}
-              
-              <tr class="even:bg-muted/30 hover:bg-muted/50 transition-colors">
-                <td class="whitespace-nowrap py-3 pl-4 pr-3 text-sm">
-                  <div class="font-medium text-foreground">{resource.name}</div>
-                  <div class="text-xs text-muted-foreground font-mono">{resource.code}</div>
-                </td>
-                
-                <!-- Action Checkboxes -->
-                {#each actions as action}
-                  {@const granted = selectedRole ? isGranted(selectedRole, resource.code, action.code) : false}
-                  <td class="whitespace-nowrap px-3 py-3 text-center">
-                    <div class="flex items-center justify-center">
-                      <button 
-                        disabled={loading || !selectedRole}
-                        aria-label="Toggle {action.name}"
-                        onclick={() => onToggle(selectedRole!, resource.code, action.code, !granted)}
-                        class="w-6 h-6 rounded border flex items-center justify-center transition-all focus:outline-none focus:ring-2 focus:ring-primary/50 {granted ? 'bg-primary border-primary text-primary-foreground' : 'border-input bg-background hover:bg-accent'} {loading || !selectedRole ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
-                      >
-                        <svg class="w-3.5 h-3.5 {granted ? 'block' : 'hidden'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                        </svg>
-                      </button>
-                    </div>
-                  </td>
-                {/each}
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>

package/src/components/ProfilePage.svelte

@@ -1,284 +0,0 @@
-<script lang="ts">
-  import { useGetIdentity, useUpdatePassword, getAuthProvider } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { Button } from './ui/button/index.js';
-  import { Label } from './ui/label/index.js';
-  import { Input } from './ui/input/index.js';
-  import * as Card from './ui/card/index.js';
-  import * as Alert from './ui/alert/index.js';
-  import PasswordInput from './PasswordInput.svelte';
-  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from '@lucide/svelte';
-
-  const identity = useGetIdentity();
-  const updatePw = useUpdatePassword();
-
-  // Check if auth provider supports updateProfile
-  let authProvider: ReturnType<typeof getAuthProvider> | null = null;
-  try { authProvider = getAuthProvider(); } catch { /* no auth */ }
-  const canUpdateProfile = !!authProvider?.updateProfile;
-
-  // Profile edit state
-  let editingProfile = $state(false);
-  let editName = $state('');
-  let profileSaving = $state(false);
-  let profileSuccess = $state(false);
-  let profileError = $state('');
-
-  function startEditProfile() {
-    editName = identity.data?.name ?? '';
-    editingProfile = true;
-    profileSuccess = false;
-    profileError = '';
-  }
-
-  async function saveProfile() {
-    if (!authProvider?.updateProfile) return;
-    profileSaving = true;
-    profileError = '';
-    try {
-      const result = await authProvider.updateProfile({ name: editName });
-      if (result.success) {
-        profileSuccess = true;
-        editingProfile = false;
-        identity.refetch();
-      } else {
-        profileError = result.error?.message ?? t('common.operationFailed');
-      }
-    } catch (e) {
-      profileError = (e as Error).message;
-    } finally {
-      profileSaving = false;
-    }
-  }
-
-  // Avatar upload
-  let avatarUploading = $state(false);
-  let fileInput = $state<HTMLInputElement>(null!);
-
-  async function handleAvatarChange(e: Event) {
-    const file = (e.target as HTMLInputElement).files?.[0];
-    if (!file || !authProvider?.updateProfile) return;
-    avatarUploading = true;
-    try {
-      const result = await authProvider.updateProfile({ avatar: file });
-      if (result.success) identity.refetch();
-    } finally {
-      avatarUploading = false;
-    }
-  }
-
-  // Password change form
-  let currentPassword = $state('');
-  let newPassword = $state('');
-  let confirmPassword = $state('');
-  let pwError = $state('');
-  let pwSuccess = $state(false);
-
-  async function handlePasswordChange(e: SubmitEvent) {
-    e.preventDefault();
-    pwError = '';
-    pwSuccess = false;
-
-    if (!newPassword) { pwError = t('auth.passwordRequired'); return; }
-    if (newPassword !== confirmPassword) { pwError = t('auth.passwordMismatch'); return; }
-
-    const result = await updatePw.mutate({
-      password: newPassword,
-      currentPassword,
-      confirmPassword,
-    });
-    if (result.success) {
-      pwSuccess = true;
-      currentPassword = '';
-      newPassword = '';
-      confirmPassword = '';
-    } else {
-      pwError = result.error?.message ?? t('common.operationFailed');
-    }
-  }
-
-  // Avatar initials
-  const initials = $derived(
-    identity.data?.name
-      ? identity.data.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)
-      : '?'
-  );
-</script>
-
-<div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('profile.title')}</h2>
-  </div>
-
-  <!-- Profile Info -->
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <User class="h-4 w-4 text-muted-foreground" />
-        {t('profile.title')}
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      {#if identity.isLoading}
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <Loader2 class="h-4 w-4 animate-spin" />
-          {t('common.loading')}
-        </div>
-      {:else if identity.data}
-        {#if profileSuccess}
-          <Alert.Root class="border-success/30 bg-success/5 text-success mb-4">
-            <CheckCircle class="h-4 w-4" />
-            <Alert.Description>{t('common.updateSuccess')}</Alert.Description>
-          </Alert.Root>
-        {/if}
-
-        <div class="flex items-start gap-6">
-          <!-- Avatar -->
-          <div class="shrink-0 relative group">
-            {#if identity.data.avatar}
-              <img
-                src={identity.data.avatar}
-                alt={identity.data.name ?? ''}
-                class="h-20 w-20 rounded-lg object-cover ring-2 ring-primary/20"
-              />
-            {:else}
-              <div class="h-20 w-20 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-2xl font-bold">
-                {initials}
-              </div>
-            {/if}
-            {#if canUpdateProfile}
-              <button
-                class="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
-                onclick={() => fileInput.click()}
-                disabled={avatarUploading}
-              >
-                {#if avatarUploading}
-                  <Loader2 class="h-5 w-5 text-white animate-spin" />
-                {:else}
-                  <Camera class="h-5 w-5 text-white" />
-                {/if}
-              </button>
-              <input
-                bind:this={fileInput}
-                type="file"
-                accept="image/*"
-                class="hidden"
-                onchange={handleAvatarChange}
-              />
-            {/if}
-          </div>
-
-          <!-- Info -->
-          <div class="space-y-3 flex-1 min-w-0">
-            {#if editingProfile}
-              <div class="space-y-3 max-w-sm">
-                <div>
-                  <Label for="edit-name" class="text-xs text-muted-foreground">{t('profile.name')}</Label>
-                  <Input id="edit-name" bind:value={editName} class="mt-1" />
-                </div>
-                {#if profileError}
-                  <p class="text-xs text-destructive">{profileError}</p>
-                {/if}
-                <div class="flex gap-2">
-                  <Button size="sm" onclick={saveProfile} disabled={profileSaving}>
-                    {#if profileSaving}<Loader2 class="h-3 w-3 animate-spin mr-1" />{/if}
-                    {t('common.save')}
-                  </Button>
-                  <Button size="sm" variant="outline" onclick={() => { editingProfile = false; }}>
-                    {t('common.cancel')}
-                  </Button>
-                </div>
-              </div>
-            {:else}
-              <div>
-                <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
-                <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
-              </div>
-
-              {#if identity.data.email || identity.data.username}
-                <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                  {#if identity.data.email}
-                    <Mail class="h-4 w-4 shrink-0" />
-                  {:else}
-                    <User class="h-4 w-4 shrink-0" />
-                  {/if}
-                  <span class="truncate">{identity.data.email || identity.data.username}</span>
-                </div>
-              {/if}
-
-              {#if identity.data.id}
-                <div class="text-xs text-muted-foreground/60 font-mono">
-                  ID: {identity.data.id}
-                </div>
-              {/if}
-
-              {#if canUpdateProfile}
-                <Button size="sm" variant="outline" onclick={startEditProfile}>
-                  {t('common.edit')}
-                </Button>
-              {/if}
-            {/if}
-          </div>
-        </div>
-      {:else}
-        <p class="text-sm text-muted-foreground">{t('profile.notAvailable')}</p>
-      {/if}
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Change Password -->
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <Lock class="h-4 w-4 text-muted-foreground" />
-        {t('profile.changePassword')}
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <form onsubmit={handlePasswordChange} class="space-y-4 max-w-sm">
-        {#if pwError}
-          <Alert.Root variant="destructive">
-            <AlertCircle class="h-4 w-4" />
-            <Alert.Description>{pwError}</Alert.Description>
-          </Alert.Root>
-        {/if}
-
-        {#if pwSuccess}
-          <Alert.Root class="border-success/30 bg-success/5 text-success">
-            <CheckCircle class="h-4 w-4" />
-            <Alert.Description>{t('profile.passwordChanged')}</Alert.Description>
-          </Alert.Root>
-        {/if}
-
-        <PasswordInput
-          id="current-password"
-          label={t('profile.currentPassword')}
-          bind:value={currentPassword}
-          autocomplete="current-password"
-        />
-
-        <PasswordInput
-          id="new-password"
-          label={t('auth.password')}
-          bind:value={newPassword}
-          autocomplete="new-password"
-          showStrength
-        />
-
-        <PasswordInput
-          id="confirm-new-password"
-          label={t('auth.confirmPassword')}
-          bind:value={confirmPassword}
-          autocomplete="new-password"
-        />
-
-        <Button type="submit" disabled={updatePw.isLoading}>
-          {#if updatePw.isLoading}
-            <Loader2 class="h-4 w-4 animate-spin mr-2" />
-          {/if}
-          {t('profile.updatePassword')}
-        </Button>
-      </form>
-    </Card.CardContent>
-  </Card.Card>
-</div>

package/src/components/RegisterPage.svelte

@@ -1,112 +0,0 @@
-<script lang="ts">
-  import { useRegister } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  import { Button } from './ui/button/index.js';
-  import { Input } from './ui/input/index.js';
-  import { Label } from './ui/label/index.js';
-  import * as Card from './ui/card/index.js';
-  import * as Alert from './ui/alert/index.js';
-  import PasswordInput from './PasswordInput.svelte';
-  import { UserPlus, User, Loader2, AlertCircle } from '@lucide/svelte';
-
-  let { title = 'Admin', onSuccess } = $props<{
-    title?: string;
-    onSuccess?: () => void;
-  }>();
-
-  const register = useRegister();
-
-  let identifier = $state('');
-  let password = $state('');
-  let confirmPassword = $state('');
-  let error = $state('');
-
-  async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault();
-    error = '';
-
-    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
-    if (!password) { error = t('auth.passwordRequired'); return; }
-    if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
-
-    const result = await register.mutate({ email: identifier, username: identifier, password });
-    if (result.success) {
-      onSuccess?.();
-    } else {
-      error = result.error?.message ?? t('common.operationFailed');
-    }
-  }
-</script>
-
-<div class="min-h-screen flex items-center justify-center bg-background p-4">
-  <div class="w-full max-w-[380px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
-          <UserPlus class="h-5 w-5" />
-        </div>
-        <Card.CardTitle class="text-xl">{t('auth.createAccount')}</Card.CardTitle>
-        <p class="text-sm text-muted-foreground">{t('auth.createAccountMessage')}</p>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <form onsubmit={handleSubmit} class="space-y-4">
-          {#if error}
-            <Alert.Root variant="destructive">
-              <AlertCircle class="h-4 w-4" />
-              <Alert.Description>{error}</Alert.Description>
-            </Alert.Root>
-          {/if}
-
-          <div class="space-y-2">
-            <Label for="register-identifier">{t('auth.usernameOrEmail')}</Label>
-            <div class="relative">
-              <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
-              <Input
-                id="register-identifier"
-                type="text"
-                placeholder={t('auth.identifierPlaceholder')}
-                bind:value={identifier}
-                class="pl-9"
-                autocomplete="username"
-              />
-            </div>
-          </div>
-
-          <PasswordInput
-            id="register-password"
-            label={t('auth.password')}
-            bind:value={password}
-            autocomplete="new-password"
-            showStrength
-          />
-
-          <PasswordInput
-            id="register-confirm"
-            label={t('auth.confirmPassword')}
-            bind:value={confirmPassword}
-            autocomplete="new-password"
-          />
-
-          <Button type="submit" class="w-full" disabled={register.isLoading}>
-            {#if register.isLoading}
-              <Loader2 class="h-4 w-4 animate-spin mr-2" />
-            {/if}
-            {t('auth.registerButton')}
-          </Button>
-        </form>
-
-        <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
-          <span class="text-sm text-muted-foreground">{t('auth.hasAccount')}</span>
-          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
-            {t('auth.login')}
-          </Button>
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
-      Powered by {title}
-    </p>
-  </div>
-</div>