openyida 2026.9.8-1 → 2026.9.9

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

@@ -530,8 +530,8 @@ function buildCanvasPageSchemaObject(sourceCode, runtimeCode, importedModules, f
             componentName: 'Page',
             id: nextNodeId(),
             props: {
-              contentBgColor: 'var(--oyd-page-background, var(--pod-page-bg-color, var(--color-white, #fff)))',
-              pageStyle: { backgroundColor: 'var(--oyd-page-background, var(--pod-page-bg-color, var(--color-white, #fff)))' },
+              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,
@@ -539,7 +539,7 @@ function buildCanvasPageSchemaObject(sourceCode, runtimeCode, importedModules, f
               templateVersion: '1.0.0',
               contentMarginMobile: '0',
               className: 'page_' + nextSuffix(),
-              contentBgColorMobile: 'var(--oyd-page-background, var(--pod-page-bg-color, var(--color-white, #fff)))',
+              contentBgColorMobile: 'var(--pod-page-bg-color, var(--color-white, #fff))',
             },
             condition: true,
             css: [

package/lib/core/sample.js

@@ -51,12 +51,14 @@ const SAMPLES = {
     'canvas-form-drawer': 'canvas-form-drawer.canvas.jsx',
     'form-open-container': 'canvas-form-drawer.canvas.jsx',
     'canvas-dialog': 'canvas-dialog.canvas.jsx',
+    'canvas-theme': 'canvas-form-drawer.canvas.jsx',
     'canvas-nav-side': 'canvas-nav/side.jsx',
     'canvas-nav-top': 'canvas-nav/top.jsx',
     'canvas-nav-mixed': 'canvas-nav/mixed.jsx',
     'canvas-nav-dock': 'canvas-nav/dock.jsx',
     'canvas-nav-tabs': 'canvas-nav/tabs.jsx',
     'canvas-nav-data': 'canvas-nav/data.jsx',
+    'canvas-nav-content': 'canvas-nav/content.jsx',
   },
   'yida-design': {
     'app-theme': 'app-custom-theme-template.css',
@@ -91,12 +93,15 @@ const SAMPLE_OUTPUT_FILENAMES = {
   'openyida-page-template/canvas-nav-dock': 'canvas-nav-dock.jsx',
   'openyida-page-template/canvas-nav-tabs': 'canvas-nav-tabs.jsx',
   'openyida-page-template/canvas-nav-data': 'canvas-nav-data.jsx',
+  'openyida-page-template/canvas-nav-content': 'canvas-nav-content.jsx',
   'openyida-page-template/form-open-container': 'form-open-container.jsx',
   'openyida-page-template/canvas-dialog': 'canvas-dialog.jsx',
+  'openyida-page-template/canvas-theme': 'canvas-theme.jsx',
   'yida-design/app-theme': 'app-theme.css',
 };
 
 const SAMPLE_HINTS = {
+  'openyida-page-template/canvas-nav-content': '合并 CanvasNavigationContent；顶部导航传 navigation，工作台传 children，原生页传 iframeSrc 和 title；宿主已分配高度时显式传 height。',
   'openyida-page-template/canvas-nav-data': '向 loadCanvasNavigation 传入 PRD 规划的 items，通常工作台在首位；接口只过滤不可见入口，保留规划顺序与分组。',
   'openyida-page-template/form-open-container': '将 import、抽屉组件和辅助函数合并到现有 Canvas 页面；表单使用 useYidaFormOpen，其他内容使用 CanvasDrawer。',
   'yida-design/app-theme': '已复制应用主题模板；请由 yida-design 按 design.md 定点修改需要变化的 token。',
@@ -251,7 +256,7 @@ async function run(args) {
   const defaultOutputPath = path.join(process.cwd(), '.cache', 'samples', outputFilename);
   const { outputPath, variables, designFile } = parseOptions(rest, defaultOutputPath);
   const isNavSample = skill === 'openyida-page-template' && name.startsWith('canvas-nav-');
-  const prefixPath = isNavSample && !['canvas-nav-tabs', 'canvas-nav-data'].includes(name) ? path.join(path.dirname(sourcePath), 'shared.jsx') : null;
+  const prefixPath = isNavSample && !['canvas-nav-tabs', 'canvas-nav-data', 'canvas-nav-content'].includes(name) ? path.join(path.dirname(sourcePath), 'shared.jsx') : null;
   const sidebarPath = isNavSample && ['canvas-nav-side', 'canvas-nav-mixed'].includes(name) ? path.join(path.dirname(sourcePath), 'sidebar.jsx') : null;
   if ([sourcePath, prefixPath, sidebarPath, designFile].filter(Boolean).some(file => path.resolve(outputPath) === path.resolve(file))) {
     throw new CliError('输出路径不能覆盖模板或 design.md', { code: 'SAMPLE_OUTPUT_CONFLICT' });
@@ -289,6 +294,13 @@ async function run(args) {
   } else if (prefixPath) {
     const content = [prefixPath, sidebarPath, sourcePath].filter(Boolean).map(file => fs.readFileSync(file, 'utf8')).join('\n');
     fs.writeFileSync(outputPath, applyTemplateVariables(content, variables), 'utf8');
+  } else if (sampleKey === 'openyida-page-template/canvas-theme') {
+    const sourceContent = fs.readFileSync(sourcePath, 'utf8');
+    const fragment = sourceContent.match(/\/\/ @openyida-canvas-theme:start\r?\n([\s\S]*?)\/\/ @openyida-canvas-theme:end/);
+    if (!fragment) {
+      throw new CliError('Canvas theme fragment missing', { code: 'SAMPLE_FRAGMENT_MISSING' });
+    }
+    fs.writeFileSync(outputPath, "import React from 'react';\n\n" + fragment[1], 'utf8');
   } else if (sampleKey === 'openyida-page-template/form-open-container') {
     const sourceContent = fs.readFileSync(sourcePath, 'utf8');
     const fragment = sourceContent.match(/\/\/ @openyida-form-drawer:start\r?\n([\s\S]*?)\/\/ @openyida-form-drawer:end/);

package/lib/design-plan/materialize.js

@@ -491,8 +491,7 @@ function deriveSurfacePalette(primaryColor, surfaceTone, template) {
   const darkSurface = surface && [1, 3, 5].every(index => parseInt(surface.slice(index, index + 2), 16) < 128);
   if (surfaceTone !== 'brand-tinted' || darkSurface) {return {};}
   return {
-    // 品牌浅底属于 Shell；原生页面保留独立表面，Canvas 透明时透出 Shell。
-    // 不覆盖上方按导航归属生成的 --oyd-page-background。
+    // 品牌氛围属于 Shell；原生页面和 Canvas 共用页面底色，不受导航归属影响。
     '--pod-shell-bg-color-light': mixHex(primaryColor, [255, 255, 255], 0.94),
     '--pod-card-bg-color': 'var(--color-white, #fff)',
     '--color-fill1-1': mixHex(primaryColor, [255, 255, 255], 0.97),
@@ -684,12 +683,9 @@ function renderDesign(plan) {
   for (const [token, value] of Object.entries(derived)) {
     output = replaceTokenValue(output, token, value);
   }
-  // 页面背景先遵循导航形态；项目显式 token 覆盖在下方应用，始终优先。
-  // 深色设计保留其明确的暗色画布，普通平台导航默认跟随应用页面背景。
-  if (navigationConfig(plan).hideAppNav === 'y' && !selected.themeId.startsWith('dark-')) {
-    output = replaceTokenValue(output, '--oyd-page-background', 'transparent');
-  } else if (!selected.themeId.startsWith('dark-')) {
-    output = replaceTokenValue(output, '--oyd-page-background', 'var(--pod-page-bg-color, var(--color-white, #fff))');
+  // 页面底色统一使用平台 token；导航形态不改变底色，项目显式设计仍优先。
+  if (!selected.themeId.startsWith('dark-')) {
+    output = replaceTokenValue(output, '--pod-page-bg-color', 'var(--color-white, #fff)');
   }
   const explicitTokens = visual.tokens || {};
   if (typeof explicitTokens !== 'object' || Array.isArray(explicitTokens)) {
@@ -718,9 +714,9 @@ function renderDesign(plan) {
     output = injectAfterFrontmatter(output, [
       '## 项目配色适配（优先于模板默认配色）', '',
       `用户选择的 ${text(color.primaryColorName, primaryColor)} 用于整体浅色氛围。Shell 浅色背景、填充和边界已按同一主色派生，项目显式 token 覆盖优先；最终取值以本文 tokens 为准。`,
-      '背景分层：--pod-shell-bg-color-light 承载 Shell 浅色氛围；--pod-page-bg-color 保留原生表单/数据管理的独立底色（浅色主题通常为白色）；--oyd-page-background 仅控制自定义页。隐藏应用导航时自定义页默认透明，显示平台导航时默认跟随原生页面底色；品牌浅底不得覆盖这项导航默认值。仅有明确的页面背景设计时覆盖 --oyd-page-background，不要因此改写 --pod-page-bg-color。',
+      '背景分层：Shell 承载外层氛围；原生页面与自定义页统一消费 --pod-page-bg-color，卡片与面板消费 --pod-card-bg-color。导航隐藏不自动改为透明；渐变、纹理、图片属于页面局部装饰层。明确的应用背景设计通过 app-theme.css 配置平台 token。',
       '模板中“固定无彩画布”“中性灰必须 R=G=B”“禁止主题色进入背景”等默认限制在本项目不适用；保留布局、圆角、阴影与组件结构。不要为了保留模板灰底，把用户选择的浅彩导航改白。',
-      '页面背景消费 --oyd-page-background，卡片消费 --pod-card-bg-color（回退 --color-white），边界消费 --pod-card-border；近白页面与白卡必须保留可见细边框，不能只靠阴影分层。导航、表头、嵌套区域与选中态消费同一组品牌/填充 token。',
+      '页面背景消费 --pod-page-bg-color，卡片消费 --pod-card-bg-color（回退 --color-white），边界消费 --pod-card-border；近白页面与白卡必须保留可见细边框，不能只靠阴影分层。导航、表头、嵌套区域与选中态消费同一组品牌/填充 token。',
       '正文与标题使用 --color-text1-4，表头与 placeholder 使用 --color-text1-10，辅助说明使用 --color-text1-3；保持中性文字明度层级，不把整页文字染成主色。成功、警告、错误沿用应用语义色。',
       'antd 的主色、容器、浮层、文字、边框、填充及语义色都须映射应用 token；浅彩氛围不能仅出现在导航和主按钮。页面实现前先读本节，再读取下面的结构与组件规则。', '',
     ].join('\n'));

package/lib/samples/openyida-scaffold/canvas-form-drawer.canvas.jsx

@@ -64,6 +64,7 @@ function buildYidaFormUrl(request, currentAppType) {
 /** 抽屉外壳默认跟随应用主题，background 可为当前抽屉指定颜色、渐变或 CSS token。 */
 function CanvasDrawer({
   open, title, onClose, onOpenInNewWindow, extra, children,
+  contentMode = 'content',
   background = 'var(--pod-shell-theme-bg-color, var(--drawer-bg, var(--color-brand1-1, #f4f6ff)))',
 }) {
   const [fullScreen, setFullScreen] = useState(false);
@@ -120,6 +121,7 @@ function CanvasDrawer({
         .openyida-form-drawer.ant-drawer .ant-drawer-title {
           color: inherit;
           font-size: inherit;
+          font-weight: inherit;
         }
         .openyida-form-drawer .oy-drawer-actions {
           display: flex;
@@ -147,6 +149,12 @@ function CanvasDrawer({
           outline: 2px solid var(--color-brand1-6, #1677ff);
           outline-offset: 2px;
         }
+        .openyida-form-drawer .oy-drawer-frame {
+          position: relative;
+          flex: 1 1 0;
+          min-height: 0;
+          overflow: hidden;
+        }
         .openyida-form-drawer .oy-drawer-card {
           height: 100%;
           min-height: 0;
@@ -213,13 +221,22 @@ function CanvasDrawer({
             overflow: 'hidden',
           },
           header: {
-            background: 'var(--drawer-title-bg-color, var(--pod-page-header-bg-color, transparent))',
+            background: 'transparent',
+            boxSizing: 'border-box',
+            height: 'var(--pod-nav-platform-header-height, 48px)',
+            minHeight: 'var(--pod-nav-platform-header-height, 48px)',
+            flex: '0 0 var(--pod-nav-platform-header-height, 48px)',
             color: 'var(--drawer-title-color, var(--pod-page-header-text-color, var(--color-text1-4, #1f2329)))',
-            fontSize: 'var(--drawer-title-font-size, 16px)',
-            padding: 'var(--drawer-title-padding-top, 12px) var(--drawer-title-padding-left-right, 20px) var(--drawer-title-padding-bottom, 12px)',
+            fontSize: 'var(--pod-page-title-font-size, 16px)',
+            fontWeight: 'var(--pod-page-title-font-weight, 500)',
+            padding: '0 var(--drawer-title-padding-left-right, 20px)',
             borderBottom: 'var(--drawer-title-border-width, 0px) solid var(--drawer-title-border-color, var(--drawer-border-color, transparent))',
           },
-          body: { padding: '0 8px 8px', minHeight: 0, overflow: 'hidden' },
+          body: {
+            display: 'flex', flexDirection: 'column', flex: '1 1 0',
+            padding: contentMode === 'iframe' ? 0 : '0 8px 8px',
+            minHeight: 0, overflow: 'hidden',
+          },
         }}
       >
         {!fullScreen ? (
@@ -250,12 +267,13 @@ function CanvasDrawer({
             }}
           />
         ) : null}
-        <div className="oy-drawer-card">{children}</div>
+        <div className={contentMode === 'iframe' ? 'oy-drawer-frame' : 'oy-drawer-card'}>{children}</div>
       </Drawer>
     </>
   );
 }
 
+/** 原生提交页和详情页自带页面布局，外层只提供 iframe 视口，不再套内容卡片。 */
 function FormOpenContainer({ request, currentAppType, onClose, onAfterClose }) {
   const iframeSrc = useMemo(() => buildYidaFormUrl(request, currentAppType), [request, currentAppType]);
   const title = request && request.title ? request.title : '表单';
@@ -263,6 +281,7 @@ function FormOpenContainer({ request, currentAppType, onClose, onAfterClose }) {
     <CanvasDrawer
       title={title}
       open={!!request}
+      contentMode="iframe"
       background={request?.background}
       onOpenInNewWindow={iframeSrc ? () => window.open(iframeSrc, '_blank', 'noopener,noreferrer') : undefined}
       onClose={() => {
@@ -270,8 +289,8 @@ function FormOpenContainer({ request, currentAppType, onClose, onAfterClose }) {
         if (typeof onAfterClose === 'function') onAfterClose();
       }}
     >
-      {/* antd body 的百分比高度链失效时，保留视口高度兜底，避免 iframe 回落到默认 150px。 */}
-      {iframeSrc ? <iframe title={title} src={iframeSrc} style={{ width: '100%', height: '100%', minHeight: 'calc(100vh - 56px)', border: 0, display: 'block' }} /> : null}
+      {/* iframe 填满 flex 分配的剩余空间，只由内页滚动，不按视口猜测标题高度。 */}
+      {iframeSrc ? <iframe title={title} src={iframeSrc} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', minHeight: 0, border: 0, display: 'block' }} /> : null}
     </CanvasDrawer>
   );
 }
@@ -346,11 +365,6 @@ function resolveConfigValue(value, fallback) {
   return isUnresolvedTemplate(value) ? fallback : String(value);
 }
 
-function readThemeColor(name, fallback) {
-  if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') return fallback;
-  return window.getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
-}
-
 function normalizeRows(rows) {
   const source = Array.isArray(rows) && rows.length ? rows : SAMPLE_ROWS;
   return source.map((row, index) => ({
@@ -367,7 +381,85 @@ function normalizeRows(rows) {
   }));
 }
 
+// @openyida-canvas-theme:start
+// Standalone samples keep this fragment identical; see canvas-theme.test.js.
+function readCanvasTheme(root, fallback) {
+  const roles = {
+    colorPrimary: '--color-brand1-6', colorLink: '--color-brand1-6',
+    colorPrimaryHover: '--color-brand1-5', colorPrimaryActive: '--color-brand1-9',
+    colorBgLayout: ['--pod-page-bg-color', '--color-white'],
+    colorBgContainer: ['--pod-card-bg-color', '--color-white'],
+    colorBgElevated: ['--pod-card-bg-color', '--color-white'], colorText: '--color-text1-4',
+    colorTextHeading: '--color-text1-4', colorTextSecondary: '--color-text1-3',
+    colorTextDescription: '--color-text1-3', colorTextPlaceholder: '--color-text1-10',
+    colorBorder: '--color-line1-2', colorBorderSecondary: '--color-line1-1',
+    colorFillAlter: '--color-fill1-1', colorFillSecondary: '--color-fill1-2',
+  };
+  const token = { ...fallback };
+  if (!root) return token;
+  const doc = root.ownerDocument;
+  const view = doc.defaultView;
+  const scope = view.getComputedStyle(root);
+  const probe = doc.createElement('span');
+  probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
+  root.appendChild(probe);
+  try {
+    Object.keys(roles).forEach((role) => {
+      const names = Array.isArray(roles[role]) ? roles[role] : [roles[role]];
+      const value = names.map((name) => scope.getPropertyValue(name).trim()).find(Boolean) || '';
+      if (!value || !view.CSS.supports('color', value)) return;
+      probe.style.color = value;
+      const color = view.getComputedStyle(probe).color;
+      if (color) token[role] = color;
+    });
+  } finally {
+    probe.remove();
+  }
+  return token;
+}
+
+function useCanvasTheme(fallback) {
+  const rootRef = React.useRef(null);
+  const fallbackRef = React.useRef(fallback);
+  const [token, setToken] = React.useState(fallback);
+  React.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return undefined;
+    const doc = root.ownerDocument;
+    const view = doc.defaultView;
+    let frame;
+    const refresh = () => {
+      const next = readCanvasTheme(root, fallbackRef.current);
+      setToken((previous) => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+    };
+    const schedule = () => {
+      view.cancelAnimationFrame(frame);
+      frame = view.requestAnimationFrame(refresh);
+    };
+    refresh();
+    // Observe only theme-bearing ancestors and stylesheet changes, not business DOM.
+    const observer = new view.MutationObserver(schedule);
+    for (let node = root; node; node = node.parentElement) {
+      observer.observe(node, { attributes: true });
+    }
+    if (doc.head) observer.observe(doc.head, { subtree: true, childList: true, characterData: true, attributes: true });
+    doc.addEventListener('load', schedule, true);
+    view.addEventListener('resize', schedule);
+    view.addEventListener('openyida:theme-change', schedule);
+    return () => {
+      observer.disconnect();
+      view.cancelAnimationFrame(frame);
+      doc.removeEventListener('load', schedule, true);
+      view.removeEventListener('resize', schedule);
+      view.removeEventListener('openyida:theme-change', schedule);
+    };
+  }, []);
+  return { rootRef, token };
+}
+// @openyida-canvas-theme:end
+
 function YidaComp(props) {
+  const { rootRef, token } = useCanvasTheme({ colorPrimary: "#1677ff", borderRadius: 9 });
   const rawAppType = props && props.appType ? props.appType : RAW_APP_TYPE;
   const rawFormUuid = props && props.formUuid ? props.formUuid : RAW_FORM_UUID;
   const appType = resolveConfigValue(rawAppType, 'APP_XXX');
@@ -461,15 +553,7 @@ function YidaComp(props) {
 
   return (
     <ConfigProvider
-      theme={{
-        token: {
-          colorPrimary: readThemeColor('--color-brand1-6', '#1677FF'),
-          colorInfo: readThemeColor('--color-brand1-6', '#1677FF'),
-          colorText: readThemeColor('--color-text1-4', '#1F2329'),
-          colorBgLayout: readThemeColor('--color-fill1-1', '#F5F6F7'),
-          borderRadius: 8,
-        },
-      }}
+      theme={{ token }}
       getPopupContainer={(triggerNode) => (triggerNode && triggerNode.parentElement) || document.body}
     >
       <style>{`
@@ -478,7 +562,7 @@ function YidaComp(props) {
           min-height: 100vh;
           box-sizing: border-box;
           padding: 24px;
-          background: var(--oyd-page-background, var(--pod-page-bg-color, var(--color-white, #fff)));
+          background: var(--pod-page-bg-color, var(--color-white, #fff));
           color: var(--color-text1-4);
         }
         .oys-shell {
@@ -536,7 +620,7 @@ function YidaComp(props) {
         }
       `}</style>
 
-      <div className="oys-page">
+      <div ref={rootRef} className="oys-page">
         <div className="oys-shell">
           <div className="oys-header">
             <div>

package/lib/samples/openyida-scaffold/canvas-nav/content.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+// 顶部导航与内容的高度链；侧栏布局可在侧栏右侧已分配高度的区域使用 height="100%"。
+// 只管理布局：菜单权限、URL/hash、离开未保存表单的确认由调用方处理。
+// 合并到页面时保留组件，合并重复 import；不要额外包裹滚动卡片。
+function CanvasNavigationContent({
+  navigation,
+  children,
+  iframeSrc,
+  title = '页面内容',
+  contentKey,
+  height = '100dvh',
+  maxWidth = 1280,
+  gutter = 'clamp(12px, 2vw, 24px)',
+  radius = 16,
+  background = 'transparent',
+}) {
+  const embedded = Boolean(iframeSrc);
+  return (
+    <div className="openyida-nav-layout" style={{
+      height, minHeight: 0, minWidth: 0, display: 'flex', flexDirection: 'column',
+      overflow: 'hidden', background,
+    }}>
+      {navigation != null && <div style={{ flexShrink: 0 }}>{navigation}</div>}
+      <main className="openyida-nav-main" aria-label={title} style={{
+        display: 'flex', flexDirection: 'column', flex: '1 1 0', minHeight: 0,
+        minWidth: 0, overflow: 'hidden', padding: gutter, boxSizing: 'border-box',
+      }}>
+        <div key={contentKey} className="openyida-nav-content" style={{
+          position: 'relative', flex: '1 1 0', minHeight: 0, minWidth: 0,
+          width: '100%', maxWidth, margin: '0 auto', borderRadius: radius,
+          overflow: embedded ? 'hidden' : 'auto',
+        }}>
+          {embedded ? <iframe title={title} src={iframeSrc} style={{
+            position: 'absolute', inset: 0, width: '100%', height: '100%',
+            display: 'block', border: 0,
+          }} /> : children}
+        </div>
+      </main>
+    </div>
+  );
+}

package/lib/samples/openyida-scaffold/canvas-nav/shared.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 // 这是可选实现示例；导航外观按 design.md 设计，已有 UI 无需替换成示例默认样式。
 // 选中菜单标识当前页面，main 用 aria-label 命名，children 直接承载业务内容。
 const CANVAS_NAV_CSS = `
-  .oy-canvas-nav { display: flow-root; min-width: 0; min-height: 100vh; background: var(--oyd-page-background, var(--pod-page-bg-color, var(--color-white, #fff))); }
+  .oy-canvas-nav { display: flow-root; min-width: 0; min-height: 100vh; background: var(--pod-page-bg-color, var(--color-white, #fff)); }
   .oy-canvas-nav .oy-nav-surface {
     background: var(--pod-shell-theme-bg-color, var(--pod-nav-popup-bg-color, var(--color-white, #fff)));
     color: var(--pod-nav-item-text-color, var(--color-text1-4, #1f2329));

package/lib/samples/yida-canvas-table-form/table-form-batch-submit.canvas.jsx

@@ -89,11 +89,6 @@ function isFieldMapReady(fieldMap) {
   );
 }
 
-function readThemeColor(name, fallback) {
-  if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') return fallback;
-  return window.getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
-}
-
 function toPayload(row, fieldMap) {
   return {
     [fieldMap.name]: String(row.name).trim(),
@@ -115,7 +110,86 @@ function getBridgeState(props) {
   return { ready: true, reason: '', writeBridge, fieldMap };
 }
 
+// @openyida-canvas-theme:start
+// Standalone samples keep this fragment identical; see canvas-theme.test.js.
+function readCanvasTheme(root, fallback) {
+  const roles = {
+    colorPrimary: '--color-brand1-6', colorLink: '--color-brand1-6',
+    colorPrimaryHover: '--color-brand1-5', colorPrimaryActive: '--color-brand1-9',
+    colorBgLayout: ['--pod-page-bg-color', '--color-white'],
+    colorBgContainer: ['--pod-card-bg-color', '--color-white'],
+    colorBgElevated: ['--pod-card-bg-color', '--color-white'], colorText: '--color-text1-4',
+    colorTextHeading: '--color-text1-4', colorTextSecondary: '--color-text1-3',
+    colorTextDescription: '--color-text1-3', colorTextPlaceholder: '--color-text1-10',
+    colorBorder: '--color-line1-2', colorBorderSecondary: '--color-line1-1',
+    colorFillAlter: '--color-fill1-1', colorFillSecondary: '--color-fill1-2',
+  };
+  const token = { ...fallback };
+  if (!root) return token;
+  const doc = root.ownerDocument;
+  const view = doc.defaultView;
+  const scope = view.getComputedStyle(root);
+  const probe = doc.createElement('span');
+  probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
+  root.appendChild(probe);
+  try {
+    Object.keys(roles).forEach((role) => {
+      const names = Array.isArray(roles[role]) ? roles[role] : [roles[role]];
+      const value = names.map((name) => scope.getPropertyValue(name).trim()).find(Boolean) || '';
+      if (!value || !view.CSS.supports('color', value)) return;
+      probe.style.color = value;
+      const color = view.getComputedStyle(probe).color;
+      if (color) token[role] = color;
+    });
+  } finally {
+    probe.remove();
+  }
+  return token;
+}
+
+function useCanvasTheme(fallback) {
+  const rootRef = React.useRef(null);
+  const fallbackRef = React.useRef(fallback);
+  const [token, setToken] = React.useState(fallback);
+  React.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return undefined;
+    const doc = root.ownerDocument;
+    const view = doc.defaultView;
+    let frame;
+    const refresh = () => {
+      const next = readCanvasTheme(root, fallbackRef.current);
+      setToken((previous) => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+    };
+    const schedule = () => {
+      view.cancelAnimationFrame(frame);
+      frame = view.requestAnimationFrame(refresh);
+    };
+    refresh();
+    // Observe only theme-bearing ancestors and stylesheet changes, not business DOM.
+    const observer = new view.MutationObserver(schedule);
+    for (let node = root; node; node = node.parentElement) {
+      observer.observe(node, { attributes: true });
+    }
+    if (doc.head) observer.observe(doc.head, { subtree: true, childList: true, characterData: true, attributes: true });
+    doc.addEventListener('load', schedule, true);
+    view.addEventListener('resize', schedule);
+    view.addEventListener('openyida:theme-change', schedule);
+    return () => {
+      observer.disconnect();
+      view.cancelAnimationFrame(frame);
+      doc.removeEventListener('load', schedule, true);
+      view.removeEventListener('resize', schedule);
+      view.removeEventListener('openyida:theme-change', schedule);
+    };
+  }, []);
+  return { rootRef, token };
+}
+// @openyida-canvas-theme:end
+
 function YidaComp(props) {
+  const [modal, modalContextHolder] = Modal.useModal();
+  const { rootRef, token } = useCanvasTheme({ colorPrimary: "#1677ff", borderRadius: 9 });
   const formUuid = props && props.formUuid ? props.formUuid : 'sample-unbound';
   const draftKey = 'openyida_canvas_table_form_draft_' + formUuid;
   const [rows, setRows] = useState(() => loadDraft(draftKey));
@@ -262,7 +336,7 @@ function YidaComp(props) {
     }
     if (!validated.length) return;
 
-    Modal.confirm({
+    modal.confirm({
       title: '确认批量提交',
       content: '将提交 ' + validated.length + ' 行数据，首行事项为“' + validated[0].name + '”。提交后成功行不会重复写入。',
       okText: '确认提交',
@@ -386,15 +460,7 @@ function YidaComp(props) {
 
   return (
     <ConfigProvider
-      theme={{
-        token: {
-          colorPrimary: readThemeColor('--color-brand1-6', '#1677FF'),
-          colorInfo: readThemeColor('--color-brand1-6', '#1677FF'),
-          borderRadius: 9,
-          colorText: readThemeColor('--color-text1-4', '#1F2329'),
-          colorBgLayout: readThemeColor('--color-fill1-1', '#F5F6F7'),
-        },
-      }}
+      theme={{ token }}
     >
       <style>{`
         .canvas-table-page {
@@ -402,7 +468,7 @@ function YidaComp(props) {
           min-height: 100vh;
           box-sizing: border-box;
           padding: 28px;
-          background: var(--oyd-page-background, var(--pod-page-bg-color, var(--color-white, #fff)));
+          background: var(--pod-page-bg-color, var(--color-white, #fff));
         }
         .canvas-table-shell { max-width: 1320px; margin: 0 auto; }
         .canvas-table-header {
@@ -437,7 +503,8 @@ function YidaComp(props) {
         }
       `}</style>
 
-      <div className="canvas-table-page">
+      <div ref={rootRef} className="canvas-table-page">
+        {modalContextHolder}
         <div className="canvas-table-shell">
           <div className="canvas-table-header">
             <div>