@h-ai/ui 0.1.0-alpha5

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

@@ -0,0 +1,49 @@
+import type { Size } from '../../../types.js';
+interface Props {
+    /** 元素 ID */
+    id?: string;
+    /** 值 */
+    value?: string;
+    /** 占位符 */
+    placeholder?: string;
+    /** 尺寸 */
+    size?: Size;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否必填 */
+    required?: boolean;
+    /** 错误消息 */
+    error?: string;
+    /** 是否显示切换按钮 */
+    showToggle?: boolean;
+    /** 是否显示密码强度 */
+    showStrength?: boolean;
+    /** 最小长度 */
+    minLength?: number;
+    /** 自定义类名 */
+    class?: string;
+    /** 输入框引用 */
+    inputRef?: HTMLInputElement;
+    /** 输入事件 */
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 变化事件 */
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 无效事件 */
+    oninvalid?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+}
+/**
+ * PasswordInput
+ * 密码输入框组件，支持显示/隐藏切换和密码强度指示。
+ * 内置多语言支持，自动跟随全局 locale。
+ */
+declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "inputRef">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

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

@@ -0,0 +1,69 @@
+<!--
+  @h-ai/ui — PermGuard 权限守卫组件
+
+  根据权限上下文条件渲染子内容。
+  当用户拥有指定权限时渲染 children，否则渲染 fallback（可选）。
+
+  @example
+  ```svelte
+  <PermGuard permission="user:create">
+    <button>新建用户</button>
+  </PermGuard>
+
+  <PermGuard permissions={['user:update', 'user:delete']} mode="any">
+    <button>操作</button>
+    {#snippet fallback()}
+      <span>无权限</span>
+    {/snippet}
+  </PermGuard>
+  ```
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import { usePermission } from './permission-context.svelte.js'
+
+  interface Props {
+    /** 单个权限码 */
+    permission?: string
+    /** 多个权限码 */
+    permissions?: string[]
+    /** 多权限匹配模式：any=任一即可，all=全部需要 */
+    mode?: 'any' | 'all'
+    /** 授权通过时渲染的内容 */
+    children: Snippet
+    /** 授权未通过时渲染的内容（可选） */
+    fallback?: Snippet
+  }
+
+  const {
+    permission,
+    permissions,
+    mode = 'any',
+    children,
+    fallback,
+  }: Props = $props()
+
+  const { hasPerm, hasAnyPerm, hasAllPerms } = usePermission()
+
+  /** 计算是否有权限 */
+  const authorized = $derived.by(() => {
+    // 单权限检查
+    if (permission) {
+      return hasPerm(permission)
+    }
+    // 多权限检查
+    if (permissions?.length) {
+      return mode === 'all'
+        ? hasAllPerms(...permissions)
+        : hasAnyPerm(...permissions)
+    }
+    // 未指定权限，默认通过
+    return true
+  })
+</script>
+
+{#if authorized}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 单个权限码 */
+    permission?: string;
+    /** 多个权限码 */
+    permissions?: string[];
+    /** 多权限匹配模式：any=任一即可，all=全部需要 */
+    mode?: 'any' | 'all';
+    /** 授权通过时渲染的内容 */
+    children: Snippet;
+    /** 授权未通过时渲染的内容（可选） */
+    fallback?: Snippet;
+}
+declare const PermGuard: import("svelte").Component<Props, {}, "">;
+type PermGuard = ReturnType<typeof PermGuard>;
+export default PermGuard;

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

@@ -0,0 +1,269 @@
+<!--
+  @component RegisterForm
+  用户注册表单组件，搭配 primitives/compounds 使用。
+-->
+<script lang='ts'>
+  import type { InputProps } from '../../../types.js'
+  import type { RegisterField, RegisterFormData, RegisterFormProps } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import Alert from '../../compounds/Alert.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import PasswordInput from './PasswordInput.svelte'
+
+  const {
+    loading = false,
+    disabled = false,
+    showTitle = false,
+    showPasswordStrength = true,
+    requireConfirmPassword = true,
+    minPasswordLength = 8,
+    fields = ['username', 'email', 'password'],
+    showLoginLink = false,
+    loginUrl = '/login',
+    agreements,
+    submitText,
+    class: className = '',
+    errors = {},
+    onsubmit,
+    header,
+    footer,
+  }: RegisterFormProps = $props()
+
+  const hasAgreements = $derived(
+    !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
+  )
+
+  // 表单数据
+  let username = $state('')
+  let email = $state('')
+  let phone = $state('')
+  let password = $state('')
+  let confirmPassword = $state('')
+  let nickname = $state('')
+
+  const formClass = $derived(
+    cn(
+      'register-form space-y-4',
+      className,
+    ),
+  )
+
+  // 获取字段标签
+  function getFieldLabel(field: RegisterField): string {
+    const labelMap: Record<RegisterField, () => string> = {
+      username: () => uiM('register_username'),
+      email: () => uiM('register_email'),
+      phone: () => uiM('register_phone'),
+      password: () => uiM('register_password'),
+      confirmPassword: () => uiM('register_confirm_password'),
+      nickname: () => uiM('register_nickname'),
+    }
+    return labelMap[field]?.() || field
+  }
+
+  // 获取字段占位符
+  function getFieldPlaceholder(field: RegisterField): string {
+    const placeholderMap: Record<RegisterField, () => string> = {
+      username: () => uiM('register_username_placeholder'),
+      email: () => uiM('register_email_placeholder'),
+      phone: () => uiM('register_phone_placeholder'),
+      password: () => uiM('register_password_placeholder'),
+      confirmPassword: () => uiM('register_confirm_password_placeholder'),
+      nickname: () => uiM('register_nickname_placeholder'),
+    }
+    return placeholderMap[field]?.() || ''
+  }
+
+  // 获取字段类型
+  function getFieldType(field: RegisterField): InputProps['type'] {
+    const typeMap: Record<RegisterField, InputProps['type']> = {
+      username: 'text',
+      email: 'email',
+      phone: 'tel',
+      password: 'password',
+      confirmPassword: 'password',
+      nickname: 'text',
+    }
+    return typeMap[field] ?? 'text'
+  }
+
+  // 检查密码是否匹配
+  const passwordsMatch = $derived(
+    !requireConfirmPassword || password === confirmPassword,
+  )
+
+  // 确认密码错误提示
+  const confirmPasswordError = $derived(
+    errors.confirmPassword || (!passwordsMatch && confirmPassword.length > 0
+      ? uiM('register_password_mismatch')
+      : ''),
+  )
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (loading || disabled)
+      return
+    if (!passwordsMatch)
+      return
+
+    const data: RegisterFormData = {
+      username,
+      email,
+      phone,
+      password,
+      confirmPassword: requireConfirmPassword ? confirmPassword : undefined,
+      nickname,
+    }
+
+    await onsubmit?.(data)
+  }
+
+  // 获取字段值
+  function getFieldValue(field: RegisterField): string {
+    switch (field) {
+      case 'username': return username
+      case 'email': return email
+      case 'phone': return phone
+      case 'nickname': return nickname
+      default: return ''
+    }
+  }
+
+  // 设置字段值
+  function setFieldValue(field: RegisterField, value: string) {
+    switch (field) {
+      case 'username':
+        username = value
+        break
+      case 'email':
+        email = value
+        break
+      case 'phone':
+        phone = value
+        break
+      case 'nickname':
+        nickname = value
+        break
+    }
+  }
+</script>
+
+<form class={formClass} onsubmit={handleSubmit}>
+  <!-- 标题 -->
+  {#if showTitle}
+    <h2 class='text-xl font-semibold text-center mb-5'>{uiM('register_title')}</h2>
+  {/if}
+
+  <!-- 自定义头部 -->
+  {#if header}
+    <div class='register-form-header'>
+      {@render header()}
+    </div>
+  {/if}
+
+  <!-- 动态字段 -->
+  {#each fields as field (field)}
+    {#if field === 'password'}
+      <!-- 密码字段 -->
+      <div class='space-y-1.5'>
+        <label class='text-sm font-medium text-base-content/70' for='register-password'>
+          {getFieldLabel('password')}
+        </label>
+        <PasswordInput
+          id='register-password'
+          bind:value={password}
+          placeholder={getFieldPlaceholder('password')}
+          {disabled}
+          required
+          showStrength={showPasswordStrength}
+          minLength={minPasswordLength}
+          error={errors.password}
+        />
+      </div>
+
+      <!-- 确认密码字段 -->
+      {#if requireConfirmPassword}
+        <div class='space-y-1.5'>
+          <label class='text-sm font-medium text-base-content/70' for='register-confirm-password'>
+            {getFieldLabel('confirmPassword')}
+          </label>
+          <PasswordInput
+            id='register-confirm-password'
+            bind:value={confirmPassword}
+            placeholder={getFieldPlaceholder('confirmPassword')}
+            {disabled}
+            required
+            showStrength={false}
+            error={confirmPasswordError}
+          />
+        </div>
+      {/if}
+    {:else if field !== 'confirmPassword'}
+      <div class='space-y-1.5'>
+        <label class='text-sm font-medium text-base-content/70' for='register-{field}'>
+          {getFieldLabel(field)}
+        </label>
+        <Input
+          id={`register-${field}`}
+          type={getFieldType(field)}
+          name={field}
+          placeholder={getFieldPlaceholder(field)}
+          value={getFieldValue(field)}
+          oninput={(e: Event & { currentTarget: HTMLInputElement }) => setFieldValue(field, e.currentTarget.value)}
+          {disabled}
+          required={field === 'username' || field === 'email'}
+          autocomplete={field === 'username' ? 'username' : field === 'email' ? 'email' : undefined}
+          error={errors[field]}
+        />
+      </div>
+    {/if}
+  {/each}
+
+  <!-- 通用错误 -->
+  {#if errors.general}
+    <Alert variant='error'>
+      {errors.general}
+    </Alert>
+  {/if}
+
+  <!-- 提交按钮 -->
+  <Button
+    type='submit'
+    variant='primary'
+    class='w-full'
+    disabled={loading || disabled || !passwordsMatch}
+    loading={loading}
+  >
+    {submitText || uiM('register_submit')}
+  </Button>
+
+  <!-- 协议提示 -->
+  {#if hasAgreements}
+    <p class='text-xs text-base-content/50 text-center'>
+      {uiM('agreement_prefix')}
+      {#if agreements?.userAgreementUrl}
+        <a href={agreements.userAgreementUrl} target='_blank' rel='noopener noreferrer' class='link link-primary'>{uiM('agreement_user_agreement')}</a>
+      {/if}
+      {#if agreements?.userAgreementUrl && agreements?.privacyPolicyUrl}
+        {uiM('agreement_and')}
+      {/if}
+      {#if agreements?.privacyPolicyUrl}
+        <a href={agreements.privacyPolicyUrl} target='_blank' rel='noopener noreferrer' class='link link-primary'>{uiM('agreement_privacy_policy')}</a>
+      {/if}
+    </p>
+  {/if}
+
+  <!-- 自定义底部 -->
+  {#if footer}
+    <div class='register-form-footer'>
+      {@render footer()}
+    </div>
+  {:else if showLoginLink}
+    <div class='text-center mt-4 text-sm text-base-content/60'>
+      <span>{uiM('register_has_account')}</span>
+      <a href={loginUrl} class='link link-primary ml-1'>{uiM('register_login_now')}</a>
+    </div>
+  {/if}
+</form>

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

@@ -0,0 +1,8 @@
+import type { RegisterFormProps } from '../types.js';
+/**
+ * RegisterForm
+ * 用户注册表单组件，搭配 primitives/compounds 使用。
+ */
+declare const RegisterForm: import("svelte").Component<RegisterFormProps, {}, "">;
+type RegisterForm = ReturnType<typeof RegisterForm>;
+export default RegisterForm;

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

@@ -0,0 +1,153 @@
+<!--
+  @component ResetPasswordForm
+  重置密码表单组件（配合验证码/链接使用）。
+-->
+<script lang='ts'>
+  import type { ResetPasswordFormData, ResetPasswordFormProps } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import Alert from '../../compounds/Alert.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import { arePasswordsEqual } from './password-utils.js'
+  import PasswordInput from './PasswordInput.svelte'
+
+  const {
+    loading = false,
+    disabled = false,
+    showTitle = false,
+    showDescription = false,
+    showCode = true,
+    showPasswordStrength = true,
+    minPasswordLength = 8,
+    showBackLink = false,
+    loginUrl = '/login',
+    submitText,
+    class: className = '',
+    errors = {},
+    onsubmit,
+  }: ResetPasswordFormProps = $props()
+
+  let code = $state('')
+  let newPassword = $state('')
+  let confirmPassword = $state('')
+
+  const formClass = $derived(
+    cn(
+      'reset-password-form space-y-4',
+      className,
+    ),
+  )
+
+  const passwordsMatch = $derived(arePasswordsEqual(newPassword, confirmPassword))
+  const canSubmit = $derived.by(() => {
+    if (showCode && !code)
+      return false
+    if (!newPassword || !confirmPassword)
+      return false
+    if (!passwordsMatch)
+      return false
+    return newPassword.length >= minPasswordLength
+  })
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (loading || disabled || !canSubmit)
+      return
+
+    const data: ResetPasswordFormData = {
+      code: showCode ? code : undefined,
+      newPassword,
+      confirmPassword,
+    }
+
+    await onsubmit?.(data)
+  }
+</script>
+
+<form class={formClass} onsubmit={handleSubmit}>
+  <!-- 标题 -->
+  {#if showTitle}
+    <h2 class='text-xl font-semibold text-center mb-4'>{uiM('reset_password_title')}</h2>
+  {/if}
+
+  <!-- 描述 -->
+  {#if showDescription}
+    <p class='text-center text-base-content/45 text-sm mb-5'>
+      {uiM('reset_password_desc')}
+    </p>
+  {/if}
+
+  <!-- 验证码 -->
+  {#if showCode}
+    <div class='space-y-1.5'>
+      <label class='text-sm font-medium text-base-content/70' for='reset-code'>
+        {uiM('reset_password_code_label')}
+      </label>
+      <Input
+        id='reset-code'
+        name='code'
+        type='text'
+        placeholder={uiM('reset_password_code_placeholder')}
+        bind:value={code}
+        {disabled}
+        required
+        error={errors.code}
+      />
+    </div>
+  {/if}
+
+  <!-- 新密码 -->
+  <div class='space-y-1.5'>
+    <label class='text-sm font-medium text-base-content/70' for='reset-new-password'>
+      {uiM('reset_password_new_label')}
+    </label>
+    <PasswordInput
+      bind:value={newPassword}
+      placeholder={uiM('reset_password_new_placeholder')}
+      {disabled}
+      error={errors.newPassword}
+      showStrength={showPasswordStrength}
+      minLength={minPasswordLength}
+    />
+  </div>
+
+  <!-- 确认新密码 -->
+  <div class='space-y-1.5'>
+    <label class='text-sm font-medium text-base-content/70' for='reset-confirm-password'>
+      {uiM('reset_password_confirm_label')}
+    </label>
+    <PasswordInput
+      bind:value={confirmPassword}
+      placeholder={uiM('reset_password_confirm_placeholder')}
+      {disabled}
+      error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('reset_password_mismatch') : '')}
+      showStrength={false}
+    />
+  </div>
+
+  <!-- 通用错误 -->
+  {#if errors.general}
+    <Alert variant='error'>
+      {errors.general}
+    </Alert>
+  {/if}
+
+  <!-- 提交按钮 -->
+  <Button
+    type='submit'
+    variant='primary'
+    {loading}
+    disabled={loading || disabled || !canSubmit}
+    class='w-full'
+  >
+    {submitText || uiM('reset_password_submit')}
+  </Button>
+
+  <!-- 返回链接 -->
+  {#if showBackLink}
+    <div class='text-center mt-4 text-sm'>
+      <a href={loginUrl} class='link link-primary'>← {uiM('reset_password_back')}</a>
+    </div>
+  {/if}
+</form>

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

@@ -0,0 +1,8 @@
+import type { ResetPasswordFormProps } from '../types.js';
+/**
+ * ResetPasswordForm
+ * 重置密码表单组件（配合验证码/链接使用）。
+ */
+declare const ResetPasswordForm: import("svelte").Component<ResetPasswordFormProps, {}, "">;
+type ResetPasswordForm = ReturnType<typeof ResetPasswordForm>;
+export default ResetPasswordForm;