openxiangda 1.0.1 → 1.0.3

package/packages/sdk/src/build-source/scripts/build-forms.mjs

@@ -30,6 +30,7 @@ const runtimeDistDir = path.join(rootDir, "dist/form-runtime");
 const tmpDir = path.join(rootDir, ".tmp");
 const runtimeVersionPlaceholder = "__SY_FORM_RUNTIME_VERSION__";
 const runtimeCacheFileName = "build-cache.json";
+const portalContainerResolverGlobal = "__OPENXIANGDA_GET_PORTAL_CONTAINER__";
 
 const runtimePackages = [
   "react",
@@ -164,7 +165,6 @@ function parseArgs(argv) {
     }
     if (arg === "--force") {
       result.force = true;
-      result.runtimeCache = false;
       continue;
     }
     if (arg === "--dry-run") {
@@ -196,7 +196,7 @@ build-forms - 构建表单页面
 选项:
   --form <name>       只构建指定表单（src/forms/ 下的目录名）
   --only <list>       只构建指定模块，如 forms/customer,pages/dashboard
-  --force             忽略增量缓存，强制重建
+  --force             忽略增量缓存，强制重建表单产物
   --dry-run           只打印增量计划，不构建
   --clean-cache       删除 .openxiangda/build-cache.json
   --no-runtime-cache  强制重建共享 runtime
@@ -242,7 +242,13 @@ import '../src/index.css';
 
 const runtimeVersion = '${runtimeVersionPlaceholder}';
 const roots = new WeakMap();
+const portalContainerCleanups = new WeakMap();
 const { StandardFormPage, defineFormSchema } = SyFormComponentsModule;
+const NAMESPACE_ROOT_CLASS = 'sy-app-workspace';
+const RUNTIME_PORTAL_ATTR = 'data-sy-runtime-portal';
+const PORTAL_CONTAINER_STACK_GLOBAL = '__OPENXIANGDA_PORTAL_CONTAINER_STACK__';
+const PORTAL_CONTAINER_RESOLVER_GLOBAL = '${portalContainerResolverGlobal}';
+const portalContainers = new WeakMap();
 
 function getStyleContainer(el) {
   const rootNode = el.getRootNode?.();
@@ -251,58 +257,143 @@ function getStyleContainer(el) {
     : document.head;
 }
 
-function getNamespaceRoot(el) {
-  return el.closest?.('.sy-app-workspace') || el;
+function isShadowRoot(rootNode) {
+  return typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot;
 }
 
-function isInShadowRoot(el) {
-  const rootNode = el.getRootNode?.();
-  return typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot;
+function getRuntimeRoot(el, triggerNode) {
+  if (isShadowRoot(el.getRootNode?.())) return el;
+  const triggerRoot = triggerNode?.closest?.('.' + NAMESPACE_ROOT_CLASS);
+  return (
+    triggerRoot ||
+    el.closest?.('.' + NAMESPACE_ROOT_CLASS) ||
+    el.querySelector?.('.' + NAMESPACE_ROOT_CLASS) ||
+    el
+  );
 }
 
-function getPopupContainer(el) {
-  const inShadowRoot = isInShadowRoot(el);
-  return (triggerNode) => {
-    if (inShadowRoot) return el;
-    return getNamespaceRoot(el) || triggerNode?.parentElement || document.body;
-  };
+function getOverlayRoot(el, portalContainer, triggerNode) {
+  return portalContainer?.isConnected ? portalContainer : getRuntimeRoot(el, triggerNode);
+}
+
+function getPopupContainer(el, portalContainer) {
+  return (triggerNode) => getOverlayRoot(el, portalContainer, triggerNode);
 }
 
 function getTargetContainer(el) {
-  return () => (isInShadowRoot(el) ? el : getNamespaceRoot(el) || document.body);
+  return () => getRuntimeRoot(el);
+}
+
+function createAntdConfig(el, portalContainer) {
+  return {
+    locale: zhCN,
+    prefixCls: 'sy-ant',
+    iconPrefixCls: 'sy-anticon',
+    theme: antdTheme,
+    getPopupContainer: getPopupContainer(el, portalContainer),
+    getTargetContainer: getTargetContainer(el),
+  };
+}
+
+function createPortalContainer(el) {
+  const rootNode = el.getRootNode?.();
+  const parent = isShadowRoot(rootNode) ? rootNode : el.ownerDocument.body;
+  const portalContainer = el.ownerDocument.createElement('div');
+  portalContainer.setAttribute(RUNTIME_PORTAL_ATTR, '');
+  portalContainer.classList.add(NAMESPACE_ROOT_CLASS);
+  parent.appendChild(portalContainer);
+  return portalContainer;
+}
+
+function installRuntimePortalContainer(el) {
+  const portalContainer = createPortalContainer(el);
+  const stack = Array.isArray(globalThis[PORTAL_CONTAINER_STACK_GLOBAL])
+    ? globalThis[PORTAL_CONTAINER_STACK_GLOBAL]
+    : [];
+  stack.push(portalContainer);
+  globalThis[PORTAL_CONTAINER_STACK_GLOBAL] = stack;
+  globalThis[PORTAL_CONTAINER_RESOLVER_GLOBAL] = () => {
+    for (let index = stack.length - 1; index >= 0; index -= 1) {
+      const candidate = stack[index];
+      if (candidate?.isConnected) {
+        return candidate;
+      }
+    }
+    return (
+      document.querySelector('[' + RUNTIME_PORTAL_ATTR + ']') ||
+      document.querySelector('.' + NAMESPACE_ROOT_CLASS) ||
+      document.body
+    );
+  };
+  return {
+    container: portalContainer,
+    release: () => {
+      const position = stack.lastIndexOf(portalContainer);
+      if (position >= 0) stack.splice(position, 1);
+      portalContainer.remove();
+    },
+  };
+}
+
+function installAntdStaticHolder(el, portalContainer) {
+  ConfigProvider.config({
+    prefixCls: 'sy-ant',
+    iconPrefixCls: 'sy-anticon',
+    theme: antdTheme,
+    holderRender: (children) => {
+      if (!el.isConnected) {
+        return (
+          <ConfigProvider prefixCls="sy-ant" iconPrefixCls="sy-anticon" theme={antdTheme}>
+            {children}
+          </ConfigProvider>
+        );
+      }
+      return (
+        <StyleProvider hashPriority="high" container={getStyleContainer(el)}>
+          <ConfigProvider {...createAntdConfig(el, portalContainer)}>{children}</ConfigProvider>
+        </StyleProvider>
+      );
+    },
+  });
 }
 
 function renderStandardForm(el, schemaInput, context = {}) {
   let root = roots.get(el);
+  el.classList.add(NAMESPACE_ROOT_CLASS);
+  let portalContainer = portalContainers.get(el);
+  if (!portalContainer?.isConnected) {
+    const cleanup = portalContainerCleanups.get(el);
+    if (cleanup) cleanup();
+    const portalHandle = installRuntimePortalContainer(el);
+    portalContainer = portalHandle.container;
+    portalContainers.set(el, portalContainer);
+    portalContainerCleanups.set(el, portalHandle.release);
+  }
+  installAntdStaticHolder(el, portalContainer);
   if (!root) {
-    if (!isInShadowRoot(el)) el.classList.add('sy-app-workspace');
     root = createRoot(el);
     roots.set(el, root);
   }
 
   const schema = defineFormSchema(schemaInput);
+  const antdConfig = createAntdConfig(el, portalContainer);
   root.render(
     <StyleProvider hashPriority="high" container={getStyleContainer(el)}>
-      <ConfigProvider
-        locale={zhCN}
-        prefixCls="sy-ant"
-        iconPrefixCls="sy-anticon"
-        theme={antdTheme}
-        getPopupContainer={getPopupContainer(el)}
-        getTargetContainer={getTargetContainer(el)}
-      >
+      <ConfigProvider {...antdConfig}>
         <AntdApp>
-          <StandardFormPage
-            schema={schema}
-            mode={context.mode || 'submit'}
-            initialValues={context.initialValues}
-            permissions={context.permissions}
-            formUuid={context.formUuid}
-            appType={context.appType}
-            formInstanceId={context.formInstanceId}
-            onSubmit={context.onSubmit}
-            inDrawer={context.inDrawer}
-          />
+          <div className="sy-app-workspace">
+            <StandardFormPage
+              schema={schema}
+              mode={context.mode || 'submit'}
+              initialValues={context.initialValues}
+              permissions={context.permissions}
+              formUuid={context.formUuid}
+              appType={context.appType}
+              formInstanceId={context.formInstanceId}
+              onSubmit={context.onSubmit}
+              inDrawer={context.inDrawer}
+            />
+          </div>
         </AntdApp>
       </ConfigProvider>
     </StyleProvider>
@@ -315,6 +406,12 @@ function unmountStandardForm(el) {
     root.unmount();
     roots.delete(el);
   }
+  const releasePortalContainer = portalContainerCleanups.get(el);
+  if (releasePortalContainer) {
+    releasePortalContainer();
+    portalContainerCleanups.delete(el);
+    portalContainers.delete(el);
+  }
 }
 
 export function createStandardFormModule(schemaInput) {
@@ -356,6 +453,24 @@ export default formRuntime;
 `;
 }
 
+function createAntdMobilePortalPatchPlugin() {
+  const resolverExpression = `globalThis.${portalContainerResolverGlobal}?.() || document.body`;
+  return {
+    name: "openxiangda-antd-mobile-portal-container",
+    transform(code, id) {
+      if (!id.includes("/antd-mobile/") && !id.includes("\\\\antd-mobile\\\\")) {
+        return null;
+      }
+      const nextCode = code.replace(
+        /getContainer:\s*\(\)\s*=>\s*document\.body/g,
+        `getContainer: () => ${resolverExpression}`,
+      );
+      if (nextCode === code) return null;
+      return { code: nextCode, map: null };
+    },
+  };
+}
+
 function createFormRuntimeProxyPlugin() {
   return {
     name: "sy-form-runtime-proxy",
@@ -547,7 +662,7 @@ async function buildSharedRuntime(options = {}) {
           },
         },
       },
-      plugins: [reactPlugin],
+      plugins: [createAntdMobilePortalPatchPlugin(), reactPlugin],
       logLevel: "warn",
     });
 
@@ -689,7 +804,11 @@ async function buildForm(form) {
           },
         },
       },
-      plugins: [createFormRuntimeProxyPlugin(), reactPlugin].filter(Boolean),
+      plugins: [
+        createAntdMobilePortalPatchPlugin(),
+        createFormRuntimeProxyPlugin(),
+        reactPlugin,
+      ].filter(Boolean),
       logLevel: "warn",
     });
 

package/packages/sdk/src/build-source/scripts/build-pages.mjs

@@ -34,12 +34,14 @@ const tmpDir = path.join(rootDir, ".tmp");
 const runtimeDistDir = path.join(distRoot, "page-runtime");
 const runtimeVersionPlaceholder = "__SY_PAGE_RUNTIME_VERSION__";
 const runtimeCacheFileName = "build-cache.json";
+const portalContainerResolverGlobal = "__OPENXIANGDA_GET_PORTAL_CONTAINER__";
 
 const runtimePackages = [
   "react",
   "react-dom",
   "@ant-design/cssinjs",
   "antd",
+  "antd-mobile",
   "@ant-design/icons",
   "openxiangda",
 ];
@@ -163,7 +165,6 @@ function parseArgs(argv) {
     }
     if (arg === "--force") {
       result.force = true;
-      result.runtimeCache = false;
       continue;
     }
     if (arg === "--dry-run") {
@@ -194,7 +195,7 @@ build-pages - 构建复杂代码页
 选项:
   --page <name>       只构建指定页面目录
   --only <list>       只构建指定模块，如 forms/customer,pages/dashboard
-  --force             忽略增量缓存，强制重建
+  --force             忽略增量缓存，强制重建页面产物
   --dry-run           只打印增量计划，不构建
   --clean-cache       删除 .openxiangda/build-cache.json
   --no-runtime-cache  强制重建共享 runtime
@@ -339,6 +340,24 @@ async function createCssOptions() {
   };
 }
 
+function createAntdMobilePortalPatchPlugin() {
+  const resolverExpression = `globalThis.${portalContainerResolverGlobal}?.() || document.body`;
+  return {
+    name: "openxiangda-antd-mobile-portal-container",
+    transform(code, id) {
+      if (!id.includes("/antd-mobile/") && !id.includes("\\\\antd-mobile\\\\")) {
+        return null;
+      }
+      const nextCode = code.replace(
+        /getContainer:\s*\(\)\s*=>\s*document\.body/g,
+        `getContainer: () => ${resolverExpression}`,
+      );
+      if (nextCode === code) return null;
+      return { code: nextCode, map: null };
+    },
+  };
+}
+
 function createResolveAlias() {
   return [
     {
@@ -373,7 +392,7 @@ async function buildSharedRuntime(options = {}) {
         "process.env.NODE_ENV": JSON.stringify("production"),
         "process.env": JSON.stringify({ NODE_ENV: "production" }),
       },
-      plugins: [react()],
+      plugins: [createAntdMobilePortalPatchPlugin(), react()],
       resolve: {
         alias: createResolveAlias(),
         dedupe: ["react", "react-dom", "antd", "@ant-design/cssinjs"],
@@ -655,7 +674,11 @@ async function buildPage(page) {
       "process.env.NODE_ENV": JSON.stringify("production"),
       "process.env": JSON.stringify({ NODE_ENV: "production" }),
     },
-    plugins: [createSharedRuntimeProxyPlugin(), react()],
+    plugins: [
+      createAntdMobilePortalPatchPlugin(),
+      createSharedRuntimeProxyPlugin(),
+      react(),
+    ],
     resolve: {
       alias: createResolveAlias(),
       dedupe: ["react", "react-dom", "antd", "@ant-design/cssinjs"],

package/packages/sdk/src/build-source/scripts/utils/namespace-css.mjs

@@ -37,6 +37,18 @@ function shouldSkipSelector(selector, prefix) {
   return false;
 }
 
+function createAntdPrefixAlias(selector) {
+  const aliased = selector
+    .replace(/(^|[^A-Za-z0-9_-])\.ant-/g, "$1.sy-ant-")
+    .replace(/(^|[^A-Za-z0-9_-])\.anticon-/g, "$1.sy-anticon-")
+    .replace(/(^|[^A-Za-z0-9_-])\.anticon(?=$|[^A-Za-z0-9_-])/g, "$1.sy-anticon");
+  return aliased === selector ? null : aliased;
+}
+
+function uniqueSelectors(selectors) {
+  return Array.from(new Set(selectors));
+}
+
 export function createNamespaceCssPlugin(prefix = DEFAULT_PREFIX) {
   return {
     postcssPlugin: "openxiangda-namespace-css",
@@ -49,11 +61,15 @@ export function createNamespaceCssPlugin(prefix = DEFAULT_PREFIX) {
         }
         parent = parent.parent;
       }
-      rule.selector = splitSelectors(rule.selector)
-        .map((selector) =>
-          shouldSkipSelector(selector, prefix) ? selector : `${prefix} ${selector}`,
-        )
-        .join(", ");
+      rule.selector = uniqueSelectors(
+        splitSelectors(rule.selector).flatMap((selector) => {
+          const scopedSelector = shouldSkipSelector(selector, prefix)
+            ? selector
+            : `${prefix} ${selector}`;
+          const antdAlias = createAntdPrefixAlias(scopedSelector);
+          return antdAlias ? [scopedSelector, antdAlias] : [scopedSelector];
+        }),
+      ).join(", ");
     },
   };
 }

package/packages/sdk/src/build-source/scripts/utils/namespace-css.test.ts

@@ -0,0 +1,29 @@
+import postcss from "postcss";
+import { describe, expect, it } from "vitest";
+
+import { createNamespaceCssPlugin } from "./namespace-css.mjs";
+
+function transform(css: string) {
+  return postcss([createNamespaceCssPlugin()]).process(css, {
+    from: undefined,
+  }).css;
+}
+
+describe("createNamespaceCssPlugin", () => {
+  it("adds sy-ant aliases for developer CSS that targets default antd classes", () => {
+    const css = transform(
+      ".portal-search .ant-input-affix-wrapper,.ant-select-dropdown .ant-select-item,.anticon-close{background:#fff}",
+    );
+
+    expect(css).toContain(
+      ".sy-app-workspace .portal-search .ant-input-affix-wrapper",
+    );
+    expect(css).toContain(
+      ".sy-app-workspace .portal-search .sy-ant-input-affix-wrapper",
+    );
+    expect(css).toContain(".ant-select-dropdown .ant-select-item");
+    expect(css).toContain(".sy-ant-select-dropdown .sy-ant-select-item");
+    expect(css).toContain(".anticon-close");
+    expect(css).toContain(".sy-anticon-close");
+  });
+});

package/packages/sdk/src/build-source/scripts/utils/tailwind-config.mjs

@@ -29,6 +29,18 @@ const layeredTailwindCss = `@import "openxiangda/styles/tokens.css";
 @tailwind components;
 @tailwind utilities;
 `;
+const canonicalPostcssConfig = `const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+const { createOpenXiangdaNamespaceCssPlugin } = require("openxiangda/build");
+
+module.exports = {
+  plugins: [
+    tailwindcss(),
+    createOpenXiangdaNamespaceCssPlugin(),
+    autoprefixer(),
+  ],
+};
+`;
 
 export const canonicalTailwindConfig = `${managedHeader}
 /** @type {import('tailwindcss').Config} */
@@ -71,6 +83,15 @@ export function isWorkspaceTailwindCssCurrent(content) {
   );
 }
 
+export function isWorkspacePostcssConfigCurrent(content) {
+  return Boolean(
+    content.includes("createOpenXiangdaNamespaceCssPlugin") &&
+      content.includes("openxiangda/build") &&
+      content.includes("tailwindcss") &&
+      content.includes("autoprefixer"),
+  );
+}
+
 function hasBlocklistEntry(content, entry) {
   const singleQuoted = `'${entry.slice(1, -1)}'`;
   return content.includes(entry) || content.includes(singleQuoted);
@@ -176,6 +197,22 @@ export function patchWorkspaceTailwindCss(content) {
   return customCss ? `${layeredTailwindCss}\n${customCss}` : layeredTailwindCss;
 }
 
+function isStandardPostcssConfig(content) {
+  return (
+    /plugins\s*:\s*\{[\s\S]*tailwindcss\s*:\s*\{[\s\S]*autoprefixer\s*:\s*\{[\s\S]*\}/s.test(
+      content,
+    ) || /plugins\s*:\s*\[[\s\S]*tailwindcss\([\s\S]*autoprefixer\(/s.test(content)
+  );
+}
+
+export function patchWorkspacePostcssConfig(content) {
+  if (isWorkspacePostcssConfigCurrent(content)) return content;
+  if (!content.trim() || isStandardPostcssConfig(content)) {
+    return canonicalPostcssConfig;
+  }
+  return content;
+}
+
 export function ensureWorkspaceTailwindConfig(workspaceRoot) {
   const configPath = path.join(workspaceRoot, "tailwind.config.cjs");
   const current = fs.existsSync(configPath)
@@ -196,10 +233,23 @@ export function ensureWorkspaceTailwindConfig(workspaceRoot) {
     fs.writeFileSync(cssPath, nextCss, "utf-8");
   }
 
+  const postcssPath = path.join(workspaceRoot, "postcss.config.cjs");
+  const currentPostcss = fs.existsSync(postcssPath)
+    ? fs.readFileSync(postcssPath, "utf-8")
+    : "";
+  const nextPostcss = patchWorkspacePostcssConfig(currentPostcss);
+  if (currentPostcss !== nextPostcss) {
+    fs.writeFileSync(postcssPath, nextPostcss, "utf-8");
+  }
+
   return {
-    changed: current !== nextContent || currentCss !== nextCss,
+    changed:
+      current !== nextContent ||
+      currentCss !== nextCss ||
+      currentPostcss !== nextPostcss,
     path: configPath,
     cssPath,
+    postcssPath,
   };
 }
 

package/packages/sdk/src/build-source/scripts/utils/tailwind-config.test.ts

@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it } from "vitest";
 
 import {
   ensureWorkspaceTailwindConfig,
+  patchWorkspacePostcssConfig,
   patchWorkspaceTailwindCss,
   patchWorkspaceTailwindConfig,
   validateWorkspaceTailwindConfig,
@@ -42,6 +43,10 @@ describe("workspace Tailwind config helpers", () => {
       path.join(workspaceRoot, "src", "index.css"),
       "utf-8",
     );
+    const postcssContent = fs.readFileSync(
+      path.join(workspaceRoot, "postcss.config.cjs"),
+      "utf-8",
+    );
 
     expect(result.changed).toBe(true);
     expect(nextContent).toContain(
@@ -53,6 +58,8 @@ describe("workspace Tailwind config helpers", () => {
     expect(cssContent).toContain("@tailwind base;");
     expect(cssContent).toContain("@tailwind components;");
     expect(cssContent).toContain("@tailwind utilities;");
+    expect(postcssContent).toContain("createOpenXiangdaNamespaceCssPlugin");
+    expect(postcssContent).toContain('require("openxiangda/build")');
     expect(validateWorkspaceTailwindConfig(workspaceRoot)).toEqual([]);
   });
 
@@ -115,7 +122,7 @@ module.exports = {
 }
 `);
 
-    expect(nextContent.startsWith("@layer tailwind-base {")).toBe(true);
+    expect(nextContent).toContain("@layer tailwind-base {");
     expect(nextContent).toContain("@tailwind components;");
     expect(nextContent).toContain("#root");
   });
@@ -136,6 +143,28 @@ module.exports = {
     expect(patchWorkspaceTailwindCss(source)).toBe(source);
   });
 
+  it("patches standard PostCSS config with openxiangda namespace css plugin", () => {
+    const nextContent = patchWorkspacePostcssConfig(`module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`);
+
+    expect(nextContent).toContain("createOpenXiangdaNamespaceCssPlugin");
+    expect(nextContent).toContain("tailwindcss()");
+    expect(nextContent).toContain("autoprefixer()");
+  });
+
+  it("preserves custom PostCSS config when it cannot be patched safely", () => {
+    const source = `const custom = require("./postcss-custom");
+module.exports = { plugins: [custom()] };
+`;
+
+    expect(patchWorkspacePostcssConfig(source)).toBe(source);
+  });
+
   it("removes stale antd layer declaration from index css", () => {
     const nextContent = patchWorkspaceTailwindCss(`@layer tailwind-base, antd;
 
@@ -148,7 +177,7 @@ module.exports = {
 `);
 
     expect(nextContent).not.toContain("@layer tailwind-base, antd;");
-    expect(nextContent.startsWith("@layer tailwind-base {")).toBe(true);
+    expect(nextContent).toContain("@layer tailwind-base {");
   });
 
   it("reports stale config during update check", () => {

package/templates/sy-lowcode-app-workspace/postcss.config.cjs

@@ -1,6 +1,24 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+function loadOpenXiangdaBuild() {
+  try {
+    return require("openxiangda/build");
+  } catch (error) {
+    try {
+      return require("../../packages/sdk/dist/build/index.cjs");
+    } catch {
+      throw error;
+    }
+  }
+}
+
+const { createOpenXiangdaNamespaceCssPlugin } = loadOpenXiangdaBuild();
+
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [
+    tailwindcss(),
+    createOpenXiangdaNamespaceCssPlugin(),
+    autoprefixer(),
+  ],
 };