openxiangda 1.0.264 → 2.0.0-alpha.2

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

@@ -1,832 +0,0 @@
-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>
-  );
-}