@gadmin2n/schematics 0.0.69 → 0.0.70

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

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

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

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