@gadmin2n/schematics 0.0.72 → 0.0.74

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

@@ -1,92 +1,16 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import Editor, { type OnMount } from '@monaco-editor/react';
-import { Button, Tooltip, Tabs } from 'antd';
-import { CloseOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
+import Editor, { type OnMount, type BeforeMount } from '@monaco-editor/react';
+import { Button, Tooltip } from 'antd';
+import {
+  CloseOutlined,
+  CopyOutlined,
+  CheckOutlined,
+  CodeOutlined,
+} from '@ant-design/icons';
 import type { PropDoc, ComponentVariant } from './types';
 
 type IStandaloneCodeEditor = Parameters<OnMount>[0];
 
-// ─── Theme (reuse from ComponentCanvas) ──────────────────────────────────
-
-const C = {
-  bg: '#ffffff',
-  editorBg: '#fafafa',
-  editorBorder: '#e5e5e5',
-  importBg: '#f0f4ff',
-  importBorder: '#dce6fd',
-  importText: '#3451b2',
-  text: '#1a1a1a',
-  textMuted: '#999',
-  accent: '#087ea4',
-};
-
-// ─── PropTable (simplified inline version) ───────────────────────────────────
-
-const PropTable: React.FC<{ props: PropDoc[]; height: number }> = ({
-  props,
-  height,
-}) => (
-  <div
-    style={{
-      height,
-      overflow: 'auto',
-      borderTop: `1px solid ${C.editorBorder}`,
-    }}
-  >
-    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
-      <thead>
-        <tr style={{ background: '#fafafa', position: 'sticky', top: 0 }}>
-          {['Prop', 'Type', 'Default', 'Description'].map((h) => (
-            <th
-              key={h}
-              style={{
-                padding: '6px 8px',
-                textAlign: 'left',
-                borderBottom: `1px solid ${C.editorBorder}`,
-                fontWeight: 600,
-                color: C.text,
-              }}
-            >
-              {h}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {props.map((p) => (
-          <tr key={p.name} style={{ borderBottom: `1px solid #f0f0f0` }}>
-            <td
-              style={{
-                padding: '5px 8px',
-                fontFamily: 'monospace',
-                color: C.accent,
-                fontWeight: 600,
-              }}
-            >
-              {p.name}
-              {p.required && <span style={{ color: '#f5222d' }}> *</span>}
-            </td>
-            <td
-              style={{
-                padding: '5px 8px',
-                fontFamily: 'monospace',
-                color: '#666',
-                fontSize: 11,
-              }}
-            >
-              {p.type}
-            </td>
-            <td style={{ padding: '5px 8px', color: '#999', fontSize: 11 }}>
-              {p.default ?? '—'}
-            </td>
-            <td style={{ padding: '5px 8px', color: '#444' }}>{p.desc}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
-);
-
 // ─── CopyButton ──────────────────────────────────────────────────────────────
 
 const CopyButton: React.FC<{ text: string }> = ({ text }) => {
@@ -108,7 +32,7 @@ const CopyButton: React.FC<{ text: string }> = ({ text }) => {
           setCopied(true);
           setTimeout(() => setCopied(false), 1500);
         }}
-        style={{ fontSize: 12, color: C.textMuted }}
+        style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }}
       />
     </Tooltip>
   );
@@ -126,8 +50,8 @@ interface CodeFloatWindowProps {
   onClose: () => void;
 }
 
-const MIN_W = 320;
-const MIN_H = 240;
+const MIN_W = 360;
+const MIN_H = 280;
 
 type ResizeEdge = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
 
@@ -146,14 +70,11 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
   componentType,
   imports,
   code,
-  props,
-  variants,
   onChange,
   onClose,
 }) => {
-  const [pos, setPos] = useState({ x: 200, y: 100 });
-  const [size, setSize] = useState({ w: 520, h: 500 });
-  const [propsHeight, setPropsHeight] = useState(160);
+  const [pos, setPos] = useState({ x: 200, y: 80 });
+  const [size, setSize] = useState({ w: 560, h: 480 });
   const dragging = useRef(false);
   const dragStart = useRef({ x: 0, y: 0, px: 0, py: 0 });
   const editorRef = useRef<IStandaloneCodeEditor | null>(null);
@@ -244,29 +165,31 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
     }
   }, [code]);
 
+  // 配置 TypeScript/JSX 支持以获得完整语法高亮
+  const handleBeforeMount: BeforeMount = useCallback((monaco) => {
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      jsx: monaco.languages.typescript.JsxEmit.React,
+      jsxFactory: 'React.createElement',
+      reactNamespace: 'React',
+      allowNonTsExtensions: true,
+      allowJs: true,
+      target: monaco.languages.typescript.ScriptTarget.Latest,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      esModuleInterop: true,
+    });
+    // 关闭诊断（避免红色波浪线）
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: false,
+    });
+  }, []);
+
   const handleMount: OnMount = useCallback((editor) => {
     editorRef.current = editor;
   }, []);
 
-  // Props 区域 resize
-  const handlePropsResize = useCallback(
-    (startY: number) => {
-      const startH = propsHeight;
-      const onMove = (e: MouseEvent) => {
-        const delta = e.clientY - startY;
-        setPropsHeight(Math.max(60, Math.min(size.h * 0.6, startH - delta)));
-      };
-      const onUp = () => {
-        window.removeEventListener('mousemove', onMove);
-        window.removeEventListener('mouseup', onUp);
-      };
-      window.addEventListener('mousemove', onMove);
-      window.addEventListener('mouseup', onUp);
-    },
-    [propsHeight, size.h],
-  );
-
-  const HANDLE = 6; // resize handle 宽度 px
+  const HANDLE = 6;
 
   return (
     <div
@@ -276,10 +199,11 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
         top: pos.y,
         width: size.w,
         height: size.h,
-        background: C.bg,
-        border: `1px solid ${C.editorBorder}`,
+        background: '#fff',
+        border: '1px solid #d9d9d9',
         borderRadius: 8,
-        boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
+        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)',
         display: 'flex',
         flexDirection: 'column',
         zIndex: 1000,
@@ -303,7 +227,6 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
                 position: 'absolute',
                 cursor: EDGE_CURSORS[edge],
                 zIndex: 10,
-                // edges
                 top: isCorner
                   ? isN
                     ? 0
@@ -347,14 +270,15 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
           );
         },
       )}
+
       {/* 标题栏 */}
       <div
         onMouseDown={handleTitleMouseDown}
         style={{
-          height: 36,
-          padding: '0 12px',
-          background: '#f7f7f7',
-          borderBottom: `1px solid ${C.editorBorder}`,
+          height: 40,
+          padding: '0 16px',
+          background: '#fafafa',
+          borderBottom: '1px solid #f0f0f0',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -363,9 +287,14 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
           userSelect: 'none',
         }}
       >
-        <span style={{ fontSize: 13, fontWeight: 600, color: C.accent }}>
-          {componentType}
-        </span>
+        <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)' }}
+          >
+            {componentType}
+          </span>
+        </div>
         <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
           <CopyButton text={`${imports}\n\n${code}`} />
           <Button
@@ -373,53 +302,30 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
             type="text"
             icon={<CloseOutlined />}
             onClick={onClose}
-            style={{ color: C.textMuted }}
+            style={{ color: 'rgba(0,0,0,0.45)' }}
           />
         </div>
       </div>
 
-      {/* Variant 切换 */}
-      {variants.length > 1 && (
-        <div
-          style={{
-            padding: '0 12px',
-            borderBottom: `1px solid ${C.editorBorder}`,
-            flexShrink: 0,
-            background: C.bg,
-          }}
-        >
-          <Tabs
-            size="small"
-            style={{ marginBottom: 0 }}
-            items={variants.map((v) => ({
-              key: v.name,
-              label: <span style={{ fontSize: 12 }}>{v.label}</span>,
-            }))}
-            onChange={(key) => {
-              const variant = variants.find((v) => v.name === key);
-              if (variant) onChange(variant.code);
-            }}
-          />
-        </div>
-      )}
-
-      {/* Imports（只读） */}
+      {/* Imports（只读提示条） */}
       <div
         style={{
-          background: C.importBg,
-          borderBottom: `1px solid ${C.importBorder}`,
-          padding: '6px 12px',
+          background: '#f6f8fa',
+          borderBottom: '1px solid #f0f0f0',
+          padding: '6px 16px',
           flexShrink: 0,
         }}
       >
         <pre
           style={{
             margin: 0,
-            fontSize: 12,
-            color: C.importText,
-            fontFamily: "'Fira Mono', monospace",
+            fontSize: 13,
+            color: '#1677ff',
+            fontFamily:
+              "'JetBrains Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
             lineHeight: 1.5,
             whiteSpace: 'pre-wrap',
+            opacity: 0.85,
           }}
         >
           {imports}
@@ -429,46 +335,33 @@ const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
       {/* Monaco 编辑器 */}
       <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
         <Editor
-          defaultLanguage="tsx"
+          defaultLanguage="typescript"
+          defaultPath="component.tsx"
           value={code}
           onChange={(val) => onChange(val ?? '')}
+          beforeMount={handleBeforeMount}
           onMount={handleMount}
           theme="vs"
           options={{
             minimap: { enabled: false },
-            fontSize: 13,
-            fontFamily: "'Fira Mono', monospace",
+            fontSize: 14,
+            fontFamily:
+              "'JetBrains Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
+            fontLigatures: true,
             lineNumbers: 'on',
             lineNumbersMinChars: 3,
             scrollBeyondLastLine: false,
             automaticLayout: true,
             tabSize: 2,
-            renderLineHighlight: 'gutter',
+            renderLineHighlight: 'line',
+            padding: { top: 8, bottom: 8 },
+            wordWrap: 'on',
+            folding: true,
+            bracketPairColorization: { enabled: true },
+            guides: { bracketPairs: true },
           }}
         />
       </div>
-
-      {/* Resize handle */}
-      <div
-        onMouseDown={(e) => {
-          e.preventDefault();
-          handlePropsResize(e.clientY);
-        }}
-        style={{
-          height: 4,
-          flexShrink: 0,
-          cursor: 'row-resize',
-          background: C.editorBorder,
-          transition: 'background 0.15s',
-        }}
-        onMouseEnter={(e) => (e.currentTarget.style.background = C.accent)}
-        onMouseLeave={(e) =>
-          (e.currentTarget.style.background = C.editorBorder)
-        }
-      />
-
-      {/* Props 表 */}
-      {props.length > 0 && <PropTable props={props} height={propsHeight} />}
     </div>
   );
 };

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

@@ -12,18 +12,20 @@ import { transform } from 'sucrase';
 import { Alert } from 'antd';
 
 // 引入所有 canvas 需要的组件
-import { NumCard } from '@/components/canvas/NumCard';
-import { NumLineCard } from '@/components/canvas/NumLineCard';
-import { Filter } from '@/components/canvas/Filter';
-import { BarChart } from '@/components/canvas/BarChart';
-import { LineChart } from '@/components/canvas/LineChart';
-import { PieChart } from '@/components/canvas/PieChart';
-import { RadarChart } from '@/components/canvas/RadarChart';
-import { TreemapChart } from '@/components/canvas/TreemapChart';
-import { Table } from '@/components/canvas/Table';
-import { WorldMap } from '@/components/canvas/WorldMap';
-import { ChartViewer } from '@/components/canvas/ChartViewer';
-import { Section } from '@/components/canvas/Section';
+import {
+  NumCard,
+  NumLineCard,
+  Filter,
+  BarChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  TreemapChart,
+  Table,
+  WorldMap,
+  MultiChart,
+  Section,
+} from '@gadmin2n/charts';
 import * as echarts from 'echarts';
 import { Form, Select, Input, DatePicker, Tag, Button, Space } from 'antd';
 import {
@@ -47,7 +49,7 @@ const SCOPE: Record<string, unknown> = {
   TreemapChart,
   Table,
   WorldMap,
-  ChartViewer,
+  MultiChart,
   Section,
   echarts,
   Form,

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import ChartViewerConfigModal from './components/ChartViewerConfigModal';
+import MultiChartConfigModal from './components/MultiChartConfigModal';
 
 // ─── 通用配置 Modal 接口 ──────────────────────────────────────────────────────
 //
@@ -21,5 +21,5 @@ export type ConfigModalComponent = React.FC<CanvasConfigModalProps>;
 // 只有在此注册的组件，右键菜单中才会显示"配置"选项。
 
 export const CANVAS_CONFIG_REGISTRY: Record<string, ConfigModalComponent> = {
-  ChartViewer: ChartViewerConfigModal,
+  MultiChart: MultiChartConfigModal,
 };