openxiangda 1.0.74 → 1.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda",
-  "version": "1.0.74",
+  "version": "1.0.76",
   "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

@@ -136,68 +136,91 @@ 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}
+                aria-expanded={!collapsed}
                 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} />
-                ) : collapsed ? (
-                  <ChevronRight className="text-slate-500" size={16} strokeWidth={2} />
+                  null
                 ) : (
-                  <ChevronDown className="text-slate-500" size={16} strokeWidth={2} />
+                  <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>
-              {!collapsed ? (
-                <div className={cn("mt-1 space-y-1", compact && "mt-2")}>
-                  {group.items.map(item => {
-                    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",
-                          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-3 top-1 h-8 w-1 rounded-r-full transition",
-                            active ? "bg-[#1677ff]" : "bg-transparent",
-                            compact && "-left-2",
-                          )}
-                        />
-                        <span
+              <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(
-                            "grid h-5 w-5 shrink-0 place-items-center transition",
-                            active ? "text-[#1677ff]" : "text-slate-500 group-hover:text-slate-700",
+                            "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}
                         >
-                          <item.icon size={17} strokeWidth={2} />
-                        </span>
-                        <span className={cn("min-w-0 flex-1 truncate font-medium", compact && "sr-only")}>{item.name}</span>
-                      </Link>
-                    );
-                  })}
+                          <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>
-              ) : null}
+              </div>
             </section>
           );
         })}

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/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";