@gadmin2n/schematics 0.0.138 → 0.0.140

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

@@ -6,7 +6,7 @@ import React, {
   useEffect,
 } from 'react';
 import { GridLayout, useContainerWidth } from 'react-grid-layout';
-import type { LayoutItem } from 'react-grid-layout';
+import type { EventCallback, LayoutItem } from 'react-grid-layout';
 import { Dropdown, Modal, Checkbox, Input, Button, Space } from 'antd';
 import {
   PlusOutlined,
@@ -36,6 +36,12 @@ import TableConfigModal from './components/TableConfigModal';
 import PromptModal from './components/PromptModal';
 import CanvasAiModal from './components/CanvasAiModal';
 import { createSectionCompactor } from './sectionCompactor';
+import {
+  findContainingWhiteboard,
+  moveWhiteboardChildren,
+  updateWhiteboardParent,
+  WHITEBOARD_COMPONENT_TYPE,
+} from './whiteboardLayout';
 import type { CanvasItem as CanvasItemType } from './types';
 import { useTranslation } from 'react-i18next';
 import 'react-grid-layout/css/styles.css';
@@ -107,6 +113,20 @@ function syncCodeHeight(code: string, h: number): string {
   return code;
 }
 
+function preserveLayoutConstraints(
+  nextLayout: readonly LayoutItem[],
+  previousLayout: readonly LayoutItem[],
+): LayoutItem[] {
+  return nextLayout.map((entry) => {
+    const previous = previousLayout.find(
+      (candidate) => candidate.i === entry.i,
+    );
+    return previous?.minW !== undefined || previous?.minH !== undefined
+      ? { ...entry, minW: previous.minW, minH: previous.minH }
+      : { ...entry };
+  });
+}
+
 // ─── Props ───────────────────────────────────────────────────────────────────
 
 interface CanvasPageProps {
@@ -161,6 +181,9 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
   const [isPreview, setIsPreview] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [activeWhiteboardId, setActiveWhiteboardId] = useState<string | null>(
+    null,
+  );
   const [libraryCollapsed, setLibraryCollapsed] = useState(false);
   const isAgentAllowed = useIsAgentAllowed();
   const [configModal, setConfigModal] = useState<{
@@ -305,10 +328,22 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
     selectedId,
     editingId,
   };
+  const dragSnapshotRef = useRef<{
+    id: string;
+    originLayout: LayoutItem[];
+  } | null>(null);
+  const draggingItemIdRef = useRef<string | null>(null);
+  const activeWhiteboardIdRef = useRef<string | null>(null);
 
   // 自定义 compactor：Section 与普通组件之间允许重叠
   const sectionCompactor = useMemo(
-    () => createSectionCompactor(() => liveRef.current.items),
+    () =>
+      createSectionCompactor(
+        () => liveRef.current.items,
+        () => draggingItemIdRef.current,
+        () => activeWhiteboardIdRef.current,
+        () => dragSnapshotRef.current,
+      ),
     [],
   );
 
@@ -353,7 +388,11 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
   const removeComponent = useCallback((id: string) => {
     const { items, layout, onBothChange } = liveRef.current;
     onBothChange(
-      items.filter((item) => item.id !== id),
+      items
+        .filter((item) => item.id !== id)
+        .map((item) =>
+          item.parentId === id ? { ...item, parentId: undefined } : item,
+        ),
       layout.filter((l) => l.i !== id),
     );
     setSelectedId((prev) => (prev === id ? null : prev));
@@ -369,7 +408,7 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
     const newId = genId();
     const maxY = layout.reduce((m, l) => Math.max(m, l.y + l.h), 0);
     onBothChange(
-      [...items, { ...item, id: newId }],
+      [...items, { ...item, id: newId, parentId: undefined }],
       [...layout, { ...itemLayout, i: newId, y: maxY }],
     );
   }, []);
@@ -492,55 +531,137 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
       document.removeEventListener('multichart-variant-change', handler);
   }, [updateCode]);
 
-  const handleDragStop = useCallback((_layout: readonly LayoutItem[]) => {
-    setIsDragging(false);
-    if (_layout.some((l) => l.i === '__dropping-elem__')) return;
-    const { layout, onLayoutChange } = liveRef.current;
-    const hasChanged = _layout.some((l) => {
-      const existing = layout.find((e) => e.i === l.i);
-      return (
-        !existing ||
-        l.x !== existing.x ||
-        l.y !== existing.y ||
-        l.w !== existing.w ||
-        l.h !== existing.h
-      );
-    });
-    if (!hasChanged) return;
-    const merged = _layout.map((l) => {
-      const existing = layout.find((e) => e.i === l.i);
-      return existing?.minW !== undefined || existing?.minH !== undefined
-        ? { ...l, minW: existing?.minW, minH: existing?.minH }
-        : l;
-    });
-    onLayoutChange(merged);
-  }, []);
+  const handleDragStart: EventCallback = useCallback(
+    (_layout, _oldItem, newItem) => {
+      setIsDragging(true);
+      if (!newItem) return;
+      draggingItemIdRef.current = newItem.i;
+      const { items, layout } = liveRef.current;
+      const draggedItem = items.find((item) => item.id === newItem.i);
+      const startingWhiteboardId =
+        draggedItem?.componentType === WHITEBOARD_COMPONENT_TYPE
+          ? null
+          : (draggedItem?.parentId ?? null);
+      activeWhiteboardIdRef.current = startingWhiteboardId;
+      setActiveWhiteboardId(startingWhiteboardId);
+      dragSnapshotRef.current = {
+        id: newItem.i,
+        originLayout: layout.map((entry) => ({ ...entry })),
+      };
+    },
+    [],
+  );
+
+  const handleDrag: EventCallback = useCallback(
+    (_layout, _oldItem, newItem) => {
+      if (!newItem) return;
+      const { items } = liveRef.current;
+      const draggedItem = items.find((item) => item.id === newItem.i);
 
-  const handleResizeStop = useCallback(
-    (_layout: readonly LayoutItem[], _oldItem: any, newItem: any) => {
-      const { layout, items, onItemsChange, onLayoutChange } = liveRef.current;
+      if (draggedItem?.componentType === WHITEBOARD_COMPONENT_TYPE) {
+        activeWhiteboardIdRef.current = null;
+        setActiveWhiteboardId(null);
+        return;
+      }
+
+      const nextWhiteboardId =
+        findContainingWhiteboard(newItem.i, items, _layout) ?? null;
+      activeWhiteboardIdRef.current = nextWhiteboardId;
+      setActiveWhiteboardId(nextWhiteboardId);
+    },
+    [],
+  );
+
+  const handleDragStop: EventCallback = useCallback(
+    (_layout, _oldItem, newItem) => {
+      setIsDragging(false);
+      activeWhiteboardIdRef.current = null;
+      setActiveWhiteboardId(null);
+      if (!newItem || _layout.some((l) => l.i === '__dropping-elem__')) {
+        dragSnapshotRef.current = null;
+        draggingItemIdRef.current = null;
+        return;
+      }
+
+      const { items, layout, onBothChange } = liveRef.current;
+      let merged = preserveLayoutConstraints(_layout, layout);
+      const draggedItem = items.find((item) => item.id === newItem.i);
+      const dragSnapshot = dragSnapshotRef.current;
 
       if (
-        _layout.length > 0 &&
-        !_layout.some((l) => l.i === '__dropping-elem__')
+        draggedItem?.componentType === WHITEBOARD_COMPONENT_TYPE &&
+        dragSnapshot?.id === newItem.i
       ) {
-        const merged = _layout.map((l) => {
-          const existing = layout.find((e) => e.i === l.i);
-          return existing?.minW !== undefined || existing?.minH !== undefined
-            ? { ...l, minW: existing?.minW, minH: existing?.minH }
-            : l;
+        const childIds = new Set(
+          items
+            .filter((item) => item.parentId === newItem.i)
+            .map((item) => item.id),
+        );
+        const baselineLayout = merged.map((entry) => {
+          if (!childIds.has(entry.i)) return entry;
+          const origin = dragSnapshot.originLayout.find(
+            (candidate) => candidate.i === entry.i,
+          );
+          return origin ? { ...entry, x: origin.x, y: origin.y } : { ...entry };
         });
-        onLayoutChange(merged);
+        merged = moveWhiteboardChildren(
+          newItem.i,
+          dragSnapshot.originLayout,
+          baselineLayout,
+          items,
+        );
       }
 
-      if (!newItem?.i) return;
+      const nextItems = updateWhiteboardParent(newItem.i, items, merged);
+      dragSnapshotRef.current = null;
+      draggingItemIdRef.current = null;
+      onBothChange(nextItems, merged, { coalesce: true });
+    },
+    [],
+  );
+
+  const handleResizeStart: EventCallback = useCallback(
+    (_layout, _oldItem, newItem) => {
+      if (!newItem) return;
+      const resizedItem = liveRef.current.items.find(
+        (item) => item.id === newItem.i,
+      );
+      const whiteboardId =
+        resizedItem?.componentType === WHITEBOARD_COMPONENT_TYPE
+          ? null
+          : (resizedItem?.parentId ?? null);
+      activeWhiteboardIdRef.current = whiteboardId;
+      setActiveWhiteboardId(whiteboardId);
+    },
+    [],
+  );
+
+  const handleResizeStop: EventCallback = useCallback(
+    (_layout, _oldItem, newItem) => {
+      activeWhiteboardIdRef.current = null;
+      setActiveWhiteboardId(null);
+      if (!newItem?.i || _layout.length === 0) return;
+      const { layout, items, onBothChange } = liveRef.current;
+      const merged = preserveLayoutConstraints(_layout, layout);
       const { i: itemId, h } = newItem;
-      onItemsChange(
-        items.map((item) => {
-          if (item.id !== itemId) return item;
-          return { ...item, code: syncCodeHeight(item.code, h) };
-        }),
+      let nextItems = items.map((item) =>
+        item.id === itemId
+          ? { ...item, code: syncCodeHeight(item.code, h) }
+          : item,
       );
+      const resizedItem = nextItems.find((item) => item.id === itemId);
+
+      if (resizedItem?.componentType === WHITEBOARD_COMPONENT_TYPE) {
+        for (const child of nextItems.filter(
+          (item) => item.parentId === itemId,
+        )) {
+          nextItems = updateWhiteboardParent(child.id, nextItems, merged);
+        }
+      } else {
+        nextItems = updateWhiteboardParent(itemId, nextItems, merged);
+      }
+
+      onBothChange(nextItems, merged);
     },
     [],
   );
@@ -575,24 +696,34 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
 
       // 映射实际 componentType（BarChart/LineChart/PieChart → MultiChart）
       const actualType = COMPONENT_TYPE_MAP[type] ?? type;
-
+      const nextLayout = [
+        ...cleanLayout,
+        {
+          i: id,
+          x: item?.x ?? 0,
+          y: item?.y ?? 0,
+          w: def.layout.w,
+          h,
+          minW: def.layout.minW,
+          minH: def.layout.minH ?? 2,
+        },
+      ];
+      const nextItems = [
+        ...items,
+        { id, componentType: actualType, code: syncCodeHeight(baseCode, h) },
+      ];
+      const parentId = findContainingWhiteboard(id, nextItems, nextLayout);
+
+      dragSnapshotRef.current = null;
+      draggingItemIdRef.current = null;
+      activeWhiteboardIdRef.current = null;
+      setIsDragging(false);
+      setActiveWhiteboardId(null);
       onBothChange(
-        [
-          ...items,
-          { id, componentType: actualType, code: syncCodeHeight(baseCode, h) },
-        ],
-        [
-          ...cleanLayout,
-          {
-            i: id,
-            x: item?.x ?? 0,
-            y: item?.y ?? 0,
-            w: def.layout.w,
-            h,
-            minW: def.layout.minW,
-            minH: def.layout.minH ?? 2,
-          },
-        ],
+        nextItems.map((candidate) =>
+          candidate.id === id ? { ...candidate, parentId } : candidate,
+        ),
+        nextLayout,
       );
     },
     [],
@@ -675,7 +806,6 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
           onAiConfig={() => setAiModalOpen(true)}
         />
       )}
-
       {/* ── 主体：左侧组件库 + 右侧画布 ── */}
       <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
         {!isPreview && isAgentAllowed && (
@@ -698,9 +828,9 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
               ? `
                 radial-gradient(circle, #1677ff 1.5px, transparent 1.5px) 0 0 / 90px 90px,
                 radial-gradient(circle, #1677ff 0.8px, transparent 0.8px) 0 0 / 18px 18px,
-                #f0f2f5
+                var(--ant-color-bg-layout)
               `
-              : '#f0f2f5',
+              : 'var(--ant-color-bg-layout)',
             transition: 'background 0.15s',
           }}
         >
@@ -746,8 +876,8 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
                     alignItems: 'center',
                     gap: 8,
                     padding: '24px 32px',
-                    background: '#fff',
-                    border: '1px dashed #c8d3ff',
+                    background: 'var(--ant-color-bg-container)',
+                    border: '1px dashed var(--ant-color-primary-border)',
                     borderRadius: 12,
                     boxShadow: '0 2px 12px rgba(67,97,238,0.06)',
                   }}
@@ -756,11 +886,20 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
                     style={{ fontSize: 36, color: '#4361ee' }}
                   />
                   <span
-                    style={{ fontSize: 15, color: '#333', fontWeight: 500 }}
+                    style={{
+                      fontSize: 15,
+                      color: 'var(--ant-color-text)',
+                      fontWeight: 500,
+                    }}
                   >
                     {t('canvas.emptyHint')}
                   </span>
-                  <span style={{ fontSize: 12, color: '#8c8c8c' }}>
+                  <span
+                    style={{
+                      fontSize: 12,
+                      color: 'var(--ant-color-text-tertiary)',
+                    }}
+                  >
                     在左侧组件库 <b style={{ color: '#4361ee' }}>点击</b> 或{' '}
                     <b style={{ color: '#4361ee' }}>拖拽</b> 任一组件
                   </span>
@@ -769,11 +908,36 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
             </div>
           )}
 
+          <style>{`
+            .canvas-layout--whiteboard-interaction > .react-grid-placeholder {
+              background: #13c2c2 !important;
+              opacity: 0.32 !important;
+              border: 2px solid #08979c;
+              border-radius: 8px;
+              box-shadow: 0 0 0 6px rgba(19, 194, 194, 0.12);
+            }
+
+            .canvas-layout--whiteboard-interaction > .react-draggable-dragging,
+            .canvas-layout--whiteboard-interaction > .react-resizable-resizing {
+              box-shadow: 0 12px 28px rgba(8, 151, 156, 0.24) !important;
+            }
+
+            .canvas-layout--whiteboard-interaction
+              > .react-resizable-resizing
+              > .react-resizable-handle::after {
+              border-color: #08979c;
+            }
+          `}</style>
+
           {/* 网格布局 */}
           {mounted && (
             <div style={{ maxWidth: 1600, margin: '0 auto', width: '100%' }}>
               <GridLayout
-                className="layout"
+                className={`layout${
+                  activeWhiteboardId
+                    ? ' canvas-layout--whiteboard-interaction'
+                    : ''
+                }`}
                 layout={layout}
                 width={Math.min(containerWidth, 1600)}
                 style={{
@@ -808,17 +972,27 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
                 }
                 onDrop={isPreview || !isAgentAllowed ? undefined : handleDrop}
                 compactor={sectionCompactor}
+                onResizeStart={handleResizeStart}
                 onResizeStop={handleResizeStop}
-                onDragStart={() => setIsDragging(true)}
+                onDragStart={handleDragStart}
+                onDrag={handleDrag}
                 onDragStop={handleDragStop}
               >
                 {items.map((item) => (
                   <CanvasCell
                     key={item.id}
                     className="canvas-item-drag"
-                    style={{ zIndex: item.componentType === 'Section' ? 0 : 1 }}
+                    style={{
+                      zIndex:
+                        item.componentType === 'Section' ||
+                        item.componentType === WHITEBOARD_COMPONENT_TYPE
+                          ? 0
+                          : 1,
+                    }}
                     componentType={item.componentType}
                     isPreview={isPreview}
+                    isDropTarget={activeWhiteboardId === item.id}
+                    isWhiteboardChild={!!item.parentId}
                     data-grid-id={item.id}
                     data-agent-type="canvas-component"
                     data-agent-resource="canvas"
@@ -856,11 +1030,11 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
                 transform: 'translateX(-50%)',
                 zIndex: 1000,
                 borderRadius: 8,
-                background: '#fff',
-                border: '1px solid #e0e0e0',
+                background: 'var(--ant-color-bg-elevated)',
+                border: '1px solid var(--ant-color-border)',
                 boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                 fontWeight: 500,
-                color: '#555',
+                color: 'var(--ant-color-text-secondary)',
               }}
             >
               {t('canvas.exitPreview')}

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

@@ -49,8 +49,8 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
   return (
     <div
       style={{
-        background: '#fff',
-        borderBottom: '1px solid #eaeaea',
+        background: 'var(--ant-color-bg-container)',
+        borderBottom: '1px solid var(--ant-color-border-secondary)',
         flexShrink: 0,
         boxShadow: '0 1px 8px rgba(0,0,0,0.04)',
         borderRadius: 8,
@@ -73,7 +73,11 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
             <Button
               size="small"
               type="text"
-              icon={<ArrowLeftOutlined style={{ color: '#595959' }} />}
+              icon={
+                <ArrowLeftOutlined
+                  style={{ color: 'var(--ant-color-text-secondary)' }}
+                />
+              }
               onClick={onBack}
               style={{
                 borderRadius: '50%',
@@ -89,7 +93,7 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
             style={{
               fontWeight: 600,
               fontSize: 15,
-              color: '#1a1a1a',
+              color: 'var(--ant-color-text)',
               letterSpacing: '0.2px',
               padding: '4px 10px',
             }}
@@ -114,9 +118,11 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
               disabled={!canUndo}
               style={{
                 borderRadius: 8,
-                border: '1px solid #e0e0e0',
+                border: '1px solid var(--ant-color-border)',
                 background: 'transparent',
-                color: canUndo ? '#555' : '#ccc',
+                color: canUndo
+                  ? 'var(--ant-color-text-secondary)'
+                  : 'var(--ant-color-text-quaternary)',
                 fontWeight: 500,
                 transition: 'all 200ms ease',
               }}
@@ -130,9 +136,11 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
               disabled={!canRedo}
               style={{
                 borderRadius: 8,
-                border: '1px solid #e0e0e0',
+                border: '1px solid var(--ant-color-border)',
                 background: 'transparent',
-                color: canRedo ? '#555' : '#ccc',
+                color: canRedo
+                  ? 'var(--ant-color-text-secondary)'
+                  : 'var(--ant-color-text-quaternary)',
                 fontWeight: 500,
                 transition: 'all 200ms ease',
               }}
@@ -172,8 +180,8 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
                       boxShadow: '0 2px 8px rgba(67,97,238,0.3)',
                     }
                   : {
-                      background: '#f0f1f5',
-                      color: '#999',
+                      background: 'var(--ant-color-fill-tertiary)',
+                      color: 'var(--ant-color-text-quaternary)',
                     }),
                 transition: 'all 200ms ease',
               }}
@@ -187,19 +195,20 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
             onClick={onPreview}
             style={{
               borderRadius: 8,
-              border: '1px solid #e0e0e0',
+              border: '1px solid var(--ant-color-border)',
               background: 'transparent',
-              color: '#555',
+              color: 'var(--ant-color-text-secondary)',
               fontWeight: 500,
               transition: 'all 200ms ease',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = '#f7f7f8';
-              e.currentTarget.style.borderColor = '#ccc';
+              e.currentTarget.style.background =
+                'var(--ant-color-fill-tertiary)';
+              e.currentTarget.style.borderColor = 'var(--ant-color-border)';
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.background = 'transparent';
-              e.currentTarget.style.borderColor = '#e0e0e0';
+              e.currentTarget.style.borderColor = 'var(--ant-color-border)';
             }}
           >
             {t('canvas.preview')}
@@ -212,9 +221,15 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
               danger={isPublished}
               style={{
                 borderRadius: 8,
-                border: isPublished ? '1px solid #ff4d4f' : '1px solid #e0e0e0',
-                background: isPublished ? '#fff2f0' : 'transparent',
-                color: isPublished ? '#ff4d4f' : '#555',
+                border: isPublished
+                  ? '1px solid #ff4d4f'
+                  : '1px solid var(--ant-color-border)',
+                background: isPublished
+                  ? 'var(--ant-color-error-bg)'
+                  : 'transparent',
+                color: isPublished
+                  ? '#ff4d4f'
+                  : 'var(--ant-color-text-secondary)',
                 fontWeight: 500,
                 transition: 'all 200ms ease',
               }}

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

@@ -7,6 +7,7 @@ import {
   CheckOutlined,
   CodeOutlined,
 } from '@ant-design/icons';
+import { useAppearance } from 'components/contexts/color-mode';
 import type { PropDoc, ComponentVariant } from './types';
 
 type IStandaloneCodeEditor = Parameters<OnMount>[0];
@@ -32,7 +33,7 @@ const CopyButton: React.FC<{ text: string }> = ({ text }) => {
           setCopied(true);
           setTimeout(() => setCopied(false), 1500);
         }}
-        style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }}
+        style={{ fontSize: 12, color: 'var(--ant-color-text-tertiary)' }}
       />
     </Tooltip>
   );
@@ -73,6 +74,7 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
   onChange,
   onClose,
 }) => {
+  const { mode } = useAppearance();
   const [pos, setPos] = useState({ x: 200, y: 80 });
   const [size, setSize] = useState({ w: 560, h: 480 });
   const dragging = useRef(false);
@@ -199,8 +201,8 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
         top: pos.y,
         width: size.w,
         height: size.h,
-        background: '#fff',
-        border: '1px solid #d9d9d9',
+        background: 'var(--ant-color-bg-elevated)',
+        border: '1px solid var(--ant-color-border)',
         borderRadius: 8,
         boxShadow:
           '0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)',
@@ -277,8 +279,8 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
         style={{
           height: 40,
           padding: '0 16px',
-          background: '#fafafa',
-          borderBottom: '1px solid #f0f0f0',
+          background: 'var(--ant-color-fill-quaternary)',
+          borderBottom: '1px solid var(--ant-color-border-secondary)',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -290,7 +292,11 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <CodeOutlined style={{ fontSize: 14, color: '#1677ff' }} />
           <span
-            style={{ fontSize: 13, fontWeight: 600, color: 'rgba(0,0,0,0.88)' }}
+            style={{
+              fontSize: 13,
+              fontWeight: 600,
+              color: 'var(--ant-color-text)',
+            }}
           >
             {componentType}
           </span>
@@ -302,7 +308,7 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
             type="text"
             icon={<CloseOutlined />}
             onClick={onClose}
-            style={{ color: 'rgba(0,0,0,0.45)' }}
+            style={{ color: 'var(--ant-color-text-tertiary)' }}
           />
         </div>
       </div>
@@ -310,8 +316,8 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
       {/* Imports（只读提示条） */}
       <div
         style={{
-          background: '#f6f8fa',
-          borderBottom: '1px solid #f0f0f0',
+          background: 'var(--ant-color-fill-quaternary)',
+          borderBottom: '1px solid var(--ant-color-border-secondary)',
           padding: '6px 16px',
           flexShrink: 0,
         }}
@@ -341,7 +347,7 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
           onChange={(val) => onChange(val ?? '')}
           beforeMount={handleBeforeMount}
           onMount={handleMount}
-          theme="vs"
+          theme={mode === 'dark' ? 'vs-dark' : 'vs'}
           options={{
             minimap: { enabled: false },
             fontSize: 14,

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

@@ -145,7 +145,7 @@ const PublishModal: React.FC<PublishModalProps> = ({
       confirmLoading={submitting}
       width={480}
     >
-      <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
+      <Form form={form} layout="vertical">
         <Form.Item
           name="pageName"
           label={t('canvas.publishModal.pageName')}