@dongmingzhixiu/vuexir-compiler 0.6.0 → 0.7.0

package/dist/codegen/swiftui.js

@@ -1,3 +1,4 @@
+import { dynamicVectorSwiftHelpers, wrapLayoutSwiftHelpers } from './dynamic-vector.js';
 /**
  * SwiftUI 生成器 v0（P0.3）
  *
@@ -21,6 +22,8 @@
  * P0 简化声明：justifyContent 仅 start/center/spaceBetween；breakpoints 未实现；
  * flex 仅支持容器主轴方向的 maxHeight/maxWidth:.infinity。
  */
+import { flattenTextRuns, loopBinding, swiftBoundValue } from './bindings.js';
+import { swiftVector } from './vector.js';
 /* ============ 颜色表达式 ============ */
 let currentCssVars;
 function parseColor(c) {
@@ -44,7 +47,7 @@ function parseColor(c) {
         return { r: +m[1], g: +m[2], b: +m[3], a: m[4] !== undefined ? +m[4] : 1 };
     return { r: 0, g: 0, b: 0, a: 1 };
 }
-function colorExpr(c) {
+export function colorExpr(c) {
     const p = parseColor(c);
     if (p.mode === 'theme' && p.name)
         return `ThemeColor.color("${p.name}")`;
@@ -129,7 +132,7 @@ export function buildTheme(tokens) {
     return { colorNames, fontNames };
 }
 /** R42 生成 Theme.swift（颜色/字体去重常量） */
-export const VRN_HELPERS_SWIFT = `import Foundation
+export const VRN_HELPERS_SWIFT = dynamicVectorSwiftHelpers + wrapLayoutSwiftHelpers + `import Foundation
 import SwiftUI
 
 // vuexir 运行时辅助（R78 对象字段取值）
@@ -166,11 +169,43 @@ private func vrnFieldRaw(_ json: String, _ path: String) -> String {
         }
         if let d = cur as? [String: Any], let next = d[seg] { cur = next } else { return "" }
     }
+    if cur is NSNull { return "" }
     if let s = cur as? String { return s }
-    if let b = cur as? Bool { return b ? "true" : "false" }
-    if let n = cur as? NSNumber { return n.stringValue }
+    if let n = cur as? NSNumber {
+        if CFGetTypeID(n) == CFBooleanGetTypeID() { return n.boolValue ? "true" : "false" }
+        return n.stringValue
+    }
     return String(describing: cur)
 }
+
+func vrnItemField(_ item: Any, _ path: String) -> String {
+    var value: Any = item
+    for part in path.split(separator: ".").map(String.init) {
+        if let map = value as? [String: Any], let next = map[part] { value = next }
+        else if let array = value as? [Any], let index = Int(part), array.indices.contains(index) { value = array[index] }
+        else { return "" }
+    }
+    if value is NSNull { return "" }
+    if let number = value as? NSNumber {
+        if CFGetTypeID(number) == CFBooleanGetTypeID() { return number.boolValue ? "true" : "false" }
+        return number.stringValue
+    }
+    return String(describing: value)
+}
+
+struct VrnFractionWidth: Layout {
+    var fraction: Double
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        guard let view = subviews.first else { return .zero }
+        let width = (proposal.width ?? view.sizeThatFits(.unspecified).width) * fraction
+        let size = view.sizeThatFits(ProposedViewSize(width: width, height: proposal.height))
+        return CGSize(width: width, height: size.height)
+    }
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        subviews.first?.place(at: bounds.origin, anchor: .topLeading, proposal: ProposedViewSize(bounds.size))
+    }
+}
+
 `;
 export function generateThemeSource(palette) {
     const lines = ['import SwiftUI', '', '// GENERATED by vue-render-native compiler · R42 theme tokens', 'enum Theme {'];
@@ -314,10 +349,16 @@ function gapInheritFor(child, parentGap, siblings) {
 function sizeModifiers(props, axis, ctx) {
     const mods = [];
     const { width, height, flex } = props;
+    if (props.widthDynamic)
+        mods.push(`.frame(width: max(0, Double(String(${swiftBoundValue(props.widthDynamic, ctx.runtime)})) ?? 0))`);
+    if (props.heightDynamic)
+        mods.push(`.frame(height: max(0, Double(String(${swiftBoundValue(props.heightDynamic, ctx.runtime)})) ?? 0))`);
     if (width === 'fill')
         mods.push(frameExpr('fillW'));
     else if (typeof width === 'number')
         mods.push(`.frame(width: ${width})`);
+    if (height === 'fill')
+        mods.push('.frame(maxHeight: .infinity)');
     if (typeof height === 'number')
         mods.push(`.frame(height: ${height})`);
     if (flex !== undefined) {
@@ -420,12 +461,28 @@ function capsuleColorExpr(c) {
     const name = currentColorNames?.get(hex);
     return name !== undefined ? `Theme.${name}` : `Color(red: ${r}/255.0, green: ${g}/255.0, blue: ${b}/255.0)`;
 }
-function boxModifiers(props) {
+export function boxModifiers(props) {
     const mods = [];
+    if (props.gradient) {
+        const a = props.gradient.angle * Math.PI / 180;
+        const x = Math.sin(a) / 2, y = -Math.cos(a) / 2;
+        const n = (v) => Number(v.toFixed(5));
+        const stops = props.gradient.stops.map((s) => `.init(color: ${colorExpr(s.color === 'transparent' ? 'rgba(0,0,0,0)' : s.color)}, location: ${s.offset})`).join(', ');
+        if (props.gradient.kind === 'radial')
+            mods.push(`.background(GeometryReader { geo in RadialGradient(stops: [${stops}], center: UnitPoint(x: ${props.gradient.center?.x ?? .5}, y: ${props.gradient.center?.y ?? .5}), startRadius: 0, endRadius: max(geo.size.width, geo.size.height)) })`);
+        else
+            mods.push(`.background(LinearGradient(stops: [${stops}], startPoint: UnitPoint(x: ${n(.5 - x)}, y: ${n(.5 - y)}), endPoint: UnitPoint(x: ${n(.5 + x)}, y: ${n(.5 + y)})))`);
+    }
+    if (props.minWidth !== undefined || props.minHeight !== undefined) {
+        const args = [props.minWidth !== undefined ? `minWidth: ${props.minWidth}` : '', props.minHeight !== undefined ? `minHeight: ${props.minHeight}` : ''].filter(Boolean);
+        mods.push(`.frame(${args.join(', ')})`);
+    }
     if (props.background !== undefined)
         mods.push(`.background(${colorExpr(props.background)})`);
     if (props.radius !== undefined)
         mods.push(`.cornerRadius(${props.radius})`);
+    if (props.shadow)
+        mods.push(`.shadow(color: ${colorExpr(props.shadow.color)}, radius: ${props.shadow.blur / 2}, x: ${props.shadow.x}, y: ${props.shadow.y})`);
     if (props.borderWidth !== undefined && props.borderColor !== undefined && props.borderWidth > 0) {
         mods.push(`.overlay(RoundedRectangle(cornerRadius: ${props.radius ?? 0}).stroke(${colorExpr(props.borderColor)}, lineWidth: ${props.borderWidth}))`);
     }
@@ -457,6 +514,7 @@ function emitChildren(children, axis, ctx, alignRaw = 'stretch', stretchCross =
     return children
         .map((c, i) => {
         const childCtx = {
+            ...ctx,
             parentAxis: axis,
             level: ctx.level,
             definiteHeight: ctx.definiteHeight,
@@ -501,7 +559,7 @@ function emitChildren(children, axis, ctx, alignRaw = 'stretch', stretchCross =
             // column：仅默认 stretch 时子项填满父宽（div block 语义）；显式 start/center/end → 内容宽对齐
             const explicitCol = alignRaw === 'start' || alignRaw === 'center' || alignRaw === 'end';
             if (!explicitCol) {
-                return body + '\n' + indent(ctx.level) + frameExpr('fillW', '.leading');
+                return body + '\n' + indent(ctx.level) + frameExpr('fillW', c.props?.textAlign === 'center' ? '.center' : c.props?.textAlign === 'right' ? '.trailing' : '.leading');
             }
             return body;
         }
@@ -517,19 +575,44 @@ function emitChildren(children, axis, ctx, alignRaw = 'stretch', stretchCross =
     })
         .join('\n');
 }
+let sectionNodes = new WeakMap();
+let sectionSources = [];
+function conditionNames(ctx) {
+    const names = new Set(ctx.stateNames ?? currentStateNames);
+    if (ctx.loop) {
+        names.add(ctx.loop.itemKey);
+        if (ctx.loop.indexKey)
+            names.add(ctx.loop.indexKey);
+    }
+    return names;
+}
 function emitNode(node, ctx) {
+    const section = sectionNodes.get(node);
+    if (section) {
+        sectionNodes.delete(node);
+        const source = emitNode(node, { ...ctx, level: 2 });
+        const aliases = ctx.loopAliases ?? [];
+        sectionSources.push(aliases.length ? `    @ViewBuilder private func ${section}(${aliases.map((a) => `_ ${a}: Any`).join(", ")}) -> some View {\n${source}\n    }` : `    @ViewBuilder private var ${section}: some View {\n${source}\n    }`);
+        return indent(ctx.level) + section + (aliases.length ? `(${aliases.join(", ")})` : "");
+    }
     if (node.condition) {
         const L = ctx.level;
         const inner = emitNodeInner(node, ctx);
         const known = ctx.stateNames && ctx.stateNames.size > 0 ? ctx.stateNames : undefined;
-        const swiftCond = swiftCondExpr(node.condition, known);
+        const swiftCond = swiftCondExpr(node.condition, conditionNames(ctx), ctx.runtime);
         return `${indent(L)}if ${swiftCond} {\n${inner}\n${indent(L)}}`;
     }
     return emitNodeInner(node, ctx);
 }
 /** JS 条件表达式 → Swift 兼容：===/!== 为 JS 严格比较，Swift 用 ==/!=；字符串字面量单引号 → 双引号 */
-function swiftCondExpr(expr, known) {
+function swiftCondExpr(expr, known, runtime = 'Runtime.shared') {
+    const binding = expr.startsWith('__vrnCond:') ? expr.slice(10) : expr;
+    if (loopBinding(binding))
+        return `vrnTruthy(${swiftBoundValue(binding, runtime)})`;
     // R128：下沉的条件状态 → 判真；不在已知集（组件/无状态上下文）→ true 保留内容
+    const field = expr.match(/^__vrnField__:(\w+):(\w+)$/);
+    if (field)
+        return `vrnTruthy(vrnField(${field[1]}, "${field[2]}"))`;
     const sunk = expr.match(/^__vrnCond:(\w+)$/);
     if (sunk) {
         const nm = sunk[1];
@@ -570,7 +653,7 @@ function swiftCondExpr(expr, known) {
     if (/&&|\|\|/.test(s) && !/__vrnField__/.test(s) && !/[()]/.test(s)) {
         const parts = s.split(/(&&|\|\|)/);
         return parts
-            .map((seg) => (seg === '&&' || seg === '||' ? seg : swiftCondExpr(seg.trim(), known)))
+            .map((seg) => (seg === '&&' || seg === '||' ? seg : swiftCondExpr(seg.trim(), known, runtime)))
             .join(' ');
     }
     if (/^![A-Za-z_$][\w$]*$/.test(s))
@@ -601,6 +684,15 @@ function emitNodeInner(node, ctx) {
     const L = ctx.level;
     const pad = (s) => indent(L) + s;
     const props = node.props ?? {};
+    if (props.show) {
+        const content = emitNode({ ...node, props: { ...props, show: undefined } }, { ...ctx, level: L + 1 });
+        return pad(`if ${swiftCondExpr(props.show, ctx.stateNames, ctx.runtime)} {`) + `\n${content}\n${pad('}')}`;
+    }
+    if (props.widthFraction !== undefined || props.widthFractionDynamic) {
+        const fraction = props.widthFractionDynamic ? `(Double(String(${swiftBoundValue(props.widthFractionDynamic, ctx.runtime)})) ?? 0)` : String(props.widthFraction);
+        const inner = emitNodeInner({ ...node, props: { ...props, widthFraction: undefined, widthFractionDynamic: undefined } }, { ...ctx, level: ctx.level + 1 });
+        return pad(`VrnFractionWidth(fraction: max(0,min(1,${fraction}))) {`) + `\n${inner}\n${pad('}')}`;
+    }
     const axis = ctx.parentAxis ?? 'column';
     // box-sizing:border-box（CSS 默认）：固定 height 应包含 padding。
     // 故 height 为数字且存在 padding 时，padding 置于 frame(height) 之前、
@@ -629,9 +721,15 @@ function emitNodeInner(node, ctx) {
         }
     }
     // M5 position:absolute → 脱离文档流（父容器已转 ZStack；offset 实现 top/left 定位）
+    if (props.zIndex !== undefined)
+        box.push(`.zIndex(${props.zIndex})`);
     if (props.position === 'absolute') {
+        const fullInset = props.absTop === 0 && props.absLeft === 0 && props.absRight === 0 && props.absBottom === 0;
         const hasRB = props.absRight !== undefined || props.absBottom !== undefined;
-        if (hasRB) {
+        if (fullInset) {
+            box.push('.frame(maxWidth: .infinity, maxHeight: .infinity)');
+        }
+        else if (hasRB) {
             // R131：right/bottom 定位 → 用对齐 + 内边距表达（此前直接丢弃，导致元素重叠、内容被盖住）
             const v = props.absBottom !== undefined ? 'bottom' : props.absTop !== undefined ? 'top' : 'center';
             const h = props.absRight !== undefined ? 'trailing' : props.absLeft !== undefined ? 'leading' : 'center';
@@ -658,7 +756,7 @@ function emitNodeInner(node, ctx) {
     }
     // M5 v-show → opacity 动画切换（保留占位；状态名引用页面/容器同名 @State/@Binding）
     if (props.show !== undefined) {
-        box.push(`.opacity(${props.show} ? 1 : 0)`);
+        box.push(`.opacity(vrnTruthy(String(${props.show})) ? 1 : 0)`);
         box.push(`.animation(.easeInOut(duration: 0.25), value: ${props.show})`);
     }
     // CSS opacity（0~1）：静态透明度（与 v-show 的条件透明叠加）
@@ -683,7 +781,8 @@ function emitNodeInner(node, ctx) {
                     warnings: ctx.warnings,
                     path: `${ctx.path}[${i}]`,
                     inheritGap: gapInheritFor(c, props.gap, node.children ?? []),
-                    loop: ctx.loop, // M2：v-for 作用域透传
+                    loop: ctx.loop,
+                    loopAliases: ctx.loopAliases, // M2：v-for 作用域透传
                     runtime: ctx.runtime, // M4a：页面运行时引用透传
                     dataProps: ctx.dataProps, // R-VFOBJ-D：数据声明收集透传
                 });
@@ -698,7 +797,7 @@ function emitNodeInner(node, ctx) {
             // （浅色模式下是白条），表现为「详情页底部颜色与页面不一致、像高度不够」
             const bgLayer = props.background !== undefined
                 ? indent(L + 1) + `${colorExpr(props.background)}.frame(maxWidth: .infinity, maxHeight: .infinity).ignoresSafeArea()`
-                : null;
+                : props.gradient ? indent(L + 1) + 'Color.clear.ignoresSafeArea()' + boxModifiers({ gradient: props.gradient }).join('') : null;
             // R-PAGESCROLL：页面根 = 可滚动视口（对位 Web 的 body 默认滚动）
             //  - 内容高于视口 → ScrollView 可滚动（此前仅 external tab 页按按钮数启发式包装，详情页不可滚动）
             //  - 内容不足 → minHeight = 视口高，页面仍铺满，Spacer/flex 贴底语义不变
@@ -721,6 +820,14 @@ function emitNodeInner(node, ctx) {
                 .join('\n');
         }
         case 'group': {
+            if (props.flexWrap && node.children) {
+                const children = node.children.map((child, i) => {
+                    const cp = child.props ?? {};
+                    const source = emitNode({ ...child, props: { ...cp, flex: undefined } }, { ...ctx, level: L + 1, parentAxis: 'row', path: ctx.path + '.wrap' + i });
+                    return indent(L + 1) + 'Group {\n' + source + '\n' + indent(L + 1) + '}' + `.layoutValue(key: VrnWrapFlex.self, value: ${cp.flex ?? 0}).layoutValue(key: VrnWrapMin.self, value: ${cp.minWidth ?? 0}).layoutValue(key: VrnWrapBreak.self, value: ${cp.width === 'fill' ? 'true' : 'false'})`;
+                });
+                return pad(`VrnWrapLayout(spacing: ${props.gap ?? 0}) {`) + '\n' + children.join('\n') + '\n' + pad('}') + box.map((m) => ' ' + m).join('');
+            }
             // R136：CSS grid（grid-template-columns: repeat(N,1fr)）→ LazyVGrid
             if (props.gridColumns !== undefined && (node.children?.length ?? 0) > 0) {
                 const cols = props.gridColumns;
@@ -734,13 +841,14 @@ function emitNodeInner(node, ctx) {
                     path: `${ctx.path}[${i}]`,
                     inheritGap: undefined,
                     loop: ctx.loop,
+                    loopAliases: ctx.loopAliases,
                     dataProps: ctx.dataProps,
                 }))
                     .join('\n');
                 return [
                     pad(`LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: ${props.gap ?? 0}), count: ${cols}), spacing: ${props.gap ?? 0}) {`),
                     inner,
-                    pad('}'),
+                    pad('}') + box.map((m) => ' ' + m).join(''),
                 ].join('\n');
             }
             const dir = props.flexDirection ?? 'column';
@@ -776,7 +884,7 @@ function emitNodeInner(node, ctx) {
             if (hasAbsolute && flowChildren.length > 0) {
                 const flowNode = {
                     type: 'group',
-                    props: { ...props, position: undefined, absTop: undefined, absLeft: undefined, absRight: undefined, absBottom: undefined },
+                    props: { flexDirection: props.flexDirection, justifyContent: props.justifyContent, alignItems: props.alignItems, gap: props.gap, padding: props.padding },
                     children: flowChildren,
                 };
                 const flowCode = emitNode(flowNode, {
@@ -788,31 +896,19 @@ function emitNodeInner(node, ctx) {
                     path: `${ctx.path}{flow}`,
                     inheritGap: ctx.inheritGap,
                     loop: ctx.loop,
+                    loopAliases: ctx.loopAliases,
                     dataProps: ctx.dataProps,
                 });
-                const absCode = absChildren
-                    .map((c, i) => emitNode(c, {
-                    parentAxis: dir,
-                    level: L + 1,
-                    definiteHeight: selfDefinite,
-                    warnings: ctx.warnings,
-                    runtime: ctx.runtime,
-                    path: `${ctx.path}{abs${i}}`,
-                    inheritGap: undefined,
-                    loop: ctx.loop,
-                    dataProps: ctx.dataProps,
-                }))
-                    .join('\n');
-                const bg = props.background !== undefined ? pad(`Color(${props.background})`) : null;
-                return [
-                    pad('ZStack(alignment: .topLeading) {'),
-                    bg ? indent(L + 1) + bg.trim() : null,
-                    flowCode,
-                    absCode || null,
-                    pad('}'),
-                ]
-                    .filter((x) => x !== null)
-                    .join('\n');
+                const firstFlow = children.findIndex((c) => c.props?.position !== 'absolute');
+                let result = [pad('ZStack(alignment: .topLeading) {'), flowCode, pad('}')].join('\n');
+                for (const [i, c] of children.entries()) {
+                    if (c.props?.position !== 'absolute')
+                        continue;
+                    const mode = i < firstFlow && (c.props.zIndex ?? 0) <= 0 ? 'background' : 'overlay';
+                    const code = emitNode(c, { ...ctx, level: L + 1, parentAxis: dir, definiteHeight: true, path: `${ctx.path}{abs${i}}`, inheritGap: undefined });
+                    result += `\n${indent(L)}.${mode}(alignment: .topLeading) {\n${code}\n${indent(L)}}`;
+                }
+                return result + box.filter((m) => !m.startsWith('.padding(')).map((m) => ' ' + m).join('');
             }
             // justifyContent：center → 首尾 Spacer；spaceBetween → 子间 Spacer（仅 column 需高度确定）
             const body = [];
@@ -822,7 +918,7 @@ function emitNodeInner(node, ctx) {
             children.forEach((c, i) => {
                 if (just === 'spaceBetween' && justActive && i > 0)
                     body.push(indent(L + 1) + 'Spacer(minLength: 0)');
-                const childCode = emitNode(c, {
+                let childCode = emitNode(c, {
                     parentAxis: dir,
                     level: L + 1,
                     definiteHeight: selfDefinite,
@@ -830,9 +926,18 @@ function emitNodeInner(node, ctx) {
                     runtime: ctx.runtime,
                     path: `${ctx.path}[${i}]`,
                     inheritGap: gapInheritFor(c, props.gap, children),
-                    loop: ctx.loop, // M2：v-for 作用域透传
+                    loop: ctx.loop,
+                    loopAliases: ctx.loopAliases, // M2：v-for 作用域透传
                     dataProps: ctx.dataProps, // R-VFOBJ-D
                 });
+                if (c.condition && (c.props?.marginBottom || c.props?.marginRight || c.props?.marginLeft))
+                    childCode = indent(L + 1) + 'Group {\n' + childCode + '\n' + indent(L + 1) + '}';
+                if (dir === 'column' && c.props?.marginBottom)
+                    childCode += `.padding(.bottom, ${c.props.marginBottom})`;
+                if (dir === 'row' && c.props?.marginRight)
+                    childCode += `.padding(.trailing, ${c.props.marginRight})`;
+                if (dir === 'row' && c.props?.marginLeft)
+                    childCode += `.padding(.leading, ${c.props.marginLeft})`;
                 // 盒模型（R29 重建 div 语义）：margin 用「透明包装容器」表达，而非独立兄弟占位——
                 // VStack(spacing) 对每个独立兄弟前后各计一次 spacing，独立占位会与 gap 叠加双计
                 // （实测：gap16 + margin16 被算成 16+16+16=48pt，CSS 应为 32pt）。
@@ -872,9 +977,9 @@ function emitNodeInner(node, ctx) {
                 else if (c.props?.width === undefined && c.props?.position !== 'absolute') {
                     // column：仅默认 stretch（未显式声明 align-items）时子项填满父宽（div block 语义）；
                     // 显式 start/center/end → 子项按内容宽对齐（CSS 交叉轴对齐语义）
-                    const explicitCol = props.alignItems === 'start' || props.alignItems === 'center' || props.alignItems === 'end';
+                    const explicitCol = (c.props?.alignSelf !== undefined && c.props.alignSelf !== 'stretch') || props.alignItems === 'start' || props.alignItems === 'center' || props.alignItems === 'end';
                     if (!explicitCol) {
-                        body.push(indent(L + 1) + frameExpr('fillW', '.leading'));
+                        body.push(indent(L + 1) + frameExpr('fillW', c.props?.textAlign === 'center' ? '.center' : c.props?.textAlign === 'right' ? '.trailing' : '.leading'));
                     }
                 }
             });
@@ -891,7 +996,7 @@ function emitNodeInner(node, ctx) {
             if (actBg !== undefined) {
                 const actColor = colorExpr(actBg);
                 const base = props.background !== undefined ? colorExpr(props.background) : 'Color.clear';
-                actBox = [`.background(${node.active.when} ? ${actColor} : ${base})`];
+                actBox = [`.background(${swiftCondExpr(node.active.when, conditionNames(ctx), ctx.runtime)} ? ${actColor} : ${base})`];
             }
             const effBox = actBox !== null ? [...actBox, ...box.filter((m) => !m.startsWith('.background('))] : box;
             let out = [pad(open), ...body, pad('}') + effBox.map((m) => ' ' + m).join('')].join('\n');
@@ -915,9 +1020,25 @@ function emitNodeInner(node, ctx) {
             return out;
         }
         case 'text': {
+            if (props.textRuns) {
+                const allowed = ['text', 'bind', 'bindParts', 'textRuns', 'fieldOf', 'ref', 'dynField', 'bindExpr', 'fontSize', 'fontWeight', 'fontFamily', 'color', 'letterSpacing'];
+                const runs = flattenTextRuns(props.textRuns).map((run) => {
+                    const rp = {};
+                    for (const key of allowed)
+                        if (run[key] !== undefined)
+                            rp[key] = run[key];
+                    for (const key of ['fontSize', 'fontWeight', 'fontFamily', 'color'])
+                        rp[key] ??= props[key];
+                    return emitNode({ type: 'text', props: rp }, { ...ctx, level: 0 });
+                });
+                const locals = runs.map((code, i) => `${indent(L + 1)}let _vrnRun${i}: Text = ${code}`).join('\n');
+                const combined = runs.map((_, i) => `_vrnRun${i}`).join(' + ') || 'Text("")';
+                return pad('Group {') + '\n' + locals + '\n' + indent(L + 1) + combined + '\n' + pad('}') + box.map((m) => ' ' + m).join('');
+            }
             // R41：组件 View 内 {{ prop }} → props.ref → Text(prop)（Swift 属性引用，非字面量）
             // M1：页面级 {{ state }} → props.bind / node.bind → Text(<@State 名>)（状态引用，非字面量）
             const isRef = props.ref !== undefined;
+            const loopBound = props.bind && loopBinding(props.bind);
             const bindKey = props.bind ?? node.bind?.key;
             // R133：bind 指向的名字必须是真实状态（或循环变量），否则说明作用域丢失 →
             // 输出空串并告警，绝不能把状态名当文本渲染（日历页出现 Text("_vrnE1") 即是此因）
@@ -925,12 +1046,12 @@ function emitNodeInner(node, ctx) {
                 (currentStateNames.has(bindKey.split('.')[0]) ||
                     (ctx.loop !== undefined && (ctx.loop.itemKey === bindKey.split('.')[0] || ctx.loop.indexKey === bindKey.split('.')[0])));
             const isBind = bindKey !== undefined && bindValid;
-            if (bindKey !== undefined && !bindValid) {
+            if (bindKey !== undefined && !bindValid && !loopBound) {
                 ctx.warnings.push(`${ctx.path}: 绑定「${bindKey}」在原生端无对应状态/循环变量 → 输出空串（R133）`);
             }
             const content = props.text !== undefined ? props.text : '';
             const fs = props.fontSize ?? 15;
-            let line = isRef
+            let line = loopBound ? pad(`Text(${swiftBoundValue(props.bind, ctx.runtime)})`) : isRef
                 ? pad(`Text(${props.ref})`)
                 : props.bindExpr !== undefined
                     ? pad(`Text(${String(props.bindExpr).includes('.') ? '""' : props.bindExpr})`)
@@ -943,7 +1064,7 @@ function emitNodeInner(node, ctx) {
                                     .map((p) => 'text' in p
                                     ? swiftStringEscape(p.text)
                                     : 'bind' in p
-                                        ? currentStateNames.has(p.bind.split('.')[0])
+                                        ? loopBinding(p.bind) ? `\\(${swiftBoundValue(p.bind, ctx.runtime)})` : currentStateNames.has(p.bind.split('.')[0])
                                             ? `\\(${p.bind})`
                                             : '' // R133：无效绑定 → 空串，避免把状态名当文本
                                         : false
@@ -969,16 +1090,20 @@ function emitNodeInner(node, ctx) {
                                         return `Text("${swiftStringEscape(content)}")`;
                                     })());
             line += `.font(${fontExpr(fs, props.fontWeight, 'normal')})`;
+            if (props.fontFamily)
+                line += `.fontDesign(.${props.fontFamily === 'serif' ? 'serif' : props.fontFamily === 'monospace' ? 'monospaced' : 'default'})`;
+            if (props.letterSpacing !== undefined)
+                line += `.tracking(${props.letterSpacing})`;
             // M2 :style 动态 → 运行时从 state 读取（fontSize 数值 / color hex 字符串）
             if (props.fontSizeDynamic !== undefined) {
-                line += `.font(.system(size: ${props.fontSizeDynamic}))`;
+                line += `.font(.system(size: ${swiftBoundValue(props.fontSizeDynamic, ctx.runtime)}))`;
             }
             // :class 动态色 → when ? activeColor : baseColor（base 由 vue2ir 注入，缺省白）
             if (props.colorActive) {
-                line += `.foregroundColor(${props.colorActive.when} ? ${colorExpr(props.colorActive.color)} : ${colorExpr(props.color ?? '#ffffff')})`;
+                line += `.foregroundColor(${swiftCondExpr(props.colorActive.when, conditionNames(ctx), ctx.runtime)} ? ${colorExpr(props.colorActive.color)} : ${colorExpr(props.color ?? '#ffffff')})`;
             }
             else if (props.colorDynamic !== undefined) {
-                line += `.foregroundColor(Color(hex: ${props.colorDynamic}))`;
+                line += `.foregroundColor(Color(hex: ${swiftBoundValue(props.colorDynamic, ctx.runtime)}))`;
             }
             else if (props.color !== undefined) {
                 line += `.foregroundColor(${colorExpr(props.color)})`;
@@ -986,8 +1111,9 @@ function emitNodeInner(node, ctx) {
             if (props.textAlign !== undefined && props.textAlign !== 'left') {
                 line += `.multilineTextAlignment(${ALIGN_MAP[props.textAlign]})`;
             }
-            if (props.lineHeight !== undefined && props.fontSize !== undefined && props.lineHeight > props.fontSize) {
-                line += `.lineSpacing(${props.lineHeight - props.fontSize})`;
+            const lineHeight = props.lineHeightMultiplier !== undefined ? fs * props.lineHeightMultiplier : props.lineHeight;
+            if (lineHeight !== undefined && lineHeight > fs) {
+                line += `.lineSpacing(${Number((lineHeight - fs).toFixed(4))})`;
             }
             // R-FLEXALIGN：text-align 对单行 Text 无效（multilineTextAlignment 只影响多行行内对齐），
             // 需通过 frame alignment 生效。flex:1（fillW0）或 fillW 的 frame 默认 .center → 右/左对齐丢失。
@@ -1030,13 +1156,21 @@ function emitNodeInner(node, ctx) {
             // R-BTNEMPTY：无事件的 button 也必须带 action 参数（Button(action:) 必填，空 action 会生成 Button() 不可编译）
             const action = actionExpr(props, ctx) ?? (ctx.warnings.push(`${ctx.path}: button 无 onSet/onClick，生成空 action（不可交互）`), '{}');
             let line = pad(`Button(action: ${action}) {`);
-            line += `\n${indent(L + 1)}Text("${swiftStringEscape(label)}")`;
+            if (props.icon) {
+                line += `\n${indent(L + 1)}${swiftVector({ vector: props.icon.vector, color: props.color }, colorExpr).split('\n').join('\n' + indent(L + 1))}.frame(width: ${props.icon.width}, height: ${props.icon.height})`;
+                if (label.trim() && label !== '按钮')
+                    line += `\n${indent(L + 1)}Text(${props.bind ? swiftBoundValue(label, ctx.runtime) : `"${swiftStringEscape(label)}"`})`;
+            }
+            else
+                line += `\n${indent(L + 1)}Text(${props.bind ? swiftBoundValue(label, ctx.runtime) : `"${swiftStringEscape(label)}"`})`;
             line += `.font(${fontExpr(fs, props.fontWeight, 'medium')})`;
+            if (props.fontFamily)
+                line += `.fontDesign(.${props.fontFamily === 'serif' ? 'serif' : props.fontFamily === 'monospace' ? 'monospaced' : 'default'})`;
             if (props.fontSizeDynamic !== undefined) {
-                line += `.font(.system(size: ${props.fontSizeDynamic}))`;
+                line += `.font(.system(size: ${swiftBoundValue(props.fontSizeDynamic, ctx.runtime)}))`;
             }
             if (props.colorDynamic !== undefined) {
-                line += `.foregroundColor(Color(hex: ${props.colorDynamic}))`;
+                line += `.foregroundColor(Color(hex: ${swiftBoundValue(props.colorDynamic, ctx.runtime)}))`;
             }
             else if (props.color !== undefined) {
                 line += `.foregroundColor(${colorExpr(props.color)})`;
@@ -1058,11 +1192,15 @@ function emitNodeInner(node, ctx) {
                 ? pad(`TextField("${swiftStringEscape(placeholder)}", text: $${props.value})`)
                 : pad(`TextField("${swiftStringEscape(placeholder)}", text: .constant(""))`);
             line += `.font(${fontExpr(fs, props.fontWeight, 'normal')})`;
+            if (props.fontFamily)
+                line += `.fontDesign(.${props.fontFamily === 'serif' ? 'serif' : props.fontFamily === 'monospace' ? 'monospaced' : 'default'})`;
+            if (props.letterSpacing !== undefined)
+                line += `.tracking(${props.letterSpacing})`;
             if (props.fontSizeDynamic !== undefined) {
-                line += `.font(.system(size: ${props.fontSizeDynamic}))`;
+                line += `.font(.system(size: ${swiftBoundValue(props.fontSizeDynamic, ctx.runtime)}))`;
             }
             if (props.colorDynamic !== undefined) {
-                line += `.foregroundColor(Color(hex: ${props.colorDynamic}))`;
+                line += `.foregroundColor(Color(hex: ${swiftBoundValue(props.colorDynamic, ctx.runtime)}))`;
             }
             else if (props.color !== undefined) {
                 line += `.foregroundColor(${colorExpr(props.color)})`;
@@ -1086,12 +1224,15 @@ function emitNodeInner(node, ctx) {
                 parentAxis: dir,
                 level: L + 1,
                 definiteHeight: scrollDefinite,
+                dataProps: ctx.dataProps,
+                stateNames: ctx.stateNames,
                 runtime: ctx.runtime,
                 warnings: ctx.warnings,
                 path: ctx.path,
                 // 孙级透传源：scroll 自身 gap 优先，其次父级透传 gap
                 inheritGap: props.gap ?? ctx.inheritGap,
-                loop: ctx.loop, // M2：v-for 作用域透传
+                loop: ctx.loop,
+                loopAliases: ctx.loopAliases, // M2：v-for 作用域透传
             }, alignRaw, props.alignItems === 'stretch');
             const body = pad(`ScrollView(.vertical, showsIndicators: ${props.showsIndicators ?? true}) {`) +
                 `\n${indent(L + 1)}VStack(alignment: ${FLEX_START_MAP[alignRaw] ?? '.leading'}, spacing: ${spacing}) {` +
@@ -1101,10 +1242,13 @@ function emitNodeInner(node, ctx) {
             return body + box.map((m) => ' ' + m).join('');
         }
         case 'spacer': {
-            const h = props.height;
-            // height 只接受数字（'fill'/'auto' 原样内插会生成非法 Swift）
-            const hNum = typeof h === 'number' ? h : undefined;
-            return pad(hNum !== undefined ? `Spacer().frame(height: ${hNum})` : 'Spacer(minLength: 0)');
+            const decorated = props.background !== undefined || props.gradient !== undefined || props.radius !== undefined || props.borderWidth !== undefined;
+            if (!decorated && props.flex !== undefined)
+                return pad('Spacer(minLength: 0)') + box.map((m) => ' ' + m).join('');
+            let code = pad('Color.clear');
+            if (props.height === undefined && props.heightDynamic === undefined && props.minHeight === undefined && props.flex === undefined)
+                code += '.frame(height: 0)';
+            return code + box.map((m) => ' ' + m).join('');
         }
         case 'divider': {
             let line = pad('Rectangle()');
@@ -1113,15 +1257,25 @@ function emitNodeInner(node, ctx) {
             line += frameExpr('fillW');
             return line + box.map((m) => ' ' + m).join('');
         }
+        case 'vector':
+            if (props.aspectRatio)
+                box.unshift(`.aspectRatio(${props.aspectRatio}, contentMode: .fit)`);
+            return pad(swiftVector(props, colorExpr, (name) => swiftBoundValue(name, ctx.runtime)).split('\n').join('\n' + indent(L))) + box.map((m) => ' ' + m).join('');
         case 'image': {
-            const w = typeof props.width === 'number' ? props.width : 40;
-            const h = typeof props.height === 'number' ? props.height : 40;
-            // box（absolute/transform/v-show/padding）与通用分支一致拼接，避免定位/显隐静默失效
-            return pad(`RoundedRectangle(cornerRadius: ${props.radius ?? 0})`)
-                + `.fill(Color.gray.opacity(0.25))`
-                + `.frame(width: ${w}, height: ${h})`
-                + `.overlay(Text("img"))`
-                + box.map((m) => ' ' + m).join('');
+            const source = props.src ?? '';
+            let image;
+            if (/^data:image\/[^;]+;base64,/.test(source)) {
+                const base64 = source.slice(source.indexOf(',') + 1);
+                image = `Image(uiImage: UIImage(data: Data(base64Encoded: "${base64}") ?? Data()) ?? UIImage()).resizable()`;
+            }
+            else if (/^https?:\/\//.test(source)) {
+                image = `AsyncImage(url: URL(string: "${swiftStringEscape(source)}")) { image in image.resizable() } placeholder: { Color.clear }`;
+            }
+            else {
+                image = `Image(uiImage: UIImage(named: "${swiftStringEscape(source.replace(/^bundle:\/\//, ''))}") ?? UIImage()).resizable()`;
+            }
+            image += props.objectFit === 'contain' ? '.scaledToFit()' : '.scaledToFill()';
+            return pad(image) + box.map((m) => ' ' + m).join('');
         }
         case 'component': {
             // R41 使用点：<Name>View(prop1: "…", prop2: …) + 位置修饰（flex/width 来自组件根布局 props）
@@ -1165,6 +1319,7 @@ function emitNodeInner(node, ctx) {
                 warnings: ctx.warnings,
                 path: `${ctx.path}.for[${i}]`,
                 loop: { itemKey: vf.itemKey, indexKey: vf.indexKey, indexVar },
+                loopAliases: [...(ctx.loopAliases ?? []), vf.itemKey, ...(vf.indexKey ? [vf.indexKey] : [])],
                 dataProps: ctx.dataProps, // R-VFOBJ-D
             }));
             let body;
@@ -1180,7 +1335,7 @@ function emitNodeInner(node, ctx) {
                 body =
                     `Group {\n` +
                         indent(L + 1) +
-                        `if let _vrnArr = try? JSONSerialization.jsonObject(with: Data(${vf.listState}.utf8)) as? [Any] {\n` +
+                        `if let _vrnArr = try? JSONSerialization.jsonObject(with: Data(${swiftBoundValue(vf.listState, ctx.runtime)}.utf8)) as? [Any] {\n` +
                         indent(L + 2) +
                         `ForEach(Array(_vrnArr.enumerated()), id: \\.offset) { _vrnPair in\n` +
                         indent(L + 3) +
@@ -1220,6 +1375,8 @@ function emitNodeInner(node, ctx) {
 /** M7 导航栏与沉浸式：navBar 配置 → SwiftUI 修饰符（参数标准 R66） */
 function navBarModifiers(screen, warnings) {
     const nav = screen.navBar;
+    if (nav?.hidden)
+        return '    .toolbar(.hidden, for: .navigationBar)';
     if (!nav) {
         // R66 兜底：页面未声明 navBar 时用 IR title（多页模式 = 路由 meta.title）渲染页面级导航栏，
         // 对位 Android 详情页 TopAppBar（标题 + 系统返回箭头）。iOS 26 容器级 navigationTitle 不生效（R68），
@@ -1293,6 +1450,22 @@ export function generateScreenSource(screen, opts = {}) {
     const warnings = opts.warnings ?? [];
     // R-PAGESCROLL：根容器始终为可滚动视口（见 emitNode root 分支），无需内容高度启发式
     const dataProps = [];
+    sectionNodes = new WeakMap();
+    sectionSources = [];
+    const count = (n) => 1 + (n.children ?? []).reduce((sum, c) => sum + count(c), 0);
+    // 把较大页面的独立顶层段落拆成 ViewBuilder 属性，避免 SwiftUI 泛型表达式超时。
+    if (count(screen.ui) > 6) {
+        let sequence = 0;
+        const split = (node, depth) => {
+            const large = count(node) >= 2 || (node.props?.textRuns?.length ?? 0) > 3 ||
+                (node.props?.vector?.shapes.reduce((sum, s) => sum + s.commands.length, 0) ?? 0) > 12;
+            if (depth >= 2 && large)
+                sectionNodes.set(node, `_vrnSection${sequence++}`);
+            for (const child of node.children ?? [])
+                split(child, depth + 1);
+        };
+        split(screen.ui, 0);
+    }
     const body = emitNode(screen.ui, {
         stateNames: __stateNames,
         parentAxis: 'column',
@@ -1343,6 +1516,7 @@ export function generateScreenSource(screen, opts = {}) {
                 : (() => { const nav = navBarModifiers(screen, warnings); return nav && '\n' + nav; })()) +
             (!opts.bindingMode && hasLogic ? '\n' + onAppearBlock(screen, rt) : ''),
         '    }',
+        ...sectionSources,
         '}',
         '',
     ].join('\n');
@@ -1351,6 +1525,8 @@ export function generateScreenSource(screen, opts = {}) {
  *  页面级 toolbarColorScheme 保证标题浅色（iOS 26 容器级不生效）；页面级不再挂 navigationTitle，
  *  避免 ZStack 常驻多页面时标题取第一个导致切换不跟随 */
 function externalNavBarTitle(screen) {
+    if (screen.navBar?.hidden)
+        return `\n    .toolbar(.hidden, for: .navigationBar)`;
     return `\n    .toolbarColorScheme(.dark, for: .navigationBar)`;
 }
 /** M3：onAppear 注册 @State ↔ stateStore 绑定 + 触发 onMounted（有 JS 逻辑时追加到 root 链尾）
@@ -1397,7 +1573,7 @@ function loopFieldExpr(expr, loop) {
 }
 /** M4b dynField 字段取值：元素可能是动态列表解码出的 Any → 统一 as? [String: Any] 取值（静态 [String:String] 字典同样命中） */
 function dictFieldExpr(varName, field) {
-    return `((${varName} as? [String: Any])?[\"${field}\"] as? String) ?? \"\"`;
+    return `vrnItemField(${varName}, "${field}")`;
 }
 /** 事件 action 体（onSet 状态赋值优先 / onClick JS 运行时）：button 用 `action: <体>`，其余节点用 `.onTapGesture <体>` */
 function actionExpr(props, ctx) {
@@ -1426,6 +1602,10 @@ function loopClickAction(onClick, loop, runtime) {
     if (!loop)
         return null;
     const itemKey = loop.itemKey;
+    if (!onClick.startsWith('router.push(')) {
+        const expression = /^[A-Za-z_$][\w$]*$/.test(onClick) ? onClick + '()' : onClick;
+        return `_ = ${runtime}.evaluateTemplate(${JSON.stringify(expression)}, [${JSON.stringify(itemKey)}: ${itemKey}])`;
+    }
     const re = new RegExp(`${itemKey}\\.([A-Za-z_][\\w$]*)`, 'g');
     if (!re.test(onClick))
         return null;