openyida 2026.7.7-1 → 2026.7.8

package/README.md

@@ -8,7 +8,7 @@
 
 OpenYida connects AI coding agents with Yida's low-code platform, so developers can create apps, forms, workflows, custom pages, reports, integrations, and deployment configuration from a normal chat-driven development workflow.
 
-[Quick Start](#quick-start) · [Capabilities](#capabilities) · [CLI Reference](#cli-reference) · [Examples](#examples) · [Contributing](./CONTRIBUTING.md) · [Changelog](./CHANGELOG.md)
+[Quick Start](#quick-start) · [Capabilities](#capabilities) · [Full Capability List](./docs/capabilities.md) · [CLI Reference](#cli-reference) · [Examples](#examples) · [Contributing](./CONTRIBUTING.md) · [Changelog](./CHANGELOG.md)
 
 [![npm version](https://img.shields.io/npm/v/openyida?color=brightgreen&label=npm)](https://www.npmjs.com/package/openyida)
 [![npm downloads](https://img.shields.io/npm/dm/openyida?color=blue)](https://www.npmjs.com/package/openyida)
@@ -170,6 +170,8 @@ openyida/
 
 ## Capabilities
 
+For a user-facing list of supported features and matching CLI commands, see [OpenYida 功能完整列表](./docs/capabilities.md).
+
 ### Application and Form Management
 
 ```bash
@@ -382,7 +384,7 @@ Run `openyida --help` or `openyida <command> --help` for detailed usage.
 | `openyida build-page <sourceFile> [--output file\|--write]` | Build Yida-compatible page source |
 | `openyida check-page <src> [--compat]` | Check custom page standards |
 | `openyida compile <src>` | Compile custom page locally |
-| `openyida publish <src> <appType> <formUuid> [--health-check] [--force] [--open\|--no-open]` | Compile and publish custom page |
+| `openyida publish <src> <appType> <formUuid> [--health-check] [--force] [--canvas] [--open\|--no-open]` | Compile and publish custom page |
 | `openyida update-form-config <appType> ...` | Update form configuration |
 
 ### Data & Permissions

package/bin/yida.js

@@ -818,7 +818,7 @@ async function main() {
     }
 
     case 'publish': {
-      const passThroughFlags = new Set(['--skip-lint', '--health-check', '--check', '--open', '--no-open', '--compat', '--modern', '--force']);
+      const passThroughFlags = new Set(['--skip-lint', '--health-check', '--check', '--open', '--no-open', '--compat', '--modern', '--force', '--canvas']);
       const filteredArgs = args.filter(arg => !passThroughFlags.has(arg));
       if (filteredArgs.length < 3) {
         throwCliUsage(t('cli.publish_usage'), t('cli.publish_example'));

package/lib/app/canvas-compile.js

@@ -0,0 +1,303 @@
+'use strict';
+
+/**
+ * canvas-compile.js - Code Canvas 页面本地编译器
+ *
+ * 把原始 React/JSX/TSX 源码在本地（Node）编译成 Code Canvas 运行态代码
+ * （runtimeCode）+ 依赖清单（importedModules），无需调用任何线上编译服务，
+ * 因此不依赖登录态、不经过风控 WAF。
+ *
+ * ── 运行时契约（@ali/vc-deep-yida 的 YidaCodeCanvas 物料）──
+ * 画布物料在浏览器里这样消费 runtimeCode（factory.tsx）：
+ *
+ *   const wrapped = `
+ *     return function(iframeWindow, parentWindow){
+ *       const window = iframeWindow;
+ *       ${runtimeCode}
+ *       return YidaComp;
+ *     }`;
+ *   new Function(wrapped)()(window, window);   // 取 Comp.YidaComp || Comp.default
+ *
+ * 由此推出 runtimeCode 必须满足：
+ *   1) 是 `new Function` 能解析的纯 JS —— 不能含 JSX，也不能含 ESM import/export 语法；
+ *   2) 执行结束时在作用域内留下一个 `YidaComp` 绑定；
+ *   3) 第三方依赖以 `window.<别名>` 形式引用（antd→window.antd、react→window.React …），
+ *      这些 UMD 依赖由画布运行时依据 importedModules 白名单按需注入。
+ *
+ * 因此本地编译 = Babel 把 JSX/TS 转成 ES5 → 把 import 改写成 window 别名引用、
+ * 把 export default 改写成 `var YidaComp = ...` → 正则抽出依赖包名。
+ */
+
+const Babel = require('@babel/standalone');
+
+/**
+ * 依赖 → window 别名白名单。
+ * 逐条镜像自 @ali/vc-deep-yida 的
+ *   src/components/yida-code-canvas/dependencies.ts → getModuleAliasMap()
+ * 只保留运行时真正用到的 windowAlias（资源 URL 由画布运行时按别名注入，
+ * 本地编译不关心 CDN 地址）。若此处与物料白名单漂移，编译产物仍可运行，
+ * 只是未收录的包会在浏览器端 `${name} is not found in dependencies map` 告警。
+ * @type {Record<string, string>}
+ */
+const MODULE_ALIAS_MAP = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  antd: 'antd',
+  ahooks: 'ahooks',
+  d3: 'd3',
+  '@ant-design/icons': 'icons',
+  dayjs: 'dayjs',
+  recharts: 'Recharts',
+  'yida-plugin-markdown': 'YidaMarkdown',
+  '@radix-ui/themes': 'Radix',
+  'lucide-react': 'DynamicIcon',
+  'framer-motion': 'FramerMotion',
+};
+
+const IMPORT_PATTERN = /import\s+(?:[\w*\s{},]+\s+from\s+)?['"]([^'"]+)['"]/g;
+const IMPORT_SIDE_EFFECT_PATTERN = /import\s+['"]([^'"]+)['"]/g;
+const REQUIRE_PATTERN = /require\(\s*['"]([^'"]+)['"]\s*\)/g;
+const DYNAMIC_IMPORT_PATTERN = /import\(\s*['"]([^'"]+)['"]\s*\)/g;
+
+/**
+ * 从源码里正则抽取裸包名（过滤相对/绝对路径），去重排序。
+ * 对齐 dingtalk-ai-app 的 _extract_imported_modules 行为。
+ * @param {string} code
+ * @returns {string[]}
+ */
+function extractImportedModules(code) {
+  const modules = new Set();
+  const patterns = [IMPORT_PATTERN, IMPORT_SIDE_EFFECT_PATTERN, REQUIRE_PATTERN, DYNAMIC_IMPORT_PATTERN];
+  for (const pattern of patterns) {
+    pattern.lastIndex = 0;
+    let match;
+    while ((match = pattern.exec(code)) !== null) {
+      const name = match[1];
+      if (name && !name.startsWith('.') && !name.startsWith('/')) {
+        modules.add(name);
+      }
+    }
+  }
+  return Array.from(modules).sort();
+}
+
+/**
+ * 把包名（可能是子路径，如 `antd/es/button` 或 `@scope/pkg/sub`）解析到根包，
+ * 再查白名单拿 windowAlias。命中返回别名，未命中返回 null。
+ * @param {string} pkg
+ * @returns {string|null}
+ */
+function resolveWindowAlias(pkg) {
+  if (MODULE_ALIAS_MAP[pkg]) {
+    return MODULE_ALIAS_MAP[pkg];
+  }
+  const segments = pkg.split('/');
+  const base = pkg.startsWith('@') ? segments.slice(0, 2).join('/') : segments[0];
+  return MODULE_ALIAS_MAP[base] || null;
+}
+
+/**
+ * Babel 插件：把 ESM import/export 改写成画布运行时约定。
+ *   import X from 'react'            → var _r = window.React; var X = _r && _r.__esModule ? _r.default : _r;
+ *   import { Button } from 'antd'    → var _a = window.antd; var { Button } = _a;
+ *   import * as d3 from 'd3'         → var d3 = window.d3;
+ *   import 'some.css'                → （删除；副作用依赖由运行时按 importedModules 注入）
+ *   export default App              → var YidaComp = App;
+ *   export const x = ...            → const x = ...（去掉 export 关键字）
+ * @param {{ types: import('@babel/types') }} babel
+ */
+function esmToWindowPlugin({ types: t }) {
+  function moduleExpr(pkg) {
+    const alias = resolveWindowAlias(pkg);
+    if (alias) {
+      return t.memberExpression(t.identifier('window'), t.identifier(alias));
+    }
+    // 未收录包：退化为 window["pkg"]，运行时若未注入会自然报错（与线上一致）。
+    return t.memberExpression(t.identifier('window'), t.stringLiteral(pkg), true);
+  }
+
+  return {
+    name: 'yida-esm-to-window',
+    visitor: {
+      ImportDeclaration(path) {
+        const pkg = path.node.source.value;
+        const specifiers = path.node.specifiers || [];
+
+        // 相对/绝对路径导入：画布沙箱内无法解析，直接丢弃。
+        if (pkg.startsWith('.') || pkg.startsWith('/')) {
+          path.remove();
+          return;
+        }
+        // 纯副作用导入（无 specifier）：依赖由运行时注入，删除语句本身。
+        if (specifiers.length === 0) {
+          path.remove();
+          return;
+        }
+
+        const decls = [];
+        const tmp = path.scope.generateUidIdentifier(resolveWindowAlias(pkg) || 'mod');
+        decls.push(t.variableDeclarator(t.cloneNode(tmp), moduleExpr(pkg)));
+
+        const namedProps = [];
+        for (const spec of specifiers) {
+          if (t.isImportDefaultSpecifier(spec)) {
+            // interop：有 __esModule 取 .default，否则取模块本身。
+            const init = t.conditionalExpression(
+              t.logicalExpression(
+                '&&',
+                t.cloneNode(tmp),
+                t.memberExpression(t.cloneNode(tmp), t.identifier('__esModule'))
+              ),
+              t.memberExpression(t.cloneNode(tmp), t.identifier('default')),
+              t.cloneNode(tmp)
+            );
+            decls.push(t.variableDeclarator(t.identifier(spec.local.name), init));
+          } else if (t.isImportNamespaceSpecifier(spec)) {
+            decls.push(t.variableDeclarator(t.identifier(spec.local.name), t.cloneNode(tmp)));
+          } else if (t.isImportSpecifier(spec)) {
+            const importedName = t.isIdentifier(spec.imported) ? spec.imported.name : spec.imported.value;
+            const localName = spec.local.name;
+            namedProps.push(
+              t.objectProperty(
+                t.identifier(importedName),
+                t.identifier(localName),
+                false,
+                importedName === localName
+              )
+            );
+          }
+        }
+        if (namedProps.length) {
+          decls.push(t.variableDeclarator(t.objectPattern(namedProps), t.cloneNode(tmp)));
+        }
+        path.replaceWith(t.variableDeclaration('var', decls));
+      },
+
+      ExportDefaultDeclaration(path) {
+        const decl = path.node.declaration;
+        if (t.isFunctionDeclaration(decl) || t.isClassDeclaration(decl)) {
+          if (decl.id) {
+            // 具名声明：保留声明本体，再补 `var YidaComp = <name>;`
+            const idName = decl.id.name;
+            path.replaceWithMultiple([
+              decl,
+              t.variableDeclaration('var', [
+                t.variableDeclarator(t.identifier('YidaComp'), t.identifier(idName)),
+              ]),
+            ]);
+            return;
+          }
+          const expr = t.isFunctionDeclaration(decl)
+            ? t.functionExpression(null, decl.params, decl.body, decl.generator, decl.async)
+            : t.classExpression(null, decl.superClass, decl.body, decl.decorators || []);
+          path.replaceWith(
+            t.variableDeclaration('var', [t.variableDeclarator(t.identifier('YidaComp'), expr)])
+          );
+          return;
+        }
+        // export default <表达式>
+        path.replaceWith(
+          t.variableDeclaration('var', [t.variableDeclarator(t.identifier('YidaComp'), decl)])
+        );
+      },
+
+      ExportNamedDeclaration(path) {
+        if (path.node.declaration) {
+          // export const/function/class ... → 去掉 export 关键字保留声明。
+          path.replaceWith(path.node.declaration);
+        } else {
+          // export { a, b } / re-export：画布不需要，删除。
+          path.remove();
+        }
+      },
+
+      ExportAllDeclaration(path) {
+        path.remove();
+      },
+    },
+  };
+}
+
+/**
+ * 本地编译 Code Canvas 源码。
+ * @param {string} source 原始 React/JSX/TSX 源码
+ * @returns {{ runtimeCode: string, importedModules: string }}
+ */
+function compileCanvasLocal(source) {
+  const importedModules = extractImportedModules(source);
+
+  // 第一步：剥类型 + 转 JSX（classic runtime，产出 React.createElement，
+  // 引用外部标识符 React；不注入 jsx-runtime import，避免再引入 ESM）。
+  const stage1 = Babel.transform(source, {
+    filename: 'canvas.tsx',
+    presets: [
+      ['typescript', { allExtensions: true, isTSX: true, allowDeclareFields: true }],
+      ['react', { runtime: 'classic' }],
+    ],
+    sourceType: 'module',
+    compact: false,
+    babelrc: false,
+    configFile: false,
+  });
+
+  let intermediate = stage1.code || '';
+
+  // classic JSX 需要作用域内存在 React；若源码没显式 import react，补一行
+  // `import React from 'react'`，交给下一步统一改写为 window.React，并确保
+  // 'react' 进入依赖清单（运行时据此注入 React UMD）。
+  const usesJsxRuntime = /\bReact\.createElement\b|\bReact\.Fragment\b/.test(intermediate);
+  const hasReactBinding = /\b(var|let|const)\s+React\b/.test(intermediate) || /\bimport\s+React\b/.test(intermediate);
+  if (usesJsxRuntime && !hasReactBinding) {
+    intermediate = "import React from 'react';\n" + intermediate;
+    if (!importedModules.includes('react')) {
+      importedModules.push('react');
+      importedModules.sort();
+    }
+  }
+
+  // 第二步：把 import/export 改写成 window 别名 + YidaComp。
+  const stage2 = Babel.transform(intermediate, {
+    filename: 'canvas.js',
+    plugins: [esmToWindowPlugin],
+    sourceType: 'module',
+    compact: false,
+    babelrc: false,
+    configFile: false,
+  });
+
+  const runtimeCode = stage2.code || '';
+  return {
+    runtimeCode,
+    importedModules: JSON.stringify(importedModules),
+  };
+}
+
+/**
+ * 兼容既有调用方（publish.js `await compileCanvas(src, { cookies })`）的异步入口。
+ * 本地编译不需要 cookies/endpoint，options 保留但忽略。
+ * @param {string} source
+ * @param {object} [options] 兼容占位，未使用
+ * @returns {Promise<{ runtimeCode: string, importedModules: string }>}
+ */
+function compileCanvas(source, options = {}) { // eslint-disable-line no-unused-vars
+  return new Promise((resolve, reject) => {
+    if (typeof source !== 'string' || source.trim() === '') {
+      reject(new Error('canvas 编译源码为空'));
+      return;
+    }
+    try {
+      resolve(compileCanvasLocal(source));
+    } catch (compileError) {
+      const detail = compileError && compileError.message ? compileError.message : String(compileError);
+      reject(new Error(`Code Canvas 本地编译失败: ${detail}`));
+    }
+  });
+}
+
+module.exports = {
+  compileCanvas,
+  compileCanvasLocal,
+  extractImportedModules,
+  resolveWindowAlias,
+  MODULE_ALIAS_MAP,
+};

package/lib/app/publish.js

@@ -33,6 +33,7 @@ const {
 const { t } = require('../core/i18n');
 const { banner, step, label, success, fail, warn, info, error, result, usage, hint } = require('../core/chalk');
 const { compileSource } = require('./page-compiler');
+const { compileCanvas } = require('./canvas-compile');
 const { stripSubtableFieldPrefix } = require('../formula/evaluate');
 const { runLintCheck } = require('./page-linter');
 const { buildPageFile, shouldBuildPageSource } = require('./page-compat');
@@ -82,7 +83,8 @@ function parseArgs(argv = process.argv.slice(2)) {
   const healthCheck = args.includes('--health-check') || args.includes('--check');
   const compat = args.includes('--compat') || args.includes('--modern');
   const force = args.includes('--force');
-  const filteredArgs = args.filter(arg => arg !== '--skip-lint' && arg !== '--health-check' && arg !== '--check' && arg !== '--compat' && arg !== '--modern' && arg !== '--force');
+  const canvas = args.includes('--canvas');
+  const filteredArgs = args.filter(arg => arg !== '--skip-lint' && arg !== '--health-check' && arg !== '--check' && arg !== '--compat' && arg !== '--modern' && arg !== '--force' && arg !== '--canvas');
 
   if (filteredArgs.length < 3) {
     usage(t('publish.usage'), t('publish.example'));
@@ -97,6 +99,7 @@ function parseArgs(argv = process.argv.slice(2)) {
     healthCheck,
     compat,
     force,
+    canvas,
     browserOpenMode: openOption.mode,
   };
 }
@@ -535,6 +538,123 @@ function buildSchemaContent(sourceCode, compiledCode, formUuid, options = {}) {
   return JSON.stringify(schema);
 }
 
+// ── 2b. 构建 Code Canvas Schema ─────────────────────
+// 与 native 的差异仅在 content JSON：Page.children 直接挂一个 YidaCodeCanvas
+// 节点，无 RootHeader/RootContent/Jsx/RootFooter；actions.module 为默认 didMount
+// 样板；Page.dataSource 精简（canvas 无原生数据桥）。
+// wire 层（path/query/body/headers）完全复用 sendSaveRequest，零改动。
+
+// canvas 页无用户页面方法，actions.module 只需注册一个空 didMount。
+const CANVAS_ACTIONS_SOURCE = 'export function didMount() {}';
+const CANVAS_ACTIONS_COMPILED = '"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.didMount=didMount;function didMount(){}';
+
+function buildCanvasSchemaContent(sourceCode, runtimeCode, importedModules, formUuid) {
+  info(t('publish.building_schema'));
+
+  const nextNodeId = createNodeIdGenerator();
+  const constructorCode = "function constructor() {\nvar module = { exports: {} };\nvar _this = this;\nthis.__initMethods__(module.exports, module);\nObject.keys(module.exports).forEach(function(item) {\n  if(typeof module.exports[item] === 'function'){\n    _this[item] = module.exports[item];\n  }\n});\n\n}";
+
+  const schema = {
+    schemaType: 'superform',
+    schemaVersion: '5.0',
+    pages: [
+      {
+        utils: [
+          {
+            name: 'legaoBuiltin',
+            type: 'npm',
+            content: { package: '@ali/vu-legao-builtin', version: '3.0.0', exportName: 'legaoBuiltin' },
+          },
+          {
+            name: 'yidaPlugin',
+            type: 'npm',
+            content: { package: '@ali/vu-yida-plugin', version: '1.1.0', exportName: 'yidaPlugin' },
+          },
+        ],
+        componentsMap: [
+          { package: '@ali/vc-deep-yida', version: '1.5.169', componentName: 'YidaCodeCanvas' },
+          { package: '@ali/vc-deep-yida', version: '1.5.169', componentName: 'RootHeader' },
+          { package: '@ali/vc-deep-yida', version: '1.5.169', componentName: 'RootContent' },
+          { package: '@ali/vc-deep-yida', version: '1.5.169', componentName: 'RootFooter' },
+          { package: '@ali/vc-deep-yida', version: '1.5.169', componentName: 'Page' },
+        ],
+        componentsTree: [
+          {
+            componentName: 'Page',
+            id: nextNodeId(),
+            props: {
+              contentBgColor: 'white',
+              pageStyle: { backgroundColor: '#f2f3f5' },
+              contentMargin: '0',
+              contentPadding: '0',
+              showTitle: false,
+              contentPaddingMobile: '0',
+              templateVersion: '1.0.0',
+              contentMarginMobile: '0',
+              className: 'page_' + generateSuffix(),
+              contentBgColorMobile: 'white',
+            },
+            condition: true,
+            css: 'body{background-color:#f2f3f5}.vc-page-yida-page{--yida-form-content-padding:0;--yida-form-content-margin:0;--yida-layout-padding:0}.vc-deep-container-entry.vc-rootcontent{padding:0!important;margin-top:0!important;margin-right:0!important;margin-bottom:0!important;margin-left:0!important}',
+            methods: {
+              __initMethods__: {
+                type: 'js',
+                source: 'function (exports, module) { /*set actions code here*/ }',
+                compiled: 'function (exports, module) { /*set actions code here*/ }',
+              },
+            },
+            dataSource: {
+              offline: [],
+              globalConfig: getGlobalDataSourceFitConfig(),
+              online: [],
+              list: [],
+              sync: true,
+            },
+            lifeCycles: {
+              constructor: { type: 'js', compiled: constructorCode, source: constructorCode },
+              componentWillUnmount: '',
+              componentDidMount: { name: 'didMount', id: 'didMount', params: {}, type: 'actionRef' },
+            },
+            hidden: false,
+            title: '',
+            isLocked: false,
+            conditionGroup: '',
+            children: [
+              {
+                componentName: 'YidaCodeCanvas',
+                id: nextNodeId(),
+                props: {
+                  code: sourceCode,
+                  runtimeCode: runtimeCode,
+                  pageType: 'application',
+                  isWebCCompiled: true,
+                  componentProps: {},
+                  importedModules: importedModules || '',
+                },
+                condition: true,
+                hidden: false,
+                title: '',
+                isLocked: false,
+                conditionGroup: '',
+              },
+            ],
+          },
+        ],
+        id: formUuid,
+        connectComponent: [],
+      },
+    ],
+    actions: {
+      module: { compiled: CANVAS_ACTIONS_COMPILED, source: CANVAS_ACTIONS_SOURCE },
+      type: 'FUNCTION',
+      list: [{ id: 'didMount', title: 'didMount' }],
+    },
+    config: { connectComponent: [] },
+  };
+
+  return JSON.stringify(schema);
+}
+
 
 // ── 4. 发送 saveFormSchema 请求 ──────────────────────
 
@@ -873,47 +993,72 @@ function sendHealthCheckRequest(pageUrl, cookies) {
 // ── 主流程 ────────────────────────────────────────────
 
 async function main(argv) {
-  const { appType, formUuid, sourceFile, skipLint, healthCheck, compat, force, browserOpenMode } = parseArgs(argv);
+  const { appType, formUuid, sourceFile, skipLint, healthCheck, compat, force, canvas: canvasFlag, browserOpenMode } = parseArgs(argv);
 
   let sourcePath = path.resolve(sourceFile);
   if (!fs.existsSync(sourcePath)) {
     error(t('publish.source_not_found', sourcePath));
   }
 
+  // 路由：默认 native；.canvas.jsx / .canvas.tsx 源文件自动走 Code Canvas 链路，
+  // --canvas 作为显式覆盖（用于扩展名不规范但确为 canvas 源码的场景）。
+  const isCanvas = canvasFlag || /\.canvas\.(jsx|tsx)$/i.test(sourcePath);
+
   const initialSourceCode = fs.readFileSync(sourcePath, 'utf-8');
   warnLargePageSource(initialSourceCode, sourcePath);
-  if (shouldBuildPageSource(initialSourceCode, sourcePath, { modern: compat })) {
-    step(0, t('build_page.step'));
-    const buildResult = buildPageFile(sourcePath, { modern: compat, skipSizeWarning: true });
-    if (!buildResult.ok) {
-      buildResult.errors.forEach((issue) => warn(`${issue.code}: ${issue.message}`));
-      const lintErrors = buildResult.lint && buildResult.lint.errors ? buildResult.lint.errors : [];
-      lintErrors.forEach((issue) => warn(`${issue.rule}: ${issue.message}`));
-      process.exit(1);
-    }
-    sourcePath = buildResult.outputPath;
-    success(t('build_page.output', sourcePath));
-  }
 
-  const parsedSource = path.parse(sourcePath);
-  const compiledPath = path.join(findProjectRoot(), 'pages', 'dist', `${parsedSource.name}.js`);
-  warnDuplicateSourceMismatches(sourcePath);
-
-  // Step 0: 宜搭编码规范预检（可通过 --skip-lint 跳过）
-  if (!skipLint) {
-    step(0, t('publish.step_lint'));
-    const sourceCode = fs.readFileSync(sourcePath, 'utf-8');
-    const lintPassed = runLintCheck(sourceCode, sourcePath, { successMessage: false });
-    if (!lintPassed) {
+  let sourceCode = initialSourceCode;
+  let compiledCode = '';
+  let canvasResult = null;
+
+  if (isCanvas) {
+    // Code Canvas 链路：跳过 native 编译/lint，改用本地 Babel 编译
+    // （JSX/TS → runtimeCode + importedModules），无需登录态，可在开浏览器前失败快。
+    step(1, t('publish.step_canvas_compile'));
+    info(t('publish.canvas_compiling'));
+    try {
+      canvasResult = await compileCanvas(initialSourceCode);
+    } catch (canvasCompileError) {
+      fail(t('publish.canvas_compile_failed', canvasCompileError.message));
       process.exit(1);
     }
-    success(t('publish.lint_passed'));
+    success(t('publish.canvas_compile_done'));
   } else {
-    info(t('publish.lint_skipped'));
+    if (shouldBuildPageSource(initialSourceCode, sourcePath, { modern: compat })) {
+      step(0, t('build_page.step'));
+      const buildResult = buildPageFile(sourcePath, { modern: compat, skipSizeWarning: true });
+      if (!buildResult.ok) {
+        buildResult.errors.forEach((issue) => warn(`${issue.code}: ${issue.message}`));
+        const lintErrors = buildResult.lint && buildResult.lint.errors ? buildResult.lint.errors : [];
+        lintErrors.forEach((issue) => warn(`${issue.rule}: ${issue.message}`));
+        process.exit(1);
+      }
+      sourcePath = buildResult.outputPath;
+      success(t('build_page.output', sourcePath));
+    }
+    warnDuplicateSourceMismatches(sourcePath);
+
+    // Step 0: 宜搭编码规范预检（可通过 --skip-lint 跳过）
+    if (!skipLint) {
+      step(0, t('publish.step_lint'));
+      const lintSource = fs.readFileSync(sourcePath, 'utf-8');
+      const lintPassed = runLintCheck(lintSource, sourcePath, { successMessage: false });
+      if (!lintPassed) {
+        process.exit(1);
+      }
+      success(t('publish.lint_passed'));
+    } else {
+      info(t('publish.lint_skipped'));
+    }
+
+    step(1, t('publish.step_compile'));
+    const compiled = compileSource(sourcePath);
+    sourceCode = compiled.sourceCode;
+    compiledCode = compiled.compiledCode;
   }
 
-  step(1, t('publish.step_compile'));
-  const { sourceCode, compiledCode } = compileSource(sourcePath);
+  const parsedSource = path.parse(sourcePath);
+  const compiledPath = path.join(findProjectRoot(), 'pages', 'dist', `${parsedSource.name}.js`);
 
   step(2, t('common.step_login', 2));
   let cookieData = loadCookieData();
@@ -934,18 +1079,23 @@ async function main(argv) {
   cookies = authRef.cookies;
   baseUrl = authRef.baseUrl;
 
-  let existingDataSource = null;
-  try {
-    existingDataSource = await readExistingPageDataSource(appType, formUuid, authRef);
-  } catch (dataSourceError) {
-    fail(t('publish.data_source_fetch_failed', dataSourceError.message));
-    process.exit(1);
+  let schemaContent;
+  if (isCanvas) {
+    // canvasResult 已在登录前本地编译完成，这里只需据其装配 Schema content。
+    schemaContent = buildCanvasSchemaContent(sourceCode, canvasResult.runtimeCode, canvasResult.importedModules, formUuid);
+  } else {
+    let existingDataSource = null;
+    try {
+      existingDataSource = await readExistingPageDataSource(appType, formUuid, authRef);
+    } catch (dataSourceError) {
+      fail(t('publish.data_source_fetch_failed', dataSourceError.message));
+      process.exit(1);
+    }
+    csrfToken = authRef.csrfToken;
+    cookies = authRef.cookies;
+    baseUrl = authRef.baseUrl;
+    schemaContent = buildSchemaContent(sourceCode, compiledCode, formUuid, { existingDataSource });
   }
-  csrfToken = authRef.csrfToken;
-  cookies = authRef.cookies;
-  baseUrl = authRef.baseUrl;
-
-  const schemaContent = buildSchemaContent(sourceCode, compiledCode, formUuid, { existingDataSource });
   success(t('publish.schema_built'));
 
   banner(t('publish.title'));
@@ -1078,4 +1228,5 @@ if (require.main === module) {
   module.exports.extractPageDataSource = extractPageDataSource;
   module.exports.countCustomPageDataSources = countCustomPageDataSources;
   module.exports.buildSchemaContent = buildSchemaContent;
+  module.exports.buildCanvasSchemaContent = buildCanvasSchemaContent;
 }

package/lib/core/command-manifest.js

@@ -86,7 +86,7 @@ const COMMAND_GROUPS = [
       command('build-page', ['build-page'], 'build-page <sourceFile> [--output file|--write]', 'help.cmd_build_page', { requiresLogin: false }),
       command('check-page', ['check-page'], 'check-page <src> [--compat]', 'help.cmd_check_page', { output: 'text|json' }),
       command('compile', ['compile'], 'compile <src>', 'help.cmd_compile', { requiresLogin: false }),
-      command('publish', ['publish'], 'publish <src> <appType> <formUuid> [--health-check] [--force] [--open|--no-open]', 'help.cmd_publish'),
+      command('publish', ['publish'], 'publish <src> <appType> <formUuid> [--health-check] [--force] [--canvas] [--open|--no-open]', 'help.cmd_publish'),
       command('update-form-config', ['update-form-config'], 'update-form-config <appType> ...', 'help.cmd_update_form_config'),
     ],
   },

package/lib/core/locales/ar.js

@@ -478,7 +478,7 @@ module.exports = {
     lint_array_callback_function: '.{0}(function ...) قد يفقد this داخل callbacks؛ استخدم بدلا من ذلك .{0}((item) => ...)',
     lint_foreach_callback_function: '.forEach(function ...) قد يفقد this داخل callbacks؛ يفضل استخدام .forEach((item) => ...)',
     lint_controlled_input: 'يستخدم input وضع value المتحكم به. يجب أن تستخدم صفحات Yida defaultValue + onChange لتحديث _customState',
-    lint_native_select_ui: 'تم العثور على <select> أصلي. في صفحات الكود المخصصة يمكنك استخدام مكون Yida <SelectField> مباشرة (يتم حقنه عالميا في وقت التشغيل، ولا يحتاج import)، أو استخدام قائمة مخصصة div+button+onClick للحفاظ على تناسق التصميم وتوافق الجوال',
+    lint_native_select_ui: 'تم العثور على <select> أصلي. في الصفحات المخصصة العادية استخدم قائمة div+button+onClick للحفاظ على تناسق التصميم وتوافق الجوال. استخدم مكونات حقول Yida في Code Canvas فقط بعد التحقق من ربط التبعيات',
     lint_iframe_self_navigation: 'تعمل صفحات Yida المخصصة داخل iframe. استخدم target="_top"/target="_blank" أو window.top.location للتنقل إلى صفحات Yida لتجنب الصفحات المتداخلة.',
     lint_page_size_limit: 'pageSize={0} يتجاوز حد واجهة Yida API وهو 100؛ استخدم 100 أو أقل',
     lint_page_size_recommend: 'pageSize={0} كبير؛ القيمة الموصى بها هي 50 (أفضل أداء، الحد الأقصى 100). يفضل 10/20/50',
@@ -522,6 +522,10 @@ module.exports = {
     building_schema: '[4/4] جارٍ بناء المخطط...',
     formula_prefix_fixed: '  🔧 تم تصحيح {0} من مراجع بادئة صيغة الجدول الفرعي تلقائيًا',
     schema_built: '  ✅ تم بناء المخطط بنجاح!',
+    step_canvas_compile: '\n📦 Step 1: تجميع مصدر Code Canvas\n',
+    canvas_compiling: '  🎨 جارٍ تجميع مصدر Code Canvas محليًا...',
+    canvas_compile_done: '  ✅ تم تجميع Code Canvas!',
+    canvas_compile_failed: '  ❌ فشل تجميع Code Canvas: {0}',
     step_login: '\n🔑 Step 2: قراءة بيانات تسجيل الدخول',
     step_publish: '\n📤 Step 3: نشر المخطط\n',
     publish_failed: '\n❌ فشل النشر: {0}',
@@ -535,7 +539,7 @@ module.exports = {
     health_check_failed: '  ⚠️  Health check failed: HTTP {0} {1}',
     exception: '\n❌ خطأ في النشر: {0}',
     source_not_found: '❌ لم يتم العثور على ملف المصدر: {0}',
-    usage: 'الاستخدام: openyida publish <ملفالمصدر> <appType> <formUuid> [--health-check]',
+    usage: 'الاستخدام: openyida publish <ملفالمصدر> <appType> <formUuid> [--health-check] [--canvas]',
     example: 'مثال: openyida publish pages/src/xxx.js APP_XXX FORM-XXX --health-check',
   },