openxiangda 1.0.68 → 1.0.70

package/templates/openxiangda-react-spa/src/pages/admin/AdminDashboardPage.tsx

@@ -0,0 +1,193 @@
+import {
+  ArrowRight,
+  BarChart3,
+  ClipboardList,
+  Database,
+  FileText,
+  Inbox,
+  Sparkles,
+  Workflow,
+} from "lucide-react";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+
+import {
+  dataPath,
+  formPath,
+  processPath,
+  viewPath,
+} from "@/app/navigation";
+import {
+  dashboardHero,
+  dashboardMetrics,
+  quickActions,
+  recentActivities,
+  taskItems,
+  trendOverview,
+} from "@/app/starter-content";
+import { runtimeDefaultRoutes } from "@/runtime/default-routes";
+import {
+  ListItem,
+  MetricCard,
+  PageHeader,
+  Panel,
+  PrimaryButton,
+  SecondaryButton,
+  StatusPill,
+  TrendBars,
+} from "@/shared/ui";
+
+const metricIcons = [Inbox, FileText, Database, BarChart3];
+
+export function AdminDashboardPage() {
+  const { appType = "" } = useParams();
+  const actionPaths = useActionPaths(appType);
+
+  return (
+    <div className="min-w-0 space-y-5">
+      <PageHeader
+        actions={
+          <>
+            <SecondaryButton onClick={() => window.location.assign(actionPaths.data)}>
+              <Database size={17} />
+              查看数据
+            </SecondaryButton>
+            <PrimaryButton onClick={() => window.location.assign(actionPaths.form)}>
+              <FileText size={17} />
+              发起申请
+            </PrimaryButton>
+          </>
+        }
+        description={dashboardHero.description}
+        meta={
+          <>
+            <StatusPill tone="blue">业务办理</StatusPill>
+            <StatusPill tone="emerald">数据可查</StatusPill>
+            <StatusPill tone="amber">待办提醒</StatusPill>
+          </>
+        }
+        title={dashboardHero.title}
+      />
+
+      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {dashboardMetrics.map((metric, index) => (
+          <MetricCard
+            caption={metric.caption}
+            icon={metricIcons[index]}
+            key={metric.label}
+            label={metric.label}
+            tone={metric.tone}
+            value={metric.value}
+          />
+        ))}
+      </section>
+
+      <section className="grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)]">
+        <Panel
+          action={<StatusPill tone="emerald">持续更新</StatusPill>}
+          description={trendOverview.description}
+          title={trendOverview.title}
+        >
+          <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_240px]">
+            <TrendBars values={trendOverview.values} tone="blue" />
+            <div className="grid gap-3">
+              {trendOverview.summary.map(item => (
+                <div
+                  className="rounded-2xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200/70"
+                  key={item.label}
+                >
+                  <div className="text-xs text-slate-500">{item.label}</div>
+                  <div className="mt-1 text-lg font-semibold text-slate-950">{item.value}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Panel>
+
+        <Panel title="快捷入口" description="把高频业务放在这里，减少用户查找成本。">
+          <div className="space-y-3">
+            {quickActions.map(action => (
+              <button
+                className="block w-full text-left"
+                key={action.label}
+                onClick={() => window.location.assign(actionPaths[action.type])}
+                type="button"
+              >
+                <ListItem
+                  icon={resolveActionIcon(action.type)}
+                  tone={action.tone}
+                >
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="truncate text-sm font-semibold text-slate-950">{action.label}</div>
+                      <div className="mt-1 truncate text-xs text-slate-500">{action.desc}</div>
+                    </div>
+                    <ArrowRight className="shrink-0 text-slate-400" size={17} />
+                  </div>
+                </ListItem>
+              </button>
+            ))}
+          </div>
+        </Panel>
+      </section>
+
+      <section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
+        <Panel title="待办事项" description="优先处理即将到期和影响业务推进的事项。">
+          <div className="space-y-3">
+            {taskItems.map(item => (
+              <ListItem
+                icon={<ClipboardList size={17} />}
+                key={item.title}
+                tone={item.priority === "high" ? "rose" : item.priority === "medium" ? "amber" : "blue"}
+              >
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-semibold text-slate-950">{item.title}</div>
+                    <div className="mt-1 text-xs text-slate-500">
+                      {item.assignee} · {item.due}
+                    </div>
+                  </div>
+                  <StatusPill tone={item.priority === "high" ? "rose" : "amber"}>{item.status}</StatusPill>
+                </div>
+              </ListItem>
+            ))}
+          </div>
+        </Panel>
+
+        <Panel title="最近动态">
+          <div className="space-y-3">
+            {recentActivities.map((activity, index) => (
+              <ListItem
+                icon={<Sparkles size={17} />}
+                key={activity}
+                tone={index % 2 === 0 ? "emerald" : "violet"}
+              >
+                <div className="text-sm leading-6 text-slate-600">{activity}</div>
+              </ListItem>
+            ))}
+          </div>
+        </Panel>
+      </section>
+    </div>
+  );
+}
+
+function useActionPaths(appType: string) {
+  return useMemo(
+    () => ({
+      data: dataPath(appType, runtimeDefaultRoutes.dataManageList?.formUuid || runtimeDefaultRoutes.formSubmit?.formUuid),
+      form: formPath(appType, runtimeDefaultRoutes.formSubmit?.formUuid),
+      portal: viewPath(appType, "portal"),
+      process: processPath(appType, runtimeDefaultRoutes.processSubmit?.formUuid),
+      tasks: viewPath(appType, "admin/tasks"),
+    }),
+    [appType],
+  );
+}
+
+function resolveActionIcon(type: (typeof quickActions)[number]["type"]) {
+  if (type === "form") return <FileText size={17} />;
+  if (type === "tasks") return <Inbox size={17} />;
+  if (type === "data") return <Database size={17} />;
+  return <Workflow size={17} />;
+}

package/templates/openxiangda-react-spa/src/pages/admin/DataCenterPage.tsx

@@ -0,0 +1,96 @@
+import { ArrowRight, BarChart3, Database, Filter, RefreshCw, Search } from "lucide-react";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+
+import { dataPath } from "@/app/navigation";
+import { dataRows } from "@/app/starter-content";
+import { runtimeDefaultRoutes } from "@/runtime/default-routes";
+import {
+  ListItem,
+  MetricCard,
+  PageHeader,
+  Panel,
+  PrimaryButton,
+  SecondaryButton,
+  StatusPill,
+  TrendBars,
+} from "@/shared/ui";
+
+export function DataCenterPage() {
+  const { appType = "" } = useParams();
+  const dataFormUuid = runtimeDefaultRoutes.dataManageList?.formUuid || runtimeDefaultRoutes.formSubmit?.formUuid;
+  const listPath = useMemo(
+    () => dataPath(appType, dataFormUuid),
+    [appType, dataFormUuid],
+  );
+
+  return (
+    <div className="min-w-0 space-y-5">
+      <PageHeader
+        actions={
+          <>
+            <SecondaryButton>
+              <Filter size={17} />
+              筛选
+            </SecondaryButton>
+            {dataFormUuid ? (
+              <PrimaryButton onClick={() => window.location.assign(listPath)}>
+                <Database size={17} />
+                打开数据列表
+              </PrimaryButton>
+            ) : (
+              <StatusPill tone="amber">配置后可用</StatusPill>
+            )}
+          </>
+        }
+        description="汇总关键数据、业务趋势和常用查询入口，帮助团队快速掌握当前进展。"
+        meta={
+          <>
+            <StatusPill tone="emerald">权限数据</StatusPill>
+            <StatusPill tone="blue">业务台账</StatusPill>
+            <StatusPill tone="violet">趋势分析</StatusPill>
+          </>
+        }
+        title="数据中心"
+      />
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {dataRows.map((row, index) => (
+          <MetricCard
+            caption={row.trend}
+            icon={index === 0 ? BarChart3 : index === 1 ? RefreshCw : Database}
+            key={row.label}
+            label={row.label}
+            tone={index === 0 ? "blue" : index === 1 ? "amber" : "emerald"}
+            value={row.count}
+          />
+        ))}
+      </section>
+
+      <section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
+        <Panel title="业务趋势" description="用于呈现关键业务数据的变化节奏。">
+          <TrendBars values={[24, 36, 42, 39, 58, 64, 72, 81]} tone="emerald" />
+        </Panel>
+
+        <Panel title="常用查询">
+          <button
+            className="block w-full text-left disabled:cursor-not-allowed disabled:opacity-70"
+            disabled={!dataFormUuid}
+            onClick={() => dataFormUuid && window.location.assign(listPath)}
+            type="button"
+          >
+            <ListItem icon={<Search size={17} />} tone="blue">
+              <div className="flex items-center justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold text-slate-950">业务数据列表</div>
+                  <div className="mt-1 truncate text-xs text-slate-500">查看当前账号有权限访问的数据。</div>
+                </div>
+                <ArrowRight className="shrink-0 text-slate-400" size={17} />
+              </div>
+            </ListItem>
+          </button>
+        </Panel>
+      </section>
+    </div>
+  );
+}

package/templates/openxiangda-react-spa/src/pages/admin/ServiceCenterPage.tsx

@@ -0,0 +1,100 @@
+import { ArrowRight, Database, FileText, Home, Workflow } from "lucide-react";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+
+import {
+  dataPath,
+  formPath,
+  processPath,
+  viewPath,
+} from "@/app/navigation";
+import { serviceEntries } from "@/app/starter-content";
+import { runtimeDefaultRoutes } from "@/runtime/default-routes";
+import {
+  ListItem,
+  PageHeader,
+  Panel,
+  PrimaryButton,
+  StatusPill,
+} from "@/shared/ui";
+
+export function ServiceCenterPage() {
+  const { appType = "" } = useParams();
+  const paths = useMemo(
+    () => ({
+      data: dataPath(appType, runtimeDefaultRoutes.dataManageList?.formUuid || runtimeDefaultRoutes.formSubmit?.formUuid),
+      form: formPath(appType, runtimeDefaultRoutes.formSubmit?.formUuid),
+      portal: viewPath(appType, "portal"),
+      process: processPath(appType, runtimeDefaultRoutes.processSubmit?.formUuid),
+    }),
+    [appType],
+  );
+
+  return (
+    <div className="min-w-0 space-y-5">
+      <PageHeader
+        actions={
+          <PrimaryButton onClick={() => window.location.assign(paths.form)}>
+            <FileText size={17} />
+            发起申请
+          </PrimaryButton>
+        }
+        description="把常用表单、流程、数据和门户入口集中起来，形成清晰的业务办理路径。"
+        meta={
+          <>
+            <StatusPill tone="blue">申请登记</StatusPill>
+            <StatusPill tone="amber">流程办理</StatusPill>
+            <StatusPill tone="emerald">数据查询</StatusPill>
+          </>
+        }
+        title="服务入口"
+      />
+
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {serviceEntries.map(entry => (
+          <button
+            className="block text-left"
+            key={entry.label}
+            onClick={() => window.location.assign(paths[entry.type])}
+            type="button"
+          >
+            <div className="h-full rounded-2xl border border-white/70 bg-white/[0.86] p-5 shadow-[0_18px_55px_rgba(15,23,42,0.06)] ring-1 ring-slate-900/5 transition hover:-translate-y-0.5 hover:shadow-[0_24px_70px_rgba(15,23,42,0.10)]">
+              <div className="flex items-start justify-between gap-3">
+                <span className="grid h-11 w-11 place-items-center rounded-2xl bg-blue-50 text-blue-700">
+                  {resolveServiceIcon(entry.type)}
+                </span>
+                <ArrowRight className="text-slate-300" size={18} />
+              </div>
+              <div className="mt-5 text-base font-semibold text-slate-950">{entry.label}</div>
+              <div className="mt-2 text-sm leading-6 text-slate-500">{entry.desc}</div>
+            </div>
+          </button>
+        ))}
+      </section>
+
+      <Panel title="服务组织方式" description="不同服务按办理方式归类，用户可以更快找到需要发起或查询的业务。">
+        <div className="grid gap-3 lg:grid-cols-3">
+          <ListItem icon={<FileText size={17} />} tone="blue">
+            <div className="text-sm font-semibold text-slate-950">表单入口</div>
+            <div className="mt-1 text-xs leading-5 text-slate-500">适合标准登记、收集和提交场景。</div>
+          </ListItem>
+          <ListItem icon={<Workflow size={17} />} tone="amber">
+            <div className="text-sm font-semibold text-slate-950">流程入口</div>
+            <div className="mt-1 text-xs leading-5 text-slate-500">适合审批、办理、抄送和多角色协同。</div>
+          </ListItem>
+          <ListItem icon={<Database size={17} />} tone="emerald">
+            <div className="text-sm font-semibold text-slate-950">数据入口</div>
+            <div className="mt-1 text-xs leading-5 text-slate-500">适合查询台账、跟进状态和查看历史记录。</div>
+          </ListItem>
+        </div>
+      </Panel>
+    </div>
+  );
+}
+
+function resolveServiceIcon(type: (typeof serviceEntries)[number]["type"]) {
+  if (type === "form") return <FileText size={21} />;
+  if (type === "process") return <Workflow size={21} />;
+  if (type === "data") return <Database size={21} />;
+  return <Home size={21} />;
+}

package/templates/openxiangda-react-spa/src/pages/admin/TaskCenterPage.tsx

@@ -0,0 +1,135 @@
+import { CheckCircle2, Clock3, Filter, Inbox, RefreshCw } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { taskItems } from "@/app/starter-content";
+import {
+  ListItem,
+  PageHeader,
+  Panel,
+  SecondaryButton,
+  StatusPill,
+  cn,
+} from "@/shared/ui";
+
+type TaskFilter = "all" | "pending" | "done";
+
+const doneItems = [
+  {
+    assignee: "系统运营组",
+    due: "昨天",
+    priority: "low" as const,
+    status: "已完成",
+    title: "确认服务入口可访问",
+  },
+  {
+    assignee: "数据管理员",
+    due: "本周一",
+    priority: "low" as const,
+    status: "已完成",
+    title: "完成数据台账月度归档",
+  },
+];
+
+export function TaskCenterPage() {
+  const [filter, setFilter] = useState<TaskFilter>("all");
+  const tasks = useMemo(() => {
+    if (filter === "pending") return taskItems;
+    if (filter === "done") return doneItems;
+    return [...taskItems, ...doneItems];
+  }, [filter]);
+
+  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>
+          </>
+        }
+        description="集中查看当前账号需要处理、跟进和确认的业务事项。"
+        meta={
+          <>
+            <StatusPill tone="amber">待处理 {taskItems.length}</StatusPill>
+            <StatusPill tone="emerald">已完成 {doneItems.length}</StatusPill>
+          </>
+        }
+        title="待办中心"
+      />
+
+      <Panel>
+        <div className="mb-4 flex flex-wrap gap-2">
+          {[
+            { label: "全部", value: "all" as const },
+            { label: "待处理", value: "pending" as const },
+            { label: "已完成", value: "done" as const },
+          ].map(item => (
+            <button
+              className={cn(
+                "h-9 rounded-full px-4 text-sm font-semibold transition",
+                filter === item.value
+                  ? "bg-slate-950 text-white shadow-lg shadow-slate-300/60"
+                  : "bg-slate-100 text-slate-600 hover:bg-slate-200/80",
+              )}
+              key={item.value}
+              onClick={() => setFilter(item.value)}
+              type="button"
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="space-y-3">
+          {tasks.map(item => {
+            const done = item.status === "已完成";
+            return (
+              <ListItem
+                icon={done ? <CheckCircle2 size={17} /> : <Clock3 size={17} />}
+                key={`${item.title}-${item.status}`}
+                tone={done ? "emerald" : item.priority === "high" ? "rose" : "amber"}
+              >
+                <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-semibold text-slate-950">{item.title}</div>
+                    <div className="mt-1 flex flex-wrap gap-2 text-xs text-slate-500">
+                      <span>{item.assignee}</span>
+                      <span>·</span>
+                      <span>{item.due}</span>
+                    </div>
+                  </div>
+                  <StatusPill tone={done ? "emerald" : item.priority === "high" ? "rose" : "amber"}>
+                    {item.status}
+                  </StatusPill>
+                </div>
+              </ListItem>
+            );
+          })}
+        </div>
+      </Panel>
+
+      <Panel title="办理建议" description="优先处理高优先级和临近截止时间的事项，保持流程顺畅。">
+        <div className="grid gap-3 md:grid-cols-3">
+          <ListItem icon={<Inbox size={17} />} tone="blue">
+            <div className="text-sm font-semibold text-slate-950">统一入口</div>
+            <div className="mt-1 text-xs leading-5 text-slate-500">把审批、补充资料和确认事项集中到一个页面。</div>
+          </ListItem>
+          <ListItem icon={<Clock3 size={17} />} tone="amber">
+            <div className="text-sm font-semibold text-slate-950">按时推进</div>
+            <div className="mt-1 text-xs leading-5 text-slate-500">使用截止时间和状态提醒帮助用户判断优先级。</div>
+          </ListItem>
+          <ListItem icon={<CheckCircle2 size={17} />} tone="emerald">
+            <div className="text-sm font-semibold text-slate-950">闭环记录</div>
+            <div className="mt-1 text-xs leading-5 text-slate-500">完成事项保留处理痕迹，便于后续查询。</div>
+          </ListItem>
+        </div>
+      </Panel>
+    </div>
+  );
+}

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

@@ -4,13 +4,12 @@ import { useParams } from "react-router-dom";
 import { DataManagementList } from "openxiangda";
 
 import {
-  MacDiagnosticPanel,
-  MacPageHeader,
-  MacPanel,
-  MacPrimaryButton,
-  MacSecondaryButton,
-  MacStatusPill,
-} from "@/shared/mac-admin";
+  PageHeader,
+  Panel,
+  PrimaryButton,
+  SecondaryButton,
+  StatusPill,
+} from "@/shared/ui";
 import {
   defaultPageOverrides,
   resolveDefaultPageOverride,
@@ -31,40 +30,39 @@ export function DataRoutePage() {
 
   return (
     <div className="min-w-0 space-y-5">
-      <MacPageHeader
+      <PageHeader
         actions={
           <>
-            <MacSecondaryButton>
+            <SecondaryButton>
               <Filter size={17} />
               筛选
-            </MacSecondaryButton>
-            <MacSecondaryButton onClick={() => window.location.reload()}>
+            </SecondaryButton>
+            <SecondaryButton onClick={() => window.location.reload()}>
               <RefreshCw size={17} />
               刷新
-            </MacSecondaryButton>
-            <MacPrimaryButton onClick={() => window.location.assign(`/view/${appType}/admin/forms/${formUuid}/new`)}>
+            </SecondaryButton>
+            <PrimaryButton onClick={() => window.location.assign(`/view/${appType}/admin/forms/${formUuid}/new`)}>
               <FilePlus2 size={17} />
               新增数据
-            </MacPrimaryButton>
+            </PrimaryButton>
           </>
         }
-        description="使用 SDK 内置 DataManagementList 展示有权限的数据，新增和详情仍回到同一套 React SPA 默认页。"
-        eyebrow="Data Management"
+        description="查看、筛选和维护当前账号有权限访问的业务数据。"
         meta={
           <>
-            <MacStatusPill tone="blue">数据范围后端计算</MacStatusPill>
-            <MacStatusPill tone="emerald">字段权限生效</MacStatusPill>
-            <MacStatusPill tone="amber">详情页联动</MacStatusPill>
+            <StatusPill tone="blue">业务台账</StatusPill>
+            <StatusPill tone="emerald">权限数据</StatusPill>
+            <StatusPill tone="amber">详情联动</StatusPill>
           </>
         }
-        title="数据管理"
+        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="SDK 默认页" />
-        <DataSummary icon={<Filter size={18} />} label="权限过滤" value="后端兜底" />
+        <DataSummary icon={<Rows3 size={18} />} label="列表状态" value="可查询" />
+        <DataSummary icon={<Filter size={18} />} label="数据范围" value="按权限展示" />
       </section>
-      <MacPanel className="min-w-0 overflow-hidden p-0">
+      <Panel className="min-w-0 overflow-hidden p-0">
         <div className="min-w-0 overflow-hidden">
           {Override ? (
             <Override
@@ -77,8 +75,7 @@ export function DataRoutePage() {
             defaultNode
           )}
         </div>
-      </MacPanel>
-      <MacDiagnosticPanel data={{ appType, formUuid, kind: "data-manage-list" }} title="数据页上下文" />
+      </Panel>
     </div>
   );
 }