@h-ai/ui 0.1.0-alpha5

package/dist/components/scenes/iam/UserProfile.svelte

@@ -0,0 +1,251 @@
+<!--
+  =============================================================================
+  @h-ai/ui - UserProfile 组件
+  =============================================================================
+  用户个人信息展示/编辑组件
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 primitives/compounds 组件：Input, Button, Textarea, Avatar, Alert
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { UserProfileField, UserProfileProps, UserProfileSubmitData } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import Alert from '../../compounds/Alert.svelte'
+  import Avatar from '../../primitives/Avatar.svelte'
+  import BareInput from '../../primitives/BareInput.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import Textarea from '../../primitives/Textarea.svelte'
+
+  const {
+    user,
+    editable = false,
+    alwaysEditable = false,
+    loading = false,
+    fields = ['avatar', 'username', 'email', 'displayName', 'phone'],
+    class: className = '',
+    errors = {},
+    onsubmit,
+    onavatarchange,
+  }: UserProfileProps = $props()
+
+  let editMode = $state(false)
+  let formData = $state<UserProfileSubmitData>({
+    username: '',
+    email: '',
+    displayName: '',
+    phone: '',
+    bio: '',
+  })
+
+  // 初始化表单数据
+  $effect(() => {
+    if (user) {
+      formData = {
+        username: user.username || '',
+        email: user.email || '',
+        displayName: user.displayName || user.nickname || '',
+        phone: user.phone || '',
+        bio: user.bio || '',
+      }
+    }
+  })
+
+  const containerClass = $derived(
+    cn(
+      'user-profile',
+      className,
+    ),
+  )
+
+  // 获取字段标签
+  function getFieldLabel(field: UserProfileField): string {
+    const labelMap: Record<UserProfileField, () => string> = {
+      avatar: () => uiM('user_profile_avatar'),
+      username: () => uiM('user_profile_username'),
+      email: () => uiM('user_profile_email'),
+      nickname: () => uiM('user_profile_nickname'),
+      displayName: () => uiM('user_profile_display_name'),
+      phone: () => uiM('user_profile_phone'),
+      bio: () => uiM('user_profile_bio'),
+    }
+    return labelMap[field]?.() || field
+  }
+
+  /**
+   * 将展示字段名映射为提交数据字段名。
+   *
+   * @param field 展示字段名
+   * @returns 提交数据中的字段名
+   */
+  function getModelKey(field: UserProfileField): keyof UserProfileSubmitData {
+    if (field === 'nickname' || field === 'displayName') {
+      return 'displayName'
+    }
+    if (field === 'email') {
+      return 'email'
+    }
+    if (field === 'phone') {
+      return 'phone'
+    }
+    if (field === 'bio') {
+      return 'bio'
+    }
+    return 'username'
+  }
+
+  /**
+   * 进入编辑态（仅 alwaysEditable=false 时生效）。
+   */
+  function startEdit() {
+    editMode = true
+  }
+
+  /**
+   * 退出编辑态，并使用当前用户数据重置表单。
+   */
+  function cancelEdit() {
+    editMode = false
+    // 重置表单数据
+    if (user) {
+      formData = {
+        username: user.username || '',
+        email: user.email || '',
+        displayName: user.displayName || user.nickname || '',
+        phone: user.phone || '',
+        bio: user.bio || '',
+      }
+    }
+  }
+
+  /**
+   * 提交资料数据，成功后退出编辑态。
+   *
+   * @param e 表单提交事件
+   * @returns 无返回值
+   */
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (loading)
+      return
+
+    await onsubmit?.(formData)
+    editMode = false
+  }
+
+  /**
+   * 将选中的头像文件透传给父组件回调。
+   *
+   * @param e 文件输入事件
+   */
+  function handleAvatarChange(e: Event & { currentTarget: HTMLInputElement }) {
+    const file = e.currentTarget.files?.[0]
+    if (file) {
+      onavatarchange?.(file)
+    }
+  }
+</script>
+
+<div class={containerClass}>
+  <form onsubmit={handleSubmit}>
+    <div class='space-y-6'>
+      {#each fields as field (field)}
+        {@const modelKey = getModelKey(field)}
+        {#if field === 'avatar'}
+          <!-- 头像 -->
+          <div class='flex items-center gap-4'>
+            <Avatar
+              src={user?.avatarUrl ?? user?.avatar}
+              alt={uiM('user_profile_avatar')}
+              size='lg'
+              ring
+              class='shadow-sm'
+              placeholder={user?.username?.charAt(0).toUpperCase() || 'U'}
+            />
+            {#if editable && (editMode || alwaysEditable)}
+              <div>
+                <BareInput
+                  type='file'
+                  class='file-input file-input-sm w-full max-w-xs'
+                  accept='image/*'
+                  onchange={handleAvatarChange}
+                />
+                <p class='text-xs text-base-content/60 mt-1'>{uiM('user_profile_avatar_hint')}</p>
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <!-- 其他字段 -->
+          <div class='fieldset'>
+            <legend class='fieldset-legend font-medium'>{getFieldLabel(field)}</legend>
+            {#if editable && (editMode || alwaysEditable)}
+              {#if field === 'bio'}
+                <Textarea
+                  name={modelKey}
+                  rows={3}
+                  bind:value={formData[modelKey]}
+                  disabled={loading}
+                  error={errors[field]}
+                />
+              {:else}
+                <Input
+                  type={field === 'email' ? 'email' : field === 'phone' ? 'tel' : 'text'}
+                  name={modelKey}
+                  bind:value={formData[modelKey]}
+                  disabled={loading}
+                  error={errors[field]}
+                />
+              {/if}
+            {:else}
+              <p class='py-2 px-1 text-base-content'>
+                {formData[modelKey] || '-'}
+              </p>
+            {/if}
+          </div>
+        {/if}
+      {/each}
+
+      <!-- 通用错误 -->
+      {#if errors.general}
+        <Alert variant='error'>
+          {errors.general}
+        </Alert>
+      {/if}
+
+      <!-- 操作按钮 -->
+      {#if editable}
+        <div class='flex gap-2 pt-4'>
+          {#if editMode || alwaysEditable}
+            <Button
+              type='submit'
+              variant='primary'
+              {loading}
+              disabled={loading}
+            >
+              {uiM('user_profile_save')}
+            </Button>
+            <Button
+              type='button'
+              variant='ghost'
+              onclick={cancelEdit}
+              disabled={loading}
+            >
+              {uiM('user_profile_cancel')}
+            </Button>
+          {/if}
+          {#if !editMode && !alwaysEditable}
+            <Button
+              type='button'
+              variant='outline'
+              onclick={startEdit}
+            >
+              {uiM('user_profile_edit')}
+            </Button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </form>
+</div>

package/dist/components/scenes/iam/UserProfile.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { UserProfileProps } from '../types.js';
+declare const UserProfile: import("svelte").Component<UserProfileProps, {}, "">;
+type UserProfile = ReturnType<typeof UserProfile>;
+export default UserProfile;

package/dist/components/scenes/iam/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @h-ai/ui — IAM 场景组件导出
+ *
+ * 身份认证相关的场景化组件
+ * @module index
+ */
+export { default as ChangePasswordForm } from './ChangePasswordForm.svelte';
+export { default as ForgotPasswordForm } from './ForgotPasswordForm.svelte';
+export { default as LoginForm } from './LoginForm.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as PermGuard } from './PermGuard.svelte';
+export { matchPermission, setPermissionContext, usePermission, } from './permission-context.svelte.js';
+export type { PermissionContext } from './permission-context.svelte.js';
+export { default as RegisterForm } from './RegisterForm.svelte';
+export { default as ResetPasswordForm } from './ResetPasswordForm.svelte';
+export { default as UserProfile } from './UserProfile.svelte';

package/dist/components/scenes/iam/index.js

@@ -0,0 +1,18 @@
+/**
+ * @h-ai/ui — IAM 场景组件导出
+ *
+ * 身份认证相关的场景化组件
+ * @module index
+ */
+export { default as ChangePasswordForm } from './ChangePasswordForm.svelte';
+export { default as ForgotPasswordForm } from './ForgotPasswordForm.svelte';
+// 认证表单
+export { default as LoginForm } from './LoginForm.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+// 权限控制
+export { default as PermGuard } from './PermGuard.svelte';
+export { matchPermission, setPermissionContext, usePermission, } from './permission-context.svelte.js';
+export { default as RegisterForm } from './RegisterForm.svelte';
+export { default as ResetPasswordForm } from './ResetPasswordForm.svelte';
+// 用户信息
+export { default as UserProfile } from './UserProfile.svelte';

package/dist/components/scenes/iam/password-utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @h-ai/ui — IAM 密码工具
+ *
+ * 密码规范化与一致性比较工具
+ * @module password-utils
+ */
+/**
+ * 规范化密码字符串
+ * - 使用 NFKC 统一兼容字符
+ */
+export declare function normalizePassword(value: string): string;
+/**
+ * 比较两次密码是否一致
+ */
+export declare function arePasswordsEqual(password: string, confirmPassword: string): boolean;

package/dist/components/scenes/iam/password-utils.js

@@ -0,0 +1,19 @@
+/**
+ * @h-ai/ui — IAM 密码工具
+ *
+ * 密码规范化与一致性比较工具
+ * @module password-utils
+ */
+/**
+ * 规范化密码字符串
+ * - 使用 NFKC 统一兼容字符
+ */
+export function normalizePassword(value) {
+    return value.normalize('NFKC');
+}
+/**
+ * 比较两次密码是否一致
+ */
+export function arePasswordsEqual(password, confirmPassword) {
+    return normalizePassword(password) === normalizePassword(confirmPassword);
+}

package/dist/components/scenes/iam/permission-context.svelte.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @h-ai/ui — 权限上下文（Svelte 5）
+ *
+ * 提供基于 Svelte Context 的权限判断能力，支持精确匹配与通配符匹配。
+ * 在根布局中通过 `setPermissionContext` 注入，子组件通过 `usePermission` 消费。
+ *
+ * @example
+ * ```svelte
+ * <!-- +layout.svelte -->
+ * <script>
+ *   import { setPermissionContext } from '@h-ai/ui'
+ *   setPermissionContext(() => data.user?.permissions ?? [])
+ * </script>
+ *
+ * <!-- 子组件 -->
+ * <script>
+ *   import { usePermission } from '@h-ai/ui'
+ *   const { hasPerm, hasAnyPerm, hasAllPerms } = usePermission()
+ * </script>
+ * {#if hasPerm('user:create')}
+ *   <button>新建用户</button>
+ * {/if}
+ * ```
+ *
+ * @module permission-context.svelte
+ */
+/**
+ * 判断单个权限是否匹配用户权限列表
+ *
+ * 支持三种匹配模式：
+ * - 精确匹配：`user:create` === `user:create`
+ * - 超级权限：`*` 匹配一切
+ * - 通配符前缀：`user:*` 匹配 `user:create`、`user:delete` 等
+ *
+ * @param required - 需要检查的权限码
+ * @param userPermissions - 用户拥有的权限列表
+ * @returns 是否匹配
+ */
+export declare function matchPermission(required: string, userPermissions: string[]): boolean;
+/** 权限上下文消费接口 */
+export interface PermissionContext {
+    /** 当前用户权限列表（响应式） */
+    readonly permissions: string[];
+    /** 判断是否拥有指定权限 */
+    hasPerm: (permission: string) => boolean;
+    /** 判断是否拥有任一权限 */
+    hasAnyPerm: (...permissions: string[]) => boolean;
+    /** 判断是否拥有全部权限 */
+    hasAllPerms: (...permissions: string[]) => boolean;
+}
+/**
+ * 在组件树中注入权限上下文
+ *
+ * 应在根布局或需要权限控制的最外层组件中调用。
+ * `getPermissions` 参数应返回响应式数据（如 `$derived` 值），
+ * 以便权限变化时自动触发子组件更新。
+ *
+ * @param getPermissions - 返回当前用户权限列表的函数
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { setPermissionContext } from '@h-ai/ui'
+ *   let { data } = $props()
+ *   const userPermissions = $derived(data.user?.permissions ?? [])
+ *   setPermissionContext(() => userPermissions)
+ * </script>
+ * ```
+ */
+export declare function setPermissionContext(getPermissions: () => string[]): void;
+/**
+ * 在子组件中消费权限上下文
+ *
+ * 返回一组权限判断工具函数，基于 `setPermissionContext` 注入的数据。
+ * 若未注入上下文，所有权限检查均返回 `false`。
+ *
+ * @returns 权限上下文消费接口
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { usePermission } from '@h-ai/ui'
+ *   const { hasPerm } = usePermission()
+ * </script>
+ * {#if hasPerm('role:create')}
+ *   <button>创建角色</button>
+ * {/if}
+ * ```
+ */
+export declare function usePermission(): PermissionContext;

package/dist/components/scenes/iam/permission-context.svelte.js

@@ -0,0 +1,114 @@
+/**
+ * @h-ai/ui — 权限上下文（Svelte 5）
+ *
+ * 提供基于 Svelte Context 的权限判断能力，支持精确匹配与通配符匹配。
+ * 在根布局中通过 `setPermissionContext` 注入，子组件通过 `usePermission` 消费。
+ *
+ * @example
+ * ```svelte
+ * <!-- +layout.svelte -->
+ * <script>
+ *   import { setPermissionContext } from '@h-ai/ui'
+ *   setPermissionContext(() => data.user?.permissions ?? [])
+ * </script>
+ *
+ * <!-- 子组件 -->
+ * <script>
+ *   import { usePermission } from '@h-ai/ui'
+ *   const { hasPerm, hasAnyPerm, hasAllPerms } = usePermission()
+ * </script>
+ * {#if hasPerm('user:create')}
+ *   <button>新建用户</button>
+ * {/if}
+ * ```
+ *
+ * @module permission-context.svelte
+ */
+import { getContext, setContext } from 'svelte';
+// ─── Context Key ───
+const PERMISSION_CONTEXT_KEY = Symbol('hai-permission-context');
+// ─── 权限匹配（纯函数） ───
+/**
+ * 判断单个权限是否匹配用户权限列表
+ *
+ * 支持三种匹配模式：
+ * - 精确匹配：`user:create` === `user:create`
+ * - 超级权限：`*` 匹配一切
+ * - 通配符前缀：`user:*` 匹配 `user:create`、`user:delete` 等
+ *
+ * @param required - 需要检查的权限码
+ * @param userPermissions - 用户拥有的权限列表
+ * @returns 是否匹配
+ */
+export function matchPermission(required, userPermissions) {
+    for (const userPerm of userPermissions) {
+        if (userPerm === required || userPerm === '*')
+            return true;
+        if (userPerm.endsWith(':*') && required.startsWith(userPerm.slice(0, -1)))
+            return true;
+    }
+    return false;
+}
+// ─── Provider / Consumer ───
+/**
+ * 在组件树中注入权限上下文
+ *
+ * 应在根布局或需要权限控制的最外层组件中调用。
+ * `getPermissions` 参数应返回响应式数据（如 `$derived` 值），
+ * 以便权限变化时自动触发子组件更新。
+ *
+ * @param getPermissions - 返回当前用户权限列表的函数
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { setPermissionContext } from '@h-ai/ui'
+ *   let { data } = $props()
+ *   const userPermissions = $derived(data.user?.permissions ?? [])
+ *   setPermissionContext(() => userPermissions)
+ * </script>
+ * ```
+ */
+export function setPermissionContext(getPermissions) {
+    setContext(PERMISSION_CONTEXT_KEY, { getPermissions });
+}
+/**
+ * 在子组件中消费权限上下文
+ *
+ * 返回一组权限判断工具函数，基于 `setPermissionContext` 注入的数据。
+ * 若未注入上下文，所有权限检查均返回 `false`。
+ *
+ * @returns 权限上下文消费接口
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { usePermission } from '@h-ai/ui'
+ *   const { hasPerm } = usePermission()
+ * </script>
+ * {#if hasPerm('role:create')}
+ *   <button>创建角色</button>
+ * {/if}
+ * ```
+ */
+export function usePermission() {
+    const ctx = getContext(PERMISSION_CONTEXT_KEY);
+    /** 获取权限列表，未注入上下文时返回空数组 */
+    const getPerms = () => ctx?.getPermissions() ?? [];
+    return {
+        get permissions() {
+            return getPerms();
+        },
+        hasPerm(permission) {
+            return matchPermission(permission, getPerms());
+        },
+        hasAnyPerm(...permissions) {
+            const perms = getPerms();
+            return permissions.some(p => matchPermission(p, perms));
+        },
+        hasAllPerms(...permissions) {
+            const perms = getPerms();
+            return permissions.every(p => matchPermission(p, perms));
+        },
+    };
+}

package/dist/components/scenes/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @h-ai/ui — 场景组件 (Scenes)
+ *
+ * 面向具体业务场景的完整 UI 流程，通常对应一个完整的用户任务。
+ * @module index
+ */
+export * from './ai/index.js';
+export * from './app/index.js';
+export * from './crud/index.js';
+export * from './crypto/index.js';
+export * from './iam/index.js';
+export * from './storage/index.js';
+export * from './types.js';

package/dist/components/scenes/index.js

@@ -0,0 +1,20 @@
+/**
+ * @h-ai/ui — 场景组件 (Scenes)
+ *
+ * 面向具体业务场景的完整 UI 流程，通常对应一个完整的用户任务。
+ * @module index
+ */
+// AI 场景组件
+export * from './ai/index.js';
+// App 应用级场景组件
+export * from './app/index.js';
+// CRUD 场景组件
+export * from './crud/index.js';
+// Crypto 场景组件
+export * from './crypto/index.js';
+// IAM 场景组件
+export * from './iam/index.js';
+// Storage 场景组件
+export * from './storage/index.js';
+// 场景组件类型
+export * from './types.js';