@dongmingzhixiu/vuexir-compiler 0.6.0 → 0.7.1

package/dist/codegen/compose.js

@@ -11,6 +11,12 @@
 import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, rmSync } from 'node:fs';
 import { join, dirname, basename } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { loadProjectAssets, materializeProjectAssets } from './project-assets.js';
+import { extractCssVariables } from '../transform/css.js';
+import { loadProjectStyles } from './project-styles.js';
+import { flattenTextRuns, loopBinding, kotlinBoundValue } from './bindings.js';
+import { pageJsAndroid } from './page-js-android.js';
+import { kotlinVector } from './vector.js';
 import { vueToIr } from '../transform/vue2ir.js';
 import { validateIr } from '../ir/schema.js';
 // R-PKG：本模块的工程生成入口（runTabs）属于 CLI 职责，产物/样例根均可由环境注入，
@@ -116,6 +122,10 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.ui.graphics.nativeCanvas
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.graphics.asImageBitmap
 
 // Vuexir 深色鎏金主题（对位 iOS Theme.swift）
 val Gold = Color(0xFFD9B36C)
@@ -152,6 +162,20 @@ const RUNTIME_KT = (bundleId) => `package ${bundleId}
 // R85 点路径取值：path 支持 "a.b.c"，末段可为 length/size（数组/对象/字符串长度）
 fun vrnTruthy(v: String): Boolean = v.isNotEmpty() && v != "false" && v != "0" && v != "null" && v != "undefined"
 
+fun vrnItemField(item: Any?, path: String): String {
+    if (item is Map<*, *> && item.containsKey(path)) return item[path]?.toString() ?: ""
+    if (item is org.json.JSONObject && item.has(path)) return item.opt(path)?.takeUnless { it == org.json.JSONObject.NULL }?.toString() ?: ""
+    var value: Any? = item
+    for (part in path.split(".")) value = when (val current = value) {
+        is Map<*, *> -> current[part]
+        is org.json.JSONObject -> current.opt(part)
+        is org.json.JSONArray -> part.toIntOrNull()?.let { current.opt(it) }
+        else -> null
+    }
+    return value?.takeUnless { it == org.json.JSONObject.NULL }?.toString() ?: ""
+}
+
+
 fun vrnField(json: String, path: String, fallback: String = ""): String {
     val raw = vrnFieldRaw(json, path)
     return if (raw.isEmpty()) fallback else raw
@@ -395,7 +419,7 @@ class NavTest {
 /** R-THEME-ANDROID：项目 tokens.css 的 var(--x) 表（默认皮肤 warm 优先，后块不覆盖） */
 let currentCssVars;
 function loadCssVarsAndroid(root) {
-    const map = new Map();
+    const map = new Map(Object.entries(extractCssVariables(loadProjectStyles(root))));
     const roots = [join(root, 'src/styles/tokens.css'), join(root, 'src/tokens.css'), join(root, 'styles/tokens.css')];
     for (const p of roots) {
         if (!existsSync(p))
@@ -416,6 +440,8 @@ function loadCssVarsAndroid(root) {
  */
 function colorExpr(c) {
     const raw = c.trim();
+    if (raw.toLowerCase() === 'transparent')
+        return 'Color.Transparent';
     if (raw.startsWith('var(')) {
         const m = raw.match(/^var\(\s*(--[\w-]+)/);
         if (m && currentCssVars) {
@@ -456,6 +482,8 @@ function kotlinStr(s) {
 /** 条件表达式 → Kotlin（对位 iOS swiftCondExpr：=== / !== 归一 + 单引号字符串转双引号） */
 /** R114：文本绑定里引用的标识符若既不是页面状态也不是循环变量 → 视为未支持，回退空串 */
 function safeBind(name, ctx, loop) {
+    if (loopBinding(name))
+        return kotlinBoundValue(name);
     const base = name.split('.')[0];
     const isState = (ctx.states ?? []).some((st) => st.name === base);
     const isLoop = loop && (loop.itemKey === base || loop.indexKey === base);
@@ -466,17 +494,23 @@ function safeBind(name, ctx, loop) {
     return '""';
 }
 function kotlinCondExpr(expr, ctx, loop) {
+    const binding = expr.startsWith('__vrnCond:') ? expr.slice(10) : expr;
+    if (loopBinding(binding))
+        return `vrnTruthy(${kotlinBoundValue(binding)})`;
     // R-ELSE-AND：v-else 下沉互补状态（_vrnE#）在组件内不可求值 → true（R15 恒显语义，对位 iOS；否则未定义标识符编译失败）
-    if (/^_vrnE\d+$/.test(expr.trim()))
+    if (/^_vrnE\d+$/.test(expr.trim()) && !ctx?.states?.some((s) => s.name === expr.trim()))
         return 'true';
     // R128：下沉的条件状态 → 判真
     const sunk = expr.match(/^__vrnCond:(\w+)$/);
     if (sunk) {
         // v-else 互补状态下沉为 _vrnE# → 组件内不可求值，恒显（R15，对位 iOS）
-        if (/^_vrnE\d+$/.test(sunk[1]))
+        if (/^_vrnE\d+$/.test(sunk[1]) && !ctx?.states?.some((s) => s.name === sunk[1]))
             return 'true';
         return `vrnTruthy(${sunk[1]}.toString())`;
     }
+    const field = expr.match(/^__vrnField__:(\w+):(\w+)$/);
+    if (field)
+        return `vrnTruthy(vrnField(${field[1]}, "${field[2]}"))`;
     // R114：条件里引用了原生端不存在的标识符 → 回退为 true（保留内容）并告警，避免整页编译失败
     {
         // 先剥掉字符串字面量，避免把 "success" 之类当成标识符
@@ -549,7 +583,7 @@ function kotlinStringExpr(expr) {
 function alphaModifier(p) {
     const parts = [];
     if (p.show !== undefined)
-        parts.push(`if (${p.show}) 1f else 0f`);
+        parts.push(`if (vrnTruthy(${p.show}.toString())) 1f else 0f`);
     if (p.opacity !== undefined)
         parts.push(`${p.opacity}f`);
     if (parts.length === 0)
@@ -596,13 +630,25 @@ function toPascal(id) {
 function compKotlinName(name) {
     return `${name.replace(/\s/g, '')}View`;
 }
-function sizeModifiers(props) {
+function sizeModifiers(props, ctx) {
     const mods = [];
+    if (props.aspectRatio)
+        mods.push(`Modifier.aspectRatio(${props.aspectRatio}f)`);
+    if (props.position === 'absolute' && props.absTop === 0 && props.absLeft === 0 && props.absRight === 0 && props.absBottom === 0)
+        mods.push('Modifier.matchParentSize()');
+    if (props.widthFraction !== undefined)
+        mods.push(`Modifier.fillMaxWidth(${props.widthFraction}f)`);
+    if (props.widthFractionDynamic)
+        mods.push(`Modifier.fillMaxWidth((${kotlinBoundValue(props.widthFractionDynamic)}.toString().toFloatOrNull() ?: 0f).coerceIn(0f,1f))`);
+    if (props.widthDynamic)
+        mods.push(`Modifier.width((${kotlinBoundValue(props.widthDynamic)}.toString().toFloatOrNull() ?: 0f).coerceAtLeast(0f).dp)`);
+    if (props.heightDynamic)
+        mods.push(`Modifier.height((${kotlinBoundValue(props.heightDynamic)}.toString().toFloatOrNull() ?: 0f).coerceAtLeast(0f).dp)`);
     if (props.width === 'fill')
         mods.push('Modifier.fillMaxWidth()');
     else if (typeof props.width === 'number')
         mods.push(`Modifier.width(${dp(props.width)})`);
-    if (props.height === 'fill')
+    if (props.height === 'fill' && !(ctx?.inVerticalScroll && ctx.parentAxis === 'column' && !props.vector))
         mods.push('Modifier.fillMaxHeight()');
     else if (typeof props.height === 'number')
         mods.push(`Modifier.height(${dp(props.height)})`);
@@ -627,6 +673,24 @@ function paddingModifiers(props) {
 }
 function visualModifiers(props) {
     const mods = [];
+    if (props.zIndex !== undefined)
+        mods.push(`Modifier.zIndex(${props.zIndex}f)`);
+    if (props.minWidth !== undefined || props.minHeight !== undefined) {
+        const args = [props.minWidth !== undefined ? `minWidth = ${dp(props.minWidth)}` : '', props.minHeight !== undefined ? `minHeight = ${dp(props.minHeight)}` : ''].filter(Boolean);
+        mods.push(`Modifier.sizeIn(${args.join(', ')})`);
+    }
+    if (props.shadow)
+        mods.push(`Modifier.shadow(${dp(props.shadow.blur / 2)}, RoundedCornerShape(${dp(props.radius ?? 0)}), clip = false, ambientColor = ${colorExpr(props.shadow.color)}, spotColor = ${colorExpr(props.shadow.color)})`);
+    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))}f`;
+        const stops = props.gradient.stops.map((s) => `${s.offset}f to ${colorExpr(s.color === 'transparent' ? 'rgba(0,0,0,0)' : s.color)}`).join(', ');
+        if (props.gradient.kind === 'radial')
+            mods.push(`Modifier.drawBehind { drawRect(brush = androidx.compose.ui.graphics.Brush.radialGradient(${stops}, center = Offset(size.width * ${props.gradient.center?.x ?? .5}f,size.height * ${props.gradient.center?.y ?? .5}f), radius = maxOf(size.width,size.height))) }`);
+        else
+            mods.push(`Modifier.drawBehind { drawRect(brush = androidx.compose.ui.graphics.Brush.linearGradient(${stops}, start = Offset(size.width * ${n(.5 - x)}, size.height * ${n(.5 - y)}), end = Offset(size.width * ${n(.5 + x)}, size.height * ${n(.5 + y)}))) }`);
+    }
     if (props.background !== undefined)
         mods.push(`Modifier.background(${colorExpr(props.background)})`);
     return mods;
@@ -676,13 +740,15 @@ function borderModifiers(props) {
     }
     return mods;
 }
-function flexModifier(props) {
+function flexModifier(props, ctx) {
+    if (ctx?.parentAxis === 'box' || (ctx?.inVerticalScroll && ctx.parentAxis !== 'row'))
+        return '';
+    if (props.flex === undefined && props.minWidth === 0 && ctx?.parentAxis === 'row')
+        return 'Modifier.weight(1f, fill = false)';
     return props.flex !== undefined ? `Modifier.weight(${props.flex}f)` : '';
 }
 /** 容器选择（对位 iOS VStack/HStack/ZStack） */
 function containerKind(props) {
-    if (props.position === 'absolute')
-        return 'Box';
     return props.flexDirection === 'row' ? 'Row' : 'Column';
 }
 /** 排列参数（按容器方向：Column 用 verticalArrangement/horizontalAlignment；Row 用 horizontalArrangement/verticalAlignment） */
@@ -785,6 +851,12 @@ function inlineHandlerKotlin(fn) {
 }
 /** 点击事件 → Kotlin 表达式（A5：onSet 内联赋值；onClick 模式识别：自增减/路由 push/无参 handler 内联/其他 JS TODO） */
 function kotlinClickAction(p, ctx, loop) {
+    if (ctx.runtimeAsset && p.onClick) {
+        const expression = /^[A-Za-z_$][\w$]*$/.test(p.onClick) ? p.onClick + '()' : p.onClick;
+        if (loop)
+            return 'vrnPageJs.template(' + kotlinStr(expression) + ', mapOf(' + kotlinStr(loop.itemKey) + ' to ' + loop.itemKey + '))';
+        return 'vrnPageJs.eval(' + kotlinStr(expression) + ')';
+    }
     if (p.onSet) {
         const v = p.onSet.value;
         const rhs = p.onSet.kind === 'expr' ? String(v) : typeof v === 'string' ? kotlinStr(v) : String(v);
@@ -1057,9 +1129,26 @@ function stateDeclarations(ctx, pad) {
     })
         .join('\n');
 }
+let composeSections = [];
+let composingSection = new WeakSet();
+const composeNodeCount = (n) => 1 + (n.children ?? []).reduce((sum, c) => sum + composeNodeCount(c), 0);
 /** 纯字符串拼接生成节点（避免嵌套模板转译问题）；v-if（node.condition）在此统一包裹 */
 function emitNode(node, ctx, depth, loop, useParamModifier = false, parentStretch = false) {
     const pad = '  '.repeat(depth);
+    if (node.type === 'root') {
+        composeSections = [];
+        composingSection = new WeakSet();
+    }
+    if (ctx.runtimeAsset && depth >= 3 && !loop && node.type !== 'for' && composeNodeCount(node) >= 10 && !composingSection.has(node)) {
+        composingSection.add(node);
+        const source = emitNode(node, ctx, depth, loop, useParamModifier, parentStretch);
+        const name = '_vrnSection' + composeSections.length;
+        const receiver = ctx.parentAxis === 'box' ? 'BoxScope' : ctx.parentAxis === 'row' ? 'RowScope' : 'ColumnScope';
+        composeSections.push('val ' + name + ': @Composable ' + receiver + '.() -> Unit = {\n' + source + '\n}');
+        return pad + name + '()';
+    }
+    if (node.props?.show)
+        return pad + 'if (' + kotlinCondExpr(node.props.show, ctx, loop) + ') {\n' + emitNode({ ...node, props: { ...node.props, show: undefined } }, ctx, depth + 1, loop, useParamModifier, parentStretch) + '\n' + pad + '}';
     // v-if → Kotlin if 包裹（表达式为双端兼容子集 ==/!=/&&/||/!，=== / !== 由 kotlinCondExpr 归一）
     if (node.condition && node.type !== 'root') {
         return (pad + 'if (' + kotlinCondExpr(node.condition, ctx, loop) + ') {\n' +
@@ -1070,7 +1159,7 @@ function emitNode(node, ctx, depth, loop, useParamModifier = false, parentStretc
 }
 /** CSS 默认 align-items:stretch：column 父容器内未声明宽度/弹性/绝对定位的子项拉满父宽（R29 盒模型，对位 iOS maxWidth 无穷） */
 function stretchModifiers(parentStretch, node) {
-    if (!parentStretch || node.type === 'spacer' || node.type === 'divider')
+    if (!parentStretch || (node.props?.alignSelf !== undefined && node.props.alignSelf !== 'stretch') || node.type === 'spacer' || node.type === 'divider')
         return [];
     return ['Modifier.fillMaxWidth()'];
 }
@@ -1085,7 +1174,7 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
     const pad = '  '.repeat(depth);
     const p = (node.props ?? {});
     /** R-COMP-ROOT-ABS：组件根（useParamModifier && depth===1）去掉 Modifier.align（顶层无 BoxScope，编译非法）；保留 offset 平移 */
-    const absM = (pp) => (useParamModifier && depth <= 2 ? absModifiers(pp).filter((m) => !m.includes('.align(')) : absModifiers(pp));
+    const absM = (pp) => ((ctx.parentAxis !== 'box' || (useParamModifier && depth <= 2)) ? absModifiers(pp).filter((m) => !m.includes('.align(')) : absModifiers(pp));
     const alphaMod = alphaModifier(p);
     const alphaArr = alphaMod ? [alphaMod] : [];
     /** 容器类型：存在 absolute 子节点 → Box（ZStack 语义，对位 iOS）；否则按 flexDirection */
@@ -1099,7 +1188,7 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
     const groupBackground = (nd, props) => {
         const activeBg = nd.active ? nd.active.props?.background : undefined;
         if (typeof activeBg === 'string' && nd.active) {
-            const when = kotlinCondExpr(nd.active.when);
+            const when = kotlinCondExpr(nd.active.when, ctx, loop);
             const active = colorExpr(activeBg);
             // 无基础背景时回退透明（对位 iOS `.background(when ? color : Color.clear)`）——
             // 否则选中态会变成「所有行都高亮」（此前 bug）
@@ -1113,6 +1202,12 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
     const childrenBody = (nd, d, kind) => {
         if (!nd.children)
             return '';
+        if (kind === 'Box' && nd.children.some((c) => c.props?.position === 'absolute') && nd.children.some((c) => c.props?.position !== 'absolute')) {
+            const flow = nd.children.filter((c) => c.props?.position !== 'absolute');
+            const first = nd.children.findIndex((c) => c.props?.position !== 'absolute');
+            const decorated = nd.children.flatMap((c, i) => c.props?.position === 'absolute' ? [c] : i === first ? [{ type: 'group', props: { flexDirection: p.flexDirection, alignItems: p.alignItems, justifyContent: p.justifyContent, gap: p.gap, padding: p.padding, ...((p.width !== undefined || p.widthDynamic) && (p.height !== undefined || p.heightDynamic) ? { width: 'fill', height: 'fill' } : {}) }, children: flow }] : []);
+            return decorated.map((child) => emitNode(child, { ...ctx, parentAxis: 'box' }, d, loop)).join('\n');
+        }
         return nd.children
             .map((c) => {
             const cp = (c.props ?? {});
@@ -1120,10 +1215,10 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             let pre = '';
             let post = '';
             if (kind === 'Column') {
-                if (cp.marginTopAuto) {
+                if (cp.marginTopAuto && !ctx.inVerticalScroll) {
                     pre += cpad + 'Spacer(\n' + cpad + '    modifier = Modifier.weight(1f),\n' + cpad + ')\n';
                 }
-                if (cp.marginTop !== undefined) {
+                if (cp.marginTop !== undefined && cp.marginTop !== 0) {
                     pre += cpad + 'Spacer(\n' + cpad + '    modifier = Modifier.height(' + dp(cp.marginTop) + '),\n' + cpad + ')\n';
                 }
             }
@@ -1131,36 +1226,39 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
                 pre += cpad + 'Spacer(\n' + cpad + '    modifier = Modifier.weight(1f),\n' + cpad + ')\n';
             }
             // R70 其余单边外边距（前置/后置固定间隔，对位 iOS Color.clear 间隔）
-            if (kind === 'Row' && cp.marginLeft !== undefined) {
+            if (kind === 'Row' && cp.marginLeft !== undefined && cp.marginLeft !== 0) {
                 pre += cpad + 'Spacer(\n' + cpad + '    modifier = Modifier.width(' + dp(cp.marginLeft) + '),\n' + cpad + ')\n';
             }
-            if (kind === 'Row' && cp.marginRight !== undefined) {
+            if (kind === 'Row' && cp.marginRight !== undefined && cp.marginRight !== 0) {
                 post = post + '\n' + cpad + 'Spacer(\n' + cpad + '    modifier = Modifier.width(' + dp(cp.marginRight) + '),\n' + cpad + ')\n';
             }
-            if (kind === 'Column' && cp.marginBottom !== undefined) {
+            if (kind === 'Column' && cp.marginBottom !== undefined && cp.marginBottom !== 0) {
                 post = post + '\n' + cpad + 'Spacer(\n' + cpad + '    modifier = Modifier.height(' + dp(cp.marginBottom) + '),\n' + cpad + ')\n';
             }
-            const stretch = kind === 'Column' && cp.width === undefined && cp.flex === undefined && cp.position !== 'absolute' && !cp.marginLeftAuto;
-            return pre + emitNode(c, ctx, d, undefined, false, stretch) + post;
+            const stretch = kind === 'Column' && (p.alignItems === undefined || p.alignItems === 'stretch') && !(ctx.parentAxis === 'row' && p.width === undefined && p.flex === undefined) && cp.width === undefined && cp.flex === undefined && cp.position !== 'absolute' && !cp.marginLeftAuto;
+            const childCtx = { ...ctx, parentAxis: kind === 'Row' ? 'row' : kind === 'Box' ? 'box' : 'column' };
+            const result = emitNode(c, childCtx, d, loop, false, stretch);
+            if (childCtx.needsScope)
+                ctx.needsScope = true;
+            return pre + result + post;
         })
             .join('\n');
     };
     switch (node.type) {
         case 'root': {
             // 单层容器：设计稿固定高度（640）在真机上会导致内容被限高挤压 → 移除 height，fillMaxSize 铺满（对位 iOS 背景铺满）
-            const size = sizeModifiers(p).filter((m) => !m.includes('.height('));
+            const size = sizeModifiers(p, ctx).filter((m) => !m.includes('.height('));
             // R-PAGESCROLL：页面根 = 可滚动视口（对位 Web body 默认滚动 / 对位 iOS root ScrollView）。
             // 守卫：子树存在 flex/marginTopAuto（→ Modifier.weight）时不加滚动——滚动容器沿主轴给无界高度约束，
             // weight 在其中会抛异常（Vertically scrollable component was measured with infinity constraints）
-            const weighty = subtreeHasWeight(node);
-            if (weighty) {
-                ctx.warnings.push('页面含 flex/marginTopAuto（weight 布局）→ 根容器不启用滚动（滚动容器内 weight 会因高度无界崩溃）；内容超高时请把长内容放进 overflow:auto 容器');
-            }
-            const scrollMods = weighty ? [] : ['Modifier.verticalScroll(rememberScrollState())'];
+            const containsScroll = (n) => n.type === 'scroll' || (n.children ?? []).some(containsScroll);
+            const outerScroll = !(node.children ?? []).some(containsScroll);
+            const scrollMods = outerScroll ? ['Modifier.verticalScroll(rememberScrollState())'] : [];
+            ctx.inVerticalScroll = outerScroll;
             const chain = modChain([...size, ...scrollMods, ...clipModifiers(p), ...visualModifiers(p), ...borderModifiers(p), ...paddingModifiers(p)], pad + '              ');
             const kind = kindFor(node, p);
             const args = arrangementExpr(p, kind);
-            let out = pad + '@Composable\n';
+            let out = pad + '@OptIn(androidx.compose.foundation.layout.ExperimentalLayoutApi::class)\n' + pad + '@Composable\n';
             out += pad + 'fun ' + toPascal(ctx.pageId) + 'Content(\n';
             out += pad + '    modifier: Modifier = Modifier\n' + pad + ') {\n';
             const states = stateDeclarations(ctx, pad);
@@ -1170,6 +1268,16 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             const children = childrenBody(node, depth + 1, kind);
             // R72 异步：本页含 async handler / async onMounted → 声明协程作用域（按钮 onClick 用 vrnScope.launch）
             const pre = [];
+            if (ctx.runtimeAsset) {
+                pre.push(pad + '    val vrnPageContext = androidx.compose.ui.platform.LocalContext.current');
+                pre.push(pad + '    val vrnPageJs = remember { VrnPageJs(vrnPageContext, ' + kotlinStr(ctx.runtimeAsset) + ') }');
+                pre.push(pad + '    DisposableEffect(vrnPageJs) { onDispose { vrnPageJs.close() } }');
+                const updates = (ctx.states ?? []).map((st) => {
+                    const get = st.type === 'string' ? `updates.optString("${st.name}")` : st.type === 'boolean' ? `updates.optBoolean("${st.name}")` : `updates.optInt("${st.name}")`;
+                    return pad + `            if (updates.has("${st.name}")) ${st.name} = ${get}`;
+                }).join('\n');
+                pre.push(pad + '    LaunchedEffect(vrnPageJs) {\n' + pad + '        while (true) {\n' + pad + '            vrnPageJs.eval("__vrnNativeTick()")\n' + pad + '            val updates = vrnPageJs.drain()\n' + updates + '\n' + pad + '            if (updates.has("__nav")) Runtime.push(updates.optString("__nav"))\n' + pad + '            if (updates.optBoolean("__navBack", false)) Runtime.back()\n' + pad + '            delay(50)\n' + pad + '        }\n' + pad + '    }');
+            }
             const asyncOm = ctx.onMountedAsync && ctx.onMountedBody ? asyncHandlerKotlin({ name: '__onMounted', params: '', body: ctx.onMountedBody }, ctx) : null;
             if (ctx.onMountedAsync && ctx.onMountedBody && asyncOm === null) {
                 ctx.warnings.push('async onMounted 含超出协程子集的形状（R72 子集：await fetch / JSON.parse / 状态赋值 / setTimeout），已跳过生成');
@@ -1179,7 +1287,7 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             if (asyncOm !== null) {
                 pre.push(pad + '    LaunchedEffect(Unit) {\n' + asyncOm.split('\n').map((l) => pad + '        ' + l).join('\n') + '\n' + pad + '    }');
             }
-            const decls = [states, ...pre].filter((x) => x && x.length > 0).join('\n');
+            const decls = [states, ...pre, ...composeSections].filter((x) => x && x.length > 0).join('\n');
             out += pad + '    ) {' + (decls ? '\n' + decls : '') + '\n' + children + '\n' + pad + '    }\n';
             out += pad + '}';
             return out;
@@ -1189,16 +1297,34 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             const gm = depth === 1 && useParamModifier ? 'modifier' : 'Modifier';
             const chain = modChain([
                 ...stretchModifiers(parentStretch, node),
-                ...sizeModifiers(p),
+                ...sizeModifiers(p, ctx),
                 ...absM(p),
                 ...clipModifiers(p),
                 ...groupBackground(node, p),
                 ...borderModifiers(p),
-                ...paddingModifiers(p),
-                flexModifier(p),
+                ...(node.children?.some((c) => c.props?.position === 'absolute') ? [] : paddingModifiers(p)),
+                flexModifier(p, ctx),
                 ...alphaArr,
                 ...transformModifiers(p),
             ].concat(click ? [gm + '.clickable { ' + click + ' }'] : []), pad + '            ');
+            if (p.gridColumns && node.children?.length) {
+                const columns = p.gridColumns, gap = dp(p.gap ?? 0);
+                if (node.children.length === 1 && node.children[0].type === 'for') {
+                    const list = node.children[0];
+                    const cells = { ...list, children: list.children?.map((child) => ({ ...child, props: { ...child.props, flex: 1, height: child.props?.height === 'fill' ? undefined : child.props?.height, minHeight: child.props?.minHeight ?? p.minHeight } })) };
+                    return pad + 'FlowRow(modifier = Modifier' + chain + ',maxItemsInEachRow = ' + columns + ',horizontalArrangement = Arrangement.spacedBy(' + gap + '),verticalArrangement = Arrangement.spacedBy(' + gap + ')) {\n' + emitNode(cells, { ...ctx, parentAxis: 'row' }, depth + 1, loop) + '\n' + pad + '}';
+                }
+                const rows = [];
+                for (let i = 0; i < node.children.length; i += columns) {
+                    const cells = node.children.slice(i, i + columns).map((c) => pad + '    Box(modifier = Modifier.weight(1f)) {\n' + emitNode(c, { ...ctx, parentAxis: 'box' }, depth + 3, loop, false, true) + '\n' + pad + '    }').join('\n');
+                    rows.push(pad + '  Row(horizontalArrangement = Arrangement.spacedBy(' + gap + ')) {\n' + cells + '\n' + pad + '  }');
+                }
+                return pad + 'Column(modifier = Modifier' + chain + ', verticalArrangement = Arrangement.spacedBy(' + gap + ')) {\n' + rows.join('\n') + '\n' + pad + '}';
+            }
+            if (p.flexWrap) {
+                const cells = (node.children ?? []).map((child) => emitNode(child, { ...ctx, parentAxis: 'row' }, depth + 1, loop)).join('\n');
+                return pad + 'FlowRow(modifier = Modifier' + chain + ', horizontalArrangement = Arrangement.spacedBy(' + dp(p.gap ?? 0) + '), verticalArrangement = Arrangement.spacedBy(' + dp(p.gap ?? 0) + ')) {\n' + cells + '\n' + pad + '}';
+            }
             const kind = kindFor(node, p);
             const args = arrangementExpr(p, kind);
             let out = pad + kind + '(\n';
@@ -1209,7 +1335,25 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
         case 'text': {
             // 文本表达式（M2/M4b 动态：bindParts 混合段 / bindExpr 三元 / dynField 循环字段 / bind state / ref 组件参数 / 静态 text）
             let textExpr;
-            if (p.bindParts) {
+            if (p.textRuns) {
+                const runs = flattenTextRuns(p.textRuns).map((run) => {
+                    const child = emitNode({ type: 'text', props: { ...run } }, ctx, 0, loop);
+                    const expr = child.match(/text = ([\s\S]*?),\n/)?.[1] ?? '""';
+                    const style = [];
+                    const fs = run.fontSize ?? p.fontSize;
+                    if (fs !== undefined)
+                        style.push(`fontSize = ${sp(fs)}`);
+                    const col = run.color ?? p.color;
+                    if (col)
+                        style.push(`color = ${colorExpr(col)}`);
+                    const weight = run.fontWeight ?? p.fontWeight;
+                    if (weight)
+                        style.push('fontWeight = FontWeight.' + (weight === 'bold' ? 'Bold' : weight === 'medium' ? 'Medium' : 'Normal'));
+                    return `withStyle(androidx.compose.ui.text.SpanStyle(${style.join(', ')})) { append(${expr}) }`;
+                });
+                textExpr = 'androidx.compose.ui.text.buildAnnotatedString { ' + runs.join('; ') + ' }';
+            }
+            else if (p.bindParts) {
                 const segs = p.bindParts
                     .map((seg) => {
                     if ('text' in seg)
@@ -1224,7 +1368,7 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
                             '"' +
                             (seg.fieldOf.fallback !== undefined ? ', "' + seg.fieldOf.fallback.replace(/"/g, '\\"') + '"' : '') +
                             ')}');
-                    return '${' + loopField(seg.dynField.var, loop) + '["' + seg.dynField.field + '"] ?: ""}';
+                    return '${vrnItemField(' + seg.dynField.var + ', \"' + seg.dynField.field + '\")}';
                 })
                     .join('');
                 textExpr = '"' + segs + '"';
@@ -1240,7 +1384,7 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
                         ')}"';
             }
             else if (p.dynField) {
-                textExpr = '"${' + loopField(p.dynField.var, loop) + '["' + p.dynField.field + '"] ?: ""}"';
+                textExpr = '"${vrnItemField(' + p.dynField.var + ', \"' + p.dynField.field + '\")}"';
             }
             else if (p.bindExpr !== undefined) {
                 textExpr = kotlinStringExpr(p.bindExpr);
@@ -1256,18 +1400,23 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             }
             // R-TEXTCLICK：@click 挂在 text 上（<span @click>）→ clickable（此前静默丢失交互）
             const click = kotlinClickAction(p, ctx, loop);
-            const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p), flexModifier(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)].concat(click ? ['Modifier.clickable { ' + click + ' }'] : []), pad + '            ');
+            const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p, ctx), flexModifier(p, ctx), ...absM(p), ...clipModifiers(p), ...visualModifiers(p), ...borderModifiers(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)].concat(click ? ['Modifier.clickable { ' + click + ' }'] : []), pad + '            ');
             const style = [];
+            if (p.fontFamily)
+                style.push('fontFamily = androidx.compose.ui.text.font.FontFamily.' + (p.fontFamily === 'serif' ? 'Serif' : p.fontFamily === 'monospace' ? 'Monospace' : 'SansSerif'));
+            if (p.letterSpacing !== undefined)
+                style.push('letterSpacing = ' + sp(p.letterSpacing));
             if (p.fontSize !== undefined)
                 style.push('fontSize = ' + sp(p.fontSize));
             else if (p.fontSizeDynamic !== undefined)
                 style.push('fontSize = ' + p.fontSizeDynamic + '.sp');
             if (p.fontWeight !== undefined)
                 style.push('fontWeight = FontWeight.' + (p.fontWeight === 'bold' ? 'Bold' : p.fontWeight === 'medium' ? 'Medium' : 'Normal'));
-            if (p.lineHeight !== undefined)
-                style.push('lineHeight = ' + sp(p.lineHeight));
+            const lineHeight = p.lineHeightMultiplier !== undefined ? (p.fontSize ?? 15) * p.lineHeightMultiplier : p.lineHeight;
+            if (lineHeight !== undefined)
+                style.push('lineHeight = ' + sp(Number(lineHeight.toFixed(4))));
             if (p.colorActive) {
-                style.push('color = if (' + kotlinCondExpr(p.colorActive.when) + ') ' + colorExpr(p.colorActive.color) + ' else ' + colorExpr(p.color ?? '#ffffff'));
+                style.push('color = if (' + kotlinCondExpr(p.colorActive.when, ctx, loop) + ') ' + colorExpr(p.colorActive.color) + ' else ' + colorExpr(p.color ?? '#ffffff'));
             }
             else if (p.colorDynamic !== undefined) {
                 style.push('color = dynamicColor(' + p.colorDynamic + ')');
@@ -1287,11 +1436,19 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             return out;
         }
         case 'button': {
-            const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p), ...absM(p), ...clipModifiers(p), ...visualModifiers(p), ...borderModifiers(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)], pad + '            ');
+            const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p, ctx), ...absM(p), ...clipModifiers(p), ...visualModifiers(p), ...borderModifiers(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)], pad + '            ');
             // R108：动态按钮文案（props.bind）优先；Kotlin 里用字符串模板插值
             const label = p.bind !== undefined ? String(p.bind) : (p.label ?? '');
             const click = kotlinClickAction(p, ctx, loop);
+            if (p.icon) {
+                const icon = kotlinVector({ vector: p.icon.vector, color: p.color }, colorExpr, `Modifier.size(${dp(p.icon.width)}, ${dp(p.icon.height)})`);
+                return pad + 'Box(modifier = Modifier' + chain + (click ? '.clickable(role = androidx.compose.ui.semantics.Role.Button) { ' + click + ' }' : '') + ', contentAlignment = Alignment.Center) {\n' + pad + '  ' + icon.split('\n').join('\n' + pad + '  ') + '\n' + pad + '}';
+            }
             const labelStyle = [];
+            if (p.fontFamily)
+                labelStyle.push('fontFamily = androidx.compose.ui.text.font.FontFamily.' + (p.fontFamily === 'serif' ? 'Serif' : p.fontFamily === 'monospace' ? 'Monospace' : 'SansSerif'));
+            if (p.fontWeight)
+                labelStyle.push('fontWeight = FontWeight.' + (p.fontWeight === 'bold' ? 'Bold' : p.fontWeight === 'medium' ? 'Medium' : 'Normal'));
             if (p.fontSize !== undefined)
                 labelStyle.push('fontSize = ' + sp(p.fontSize));
             else if (p.fontSizeDynamic !== undefined)
@@ -1300,13 +1457,8 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
                 labelStyle.push('color = ' + colorExpr(p.color));
             else if (p.colorDynamic !== undefined)
                 labelStyle.push('color = dynamicColor(' + p.colorDynamic + ')');
-            let out = pad + 'Button(\n';
-            out += pad + '    onClick = { ' + click + ' },\n';
-            if (p.disabled === true)
-                out += pad + '    enabled = false,\n';
-            if (chain)
-                out += pad + '    modifier = Modifier' + chain + ',\n';
-            out += pad + ') {\n' + pad + '    Text(' + kotlinStr(label) + (labelStyle.length ? ', ' + labelStyle.join(', ') : '') + ')\n' + pad + '}';
+            let out = pad + 'Box(modifier = Modifier' + chain + (click && p.disabled !== true ? '.clickable(role = androidx.compose.ui.semantics.Role.Button) { ' + click + ' }' : '') + ', contentAlignment = Alignment.Center) {\n';
+            out += pad + '    Text(' + (p.bind ? kotlinBoundValue(label) : kotlinStr(label)) + (labelStyle.length ? ', ' + labelStyle.join(', ') : '') + ')\n' + pad + '}';
             return out;
         }
         case 'input': {
@@ -1317,7 +1469,7 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
                 ctx.warnings.push('input: v-model「' + String(st) + '」非页面级 string 状态（Android 暂只支持该形态），已生成占位注释');
                 return pad + '// input: v-model ' + kotlinStr(String(st)) + ' 未支持（Android 仅页面级 string state）';
             }
-            const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p), ...absM(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)], pad + '            ');
+            const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p, ctx), ...absM(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)], pad + '            ');
             const ts = [];
             if (p.fontSize !== undefined)
                 ts.push('fontSize = ' + sp(p.fontSize));
@@ -1335,24 +1487,38 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             out += pad + ')';
             return out;
         }
+        case 'vector': {
+            const chain = modChain([...sizeModifiers(p, ctx), ...absM(p), ...alphaArr], pad + '    ');
+            return pad + kotlinVector(p, colorExpr, 'Modifier' + chain, kotlinBoundValue).split('\n').join('\n' + pad);
+        }
         case 'image': {
-            const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p), ...absM(p), ...clipModifiers(p), ...visualModifiers(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)], pad + '            ');
-            if (p.src)
-                ctx.warnings.push('image src="' + p.src + '" 资源桥未实现（A5 TODO），生成占位 Box');
-            let out = pad + '// image src=' + (p.src ?? '') + '（A5 资源桥 TODO）\n';
-            out += pad + 'Box(\n' + pad + '    modifier = Modifier' + chain + ',\n' + pad + ') {}';
-            return out;
+            const source = p.src ?? '';
+            const chain = modChain([...sizeModifiers(p, ctx), ...absM(p), ...clipModifiers(p), ...visualModifiers(p), ...paddingModifiers(p), ...alphaArr], pad + '    ');
+            if (source.startsWith('asset://')) {
+                const name = source.slice(8);
+                return pad + 'run { val imageContext = androidx.compose.ui.platform.LocalContext.current; val bitmap = remember { imageContext.assets.open(' + kotlinStr(name) + ').use { android.graphics.BitmapFactory.decodeStream(it) } }; if(bitmap != null) Image(bitmap = bitmap.asImageBitmap(), contentDescription = null, contentScale = androidx.compose.ui.layout.ContentScale.' + (p.objectFit === 'contain' ? 'Fit' : 'Crop') + ', modifier = Modifier' + chain + ') }';
+            }
+            if (/^data:image\/[^;]+;base64,/.test(source)) {
+                const encoded = source.slice(source.indexOf(',') + 1);
+                return pad + 'run {\n' + pad + '    val imageBytes = remember { android.util.Base64.decode(' + kotlinStr(encoded) + ', android.util.Base64.DEFAULT) }\n' +
+                    pad + '    val bitmap = remember { android.graphics.BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.size) }\n' +
+                    pad + '    if (bitmap != null) Image(bitmap = bitmap.asImageBitmap(), contentDescription = null, contentScale = androidx.compose.ui.layout.ContentScale.' +
+                    (p.objectFit === 'contain' ? 'Fit' : 'Crop') + ', modifier = Modifier' + chain + ')\n' + pad + '}';
+            }
+            ctx.warnings.push(`图片 ${source.slice(0, 80)} 需要 data URI 资源映射，Android 未生成图片内容`);
+            return pad + 'Box(modifier = Modifier' + chain + ')';
         }
         case 'spacer': {
-            const chain = modChain([flexModifier(p), ...sizeModifiers(p)], pad + '            ');
+            const chain = modChain([flexModifier(p, ctx), ...sizeModifiers(p, ctx), ...absM(p), ...clipModifiers(p), ...visualModifiers(p), ...borderModifiers(p), ...paddingModifiers(p), ...(kotlinClickAction(p, ctx, loop) ? ['Modifier.clickable { ' + kotlinClickAction(p, ctx, loop) + ' }'] : [])], pad + '            ');
             return pad + 'Spacer(\n' + pad + '    modifier = Modifier' + chain + ',\n' + pad + ')';
         }
         case 'divider': {
-            const chain = modChain([...sizeModifiers(p), ...visualModifiers(p), ...paddingModifiers(p)], pad + '            ');
+            const chain = modChain([...sizeModifiers(p, ctx), ...visualModifiers(p), ...paddingModifiers(p)], pad + '            ');
             return pad + 'HorizontalDivider(\n' + pad + '    modifier = Modifier' + chain + ',\n' + pad + ')';
         }
         case 'scroll': {
-            const chain = modChain([...sizeModifiers(p), ...paddingModifiers(p)], pad + '            ');
+            ctx = { ...ctx, inVerticalScroll: true };
+            const chain = modChain([...sizeModifiers(p, ctx), ...paddingModifiers(p)], pad + '            ');
             return pad + 'Column(\n' + pad + '    modifier = Modifier' + chain + '.verticalScroll(rememberScrollState()),\n' + pad + ') {\n' + childrenBody(node, depth + 1, 'Column') + '\n' + pad + '}';
         }
         case 'for': {
@@ -1362,8 +1528,11 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
                 return pad + '// for: 缺 vfor 或项模板';
             }
             if (vf.listState) {
-                ctx.warnings.push('v-for 动态列表 ' + vf.listState + ' 未实现（需数据桥，A5 TODO）——该列表不生成');
-                return pad + '// for: 动态列表 ' + vf.listState + ' TODO（A5 后需数据桥）';
+                const key = vf.itemKey, index = vf.indexKey ?? '_vrnIndex';
+                const lc = { itemKey: key, indexKey: index };
+                const inner = node.children.map((c) => emitNode(c, { ...ctx, loop: lc }, depth + 1, lc)).join('\n');
+                return pad + 'run {\n' + pad + '  val _vrnItems = remember(' + kotlinBoundValue(vf.listState) + ') { runCatching { val a = org.json.JSONArray(' + kotlinBoundValue(vf.listState) + '.toString()); List(a.length()) { a.opt(it) } }.getOrDefault(emptyList<Any>()) }\n' +
+                    pad + '  _vrnItems.forEachIndexed { ' + index + ', ' + key + ' ->\n' + inner + '\n' + pad + '  }\n' + pad + '}';
             }
             const list = vf.list ?? [];
             if (list.length === 0)
@@ -1416,8 +1585,8 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
             // 布局 props（vue2ir 将组件根的 flex/width/height/marginTop 剥离到使用点）→ modifier 参数
             const mods = [
                 ...stretchModifiers(parentStretch, node),
-                ...sizeModifiers(p),
-                flexModifier(p),
+                ...sizeModifiers(p, ctx),
+                flexModifier(p, ctx),
                 ...absM(p),
                 ...alphaArr,
                 ...transformModifiers(p),
@@ -1527,6 +1696,7 @@ function emitComponentFile(name, ui, bundleId) {
 const IMPORTS_KT = `import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -1536,16 +1706,24 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import kotlinx.coroutines.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.zIndex
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.drawscope.withTransform
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.foundation.border
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.ui.graphics.nativeCanvas
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -1747,6 +1925,8 @@ function runTabs(appDir, opts = {}) {
     writeFileSync(join(pkgDir, 'Theme.kt'), THEME_KT(bundleId));
     writeFileSync(join(pkgDir, 'MainActivity.kt'), MAIN_ACTIVITY(bundleId));
     writeFileSync(join(pkgDir, 'Runtime.kt'), RUNTIME_KT(bundleId));
+    if (opts.buildPageRuntime)
+        writeFileSync(join(pkgDir, 'PageJs.kt'), pageJsAndroid(bundleId));
     // NavTest 断言绑定 vuexir-demo 文案：仅对参考样例生成，其他样例跳过（防无意义失败用例）
     if (projectName.toLowerCase() === 'vuexirdemo') {
         const navTestPath = join(outDir, 'app/src/androidTest/java', ...bundleId.split('.'), 'NavTest.kt');
@@ -1778,6 +1958,11 @@ function runTabs(appDir, opts = {}) {
         const r = vueToIr(src, {
             screenId: tab.id,
             title: tab.title,
+            inlineComponents: true,
+            liveStoreObjects: opts.buildPageRuntime !== undefined,
+            pageScriptBundle: opts.buildPageRuntime !== undefined,
+            assets: loadProjectAssets(tab.file, findProjectRoot(dirname(tab.file))),
+            globalStyles: loadProjectStyles(findProjectRoot(dirname(tab.file))),
             components: loadComponents(tab.file),
             storeSources: loadStoreSources(tab.file),
             allowUnknownComponents: true,
@@ -1794,15 +1979,22 @@ function runTabs(appDir, opts = {}) {
                 console.error(`  ${i.path}: ${i.message}`);
             process.exit(1);
         }
+        materializeProjectAssets(r.screen.ui, join(outDir, 'app/src/main/assets'), 'android');
         writeComponents(r.components);
         const ctx = {
             warnings: [],
             pageId: tab.id,
+            runtimeAsset: opts.buildPageRuntime ? 'runtime_' + tab.id + '.js' : undefined,
             states: (r.screen.state ?? []).map((st) => ({ name: st.name, type: typeof st.init === 'string' ? 'string' : typeof st.init === 'boolean' ? 'boolean' : 'number', init: st.init })),
             handlers: r.screen.handlers,
             onMountedBody: r.screen.onMounted,
             onMountedAsync: r.screen.onMountedAsync === true,
         };
+        if (opts.buildPageRuntime && ctx.runtimeAsset) {
+            const assetsDir = join(outDir, 'app/src/main/assets');
+            mkdirSync(assetsDir, { recursive: true });
+            writeFileSync(join(assetsDir, ctx.runtimeAsset), opts.buildPageRuntime(tab.file, r.runtime ?? '', tab.id));
+        }
         const body = emitNode(r.screen.ui, ctx, 1);
         for (const w of ctx.warnings)
             console.log(`[gen-android] 生成提示（${tab.id}）: ${w}`);
@@ -1817,6 +2009,11 @@ function runTabs(appDir, opts = {}) {
         const r = vueToIr(src, {
             screenId: d.id,
             title: d.title,
+            inlineComponents: true,
+            liveStoreObjects: opts.buildPageRuntime !== undefined,
+            pageScriptBundle: opts.buildPageRuntime !== undefined,
+            assets: loadProjectAssets(d.file, findProjectRoot(dirname(d.file))),
+            globalStyles: loadProjectStyles(findProjectRoot(dirname(d.file))),
             components: loadComponents(d.file),
             storeSources: loadStoreSources(d.file),
             allowUnknownComponents: true,
@@ -1833,15 +2030,22 @@ function runTabs(appDir, opts = {}) {
                 console.error(`  ${i.path}: ${i.message}`);
             process.exit(1);
         }
+        materializeProjectAssets(r.screen.ui, join(outDir, 'app/src/main/assets'), 'android');
         writeComponents(r.components);
         const ctx = {
             warnings: [],
             pageId: `${d.id}Detail`,
+            runtimeAsset: opts.buildPageRuntime ? 'runtime_' + d.id + '.js' : undefined,
             states: (r.screen.state ?? []).map((st) => ({ name: st.name, type: typeof st.init === 'string' ? 'string' : typeof st.init === 'boolean' ? 'boolean' : 'number', init: st.init })),
             handlers: r.screen.handlers,
             onMountedBody: r.screen.onMounted,
             onMountedAsync: r.screen.onMountedAsync === true,
         };
+        if (opts.buildPageRuntime && ctx.runtimeAsset) {
+            const assetsDir = join(outDir, 'app/src/main/assets');
+            mkdirSync(assetsDir, { recursive: true });
+            writeFileSync(join(assetsDir, ctx.runtimeAsset), opts.buildPageRuntime(d.file, r.runtime ?? '', d.id));
+        }
         const body = emitNode(r.screen.ui, ctx, 1);
         for (const w of ctx.warnings)
             console.log(`[gen-android] 生成提示（${d.id}）: ${w}`);
@@ -1853,7 +2057,9 @@ function runTabs(appDir, opts = {}) {
         console.log(`[gen-android]   - ${pageId}DetailView.kt · push「${d.title}」`);
     }
     // 3) AppNavHost.kt（router.ts → NavHost + NavigationBar）
-    const navHost = buildNavHost(bundleId, tabs, detailViews);
+    let navHost = buildNavHost(bundleId, tabs, detailViews, { tabBar: opts.tabBar });
+    if (opts.nativeNavigationBar === false)
+        navHost = navHost.replace(/        topBar = \{[\s\S]*?        \},\n        bottomBar =/, '        bottomBar =');
     writeFileSync(join(pkgDir, 'AppNavHost.kt'), navHost);
     // P2：写 .vrn/manifest.json（工具链/模板版本 + 文件清单），供 vrn doctor 校验与增量重生成
     const metaDir = join(outDir, '.vrn');
@@ -1872,7 +2078,7 @@ function runTabs(appDir, opts = {}) {
     console.log(`[gen-android] 完成: ${outDir}（${viewFiles.length} tab + ${detailViews.length} detail）`);
     return outDir;
 }
-function buildNavHost(bundleId, tabs, details) {
+function buildNavHost(bundleId, tabs, details, options = {}) {
     // R-CHROME：tab 顶/底栏由 tab 路由自己的 TabScaffold 承载（而非容器层按 currentRoute 开关）。
     // 容器层开关的缺陷：导航瞬间 currentRoute 已变 detail，退出动画中的 tab 页仍在绘制，
     // 其顶/底栏立即消失、innerPadding 塌缩 → 内容瞬时顶到系统栏，随后详情页才滑入（视觉跳变）。
@@ -1931,10 +2137,33 @@ function buildNavHost(bundleId, tabs, details) {
                 )
             )`)
         .join('\n                ');
+    let customBar = '';
+    if (options.tabBar) {
+        const spec = options.tabBar;
+        const cells = tabs.map((tab) => {
+            const item = spec.items.find((item) => item.id === tab.id);
+            const tint = `if (currentTab == "${tab.id}") ${colorExpr(spec.activeStyle.color ?? '#f3dca0')} else ${colorExpr(spec.itemStyle.color ?? '#5b647e')}`;
+            const icon = item ? kotlinVector({ vector: item.icon, color: '__vrnTabTint' }, (color) => color === '__vrnTabTint' ? tint : colorExpr(color), 'Modifier.size(22.dp)') : `Icon(Icons.Default.Home,contentDescription = null)`;
+            return `Column(modifier = Modifier.weight(1f).clickable { onSelectTab("${tab.id}") }.padding(vertical = 6.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(${dp(spec.itemStyle.gap ?? 3)})) {\n${icon}\nText(${kotlinStr(item?.label ?? tab.title)},fontSize = ${sp(spec.itemStyle.fontSize ?? 11)},color = ${tint})\n}`;
+        }).join('\n');
+        const chain = modChain([...clipModifiers(spec.style), ...visualModifiers(spec.style), ...borderModifiers(spec.style), ...paddingModifiers(spec.style)], '            ');
+        customBar = `Box(modifier = Modifier.fillMaxWidth().navigationBarsPadding().padding(start = ${dp(spec.widthInset / 2)},end = ${dp(spec.widthInset / 2)},bottom = ${dp(spec.bottom)}),contentAlignment = Alignment.Center) {\nRow(modifier = Modifier.widthIn(max = ${dp(spec.maxWidth ?? 10000)}).fillMaxWidth()${chain}) {\n${cells}\n}\n}`;
+    }
     const tabTitleExpr = `when (currentTab) {\n${tabs.map((t) => `        "${t.id}" -> ${kotlinStr(t.title)}`).join('\n')}\n        else -> ""\n    }`;
     return `package ${bundleId}
 
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.drawscope.withTransform
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.unit.dp
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.*
 import androidx.compose.material.icons.filled.*
@@ -1942,8 +2171,14 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.zIndex
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.ui.graphics.nativeCanvas
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.sp
 import androidx.navigation.compose.*
@@ -1967,9 +2202,7 @@ fun TabScaffold(currentTab: String, onSelectTab: (String) -> Unit, content: @Com
             )
         },
         bottomBar = {
-            NavigationBar(containerColor = InkBar) {
-                ${barItems}
-            }
+            ${customBar || `NavigationBar(containerColor = InkBar) {\n                ${barItems}\n            }`}
         },
     ) { innerPadding ->
         content(innerPadding)
@@ -1982,7 +2215,13 @@ fun AppNavHost() {
     val navController = rememberNavController()
     // A5 路由桥：Runtime.push(route) → NavHost navigate
     LaunchedEffect(Unit) {
-        Runtime.pushHandler = { route -> navController.navigate(route) }
+        Runtime.pushHandler = { route ->
+            val resolved = when(route) {
+${details.map((d) => `                "${d.id}" -> "${d.path}"`).join('\n')}
+                else -> route
+            }
+            navController.navigate(resolved)
+        }
     }
     // tab 切换：popUpTo 首 tab 保留栈底 + saveState/restoreState 保留各页状态（对位 iOS 常驻页面实例）
     val onSelectTab: (String) -> Unit = { tabId ->