@h-ai/cli 0.1.0-alpha.63 → 0.1.0-alpha.64

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/cli",
   "type": "module",
-  "version": "0.1.0-alpha.63",
+  "version": "0.1.0-alpha.64",
   "description": "Hai Framework CLI for project scaffolding and code generation.",
   "license": "Apache-2.0",
   "keywords": [
@@ -30,7 +30,7 @@
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "dependencies": {
-    "@h-ai/core": "0.1.0-alpha.63",
+    "@h-ai/core": "0.1.0-alpha.64",
     "cac": "^7.0.1",
     "chalk": "^6.0.1",
     "fast-wrap-ansi": "^0.2.2",
@@ -41,11 +41,11 @@
     "yaml": "^2.9.1"
   },
   "devDependencies": {
-    "@h-ai/cache": "0.1.0-alpha.63",
-    "@h-ai/deploy": "0.1.0-alpha.63",
-    "@h-ai/reach": "0.1.0-alpha.63",
-    "@h-ai/reldb": "0.1.0-alpha.63",
-    "@h-ai/storage": "0.1.0-alpha.63",
+    "@h-ai/cache": "0.1.0-alpha.64",
+    "@h-ai/deploy": "0.1.0-alpha.64",
+    "@h-ai/reach": "0.1.0-alpha.64",
+    "@h-ai/reldb": "0.1.0-alpha.64",
+    "@h-ai/storage": "0.1.0-alpha.64",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^26.6.5",
     "@types/prompts": "^2.4.9",

package/templates/apps/fullstack/e2e/fullstack.spec.ts.hbs

@@ -61,6 +61,76 @@ test('service rejects plaintext business requests', async ({ request }) => {
 })
 
 {{#if fullstack.e2eFrontend}}
+test('branded authentication, profile layout and blur validation work across screen sizes', async ({ page }, testInfo) => {
+  test.setTimeout(60_000)
+  await page.setViewportSize({ width: 1440, height: 960 })
+  await page.goto('/')
+  await expect(page.getByRole('heading', { name: configuredName, exact: true })).toBeVisible()
+  await capture(page, '{{projectName}}-login-desktop.png', testInfo.outputPath('login-desktop.png'))
+  await page.getByRole('button', { name: /立即注册|Register now/, exact: true }).click()
+  await expect(page.locator('.register-form')).toBeVisible()
+  await capture(page, '{{projectName}}-register-desktop.png', testInfo.outputPath('register-desktop.png'))
+  await page.setViewportSize({ width: 390, height: 844 })
+  await capture(page, '{{projectName}}-register-mobile.png', testInfo.outputPath('register-mobile.png'))
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
+  await page.reload()
+  await capture(page, '{{projectName}}-login-mobile.png', testInfo.outputPath('login-mobile.png'))
+  await page.setViewportSize({ width: 1440, height: 960 })
+  await login(page, 'admin', adminPassword)
+  await page.getByTestId('nav-settings').click()
+  const profile = page.getByTestId('profile-form')
+  await expect(profile).toBeVisible()
+  const email = profile.locator('input[name="email"]')
+  await email.fill('invalid-email')
+  await email.press('Tab')
+  await expect(email).toHaveAttribute('aria-invalid', 'true')
+  await capture(page, '{{projectName}}-profile-blur-error.png', testInfo.outputPath('profile-blur-error.png'))
+  await email.fill('')
+  await expect(email).not.toHaveAttribute('aria-invalid')
+  await capture(page, '{{projectName}}-settings-desktop.png', testInfo.outputPath('settings-desktop.png'))
+  for (const width of [768, 390]) {
+    await page.setViewportSize({ width, height: 960 })
+    const fields = await profile.locator('.hai-form-field').evaluateAll(elements => elements.map((field) => {
+      const label = field.querySelector('label')!.getBoundingClientRect()
+      const control = field.querySelector('input')!.getBoundingClientRect()
+      return { labelBottom: label.bottom, controlTop: control.top, controlRight: control.right }
+    }))
+    for (const field of fields) {
+      expect(field.labelBottom).toBeLessThanOrEqual(field.controlTop)
+      expect(field.controlRight).toBeLessThanOrEqual(width)
+    }
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
+    await capture(page, `{{projectName}}-settings-${width}.png`, testInfo.outputPath(`settings-${width}.png`))
+  }
+  await page.getByTestId('password-form').scrollIntoViewIfNeeded()
+  await capture(page, '{{projectName}}-password-mobile.png', testInfo.outputPath('password-mobile.png'))
+  await page.setViewportSize({ width: 1440, height: 960 })
+  await page.getByTestId('nav-users').click()
+  await page.getByTestId('create-user').click()
+  const username = page.getByTestId('user-username').locator('input')
+  await username.focus()
+  await username.press('Tab')
+  await expect(username).toHaveAttribute('aria-invalid', 'true')
+  await username.fill('a')
+  await expect(username).toHaveAttribute('aria-invalid', 'true')
+  await page.getByTestId('user-password').locator('input').fill('short')
+  await page.getByTestId('user-password').locator('input').press('Tab')
+  await expect(page.getByTestId('user-password').locator('input')).toHaveAttribute('aria-invalid', 'true')
+  await capture(page, '{{projectName}}-create-blur-error.png', testInfo.outputPath('create-blur-error.png'))
+  await page.getByTestId('user-editor').getByRole('button', { name: /取消|Cancel/, exact: true }).click()
+  await page.getByTestId('create-user').click()
+  await expect(page.getByTestId('user-editor').locator('[aria-invalid="true"]')).toHaveCount(0)
+  await page.getByTestId('user-editor').getByRole('button', { name: /取消|Cancel/, exact: true }).click()
+  await userEditor(page, 'admin')
+  const editEmail = page.getByTestId('user-email').locator('input')
+  await editEmail.fill('invalid-email')
+  await editEmail.press('Tab')
+  await expect(editEmail).toHaveAttribute('aria-invalid', 'true')
+  await capture(page, '{{projectName}}-edit-blur-error.png', testInfo.outputPath('edit-blur-error.png'))
+  await editEmail.fill('admin@example.com')
+  await expect(editEmail).not.toHaveAttribute('aria-invalid')
+})
+
 test('first-use tour, help search and settings navigation work on desktop and mobile', async ({ page }, testInfo) => {
   await page.goto('/')
   await login(page, 'admin', adminPassword, true)

package/templates/apps/fullstack/packages/{{projectName}}-shared/README.md.hbs

@@ -43,6 +43,8 @@ Run root `pnpm typecheck`, `pnpm lint`, `pnpm build`, `pnpm test` and `pnpm test
 
 The service's `config/_iam.yml` controls login methods, registration, password reset, agreements and `ui` branding. Email and SMS use providers/templates in `_reach.yml` or custom callbacks. `AuthPanel` uses the public configuration and framework auth actions to manage tokens, resend countdowns and errors. All service nodes must share the same database and Redis; memory cache is for a single process.
 
+Authentication defaults to a split layout. Set `ui.variant`, `title`, `subtitle`, `brandTitle`, `brandText`, `logoUrl` and `illustrationUrl` to customize login and registration. Without a `brandTitle`, the displayed application name comes from `app.info` and follows `core` configuration.
+
 LDAP and Reach are optional. Install ldapts in the IAM service workspace only when using its default LDAP client, then enable login.ldap and set connection settings. Custom onOtpSendEmail/onOtpSendSms/onPasswordResetRequest callbacks work without Reach and must reject on delivery failure. Agreements open in a Modal. LoginForm/RegisterForm support header/extraFields/footer snippets; AuthPanel forwards loginHeader/loginFields/loginFooter and registerHeader/registerFields/registerFooter. See the generated hai-iam/hai-ui skills for configuration and examples.
 
 协议支持配置中的 userAgreementMarkdown/privacyPolicyMarkdown 正文及 URL；同主题优先 Markdown，由安全渲染器在弹窗显示。
@@ -51,4 +53,4 @@ See `.agents/skills/hai-iam/reference.md` in the generated application for the c
 
 ## Form layouts
 
-The user editor uses `FormLayout columns={2} labelPosition="left"`; profile and password forms reuse the same UI options. Narrow containers automatically stack fields and labels. Field validation errors follow the current UI language. The management store syncs locale through the lightweight `@h-ai/ui/i18n` entry, without loading components or tour CSS. Configure `colSpan` on FormField to override automatic spans for textareas, uploads and multiple choices.
+The user editor uses `FormLayout columns={2} labelPosition="left"`. Personal settings use a bounded page width, stacked labels and a single avatar editor. Narrow containers automatically stack fields and labels. UI controls and CRUD forms show client validation on blur, update errors while correcting input and validate untouched fields on submit. Field errors follow the current UI language. The management store syncs locale through the lightweight `@h-ai/ui/i18n` entry, without loading components or tour CSS. Configure `colSpan` on FormField to override automatic spans for textareas, uploads and multiple choices.

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/AdminWorkspace.svelte.hbs

@@ -21,6 +21,10 @@
   // 宿主平台在组件生命周期中固定，引导控制器只创建一次。
   const guide = untrack(() => createManagementGuide(store, platform))
   let resetToken = $state('')
+  const authConfig = $derived(store.authConfig && {
+    ...store.authConfig,
+    ui: { ...store.authConfig.ui, brandTitle: store.authConfig.ui.brandTitle || store.info?.name },
+  })
   async function authenticated() {
     await store.authenticated()
     if (resetToken) {
@@ -65,7 +69,7 @@
       {:else}
         <div data-testid='login-form'>
           {#if store.authConfig && store.error}<Alert variant='error' class='mx-auto max-w-lg'>{store.error}</Alert>{/if}
-          <AuthPanel config={store.authConfig} actions={managementAuthActions} {resetToken} initialMode={resetToken ? 'reset' : 'login'} error={store.authConfig ? '' : store.error} onretry={() => void store.initialize(apiOptions, onLocaleChange)} onauthenticated={authenticated} />
+          <AuthPanel config={authConfig} actions={managementAuthActions} {resetToken} initialMode={resetToken ? 'reset' : 'login'} error={store.authConfig ? '' : store.error} onretry={() => void store.initialize(apiOptions, onLocaleChange)} onauthenticated={authenticated} />
         </div>
         <p class='fixed bottom-3 left-0 right-0 text-center text-xs text-base-content/50'><span data-testid='app-name'>{store.info.name}</span> · <span data-testid='app-version'>v{store.info.version}</span> · <span data-testid='app-environment'>{store.info.env}</span></p>
       {/if}

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/ProfileSettings.svelte.hbs

@@ -1,7 +1,7 @@
 <script lang='ts'>
   import type { ManagementStore } from '../stores/management-store.svelte.js'
-  import { Card } from '@h-ai/ui/components/compounds/index'
-  import { Avatar, Select } from '@h-ai/ui/components/primitives/index'
+  import { Card, FormField, FormLayout } from '@h-ai/ui/components/compounds/index'
+  import { Badge, Select } from '@h-ai/ui/components/primitives/index'
   import { ChangePasswordForm, UserProfile } from '@h-ai/ui/components/scenes/iam/index'
   import { getThemeInfo } from '@h-ai/ui/theme'
   import * as m from '../paraglide/messages.js'
@@ -14,44 +14,33 @@
   const themeOptions = AVAILABLE_THEMES.map(theme => ({ value: theme, label: getThemeInfo(theme)?.name ?? theme }))
 </script>
 
-<section class='space-y-5' data-testid='settings-page'>
+<section class='mx-auto w-full max-w-4xl space-y-6' data-testid='settings-page'>
   <div>
     <h1 class='text-xl font-semibold tracking-tight'>{m.settings_title()}</h1>
     <p class='mt-1 text-sm text-base-content/50'>{m.settings_description()}</p>
   </div>
   {#if store.user}
-    <div class='grid gap-5 xl:grid-cols-[0.75fr_1.25fr]'>
-      <Card bordered shadow={false} class='h-fit'>
-        <div class='flex items-center gap-4'>
-          <Avatar name={store.user.displayName || store.user.username} src={store.user.avatarUrl} size='lg' />
-          <div class='min-w-0'>
-            <h2 class='truncate text-lg font-semibold'>{store.user.displayName || store.user.username}</h2>
-            <p class='text-sm text-base-content/50'>@{store.user.username}</p>
-            <p class='mt-2 text-xs text-primary'>{store.isAdmin ? m.role_admin() : m.role_user()}</p>
-          </div>
-        </div>
-        <p class='mt-4 text-xs leading-6 text-base-content/50'>{m.avatar_hint()}</p>
-      </Card>
-      <Card title={m.profile_title()} bordered shadow={false} data-guide='admin-profile-form'>
-        <UserProfile columns={2} labelPosition='left' user={store.user} editable alwaysEditable fields={['avatar', 'displayName', 'email']} avatarAccept='image/png,image/jpeg,image/webp' avatarHint={m.avatar_hint()} loading={store.saving} onsubmit={data => store.saveProfile(data)} onavatarchange={file => void store.uploadAvatar(file)} data-testid='profile-form' />
-      </Card>
-    </div>
+    <Card title={m.profile_title()} bordered shadow={false} data-guide='admin-profile-form'>
+      <div class='mb-5 flex flex-wrap items-center gap-3 border-b border-base-content/8 pb-4'>
+        <p class='min-w-0 break-all text-sm text-base-content/55'>@{store.user.username}</p>
+        <Badge size='sm' variant='ghost'>{store.isAdmin ? m.role_admin() : m.role_user()}</Badge>
+      </div>
+      <UserProfile columns={2} user={store.user} editable alwaysEditable fields={['avatar', 'displayName', 'email']} avatarAccept='image/png,image/jpeg,image/webp' avatarHint={m.avatar_hint()} loading={store.saving} onsubmit={data => store.saveProfile(data)} onavatarchange={file => void store.uploadAvatar(file)} data-testid='profile-form' />
+    </Card>
     <Card title={m.preferences_title()} bordered shadow={false} data-guide='admin-preferences'>
       <p class='mb-5 text-sm text-base-content/50'>{m.preferences_description()}</p>
-      <div class='grid gap-6 sm:grid-cols-2'>
-        <div class='space-y-2'>
-          <label class='text-sm font-medium' for='profile-language'>{m.settings_language()}</label>
+      <FormLayout columns={2}>
+        <FormField label={m.settings_language()} for='profile-language'>
           <Select id='profile-language' value={store.locale} options={languageOptions} disabled={store.saving} onchange={locale => void store.savePreferences({ locale })} data-testid='profile-language' />
-        </div>
-        <div class='space-y-2'>
-          <label class='text-sm font-medium' for='profile-theme'>{m.settings_theme()}</label>
+        </FormField>
+        <FormField label={m.settings_theme()} for='profile-theme'>
           <Select id='profile-theme' value={themeStore.current} options={themeOptions} disabled={store.saving} onchange={theme => void store.savePreferences({ theme })} data-testid='profile-theme' />
-        </div>
-      </div>
+        </FormField>
+      </FormLayout>
     </Card>
     <Card title={m.password_title()} bordered shadow={false} data-guide='admin-password'>
       <p class='mb-5 text-sm text-base-content/50'>{m.password_rules()}</p>
-      <div class='max-w-xl'><ChangePasswordForm labelPosition='left' loading={store.saving} passwordPolicy={store.authConfig?.password} minPasswordLength={store.authConfig?.password.minLength ?? 8} onsubmit={data => store.changePassword(data)} data-testid='password-form' /></div>
+      <ChangePasswordForm loading={store.saving} passwordPolicy={store.authConfig?.password} minPasswordLength={store.authConfig?.password.minLength ?? 8} onsubmit={data => store.changePassword(data)} data-testid='password-form' />
     </Card>
   {/if}
 </section>

package/templates/base/package.json.hbs

@@ -1,7 +1,7 @@
 {
   "engines": { "node": "^22.22.2 || ^24.15.0 || >=26.0.0" },
   "name": "{{projectName}}",
-  "version": "0.1.0-alpha.63",
+  "version": "0.1.0-alpha.64",
   "private": true,
   "packageManager": "pnpm@12.11.2",
   "description": "{{#if_eq appType 'admin'}}Enterprise management system built with hai Agent Framework{{/if_eq}}{{#if_eq appType 'website'}}Enterprise website built with hai Agent Framework{{/if_eq}}{{#if_eq appType 'h5'}}Mobile H5 app built with hai Agent Framework{{/if_eq}}{{#if_eq appType 'api'}}REST API service built with hai Agent Framework{{/if_eq}}{{#if_eq appType 'mobile-app'}}Mobile app built with hai Agent Framework{{/if_eq}}",

package/templates/skills/hai-ui/SKILL.md

@@ -48,6 +48,10 @@ description: "使用 @h-ai/ui 构建 Svelte 5 表单、表格、弹窗、新手
 
 ## 表单布局与错误提示
 
+输入控件与 CRUD 新增/编辑默认在首次失焦后显示前端错误，修正输入时即时更新；未操作字段在提交时校验。Select 在焦点离开触发器及选项后校验。应用无需逐项绑定 blur；业务异步校验仍由应用提供。PasswordInput 的 minLength 提供时执行长度校验；登录现有密码时省略该属性。
+
+UserProfile 的 `fieldConstraints` 按字段声明 `required/minlength/maxlength/pattern/validationMessage`；单行控件支持 pattern，业务文案可用翻译函数。不要只在保存回调内放前端校验，服务端仍须执行 schema 校验。
+
 状态层通过轻量入口 `@h-ai/ui/i18n` 导入 `setGlobalLocale` / `createLocaleStore`，不加载组件或引导 CSS。
 
 数据新增/修改统一使用 `Form`（托管提交）或原生 `<form>` + `FormLayout`，不要在应用复制字段 grid。两者支持 `columns={1 | 2}`、`labelPosition='top' | 'left'`、`labelWidth`；默认单列/标签在上，窄容器自动收拢。`FormField.colSpan='auto'` 自动让多行文本、上传和多选占两列，`1` / `2` 可覆盖；自定义宽控件标注 `data-form-wide`。已有控件 ID 或原生控件给 FormField 配 `for`，避免重复或失效的标签。