@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
+  Badge,
   Button,
   Card,
+  Dropdown,
   message,
-  Tag,
   Spin,
   Modal,
   Input,
@@ -17,6 +18,8 @@ import {
   EditOutlined,
   ExportOutlined,
   ImportOutlined,
+  MoreOutlined,
+  RocketOutlined,
 } from '@ant-design/icons';
 import {
   fetchCanvases,
@@ -30,10 +33,13 @@ import type { SavedCanvas } from './types';
 import IsolatedLivePreview from './IsolatedLivePreview';
 import { ExportModal } from './components/ExportModal';
 import { ImportModal } from './components/ImportModal';
+import PublishModal from './PublishModal';
 import { useTranslation } from 'react-i18next';
 import { useUserPageAccess } from 'hooks/useUserPageAccess';
 import { customRequest } from 'helpers/http';
 import { useIsAgentAllowed } from 'config/agentAllowed';
+import { PageHeader } from 'components';
+import { PAGE_WRAPPER_STYLE } from 'constants/layout';
 
 const COLS = 48;
 const ROW_HEIGHT = 10;
@@ -210,6 +216,15 @@ const CanvasListPage: React.FC = () => {
   const [exportCanvasId, setExportCanvasId] = useState<string | null>(null);
   const [importModalOpen, setImportModalOpen] = useState(false);
 
+  // ── 发布 ──
+  const [publishCanvas, setPublishCanvas] = useState<SavedCanvas | null>(null);
+
+  const refreshCanvases = useCallback(() => {
+    fetchCanvases()
+      .then(setCanvases)
+      .catch(() => message.error(t('canvas.list.loadFailed')));
+  }, [t]);
+
   // ── 删除确认 ──
   const [deleteConfirm, setDeleteConfirm] = useState<SavedCanvas | null>(null);
 
@@ -229,24 +244,11 @@ const CanvasListPage: React.FC = () => {
   }
 
   return (
-    <div
-      style={{
-        background: '#f0f2f5',
-        minHeight: 'calc(100vh - 64px)',
-      }}
-    >
+    <div style={PAGE_WRAPPER_STYLE}>
       {/* Header */}
-      <Card style={{ marginBottom: 16 }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Typography.Title level={4} style={{ margin: 0 }}>
-            {t('canvas.list.title')}
-          </Typography.Title>
+      <PageHeader
+        title={t('canvas.list.title')}
+        extra={
           <Space>
             {isAgentAllowed && (
               <Button
@@ -266,8 +268,8 @@ const CanvasListPage: React.FC = () => {
               </Button>
             )}
           </Space>
-        </div>
-      </Card>
+        }
+      />
 
       {/* Grid */}
       <Card>
@@ -286,10 +288,10 @@ const CanvasListPage: React.FC = () => {
               <div
                 key={canvas.id}
                 style={{
-                  background: '#fff',
+                  background: 'var(--ant-color-bg-container)',
                   borderRadius: 8,
                   overflow: 'hidden',
-                  border: '1px solid #e5e5e5',
+                  border: '1px solid var(--ant-color-border-secondary)',
                   cursor: 'pointer',
                   transition: 'box-shadow 0.2s',
                 }}
@@ -307,18 +309,38 @@ const CanvasListPage: React.FC = () => {
                   style={{
                     height: 180,
                     overflow: 'hidden',
-                    background: '#f0f0f0',
+                    background: 'var(--ant-color-fill-quaternary)',
                     position: 'relative',
                     pointerEvents: 'none',
+                    display: 'flex',
+                    justifyContent: 'center',
                   }}
                 >
+                  <span
+                    style={{
+                      position: 'absolute',
+                      top: 8,
+                      left: 12,
+                      zIndex: 1,
+                      fontWeight: 500,
+                      fontSize: 14,
+                      maxWidth: '70%',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {canvas.name}
+                  </span>
                   {canvas.items.length > 0 ? (
                     <div
                       style={{
                         transform: 'scale(0.28)',
-                        transformOrigin: 'top left',
+                        transformOrigin: 'top center',
                         width: 1200,
                         height: 640,
+                        marginTop: 36,
+                        flexShrink: 0,
                       }}
                     >
                       <IsolatedLivePreview code={buildPreviewCode(canvas)} />
@@ -330,111 +352,116 @@ const CanvasListPage: React.FC = () => {
                         alignItems: 'center',
                         justifyContent: 'center',
                         height: '100%',
-                        color: '#bbb',
+                        color: 'var(--ant-color-text-quaternary)',
                         fontSize: 14,
                       }}
                     >
                       空画布
                     </div>
                   )}
+                  {isAgentAllowed && (
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: 8,
+                        right: 8,
+                        pointerEvents: 'auto',
+                      }}
+                    >
+                      <Dropdown
+                        menu={{
+                          items: [
+                            {
+                              key: 'publish',
+                              icon: <RocketOutlined />,
+                              label: t('canvas.publish'),
+                            },
+                            {
+                              key: 'export',
+                              icon: <ExportOutlined />,
+                              label: t('canvas.list.export'),
+                            },
+                            {
+                              key: 'rename',
+                              icon: <EditOutlined />,
+                              label: t('canvas.list.rename'),
+                            },
+                            { type: 'divider' },
+                            {
+                              key: 'delete',
+                              icon: <DeleteOutlined />,
+                              label: t('canvas.list.deleteBtn'),
+                              danger: true,
+                            },
+                          ],
+                          onClick: ({ key, domEvent }) => {
+                            domEvent.stopPropagation();
+                            if (key === 'publish') {
+                              setPublishCanvas(canvas);
+                            } else if (key === 'export') {
+                              setExportCanvasId(canvas.id);
+                              setExportModalOpen(true);
+                            } else if (key === 'rename') {
+                              openRename(canvas);
+                            } else if (key === 'delete') {
+                              setDeleteConfirm(canvas);
+                            }
+                          },
+                        }}
+                        trigger={['click']}
+                      >
+                        <Button
+                          type="text"
+                          size="small"
+                          icon={<MoreOutlined />}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </Dropdown>
+                    </div>
+                  )}
                 </div>
 
                 {/* Info */}
                 <div
                   style={{
                     padding: '12px 16px',
-                    borderTop: '1px solid #f0f0f0',
+                    borderTop: '1px solid var(--ant-color-border-secondary)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
                   }}
                 >
-                  <div
+                  <Badge
+                    status={canvas.publishedPageCode ? 'success' : 'default'}
+                    text={
+                      canvas.publishedPageCode
+                        ? t('canvas.list.published')
+                        : t('canvas.list.unpublished')
+                    }
                     style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      marginBottom: 8,
+                      fontSize: 12,
+                      color: 'var(--ant-color-text-secondary)',
                     }}
-                  >
-                    <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
+                  />
+                  <span
                     style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
+                      fontSize: 12,
+                      color: 'var(--ant-color-text-tertiary)',
                     }}
                   >
-                    <span style={{ fontSize: 12, color: '#999' }}>
-                      修改于{' '}
-                      {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
-                    </span>
-                    <div style={{ display: 'flex', gap: 4 }}>
-                      {isAgentAllowed && (
-                        <>
-                          <Button
-                            type="text"
-                            size="small"
-                            icon={<ExportOutlined />}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              setExportCanvasId(canvas.id);
-                              setExportModalOpen(true);
-                            }}
-                            style={{ fontSize: 12, color: '#666' }}
-                          >
-                            {t('canvas.list.export')}
-                          </Button>
-                          <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>
+                    修改于 {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
+                  </span>
                 </div>
               </div>
             ))}
           </div>
         ) : (
           <div
-            style={{ textAlign: 'center', color: '#999', padding: '80px 0' }}
+            style={{
+              textAlign: 'center',
+              color: 'var(--ant-color-text-tertiary)',
+              padding: '80px 0',
+            }}
           >
             <p>还没有 Canvas，点击上方按钮新建一个吧</p>
           </div>
@@ -469,10 +496,10 @@ const CanvasListPage: React.FC = () => {
                 <div
                   key={canvas.id}
                   style={{
-                    background: '#fff',
+                    background: 'var(--ant-color-bg-container)',
                     borderRadius: 8,
                     overflow: 'hidden',
-                    border: '1px solid #e5e5e5',
+                    border: '1px solid var(--ant-color-border-secondary)',
                     cursor: 'pointer',
                     transition: 'box-shadow 0.2s',
                   }}
@@ -491,7 +518,7 @@ const CanvasListPage: React.FC = () => {
                     style={{
                       height: 180,
                       overflow: 'hidden',
-                      background: '#f0f0f0',
+                      background: 'var(--ant-color-fill-quaternary)',
                       position: 'relative',
                       pointerEvents: 'none',
                     }}
@@ -514,7 +541,7 @@ const CanvasListPage: React.FC = () => {
                           alignItems: 'center',
                           justifyContent: 'center',
                           height: '100%',
-                          color: '#bbb',
+                          color: 'var(--ant-color-text-quaternary)',
                           fontSize: 14,
                         }}
                       >
@@ -526,7 +553,7 @@ const CanvasListPage: React.FC = () => {
                   <div
                     style={{
                       padding: '12px 16px',
-                      borderTop: '1px solid #f0f0f0',
+                      borderTop: '1px solid var(--ant-color-border-secondary)',
                     }}
                   >
                     <div
@@ -549,20 +576,36 @@ const CanvasListPage: React.FC = () => {
                       >
                         {canvas.name}
                       </span>
-                      <Tag
-                        color={canvas.publishedPageCode ? 'green' : 'default'}
-                      >
-                        {canvas.publishedPageCode
-                          ? t('canvas.list.published')
-                          : t('canvas.list.unpublished')}
-                      </Tag>
+                      <Badge
+                        status={
+                          canvas.publishedPageCode ? 'success' : 'default'
+                        }
+                        text={
+                          canvas.publishedPageCode
+                            ? t('canvas.list.published')
+                            : t('canvas.list.unpublished')
+                        }
+                        style={{
+                          fontSize: 12,
+                          color: 'var(--ant-color-text-secondary)',
+                        }}
+                      />
                     </div>
                     <div
-                      style={{ fontSize: 12, color: '#999', marginBottom: 4 }}
+                      style={{
+                        fontSize: 12,
+                        color: 'var(--ant-color-text-tertiary)',
+                        marginBottom: 4,
+                      }}
                     >
                       创建者: {canvas.ownerName}
                     </div>
-                    <div style={{ fontSize: 12, color: '#999' }}>
+                    <div
+                      style={{
+                        fontSize: 12,
+                        color: 'var(--ant-color-text-tertiary)',
+                      }}
+                    >
                       修改于{' '}
                       {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
                     </div>
@@ -572,7 +615,11 @@ const CanvasListPage: React.FC = () => {
             </div>
           ) : (
             <div
-              style={{ textAlign: 'center', color: '#999', padding: '40px 0' }}
+              style={{
+                textAlign: 'center',
+                color: 'var(--ant-color-text-tertiary)',
+                padding: '40px 0',
+              }}
             >
               没有其他用户的 Canvas
             </div>
@@ -640,6 +687,15 @@ const CanvasListPage: React.FC = () => {
         </p>
       </Modal>
 
+      {publishCanvas && (
+        <PublishModal
+          open
+          activeCanvas={publishCanvas}
+          onClose={() => setPublishCanvas(null)}
+          onPublishSuccess={refreshCanvases}
+        />
+      )}
+
       <ExportModal
         open={exportModalOpen}
         canvasId={exportCanvasId}