openxiangda 1.0.264 → 2.0.0-alpha.2

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

@@ -1,570 +0,0 @@
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  LogOut,
-  Menu,
-  RefreshCw,
-  Shield,
-  X,
-} from "lucide-react";
-import { createContext, useContext, 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";
-
-import {
-  buildStarterAdminNavigation,
-  filterNavigationByMenuCodes,
-  type StarterNavigationGroup,
-} from "@/app/navigation";
-import { starterBrand } from "@/app/starter-content";
-import {
-  PrimaryButton,
-  SecondaryButton,
-  StatePage,
-  cn,
-} from "@/shared/ui";
-
-type PlatformMenuLike = {
-  children?: PlatformMenuLike[];
-  code?: string | null;
-  formUuid?: string | null;
-  isHidden?: boolean | null;
-  resourceCode?: string | null;
-  routeCode?: string | null;
-  type?: string | null;
-};
-
-type AdminPageMeta = {
-  breadcrumbs?: string[];
-  title?: string;
-};
-
-type NavigationState = {
-  activePath?: string;
-  breadcrumbs: string[];
-  title: string;
-};
-
-const AdminPageMetaContext = createContext<((meta: AdminPageMeta | null) => void) | null>(null);
-const noopSetAdminPageMeta = () => undefined;
-
-export function useAdminPageMetaController() {
-  return useContext(AdminPageMetaContext) ?? noopSetAdminPageMeta;
-}
-
-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 [mobileOpen, setMobileOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [loggingOut, setLoggingOut] = useState(false);
-  const [pageMeta, setPageMeta] = useState<AdminPageMeta | null>(null);
-
-  const userName = String(
-    bootstrap.data?.user?.name ||
-      bootstrap.data?.user?.nickName ||
-      bootstrap.data?.user?.id ||
-      "当前用户",
-  );
-  const userAvatar = String(
-    bootstrap.data?.user?.avatar ||
-      bootstrap.data?.user?.avatarUrl ||
-      bootstrap.data?.user?.photoUrl ||
-      "",
-  );
-  const userRole = String(
-    bootstrap.data?.user?.roleName ||
-      bootstrap.data?.user?.title ||
-      bootstrap.data?.user?.position ||
-      bootstrap.data?.user?.departmentName ||
-      "平台用户",
-  );
-
-  const menuCodes = useMemo(() => collectMenuCodes(menus.data), [menus.data]);
-  const groups = useMemo<StarterNavigationGroup[]>(
-    () =>
-      filterNavigationByMenuCodes(
-        buildStarterAdminNavigation({
-          appType,
-        }),
-        menuCodes,
-      ),
-    [appType, menuCodes],
-  );
-  const navigationState = useMemo(
-    () => resolveNavigationState(groups, location.pathname, location.search, appType),
-    [appType, groups, location.pathname, location.search],
-  );
-  const headerTitle = pageMeta?.title || navigationState.title || starterBrand.fallbackName;
-  const breadcrumbs =
-    pageMeta?.breadcrumbs && pageMeta.breadcrumbs.length > 0
-      ? pageMeta.breadcrumbs
-      : navigationState.breadcrumbs;
-
-  const handleLogout = async () => {
-    setLoggingOut(true);
-    await auth.logoutAndRedirect({ replace: true });
-  };
-
-  const sidebar = (compact = false) => (
-    <aside className="flex h-full min-h-0 flex-col border-r border-slate-200 bg-white">
-      <div className={cn("flex h-[68px] shrink-0 items-center gap-3", compact ? "justify-center px-3" : "px-5")}>
-        <Link
-          aria-label={starterBrand.name}
-          className="grid h-9 w-9 shrink-0 place-items-center text-blue-600"
-          to={`/view/${appType}/admin`}
-        >
-          <OpenXiangdaMark />
-        </Link>
-        <div className={cn("min-w-0", compact && "hidden")}>
-          <Link className="block truncate text-[15px] font-semibold leading-5 text-slate-950" to={`/view/${appType}/admin`}>
-            {starterBrand.name}
-          </Link>
-          <div className="mt-0.5 truncate text-xs leading-4 text-slate-500">{starterBrand.subtitle}</div>
-        </div>
-      </div>
-
-      <nav className={cn("ox-scrollbar min-h-0 flex-1 overflow-y-auto py-3", compact ? "px-2" : "space-y-2 px-2.5")}>
-        {groups.map(group => {
-          const collapsed = collapsedGroups[group.title];
-          const groupActive = group.items.some(item => navigationState.activePath === item.path);
-          const GroupIcon = group.icon;
-          return (
-            <section className="min-w-0" key={group.title}>
-              <button
-                aria-label={group.title}
-                aria-expanded={!collapsed}
-                className={cn(
-                  "flex h-9 w-full items-center rounded-xl text-[12px] font-semibold text-slate-700 transition hover:bg-slate-50 hover:text-slate-950",
-                  compact ? "justify-center px-0" : "justify-between gap-2 px-2.5",
-                  groupActive && "bg-slate-50 text-slate-950",
-                )}
-                onClick={() => setCollapsedGroups(prev => ({ ...prev, [group.title]: !collapsed }))}
-                type="button"
-              >
-                <span className={cn("flex min-w-0 items-center gap-2", compact && "justify-center")}>
-                  <GroupIcon
-                    className={cn(groupActive ? "text-blue-600" : "text-slate-500")}
-                    size={15}
-                    strokeWidth={2}
-                  />
-                  <span className={cn("truncate", compact && "sr-only")}>{group.title}</span>
-                </span>
-                {compact ? (
-                  null
-                ) : (
-                  <ChevronDown
-                    className={cn(
-                      "shrink-0 text-slate-500 transition-transform duration-200 ease-out motion-reduce:transition-none",
-                      collapsed && "-rotate-90",
-                    )}
-                    size={15}
-                    strokeWidth={2}
-                  />
-                )}
-              </button>
-              <div
-                className={cn(
-                  "grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none",
-                  collapsed ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100",
-                )}
-              >
-                <div className={cn("min-h-0 overflow-hidden", collapsed && "pointer-events-none")}>
-                  <div className={cn("mt-1 space-y-0.5", compact && "mt-1")}>
-                    {group.items.map(item => {
-                      const active = navigationState.activePath === item.path;
-                      return (
-                        <Link
-                          aria-label={item.name}
-                          className={cn(
-                            "group relative flex h-9 items-center rounded-xl text-sm transition",
-                            compact ? "justify-center px-0" : "gap-2.5 pl-7 pr-3",
-                            active
-                              ? "bg-[#eef6ff] text-[#1677ff]"
-                              : "text-slate-600 hover:bg-slate-50 hover:text-slate-900",
-                          )}
-                          key={`${group.title}-${item.name}-${item.path}`}
-                          onClick={() => setMobileOpen(false)}
-                          to={item.path}
-                        >
-                          <span
-                            className={cn(
-                              "absolute -left-2.5 top-1 h-7 w-1 rounded-r-full transition",
-                              active ? "bg-[#1677ff]" : "bg-transparent",
-                              compact && "-left-2",
-                            )}
-                          />
-                          <span
-                            className={cn(
-                              "grid h-5 w-5 shrink-0 place-items-center transition",
-                              active ? "text-[#1677ff]" : "text-slate-500 group-hover:text-slate-700",
-                            )}
-                          >
-                            <item.icon size={16} strokeWidth={2} />
-                          </span>
-                          <span className={cn("min-w-0 flex-1 truncate font-medium", compact && "sr-only")}>{item.name}</span>
-                        </Link>
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
-            </section>
-          );
-        })}
-      </nav>
-      <div className="shrink-0 px-3 py-4">
-        <button
-          className={cn(
-            "flex h-10 w-full items-center gap-3 rounded-lg text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-950",
-            compact ? "justify-center px-0" : "px-2.5",
-          )}
-          onClick={() => setSidebarCollapsed(value => !value)}
-          type="button"
-        >
-          <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-slate-50 text-slate-600 ring-1 ring-slate-200">
-            {compact ? <ChevronRight size={17} /> : <ChevronLeft size={17} />}
-          </span>
-          <span className={cn("truncate", compact && "sr-only")}>{compact ? "展开侧边栏" : "收起侧边栏"}</span>
-        </button>
-      </div>
-    </aside>
-  );
-
-  return (
-    <PermissionBoundary
-      fallback={state => <AdminPermissionState state={state} />}
-      loadingFallback={<AdminLoadingState />}
-      menuCode="admin_dashboard"
-      path={`/view/${appType}/admin`}
-      routeCode="admin.dashboard"
-    >
-      <div className="min-h-screen overflow-x-hidden bg-[linear-gradient(180deg,#edf4ff_0%,#f8fafc_42%,#f1f5f9_100%)] text-slate-950">
-        <div className={cn("fixed inset-y-0 left-0 z-30 hidden lg:block", sidebarCollapsed ? "w-[76px]" : "w-60")}>
-          {sidebar(sidebarCollapsed)}
-        </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)]">
-              <button
-                aria-label="关闭导航"
-                className="absolute right-3 top-3 z-50 grid h-10 w-10 place-items-center rounded-xl bg-slate-100 text-slate-700 shadow-sm ring-1 ring-slate-200"
-                onClick={() => setMobileOpen(false)}
-                type="button"
-              >
-                <X size={19} />
-              </button>
-              {sidebar(false)}
-            </div>
-          </div>
-        ) : null}
-
-        <main className={cn("min-w-0 transition-[padding] duration-200", sidebarCollapsed ? "lg:pl-[76px]" : "lg:pl-60")}>
-          <header className="sticky top-0 z-20 border-b border-white/70 bg-white/[0.8] 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-xs font-medium text-slate-500">
-                    {breadcrumbs.join(" / ")}
-                  </div>
-                  <div className="mt-1 truncate text-lg font-semibold text-slate-950">{headerTitle}</div>
-                </div>
-              </div>
-
-              <div className="flex shrink-0 items-center">
-                <div className="relative">
-                  <button
-                    className="flex h-12 items-center gap-3 rounded-2xl px-2 py-1.5 text-left transition hover:bg-white/80"
-                    onClick={() => setUserMenuOpen(open => !open)}
-                    type="button"
-                  >
-                    <UserAvatar name={userName} src={userAvatar} />
-                    <span className="hidden min-w-0 sm:block">
-                      <span className="block max-w-28 truncate text-sm font-semibold leading-5 text-slate-950">{userName}</span>
-                      <span className="block max-w-28 truncate text-xs leading-4 text-slate-500">{userRole}</span>
-                    </span>
-                    <ChevronDown className="text-slate-500" size={16} />
-                  </button>
-                  {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 items-center gap-3 rounded-xl bg-slate-50 p-3">
-                        <UserAvatar name={userName} src={userAvatar} size="lg" />
-                        <div className="min-w-0">
-                          <div className="truncate text-sm font-semibold text-slate-950">{userName}</div>
-                          <div className="mt-0.5 truncate text-xs text-slate-500">{userRole}</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"
-                      >
-                        <RefreshCw 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>
-                  ) : null}
-                </div>
-              </div>
-            </div>
-          </header>
-
-          <AdminPageMetaContext.Provider value={setPageMeta}>
-            <div className="ox-admin-content mx-auto min-w-0 max-w-[1440px] px-4 py-5 sm:px-6">
-              <Outlet />
-            </div>
-          </AdminPageMetaContext.Provider>
-        </main>
-      </div>
-    </PermissionBoundary>
-  );
-}
-
-function UserAvatar({
-  name,
-  size = "md",
-  src,
-}: {
-  name: string;
-  size?: "md" | "lg";
-  src?: string;
-}) {
-  const className = cn(
-    "shrink-0 overflow-hidden rounded-full bg-[linear-gradient(135deg,#2563eb_0%,#38bdf8_100%)] text-white shadow-sm ring-2 ring-white",
-    size === "lg" ? "h-11 w-11" : "h-9 w-9",
-  );
-
-  if (src) {
-    return (
-      <img
-        alt=""
-        className={cn(className, "object-cover")}
-        referrerPolicy="no-referrer"
-        src={src}
-      />
-    );
-  }
-
-  return (
-    <span className={cn(className, "grid place-items-center text-sm font-semibold")}>
-      {name.slice(0, 1).toUpperCase()}
-    </span>
-  );
-}
-
-function OpenXiangdaMark() {
-  return (
-    <svg
-      aria-hidden="true"
-      className="h-8 w-8"
-      fill="none"
-      viewBox="0 0 36 36"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M18 3.5 32.5 31H26L18 15.7 10 31H3.5L18 3.5Z"
-        fill="currentColor"
-      />
-      <path d="M18 20.2 23.4 31H12.6L18 20.2Z" fill="white" />
-      <path
-        d="M18 9.5 8.2 31H3.5L18 3.5l14.5 27.5h-4.7L18 9.5Z"
-        fill="currentColor"
-        opacity="0.86"
-      />
-    </svg>
-  );
-}
-
-function AdminPermissionState({ state }: { state: PermissionBoundaryFallbackState }) {
-  const auth = useRuntimeAuth();
-
-  useEffect(() => {
-    if (state.errorType === "unauthenticated") {
-      void auth.redirectToLogin({ replace: true });
-    }
-  }, [auth, state.errorType]);
-
-  if (state.errorType === "unauthenticated") {
-    return (
-      <StatePage
-        actions={
-          <PrimaryButton onClick={() => void auth.redirectToLogin({ replace: true })}>
-            立即登录
-          </PrimaryButton>
-        }
-        description="当前浏览器没有有效登录态，正在为你跳转到登录页。"
-        fullScreen
-        icon={<LogOut size={24} />}
-        status="401"
-        title="需要登录"
-      />
-    );
-  }
-
-  return (
-    <StatePage
-      actions={
-        <>
-          <SecondaryButton onClick={() => window.history.back()}>返回上一页</SecondaryButton>
-          <PrimaryButton onClick={() => void auth.redirectToLogin({ replace: true })}>
-            切换账号
-          </PrimaryButton>
-        </>
-      }
-      description={state.message || "请切换到有权限的账号，或联系管理员开通后台访问权限。"}
-      fullScreen
-      icon={<Shield size={24} />}
-      status="403"
-      title="无权访问管理后台"
-    />
-  );
-}
-
-function AdminLoadingState() {
-  return (
-    <StatePage
-      description="正在读取应用、用户和页面权限信息。"
-      fullScreen
-      icon={<Shield size={24} />}
-      status="LOADING"
-      title="正在进入应用"
-    />
-  );
-}
-
-function collectMenuCodes(items: PlatformMenuLike[]): Set<string> {
-  const codes = new Set<string>();
-  const visit = (item: PlatformMenuLike) => {
-    if (item.isHidden) return;
-    for (const value of [item.code, item.resourceCode, item.routeCode]) {
-      if (value) codes.add(String(value));
-    }
-    for (const child of item.children || []) visit(child);
-  };
-  for (const item of items) visit(item);
-  return codes;
-}
-
-function isMenuActive(pathname: string, search: string, target: string) {
-  const normalize = (value: string) =>
-    value
-      .replace(/[?#].*$/, "")
-      .replace(/\/+$/, "")
-      .replace(/\/{2,}/g, "/");
-  if (target.includes("?")) return `${pathname}${search}` === target;
-  return normalize(pathname) === normalize(target);
-}
-
-function resolveNavigationState(
-  groups: StarterNavigationGroup[],
-  pathname: string,
-  search: string,
-  appType: string,
-): NavigationState {
-  const fallback: NavigationState = {
-    breadcrumbs: ["首页"],
-    title: starterBrand.fallbackName,
-  };
-  const entries = groups.flatMap(group => group.items.map(item => ({ group, item })));
-  const exact = entries.find(({ item }) => isMenuActive(pathname, search, item.path));
-  if (exact) {
-    return {
-      activePath: exact.item.path,
-      breadcrumbs: ["首页", exact.group.title, exact.item.name],
-      title: exact.item.name,
-    };
-  }
-
-  const route = parseAdminRoute(pathname, appType);
-  if (!route) return fallback;
-
-  const related = findRelatedNavigationEntry(entries, route);
-  if (related) {
-    const title =
-      route.kind === "form-detail" || route.kind === "process-detail"
-        ? `${related.item.name}详情`
-        : related.item.name;
-    return {
-      activePath: related.item.path,
-      breadcrumbs: ["首页", related.group.title, related.item.name],
-      title,
-    };
-  }
-
-  if (route.kind === "data") {
-    return { breadcrumbs: ["首页", "数据管理"], title: "业务数据" };
-  }
-  if (route.kind === "form-new") {
-    return { breadcrumbs: ["首页", "业务办理"], title: "发起申请" };
-  }
-  if (route.kind === "form-detail") {
-    return { breadcrumbs: ["首页", "业务记录"], title: "记录详情" };
-  }
-  return { breadcrumbs: ["首页", "流程办理"], title: "流程详情" };
-}
-
-function parseAdminRoute(pathname: string, appType: string) {
-  const escapedAppType = appType.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const prefix = new RegExp(`^/view/${escapedAppType}/admin/`);
-  if (!prefix.test(pathname)) return null;
-  const rest = pathname.replace(prefix, "");
-  const [kind, formUuid, tail] = rest.split("/");
-  if (kind === "data" && formUuid) return { formUuid, kind: "data" as const };
-  if (kind === "forms" && formUuid && tail === "new") return { formUuid, kind: "form-new" as const };
-  if (kind === "forms" && formUuid) return { formUuid, kind: "form-detail" as const };
-  if (kind === "process" && formUuid) return { formUuid, kind: "process-detail" as const };
-  return null;
-}
-
-function findRelatedNavigationEntry(
-  entries: Array<{ group: StarterNavigationGroup; item: StarterNavigationGroup["items"][number] }>,
-  route: NonNullable<ReturnType<typeof parseAdminRoute>>,
-) {
-  const formPathNeedle = `/forms/${route.formUuid}/new`;
-  const dataPathNeedle = `/data/${route.formUuid}`;
-  if (route.kind === "data") return entries.find(({ item }) => item.path.includes(dataPathNeedle));
-  if (route.kind === "form-new") return entries.find(({ item }) => item.path.includes(formPathNeedle));
-  return (
-    entries.find(({ item }) => item.path.includes(dataPathNeedle)) ||
-    entries.find(({ item }) => item.path.includes(formPathNeedle))
-  );
-}

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

@@ -1,21 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { ConfigProvider } from "antd";
-import zhCN from "antd/locale/zh_CN.js";
-import dayjs from "dayjs";
-import "dayjs/locale/zh-cn.js";
-import { RouterProvider } from "react-router-dom";
-
-import { router } from "./app/router";
-import "antd-mobile/bundle/style.css";
-import "./styles/index.css";
-
-dayjs.locale("zh-cn");
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <ConfigProvider locale={zhCN}>
-      <RouterProvider router={router} />
-    </ConfigProvider>
-  </React.StrictMode>,
-);