@gadmin2n/schematics 0.0.71 → 0.0.72

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;