@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Checkbox, Input, Button, Space } from 'antd';
+import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+interface NumCardDataSourceModalProps {
+  open: boolean;
+  code: string;
+  onConfirm: (options: {
+    wantChart: boolean;
+    chartRange: string;
+    wantComparisons: boolean;
+    comparisonLabels: string[];
+    dataDescription: string;
+    code: string;
+  }) => void;
+  onCancel: () => void;
+}
+
+const NumCardDataSourceModal: React.FC<NumCardDataSourceModalProps> = ({
+  open,
+  code,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const hasChart =
+    /chartData\s*=\s*\{/.test(code) || /variant\s*=\s*"withChart"/.test(code);
+  const hasComparisons = /comparisons\s*=\s*\{/.test(code);
+
+  // 解析已有的 comparison labels
+  const existingLabels: string[] = [];
+  if (hasComparisons) {
+    const matches = code.matchAll(/label\s*:\s*"([^"]+)"/g);
+    for (const m of matches) {
+      existingLabels.push(m[1]);
+    }
+  }
+
+  const [wantChart, setWantChart] = useState(hasChart);
+  const [chartRange, setChartRange] = useState('近7天');
+  const [wantComparisons, setWantComparisons] = useState(hasComparisons);
+  const [labels, setLabels] = useState<string[]>(
+    existingLabels.length > 0 ? existingLabels : ['比昨日'],
+  );
+  const [dataDescription, setDataDescription] = useState('');
+
+  // 重置 state when modal opens
+  useEffect(() => {
+    if (open) {
+      const curHasChart =
+        /chartData\s*=\s*\{/.test(code) ||
+        /variant\s*=\s*"withChart"/.test(code);
+      const curHasComparisons = /comparisons\s*=\s*\{/.test(code);
+      const curLabels: string[] = [];
+      if (curHasComparisons) {
+        const matches = code.matchAll(/label\s*:\s*"([^"]+)"/g);
+        for (const m of matches) {
+          curLabels.push(m[1]);
+        }
+      }
+      setWantChart(curHasChart);
+      setChartRange('近7天');
+      setWantComparisons(curHasComparisons);
+      setLabels(curLabels.length > 0 ? curLabels : ['比昨日']);
+      setDataDescription('');
+    }
+  }, [open, code]);
+
+  const handleAddLabel = () => {
+    setLabels([...labels, '']);
+  };
+
+  const handleRemoveLabel = (index: number) => {
+    setLabels(labels.filter((_, i) => i !== index));
+  };
+
+  const handleLabelChange = (index: number, value: string) => {
+    const next = [...labels];
+    next[index] = value;
+    setLabels(next);
+  };
+
+  const handleConfirm = () => {
+    const validLabels = labels.filter((l) => l.trim() !== '');
+    onConfirm({
+      wantChart,
+      chartRange: wantChart ? chartRange : '',
+      wantComparisons: wantComparisons && validLabels.length > 0,
+      comparisonLabels: validLabels,
+      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>
+          <Checkbox
+            checked={wantChart}
+            onChange={(e) => setWantChart(e.target.checked)}
+          >
+            {t('canvas.dataSourceModal.includeChart')}
+          </Checkbox>
+          {wantChart && (
+            <div
+              style={{
+                marginTop: 8,
+                marginLeft: 24,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+              }}
+            >
+              <span style={{ flexShrink: 0, fontSize: 13, color: '#595959' }}>
+                {t('canvas.dataSourceModal.chartRange')}
+              </span>
+              <Input
+                size="small"
+                value={chartRange}
+                onChange={(e) => setChartRange(e.target.value)}
+                placeholder={t('canvas.dataSourceModal.chartRangePlaceholder')}
+                style={{ width: 180 }}
+              />
+            </div>
+          )}
+        </div>
+
+        <div>
+          <Checkbox
+            checked={wantComparisons}
+            onChange={(e) => setWantComparisons(e.target.checked)}
+          >
+            {t('canvas.dataSourceModal.includeComparisons')}
+          </Checkbox>
+
+          {wantComparisons && (
+            <div style={{ marginTop: 8, marginLeft: 24 }}>
+              {labels.map((label, index) => (
+                <div
+                  key={index}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    marginBottom: 8,
+                  }}
+                >
+                  <span style={{ flexShrink: 0 }}>
+                    {t('canvas.dataSourceModal.comparedTo')}
+                  </span>
+                  <Input
+                    size="small"
+                    placeholder={t(
+                      'canvas.dataSourceModal.comparedToPlaceholder',
+                    )}
+                    value={label.replace(/^比/, '')}
+                    onChange={(e) =>
+                      handleLabelChange(index, `比${e.target.value}`)
+                    }
+                    style={{ width: 160 }}
+                  />
+                  {labels.length > 1 && (
+                    <MinusCircleOutlined
+                      style={{ color: '#ff4d4f', cursor: 'pointer' }}
+                      onClick={() => handleRemoveLabel(index)}
+                    />
+                  )}
+                </div>
+              ))}
+              <Button
+                type="dashed"
+                size="small"
+                icon={<PlusOutlined />}
+                onClick={handleAddLabel}
+              >
+                {t('canvas.dataSourceModal.add')}
+              </Button>
+            </div>
+          )}
+        </div>
+
+        <div>
+          <div style={{ marginBottom: 6, fontSize: 13, color: '#595959' }}>
+            {t('canvas.dataSourceModal.descLabel')}
+          </div>
+          <Input.TextArea
+            value={dataDescription}
+            onChange={(e) => setDataDescription(e.target.value)}
+            placeholder={t('canvas.dataSourceModal.descPlaceholder')}
+            rows={3}
+            style={{ resize: 'vertical' }}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default NumCardDataSourceModal;

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

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Modal, Input } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+
+export interface PromptModalProps {
+  /** 控制弹窗开关 */
+  open: boolean;
+  /** 提示标签，如"图表标题" */
+  label?: string;
+  /** 输入框 placeholder */
+  placeholder?: string;
+  /** 输入框默认值 */
+  defaultValue?: string;
+  /** 确认回调，返回用户输入值（已 trim） */
+  onConfirm: (value: string) => void;
+  /** 取消 / 关闭回调 */
+  onCancel: () => void;
+}
+
+/**
+ * 轻量文本输入弹窗 —— 用于 Canvas 右键菜单中需要用户输入文本的场景。
+ * 特点：多行输入、自动聚焦、Ctrl+Enter 确认、ESC 取消。
+ */
+const PromptModal: React.FC<PromptModalProps> = ({
+  open,
+  label = '请输入',
+  placeholder,
+  defaultValue = '',
+  onConfirm,
+  onCancel,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const textAreaRef = useRef<TextAreaRef>(null);
+
+  // 每次打开时重置为 defaultValue 并聚焦
+  useEffect(() => {
+    if (open) {
+      setValue(defaultValue);
+      requestAnimationFrame(() => {
+        textAreaRef.current?.focus();
+      });
+    }
+  }, [open, defaultValue]);
+
+  const handleOk = () => {
+    onConfirm(value.trim());
+  };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onCancel}
+      onOk={handleOk}
+      okText="确认"
+      cancelText="取消"
+      width={480}
+      centered
+      destroyOnClose
+      closable={false}
+      styles={{
+        header: { padding: '16px 20px 0', marginBottom: 0 },
+        body: { padding: '12px 20px 16px' },
+        footer: { padding: '0 20px 16px' },
+      }}
+      title={
+        <span style={{ fontSize: 13, fontWeight: 500, color: '#595959' }}>
+          {label}
+        </span>
+      }
+    >
+      <Input.TextArea
+        ref={textAreaRef}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            handleOk();
+          }
+        }}
+        style={{ borderRadius: 6 }}
+        autoSize={{ minRows: 3, maxRows: 8 }}
+        allowClear
+      />
+    </Modal>
+  );
+};
+
+export default PromptModal;

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

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Slider, Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+interface RadarChartDataSourceModalProps {
+  open: boolean;
+  code: string;
+  onConfirm: (result: {
+    dimensionCount: number;
+    dataDescription: string;
+    code: string;
+  }) => void;
+  onCancel: () => void;
+}
+
+const RadarChartDataSourceModal: React.FC<RadarChartDataSourceModalProps> = ({
+  open,
+  code,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const [dimensionCount, setDimensionCount] = useState(5);
+  const [dataDescription, setDataDescription] = useState('');
+
+  // 打开时从 code 解析当前 indicators 数量作为默认值
+  useEffect(() => {
+    if (open) {
+      const matches = code.match(/\{\s*name:/g);
+      const count = matches ? matches.length : 5;
+      setDimensionCount(Math.min(8, Math.max(3, count)));
+      setDataDescription('');
+    }
+  }, [open, code]);
+
+  const handleConfirm = () => {
+    onConfirm({
+      dimensionCount,
+      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' }}>
+            维度数量：{dimensionCount}
+          </div>
+          <Slider
+            min={3}
+            max={8}
+            value={dimensionCount}
+            onChange={setDimensionCount}
+            marks={{ 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8' }}
+          />
+        </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.radarPlaceholder')}
+            rows={3}
+            style={{ resize: 'vertical' }}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default RadarChartDataSourceModal;

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

@@ -0,0 +1,204 @@
+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';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface TableDataSourceResult {
+  columns: string[];
+  wantPagination: boolean;
+  pageSize: number;
+  dataDescription: string;
+  code: string;
+}
+
+interface TableDataSourceModalProps {
+  open: boolean;
+  code: string;
+  onConfirm: (result: TableDataSourceResult) => void;
+  onCancel: () => void;
+}
+
+// ─── 从 code 解析已有列名 ─────────────────────────────────────────────────────
+
+function parseColumnTitles(code: string): string[] {
+  const titles: string[] = [];
+  const regex = /title\s*:\s*"([^"]*)"/g;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(code)) !== null) {
+    titles.push(match[1]);
+  }
+  return titles.length > 0 ? titles : [''];
+}
+
+// ─── 从 code 检测 pagination 状态 ─────────────────────────────────────────────
+
+function parsePagination(code: string): { has: boolean; pageSize: number } {
+  const has = /pagination\s*=\s*\{\{/.test(code);
+  const pageSizeMatch = code.match(/pageSize\s*:\s*(\d+)/);
+  return { has, pageSize: pageSizeMatch ? Number(pageSizeMatch[1]) : 10 };
+}
+
+// ─── 组件 ─────────────────────────────────────────────────────────────────────
+
+const TableDataSourceModal: React.FC<TableDataSourceModalProps> = ({
+  open,
+  code,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const [columns, setColumns] = useState<string[]>(['']);
+  const [wantPagination, setWantPagination] = useState(false);
+  const [pageSize, setPageSize] = useState(10);
+  const [dataDescription, setDataDescription] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setColumns(parseColumnTitles(code));
+      const pagination = parsePagination(code);
+      setWantPagination(pagination.has);
+      setPageSize(pagination.pageSize);
+      setDataDescription('');
+    }
+  }, [open, code]);
+
+  const handleConfirm = () => {
+    const validColumns = columns.filter((c) => c.trim() !== '');
+    onConfirm({
+      columns: validColumns.length > 0 ? validColumns : ['名称'],
+      wantPagination,
+      pageSize,
+      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={480}
+      centered
+      destroyOnClose
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {/* 列配置 */}
+        <div>
+          <div style={{ marginBottom: 8, fontSize: 13, color: '#595959' }}>
+            列配置：
+          </div>
+          {columns.map((col, index) => (
+            <div
+              key={index}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                marginBottom: 8,
+              }}
+            >
+              <Input
+                size="small"
+                placeholder={t('canvas.dataSourceModal.columnPlaceholder')}
+                value={col}
+                onChange={(e) => {
+                  const next = [...columns];
+                  next[index] = e.target.value;
+                  setColumns(next);
+                }}
+                style={{ width: 200 }}
+              />
+              {columns.length > 1 && (
+                <MinusCircleOutlined
+                  style={{ color: '#ff4d4f', cursor: 'pointer' }}
+                  onClick={() =>
+                    setColumns(columns.filter((_, i) => i !== index))
+                  }
+                />
+              )}
+            </div>
+          ))}
+          <Button
+            type="dashed"
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={() => setColumns([...columns, ''])}
+          >
+            新增列
+          </Button>
+        </div>
+
+        {/* 分页选项 */}
+        <div>
+          <Checkbox
+            checked={wantPagination}
+            onChange={(e) => setWantPagination(e.target.checked)}
+          >
+            包含分页
+          </Checkbox>
+          {wantPagination && (
+            <div
+              style={{
+                marginTop: 8,
+                marginLeft: 24,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+              }}
+            >
+              <span style={{ flexShrink: 0, fontSize: 13, color: '#595959' }}>
+                每页条数：
+              </span>
+              <Select
+                size="small"
+                value={pageSize}
+                onChange={(v) => setPageSize(v)}
+                style={{ width: 100 }}
+                options={[
+                  {
+                    label: `10 ${t('canvas.dataSourceModal.pageSizeUnit')}`,
+                    value: 10,
+                  },
+                  {
+                    label: `20 ${t('canvas.dataSourceModal.pageSizeUnit')}`,
+                    value: 20,
+                  },
+                  {
+                    label: `50 ${t('canvas.dataSourceModal.pageSizeUnit')}`,
+                    value: 50,
+                  },
+                  {
+                    label: `100 ${t('canvas.dataSourceModal.pageSizeUnit')}`,
+                    value: 100,
+                  },
+                ]}
+              />
+            </div>
+          )}
+        </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.tablePlaceholder')}
+            rows={3}
+            style={{ resize: 'vertical' }}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default TableDataSourceModal;