openyida 2026.9.21 → 2026.9.22-beta.2

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

@@ -1,11 +1,8 @@
 import React from 'react';
 
-/**
- * workspace 保持原有剩余高度布局；document 用于首屏背景与导航共享画布的连续长页。
- * document 首屏内容使用 --openyida-navigation-height 留安全区，背景仍从页面顶部开始。
- * preserveScroll 只恢复当前实例内本地视图的位置；筛选、数据、草稿和路由由调用方持有。
- * 导航节点不随 contentKey 重建；不要给整个壳添加随菜单变化的 key。
- */
+// 顶部导航与内容的高度链；侧栏布局可在侧栏右侧已分配高度的区域使用 height="100%"。
+// 只管理布局：菜单权限、URL/hash、离开未保存表单的确认由调用方处理。
+// 合并到页面时保留组件，合并重复 import；不要额外包裹滚动卡片。
 function CanvasNavigationContent({
   navigation,
   children,
@@ -17,99 +14,22 @@ function CanvasNavigationContent({
   gutter = 'clamp(12px, 2vw, 24px)',
   radius = 16,
   background = 'transparent',
-  layout = 'workspace',
-  preserveScroll = false,
-  navigationPosition = 'sticky',
-  navigationTop = 0,
 }) {
   const embedded = Boolean(iframeSrc);
-  const documentLayout = layout === 'document';
-  const rootRef = React.useRef(null);
-  const navigationRef = React.useRef(null);
-  const contentRef = React.useRef(null);
-  const scrollPositions = React.useRef(new Map());
-
-  // 测量真实菜单高度，兼容窄屏换行、字体加载和菜单展开，不猜固定的 80px。
-  React.useLayoutEffect(() => {
-    if (!documentLayout) return;
-    const root = rootRef.current;
-    const nav = navigationRef.current;
-    if (!root) return;
-    const navStyle = nav ? { position: nav.style.position, left: nav.style.left, width: nav.style.width, top: nav.style.top } : null;
-    const measure = () => {
-      const navHeight = nav?.getBoundingClientRect().height || 0;
-      root.style.setProperty('--openyida-navigation-height', `${navHeight}px`);
-      const bounds = root.getBoundingClientRect();
-      // scroll 事件捕获覆盖宿主内滚动；不假设 window.scrollY 是实际滚动位置。
-      let boundary = 0;
-      for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
-        if (/(auto|scroll)/.test(window.getComputedStyle(ancestor).overflowY)) {
-          boundary = ancestor.getBoundingClientRect().top + ancestor.clientTop;
-          break;
-        }
-      }
-      const top = Math.max(0, boundary) + navigationTop;
-      root.dataset.scrolled = String(bounds.top < top - 1);
-      if (nav && navigationPosition === 'fixed') {
-        // 仅覆盖本页宽度，不能盖住平台侧栏；离开页面底部后随本页退出。
-        Object.assign(nav.style, { position: 'fixed', left: `${bounds.left}px`, width: `${bounds.width}px`,
-          top: `${Math.min(Math.max(bounds.top, top), bounds.bottom - navHeight)}px` });
-      }
-    };
-    measure();
-    const observer = nav && window.ResizeObserver ? new window.ResizeObserver(measure) : null;
-    if (observer) observer.observe(nav);
-    if (observer) observer.observe(root);
-    window.addEventListener('resize', measure);
-    window.addEventListener('scroll', measure, true);
-    return () => {
-      if (observer) observer.disconnect();
-      window.removeEventListener('resize', measure);
-      window.removeEventListener('scroll', measure, true);
-      if (navStyle) Object.assign(nav.style, navStyle);
-    };
-  }, [documentLayout, navigation != null, navigationPosition, navigationTop]);
-
-  React.useLayoutEffect(() => {
-    const viewport = contentRef.current;
-    if (documentLayout || embedded || !preserveScroll || contentKey == null || !viewport) return;
-    const position = scrollPositions.current.get(contentKey);
-    viewport.scrollTop = position?.top || 0;
-    viewport.scrollLeft = position?.left || 0;
-  }, [contentKey, documentLayout, embedded, preserveScroll]);
-
-  if (documentLayout && embedded) throw new Error('CanvasNavigationContent: iframeSrc requires workspace layout');
-  if (!['sticky', 'fixed'].includes(navigationPosition)) throw new Error('CanvasNavigationContent: navigationPosition must be sticky or fixed');
   return (
-    <div ref={rootRef} className="openyida-nav-layout" data-layout={layout} data-scrolled="true" style={{
-      height: documentLayout ? 'auto' : height, minHeight: documentLayout ? 'auto' : 0, minWidth: 0,
-      display: documentLayout ? 'grid' : 'flex', flexDirection: 'column',
-      // 长页不创建第二层滚动容器；导航和 main 共享网格区域，背景可到达导航背后。
-      overflow: documentLayout ? 'visible' : 'hidden', background,
-      position: 'relative', isolation: 'isolate',
+    <div className="openyida-nav-layout" style={{
+      height, minHeight: 0, minWidth: 0, display: 'flex', flexDirection: 'column',
+      overflow: 'hidden', background,
     }}>
-      {navigation != null && <div ref={navigationRef} className="openyida-nav-header" style={{
-        flexShrink: 0, minWidth: 0, zIndex: 10,
-        ...(documentLayout ? { gridArea: '1 / 1', alignSelf: 'start', position: 'sticky', top: navigationTop } : {}),
-      }}>{navigation}</div>}
+      {navigation != null && <div style={{ flexShrink: 0 }}>{navigation}</div>}
       <main className="openyida-nav-main" aria-label={title} style={{
-        display: documentLayout ? 'block' : 'flex', flexDirection: 'column',
-        flex: documentLayout ? undefined : '1 1 0', minHeight: documentLayout ? 'auto' : 0,
-        minWidth: 0, overflow: documentLayout ? 'visible' : 'hidden',
-        padding: documentLayout ? 0 : gutter, boxSizing: 'border-box',
-        ...(documentLayout ? { gridArea: '1 / 1' } : {}),
+        display: 'flex', flexDirection: 'column', flex: '1 1 0', minHeight: 0,
+        minWidth: 0, overflow: 'hidden', padding: gutter, boxSizing: 'border-box',
       }}>
-        <div key={contentKey} ref={contentRef} className="openyida-nav-content" onScroll={event => {
-          // 卸载后 DOM 的 scrollTop 可能已归零，必须在滚动时保存，不能等 effect cleanup。
-          if (!documentLayout && !embedded && preserveScroll && contentKey != null) {
-            const viewport = event.currentTarget;
-            scrollPositions.current.set(contentKey, { top: viewport.scrollTop, left: viewport.scrollLeft });
-          }
-        }} style={{
-          position: 'relative', flex: documentLayout ? undefined : '1 1 0', minHeight: documentLayout ? 'auto' : 0, minWidth: 0,
-          width: '100%', maxWidth: documentLayout ? undefined : maxWidth,
-          margin: '0 auto', borderRadius: documentLayout ? 0 : radius,
-          overflow: documentLayout ? 'visible' : embedded ? 'hidden' : 'auto',
+        <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%',

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

@@ -1,131 +1,48 @@
-/** local 只切页内视图；platform 沿用平台导航；independent 按真实资源权限过滤。 */
-function validateCanvasNavigationItems(items, mode) {
-  if (!['local', 'platform', 'independent'].includes(mode)) throw new Error('未知导航模式');
-  for (const item of items) {
-    if (Array.isArray(item.children) && item.children.length) {
-      validateCanvasNavigationItems(item.children, mode);
-    } else if (mode === 'local') {
-      if (item.targetType !== 'local' || !String(item.key || '').trim() || !String(item.viewKey || '').trim()
-        || item.href || item.url) throw new Error('local 模式只接受含 key/viewKey 的本页菜单，真实页面请使用 platform 或 independent');
-    } else if (mode === 'platform' && (item.targetType === 'local' || (!item.formUuid && !item.navUuid))) {
-      throw new Error('页内菜单不能按平台导航过滤：使用 mode=local 或直接管理本地视图；真实页面需绑定 formUuid/navUuid');
-    }
-  }
-}
-
-function filterCanvasNavigation(items, navs, hiddenNav = [], { mode = 'platform', access } = {}) {
-  validateCanvasNavigationItems(items, mode);
-  const isHidden = value => value === true || value === 'y' || value === 'true';
+/** PRD 决定菜单结构，平台结果只过滤不可见入口；同一资源可对应多个任务入口。 */
+function filterCanvasNavigation(items, navs, hiddenNav = []) {
   const visibleIds = new Set();
   function collectVisible(nodes) {
     for (const nav of nodes) {
-      if (isHidden(nav.hidden) || hiddenNav.includes(nav.slug) || hiddenNav.includes(nav.navUuid)) continue;
+      if (nav.hidden || hiddenNav.includes(nav.slug) || hiddenNav.includes(nav.navUuid)) continue;
       if (nav.navUuid) visibleIds.add(nav.navUuid);
-      if (nav.formUuid) visibleIds.add(nav.formUuid);
       collectVisible(nav.children || []);
     }
   }
-  if (mode === 'platform') collectVisible(navs);
-  const validRequirement = requirement => requirement && typeof requirement.formUuid === 'string' && requirement.formUuid.trim()
-    && typeof requirement.operation === 'string' && requirement.operation.trim()
-    && (requirement.viewUuid === undefined || (typeof requirement.viewUuid === 'string' && requirement.viewUuid.trim()));
-  const grantKey = requirement => JSON.stringify([requirement.formUuid, requirement.viewUuid || '', requirement.operation]);
-  const grants = new Map();
-  for (const grant of access?.grants || []) {
-    if (!validRequirement(grant)) continue;
-    const key = grantKey(grant);
-    // 重复结果存在拒绝或未知时，不采用其中的允许结果。
-    grants.set(key, grant.allowed === true && grants.get(key) !== false);
-  }
-  function allowed(item, leaf) {
-    const requirements = item.access;
-    if (requirements === undefined) return mode === 'local' || mode === 'platform' || (!leaf && !item.formUuid && !item.navUuid);
-    if (!Array.isArray(requirements) || !requirements.length || !requirements.every(validRequirement)) return false;
-    if (leaf && mode !== 'local') {
-      const operation = item.targetType === 'submission' ? 'OPERATE_CREATE' : 'OPERATE_VIEW';
-      if (!item.formUuid || !requirements.some(requirement => requirement.formUuid === item.formUuid
-        && (requirement.viewUuid || '') === (item.viewUuid || item.params?.viewUuid || '') && requirement.operation === operation)) return false;
-    }
-    return requirements.every(requirement => grants.get(grantKey(requirement)) === true);
-  }
+  collectVisible(navs);
   function filterItems(nodes) {
     return nodes.flatMap(item => {
       const resourceId = item.navUuid || item.formUuid;
-      if (isHidden(item.hidden) || (mode === 'platform' && resourceId && !visibleIds.has(resourceId))) return [];
-      if (item.children !== undefined && !Array.isArray(item.children)) return [];
+      if (item.hidden || (resourceId && !visibleIds.has(resourceId))) return [];
       if (item.children?.length) {
-        if (!allowed(item, false)) return [];
         const children = filterItems(item.children);
         return children.length ? [{ ...item, children }] : [];
       }
-      if (!allowed(item, true)) return [];
-      return mode !== 'platform' || visibleIds.has(resourceId) ? [item] : [];
+      return visibleIds.has(resourceId) ? [item] : [];
     });
   }
   return filterItems(items);
 }
 
-/** 只在过滤后的叶子菜单中选择内容；无可用入口时返回 undefined。 */
-function selectCanvasNavigation(items, requestedKey, defaultKey) {
-  const leaves = [];
-  function collect(nodes) {
-    for (const item of nodes) {
-      if (item.children?.length) collect(item.children);
-      else if (!item.disabled) leaves.push(item);
-    }
-  }
-  collect(items);
-  return leaves.find(item => item.key === requestedKey) || leaves.find(item => item.key === defaultKey) || leaves[0];
-}
-
-/** 用途决定路由；独立页面走 custom，管理视图保留真实 viewUuid。 */
+/** 按入口任务选择提交页或管理页；targetType 由 PRD 明确，表单类型不决定入口用途。 */
 function buildCanvasNavigationUrl(item, appType, { embedded = false } = {}) {
   if (item.targetType === 'url') return item.url;
-  if (!['submission', 'page', 'custom'].includes(item.targetType)) throw new Error('请明确导航入口用途');
+  if (!['submission', 'page'].includes(item.targetType)) throw new Error('请明确导航入口用途');
   const formUuid = item.formUuid || item.navUuid;
   if (!appType || !formUuid) throw new Error('缺少导航目标');
   const query = new URLSearchParams(item.params || {});
-  const route = { submission: 'submission', page: 'workbench', custom: 'custom' }[item.targetType];
-  if (item.viewUuid) {
-    if (route !== 'workbench') throw new Error('管理视图必须使用 workbench 入口');
-    query.set('viewUuid', item.viewUuid);
-  }
-  if (route === 'custom') query.delete('isRenderNav');
+  const route = item.targetType === 'submission' ? 'submission' : 'workbench';
   if (embedded) {
-    if (route === 'workbench') query.set('iframe', 'true');
-    else query.set('isRenderNav', 'false');
+    if (route === 'submission') query.set('isRenderNav', 'false');
+    else query.set('iframe', 'true');
   }
   const suffix = query.toString();
   return `/${encodeURIComponent(appType)}/${route}/${encodeURIComponent(formUuid)}${suffix ? '?' + suffix : ''}`;
 }
 
-/** resolveAccess 是调用方对真实权限服务的适配，不是平台已有的接口或静态授权清单。 */
-async function loadCanvasNavigation({ items, appType, formUuid, csrfToken, hiddenNav = [], signal, mode = 'platform', resolveAccess }) {
+/** 使用当前访问者的登录态读取导航；csrfToken、hiddenNav 由当前页面运行态提供。 */
+async function loadCanvasNavigation({ items, appType, formUuid, csrfToken, hiddenNav = [], signal }) {
   if (!Array.isArray(items)) throw new Error('缺少 PRD 导航配置');
-  validateCanvasNavigationItems(items, mode);
-  if (mode !== 'local' && !appType) throw new Error('缺少应用标识');
-  let needsAccess = mode === 'independent';
-  const requirements = [];
-  function collect(nodes) {
-    for (const item of nodes) {
-      if (item.access !== undefined) {
-        needsAccess = true;
-        if (Array.isArray(item.access)) requirements.push(...item.access);
-      }
-      if (Array.isArray(item.children)) collect(item.children);
-    }
-  }
-  collect(items);
-  let access;
-  if (needsAccess) {
-    if (!appType) throw new Error('权限查询需要应用标识');
-    if (typeof resolveAccess !== 'function') throw new Error('缺少当前访问者的权限查询能力');
-    access = await resolveAccess({ appType, requirements, signal });
-    if (access?.appType !== appType || !Array.isArray(access.grants)) throw new Error('权限查询失败，请重试');
-  }
-  if (signal?.aborted) throw new Error('导航加载已取消');
-  // 独立菜单不依赖平台树是否含有被隐藏的资源；授权必须来自上述实时权限查询。
-  if (mode !== 'platform') return filterCanvasNavigation(items, [], [], { mode, access });
+  if (!appType) throw new Error('缺少应用标识');
   const query = new URLSearchParams({ _api: 'nattyFetch', _mock: 'false' });
   if (formUuid) query.set('formUuid', formUuid);
   if (csrfToken) query.set('_csrf_token', csrfToken);
@@ -136,7 +53,8 @@ async function loadCanvasNavigation({ items, appType, formUuid, csrfToken, hidde
   });
   if (!response.ok) throw new Error('导航加载失败，请重试');
   const result = await response.json();
-  if (result.success !== true || !Array.isArray(result.content?.navs)) throw new Error('导航加载失败，请重试');
-  if (signal?.aborted) throw new Error('导航加载已取消');
-  return filterCanvasNavigation(items, result.content.navs, hiddenNav, { mode, access });
+  if (result.success !== true || !Array.isArray(result.content?.navs)) {
+    throw new Error('导航加载失败，请重试');
+  }
+  return filterCanvasNavigation(items, result.content.navs, hiddenNav);
 }

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

@@ -4,14 +4,12 @@ function CanvasNav({ items = [], activeKey, onSelect, title, logo, actions, chil
   return <div className="oy-canvas-nav oy-nav-mixed">
     <style>{CANVAS_NAV_CSS + `
       .oy-nav-mixed { display: flex; flex-direction: column; }
-      .oy-nav-mixed .oy-nav-header { box-sizing: border-box; min-height: var(--pod-nav-platform-header-height, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--pod-nav-l-header-gap, 24px); padding: var(--pod-nav-l-header-padding, 8px 16px); border-bottom: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); }
-      .oy-nav-mixed .oy-nav-groups { display: flex; flex: 1; min-width: 0; gap: var(--pod-nav-menu-gap, 8px); padding: calc(var(--pod-nav-menu-gap, 8px) / 2); overflow-x: auto; }
-      .oy-nav-mixed .oy-nav-groups .oy-nav-item { min-height: var(--pod-nav-top-tab-height, 40px); padding: var(--pod-nav-top-tab-item-padding, 0 12px); max-width: var(--pod-nav-top-tab-item-max-width, 240px); }
-      .oy-nav-mixed .oy-nav-groups .oy-nav-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .oy-nav-mixed .oy-nav-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pod-nav-l-header-gap, 24px); padding: var(--pod-nav-l-header-padding, 8px 16px); border-bottom: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); }
+      .oy-nav-mixed .oy-nav-groups { display: flex; flex: 1; min-width: 0; overflow-x: auto; }
       .oy-nav-mixed .oy-nav-body { display: flex; flex: 1; }
-      .oy-canvas-nav.oy-nav-mixed .oy-nav-sidebar { padding: var(--pod-nav-l-aside-padding, 8px); }
       .oy-nav-mixed .oy-nav-content { flex: 1; }
-      .oy-nav-mixed .oy-nav-menu { display: flex; flex-direction: column; gap: var(--pod-nav-menu-gap, 8px); }
+      .oy-nav-mixed .oy-nav-menu { display: flex; flex-direction: column; gap: var(--pod-nav-slide-aside-gap, 12px); }
+      .oy-nav-mixed .oy-nav-item[aria-current="page"] { box-shadow: inset 0 -2px var(--pod-nav-tab-line-selected-color, var(--color-brand1-6, #1677ff)); }
       @media (max-width: 767px) {
         .oy-nav-mixed .oy-nav-groups { flex-basis: 100%; }
         .oy-nav-mixed .oy-nav-body { display: block; }

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

@@ -14,12 +14,12 @@ const CANVAS_NAV_CSS = `
   .oy-canvas-nav .oy-nav-brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .oy-canvas-nav .oy-nav-item {
     box-sizing: border-box; display: flex; flex-shrink: 0; align-items: center; gap: var(--pod-nav-logo-gap, 8px);
-    min-height: var(--pod-nav-menu-item-height, 40px); padding: var(--pod-nav-menu-item-padding, 8px 12px);
-    border: var(--pod-nav-menu-item-border, none); border-radius: var(--pod-nav-menu-item-radius, 8px); background: transparent;
-    color: var(--pod-nav-item-text-color, var(--color-text1-4, #1f2329)); font: inherit; font-size: var(--pod-nav-menu-font-size, 14px); line-height: var(--pod-nav-menu-line-height, 20px); text-decoration: none; text-align: start; cursor: pointer;
+    min-height: var(--pod-nav-menu-item-height, 40px); padding: var(--pod-nav-top-tab-item-padding, 0 12px);
+    border: 0; border-radius: var(--pod-nav-menu-item-radius, 8px); background: transparent;
+    color: var(--pod-nav-item-text-color, var(--color-text1-4, #1f2329)); font: inherit; font-size: var(--pod-nav-menu-font-size, 14px); text-decoration: none; text-align: start; cursor: pointer;
   }
-  .oy-canvas-nav .oy-nav-item:hover:not(:disabled) { border: var(--pod-nav-menu-item-hover-border, var(--pod-nav-menu-item-border, none)); background: var(--pod-nav-menu-bg-hover-color, var(--color-fill1-2, #f2f3f5)); color: var(--pod-nav-item-text-hover-color, inherit); }
-  .oy-canvas-nav .oy-nav-item[aria-current="page"], .oy-canvas-nav .oy-nav-item[aria-current="page"]:hover { border: var(--pod-nav-menu-item-selected-border, var(--pod-nav-menu-item-border, none)); box-shadow: var(--pod-nav-menu-item-selected-shadow, none); background: var(--pod-nav-menu-bg-selected-color, var(--color-brand1-1, #e8f2ff)); color: var(--pod-nav-item-text-selected-color, var(--color-brand1-6, #1677ff)); font-weight: var(--pod-nav-menu-item-selected-font-weight, 600); }
+  .oy-canvas-nav .oy-nav-item:hover:not(:disabled) { background: var(--pod-nav-menu-bg-hover-color, var(--color-fill1-2, #f2f3f5)); color: var(--pod-nav-item-text-hover-color, inherit); }
+  .oy-canvas-nav .oy-nav-item[aria-current="page"] { background: var(--pod-nav-menu-bg-selected-color, var(--color-brand1-1, #e8f2ff)); color: var(--pod-nav-item-text-selected-color, var(--color-brand1-6, #1677ff)); font-weight: var(--pod-nav-menu-item-selected-font-weight, 600); }
   .oy-canvas-nav .oy-nav-item:disabled { color: var(--pod-nav-item-text-disabled-color, var(--color-text1-1, #999)); cursor: not-allowed; }
   .oy-canvas-nav .oy-nav-item:focus-visible { outline: 2px solid var(--pod-nav-tab-line-selected-color, var(--color-brand1-6, #1677ff)); outline-offset: -2px; }
   .oy-canvas-nav .oy-nav-item svg { flex-shrink: 0; width: var(--pod-nav-platform-action-icon-size, 18px); height: var(--pod-nav-platform-action-icon-size, 18px); }

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

@@ -5,7 +5,8 @@ function CanvasNav({ items = [], activeKey, onSelect, title, logo, actions, chil
       .oy-nav-side { display: flex; }
       .oy-nav-side .oy-nav-content { flex: 1; }
       .oy-nav-side .oy-nav-brand { min-height: var(--pod-nav-platform-header-height, 48px); }
-      .oy-nav-side .oy-nav-menu { display: flex; flex-direction: column; gap: var(--pod-nav-menu-gap, 8px); }
+      .oy-nav-side .oy-nav-menu { display: flex; flex-direction: column; gap: var(--pod-nav-slide-aside-gap, 12px); }
+      .oy-nav-side .oy-nav-item[aria-current="page"] { box-shadow: inset 3px 0 var(--pod-nav-tab-line-selected-color, var(--color-brand1-6, #1677ff)); }
       @media (max-width: 767px) { .oy-nav-side { display: block; } }
     `}</style>
     <CanvasSidebar title={title} logo={logo} actions={actions} activeKey={activeKey} defaultWidth={sidebarWidth} defaultCollapsed={defaultCollapsed}>

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

@@ -41,7 +41,7 @@ function CanvasSidebar({ children, title, logo, actions, activeKey, defaultWidth
     onClick={event => { if (mobile && event.target.closest('.oy-nav-menu .oy-nav-item')) setMobileOpen(false); }}
     style={{ '--oy-sidebar-width': width === null ? (typeof defaultWidth === 'number' ? `${defaultWidth}px` : defaultWidth) : `${clamp(width)}px`, '--oy-sidebar-max-width': `${maxWidth}px` }}>
     <style>{`
-      .oy-canvas-nav .oy-nav-sidebar { position: relative; box-sizing: border-box; flex: 0 0 auto; min-width: 0; width: clamp(180px, var(--oy-sidebar-width, var(--shell-dark-aside-width, 216px)), var(--oy-sidebar-max-width, 400px)); padding: var(--pod-nav-slide-aside-padding, 8px); border-right: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); }
+      .oy-canvas-nav .oy-nav-sidebar { position: relative; box-sizing: border-box; flex: 0 0 auto; min-width: 0; width: clamp(180px, var(--oy-sidebar-width, var(--shell-dark-aside-width, 216px)), var(--oy-sidebar-max-width, 400px)); padding: var(--pod-nav-l-aside-padding, 8px); border-right: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); }
       .oy-canvas-nav .oy-sidebar-toggle { margin-left: auto; flex-shrink: 0; justify-content: center; padding: 0 8px; }
       .oy-canvas-nav .oy-sidebar-items { min-width: 0; }
       .oy-canvas-nav .oy-nav-sidebar .oy-nav-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

@@ -1,23 +1,17 @@
 import { Menu } from 'lucide-react';
 
-/** 顶部导航默认贴边通栏；明确选择悬浮样式时传 floating=true。窄屏可展开菜单。 */
-function CanvasNav({ items = [], activeKey, onSelect, title, logo, actions, children, floating = false, headerOnly = false, overlay = false }) {
+/** 顶部导航默认使用浮导；floating=false 时使用贴边通栏，窄屏通过按钮展开菜单。 */
+function CanvasNav({ items = [], activeKey, onSelect, title, logo, actions, children, floating = true }) {
   const [expanded, setExpanded] = React.useState(false);
   const menuId = React.useId();
   React.useEffect(() => setExpanded(false), [activeKey]);
-  return <div className={'oy-canvas-nav oy-nav-top' + (floating ? ' is-floating' : '') + (headerOnly ? ' is-header-only' : '') + (overlay ? ' is-overlay' : '')}>
+  return <div className={'oy-canvas-nav oy-nav-top' + (floating ? ' is-floating' : '')}>
     <style>{CANVAS_NAV_CSS + `
-      .oy-nav-top .oy-nav-header { box-sizing: border-box; min-height: var(--pod-nav-platform-header-height, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--pod-nav-top-header-gap, 24px); padding: var(--pod-nav-top-header-padding, 8px 16px); border-bottom: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); }
-      .oy-nav-top.is-header-only { min-height: 0; background: transparent; }
-      .openyida-nav-layout[data-layout="document"][data-scrolled="false"] .oy-nav-top.is-overlay .oy-nav-header:not(.is-expanded) { background: transparent; color: var(--openyida-navigation-overlay-color, #fff); border-color: transparent; }
-      .openyida-nav-layout[data-layout="document"][data-scrolled="false"] .oy-nav-top.is-overlay .oy-nav-header:not(.is-expanded) .oy-nav-brand,
-      .openyida-nav-layout[data-layout="document"][data-scrolled="false"] .oy-nav-top.is-overlay .oy-nav-header:not(.is-expanded) .oy-nav-item:not(:disabled) { color: inherit; }
-      .openyida-nav-layout[data-layout="document"][data-scrolled="false"] .oy-nav-top.is-overlay .oy-nav-header:not(.is-expanded) .oy-nav-item:is(:hover,[aria-current="page"]):not(:disabled) { background: var(--openyida-navigation-overlay-active-bg, rgba(255,255,255,.16)); }
+      .oy-nav-top .oy-nav-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pod-nav-top-header-gap, 24px); padding: var(--pod-nav-top-header-padding, 8px 16px); border-bottom: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); }
       .oy-nav-top.is-floating { padding-top: 16px; box-sizing: border-box; }
-      .oy-nav-top.is-floating .oy-nav-header { position: sticky; top: 16px; z-index: 10; margin: 0 16px; border: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); border-radius: var(--pod-shell-lshape-border-radius, 16px); box-shadow: var(--pod-nav-popup-shadow, 0 8px 24px rgba(0,0,0,.12)); }
-      .oy-nav-top .oy-nav-menu { display: flex; flex: 1; min-width: 0; gap: var(--pod-nav-menu-gap, 8px); padding: calc(var(--pod-nav-menu-gap, 8px) / 2); overflow-x: auto; }
-      .oy-nav-top .oy-nav-menu .oy-nav-item { min-height: var(--pod-nav-top-tab-height, 40px); padding: var(--pod-nav-top-tab-item-padding, 0 12px); max-width: var(--pod-nav-top-tab-item-max-width, 240px); }
-      .oy-nav-top .oy-nav-menu .oy-nav-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .oy-nav-top.is-floating .oy-nav-header { position: sticky; top: 16px; z-index: 10; margin: 0 16px; border: 1px solid var(--pod-nav-sub-divider-color, var(--color-line1-1, #ddd)); border-radius: var(--pod-nav-menu-container-radius, 16px); box-shadow: var(--pod-nav-popup-shadow, 0 8px 24px rgba(0,0,0,.12)); }
+      .oy-nav-top .oy-nav-menu { display: flex; flex: 1; min-width: 0; overflow-x: auto; }
+      .oy-nav-top .oy-nav-item[aria-current="page"] { box-shadow: inset 0 -2px var(--pod-nav-tab-line-selected-color, var(--color-brand1-6, #1677ff)); }
       .oy-nav-top .oy-nav-toggle { display: none; margin-left: auto; }
       @media (max-width: 767px) {
         .oy-nav-top .oy-nav-header { gap: var(--pod-nav-logo-gap, 8px); }
@@ -26,12 +20,12 @@ function CanvasNav({ items = [], activeKey, onSelect, title, logo, actions, chil
         .oy-nav-top .oy-nav-menu:not(.is-expanded) { display: none; }
       }
     `}</style>
-    <header className={'oy-nav-header oy-nav-surface' + (expanded ? ' is-expanded' : '')}>
+    <header className="oy-nav-header oy-nav-surface">
       <div className="oy-nav-brand">{logo}<span>{title}</span></div>
       <button className="oy-nav-item oy-nav-toggle" type="button" aria-label={expanded ? '收起导航' : '展开导航'} aria-controls={menuId} aria-expanded={expanded} onClick={() => setExpanded(!expanded)}><Menu aria-hidden="true" /></button>
       <nav id={menuId} aria-label="应用导航" className={'oy-nav-menu' + (expanded ? ' is-expanded' : '')}>{items.map(item => <CanvasNavItem key={item.key} item={item} activeKey={activeKey} onSelect={onSelect ? (selected) => { setExpanded(false); onSelect(selected); } : undefined} />)}</nav>
       {actions}
     </header>
-    {!headerOnly && <main className="oy-nav-content" aria-label={items.find(item => item.key === activeKey)?.label}>{children}</main>}
+    <main className="oy-nav-content" aria-label={items.find(item => item.key === activeKey)?.label}>{children}</main>
   </div>;
 }

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

@@ -110,10 +110,86 @@ function getBridgeState(props) {
   return { ready: true, reason: '', writeBridge, fieldMap };
 }
 
-/* @canvas-application-theme */
+// @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 PageContent(props) {
+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));
@@ -383,7 +459,9 @@ function PageContent(props) {
   const pendingCount = rows.filter((row) => row._status !== 'submitted').length;
 
   return (
-    <>
+    <ConfigProvider
+      theme={{ token }}
+    >
       <style>{`
         .canvas-table-page {
           display: flow-root;
@@ -425,7 +503,7 @@ function PageContent(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">
@@ -498,12 +576,8 @@ function PageContent(props) {
           </div>
         </div>
       </div>
-    </>
+    </ConfigProvider>
   );
 }
 
-function YidaComp(props) {
-  return <CanvasThemeProvider><PageContent {...props} /></CanvasThemeProvider>;
-}
-
 export default YidaComp;