@gadmin2n/schematics 0.0.71 → 0.0.72

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

@@ -1,236 +0,0 @@
-/**
- * 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

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

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

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