@gadmin2n/schematics 0.0.71 → 0.0.72

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

@@ -1,219 +0,0 @@
-import React, { useCallback } from 'react';
-import type { CSSProperties } from 'react';
-import { Button, Tooltip, Flex, Dropdown, Checkbox } from 'antd';
-import { HolderOutlined } from '@ant-design/icons';
-import {
-  DndContext,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  arrayMove,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-export interface ChartSwitcherItem {
-  /** 图表唯一标识，例如 "bar"、"line" */
-  key: string;
-  /** 显示的标签（Tooltip 文字） */
-  label: string;
-  /** Ant Design 图标节点，例如 <BarChartOutlined /> */
-  icon: React.ReactNode;
-  /** 是否在工具栏中显示（右键菜单勾选控制） */
-  visible: boolean;
-}
-
-export interface ChartSwitcherProps {
-  // ── 数据 ────────────────────────────────
-  /** 所有图表项（含顺序、visible 状态） */
-  items: ChartSwitcherItem[];
-  /** 当前选中的图表 key */
-  value: string;
-
-  // ── 事件 ────────────────────────────────
-  /** 点击图表按钮时触发 */
-  onChange: (key: string) => void;
-  /** 右键菜单勾选/拖动后，items 发生变化时触发 */
-  onItemsChange: (items: ChartSwitcherItem[]) => void;
-
-  // ── 样式 ────────────────────────────────
-  style?: CSSProperties;
-  className?: string;
-
-  // ── 测试 ────────────────────────────────
-  testId: string;
-}
-
-// ─── SortableMenuItem ─────────────────────────────────────────────────────────
-
-interface SortableMenuItemProps {
-  item: ChartSwitcherItem;
-  isLastVisible: boolean;
-  testId: string;
-  onToggle: (key: string, checked: boolean) => void;
-}
-
-const SortableMenuItem: React.FC<SortableMenuItemProps> = ({
-  item,
-  isLastVisible,
-  testId,
-  onToggle,
-}) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.key });
-
-  const itemStyle: CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    padding: '4px 0',
-    cursor: 'default',
-    userSelect: 'none',
-  };
-
-  return (
-    <Flex
-      ref={setNodeRef}
-      align="center"
-      gap={8}
-      style={itemStyle}
-      data-testid={`${testId}-menu-${item.key}`}
-    >
-      {/* 拖动手柄：仅手柄响应拖拽，避免干扰 Checkbox 点击 */}
-      <HolderOutlined
-        {...attributes}
-        {...listeners}
-        style={{ color: '#ccc', cursor: 'grab', touchAction: 'none' }}
-      />
-      <Checkbox
-        checked={item.visible}
-        disabled={isLastVisible}
-        onChange={(e) => onToggle(item.key, e.target.checked)}
-      />
-      {item.icon}
-      <span style={{ fontSize: 13 }}>{item.label}</span>
-    </Flex>
-  );
-};
-
-// ─── ChartSwitcher ────────────────────────────────────────────────────────────
-
-export const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
-  items,
-  value,
-  onChange,
-  onItemsChange,
-  style,
-  className,
-  testId,
-}) => {
-  const visibleItems = items.filter((item) => item.visible);
-  const visibleCount = visibleItems.length;
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-  );
-
-  // 切换某项的 visible 状态
-  const handleToggleVisible = useCallback(
-    (key: string, checked: boolean) => {
-      const newItems = items.map((item) =>
-        item.key === key ? { ...item, visible: checked } : item,
-      );
-      onItemsChange(newItems);
-      // 若当前选中项被隐藏，自动切换到第一个 visible 项
-      if (!checked && key === value) {
-        const firstVisible = newItems.find((item) => item.visible);
-        if (firstVisible) onChange(firstVisible.key);
-      }
-    },
-    [items, value, onChange, onItemsChange],
-  );
-
-  // 拖拽结束，更新 items 顺序
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (!over || active.id === over.id) return;
-      const oldIndex = items.findIndex((item) => item.key === active.id);
-      const newIndex = items.findIndex((item) => item.key === over.id);
-      onItemsChange(arrayMove(items, oldIndex, newIndex));
-    },
-    [items, onItemsChange],
-  );
-
-  // 右键菜单 overlay（自定义渲染，嵌入 DndContext）
-  const dropdownOverlay = (
-    <div
-      style={{
-        background: '#fff',
-        borderRadius: 8,
-        boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
-        padding: '4px 0',
-        minWidth: 160,
-      }}
-    >
-      <DndContext
-        sensors={sensors}
-        modifiers={[restrictToVerticalAxis]}
-        onDragEnd={handleDragEnd}
-      >
-        <SortableContext
-          items={items.map((item) => item.key)}
-          strategy={verticalListSortingStrategy}
-        >
-          {items.map((item) => (
-            <div key={item.key} style={{ padding: '0 12px' }}>
-              <SortableMenuItem
-                item={item}
-                isLastVisible={item.visible && visibleCount === 1}
-                testId={testId}
-                onToggle={handleToggleVisible}
-              />
-            </div>
-          ))}
-        </SortableContext>
-      </DndContext>
-    </div>
-  );
-
-  return (
-    <Dropdown dropdownRender={() => dropdownOverlay} trigger={['contextMenu']}>
-      <Flex
-        gap={4}
-        align="center"
-        data-testid={testId}
-        style={{ ...style, cursor: 'context-menu' }}
-        className={className}
-      >
-        {visibleItems.map((item) => (
-          <Tooltip key={item.key} title={item.label} placement="bottom">
-            <Button
-              size="small"
-              type={value === item.key ? 'primary' : 'text'}
-              icon={item.icon}
-              onClick={() => onChange(item.key)}
-              data-testid={`${testId}-btn-${item.key}`}
-            />
-          </Tooltip>
-        ))}
-      </Flex>
-    </Dropdown>
-  );
-};
-
-export default ChartSwitcher;

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

@@ -1,159 +0,0 @@
-import React, { useState } from 'react';
-import type { CSSProperties } from 'react';
-import { Button, Tooltip, Flex } from 'antd';
-import {
-  BarChartOutlined,
-  LineChartOutlined,
-  PieChartOutlined,
-} from '@ant-design/icons';
-import { BarChart } from '@/components/canvas/BarChart';
-import { LineChart } from '@/components/canvas/LineChart';
-import { PieChart } from '@/components/canvas/PieChart';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-export type ChartViewerChart = 'bar' | 'line' | 'pie';
-
-export interface ChartViewerProps {
-  // ── 图表配置 ────────────────────────────
-  /** 显示哪些图表及顺序，默认 ["bar", "line", "pie"] */
-  charts?: ChartViewerChart[];
-
-  // ── 布局 ────────────────────────────────
-  /** 图表高度，默认 300 */
-  height?: number;
-
-  // ── 初始状态 ────────────────────────────
-  /** 初始显示的图表类型，默认 charts[0] */
-  defaultVariant?: ChartViewerChart;
-
-  // ── 样式 ────────────────────────────────
-  style?: CSSProperties;
-  className?: string;
-
-  // ── 测试 ────────────────────────────────
-  testId: string;
-}
-
-// ─── Mock 数据 ────────────────────────────────────────────────────────────────
-
-const MOCK_BAR_DATA = [
-  { name: 'Q1', value: 820 },
-  { name: 'Q2', value: 932 },
-  { name: 'Q3', value: 901 },
-  { name: 'Q4', value: 1290 },
-];
-
-const MOCK_LINE_DATA = {
-  xData: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-  series: [
-    { name: 'A 系列', data: [65, 72, 78, 85, 82, 91] },
-    { name: 'B 系列', data: [35, 28, 22, 15, 18, 9] },
-  ],
-};
-
-const MOCK_PIE_DATA = [
-  { name: '类目A', value: 335 },
-  { name: '类目B', value: 310 },
-  { name: '类目C', value: 234 },
-  { name: '类目D', value: 135 },
-  { name: '其他', value: 100 },
-];
-
-// ─── 所有图表的元信息 ─────────────────────────────────────────────────────────
-
-const CHART_META: Record<
-  ChartViewerChart,
-  { label: string; icon: React.ReactNode }
-> = {
-  bar: { label: '柱状图', icon: <BarChartOutlined /> },
-  line: { label: '折线图', icon: <LineChartOutlined /> },
-  pie: { label: '饼图', icon: <PieChartOutlined /> },
-};
-
-const DEFAULT_CHARTS: ChartViewerChart[] = ['bar', 'line', 'pie'];
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-export const ChartViewer: React.FC<ChartViewerProps> = ({
-  charts = DEFAULT_CHARTS,
-  height = 300,
-  defaultVariant,
-  style,
-  className,
-  testId,
-}) => {
-  const effectiveCharts = charts.length > 0 ? charts : DEFAULT_CHARTS;
-  const initialVariant =
-    defaultVariant && effectiveCharts.includes(defaultVariant)
-      ? defaultVariant
-      : effectiveCharts[0];
-
-  const [activeVariant, setActiveVariant] =
-    useState<ChartViewerChart>(initialVariant);
-  const active = effectiveCharts.includes(activeVariant)
-    ? activeVariant
-    : effectiveCharts[0];
-
-  return (
-    <div
-      style={{ position: 'relative', ...style }}
-      className={className}
-      data-testid={testId}
-    >
-      {/* ── 图表区域 ── */}
-      {active === 'bar' && (
-        <BarChart
-          variant="bar"
-          data={MOCK_BAR_DATA}
-          height={height}
-          testId={`${testId}-bar`}
-        />
-      )}
-      {active === 'line' && (
-        <LineChart
-          variant="stackLine"
-          data={MOCK_LINE_DATA}
-          height={height}
-          testId={`${testId}-line`}
-        />
-      )}
-      {active === 'pie' && (
-        <PieChart
-          variant="pie"
-          data={MOCK_PIE_DATA}
-          height={height}
-          testId={`${testId}-pie`}
-        />
-      )}
-
-      {/* ── 右上角切换按钮（按 charts 顺序渲染） ── */}
-      <Flex
-        gap={2}
-        style={{
-          position: 'absolute',
-          top: 8,
-          right: 8,
-          zIndex: 1,
-        }}
-      >
-        {effectiveCharts.map((key) => {
-          const { label, icon } = CHART_META[key];
-          return (
-            <Tooltip key={key} title={label} placement="bottom">
-              <Button
-                size="small"
-                type={active === key ? 'primary' : 'text'}
-                icon={icon}
-                onClick={() => setActiveVariant(key)}
-                data-testid={`${testId}-btn-${key}`}
-              />
-            </Tooltip>
-          );
-        })}
-      </Flex>
-    </div>
-  );
-};
-
-export default ChartViewer;

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

@@ -1,192 +0,0 @@
-import React from 'react';
-import { Button, Card, Form } from 'antd';
-import { useTranslation } from 'react-i18next';
-import type { FormInstance, FormProps } from 'antd';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-export type FilterLayout = 'card-grid' | 'inline' | 'inline-right';
-
-export interface FilterProps {
-  // ── 布局 ──────────────────────────────────────────────────────────────────
-  /**
-   * 布局模式：
-   * - `"card-grid"`（默认）：Card 包裹 + CSS grid，适用于多字段过滤条（如 software、staff、hardware）
-   * - `"inline"`：Form layout=inline 单行，适用于少量字段（如 network、ssc）
-   * - `"inline-right"`：右对齐 flex，无搜索/重置按钮，字段变化自动触发（如 soc、tsec）
-   */
-  layout?: FilterLayout;
-
-  /**
-   * grid 列数，仅在 `layout="card-grid"` 时有效。默认 4。
-   */
-  columns?: number;
-
-  // ── 表单 ──────────────────────────────────────────────────────────────────
-  /** 透传给 antd Form 的 props（initialValues、onValuesChange 等），layout 和 form 由组件内部管理 */
-  formProps?: Omit<FormProps, 'form' | 'layout' | 'onFinish' | 'style'>;
-
-  /** 外部传入 form 实例（需要在父组件访问 form.resetFields() 等方法时使用） */
-  form?: FormInstance;
-
-  /** 点击"查询"或 Form onFinish 时的回调 */
-  onSearch: (values: any) => void;
-
-  /**
-   * 点击"重置"时的回调。
-   * 若不传，重置只执行 form.resetFields()，不会触发 onSearch。
-   * 若传入，重置后会以初始值重新调用 onSearch。
-   */
-  onReset?: (form: FormInstance) => void;
-
-  // ── 按钮 ──────────────────────────────────────────────────────────────────
-  /**
-   * 是否显示搜索/重置按钮。
-   * `layout="inline-right"` 时默认 false，其余默认 true。
-   */
-  showActions?: boolean;
-
-  /** 查询按钮文字，默认读 i18n `common.query` */
-  searchText?: string;
-
-  /** 重置按钮文字，默认读 i18n `common.reset` */
-  resetText?: string;
-
-  // ── 样式 ──────────────────────────────────────────────────────────────────
-  className?: string;
-  style?: React.CSSProperties;
-
-  // ── 测试 / AI 定位 ────────────────────────────────────────────────────────
-  testId: string;
-
-  // ── 子字段 ────────────────────────────────────────────────────────────────
-  children?: React.ReactNode;
-}
-
-// ─── 组件 ─────────────────────────────────────────────────────────────────────
-
-export const Filter: React.FC<FilterProps> = ({
-  layout = 'card-grid',
-  columns = 4,
-  formProps,
-  form: externalForm,
-  onSearch,
-  onReset,
-  showActions,
-  searchText,
-  resetText,
-  className,
-  style,
-  testId,
-  children,
-}) => {
-  const { t } = useTranslation();
-  const [internalForm] = Form.useForm();
-  const form = externalForm ?? internalForm;
-
-  // inline-right 默认不显示按钮
-  const shouldShowActions = showActions ?? layout !== 'inline-right';
-
-  const handleFinish = (values: any) => {
-    onSearch(values);
-  };
-
-  const handleReset = () => {
-    if (onReset) {
-      onReset(form);
-    } else {
-      form.resetFields();
-    }
-  };
-
-  // ── 搜索/重置按钮 ────────────────────────────────────────────────────────
-  const actionsNode = shouldShowActions && (
-    <Form.Item shouldUpdate style={{ marginBottom: 0 }}>
-      {() => (
-        <>
-          <Button style={{ marginRight: 8 }} type="primary" htmlType="submit">
-            {searchText ?? t('common.query')}
-          </Button>
-          <Button type="default" onClick={handleReset}>
-            {resetText ?? t('common.reset')}
-          </Button>
-        </>
-      )}
-    </Form.Item>
-  );
-
-  // ── card-grid 布局 ────────────────────────────────────────────────────────
-  if (layout === 'card-grid') {
-    return (
-      <Form
-        form={form}
-        layout="inline"
-        onFinish={handleFinish}
-        style={{ width: '100%', ...style }}
-        {...formProps}
-        data-testid={testId}
-        className={className}
-      >
-        <Card style={{ width: '100%' }}>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: `repeat(${columns}, 1fr)`,
-              width: '100%',
-              gap: '10px 0',
-            }}
-          >
-            {children}
-            {actionsNode}
-          </div>
-        </Card>
-      </Form>
-    );
-  }
-
-  // ── inline-right 布局 ─────────────────────────────────────────────────────
-  if (layout === 'inline-right') {
-    return (
-      <div
-        style={{
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'flex-end',
-          ...style,
-        }}
-        data-testid={testId}
-        className={className}
-      >
-        <Form
-          form={form}
-          onFinish={handleFinish}
-          style={{ marginBottom: 0 }}
-          {...formProps}
-        >
-          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
-            {children}
-            {actionsNode}
-          </div>
-        </Form>
-      </div>
-    );
-  }
-
-  // ── inline 布局（默认 fallback）────────────────────────────────────────────
-  return (
-    <Form
-      form={form}
-      layout="inline"
-      onFinish={handleFinish}
-      style={{ width: '100%', ...style }}
-      data-testid={testId}
-      className={className}
-      {...formProps}
-    >
-      {children}
-      {actionsNode}
-    </Form>
-  );
-};
-
-export default Filter;