openxiangda 1.0.72 → 1.0.74

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

@@ -8,7 +8,7 @@ import {
   Shield,
   X,
 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { Link, Outlet, useLocation, useParams } from "react-router-dom";
 import {
   PermissionBoundary,
@@ -41,6 +41,24 @@ type PlatformMenuLike = {
   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();
@@ -52,8 +70,8 @@ export function AdminShell() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
   const [loggingOut, setLoggingOut] = useState(false);
+  const [pageMeta, setPageMeta] = useState<AdminPageMeta | null>(null);
 
-  const appName = String(bootstrap.data?.app?.name || starterBrand.fallbackName);
   const userName = String(
     bootstrap.data?.user?.name ||
       bootstrap.data?.user?.nickName ||
@@ -85,6 +103,15 @@ export function AdminShell() {
       ),
     [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);
@@ -135,7 +162,7 @@ export function AdminShell() {
               {!collapsed ? (
                 <div className={cn("mt-1 space-y-1", compact && "mt-2")}>
                   {group.items.map(item => {
-                    const active = isMenuActive(location.pathname, location.search, item.path);
+                    const active = navigationState.activePath === item.path;
                     return (
                       <Link
                         aria-label={item.name}
@@ -241,8 +268,10 @@ export function AdminShell() {
                   <Menu size={20} />
                 </button>
                 <div className="min-w-0">
-                  <div className="truncate text-xs font-medium text-slate-500">首页 / 应用</div>
-                  <div className="mt-1 truncate text-lg font-semibold text-slate-950">{appName}</div>
+                  <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>
 
@@ -296,9 +325,11 @@ export function AdminShell() {
             </div>
           </header>
 
-          <div className="mx-auto min-w-0 max-w-[1440px] px-4 py-5 sm:px-6">
-            <Outlet />
-          </div>
+          <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>
@@ -439,3 +470,78 @@ function isMenuActive(pathname: string, search: string, target: string) {
   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

@@ -3,7 +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 "antd-mobile/bundle/style.css";
 import "./styles/index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

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

@@ -1,15 +1,6 @@
-import { Database, FilePlus2, Filter, RefreshCw, Rows3 } from "lucide-react";
-import type { ReactNode } from "react";
 import { useParams } from "react-router-dom";
 import { DataManagementList } from "openxiangda";
 
-import {
-  PageHeader,
-  Panel,
-  PrimaryButton,
-  SecondaryButton,
-  StatusPill,
-} from "@/shared/ui";
 import {
   defaultPageOverrides,
   resolveDefaultPageOverride,
@@ -29,73 +20,17 @@ export function DataRoutePage() {
   );
 
   return (
-    <div className="min-w-0 space-y-5">
-      <PageHeader
-        actions={
-          <>
-            <SecondaryButton>
-              <Filter size={17} />
-              筛选
-            </SecondaryButton>
-            <SecondaryButton onClick={() => window.location.reload()}>
-              <RefreshCw size={17} />
-              刷新
-            </SecondaryButton>
-            <PrimaryButton onClick={() => window.location.assign(`/view/${appType}/admin/forms/${formUuid}/new`)}>
-              <FilePlus2 size={17} />
-              新增数据
-            </PrimaryButton>
-          </>
-        }
-        description="查看、筛选和维护当前账号有权限访问的业务数据。"
-        meta={
-          <>
-            <StatusPill tone="blue">业务台账</StatusPill>
-            <StatusPill tone="emerald">权限数据</StatusPill>
-            <StatusPill tone="amber">详情联动</StatusPill>
-          </>
-        }
-        title="业务数据"
-      />
-      <section className="grid gap-4 md:grid-cols-3">
-        <DataSummary icon={<Database size={18} />} label="当前表单" value={formUuid || "--"} />
-        <DataSummary icon={<Rows3 size={18} />} label="列表状态" value="可查询" />
-        <DataSummary icon={<Filter size={18} />} label="数据范围" value="按权限展示" />
-      </section>
-      <Panel className="min-w-0 overflow-hidden p-0">
-        <div className="min-w-0 overflow-hidden">
-          {Override ? (
-            <Override
-              appType={appType}
-              defaultNode={defaultNode}
-              formUuid={formUuid}
-              kind="data-manage-list"
-            />
-          ) : (
-            defaultNode
-          )}
-        </div>
-      </Panel>
-    </div>
-  );
-}
-
-function DataSummary({
-  icon,
-  label,
-  value,
-}: {
-  icon: ReactNode;
-  label: string;
-  value: string;
-}) {
-  return (
-    <div className="rounded-2xl border border-white/70 bg-white/[0.82] p-4 shadow-[0_16px_45px_rgba(15,23,42,0.05)]">
-      <div className="flex items-center gap-2 text-sm text-slate-500">
-        <span className="text-blue-600">{icon}</span>
-        {label}
-      </div>
-      <div className="mt-2 truncate text-base font-semibold text-slate-950">{value}</div>
+    <div className="ox-default-data-route min-w-0 overflow-hidden">
+      {Override ? (
+        <Override
+          appType={appType}
+          defaultNode={defaultNode}
+          formUuid={formUuid}
+          kind="data-manage-list"
+        />
+      ) : (
+        defaultNode
+      )}
     </div>
   );
 }

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

@@ -5,12 +5,10 @@ import { StandardFormPage } from "openxiangda";
 import { normalizeRuntimeFormSchema } from "openxiangda/runtime";
 import { useOpenXiangda, useRuntimeAuth } from "openxiangda/runtime/react";
 
+import { useAdminPageMetaController } from "@/layouts/AdminShell";
 import {
-  PageHeader,
-  Panel,
   PrimaryButton,
   StatePage,
-  StatusPill,
 } from "@/shared/ui";
 import {
   defaultPageOverrides,
@@ -30,6 +28,7 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
   const { appType = "", formUuid = "", formInstId = "" } = useParams();
   const navigate = useNavigate();
   const runtime = useOpenXiangda();
+  const setAdminPageMeta = useAdminPageMetaController();
   const [schema, setSchema] = useState<any>(null);
   const [error, setError] = useState<PageError | null>(null);
 
@@ -87,6 +86,16 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
           ? "process-submit"
           : "form-submit";
   const pageCopy = useMemo(() => resolvePageCopy(overrideKind, mode), [mode, overrideKind]);
+  const pageTitle = useMemo(
+    () => resolvePageTitle(schema, pageCopy.title, overrideKind),
+    [overrideKind, pageCopy.title, schema],
+  );
+
+  useEffect(() => {
+    if (!schema) return undefined;
+    setAdminPageMeta({ title: pageTitle });
+    return () => setAdminPageMeta(null);
+  }, [pageTitle, schema, setAdminPageMeta]);
 
   if (error) return <DefaultErrorState error={error} />;
   if (!schema) return <DefaultLoadingState description="正在读取页面配置和当前用户权限。" title="正在加载" />;
@@ -110,31 +119,19 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
   );
 
   return (
-    <div className="min-w-0 space-y-5">
-      <PageHeader
-        description={pageCopy.description}
-        meta={
-          <>
-            <StatusPill tone={isProcessForm ? "amber" : "blue"}>{isProcessForm ? "流程办理" : "业务申请"}</StatusPill>
-            <StatusPill tone="emerald">权限已校验</StatusPill>
-          </>
-        }
-        title={pageCopy.title}
-      />
-      <Panel className="min-w-0 overflow-hidden">
-        {Override ? (
-          <Override
-            appType={appType}
-            defaultNode={defaultNode}
-            formInstId={formInstId}
-            formUuid={formUuid}
-            kind={overrideKind}
-            schema={schema}
-          />
-        ) : (
-          defaultNode
-        )}
-      </Panel>
+    <div className="ox-default-form-route min-w-0">
+      {Override ? (
+        <Override
+          appType={appType}
+          defaultNode={defaultNode}
+          formInstId={formInstId}
+          formUuid={formUuid}
+          kind={overrideKind}
+          schema={schema}
+        />
+      ) : (
+        defaultNode
+      )}
     </div>
   );
 }
@@ -206,6 +203,13 @@ function resolvePageCopy(kind: DefaultPageKind, mode: Mode) {
   };
 }
 
+function resolvePageTitle(schema: any, fallback: string, kind: DefaultPageKind) {
+  const title = String(schema?.formMeta?.title || schema?.title || schema?.template?.title || "").trim();
+  if (!title) return fallback;
+  if (kind === "form-detail" || kind === "process-detail") return `${title}详情`;
+  return title;
+}
+
 function createPageError(status: number | undefined, code: number | string | undefined, message: string): PageError {
   const normalizedCode = typeof code === "string" ? Number(code) : code;
   if (status === 401 || normalizedCode === 401) return { message, status, type: "unauthenticated" };

package/templates/openxiangda-react-spa/src/styles/index.css

@@ -59,3 +59,47 @@ a {
 .ox-scrollbar::-webkit-scrollbar-track {
   background: transparent;
 }
+
+.ox-admin-content :where(.sy-runtime-page) {
+  min-height: auto;
+  background: transparent;
+  color: inherit;
+}
+
+.ox-admin-content :where(.sy-runtime-page__content) {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+.ox-admin-content :where(.sy-submit-page) {
+  gap: 0;
+  min-height: auto;
+}
+
+.ox-admin-content :where(.sy-submit-card, .sy-detail-card) {
+  border: 1px solid rgb(226 232 240 / 0.86);
+  border-radius: 20px;
+  background: rgb(255 255 255 / 0.9);
+  box-shadow: 0 18px 55px rgb(15 23 42 / 0.06);
+}
+
+.ox-admin-content :where(.sy-submit-card) {
+  min-height: auto;
+}
+
+.ox-admin-content :where(.sy-detail-main) {
+  max-width: 100%;
+  padding: 0 0 32px;
+}
+
+.ox-admin-content :where(.sy-detail-header) {
+  display: none;
+}
+
+.ox-admin-content :where(.sy-detail-page) {
+  background: transparent;
+}
+
+.ox-default-data-route :where(.sy-data-management-list, .sy-runtime-page) {
+  min-width: 0;
+}