@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,236 @@
+/**
+ * LivePreview：用 sucrase 将用户输入的 JSX 字符串实时编译并渲染。
+ *
+ * 工作原理：
+ * 1. 将 code 字符串包裹成完整的函数组件
+ * 2. 用 sucrase 将 TSX → JS
+ * 3. 用 new Function 执行，注入 React + 所有组件
+ * 4. 渲染返回的组件，捕获错误展示友好提示
+ */
+import React, { useMemo, useState, useEffect } from 'react';
+import { transform } from 'sucrase';
+import { Alert } from 'antd';
+
+// 引入所有 canvas 需要的组件
+import { NumCard } from '@/components/canvas/NumCard';
+import { NumLineCard } from '@/components/canvas/NumLineCard';
+import { Filter } from '@/components/canvas/Filter';
+import { BarChart } from '@/components/canvas/BarChart';
+import { LineChart } from '@/components/canvas/LineChart';
+import { PieChart } from '@/components/canvas/PieChart';
+import { RadarChart } from '@/components/canvas/RadarChart';
+import { TreemapChart } from '@/components/canvas/TreemapChart';
+import { Table } from '@/components/canvas/Table';
+import { WorldMap } from '@/components/canvas/WorldMap';
+import { ChartViewer } from '@/components/canvas/ChartViewer';
+import { Section } from '@/components/canvas/Section';
+import * as echarts from 'echarts';
+import { Form, Select, Input, DatePicker, Tag, Button, Space } from 'antd';
+import {
+  CaretUpOutlined,
+  CaretDownOutlined,
+  UserOutlined,
+  InfoCircleFilled,
+  RightOutlined,
+} from '@ant-design/icons';
+
+// 注入 scope：code 里可以直接用这些名称
+const SCOPE: Record<string, unknown> = {
+  React,
+  NumCard,
+  NumLineCard,
+  Filter,
+  BarChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  TreemapChart,
+  Table,
+  WorldMap,
+  ChartViewer,
+  Section,
+  echarts,
+  Form,
+  Select,
+  Input,
+  DatePicker,
+  Tag,
+  Button,
+  Space,
+  CaretUpOutlined,
+  CaretDownOutlined,
+  UserOutlined,
+  InfoCircleFilled,
+  RightOutlined,
+};
+
+function compileAndRun(code: string): React.ComponentType | null {
+  // 如果 code 是箭头函数或具名函数，直接把它作为组件使用
+  const trimmed = code.trim();
+  const isComponentFunction =
+    trimmed.startsWith('()') ||
+    trimmed.startsWith('(props)') ||
+    trimmed.startsWith('function ');
+
+  const wrapped = isComponentFunction
+    ? `
+    const __CanvasComponent = ${trimmed};
+    return __CanvasComponent;
+  `
+    : `
+    function __CanvasComponent() {
+      return (
+        <React.Fragment>
+          ${code}
+        </React.Fragment>
+      );
+    }
+    return __CanvasComponent;
+  `;
+
+  // sucrase 编译
+  const { code: compiled } = transform(wrapped, {
+    transforms: ['jsx', 'typescript'],
+    jsxRuntime: 'classic',
+    production: false,
+  });
+
+  // 执行：将 scope 里的变量作为参数注入
+  const scopeKeys = Object.keys(SCOPE);
+  const scopeValues = Object.values(SCOPE);
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  const fn = new Function(...scopeKeys, compiled);
+  return fn(...scopeValues) as React.ComponentType;
+}
+
+interface LivePreviewProps {
+  code: string;
+}
+
+const LivePreview: React.FC<LivePreviewProps> = ({ code }) => {
+  const [renderKey, setRenderKey] = useState(0);
+
+  const { Component, error } = useMemo(() => {
+    try {
+      const comp = compileAndRun(code);
+      return { Component: comp, error: null };
+    } catch (e: unknown) {
+      return {
+        Component: null,
+        error: e instanceof Error ? e.message : String(e),
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [code]);
+
+  // After each new Component mounts, force all ECharts instances to resize.
+  // ECharts initializes in useLayoutEffect (before paint), at which point the container
+  // may not yet have its final layout size. We watch for the [_echarts_instance_] attribute
+  // appearing on DOM nodes and immediately resize those charts.
+  useEffect(() => {
+    if (!Component) return;
+
+    const resizeAll = () => {
+      document
+        .querySelectorAll<HTMLDivElement>('[_echarts_instance_]')
+        .forEach((el) => {
+          const chart = echarts.getInstanceByDom(el);
+          chart?.resize();
+        });
+    };
+
+    // MutationObserver: fires as soon as ECharts stamps [_echarts_instance_] onto a div
+    const mo = new MutationObserver(() => {
+      requestAnimationFrame(resizeAll);
+    });
+    mo.observe(document.body, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['_echarts_instance_'],
+    });
+
+    // Fallback timers for any charts already present or that stamp the attribute before MO fires
+    const id1 = window.setTimeout(resizeAll, 80);
+    const id2 = window.setTimeout(resizeAll, 400);
+
+    return () => {
+      mo.disconnect();
+      window.clearTimeout(id1);
+      window.clearTimeout(id2);
+    };
+  }, [Component]);
+
+  if (error) {
+    return (
+      <Alert
+        type="error"
+        message="编译 / 运行错误"
+        description={
+          <pre style={{ margin: 0, fontSize: 12, whiteSpace: 'pre-wrap' }}>
+            {error}
+          </pre>
+        }
+        style={{ margin: 16 }}
+      />
+    );
+  }
+
+  if (!Component) return null;
+
+  return (
+    <ErrorBoundary key={renderKey} onReset={() => setRenderKey((k) => k + 1)}>
+      <div style={{ width: '100%', height: '100%' }}>
+        <Component />
+      </div>
+    </ErrorBoundary>
+  );
+};
+
+// ─── ErrorBoundary ─────────────────────────────────────────────────────────────
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  onReset: () => void;
+}
+
+interface ErrorBoundaryState {
+  error: string | null;
+}
+
+class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(e: Error): ErrorBoundaryState {
+    return { error: e.message };
+  }
+
+  override componentDidCatch(error: Error) {
+    console.error('[LivePreview error]', error);
+  }
+
+  override render() {
+    if (this.state.error) {
+      return (
+        <Alert
+          type="error"
+          message="运行时错误"
+          description={
+            <pre style={{ margin: 0, fontSize: 12, whiteSpace: 'pre-wrap' }}>
+              {this.state.error}
+            </pre>
+          }
+          style={{ margin: 16 }}
+        />
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default LivePreview;

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

@@ -0,0 +1,200 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Modal, Form, Input, TreeSelect, message } from 'antd';
+import type { SavedCanvas } from './types';
+import { publishCanvas } from './canvasApi';
+import { useTranslation } from 'react-i18next';
+
+interface RawPage {
+  id: number;
+  code: string;
+  name: string;
+  zhName?: string;
+  enName?: string;
+  parentId?: number | null;
+  sortOrder?: number;
+}
+
+interface TreeNode {
+  title: React.ReactNode;
+  value: string;
+  key: string;
+  children?: TreeNode[];
+}
+
+function buildTree(pages: RawPage[], rootTitle: string): TreeNode[] {
+  const children = new Map<number | null, RawPage[]>();
+  for (const p of pages) {
+    const pid = p.parentId ?? null;
+    if (!children.has(pid)) children.set(pid, []);
+    children.get(pid)!.push(p);
+  }
+  function makeNode(p: RawPage): TreeNode {
+    const label = p.zhName || p.enName || p.name;
+    return {
+      title: label,
+      value: p.code,
+      key: p.code,
+      children: (children.get(p.id) ?? [])
+        .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+        .map(makeNode),
+    };
+  }
+  return [
+    { title: rootTitle, value: '__root__', key: '__root__' },
+    ...(children.get(null) ?? [])
+      .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+      .map(makeNode),
+  ];
+}
+
+function toSlug(name: string): string {
+  return (
+    name
+      .toLowerCase()
+      .replace(/[\s_]+/g, '-')
+      .replace(/[^a-z0-9一-鿿-]/g, '')
+      .replace(/^-+|-+$/g, '') || 'canvas-page'
+  );
+}
+
+interface PublishModalProps {
+  open: boolean;
+  onClose: () => void;
+  activeCanvas: SavedCanvas;
+  onPublishSuccess?: () => void;
+}
+
+const PublishModal: React.FC<PublishModalProps> = ({
+  open,
+  onClose,
+  activeCanvas,
+  onPublishSuccess,
+}) => {
+  const [form] = Form.useForm();
+  const [submitting, setSubmitting] = useState(false);
+  const [treeData, setTreeData] = useState<TreeNode[]>([]);
+  const [pagesLoading, setPagesLoading] = useState(false);
+  const { t } = useTranslation();
+
+  // Load page tree when modal opens
+  useEffect(() => {
+    if (!open) return;
+    setPagesLoading(true);
+    fetch('/api/page/findMany', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ where: {}, orderBy: { sortOrder: 'asc' } }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        const pages: RawPage[] = data?.data ?? [];
+        setTreeData(buildTree(pages, t('canvas.publishModal.rootPage')));
+      })
+      .catch(() => message.error(t('canvas.publishModal.loadPagesFailed')))
+      .finally(() => setPagesLoading(false));
+  }, [open, t]);
+
+  // Auto-generate slug from pageName
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const name = e.target.value;
+      form.setFieldValue('slug', toSlug(name));
+    },
+    [form],
+  );
+
+  const handleOk = useCallback(async () => {
+    try {
+      const values = await form.validateFields();
+      setSubmitting(true);
+
+      const parentPageCode =
+        values.parentPageCode === '__root__'
+          ? undefined
+          : values.parentPageCode;
+
+      await publishCanvas(activeCanvas.id, {
+        slug: values.slug,
+        pageName: values.pageName,
+        parentPageCode,
+      });
+
+      message.success(t('canvas.publishModal.success'));
+      form.resetFields();
+      onPublishSuccess?.();
+      onClose();
+    } catch {
+      // form validation or API error
+    } finally {
+      setSubmitting(false);
+    }
+  }, [activeCanvas.id, form, onClose, onPublishSuccess, t]);
+
+  const handleCancel = useCallback(() => {
+    form.resetFields();
+    onClose();
+  }, [form, onClose]);
+
+  return (
+    <Modal
+      title={t('canvas.publishModal.title')}
+      open={open}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okText={t('canvas.publishModal.publishBtn')}
+      cancelText={t('canvas.publishModal.cancel')}
+      confirmLoading={submitting}
+      width={480}
+    >
+      <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
+        <Form.Item
+          name="pageName"
+          label={t('canvas.publishModal.pageName')}
+          rules={[
+            {
+              required: true,
+              message: t('canvas.publishModal.pageNameRequired'),
+            },
+          ]}
+        >
+          <Input
+            placeholder={t('canvas.publishModal.pageNamePlaceholder')}
+            autoFocus
+            onChange={handleNameChange}
+          />
+        </Form.Item>
+        <Form.Item
+          name="slug"
+          label="Slug"
+          rules={[{ required: true, message: 'Please enter a slug' }]}
+          initialValue={toSlug(activeCanvas.name)}
+        >
+          <Input placeholder="game-dashboard" />
+        </Form.Item>
+        <Form.Item
+          name="parentPageCode"
+          label={t('canvas.publishModal.parentPage')}
+          rules={[
+            {
+              required: true,
+              message: t('canvas.publishModal.parentPageRequired'),
+            },
+          ]}
+        >
+          <TreeSelect
+            placeholder={t('canvas.publishModal.parentPagePlaceholder')}
+            loading={pagesLoading}
+            treeData={treeData}
+            treeDefaultExpandAll
+            showSearch
+            treeNodeFilterProp="title"
+            style={{ width: '100%' }}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default PublishModal;

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

@@ -0,0 +1,92 @@
+import type { SavedCanvas, CanvasItem } from './types';
+import type { LayoutItem } from 'react-grid-layout';
+
+const BASE = '/api/canvas';
+
+// 服务端返回的 Canvas 形状（createdAt 是 ISO 字符串）
+interface CanvasRecord {
+  id: string;
+  name: string;
+  userId: string;
+  items: CanvasItem[];
+  layout: LayoutItem[];
+  publishedPageCode: string | null;
+  publishedAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+function toSavedCanvas(r: CanvasRecord): SavedCanvas {
+  return {
+    id: r.id,
+    name: r.name,
+    items: r.items ?? [],
+    layout: r.layout ?? [],
+    publishedPageCode: r.publishedPageCode ?? null,
+    publishedAt: r.publishedAt ? new Date(r.publishedAt).getTime() : null,
+    createdAt: new Date(r.createdAt).getTime(),
+    updatedAt: new Date(r.updatedAt).getTime(),
+  };
+}
+
+async function request<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, {
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    ...init,
+  });
+  if (!res.ok) throw new Error(`Canvas API error: ${res.status}`);
+  return res.json() as Promise<T>;
+}
+
+export async function fetchCanvases(): Promise<SavedCanvas[]> {
+  const records = await request<CanvasRecord[]>(BASE);
+  return records.map(toSavedCanvas);
+}
+
+export async function fetchCanvas(id: string): Promise<SavedCanvas | null> {
+  const record = await request<CanvasRecord | null>(`${BASE}/${id}`);
+  if (!record) return null;
+  return toSavedCanvas(record);
+}
+
+export async function createCanvas(name: string): Promise<SavedCanvas> {
+  const record = await request<CanvasRecord>(BASE, {
+    method: 'POST',
+    body: JSON.stringify({ name, items: [], layout: [] }),
+  });
+  return toSavedCanvas(record);
+}
+
+export async function updateCanvas(
+  id: string,
+  patch: Partial<
+    Pick<
+      SavedCanvas,
+      'name' | 'items' | 'layout' | 'publishedPageCode' | 'publishedAt'
+    >
+  >,
+): Promise<void> {
+  await request(`${BASE}/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(patch),
+  });
+}
+
+export async function deleteCanvas(id: string): Promise<void> {
+  await request(`${BASE}/${id}`, { method: 'DELETE' });
+}
+
+export async function publishCanvas(
+  id: string,
+  dto: { slug: string; pageName: string; parentPageCode?: string },
+): Promise<{ success: boolean; pageCode: string }> {
+  return request(`${BASE}/${id}/publish`, {
+    method: 'POST',
+    body: JSON.stringify(dto),
+  });
+}
+
+export async function unpublishCanvas(id: string): Promise<void> {
+  await request(`${BASE}/${id}/unpublish`, { method: 'DELETE' });
+}

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

@@ -0,0 +1,25 @@
+import type React from 'react';
+import ChartViewerConfigModal from './components/ChartViewerConfigModal';
+
+// ─── 通用配置 Modal 接口 ──────────────────────────────────────────────────────
+//
+// 每个配置 Modal 接收统一的 props：
+//   code      — 当前组件的完整 code 字符串
+//   onConfirm — 用户确认后，传回修改后的 code 字符串
+//   onCancel  — 关闭 Modal（取消）
+
+export interface CanvasConfigModalProps {
+  code: string;
+  onConfirm: (newCode: string) => void;
+  onCancel: () => void;
+}
+
+export type ConfigModalComponent = React.FC<CanvasConfigModalProps>;
+
+// ─── 注册表：组件类型 → 配置 Modal ───────────────────────────────────────────
+//
+// 只有在此注册的组件，右键菜单中才会显示"配置"选项。
+
+export const CANVAS_CONFIG_REGISTRY: Record<string, ConfigModalComponent> = {
+  ChartViewer: ChartViewerConfigModal,
+};