@gadmin2n/schematics 0.0.110 → 0.0.112

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/locales/zh_CN/common.json

@@ -161,7 +161,7 @@
     "emptyHint": "从组件库拖拽组件到此处",
     "exitPreview": "退出预览",
     "config": "配置",
-    "configCharts": "配置显示图表与顺序",
+    "configCharts": "配置可切换的图表类型",
     "editCode": "编辑代码",
     "duplicate": "复制",
     "delete": "删除",
@@ -247,14 +247,14 @@
       "changePageSize": "修改分页数量",
       "removePagination": "移除分页",
       "addPagination": "添加分页",
-      "direction": "方向",
+      "direction": "图表方向",
       "vertical": "纵向",
       "horizontal": "横向",
       "hideGrid": "隐藏网格",
       "showGrid": "显示网格",
       "hideLabel": "隐藏数据标签",
       "showLabel": "显示数据标签",
-      "switchVariant": "切换样式",
+      "switchVariant": "切换显示样式",
       "pie": "饼图",
       "ring": "环形图",
       "topN": "显示项数",
@@ -264,22 +264,23 @@
       "showDots": "显示坐标点",
       "hideDotsLabel": "隐藏坐标点数据",
       "showDotsLabel": "显示坐标点数据",
-      "disableStacked": "关闭堆叠",
-      "enableStacked": "开启堆叠",
-      "disablePercent": "关闭百分比",
-      "enablePercent": "开启百分比",
-      "disableArea": "关闭面积",
-      "enableArea": "开启面积",
+      "disableStacked": "关闭数据堆叠",
+      "enableStacked": "开启数据堆叠",
+      "disablePercent": "关闭百分比堆叠",
+      "enablePercent": "开启百分比堆叠",
+      "disableArea": "关闭面积填充",
+      "enableArea": "开启面积填充",
       "disableSmooth": "关闭拟合曲线",
       "enableSmooth": "开启拟合曲线",
-      "switchTo": "切换到",
+      "switchTo": "切换图表类型",
       "showDownload": "显示下载按钮",
       "hideDownload": "隐藏下载按钮",
       "enableSorting": "启用排序",
       "disableSorting": "禁用排序",
       "enableFiltering": "启用过滤",
       "disableFiltering": "禁用过滤",
-      "configColumns": "配置列"
+      "configColumns": "配置列",
+      "visibilityGroup": "显示元素"
     },
     "modal": {
       "columnConfigTitle": "列配置",

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Tooltip } from 'antd';
+import { CopyOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import IsolatedLivePreview from './IsolatedLivePreview';
 import { useIsAgentAllowed } from 'config/agentAllowed';
 
@@ -10,6 +12,9 @@ interface CanvasCellProps extends React.HTMLAttributes<HTMLDivElement> {
   onClick: (e: React.MouseEvent) => void;
   onDoubleClick: (e: React.MouseEvent) => void;
   onContextMenu: (e: React.MouseEvent) => void;
+  onDuplicate?: () => void;
+  onDelete?: () => void;
+  onMore?: (e: React.MouseEvent) => void;
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode; // react-grid-layout injects resize handles here
@@ -26,6 +31,9 @@ const CanvasCell = React.forwardRef<HTMLDivElement, CanvasCellProps>(
       onClick,
       onDoubleClick,
       onContextMenu,
+      onDuplicate,
+      onDelete,
+      onMore,
       className,
       style,
       children,
@@ -35,6 +43,7 @@ const CanvasCell = React.forwardRef<HTMLDivElement, CanvasCellProps>(
   ) => {
     const isSection = componentType === 'Section';
     const isAgentAllowed = useIsAgentAllowed();
+    const showToolbar = !isPreview && isAgentAllowed && selected;
 
     return (
       <div
@@ -77,6 +86,84 @@ const CanvasCell = React.forwardRef<HTMLDivElement, CanvasCellProps>(
         >
           <IsolatedLivePreview code={code} />
         </div>
+
+        {/* 选中态悬浮工具栏 */}
+        {showToolbar && (
+          <div
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              position: 'absolute',
+              top: 6,
+              right: 6,
+              zIndex: 10,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              padding: 2,
+              background: '#fff',
+              border: '1px solid #d6e4ff',
+              borderRadius: 6,
+              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+            }}
+          >
+            <Tooltip title="复制">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDuplicate?.();
+                }}
+                style={toolbarBtnStyle}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.background = '#f0f5ff')
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.background = 'transparent')
+                }
+              >
+                <CopyOutlined />
+              </button>
+            </Tooltip>
+            <Tooltip title="更多">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onMore?.(e);
+                }}
+                style={toolbarBtnStyle}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.background = '#f0f5ff')
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.background = 'transparent')
+                }
+              >
+                <MoreOutlined />
+              </button>
+            </Tooltip>
+            <Tooltip title="删除">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete?.();
+                }}
+                style={{ ...toolbarBtnStyle, color: '#ff4d4f' }}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.background = '#fff1f0')
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.background = 'transparent')
+                }
+              >
+                <DeleteOutlined />
+              </button>
+            </Tooltip>
+          </div>
+        )}
+
         {/* Resize handles injected by react-grid-layout */}
         {children}
       </div>
@@ -84,6 +171,22 @@ const CanvasCell = React.forwardRef<HTMLDivElement, CanvasCellProps>(
   },
 );
 
+const toolbarBtnStyle: React.CSSProperties = {
+  border: 'none',
+  background: 'transparent',
+  width: 24,
+  height: 24,
+  borderRadius: 4,
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: 14,
+  color: '#555',
+  padding: 0,
+  transition: 'background 120ms ease',
+};
+
 CanvasCell.displayName = 'CanvasCell';
 
 export default CanvasCell;

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

@@ -0,0 +1,449 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Input, Popover, Tooltip, Button } from 'antd';
+import {
+  SearchOutlined,
+  CaretDownOutlined,
+  CaretRightOutlined,
+  AppstoreOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} 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 CategoryDef {
+  key: string;
+  /** i18n key under canvas.libraryCategories.* */
+  labelKey: string;
+  defaultLabel: string;
+  /** 包含的组件 type，按显示顺序 */
+  types: string[];
+}
+
+const CATEGORIES: CategoryDef[] = [
+  {
+    key: 'data',
+    labelKey: 'data',
+    defaultLabel: '数据展示',
+    types: ['NumCard', 'Table'],
+  },
+  {
+    key: 'chart',
+    labelKey: 'chart',
+    defaultLabel: '图表',
+    types: ['BarChart', 'LineChart', 'PieChart', 'RadarChart', 'TreemapChart'],
+  },
+  {
+    key: 'map',
+    labelKey: 'map',
+    defaultLabel: '地图',
+    types: ['WorldMap'],
+  },
+];
+
+// ─── Props ───────────────────────────────────────────────────────────────────
+
+interface CanvasComponentLibraryProps {
+  /** 是否折叠成窄条（仅显示展开按钮） */
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  /** 点击 item 时直接添加到画布。code 为指定 variant 代码，留空走默认 */
+  onAdd: (componentType: string, code?: string) => void;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+const CanvasComponentLibrary: React.FC<CanvasComponentLibraryProps> = ({
+  collapsed,
+  onToggleCollapsed,
+  onAdd,
+}) => {
+  const { t } = useTranslation();
+  const [keyword, setKeyword] = useState('');
+  const [openCats, setOpenCats] = useState<Record<string, boolean>>({
+    data: true,
+    chart: true,
+    map: true,
+  });
+
+  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';
+    },
+    [],
+  );
+
+  // ── 关键字过滤 ──
+  const filteredCats = useMemo(() => {
+    const kw = keyword.trim().toLowerCase();
+    return CATEGORIES.map((cat) => ({
+      ...cat,
+      types: cat.types.filter((type) => {
+        if (!CANVAS_COMPONENTS.includes(type)) return false;
+        if (!kw) return true;
+        const label = getComponentLabel(type, t).toLowerCase();
+        return label.includes(kw) || type.toLowerCase().includes(kw);
+      }),
+    })).filter((cat) => cat.types.length > 0);
+  }, [keyword, t]);
+
+  // ── 折叠态：窄条只展示展开按钮 ──
+  if (collapsed) {
+    return (
+      <div
+        style={{
+          width: 40,
+          flexShrink: 0,
+          background: '#fff',
+          borderRight: '1px solid #eaeaea',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          paddingTop: 12,
+        }}
+      >
+        <Tooltip
+          title={t('canvas.library.expand', { defaultValue: '展开组件库' })}
+          placement="right"
+        >
+          <Button
+            type="text"
+            size="small"
+            icon={<MenuUnfoldOutlined />}
+            onClick={onToggleCollapsed}
+          />
+        </Tooltip>
+        <div
+          style={{
+            marginTop: 8,
+            color: '#bbb',
+            fontSize: 11,
+            writingMode: 'vertical-rl',
+            letterSpacing: 2,
+          }}
+        >
+          <AppstoreOutlined style={{ marginRight: 4 }} />
+          {t('canvas.componentLib')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        width: 240,
+        flexShrink: 0,
+        background: '#fff',
+        borderRight: '1px solid #eaeaea',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      }}
+    >
+      {/* ── Header ── */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '10px 12px',
+          borderBottom: '1px solid #f0f0f0',
+        }}
+      >
+        <span
+          style={{
+            fontSize: 13,
+            fontWeight: 600,
+            color: '#1a1a1a',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+          }}
+        >
+          <AppstoreOutlined style={{ color: '#4361ee' }} />
+          {t('canvas.componentLib')}
+        </span>
+        <Tooltip title={t('canvas.library.collapse', { defaultValue: '收起' })}>
+          <Button
+            type="text"
+            size="small"
+            icon={<MenuFoldOutlined />}
+            onClick={onToggleCollapsed}
+          />
+        </Tooltip>
+      </div>
+
+      {/* ── Search ── */}
+      <div style={{ padding: '8px 12px' }}>
+        <Input
+          allowClear
+          size="small"
+          placeholder={t('canvas.library.searchPlaceholder', {
+            defaultValue: '搜索组件',
+          })}
+          prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+        />
+      </div>
+
+      {/* ── Categories ── */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: '4px 8px 12px' }}>
+        {filteredCats.length === 0 && (
+          <div
+            style={{
+              textAlign: 'center',
+              color: '#bfbfbf',
+              fontSize: 12,
+              padding: '24px 0',
+            }}
+          >
+            {t('canvas.library.empty', { defaultValue: '没有匹配的组件' })}
+          </div>
+        )}
+        {filteredCats.map((cat) => {
+          const open = openCats[cat.key] ?? true;
+          return (
+            <div key={cat.key} style={{ marginBottom: 4 }}>
+              {/* Category header */}
+              <div
+                onClick={() =>
+                  setOpenCats((prev) => ({ ...prev, [cat.key]: !open }))
+                }
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 4,
+                  padding: '6px 4px',
+                  cursor: 'pointer',
+                  userSelect: 'none',
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: '#666',
+                }}
+              >
+                {open ? <CaretDownOutlined /> : <CaretRightOutlined />}
+                {t(`canvas.library.categories.${cat.labelKey}`, {
+                  defaultValue: cat.defaultLabel,
+                })}
+                <span
+                  style={{ color: '#bfbfbf', fontWeight: 400, marginLeft: 2 }}
+                >
+                  ({cat.types.length})
+                </span>
+              </div>
+              {/* Items */}
+              {open && (
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: 6,
+                    padding: '4px 0',
+                  }}
+                >
+                  {cat.types.map((type) => (
+                    <LibraryItem
+                      key={type}
+                      type={type}
+                      onDragStart={handleVariantDragStart}
+                      onAdd={onAdd}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default CanvasComponentLibrary;
+
+// ─── LibraryItem ─────────────────────────────────────────────────────────────
+
+interface LibraryItemProps {
+  type: string;
+  onDragStart: (
+    e: React.DragEvent,
+    componentType: string,
+    variantCode: string,
+  ) => void;
+  onAdd: (componentType: string, code?: string) => void;
+}
+
+const LibraryItem: React.FC<LibraryItemProps> = ({
+  type,
+  onDragStart,
+  onAdd,
+}) => {
+  const { t } = useTranslation();
+  const def = CANVAS_DEFAULTS[type];
+  const variants = def?.variants ?? [];
+  const hasMultiVariant = variants.length > 1;
+  const primaryCode = variants[0]?.code ?? def?.code ?? '';
+
+  const card = (
+    <Tooltip
+      title={t('canvas.library.itemTooltip', {
+        defaultValue: '点击添加，或拖到画布',
+      })}
+      placement="right"
+      mouseEnterDelay={0.4}
+    >
+      <div
+        draggable
+        onDragStart={(e) => onDragStart(e, type, primaryCode)}
+        onClick={() => onAdd(type, primaryCode)}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 4,
+          padding: 6,
+          cursor: 'pointer',
+          userSelect: 'none',
+          border: '1px solid #ececec',
+          borderRadius: 8,
+          background: '#fff',
+          transition: 'all 160ms ease',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.borderColor = '#4361ee';
+          e.currentTarget.style.boxShadow = '0 3px 10px rgba(67,97,238,0.10)';
+          e.currentTarget.style.transform = 'translateY(-1px)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = '#ececec';
+          e.currentTarget.style.boxShadow = 'none';
+          e.currentTarget.style.transform = 'translateY(0)';
+        }}
+      >
+        <div
+          style={{
+            border: '1px solid #f0f0f0',
+            borderRadius: 6,
+            overflow: 'hidden',
+            background: '#fafafa',
+            width: 96,
+          }}
+        >
+          <ComponentThumbnail componentType={type} width={96} />
+        </div>
+        <span
+          style={{
+            fontSize: 11,
+            color: '#555',
+            fontWeight: 500,
+            textAlign: 'center',
+            pointerEvents: 'none',
+            maxWidth: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {getComponentLabel(type, t)}
+        </span>
+      </div>
+    </Tooltip>
+  );
+
+  if (!hasMultiVariant) return card;
+
+  // 多 variant：hover popover 展示子样式
+  const popoverContent = (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: 4,
+        maxWidth: 460,
+        flexWrap: 'wrap',
+      }}
+    >
+      {variants.map((v) => (
+        <div
+          key={v.name}
+          draggable
+          onDragStart={(e) => onDragStart(e, type, v.code)}
+          onClick={() => onAdd(type, v.code)}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 4,
+            cursor: 'pointer',
+            userSelect: 'none',
+          }}
+        >
+          <div
+            style={{
+              border: '1px solid #e8e8e8',
+              borderRadius: 6,
+              overflow: 'hidden',
+              background: '#fff',
+              transition: 'all 160ms ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = '#4361ee';
+              e.currentTarget.style.transform = 'translateY(-2px)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = '#e8e8e8';
+              e.currentTarget.style.transform = 'translateY(0)';
+            }}
+          >
+            <ComponentThumbnail
+              componentType={type}
+              code={v.code}
+              width={120}
+            />
+          </div>
+          <span
+            style={{
+              fontSize: 10,
+              color: '#666',
+              fontWeight: 500,
+              textAlign: 'center',
+              pointerEvents: 'none',
+            }}
+          >
+            {getVariantLabel(v.label, t)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <Popover
+      content={popoverContent}
+      title={
+        <span style={{ fontSize: 12, fontWeight: 600, color: '#333' }}>
+          {getComponentLabel(type, t)}
+        </span>
+      }
+      trigger="hover"
+      placement="rightTop"
+      mouseEnterDelay={0.2}
+      mouseLeaveDelay={0.3}
+    >
+      {card}
+    </Popover>
+  );
+};