openxiangda 1.0.57 → 1.0.59

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

@@ -1,7 +1,7 @@
 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";
+import { PermissionBoundary, useAppMenus, useRuntimeBootstrap } from "openxiangda/runtime/react";
 
 const fallbackGroups = [
   {
@@ -26,77 +26,122 @@ export function AdminShell() {
   const menus = useAppMenus();
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
   const groups = useMemo(() => {
-    if (!menus.data.length) return fallbackGroups;
+    if (!menus.data.length) {
+      return fallbackGroups.map(group => ({
+        ...group,
+        items: group.items.map(item => ({
+          ...item,
+          path: resolveMenuPath(appType, item.path),
+        })),
+      }));
+    }
+    if (menus.data.every(item => !item.children?.length)) {
+      return [
+        {
+          title: "应用导航",
+          items: menus.data.map(item => ({
+            name: item.name,
+            path: resolveMenuPath(appType, item.path || "admin"),
+            icon: LayoutDashboard,
+          })),
+        },
+      ];
+    }
     return menus.data.map(group => ({
       title: group.name,
       items: (group.children?.length ? group.children : [group]).map(item => ({
         name: item.name,
-        path: item.path || "admin",
+        path: resolveMenuPath(appType, item.path || "admin"),
         icon: LayoutDashboard,
       })),
     }));
-  }, [menus.data]);
+  }, [appType, 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>
+    <PermissionBoundary
+      routeCode="admin.dashboard"
+      menuCode="runtime_workspace"
+      path={`/view/${appType}/admin`}
+      loadingFallback={<ShellState title="正在校验权限" description="请稍候" />}
+      fallback={<ShellState title="无权访问管理后台" description="请切换到有权限的账号，或联系管理员开通页面权限。" />}
+    >
+      <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={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>
-          <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>
+        </main>
+      </div>
+    </PermissionBoundary>
+  );
+}
+
+function resolveMenuPath(appType: string, rawPath: string) {
+  const path = rawPath.replace(/:appType/g, appType).replace(/\/{2,}/g, "/");
+  if (path.startsWith("/")) return path;
+  return `/view/${appType}/${path}`.replace(/\/{2,}/g, "/");
+}
+
+function ShellState({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="grid min-h-screen place-items-center bg-[#f6f7f9] px-6">
+      <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+        <div className="text-base font-semibold text-slate-950">{title}</div>
+        <div className="mt-2 text-sm leading-6 text-slate-500">{description}</div>
+      </div>
     </div>
   );
 }

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

@@ -1,22 +1,50 @@
 import { Link, Outlet, useParams } from "react-router-dom";
+import { PermissionBoundary, useCanAccessRoute } from "openxiangda/runtime/react";
 
 export function UserShell() {
   const { appType = "" } = useParams();
+  const adminAccess = useCanAccessRoute({
+    routeCode: "admin.dashboard",
+    menuCode: "runtime_workspace",
+    path: `/view/${appType}/admin`,
+  });
+
+  return (
+    <PermissionBoundary
+      routeCode="portal.home"
+      menuCode="user_portal"
+      path={`/view/${appType}/portal`}
+      loadingFallback={<ShellState title="正在校验权限" description="请稍候" />}
+      fallback={<ShellState title="无权访问用户门户" description="请切换到有权限的账号，或联系管理员开通页面权限。" />}
+    >
+      <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>
+            {adminAccess.canAccess ? (
+              <Link className="text-sm text-blue-700" to={`/view/${appType}/admin`}>
+                管理后台
+              </Link>
+            ) : null}
+          </div>
+        </header>
+        <main className="mx-auto max-w-6xl px-5 py-6">
+          <Outlet />
+        </main>
+      </div>
+    </PermissionBoundary>
+  );
+}
+
+function ShellState({ title, description }: { title: string; description: string }) {
   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 className="grid min-h-screen place-items-center bg-[#f6f7f9] px-6">
+      <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+        <div className="text-base font-semibold text-slate-950">{title}</div>
+        <div className="mt-2 text-sm leading-6 text-slate-500">{description}</div>
+      </div>
     </div>
   );
 }

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

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 
 import { router } from "./app/router";
+import "antd-mobile/es/global";
 import "./styles/index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { StandardFormPage } from "openxiangda";
+import { normalizeRuntimeFormSchema } from "openxiangda/runtime";
 import { useOpenXiangda } from "openxiangda/runtime/react";
 
 type Mode = "submit" | "detail" | "process";
@@ -24,7 +25,11 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
         if (!response.ok || payload?.code >= 400) {
           throw new Error(payload?.message || "表单 schema 加载失败");
         }
-        if (!disposed) setSchema(payload?.data?.schema || payload?.data || payload);
+        const normalizedSchema = normalizeRuntimeFormSchema(payload, { appType, formUuid });
+        if (!normalizedSchema) {
+          throw new Error("表单 schema 格式暂不支持或没有可渲染字段");
+        }
+        if (!disposed) setSchema(normalizedSchema);
       } catch (err) {
         if (!disposed) setError(err instanceof Error ? err.message : String(err));
       }
@@ -38,14 +43,24 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
   if (error) return <DefaultState title="加载失败" description={error} />;
   if (!schema) return <DefaultState title="加载中" description="正在读取表单配置" />;
 
+  const formType = String(schema?.template?.formType || schema?.formMeta?.formType || "").toLowerCase();
+  const isProcessForm = mode === "process" || formType === "process" || formType === "flow";
+  const pageMode = isProcessForm ? "process" : mode === "detail" ? "detail" : "submit";
+
   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}`)}
+        mode={pageMode}
+        onSubmitSuccess={id =>
+          navigate(
+            isProcessForm
+              ? `/view/${appType}/admin/process/${formUuid}/${id}`
+              : `/view/${appType}/admin/forms/${formUuid}/${id}`,
+          )
+        }
         schema={schema}
       />
     </div>