@gadmin2n/schematics 0.0.71 → 0.0.74

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

@@ -1,263 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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;