@gadmin2n/schematics 0.0.139 → 0.0.140

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

@@ -25,6 +25,12 @@ interface CategoryDef {
 }
 
 const CATEGORIES: CategoryDef[] = [
+  {
+    key: 'layout',
+    labelKey: 'layout',
+    defaultLabel: '布局',
+    types: ['Whiteboard'],
+  },
   {
     key: 'data',
     labelKey: 'data',
@@ -65,6 +71,7 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
   const { t } = useTranslation();
   const [keyword, setKeyword] = useState('');
   const [openCats, setOpenCats] = useState<Record<string, boolean>>({
+    layout: true,
     data: true,
     chart: true,
     map: true,
@@ -104,8 +111,8 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
         style={{
           width: 40,
           flexShrink: 0,
-          background: '#fff',
-          borderRight: '1px solid #eaeaea',
+          background: 'var(--ant-color-bg-container)',
+          borderRight: '1px solid var(--ant-color-border-secondary)',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
@@ -126,7 +133,7 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
         <div
           style={{
             marginTop: 8,
-            color: '#bbb',
+            color: 'var(--ant-color-text-quaternary)',
             fontSize: 11,
             writingMode: 'vertical-rl',
             letterSpacing: 2,
@@ -144,8 +151,8 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
       style={{
         width: 240,
         flexShrink: 0,
-        background: '#fff',
-        borderRight: '1px solid #eaeaea',
+        background: 'var(--ant-color-bg-container)',
+        borderRight: '1px solid var(--ant-color-border-secondary)',
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
@@ -158,14 +165,14 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
           alignItems: 'center',
           justifyContent: 'space-between',
           padding: '10px 12px',
-          borderBottom: '1px solid #f0f0f0',
+          borderBottom: '1px solid var(--ant-color-border-secondary)',
         }}
       >
         <span
           style={{
             fontSize: 13,
             fontWeight: 600,
-            color: '#1a1a1a',
+            color: 'var(--ant-color-text)',
             display: 'inline-flex',
             alignItems: 'center',
             gap: 6,
@@ -192,7 +199,11 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
           placeholder={t('canvas.library.searchPlaceholder', {
             defaultValue: '搜索组件',
           })}
-          prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
+          prefix={
+            <SearchOutlined
+              style={{ color: 'var(--ant-color-text-quaternary)' }}
+            />
+          }
           value={keyword}
           onChange={(e) => setKeyword(e.target.value)}
         />
@@ -204,7 +215,7 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
           <div
             style={{
               textAlign: 'center',
-              color: '#bfbfbf',
+              color: 'var(--ant-color-text-quaternary)',
               fontSize: 12,
               padding: '24px 0',
             }}
@@ -230,7 +241,7 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
                   userSelect: 'none',
                   fontSize: 12,
                   fontWeight: 600,
-                  color: '#666',
+                  color: 'var(--ant-color-text-secondary)',
                 }}
               >
                 {open ? <CaretDownOutlined /> : <CaretRightOutlined />}
@@ -238,7 +249,11 @@ const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
                   defaultValue: cat.defaultLabel,
                 })}
                 <span
-                  style={{ color: '#bfbfbf', fontWeight: 400, marginLeft: 2 }}
+                  style={{
+                    color: 'var(--ant-color-text-quaternary)',
+                    fontWeight: 400,
+                    marginLeft: 2,
+                  }}
                 >
                   ({cat.types.length})
                 </span>
@@ -316,9 +331,9 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
           padding: 6,
           cursor: 'pointer',
           userSelect: 'none',
-          border: '1px solid #ececec',
+          border: '1px solid var(--ant-color-border-secondary)',
           borderRadius: 8,
-          background: '#fff',
+          background: 'var(--ant-color-bg-container)',
           transition: 'all 160ms ease',
         }}
         onMouseEnter={(e) => {
@@ -327,17 +342,18 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
           e.currentTarget.style.transform = 'translateY(-1px)';
         }}
         onMouseLeave={(e) => {
-          e.currentTarget.style.borderColor = '#ececec';
+          e.currentTarget.style.borderColor =
+            'var(--ant-color-border-secondary)';
           e.currentTarget.style.boxShadow = 'none';
           e.currentTarget.style.transform = 'translateY(0)';
         }}
       >
         <div
           style={{
-            border: '1px solid #f0f0f0',
+            border: '1px solid var(--ant-color-border-secondary)',
             borderRadius: 6,
             overflow: 'hidden',
-            background: '#fafafa',
+            background: 'var(--ant-color-fill-quaternary)',
             width: 96,
           }}
         >
@@ -346,7 +362,7 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
         <span
           style={{
             fontSize: 11,
-            color: '#555',
+            color: 'var(--ant-color-text-secondary)',
             fontWeight: 500,
             textAlign: 'center',
             pointerEvents: 'none',
@@ -393,10 +409,10 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
         >
           <div
             style={{
-              border: '1px solid #e8e8e8',
+              border: '1px solid var(--ant-color-border-secondary)',
               borderRadius: 6,
               overflow: 'hidden',
-              background: '#fff',
+              background: 'var(--ant-color-bg-container)',
               transition: 'all 160ms ease',
             }}
             onMouseEnter={(e) => {
@@ -404,7 +420,8 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
               e.currentTarget.style.transform = 'translateY(-2px)';
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.borderColor = '#e8e8e8';
+              e.currentTarget.style.borderColor =
+                'var(--ant-color-border-secondary)';
               e.currentTarget.style.transform = 'translateY(0)';
             }}
           >
@@ -417,7 +434,7 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
           <span
             style={{
               fontSize: 10,
-              color: '#666',
+              color: 'var(--ant-color-text-secondary)',
               fontWeight: 500,
               textAlign: 'center',
               pointerEvents: 'none',
@@ -434,7 +451,13 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
     <Popover
       content={popoverContent}
       title={
-        <span style={{ fontSize: 12, fontWeight: 600, color: '#333' }}>
+        <span
+          style={{
+            fontSize: 12,
+            fontWeight: 600,
+            color: 'var(--ant-color-text)',
+          }}
+        >
           {getComponentLabel(type, t)}
         </span>
       }

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,6 +33,7 @@ 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';
@@ -210,6 +214,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);
 
@@ -231,7 +244,7 @@ const CanvasListPage: React.FC = () => {
   return (
     <div
       style={{
-        background: '#f0f2f5',
+        background: 'var(--ant-color-bg-layout)',
         minHeight: 'calc(100vh - 64px)',
       }}
     >
@@ -286,10 +299,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 +320,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 +363,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 +507,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 +529,7 @@ const CanvasListPage: React.FC = () => {
                     style={{
                       height: 180,
                       overflow: 'hidden',
-                      background: '#f0f0f0',
+                      background: 'var(--ant-color-fill-quaternary)',
                       position: 'relative',
                       pointerEvents: 'none',
                     }}
@@ -514,7 +552,7 @@ const CanvasListPage: React.FC = () => {
                           alignItems: 'center',
                           justifyContent: 'center',
                           height: '100%',
-                          color: '#bbb',
+                          color: 'var(--ant-color-text-quaternary)',
                           fontSize: 14,
                         }}
                       >
@@ -526,7 +564,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 +587,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 +626,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 +698,15 @@ const CanvasListPage: React.FC = () => {
         </p>
       </Modal>
 
+      {publishCanvas && (
+        <PublishModal
+          open
+          activeCanvas={publishCanvas}
+          onClose={() => setPublishCanvas(null)}
+          onPublishSuccess={refreshCanvases}
+        />
+      )}
+
       <ExportModal
         open={exportModalOpen}
         canvasId={exportCanvasId}