@gadmin2n/schematics 0.0.70 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/TreemapChart/index.tsx

@@ -0,0 +1,382 @@
+import React, { useMemo, useState } from 'react';
+import { Spin, Empty } from 'antd';
+import type * as echarts from 'echarts';
+import { useECharts } from '@/hooks/useECharts';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface TreemapDataItem {
+  /** 方块名称，显示在方块内部 */
+  name: string;
+  /** 方块大小（数值越大占的面积越大） */
+  value: number;
+  /** 自定义颜色，不传则使用 ECharts 默认色板 */
+  color?: string;
+  /** 子节点（支持嵌套分组，外层方块作为分组容器） */
+  children?: TreemapDataItem[];
+  /** 附加字段，可在 tooltip formatter 中使用 */
+  [key: string]: any;
+}
+
+export interface TreemapChartProps {
+  /** 数据，支持扁平和嵌套两种结构（自动检测，无需手动指定）
+   * - 扁平：`{ name, value, color? }[]` → 按色相排序，相近颜色聚集
+   * - 嵌套：`{ name, children: [...] }[]` → 同组方块聚集，顶层颜色区分分组
+   */
+  data: TreemapDataItem[];
+  /**
+   * 图表标题，渲染在图表上方。
+   * - 字符串：套默认样式（居中、12px、bold、#515151）
+   * - ReactNode：直接渲染，样式由调用方控制
+   * height 只指图表区域高度，标题额外占空间。
+   */
+  title?: React.ReactNode;
+  /** 图表容器高度，默认 400。推荐传数字，弹性布局才用字符串 */
+  height?: number | string;
+  /** 透传至 ECharts option 的配置，与基准配置浅合并。
+   * 可覆盖 tooltip（含 formatter）、series 等字段 */
+  chartProps?: Record<string, any>;
+  /** 是否显示图例（仅嵌套数据有效），默认 true */
+  legendShow?: boolean;
+  loading?: boolean;
+  /** 强制显示空态。未传时组件根据 data.length === 0 自动判断 */
+  empty?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  /** 渲染为 data-testid，必须填写 */
+  testId: string;
+}
+
+// ─── Default colors ───────────────────────────────────────────────────────────
+
+const DEFAULT_COLORS = [
+  '#3889f3',
+  '#0db46c',
+  '#f5a623',
+  '#9b59b6',
+  '#e74c3c',
+  '#1abc9c',
+  '#e67e22',
+  '#2980b9',
+  '#8e44ad',
+  '#27ae60',
+  '#d35400',
+  '#16a085',
+];
+
+// ─── Color utils ─────────────────────────────────────────────────────────────
+
+/** hex → hue (0–360)，用于按色相排序 */
+function hexToHue(hex: string): number {
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.slice(0, 2), 16) / 255;
+  const g = parseInt(clean.slice(2, 4), 16) / 255;
+  const b = parseInt(clean.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  if (d === 0) return 0;
+  let h = 0;
+  if (max === r) h = ((g - b) / d + 6) % 6;
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return h * 60;
+}
+
+// ─── Flatten nested data ─────────────────────────────────────────────────────
+
+/**
+ * 将嵌套 TreemapDataItem 展平为一层，子节点继承父节点颜色。
+ * tooltip 中通过 `groupName` 字段显示所属分组。
+ */
+function flattenTreemapData(data: TreemapDataItem[]): TreemapDataItem[] {
+  const result: TreemapDataItem[] = [];
+  for (const parent of data) {
+    if (parent.children && parent.children.length > 0) {
+      for (const child of parent.children) {
+        result.push({
+          ...child,
+          color: child.color ?? parent.color,
+          groupName: parent.name,
+        });
+      }
+    } else {
+      result.push(parent);
+    }
+  }
+  return result;
+}
+
+// ─── Option Builder ───────────────────────────────────────────────────────────
+
+function buildTreemapOption(
+  data: TreemapDataItem[],
+  chartProps: Record<string, any>,
+): echarts.EChartsOption {
+  const { series: _s, tooltip = {}, ...restChartProps } = chartProps;
+
+  // 判断是否为扁平数据（无 children）
+  const isFlat = data.every((d) => !d.children || d.children.length === 0);
+
+  let processedData: TreemapDataItem[];
+
+  if (isFlat) {
+    // 扁平数据：自动分配不重复颜色，按色相排序使相近颜色聚集
+    const assignedColors = data.map((item, i) => ({
+      ...item,
+      _color: item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+    }));
+    processedData = assignedColors
+      .sort((a, b) => hexToHue(a._color) - hexToHue(b._color))
+      .map((item) => ({
+        ...item,
+        itemStyle: { color: item._color },
+      }));
+  } else {
+    // 嵌套数据：顶层节点注入颜色，子节点由 colorSaturation 处理
+    processedData = data.map((item, i) => ({
+      ...item,
+      itemStyle: {
+        color: item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+      },
+    }));
+  }
+
+  return {
+    tooltip: {
+      formatter: (params: any) => {
+        const { name, value, treePathInfo } = params;
+        const group = treePathInfo?.length > 2 ? treePathInfo[1]?.name : null;
+        return group
+          ? `<div style="font-weight:bold">${group} · ${name}</div><div>数量：${Number(value).toLocaleString()}</div>`
+          : `<div style="font-weight:bold">${name}</div><div>数量：${Number(value).toLocaleString()}</div>`;
+      },
+      ...tooltip,
+    },
+
+    series: [
+      {
+        type: 'treemap',
+        data: processedData,
+        top: 4,
+        bottom: 4,
+        left: 4,
+        right: 4,
+        roam: false,
+        nodeClick: false,
+        breadcrumb: { show: false },
+        colorSaturation: undefined,
+        colorLightness: undefined,
+        colorMappingBy: undefined,
+        levels: isFlat
+          ? [
+              {
+                itemStyle: { borderWidth: 1, borderColor: '#fff', gapWidth: 1 },
+                label: {
+                  show: true,
+                  fontSize: 12,
+                  color: '#fff',
+                  formatter: (p: any) => p.name,
+                },
+              },
+            ]
+          : [
+              // 顶层（BG 分组）：不显示任何文字和 header，只用较宽的白边与其他 BG 分隔
+              {
+                itemStyle: {
+                  borderWidth: 4,
+                  borderColor: '#fff',
+                  gapWidth: 4,
+                },
+                upperLabel: { show: false },
+                label: { show: false },
+              },
+              // 叶子节点：显示名称
+              {
+                itemStyle: {
+                  borderWidth: 1,
+                  borderColor: 'rgba(255,255,255,0.5)',
+                  gapWidth: 1,
+                },
+                label: {
+                  show: true,
+                  fontSize: 12,
+                  color: '#fff',
+                  formatter: (params: any) => params.name,
+                },
+              },
+            ],
+        ...(_s ?? {}),
+      },
+    ],
+
+    ...restChartProps,
+  };
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const TreemapChart: React.FC<TreemapChartProps> = ({
+  data,
+  title,
+  height = 400,
+  chartProps = {},
+  legendShow = true,
+  loading = false,
+  empty,
+  style,
+  className,
+  testId,
+}) => {
+  const [activeGroup, setActiveGroup] = useState<string | null>(null);
+
+  const groups = useMemo(
+    () => data.filter((d) => d.children && d.children.length > 0),
+    [data],
+  );
+  const hasGroups = groups.length > 0;
+
+  const filteredData = useMemo(() => {
+    if (!hasGroups || activeGroup === null) return data;
+    return data.filter((d) => d.name === activeGroup);
+  }, [data, activeGroup, hasGroups]);
+
+  const option = useMemo(
+    () => buildTreemapOption(filteredData, chartProps),
+    [filteredData, chartProps],
+  );
+
+  const { domRef } = useECharts({ option });
+
+  const isEmpty = empty !== undefined ? empty : data.length === 0;
+
+  const titleNode = title ? (
+    typeof title === 'string' ? (
+      <div
+        style={{
+          textAlign: 'center',
+          fontSize: 13,
+          fontWeight: 'bold',
+          color: '#515151',
+          marginTop: 12,
+          marginBottom: 4,
+        }}
+      >
+        {title}
+      </div>
+    ) : (
+      title
+    )
+  ) : null;
+
+  return (
+    <div
+      className={className}
+      style={{
+        width: '100%',
+        ...(titleNode
+          ? {
+              display: 'flex',
+              flexDirection: 'column',
+              height: typeof height === 'number' ? `${height}px` : height,
+            }
+          : {}),
+        ...style,
+      }}
+      data-testid={testId}
+    >
+      {titleNode}
+      <div
+        style={{
+          width: '100%',
+          ...(titleNode
+            ? { flex: 1, minHeight: 0 }
+            : { height: typeof height === 'number' ? `${height}px` : height }),
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {isEmpty ? (
+          <div
+            style={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Empty
+              description="No Data"
+              styles={{ image: { height: 45 }, description: { fontSize: 12 } }}
+            />
+          </div>
+        ) : (
+          <>
+            {/* 图表区 */}
+            <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
+              <Spin
+                spinning={loading}
+                size="large"
+                style={{ position: 'absolute', inset: 0 }}
+              />
+              <div ref={domRef} style={{ width: '100%', height: '100%' }} />
+            </div>
+            {/* 图例 */}
+            {hasGroups && legendShow && (
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  justifyContent: 'center',
+                  gap: 8,
+                  padding: '8px 4px 4px',
+                  flexShrink: 0,
+                }}
+              >
+                {groups.map((g, i) => {
+                  const color =
+                    g.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+                  const isActive = activeGroup === g.name;
+                  const dimmed = activeGroup !== null && !isActive;
+                  return (
+                    <div
+                      key={g.name}
+                      onClick={() => setActiveGroup(isActive ? null : g.name)}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 5,
+                        cursor: 'pointer',
+                        padding: '2px 8px',
+                        borderRadius: 4,
+                        border: `1px solid ${isActive ? color : 'transparent'}`,
+                        background: isActive ? `${color}18` : 'transparent',
+                        transition: 'all 0.2s',
+                        fontSize: 12,
+                        color: dimmed ? '#bfbfbf' : '#515151',
+                      }}
+                    >
+                      <span
+                        style={{
+                          width: 10,
+                          height: 10,
+                          borderRadius: 2,
+                          flexShrink: 0,
+                          background: dimmed ? '#e0e0e0' : color,
+                          transition: 'background 0.2s',
+                        }}
+                      />
+                      {g.name}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TreemapChart;

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/WorldMap/index.tsx

@@ -0,0 +1,135 @@
+import React, { useMemo, useImperativeHandle, forwardRef } from 'react';
+import { Spin } from 'antd';
+import * as echarts from 'echarts';
+import nameMap from '@/components/canvas/map/nameMap.json';
+import WorldGeoJson from '@/components/canvas/map/world.geo.json';
+import { areaTop30Geo } from '@/components/canvas/map/config';
+import { useECharts } from '@/hooks/useECharts';
+
+echarts.registerMap('world', WorldGeoJson as any);
+
+// ─── 标准 geo 基准配置（统一首页样式）────────────────────────────────────────
+
+export const STANDARD_GEO_BASE = {
+  map: 'world',
+  nameMap: nameMap.world,
+  aspectScale: 1, // 必须为 1：world.geo.json 使用 Highcharts 预投影坐标系
+  zoom: 1.2,
+  roam: false,
+  select: { disabled: true },
+  itemStyle: {
+    areaColor: '#d8dae4',
+    borderColor: '#fff',
+    borderWidth: 0,
+  },
+  emphasis: {
+    disabled: false,
+    itemStyle: { areaColor: '#cacee2' },
+    label: { color: '#333' },
+  },
+  label: {
+    show: false,
+    fontSize: 10,
+    color: '#333',
+    formatter: (params: any) =>
+      areaTop30Geo.includes(params.name) ? params.name.toUpperCase() : '',
+  },
+} as const;
+
+// ─── 类型 ─────────────────────────────────────────────────────────────────────
+
+export interface WorldMapHandle {
+  /** 访问底层 ECharts 实例，用于 dispatchAction / convertToPixel 等操作。 */
+  chart: echarts.ECharts | null;
+}
+
+export interface WorldMapProps {
+  /**
+   * ECharts option。
+   * - `series`、`visualMap`、`tooltip` 等字段直接透传。
+   * - `geo` 会与标准基准配置**浅合并**，调用方只传需要覆盖/追加的字段
+   *   （常见：`regions`、`tooltip.formatter`、`center`、`zoom`）。
+   * - 若不需要 geo（纯 `series[type=map]` 场景），不传 `geo` 即可。
+   */
+  option: echarts.EChartsCoreOption;
+
+  loading?: boolean;
+
+  /**
+   * 地图容器样式，**必须通过 height 指定高度**（默认 600px）。
+   * - 固定高度：`style={{ height: 600 }}`
+   * - 响应式：`style={{ aspectRatio: "4/3", minHeight: 400 }}`
+   * - flex 填充：`style={{ flex: 1 }}`（父级需设高度）
+   */
+  style?: React.CSSProperties;
+
+  /** ECharts 事件绑定（click、mousemove 等）。 */
+  onEvents?: Record<string, (params: any, chart: echarts.ECharts) => void>;
+
+  /** data-testid，用于 E2E 测试和 AI agent inspect。 */
+  testId: string;
+}
+
+// ─── 组件 ─────────────────────────────────────────────────────────────────────
+
+const WorldMapInner: React.ForwardRefRenderFunction<
+  WorldMapHandle,
+  WorldMapProps
+> = ({ option, loading = false, style, onEvents, testId }, ref) => {
+  const mergedOption = useMemo(() => {
+    const rawGeo: any = Array.isArray((option as any).geo)
+      ? (option as any).geo[0]
+      : (option as any).geo;
+
+    if (rawGeo === undefined) return option;
+
+    return {
+      ...option,
+      geo: {
+        ...STANDARD_GEO_BASE,
+        ...rawGeo,
+        itemStyle: {
+          ...STANDARD_GEO_BASE.itemStyle,
+          ...rawGeo?.itemStyle,
+        },
+        emphasis: {
+          ...STANDARD_GEO_BASE.emphasis,
+          ...rawGeo?.emphasis,
+          itemStyle: {
+            ...STANDARD_GEO_BASE.emphasis.itemStyle,
+            ...rawGeo?.emphasis?.itemStyle,
+          },
+          label: {
+            ...STANDARD_GEO_BASE.emphasis.label,
+            ...rawGeo?.emphasis?.label,
+          },
+        },
+        label: {
+          ...STANDARD_GEO_BASE.label,
+          ...rawGeo?.label,
+        },
+      },
+    };
+  }, [option]);
+
+  const { domRef, chartRef } = useECharts({ option: mergedOption, onEvents });
+
+  useImperativeHandle(ref, () => ({
+    get chart() {
+      return chartRef.current;
+    },
+  }));
+
+  return (
+    <Spin spinning={loading}>
+      <div
+        ref={domRef}
+        style={{ width: '100%', height: 600, ...style }}
+        data-testid={testId}
+      />
+    </Spin>
+  );
+};
+
+export const WorldMap = forwardRef(WorldMapInner);
+export default WorldMap;

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/chart-constants.ts

@@ -0,0 +1,53 @@
+// ─── 共享 ECharts 常量 ────────────────────────────────────────────────────────
+
+/** 通用横向滚动图例基准（BarChart / LineChart / RadarChart） */
+export const LEGEND_BASE = {
+  type: 'scroll' as const,
+  show: true,
+  bottom: 10,
+};
+
+/** PieChart 横向图例（居中对齐） */
+export const LEGEND_HORIZONTAL = {
+  type: 'scroll' as const,
+  orient: 'horizontal' as const,
+  left: 'center',
+  bottom: 10,
+  show: true,
+};
+
+/** PieChart 竖向图例（右侧对齐） */
+export const LEGEND_VERTICAL = {
+  type: 'scroll' as const,
+  orient: 'vertical' as const,
+  right: 10,
+  top: 20,
+  bottom: 20,
+  show: true,
+};
+
+/** 纵向柱状图 / 折线图（bar、stackBar、line、stackLine、stackArea） */
+export const GRID_VERTICAL = {
+  left: 60,
+  right: 60,
+  bottom: 60,
+  containLabel: true,
+};
+
+/** 横向柱状图（direction="horizontal"） */
+export const GRID_HORIZONTAL = {
+  left: 20,
+  right: 80,
+  top: 20,
+  bottom: 60,
+  containLabel: true,
+};
+
+/** 双 Y 轴混合图（dualYAxis） */
+export const GRID_DUAL_Y = {
+  left: 50,
+  right: 50,
+  top: 36,
+  bottom: 60,
+  containLabel: true,
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/icon/InfoIcon.tsx

@@ -0,0 +1,8 @@
+import { InfoCircleFilled } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+
+export const InfoIcon = ({ message }: { message: string }) => (
+  <Tooltip placement="right" title={message}>
+    <InfoCircleFilled style={{ color: '#d8dae4' }} />
+  </Tooltip>
+);

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/icon/index.ts

@@ -0,0 +1 @@
+export * from './InfoIcon';

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/map/config.ts

@@ -0,0 +1,31 @@
+// Stub: map/config.ts — canvas 版，移除 continent geojson 依赖
+export const areaTop30Geo = [
+  'Russia',
+  'Canada',
+  'US',
+  'China',
+  'Brazil',
+  'Australia',
+  'India',
+  'Argentina',
+  'Kazakhstan',
+  'Algeria',
+  'Greenland',
+  'Indonesia',
+  'Sudan',
+  'Libya',
+  'Iran',
+  'Mongolia',
+  'Peru',
+  'Chad',
+];
+
+export const threeRegionCountryMap = {
+  APAC: [] as string[],
+  EMEA: [] as string[],
+  AMER: [] as string[],
+};
+
+export const getAreaByCountry = (_country: string): string | undefined =>
+  undefined;
+export const continentCountryMap: Record<string, string[]> = {};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/map/nameMap.json

@@ -0,0 +1,9 @@
+{
+  "world": {
+    "United States": "US",
+    "United Kingdom": "UK",
+    "United Arab Emirates": "UAE",
+    "South Korea": "S.Korea",
+    "Ukraina": "Ukraine"
+  }
+}