@gadmin2n/schematics 0.0.111 → 0.0.112

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>
+  );
+};