@gadmin2n/schematics 0.0.111 → 0.0.113

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

@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react';
-import { Button, Tooltip, Popover } from 'antd';
+import React from 'react';
+import { Button, Tooltip } from 'antd';
 import { useIsAgentAllowed } from 'config/agentAllowed';
 import {
   SaveOutlined,
@@ -8,10 +8,7 @@ import {
   EyeOutlined,
   RobotOutlined,
 } from '@ant-design/icons';
-import ComponentThumbnail from './ComponentThumbnail';
-import { CANVAS_COMPONENTS, CANVAS_DEFAULTS } from './canvasDefaults';
 import { useTranslation } from 'react-i18next';
-import { getComponentLabel, getVariantLabel } from './canvasI18n';
 
 interface CanvasToolbarProps {
   isDirty: boolean;
@@ -39,19 +36,6 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
   const { t } = useTranslation();
   const isAgentAllowed = useIsAgentAllowed();
 
-  const handleVariantDragStart = useCallback(
-    (e: React.DragEvent, componentType: string, variantCode: string) => {
-      e.dataTransfer.setData('componentType', componentType);
-      e.dataTransfer.setData('variantCode', variantCode);
-      e.dataTransfer.setData(
-        `x-component-type/${componentType.toLowerCase()}`,
-        '',
-      );
-      e.dataTransfer.effectAllowed = 'copy';
-    },
-    [],
-  );
-
   return (
     <div
       style={{
@@ -63,7 +47,6 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
         overflow: 'hidden',
       }}
     >
-      {/* ── Header row ── */}
       <div
         style={{
           height: 52,
@@ -105,16 +88,11 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
           </span>
         </div>
 
-        {/* 中间: 占位（保持左右对称布局） */}
-        <div />
-
-        {/* 右侧: 保存 + 发布 */}
+        {/* 右侧: AI 配置 + 保存 + 预览 + 发布 */}
         <div
           style={{
-            flex: 1,
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'flex-end',
             gap: 10,
           }}
         >
@@ -204,220 +182,6 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
           )}
         </div>
       </div>
-
-      {/* ── Thumbnail row (only in dev) ── */}
-      {isAgentAllowed && (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 24,
-            padding: '16px 24px 20px',
-            overflowX: 'auto',
-            overflowY: 'hidden',
-            borderTop: '1px solid #f0f0f0',
-          }}
-        >
-          {CANVAS_COMPONENTS.map((type) => {
-            const def = CANVAS_DEFAULTS[type];
-            const variants = def?.variants ?? [];
-
-            // ── 单 variant：thumbnail 直接可拖拽，跳过 Popover ──
-            if (variants.length === 1) {
-              return (
-                <div
-                  key={type}
-                  draggable
-                  onDragStart={(e) =>
-                    handleVariantDragStart(e, type, variants[0].code)
-                  }
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 8,
-                    cursor: 'grab',
-                    userSelect: 'none',
-                    flexShrink: 0,
-                    width: 140,
-                  }}
-                >
-                  <div
-                    style={{
-                      border: '1px solid #eaeaea',
-                      borderRadius: 10,
-                      overflow: 'hidden',
-                      background: '#fff',
-                      transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
-                    }}
-                    onMouseEnter={(e) => {
-                      const el = e.currentTarget;
-                      el.style.borderColor = '#4361ee';
-                      el.style.boxShadow = '0 4px 16px rgba(67,97,238,0.12)';
-                      el.style.transform = 'translateY(-3px) scale(1.03)';
-                    }}
-                    onMouseLeave={(e) => {
-                      const el = e.currentTarget;
-                      el.style.borderColor = '#eaeaea';
-                      el.style.boxShadow = 'none';
-                      el.style.transform = 'translateY(0) scale(1)';
-                    }}
-                  >
-                    <ComponentThumbnail componentType={type} width={140} />
-                  </div>
-                  <span
-                    style={{
-                      fontSize: 11,
-                      color: '#888',
-                      fontWeight: 500,
-                      letterSpacing: '0.3px',
-                      textAlign: 'center',
-                      pointerEvents: 'none',
-                    }}
-                  >
-                    {getComponentLabel(type, t)}
-                  </span>
-                </div>
-              );
-            }
-
-            // ── 多 variant：保持 Popover hover 展开 ──
-            const popoverContent = (
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 16,
-                  padding: 4,
-                }}
-              >
-                {variants.map((v) => (
-                  <div
-                    key={v.name}
-                    draggable
-                    onDragStart={(e) => handleVariantDragStart(e, type, v.code)}
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                      gap: 6,
-                      cursor: 'grab',
-                      userSelect: 'none',
-                      flexShrink: 0,
-                    }}
-                  >
-                    <div
-                      style={{
-                        border: '1px solid #e8e8e8',
-                        borderRadius: 8,
-                        overflow: 'hidden',
-                        background: '#fff',
-                        transition: 'all 180ms ease',
-                      }}
-                      onMouseEnter={(e) => {
-                        const el = e.currentTarget;
-                        el.style.borderColor = '#4361ee';
-                        el.style.boxShadow = '0 4px 12px rgba(67,97,238,0.15)';
-                        el.style.transform = 'translateY(-3px) scale(1.02)';
-                      }}
-                      onMouseLeave={(e) => {
-                        const el = e.currentTarget;
-                        el.style.borderColor = '#e8e8e8';
-                        el.style.boxShadow = 'none';
-                        el.style.transform = 'translateY(0) scale(1)';
-                      }}
-                    >
-                      <ComponentThumbnail
-                        componentType={type}
-                        code={v.code}
-                        width={124}
-                      />
-                    </div>
-                    <span
-                      style={{
-                        fontSize: 10,
-                        color: '#666',
-                        fontWeight: 500,
-                        textAlign: 'center',
-                        pointerEvents: 'none',
-                      }}
-                    >
-                      {getVariantLabel(v.label, t)}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            );
-
-            return (
-              <Popover
-                key={type}
-                content={popoverContent}
-                title={
-                  <span
-                    style={{ fontSize: 12, fontWeight: 600, color: '#333' }}
-                  >
-                    {getComponentLabel(type, t)}
-                  </span>
-                }
-                trigger="hover"
-                placement="bottomLeft"
-                mouseEnterDelay={0.2}
-                mouseLeaveDelay={0.3}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 8,
-                    cursor: 'grab',
-                    userSelect: 'none',
-                    flexShrink: 0,
-                    width: 140,
-                  }}
-                >
-                  <div
-                    style={{
-                      border: '1px solid #eaeaea',
-                      borderRadius: 10,
-                      overflow: 'hidden',
-                      background: '#fff',
-                      transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
-                    }}
-                    onMouseEnter={(e) => {
-                      const el = e.currentTarget;
-                      el.style.borderColor = '#4361ee';
-                      el.style.boxShadow = '0 4px 16px rgba(67,97,238,0.12)';
-                      el.style.transform = 'translateY(-3px) scale(1.03)';
-                    }}
-                    onMouseLeave={(e) => {
-                      const el = e.currentTarget;
-                      el.style.borderColor = '#eaeaea';
-                      el.style.boxShadow = 'none';
-                      el.style.transform = 'translateY(0) scale(1)';
-                    }}
-                  >
-                    <ComponentThumbnail componentType={type} width={140} />
-                  </div>
-                  <span
-                    style={{
-                      fontSize: 11,
-                      color: '#888',
-                      fontWeight: 500,
-                      letterSpacing: '0.3px',
-                      textAlign: 'center',
-                      pointerEvents: 'none',
-                    }}
-                  >
-                    {getComponentLabel(type, t)}
-                  </span>
-                </div>
-              </Popover>
-            );
-          })}
-        </div>
-      )}
     </div>
   );
 };

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

@@ -7,6 +7,7 @@ import {
   SwapOutlined,
   DownloadOutlined,
   SettingOutlined,
+  ColumnHeightOutlined,
 } from '@ant-design/icons';
 import {
   readTableFlag,
@@ -597,8 +598,8 @@ function barChartActions(
       : []),
     {
       key: 'bar-direction',
-      icon: <PlusOutlined />,
-      label: t?.('canvas.menu.direction') ?? '方向',
+      icon: <ColumnHeightOutlined />,
+      label: t?.('canvas.menu.direction') ?? '图表方向',
       children: [
         {
           key: 'direction-vertical',

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

@@ -7,6 +7,8 @@ import {
   SettingOutlined,
   DatabaseOutlined,
   DeleteOutlined,
+  ToolOutlined,
+  EyeOutlined,
 } from '@ant-design/icons';
 import { CANVAS_CONFIG_REGISTRY } from '../canvasConfigRegistry';
 import { CANVAS_CONTEXT_MENU_REGISTRY } from '../canvasContextMenuRegistry';
@@ -38,6 +40,51 @@ interface ItemMenuState {
   id: string;
 }
 
+/** 显隐切换类菜单项的 key —— 这些会被收纳到「显示元素」子菜单 */
+const VISIBILITY_TOGGLE_KEYS = new Set([
+  'toggle-grid',
+  'toggle-label',
+  'toggle-legend',
+  'toggle-axis',
+  'toggle-dots',
+  'toggle-dots-label',
+  'toggle-download',
+]);
+
+/** 把 specificActions 里的显隐切换项收纳到一个子菜单下 */
+function regroupVisibilityToggles(
+  items: MenuProps['items'],
+  t: TFunction,
+): MenuProps['items'] {
+  if (!items || items.length === 0) return items;
+  const visibility: NonNullable<MenuProps['items']> = [];
+  const rest: NonNullable<MenuProps['items']> = [];
+  for (const item of items) {
+    if (
+      item &&
+      typeof item === 'object' &&
+      'key' in item &&
+      typeof item.key === 'string' &&
+      VISIBILITY_TOGGLE_KEYS.has(item.key)
+    ) {
+      // 子菜单里去掉 danger 红色，避免视觉过于扎眼
+      const { danger, icon: _icon, ...itemRest } = item as any;
+      visibility.push(itemRest);
+    } else {
+      rest.push(item);
+    }
+  }
+  // 少于 2 个不值得收
+  if (visibility.length < 2) return items;
+  rest.push({
+    key: 'visibility-group',
+    icon: <EyeOutlined />,
+    label: t('canvas.menu.visibilityGroup', { defaultValue: '显示元素' }),
+    children: visibility,
+  });
+  return rest;
+}
+
 /** 画布组件右键菜单：开关 state + 三层菜单项（组件特有 / 通用 / 代码级）的组装逻辑 */
 export function useCanvasContextMenu({
   items,
@@ -71,7 +118,7 @@ export function useCanvasContextMenu({
         // ── 第 1 层：组件特有操作 ──
         const specificActionsFactory =
           CANVAS_CONTEXT_MENU_REGISTRY[componentType];
-        const specificActions = specificActionsFactory
+        const rawSpecificActions = specificActionsFactory
           ? specificActionsFactory(
               item?.code ?? '',
               (newCode) => {
@@ -82,6 +129,8 @@ export function useCanvasContextMenu({
               t,
             )
           : [];
+        // 把 grid/label/legend/axis/dots/download 等显隐项收纳到子菜单
+        const specificActions = regroupVisibilityToggles(rawSpecificActions, t);
 
         // ── 第 2 层：通用操作（检查元素） ──
         const commonActions: MenuProps['items'] = [
@@ -197,16 +246,19 @@ export function useCanvasContextMenu({
         ];
 
         // ── 第 3 层：代码级操作 ──
-        const codeActions: MenuProps['items'] = [
+        const advancedActions: MenuProps['items'] = [
           {
             key: 'edit',
-            icon: <EditOutlined />,
-            label: t('canvas.editCode'),
+            icon: <ToolOutlined />,
+            label: t('canvas.adjustCode', { defaultValue: '调整代码' }),
             onClick: () => {
               openEditCode(itemMenu.id);
               setItemMenu(null);
             },
           },
+        ];
+
+        const opActions: MenuProps['items'] = [
           {
             key: 'copy',
             icon: <CopyOutlined />,
@@ -228,15 +280,34 @@ export function useCanvasContextMenu({
           },
         ];
 
-        // ── 组装三层 ──
+        // ── 组装：分组标题 + 分割线 ──
         const result: MenuProps['items'] = [];
         if (specificActions && specificActions.length > 0) {
-          result.push(...specificActions);
+          result.push({
+            key: 'g-component',
+            type: 'group',
+            label: t('canvas.menuGroups.component', {
+              defaultValue: '组件设置',
+            }),
+            children: specificActions as any,
+          });
           result.push({ type: 'divider' as const });
         }
-        result.push(...commonActions);
+        result.push({
+          key: 'g-data',
+          type: 'group',
+          label: t('canvas.menuGroups.data', { defaultValue: '数据与样式' }),
+          children: commonActions as any,
+        });
+        result.push({ type: 'divider' as const });
+        result.push({
+          key: 'g-advanced',
+          type: 'group',
+          label: t('canvas.menuGroups.advanced', { defaultValue: '高级' }),
+          children: advancedActions as any,
+        });
         result.push({ type: 'divider' as const });
-        result.push(...codeActions);
+        result.push(...opActions);
 
         return result;
       })()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadmin2n/schematics",
-  "version": "0.0.111",
+  "version": "0.0.113",
   "description": "Gadmin - modern, fast, powerful node.js web framework (@schematics)",
   "main": "dist/index.js",
   "files": [