@h-ai/ui 0.1.0-alpha.62 → 0.1.0-alpha.64

package/dist/components/scenes/app/FeedbackModal.svelte

@@ -12,6 +12,8 @@
   />
 -->
 <script lang='ts'>
+  import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Modal from '../../compounds/Modal.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
@@ -47,18 +49,18 @@
     }
   }
 
-  import type { DataAttributes } from '../../../types.js'
+  import type { DataAttributes, FormLayoutOptions } from '../../../types.js'
   import { uiM } from '../../../messages.js'
   import { getDataAttributes } from '../../../utils.js'
 
-  interface Props {
+  interface Props extends FormLayoutOptions {
     open?: boolean
     labels?: FeedbackLabels
     onsubmit?: (data: FeedbackData) => Promise<void>
     class?: string
   }
 
-  let { open = $bindable(false), labels = {}, onsubmit, class: className = '', ...restProps }: Props & DataAttributes = $props()
+  let { open = $bindable(false), labels = {}, columns = 1, labelPosition = 'top', labelWidth = '8rem', onsubmit, class: className = '', ...restProps }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
   // 文案优先使用传入的 labels，缺省回退到内置消息 uiM(...)
@@ -67,7 +69,9 @@
   let description = $state('')
   let contact = $state('')
   let loading = $state(false)
-  let error = $state('')
+  let error = $state<'empty' | 'submit' | ''>('')
+  let submitError = $state('')
+  const errorText = $derived(error === 'empty' ? labels.errorEmpty ?? uiM('feedback_error_empty') : error === 'submit' ? submitError || labels.errorSubmit || uiM('feedback_error_submit') : '')
 
   const typeOptions = $derived([
     { value: 'bug', label: labels.types?.bug ?? uiM('feedback_type_bug') },
@@ -77,8 +81,10 @@
   ])
 
   async function handleSubmit() {
+    if (loading)
+      return
     if (!description.trim()) {
-      error = labels.errorEmpty ?? uiM('feedback_error_empty')
+      error = 'empty'
       return
     }
 
@@ -95,7 +101,8 @@
       resetForm()
     }
     catch (e) {
-      error = e instanceof Error ? e.message : (labels.errorSubmit ?? uiM('feedback_error_submit'))
+      submitError = e instanceof Error ? e.message : ''
+      error = 'submit'
     }
     finally {
       loading = false
@@ -107,41 +114,44 @@
     description = ''
     contact = ''
     error = ''
+    submitError = ''
   }
 </script>
 
 <Modal {...dataAttributes} class={className} bind:open title={labels.title ?? uiM('feedback_title')}>
   <p class='text-base-content/70 mb-4'>{labels.description ?? uiM('feedback_description')}</p>
 
-  {#if error}
+  {#if error === 'submit'}
     <div class='alert alert-error mb-4'>
       <span class='icon-[tabler--alert-circle] size-5'></span>
-      <span>{error}</span>
+      <span>{errorText}</span>
     </div>
   {/if}
 
-  <div class='space-y-4'>
-    <div class='fieldset'>
-      <legend class='fieldset-legend'>{labels.typeLabel ?? uiM('feedback_type_label')}</legend>
+  <FormLayout {columns} {labelPosition} {labelWidth}>
+    <FormField for='feedback-type' label={labels.typeLabel ?? uiM('feedback_type_label')}>
       <Select
         id='feedback-type'
         options={typeOptions}
         bind:value={feedbackType}
       />
-    </div>
+    </FormField>
 
-    <div class='fieldset'>
-      <legend class='fieldset-legend'>{labels.contentLabel ?? uiM('feedback_content_label')} <span class='text-error'>*</span></legend>
+    <FormField for='feedback-desc' label={labels.contentLabel ?? uiM('feedback_content_label')} required error={error === 'empty' ? errorText : ''}>
       <Textarea
         id='feedback-desc'
         class='h-32'
         placeholder={labels.contentPlaceholder ?? uiM('feedback_content_placeholder')}
         bind:value={description}
+        disabled={loading}
+        oninput={() => {
+          if (description.trim())
+            error = ''
+        }}
       />
-    </div>
+    </FormField>
 
-    <div class='fieldset'>
-      <legend class='fieldset-legend'>{labels.contactLabel ?? uiM('feedback_contact_label')}</legend>
+    <FormField for='feedback-contact' label={labels.contactLabel ?? uiM('feedback_contact_label')}>
       <Input
         id='feedback-contact'
         type='text'
@@ -150,8 +160,8 @@
         bind:value={contact}
         autocomplete='email'
       />
-    </div>
-  </div>
+    </FormField>
+  </FormLayout>
 
   {#snippet footer()}
     <Button variant='ghost' onclick={() => open = false}>

package/dist/components/scenes/app/FeedbackModal.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DataAttributes } from '../../../types.js';
+import type { DataAttributes, FormLayoutOptions } from '../../../types.js';
 type FeedbackType = 'bug' | 'feature' | 'question' | 'other';
 interface FeedbackData {
     type: FeedbackType;
@@ -25,7 +25,7 @@ interface FeedbackLabels {
         other?: string;
     };
 }
-interface Props {
+interface Props extends FormLayoutOptions {
     open?: boolean;
     labels?: FeedbackLabels;
     onsubmit?: (data: FeedbackData) => Promise<void>;

package/dist/components/scenes/crud/CrudEditPanel.svelte

@@ -7,29 +7,23 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import type { DataAttributes, Size } from '../../../types.js'
+  import type { DataAttributes, FormLayoutOptions, Size } from '../../../types.js'
+  import type { CrudFieldDef } from './crud-controller.svelte.js'
   import type { CrudDensity, CrudFormVariant } from './crud-types.js'
+  import { tick } from 'svelte'
+  import { resolveFormText as resolveText } from '../../../internal/form-validation.svelte.js'
   import { uiM } from '../../../messages.js'
   import { getDataAttributes } from '../../../utils.js'
   import Drawer from '../../compounds/Drawer.svelte'
   import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Modal from '../../compounds/Modal.svelte'
   import Button from '../../primitives/Button.svelte'
   import Checkbox from '../../primitives/Checkbox.svelte'
   import Input from '../../primitives/Input.svelte'
   import Select from '../../primitives/Select.svelte'
   import Textarea from '../../primitives/Textarea.svelte'
-
-  type FieldDef = {
-    id: string
-    label: string | (() => string)
-    type: string
-    readonly?: boolean
-    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
-    validation?: { required?: boolean, min?: number, max?: number, pattern?: string, message?: string }
-    placeholder?: string | (() => string)
-    order?: number
-  }
+  import { getCrudValidationIssue } from './crud-form-validation.js'
 
   let {
     open = $bindable(false),
@@ -47,6 +41,9 @@
     modalWidth,
     modalHeight,
     submitting = false,
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
     error = '',
     onsubmit,
     onclose,
@@ -57,7 +54,7 @@
   }: {
     open?: boolean
     mode?: 'create' | 'edit'
-    fields?: FieldDef[]
+    fields?: CrudFieldDef[]
     formData?: Record<string, unknown>
     density?: CrudDensity
     title?: string
@@ -76,14 +73,20 @@
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>
     editingItem?: Record<string, unknown> | null
     class?: string
-  } & DataAttributes = $props()
+  } & FormLayoutOptions & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  function resolveText(text: string | (() => string)): string {
-    return typeof text === 'function' ? text() : text
-  }
-
-  function resolveOptions(options?: FieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
+  const panelId = $props.id()
+  let formElement: HTMLFormElement | undefined = $state()
+  let attempted = $state(false)
+  let touched = $state<Record<string, boolean>>({})
+  $effect(() => {
+    if (!open) {
+      attempted = false
+      touched = {}
+    }
+  })
+  function resolveOptions(options?: CrudFieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
     if (!options)
       return []
     return typeof options === 'function' ? options() : options
@@ -92,15 +95,25 @@
   const sortedFields = $derived(
     [...fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
   )
+  const fieldErrors = $derived.by(() => {
+    const errors: Record<string, string> = {}
+    for (const field of sortedFields) {
+      if ((!attempted && !touched[field.id]) || (mode === 'edit' && field.readonly))
+        continue
+      const issue = getCrudValidationIssue(field, formData[field.id])
+      if (issue)
+        errors[field.id] = field.validation?.message ? resolveText(field.validation.message) : uiM(issue.key, issue.params)
+    }
+    return errors
+  })
 
   const isCompact = $derived(density === 'compact')
   const controlSize = $derived(isCompact ? 'xs' : 'sm')
-  const formClass = $derived(isCompact ? 'space-y-3' : 'space-y-4')
   const extraClass = $derived(isCompact ? 'border-t border-base-content/5 pt-3' : 'border-t border-base-content/5 pt-4')
   const multiSelectWrapClass = $derived(isCompact ? 'flex flex-wrap gap-2 p-2.5 bg-base-200 rounded-lg max-h-48 overflow-y-auto' : 'flex flex-wrap gap-3 p-3 bg-base-200 rounded-lg max-h-48 overflow-y-auto')
   const multiSelectLabelClass = $derived(isCompact ? 'inline-flex items-center gap-1.5 cursor-pointer' : 'inline-flex items-center gap-2 cursor-pointer')
   const multiSelectTextClass = $derived(isCompact ? 'text-xs text-base-content' : 'text-sm text-base-content')
-  const drawerFormClass = $derived(isCompact ? 'space-y-3 pb-16' : 'space-y-4 pb-20')
+  const drawerFormClass = $derived(isCompact ? 'pb-16' : 'pb-20')
   const drawerFooterClass = $derived(isCompact ? 'absolute bottom-0 left-0 right-0 p-3 bg-base-200 border-t border-base-content/10 flex justify-end gap-2' : 'absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2')
 
   function handleClose() {
@@ -110,6 +123,14 @@
 
   async function handleSubmit(e: Event) {
     e.preventDefault()
+    if (submitting)
+      return
+    attempted = true
+    if (Object.keys(fieldErrors).length) {
+      await tick()
+      formElement?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus()
+      return
+    }
     await onsubmit?.(formData)
   }
 
@@ -120,8 +141,6 @@
       case 'tel': return 'tel'
       case 'password': return 'password'
       case 'number': return 'number'
-      case 'date': return 'text'
-      case 'datetime': return 'text'
       default: return 'text'
     }
   }
@@ -130,6 +149,15 @@
     formData = { ...formData, [fieldId]: value }
   }
 
+  function handleFieldBlur(event: FocusEvent) {
+    if (!(event.target instanceof HTMLElement))
+      return
+    const field = event.target.closest<HTMLElement>('[data-field]')
+    if (!field?.dataset.field || (event.relatedTarget instanceof Node && field.contains(event.relatedTarget)))
+      return
+    touched = { ...touched, [field.dataset.field]: true }
+  }
+
   function toggleMultiSelect(fieldId: string, optValue: string | number | boolean) {
     const current = (formData[fieldId] as Array<string | number | boolean>) ?? []
     const strVal = String(optValue)
@@ -143,113 +171,122 @@
 </script>
 
 {#snippet formFields()}
-  {#if error}
-    <div {...dataAttributes} class='p-3 bg-error/10 border border-error/20 rounded-lg text-sm text-error flex items-center gap-2'>
-      <span class='icon-[tabler--alert-circle] size-4 shrink-0'></span>
-      <span>{error}</span>
-    </div>
-  {/if}
+  <FormLayout {columns} {labelPosition} {labelWidth} class={isCompact ? '[--hai-form-gap:0.75rem]' : ''}>
+    {#if error}
+      <div {...dataAttributes} role='alert' class='p-3 bg-error/10 border border-error/20 rounded-lg text-sm text-error flex items-center gap-2'>
+        <span class='icon-[tabler--alert-circle] size-4 shrink-0'></span>
+        <span>{error}</span>
+      </div>
+    {/if}
 
-  {#each sortedFields as field (field.id)}
-    {@const isReadonly = field.readonly && mode === 'edit'}
-    {@const isRequired = field.validation?.required}
-    {@const fieldValue = formData[field.id]}
-    {@const placeholder = field.placeholder ? resolveText(field.placeholder) : ''}
+    {#each sortedFields as field (field.id)}
+      {@const isReadonly = field.readonly && mode === 'edit'}
+      {@const isRequired = field.validation?.required}
+      {@const fieldValue = formData[field.id]}
+      {@const placeholder = field.placeholder ? resolveText(field.placeholder) : ''}
+      {@const controlId = `${panelId}-${field.id}`}
+      <FormField
+        for={controlId}
+        label={resolveText(field.label)}
+        required={isRequired}
+        error={fieldErrors[field.id]}
+        colSpan={field.colSpan ?? (['textarea', 'multi-select', 'date-range', 'custom'].includes(field.type) ? 2 : 'auto')}
+        data-field={field.id}
+      >
 
-    {#if field.type === 'textarea'}
-      <FormField label={resolveText(field.label)} required={isRequired}>
-        <Textarea
-          id={field.id}
-          size={controlSize}
-          value={String(fieldValue ?? '')}
-          {placeholder}
-          disabled={submitting || isReadonly}
-          required={isRequired}
-          oninput={e => updateField(field.id, (e.target as HTMLTextAreaElement).value)}
-        />
-      </FormField>
+        {#if field.type === 'textarea'}
+          <Textarea
+            id={controlId}
+            name={field.id}
+            size={controlSize}
+            value={String(fieldValue ?? '')}
+            {placeholder}
+            disabled={submitting || isReadonly}
+            required={isRequired}
+            minlength={field.validation?.min}
+            maxlength={field.validation?.max}
+            oninput={e => updateField(field.id, (e.target as HTMLTextAreaElement).value)}
+          />
 
-    {:else if field.type === 'select' || field.type === 'radio'}
-      {@const opts = resolveOptions(field.options)}
-      <FormField label={resolveText(field.label)} required={isRequired}>
-        <Select
-          id={field.id}
-          size={controlSize}
-          value={String(fieldValue ?? '')}
-          disabled={submitting || isReadonly}
-          options={[
-            { value: '', label: placeholder || uiM('crud_filter_all') },
-            ...opts.map(opt => ({ value: String(opt.value), label: opt.label })),
-          ]}
-          onchange={value => updateField(field.id, value)}
-        />
-      </FormField>
+        {:else if field.type === 'select' || field.type === 'radio'}
+          {@const opts = resolveOptions(field.options)}
+          <Select
+            id={controlId}
+            name={field.id}
+            required={isRequired}
+            size={controlSize}
+            value={String(fieldValue ?? '')}
+            disabled={submitting || isReadonly}
+            options={[
+              { value: '', label: placeholder || uiM('crud_filter_all') },
+              ...opts.map(opt => ({ value: String(opt.value), label: opt.label })),
+            ]}
+            onchange={value => updateField(field.id, opts.find(opt => String(opt.value) === value)?.value ?? value)}
+          />
 
-    {:else if field.type === 'multi-select'}
-      {@const opts = resolveOptions(field.options)}
-      {@const selectedValues = ((fieldValue ?? []) as Array<string | number | boolean>).map(String)}
-      <FormField label={resolveText(field.label)} required={isRequired}>
-        <div class={multiSelectWrapClass}>
-          {#each opts as opt (String(opt.value))}
-            <label class={multiSelectLabelClass}>
-              <Checkbox
-                size={controlSize}
-                checked={selectedValues.includes(String(opt.value))}
-                onchange={() => toggleMultiSelect(field.id, opt.value)}
-                disabled={submitting || isReadonly}
-              />
-              <span class={multiSelectTextClass}>{opt.label}</span>
-            </label>
-          {/each}
-          {#if opts.length === 0}
-            <span class={multiSelectTextClass}>{uiM('crud_no_data')}</span>
-          {/if}
-        </div>
-      </FormField>
+        {:else if field.type === 'multi-select'}
+          {@const opts = resolveOptions(field.options)}
+          {@const selectedValues = ((fieldValue ?? []) as Array<string | number | boolean>).map(String)}
+          <div id={controlId} role='group' tabindex='-1' aria-label={resolveText(field.label)} class={multiSelectWrapClass} data-form-wide>
+            {#each opts as opt (String(opt.value))}
+              <div class={multiSelectLabelClass}>
+                <Checkbox
+                  label={opt.label}
+                  size={controlSize}
+                  checked={selectedValues.includes(String(opt.value))}
+                  onchange={() => toggleMultiSelect(field.id, opt.value)}
+                  disabled={submitting || isReadonly}
+                />
+              </div>
+            {/each}
+            {#if opts.length === 0}
+              <span class={multiSelectTextClass}>{uiM('crud_no_data')}</span>
+            {/if}
+          </div>
 
-    {:else if field.type === 'boolean' || field.type === 'checkbox'}
-      <FormField label={resolveText(field.label)}>
-        <Checkbox
-          size={controlSize}
-          checked={Boolean(fieldValue)}
-          onchange={(checked: boolean) => updateField(field.id, checked)}
-          disabled={submitting || isReadonly}
-        />
-      </FormField>
+        {:else if field.type === 'boolean' || field.type === 'checkbox'}
+          <Checkbox
+            id={controlId}
+            size={controlSize}
+            checked={Boolean(fieldValue)}
+            onchange={(checked: boolean) => updateField(field.id, checked)}
+            disabled={submitting || isReadonly}
+          />
 
-    {:else}
-      <FormField label={resolveText(field.label)} required={isRequired}>
-        <Input
-          id={field.id}
-          type={getInputType(field.type)}
-          size={controlSize}
-          value={String(fieldValue ?? '')}
-          {placeholder}
-          disabled={submitting || isReadonly}
-          required={isRequired}
-          pattern={field.validation?.pattern}
-          minlength={field.type !== 'number' ? field.validation?.min : undefined}
-          maxlength={field.type !== 'number' ? field.validation?.max : undefined}
-          min={field.type === 'number' ? field.validation?.min : undefined}
-          max={field.type === 'number' ? field.validation?.max : undefined}
-          oninput={e => updateField(field.id, field.type === 'number' ? Number((e.currentTarget as HTMLInputElement).value) : (e.currentTarget as HTMLInputElement).value)}
-        />
+        {:else}
+          <Input
+            id={controlId}
+            name={field.id}
+            type={getInputType(field.type)}
+            size={controlSize}
+            value={String(fieldValue ?? '')}
+            {placeholder}
+            disabled={submitting || isReadonly}
+            required={isRequired}
+            pattern={field.validation?.pattern}
+            minlength={field.type !== 'number' ? field.validation?.min : undefined}
+            maxlength={field.type !== 'number' ? field.validation?.max : undefined}
+            min={field.type === 'number' ? field.validation?.min : undefined}
+            max={field.type === 'number' ? field.validation?.max : undefined}
+            oninput={e => updateField(field.id, field.type === 'number' && e.currentTarget.value !== '' ? Number(e.currentTarget.value) : e.currentTarget.value)}
+          />
+        {/if}
       </FormField>
-    {/if}
-  {/each}
+    {/each}
 
-  {#if editFormExtra}
-    <div class={extraClass}>
-      {@render editFormExtra(editingItem, mode)}
-    </div>
-  {/if}
+    {#if editFormExtra}
+      <div class={extraClass}>
+        {@render editFormExtra(editingItem, mode)}
+      </div>
+    {/if}
+  </FormLayout>
 {/snippet}
 
 {#snippet footerActions()}
   <Button variant='ghost' size='sm' onclick={handleClose} disabled={submitting}>
     {uiM('crud_cancel')}
   </Button>
-  <Button variant='primary' size='sm' onclick={handleSubmit} disabled={submitting}>
+  <Button variant='primary' size='sm' onclick={() => formElement?.requestSubmit()} disabled={submitting}>
     {#if submitting}
       <span class='loading loading-spinner loading-xs mr-2'></span>
     {/if}
@@ -268,7 +305,9 @@
     closeOnBackdrop={false}
     onclose={handleClose}
   >
-    <form onsubmit={handleSubmit} class={formClass}>
+    <form bind:this={formElement} novalidate onsubmit={handleSubmit} onfocusout={handleFieldBlur}>
+      <!-- 底部按钮在表单外；保留原生提交控件，使多字段表单支持回车提交。 -->
+      <input type='submit' class='hidden' tabindex='-1' aria-hidden='true' value={uiM('crud_save')} />
       {@render formFields()}
     </form>
 
@@ -289,7 +328,8 @@
     onclose={handleClose}
     closeOnBackdrop={false}
   >
-    <form onsubmit={handleSubmit} class={drawerFormClass}>
+    <form bind:this={formElement} novalidate onsubmit={handleSubmit} onfocusout={handleFieldBlur} class={drawerFormClass}>
+      <input type='submit' class='hidden' tabindex='-1' aria-hidden='true' value={uiM('crud_save')} />
       {@render formFields()}
     </form>
 

package/dist/components/scenes/crud/CrudEditPanel.svelte.d.ts

@@ -1,32 +1,11 @@
 import type { Snippet } from 'svelte';
-import type { DataAttributes, Size } from '../../../types.js';
+import type { DataAttributes, FormLayoutOptions, Size } from '../../../types.js';
+import type { CrudFieldDef } from './crud-controller.svelte.js';
 import type { CrudDensity, CrudFormVariant } from './crud-types.js';
-type FieldDef = {
-    id: string;
-    label: string | (() => string);
-    type: string;
-    readonly?: boolean;
-    options?: Array<{
-        label: string;
-        value: string | number | boolean;
-    }> | (() => Array<{
-        label: string;
-        value: string | number | boolean;
-    }>);
-    validation?: {
-        required?: boolean;
-        min?: number;
-        max?: number;
-        pattern?: string;
-        message?: string;
-    };
-    placeholder?: string | (() => string);
-    order?: number;
-};
 type $$ComponentProps = {
     open?: boolean;
     mode?: 'create' | 'edit';
-    fields?: FieldDef[];
+    fields?: CrudFieldDef[];
     formData?: Record<string, unknown>;
     density?: CrudDensity;
     title?: string;
@@ -45,7 +24,7 @@ type $$ComponentProps = {
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>;
     editingItem?: Record<string, unknown> | null;
     class?: string;
-} & DataAttributes;
+} & FormLayoutOptions & DataAttributes;
 /**
  * CrudEditPanel
  * CRUD 编辑/新建表单组件，支持抽屉（drawer）与弹窗（modal）两种展示形式

package/dist/components/scenes/crud/CrudPage.svelte

@@ -13,6 +13,7 @@
 <script lang='ts'>
   import type { Snippet } from 'svelte'
   import type { DataAttributes } from '../../../types.js'
+  import type { CrudFieldDef } from './crud-controller.svelte.js'
   import type { CrudDensity, CrudFormConfig, CrudPaginationConfig, CrudToolbarStyle } from './crud-types.js'
   import type { NavAdapter } from './nav-adapter.js'
   import { SvelteURLSearchParams } from 'svelte/reactivity'
@@ -33,47 +34,7 @@
 
   // ─── 类型定义 ───
 
-  /** CRUD 字段定义，决定列表、筛选器和表单的字段行为。 */
-  type FieldDef = {
-    /** 字段稳定标识，同时对应数据记录中的属性名。 */
-    id: string
-    /** 字段显示文案，允许通过函数延迟读取当前语言。 */
-    label: string | (() => string)
-    /** 字段控件类型，最终由表单或筛选器解释。 */
-    type: string
-    /** 是否出现在列表中；未设置时默认显示。 */
-    inList?: boolean
-    /** 是否出现在筛选器中；只有显式为 true 时显示。 */
-    filterable?: boolean
-    /** 编辑时是否禁止修改。 */
-    readonly?: boolean
-    /** 是否出现在新建表单中；未设置时默认显示。 */
-    inCreate?: boolean
-    /** 是否出现在编辑表单中；未设置时默认显示。 */
-    inEdit?: boolean
-    /** 是否出现在详情面板中；未设置时默认显示。 */
-    inDetail?: boolean
-    /** 选择类字段的静态选项或动态选项工厂。 */
-    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
-    /** 表单校验规则。 */
-    validation?: { required?: boolean, min?: number, max?: number, pattern?: string, message?: string }
-    /** 列宽 CSS 值。 */
-    width?: string
-    /** 单元格对齐方式。 */
-    align?: 'left' | 'center' | 'right'
-    /** 列表单元格的自定义渲染函数。 */
-    render?: (value: unknown, item: Record<string, unknown>) => string
-    /** 输入控件占位文案。 */
-    placeholder?: string | (() => string)
-    /** 日期范围起始值 key。 */
-    startKey?: string
-    /** 日期范围结束值 key。 */
-    endKey?: string
-    /** 新建记录时使用的默认值。 */
-    defaultValue?: unknown
-    /** 字段排序权重，数值越小越靠前。 */
-    order?: number
-  }
+  type FieldDef = CrudFieldDef
 
   // 使用 method shorthand 语法（双向协变）以兼容来自 @h-ai/kit 的 CrudOperations 类型
   // 详见：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-6.html#strict-function-types
@@ -911,6 +872,9 @@
   modalHeight={formModalHeight}
   {submitting}
   error={formError}
+  columns={form?.columns}
+  labelPosition={form?.labelPosition}
+  labelWidth={form?.labelWidth}
   onsubmit={handleSubmit}
   onclose={closePanel}
   {editFormExtra}