iter(g280): 表单项支持条件显示

packages/skin/ui/src/form.ts

@@ -1,4 +1,4 @@
-import { h } from '@ui-arch/frame';
+import { effect, h } from '@ui-arch/frame';
 import { button } from './button.js';
 import { grid } from './grid.js';
 import type { FormItemHandle, FormItemProps, FormProps, FormRule } from './types.js';
@@ -40,6 +40,8 @@ export function formItem(props: FormItemProps, control: HTMLElement): FormItemHa
   const label = h('label', { class: 'ua-form-label' }, props.label, props.required ? h('i', { class: 'ua-form-req' }, '*') : null);
   const el = h('div', { class: 'ua-form-item' }, label, h('div', { class: 'ua-form-control' }, control, hint, error));
   if (props.span) el.style.gridColumn = `span ${props.span}`; // 多列布局里跨列；单列容器下由 CSS 还原为整行
+  // 条件显示：隐藏时顺带清掉错误态，否则「看不见的红框」会拦住提交
+  if (props.visible) effect(() => { el.hidden = !props.visible?.(); if (el.hidden) paint(null); });
   let seq = 0; // 校验轮次：异步结论回来时若已有更新的一轮，丢弃旧结果（防乱序覆盖）
 
   /*** 错误态落点：控件根 + 内部原生控件，保证 select / checkbox 这类包裹式控件也能标红 ***/
@@ -58,6 +60,7 @@ export function formItem(props: FormItemProps, control: HTMLElement): FormItemHa
 
   /*** 同步校验：异步规则不结论，保证 blur / input 路径不被 Promise 拖慢 ***/
   const validate = (): string | null => {
+    if (el.hidden) return null; // 隐藏项不参与校验：没显示的字段不该拦住提交
     const value = props.value();
     let msg: string | null = null;
     for (const rule of rules) {
@@ -70,6 +73,7 @@ export function formItem(props: FormItemProps, control: HTMLElement): FormItemHa
 
   /*** 异步校验：按序 await 每条规则，结论按轮次取舍，过期结果不动 UI ***/
   const validateAsync = async (): Promise<string | null> => {
+    if (el.hidden) return null; // 隐藏项不参与异步校验，与同步版同一口径
     seq += 1;
     const mine = seq; // 本轮编号
     const value = props.value();