@gadmin2n/schematics 0.0.71 → 0.0.74

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

@@ -1,126 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,217 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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;