@neatui/vue 5.1.0 → 5.1.2

package/src/components/loader/FormLoader/FormLoader.vue

@@ -1,175 +1,143 @@
 <template>
-  <div :ui-row="rows" :class="rootClass">
+  <Level :bare="bare" v-bind="bare ? undefined : { 'ui-row': rows || undefined, class: rootClass }">
     <template v-for="(col, idx) in state.form" :key="idx">
-      <div
-        v-if="isGroup(col) || !isCleared(col)"
-        :id="col._fid"
-        :ui-col="col.media"
-        :ui-flex="`${isVertical(col) ? 'col xm' : 'row lt'}`"
-        :data-path="debug ? fieldPath(col) || undefined : undefined"
-        :title="debug ? debugInfo(col) : undefined"
-        v-bind="col.attrs || {}"
-        :style="isCleared(col) ? { display: 'none' } : undefined"
-        v-on="isGroup(col) || col._array ? eventsOf(col, context()) : {}"
-      >
-        <!-- ${field}-row：整行自定义，包括标签 -->
-        <div v-if="rowSlot(col)" class="flex-block" @focusout="col._touched = true">
-          <slot :name="rowSlot(col)" v-bind="fieldScope(col)"></slot>
-          <FieldMessage :col="col" :mode="mode" />
-        </div>
-        <template v-else>
-          <!-- 标签：${field}-label / array-label / child-label / label 插槽可以接管 -->
-          <FormLoader
-            v-if="labelNodes(col.label)"
-            :form="labelNodes(col.label)"
-            :clearContext="{ value: isCleared(col), restore: canRestore(col) }"
-            :arrayContext="col._array ? arrayContext(col) : arrayContextProp"
-            :data="col._data"
-            :root="rootData"
-            :path="[path, col.paths].filter(Boolean).join('.')"
-            :index="index"
-            :idx="`${childIdx(col, idx)}-label`"
-            :mode="mode"
-            :interacted="touched"
-            :debug="debug"
-            rows=""
-            class="w-full"
-            ui-flex="row lm"
-          />
-          <template v-else-if="labelText(col.label)">
-            <h6 v-if="isVertical(col)" :style="`${showStar(col) ? 'text-indent: -1em' : ''}`" :class="labelClass" v-bind="labelAttrs(col.label)">
-              <slot v-if="labelSlot(col)" :name="labelSlot(col)" :col="col" :node="col" :data="col._data" :text="formatLabel(col)"></slot>
-              <template v-else-if="labelText(col.label) !== '*'">
-                <b v-if="showStar(col)" class="co-risk pr" style="left: 0.1em">﹡</b>
-                <span>{{ formatLabel(col) }}</span>
-              </template>
-            </h6>
-            <p
-              v-else
-              :class="[labelClass, `${clh({ ...(col.model[1] || {}) })}`]"
-              :style="labelStyle(col)"
-              class="ar nr-sm flex-fixed o-ls"
-              v-bind="labelAttrs(col.label)"
-            >
-              <slot v-if="labelSlot(col)" :name="labelSlot(col)" :col="col" :node="col" :data="col._data" :text="formatLabel(col)"></slot>
-              <template v-else-if="labelText(col.label) !== '*'">
-                <b v-if="showStar(col)" class="co-risk">﹡</b>
-                <span>{{ formatLabel(col) }}</span>
-              </template>
-            </p>
-          </template>
+      <template v-if="isGroup(col) || !isCleared(col)">
+        <FormRender v-if="isBareContent(col)" bare :col="col" :mode="mode" :interacted="touched" :ctx="context()" v-bind="nodeAttrs(col)" />
+
+        <div v-else v-bind="nodeAttrs(col)" v-on="isGroup(col) || col._array ? eventsOf(col, context()) : {}">
+          <div v-if="rowSlot(col)" class="flex-block" @focusout="col._touched = true">
+            <slot :name="rowSlot(col)" v-bind="fieldScope(col)"></slot>
+            <FieldMessage :col="col" :mode="mode" />
+          </div>
+
+          <FormLoader v-else-if="isGroup(col) && !hasLabel(col)" v-bind="childProps(col)">
+            <template v-for="name in childSlots()" #[name]="scope"><slot :name="name" v-bind="scope || {}"></slot></template>
+          </FormLoader>
 
-          <!-- 分组：递归渲染，带 field 时写入 data[field]，否则和当前层共用数据 -->
-          <div v-if="isGroup(col)" class="flex-block" :style="col.attrs?.['ui-flex'] ? { display: 'contents' } : undefined">
+          <template v-else>
             <FormLoader
-              :form="col.child || []"
+              v-if="labelNodes(col.label)"
+              :form="labelNodes(col.label)"
               :clearContext="{ value: isCleared(col), restore: canRestore(col) }"
-              :arrayContext="arrayContextProp"
-              :data="childData(col)"
+              :arrayContext="col._array ? arrayContext(col) : arrayContextProp"
+              :data="col._data"
               :root="rootData"
-              :path="fieldPath(col)"
+              :path="[path, col.paths].filter(Boolean).join('.')"
               :index="index"
-              :idx="childIdx(col, idx)"
-              :rows="col.attrs?.['ui-row'] ?? rows"
-              :style="col.attrs?.['ui-flex'] ? { display: 'contents' } : undefined"
+              :idx="baseIdx"
               :mode="mode"
-              :interacted="interacted"
-              :colon="colon"
-              :labelClass="labelClass"
-              :labelWidth="labelWidth"
-              :vertical="vertical"
+              :interacted="touched"
               :debug="debug"
-            >
-              <template v-for="name in childSlots()" #[name]="scope"><slot :name="name" v-bind="scope || {}"></slot></template>
-            </FormLoader>
-          </div>
+              rows=""
+              class="w-full"
+              ui-flex="row lm"
+            />
+            <h6 v-else-if="labelText(col.label) && isVertical(col)" :style="showStar(col) ? 'text-indent: -1em' : undefined" :class="labelClass || undefined" v-bind="labelAttrs(col.label)">
+              <slot v-if="labelSlot(col)" :name="labelSlot(col)" :col="col" :node="col" :data="col._data" :text="formatLabel(col)"></slot>
+              <template v-else-if="labelText(col.label) !== '*' && showStar(col)"><b class="co-risk pr" style="left: 0.1em">﹡</b>{{ formatLabel(col) }}</template>
+              <template v-else-if="labelText(col.label) !== '*'">{{ formatLabel(col) }}</template>
+            </h6>
+            <p v-else-if="labelText(col.label)" :class="[labelClass, clh({ ...(col.model[1] || {}) })]" :style="labelStyle(col)" class="ar nr-sm flex-fixed o-ls" v-bind="labelAttrs(col.label)">
+              <slot v-if="labelSlot(col)" :name="labelSlot(col)" :col="col" :node="col" :data="col._data" :text="formatLabel(col)"></slot>
+              <template v-else-if="labelText(col.label) !== '*' && showStar(col)"><b class="co-risk">﹡</b>{{ formatLabel(col) }}</template>
+              <template v-else-if="labelText(col.label) !== '*'">{{ formatLabel(col) }}</template>
+            </p>
 
-          <!-- 数组：每一行是一个子表单，支持增删和排序 -->
-          <div v-else-if="col._array" class="flex-block">
-            <div ui-row="">
-              <div v-for="(row, i) in listOf(col)" :key="rowKey(row)" :ui-col="col._array.attrs?.['ui-col'] || 'mob-24'" ui-flex="row lt" class="mb-xs" v-bind="col._array.attrs || {}">
-                <div class="flex-block">
-                  <FormLoader
-                    :form="col._array.child"
-                    :arrayContext="arrayContext(col, row)"
-                    :data="row"
-                    :root="rootData"
-                    :path="`${fieldPath(col)}.${i}`"
-                    :index="i"
-                    :idx="`${childIdx(col, idx)}-${i}`"
-                    :rows="col._array.rows || col.attrs?.['ui-row'] || rows"
-                    :mode="mode"
-                    :interacted="interacted"
-                    :colon="colon"
-                    :labelClass="labelClass"
-                    :labelWidth="labelWidth"
-                    :vertical="vertical"
-                    :debug="debug"
-                  >
+            <div v-if="isGroup(col)" v-bind="boxAttrs(col)">
+              <FormLoader v-bind="childProps(col)">
+                <template v-for="name in childSlots()" #[name]="scope"><slot :name="name" v-bind="scope || {}"></slot></template>
+              </FormLoader>
+            </div>
+
+            <div v-else-if="col._array" class="flex-block">
+              <div v-if="listOf(col).length" ui-row>
+                <div v-for="(row, i) in listOf(col)" :key="rowKey(row)" v-bind="rowAttrs(col)">
+                  <div v-if="hasActions(col)" v-bind="rowBox(col)">
+                    <FormLoader v-bind="rowProps(col, row, i)">
+                      <template v-for="name in childSlots()" #[name]="scope"><slot :name="name" v-bind="scope || {}"></slot></template>
+                    </FormLoader>
+                  </div>
+                  <FormLoader v-else v-bind="rowProps(col, row, i)">
                     <template v-for="name in childSlots()" #[name]="scope"><slot :name="name" v-bind="scope || {}"></slot></template>
                   </FormLoader>
-                </div>
-                <div v-if="editable && (hasSlot(`${col.field}-actions`) || col._array.sortable || col._array.del !== false)" class="flex-fixed nl-sm" ui-flex="row lm">
-                  <slot v-if="hasSlot(`${col.field}-actions`)" :name="`${col.field}-actions`" v-bind="rowScope(col, i)"></slot>
-                  <template v-else>
-                    <template v-if="col._array.sortable">
-                      <button ui-btn="@a s" type="button" :disabled="i === 0" @click="moveRow(col, i, -1)">上移</button>
-                      <button ui-btn="@a s" type="button" class="ml-xs" :disabled="i === listOf(col).length - 1" @click="moveRow(col, i, 1)">下移</button>
+                  <div v-if="hasActions(col)" class="flex-fixed nl-sm" ui-flex="row lm">
+                    <slot v-if="hasSlot(`${col.field}-actions`)" :name="`${col.field}-actions`" v-bind="rowScope(col, i)"></slot>
+                    <template v-else>
+                      <template v-if="col._array.sortable">
+                        <button ui-btn="@a s" type="button" :disabled="i === 0" @click="moveRow(col, i, -1)">上移</button>
+                        <button ui-btn="@a s" type="button" class="ml-xs" :disabled="i === listOf(col).length - 1" @click="moveRow(col, i, 1)">下移</button>
+                      </template>
+                      <button
+                        v-if="col._array.del !== false"
+                        ui-btn="@a s risk"
+                        type="button"
+                        class="ml-xs"
+                        :disabled="listOf(col).length <= (col._array.min || 0)"
+                        @click="removeRow(col, i)"
+                      >
+                        {{ col._array.del || '删除' }}
+                      </button>
                     </template>
-                    <button
-                      v-if="col._array.del !== false"
-                      ui-btn="@a s risk"
-                      type="button"
-                      class="ml-xs"
-                      :disabled="listOf(col).length <= (col._array.min || 0)"
-                      @click="removeRow(col, i)"
-                    >
-                      {{ col._array.del || '删除' }}
-                    </button>
-                  </template>
+                  </div>
                 </div>
               </div>
+              <template v-if="editable && col._array.add !== false">
+                <slot v-if="hasSlot(`${col.field}-add`)" :name="`${col.field}-add`" :col="col" :list="listOf(col)" :add="() => addRow(col)"></slot>
+                <button v-else ui-btn="@a s" type="button" :disabled="!!col._array.max && listOf(col).length >= col._array.max" @click="addRow(col)">
+                  {{ col._array.add || '+ 添加一项' }}
+                </button>
+              </template>
+              <div v-if="!editable && !listOf(col).length" class="lh-ls">-</div>
+              <FieldMessage :col="col" :mode="mode" />
             </div>
-            <template v-if="editable && col._array.add !== false">
-              <slot v-if="hasSlot(`${col.field}-add`)" :name="`${col.field}-add`" :col="col" :list="listOf(col)" :add="() => addRow(col)"></slot>
-              <button v-else ui-btn="@a s" type="button" :disabled="!!col._array.max && listOf(col).length >= col._array.max" @click="addRow(col)">
-                {{ col._array.add || '+ 添加一项' }}
-              </button>
-            </template>
-            <div v-if="!editable && !listOf(col).length" class="lh-ls">-</div>
-            <FieldMessage :col="col" :mode="mode" />
-          </div>
 
-          <!-- 叶节点：输入、内容、按钮和自定义控件使用相同的 value / event -->
-          <FormRender v-else :col="col" :mode="mode" :entry="resolveEntry(col)" :interacted="touched" :ctx="context()" :custom="(!editable && hasSlot(`${col.field}-value`)) || !resolveEntry(col)">
-            <slot v-if="!editable && hasSlot(`${col.field}-value`)" :name="`${col.field}-value`" v-bind="fieldScope(col)"></slot>
-            <template v-else>
-              <!-- 4.x 兼容：字段级 slot 优先于 model / field 同名插槽 -->
-              <slot v-if="col.slot" :name="col.slot" v-bind="fieldScope(col)"></slot>
-              <slot v-else-if="col.model[0]" :name="col.model[0]" v-bind="fieldScope(col)"></slot>
-              <slot v-else :name="col.field" v-bind="fieldScope(col)"></slot>
-            </template>
-          </FormRender>
-        </template>
-      </div>
+            <FormRender v-else :col="col" :mode="mode" :entry="resolveEntry(col)" :interacted="touched" :ctx="context()" :custom="(!editable && hasSlot(`${col.field}-value`)) || !resolveEntry(col)">
+              <slot v-if="!editable && hasSlot(`${col.field}-value`)" :name="`${col.field}-value`" v-bind="fieldScope(col)"></slot>
+              <template v-else>
+                <slot v-if="col.slot" :name="col.slot" v-bind="fieldScope(col)"></slot>
+                <slot v-else-if="col.model[0]" :name="col.model[0]" v-bind="fieldScope(col)"></slot>
+                <slot v-else :name="col.field" v-bind="fieldScope(col)"></slot>
+              </template>
+            </FormRender>
+          </template>
+        </div>
+      </template>
     </template>
-    <div v-if="$slots.submit" :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
-      <div v-if="vertical">
-        <slot name="submit"></slot>
-      </div>
-      <div v-else :style="submitStyle">
+    <div v-if="!bare && $slots.submit" :ui-flex="vertical ? 'col xm' : 'row xt'">
+      <div :style="vertical ? undefined : submitStyle || undefined">
         <slot name="submit"></slot>
       </div>
     </div>
-  </div>
+  </Level>
 </template>
 <script lang="ts" setup>
-  import { watch, reactive, shallowRef, onMounted, onBeforeUnmount, useAttrs, useSlots, computed, provide, inject, toRaw, nextTick, watchEffect, useId, isReactive, isReadonly } from 'vue';
+  import { Comment, h, watch, reactive, shallowRef, onMounted, onBeforeUnmount, useAttrs, useSlots, computed, provide, inject, toRaw, nextTick, watchEffect, useId, isReactive, isReadonly } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { isString, isObject, deepcopy, isArray, isFunction } from '@fekit/utils';
   import FormRender, { getField, emptyValueOf, clh, isEmpty, labelText, labelAttrs, rulesOf, displayOf, valueBinding, labelNodes, eventsOf, writeValue, FieldMessage } from './FormRender.vue';
   import type { PropType, ShallowRef } from 'vue';
   import type { FormItem, FormArrayContext, FormContext, FormError, FormValidateResult, LinkageTask, FormRule } from './FormRender.vue';
+
+  // 层级根：最外层输出 div（接收透传属性），分组 / 数组内部的层级（bare）只输出子节点；
+  // 顶层的条件占位注释（没有 submit 等）一并过滤，客户端与 SSR 一致。模板根部不能有注释，否则透传属性失效。
+  const Level: any = (props: { bare?: boolean }, { slots, attrs }: any) => {
+    const children = (slots.default?.() || []).filter((node: any) => node.type !== Comment);
+    return props.bare ? children : h('div', attrs, children);
+  };
+  Level.props = ['bare'];
+  Level.inheritAttrs = false;
+
+  // 未传 idx 时的 id 前缀：由 useId 算出的 6 位短串，SSR 与客户端一致，同页多个表单不冲突
+  const shortHash = (text: string) => {
+    let h = 2166136261;
+    for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619);
+    return (h >>> 0).toString(36).padStart(6, '0').slice(-6);
+  };
+
+  // child 两种写法：节点数组，或 { attrs, lists }（兼容 child 作为 lists 的别名）；动态配置交给联动
+  const isChildBox = (child: any) => isObject(child) && !isArray(child) && !isFunction(child.setup) && child.watch === undefined
+    && (isArray(child.lists) || isArray(child.child) || child.attrs !== undefined);
+  const childList = (child: any): any[] | null => (isArray(child) ? child : isChildBox(child) ? child.lists || child.child || [] : null);
   // 计算Label宽度
   const clw = (label: any = '') => {
     let emWidth = 0;
@@ -256,6 +224,13 @@
     return _model;
   };
 
+  // child: { attrs, lists } 拆成子节点数组和容器属性
+  const splitChild = (item: any) => {
+    if (!isChildBox(item.child)) return;
+    item._childAttrs = item.child.attrs;
+    item.child = childList(item.child);
+  };
+
   // 规范化数组配置，兼容旧版 array: 'field' 和 lists
   const normalizeArray = (array: any) => {
     if (isString(array)) return { child: [{ field: array }] };
@@ -269,11 +244,12 @@
     list.forEach((item: any = {}) => {
       if (!isObject(item)) return;
       const target = ensurePath(row, item.paths);
-      if (isArray(item.child) && !item.array) {
+      const child = childList(item.child);
+      if (child && !item.array) {
         if (item.field) {
-          target[item.field] = createRow(item.child, getEmpty);
+          target[item.field] = createRow(child, getEmpty);
         } else {
-          Object.assign(target, createRow(item.child, getEmpty));
+          Object.assign(target, createRow(child, getEmpty));
         }
       } else if (item.field) {
         target[item.field] = getEmpty(item);
@@ -625,6 +601,11 @@
       default: false,
     },
     // 以下由分组和数组内部传递
+    // 内部层级：不输出根元素，子节点直接落在上一层的容器里
+    bare: {
+      type: Boolean,
+      default: false,
+    },
     // 根表单数据，联动函数和 watch 都基于它
     root: {
       type: Object as any,
@@ -680,7 +661,7 @@
 
   const rootData = computed(() => props.root || props.data);
   // 根表单未传 idx 时用 useId 生成前缀，同页多个表单的同名字段 id 不再冲突；SSR 与客户端一致。
-  const autoIdx = useId().replace(/[^\w-]/g, '-');
+  const autoIdx = `f${shortHash(useId())}`;
   const baseIdx = computed(() => (props.idx !== '' ? String(props.idx) : props.root ? '' : autoIdx));
   const cancelValidation = () => {
     shared.validationEpoch++;
@@ -766,6 +747,106 @@
   // 整行插槽
   const rowSlot = (col: any = {}) => (col.field && hasSlot(`${col.field}-row`) ? `${col.field}-row` : '');
 
+  // ---- 渲染结构：节点即元素，只补 id / ui-col / 布局 / 调试 / 隐藏，空值不输出 ----
+  // 模板分支：${field}-row 整行插槽 → 无标题分组（节点元素即容器）→ 标题（节点树 / h6 / p，插槽 ${field}-label、array-label、child-label、label）
+  // → 有标题分组（标题 + 内容容器）→ 数组（行；有操作按钮时分字段区与按钮区）→ 字段（控件 + 错误提示；字段级 slot 兼容 4.x）
+  const hasLabel = (col: any = {}) => !!labelNodes(col.label) || !!labelText(col.label);
+  // 无标题的 Text / Html / Button 内容节点直接输出内容元素
+  const isBareContent = (col: any = {}) => !col.field && !isGroup(col) && !col._array && !hasLabel(col) && !rowSlot(col)
+    && ['Text', 'Html', 'Button'].includes(col.model?.[0]);
+  // 所在层有栅格时才输出 ui-col；分组、数组默认占满一行；false 不用栅格
+  const mediaOf = (col: any = {}) => (!props.rows || col.media === false ? undefined : col.media || (isGroup(col) || col._array ? 'mob-24' : undefined));
+  const joinClass = (...list: any[]) => {
+    const out = list.filter((v) => v !== undefined && v !== null && v !== '' && !(isArray(v) && !v.length));
+    return out.length ? (out.length === 1 ? out[0] : out) : undefined;
+  };
+  // 子节点容器：child.attrs（可为函数）+ 这一层的栅格；ui-flex 布局时不加栅格和默认间距；写了 class 时由外部接管间距（与根元素一致）
+  const childAttrsOf = (col: any) => {
+    const attrs = col._childAttrs;
+    return (isFunction(attrs) ? attrs(col._data, col, context()) : attrs) || {};
+  };
+  const levelOf = (col: any, flex?: string, styled = false) => {
+    const { 'ui-row': row, ...own } = childAttrsOf(col);
+    const layout = own['ui-flex'] ?? flex;
+    const rows = col.media === false || layout ? '' : String(row ?? col.attrs?.['ui-row'] ?? props.rows ?? '');
+    return { rows, attrs: { ...own, 'ui-row': rows || undefined, class: 'class' in own ? own.class : layout || styled ? undefined : 'n-sl-sub' } };
+  };
+  // 节点元素；无标题分组的节点元素同时是下一层容器
+  const nodeAttrs = (col: any) => {
+    const { 'ui-row': _row, ...own } = col.attrs || {};
+    const out: Record<string, any> = { ...own };
+    const group = isGroup(col);
+    const box = group && !hasLabel(col) && !rowSlot(col);
+    if (col._fid) out.id = col._fid;
+    const media = mediaOf(col);
+    if (media) out['ui-col'] = media;
+    if (box) {
+      // 无标题分组的节点元素就是容器：节点写了 class 时不再加默认间距
+      const level = levelOf(col, own['ui-flex'], own.class !== undefined).attrs;
+      Object.assign(out, level, { class: joinClass(own.class, level.class) });
+    } else if (!isBareContent(col) && own['ui-flex'] === undefined) {
+      out['ui-flex'] = isVertical(col) ? 'col xm' : 'row lt';
+    }
+    if (props.debug) {
+      out['data-path'] = fieldPath(col) || undefined;
+      out.title = debugInfo(col);
+    }
+    if (isCleared(col)) out.style = joinClass(own.style, { display: 'none' });
+    return out;
+  };
+  // 有标题分组的子节点容器
+  const boxAttrs = (col: any) => {
+    const { attrs } = levelOf(col);
+    return { ...attrs, class: joinClass('flex-block', attrs.class) };
+  };
+  const levelProps = () => ({
+    bare: true,
+    root: rootData.value,
+    mode: props.mode,
+    interacted: props.interacted,
+    colon: props.colon,
+    labelClass: props.labelClass,
+    labelWidth: props.labelWidth,
+    vertical: props.vertical,
+    debug: props.debug,
+    idx: baseIdx.value,
+  });
+  const childProps = (col: any) => ({
+    ...levelProps(),
+    form: col.child || [],
+    clearContext: { value: isCleared(col), restore: canRestore(col) },
+    arrayContext: props.arrayContext,
+    data: childData(col),
+    path: fieldPath(col),
+    index: props.index,
+    rows: levelOf(col, hasLabel(col) ? undefined : col.attrs?.['ui-flex']).rows,
+  });
+  // 数组：行栅格、行元素、行内字段区
+  const hasActions = (col: any) => editable.value && (hasSlot(`${col.field}-actions`) || !!col._array.sortable || col._array.del !== false);
+  const rowRows = (col: any) => (col.media === false ? '' : col._array.rows || col.attrs?.['ui-row'] || props.rows || '');
+  const rowAttrs = (col: any) => {
+    const own = col._array.attrs || {};
+    const out: Record<string, any> = { ...own, 'ui-col': own['ui-col'] || 'mob-24', class: joinClass('mb-xs', own.class) };
+    if (hasActions(col)) {
+      if (own['ui-flex'] === undefined) out['ui-flex'] = 'row lt';
+    } else if (own['ui-flex'] === undefined) {
+      // 没有操作按钮时行元素本身承载这一行的字段
+      out['ui-row'] = rowRows(col) || undefined;
+      out.class = joinClass('mb-xs', own.class ?? 'n-sl-sub');
+    }
+    return out;
+  };
+  const rowBox = (col: any) => ({ class: 'flex-block n-sl-sub', 'ui-row': rowRows(col) || undefined });
+  const rowProps = (col: any, row: any, i: number) => ({
+    ...levelProps(),
+    form: col._array.child,
+    arrayContext: arrayContext(col, row),
+    data: row,
+    path: `${fieldPath(col)}.${i}`,
+    index: i,
+    rows: hasActions(col) || (col._array.attrs || {})['ui-flex'] === undefined ? rowRows(col) : '',
+  });
+
   // 表单默认标签宽度；单个标签用 label[1].style 覆盖。
   const widthOf = (value: any) => {
     if (value === 'auto') return '';
@@ -778,9 +859,8 @@
     return style ? style.replace(/^width:([^;]+);.*$/, 'padding-left:$1;') : '';
   });
 
-  // 分组、数组的路径和 id 前缀
+  // 字段数据路径（也是字段 id 的主体）
   const fieldPath = (col: any = {}) => [props.path, col.paths, col.field].filter(Boolean).join('.');
-  const childIdx = (col: any = {}, idx: number) => [baseIdx.value, col.field || `g${idx}`].filter((v: any) => v !== '').join('-');
   const childData = (col: any = {}) => (col.field ? col._data[col.field] : col._data);
   const listOf = (col: any = {}) => (isArray(col._data?.[col.field]) ? col._data[col.field] : []);
 
@@ -800,7 +880,7 @@
   const initialOf = (item: any = {}) => {
     if (valueBinding(item.value) && item.value.default !== undefined) return deepcopy(item.value.default);
     if (item.array) return [];
-    if (isArray(item.child)) return {};
+    if (childList(item.child)) return {};
     return emptyValueOf(isString(item.model) || isArray(item.model) ? normalizeModel(item.model) : ['']);
   };
 
@@ -885,6 +965,7 @@
     apply: (target, key, result) => {
       target[key] = key === 'model' ? normalizeModel(result) : result;
       if (key === 'array') target._array = result ? normalizeArray(result) : null;
+      if (key === 'child') splitChild(target);
       if (key === 'child' || key === 'array') initializeField(target);
     },
   });
@@ -925,6 +1006,7 @@
       if (isObject(item)) {
         linkage.resolve(item, idx, tasks);
       }
+      splitChild(item);
 
       item._array = item.array ? normalizeArray(item.array) : item._kind === 'array' ? { child: [] } : null;
 
@@ -941,7 +1023,7 @@
       }
 
       // 添加ID
-      item._fid = `form-${baseIdx.value !== '' ? baseIdx.value + '-' : ''}${!item.field && isGroup(item) ? `group-${idx}` : `field-${item.field || `node-${idx}`}`}`;
+      item._fid = item.field ? [baseIdx.value, fieldPath(item).replace(/\./g, '-')].filter(Boolean).join('-') : '';
 
       // 数据路径处理
       item._data = resolvePath(props.data, item.paths);
@@ -953,9 +1035,6 @@
         fields.add(key);
         initializeField(item);
       }
-
-      // 分组、数组默认占满一行
-      if ((isGroup(item) || item._array) && !item.media) item.media = 'mob-24';
       return item;
     });
     linkage.start(tasks);
@@ -984,14 +1063,15 @@
   watch(
     [() => state.form, () => props.data, () => props.clearContext],
     () => {
-      state.form.forEach((item: any = {}) => {
+      state.form.forEach((item: any = {}, idx: number) => {
         if (isGroup(item)) return; // 保留递归实例，由解析后的子节点各自清空和恢复。
         const cache = canRestore(item) ? shared.cache : undefined;
+        const key = item._fid || `#${idx}`;
         if (isCleared(item)) {
-          hiddenFields.add(item._fid);
+          hiddenFields.add(key);
           emptyField(resolvePath(props.data, item.paths), item.field, cache);
-        } else if (hiddenFields.has(item._fid) || firstRun) {
-          hiddenFields.delete(item._fid);
+        } else if (hiddenFields.has(key) || firstRun) {
+          hiddenFields.delete(key);
           if (cache) restoreField(resolvePath(props.data, item.paths), item.field, cache);
         }
       });

package/src/components/loader/FormLoader/FormRender.vue

@@ -1,9 +1,12 @@
 <template>
-  <div ref="root" class="flex-block pr" @focusout="col._touched = true">
+  <button v-if="bare && col.model[0] === 'Button'" type="button" ui-btn="@a s" v-bind="contentAttrs" v-on="events"><template v-if="plain !== null">{{ plain }}</template><FieldExtra v-else :value="displayOf(col, ctx)" :trusted="trusted" /></button>
+  <div v-else-if="bare && col.model[0] === 'Html' && trusted" v-bind="contentAttrs" v-on="events" v-html="displayOf(col, ctx)"></div>
+  <div v-else-if="bare" v-bind="contentAttrs" v-on="events"><template v-if="plain !== null">{{ plain }}</template><FieldExtra v-else :value="displayOf(col, ctx)" :trusted="trusted" /></div>
+  <div v-else ref="root" class="flex-block pr" @focusout="col._touched = true">
     <slot v-if="custom" />
-    <button v-else-if="col.model[0] === 'Button'" type="button" ui-btn="@a s" v-bind="contentAttrs" v-on="events"><FieldExtra :value="displayOf(col, ctx)" :trusted="trusted" /></button>
+    <button v-else-if="col.model[0] === 'Button'" type="button" ui-btn="@a s" v-bind="contentAttrs" v-on="events"><template v-if="plain !== null">{{ plain }}</template><FieldExtra v-else :value="displayOf(col, ctx)" :trusted="trusted" /></button>
     <div v-else-if="col.model[0] === 'Html' && trusted" v-bind="contentAttrs" v-on="events" v-html="displayOf(col, ctx)"></div>
-    <div v-else-if="col.model[0] === 'Html' || col.model[0] === 'Text'" v-bind="contentAttrs" v-on="events"><FieldExtra :value="displayOf(col, ctx)" :trusted="trusted" /></div>
+    <div v-else-if="col.model[0] === 'Html' || col.model[0] === 'Text'" v-bind="contentAttrs" v-on="events"><template v-if="plain !== null">{{ plain }}</template><FieldExtra v-else :value="displayOf(col, ctx)" :trusted="trusted" /></div>
     <div v-else-if="(mode === 'view' && !entry?.view) || entry?.component === FieldView" class="flex-block o-ls" :class="clh(col.model?.[1] || {})" v-on="events">{{ text }}</div>
     <component
       v-else-if="entry"
@@ -108,13 +111,21 @@
     item?: Record<string, any> | (() => Record<string, any>);
   }
 
+  /** 子节点容器：attrs 描述这一层容器（可以是函数），lists / child 是子节点 */
+  export interface FormChild {
+    attrs?: Record<string, any> | ((data: any, item: any, ctx: FormContext) => Record<string, any>);
+    lists?: FormItem[];
+    child?: FormItem[];
+  }
+
   /** 基础节点：标题和子节点复用同一套配置，不为装饰或交互增加专用字段。 */
   export interface FormItem {
     label?: Dynamic<string | [string, Record<string, any>] | FormItem[]>;
     field?: string;
     // 固定内容、{ text, html, attrs } 内容对象、VNode、数组；绑定字段时用 { default, get, set }；也可以是函数或联动配置
     value?: FormValue | FormContent | FormSetup | FormLinkage<FormContent>;
-    child?: Dynamic<FormItem[]>;
+    // 子节点；{ attrs, lists } 时 attrs 落在承载子节点的容器上（无标题分组即节点元素本身）
+    child?: Dynamic<FormItem[]> | FormChild;
     attrs?: Dynamic<Record<string, any>>;
     clear?: Dynamic<boolean | { value: boolean; restore?: boolean }>;
     enums?: Dynamic<any[]>;
@@ -123,7 +134,8 @@
     model?: Dynamic<string | [string, Record<string, any>?]>;
     rules?: Dynamic<FormRule[]>;
     // 兼容原有布局和数据路径；普通容器布局也可直接使用 attrs。
-    media?: Dynamic<string>;
+    /** 自身 ui-col（只在所在层有栅格时输出）；false 表示不用栅格：自身不带 ui-col，分组 / 数组的下一层也不带 ui-row */
+    media?: Dynamic<string | false>;
     vertical?: Dynamic<boolean>;
     paths?: string;
     // 4.x 兼容：自定义插槽名；字段级冒号（false 不显示，string 自定义字符）
@@ -253,7 +265,7 @@
     return handlers;
   };
 
-  // 内容渲染：字符串按文本渲染；VNode 原样渲染；{ text, html, attrs } 只有 html 为 true 且内容来自配置时才按 HTML 渲染
+  // 内容渲染：字符串直接输出文本节点；VNode 原样渲染；{ text, html, attrs } 需要属性才包 span，只有 html 为 true 且内容来自配置时才按 HTML 渲染
   const render = (value: any, trusted: boolean): any => {
     if (value === null || value === undefined || value === '') return null;
     if (isVNode(value)) return value;
@@ -262,18 +274,19 @@
       const { text = '', html = false, attrs = {} } = value;
       return html && trusted ? h('span', { ...attrs, innerHTML: text }) : h('span', trusted ? attrs : {}, String(text));
     }
-    return h('span', String(value));
+    return String(value);
   };
 
   export const FieldMessage = defineComponent({
     props: ['col', 'mode'],
+    // 没有内容时返回空数组：客户端渲染不留占位注释
     setup: (props) => () => props.mode !== 'view' ? [
       props.col.model?.[1]?.verify && props.col._checked
         ? h('i', { 'ui-form-verify': props.col._error ? 'no' : isEmpty(props.col._data?.[props.col.field]) ? '' : 'ok', 'aria-hidden': 'true' }) : null,
       props.col._error ? h('p', { id: `${props.col._fid}-error`, 'data-field-error': props.col.field,
           role: props.col._error.type === 'warn' ? 'status' : 'alert',
           class: `mt-xs ${props.col._error.type === 'warn' ? 'co-warn' : 'co-risk'}` }, props.col._error.msg) : null,
-    ] : null,
+    ].filter(Boolean) : [],
   });
 
   export const FieldExtra = defineComponent({
@@ -396,6 +409,8 @@
     mode?: string;
     ctx: FormContext;
     custom?: boolean;
+    // 无标题的内容节点：不包字段容器，直接输出内容元素，节点 attrs 透传到这个元素上（模板根部不能有注释）
+    bare?: boolean;
   }>();
   // 在选项树里按 value 找 label
   const findLabel = (options: any[] = [], value: any): any => {
@@ -436,6 +451,12 @@
     const { value } = props.col;
     return value !== undefined && (!valueBinding(value) || isFunction(value.get));
   });
+  // 字符串、数字、布尔直接输出文本（空值不留占位注释）；VNode、{ text, html }、数组交给 FieldExtra
+  const plain = computed(() => {
+    const value = displayOf(props.col, props.ctx);
+    if (value === null || value === undefined) return '';
+    return typeof value === 'object' ? null : String(value);
+  });
   const events = computed(() => eventsOf(props.col, props.ctx));
   // 先写回数据再通知配置里的 update:modelValue，与插槽的 update 顺序一致。
   const controlEvents = computed(() => {