openxiangda 1.0.49 → 1.0.51

package/packages/sdk/dist/runtime/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/runtime/react/openxiangdaProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\"\n\nexport interface RuntimeMenuItem {\n  id: string\n  name: string\n  resourceCode?: string | null\n  routeCode?: string | null\n  path?: string | null\n  type?: string\n  formUuid?: string | null\n  pageId?: string | null\n  parentId?: string | null\n  sortOrder?: number\n  isHidden?: boolean\n  icon?: string | null\n  children?: RuntimeMenuItem[]\n  [key: string]: unknown\n}\n\nexport interface RuntimePagePermissions {\n  appType: string\n  hasFullAccess: boolean\n  roleCodes: string[]\n  roleSource?: string\n  menuFormUuids: string[]\n  menuCodes: string[]\n  routeCodes: string[]\n  pathPatterns: string[]\n}\n\nexport interface RuntimeBootstrap {\n  appType: string\n  app?: Record<string, unknown> | null\n  user?: Record<string, unknown> | null\n  runtime?: {\n    mode?: \"legacy\" | \"react-spa\" | string\n    settings?: Record<string, unknown>\n    activeReleaseId?: string | null\n    activeBuildId?: string | null\n    indexUrl?: string | null\n    assetBaseUrl?: string | null\n  }\n  permissions?: RuntimePagePermissions\n  menus?: RuntimeMenuItem[]\n  servicePrefix?: string\n}\n\nexport interface RouteAccessResult {\n  appType: string\n  canAccess: boolean\n  routeCode?: string\n  menuCode?: string\n  path?: string\n  permissions?: RuntimePagePermissions\n}\n\nexport interface RuntimeRequestState<T> {\n  data: T | null\n  loading: boolean\n  error: Error | null\n}\n\nexport interface OpenXiangdaProviderProps {\n  appType?: string\n  servicePrefix?: string\n  fetchImpl?: typeof fetch\n  children: React.ReactNode\n}\n\ninterface OpenXiangdaRuntimeStore extends RuntimeRequestState<RuntimeBootstrap> {\n  appType: string\n  servicePrefix: string\n  fetchImpl: typeof fetch\n  reload: () => Promise<void>\n}\n\nconst OpenXiangdaRuntimeContext =\n  createContext<OpenXiangdaRuntimeStore | null>(null)\n\nexport const OpenXiangdaProvider: React.FC<OpenXiangdaProviderProps> = ({\n  appType,\n  servicePrefix = \"/service\",\n  fetchImpl,\n  children,\n}) => {\n  const resolvedFetch = fetchImpl || fetch\n  const resolvedAppType = useMemo(\n    () => appType || resolveAppTypeFromLocation(),\n    [appType],\n  )\n  const [state, setState] = useState<RuntimeRequestState<RuntimeBootstrap>>({\n    data: null,\n    loading: true,\n    error: null,\n  })\n\n  const reload = useCallback(async () => {\n    if (!resolvedAppType) {\n      setState({\n        data: null,\n        loading: false,\n        error: new Error(\"appType 不能为空\"),\n      })\n      return\n    }\n    setState(prev => ({ ...prev, loading: true, error: null }))\n    try {\n      const response = await resolvedFetch(\n        buildServiceUrl(\n          servicePrefix,\n          `/openxiangda-api/v1/apps/${encodeURIComponent(\n            resolvedAppType,\n          )}/runtime/bootstrap`,\n        ),\n        {\n          credentials: \"include\",\n          headers: { accept: \"application/json\" },\n        },\n      )\n      const payload = await response.json()\n      if (!response.ok || payload?.code >= 400) {\n        throw new Error(payload?.message || `Runtime bootstrap failed: ${response.status}`)\n      }\n      setState({\n        data: payload?.data || null,\n        loading: false,\n        error: null,\n      })\n    } catch (error) {\n      setState({\n        data: null,\n        loading: false,\n        error: error instanceof Error ? error : new Error(String(error)),\n      })\n    }\n  }, [resolvedAppType, resolvedFetch, servicePrefix])\n\n  useEffect(() => {\n    void reload()\n  }, [reload])\n\n  const value = useMemo<OpenXiangdaRuntimeStore>(\n    () => ({\n      ...state,\n      appType: resolvedAppType,\n      servicePrefix,\n      fetchImpl: resolvedFetch,\n      reload,\n    }),\n    [reload, resolvedAppType, resolvedFetch, servicePrefix, state],\n  )\n\n  return (\n    <OpenXiangdaRuntimeContext.Provider value={value}>\n      {children}\n    </OpenXiangdaRuntimeContext.Provider>\n  )\n}\n\nexport const useOpenXiangda = () => {\n  const context = useContext(OpenXiangdaRuntimeContext)\n  if (!context) {\n    throw new Error(\"useOpenXiangda must be used inside OpenXiangdaProvider\")\n  }\n  return context\n}\n\nexport const useRuntimeBootstrap = () => useOpenXiangda()\n\nexport const useAppMenus = () => {\n  const runtime = useOpenXiangda()\n  return {\n    ...runtime,\n    data: runtime.data?.menus || [],\n  }\n}\n\nexport const usePermission = () => {\n  const runtime = useOpenXiangda()\n  return {\n    ...runtime,\n    data: runtime.data?.permissions || null,\n  }\n}\n\nexport interface UseCanAccessRouteInput {\n  routeCode?: string\n  menuCode?: string\n  path?: string\n}\n\nexport const useCanAccessRoute = (input: UseCanAccessRouteInput) => {\n  const runtime = useOpenXiangda()\n  const [state, setState] = useState<RuntimeRequestState<RouteAccessResult>>({\n    data: null,\n    loading: true,\n    error: null,\n  })\n\n  useEffect(() => {\n    let disposed = false\n    const check = async () => {\n      const permissions = runtime.data?.permissions\n      if (!runtime.appType || runtime.loading) {\n        setState(prev => ({ ...prev, loading: runtime.loading }))\n        return\n      }\n      if (permissions?.hasFullAccess) {\n        setState({\n          data: { appType: runtime.appType, canAccess: true, permissions },\n          loading: false,\n          error: null,\n        })\n        return\n      }\n      setState(prev => ({ ...prev, loading: true, error: null }))\n      try {\n        const response = await runtime.fetchImpl(\n          buildServiceUrl(\n            runtime.servicePrefix,\n            `/openxiangda-api/v1/apps/${encodeURIComponent(\n              runtime.appType,\n            )}/runtime/routes/check`,\n          ),\n          {\n            method: \"POST\",\n            credentials: \"include\",\n            headers: {\n              accept: \"application/json\",\n              \"content-type\": \"application/json\",\n            },\n            body: JSON.stringify(input),\n          },\n        )\n        const payload = await response.json()\n        if (!disposed) {\n          setState({\n            data: payload?.data || {\n              appType: runtime.appType,\n              canAccess: false,\n            },\n            loading: false,\n            error:\n              response.ok && payload?.code < 500\n                ? null\n                : new Error(payload?.message || `Route check failed: ${response.status}`),\n          })\n        }\n      } catch (error) {\n        if (!disposed) {\n          setState({\n            data: null,\n            loading: false,\n            error: error instanceof Error ? error : new Error(String(error)),\n          })\n        }\n      }\n    }\n    void check()\n    return () => {\n      disposed = true\n    }\n  }, [\n    input.menuCode,\n    input.path,\n    input.routeCode,\n    runtime.appType,\n    runtime.data?.permissions,\n    runtime.fetchImpl,\n    runtime.loading,\n    runtime.servicePrefix,\n  ])\n\n  return {\n    ...state,\n    canAccess: Boolean(state.data?.canAccess),\n  }\n}\n\nexport interface PermissionBoundaryProps extends UseCanAccessRouteInput {\n  children: React.ReactNode\n  fallback?: React.ReactNode\n  loadingFallback?: React.ReactNode\n}\n\nexport const PermissionBoundary: React.FC<PermissionBoundaryProps> = ({\n  children,\n  fallback = null,\n  loadingFallback = null,\n  routeCode,\n  menuCode,\n  path,\n}) => {\n  const access = useCanAccessRoute({ routeCode, menuCode, path })\n  if (access.loading) return <>{loadingFallback}</>\n  if (!access.canAccess) return <>{fallback}</>\n  return <>{children}</>\n}\n\nconst buildServiceUrl = (servicePrefix: string, path: string) => {\n  const prefix = servicePrefix.endsWith(\"/\")\n    ? servicePrefix.slice(0, -1)\n    : servicePrefix\n  const suffix = path.startsWith(\"/\") ? path : `/${path}`\n  return `${prefix}${suffix}`\n}\n\nconst resolveAppTypeFromLocation = () => {\n  if (typeof window === \"undefined\") return \"\"\n  const segments = window.location.pathname.split(\"/\").filter(Boolean)\n  const viewIndex = segments[0] === \"view\" ? 1 : 0\n  if (segments[viewIndex] === \"submit\") return segments[viewIndex + 1] || \"\"\n  if (segments[viewIndex] === \"preview\") return segments[viewIndex + 1] || \"\"\n  return segments[viewIndex] || \"\"\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAyJH,SA6IyB,UA7IzB;AA7EJ,IAAM,4BACJ,cAA8C,IAAI;AAE7C,IAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AACF,MAAM;AACJ,QAAM,gBAAgB,aAAa;AACnC,QAAM,kBAAkB;AAAA,IACtB,MAAM,WAAW,2BAA2B;AAAA,IAC5C,CAAC,OAAO;AAAA,EACV;AACA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgD;AAAA,IACxE,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EACT,CAAC;AAED,QAAM,SAAS,YAAY,YAAY;AACrC,QAAI,CAAC,iBAAiB;AACpB,eAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,IAAI,MAAM,kCAAc;AAAA,MACjC,CAAC;AACD;AAAA,IACF;AACA,aAAS,WAAS,EAAE,GAAG,MAAM,SAAS,MAAM,OAAO,KAAK,EAAE;AAC1D,QAAI;AACF,YAAM,WAAW,MAAM;AAAA,QACrB;AAAA,UACE;AAAA,UACA,4BAA4B;AAAA,YAC1B;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA;AAAA,UACE,aAAa;AAAA,UACb,SAAS,EAAE,QAAQ,mBAAmB;AAAA,QACxC;AAAA,MACF;AACA,YAAM,UAAU,MAAM,SAAS,KAAK;AACpC,UAAI,CAAC,SAAS,MAAM,SAAS,QAAQ,KAAK;AACxC,cAAM,IAAI,MAAM,SAAS,WAAW,6BAA6B,SAAS,MAAM,EAAE;AAAA,MACpF;AACA,eAAS;AAAA,QACP,MAAM,SAAS,QAAQ;AAAA,QACvB,SAAS;AAAA,QACT,OAAO;AAAA,MACT,CAAC;AAAA,IACH,SAAS,OAAO;AACd,eAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC;AAAA,MACjE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,iBAAiB,eAAe,aAAa,CAAC;AAElD,YAAU,MAAM;AACd,SAAK,OAAO;AAAA,EACd,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,iBAAiB,eAAe,eAAe,KAAK;AAAA,EAC/D;AAEA,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OACjC,UACH;AAEJ;AAEO,IAAM,iBAAiB,MAAM;AAClC,QAAM,UAAU,WAAW,yBAAyB;AACpD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACA,SAAO;AACT;AAEO,IAAM,sBAAsB,MAAM,eAAe;AAEjD,IAAM,cAAc,MAAM;AAC/B,QAAM,UAAU,eAAe;AAC/B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM,QAAQ,MAAM,SAAS,CAAC;AAAA,EAChC;AACF;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,UAAU,eAAe;AAC/B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM,QAAQ,MAAM,eAAe;AAAA,EACrC;AACF;AAQO,IAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,UAAU,eAAe;AAC/B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiD;AAAA,IACzE,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW;AACf,UAAM,QAAQ,YAAY;AACxB,YAAM,cAAc,QAAQ,MAAM;AAClC,UAAI,CAAC,QAAQ,WAAW,QAAQ,SAAS;AACvC,iBAAS,WAAS,EAAE,GAAG,MAAM,SAAS,QAAQ,QAAQ,EAAE;AACxD;AAAA,MACF;AACA,UAAI,aAAa,eAAe;AAC9B,iBAAS;AAAA,UACP,MAAM,EAAE,SAAS,QAAQ,SAAS,WAAW,MAAM,YAAY;AAAA,UAC/D,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AACD;AAAA,MACF;AACA,eAAS,WAAS,EAAE,GAAG,MAAM,SAAS,MAAM,OAAO,KAAK,EAAE;AAC1D,UAAI;AACF,cAAM,WAAW,MAAM,QAAQ;AAAA,UAC7B;AAAA,YACE,QAAQ;AAAA,YACR,4BAA4B;AAAA,cAC1B,QAAQ;AAAA,YACV,CAAC;AAAA,UACH;AAAA,UACA;AAAA,YACE,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,gBAAgB;AAAA,YAClB;AAAA,YACA,MAAM,KAAK,UAAU,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,cAAM,UAAU,MAAM,SAAS,KAAK;AACpC,YAAI,CAAC,UAAU;AACb,mBAAS;AAAA,YACP,MAAM,SAAS,QAAQ;AAAA,cACrB,SAAS,QAAQ;AAAA,cACjB,WAAW;AAAA,YACb;AAAA,YACA,SAAS;AAAA,YACT,OACE,SAAS,MAAM,SAAS,OAAO,MAC3B,OACA,IAAI,MAAM,SAAS,WAAW,uBAAuB,SAAS,MAAM,EAAE;AAAA,UAC9E,CAAC;AAAA,QACH;AAAA,MACF,SAAS,OAAO;AACd,YAAI,CAAC,UAAU;AACb,mBAAS;AAAA,YACP,MAAM;AAAA,YACN,SAAS;AAAA,YACT,OAAO,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC;AAAA,UACjE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AACA,SAAK,MAAM;AACX,WAAO,MAAM;AACX,iBAAW;AAAA,IACb;AAAA,EACF,GAAG;AAAA,IACD,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ,MAAM;AAAA,IACd,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW,QAAQ,MAAM,MAAM,SAAS;AAAA,EAC1C;AACF;AAQO,IAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EACA,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,kBAAkB,EAAE,WAAW,UAAU,KAAK,CAAC;AAC9D,MAAI,OAAO,QAAS,QAAO,gCAAG,2BAAgB;AAC9C,MAAI,CAAC,OAAO,UAAW,QAAO,gCAAG,oBAAS;AAC1C,SAAO,gCAAG,UAAS;AACrB;AAEA,IAAM,kBAAkB,CAAC,eAAuB,SAAiB;AAC/D,QAAM,SAAS,cAAc,SAAS,GAAG,IACrC,cAAc,MAAM,GAAG,EAAE,IACzB;AACJ,QAAM,SAAS,KAAK,WAAW,GAAG,IAAI,OAAO,IAAI,IAAI;AACrD,SAAO,GAAG,MAAM,GAAG,MAAM;AAC3B;AAEA,IAAM,6BAA6B,MAAM;AACvC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,WAAW,OAAO,SAAS,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO;AACnE,QAAM,YAAY,SAAS,CAAC,MAAM,SAAS,IAAI;AAC/C,MAAI,SAAS,SAAS,MAAM,SAAU,QAAO,SAAS,YAAY,CAAC,KAAK;AACxE,MAAI,SAAS,SAAS,MAAM,UAAW,QAAO,SAAS,YAAY,CAAC,KAAK;AACzE,SAAO,SAAS,SAAS,KAAK;AAChC;","names":[]}

package/templates/openxiangda-react-spa/.env.example

@@ -0,0 +1,4 @@
+OPENXIANGDA_BASE_URL=https://your-platform.example.com
+OPENXIANGDA_APP_TYPE=APP_XXXX
+APP_SERVICE_PREFIX=/service
+OPENXIANGDA_DEV_PORT=5174

package/templates/openxiangda-react-spa/AGENTS.md

@@ -0,0 +1,65 @@
+# AGENTS.md — OpenXiangda React SPA 工作区
+
+本工作区是标准 React SPA 应用，不是旧 `sy-lowcode-app-workspace` 单页面上传模式。
+
+## 开发原则
+
+- 使用 React Router 管理路由，路由定义在 `src/app/router.tsx`。
+- 使用 Tailwind CSS 表达样式，不依赖平台 theme tokens。
+- 使用 `OpenXiangdaProvider` 包裹应用运行时，平台能力通过 SDK hooks 获取。
+- 不在页面里硬编码角色判断。菜单可见和 route 访问都由后端权限接口返回。
+- 页面、表单、字段、数据范围、流程动作、文件、连接器权限以后端为准。
+- 本地开发通过 Vite `/service` 代理远端平台，保留 HttpOnly Cookie。
+
+## 常用命令
+
+```bash
+pnpm install
+pnpm dev
+pnpm typecheck
+pnpm build
+openxiangda resource plan --profile <name>
+openxiangda resource publish --profile <name>
+openxiangda runtime deploy --profile <name>
+```
+
+`openxiangda runtime deploy` 会自动设置 `OPENXIANGDA_BUILD_ID` 和 Vite asset base，构建 `dist/`，上传 runtime release，并默认激活。不要手工改 `dist/index.html`。
+
+完整发布顺序：
+
+```bash
+openxiangda resource publish --profile <name>
+openxiangda runtime deploy --profile <name>
+```
+
+## 权限资源
+
+React SPA 页面需要声明菜单 code、route code 和 path pattern：
+
+```json
+{
+  "code": "app_user_spa_pages",
+  "roles": ["app_user"],
+  "menuCodes": ["user_portal"],
+  "routeCodes": ["portal.home"],
+  "pathPatterns": ["/view/:appType/portal/*"]
+}
+```
+
+页面中使用：
+
+```tsx
+import { PermissionBoundary, useAppMenus, useRuntimeBootstrap } from "openxiangda/runtime/react";
+```
+
+`PermissionBoundary` 只能做展示保护，不能替代后端权限。
+
+## 默认页
+
+- 表单提交：`/view/:appType/admin/forms/:formUuid/new`
+- 表单详情：`/view/:appType/admin/forms/:formUuid/:formInstId`
+- 流程详情：`/view/:appType/admin/process/:formUuid/:formInstId`
+- 数据列表：`/view/:appType/admin/data/:formUuid`
+- 文件预览：`/view/file-preview?ticket=...`
+
+默认页可以替换成自定义 React route element；不要回到旧平台 `isRenderNav` 或 workbench 参数模型。

package/templates/openxiangda-react-spa/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenXiangda React SPA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/openxiangda-react-spa/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "__WORKSPACE_PACKAGE_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit",
+    "check": "pnpm typecheck && pnpm build",
+    "resources:plan": "openxiangda resource plan",
+    "resources:publish": "openxiangda resource publish",
+    "runtime:deploy": "openxiangda runtime deploy",
+    "deploy": "openxiangda resource publish && openxiangda runtime deploy",
+    "typegen": "openxiangda resource typegen"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "lucide-react": "^0.468.0",
+    "openxiangda": "latest",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.30.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/openxiangda-react-spa/postcss.config.cjs

@@ -0,0 +1,6 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+module.exports = {
+  plugins: [tailwindcss(), autoprefixer()],
+};

package/templates/openxiangda-react-spa/src/app/router.tsx

@@ -0,0 +1,97 @@
+import {
+  createBrowserRouter,
+  Navigate,
+  Outlet,
+  useParams,
+} from "react-router-dom";
+import { lazy, Suspense, type ReactNode } from "react";
+import { OpenXiangdaProvider } from "openxiangda/runtime/react";
+
+import { AdminShell } from "@/layouts/AdminShell";
+import { PublicShell } from "@/layouts/PublicShell";
+import { UserShell } from "@/layouts/UserShell";
+import { RuntimeWorkspacePage } from "@/pages/admin/RuntimeWorkspacePage";
+import { UserPortalPage } from "@/pages/portal/UserPortalPage";
+import { PublicHomePage } from "@/pages/public/PublicHomePage";
+import { NotFoundPage } from "@/pages/states/NotFoundPage";
+
+const servicePrefix = process.env.APP_SERVICE_PREFIX || "/service";
+const DataRoutePage = lazy(() =>
+  import("@/pages/defaults/DataRoutePage").then(module => ({
+    default: module.DataRoutePage,
+  })),
+);
+const FilePreviewRoutePage = lazy(() =>
+  import("@/pages/defaults/FilePreviewRoutePage").then(module => ({
+    default: module.FilePreviewRoutePage,
+  })),
+);
+const FormRoutePage = lazy(() =>
+  import("@/pages/defaults/FormRoutePage").then(module => ({
+    default: module.FormRoutePage,
+  })),
+);
+
+const routeElement = (element: ReactNode) => (
+  <Suspense fallback={<div className="ox-panel p-6 text-sm text-slate-500">加载中</div>}>
+    {element}
+  </Suspense>
+);
+
+function RuntimeRoot() {
+  const { appType = process.env.OPENXIANGDA_APP_TYPE || "" } = useParams();
+  return (
+    <OpenXiangdaProvider appType={appType} servicePrefix={servicePrefix}>
+      <Outlet />
+    </OpenXiangdaProvider>
+  );
+}
+
+export const router = createBrowserRouter([
+  {
+    path: "/view/file-preview",
+    element: routeElement(<FilePreviewRoutePage />),
+  },
+  {
+    path: "/view/submit/:appType/:formUuid",
+    element: <RuntimeRoot />,
+    children: [{ index: true, element: routeElement(<FormRoutePage mode="submit" />) }],
+  },
+  {
+    path: "/view/:appType",
+    element: <RuntimeRoot />,
+    children: [
+      { index: true, element: <Navigate to="admin" replace /> },
+      {
+        path: "admin",
+        element: <AdminShell />,
+        children: [
+          { index: true, element: <RuntimeWorkspacePage /> },
+          { path: "data/:formUuid", element: routeElement(<DataRoutePage />) },
+          { path: "forms/:formUuid/new", element: routeElement(<FormRoutePage mode="submit" />) },
+          { path: "forms/:formUuid/:formInstId", element: routeElement(<FormRoutePage mode="detail" />) },
+          { path: "process/:formUuid/:formInstId", element: routeElement(<FormRoutePage mode="process" />) },
+        ],
+      },
+      {
+        path: "portal",
+        element: <UserShell />,
+        children: [
+          { index: true, element: <UserPortalPage /> },
+          { path: "forms/:formUuid/new", element: routeElement(<FormRoutePage mode="submit" />) },
+          { path: "data/:formUuid", element: routeElement(<DataRoutePage />) },
+        ],
+      },
+      {
+        path: "public",
+        element: <PublicShell />,
+        children: [
+          { index: true, element: <PublicHomePage /> },
+          { path: "forms/:formUuid/new", element: routeElement(<FormRoutePage mode="submit" />) },
+        ],
+      },
+      { path: "*", element: <NotFoundPage /> },
+    ],
+  },
+  { path: "*", element: <NotFoundPage /> },
+]);

package/templates/openxiangda-react-spa/src/layouts/AdminShell.tsx

@@ -0,0 +1,102 @@
+import { ChevronDown, ChevronRight, Home, LayoutDashboard, Shield, Sparkles } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Link, NavLink, Outlet, useParams } from "react-router-dom";
+import { useAppMenus, useRuntimeBootstrap } from "openxiangda/runtime/react";
+
+const fallbackGroups = [
+  {
+    title: "应用工作台",
+    items: [
+      { name: "工作台", path: "admin", icon: LayoutDashboard },
+      { name: "用户门户", path: "portal", icon: Home },
+    ],
+  },
+  {
+    title: "权限与系统",
+    items: [
+      { name: "AI 验证", path: "admin?panel=verification", icon: Sparkles },
+      { name: "角色权限", path: "admin?panel=permission", icon: Shield },
+    ],
+  },
+];
+
+export function AdminShell() {
+  const { appType = "" } = useParams();
+  const bootstrap = useRuntimeBootstrap();
+  const menus = useAppMenus();
+  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
+  const groups = useMemo(() => {
+    if (!menus.data.length) return fallbackGroups;
+    return menus.data.map(group => ({
+      title: group.name,
+      items: (group.children?.length ? group.children : [group]).map(item => ({
+        name: item.name,
+        path: item.path || "admin",
+        icon: LayoutDashboard,
+      })),
+    }));
+  }, [menus.data]);
+
+  return (
+    <div className="min-h-screen bg-[#f6f7f9] text-graphite">
+      <aside className="fixed inset-y-0 left-0 z-20 hidden w-72 border-r border-slate-200 bg-white/90 px-4 py-5 backdrop-blur lg:block">
+        <Link to={`/view/${appType}/admin`} className="mb-6 flex items-center gap-3 px-2">
+          <span className="grid h-9 w-9 place-items-center rounded-lg bg-blue-600 text-sm font-semibold text-white">OX</span>
+          <span>
+            <span className="block text-sm font-semibold">OpenXiangda</span>
+            <span className="block text-xs text-slate-500">React SPA</span>
+          </span>
+        </Link>
+        <nav className="space-y-3">
+          {groups.map(group => {
+            const collapsed = collapsedGroups[group.title];
+            return (
+              <section key={group.title}>
+                <button
+                  className="flex w-full items-center justify-between rounded-md px-2 py-2 text-xs font-medium text-slate-500 hover:bg-slate-50"
+                  onClick={() => setCollapsedGroups(prev => ({ ...prev, [group.title]: !collapsed }))}
+                  type="button"
+                >
+                  <span>{group.title}</span>
+                  {collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
+                </button>
+                {!collapsed && (
+                  <div className="mt-1 space-y-1">
+                    {group.items.map(item => (
+                      <NavLink
+                        className={({ isActive }) =>
+                          `relative flex items-center gap-2 rounded-md px-3 py-2 text-sm ${
+                            isActive ? "bg-blue-50 text-blue-700 before:absolute before:left-0 before:h-5 before:w-0.5 before:rounded-full before:bg-blue-600" : "text-slate-600 hover:bg-slate-50"
+                          }`
+                        }
+                        key={`${group.title}-${item.name}`}
+                        to={`/view/${appType}/${item.path}`}
+                      >
+                        <item.icon size={16} />
+                        <span className="truncate">{item.name}</span>
+                      </NavLink>
+                    ))}
+                  </div>
+                )}
+              </section>
+            );
+          })}
+        </nav>
+      </aside>
+      <main className="lg:pl-72">
+        <header className="sticky top-0 z-10 flex h-16 items-center justify-between border-b border-slate-200 bg-white/85 px-5 backdrop-blur">
+          <div>
+            <div className="text-sm font-semibold">{String(bootstrap.data?.app?.name || "应用工作台")}</div>
+            <div className="text-xs text-slate-500">runtime: {bootstrap.data?.runtime?.mode || "loading"}</div>
+          </div>
+          <div className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs text-slate-600">
+            {String(bootstrap.data?.user?.name || bootstrap.data?.user?.id || "未登录")}
+          </div>
+        </header>
+        <div className="p-5">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/layouts/PublicShell.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+
+export function PublicShell() {
+  return (
+    <div className="min-h-screen bg-[#f6f7f9]">
+      <main className="mx-auto max-w-4xl px-5 py-10">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/layouts/UserShell.tsx

@@ -0,0 +1,22 @@
+import { Link, Outlet, useParams } from "react-router-dom";
+
+export function UserShell() {
+  const { appType = "" } = useParams();
+  return (
+    <div className="min-h-screen bg-[#f6f7f9]">
+      <header className="border-b border-slate-200 bg-white">
+        <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4">
+          <Link className="text-sm font-semibold text-slate-900" to={`/view/${appType}/portal`}>
+            OpenXiangda Portal
+          </Link>
+          <Link className="text-sm text-blue-700" to={`/view/${appType}/admin`}>
+            管理后台
+          </Link>
+        </div>
+      </header>
+      <main className="mx-auto max-w-6xl px-5 py-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/main.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+
+import { router } from "./app/router";
+import "./styles/index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);

package/templates/openxiangda-react-spa/src/pages/admin/RuntimeWorkspacePage.tsx

@@ -0,0 +1,57 @@
+import { Activity, CheckCircle2, Cookie, ShieldCheck } from "lucide-react";
+import { useRuntimeBootstrap } from "openxiangda/runtime/react";
+
+const cards = [
+  { label: "SDK 连接", value: "已接入", tone: "text-green-700", icon: CheckCircle2 },
+  { label: "Cookie / Proxy", value: "同域代理", tone: "text-blue-700", icon: Cookie },
+  { label: "后端权限", value: "后端兜底", tone: "text-amber-700", icon: ShieldCheck },
+  { label: "运行状态", value: "React SPA", tone: "text-slate-700", icon: Activity },
+];
+
+export function RuntimeWorkspacePage() {
+  const runtime = useRuntimeBootstrap();
+  return (
+    <div className="space-y-5">
+      <section className="ox-panel p-5">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <h1 className="text-xl font-semibold text-slate-950">运行时工作台</h1>
+            <p className="mt-1 text-sm text-slate-500">
+              应用路由、布局和页面组织由当前 React SPA 接管。
+            </p>
+          </div>
+          <button className="rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700" type="button">
+            发布版本
+          </button>
+        </div>
+      </section>
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {cards.map(card => (
+          <div className="ox-panel p-4" key={card.label}>
+            <div className={`mb-4 inline-flex rounded-md bg-slate-50 p-2 ${card.tone}`}>
+              <card.icon size={18} />
+            </div>
+            <div className="text-sm text-slate-500">{card.label}</div>
+            <div className="mt-1 text-lg font-semibold text-slate-950">{card.value}</div>
+          </div>
+        ))}
+      </section>
+      <section className="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
+        <div className="ox-panel p-5">
+          <h2 className="text-sm font-semibold text-slate-950">Runtime Bootstrap</h2>
+          <pre className="mt-4 max-h-80 overflow-auto rounded-md bg-slate-950 p-4 text-xs leading-6 text-slate-100">
+            {JSON.stringify(runtime.data, null, 2)}
+          </pre>
+        </div>
+        <div className="ox-panel p-5">
+          <h2 className="text-sm font-semibold text-slate-950">最近活动</h2>
+          <div className="mt-4 space-y-3 text-sm text-slate-600">
+            <div className="rounded-md border border-slate-200 p-3">加载应用菜单和当前用户权限。</div>
+            <div className="rounded-md border border-slate-200 p-3">默认页可直接挂载到 React Router。</div>
+            <div className="rounded-md border border-slate-200 p-3">AI 验证登录使用真实用户身份。</div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/pages/defaults/DataRoutePage.tsx

@@ -0,0 +1,17 @@
+import { useParams } from "react-router-dom";
+import { DataManagementList } from "openxiangda";
+
+export function DataRoutePage() {
+  const { appType = "", formUuid = "" } = useParams();
+  return (
+    <div className="ox-panel overflow-hidden">
+      <DataManagementList
+        appType={appType}
+        detailBasePath={`/view/${appType}/admin/forms/${formUuid}`}
+        formUuid={formUuid}
+        fullHeight={false}
+        title="数据列表"
+      />
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/pages/defaults/FilePreviewRoutePage.tsx

@@ -0,0 +1,14 @@
+export function FilePreviewRoutePage() {
+  const ticket = new URLSearchParams(window.location.search).get("ticket") || "";
+  return (
+    <main className="min-h-screen bg-[#f6f7f9] p-5">
+      <section className="ox-panel mx-auto max-w-4xl p-6">
+        <h1 className="text-lg font-semibold text-slate-950">文件预览</h1>
+        <p className="mt-2 text-sm text-slate-500">ticket: {ticket || "未提供"}</p>
+        <div className="mt-6 rounded-md border border-dashed border-slate-300 bg-slate-50 p-8 text-center text-sm text-slate-500">
+          文件预览组件将在平台文件元数据接口稳定后接入。
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/openxiangda-react-spa/src/pages/defaults/FormRoutePage.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { StandardFormPage } from "openxiangda";
+import { useOpenXiangda } from "openxiangda/runtime/react";
+
+type Mode = "submit" | "detail" | "process";
+
+export function FormRoutePage({ mode }: { mode: Mode }) {
+  const { appType = "", formUuid = "", formInstId = "" } = useParams();
+  const navigate = useNavigate();
+  const runtime = useOpenXiangda();
+  const [schema, setSchema] = useState<any>(null);
+  const [error, setError] = useState<string>("");
+
+  useEffect(() => {
+    let disposed = false;
+    const load = async () => {
+      try {
+        const response = await runtime.fetchImpl(
+          `${runtime.servicePrefix}/openxiangda-api/v1/apps/${encodeURIComponent(appType)}/forms/${encodeURIComponent(formUuid)}`,
+          { credentials: "include", headers: { accept: "application/json" } },
+        );
+        const payload = await response.json();
+        if (!response.ok || payload?.code >= 400) {
+          throw new Error(payload?.message || "表单 schema 加载失败");
+        }
+        if (!disposed) setSchema(payload?.data?.schema || payload?.data || payload);
+      } catch (err) {
+        if (!disposed) setError(err instanceof Error ? err.message : String(err));
+      }
+    };
+    void load();
+    return () => {
+      disposed = true;
+    };
+  }, [appType, formUuid, runtime.fetchImpl, runtime.servicePrefix]);
+
+  if (error) return <DefaultState title="加载失败" description={error} />;
+  if (!schema) return <DefaultState title="加载中" description="正在读取表单配置" />;
+
+  return (
+    <div className="ox-panel p-5">
+      <StandardFormPage
+        appType={appType}
+        formInstanceId={formInstId}
+        formUuid={formUuid}
+        mode={mode === "process" ? "process" : mode === "detail" ? "detail" : "submit"}
+        onSubmitSuccess={id => navigate(`/view/${appType}/admin/forms/${formUuid}/${id}`)}
+        schema={schema}
+      />
+    </div>
+  );
+}
+
+function DefaultState({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="ox-panel p-8">
+      <div className="text-base font-semibold text-slate-950">{title}</div>
+      <div className="mt-2 text-sm text-slate-500">{description}</div>
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/pages/portal/UserPortalPage.tsx

@@ -0,0 +1,27 @@
+import { FileText, Inbox, Search } from "lucide-react";
+
+const entries = [
+  { title: "发起申请", desc: "打开常用表单和流程", icon: FileText },
+  { title: "我的待办", desc: "处理审批与办理任务", icon: Inbox },
+  { title: "数据查询", desc: "查看有权限的数据列表", icon: Search },
+];
+
+export function UserPortalPage() {
+  return (
+    <div className="space-y-5">
+      <section className="ox-panel p-5">
+        <h1 className="text-xl font-semibold text-slate-950">用户门户</h1>
+        <p className="mt-1 text-sm text-slate-500">面向普通用户的入口页，和后台共享同一套权限与 SDK。</p>
+      </section>
+      <section className="grid gap-4 md:grid-cols-3">
+        {entries.map(entry => (
+          <div className="ox-panel p-5" key={entry.title}>
+            <entry.icon className="text-blue-600" size={20} />
+            <div className="mt-4 text-sm font-semibold text-slate-950">{entry.title}</div>
+            <div className="mt-1 text-sm text-slate-500">{entry.desc}</div>
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/pages/public/PublicHomePage.tsx

@@ -0,0 +1,10 @@
+export function PublicHomePage() {
+  return (
+    <section className="ox-panel p-6">
+      <h1 className="text-xl font-semibold text-slate-950">公开访问</h1>
+      <p className="mt-2 text-sm text-slate-500">
+        公开表单、公开查询和 ticket 状态页都应在 PublicShell 下实现，不依赖旧平台导航参数。
+      </p>
+    </section>
+  );
+}

package/templates/openxiangda-react-spa/src/pages/states/NotFoundPage.tsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+
+export function NotFoundPage() {
+  return (
+    <main className="grid min-h-screen place-items-center bg-[#f6f7f9] p-5">
+      <section className="ox-panel max-w-md p-8 text-center">
+        <div className="text-sm font-semibold text-blue-700">404</div>
+        <h1 className="mt-2 text-xl font-semibold text-slate-950">页面不存在</h1>
+        <p className="mt-2 text-sm text-slate-500">请检查当前 React Router 路由或平台 routeCode 配置。</p>
+        <Link className="mt-5 inline-flex rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white" to="/">
+          返回入口
+        </Link>
+      </section>
+    </main>
+  );
+}

package/templates/openxiangda-react-spa/src/resources/menus/menus.json

@@ -0,0 +1,31 @@
+{
+  "menus": [
+    {
+      "code": "runtime_workspace",
+      "name": "运行时工作台",
+      "type": "nav",
+      "routeCode": "admin.dashboard",
+      "path": "/view/:appType/admin",
+      "icon": "LayoutDashboard",
+      "sortOrder": 10
+    },
+    {
+      "code": "user_portal",
+      "name": "用户门户",
+      "type": "nav",
+      "routeCode": "portal.home",
+      "path": "/view/:appType/portal",
+      "icon": "Home",
+      "sortOrder": 20
+    },
+    {
+      "code": "public_home",
+      "name": "公开访问",
+      "type": "nav",
+      "routeCode": "public.home",
+      "path": "/view/:appType/public",
+      "icon": "Globe",
+      "sortOrder": 30
+    }
+  ]
+}