@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/cjs/hooks/useKeepAliveTabs.tpl

@@ -0,0 +1,255 @@
+// replaceTo:tsx
+
+import { getLocale, history, MicroAppWithMemoHistory, useAppData, useIntl, useModel } from '@umijs/max';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { parse } from 'querystring';
+import { getMenuTitle, useMatchRoute } from './useMatchRoute';
+import { KeepAliveTab, KeepAliveTabsParams } from '../types'
+
+function getKey() {
+  return new Date().getTime().toString();
+}
+
+export const getPageQuery = () => parse(window.location.href.split('?')[1]);
+
+// 检查是否为需要创建新标签页的路由模式
+const isMultiTabRoute = (lastRoute: any) => {
+  return lastRoute.route?.multiTab;
+};
+
+// 获取页签名称
+const getMultiTabName = (title: string, pathname: string) => {
+  const { tabs } = getPageQuery();
+  if (tabs) {
+    return `${title}-${tabs}`;
+  }
+  return `${title} - ${pathname.split('/').pop()}`;
+};
+
+export function useKeepAliveTabs(props: KeepAliveTabsParams) {
+  const { showDefaultTab = true, defaultRoutePath, qiankunApps } = props;
+
+  const { formatMessage } = useIntl();
+  const { currentGlobalLang } = useModel('global');
+  // 获取所有路由
+  const { routes } = useAppData();
+
+  // 默认显示首页
+  const defaultTabs = useMemo(() => {
+    if (!showDefaultTab) return [];
+
+    const tabs = [];
+    const welcomeRoute: any = Object.values(routes).find((item) => item.path === defaultRoutePath);
+    
+    if (welcomeRoute?.path) {
+      tabs.push({
+        key: getKey(),
+        pathname: welcomeRoute.path,
+        routePath: welcomeRoute.path,
+        title: formatMessage({ id: `menu${welcomeRoute.path.replace(/\//g, '.')}` }),
+        children: (
+          <MicroAppWithMemoHistory
+            id={welcomeRoute.path}
+            name={welcomeRoute.path.split('/').filter(Boolean)[0]}
+            url={welcomeRoute.path}
+          />
+        ),
+        lastRoute: {
+          route: welcomeRoute,
+        },
+      });
+    }
+    return tabs;
+  }, []);
+
+  const [keepAliveTabs, setKeepAliveTabs] = useState<KeepAliveTab[]>(defaultTabs);
+  const [activeTabRoutePath, setActiveTabRoutePath] = useState<string>('');
+
+  const keepAliveShowEvents = useRef<Record<string, Array<() => void>>>({});
+  const keepAliveHiddenEvents = useRef<Record<string, Array<() => void>>>({});
+
+  const preLangRef = useRef<string>(getLocale());
+
+  const matchRoute = useMatchRoute(qiankunApps);
+
+  const onShow = useCallback(
+    (cb: () => void) => {
+      if (!keepAliveShowEvents.current[activeTabRoutePath]) {
+        keepAliveShowEvents.current[activeTabRoutePath] = [];
+      }
+      keepAliveShowEvents.current[activeTabRoutePath].push(cb);
+    },
+    [activeTabRoutePath],
+  );
+
+  const onHidden = useCallback(
+    (cb: () => void) => {
+      if (!keepAliveHiddenEvents.current[activeTabRoutePath]) {
+        keepAliveHiddenEvents.current[activeTabRoutePath] = [];
+      }
+      keepAliveHiddenEvents.current[activeTabRoutePath].push(cb);
+    },
+    [activeTabRoutePath],
+  );
+
+  // 关闭tab
+  const closeTab = useCallback(
+    (routePath: string = activeTabRoutePath) => {
+      // 最后一个和首页不允许关闭
+      if (keepAliveTabs.length === 1 || routePath === defaultRoutePath) return;
+      const index = keepAliveTabs.findIndex((o) => o.routePath === routePath);
+
+      // 如果关闭的页签是当前页签，跳转
+      if (keepAliveTabs[index].routePath === activeTabRoutePath) {
+        // 如果页签中有上一次激活的路由，跳回上次的路由，如果没有调到前一个页签
+        if (index > 0) {
+          history.push(keepAliveTabs[index - 1].pathname);
+        } else {
+          history.push(keepAliveTabs[index + 1].pathname);
+        }
+      }
+
+      keepAliveTabs.splice(index, 1);
+
+      delete keepAliveHiddenEvents.current[routePath];
+      delete keepAliveShowEvents.current[routePath];
+
+      setKeepAliveTabs([...keepAliveTabs]);
+    },
+    [activeTabRoutePath, keepAliveTabs],
+  );
+
+  // 关闭其他
+  const closeOtherTab = useCallback(
+    (routePath: string = activeTabRoutePath) => {
+      const toCloseTabs = keepAliveTabs.filter((o) => o.routePath !== routePath && o.routePath !== defaultRoutePath);
+
+      // 清除被关闭的tab注册的onShow事件和onHidden事件
+      toCloseTabs.forEach((tab) => {
+        delete keepAliveHiddenEvents.current[tab.routePath];
+        delete keepAliveShowEvents.current[tab.routePath];
+      });
+
+      setKeepAliveTabs((prev) => {
+        return prev.filter((o) => o.routePath === routePath || o.routePath === defaultRoutePath);
+      });
+      setActiveTabRoutePath(routePath);
+    },
+    [activeTabRoutePath],
+  );
+
+  // 刷新tab
+  const refreshTab = useCallback(
+    (routePath: string = activeTabRoutePath) => {
+      setKeepAliveTabs((prev) => {
+        const index = prev.findIndex((tab) => tab.routePath === routePath);
+
+        if (index >= 0) {
+          // 这个react的特性，key变了，组件会卸载重新渲染
+          prev[index].key = getKey();
+        }
+
+        delete keepAliveHiddenEvents.current[prev[index].routePath];
+        delete keepAliveShowEvents.current[prev[index].routePath];
+
+        return [...prev];
+      });
+    },
+    [activeTabRoutePath],
+  );
+
+  // 判断路径相同，但是参数不同的情况
+  const isPathEualAndParamsDiff = (existKeepAliveTab: KeepAliveTab, matchRoutePathname: string) => {
+    const existKeepAliveTabPathname = existKeepAliveTab.pathname;
+    // 如果去除查询参数路径不相等，则是携带路由参数不同，直接刷新页面
+    if (existKeepAliveTabPathname !== matchRoutePathname) {
+      return true;
+    }
+    // 如果url query参数不同，刷新页面
+    // if (existKeepAliveTab.pathname !== matchRoute.pathname) {
+    //   return location.search ? existKeepAliveTab.search !== location.search : true;
+    // }
+  };
+
+  useEffect(() => {
+    if (!matchRoute) return;
+
+    // 对于需要支持多标签的路由，使用pathname作为routePath，query参数变化只会刷新tab（.split('?')[0]去除时，query变化也会多开页签），只有params参数才会新开页签
+    const routePath = isMultiTabRoute(matchRoute.lastRoute) ? matchRoute.pathname.split('?')[0] : matchRoute.routePath;
+
+    const existKeepAliveTab = keepAliveTabs.find((o) => o.routePath === routePath);
+
+    setActiveTabRoutePath(routePath);
+
+    // 如果不存在则需要插入
+    if (!existKeepAliveTab) {
+      const tabsName = isMultiTabRoute(matchRoute.lastRoute)
+        ? getMultiTabName(matchRoute.title, matchRoute.pathname)
+        : matchRoute.title;
+      setKeepAliveTabs((prev) => [
+        ...prev,
+        {
+          title: tabsName,
+          key: getKey(),
+          routePath: routePath,
+          pathname: matchRoute.pathname,
+          children: matchRoute.children,
+          icon: matchRoute.icon,
+          search: location.search,
+          lastRoute: matchRoute.lastRoute,
+        },
+      ]);
+    } else if (isPathEualAndParamsDiff(existKeepAliveTab, matchRoute.pathname)) {
+      // 如果是同一个路由，但是参数不同，我们只需要刷新当前页签并且把pathname设置为新的pathname， children设置为新的children
+      setKeepAliveTabs((prev) => {
+        const index = prev.findIndex((tab) => tab.routePath === routePath);
+
+        if (index >= 0) {
+          prev[index].key = getKey();
+          prev[index].pathname = matchRoute.pathname;
+          prev[index].search = location.search;
+          prev[index].children = matchRoute.children;
+        }
+
+        delete keepAliveHiddenEvents.current[prev[index].routePath];
+        delete keepAliveShowEvents.current[prev[index].routePath];
+
+        return [...prev];
+      });
+    } else if (preLangRef.current !== currentGlobalLang) {
+      preLangRef.current = currentGlobalLang;
+
+      // 切换多语言时，刷新所有keep-alive组件
+      keepAliveHiddenEvents.current = {};
+      keepAliveShowEvents.current = {};
+      const newKeepAliveTabs = keepAliveTabs.map((tab) => ({
+        ...tab,
+        key: getKey(),
+        title: getMenuTitle(tab.lastRoute, routes, formatMessage),
+      }));
+      setKeepAliveTabs(newKeepAliveTabs);
+    } else {
+      // 如果存在，触发组件的onShow的回调
+      (keepAliveShowEvents.current[existKeepAliveTab.routePath] || []).forEach((cb) => {
+        cb();
+      });
+    }
+
+    // 路由改变，执行上一个tab的onHidden事件
+    (keepAliveHiddenEvents.current[activeTabRoutePath] || []).forEach((cb) => {
+      cb();
+    });
+  }, [matchRoute]);
+
+  return {
+    keepAliveTabs,
+    activeTabRoutePath,
+    setActiveTabRoutePath,
+    closeTab,
+    refreshTab,
+    closeOtherTab,
+    onShow,
+    onHidden,
+    setKeepAliveTabs,
+  };
+}

package/dist/cjs/hooks/useMatchRoute.tpl

@@ -0,0 +1,76 @@
+// replaceTo:tsx
+
+import { IRoute, history, useAppData, useIntl, useLocation, useModel, useSelectedRoutes } from '@umijs/max';
+import { useEffect, useState } from 'react';
+import { useOutlet } from './useOutlet';
+import { MatchRouteType } from '../types'
+
+type CustomIRoute = IRoute & {
+  name: string;
+};
+
+// 处理菜单名称
+export const getMenuTitle = (lastRoute: any, routes: any, formatMessage: (params: any) => string) => {
+  let curRoute = lastRoute.route;
+  let names = [];
+
+  while (curRoute.parentId && !curRoute.isLayout) {
+    if ((routes[curRoute.parentId] as CustomIRoute).name) {
+      names.push((routes[curRoute.parentId] as CustomIRoute).name);
+    } else {
+      break;
+    }
+    curRoute = routes[curRoute.parentId];
+  }
+  names.reverse();
+  names.push(lastRoute.route.name);
+
+  return formatMessage({ id: 'menu.' + names.join('.') });
+};
+
+export function useMatchRoute(qiankunApps: any) {
+  // 获取匹配到的路由
+  const selectedRoutes = useSelectedRoutes();
+  // 获取路由组件实例
+  const children = useOutlet(qiankunApps);
+  // 获取所有路由
+  const { routes } = useAppData();
+  // 获取当前url
+  const { pathname } = useLocation();
+  // 国际化方法，因为默认菜单做了国际化，所以需要把菜单转成中文
+  const { formatMessage } = useIntl();
+  // 当前语言，切换时改变多页签title
+  const { currentGlobalLang } = useModel('global');
+
+  const [matchRoute, setMatchRoute] = useState<MatchRouteType | undefined>();
+
+  // 监听pathname变了，说明路由有变化，重新匹配，返回新路由信息
+  useEffect(() => {
+    // 获取当前匹配的路由
+    const lastRoute = selectedRoutes.at(-1);
+
+    if (!lastRoute?.route?.path) return;
+
+    const routeDetail = routes[(lastRoute.route as any).id];
+
+    // 如果匹配的路由需要重定向，这里直接重定向
+    if (routeDetail?.redirect) {
+      history.replace(routeDetail?.redirect);
+      return;
+    }
+
+    // 获取菜单名称
+    let title = getMenuTitle(lastRoute, routes, formatMessage);
+
+    setMatchRoute({
+      title,
+      pathname: pathname + location.search,
+      children,
+      routePath: lastRoute.route.path,
+      icon: (lastRoute.route as any).icon, // icon是拓展出来的字段
+      lastRoute,
+    });
+  }, [pathname, location.search, currentGlobalLang]);
+
+  return matchRoute;
+}

package/dist/cjs/hooks/useMemoizedFn.tpl

@@ -0,0 +1,32 @@
+import { useMemo, useRef } from 'react';
+const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+
+type noop = (this: any, ...args: any[]) => any;
+
+type PickFunction<T extends noop> = (
+  this: ThisParameterType<T>,
+  ...args: Parameters<T>
+) => ReturnType<T>;
+
+function useMemoizedFn<T extends noop>(fn: T) {
+  if (isDev) {
+    if (!(typeof fn === 'function')) {
+      console.error(`useMemoizedFn expected parameter is a function, got ${typeof fn}`);
+    }
+  }
+
+  const fnRef = useRef<T>(fn);
+
+  fnRef.current = useMemo<T>(() => fn, [fn]);
+
+  const memoizedFn = useRef<PickFunction<T>>();
+  if (!memoizedFn.current) {
+    memoizedFn.current = function (this, ...args) {
+      return fnRef.current.apply(this, args);
+    };
+  }
+
+  return memoizedFn.current as PickFunction<T>;
+}
+
+export default useMemoizedFn;

package/dist/cjs/hooks/useOutlet.tpl

@@ -0,0 +1,20 @@
+// replaceTo:tsx
+
+import { MicroAppWithMemoHistory, useOutlet as useChildren, useLocation } from '@umijs/max';
+
+export function useOutlet(qiankunApps: any) {
+  const { pathname } = useLocation();
+
+  const children = useChildren();
+
+  const [, moduleName] = pathname.split('/');
+
+  // 获取子模块配置
+  const getAppConfig = qiankunApps.find((app) => app.name === moduleName);
+  // 如果没有匹配到子模块，就使用主模块的useOutlet
+  if (!getAppConfig) {
+    return children;
+  }
+
+  return <MicroAppWithMemoHistory id={pathname} name={moduleName} url={pathname} />;
+}

package/dist/cjs/hooks/usePageExport.tpl

@@ -0,0 +1,155 @@
+import { useIntl } from '@umijs/max';
+import { message } from 'antd';
+import { useCallback, useState } from 'react';
+import { ExportPageOptions, UseExportPageReturn } from '../types';
+import { PageExporter } from '../utils/exportPage';
+
+/**
+ * PDF导出Hook
+ * @param defaultOptions 默认配置选项
+ * @returns PDF导出相关方法和状态
+ */
+export const usePageExport = (defaultOptions?: ExportPageOptions): UseExportPageReturn => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { formatMessage } = useIntl();
+
+  const onExportPDF = useCallback(
+    async (elements: HTMLElement | HTMLElement[], options?: ExportPageOptions) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        message.loading(formatMessage({ id: 'cfmmUI.action.export.waitingMessage' }) + ' PDF...', 0);
+        if (Array.isArray(elements)) {
+          await PageExporter.exportMultipleToPDF(elements, {
+            ...defaultOptions,
+            ...options,
+          });
+        } else {
+          await PageExporter.exportToPDF(elements, {
+            ...defaultOptions,
+            ...options,
+          });
+        }
+        message.destroy();
+        message.success('PDF ' + formatMessage({ id: 'cfmmUI.action.export.successMessage' }));
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'PDF ' + formatMessage({ id: 'cfmmUI.action.export.failMessage' });
+        setError(errorMessage);
+        message.destroy();
+        message.error(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [defaultOptions],
+  );
+
+  const onPreviewPDF = useCallback(
+    async (element: HTMLElement, options?: ExportPageOptions) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        message.loading(formatMessage({ id: 'cfmmUI.action.preview.waitingMessage' }) + '...', 0);
+        await PageExporter.previewPDF(element, {
+          ...defaultOptions,
+          ...options,
+        });
+        message.destroy();
+        message.success(formatMessage({ id: 'cfmmUI.action.preview.successMessage' }));
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : formatMessage({ id: 'cfmmUI.action.preview.failMessage' });
+        setError(errorMessage);
+        message.destroy();
+        message.error(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [defaultOptions],
+  );
+
+  const onExportImage = useCallback(
+    async (elements: HTMLElement | HTMLElement[], options?: ExportPageOptions) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        message.loading(
+          `${formatMessage({ id: 'cfmmUI.action.export.waitingMessage' })} ${formatMessage({
+            id: 'cfmmUI.File.exportType.image',
+            defaultMessage: '图片',
+          })}...`,
+          0,
+        );
+        if (!Array.isArray(elements)) {
+          await PageExporter.exportToImage(elements, {
+            ...defaultOptions,
+            ...options,
+          });
+        }
+        message.destroy();
+        message.success(
+          `${formatMessage({ id: 'cfmmUI.File.exportType.image', defaultMessage: '图片' })} ${formatMessage({
+            id: 'cfmmUI.action.export.successMessage',
+          })}`,
+        );
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : formatMessage({ id: 'cfmmUI.File.exportType.image', defaultMessage: '图片' }) +
+              formatMessage({ id: 'cfmmUI.action.export.failMessage' });
+        setError(errorMessage);
+        message.destroy();
+        message.error(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [defaultOptions],
+  );
+
+  const onPreviewImage = useCallback(
+    async (element: HTMLElement, options?: ExportPageOptions) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        message.loading(formatMessage({ id: 'cfmmUI.action.preview.waitingMessage' }) + '...', 0);
+        await PageExporter.previewImage(element, {
+          ...defaultOptions,
+          ...options,
+        });
+        message.destroy();
+        message.success(formatMessage({ id: 'cfmmUI.action.preview.successMessage' }));
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : formatMessage({ id: 'cfmmUI.action.preview.failMessage' });
+        setError(errorMessage);
+        message.destroy();
+        message.error(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [defaultOptions],
+  );
+
+  return {
+    onExportPDF,
+    onPreviewPDF,
+    onExportImage,
+    onPreviewImage,
+    loading,
+    error,
+  };
+};

package/dist/cjs/hooks/useQueryTableList.tpl

@@ -0,0 +1,91 @@
+import { AxiosError } from '@umijs/max';
+import { App, message as antdMessage } from 'antd';
+import { useState } from 'react';
+import useActionLocales from './useActionLocales';
+import { API } from '../types';
+
+export interface Result_TableListType<T> {
+  data: T;
+  total: number;
+  success: boolean;
+  error?: AxiosError | null;
+}
+
+type Options<T, K> = {
+  // 查询列表的方法
+  queryFn: (params: K) => Promise<API.Result_Base_List<T>>;
+  // 是否显示message.loading
+  showLoadingMsg?: boolean;
+  // loading时的提示内容
+  waitingMsg?: string;
+  // 查询失败时的提示内容
+  failMsg?: string;
+};
+
+interface IProps {
+  baseLocalCode?: string;
+  baseLocalName?: string;
+}
+
+const useQueryTableList = (props: IProps = {}) => {
+  const { baseLocalCode, baseLocalName } = props;
+  const appContext = App.useApp();
+  const message = appContext?.message && Object.keys(appContext.message).length ? appContext.message : antdMessage;
+
+  const { getActionLocales } = useActionLocales({ baseLocalCode, baseLocalName });
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<AxiosError>();
+
+  /**
+   *
+   * @param params 查询参数
+   * @param {Options} options
+   * @returns
+   */
+  async function queryList<T, K = API.TableListParams>(
+    params: K,
+    options: Options<T, K>,
+  ): Promise<Result_TableListType<T>> {
+    setLoading(true);
+
+    const { queryFn, waitingMsg, failMsg, showLoadingMsg = true } = options;
+    const { waitingMsg: waiting } = getActionLocales('GET');
+    let hide;
+
+    if (showLoadingMsg) {
+      const msg = waitingMsg || waiting;
+      hide = message.loading(msg, 0);
+    }
+    const retrunData: Result_TableListType<T> = {
+      data: [] as T,
+      total: 0,
+      success: false,
+      error: null,
+    };
+
+    try {
+      const result = await queryFn(params);
+      hide?.();
+      // 返回数据处理
+      if (result && result.code === 200) {
+        const { rows, data, total } = result;
+        retrunData.data = data && !rows ? data : rows;
+        retrunData.total = total;
+        retrunData.success = true;
+      }
+    } catch (error: any) {
+      hide?.();
+      const msg = failMsg || getActionLocales('GET', JSON.stringify(error)).failMsg;
+      message.error(msg);
+      console.log('error', error);
+      retrunData.error = error;
+      setError(error);
+    }
+    setLoading(false);
+    return retrunData;
+  }
+
+  return { queryList, loading, error };
+};
+
+export default useQueryTableList;