@h-ai/ui 0.1.0-alpha.10

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

@@ -0,0 +1,134 @@
+<!--
+  @component ChangePasswordForm
+  修改密码表单组件。
+-->
+<script lang='ts'>
+  import type { ChangePasswordFormData, ChangePasswordFormProps } 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 { arePasswordsEqual } from './password-utils.js'
+  import PasswordInput from './PasswordInput.svelte'
+
+  const {
+    loading = false,
+    disabled = false,
+    requireOldPassword = true,
+    showPasswordStrength = true,
+    minPasswordLength = 8,
+    submitText,
+    class: className = '',
+    errors = {},
+    onsubmit,
+  }: ChangePasswordFormProps = $props()
+
+  let oldPassword = $state('')
+  let newPassword = $state('')
+  let confirmPassword = $state('')
+
+  const formClass = $derived(
+    cn(
+      'change-password-form space-y-5',
+      className,
+    ),
+  )
+
+  const passwordsMatch = $derived(arePasswordsEqual(newPassword, confirmPassword))
+  const canSubmit = $derived.by(() => {
+    if (requireOldPassword && !oldPassword)
+      return false
+    if (!newPassword || !confirmPassword)
+      return false
+    if (!passwordsMatch)
+      return false
+    return newPassword.length >= minPasswordLength
+  })
+
+  /**
+   * 提交修改密码数据。
+   *
+   * @param e 表单提交事件
+   * @returns 无返回值
+   */
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (loading || disabled || !canSubmit)
+      return
+
+    const data: ChangePasswordFormData = {
+      oldPassword: requireOldPassword ? oldPassword : undefined,
+      newPassword,
+      confirmPassword,
+    }
+
+    await onsubmit?.(data)
+  }
+</script>
+
+<form class={formClass} onsubmit={handleSubmit}>
+  {#if requireOldPassword}
+    <div class='space-y-1.5'>
+      <label class='text-sm font-medium text-base-content/70' for='old-password'>
+        {uiM('change_password_old')}
+      </label>
+      <PasswordInput
+        value={oldPassword}
+        oninput={(e) => { oldPassword = e.currentTarget.value }}
+        placeholder={uiM('change_password_old_placeholder')}
+        {disabled}
+        error={errors.oldPassword}
+        showStrength={false}
+      />
+    </div>
+  {/if}
+
+  <div class='space-y-1.5'>
+    <label class='text-sm font-medium text-base-content/70' for='new-password'>
+      {uiM('change_password_new')}
+    </label>
+    <PasswordInput
+      value={newPassword}
+      oninput={(e) => { newPassword = e.currentTarget.value }}
+      placeholder={uiM('change_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='confirm-password'>
+      {uiM('change_password_confirm')}
+    </label>
+    <PasswordInput
+      value={confirmPassword}
+      oninput={(e) => { confirmPassword = e.currentTarget.value }}
+      placeholder={uiM('change_password_confirm_placeholder')}
+      {disabled}
+      error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('change_password_mismatch') : '')}
+      showStrength={false}
+    />
+  </div>
+
+  <div class='rounded-lg bg-base-content/3 px-3.5 py-2.5 text-xs text-base-content/50'>
+    {uiM('change_password_relogin_hint')}
+  </div>
+
+  {#if errors.general}
+    <Alert variant='error'>
+      {errors.general}
+    </Alert>
+  {/if}
+
+  <Button
+    type='submit'
+    variant='primary'
+    class='w-full sm:w-auto sm:min-w-40'
+    disabled={loading || disabled || !canSubmit}
+    {loading}
+  >
+    {submitText || uiM('change_password_submit')}
+  </Button>
+</form>

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

@@ -0,0 +1,8 @@
+import type { ChangePasswordFormProps } from '../types.js';
+/**
+ * ChangePasswordForm
+ * 修改密码表单组件。
+ */
+declare const ChangePasswordForm: import("svelte").Component<ChangePasswordFormProps, {}, "">;
+type ChangePasswordForm = ReturnType<typeof ChangePasswordForm>;
+export default ChangePasswordForm;

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

@@ -0,0 +1,147 @@
+<!--
+  =============================================================================
+  @h-ai/ui - ForgotPasswordForm 组件
+  =============================================================================
+  找回密码表单组件
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 primitives/compounds 组件：Input, Button, Alert
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ForgotPasswordFormData, ForgotPasswordFormProps } 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'
+
+  const {
+    loading = false,
+    disabled = false,
+    showTitle = false,
+    showDescription = false,
+    mode = 'email',
+    showBackLink = false,
+    loginUrl = '/login',
+    submitText,
+    class: className = '',
+    errors = {},
+    onsubmit,
+    header,
+    footer,
+  }: ForgotPasswordFormProps = $props()
+
+  let email = $state('')
+  let phone = $state('')
+
+  const formClass = $derived(
+    cn(
+      'forgot-password-form space-y-4',
+      className,
+    ),
+  )
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (loading || disabled)
+      return
+
+    const data: ForgotPasswordFormData = {
+      email: mode === 'email' ? email : undefined,
+      phone: mode === 'phone' ? phone : undefined,
+    }
+
+    await onsubmit?.(data)
+  }
+</script>
+
+<form class={formClass} onsubmit={handleSubmit}>
+  <!-- 标题 -->
+  {#if showTitle}
+    <h2 class='text-2xl font-semibold text-center mb-4'>{uiM('forgot_password_title')}</h2>
+  {/if}
+
+  <!-- 描述 -->
+  {#if showDescription}
+    <p class='text-center text-base-content/60 text-sm mb-6'>
+      {uiM('forgot_password_desc')}
+    </p>
+  {/if}
+
+  <!-- 自定义头部 -->
+  {#if header}
+    <div class='forgot-password-form-header'>
+      {@render header()}
+    </div>
+  {/if}
+
+  <!-- 邮箱输入 -->
+  {#if mode === 'email'}
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{uiM('forgot_password_email_label')}</legend>
+      <Input
+        id='forgot-email'
+        name='email'
+        type='email'
+        placeholder={uiM('forgot_password_email_placeholder')}
+        bind:value={email}
+        {disabled}
+        required
+        error={errors.email}
+      />
+    </div>
+  {:else}
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{uiM('forgot_password_phone_label')}</legend>
+      <Input
+        id='forgot-phone'
+        name='phone'
+        type='tel'
+        placeholder={uiM('forgot_password_phone_placeholder')}
+        bind:value={phone}
+        {disabled}
+        required
+        error={errors.phone}
+      />
+    </div>
+  {/if}
+
+  <!-- 提示信息 -->
+  <p class='text-sm text-base-content/60'>
+    {#if mode === 'email'}
+      {uiM('forgot_password_email_hint')}
+    {:else}
+      {uiM('forgot_password_phone_hint')}
+    {/if}
+  </p>
+
+  <!-- 通用错误 -->
+  {#if errors.general}
+    <Alert variant='error'>
+      {errors.general}
+    </Alert>
+  {/if}
+
+  <!-- 提交按钮 -->
+  <Button
+    type='submit'
+    variant='primary'
+    {loading}
+    disabled={loading || disabled}
+    class='w-full'
+  >
+    {submitText || uiM('forgot_password_submit')}
+  </Button>
+
+  <!-- 自定义底部 -->
+  {#if footer}
+    <div class='forgot-password-form-footer'>
+      {@render footer()}
+    </div>
+  {:else if showBackLink}
+    <div class='text-center mt-4 text-sm'>
+      <a href={loginUrl} class='link link-primary'>← {uiM('forgot_password_back')}</a>
+    </div>
+  {/if}
+</form>

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

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

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

@@ -0,0 +1,191 @@
+<!--
+  @component LoginForm
+  用户登录表单组件，搭配 primitives/compounds 使用。
+-->
+<script lang='ts'>
+  import type { LoginFormData, LoginFormProps } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import Alert from '../../compounds/Alert.svelte'
+  import BareButton from '../../primitives/BareButton.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Checkbox from '../../primitives/Checkbox.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import PasswordInput from './PasswordInput.svelte'
+
+  const {
+    loading = false,
+    disabled = false,
+    showTitle = false,
+    showRememberMe = true,
+    showForgotPassword = true,
+    forgotPasswordUrl = '/forgot-password',
+    showRegisterLink = false,
+    registerUrl = '/register',
+    agreements,
+    submitText,
+    class: className = '',
+    errors = {},
+    onsubmit,
+    onforgotpassword,
+    header,
+    footer,
+  }: LoginFormProps = $props()
+
+  const hasAgreements = $derived(
+    !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
+  )
+
+  let username = $state('')
+  let password = $state('')
+  let rememberMe = $state(false)
+
+  const formClass = $derived(
+    cn(
+      'login-form space-y-4',
+      className,
+    ),
+  )
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (loading || disabled)
+      return
+
+    const data: LoginFormData = {
+      username,
+      password,
+      rememberMe,
+    }
+
+    await onsubmit?.(data)
+  }
+
+  function handleForgotPassword() {
+    onforgotpassword?.()
+  }
+</script>
+
+<form class={formClass} onsubmit={handleSubmit}>
+  <!-- 标题 -->
+  {#if showTitle}
+    <h2 class='text-xl font-semibold text-center mb-5'>{uiM('login_title')}</h2>
+  {/if}
+
+  <!-- 自定义头部 -->
+  {#if header}
+    <div class='login-form-header'>
+      {@render header()}
+    </div>
+  {/if}
+
+  <!-- 用户名 -->
+  <div class='space-y-1.5'>
+    <label class='text-sm font-medium text-base-content/70' for='login-username'>
+      {uiM('login_username')}
+    </label>
+    <Input
+      id='login-username'
+      name='username'
+      type='text'
+      placeholder={uiM('login_username_placeholder')}
+      bind:value={username}
+      {disabled}
+      required
+      error={errors.username}
+    />
+  </div>
+
+  <!-- 密码 -->
+  <div class='space-y-1.5'>
+    <label class='text-sm font-medium text-base-content/70' for='login-password'>
+      {uiM('login_password')}
+    </label>
+    <PasswordInput
+      bind:value={password}
+      placeholder={uiM('login_password_placeholder')}
+      {disabled}
+      required
+      error={errors.password}
+      showStrength={false}
+    />
+  </div>
+
+  <!-- 记住我 & 忘记密码 -->
+  {#if showRememberMe || showForgotPassword}
+    <div class='flex items-center justify-between'>
+      {#if showRememberMe}
+        <Checkbox
+          bind:checked={rememberMe}
+          label={uiM('login_remember_me')}
+          {disabled}
+          size='sm'
+        />
+      {:else}
+        <div></div>
+      {/if}
+
+      {#if showForgotPassword}
+        {#if onforgotpassword}
+          <BareButton
+            type='button'
+            class='link link-primary text-sm'
+            onclick={handleForgotPassword}
+          >
+            {uiM('login_forgot_password')}
+          </BareButton>
+        {:else}
+          <a href={forgotPasswordUrl} class='link link-primary text-sm'>
+            {uiM('login_forgot_password')}
+          </a>
+        {/if}
+      {/if}
+    </div>
+  {/if}
+
+  <!-- 通用错误 -->
+  {#if errors.general}
+    <Alert variant='error'>
+      {errors.general}
+    </Alert>
+  {/if}
+
+  <!-- 提交按钮 -->
+  <Button
+    type='submit'
+    variant='primary'
+    {loading}
+    disabled={loading || disabled}
+    class='w-full'
+  >
+    {submitText || uiM('login_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='login-form-footer'>
+      {@render footer()}
+    </div>
+  {:else if showRegisterLink}
+    <div class='text-center mt-4 text-sm text-base-content/60'>
+      <span>{uiM('login_no_account')}</span>
+      <a href={registerUrl} class='link link-primary ml-1'>{uiM('login_register_now')}</a>
+    </div>
+  {/if}
+</form>

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

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

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

@@ -0,0 +1,208 @@
+<!--
+  @component PasswordInput
+  密码输入框组件，支持显示/隐藏切换和密码强度指示。
+  内置多语言支持，自动跟随全局 locale。
+-->
+<script lang='ts'>
+  import type { Size } from '../../../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+  import BareInput from '../../primitives/BareInput.svelte'
+  import Progress from '../../primitives/Progress.svelte'
+
+  const PASSWORD_LOWERCASE_REGEX = /[a-z]/
+  const PASSWORD_UPPERCASE_REGEX = /[A-Z]/
+  const PASSWORD_DIGIT_REGEX = /\d/
+  const PASSWORD_SPECIAL_CHAR_REGEX = /[^a-z0-9]/i
+
+  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
+  }
+
+  let {
+    id,
+    value = $bindable(''),
+    placeholder = '',
+    size = 'md',
+    disabled = false,
+    readonly = false,
+    required = false,
+    error = '',
+    showToggle = true,
+    showStrength = false,
+    minLength = 8,
+    class: className = '',
+    inputRef = $bindable<HTMLInputElement | undefined>(),
+    oninput,
+    onchange,
+    oninvalid,
+  }: Props = $props()
+
+  let showPassword = $state(false)
+
+  // 容器高度（与 Input 组件一致）
+  const containerHeight = $derived(
+    size === 'xs'
+      ? 'h-8'
+      : size === 'sm'
+      ? 'h-9'
+      : size === 'lg'
+      ? 'h-12'
+      : size === 'xl'
+      ? 'h-14'
+      : 'h-10',
+  )
+
+  // 图标大小
+  const iconSize = $derived(
+    size === 'xs'
+      ? 'size-3.5'
+      : size === 'sm'
+      ? 'size-3.5'
+      : size === 'lg'
+      ? 'size-5'
+      : 'size-4',
+  )
+
+  // 计算密码强度
+  const strength = $derived.by(() => {
+    if (!value)
+      return { score: 0, label: '', color: '' }
+
+    let score = 0
+
+    // 长度检查
+    if (value.length >= minLength)
+      score += 1
+    if (value.length >= 12)
+      score += 1
+
+    // 复杂度检查
+    if (PASSWORD_LOWERCASE_REGEX.test(value))
+      score += 1
+    if (PASSWORD_UPPERCASE_REGEX.test(value))
+      score += 1
+    if (PASSWORD_DIGIT_REGEX.test(value))
+      score += 1
+    if (PASSWORD_SPECIAL_CHAR_REGEX.test(value))
+      score += 1
+
+    // 返回强度等级
+    if (score <= 2)
+      return { score: 1, label: uiM('password_strength_weak'), color: 'bg-error' }
+    if (score <= 4)
+      return { score: 2, label: uiM('password_strength_fair'), color: 'bg-warning' }
+    if (score <= 5)
+      return { score: 3, label: uiM('password_strength_good'), color: 'bg-success' }
+    return { score: 4, label: uiM('password_strength_strong'), color: 'bg-primary' }
+  })
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    value = e.currentTarget.value
+    oninput?.(e)
+  }
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    onchange?.(e)
+  }
+
+  function togglePassword() {
+    showPassword = !showPassword
+  }
+</script>
+
+<div class='fieldset w-full'>
+  <!-- 输入框容器 -->
+  <div class={cn(
+    'flex items-center w-full rounded-lg border bg-base-100',
+    containerHeight,
+    error
+      ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+      : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+    'transition-[border-color,box-shadow] duration-150',
+    disabled && 'opacity-50 cursor-not-allowed',
+    className,
+  )}>
+    <BareInput
+      type={showPassword ? 'text' : 'password'}
+      {id}
+      class='flex-1 h-full px-3 bg-transparent border-none outline-none text-sm placeholder:text-base-content/35'
+      bind:value
+      bind:inputRef={inputRef}
+      {placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      oninput={handleInput}
+      onchange={handleChange}
+      oninvalid={oninvalid}
+    />
+
+    {#if showToggle}
+      <!-- 切换按钮 -->
+      <BareButton
+        type='button'
+        class='flex items-center justify-center w-9 h-full text-base-content/35 hover:text-base-content/60 transition-colors'
+        onclick={togglePassword}
+        tabindex={-1}
+        {disabled}
+        ariaLabel={showPassword ? uiM('password_hide') : uiM('password_show')}
+      >
+        <span class={cn(
+          showPassword ? 'icon-[tabler--eye-off]' : 'icon-[tabler--eye]',
+          iconSize,
+        )}></span>
+      </BareButton>
+    {/if}
+  </div>
+
+  {#if showStrength && value}
+    <div class='mt-2'>
+      <Progress
+        value={strength.score}
+        max={4}
+        size='xs'
+        variant={strength.score <= 1 ? 'error' : strength.score <= 2 ? 'warning' : strength.score <= 3 ? 'success' : 'primary'}
+      />
+      <span class='text-xs text-base-content/40 mt-1 block'>
+        {uiM('password_strength_label')} {strength.label}
+      </span>
+    </div>
+  {/if}
+
+  {#if error}
+    <p class='mt-1.5 text-xs text-error/80 leading-tight'>{error}</p>
+  {/if}
+</div>