@h-ai/ui 0.1.0-alpha.59 → 0.1.0-alpha.60

package/README.en.md

@@ -262,10 +262,11 @@ For `BareInput` with `type="file"`, read `event.currentTarget.files` in `onchang
 | `ThemeSelector`    | Full theme selector                            | No props required                                        |
 | `ThemeToggle`      | Light/dark toggle                              | No props required                                        |
 
-#### IAM authentication (9)
+#### IAM authentication (10)
 
 | Component            | Description                                      | Key props                                                                                              |
 | -------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `AuthPanel`          | Configuration driven authentication | `config`, `actions`, `loginHeader/loginFields/loginFooter`, `registerHeader/registerFields/registerFooter` |
 | `AuthShell`          | Auth page layout (centered card / split columns) | `variant`, `title`, `subtitle`, `brandTitle`, `brandText`, `illustration`, `description`, `highlights` |
 | `LoginForm`          | Login form                                       | `loading`, `errors`, `showRememberMe`, `onsubmit`                                                      |
 | `RegisterForm`       | Registration form                                | `loading`, `errors`, `fields`, `onsubmit`                                                              |
@@ -724,6 +725,35 @@ import {
 } from '@h-ai/ui'
 ```
 
+## Configuration driven authentication
+
+Agreement content can be configured as `agreements.userAgreementMarkdown` and `privacyPolicyMarkdown` using YAML `|`. The modal safely renders configured Markdown and prefers it over the URL of the same agreement. URL-only content stays in a sandboxed iframe.
+
+```yaml
+agreements:
+  showOnRegister: true
+  showOnLogin: false
+  userAgreementMarkdown: |
+    # 用户协议
+
+    **账户使用条款**
+
+    - 请妥善保管账户凭据。
+  privacyPolicyMarkdown: |
+    # 隐私政策
+
+    注册资料用于账户管理，会话信息用于身份认证。
+  # 可选 URL；同主题同时配置 Markdown 和 URL 时，弹窗优先显示 Markdown。
+  # userAgreementUrl: https://example.com/terms
+  # privacyPolicyUrl: https://example.com/privacy
+```
+
+
+
+AuthPanel accepts public IAM config and actions for password/LDAP/email/SMS login, registration and recovery. config.ui supplies layout, branding and images. LoginForm supports methods, onsendotp, otpLength and resendInterval; password forms accept passwordPolicy. Network and token storage remain in actions. Known IAM authentication errors use the current UI language; custom application messages are preserved.
+
+[完整 IAM 配置 / IAM configuration](../iam/README.en.md)
+
 ## Other exports
 
 ```ts
@@ -740,3 +770,17 @@ import { cn, generateId, getSizeClass, getVariantClass } from '@h-ai/ui'
 // Toast 单例
 import { toast } from '@h-ai/ui'
 ```
+
+Agreements open in a Modal and preserve form input. Pages must allow iframe embedding; scripts are disabled and a new-window fallback is provided. LoginForm/RegisterForm expose `header/extraFields/footer`. AuthPanel forwards `loginHeader/loginFields/loginFooter` and `registerHeader/registerFields/registerFooter` while preserving navigation. Bind additional fields to application state and handle them in custom actions; they are not automatically sent to IAM. Use `type="button"` for extension buttons.
+
+```svelte
+<!-- config 来自 IAM 公开配置，actions 来自 Kit/API client；m 为应用翻译。 -->
+<AuthPanel {config} {actions}>
+  {#snippet loginHeader()}
+    <p>{m.loginHelp()}</p>
+  {/snippet}
+  {#snippet registerFields()}
+    <label><input type='checkbox' bind:checked={subscribe} />{m.subscribe()}</label>
+  {/snippet}
+</AuthPanel>
+```

package/README.ja.md

@@ -262,10 +262,11 @@ components/
 | `ThemeSelector`    | テーマ選択パネル                            | プロパティ不要                                           |
 | `ThemeToggle`      | ライト・ダーク切り替え                      | プロパティ不要                                           |
 
-#### IAM：認証（9）
+#### IAM：認証（10）
 
 | コンポーネント       | 説明                                    | 主なプロパティ                                                                                         |
 | -------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `AuthPanel`          | 設定による認証画面 | `config`, `actions`, `loginHeader/loginFields/loginFooter`, `registerHeader/registerFields/registerFooter` |
 | `AuthShell`          | 認証ページ配置（中央カード / 左右分割） | `variant`, `title`, `subtitle`, `brandTitle`, `brandText`, `illustration`, `description`, `highlights` |
 | `LoginForm`          | ログインフォーム                        | `loading`, `errors`, `showRememberMe`, `onsubmit`                                                      |
 | `RegisterForm`       | 登録フォーム                            | `loading`, `errors`, `fields`, `onsubmit`                                                              |
@@ -724,6 +725,35 @@ import {
 } from '@h-ai/ui'
 ```
 
+## 設定による認証画面
+
+YAML の `|` で `agreements.userAgreementMarkdown` と `privacyPolicyMarkdown` を設定できます。Modal は本文を安全に描画し、同じ規約の URL より本文を優先します。URL のみの場合は隔離 iframe を使用します。
+
+```yaml
+agreements:
+  showOnRegister: true
+  showOnLogin: false
+  userAgreementMarkdown: |
+    # 用户协议
+
+    **账户使用条款**
+
+    - 请妥善保管账户凭据。
+  privacyPolicyMarkdown: |
+    # 隐私政策
+
+    注册资料用于账户管理，会话信息用于身份认证。
+  # 可选 URL；同主题同时配置 Markdown 和 URL 时，弹窗优先显示 Markdown。
+  # userAgreementUrl: https://example.com/terms
+  # privacyPolicyUrl: https://example.com/privacy
+```
+
+
+
+AuthPanel に IAM 公開設定と actions を渡すと、複数方式のログイン、登録、復旧、規約を利用できます。config.ui でレイアウトとブランド画像を指定し、パスワードフォームは passwordPolicy を受け取ります。通信と Token 保存は actions の責務です。既知の IAM 認証エラーは現在の UI 言語で表示し、アプリ独自のメッセージはそのまま保持します。
+
+[完整 IAM 配置 / IAM configuration](../iam/README.ja.md)
+
 ## その他のエクスポート
 
 ```ts
@@ -740,3 +770,17 @@ import { cn, generateId, getSizeClass, getVariantClass } from '@h-ai/ui'
 // Toast 单例
 import { toast } from '@h-ai/ui'
 ```
+
+規約は入力を保持したまま Modal で表示します。ページは iframe 埋め込みを許可し、スクリプトを無効化して別ウィンドウ表示も用意します。LoginForm/RegisterForm は `header/extraFields/footer`、AuthPanel は `loginHeader/loginFields/loginFooter` と `registerHeader/registerFields/registerFooter` を提供し、既定ナビゲーションを保持します。追加フィールドはアプリ状態と独自 actions で処理し、IAM に自動送信しません。拡張ボタンは `type="button"` を指定します。
+
+```svelte
+<!-- config 来自 IAM 公开配置，actions 来自 Kit/API client；m 为应用翻译。 -->
+<AuthPanel {config} {actions}>
+  {#snippet loginHeader()}
+    <p>{m.loginHelp()}</p>
+  {/snippet}
+  {#snippet registerFields()}
+    <label><input type='checkbox' bind:checked={subscribe} />{m.subscribe()}</label>
+  {/snippet}
+</AuthPanel>
+```

package/README.md

@@ -262,10 +262,11 @@ components/
 | `ThemeSelector`  | 完整主题选择面板 | 无需 Props         |
 | `ThemeToggle`    | 明/暗主题切换    | 无需 Props         |
 
-#### IAM 身份认证（9 个）
+#### IAM 身份认证（10 个）
 
 | 组件                 | 描述       | 主要属性                                              |
 | -------------------- | ---------- | ----------------------------------------------------- |
+| `AuthPanel`          | 配置驱动认证页 | `config`, `actions`, `loginHeader/loginFields/loginFooter`, `registerHeader/registerFields/registerFooter` |
 | `AuthShell`          | 认证页布局（居中卡片 / 左右分栏） | `variant`, `title`, `subtitle`, `brandTitle`, `brandText`, `illustration`, `description`, `highlights` |
 | `LoginForm`          | 登录表单   | `loading`, `errors`, `showRememberMe`, `onsubmit`     |
 | `RegisterForm`       | 注册表单   | `loading`, `errors`, `fields`, `onsubmit`             |
@@ -683,6 +684,35 @@ transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstr
 - 应用层只需处理**页面级文本**，组件内部文本由 @h-ai/ui 统一管理
 - 如需覆盖特定文本，通过 `submitText`、`labels` 等 props 传入
 
+## 配置驱动认证页面
+
+协议支持 `agreements.userAgreementMarkdown` 与 `privacyPolicyMarkdown` 直接从配置加载；YAML 的 `|` 保留 Markdown 段落和换行。弹窗复用安全 MarkdownRenderer，关闭原始 HTML、脚本和代码复制工具。同主题同时提供正文与 URL 时优先正文，URL 可作为额外查看入口；只有 URL 时使用隔离 iframe。
+
+```yaml
+agreements:
+  showOnRegister: true
+  showOnLogin: false
+  userAgreementMarkdown: |
+    # 用户协议
+
+    **账户使用条款**
+
+    - 请妥善保管账户凭据。
+  privacyPolicyMarkdown: |
+    # 隐私政策
+
+    注册资料用于账户管理，会话信息用于身份认证。
+  # 可选 URL；同主题同时配置 Markdown 和 URL 时，弹窗优先显示 Markdown。
+  # userAgreementUrl: https://example.com/terms
+  # privacyPolicyUrl: https://example.com/privacy
+```
+
+
+
+AuthPanel 直接接收 IAM 白名单配置和 actions，内置登录（密码/LDAP/邮件/短信）、注册、找回、重置及协议展示。使用 `config.ui` 配置卡片/分栏、标题、品牌、Logo 和配图。`LoginForm` 提供 methods、onsendotp、otpLength、resendInterval；密码表单接受 passwordPolicy。组件只渲染与交互，网络和 Token 存储通过 actions 注入。认证场景按公开 IAM 错误码显示当前 UI 语言的提示，应用自定义错误保留原文。
+
+[完整 IAM 配置 / IAM configuration](../iam/README.md)
+
 ### createLocaleStore
 
 用于客户端 locale 状态管理，自动同步到 `@h-ai/core` 全局 locale 管理器：
@@ -723,6 +753,24 @@ import {
 } from '@h-ai/ui'
 ```
 
+
+协议在 Modal 内显示并保留表单输入；使用 URL 时，协议页面须允许 iframe 嵌入，组件禁用其脚本，另提供新窗口查看入口。登录/注册表单使用 `header/extraFields/footer` snippet，AuthPanel 透传 `loginHeader/loginFields/loginFooter` 和 `registerHeader/registerFields/registerFooter`，底部保留内置导航。自定义字段由应用绑定状态和提交，不会隐式写入 IAM 用户模型。
+
+```svelte
+<!-- config 来自 IAM 公开配置，actions 来自 Kit/API client；m 为应用翻译。 -->
+<AuthPanel {config} {actions}>
+  {#snippet loginHeader()}
+    <p>{m.loginHelp()}</p>
+  {/snippet}
+  {#snippet registerFields()}
+    <label><input type='checkbox' bind:checked={subscribe} />{m.subscribe()}</label>
+  {/snippet}
+</AuthPanel>
+```
+
+上例的 subscribe 为应用自身的 $state，应用包装 register 动作校验/提交扩展业务数据；如需单独组合表单，使用 `<RegisterForm> {#snippet extraFields()}...{/snippet} </RegisterForm>`。扩展里的按钮须为 `type="button"`，避免误提交。
+
+
 ## 其他导出
 
 ```ts

package/auto-import.d.ts

@@ -88,6 +88,7 @@ declare global {
 
   // scenes - iam
   const AuthShell: typeof import('@h-ai/ui')['AuthShell']
+  const AuthPanel: typeof import('@h-ai/ui')['AuthPanel']
   const ChangePasswordForm: typeof import('@h-ai/ui')['ChangePasswordForm']
   const ForgotPasswordForm: typeof import('@h-ai/ui')['ForgotPasswordForm']
   const LoginForm: typeof import('@h-ai/ui')['LoginForm']

package/auto-import.js

@@ -79,6 +79,7 @@ const UI_COMPONENTS = new Set([
   'ThemeToggle',
   // scenes - iam
   'AuthShell',
+  'AuthPanel',
   'ChangePasswordForm',
   'ForgotPasswordForm',
   'LoginForm',

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

@@ -0,0 +1,48 @@
+<!-- 登录和注册共用协议提示；弹窗不会清空表单或触发提交。 -->
+<script lang='ts'>
+  import type { AgreementDisplay } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import Modal from '../../compounds/Modal.svelte'
+  import BareButton from '../../primitives/BareButton.svelte'
+  import MarkdownRenderer from '../ai/MarkdownRenderer.svelte'
+
+  const { agreements }: { agreements?: AgreementDisplay } = $props()
+  let selected = $state<'user' | 'privacy' | null>(null)
+  let open = $state(false)
+  const url = $derived(selected === 'user' ? agreements?.userAgreementUrl : agreements?.privacyPolicyUrl)
+  const markdown = $derived(selected === 'user' ? agreements?.userAgreementMarkdown : agreements?.privacyPolicyMarkdown)
+  const hasUserAgreement = $derived(Boolean(agreements?.userAgreementMarkdown || agreements?.userAgreementUrl))
+  const hasPrivacyPolicy = $derived(Boolean(agreements?.privacyPolicyMarkdown || agreements?.privacyPolicyUrl))
+  const title = $derived(selected === 'user' ? uiM('agreement_user_agreement') : uiM('agreement_privacy_policy'))
+
+  function show(kind: 'user' | 'privacy') {
+    selected = kind
+    open = true
+  }
+</script>
+
+{#snippet openPage()}
+  <a href={url} target='_blank' rel='noopener noreferrer' class='link link-primary text-sm'>{uiM('agreement_open_page')}</a>
+{/snippet}
+
+{#if hasUserAgreement || hasPrivacyPolicy}
+  <p class='text-xs text-base-content/50 text-center'>
+    {uiM('agreement_prefix')}
+    {#if hasUserAgreement}
+      <BareButton type='button' class='link link-primary' onclick={() => show('user')}>{uiM('agreement_user_agreement')}</BareButton>
+    {/if}
+    {#if hasUserAgreement && hasPrivacyPolicy}{uiM('agreement_and')}{/if}
+    {#if hasPrivacyPolicy}
+      <BareButton type='button' class='link link-primary' onclick={() => show('privacy')}>{uiM('agreement_privacy_policy')}</BareButton>
+    {/if}
+  </p>
+  <Modal bind:open {title} size='lg' height='min(80dvh, 48rem)' bodyClass='p-0' footer={url ? openPage : undefined}>
+    {#if open && markdown}
+      <!-- 正文优先；复用安全 Markdown 渲染，不开启原始 HTML 或协议页不需要的代码工具。 -->
+      <MarkdownRenderer content={markdown} class='p-6' enableHighlight={false} showCopyButton={false} breaks={false} />
+    {:else if open && url}
+      <!-- 配置只允许 HTTP(S)；协议隔离显示，不允许执行脚本或顶层导航。 -->
+      <iframe src={url} {title} sandbox='' referrerpolicy='no-referrer' class='h-full min-h-80 w-full border-0 bg-white'></iframe>
+    {/if}
+  </Modal>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { AgreementDisplay } from '../types.js';
+type $$ComponentProps = {
+    agreements?: AgreementDisplay;
+};
+declare const AgreementNotice: import("svelte").Component<$$ComponentProps, {}, "">;
+type AgreementNotice = ReturnType<typeof AgreementNotice>;
+export default AgreementNotice;

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

@@ -0,0 +1,116 @@
+<!-- 配置驱动认证场景；网络、通知及 Token 存储由 actions 注入。 -->
+<script lang='ts'>
+  import type { HaiResult } from '@h-ai/core'
+  import type { AuthLoginMethod, AuthPanelMode, AuthPanelProps } from '../types.js'
+  import { untrack } from 'svelte'
+  import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
+  import Alert from '../../compounds/Alert.svelte'
+  import BareButton from '../../primitives/BareButton.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Spinner from '../../primitives/Spinner.svelte'
+  import { authErrorMessage } from './auth-error-message.js'
+  import AuthShell from './AuthShell.svelte'
+  import ForgotPasswordForm from './ForgotPasswordForm.svelte'
+  import LoginForm from './LoginForm.svelte'
+  import RegisterForm from './RegisterForm.svelte'
+  import ResetPasswordForm from './ResetPasswordForm.svelte'
+
+  const { config, actions, initialMode = 'login', resetToken = '', loginUrl, registerUrl, forgotPasswordUrl, onauthenticated, error = '', onretry, loginHeader, loginFields, loginFooter, registerHeader, registerFields, registerFooter, ...restProps }: AuthPanelProps = $props()
+  const dataAttributes = $derived(getDataAttributes(restProps))
+  let mode = $state<AuthPanelMode>(untrack(() => initialMode))
+  let loading = $state(false)
+  let errors = $state<Record<string, string>>({})
+  let notice = $state('')
+  const methods = $derived(config ? (['password', 'ldap', 'email', 'sms'] as AuthLoginMethod[]).filter(method => config.login[method]) : [])
+  const title = $derived(mode === 'register' ? uiM('register_title') : mode === 'forgot' ? uiM('forgot_password_title') : mode === 'reset' ? uiM('reset_password_title') : uiM('login_title'))
+  const available = $derived(config && (mode === 'login' || (mode === 'register' ? config.register.enabled : config.passwordReset.enabled)))
+
+  function switchMode(next: AuthPanelMode) {
+    mode = next
+    errors = {}
+    notice = ''
+  }
+  async function run(operation: () => Promise<HaiResult<unknown>>, authenticate = false, successNotice = '') {
+    if (loading)
+      return
+    errors = {}
+    notice = ''
+    loading = true
+    try {
+      const result = await operation()
+      if (!result.success) {
+        if (mode === 'register' && result.error.code === 'hai:iam:004') {
+          // 默认禁用的新账户已完成注册，提示等待启用，避免用户重复注册。
+          switchMode('login')
+          notice = uiM('auth_registration_pending')
+        }
+        else {
+          errors = { general: authErrorMessage(result.error) }
+        }
+      }
+      else if (authenticate) {
+        await onauthenticated?.()
+      }
+      else {
+        notice = successNotice
+      }
+    }
+    catch { errors = { general: uiM('auth_network_error') } }
+    finally { loading = false }
+  }
+</script>
+
+{#snippet link(next: AuthPanelMode, label: string, href?: string)}
+  {#if href}<a {href} class='link link-primary text-sm' aria-disabled={loading} onclick={(event) => {
+    if (loading)
+      event.preventDefault()
+    // 跨路径或哈希路由由路由创建新表单；提前切换会让输入被随后导航清空。
+    // 当前路由只更新场景，支持登录页内的找回密码和返回登录。
+    else if (event.currentTarget.origin === window.location.origin && event.currentTarget.pathname === window.location.pathname && event.currentTarget.hash === window.location.hash)
+      switchMode(next)
+  }}>{label}</a>
+  {:else}<BareButton type='button' class='link link-primary text-sm' disabled={loading} onclick={() => switchMode(next)}>{label}</BareButton>{/if}
+{/snippet}
+
+<AuthShell {...dataAttributes} {...config?.ui} title={config?.ui.title || title} brandTitle={config?.ui.brandTitle || uiM('auth_brand')}>
+  {#if error}
+    <Alert variant='error'>{error}</Alert>
+    {#if onretry}<Button class='mt-4 w-full' onclick={onretry}>{uiM('crud_retry')}</Button>{/if}
+  {:else if !config}
+    <div class='flex justify-center' role='status'><Spinner /></div>
+  {:else if !available}
+    <Alert variant='warning'>{uiM('auth_unavailable')}</Alert>
+    <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
+  {:else}
+    {#if notice}<Alert variant='success' class='mb-4'>{notice}</Alert>{/if}
+    {#if mode === 'login'}
+      <LoginForm {methods} {loading} {errors} header={loginHeader} extraFields={loginFields} showRememberMe={false} showForgotPassword={config.passwordReset.enabled} {forgotPasswordUrl}
+                 onforgotpassword={forgotPasswordUrl ? undefined : () => switchMode('forgot')}
+                 otpLength={config.otp.length} resendInterval={config.otp.resendInterval} onsendotp={actions.sendOtp}
+                 agreements={config.agreements.showOnLogin ? config.agreements : undefined}
+                 onsubmit={data => run(() => actions.login({ identifier: data.username, password: data.password, method: data.method, code: data.code }), true)}>
+        {#snippet footer()}
+          {#if loginFooter}{@render loginFooter()}{/if}
+          {#if config?.register.enabled}<div class='text-center text-sm'>{uiM('login_no_account')} {@render link('register', uiM('login_register_now'), registerUrl)}</div>{/if}
+        {/snippet}
+      </LoginForm>
+    {:else if mode === 'register'}
+      <RegisterForm {loading} {errors} header={registerHeader} extraFields={registerFields} fields={config.passwordReset.mode === 'phone' ? ['username', 'phone', 'password'] : ['username', 'email', 'password']} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
+                    agreements={config.agreements.showOnRegister ? config.agreements : undefined} onsubmit={data => run(() => actions.register({ username: data.username || '', password: data.password, email: data.email, phone: data.phone, displayName: data.nickname }), true)}>
+        {#snippet footer()}
+          {#if registerFooter}{@render registerFooter()}{/if}
+          <div class='text-center'>{@render link('login', uiM('register_login_now'), loginUrl)}</div>
+        {/snippet}
+      </RegisterForm>
+    {:else if mode === 'forgot'}
+      <ForgotPasswordForm {loading} {errors} mode={config.passwordReset.mode ?? 'email'} onsubmit={data => run(() => actions.requestPasswordReset(data.email || data.phone || ''), false, uiM('auth_reset_sent'))}>
+        {#snippet footer()}<div class='flex justify-between gap-3'>{@render link('login', uiM('login_submit'), loginUrl)}{@render link('reset', uiM('auth_have_token'))}</div>{/snippet}
+      </ForgotPasswordForm>
+    {:else}
+      <ResetPasswordForm {loading} {errors} showCode={!resetToken} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
+                         onsubmit={data => run(() => actions.confirmPasswordReset(resetToken || data.code || '', data.newPassword), false, uiM('auth_reset_done'))} />
+      <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
+    {/if}
+  {/if}
+</AuthShell>

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

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

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

@@ -23,6 +23,8 @@
     subtitle = '',
     brandTitle = '',
     brandText = '',
+    logoUrl,
+    illustrationUrl,
     logo,
     illustration,
     description,
@@ -43,6 +45,9 @@
     brandTitle?: string
     /** split 模式品牌区描述文案 */
     brandText?: string
+    /** 配置形式的 Logo 与配图；插槽优先。 */
+    logoUrl?: string
+    illustrationUrl?: string
     /** 顶部 Logo 插槽 */
     logo?: Snippet
     /** split 模式品牌区插图（如大图/海报） */
@@ -68,8 +73,8 @@
 
 {#snippet formPanel()}
   <div {...dataAttributes} class='flex w-full max-w-sm flex-col'>
-    {#if logo}
-      <div class={logoWrapClass}>{@render logo()}</div>
+    {#if logo || logoUrl}
+      <div class={logoWrapClass}>{#if logo}{@render logo()}{:else}<img src={logoUrl} alt={brandTitle || title} class='h-12 max-w-full object-contain' />{/if}</div>
     {/if}
     {#if title}
       <h1 class='text-center text-2xl font-semibold tracking-tight text-base-content'>{title}</h1>
@@ -98,11 +103,15 @@
           <div class='space-y-6'>
             {#if logo}
               <div>{@render logo()}</div>
+            {:else if logoUrl}
+              <img src={logoUrl} alt={brandTitle || title} class='h-12 max-w-full self-start object-contain' />
             {/if}
             {#if illustration}
               <div class='overflow-hidden rounded-2xl border border-primary-content/15 bg-primary-content/5 p-2'>
                 {@render illustration()}
               </div>
+            {:else if illustrationUrl}
+              <img src={illustrationUrl} alt='' class='max-h-96 w-full rounded-2xl object-contain' />
             {/if}
           </div>
 

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

@@ -11,6 +11,9 @@ type $$ComponentProps = {
     brandTitle?: string;
     /** split 模式品牌区描述文案 */
     brandText?: string;
+    /** 配置形式的 Logo 与配图；插槽优先。 */
+    logoUrl?: string;
+    illustrationUrl?: string;
     /** 顶部 Logo 插槽 */
     logo?: Snippet;
     /** split 模式品牌区插图（如大图/海报） */

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

@@ -9,7 +9,7 @@
   import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
   import Button from '../../primitives/Button.svelte'
-  import { arePasswordsEqual } from './password-utils.js'
+  import { arePasswordsEqual, passwordPolicyError, passwordPolicyHint } from './password-utils.js'
   import PasswordInput from './PasswordInput.svelte'
 
   const {
@@ -18,6 +18,7 @@
     requireOldPassword = true,
     showPasswordStrength = true,
     minPasswordLength = 8,
+    passwordPolicy,
     submitText,
     class: className = '',
     errors = {},
@@ -30,6 +31,8 @@
   let newPassword = $state('')
   let confirmPassword = $state('')
 
+  const policyError = $derived(passwordPolicy && newPassword ? passwordPolicyError(newPassword, passwordPolicy) : '')
+
   const formClass = $derived(
     cn(
       'change-password-form space-y-5',
@@ -56,7 +59,7 @@
    */
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
-    if (loading || disabled || !canSubmit)
+    if (policyError || loading || disabled || !canSubmit)
       return
 
     const data: ChangePasswordFormData = {
@@ -125,11 +128,14 @@
     </Alert>
   {/if}
 
+  {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
+  {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+
   <Button
     type='submit'
     variant='primary'
     class='w-full sm:w-auto sm:min-w-40'
-    disabled={loading || disabled || !canSubmit}
+    disabled={loading || disabled || !canSubmit || Boolean(policyError)}
     {loading}
   >
     {submitText || uiM('change_password_submit')}