openxiangda 1.0.1 → 1.0.2

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,11 @@ 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 PORTAL_CONTAINER_STACK_GLOBAL = '__OPENXIANGDA_PORTAL_CONTAINER_STACK__';
+const PORTAL_CONTAINER_RESOLVER_GLOBAL = '${portalContainerResolverGlobal}';
 
 function getStyleContainer(el) {
   const rootNode = el.getRootNode?.();
@@ -251,58 +255,115 @@ function getStyleContainer(el) {
     : document.head;
 }
 
-function getNamespaceRoot(el) {
-  return el.closest?.('.sy-app-workspace') || el;
-}
-
 function isInShadowRoot(el) {
   const rootNode = el.getRootNode?.();
   return typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot;
 }
 
+function getNamespaceRoot(el, triggerNode) {
+  if (isInShadowRoot(el)) 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;
-  };
+  return (triggerNode) => getNamespaceRoot(el, triggerNode);
 }
 
 function getTargetContainer(el) {
-  return () => (isInShadowRoot(el) ? el : getNamespaceRoot(el) || document.body);
+  return () => getNamespaceRoot(el);
+}
+
+function createAntdConfig(el) {
+  return {
+    locale: zhCN,
+    prefixCls: 'sy-ant',
+    iconPrefixCls: 'sy-anticon',
+    theme: antdTheme,
+    getPopupContainer: getPopupContainer(el),
+    getTargetContainer: getTargetContainer(el),
+  };
+}
+
+function installRuntimePortalContainer(el) {
+  const stack = Array.isArray(globalThis[PORTAL_CONTAINER_STACK_GLOBAL])
+    ? globalThis[PORTAL_CONTAINER_STACK_GLOBAL]
+    : [];
+  stack.push(el);
+  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 getNamespaceRoot(candidate);
+      }
+    }
+    return document.querySelector('.' + NAMESPACE_ROOT_CLASS) || document.body;
+  };
+  return () => {
+    const position = stack.lastIndexOf(el);
+    if (position >= 0) stack.splice(position, 1);
+  };
+}
+
+function installAntdStaticHolder(el) {
+  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)}>{children}</ConfigProvider>
+        </StyleProvider>
+      );
+    },
+  });
 }
 
 function renderStandardForm(el, schemaInput, context = {}) {
   let root = roots.get(el);
+  el.classList.add(NAMESPACE_ROOT_CLASS);
+  if (!portalContainerCleanups.has(el)) {
+    portalContainerCleanups.set(el, installRuntimePortalContainer(el));
+  }
+  installAntdStaticHolder(el);
   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);
   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 +376,11 @@ function unmountStandardForm(el) {
     root.unmount();
     roots.delete(el);
   }
+  const releasePortalContainer = portalContainerCleanups.get(el);
+  if (releasePortalContainer) {
+    releasePortalContainer();
+    portalContainerCleanups.delete(el);
+  }
 }
 
 export function createStandardFormModule(schemaInput) {
@@ -356,6 +422,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 +631,7 @@ async function buildSharedRuntime(options = {}) {
           },
         },
       },
-      plugins: [reactPlugin],
+      plugins: [createAntdMobilePortalPatchPlugin(), reactPlugin],
       logLevel: "warn",
     });
 
@@ -689,7 +773,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"],