openxiangda 1.0.73 → 1.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "OpenXiangda CLI, workspace build tools, runtime SDK, and form components.",
   "private": false,
   "bin": {

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

@@ -25,6 +25,9 @@
     "antd": "^6.3.7",
     "antd-mobile": "^5.37.0",
     "dayjs": "^1.11.20",
+    "echarts": "^6.1.0",
+    "echarts-for-react": "^3.0.6",
+    "framer-motion": "^12.40.0",
     "lucide-react": "^0.468.0",
     "openxiangda": "latest",
     "react": "18.3.1",

package/templates/openxiangda-react-spa/src/app/navigation.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, SVGProps } from "react";
-import { Home } from "lucide-react";
+import { BriefcaseBusiness, Home } from "lucide-react";
 
 export type StarterNavigationItem = {
   code?: string;
@@ -13,6 +13,9 @@ export type StarterNavigationItem = {
 };
 
 export type StarterNavigationGroup = {
+  icon: ComponentType<
+    SVGProps<SVGSVGElement> & { size?: string | number; strokeWidth?: string | number }
+  >;
   title: string;
   items: StarterNavigationItem[];
 };
@@ -29,6 +32,7 @@ export function buildStarterAdminNavigation({
 }: BuildStarterNavigationOptions): StarterNavigationGroup[] {
   return [
     {
+      icon: BriefcaseBusiness,
       title: "应用工作台",
       items: [
         {

package/templates/openxiangda-react-spa/src/app/starter-content.ts

@@ -4,3 +4,141 @@ export const starterBrand = {
   name: "OpenXiangda",
   subtitle: "React SPA Starter",
 };
+
+export const dashboardContent = {
+  activities: {
+    actionText: "查看全部活动",
+    items: [
+      {
+        key: "release",
+        subtitle: "发布了新的业务页面与权限配置",
+        time: "10:18",
+        title: "应用版本已更新",
+        tone: "blue",
+      },
+      {
+        key: "form",
+        subtitle: "表单字段与校验规则已同步",
+        time: "09:42",
+        title: "业务表单已更新",
+        tone: "emerald",
+      },
+      {
+        key: "data",
+        subtitle: "数据视图完成自动刷新",
+        time: "昨天",
+        title: "数据看板已刷新",
+        tone: "amber",
+      },
+    ],
+    title: "近期活动",
+  },
+  aiReview: {
+    centerLabel: "总数",
+    centerValue: "1,248",
+    items: [
+      { color: "#22c55e", label: "通过", percent: "68.6%", value: 856 },
+      { color: "#f59e0b", label: "需人工复核", percent: "25.0%", value: 312 },
+      { color: "#ef4444", label: "不通过", percent: "6.4%", value: 80 },
+    ],
+    title: "智能校验识别（近 7 天）",
+  },
+  environment: {
+    actionText: "查看运行详情",
+    rows: [
+      { key: "env", label: "当前环境", status: "success", value: "生产环境" },
+      { key: "mode", label: "运行模式", value: "React SPA" },
+      { key: "version", label: "部署版本", status: "success", value: "v1.0" },
+      { key: "service", label: "服务状态", status: "success", value: "运行中" },
+    ],
+    title: "运行环境",
+  },
+  metrics: [
+    {
+      caption: "较昨日",
+      delta: "↑ 12.6%",
+      icon: "chart",
+      key: "page_visits",
+      label: "页面访问",
+      tone: "blue",
+      value: "24,680",
+    },
+    {
+      caption: "较昨日",
+      delta: "↑ 9.1%",
+      icon: "clipboard",
+      key: "pending_tasks",
+      label: "待办事项",
+      tone: "emerald",
+      value: "12",
+    },
+    {
+      caption: "较昨日",
+      delta: "↑ 8.3%",
+      icon: "file",
+      key: "form_submit",
+      label: "表单提交",
+      tone: "violet",
+      value: "1,248",
+    },
+    {
+      caption: "较昨日",
+      delta: "↑ 15.4%",
+      icon: "refresh",
+      key: "sync_jobs",
+      label: "数据视图刷新",
+      tone: "amber",
+      value: "356",
+    },
+  ],
+  todos: {
+    actionText: "查看全部（12）",
+    items: [
+      {
+        key: "expense",
+        meta: "申请人：李明 ｜ 金额：¥2,450.00",
+        time: "10:24",
+        title: "费用报销申请",
+        tone: "amber",
+      },
+      {
+        key: "purchase",
+        meta: "申请人：王芳 ｜ 金额：¥18,600.00",
+        time: "09:58",
+        title: "采购申请",
+        tone: "violet",
+      },
+      {
+        key: "leave",
+        meta: "申请人：张三 ｜ 类型：年假 2 天",
+        time: "昨天",
+        title: "请假申请",
+        tone: "blue",
+      },
+      {
+        key: "contract",
+        meta: "申请人：陈晨 ｜ 合同金额：¥120,000.00",
+        time: "昨天",
+        title: "合同审批",
+        tone: "violet",
+      },
+    ],
+    title: "待办审批",
+  },
+  trend: {
+    labels: ["05-09", "05-10", "05-11", "05-12", "05-13", "05-14", "05-15"],
+    series: [
+      {
+        color: "#3b82f6",
+        data: [2100, 2800, 3100, 4300, 3000, 2200, 2700],
+        name: "页面访问数",
+      },
+      {
+        color: "#22c55e",
+        data: [1100, 1500, 1600, 2100, 1600, 1200, 1500],
+        name: "独立访客数",
+      },
+    ],
+    title: "访问趋势",
+  },
+};

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);
@@ -109,39 +136,49 @@ export function AdminShell() {
         </div>
       </div>
 
-      <nav className={cn("ox-scrollbar min-h-0 flex-1 overflow-y-auto py-5", compact ? "px-2" : "space-y-7 px-3")}>
+      <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 key={group.title}>
+            <section className="min-w-0" key={group.title}>
               <button
                 aria-label={group.title}
                 className={cn(
-                  "flex h-10 w-full items-center rounded-lg text-[13px] font-semibold text-slate-800 transition hover:bg-slate-50",
-                  compact ? "justify-center px-0" : "justify-between px-2.5",
+                  "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(compact && "sr-only")}>{group.title}</span>
+                <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 ? (
-                  <Menu className="text-slate-500" size={16} strokeWidth={2} />
+                  null
                 ) : collapsed ? (
-                  <ChevronRight className="text-slate-500" size={16} strokeWidth={2} />
+                  <ChevronRight className="shrink-0 text-slate-500" size={15} strokeWidth={2} />
                 ) : (
-                  <ChevronDown className="text-slate-500" size={16} strokeWidth={2} />
+                  <ChevronDown className="shrink-0 text-slate-500" size={15} strokeWidth={2} />
                 )}
               </button>
               {!collapsed ? (
-                <div className={cn("mt-1 space-y-1", compact && "mt-2")}>
+                <div className={cn("mt-1 space-y-0.5", compact && "mt-1")}>
                   {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}
                         className={cn(
-                          "group relative flex h-10 items-center rounded-lg text-sm transition",
-                          compact ? "justify-center px-0" : "gap-3 px-3",
+                          "group relative flex h-9 items-center rounded-xl text-sm transition",
+                          compact ? "justify-center px-0" : "gap-2.5 px-3",
                           active
                             ? "bg-[#eef6ff] text-[#1677ff]"
                             : "text-slate-600 hover:bg-slate-50 hover:text-slate-900",
@@ -152,7 +189,7 @@ export function AdminShell() {
                       >
                         <span
                           className={cn(
-                            "absolute -left-3 top-1 h-8 w-1 rounded-r-full transition",
+                            "absolute -left-2.5 top-1 h-7 w-1 rounded-r-full transition",
                             active ? "bg-[#1677ff]" : "bg-transparent",
                             compact && "-left-2",
                           )}
@@ -163,7 +200,7 @@ export function AdminShell() {
                             active ? "text-[#1677ff]" : "text-slate-500 group-hover:text-slate-700",
                           )}
                         >
-                          <item.icon size={17} strokeWidth={2} />
+                          <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>
@@ -241,8 +278,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 +335,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 +480,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/pages/admin/AdminDashboardPage.tsx

@@ -1,27 +1,170 @@
-import { Home } from "lucide-react";
+import {
+  BarChart3,
+  CheckCircle2,
+  ClipboardList,
+  Clock3,
+  FileText,
+  RefreshCw,
+  Server,
+  ShieldCheck,
+  Sparkles,
+} from "lucide-react";
 
-import { PageHeader, Panel, StatusPill } from "@/shared/ui";
+import { dashboardContent } from "@/app/starter-content";
+import {
+  ActivityItem,
+  ChartPanel,
+  DashboardMetricCard,
+  DonutChart,
+  EnvironmentRow,
+  TodoItem,
+  TrendLineChart,
+  type AppTone,
+  type DonutItem,
+  type TrendSeries,
+} from "@/shared/ui";
+
+type DashboardIconKey = "chart" | "clipboard" | "file" | "refresh" | "shield" | "server";
+
+const metricIcons = {
+  chart: BarChart3,
+  clipboard: ClipboardList,
+  file: FileText,
+  refresh: RefreshCw,
+  server: Server,
+  shield: ShieldCheck,
+} satisfies Record<DashboardIconKey, typeof BarChart3>;
+
+const itemIcons = {
+  amber: Clock3,
+  blue: CheckCircle2,
+  emerald: ShieldCheck,
+  rose: Sparkles,
+  slate: Server,
+  violet: ClipboardList,
+} satisfies Record<AppTone, typeof CheckCircle2>;
 
 export function AdminDashboardPage() {
   return (
-    <div className="min-w-0 space-y-5">
-      <PageHeader
-        description="这是应用默认首页。你可以在这里接入真实业务模块、数据看板或常用操作。"
-        meta={<StatusPill tone="blue">默认首页</StatusPill>}
-        title="首页"
-      />
-
-      <Panel className="min-h-[420px]">
-        <div className="flex min-h-[360px] flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-white/60 px-6 text-center">
-          <div className="grid h-14 w-14 place-items-center rounded-2xl bg-blue-50 text-blue-700 ring-1 ring-blue-100">
-            <Home size={24} />
+    <div className="min-w-0 space-y-4">
+      <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        {dashboardContent.metrics.map(metric => {
+          const Icon = metricIcons[(metric.icon as DashboardIconKey) || "chart"] ?? BarChart3;
+          return (
+            <DashboardMetricCard
+              caption={metric.caption}
+              delta={metric.delta}
+              icon={Icon}
+              key={metric.key}
+              label={metric.label}
+              tone={metric.tone as AppTone}
+              value={metric.value}
+            />
+          );
+        })}
+      </section>
+
+      <section className="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(360px,0.85fr)]">
+        <ChartPanel
+          action={<span className="rounded-lg border border-slate-200 px-2.5 py-1 text-xs text-slate-500">近 7 天</span>}
+          title={dashboardContent.trend.title}
+        >
+          <TrendLineChart
+            labels={[...dashboardContent.trend.labels]}
+            series={dashboardContent.trend.series.map(item => ({ ...item })) as TrendSeries[]}
+          />
+        </ChartPanel>
+
+        <ChartPanel
+          action={<span className="text-xs font-medium text-blue-600">{dashboardContent.todos.actionText}</span>}
+          title={dashboardContent.todos.title}
+        >
+          <div className="space-y-1">
+            {dashboardContent.todos.items.map(item => {
+              const tone = item.tone as AppTone;
+              const Icon = itemIcons[tone] ?? ClipboardList;
+              return (
+                <TodoItem
+                  icon={<Icon size={15} strokeWidth={2.2} />}
+                  key={item.key}
+                  meta={item.meta}
+                  time={item.time}
+                  title={item.title}
+                  tone={tone}
+                />
+              );
+            })}
+          </div>
+        </ChartPanel>
+      </section>
+
+      <section className="grid gap-4 xl:grid-cols-[minmax(280px,0.8fr)_minmax(0,1fr)_minmax(300px,0.9fr)]">
+        <ChartPanel title={dashboardContent.aiReview.title}>
+          <div className="grid gap-3 md:grid-cols-[minmax(180px,0.85fr)_minmax(0,1fr)] xl:grid-cols-1 2xl:grid-cols-[minmax(180px,0.85fr)_minmax(0,1fr)]">
+            <DonutChart
+              centerLabel={dashboardContent.aiReview.centerLabel}
+              centerValue={dashboardContent.aiReview.centerValue}
+              items={dashboardContent.aiReview.items.map(({ color, label, value }) => ({
+                color,
+                label,
+                value,
+              })) as DonutItem[]}
+            />
+            <div className="flex flex-col justify-center space-y-2">
+              {dashboardContent.aiReview.items.map(item => (
+                <div className="flex items-center justify-between gap-3 text-sm" key={item.label}>
+                  <span className="flex min-w-0 items-center gap-2 text-slate-600">
+                    <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: item.color }} />
+                    <span className="truncate">{item.label}</span>
+                  </span>
+                  <span className="shrink-0 font-medium text-slate-900">
+                    {item.value}
+                    <span className="ml-2 text-xs font-normal text-slate-500">{item.percent}</span>
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </ChartPanel>
+
+        <ChartPanel
+          action={<span className="text-xs font-medium text-blue-600">{dashboardContent.activities.actionText}</span>}
+          title={dashboardContent.activities.title}
+        >
+          <div className="space-y-1">
+            {dashboardContent.activities.items.map(item => {
+              const tone = item.tone as AppTone;
+              const Icon = itemIcons[tone] ?? Sparkles;
+              return (
+                <ActivityItem
+                  icon={<Icon size={15} strokeWidth={2.2} />}
+                  key={item.key}
+                  subtitle={item.subtitle}
+                  time={item.time}
+                  title={item.title}
+                  tone={tone}
+                />
+              );
+            })}
+          </div>
+        </ChartPanel>
+
+        <ChartPanel
+          action={<span className="text-xs font-medium text-blue-600">{dashboardContent.environment.actionText}</span>}
+          title={dashboardContent.environment.title}
+        >
+          <div className="rounded-xl border border-slate-100 px-3">
+            {dashboardContent.environment.rows.map(row => (
+              <EnvironmentRow
+                key={row.key}
+                label={row.label}
+                status={row.status as "default" | "success" | "warning" | undefined}
+                value={row.value}
+              />
+            ))}
           </div>
-          <h2 className="mt-5 text-lg font-semibold text-slate-950">默认首页</h2>
-          <p className="mt-2 max-w-md text-sm leading-6 text-slate-500">
-            保留应用框架和登录账号信息，页面内容由后续业务开发自行接入。
-          </p>
-        </div>
-      </Panel>
+        </ChartPanel>
+      </section>
     </div>
   );
 }

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/shared/mac-admin.tsx

@@ -1,3 +1,6 @@
+import ReactECharts from "echarts-for-react";
+import type { EChartsOption } from "echarts";
+import { motion, useReducedMotion } from "framer-motion";
 import type { ComponentType, ReactNode } from "react";
 
 export type MacTone =
@@ -57,6 +60,27 @@ export function cn(...values: Array<string | false | null | undefined>) {
   return values.filter(Boolean).join(" ");
 }
 
+function useEntranceMotion() {
+  const reducedMotion = useReducedMotion();
+  if (reducedMotion) return {};
+  return {
+    animate: { opacity: 1, y: 0 },
+    initial: { opacity: 0, y: 10 },
+    transition: { duration: 0.32, ease: "easeOut" as const },
+  };
+}
+
+function MacChartEmpty({ height }: { height: number }) {
+  return (
+    <div
+      className="grid place-items-center rounded-lg bg-slate-50 text-sm text-slate-400"
+      style={{ height }}
+    >
+      暂无图表数据
+    </div>
+  );
+}
+
 export function MacPageHeader({
   actions,
   description,
@@ -157,6 +181,301 @@ export function MacMetricCard({
   );
 }
 
+export function MacDashboardMetricCard({
+  caption,
+  delta,
+  icon: Icon,
+  label,
+  tone = "blue",
+  value,
+}: {
+  caption?: ReactNode;
+  delta?: ReactNode;
+  icon?: ComponentType<{
+    className?: string;
+    size?: string | number;
+    strokeWidth?: string | number;
+  }>;
+  label: ReactNode;
+  tone?: MacTone;
+  value: ReactNode;
+}) {
+  const classes = toneClasses[tone];
+  const motionProps = useEntranceMotion();
+  return (
+    <motion.div
+      {...motionProps}
+      className="rounded-xl border border-slate-200/70 bg-white p-4 shadow-[0_10px_28px_rgba(15,23,42,0.045)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_42px_rgba(15,23,42,0.08)]"
+    >
+      <div className="flex items-start gap-3">
+        <div className={cn("grid h-11 w-11 shrink-0 place-items-center rounded-xl", classes.soft)}>
+          {Icon ? <Icon size={21} strokeWidth={2.2} /> : <span className={cn("h-2.5 w-2.5 rounded-full", classes.dot)} />}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm leading-5 text-slate-500">{label}</div>
+          <div className="mt-1 text-2xl font-semibold leading-8 text-slate-950">{value}</div>
+          <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
+            {caption ? <span>{caption}</span> : null}
+            {delta ? <span className={classes.text}>{delta}</span> : null}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export function MacChartPanel({
+  action,
+  children,
+  className,
+  title,
+}: {
+  action?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  title: ReactNode;
+}) {
+  const motionProps = useEntranceMotion();
+  return (
+    <motion.section
+      {...motionProps}
+      className={cn(
+        "min-w-0 rounded-xl border border-slate-200/70 bg-white p-4 shadow-[0_12px_34px_rgba(15,23,42,0.045)]",
+        className,
+      )}
+    >
+      <div className="mb-3 flex min-w-0 items-center justify-between gap-3">
+        <h2 className="truncate text-sm font-semibold text-slate-950">{title}</h2>
+        {action ? <div className="shrink-0">{action}</div> : null}
+      </div>
+      {children}
+    </motion.section>
+  );
+}
+
+export type MacTrendSeries = {
+  color: string;
+  data: number[];
+  name: string;
+};
+
+export function MacTrendLineChart({
+  height = 286,
+  labels,
+  series,
+}: {
+  height?: number;
+  labels: string[];
+  series: MacTrendSeries[];
+}) {
+  if (!labels.length || !series.length) return <MacChartEmpty height={height} />;
+
+  const option: EChartsOption = {
+    color: series.map(item => item.color),
+    grid: { bottom: 34, left: 44, right: 18, top: 34 },
+    legend: {
+      icon: "circle",
+      itemHeight: 7,
+      itemWidth: 7,
+      left: 0,
+      textStyle: { color: "#64748b", fontSize: 12 },
+      top: 0,
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(15, 23, 42, 0.92)",
+      borderColor: "transparent",
+      textStyle: { color: "#fff" },
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: labels,
+      axisLine: { lineStyle: { color: "#e2e8f0" } },
+      axisTick: { show: false },
+      axisLabel: { color: "#64748b", fontSize: 11 },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: { color: "#64748b", fontSize: 11 },
+      splitLine: { lineStyle: { color: "#eef2f7" } },
+    },
+    series: series.map(item => ({
+      name: item.name,
+      type: "line",
+      smooth: true,
+      symbol: "circle",
+      symbolSize: 7,
+      data: item.data,
+      lineStyle: { width: 3 },
+      areaStyle: { opacity: 0.08 },
+    })),
+  };
+
+  return (
+    <ReactECharts
+      lazyUpdate
+      notMerge
+      option={option}
+      style={{ height, width: "100%" }}
+    />
+  );
+}
+
+export type MacDonutItem = {
+  color: string;
+  label: string;
+  value: number;
+};
+
+export function MacDonutChart({
+  centerLabel,
+  centerValue,
+  height = 220,
+  items,
+}: {
+  centerLabel: string;
+  centerValue: string;
+  height?: number;
+  items: MacDonutItem[];
+}) {
+  if (!items.length) return <MacChartEmpty height={height} />;
+
+  const option: EChartsOption = {
+    color: items.map(item => item.color),
+    graphic: [
+      {
+        type: "text",
+        left: "center",
+        top: "42%",
+        style: {
+          fill: "#0f172a",
+          fontSize: 24,
+          fontWeight: 700,
+          text: centerValue,
+          align: "center",
+        },
+      },
+      {
+        type: "text",
+        left: "center",
+        top: "55%",
+        style: {
+          fill: "#64748b",
+          fontSize: 12,
+          text: centerLabel,
+          align: "center",
+        },
+      },
+    ],
+    series: [
+      {
+        type: "pie",
+        radius: ["62%", "82%"],
+        center: ["50%", "50%"],
+        avoidLabelOverlap: true,
+        label: { show: false },
+        labelLine: { show: false },
+        data: items.map(item => ({ name: item.label, value: item.value })),
+      },
+    ],
+    tooltip: {
+      trigger: "item",
+      backgroundColor: "rgba(15, 23, 42, 0.92)",
+      borderColor: "transparent",
+      textStyle: { color: "#fff" },
+    },
+  };
+
+  return (
+    <ReactECharts
+      lazyUpdate
+      notMerge
+      option={option}
+      style={{ height, width: "100%" }}
+    />
+  );
+}
+
+export function MacTodoItem({
+  icon,
+  meta,
+  time,
+  title,
+  tone = "blue",
+}: {
+  icon?: ReactNode;
+  meta?: ReactNode;
+  time?: ReactNode;
+  title: ReactNode;
+  tone?: MacTone;
+}) {
+  const classes = toneClasses[tone];
+  return (
+    <div className="flex min-w-0 items-center gap-3 rounded-lg px-2 py-2 transition hover:bg-slate-50">
+      <div className={cn("grid h-8 w-8 shrink-0 place-items-center rounded-lg", classes.soft)}>
+        {icon || <span className={cn("h-2 w-2 rounded-full", classes.dot)} />}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-semibold text-slate-950">{title}</div>
+        {meta ? <div className="mt-0.5 truncate text-xs text-slate-500">{meta}</div> : null}
+      </div>
+      {time ? <div className="shrink-0 text-xs text-slate-500">{time}</div> : null}
+    </div>
+  );
+}
+
+export function MacActivityItem({
+  icon,
+  subtitle,
+  time,
+  title,
+  tone = "blue",
+}: {
+  icon?: ReactNode;
+  subtitle?: ReactNode;
+  time?: ReactNode;
+  title: ReactNode;
+  tone?: MacTone;
+}) {
+  const classes = toneClasses[tone];
+  return (
+    <div className="flex min-w-0 items-start gap-3 py-2">
+      <div className={cn("mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-full", classes.soft)}>
+        {icon || <span className={cn("h-2 w-2 rounded-full", classes.dot)} />}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-semibold text-slate-950">{title}</div>
+        {subtitle ? <div className="mt-0.5 truncate text-xs text-slate-500">{subtitle}</div> : null}
+      </div>
+      {time ? <div className="shrink-0 text-xs text-slate-500">{time}</div> : null}
+    </div>
+  );
+}
+
+export function MacEnvironmentRow({
+  label,
+  status,
+  value,
+}: {
+  label: ReactNode;
+  status?: "success" | "warning" | "default";
+  value: ReactNode;
+}) {
+  const statusClass =
+    status === "success"
+      ? "text-emerald-600"
+      : status === "warning"
+        ? "text-amber-600"
+        : "text-slate-600";
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3 border-b border-slate-100 py-2.5 last:border-0">
+      <div className="truncate text-sm text-slate-500">{label}</div>
+      <div className={cn("shrink-0 truncate text-right text-sm font-semibold", statusClass)}>{value}</div>
+    </div>
+  );
+}
+
 export function MacStatusPill({
   children,
   tone = "slate",

package/templates/openxiangda-react-spa/src/shared/ui.tsx

@@ -1,4 +1,9 @@
 export {
+  MacActivityItem as ActivityItem,
+  MacChartPanel as ChartPanel,
+  MacDashboardMetricCard as DashboardMetricCard,
+  MacDonutChart as DonutChart,
+  MacEnvironmentRow as EnvironmentRow,
   MacListItem as ListItem,
   MacMetricCard as MetricCard,
   MacPageHeader as PageHeader,
@@ -7,7 +12,11 @@ export {
   MacSecondaryButton as SecondaryButton,
   MacStatePage as StatePage,
   MacStatusPill as StatusPill,
+  MacTodoItem as TodoItem,
+  MacTrendLineChart as TrendLineChart,
   MacTrendBars as TrendBars,
   cn,
+  type MacDonutItem as DonutItem,
   type MacTone as AppTone,
+  type MacTrendSeries as TrendSeries,
 } from "./mac-admin";

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;
+}