openxiangda 1.0.264 → 2.0.0-alpha.2

package/templates/openxiangda-react-spa/src/shared/mac-admin.tsx

@@ -1,651 +0,0 @@
-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 =
-  | "blue"
-  | "emerald"
-  | "amber"
-  | "rose"
-  | "violet"
-  | "slate";
-
-export interface MacAction {
-  label: string;
-  onClick?: () => void;
-  href?: string;
-}
-
-const toneClasses: Record<MacTone, { soft: string; text: string; dot: string; ring: string }> = {
-  amber: {
-    dot: "bg-amber-500",
-    ring: "ring-amber-200",
-    soft: "bg-amber-50 text-amber-700",
-    text: "text-amber-700",
-  },
-  blue: {
-    dot: "bg-blue-500",
-    ring: "ring-blue-200",
-    soft: "bg-blue-50 text-blue-700",
-    text: "text-blue-700",
-  },
-  emerald: {
-    dot: "bg-emerald-500",
-    ring: "ring-emerald-200",
-    soft: "bg-emerald-50 text-emerald-700",
-    text: "text-emerald-700",
-  },
-  rose: {
-    dot: "bg-rose-500",
-    ring: "ring-rose-200",
-    soft: "bg-rose-50 text-rose-700",
-    text: "text-rose-700",
-  },
-  slate: {
-    dot: "bg-slate-500",
-    ring: "ring-slate-200",
-    soft: "bg-slate-100 text-slate-700",
-    text: "text-slate-700",
-  },
-  violet: {
-    dot: "bg-violet-500",
-    ring: "ring-violet-200",
-    soft: "bg-violet-50 text-violet-700",
-    text: "text-violet-700",
-  },
-};
-
-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,
-  eyebrow,
-  meta,
-  title,
-}: {
-  actions?: ReactNode;
-  description?: ReactNode;
-  eyebrow?: ReactNode;
-  meta?: ReactNode;
-  title: ReactNode;
-}) {
-  return (
-    <section className="relative overflow-hidden rounded-2xl border border-white/70 bg-white/[0.85] p-5 shadow-[0_18px_60px_rgba(15,23,42,0.07)] ring-1 ring-slate-900/5 backdrop-blur">
-      <div className="absolute inset-x-0 top-0 h-1 bg-[linear-gradient(90deg,#4f46e5,#06b6d4,#22c55e,#f59e0b)]" />
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div className="min-w-0">
-          {eyebrow ? (
-            <div className="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">
-              {eyebrow}
-            </div>
-          ) : null}
-          <h1 className="text-2xl font-semibold text-slate-950">{title}</h1>
-          {description ? (
-            <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-600">{description}</p>
-          ) : null}
-          {meta ? <div className="mt-4 flex flex-wrap gap-2">{meta}</div> : null}
-        </div>
-        {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
-      </div>
-    </section>
-  );
-}
-
-export function MacPanel({
-  children,
-  className,
-  title,
-  description,
-  action,
-}: {
-  children: ReactNode;
-  className?: string;
-  title?: ReactNode;
-  description?: ReactNode;
-  action?: ReactNode;
-}) {
-  return (
-    <section
-      className={cn(
-        "rounded-2xl border border-white/70 bg-white/[0.88] p-5 shadow-[0_18px_55px_rgba(15,23,42,0.06)] ring-1 ring-slate-900/5 backdrop-blur",
-        className,
-      )}
-    >
-      {title || description || action ? (
-        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="min-w-0">
-            {title ? <h2 className="text-base font-semibold text-slate-950">{title}</h2> : null}
-            {description ? (
-              <p className="mt-1 text-sm leading-6 text-slate-500">{description}</p>
-            ) : null}
-          </div>
-          {action ? <div className="shrink-0">{action}</div> : null}
-        </div>
-      ) : null}
-      {children}
-    </section>
-  );
-}
-
-export function MacMetricCard({
-  caption,
-  icon: Icon,
-  label,
-  tone = "blue",
-  value,
-}: {
-  caption?: ReactNode;
-  icon?: ComponentType<{ size?: string | number; className?: string }>;
-  label: ReactNode;
-  tone?: MacTone;
-  value: ReactNode;
-}) {
-  const classes = toneClasses[tone];
-  return (
-    <div className="group rounded-2xl border border-white/70 bg-white/[0.82] p-4 shadow-[0_16px_45px_rgba(15,23,42,0.05)] ring-1 ring-slate-900/5 transition hover:-translate-y-0.5 hover:shadow-[0_22px_60px_rgba(15,23,42,0.09)]">
-      <div className="flex items-start justify-between gap-3">
-        <div className={cn("grid h-10 w-10 place-items-center rounded-xl", classes.soft)}>
-          {Icon ? <Icon size={20} /> : <span className={cn("h-2.5 w-2.5 rounded-full", classes.dot)} />}
-        </div>
-        <span className={cn("h-2 w-2 rounded-full ring-4", classes.dot, classes.ring)} />
-      </div>
-      <div className="mt-4 text-sm text-slate-500">{label}</div>
-      <div className="mt-1 text-2xl font-semibold text-slate-950">{value}</div>
-      {caption ? <div className="mt-3 text-xs leading-5 text-slate-500">{caption}</div> : null}
-    </div>
-  );
-}
-
-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",
-}: {
-  children: ReactNode;
-  tone?: MacTone;
-}) {
-  const classes = toneClasses[tone];
-  return (
-    <span className={cn("inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium", classes.soft)}>
-      <span className={cn("h-1.5 w-1.5 rounded-full", classes.dot)} />
-      {children}
-    </span>
-  );
-}
-
-export function MacStatePage({
-  actions,
-  description,
-  fullScreen = false,
-  icon,
-  status,
-  title,
-}: {
-  actions?: ReactNode;
-  description?: ReactNode;
-  fullScreen?: boolean;
-  icon?: ReactNode;
-  status?: ReactNode;
-  title: ReactNode;
-}) {
-  return (
-    <main
-      className={cn(
-        "grid place-items-center bg-slate-100/80 px-5",
-        fullScreen ? "min-h-screen" : "min-h-[460px]",
-      )}
-    >
-      <section className="w-full max-w-lg overflow-hidden rounded-3xl border border-white/70 bg-white/90 p-7 text-center shadow-[0_24px_80px_rgba(15,23,42,0.10)] ring-1 ring-slate-900/5 backdrop-blur">
-        {status ? <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">{status}</div> : null}
-        <div className="mx-auto mt-4 grid h-14 w-14 place-items-center rounded-2xl bg-slate-950 text-white shadow-lg shadow-slate-300/60">
-          {icon || "OX"}
-        </div>
-        <h1 className="mt-5 text-2xl font-semibold text-slate-950">{title}</h1>
-        {description ? (
-          <p className="mx-auto mt-3 max-w-sm text-sm leading-6 text-slate-600">{description}</p>
-        ) : null}
-        {actions ? <div className="mt-6 flex flex-wrap items-center justify-center gap-3">{actions}</div> : null}
-      </section>
-    </main>
-  );
-}
-
-export function MacPrimaryButton({
-  children,
-  className,
-  onClick,
-  type = "button",
-}: {
-  children: ReactNode;
-  className?: string;
-  onClick?: () => void;
-  type?: "button" | "submit";
-}) {
-  return (
-    <button
-      className={cn(
-        "inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-slate-950 px-4 text-sm font-semibold text-white shadow-lg shadow-slate-300/60 transition hover:bg-slate-800",
-        className,
-      )}
-      onClick={onClick}
-      type={type}
-    >
-      {children}
-    </button>
-  );
-}
-
-export function MacSecondaryButton({
-  children,
-  className,
-  onClick,
-  type = "button",
-}: {
-  children: ReactNode;
-  className?: string;
-  onClick?: () => void;
-  type?: "button" | "submit";
-}) {
-  return (
-    <button
-      className={cn(
-        "inline-flex h-10 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50",
-        className,
-      )}
-      onClick={onClick}
-      type={type}
-    >
-      {children}
-    </button>
-  );
-}
-
-export function MacListItem({
-  children,
-  icon,
-  tone = "blue",
-}: {
-  children: ReactNode;
-  icon?: ReactNode;
-  tone?: MacTone;
-}) {
-  const classes = toneClasses[tone];
-  return (
-    <div className="flex gap-3 rounded-2xl border border-slate-200/70 bg-white/[0.72] p-3">
-      <div className={cn("grid h-9 w-9 shrink-0 place-items-center rounded-xl", classes.soft)}>
-        {icon || <span className={cn("h-2 w-2 rounded-full", classes.dot)} />}
-      </div>
-      <div className="min-w-0 flex-1">{children}</div>
-    </div>
-  );
-}
-
-export function MacDiagnosticPanel({
-  data,
-  title = "详细信息",
-}: {
-  data: unknown;
-  title?: string;
-}) {
-  return (
-    <details className="group rounded-2xl border border-slate-200/80 bg-white/70 p-4">
-      <summary className="cursor-pointer select-none text-sm font-semibold text-slate-700">
-        {title}
-        <span className="ml-2 text-xs font-normal text-slate-400">展开查看完整内容</span>
-      </summary>
-      <pre className="ox-scrollbar mt-4 max-h-96 overflow-auto rounded-2xl bg-slate-950 p-4 text-xs leading-6 text-slate-100">
-        {JSON.stringify(data, null, 2)}
-      </pre>
-    </details>
-  );
-}
-
-export function MacTrendBars({
-  values,
-  tone = "blue",
-}: {
-  values: number[];
-  tone?: MacTone;
-}) {
-  const color =
-    tone === "emerald"
-      ? "bg-emerald-500"
-      : tone === "amber"
-        ? "bg-amber-500"
-        : tone === "rose"
-          ? "bg-rose-500"
-          : tone === "violet"
-            ? "bg-violet-500"
-            : "bg-blue-500";
-  const max = Math.max(...values, 1);
-  return (
-    <div className="flex h-32 items-end gap-2 rounded-2xl bg-slate-100/70 p-4">
-      {values.map((value, index) => (
-        <div
-          className={cn("min-w-0 flex-1 rounded-t-lg opacity-80", color)}
-          key={`${value}-${index}`}
-          style={{ height: `${Math.max(12, (value / max) * 100)}%` }}
-        />
-      ))}
-    </div>
-  );
-}

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

@@ -1,22 +0,0 @@
-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,
-  MacPanel as Panel,
-  MacPrimaryButton as PrimaryButton,
-  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";