openxiangda 1.0.62 → 1.0.63

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

@@ -1,126 +1,336 @@
-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 { PermissionBoundary, useAppMenus, useRuntimeBootstrap } from "openxiangda/runtime/react";
+import {
+  Bell,
+  ChevronDown,
+  ChevronRight,
+  CircleHelp,
+  Database,
+  FileText,
+  FolderOpen,
+  Globe2,
+  Home,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  Rocket,
+  Search,
+  Settings,
+  Shield,
+  Sparkles,
+  Upload,
+  UserCircle,
+  Workflow,
+  X,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link, Outlet, useLocation, useParams } from "react-router-dom";
+import {
+  PermissionBoundary,
+  useAppMenus,
+  useRuntimeAuth,
+  useRuntimeBootstrap,
+  type PermissionBoundaryFallbackState,
+} from "openxiangda/runtime/react";
 
-const fallbackGroups = [
+import {
+  MacPrimaryButton,
+  MacSecondaryButton,
+  MacStatePage,
+  MacStatusPill,
+  cn,
+} from "@/shared/mac-admin";
+
+type MenuItem = {
+  name: string;
+  path: string;
+  icon: typeof LayoutDashboard;
+  hint?: string;
+};
+
+type MenuGroup = {
+  title: string;
+  items: MenuItem[];
+};
+
+const fallbackNavigation: MenuItem[] = [
+  { hint: "应用总览", icon: LayoutDashboard, name: "运行时工作台", path: "admin" },
+  { hint: "普通用户入口", icon: Home, name: "用户门户", path: "portal" },
+  { hint: "匿名访问链路", icon: Globe2, name: "公开访问", path: "public" },
+];
+
+const systemNavigation: MenuGroup[] = [
   {
-    title: "应用工作台",
+    title: "表单与流程",
     items: [
-      { name: "工作台", path: "admin", icon: LayoutDashboard },
-      { name: "用户门户", path: "portal", icon: Home },
+      { hint: "默认提交页", icon: FileText, name: "表单模板", path: "admin?panel=forms" },
+      { hint: "流程发起和详情", icon: Workflow, name: "流程模板", path: "admin?panel=workflow" },
+      { hint: "数据管理列表", icon: Database, name: "数据列表", path: "admin?panel=data" },
+      { hint: "平台文件 ticket", icon: Upload, name: "文件预览", path: "admin?panel=files" },
     ],
   },
   {
-    title: "权限与系统",
+    title: "权限与发布",
     items: [
-      { name: "AI 验证", path: "admin?panel=verification", icon: Sparkles },
-      { name: "角色权限", path: "admin?panel=permission", icon: Shield },
+      { hint: "真实用户验证", icon: Sparkles, name: "AI 验证", path: "admin?panel=verification" },
+      { hint: "页面 code 与角色", icon: Shield, name: "角色权限", path: "admin?panel=permission" },
+      { hint: "版本与部署", icon: Rocket, name: "发布版本", path: "admin?panel=releases" },
+      { hint: "运行参数", icon: Settings, name: "系统设置", path: "admin?panel=settings" },
     ],
   },
 ];
 
 export function AdminShell() {
   const { appType = "" } = useParams();
+  const location = useLocation();
   const bootstrap = useRuntimeBootstrap();
   const menus = useAppMenus();
+  const auth = useRuntimeAuth();
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
-  const groups = useMemo(() => {
-    if (!menus.data.length) {
-      return fallbackGroups.map(group => ({
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const [loggingOut, setLoggingOut] = useState(false);
+
+  const appName = String(bootstrap.data?.app?.name || "OpenXiangda 应用");
+  const runtimeMode = String(bootstrap.data?.runtime?.mode || "react-spa");
+  const userName = String(
+    bootstrap.data?.user?.name ||
+      bootstrap.data?.user?.nickName ||
+      bootstrap.data?.user?.id ||
+      "未登录",
+  );
+
+  const groups = useMemo<MenuGroup[]>(() => {
+    const platformItems = menus.data.length
+      ? menus.data.flatMap(item => {
+          const children = item.children?.length ? item.children : [item];
+          return children
+            .filter(child => !child.isHidden)
+            .map(child => ({
+              hint: child.routeCode || child.resourceCode || undefined,
+              icon: resolveMenuIcon(String(child.name || child.path || "")),
+              name: child.name,
+              path: resolveMenuPath(appType, child.path || "admin"),
+            }));
+        })
+      : fallbackNavigation.map(item => ({
+          ...item,
+          path: resolveMenuPath(appType, item.path),
+        }));
+
+    return [
+      { title: "应用导航", items: platformItems },
+      ...systemNavigation.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: resolveMenuPath(appType, item.path || "admin"),
-        icon: LayoutDashboard,
       })),
-    }));
+    ];
   }, [appType, menus.data]);
 
+  const handleLogout = async () => {
+    setLoggingOut(true);
+    await auth.logoutAndRedirect({ replace: true });
+  };
+
+  const sidebar = (
+    <aside className="flex h-full min-h-0 flex-col border-r border-white/70 bg-white/[0.84] backdrop-blur-xl">
+      <div className="flex h-20 shrink-0 items-center gap-3 border-b border-slate-200/70 px-5">
+        <Link className="grid h-12 w-12 place-items-center rounded-2xl bg-slate-950 text-sm font-semibold text-white shadow-lg shadow-slate-300/70" to={`/view/${appType}/admin`}>
+          OX
+        </Link>
+        <div className="min-w-0">
+          <Link className="block truncate text-base font-semibold text-slate-950" to={`/view/${appType}/admin`}>
+            OpenXiangda
+          </Link>
+          <div className="mt-0.5 truncate text-xs text-slate-500">React SPA Runtime</div>
+        </div>
+      </div>
+
+      <nav className="ox-scrollbar min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-5">
+        {groups.map(group => {
+          const collapsed = collapsedGroups[group.title];
+          return (
+            <section key={group.title}>
+              <button
+                className="flex w-full items-center justify-between rounded-xl px-2 py-2 text-xs font-semibold text-slate-500 transition hover:bg-slate-100/80"
+                onClick={() => setCollapsedGroups(prev => ({ ...prev, [group.title]: !collapsed }))}
+                type="button"
+              >
+                <span>{group.title}</span>
+                {collapsed ? <ChevronRight size={15} /> : <ChevronDown size={15} />}
+              </button>
+              {!collapsed ? (
+                <div className="mt-1 space-y-1.5">
+                  {group.items.map(item => {
+                    const active = isMenuActive(location.pathname, location.search, item.path);
+                    return (
+                      <Link
+                        className={cn(
+                          "group relative flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition",
+                          active
+                            ? "bg-blue-50 text-blue-700 shadow-sm ring-1 ring-blue-100"
+                            : "text-slate-600 hover:bg-slate-100/80 hover:text-slate-950",
+                        )}
+                        key={`${group.title}-${item.name}-${item.path}`}
+                        onClick={() => setMobileOpen(false)}
+                        to={item.path}
+                      >
+                        <span
+                          className={cn(
+                            "absolute left-0 top-3 h-8 w-1 rounded-r-full transition",
+                            active ? "bg-blue-600" : "bg-transparent",
+                          )}
+                        />
+                        <span
+                          className={cn(
+                            "grid h-9 w-9 shrink-0 place-items-center rounded-xl transition",
+                            active ? "bg-white text-blue-700" : "bg-white/70 text-slate-500 group-hover:text-slate-700",
+                          )}
+                        >
+                          <item.icon size={18} />
+                        </span>
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate font-medium">{item.name}</span>
+                          {item.hint ? (
+                            <span className="mt-0.5 block truncate text-xs text-slate-400">{item.hint}</span>
+                          ) : null}
+                        </span>
+                      </Link>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </section>
+          );
+        })}
+      </nav>
+
+      <div className="shrink-0 border-t border-slate-200/70 p-4">
+        <div className="rounded-2xl bg-slate-950 p-4 text-white shadow-lg shadow-slate-300/60">
+          <div className="text-xs text-slate-300">Runtime Build</div>
+          <div className="mt-1 truncate text-sm font-semibold">
+            {String(bootstrap.data?.runtime?.activeBuildId || "local-dev")}
+          </div>
+          <div className="mt-3 flex flex-wrap gap-2">
+            <span className="rounded-full bg-white/[0.12] px-2.5 py-1 text-xs text-slate-100">{runtimeMode}</span>
+            <span className="rounded-full bg-emerald-400/18 px-2.5 py-1 text-xs text-emerald-100">online</span>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+
   return (
     <PermissionBoundary
-      routeCode="admin.dashboard"
+      fallback={state => <RuntimePermissionState appType={appType} state={state} />}
+      loadingFallback={<RuntimeLoadingState />}
       menuCode="runtime_workspace"
       path={`/view/${appType}/admin`}
-      loadingFallback={<ShellState title="正在校验权限" description="请稍候" />}
-      fallback={<ShellState title="无权访问管理后台" description="请切换到有权限的账号，或联系管理员开通页面权限。" />}
+      routeCode="admin.dashboard"
     >
-      <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}>
+      <div className="min-h-screen overflow-x-hidden bg-[linear-gradient(180deg,#eef2f7_0%,#f8fafc_48%,#edf2f7_100%)] text-slate-950">
+        <div className="fixed inset-y-0 left-0 z-30 hidden w-80 lg:block">{sidebar}</div>
+
+        {mobileOpen ? (
+          <div className="fixed inset-0 z-40 lg:hidden">
+            <button
+              aria-label="关闭导航"
+              className="absolute inset-0 bg-slate-950/35"
+              onClick={() => setMobileOpen(false)}
+              type="button"
+            />
+            <div className="relative h-full w-[min(22rem,88vw)]">{sidebar}</div>
+          </div>
+        ) : null}
+
+        <main className="min-w-0 lg:pl-80">
+          <header className="sticky top-0 z-20 border-b border-white/70 bg-white/[0.78] backdrop-blur-xl">
+            <div className="flex h-20 min-w-0 items-center justify-between gap-3 px-4 sm:px-6">
+              <div className="flex min-w-0 items-center gap-3">
+                <button
+                  aria-label="打开导航"
+                  className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-slate-100 text-slate-700 lg:hidden"
+                  onClick={() => setMobileOpen(true)}
+                  type="button"
+                >
+                  <Menu size={20} />
+                </button>
+                <div className="min-w-0">
+                  <div className="truncate text-lg font-semibold text-slate-950">{appName}</div>
+                  <div className="mt-1 flex min-w-0 items-center gap-2 text-xs text-slate-500">
+                    <span className="truncate">/view/{appType || "APP"}/admin</span>
+                    <span className="hidden sm:inline">·</span>
+                    <span className="hidden sm:inline">{runtimeMode}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="hidden min-w-0 max-w-xl flex-1 items-center rounded-2xl border border-slate-200 bg-slate-50/90 px-3 py-2 text-sm text-slate-400 xl:flex">
+                <Search className="mr-2 shrink-0" size={17} />
+                <span className="truncate">搜索菜单、表单、页面 code</span>
+              </div>
+
+              <div className="flex shrink-0 items-center gap-2">
+                <MacStatusPill tone="emerald">wisejob</MacStatusPill>
+                <button className="relative grid h-10 w-10 place-items-center rounded-xl bg-white text-slate-600 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50" type="button">
+                  <Bell size={18} />
+                  <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-rose-500 ring-2 ring-white" />
+                </button>
+                <button className="hidden h-10 w-10 place-items-center rounded-xl bg-white text-slate-600 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 sm:grid" type="button">
+                  <CircleHelp size={18} />
+                </button>
+                <div className="relative">
                   <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 }))}
+                    className="flex h-10 items-center gap-2 rounded-full bg-white py-1 pl-1 pr-3 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50"
+                    onClick={() => setUserMenuOpen(open => !open)}
                     type="button"
                   >
-                    <span>{group.title}</span>
-                    {collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
+                    <span className="grid h-8 w-8 place-items-center rounded-full bg-blue-600 text-xs font-semibold text-white">
+                      {userName.slice(0, 1).toUpperCase()}
+                    </span>
+                    <span className="hidden max-w-24 truncate sm:block">{userName}</span>
+                    <ChevronDown size={15} />
                   </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>
-                      ))}
+                  {userMenuOpen ? (
+                    <div className="absolute right-0 mt-3 w-72 overflow-hidden rounded-2xl border border-slate-200 bg-white p-2 shadow-[0_24px_70px_rgba(15,23,42,0.16)]">
+                      <div className="flex gap-3 rounded-xl bg-slate-50 p-3">
+                        <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-blue-600 text-white">
+                          <UserCircle size={21} />
+                        </div>
+                        <div className="min-w-0">
+                          <div className="truncate text-sm font-semibold text-slate-950">{userName}</div>
+                          <div className="mt-1 truncate text-xs text-slate-500">{String(bootstrap.data?.user?.id || "current-user")}</div>
+                        </div>
+                      </div>
+                      <button
+                        className="mt-2 flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-slate-600 transition hover:bg-slate-50"
+                        onClick={() => {
+                          setUserMenuOpen(false);
+                          void bootstrap.reload();
+                        }}
+                        type="button"
+                      >
+                        <FolderOpen size={17} />
+                        重新加载上下文
+                      </button>
+                      <button
+                        className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-rose-600 transition hover:bg-rose-50"
+                        disabled={loggingOut}
+                        onClick={() => void handleLogout()}
+                        type="button"
+                      >
+                        <LogOut size={17} />
+                        {loggingOut ? "正在退出" : "退出登录"}
+                      </button>
                     </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 || "未登录")}
+                  ) : null}
+                </div>
+              </div>
             </div>
           </header>
-          <div className="p-5">
+
+          <div className="mx-auto min-w-0 max-w-[1600px] px-4 py-5 sm:px-6">
             <Outlet />
           </div>
         </main>
@@ -129,19 +339,87 @@ export function AdminShell() {
   );
 }
 
+function RuntimePermissionState({
+  appType,
+  state,
+}: {
+  appType: string;
+  state: PermissionBoundaryFallbackState;
+}) {
+  const auth = useRuntimeAuth();
+
+  useEffect(() => {
+    if (state.errorType === "unauthenticated") {
+      void auth.redirectToLogin({ replace: true });
+    }
+  }, [auth, state.errorType]);
+
+  if (state.errorType === "unauthenticated") {
+    return (
+      <MacStatePage
+        actions={
+          <MacPrimaryButton onClick={() => void auth.redirectToLogin({ replace: true })}>
+            立即登录
+          </MacPrimaryButton>
+        }
+        description="当前浏览器没有有效登录态，正在为你跳转到平台登录页。"
+        fullScreen
+        icon={<LogOut size={24} />}
+        status="401"
+        title="需要登录"
+      />
+    );
+  }
+
+  return (
+    <MacStatePage
+      actions={
+        <>
+          <MacSecondaryButton onClick={() => window.history.back()}>返回上一页</MacSecondaryButton>
+          <MacPrimaryButton onClick={() => window.location.assign(`/view/${appType}/portal`)}>
+            打开用户门户
+          </MacPrimaryButton>
+        </>
+      }
+      description={state.message || "请切换到有权限的账号，或联系管理员开通页面权限。"}
+      fullScreen
+      icon={<Shield size={24} />}
+      status="403"
+      title="无权访问管理后台"
+    />
+  );
+}
+
+function RuntimeLoadingState() {
+  return (
+    <MacStatePage
+      description="正在读取应用、用户和页面权限信息。"
+      fullScreen
+      icon={<Rocket size={24} />}
+      status="LOADING"
+      title="正在进入工作区"
+    />
+  );
+}
+
 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>
-  );
+function resolveMenuIcon(value: string): typeof LayoutDashboard {
+  const normalized = value.toLowerCase();
+  if (normalized.includes("用户") || normalized.includes("portal")) return Home;
+  if (normalized.includes("公开") || normalized.includes("public")) return Globe2;
+  if (normalized.includes("数据") || normalized.includes("data")) return Database;
+  if (normalized.includes("流程") || normalized.includes("process")) return Workflow;
+  if (normalized.includes("表单") || normalized.includes("form")) return FileText;
+  return LayoutDashboard;
+}
+
+function isMenuActive(pathname: string, search: string, target: string) {
+  const current = `${pathname}${search}`;
+  if (target.includes("?")) return current === target;
+  return pathname === target || pathname.startsWith(`${target}/`);
 }

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

@@ -1,9 +1,31 @@
-import { Outlet } from "react-router-dom";
+import { Globe2, ShieldCheck } from "lucide-react";
+import { Link, Outlet, useParams } from "react-router-dom";
+
+import { MacStatusPill } from "@/shared/mac-admin";
 
 export function PublicShell() {
+  const { appType = "" } = useParams();
+
   return (
-    <div className="min-h-screen bg-[#f6f7f9]">
-      <main className="mx-auto max-w-4xl px-5 py-10">
+    <div className="min-h-screen overflow-x-hidden bg-[linear-gradient(180deg,#f8fafc_0%,#eef2f7_100%)]">
+      <header className="border-b border-white/70 bg-white/[0.78] backdrop-blur-xl">
+        <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-5 py-4">
+          <Link className="flex min-w-0 items-center gap-3" to={`/view/${appType}/public`}>
+            <span className="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-slate-950 text-white">
+              <Globe2 size={22} />
+            </span>
+            <span className="min-w-0">
+              <span className="block truncate text-base font-semibold text-slate-950">公开访问</span>
+              <span className="block truncate text-xs text-slate-500">Public Runtime</span>
+            </span>
+          </Link>
+          <MacStatusPill tone="blue">
+            <ShieldCheck size={13} />
+            ticket / guest
+          </MacStatusPill>
+        </div>
+      </header>
+      <main className="mx-auto min-w-0 max-w-6xl px-5 py-8">
         <Outlet />
       </main>
     </div>