@gadmin2n/schematics 0.0.72 → 0.0.74

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/components/TableDataSourceModal.tsx

@@ -2,6 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { Modal, Checkbox, Input, Button, Select } from 'antd';
 import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
+import {
+  CANVAS_MODAL_PROPS,
+  CANVAS_MODAL_TITLE_STYLE,
+} from './canvasModalProps';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -77,15 +81,17 @@ const TableDataSourceModal: React.FC<TableDataSourceModalProps> = ({
 
   return (
     <Modal
-      title={t('canvas.dataSourceModal.title')}
+      {...CANVAS_MODAL_PROPS}
+      title={
+        <span style={CANVAS_MODAL_TITLE_STYLE}>
+          {t('canvas.dataSourceModal.title')}
+        </span>
+      }
       open={open}
       onOk={handleConfirm}
       onCancel={onCancel}
       okText={t('canvas.dataSourceModal.ok')}
       cancelText={t('canvas.dataSourceModal.cancel')}
-      width={480}
-      centered
-      destroyOnClose
     >
       <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
         {/* 列配置 */}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/components/canvasModalProps.ts

@@ -0,0 +1,24 @@
+/**
+ * Canvas 编辑弹窗统一样式 Props
+ *
+ * 所有 Canvas 画布内的工具/配置弹窗共享这些 Modal props，
+ * 保证视觉风格一致（间距、无分隔线、居中、无关闭按钮）。
+ */
+export const CANVAS_MODAL_PROPS = {
+  width: 420,
+  centered: true,
+  destroyOnClose: true,
+  closable: false,
+  styles: {
+    header: { padding: '16px 20px 0', marginBottom: 0 },
+    body: { padding: '12px 20px 16px' },
+    footer: { padding: '0 20px 16px', borderTop: 'none' },
+  },
+} as const;
+
+/** 统一标题样式 */
+export const CANVAS_MODAL_TITLE_STYLE: React.CSSProperties = {
+  fontSize: 13,
+  fontWeight: 500,
+  color: '#595959',
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/demos.ts

@@ -6,7 +6,7 @@ const numCardDemo: ComponentDemo = {
   title: 'NumCard',
   description:
     "项目唯一的数字指标卡片，用于展示单一关键数字（如总数、成功率、延迟、金额）。传 null / undefined / NaN 自动显示 '--'，无需手动判断。",
-  imports: `import { NumCard } from "@/components/canvas/NumCard";`,
+  imports: `import { NumCard } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'variant',
@@ -117,7 +117,7 @@ const filterDemo: ComponentDemo = {
   title: 'Filter',
   description:
     '项目统一的过滤条容器，封装布局标准化、搜索/重置按钮、Form 实例管理。3 种 layout：card-grid（Card+Grid）/ inline（单行）/ inline-right（右对齐，无按钮）。',
-  imports: `import { Filter } from "@/components/canvas/Filter";
+  imports: `import { Filter } from "@gadmin2n/charts";
 import { Form, Select, DatePicker, Input } from "antd";`,
   props: [
     {
@@ -268,13 +268,13 @@ const barChartDemo: ComponentDemo = {
   title: 'BarChart',
   description:
     '项目统一柱状图，封装标准 ECharts 配置。支持纵柱、横柱、多系列堆叠、百分比堆叠，数据格式随 variant 不同。',
-  imports: `import { BarChart } from "@/components/canvas/BarChart";`,
+  imports: `import { BarChart } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'variant',
-      type: '"bar" | "stackBar" | "stackBarPercent"',
+      type: '"bar" | "groupBar"',
       default: '"bar"',
-      desc: 'bar: 单系列柱状图；stackBar: 多系列堆叠柱状图；stackBarPercent: 百分比堆叠柱状图（Y 轴 0–100%）',
+      desc: 'bar: 单系列柱状图；groupBar: 多系列柱状图（通过 stacked/percent 控制行为）',
     },
     {
       name: 'direction',
@@ -282,6 +282,18 @@ const barChartDemo: ComponentDemo = {
       default: '"vertical"',
       desc: '图表方向：vertical 为纵向（默认），horizontal 为横向',
     },
+    {
+      name: 'stacked',
+      type: 'boolean',
+      default: 'false',
+      desc: '多系列堆叠模式（仅 groupBar 生效）',
+    },
+    {
+      name: 'percent',
+      type: 'boolean',
+      default: 'false',
+      desc: '百分比堆叠（仅 stacked=true 时生效）',
+    },
     {
       name: 'data',
       type: 'BarDataSingle | BarDataMulti | BarDataPercent',
@@ -304,7 +316,7 @@ const barChartDemo: ComponentDemo = {
       name: 'showLabel',
       type: 'boolean',
       default: 'true',
-      desc: '是否在柱顶/柱右显示数值标签；stackBar 堆叠模式仅最后一段显示总量',
+      desc: '是否在柱顶/柱右显示数值标签；堆叠模式仅最后一段显示总量',
     },
     {
       name: 'legendShow',
@@ -361,15 +373,14 @@ const barChartDemo: ComponentDemo = {
   unit="件"
   title="数据对比"
   height={300}
-  legendShow={true}
   testId="canvas-barchart-bar"
 />`,
     },
     {
-      name: 'stackBar',
-      label: 'stackBar',
+      name: 'groupBar',
+      label: 'groupBar',
       code: `<BarChart
-  variant="stackBar"
+  variant="groupBar"
   data={{
     xData: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
     series: [
@@ -379,38 +390,9 @@ const barChartDemo: ComponentDemo = {
     ],
   }}
   unit="万"
-  title="构成分析"
-  height={300}
-  legendShow={true}
-  testId="canvas-barchart-stack"
-/>`,
-    },
-    {
-      name: 'stackBarPercent',
-      label: 'stackBarPercent',
-      code: `<BarChart
-  variant="stackBarPercent"
-  data={{
-    xData: ["Jan", "Feb", "Mar", "Apr", "May"],
-    series: [
-      { name: "类型A", data: [55, 58, 52, 60, 57] },
-      { name: "类型B", data: [30, 28, 33, 25, 29] },
-      { name: "类型C", data: [15, 14, 15, 15, 14] },
-    ],
-    allTypes: ["类型A", "类型B", "类型C"],
-    originalData: {
-      "Jan": [{ key: "类型A", active_device_cnt: 110 }, { key: "类型B", active_device_cnt: 60 }, { key: "类型C", active_device_cnt: 30 }],
-      "Feb": [{ key: "类型A", active_device_cnt: 116 }, { key: "类型B", active_device_cnt: 56 }, { key: "类型C", active_device_cnt: 28 }],
-      "Mar": [{ key: "类型A", active_device_cnt: 104 }, { key: "类型B", active_device_cnt: 66 }, { key: "类型C", active_device_cnt: 30 }],
-      "Apr": [{ key: "类型A", active_device_cnt: 120 }, { key: "类型B", active_device_cnt: 50 }, { key: "类型C", active_device_cnt: 30 }],
-      "May": [{ key: "类型A", active_device_cnt: 114 }, { key: "类型B", active_device_cnt: 58 }, { key: "类型C", active_device_cnt: 28 }],
-    },
-  }}
-  unit="%"
-  title="占比分析"
+  title="分组对比"
   height={300}
-  legendShow={true}
-  testId="canvas-barchart-stackpercent"
+  testId="canvas-barchart-group"
 />`,
     },
   ],
@@ -422,7 +404,7 @@ const lineChartDemo: ComponentDemo = {
   title: 'LineChart',
   description:
     '项目统一折线图，支持单系列、多系列堆叠、面积堆叠（hover 只高亮当前系列）、分组面积折线（hover 同父类分组高亮）、迷你趋势线、双 Y 轴混合图。',
-  imports: `import { LineChart } from "@/components/canvas/LineChart";`,
+  imports: `import { LineChart } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'variant',
@@ -532,7 +514,7 @@ const pieChartDemo: ComponentDemo = {
   title: 'PieChart',
   description:
     '项目统一饼图，支持标准饼图、环形图（甜甜圈）、旭日图。数据自动按 value 从大到小排序，超 topN 项自动合并为 Others。',
-  imports: `import { PieChart } from "@/components/canvas/PieChart";`,
+  imports: `import { PieChart } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'variant',
@@ -694,7 +676,7 @@ const radarChartDemo: ComponentDemo = {
   title: 'RadarChart',
   description:
     '项目统一雷达图，适用于多维度能力评估和多实体横向对比。indicators 和 series.data 长度必须相同。',
-  imports: `import { RadarChart } from "@/components/canvas/RadarChart";`,
+  imports: `import { RadarChart } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'indicators',
@@ -752,8 +734,8 @@ const radarChartDemo: ComponentDemo = {
   ],
   variants: [
     {
-      name: 'demo',
-      label: 'demo',
+      name: 'default',
+      label: 'default',
       code: `<RadarChart
   indicators={[
     { name: "维度A" }, { name: "维度B" },
@@ -777,7 +759,7 @@ const treemapChartDemo: ComponentDemo = {
   title: 'TreemapChart',
   description:
     '矩形树图，方块面积 = 数值大小，适合多分类占比展示（>8 项时替代饼图）。自动检测扁平 / 嵌套结构。',
-  imports: `import { TreemapChart } from "@/components/canvas/TreemapChart";`,
+  imports: `import { TreemapChart } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'data',
@@ -841,8 +823,8 @@ const treemapChartDemo: ComponentDemo = {
   ],
   variants: [
     {
-      name: 'demo',
-      label: 'demo',
+      name: 'default',
+      label: 'default',
       code: `<TreemapChart
   data={[
     {
@@ -886,7 +868,7 @@ const tableDemo: ComponentDemo = {
   title: 'Table',
   description:
     'drop-in 替换 antd Table，传 pagination 对象自动补 showSizeChanger + pageSizeOptions。不传 pagination 则不分页。',
-  imports: `import { Table } from "@/components/canvas/Table";`,
+  imports: `import { Table } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'dataSource',
@@ -963,7 +945,7 @@ const worldMapDemo: ComponentDemo = {
   title: 'WorldMap',
   description:
     '项目统一世界地图，封装标准 geo 基准配置（Highcharts 坐标系，aspectScale 固定为 1）。通过 option 透传 series、geo 差异字段即可。',
-  imports: `import { WorldMap } from "@/components/canvas/WorldMap";`,
+  imports: `import { WorldMap } from "@gadmin2n/charts";`,
   props: [
     {
       name: 'option',
@@ -1016,8 +998,8 @@ const worldMapDemo: ComponentDemo = {
   ],
   variants: [
     {
-      name: 'demo',
-      label: 'demo',
+      name: 'default',
+      label: 'default',
       code: `<WorldMap
   option={{
     geo: {
@@ -1078,13 +1060,13 @@ const worldMapDemo: ComponentDemo = {
   ],
 };
 
-// ─── ChartViewer ──────────────────────────────────────────────────────────────
-const chartViewerDemo: ComponentDemo = {
-  id: 'chart-viewer',
-  title: 'ChartViewer',
+// ─── MultiChart ──────────────────────────────────────────────────────────────
+const multiChartDemo: ComponentDemo = {
+  id: 'multi-chart',
+  title: 'MultiChart',
   description:
-    '图表切换容器：右上角三个图标按钮可在柱状图、折线图、饼图之间切换。内置 mock 数据，状态内聚，零配置使用。',
-  imports: `import { ChartViewer } from "@/components/canvas/ChartViewer";`,
+    '复合图表：右上角按钮切换柱状图、折线图、饼图。支持配置包含哪些图表、右键切换和各图表独立配置。',
+  imports: `import { MultiChart } from "@gadmin2n/charts";`,
   props: [
     { name: 'height', type: 'number', default: '300', desc: '图表高度（px）' },
     {
@@ -1106,9 +1088,9 @@ const chartViewerDemo: ComponentDemo = {
     {
       name: 'default',
       label: 'default',
-      code: `<ChartViewer
+      code: `<MultiChart
   height={300}
-  testId="canvas-chartviewer-default"
+  testId="canvas-multichart-default"
 />`,
     },
   ],
@@ -1119,7 +1101,7 @@ const sectionDemo: ComponentDemo = {
   id: 'section',
   title: 'Section',
   description: '白色背景容器，左上角标题，其他组件可放在其上方形成视觉分组。',
-  imports: `import { Section } from "@/components/canvas/Section";`,
+  imports: `import { Section } from "@gadmin2n/charts";`,
   props: [
     { name: 'title', type: 'string', desc: '左上角标题文字' },
     {
@@ -1148,6 +1130,6 @@ export const allDemos: ComponentDemo[] = [
   treemapChartDemo,
   tableDemo,
   worldMapDemo,
-  chartViewerDemo,
+  multiChartDemo,
   sectionDemo,
 ];

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/CustomNode.tsx

@@ -0,0 +1,99 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+
+const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
+  TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
+  ACTION: { bg: '#f6ffed', border: '#b7eb8f' },
+  CONDITION: { bg: '#fff7e6', border: '#ffd591' },
+  LOOP: { bg: '#f9f0ff', border: '#d3adf7' },
+  APPROVAL: { bg: '#fff1f0', border: '#ffa39e' },
+  SUB_WORKFLOW: { bg: '#f0f5ff', border: '#adc6ff' },
+};
+
+export interface CustomNodeData {
+  label: string;
+  category: string;
+  isSelected: boolean;
+  readonly?: boolean;
+  [key: string]: unknown;
+}
+
+export const CustomNode = memo(({ data }: NodeProps) => {
+  const nodeData = data as CustomNodeData;
+  const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
+
+  return (
+    <div
+      style={{
+        background: colors.bg,
+        border: nodeData.isSelected
+          ? '2px solid #1677ff'
+          : `1px solid ${colors.border}`,
+        borderRadius: 8,
+        padding: '8px 16px',
+        fontSize: 14,
+        minWidth: 120,
+        textAlign: 'center',
+        boxShadow: nodeData.isSelected
+          ? '0 0 0 2px rgba(22,119,255,0.2)'
+          : undefined,
+      }}
+    >
+      {!nodeData.readonly && (
+        <Handle
+          type="target"
+          position={Position.Top}
+          style={{
+            width: 14,
+            height: 14,
+            background: '#fff',
+            border: '2px solid #555',
+            cursor: 'crosshair',
+          }}
+        />
+      )}
+      {nodeData.readonly && (
+        <Handle
+          type="target"
+          position={Position.Top}
+          style={{
+            width: 0,
+            height: 0,
+            border: 'none',
+            background: 'transparent',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+      <div>{nodeData.label}</div>
+      {!nodeData.readonly && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={{
+            width: 14,
+            height: 14,
+            background: '#fff',
+            border: '2px solid #555',
+            cursor: 'crosshair',
+          }}
+        />
+      )}
+      {nodeData.readonly && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={{
+            width: 0,
+            height: 0,
+            border: 'none',
+            background: 'transparent',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+    </div>
+  );
+});
+
+CustomNode.displayName = 'CustomNode';

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ExportModal.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, Input, Modal, Space, message } from 'antd';
+import { CopyOutlined, LoadingOutlined } from '@ant-design/icons';
+import { customRequest } from 'helpers/http';
+
+interface ExportModalProps {
+  open: boolean;
+  workflowId: string | null;
+  onClose: () => void;
+}
+
+export function ExportModal({ open, workflowId, onClose }: ExportModalProps) {
+  const [url, setUrl] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open && workflowId) {
+      setUrl('');
+      setLoading(true);
+      customRequest<{ url: string }>(
+        `workflow/${workflowId}/export-token`,
+        'POST',
+      )
+        .then((res) => setUrl(res.url))
+        .catch((e: any) =>
+          message.error(e?.message ?? 'Failed to generate export URL'),
+        )
+        .finally(() => setLoading(false));
+    }
+  }, [open, workflowId]);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      message.success('URL copied to clipboard');
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.getElementById(
+        'export-url-input',
+      ) as HTMLTextAreaElement;
+      textarea?.select();
+      document.execCommand('copy');
+      message.success('URL copied to clipboard');
+    }
+  }, [url]);
+
+  return (
+    <Modal
+      title="Export Workflow"
+      open={open}
+      onCancel={onClose}
+      footer={
+        <Space>
+          <Button onClick={onClose}>Close</Button>
+          <Button
+            type="primary"
+            icon={<CopyOutlined />}
+            onClick={handleCopy}
+            disabled={!url}
+          >
+            Copy URL
+          </Button>
+        </Space>
+      }
+    >
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: 24 }}>
+          <LoadingOutlined style={{ fontSize: 24 }} />
+          <p>Generating export URL...</p>
+        </div>
+      ) : (
+        <>
+          <p style={{ marginBottom: 8, color: '#666' }}>
+            Export URL (valid for 30 minutes):
+          </p>
+          <Input.TextArea
+            id="export-url-input"
+            value={url}
+            readOnly
+            autoSize={{ minRows: 3, maxRows: 5 }}
+            onFocus={(e) => e.target.select()}
+          />
+        </>
+      )}
+    </Modal>
+  );
+}