@gadmin2n/schematics 0.0.72 → 0.0.74

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

@@ -1,382 +0,0 @@
-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/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/WorldMap/index.tsx

@@ -1,135 +0,0 @@
-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/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/chart-constants.ts

@@ -1,53 +0,0 @@
-// ─── 共享 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/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/icon/InfoIcon.tsx

@@ -1,8 +0,0 @@
-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/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/icon/index.ts

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

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

@@ -1,31 +0,0 @@
-// 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/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/map/nameMap.json

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