@gadmin2n/schematics 0.0.71 → 0.0.74

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

@@ -1,192 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { message, Modal, Spin } from 'antd';
-import CanvasPageView from './CanvasPage';
-import PublishModal from './PublishModal';
-import type { SavedCanvas, CanvasItem } from './types';
-import type { LayoutItem } from 'react-grid-layout';
-import { fetchCanvas, updateCanvas, unpublishCanvas } from './canvasApi';
-import { useTranslation } from 'react-i18next';
-
-const CanvasEditPage: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const [canvas, setCanvas] = useState<SavedCanvas | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  const [canvasItems, setCanvasItems] = useState<CanvasItem[]>([]);
-  const [canvasLayout, setCanvasLayout] = useState<LayoutItem[]>([]);
-  const [isDirty, setIsDirty] = useState(false);
-  const [publishModalOpen, setPublishModalOpen] = useState(false);
-  const [unpublishModalOpen, setUnpublishModalOpen] = useState(false);
-  const [unpublishing, setUnpublishing] = useState(false);
-
-  const liveRef = useRef({
-    canvas,
-    isDirty,
-    canvasItems,
-    canvasLayout,
-  });
-  liveRef.current = {
-    canvas,
-    isDirty,
-    canvasItems,
-    canvasLayout,
-  };
-
-  // ── Load canvas by ID ──
-  useEffect(() => {
-    if (!id) return;
-    console.log('[CanvasEditPage] loading canvas id:', id);
-    setLoading(true);
-    fetchCanvas(id)
-      .then((data) => {
-        console.log('[CanvasEditPage] fetchCanvas result:', data);
-        if (!data) {
-          message.error('Canvas 不存在');
-          navigate('/admin/canvas');
-          return;
-        }
-        setCanvas(data);
-        setCanvasItems(data.items ?? []);
-        setCanvasLayout(data.layout ?? []);
-      })
-      .catch((err) => {
-        console.error('[CanvasEditPage] load failed:', err);
-        message.error('加载 Canvas 失败');
-        navigate('/admin/canvas');
-      })
-      .finally(() => setLoading(false));
-  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // ── Change handlers ──
-  const handleItemsChange = useCallback((items: CanvasItem[]) => {
-    setCanvasItems(items);
-    setIsDirty(true);
-  }, []);
-
-  const handleLayoutChange = useCallback((layout: LayoutItem[]) => {
-    setCanvasLayout(layout);
-    setIsDirty(true);
-  }, []);
-
-  const handleBothChange = useCallback(
-    (items: CanvasItem[], layout: LayoutItem[]) => {
-      setCanvasItems(items);
-      setCanvasLayout(layout);
-      setIsDirty(true);
-    },
-    [],
-  );
-
-  // ── Save ──
-  const handleSave = useCallback(async () => {
-    const { canvas, canvasItems, canvasLayout } = liveRef.current;
-    if (!canvas) return;
-    try {
-      await updateCanvas(canvas.id, {
-        items: canvasItems,
-        layout: canvasLayout,
-      });
-      setIsDirty(false);
-      message.success(t('canvas.edit.saved'));
-    } catch {
-      message.error(t('canvas.edit.saveFailed'));
-    }
-  }, []);
-
-  // ── Back to list ──
-  const handleBack = useCallback(() => {
-    navigate('/admin/canvas');
-  }, [navigate]);
-
-  // ── Unpublish ──
-  const handleUnpublish = useCallback(async () => {
-    const { canvas } = liveRef.current;
-    if (!canvas) return;
-    setUnpublishing(true);
-    try {
-      await unpublishCanvas(canvas.id);
-      setCanvas((prev) =>
-        prev ? { ...prev, publishedPageCode: null, publishedAt: null } : prev,
-      );
-      message.success(t('canvas.unpublishSuccess'));
-      setUnpublishModalOpen(false);
-    } catch {
-      message.error(t('canvas.unpublishFailed'));
-    } finally {
-      setUnpublishing(false);
-    }
-  }, [t]);
-
-  if (loading || !canvas) {
-    console.log(
-      '[CanvasEditPage] rendering loading state, loading=',
-      loading,
-      'canvas=',
-      canvas,
-    );
-    return (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: 400,
-        }}
-      >
-        <Spin size="large" />
-      </div>
-    );
-  }
-
-  console.log('[CanvasEditPage] rendering editor for:', canvas.name);
-
-  return (
-    <>
-      <CanvasPageView
-        items={canvasItems}
-        layout={canvasLayout}
-        isDirty={isDirty}
-        canvasName={canvas.name}
-        isPublished={!!canvas.publishedPageCode}
-        onItemsChange={handleItemsChange}
-        onLayoutChange={handleLayoutChange}
-        onBothChange={handleBothChange}
-        onSave={handleSave}
-        onBack={handleBack}
-        onPublish={() => setPublishModalOpen(true)}
-        onUnpublish={() => setUnpublishModalOpen(true)}
-      />
-      <PublishModal
-        open={publishModalOpen}
-        onClose={() => setPublishModalOpen(false)}
-        activeCanvas={canvas}
-        onPublishSuccess={() => {
-          if (id) {
-            fetchCanvas(id)
-              .then((data) => {
-                if (data) setCanvas(data);
-              })
-              .catch(() => {});
-          }
-        }}
-      />
-      <Modal
-        title={t('canvas.unpublish')}
-        open={unpublishModalOpen}
-        onOk={handleUnpublish}
-        onCancel={() => setUnpublishModalOpen(false)}
-        okText={t('canvas.unpublish')}
-        okButtonProps={{ danger: true }}
-        cancelText={t('canvas.publishModal.cancel')}
-        confirmLoading={unpublishing}
-      >
-        <p>{t('canvas.unpublishConfirm')}</p>
-      </Modal>
-    </>
-  );
-};
-
-export default CanvasEditPage;

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

@@ -1,409 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Button, message, Tag, Spin, Modal, Input } from 'antd';
-import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import {
-  fetchCanvases,
-  createCanvas,
-  deleteCanvas,
-  updateCanvas,
-} from './canvasApi';
-import type { SavedCanvas } from './types';
-import IsolatedLivePreview from './IsolatedLivePreview';
-import { useTranslation } from 'react-i18next';
-
-const COLS = 48;
-const ROW_HEIGHT = 10;
-const MARGIN = 8;
-
-/**
- * 将 canvas items + layout 转为绝对定位的 JSX，模拟 GridLayout 效果。
- * 使用内联样式绝对定位，无需 import，LivePreview scope 可直接渲染。
- */
-function buildPreviewCode(canvas: SavedCanvas): string {
-  const { items, layout } = canvas;
-  const itemById = Object.fromEntries(items.map((it) => [it.id, it]));
-
-  // 用 1200px 作为容器宽度来计算列宽
-  const containerWidth = 1200;
-  const colWidth = (containerWidth - MARGIN * (COLS + 1)) / COLS;
-
-  const children = layout
-    .map((l) => {
-      const item = itemById[l.i];
-      if (!item) return '';
-      const x = Math.round(MARGIN + l.x * (colWidth + MARGIN));
-      const y = Math.round(MARGIN + l.y * (ROW_HEIGHT + MARGIN));
-      const w = Math.round(l.w * colWidth + (l.w - 1) * MARGIN);
-      const h = Math.round(l.h * ROW_HEIGHT + (l.h - 1) * MARGIN);
-      const code = item.code.trim();
-      const isFunction =
-        code.startsWith('()') ||
-        code.startsWith('(props)') ||
-        code.startsWith('function ');
-      const embeddedCode = isFunction ? `{(${code})()}` : code;
-      return `<div style={{ position: 'absolute', left: ${x}, top: ${y}, width: ${w}, height: ${h}, background: '#fff', overflow: 'hidden' }}>\n  ${embeddedCode}\n</div>`;
-    })
-    .filter(Boolean);
-
-  const totalH =
-    layout.reduce((m, l) => Math.max(m, l.y + l.h), 0) * (ROW_HEIGHT + MARGIN);
-
-  return `<div style={{ position: 'relative', width: ${containerWidth}, height: ${totalH}, background: '#f0f0f0' }}>\n${children.join('\n')}\n</div>`;
-}
-
-const CanvasListPage: React.FC = () => {
-  const navigate = useNavigate();
-  const [canvases, setCanvases] = useState<SavedCanvas[]>([]);
-  const [loading, setLoading] = useState(true);
-  const { t } = useTranslation();
-
-  console.log('[CanvasListPage] rendered, pathname:', window.location.pathname);
-
-  useEffect(() => {
-    fetchCanvases()
-      .then(setCanvases)
-      .catch(() => message.error(t('canvas.list.loadFailed')))
-      .finally(() => setLoading(false));
-  }, []);
-
-  const handleCreate = useCallback(async () => {
-    try {
-      const nextNum =
-        Math.max(
-          0,
-          ...canvases
-            .map((p) => {
-              const m = p.name.match(/^Canvas\s+(\d+)$/);
-              return m ? parseInt(m[1], 10) : 0;
-            })
-            .filter((n) => n > 0),
-        ) + 1;
-      const newCanvas = await createCanvas(`Canvas ${nextNum}`);
-      navigate(`/admin/canvas/edit/${newCanvas.id}`);
-    } catch {
-      message.error(t('canvas.list.createFailed'));
-    }
-  }, [canvases, navigate]);
-
-  const handleDelete = useCallback(async (id: string) => {
-    try {
-      await deleteCanvas(id);
-      setCanvases((prev) => prev.filter((c) => c.id !== id));
-      message.success(t('canvas.list.deleted'));
-    } catch {
-      message.error(t('canvas.list.deleteFailed'));
-    }
-  }, []);
-
-  // ── 重命名逻辑 ──
-  const [renameModal, setRenameModal] = useState<{
-    id: string;
-    name: string;
-    isPublished: boolean;
-  } | null>(null);
-  const [renameValue, setRenameValue] = useState('');
-  const [renameError, setRenameError] = useState('');
-  const [renameLoading, setRenameLoading] = useState(false);
-  const renameInputRef = useRef<any>(null);
-
-  const openRename = useCallback((canvas: SavedCanvas) => {
-    setRenameModal({
-      id: canvas.id,
-      name: canvas.name,
-      isPublished: !!canvas.publishedPageCode,
-    });
-    setRenameValue(canvas.name);
-    setRenameError('');
-  }, []);
-
-  const handleRename = useCallback(async () => {
-    if (!renameModal) return;
-    const trimmed = renameValue.trim();
-    if (!trimmed) {
-      setRenameError(t('canvas.list.renameEmpty'));
-      return;
-    }
-    if (trimmed === renameModal.name) {
-      setRenameModal(null);
-      return;
-    }
-    setRenameLoading(true);
-    try {
-      await updateCanvas(renameModal.id, { name: trimmed });
-      setCanvases((prev) =>
-        prev.map((c) =>
-          c.id === renameModal.id ? { ...c, name: trimmed } : c,
-        ),
-      );
-      setRenameModal(null);
-      message.success(t('canvas.list.renamed'));
-      // 如果已发布，清除导航缓存并刷新
-      if (renameModal.isPublished) {
-        sessionStorage.removeItem('oiterpages');
-        sessionStorage.removeItem('oiterprolepages');
-        window.location.reload();
-      }
-    } catch (err: any) {
-      if (err?.response?.status === 409 || err?.status === 409) {
-        setRenameError(t('canvas.list.renameDuplicate'));
-      } else {
-        message.error(t('canvas.list.renameFailed'));
-      }
-    } finally {
-      setRenameLoading(false);
-    }
-  }, [renameModal, renameValue]);
-
-  // ── 删除确认 ──
-  const [deleteConfirm, setDeleteConfirm] = useState<SavedCanvas | null>(null);
-
-  if (loading) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: 400,
-        }}
-      >
-        <Spin size="large" />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      style={{
-        padding: 24,
-        background: '#f0f2f5',
-        minHeight: 'calc(100vh - 64px)',
-      }}
-    >
-      {/* Header */}
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 24,
-        }}
-      >
-        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>
-          {t('canvas.list.title')}
-        </h2>
-        <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
-          {t('canvas.list.create')}
-        </Button>
-      </div>
-
-      {/* Grid */}
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(3, 1fr)',
-          gap: 20,
-        }}
-      >
-        {canvases.map((canvas) => (
-          <div
-            key={canvas.id}
-            style={{
-              background: '#fff',
-              borderRadius: 8,
-              overflow: 'hidden',
-              border: '1px solid #e5e5e5',
-              cursor: 'pointer',
-              transition: 'box-shadow 0.2s',
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLDivElement).style.boxShadow =
-                '0 4px 12px rgba(0,0,0,0.1)';
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLDivElement).style.boxShadow = 'none';
-            }}
-            onClick={() => navigate(`/admin/canvas/edit/${canvas.id}`)}
-          >
-            {/* Thumbnail */}
-            <div
-              style={{
-                height: 180,
-                overflow: 'hidden',
-                background: '#f0f0f0',
-                position: 'relative',
-                pointerEvents: 'none',
-              }}
-            >
-              {canvas.items.length > 0 ? (
-                <div
-                  style={{
-                    transform: 'scale(0.28)',
-                    transformOrigin: 'top left',
-                    width: 1200,
-                    height: 640,
-                  }}
-                >
-                  <IsolatedLivePreview code={buildPreviewCode(canvas)} />
-                </div>
-              ) : (
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100%',
-                    color: '#bbb',
-                    fontSize: 14,
-                  }}
-                >
-                  空画布
-                </div>
-              )}
-            </div>
-
-            {/* Info */}
-            <div
-              style={{ padding: '12px 16px', borderTop: '1px solid #f0f0f0' }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  marginBottom: 8,
-                }}
-              >
-                <span
-                  style={{
-                    fontWeight: 500,
-                    fontSize: 14,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    maxWidth: 160,
-                  }}
-                >
-                  {canvas.name}
-                </span>
-                <Tag color={canvas.publishedPageCode ? 'green' : 'default'}>
-                  {canvas.publishedPageCode
-                    ? t('canvas.list.published')
-                    : t('canvas.list.unpublished')}
-                </Tag>
-              </div>
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                }}
-              >
-                <span style={{ fontSize: 12, color: '#999' }}>
-                  修改于 {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
-                </span>
-                <div style={{ display: 'flex', gap: 4 }}>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<EditOutlined />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      openRename(canvas);
-                    }}
-                    style={{ fontSize: 12, color: '#666' }}
-                  >
-                    {t('canvas.list.rename')}
-                  </Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    danger
-                    icon={<DeleteOutlined />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setDeleteConfirm(canvas);
-                    }}
-                    style={{ fontSize: 12 }}
-                  >
-                    {t('canvas.list.deleteBtn')}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Empty state */}
-      {canvases.length === 0 && (
-        <div style={{ textAlign: 'center', color: '#999', marginTop: 80 }}>
-          <p>还没有 Canvas，点击上方按钮新建一个吧</p>
-        </div>
-      )}
-
-      {/* 重命名 Modal */}
-      <Modal
-        title={t('canvas.list.renameTitle')}
-        open={!!renameModal}
-        onOk={handleRename}
-        onCancel={() => setRenameModal(null)}
-        confirmLoading={renameLoading}
-        okText={t('canvas.list.ok')}
-        cancelText={t('canvas.list.cancel')}
-        afterOpenChange={(open) => {
-          if (open) {
-            setTimeout(() => renameInputRef.current?.select(), 50);
-          }
-        }}
-      >
-        <Input
-          ref={renameInputRef}
-          value={renameValue}
-          onChange={(e) => {
-            setRenameValue(e.target.value);
-            setRenameError('');
-          }}
-          onPressEnter={handleRename}
-          status={renameError ? 'error' : undefined}
-          placeholder={t('canvas.list.renamePlaceholder')}
-        />
-        {renameModal?.isPublished && (
-          <div style={{ color: '#faad14', fontSize: 12, marginTop: 8 }}>
-            {t('canvas.list.renamePublishedWarning')}
-          </div>
-        )}
-        {renameError && (
-          <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>
-            {renameError}
-          </div>
-        )}
-      </Modal>
-
-      {/* 删除确认 Modal */}
-      <Modal
-        title={t('canvas.list.deleteTitle')}
-        open={!!deleteConfirm}
-        onOk={() => {
-          if (deleteConfirm) {
-            handleDelete(deleteConfirm.id);
-            setDeleteConfirm(null);
-          }
-        }}
-        onCancel={() => setDeleteConfirm(null)}
-        okText={t('canvas.list.deleteBtn')}
-        okButtonProps={{ danger: true }}
-        cancelText={t('canvas.list.cancel')}
-      >
-        <p>
-          {deleteConfirm?.publishedPageCode
-            ? t('canvas.list.deletePublishedConfirm')
-            : t('canvas.list.deleteConfirm')}
-        </p>
-      </Modal>
-    </div>
-  );
-};
-
-export default CanvasListPage;