@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

package/lib/templates/qiankun/cf-workbench-base/src/components/Layout/getLayoutConfig.tsx

@@ -0,0 +1,256 @@
+import logo from '@/assets/logo.png';
+import useRouteAuth from '@/hooks/useRouteAuth';
+import { queryTableList } from '@/pages/System/SoftwareEcology/services';
+import { AppListProps, ProBreadcrumb } from '@ant-design/pro-components';
+import {
+  cfmmUtils,
+  GlobalFooter,
+  KeepAliveTabs,
+  MenuFooter,
+  RunTimeLayoutConfig,
+  useIntl,
+  useKeepAliveTabs,
+  useLocation,
+  useModel,
+} from '@umijs/max';
+import { App, ConfigProvider, Tag, Tooltip } from 'antd';
+import NProgress from 'nprogress';
+import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import defaultSettings, { blankSettings } from '../../../config/defaultSettings';
+import { getChildren, menuDataRender } from './utils';
+
+type BaseIConfig = any;
+
+export type HistoryType = 'browser' | 'hash';
+export type App = {
+  name: string;
+  entry: string | { scripts: string[]; styles: string[] };
+  base?: string | string[];
+  history?: HistoryType;
+  // 取 entry 时是否需要开启跨域 credentials
+  credentials?: boolean;
+  props?: any;
+} & Partial<Pick<BaseIConfig, 'mountElementId'>>;
+
+type GetLayoutConfigFn = (props: { qiankunApps: App[], homeRoutePath: string, hasAppList?: boolean } & ReturnType<RunTimeLayoutConfig>) => RunTimeLayoutConfig;
+
+// 左上角软件生态圈渲染
+const appListRender = (tableData: any) => {
+  const appList: any[] = tableData.rows?.map((item: any) => ({
+    icon: logo,
+    title: (
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <b>{item.title}</b>
+        <span>
+          {item.tag.split(',').map((tag: string, index: number) => {
+            const colorArray = item.tagColor.split(',');
+            return (
+              <Tag key={index} color={colorArray[index]}>
+                {tag}
+              </Tag>
+            );
+          })}
+        </span>
+      </div>
+    ),
+    desc: (
+      <div style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis' }}>
+        <Tooltip title={item.remark}>{item.remark}</Tooltip>
+      </div>
+    ),
+    url: item.url,
+    target: item.hrefTarget,
+  }));
+
+  return appList;
+};
+
+const getLayoutConfig: GetLayoutConfigFn =
+  ({ qiankunApps, homeRoutePath, hasAppList, ...reset }) =>
+    ({
+      initialState,
+      setInitialState,
+      // loading,
+      // refresh,
+      // error,
+    }) => {
+      const { formatMessage } = useIntl();
+      const { settings, currentUser } = initialState;
+      const { pathname, search } = useLocation();
+      const { collapsed, handleCollapsed, currentGlobalLang } = useModel('global');
+      const { queryUserPreferenceSettings } = useModel('user');
+      const { hasCurrentRouteAuth, getUserStatusRedirect } = useRouteAuth(currentUser);
+
+      /**
+       * 应用中心列表
+       */
+      const [getAppList, setApplist] = useState<AppListProps[]>([]);
+
+      const hasHomePageAuth = useMemo(() => {
+        const { menus = [] } = currentUser || {};
+        if (!menus.length) return;
+        const homePage = menus.find((item: any) => item.path === homeRoutePath);
+        return homePage?.status === 'Y' && homePage?.hideFlag !== 'Y';
+      }, [currentUser]);
+
+      const { keepAliveTabs, activeTabRoutePath } = useKeepAliveTabs({
+        showDefaultTab: hasHomePageAuth,
+        defaultRoutePath: homeRoutePath,
+        qiankunApps,
+      });
+
+      // 根据用户信息判断是否全屏
+      const isFullPageByCurrentUser = useMemo(() => {
+        if (getUserStatusRedirect && getUserStatusRedirect !== '/403') {
+          return true;
+        }
+        
+        return false;
+      }, [getUserStatusRedirect]);
+
+      useEffect(() => {
+        // 这里的isFullPage确保路由跳转不显示菜单
+        if (cfmmUtils.isFullPage() || isFullPageByCurrentUser) {
+          const newSettings = { ...settings, ...blankSettings };
+          setInitialState({ ...initialState, settings: newSettings });
+        } else {
+          setInitialState({ ...initialState, settings: defaultSettings });
+        }
+      }, [location.search, isFullPageByCurrentUser, pathname]);
+
+      useEffect(() => {
+        //获取用户偏好设置
+        if (currentUser) {
+          queryUserPreferenceSettings?.(currentUser.userId);
+        }
+      }, [currentUser]);
+
+      /**
+       * 首次加载时处理应用中心列表
+       */
+      const fetchData = async () => {
+        if (!hasAppList) return;
+
+        const tableData = await queryTableList({});
+
+        const appList = appListRender(tableData);
+
+        setApplist(appList);
+      };
+
+      useEffect(() => {
+        fetchData();
+      }, [currentGlobalLang]);
+
+      // url变化时开启进度条
+      useLayoutEffect(() => {
+        // 不是缓存组件时开启进度条，注意如果是缓存组件也开启进度条，需要在下面完成进度条也加入判断，否则子应用不会完成进度条
+        if (!keepAliveTabs.some((item) => item.pathname === pathname + search)) {
+          NProgress.start();
+        }
+      }, [pathname, search]);
+
+      useEffect(() => {
+        const [, moduleName] = pathname.split('/');
+        const isQiankunApp = qiankunApps.some((app) => app.name === moduleName);
+        // 判断如果不是子应用，完成进度条，如果是子应用在@/utils/qiankunConfig.ts应用挂载后完成
+        if (!isQiankunApp) {
+          NProgress.done();
+        }
+        // 卸载移除进度条
+        return () => NProgress.remove();
+      }, [pathname, search]);
+
+      return {
+        collapsed: collapsed,
+        onCollapse: (collapsed: boolean) => {
+          handleCollapsed(collapsed);
+        },
+        // 水印
+        waterMarkProps: { content: currentUser?.userName },
+        //此处是渲染菜单的位置，从后台取出数据，并将数据渲染成需要的方式
+        menuDataRender: () => menuDataRender(currentUser?.menus),
+        //渲染头部右侧的节点 (从外部传进来)
+        // rightContentRender: () => (
+        //   <ConfigProvider prefixCls="mainAnt">
+        //     <RightContent />
+        //   </ConfigProvider>
+        // ),
+        //头部的面包屑
+        headerContentRender: () => <ProBreadcrumb />,
+        //面包屑
+        breadcrumbRender: (routers = []) => {
+          const newRouters = routers.map((item) => ({ ...item, linkPath: '' }));
+          return [
+            {
+              linkPath: '/',
+              breadcrumbName: formatMessage({ id: 'menu' + homeRoutePath.replaceAll('/', '.') }),
+            },
+            ...newRouters,
+          ];
+        },
+        // layout: 'side',
+        breadcrumbProps: false,
+        //页脚
+        footerRender: () => (
+          <ConfigProvider prefixCls="mainAnt">
+            <GlobalFooter />
+          </ConfigProvider>
+        ),
+        // 菜单折叠按钮
+        collapsedButtonRender: false,
+        menuHeaderRender: undefined,
+        // 菜单底部
+        menuFooterRender: () => <MenuFooter isCollapsed={collapsed} handleCollapsed={handleCollapsed} />,
+        noFound: <div>noFound</div>,
+        unAccessible: <div>unAccessible</div>,
+        ...settings,
+        /**
+         * 应用中心列表
+         */
+        appList: hasAppList ? getAppList : undefined,
+        /**
+         * 应用中心渲染
+         * @param props
+         * @param defaultDom
+         * @returns
+         */
+        appListRender: hasAppList ? (props, defaultDom) => {
+          return (
+            <div>
+              <h2>{formatMessage({ id: 'common.layouts.appList.title', defaultMessage: '翠峰科技软件生态圈' })}</h2>
+              {defaultDom}
+
+              {/**
+             * 以下是自定义控件
+             */}
+              {/* <MenuCard /> */}
+            </div>
+          );
+        } : undefined,
+        // 自定义页面渲染
+        childrenRender: () => {
+          // 获取路由跳转全屏页的页面
+          const children = keepAliveTabs.find((item) => {
+            return item.routePath === activeTabRoutePath;
+          })?.children;
+
+          const element = (
+            <KeepAliveTabs
+              showDefaultTab={hasHomePageAuth}
+              defaultRoutePath={homeRoutePath}
+              qiankunApps={qiankunApps}
+            />
+          );
+
+          return (
+            <ConfigProvider prefixCls="mainAnt" theme={{ cssVar: true }}>
+              <App>{getChildren({ currentUser, element, children, hasCurrentRouteAuth, getUserStatusRedirect })}</App>
+            </ConfigProvider>
+          );
+        },
+        ...reset,
+      };
+    };
+
+export default getLayoutConfig;

package/lib/templates/qiankun/cf-workbench-base/src/components/Layout/layout.tsx

@@ -0,0 +1,237 @@
+import logo from '@/assets/logo.png';
+import { HOME_ROUTE_PATH, MES_MENU } from '@/constants';
+import useRouteAuth from '@/hooks/useRouteAuth';
+import { queryTableList } from '@/pages/System/SoftwareEcology/services';
+import qiankunConfig from '@/utils/qiankunConfig';
+import { AppListProps, ProBreadcrumb } from '@ant-design/pro-components';
+import {
+  cfmmUtils,
+  GlobalFooter,
+  KeepAliveTabs,
+  MenuFooter,
+  RunTimeLayoutConfig,
+  useIntl,
+  useKeepAliveTabs,
+  useLocation,
+  useModel,
+} from '@umijs/max';
+import { App, ConfigProvider, Tag, Tooltip } from 'antd';
+import NProgress from 'nprogress';
+import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import defaultSettings, { blankSettings } from '../../../config/defaultSettings';
+import RightContent from '../GlobalHeader/RightContent';
+import { getChildren, menuDataRender } from './utils';
+
+// 左上角软件生态圈渲染
+const appListRender = (tableData: any) => {
+  const appList: any[] = tableData.rows?.map((item: any) => ({
+    icon: logo,
+    title: (
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <b>{item.title}</b>
+        <span>
+          {item.tag.split(',').map((tag: string, index: number) => {
+            const colorArray = item.tagColor.split(',');
+            return (
+              <Tag key={index} color={colorArray[index]}>
+                {tag}
+              </Tag>
+            );
+          })}
+        </span>
+      </div>
+    ),
+    desc: (
+      <div style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis' }}>
+        <Tooltip title={item.remark}>{item.remark}</Tooltip>
+      </div>
+    ),
+    url: item.url,
+    target: item.hrefTarget,
+  }));
+
+  return appList;
+};
+
+const LayoutConfig: RunTimeLayoutConfig = ({
+  initialState,
+  setInitialState,
+  // loading,
+  // refresh,
+  // error,
+}) => {
+  const { formatMessage } = useIntl();
+  const { settings, currentUser } = initialState;
+  const { pathname, search } = useLocation();
+  const { collapsed, handleCollapsed, currentGlobalLang } = useModel('global');
+  const { queryUserPreferenceSettings } = useModel('user');
+  const { hasCurrentRouteAuth, getUserStatusRedirect } = useRouteAuth(currentUser);
+
+  /**
+   * 应用中心列表
+   */
+  const [getAppList, setApplist] = useState<AppListProps[]>([]);
+
+  const hasHomePageAuth = useMemo(() => {
+    const { menus = [] } = currentUser || {};
+    if (!menus.length) return;
+    const homePage = menus.find((item: any) => item.path === HOME_ROUTE_PATH);
+    return homePage?.status === 'Y' && homePage?.hideFlag !== 'Y';
+  }, [currentUser]);
+
+  const { keepAliveTabs, activeTabRoutePath } = useKeepAliveTabs({
+    showDefaultTab: hasHomePageAuth,
+    defaultRoutePath: HOME_ROUTE_PATH,
+    qiankunApps: qiankunConfig.qiankun.apps,
+  });
+
+  // 根据用户信息判断是否全屏
+  const isFullPageByCurrentUser = useMemo(() => {
+    if(getUserStatusRedirect && getUserStatusRedirect !== '/403') {
+      return true;
+    }
+  }, [currentUser]);
+
+  useEffect(() => {
+    // 这里的isFullPage确保路由跳转不显示菜单
+    if (cfmmUtils.isFullPage() || isFullPageByCurrentUser) {
+      const newSettings = { ...settings, ...blankSettings };
+      setInitialState({ ...initialState, settings: newSettings });
+    } else {
+      setInitialState({ ...initialState, settings: defaultSettings });
+    }
+  }, [location.search, isFullPageByCurrentUser]);
+
+  useEffect(() => {
+    //获取用户偏好设置
+    if (currentUser) {
+      queryUserPreferenceSettings?.(currentUser.userId);
+    }
+  }, [currentUser]);
+
+  /**
+   * 首次加载时处理应用中心列表
+   */
+  const fetchData = async () => {
+    const tableData = await queryTableList({});
+
+    const appList = appListRender(tableData);
+
+    setApplist(appList);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [currentGlobalLang]);
+
+  // url变化时开启进度条
+  useLayoutEffect(() => {
+    // 不是缓存组件时开启进度条，注意如果是缓存组件也开启进度条，需要在下面完成进度条也加入判断，否则子应用不会完成进度条
+    if (!keepAliveTabs.some((item) => item.pathname === pathname + search)) {
+      NProgress.start();
+    }
+  }, [pathname, search]);
+
+  useEffect(() => {
+    const [, moduleName] = pathname.split('/');
+    const isQiankunApp = qiankunConfig.qiankun.apps.some((app) => app.name === moduleName);
+    // 判断如果不是子应用，完成进度条，如果是子应用在@/utils/qiankunConfig.ts应用挂载后完成
+    if (!isQiankunApp) {
+      NProgress.done();
+    }
+    // 卸载移除进度条
+    return () => NProgress.remove();
+  }, [pathname, search]);
+
+  return {
+    collapsed: collapsed,
+    onCollapse: (collapsed: boolean) => {
+      handleCollapsed(collapsed);
+    },
+    // 水印
+    waterMarkProps: { content: currentUser?.userName },
+    //此处是渲染菜单的位置，从后台取出数据，并将数据渲染成需要的方式
+    menuDataRender: () => menuDataRender(currentUser?.menus),
+    //渲染头部右侧的节点
+    rightContentRender: () => (
+      <ConfigProvider prefixCls="mainAnt">
+        <RightContent />
+      </ConfigProvider>
+    ),
+    //头部的面包屑
+    headerContentRender: () => <ProBreadcrumb />,
+    //面包屑
+    breadcrumbRender: (routers = []) => {
+      const newRouters = routers.map((item) => ({ ...item, linkPath: '' }));
+      return [
+        {
+          linkPath: '/',
+          breadcrumbName: formatMessage({ id: MES_MENU + 'welcome' }),
+        },
+        ...newRouters,
+      ];
+    },
+    // layout: 'side',
+    breadcrumbProps: false,
+    //页脚
+    footerRender: () => (
+      <ConfigProvider prefixCls="mainAnt">
+        <GlobalFooter />
+      </ConfigProvider>
+    ),
+    // 菜单折叠按钮
+    collapsedButtonRender: false,
+    menuHeaderRender: undefined,
+    // 菜单底部
+    menuFooterRender: () => <MenuFooter isCollapsed={collapsed} handleCollapsed={handleCollapsed} />,
+    noFound: <div>noFound</div>,
+    unAccessible: <div>unAccessible</div>,
+    ...settings,
+    /**
+     * 应用中心列表
+     */
+    appList: getAppList,
+    /**
+     * 应用中心渲染
+     * @param props
+     * @param defaultDom
+     * @returns
+     */
+    appListRender: (props, defaultDom) => {
+      return (
+        <div>
+          <h2>{formatMessage({ id: 'common.layouts.appList.title', defaultMessage: '翠峰科技软件生态圈' })}</h2>
+          {defaultDom}
+
+          {/**
+           * 以下是自定义控件
+           */}
+          {/* <MenuCard /> */}
+        </div>
+      );
+    },
+    // 自定义页面渲染
+    childrenRender: () => {
+      // 获取路由跳转全屏页的页面
+      const children = keepAliveTabs.find((item) => {
+        return item.routePath === activeTabRoutePath;
+      })?.children;
+
+      const element = (
+        <KeepAliveTabs
+          showDefaultTab={hasHomePageAuth}
+          defaultRoutePath={HOME_ROUTE_PATH}
+          qiankunApps={qiankunConfig.qiankun.apps}
+        />
+      );
+
+      return (
+        <ConfigProvider prefixCls="mainAnt" theme={{ cssVar: true }}>
+          <App>{getChildren({ currentUser, element, children, hasCurrentRouteAuth, getUserStatusRedirect })}</App>
+        </ConfigProvider>
+      );
+    },
+  };
+};
+
+export default LayoutConfig;

package/lib/templates/qiankun/cf-workbench-base/src/components/Layout/utils.tsx

@@ -0,0 +1,131 @@
+import { UserStatusRedirect } from '@/hooks/useRouteAuth';
+import { CurrentUser } from '@/models/user';
+import UserNoPagePermission from '@/pages/UserNoPagePermission';
+import { MenuDataItem } from '@ant-design/pro-components';
+import { cfmmUtils, DynamicIcon, DynamicIconNameType, NoFoundPage, UserDisable, UserNoPermission, history, Authorized } from '@umijs/max';
+import { ProLayoutSetting } from 'config/defaultSettings';
+import NProgress from 'nprogress';
+
+// 判断用户是否需要显示全屏
+const isBlank = (currentUser: CurrentUser | undefined) => {
+  return (
+    currentUser &&
+    (!currentUser.userId ||
+      (currentUser.status && currentUser.status.toUpperCase() === 'N') ||
+      (currentUser.permissions && currentUser.permissions.length === 0))
+  );
+};
+
+// 获取layout配置
+export const getLayoutSettings = (
+  currentUser: CurrentUser | undefined,
+  settings: ProLayoutSetting,
+  blankSetting: ProLayoutSetting,
+) => {
+  let newSettings = { ...settings };
+  //这里的isFullPage确保第一次加载全屏页面不显示菜单
+  if (isBlank(currentUser) || cfmmUtils.isFullPage()) {
+    newSettings = { ...settings, ...blankSetting };
+  }
+
+  return newSettings;
+};
+
+/**
+ * 将菜单的平面文件转换成需要的上下级结构
+ */
+const ConvertMenu = (parentKey: string, allMenu: MenuDataItem[]) => {
+  if (!allMenu) return [];
+
+  // 过滤有效的菜单，无效的菜单则不会显示，如果菜单文件夹无效，则下面的菜单也不会显示
+  const findMenuList = allMenu.filter((item) => item.parentId === parentKey && item.status === 'Y' && item.hideFlag === 'N');
+
+  //对找到的菜单进行排序
+  const findMenuSortList = findMenuList.sort((a, b) => a.seqNo - b.seqNo);
+
+  // 找到级别下的菜单，默认从0开始（即顶级菜单）
+  return findMenuSortList.map((menuItem: MenuDataItem) => {
+    //找出子节点
+    const findSonMenuList = allMenu.filter((item) => item.parentId === menuItem.menuId);
+    //将子节点进行处理
+    const sonMenuList = ConvertMenu(menuItem.menuId, allMenu);
+
+    //即将返回的菜单实体
+    let menu: any = {
+      name: menuItem.menuCode,
+      path: menuItem.path,
+      icon: menuItem.icon,
+      routes: null,
+    };
+
+    if (findSonMenuList && findSonMenuList.length > 0) {
+      //子菜单
+      menu.routes = sonMenuList;
+    }
+
+    return menu;
+  });
+};
+
+// 转化Icon  string --> React.ReactNode
+const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
+  menus.map(({ icon, children, ...item }) => ({
+    ...item,
+    icon: icon && <DynamicIcon iconName={icon as DynamicIconNameType} />,
+    children: children && loopMenuItem(children),
+  }));
+
+/**
+ * use Authorized check all menu item
+ */
+export const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => {
+  const convertMenuList = ConvertMenu('0', menuList);
+  const loopMenuItemList = loopMenuItem(convertMenuList);
+  //console.log(`这里是菜单==>${JSON.stringify(menuList)}`);
+  return loopMenuItemList.map((item) => {
+    const localItem = {
+      ...item,
+      children: item.children ? menuDataRender(item.children) : undefined,
+    };
+    // return localItem;
+    return Authorized.check(item.authority, localItem, null) as MenuDataItem;
+  });
+};
+
+interface GetChildrenProps {
+  currentUser: CurrentUser;
+  element: JSX.Element;
+  children: React.ReactNode;
+  hasCurrentRouteAuth: boolean;
+  getUserStatusRedirect: UserStatusRedirect | null;
+}
+
+const pageMap = {
+  '/401': <UserNoPermission />,
+  '/400': <UserDisable />,
+  '/403': <UserNoPagePermission />,
+  '/404': <NoFoundPage onClick={() => {
+    history.push('/');
+  }}/>,
+};
+
+export const getChildren = ({ element, children, hasCurrentRouteAuth, getUserStatusRedirect }: GetChildrenProps) => {
+  // 系统没有用户 401
+  if (getUserStatusRedirect) {
+    NProgress.done();
+    return pageMap[getUserStatusRedirect];
+  }
+
+  // 没有当前页面权限
+  if (!hasCurrentRouteAuth) {
+    NProgress.done();
+    return <UserNoPagePermission />;
+  }
+
+  // 没有菜单和标签的页面('列表详情，分享')
+  if (cfmmUtils.isFullPage()) {
+    return children;
+  }
+
+  return element;
+};

package/lib/templates/qiankun/cf-workbench-base/src/constants/index.ts

@@ -0,0 +1,11 @@
+export const MES_MENU = 'menu.mes.';
+
+export const DEFAULT_LOCALE = 'zh-CN';
+
+export const UTC_FORMAT = 'YYYY-MM-DDTHH:mm:ss[Z]';
+
+export const BASE_API = '/api';
+
+export const APP_NAME = 'mes';
+
+export const HOME_ROUTE_PATH = '/mes/welcome';