openyida 2026.9.1 → 2026.9.2

package/lib/app/custom-theme.js

@@ -0,0 +1,300 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const { getAccessToken } = require('../auth/token-auth');
+
+const MAX_THEME_FILE_BYTES = 20 * 1024 * 1024;
+const REQUIRED_BRAND_SCALE_TOKENS = Object.freeze([
+  '--color-brand1-1',
+  '--color-brand1-2',
+  '--color-brand1-3',
+  '--color-brand1-5',
+  '--color-brand1-6',
+  '--color-brand1-9',
+  '--color-brand1-10',
+]);
+const UNSAFE_THEME_PATTERNS = [
+  { pattern: /<\/?script\b/i, message: '主题 CSS 不能包含 script 标签' },
+  { pattern: /<\/?style\b/i, message: '主题 CSS 不能包含 style 标签' },
+  { pattern: /@import\b/i, message: '主题 CSS 不能包含 @import' },
+  { pattern: /expression\s*\(/i, message: '主题 CSS 不能包含 expression()' },
+  { pattern: /behavior\s*:/i, message: '主题 CSS 不能包含 behavior 属性' },
+  { pattern: /-moz-binding\s*:/i, message: '主题 CSS 不能包含 -moz-binding' },
+  { pattern: /\b(?:javascript|data|vbscript|file|blob)\s*:/i, message: '主题 CSS 不能包含危险资源协议' },
+];
+
+const THEME_COLOR_HEX_PATTERN = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+const THEME_COLOR_RGB_PATTERN = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(0(?:\.\d+)?|1(?:\.0+)?|\.\d+))?\s*\)$/i;
+const THEME_COLOR_HSL_PATTERN = /^hsla?\(\s*([-+]?(?:\d+(?:\.\d+)?|\.\d+))(?:deg)?\s*,\s*([-+]?(?:\d+(?:\.\d+)?|\.\d+))%\s*,\s*([-+]?(?:\d+(?:\.\d+)?|\.\d+))%(?:\s*,\s*([-+]?(?:\d+(?:\.\d+)?|\.\d+))(%?))?\s*\)$/i;
+
+function toHexChannel(value) {
+  return Math.max(0, Math.min(255, Math.round(value))).toString(16).padStart(2, '0');
+}
+
+function opaqueHex(red, green, blue, alpha = 1) {
+  const blend = (channel) => channel * alpha + 255 * (1 - alpha);
+  return `#${toHexChannel(blend(red))}${toHexChannel(blend(green))}${toHexChannel(blend(blue))}`.toUpperCase();
+}
+
+/**
+ * 与 yc-utils normalizeCssColorToHex 保持相同口径：透明色按白色背景合成。
+ * appIcon 的 icon%%color 协议只保存不透明 HEX。
+ */
+function normalizeCssColorToHex(value) {
+  const color = String(value || '').trim();
+  const shortHexMatch = color.match(/^#([0-9a-f]{3})$/i);
+  if (shortHexMatch) {
+    return `#${shortHexMatch[1].split('').map((channel) => channel + channel).join('')}`.toUpperCase();
+  }
+  if (/^#[0-9a-f]{6}$/i.test(color)) {
+    return color.toUpperCase();
+  }
+
+  const rgbMatch = color.match(THEME_COLOR_RGB_PATTERN);
+  if (rgbMatch && rgbMatch.slice(1, 4).every((channel) => Number(channel) <= 255)) {
+    const alpha = rgbMatch[4] === undefined ? 1 : Number(rgbMatch[4]);
+    return opaqueHex(Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3]), alpha);
+  }
+
+  const hslMatch = color.match(THEME_COLOR_HSL_PATTERN);
+  if (!hslMatch) {return '';}
+  const saturation = Number(hslMatch[2]);
+  const lightness = Number(hslMatch[3]);
+  const alpha = hslMatch[4] === undefined
+    ? 1
+    : Number(hslMatch[4]) / (hslMatch[5] === '%' ? 100 : 1);
+  if (saturation < 0 || saturation > 100 || lightness < 0 || lightness > 100 || alpha < 0 || alpha > 1) {
+    return '';
+  }
+
+  const hue = ((Number(hslMatch[1]) % 360) + 360) % 360;
+  const normalizedSaturation = saturation / 100;
+  const normalizedLightness = lightness / 100;
+  const chroma = (1 - Math.abs(2 * normalizedLightness - 1)) * normalizedSaturation;
+  const hueSection = hue / 60;
+  const secondLargest = chroma * (1 - Math.abs((hueSection % 2) - 1));
+  const matchValue = normalizedLightness - chroma / 2;
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (hueSection < 1) {
+    red = chroma;
+    green = secondLargest;
+  } else if (hueSection < 2) {
+    red = secondLargest;
+    green = chroma;
+  } else if (hueSection < 3) {
+    green = chroma;
+    blue = secondLargest;
+  } else if (hueSection < 4) {
+    green = secondLargest;
+    blue = chroma;
+  } else if (hueSection < 5) {
+    red = secondLargest;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = secondLargest;
+  }
+  return opaqueHex(
+    (red + matchValue) * 255,
+    (green + matchValue) * 255,
+    (blue + matchValue) * 255,
+    alpha
+  );
+}
+
+function normalizeThemeColor(value) {
+  if (!value) {return null;}
+  const color = String(value).trim();
+  if (THEME_COLOR_HEX_PATTERN.test(color)) {
+    return color.toUpperCase();
+  }
+
+  const rgbMatch = color.match(THEME_COLOR_RGB_PATTERN);
+  if (rgbMatch && rgbMatch.slice(1, 4).every((channel) => Number(channel) <= 255)) {
+    return color;
+  }
+
+  const hslMatch = color.match(THEME_COLOR_HSL_PATTERN);
+  if (hslMatch) {
+    const saturation = Number(hslMatch[2]);
+    const lightness = Number(hslMatch[3]);
+    const alpha = hslMatch[4] === undefined
+      ? 1
+      : Number(hslMatch[4]) / (hslMatch[5] === '%' ? 100 : 1);
+    if (saturation >= 0 && saturation <= 100 && lightness >= 0 && lightness <= 100 && alpha >= 0 && alpha <= 1) {
+      return color;
+    }
+  }
+
+  throw new Error(`Unsupported theme color: ${value}. Use #RGB, #RRGGBB, rgb(a), or hsl(a).`);
+}
+
+function extractThemeColor(cssText) {
+  const source = String(cssText || '').replace(/\/\*[\s\S]*?\*\//g, '');
+  const match = source.match(/(?:^|[;{])\s*--color-brand1-6\s*:\s*([^;}\n]+)/i);
+  if (!match) {
+    throw new Error('自定义主题文件必须声明 --color-brand1-6，CLI 会用它保存应用 themeColor');
+  }
+  try {
+    return normalizeThemeColor(match[1]);
+  } catch (error) {
+    throw new Error(`--color-brand1-6 必须是可直接保存的颜色值: ${error.message}`);
+  }
+}
+
+function validateThemeCssContent(cssText) {
+  const source = String(cssText || '');
+  const sourceWithoutComments = source.replace(/\/\*[\s\S]*?\*\//g, '');
+  for (const rule of UNSAFE_THEME_PATTERNS) {
+    if (rule.pattern.test(sourceWithoutComments)) {
+      throw new Error(rule.message);
+    }
+  }
+
+  const urlPattern = /url\(\s*(['"]?)(.*?)\1\s*\)/gi;
+  let match = urlPattern.exec(sourceWithoutComments);
+  while (match) {
+    const value = String(match[2] || '').trim();
+    const allowed = /^https:\/\//i.test(value) ||
+      (value.startsWith('/') && !value.startsWith('//')) ||
+      /^asset\s*\(/i.test(value) ||
+      /^var\s*\(/i.test(value);
+    if (!allowed) {
+      throw new Error(`主题 CSS 包含不安全的 url(): ${value || '(empty)'}`);
+    }
+    match = urlPattern.exec(sourceWithoutComments);
+  }
+
+  const declaredTokens = new Set();
+  const declarationPattern = /(?:^|[;{])\s*(--color-brand1-(?:10|[1-9]))\s*:\s*([^;}\n]+)/gi;
+  let declaration = declarationPattern.exec(sourceWithoutComments);
+  while (declaration) {
+    if (declaration[2].trim()) {
+      declaredTokens.add(declaration[1].toLowerCase());
+    }
+    declaration = declarationPattern.exec(sourceWithoutComments);
+  }
+  const missingTokens = REQUIRED_BRAND_SCALE_TOKENS.filter((token) => !declaredTokens.has(token));
+  if (missingTokens.length > 0) {
+    throw new Error(
+      `自定义主题文件必须完整声明平台品牌色阶 ${REQUIRED_BRAND_SCALE_TOKENS.join('、')}，缺少: ${missingTokens.join(', ')}`
+    );
+  }
+}
+
+function readThemeCssFile(filePath) {
+  const resolvedPath = path.resolve(String(filePath || ''));
+  if (path.extname(resolvedPath).toLowerCase() !== '.css') {
+    throw new Error('自定义主题文件必须是 .css 文件');
+  }
+  if (/[<>"'`]/.test(path.basename(resolvedPath))) {
+    throw new Error('自定义主题文件名包含不安全字符');
+  }
+  const stat = fs.statSync(resolvedPath);
+  if (!stat.isFile()) {
+    throw new Error(`自定义主题文件不存在: ${resolvedPath}`);
+  }
+  if (stat.size <= 0 || stat.size > MAX_THEME_FILE_BYTES) {
+    throw new Error('自定义主题文件大小必须在 1 字节到 20 MB 之间');
+  }
+  const content = fs.readFileSync(resolvedPath);
+  const cssText = content.toString('utf8');
+  validateThemeCssContent(cssText);
+  return {
+    path: resolvedPath,
+    name: path.basename(resolvedPath),
+    size: stat.size,
+    content,
+    themeColor: extractThemeColor(cssText),
+  };
+}
+
+function unwrapUploadResponse(response) {
+  let current = response;
+  for (let depth = 0; depth < 4; depth++) {
+    if (!current || typeof current !== 'object') {
+      break;
+    }
+    if (current.success === false) {
+      throw new Error(current.errorMsg || current.message || '自定义主题文件上传失败');
+    }
+    if (current.content && typeof current.content === 'object') {
+      if (current.content.url || current.content.downloadUrl) {
+        return current.content;
+      }
+      current = current.content;
+      continue;
+    }
+    break;
+  }
+  if (current && typeof current === 'object' && (current.url || current.downloadUrl)) {
+    return current;
+  }
+  throw new Error('自定义主题文件上传结果缺少 CSS 地址');
+}
+
+function buildCustomThemeStyle(uploadResult) {
+  const upload = unwrapUploadResponse(uploadResult);
+  return JSON.stringify({
+    enabled: true,
+    iframePropagation: false,
+    cssUrl: upload.downloadUrl || upload.url,
+    cssFileName: upload.name || '',
+  });
+}
+
+async function uploadCustomThemeFile(appType, filePath, authRef, options = {}) {
+  const file = readThemeCssFile(filePath);
+  const fetchImpl = options.fetchImpl || globalThis.fetch;
+  const FormDataImpl = options.FormDataImpl || globalThis.FormData;
+  const BlobImpl = options.BlobImpl || globalThis.Blob;
+  if (typeof fetchImpl !== 'function' || typeof FormDataImpl !== 'function' || typeof BlobImpl !== 'function') {
+    throw new Error('当前 Node.js 环境缺少 fetch/FormData/Blob，请使用 Node.js 18+');
+  }
+
+  const accessToken = await getAccessToken({ projectRoot: authRef && authRef.projectRoot });
+  const endpoint = new URL('/query/app/customTheme/upload.json', authRef.baseUrl);
+  if (authRef.csrfToken) {
+    endpoint.searchParams.set('_csrf_token', authRef.csrfToken);
+  }
+  const form = new FormDataImpl();
+  form.append('appType', appType);
+  form.append('uploadInput', new BlobImpl([file.content], { type: 'text/css' }), file.name);
+
+  const response = await fetchImpl(endpoint, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json, text/plain, */*',
+      Authorization: `Bearer ${accessToken}`,
+      Origin: authRef.baseUrl,
+      Referer: `${authRef.baseUrl}/`,
+      'x-requested-with': 'XMLHttpRequest',
+    },
+    body: form,
+  });
+
+  if (response.status === 401 || response.status === 403) {
+    return { __needLogin: true, __httpStatus: response.status };
+  }
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new Error((payload && (payload.errorMsg || payload.message)) || `主题文件上传失败: HTTP ${response.status}`);
+  }
+  return payload;
+}
+
+module.exports = {
+  MAX_THEME_FILE_BYTES,
+  REQUIRED_BRAND_SCALE_TOKENS,
+  validateThemeCssContent,
+  normalizeThemeColor,
+  normalizeCssColorToHex,
+  extractThemeColor,
+  readThemeCssFile,
+  unwrapUploadResponse,
+  buildCustomThemeStyle,
+  uploadCustomThemeFile,
+};

package/lib/app/get-schema.js

@@ -24,7 +24,7 @@ const { fetchFormPageList } = require('./form-navigation');
 const { buildFieldResolution } = require('./schema-field-resolution');
 const { buildSemanticAnalysis } = require('./schema-semantic-analysis');
 
-// 需要在报表 fieldCode 中加 _value 后缀的字段类型
+// 报表运行时可能暴露 raw fieldId 或 _value；最终值必须由报表查询探针确认。
 const FIELD_TYPES_NEEDING_VALUE_SUFFIX = new Set([
   'SelectField',
   'MultiSelectField',
@@ -44,9 +44,9 @@ const FIELD_COMPONENT_NAMES = new Set([
 ]);
 
 /**
- * 从 Schema 中提取字段摘要，列出每个字段的真实 fieldId、组件别名和报表用 reportFieldCode。
+ * 从 Schema 中提取字段摘要。表单 Schema 只能提供报表字段候选，不能代替 cube 运行时元数据。
  * @param {object} schemaResult - getFormSchema API 返回结果
- * @returns {Array<{label, componentName, fieldId, alias, reportFieldCode, options}>}
+ * @returns {Array<{label, componentName, fieldId, alias, reportFieldCode, reportFieldCodeCandidates, options}>}
  */
 function extractFieldSummary(schemaResult) {
   const fields = [];
@@ -67,9 +67,9 @@ function extractFieldSummary(schemaResult) {
         ? (typeof labelRaw === 'object' ? (labelRaw.zh_CN || labelRaw.en_US || '') : String(labelRaw))
         : '';
       const fieldId = props.fieldId || '';
-      const reportFieldCode = FIELD_TYPES_NEEDING_VALUE_SUFFIX.has(node.componentName)
-        ? `${fieldId}_value`
-        : fieldId;
+      const reportFieldCodeCandidates = FIELD_TYPES_NEEDING_VALUE_SUFFIX.has(node.componentName)
+        ? [fieldId, `${fieldId}_value`]
+        : [fieldId];
       if (fieldId) {
         const options = extractOptionSummary(props);
         const optionSource = getOptionSource(props) || [];
@@ -87,7 +87,8 @@ function extractFieldSummary(schemaResult) {
           componentName: node.componentName,
           fieldId,
           alias: aliasMaps.aliasByFieldId[fieldId] || '',
-          reportFieldCode,
+          reportFieldCode: fieldId,
+          reportFieldCodeCandidates,
           options,
           optionCount: optionSource.length,
           optionsTruncated: optionSource.length > options.length,
@@ -512,7 +513,7 @@ function printFieldSummary(result) {
     return;
   }
 
-  process.stderr.write(`\n  ${c.bold}${c.cyan}📋 字段摘要${c.reset} ${c.dim}（报表配置请使用 reportFieldCode）${c.reset}\n`);
+  process.stderr.write(`\n  ${c.bold}${c.cyan}📋 字段摘要${c.reset} ${c.dim}（报表字段最终以运行时查询探针为准）${c.reset}\n`);
   process.stderr.write(`  ${c.dim}${'─'.repeat(80)}${c.reset}\n`);
   process.stderr.write(
     `  ${c.bold}${'label'.padEnd(16)}${'alias'.padEnd(18)}${'componentName'.padEnd(20)}${'fieldId'.padEnd(28)}reportFieldCode${c.reset}\n`
@@ -524,7 +525,7 @@ function printFieldSummary(result) {
     );
   }
   process.stderr.write(`  ${c.dim}${'─'.repeat(80)}${c.reset}\n`);
-  process.stderr.write(`  ${c.dim}注：SelectField/EmployeeField 在报表中需加 _value 后缀${c.reset}\n\n`);
+  process.stderr.write(`  ${c.dim}注：Select/Employee 等字段同时返回 raw 与 _value 候选；create-report 会用真实图表查询验证并在原 reportId 内窄修复${c.reset}\n\n`);
 }
 
 function buildSchemaSummary(appType, formUuid, schemaResult, meta = {}) {

package/lib/app/services/canvas-page-schema-builder.js

@@ -10,7 +10,61 @@ const {
   findEmojiInValue,
 } = require('../../core/no-emoji-detector');
 
-const CANVAS_YIDA_API_BRIDGE_SOURCE = `function openyidaYidaApiBridgeTargets() {
+const CANVAS_YIDA_API_BRIDGE_SOURCE = `var OPENYIDA_YIDA_FORM_API_METHODS = [
+  'saveFormData',
+  'updateFormData',
+  'searchFormDataIds',
+  'getFormComponentDefinationList',
+  'deleteFormData',
+  'getFormDataById',
+  'searchFormDatas'
+];
+var OPENYIDA_YIDA_PROCESS_API_METHODS = [
+  'startProcessInstance',
+  'updateProcessInstance',
+  'deleteProcessInstance',
+  'getProcessInstances',
+  'getProcessInstanceIds',
+  'getProcessInstanceById'
+];
+var OPENYIDA_YIDA_FORM_DESIGN_API_METHODS = [
+  'saveFormSchemaInfo',
+  'getFormSchema',
+  'saveFormSchema',
+  'updateFormConfig'
+];
+var OPENYIDA_YIDA_GENERIC_API_METHODS = [
+  'request',
+  'searchUserList'
+];
+var OPENYIDA_YIDA_SEARCH_PARAM_METHODS = [
+  'searchFormDatas',
+  'searchFormDataIds',
+  'getProcessInstances',
+  'getProcessInstanceIds'
+];
+var OPENYIDA_KNOWN_YIDA_API_METHODS = OPENYIDA_YIDA_FORM_API_METHODS
+  .concat(OPENYIDA_YIDA_PROCESS_API_METHODS)
+  .concat(OPENYIDA_YIDA_FORM_DESIGN_API_METHODS)
+  .concat(OPENYIDA_YIDA_GENERIC_API_METHODS);
+var OPENYIDA_UTIL_API_METHODS = [
+  'dialog',
+  'formatter',
+  'getDateTimeRange',
+  'getLocale',
+  'getLoginUserId',
+  'getLoginUserName',
+  'isMobile',
+  'isSubmissionPage',
+  'isViewPage',
+  'loadScript',
+  'loadStyleSheet',
+  'openPage',
+  'previewImage',
+  'toast'
+];
+
+function openyidaYidaApiBridgeTargets() {
   var targets = [];
   function pushTarget(target) {
     if (target && targets.indexOf(target) === -1) {
@@ -23,12 +77,29 @@ const CANVAS_YIDA_API_BRIDGE_SOURCE = `function openyidaYidaApiBridgeTargets() {
   return targets;
 }
 
-function openyidaNormalizeYidaApiParams(params) {
+function openyidaShouldNormalizeSearchParams(methodName, params) {
+  if (!params) {
+    return false;
+  }
+  if (Object.prototype.hasOwnProperty.call(params, 'searchFieldJson')) {
+    return true;
+  }
+  return OPENYIDA_YIDA_SEARCH_PARAM_METHODS.indexOf(methodName) !== -1;
+}
+
+function openyidaNormalizeYidaApiParams(methodName, params) {
   var next = Object.assign({}, params || {});
+  if (!openyidaShouldNormalizeSearchParams(methodName, next)) {
+    return next;
+  }
   if (next.searchFieldJson && typeof next.searchFieldJson !== 'string') {
     next.searchFieldJson = JSON.stringify(next.searchFieldJson);
   }
-  if (next.query && !next.searchFieldJson) {
+  if (
+    next.query &&
+    !next.searchFieldJson &&
+    OPENYIDA_YIDA_SEARCH_PARAM_METHODS.indexOf(methodName) !== -1
+  ) {
     next.searchFieldJson = JSON.stringify(next.query);
     delete next.query;
   }
@@ -38,41 +109,175 @@ function openyidaNormalizeYidaApiParams(params) {
   return next;
 }
 
+function openyidaCollectYidaApiMethodNames(yida) {
+  var names = OPENYIDA_KNOWN_YIDA_API_METHODS.slice();
+  function addName(name) {
+    if (name && names.indexOf(name) === -1) {
+      names.push(name);
+    }
+  }
+  var cursor = yida;
+  while (cursor && cursor !== Object.prototype) {
+    try {
+      Object.getOwnPropertyNames(cursor).forEach(function(name) {
+        if (name !== 'constructor' && typeof yida[name] === 'function') {
+          addName(name);
+        }
+      });
+    } catch (err) {}
+    cursor = Object.getPrototypeOf(cursor);
+  }
+  return names;
+}
+
+function openyidaAvailableYidaApiMethods(yida, methodNames) {
+  if (!yida) {
+    return [];
+  }
+  return methodNames.filter(function(methodName) {
+    return typeof yida[methodName] === 'function';
+  });
+}
+
 function openyidaCreateYidaApiBridge(context) {
   var yida = context && context.utils && context.utils.yida;
+  var methodNames = openyidaCollectYidaApiMethodNames(yida);
   function invoke(methodName, params) {
     if (!yida || typeof yida[methodName] !== 'function') {
       return Promise.reject(new Error('this.utils.yida.' + methodName + ' is not available'));
     }
     try {
-      return Promise.resolve(yida[methodName].call(yida, openyidaNormalizeYidaApiParams(params)));
+      return Promise.resolve(yida[methodName].call(yida, openyidaNormalizeYidaApiParams(methodName, params)));
     } catch (err) {
       return Promise.reject(err);
     }
   }
-  return {
+  var bridge = {
     ready: !!yida,
+    apiGroups: {
+      form: OPENYIDA_YIDA_FORM_API_METHODS.slice(),
+      process: OPENYIDA_YIDA_PROCESS_API_METHODS.slice(),
+      formDesign: OPENYIDA_YIDA_FORM_DESIGN_API_METHODS.slice(),
+      generic: OPENYIDA_YIDA_GENERIC_API_METHODS.slice()
+    },
+    knownMethods: OPENYIDA_KNOWN_YIDA_API_METHODS.slice(),
+    availableMethods: openyidaAvailableYidaApiMethods(yida, methodNames),
+    missingKnownMethods: OPENYIDA_KNOWN_YIDA_API_METHODS.filter(function(methodName) {
+      return !yida || typeof yida[methodName] !== 'function';
+    }),
+    invoke: invoke
+  };
+  methodNames.forEach(function(methodName) {
+    if (!bridge[methodName]) {
+      bridge[methodName] = function(params) {
+        return invoke(methodName, params);
+      };
+    }
+  });
+  return bridge;
+}
+
+function openyidaCollectUtilsMethodNames(utils) {
+  var names = OPENYIDA_UTIL_API_METHODS.slice();
+  function addName(name) {
+    if (name && names.indexOf(name) === -1) {
+      names.push(name);
+    }
+  }
+  var cursor = utils;
+  while (cursor && cursor !== Object.prototype) {
+    try {
+      Object.getOwnPropertyNames(cursor).forEach(function(name) {
+        if (name !== 'constructor' && name !== 'yida' && name !== 'router' && typeof utils[name] === 'function') {
+          addName(name);
+        }
+      });
+    } catch (err) {}
+    cursor = Object.getPrototypeOf(cursor);
+  }
+  return names;
+}
+
+function openyidaAvailableUtilsMethods(utils, methodNames) {
+  if (!utils) {
+    return [];
+  }
+  return methodNames.filter(function(methodName) {
+    return typeof utils[methodName] === 'function';
+  });
+}
+
+function openyidaCreateRouterBridge(utils) {
+  var router = utils && utils.router;
+  var bridge = {
+    ready: !!router,
+    availableMethods: []
+  };
+  if (router && typeof router.push === 'function') {
+    bridge.availableMethods.push('push');
+    bridge.push = function() {
+      return router.push.apply(router, arguments);
+    };
+  } else {
+    bridge.push = function() {
+      throw new Error('this.utils.router.push is not available');
+    };
+  }
+  return bridge;
+}
+
+function openyidaCreateUtilsBridge(context, yidaBridge) {
+  var utils = context && context.utils;
+  var methodNames = openyidaCollectUtilsMethodNames(utils);
+  function invoke(methodName) {
+    if (!utils || typeof utils[methodName] !== 'function') {
+      throw new Error('this.utils.' + methodName + ' is not available');
+    }
+    return utils[methodName].apply(utils, Array.prototype.slice.call(arguments, 1));
+  }
+  var bridge = {
+    ready: !!utils,
+    apiGroups: {
+      utility: OPENYIDA_UTIL_API_METHODS.slice(),
+      router: ['push'],
+      yida: OPENYIDA_KNOWN_YIDA_API_METHODS.slice()
+    },
+    knownMethods: OPENYIDA_UTIL_API_METHODS.slice(),
+    availableMethods: openyidaAvailableUtilsMethods(utils, methodNames),
+    missingKnownMethods: OPENYIDA_UTIL_API_METHODS.filter(function(methodName) {
+      return !utils || typeof utils[methodName] !== 'function';
+    }),
     invoke: invoke,
-    searchFormDatas: function(params) { return invoke('searchFormDatas', params); },
-    searchFormDataIds: function(params) { return invoke('searchFormDataIds', params); },
-    getFormDataById: function(params) { return invoke('getFormDataById', params); },
-    getFormComponentDefinationList: function(params) { return invoke('getFormComponentDefinationList', params); },
-    saveFormData: function(params) { return invoke('saveFormData', params); },
-    updateFormData: function(params) { return invoke('updateFormData', params); },
-    deleteFormData: function(params) { return invoke('deleteFormData', params); }
+    router: openyidaCreateRouterBridge(utils),
+    yida: yidaBridge
   };
+  methodNames.forEach(function(methodName) {
+    if (!bridge[methodName]) {
+      bridge[methodName] = function() {
+        var args = Array.prototype.slice.call(arguments);
+        args.unshift(methodName);
+        return invoke.apply(null, args);
+      };
+    }
+  });
+  return bridge;
 }
 
 function openyidaInstallYidaApiBridge() {
   var bridge = openyidaCreateYidaApiBridge(this);
+  var utilsBridge = openyidaCreateUtilsBridge(this, bridge);
   try {
     window.__OPENYIDA_YIDA_API__ = bridge;
     window.openyidaYidaApi = bridge;
+    window.__OPENYIDA_UTILS__ = utilsBridge;
+    window.openyidaUtils = utilsBridge;
   } catch (err) {}
   openyidaYidaApiBridgeTargets().forEach(function(target) {
     try {
       target.__OPENYIDA_YIDA_API__ = bridge;
       target.openyidaYidaApi = bridge;
+      target.__OPENYIDA_UTILS__ = utilsBridge;
+      target.openyidaUtils = utilsBridge;
     } catch (err) {}
   });
   return bridge;
@@ -133,19 +338,19 @@ function buildCanvasPageSchemaObject(sourceCode, runtimeCode, importedModules, f
           },
         ],
         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' },
+          { package: '@ali/vc-deep-yida', componentName: 'YidaCodeCanvas' },
+          { package: '@ali/vc-deep-yida', componentName: 'RootHeader' },
+          { package: '@ali/vc-deep-yida', componentName: 'RootContent' },
+          { package: '@ali/vc-deep-yida', componentName: 'RootFooter' },
+          { package: '@ali/vc-deep-yida', componentName: 'Page' },
         ],
         componentsTree: [
           {
             componentName: 'Page',
             id: nextNodeId(),
             props: {
-              contentBgColor: 'white',
-              pageStyle: { backgroundColor: '#f2f3f5' },
+              contentBgColor: 'var(--pod-page-bg-color, var(--color-white, #fff))',
+              pageStyle: { backgroundColor: 'var(--pod-page-bg-color, var(--color-white, #fff))' },
               contentMargin: '0',
               contentPadding: '0',
               showTitle: false,
@@ -153,10 +358,10 @@ function buildCanvasPageSchemaObject(sourceCode, runtimeCode, importedModules, f
               templateVersion: '1.0.0',
               contentMarginMobile: '0',
               className: 'page_' + nextSuffix(),
-              contentBgColorMobile: 'white',
+              contentBgColorMobile: 'var(--pod-page-bg-color, var(--color-white, #fff))',
             },
             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}',
+            css: 'body{background-color:var(--pod-page-bg-color,var(--color-white,#fff))}.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',