@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,263 @@
+import React, { useMemo } from 'react';
+import { Spin, Empty } from 'antd';
+import * as echarts from 'echarts';
+import { useECharts } from '@/hooks/useECharts';
+import { LEGEND_BASE } from '../chart-constants';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/** 单个雷达图系列（一个实体，如一个 BG、一个员工） */
+export interface RadarSeriesItem {
+  /** 系列名称，显示在 legend 和 tooltip 中 */
+  name: string;
+  /** 各维度的值（与 indicators 顺序一一对应） */
+  data: number[];
+  /** 自定义颜色，不传则使用 ECharts 默认色板 */
+  color?: string;
+}
+
+/** 雷达图维度定义（对应多边形的各顶点） */
+export interface RadarIndicator {
+  /** 维度名称 */
+  name: string;
+  /** 最大值，默认 100 */
+  max?: number;
+  /** 最小值，默认 0 */
+  min?: number;
+}
+
+export interface RadarChartProps {
+  /** 维度指标列表（对应多边形的各顶点），**必填** */
+  indicators: RadarIndicator[];
+  /** 数据系列，支持多个系列叠加对比，**必填** */
+  series: RadarSeriesItem[];
+  /**
+   * 图表标题，渲染在图表上方。
+   * - 字符串：套默认样式（居中、12px、bold、#515151）
+   * - ReactNode：直接渲染，样式由调用方控制
+   * height 只指图表区域高度，标题额外占空间。
+   */
+  title?: React.ReactNode;
+  /** 图表容器高度，默认 300。推荐传数字，弹性布局才用字符串 */
+  height?: number | string;
+  /**
+   * 是否显示图例，默认 true。
+   * 单系列时建议传 `legendShow={false}`
+   */
+  legendShow?: boolean;
+  /**
+   * 透传至 ECharts option 的配置，与基准配置浅合并。
+   * 支持字段：`radar`（形状/半径/分割等）、`legend`、`tooltip`
+   */
+  chartProps?: Record<string, any>;
+  loading?: boolean;
+  /** 强制显示空态。未传时组件根据 series.length === 0 自动判断 */
+  empty?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  /** 渲染为 data-testid，**必须填写** */
+  testId: string;
+}
+
+// ─── Option Builder ───────────────────────────────────────────────────────────
+
+function buildRadarOption(
+  indicators: RadarIndicator[],
+  series: RadarSeriesItem[],
+  legendShow: boolean,
+  chartProps: Record<string, any>,
+): echarts.EChartsOption {
+  const {
+    radar = {},
+    legend = {},
+    tooltip = {},
+    ...restChartProps
+  } = chartProps;
+
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        const { name, value } = params;
+        const rows = indicators
+          .map((ind, i) => `<div>${ind.name}：${value[i] ?? '-'}</div>`)
+          .join('');
+        return `<div style="font-weight:bold;margin-bottom:4px">${name}</div>${rows}`;
+      },
+      ...tooltip,
+    },
+
+    legend: legendShow
+      ? {
+          ...LEGEND_BASE,
+          data: series.map((s) => s.name),
+          textStyle: { fontSize: 11 },
+          ...legend,
+        }
+      : { show: false },
+
+    radar: {
+      indicator: indicators.map((ind) => ({
+        name: ind.name,
+        max: ind.max ?? 100,
+        min: ind.min ?? 0,
+      })),
+      shape: 'polygon',
+      center: ['50%', legendShow ? '48%' : '50%'],
+      radius: '65%',
+      axisName: { fontSize: 11, color: '#515151' },
+      splitNumber: 4,
+      splitArea: {
+        areaStyle: {
+          color: [
+            'rgba(56,137,243,0.04)',
+            'rgba(56,137,243,0.08)',
+            'rgba(56,137,243,0.04)',
+            'rgba(56,137,243,0.08)',
+          ],
+        },
+      },
+      axisLine: { lineStyle: { color: '#ddd' } },
+      splitLine: { lineStyle: { color: '#ddd' } },
+      ...radar,
+    },
+
+    series: [
+      {
+        type: 'radar',
+        data: series.map((s) => ({
+          name: s.name,
+          value: s.data,
+          ...(s.color
+            ? {
+                lineStyle: { color: s.color },
+                itemStyle: { color: s.color },
+                areaStyle: { color: s.color, opacity: 0.15 },
+              }
+            : { areaStyle: { opacity: 0.15 } }),
+        })),
+        symbol: 'circle',
+        symbolSize: 5,
+        lineStyle: { width: 2 },
+      },
+    ],
+
+    ...restChartProps,
+  };
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const RadarChart: React.FC<RadarChartProps> = ({
+  indicators,
+  series,
+  title,
+  height = 300,
+  legendShow = true,
+  chartProps = {},
+  loading = false,
+  empty,
+  style,
+  className,
+  testId,
+}) => {
+  const option = useMemo(
+    () => buildRadarOption(indicators, series, legendShow, chartProps),
+    [indicators, series, legendShow, chartProps],
+  );
+
+  const { domRef } = useECharts({ option });
+
+  const isEmpty =
+    empty !== undefined
+      ? empty
+      : series.length === 0 || series.every((s) => s.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%',
+        position: 'relative',
+        ...(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 }),
+          position: 'relative',
+        }}
+      >
+        <Spin
+          spinning={loading}
+          size="large"
+          style={{ width: '100%', height: '100%', display: 'block' }}
+        >
+          {isEmpty ? (
+            <div
+              style={{
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Empty
+                description="No Data"
+                styles={{
+                  image: { height: 45 },
+                  description: { fontSize: 12 },
+                }}
+              />
+            </div>
+          ) : (
+            <div
+              ref={domRef}
+              style={{
+                width: '100%',
+                height: titleNode
+                  ? '100%'
+                  : typeof height === 'number'
+                    ? `${height}px`
+                    : height,
+              }}
+            />
+          )}
+        </Spin>
+      </div>
+    </div>
+  );
+};
+
+export default RadarChart;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface SectionProps {
+  title?: string;
+  testId: string;
+}
+
+export const Section: React.FC<SectionProps> = ({ title, testId }) => {
+  return (
+    <div
+      data-testid={testId}
+      style={{
+        width: '100%',
+        height: '100%',
+        background: '#fff',
+        borderRadius: 8,
+      }}
+    >
+      {title && (
+        <div
+          style={{
+            padding: '12px 16px',
+            fontSize: 14,
+            fontWeight: 600,
+            color: '#333',
+          }}
+        >
+          {title}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Section;

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

@@ -0,0 +1,207 @@
+import React, { useMemo, useRef, useState, useEffect } from 'react';
+import { Table as AntTable, TableProps as AntTableProps } from 'antd';
+import type { ColumnType } from 'antd/es/table';
+import type { TablePaginationConfig } from 'antd/es/table';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface TableProps<RecordType = any> extends Omit<
+  AntTableProps<RecordType>,
+  'pagination' | 'size'
+> {
+  /** 分页配置。未传或 false → 不显示分页 */
+  pagination?: TablePaginationConfig | false;
+
+  /** 实体名称，用于 showTotal 文案。如 "staff"、"user" */
+  entityName?: string;
+
+  /** antd Table size，默认不设（使用 antd 默认值） */
+  size?: AntTableProps<RecordType>['size'];
+
+  /** data-testid，必填 */
+  testId: string;
+}
+
+// ─── 默认分页选项 ─────────────────────────────────────────────────────────────
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+// ─── showTotal 默认文案 ───────────────────────────────────────────────────────
+
+function defaultShowTotal(entityName?: string) {
+  return (total: number) => {
+    if (entityName) {
+      return (
+        <span style={{ marginLeft: 16 }}>
+          <span className="ant-text secondary">{total}</span> {entityName} in
+          total
+        </span>
+      );
+    }
+    return <span style={{ marginLeft: 16 }}>Total {total} items</span>;
+  };
+}
+
+// ─── 给 antd 内部元素注入 flex 拉伸样式 ──────────────────────────────────────
+
+const FLEX_STRETCH = 'flex:1;min-height:0;display:flex;flex-direction:column';
+
+function applyStretchStyles(container: HTMLElement) {
+  const selectors = [
+    '.ant-table-wrapper',
+    '.ant-spin-nested-loading',
+    '.ant-spin-container',
+  ];
+  for (const sel of selectors) {
+    const el = container.querySelector<HTMLElement>(sel);
+    if (el) el.style.cssText += `;${FLEX_STRETCH}`;
+  }
+  // .ant-table 只需要 flex:1 不需要 flex-direction
+  const table = container.querySelector<HTMLElement>('.ant-table');
+  if (table)
+    table.style.cssText +=
+      ';flex:1;min-height:0;display:flex;flex-direction:column';
+  // .ant-table-container 也要 flex 拉伸
+  const tableContainer = container.querySelector<HTMLElement>(
+    '.ant-table-container',
+  );
+  if (tableContainer)
+    tableContainer.style.cssText +=
+      ';flex:1;min-height:0;display:flex;flex-direction:column';
+  // .ant-table-body 滚动区域
+  const tableBody = container.querySelector<HTMLElement>('.ant-table-body');
+  if (tableBody)
+    tableBody.style.cssText += ';flex:1;min-height:0;overflow-y:auto';
+  // 分页器贴底
+  const pager = container.querySelector<HTMLElement>('.ant-table-pagination');
+  if (pager) pager.style.cssText += ';margin-top:auto;flex-shrink:0';
+}
+
+// ─── 组件 ─────────────────────────────────────────────────────────────────────
+
+export function Table<RecordType extends object = any>({
+  pagination: paginationProp,
+  entityName,
+  size,
+  testId,
+  scroll: scrollProp,
+  ...rest
+}: TableProps<RecordType>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollY, setScrollY] = useState<number | undefined>(undefined);
+
+  const hasPagination = !!paginationProp;
+
+  // 注入 flex 拉伸样式 + 计算 scroll.y
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const compute = () => {
+      // 每次都重新注入（antd 可能因 re-render 重置 style）
+      applyStretchStyles(el);
+
+      const containerH = el.clientHeight;
+      if (containerH <= 0) return;
+
+      const thead = el.querySelector<HTMLElement>('.ant-table-thead');
+      const headH = thead ? thead.offsetHeight : 0;
+
+      const pager = el.querySelector<HTMLElement>('.ant-table-pagination');
+      const pagerH = pager ? pager.offsetHeight : 0;
+
+      const tbody = el.querySelector<HTMLElement>('.ant-table-tbody');
+      const bodyContentH = tbody ? tbody.scrollHeight : 0;
+
+      const availableH = containerH - headH - pagerH;
+
+      if (bodyContentH > availableH && availableH > 50) {
+        setScrollY(availableH);
+      } else {
+        setScrollY(undefined);
+      }
+    };
+
+    const timer = setTimeout(compute, 50);
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    return () => {
+      clearTimeout(timer);
+      ro.disconnect();
+    };
+  }, [hasPagination, size, rest.dataSource]);
+
+  // 内部管理分页状态（Canvas 静态数据场景下 pagination 是受控写死的）
+  const [currentPage, setCurrentPage] = useState(
+    paginationProp
+      ? ((paginationProp as TablePaginationConfig).current ?? 1)
+      : 1,
+  );
+  const [currentPageSize, setCurrentPageSize] = useState(
+    paginationProp
+      ? ((paginationProp as TablePaginationConfig).pageSize ?? 10)
+      : 10,
+  );
+
+  const resolvedPagination = useMemo<TablePaginationConfig | false>(() => {
+    if (!paginationProp) return false;
+
+    const showTotal = paginationProp.showTotal ?? defaultShowTotal(entityName);
+    return {
+      showTotal,
+      showSizeChanger: true,
+      pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
+      ...paginationProp,
+      current: currentPage,
+      pageSize: currentPageSize,
+      total: paginationProp.total || (rest.dataSource?.length ?? 0),
+    };
+  }, [
+    paginationProp,
+    entityName,
+    currentPage,
+    currentPageSize,
+    rest.dataSource,
+  ]);
+
+  // 为没有 rowKey 的静态数据自动注入唯一 key
+  const indexedDataSource = useMemo(() => {
+    if (rest.rowKey || !rest.dataSource) return rest.dataSource;
+    return rest.dataSource.map((item, i) => ({
+      ...item,
+      __rowKey: String(i),
+    }));
+  }, [rest.rowKey, rest.dataSource]);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+      data-testid={testId}
+    >
+      <AntTable<RecordType>
+        {...rest}
+        dataSource={indexedDataSource as RecordType[]}
+        size={size}
+        rowKey={rest.rowKey ?? '__rowKey'}
+        pagination={resolvedPagination}
+        scroll={scrollY ? { y: scrollY, ...scrollProp } : scrollProp}
+        onChange={(pagination, filters, sorter, extra) => {
+          if (pagination.current) setCurrentPage(pagination.current);
+          if (pagination.pageSize) setCurrentPageSize(pagination.pageSize);
+          rest.onChange?.(pagination, filters, sorter, extra);
+        }}
+      />
+    </div>
+  );
+}
+
+export default Table;
+
+// Re-export antd types for convenience
+export type { ColumnType, TablePaginationConfig };
+
+// Re-export antd Table sub-components for drop-in compatibility
+Table.Column = AntTable.Column;
+Table.ColumnGroup = AntTable.ColumnGroup;
+Table.Summary = AntTable.Summary;