@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,126 @@
+import { allDemos } from './demos';
+import type { ComponentVariant, PropDoc } from './types';
+
+// ─── 从 demos.ts 提取 props 文档 ──────────────────────────────────────────────
+
+function getPropsFor(title: string): PropDoc[] {
+  return allDemos.find((d) => d.title === title)?.props ?? [];
+}
+
+function getVariantsFor(title: string): ComponentVariant[] {
+  return allDemos.find((d) => d.title === title)?.variants ?? [];
+}
+
+// ─── 每种组件的画布默认配置 ───────────────────────────────────────────────────
+
+export interface CanvasDefault {
+  code: string;
+  layout: { w: number; h: number; minW?: number; minH?: number };
+  props: PropDoc[];
+  imports: string;
+  variants: ComponentVariant[];
+}
+
+export const CANVAS_COMPONENTS: string[] = [
+  'NumCard',
+  'BarChart',
+  'LineChart',
+  'PieChart',
+  'RadarChart',
+  'TreemapChart',
+  'Table',
+  'WorldMap',
+];
+
+export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
+  NumCard: {
+    code: `<NumCard variant="default" title="指标" value={0} testId="canvas-numcard" />`,
+    layout: { w: 10, h: 8, minW: 4, minH: 2 },
+    props: getPropsFor('NumCard'),
+    variants: getVariantsFor('NumCard'),
+    imports: `import { NumCard } from "@/components/canvas/NumCard";`,
+  },
+
+  Filter: {
+    code: `<Filter layout="card-grid" columns={2} onSearch={() => {}} testId="canvas-filter"><Form.Item name="keyword"><Input /></Form.Item></Filter>`,
+    layout: { w: 48, h: 10, minW: 20, minH: 4 },
+    props: getPropsFor('Filter'),
+    variants: getVariantsFor('Filter'),
+    imports: `import { Filter } from "@/components/canvas/Filter";\nimport { Form, Select, Input } from "antd";`,
+  },
+
+  BarChart: {
+    code: `<BarChart variant="bar" data={[{ name: "A", value: 1 }]} height={300} legendShow={true} testId="canvas-barchart" />`,
+    layout: { w: 24, h: 20, minW: 8, minH: 8 },
+    props: getPropsFor('BarChart'),
+    variants: getVariantsFor('BarChart'),
+    imports: `import { BarChart } from "@/components/canvas/BarChart";`,
+  },
+
+  LineChart: {
+    code: `<LineChart data={[{ name: "A", value: 1 }]} height={300} legendShow={true} testId="canvas-linechart" />`,
+    layout: { w: 24, h: 20, minW: 10, minH: 8 },
+    props: getPropsFor('LineChart'),
+    variants: getVariantsFor('LineChart'),
+    imports: `import { LineChart } from "@/components/canvas/LineChart";`,
+  },
+
+  PieChart: {
+    code: `<PieChart variant="pie" data={[{ name: "A", value: 1 }]} height={300} legendShow={true} testId="canvas-piechart" />`,
+    layout: { w: 24, h: 20, minW: 8, minH: 8 },
+    props: getPropsFor('PieChart'),
+    variants: getVariantsFor('PieChart'),
+    imports: `import { PieChart } from "@/components/canvas/PieChart";`,
+  },
+
+  RadarChart: {
+    code: `<RadarChart indicators={[{ name: "A" }]} series={[{ name: "S", data: [1] }]} height={300} testId="canvas-radarchart" />`,
+    layout: { w: 24, h: 20, minW: 8, minH: 8 },
+    props: getPropsFor('RadarChart'),
+    variants: getVariantsFor('RadarChart'),
+    imports: `import { RadarChart } from "@/components/canvas/RadarChart";`,
+  },
+
+  TreemapChart: {
+    code: `<TreemapChart data={[{ name: "A", value: 1 }]} height={300} legendShow={true} testId="canvas-treemap" />`,
+    layout: { w: 24, h: 20, minW: 8, minH: 8 },
+    props: getPropsFor('TreemapChart'),
+    variants: getVariantsFor('TreemapChart'),
+    imports: `import { TreemapChart } from "@/components/canvas/TreemapChart";`,
+  },
+
+  Table: {
+    code: `<Table size="small" dataSource={[]} columns={[]} testId="canvas-table" />`,
+    layout: { w: 24, h: 20, minW: 10, minH: 5 },
+    props: getPropsFor('Table'),
+    variants: getVariantsFor('Table'),
+    imports: `import { Table } from "@/components/canvas/Table";`,
+  },
+
+  WorldMap: {
+    code: `<WorldMap option={{ geo: {}, series: [] }} style={{ height: 400 }} testId="canvas-worldmap" />`,
+    layout: { w: 32, h: 20, minW: 14, minH: 10 },
+    props: getPropsFor('WorldMap'),
+    variants: getVariantsFor('WorldMap'),
+    imports: `import { WorldMap } from "@/components/canvas/WorldMap";`,
+  },
+
+  ChartViewer: {
+    code: `<ChartViewer
+  height={300}
+  testId="canvas-chartviewer"
+/>`,
+    layout: { w: 24, h: 20, minW: 8, minH: 8 },
+    props: getPropsFor('ChartViewer'),
+    variants: getVariantsFor('ChartViewer'),
+    imports: `import { ChartViewer } from "@/components/canvas/ChartViewer";`,
+  },
+
+  Section: {
+    code: `<Section title="分组标题" testId="canvas-section" />`,
+    layout: { w: 24, h: 14, minW: 8, minH: 4 },
+    props: getPropsFor('Section'),
+    variants: getVariantsFor('Section'),
+    imports: `import { Section } from "@/components/canvas/Section";`,
+  },
+};

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

@@ -0,0 +1,11 @@
+import type { TFunction } from 'i18next';
+
+/** 根据组件 type 获取本地化 display name */
+export function getComponentLabel(type: string, t: TFunction): string {
+  return t(`canvas.components.${type}`, { defaultValue: type });
+}
+
+/** 根据 variant label key 获取本地化名称 */
+export function getVariantLabel(label: string, t: TFunction): string {
+  return t(`canvas.variants.${label}`, { defaultValue: label });
+}

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

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Radio, Input, Checkbox } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+export interface BarChartDataSourceResult {
+  direction: 'vertical' | 'horizontal';
+  showGrid: boolean;
+  showLabel: boolean;
+  dataDescription: string;
+  code: string;
+}
+
+interface BarChartDataSourceModalProps {
+  open: boolean;
+  code: string;
+  onConfirm: (result: BarChartDataSourceResult) => void;
+  onCancel: () => void;
+}
+
+const BarChartDataSourceModal: React.FC<BarChartDataSourceModalProps> = ({
+  open,
+  code,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const DIRECTIONS = [
+    { label: t('canvas.dataSourceModal.barVertical'), value: 'vertical' },
+    { label: t('canvas.dataSourceModal.barHorizontal'), value: 'horizontal' },
+  ];
+
+  const [direction, setDirection] = useState<'vertical' | 'horizontal'>(
+    'vertical',
+  );
+  const [showGrid, setShowGrid] = useState(true);
+  const [showLabel, setShowLabel] = useState(true);
+  const [dataDescription, setDataDescription] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      const hasHorizontal = /direction\s*=\s*"horizontal"/.test(code);
+      setDirection(hasHorizontal ? 'horizontal' : 'vertical');
+      setShowGrid(!/showGrid\s*=\s*\{false\}/.test(code));
+      setShowLabel(!/showLabel\s*=\s*\{false\}/.test(code));
+      setDataDescription('');
+    }
+  }, [open, code]);
+
+  const handleConfirm = () => {
+    onConfirm({
+      direction,
+      showGrid,
+      showLabel,
+      dataDescription: dataDescription.trim(),
+      code,
+    });
+  };
+
+  return (
+    <Modal
+      title={t('canvas.dataSourceModal.title')}
+      open={open}
+      onOk={handleConfirm}
+      onCancel={onCancel}
+      okText={t('canvas.dataSourceModal.ok')}
+      cancelText={t('canvas.dataSourceModal.cancel')}
+      width={420}
+      centered
+      destroyOnClose
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div>
+          <div style={{ marginBottom: 6, fontSize: 13, color: '#595959' }}>
+            方向：
+          </div>
+          <Radio.Group
+            options={DIRECTIONS}
+            value={direction}
+            onChange={(e) => setDirection(e.target.value)}
+          />
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <Checkbox
+            checked={showGrid}
+            onChange={(e) => setShowGrid(e.target.checked)}
+          >
+            显示网格线
+          </Checkbox>
+          <Checkbox
+            checked={showLabel}
+            onChange={(e) => setShowLabel(e.target.checked)}
+          >
+            显示数据标签
+          </Checkbox>
+        </div>
+
+        <div>
+          <div style={{ marginBottom: 6, fontSize: 13, color: '#595959' }}>
+            数据来源描述：
+          </div>
+          <Input.TextArea
+            value={dataDescription}
+            onChange={(e) => setDataDescription(e.target.value)}
+            placeholder={t('canvas.dataSourceModal.barPlaceholder')}
+            rows={3}
+            style={{ resize: 'vertical' }}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default BarChartDataSourceModal;

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

@@ -0,0 +1,217 @@
+import React, { useState, useCallback } from 'react';
+import { Modal, Checkbox, Flex } from 'antd';
+import {
+  HolderOutlined,
+  BarChartOutlined,
+  LineChartOutlined,
+  PieChartOutlined,
+} from '@ant-design/icons';
+import {
+  DndContext,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import type { CanvasConfigModalProps } from '../canvasConfigRegistry';
+import type { ChartViewerChart } from '@/components/canvas/ChartViewer';
+
+// ─── 所有可选图表的元信息 ─────────────────────────────────────────────────────
+
+const ALL_CHARTS: {
+  key: ChartViewerChart;
+  label: string;
+  icon: React.ReactNode;
+}[] = [
+  { key: 'bar', label: '柱状图', icon: <BarChartOutlined /> },
+  { key: 'line', label: '折线图', icon: <LineChartOutlined /> },
+  { key: 'pie', label: '饼图', icon: <PieChartOutlined /> },
+];
+
+// ─── 从 code 字符串解析 charts prop ──────────────────────────────────────────
+
+function parseCharts(code: string): ChartViewerChart[] {
+  const match = code.match(/charts=\{(\[.*?\])\}/s);
+  if (!match) return ['bar', 'line', 'pie'];
+  try {
+    const parsed = JSON.parse(match[1].replace(/'/g, '"'));
+    if (Array.isArray(parsed)) return parsed as ChartViewerChart[];
+  } catch {
+    // 解析失败时返回默认值
+  }
+  return ['bar', 'line', 'pie'];
+}
+
+// ─── 将新的 charts 写回 code 字符串 ──────────────────────────────────────────
+
+function writeCharts(code: string, charts: ChartViewerChart[]): string {
+  const chartsStr = `charts={${JSON.stringify(charts)}}`;
+  // 已有 charts prop → 替换
+  if (/charts=\{.*?\}/s.test(code)) {
+    return code.replace(/charts=\{.*?\}/s, chartsStr);
+  }
+  // 没有 charts prop → 插入到 testId 之前
+  return code.replace(/(testId=)/, `${chartsStr}\n  $1`);
+}
+
+// ─── SortableChartItem ────────────────────────────────────────────────────────
+
+interface SortableChartItemProps {
+  chartKey: ChartViewerChart;
+  label: string;
+  icon: React.ReactNode;
+  checked: boolean;
+  disabled: boolean;
+  onToggle: (key: ChartViewerChart, checked: boolean) => void;
+}
+
+const SortableChartItem: React.FC<SortableChartItemProps> = ({
+  chartKey,
+  label,
+  icon,
+  checked,
+  disabled,
+  onToggle,
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: chartKey });
+
+  return (
+    <Flex
+      ref={setNodeRef}
+      align="center"
+      gap={12}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        padding: '8px 0',
+        borderBottom: '1px solid #f0f0f0',
+        userSelect: 'none',
+      }}
+    >
+      <HolderOutlined
+        {...attributes}
+        {...listeners}
+        style={{
+          color: '#ccc',
+          cursor: 'grab',
+          touchAction: 'none',
+          fontSize: 16,
+        }}
+      />
+      <Checkbox
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onToggle(chartKey, e.target.checked)}
+      />
+      {icon}
+      <span style={{ fontSize: 14 }}>{label}</span>
+    </Flex>
+  );
+};
+
+// ─── ChartViewerConfigModal ───────────────────────────────────────────────────
+
+const ChartViewerConfigModal: React.FC<CanvasConfigModalProps> = ({
+  code,
+  onConfirm,
+  onCancel,
+}) => {
+  const initialCharts = parseCharts(code);
+  // 将 ALL_CHARTS 按 initialCharts 顺序排列，未在 initialCharts 中的追加到末尾
+  const initialOrder: ChartViewerChart[] = [
+    ...initialCharts,
+    ...ALL_CHARTS.map((c) => c.key).filter((k) => !initialCharts.includes(k)),
+  ];
+
+  const [order, setOrder] = useState<ChartViewerChart[]>(initialOrder);
+  const [checked, setChecked] = useState<Set<ChartViewerChart>>(
+    new Set(initialCharts),
+  );
+
+  const checkedCount = checked.size;
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+  );
+
+  const handleToggle = useCallback(
+    (key: ChartViewerChart, isChecked: boolean) => {
+      setChecked((prev) => {
+        const next = new Set(prev);
+        if (isChecked) next.add(key);
+        else next.delete(key);
+        return next;
+      });
+    },
+    [],
+  );
+
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setOrder((prev) => {
+      const oldIndex = prev.indexOf(active.id as ChartViewerChart);
+      const newIndex = prev.indexOf(over.id as ChartViewerChart);
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  }, []);
+
+  const handleOk = useCallback(() => {
+    // 按当前 order 顺序，只取 checked 中的项
+    const result = order.filter((k) => checked.has(k));
+    onConfirm(writeCharts(code, result));
+  }, [order, checked, code, onConfirm]);
+
+  return (
+    <Modal
+      open
+      title="配置图表"
+      okText="确认"
+      cancelText="取消"
+      onOk={handleOk}
+      onCancel={onCancel}
+      width={360}
+    >
+      <DndContext
+        sensors={sensors}
+        modifiers={[restrictToVerticalAxis]}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={order} strategy={verticalListSortingStrategy}>
+          {order.map((key) => {
+            const meta = ALL_CHARTS.find((c) => c.key === key)!;
+            return (
+              <SortableChartItem
+                key={key}
+                chartKey={key}
+                label={meta.label}
+                icon={meta.icon}
+                checked={checked.has(key)}
+                disabled={checked.has(key) && checkedCount === 1}
+                onToggle={handleToggle}
+              />
+            );
+          })}
+        </SortableContext>
+      </DndContext>
+    </Modal>
+  );
+};
+
+export default ChartViewerConfigModal;

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

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Checkbox, Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+export interface LineChartDataSourceResult {
+  legendShow: boolean;
+  showGrid: boolean;
+  showAxis: boolean;
+  showDots: boolean;
+  showLabel: boolean;
+  stacked: boolean;
+  area: boolean;
+  smooth: boolean;
+  dataDescription: string;
+  code: string;
+}
+
+interface LineChartDataSourceModalProps {
+  open: boolean;
+  code: string;
+  onConfirm: (result: LineChartDataSourceResult) => void;
+  onCancel: () => void;
+}
+
+const LineChartDataSourceModal: React.FC<LineChartDataSourceModalProps> = ({
+  open,
+  code,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const [legendShow, setLegendShow] = useState(true);
+  const [showGrid, setShowGrid] = useState(true);
+  const [showAxis, setShowAxis] = useState(true);
+  const [showDots, setShowDots] = useState(false);
+  const [showLabel, setShowLabel] = useState(false);
+  const [stacked, setStacked] = useState(false);
+  const [area, setArea] = useState(false);
+  const [smooth, setSmooth] = useState(false);
+  const [dataDescription, setDataDescription] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      // 从 code 解析当前状态
+      setLegendShow(!/legendShow\s*=\s*\{false\}/.test(code));
+      setShowGrid(!/showGrid\s*=\s*\{false\}/.test(code));
+      setShowAxis(!/showAxis\s*=\s*\{false\}/.test(code));
+      setShowDots(/showDots\s*=\s*\{true\}/.test(code));
+      setShowLabel(/showLabel\s*=\s*\{true\}/.test(code));
+      setStacked(/stacked\s*=\s*\{true\}/.test(code));
+      setArea(/area\s*=\s*\{true\}/.test(code));
+      setSmooth(
+        /smooth\s*=\s*\{true\}/.test(code) || /\bsmooth\b(?!\s*=)/.test(code),
+      );
+      setDataDescription('');
+    }
+  }, [open, code]);
+
+  const handleConfirm = () => {
+    onConfirm({
+      legendShow,
+      showGrid,
+      showAxis,
+      showDots,
+      showLabel,
+      stacked,
+      area,
+      smooth,
+      dataDescription: dataDescription.trim(),
+      code,
+    });
+  };
+
+  return (
+    <Modal
+      title={t('canvas.dataSourceModal.title')}
+      open={open}
+      onOk={handleConfirm}
+      onCancel={onCancel}
+      okText={t('canvas.dataSourceModal.ok')}
+      cancelText={t('canvas.dataSourceModal.cancel')}
+      width={420}
+      centered
+      destroyOnClose
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <Checkbox
+          checked={legendShow}
+          onChange={(e) => setLegendShow(e.target.checked)}
+        >
+          {t('canvas.dataSourceModal.showLegend')}
+        </Checkbox>
+        <Checkbox
+          checked={showGrid}
+          onChange={(e) => setShowGrid(e.target.checked)}
+        >
+          显示网格线
+        </Checkbox>
+        <Checkbox
+          checked={showAxis}
+          onChange={(e) => setShowAxis(e.target.checked)}
+        >
+          显示坐标轴
+        </Checkbox>
+        <Checkbox
+          checked={showDots}
+          onChange={(e) => setShowDots(e.target.checked)}
+        >
+          显示坐标点
+        </Checkbox>
+        {showDots && (
+          <Checkbox
+            checked={showLabel}
+            onChange={(e) => setShowLabel(e.target.checked)}
+            style={{ marginLeft: 24 }}
+          >
+            显示坐标点数据
+          </Checkbox>
+        )}
+        <Checkbox
+          checked={stacked}
+          onChange={(e) => setStacked(e.target.checked)}
+        >
+          堆叠模式
+        </Checkbox>
+        <Checkbox checked={area} onChange={(e) => setArea(e.target.checked)}>
+          面积填充
+        </Checkbox>
+        <Checkbox
+          checked={smooth}
+          onChange={(e) => setSmooth(e.target.checked)}
+        >
+          拟合曲线
+        </Checkbox>
+
+        <div style={{ marginTop: 4 }}>
+          <div style={{ marginBottom: 6, fontSize: 13, color: '#595959' }}>
+            数据来源描述：
+          </div>
+          <Input.TextArea
+            value={dataDescription}
+            onChange={(e) => setDataDescription(e.target.value)}
+            placeholder={t('canvas.dataSourceModal.linePlaceholder')}
+            rows={3}
+            style={{ resize: 'vertical' }}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default LineChartDataSourceModal;