@gadmin2n/schematics 0.0.70 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/useDynamicResources.tsx

@@ -0,0 +1,220 @@
+import { useMemo, useRef } from 'react';
+import type { IResourceItem, ResourceProps } from '@refinedev/core';
+import { DashboardOutlined, SettingOutlined } from '@ant-design/icons';
+import { getRoutePath } from 'config/routeRegistry';
+import { useUserPageAccess } from './useUserPageAccess';
+import generatedResources from 'generated/resources';
+
+/**
+ * Dynamic Resources Hook for erp-backend/web
+ *
+ * Features:
+ * 1. Get user accessible page resources from backend (via useUserPageAccess)
+ * 2. Convert backend data to Refine's IResourceItem[] format
+ * 3. Auto-generate show/edit/create paths for all pages
+ *
+ * Data Flow:
+ * useUserPageAccess → Accessible Pages → Resources → Sider Menu
+ *
+ * Performance:
+ * - Uses module-level cache - computed ONCE per page load
+ * - Returns same reference on every call after initial computation
+ * - Does NOT rebuild on route navigation or component re-renders
+ * - Permission changes require page refresh (handled by user)
+ */
+
+// Module-level cache - computed once per page load
+let cachedResources: IResourceItem[] | null = null;
+let isComputing = false;
+
+// 将 snake_case 转换为 camelCase
+function snakeToCamel(str: string): string {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+// Icon 映射：page.code 到 React Icon 组件
+export const iconMapping: Record<string, React.ReactNode> = {
+  dashboard: <DashboardOutlined />,
+  administration: <SettingOutlined />,
+};
+
+// Pages whose children are tabs (not separate menu items)
+const PAGES_WITH_TABS: string[] = [];
+
+export const useDynamicResources = (): IResourceItem[] => {
+  // Use shared page access data (single call, reused below)
+  const { accessiblePageIds, pagesData, pageMap, isLoading, roleNames } =
+    useUserPageAccess();
+
+  // If we already have cached resources, return immediately
+  if (cachedResources !== null) {
+    return cachedResources;
+  }
+
+  // Return empty array while loading (will retry on next render)
+  if (isLoading || !pagesData || isComputing) {
+    return [];
+  }
+
+  // Mark as computing to prevent concurrent computation
+  isComputing = true;
+
+  if (import.meta.env.DEV) {
+    console.log('[useDynamicResources] 🔨 Computing resources (first time)');
+  }
+
+  // Filter accessible pages and build hierarchical sorted list
+  const accessiblePages = pagesData.filter((page) =>
+    accessiblePageIds.has(page.id),
+  );
+
+  // Group pages by parentId
+  const pagesByParent = new Map<number | null, typeof accessiblePages>();
+  accessiblePages.forEach((page) => {
+    const parentId = page.parentId ?? null;
+    if (!pagesByParent.has(parentId)) {
+      pagesByParent.set(parentId, []);
+    }
+    pagesByParent.get(parentId)!.push(page);
+  });
+
+  // Sort each group by sortOrder
+  pagesByParent.forEach((pages) => {
+    pages.sort((a, b) => (a.sortOrder ?? Infinity) - (b.sortOrder ?? Infinity));
+  });
+
+  // Build sorted list using depth-first traversal
+  const sortedAccessiblePages: typeof accessiblePages = [];
+  const visited = new Set<number>();
+
+  const addPageWithChildren = (parentId: number | null) => {
+    const children = pagesByParent.get(parentId) || [];
+    children.forEach((page) => {
+      if (visited.has(page.id)) return;
+      visited.add(page.id);
+      sortedAccessiblePages.push(page);
+      addPageWithChildren(page.id);
+    });
+  };
+
+  // Start from root level (parentId = null)
+  addPageWithChildren(null);
+
+  // Add any orphaned pages
+  accessiblePages.forEach((page) => {
+    if (!visited.has(page.id)) {
+      sortedAccessiblePages.push(page);
+    }
+  });
+
+  // 检测哪些父页面有"index 子页面"（子页面路径与父页面相同，即 path: "" 的 index 路由）
+  // 这类父页面应作为纯分组节点（不注册 list 路径），否则 Refine 会优先选中父节点
+  // 导致 "全部" 等 index 子菜单项无法高亮
+  const parentIdsWithIndexChild = new Set<number>();
+  accessiblePages.forEach((childPage) => {
+    if (!childPage.parentId) return;
+    const childPath = getRoutePath(childPage.code);
+    if (!childPath) return;
+    const parentPage = pageMap.get(childPage.parentId);
+    if (!parentPage) return;
+    const parentPath = getRoutePath(parentPage.code);
+    if (childPath === parentPath) {
+      parentIdsWithIndexChild.add(childPage.parentId);
+    }
+  });
+
+  // Build resources
+  const resultResources: IResourceItem[] = [];
+  const addedResourceNames = new Set<string>();
+
+  sortedAccessiblePages.forEach((page) => {
+    if (!page) return;
+
+    // Skip virtual pages
+    if (page.isVirtual) return;
+
+    // Skip children of pages that use tabs
+    if (page.parentId) {
+      const parentPage = pageMap.get(page.parentId);
+      if (parentPage && PAGES_WITH_TABS.includes(parentPage.code)) {
+        return;
+      }
+    }
+
+    const permissionRes = snakeToCamel(page.code);
+
+    // Avoid duplicates
+    if (addedResourceNames.has(permissionRes)) return;
+
+    let parentPermissionRes: string | undefined;
+    if (page.parentId) {
+      const parentPage = pageMap.get(page.parentId);
+      if (parentPage) {
+        parentPermissionRes = snakeToCamel(parentPage.code);
+      }
+    }
+
+    // 优先从 routeRegistry 获取路径
+    // fallback 到 page.path（用于 gadmin2 页面）
+    const registryPath = getRoutePath(page.code);
+    const dbPath = page.path
+      ? page.path.startsWith('/')
+        ? page.path
+        : `/${page.path}`
+      : undefined;
+    const normalizedPath = registryPath ?? dbPath;
+
+    // 如果该页面是"有 index 子页面的父节点"，则不注册 list/show/edit/create
+    // 使其成为纯分组节点（SubMenu），子页面（如"全部"）的路径才负责 URL 匹配与菜单高亮
+    const isGroupParent = parentIdsWithIndexChild.has(page.id);
+
+    // Build resource item with auto-generated CRUD paths
+    // Store both zhLabel/enLabel in meta; Sider resolves at render time
+    const resource: IResourceItem = {
+      name: permissionRes,
+      ...(!isGroupParent &&
+        normalizedPath && {
+          list: normalizedPath,
+          show: `${normalizedPath}/show/:id`,
+          edit: `${normalizedPath}/edit/:id`,
+          create: `${normalizedPath}/create`,
+          clone: `${normalizedPath}/clone/:id`,
+        }),
+      meta: {
+        label: page.enName || page.code,
+        zhLabel: page.zhName || page.code,
+        enLabel: page.enName || page.code,
+        icon: iconMapping[page.code] || '',
+        parent: parentPermissionRes,
+        route: normalizedPath,
+        pageCode: page.code,
+        parentPageCode: page.parentId
+          ? pageMap.get(page.parentId)?.code
+          : undefined,
+      },
+    };
+
+    resultResources.push(resource);
+    addedResourceNames.add(permissionRes);
+  });
+
+  // Build final resources array with auto-crud if needed
+  const dynamicResources = resultResources;
+  const allResources = dynamicResources;
+
+  // Cache the result - will be used for all subsequent calls
+  cachedResources = allResources;
+  isComputing = false;
+
+  if (import.meta.env.DEV) {
+    console.log(
+      '[useDynamicResources] ✅ Resources cached. Count:',
+      cachedResources.length,
+    );
+    console.log(
+      '[useDynamicResources] 📌 This reference will be reused for all future calls',
+    );
+  }
+
+  return cachedResources;
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/useECharts.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useLayoutEffect, useRef, useCallback } from 'react';
+import * as echarts from 'echarts';
+
+type UseEChartsOpts = {
+  option: echarts.EChartsCoreOption;
+  theme?: string;
+  renderer?: 'canvas' | 'svg';
+  onEvents?: Record<string, (params: any, chart: echarts.ECharts) => void>;
+  shouldUpdate?: (
+    prev: echarts.EChartsCoreOption,
+    next: echarts.EChartsCoreOption,
+  ) => boolean;
+};
+
+function hasSize(el: HTMLElement): boolean {
+  return el.clientWidth > 0 && el.clientHeight > 0;
+}
+
+export function useECharts<T extends HTMLDivElement>({
+  option,
+  theme,
+  renderer = 'canvas',
+  onEvents,
+  shouldUpdate,
+}: UseEChartsOpts) {
+  const domRef = useRef<T | null>(null);
+  const chartRef = useRef<echarts.ECharts | null>(null);
+  const lastOptionRef = useRef<echarts.EChartsCoreOption | null>(null);
+  const roRef = useRef<ResizeObserver | null>(null);
+  const pendingOptionRef = useRef<echarts.EChartsCoreOption | null>(null);
+  const mountedRef = useRef(true);
+
+  const applyOption = useCallback(
+    (chart: echarts.ECharts, opt: echarts.EChartsCoreOption) => {
+      const need =
+        !lastOptionRef.current ||
+        (shouldUpdate ? shouldUpdate(lastOptionRef.current, opt) : true);
+      if (need) {
+        chart.setOption(opt, { notMerge: false, lazyUpdate: true });
+        lastOptionRef.current = opt;
+      }
+    },
+    [shouldUpdate],
+  );
+
+  const initChart = useCallback(() => {
+    if (!domRef.current) return;
+    if (!hasSize(domRef.current)) return;
+
+    const existing = echarts.getInstanceByDom(domRef.current as any);
+    if (existing) {
+      chartRef.current = existing;
+      if (pendingOptionRef.current) {
+        applyOption(existing, pendingOptionRef.current);
+        pendingOptionRef.current = null;
+      }
+      return;
+    }
+
+    const chart = echarts.init(domRef.current, theme, { renderer });
+    chartRef.current = chart;
+
+    if (onEvents) {
+      Object.entries(onEvents).forEach(([evt, handler]) => {
+        chart.on(evt as any, (p: any) => handler(p, chart));
+      });
+    }
+
+    if (pendingOptionRef.current) {
+      applyOption(chart, pendingOptionRef.current);
+      pendingOptionRef.current = null;
+    }
+  }, [theme, renderer, onEvents, applyOption]);
+
+  useLayoutEffect(() => {
+    mountedRef.current = true;
+    if (chartRef.current) {
+      chartRef.current.dispose();
+      chartRef.current = null;
+    }
+
+    initChart();
+
+    if (!chartRef.current) {
+      const timers = [
+        window.setTimeout(() => {
+          if (mountedRef.current) initChart();
+        }, 50),
+        window.setTimeout(() => {
+          if (mountedRef.current) initChart();
+        }, 200),
+        window.setTimeout(() => {
+          if (mountedRef.current) initChart();
+        }, 500),
+      ];
+      return () => {
+        mountedRef.current = false;
+        timers.forEach(clearTimeout);
+        if (chartRef.current) {
+          chartRef.current.dispose();
+          chartRef.current = null;
+        }
+      };
+    }
+
+    return () => {
+      mountedRef.current = false;
+      if (chartRef.current) {
+        chartRef.current.dispose();
+        chartRef.current = null;
+      }
+    };
+  }, [initChart]);
+
+  useEffect(() => {
+    if (!domRef.current) return;
+
+    roRef.current = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        if (!chartRef.current) {
+          initChart();
+        } else {
+          chartRef.current.resize();
+        }
+      });
+    });
+    roRef.current.observe(domRef.current);
+
+    return () => {
+      roRef.current?.disconnect();
+      roRef.current = null;
+    };
+  }, [initChart]);
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      pendingOptionRef.current = option;
+      return;
+    }
+    applyOption(chartRef.current, option);
+  }, [option, applyOption]);
+
+  return { domRef, chartRef };
+}

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/useFetchData.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+import { customRequest } from 'helpers/http';
+
+export const useFetchData = (
+  url: string,
+  type: 'post' | 'get',
+  defaultQuery?: any,
+  disableReq?: any,
+  errorCallBack?: () => void,
+) => {
+  const [data, setData] = useState<any>();
+  const [reqQuery, setReqQuery] = useState<any>(defaultQuery);
+  const [loading, setLoading] = useState<boolean>(false);
+  const fetchData = async (query?: any) => {
+    if (!url) return;
+    setLoading(true);
+    try {
+      const res = await customRequest(url, type, query);
+      setData(res);
+      setReqQuery(query);
+    } catch (error) {
+      console.error(error);
+      errorCallBack && errorCallBack();
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    !disableReq && url && fetchData(defaultQuery);
+  }, []);
+  return { data, loading, fetchData, reqQuery };
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/useListPageState.ts

@@ -0,0 +1,303 @@
+import { useMemo, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import {
+  CrudFilters,
+  HttpError,
+  parseTableParams,
+  unionFilters,
+  useExport,
+  useTranslate,
+  useUpdate,
+  useApiUrl,
+  BaseRecord,
+} from '@refinedev/core';
+import { useTable, useImport } from '@refinedev/antd';
+import dayjs from 'dayjs';
+import { useBatchOperations } from './useBatchOperations';
+import { ListPageConfig, UseListPageStateResult } from './types';
+import {
+  ModelType,
+  FieldDataType,
+  produceModel,
+  getColumns,
+  tableSearchBar,
+} from '@gadmin2n/react-common';
+
+export interface UseListPageStateConfig {
+  resourceName: string;
+  /** Raw model from generated code */
+  rawModel: ModelType;
+  /** Model customizations */
+  modelOverrides?: Record<string, Partial<FieldDataType>>;
+  tableConfig: ListPageConfig['tableConfig'];
+  prismaSelect?: any;
+  modelsMap: ListPageConfig['modelsMap'];
+  modelsEnum: ListPageConfig['modelsEnum'];
+  /** API URL, will use useApiUrl() if not provided */
+  apiUrl?: string;
+  /** Function to get request headers for batch operations */
+  requestHeaders?: () => Record<string, string>;
+  /** Hook to get relation select props */
+  useRelation?: (modelsMap: ListPageConfig['modelsMap']) => Record<string, any>;
+  /** Search fields configuration */
+  searchFields?: {
+    keyword?: string;
+    dateRange?: string[];
+  };
+}
+
+/**
+ * Comprehensive hook that provides all state and handlers for a list page
+ */
+export function useListPageState<T extends BaseRecord = any>({
+  resourceName,
+  rawModel,
+  modelOverrides = {},
+  tableConfig,
+  prismaSelect,
+  modelsMap,
+  modelsEnum,
+  apiUrl: customApiUrl,
+  requestHeaders,
+  useRelation,
+  searchFields = { keyword: 'q', dateRange: ['createdAt'] },
+}: UseListPageStateConfig): UseListPageStateResult {
+  const t = useTranslate();
+  const defaultApiUrl = useApiUrl();
+  const apiUrl = customApiUrl || defaultApiUrl;
+  const { search } = useLocation();
+
+  // Parse initial filters and sorters from URL
+  const { parsedSorter, parsedFilters } = parseTableParams(search);
+
+  // Create model with customizations
+  const [columns, model] = useMemo(() => {
+    const model: ModelType = produceModel(rawModel, modelOverrides);
+    const modelName =
+      resourceName.charAt(0).toUpperCase() + resourceName.slice(1);
+
+    const columns = getColumns(modelName, tableConfig.fields, {
+      ...modelsMap,
+      [modelName]: { model, meta: modelsMap[modelName]?.meta },
+    });
+
+    return [columns, model] as const;
+  }, [rawModel, modelOverrides, tableConfig.fields, modelsMap, resourceName]);
+
+  // Get search bar configuration
+  const { placeholder: searchPlaceholder, getSearchFilters } = useMemo(
+    () => tableSearchBar(tableConfig.toolbar.searchBar, rawModel),
+    [tableConfig.toolbar.searchBar, rawModel],
+  );
+
+  // Table hook
+  const {
+    tableProps,
+    sorters: sorter,
+    filters,
+    setCurrent,
+    setFilters,
+    searchFormProps,
+    tableQueryResult,
+  } = useTable<T, HttpError, T & { q: string }>({
+    meta: {
+      transformQFn: getSearchFilters,
+      select: prismaSelect,
+    },
+    filters: {
+      initial: parsedFilters,
+      defaultBehavior: 'merge',
+    },
+    sorters: {
+      initial: parsedSorter,
+    },
+  });
+
+  // Initialize search form values
+  const keywordField = searchFields.keyword || 'q';
+  const dateRangeField = searchFields.dateRange?.[0] || 'createdAt';
+
+  searchFormProps.initialValues = useMemo(
+    () => ({
+      [keywordField]: parsedFilters.find((f: any) => f.field === keywordField)
+        ?.value,
+      [dateRangeField]: parsedFilters.find(
+        (f: any) => f.field === dateRangeField && f.operator === 'gte',
+      )
+        ? [
+            dayjs(
+              parsedFilters.find(
+                (f: any) => f.field === dateRangeField && f.operator === 'gte',
+              )?.value,
+            ),
+            dayjs(
+              parsedFilters.find(
+                (f: any) => f.field === dateRangeField && f.operator === 'lte',
+              )?.value,
+            ),
+          ]
+        : [undefined, undefined],
+    }),
+    [parsedFilters, keywordField, dateRangeField],
+  );
+
+  // Search form submit handler
+  searchFormProps.onFinish = useCallback(
+    (values: any) => {
+      const fs: CrudFilters = [];
+      const keyword = (values[keywordField] || '').trim();
+      const dateRange = values[dateRangeField];
+
+      if (dateRange && dateRange[0]) {
+        fs.push(
+          {
+            field: dateRangeField,
+            operator: 'gte',
+            value: dateRange[0]?.toISOString?.(),
+          },
+          {
+            field: dateRangeField,
+            operator: 'lte',
+            value: dateRange[1]?.toISOString?.(),
+          },
+        );
+      }
+
+      if (keyword) {
+        fs.push({
+          field: keywordField,
+          operator: 'eq',
+          value: keyword,
+        });
+      }
+
+      setCurrent(1);
+      setFilters((prevFilters) =>
+        unionFilters(
+          [],
+          fs,
+          prevFilters.filter(
+            (item: any) => ![keywordField, dateRangeField].includes(item.field),
+          ),
+        ),
+      );
+    },
+    [keywordField, dateRangeField, setCurrent, setFilters],
+  );
+
+  // Batch operations
+  const batchOps = useBatchOperations({
+    resourceName,
+    apiUrl,
+    requestHeaders,
+    onSuccess: () => tableQueryResult.refetch(),
+    t,
+  });
+
+  // Export hooks
+  const { triggerExport: triggerExportAll, isLoading: exportLoading } =
+    useExport<T>({
+      maxItemCount: 200,
+      pageSize: 100,
+    });
+
+  const {
+    triggerExport: triggerExportSelected,
+    isLoading: exportSelectedLoading,
+  } = useExport<T>({
+    pageSize: 100,
+    meta: {
+      where: { id: { in: batchOps.selectedRowKeys.map(Number) } },
+    },
+  });
+
+  // Import hook
+  const importProps = useImport<T>({
+    mapData: (item: any) => ({ ...item }),
+    batchSize: 1,
+  });
+
+  // Row update
+  const { mutate: updateRow, isLoading: isUpdateRowLoading } = useUpdate();
+  const updateRowData = useCallback(
+    (id: number, values: any) => {
+      updateRow({
+        resource: resourceName,
+        id,
+        values,
+      });
+    },
+    [updateRow, resourceName],
+  );
+
+  // Get relation select props
+  const relationResult = useRelation?.(modelsMap) || {};
+  const relationSelectProps = useMemo(() => relationResult, [relationResult]);
+
+  // Build context
+  const context = useMemo(
+    () => ({
+      resourceName,
+      t,
+      model,
+      modelsMap,
+      modelsEnum,
+      tableConfig,
+      apiUrl,
+      relationSelectProps,
+      searchPlaceholder,
+    }),
+    [
+      resourceName,
+      t,
+      model,
+      modelsMap,
+      modelsEnum,
+      tableConfig,
+      apiUrl,
+      relationSelectProps,
+      searchPlaceholder,
+    ],
+  );
+
+  return {
+    // Table related
+    tableProps,
+    columns,
+    model,
+    sorter,
+    filters,
+
+    // Search related
+    searchFormProps,
+
+    // Selection related
+    selectedRowKeys: batchOps.selectedRowKeys,
+    setSelectedRowKeys: batchOps.setSelectedRowKeys,
+    rowSelection: batchOps.rowSelection,
+    hasSelected: batchOps.hasSelected,
+
+    // Batch operations
+    updateSelectedItems: batchOps.updateSelectedItems,
+    deleteSelectedItems: batchOps.deleteSelectedItems,
+    updateManyIsLoading: batchOps.updateManyIsLoading,
+    deleteManyIsLoading: batchOps.deleteManyIsLoading,
+
+    // Export/Import
+    triggerExportAll,
+    triggerExportSelected,
+    exportLoading,
+    exportSelectedLoading,
+    importProps,
+
+    // Row operations
+    updateRowData,
+    isUpdateRowLoading,
+
+    // Context
+    context,
+
+    // Refetch
+    refetch: tableQueryResult.refetch,
+  };
+}