openxiangda 1.0.39 → 1.0.41

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/shared/components/admin-ui-templates/DashboardPrimitives.tsx

@@ -0,0 +1,832 @@
+import {
+  AlertOutlined,
+  AppstoreOutlined,
+  AuditOutlined,
+  BarChartOutlined,
+  BellOutlined,
+  CheckCircleOutlined,
+  CloudServerOutlined,
+  DatabaseOutlined,
+  DownloadOutlined,
+  FileDoneOutlined,
+  FileTextOutlined,
+  HomeOutlined,
+  InboxOutlined,
+  LineChartOutlined,
+  LogoutOutlined,
+  MenuFoldOutlined,
+  PlusOutlined,
+  ProductOutlined,
+  ProjectOutlined,
+  QuestionCircleOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  ShopOutlined,
+  ShoppingCartOutlined,
+  SolutionOutlined,
+  TeamOutlined,
+  ThunderboltOutlined,
+  ToolOutlined,
+  UploadOutlined,
+  UserOutlined,
+  WalletOutlined,
+} from "@ant-design/icons";
+import ReactECharts from "echarts-for-react";
+import {
+  Avatar,
+  Badge,
+  Button,
+  DatePicker,
+  Descriptions,
+  Dropdown,
+  Drawer,
+  Form,
+  Input,
+  Progress,
+  Select,
+  Space,
+  Tag,
+} from "antd";
+import type { MenuProps } from "antd";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+
+import type {
+  ActivityItem,
+  DrawerMode,
+  IconName,
+  MetricItem,
+  NavItem,
+  NoticeItem,
+  QuickAction,
+  RankingItem,
+  TaskProgressItem,
+  TemplateTone,
+  TodoItem,
+  WorkOrderPriority,
+  WorkOrderRecord,
+  WorkOrderStatus,
+} from "./types";
+
+const iconMap: Record<IconName, ReactNode> = {
+  home: <HomeOutlined />,
+  analytics: <LineChartOutlined />,
+  business: <ProjectOutlined />,
+  customer: <TeamOutlined />,
+  order: <ShoppingCartOutlined />,
+  product: <ProductOutlined />,
+  finance: <WalletOutlined />,
+  supply: <CloudServerOutlined />,
+  hr: <SolutionOutlined />,
+  system: <SettingOutlined />,
+  app: <AppstoreOutlined />,
+  ticket: <FileTextOutlined />,
+  task: <CheckCircleOutlined />,
+  monitor: <BarChartOutlined />,
+  alert: <AlertOutlined />,
+  device: <DatabaseOutlined />,
+  report: <FileDoneOutlined />,
+  setting: <SettingOutlined />,
+  import: <UploadOutlined />,
+  export: <DownloadOutlined />,
+  help: <QuestionCircleOutlined />,
+  user: <UserOutlined />,
+  cart: <ShoppingCartOutlined />,
+  approval: <AuditOutlined />,
+  contract: <InboxOutlined />,
+  dashboard: <ThunderboltOutlined />,
+};
+
+const toneHex: Record<TemplateTone, string> = {
+  blue: "#3b82f6",
+  cyan: "#06b6d4",
+  green: "#16a34a",
+  mint: "#10b981",
+  purple: "#7c3aed",
+  orange: "#f97316",
+  red: "#ef4444",
+  slate: "#64748b",
+};
+
+const toneGradient: Record<TemplateTone, string> = {
+  blue: "linear-gradient(135deg, #60a5fa 0%, #2563eb 100%)",
+  cyan: "linear-gradient(135deg, #22d3ee 0%, #0891b2 100%)",
+  green: "linear-gradient(135deg, #34d399 0%, #059669 100%)",
+  mint: "linear-gradient(135deg, #5eead4 0%, #10b981 100%)",
+  purple: "linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%)",
+  orange: "linear-gradient(135deg, #fdba74 0%, #f97316 100%)",
+  red: "linear-gradient(135deg, #fb7185 0%, #ef4444 100%)",
+  slate: "linear-gradient(135deg, #cbd5e1 0%, #64748b 100%)",
+};
+
+const workOrderStatusMeta: Record<
+  WorkOrderStatus,
+  { label: string; color: string }
+> = {
+  pending: { label: "待处理", color: "gold" },
+  processing: { label: "处理中", color: "blue" },
+  done: { label: "已完成", color: "green" },
+  cancelled: { label: "已取消", color: "default" },
+};
+
+const priorityMeta: Record<WorkOrderPriority, { label: string; color: string }> = {
+  high: { label: "高", color: "red" },
+  medium: { label: "中", color: "gold" },
+  low: { label: "低", color: "green" },
+};
+
+function toneClass(tone: TemplateTone) {
+  return `bp-admin-tone-${tone}`;
+}
+
+export function IconGlyph(props: {
+  name: IconName;
+  tone?: TemplateTone;
+  className?: string;
+}) {
+  return (
+    <span
+      className={`bp-admin-icon ${props.tone ? toneClass(props.tone) : ""} ${
+        props.className || ""
+      }`}
+    >
+      {iconMap[props.name]}
+    </span>
+  );
+}
+
+export function AdminShell(props: {
+  variant: "glass" | "mint" | "ops" | "work";
+  activeKey: string;
+  navItems: NavItem[];
+  brandTitle: string;
+  brandSubtitle: string;
+  topbar: ReactNode;
+  children: ReactNode;
+  sidebarFooter?: ReactNode;
+  onNavChange?: (key: string) => void;
+}) {
+  return (
+    <main className={`bp-admin-shell bp-admin-shell--${props.variant}`}>
+      <aside className="bp-admin-sidebar">
+        <div className="bp-admin-brand">
+          <span className="bp-admin-brand__mark">A</span>
+          <div>
+            <strong>{props.brandTitle}</strong>
+            <small>{props.brandSubtitle}</small>
+          </div>
+          {props.variant === "ops" ? (
+            <Button
+              className="bp-admin-collapse"
+              shape="circle"
+              icon={<MenuFoldOutlined />}
+            />
+          ) : null}
+        </div>
+        <nav className="bp-admin-nav">
+          {props.navItems.map((item) => (
+            <div key={item.key}>
+              <button
+                type="button"
+                className={`bp-admin-nav__item ${
+                  props.activeKey === item.key ? "is-active" : ""
+                }`}
+                onClick={() => props.onNavChange?.(item.key)}
+              >
+                <IconGlyph name={item.icon} />
+                <span>{item.label}</span>
+              </button>
+              {item.children ? (
+                <div className="bp-admin-nav__children">
+                  {item.children.map((child) => (
+                    <button
+                      type="button"
+                      key={child.key}
+                      className={`bp-admin-nav__child ${
+                        props.activeKey === child.key ? "is-active" : ""
+                      }`}
+                      onClick={() => props.onNavChange?.(child.key)}
+                    >
+                      {child.label}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </nav>
+        {props.sidebarFooter ? (
+          <div className="bp-admin-sidebar__footer">{props.sidebarFooter}</div>
+        ) : null}
+      </aside>
+      <section className="bp-admin-main">
+        {props.topbar}
+        <div className="bp-admin-content">{props.children}</div>
+      </section>
+    </main>
+  );
+}
+
+export function AdminTopbar(props: {
+  title: string;
+  subtitle?: string;
+  searchPlaceholder?: string;
+  extra?: ReactNode;
+  userName?: string;
+}) {
+  const displayName = props.userName || "管理员";
+  const userMenuItems: MenuProps["items"] = [
+    {
+      key: "profile",
+      icon: <UserOutlined />,
+      label: "个人信息",
+    },
+    {
+      key: "logout",
+      icon: <LogoutOutlined />,
+      label: "退出登录",
+      danger: true,
+    },
+  ];
+
+  return (
+    <header className="bp-admin-topbar">
+      <div className="bp-admin-topbar__title">
+        <strong>{props.title}</strong>
+        {props.subtitle ? <span>{props.subtitle}</span> : null}
+      </div>
+      <div className="bp-admin-topbar__actions">
+        <Input
+          className="bp-admin-search"
+          prefix={<SearchOutlined />}
+          placeholder={props.searchPlaceholder || "搜索功能、数据、报表"}
+          allowClear
+        />
+        {props.extra}
+        <Badge count={12} size="small">
+          <Button shape="circle" icon={<BellOutlined />} />
+        </Badge>
+        <Dropdown
+          menu={{ items: userMenuItems }}
+          placement="bottomRight"
+          trigger={["click"]}
+        >
+          <Button type="text" className="bp-admin-user-menu" aria-label="用户菜单">
+            <Avatar>{displayName.slice(0, 1)}</Avatar>
+            <span className="bp-admin-user-menu__name">{displayName}</span>
+          </Button>
+        </Dropdown>
+      </div>
+    </header>
+  );
+}
+
+export function Panel(props: {
+  title?: string;
+  extra?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className={`bp-admin-panel ${props.className || ""}`}>
+      {props.title || props.extra ? (
+        <div className="bp-admin-panel__header">
+          {props.title ? <h3>{props.title}</h3> : <span />}
+          {props.extra}
+        </div>
+      ) : null}
+      {props.children}
+    </section>
+  );
+}
+
+export function Sparkline(props: {
+  values: number[];
+  tone: TemplateTone;
+  filled?: boolean;
+}) {
+  const min = Math.min(...props.values);
+  const max = Math.max(...props.values);
+  const span = Math.max(max - min, 1);
+  const points = props.values
+    .map((value, index) => {
+      const x = (index / Math.max(props.values.length - 1, 1)) * 120;
+      const y = 42 - ((value - min) / span) * 34;
+      return `${x},${y}`;
+    })
+    .join(" ");
+  const fillPoints = `0,48 ${points} 120,48`;
+
+  return (
+    <svg className="bp-admin-sparkline" viewBox="0 0 120 52" aria-hidden="true">
+      {props.filled ? (
+        <polygon
+          points={fillPoints}
+          fill={toneHex[props.tone]}
+          opacity="0.12"
+        />
+      ) : null}
+      <polyline
+        points={points}
+        fill="none"
+        stroke={toneHex[props.tone]}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
+  );
+}
+
+export function MetricCard({ metric }: { metric: MetricItem }) {
+  const positive = metric.direction !== "down";
+
+  return (
+    <article className="bp-admin-metric">
+      <div className="bp-admin-metric__head">
+        <span>{metric.label}</span>
+        <IconGlyph name={metric.icon} tone={metric.tone} />
+      </div>
+      <strong>{metric.value}</strong>
+      <div className="bp-admin-metric__delta">
+        <span>较昨日</span>
+        <b className={positive ? "is-up" : "is-down"}>
+          {positive ? "↑" : "↓"} {metric.delta}
+        </b>
+      </div>
+      <Sparkline values={metric.trend} tone={metric.tone} filled />
+    </article>
+  );
+}
+
+export function QuickActionGrid(props: {
+  actions: QuickAction[];
+  onAction?: (action: QuickAction) => void;
+  compact?: boolean;
+}) {
+  return (
+    <div
+      className={`bp-admin-quick-grid ${
+        props.compact ? "bp-admin-quick-grid--compact" : ""
+      }`}
+    >
+      {props.actions.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          className="bp-admin-quick-action"
+          onClick={() => props.onAction?.(action)}
+        >
+          <span
+            className="bp-admin-quick-action__icon"
+            style={{ background: toneGradient[action.tone] }}
+          >
+            {iconMap[action.icon]}
+          </span>
+          <span>{action.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function RankingList({ items }: { items: RankingItem[] }) {
+  return (
+    <ol className="bp-admin-ranking">
+      {items.map((item) => (
+        <li key={item.id}>
+          <span className={`bp-admin-ranking__rank rank-${item.rank}`}>
+            {item.rank}
+          </span>
+          <span>{item.name}</span>
+          <strong>{item.amount}</strong>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+export function ActivityList({ items }: { items: ActivityItem[] }) {
+  return (
+    <div className="bp-admin-activity">
+      {items.map((item) => (
+        <div key={item.id} className="bp-admin-activity__item">
+          <i className={toneClass(item.tone)} />
+          <span>{item.content}</span>
+          <time>{item.time}</time>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function NoticeList({ items }: { items: NoticeItem[] }) {
+  return (
+    <div className="bp-admin-notices">
+      {items.map((item) => (
+        <div key={item.id} className="bp-admin-notice">
+          <IconGlyph name="app" tone={item.tone} />
+          <div>
+            <strong>{item.title}</strong>
+            <span>{item.description}</span>
+          </div>
+          <time>{item.time}</time>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function TodoList({ items }: { items: TodoItem[] }) {
+  return (
+    <div className="bp-admin-todo">
+      {items.map((item) => (
+        <label key={item.id} className="bp-admin-todo__item">
+          <input type="checkbox" defaultChecked={item.done} />
+          <span>{item.title}</span>
+          <Tag color={toneHex[item.tone]}>{item.owner}</Tag>
+          <time>{item.due}</time>
+        </label>
+      ))}
+    </div>
+  );
+}
+
+export function TaskProgressList({ items }: { items: TaskProgressItem[] }) {
+  return (
+    <div className="bp-admin-task-progress">
+      {items.map((item) => (
+        <div key={item.id} className="bp-admin-task-progress__item">
+          <div>
+            <span>{item.title}</span>
+            <b>{item.percent}%</b>
+            <small>{item.status}</small>
+          </div>
+          <Progress
+            percent={item.percent}
+            showInfo={false}
+            strokeColor={toneHex[item.tone]}
+            railColor="#e2e8f0"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function HealthScore(props: {
+  value: number;
+  title?: string;
+  tone?: TemplateTone;
+}) {
+  const tone = props.tone || "mint";
+
+  return (
+    <div className="bp-admin-health">
+      <Progress
+        type="circle"
+        percent={props.value}
+        strokeColor={toneHex[tone]}
+        railColor="#e8eef7"
+        format={() => (
+          <span className="bp-admin-health__score">
+            {props.value}
+            <small>{props.title || "健康"}</small>
+          </span>
+        )}
+      />
+      <div className="bp-admin-health__checks">
+        {["服务器状态", "接口服务", "数据库状态", "存储空间"].map((item) => (
+          <span key={item}>
+            <CheckCircleOutlined /> {item}
+            <b>正常</b>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function DashboardChart(props: {
+  option: Record<string, unknown>;
+  height?: number;
+}) {
+  return (
+    <ReactECharts
+      option={props.option}
+      style={{ height: props.height || 260, width: "100%" }}
+      opts={{ renderer: "svg" }}
+      notMerge
+      lazyUpdate
+    />
+  );
+}
+
+export function TemplateActionDrawer(props: {
+  open: boolean;
+  title: string;
+  mode: DrawerMode;
+  onClose: () => void;
+  onSubmit: () => void;
+}) {
+  if (!props.open) {
+    return null;
+  }
+  return <TemplateActionDrawerInner {...props} />;
+}
+
+function TemplateActionDrawerInner(props: {
+  open: boolean;
+  title: string;
+  mode: DrawerMode;
+  onClose: () => void;
+  onSubmit: () => void;
+}) {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (props.open) {
+      form.setFieldsValue({
+        subject: props.title,
+        owner: "张伟",
+        priority: "medium",
+        department: "运营部",
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [form, props.open, props.title]);
+
+  return (
+    <Drawer
+      title={props.title}
+      open={props.open}
+      size={560}
+      push={false}
+      destroyOnHidden
+      onClose={props.onClose}
+      footer={
+        <div className="bp-admin-drawer-footer">
+          <Button onClick={props.onClose}>取消</Button>
+          <Button type="primary" onClick={() => form.submit()}>
+            保存
+          </Button>
+        </div>
+      }
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        className="bp-admin-drawer-form"
+        onFinish={props.onSubmit}
+      >
+        <Form.Item
+          name="subject"
+          label="事项名称"
+          rules={[{ required: true, message: "请输入事项名称" }]}
+        >
+          <Input placeholder="请输入事项名称" />
+        </Form.Item>
+        <Form.Item
+          name="owner"
+          label="负责人"
+          rules={[{ required: true, message: "请选择负责人" }]}
+        >
+          <Select
+            options={[
+              { value: "张伟", label: "张伟" },
+              { value: "李明", label: "李明" },
+              { value: "王芳", label: "王芳" },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item name="department" label="所属部门">
+          <Select
+            options={[
+              { value: "运营部", label: "运营部" },
+              { value: "技术部", label: "技术部" },
+              { value: "产品部", label: "产品部" },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item name="priority" label="优先级">
+          <Select
+            options={[
+              { value: "high", label: "高" },
+              { value: "medium", label: "中" },
+              { value: "low", label: "低" },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item name="dueDate" label="截止时间">
+          <DatePicker className="bp-admin-full" showTime />
+        </Form.Item>
+        <Form.Item name="description" label="说明">
+          <Input.TextArea rows={5} placeholder="补充业务背景、处理要求或备注" />
+        </Form.Item>
+      </Form>
+    </Drawer>
+  );
+}
+
+export function WorkOrderStatusTag({ status }: { status: WorkOrderStatus }) {
+  const meta = workOrderStatusMeta[status];
+  return <Tag color={meta.color}>{meta.label}</Tag>;
+}
+
+export function PriorityTag({ priority }: { priority: WorkOrderPriority }) {
+  const meta = priorityMeta[priority];
+  return <Tag color={meta.color}>{meta.label}</Tag>;
+}
+
+export function WorkOrderDrawer(props: {
+  mode: DrawerMode | null;
+  record: WorkOrderRecord | null;
+  onClose: () => void;
+  onSubmit: () => void;
+  onSwitchMode?: (mode: DrawerMode) => void;
+}) {
+  if (!props.mode) {
+    return null;
+  }
+  return <WorkOrderDrawerInner {...props} mode={props.mode} />;
+}
+
+function WorkOrderDrawerInner(props: {
+  mode: DrawerMode;
+  record: WorkOrderRecord | null;
+  onClose: () => void;
+  onSubmit: () => void;
+  onSwitchMode?: (mode: DrawerMode) => void;
+}) {
+  const [form] = Form.useForm();
+  const open = true;
+  const isDetail = props.mode === "detail";
+  const record = props.record;
+  const title =
+    props.mode === "create"
+      ? "新建工单"
+      : props.mode === "edit"
+        ? "编辑工单"
+        : props.mode === "process"
+          ? "处理工单"
+          : "工单详情";
+
+  useEffect(() => {
+    if (open && record) {
+      form.setFieldsValue({
+        title: record.title,
+        owner: record.owner,
+        department: record.department,
+        priority: record.priority,
+        status: record.status,
+        description: record.description,
+      });
+    }
+    if (open && !record) {
+      form.setFieldsValue({
+        owner: "李明",
+        department: "运营部",
+        priority: "medium",
+        status: "pending",
+      });
+    }
+    if (!open) {
+      form.resetFields();
+    }
+  }, [form, open, record]);
+
+  return (
+    <Drawer
+      title={title}
+      open={open}
+      size={560}
+      push={false}
+      destroyOnHidden
+      onClose={props.onClose}
+      footer={
+        <div className="bp-admin-drawer-footer">
+          <Button onClick={props.onClose}>{isDetail ? "关闭" : "取消"}</Button>
+          {isDetail ? (
+            <>
+              <Button onClick={() => props.onSwitchMode?.("edit")}>编辑</Button>
+              <Button type="primary" onClick={() => props.onSwitchMode?.("process")}>
+                处理工单
+              </Button>
+            </>
+          ) : (
+            <Button type="primary" onClick={() => form.submit()}>
+              {props.mode === "process" ? "提交处理" : "保存"}
+            </Button>
+          )}
+        </div>
+      }
+    >
+      {isDetail && record ? (
+        <>
+          <Form form={form} component={false} onFinish={props.onSubmit} />
+          <div className="bp-admin-drawer-detail">
+            <div className="bp-admin-drawer-detail__title">
+              <WorkOrderStatusTag status={record.status} />
+              <strong>{record.title}</strong>
+              <span>工单编号：{record.id}</span>
+            </div>
+            <Descriptions column={1} size="small">
+              <Descriptions.Item label="负责人">
+                <Avatar size="small">{record.avatar}</Avatar> {record.owner}
+              </Descriptions.Item>
+              <Descriptions.Item label="所属部门">{record.department}</Descriptions.Item>
+              <Descriptions.Item label="优先级">
+                <PriorityTag priority={record.priority} />
+              </Descriptions.Item>
+              <Descriptions.Item label="创建时间">{record.createdAt}</Descriptions.Item>
+              <Descriptions.Item label="更新时间">{record.updatedAt}</Descriptions.Item>
+              <Descriptions.Item label="来源">{record.source}</Descriptions.Item>
+              <Descriptions.Item label="联系方式">{record.contact}</Descriptions.Item>
+              <Descriptions.Item label="相关系统">{record.relatedSystem}</Descriptions.Item>
+            </Descriptions>
+            <div className="bp-admin-drawer-block">
+              <h4>工单描述</h4>
+              <p>{record.description}</p>
+            </div>
+            <div className="bp-admin-drawer-attachment">
+              <FileTextOutlined />
+              <span>{record.attachmentName}</span>
+              <small>2.34 MB</small>
+            </div>
+            <div className="bp-admin-drawer-block">
+              <h4>操作时间线</h4>
+              <div className="bp-admin-drawer-timeline">
+                {record.timeline.map((item) => (
+                  <div key={item.id}>
+                    <i />
+                    <strong>{item.title}</strong>
+                    <span>
+                      {item.operator} · {item.time}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <Form
+          form={form}
+          layout="vertical"
+          className="bp-admin-drawer-form"
+          onFinish={props.onSubmit}
+        >
+          <Form.Item
+            name="title"
+            label="工单标题"
+            rules={[{ required: true, message: "请输入工单标题" }]}
+          >
+            <Input placeholder="请输入工单标题" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select
+              options={[
+                { value: "pending", label: "待处理" },
+                { value: "processing", label: "处理中" },
+                { value: "done", label: "已完成" },
+                { value: "cancelled", label: "已取消" },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item name="priority" label="优先级">
+            <Select
+              options={[
+                { value: "high", label: "高" },
+                { value: "medium", label: "中" },
+                { value: "low", label: "低" },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item name="owner" label="负责人">
+            <Select
+              options={[
+                { value: "李明", label: "李明" },
+                { value: "王芳", label: "王芳" },
+                { value: "张伟", label: "张伟" },
+                { value: "陈强", label: "陈强" },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item name="department" label="所属部门">
+            <Select
+              options={[
+                { value: "运营部", label: "运营部" },
+                { value: "技术部", label: "技术部" },
+                { value: "产品部", label: "产品部" },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item name="description" label="工单描述">
+            <Input.TextArea rows={6} placeholder="请输入问题描述和处理要求" />
+          </Form.Item>
+        </Form>
+      )}
+    </Drawer>
+  );
+}