@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/esm/components/KeepAliveDndTabs.tpl

@@ -0,0 +1,151 @@
+import { KeepAliveTabContext } from '../context';
+import { useKeepAliveTabs } from '../hooks/useKeepAliveTabs';
+import { history, useIntl, useMemoizedFn } from '@umijs/max';
+import { Dropdown } from 'antd';
+import DndTabs from './DndTabs';
+import React, { useMemo } from 'react';
+import { 
+  KeepAliveTab, 
+  KeepAliveDndTabsParams, 
+  KeepAliveTabsMenuItemType, 
+  KeepAliveTabsMenuInfo 
+} from '../types';
+import { KeepAliveTabsOperationType } from '../types.d';
+import './KeepAliveTabs.less';
+
+const KeepAliveDndTabs: React.FC<KeepAliveDndTabsParams> = (props) => {
+  const { defaultRoutePath, disabledKeys = [] } = props;
+
+  const { formatMessage } = useIntl();
+
+  const { keepAliveTabs, setKeepAliveTabs, activeTabRoutePath, closeTab, refreshTab, closeOtherTab, onHidden, onShow } = useKeepAliveTabs(
+    { ...props },
+  );
+
+  const menuItems: KeepAliveTabsMenuItemType[] = useMemo(
+    () =>
+      [
+        {
+          label: formatMessage({ id: 'cfmmUI.tabs.refresh', defaultMessage: '刷新' }),
+          key: KeepAliveTabsOperationType.REFRESH,
+        },
+        keepAliveTabs.length <= 1
+          ? null
+          : {
+              label: formatMessage({ id: 'cfmmUI.tabs.close', defaultMessage: '关闭' }),
+              key: KeepAliveTabsOperationType.CLOSE,
+            },
+        keepAliveTabs.length <= 1
+          ? null
+          : {
+              label: formatMessage({ id: 'cfmmUI.tabs.close.others', defaultMessage: '关闭其他' }),
+              key: KeepAliveTabsOperationType.CLOSEOTHER,
+            },
+      ].filter((o) => o),
+    [keepAliveTabs],
+  );
+
+  const keepAliveContextValue = useMemo(
+    () => ({
+      closeTab,
+      closeOtherTab,
+      refreshTab,
+      onHidden,
+      onShow,
+    }),
+    [closeTab, closeOtherTab, refreshTab, onHidden, onShow],
+  );
+
+  const renderTabTitle = useMemoizedFn((tab: KeepAliveTab) => {
+    return (
+      <Dropdown
+        menu={{
+          items:
+            tab.routePath === defaultRoutePath
+              ? menuItems.filter((item) => item?.key !== KeepAliveTabsOperationType.CLOSE)
+              : menuItems,
+          onClick: (e) => menuClick(e, tab),
+        }}
+        trigger={['contextMenu']}
+      >
+        <div style={{ margin: '-12px 0', padding: '12px 0' }}>
+          {/* {tab.icon} */}
+          {tab.title}
+        </div>
+      </Dropdown>
+    );
+  });
+
+  const tabItems = useMemo(() => {
+    return keepAliveTabs.map((tab: KeepAliveTab) => {
+      return {
+        key: tab.routePath,
+        label: renderTabTitle(tab),
+        children: (
+          <div key={tab.key} style={{ height: 'calc(100vh - 112px)', overflow: 'auto' }}>
+            {React.cloneElement(tab.children, {
+              keepAliveHandle: keepAliveContextValue,
+            })}
+          </div>
+        ),
+        closable: keepAliveTabs.length > 1 && tab.routePath !== defaultRoutePath,
+      };
+    });
+  }, [keepAliveTabs, keepAliveContextValue]);
+
+  const menuClick = useMemoizedFn(({ key, domEvent }: KeepAliveTabsMenuInfo, tab: KeepAliveTab) => {
+    domEvent.stopPropagation();
+
+    if (key === KeepAliveTabsOperationType.REFRESH) {
+      refreshTab(tab.routePath);
+    } else if (key === KeepAliveTabsOperationType.CLOSE) {
+      closeTab(tab.routePath);
+    } else if (key === KeepAliveTabsOperationType.CLOSEOTHER) {
+      closeOtherTab(tab.routePath);
+    }
+  });
+
+  const onTabsChange = useMemoizedFn((tabRoutePath: string) => {
+    const curTab = keepAliveTabs.find((tab: KeepAliveTab) => tab.routePath === tabRoutePath);
+    if (curTab) {
+      history.push(curTab?.pathname);
+    }
+  });
+
+  const onTabEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {
+    if (action === 'remove') {
+      closeTab(targetKey as string);
+    }
+  };
+
+  return (
+    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+      <DndTabs
+        type="editable-card"
+        items={tabItems}
+        activeKey={activeTabRoutePath}
+        onChange={onTabsChange}
+        className="keep-alive-tabs"
+        disabledKeys={disabledKeys}
+        hideAdd
+        animated={false}
+        onEdit={onTabEdit}
+        onDragSorted={(newItems) => {
+          // 当拖拽排序后更新keepAliveTabs的顺序
+          if (newItems && newItems.length > 0) {
+            // 获取排序后的routePath数组
+            const newOrderedPaths = newItems.map((item) => item.key);
+            // 根据新顺序重新排列keepAliveTabs
+            setKeepAliveTabs((prevTabs) => {
+              const tabsMap = new Map(prevTabs.map((tab) => [tab.routePath, tab]));
+              const newTabs = newOrderedPaths.map((path) => tabsMap.get(path)!);
+              return newTabs;
+            });
+          }
+        }}
+      />
+    </KeepAliveTabContext.Provider>
+  );
+};
+
+export default React.memo(KeepAliveDndTabs);

package/dist/esm/components/KeepAliveTabs.less

@@ -0,0 +1,23 @@
+.keep-alive-tabs {
+  >.mainAnt-tabs-content-holder {
+    height: calc(100vh - 160px);
+    background-color: #F0F2F5;
+
+    .mainAnt-tabs-tabpane {
+      >div {
+        height: calc(100vh - 160px) !important;
+      }
+    }
+  }
+
+  >.ant-tabs-content-holder {
+    height: calc(100vh - 160px);
+    background-color: #F0F2F5;
+
+    .ant-tabs-tabpane {
+      >div {
+        height: calc(100vh - 160px) !important;
+      }
+    }
+  }
+}

package/dist/esm/components/KeepAliveTabs.tpl

@@ -0,0 +1,136 @@
+import { KeepAliveTabContext } from '../context';
+import { useKeepAliveTabs } from '../hooks/useKeepAliveTabs';
+import { history, useIntl, useMemoizedFn } from '@umijs/max';
+import { Dropdown, Tabs } from 'antd';
+import React, { useMemo } from 'react';
+import { 
+  KeepAliveTab, 
+  KeepAliveTabsParams, 
+  KeepAliveTabsMenuItemType, 
+  KeepAliveTabsMenuInfo 
+} from '../types';
+import { KeepAliveTabsOperationType } from '../types.d';
+import './KeepAliveTabs.less';
+
+const KeepAliveTabs: React.FC<KeepAliveTabsParams> = (props) => {
+  const { defaultRoutePath } = props;
+
+  const { formatMessage } = useIntl();
+
+  const { keepAliveTabs, activeTabRoutePath, closeTab, refreshTab, closeOtherTab, onHidden, onShow } = useKeepAliveTabs(
+    { ...props },
+  );
+
+  const menuItems: KeepAliveTabsMenuItemType[] = useMemo(
+    () =>
+      [
+        {
+          label: formatMessage({ id: 'cfmmUI.tabs.refresh', defaultMessage: '刷新' }),
+          key: KeepAliveTabsOperationType.REFRESH,
+        },
+        keepAliveTabs.length <= 1
+          ? null
+          : {
+              label: formatMessage({ id: 'cfmmUI.tabs.close', defaultMessage: '关闭' }),
+              key: KeepAliveTabsOperationType.CLOSE,
+            },
+        keepAliveTabs.length <= 1
+          ? null
+          : {
+              label: formatMessage({ id: 'cfmmUI.tabs.close.others', defaultMessage: '关闭其他' }),
+              key: KeepAliveTabsOperationType.CLOSEOTHER,
+            },
+      ].filter((o) => o),
+    [keepAliveTabs],
+  );
+
+  const keepAliveContextValue = useMemo(
+    () => ({
+      closeTab,
+      closeOtherTab,
+      refreshTab,
+      onHidden,
+      onShow,
+    }),
+    [closeTab, closeOtherTab, refreshTab, onHidden, onShow],
+  );
+
+  const renderTabTitle = useMemoizedFn((tab: KeepAliveTab) => {
+    return (
+      <Dropdown
+        menu={{
+          items:
+            tab.routePath === defaultRoutePath
+              ? menuItems.filter((item) => item?.key !== KeepAliveTabsOperationType.CLOSE)
+              : menuItems,
+          onClick: (e) => menuClick(e, tab),
+        }}
+        trigger={['contextMenu']}
+      >
+        <div style={{ margin: '-12px 0', padding: '12px 0' }}>
+          {/* {tab.icon} */}
+          {tab.title}
+        </div>
+      </Dropdown>
+    );
+  });
+
+  const tabItems = useMemo(() => {
+    return keepAliveTabs.map((tab: KeepAliveTab) => {
+      return {
+        key: tab.routePath,
+        label: renderTabTitle(tab),
+        children: (
+          <div key={tab.key} style={{ height: 'calc(100vh - 112px)', overflow: 'auto' }}>
+            {React.cloneElement(tab.children, {
+              keepAliveHandle: keepAliveContextValue,
+            })}
+          </div>
+        ),
+        closable: keepAliveTabs.length > 1 && tab.routePath !== defaultRoutePath,
+      };
+    });
+  }, [keepAliveTabs, keepAliveContextValue]);
+
+  const menuClick = useMemoizedFn(({ key, domEvent }: KeepAliveTabsMenuInfo, tab: KeepAliveTab) => {
+    domEvent.stopPropagation();
+
+    if (key === KeepAliveTabsOperationType.REFRESH) {
+      refreshTab(tab.routePath);
+    } else if (key === KeepAliveTabsOperationType.CLOSE) {
+      closeTab(tab.routePath);
+    } else if (key === KeepAliveTabsOperationType.CLOSEOTHER) {
+      closeOtherTab(tab.routePath);
+    }
+  });
+
+  const onTabsChange = useMemoizedFn((tabRoutePath: string) => {
+    const curTab = keepAliveTabs.find((tab: KeepAliveTab) => tab.routePath === tabRoutePath);
+    if (curTab) {
+      history.push(curTab?.pathname);
+    }
+  });
+
+  const onTabEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {
+    if (action === 'remove') {
+      closeTab(targetKey as string);
+    }
+  };
+
+  return (
+    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+      <Tabs
+        type="editable-card"
+        items={tabItems}
+        activeKey={activeTabRoutePath}
+        onChange={onTabsChange}
+        className="keep-alive-tabs"
+        hideAdd
+        animated={false}
+        onEdit={onTabEdit}
+      />
+    </KeepAliveTabContext.Provider>
+  );
+};
+
+export default React.memo(KeepAliveTabs);

package/dist/esm/components/Loading.css

@@ -0,0 +1,19 @@
+.cfmmUI.loadingContainer {
+  animation: loading 0.5s linear infinite;
+}
+
+.cfmmUI.pageLoading.loadingContainer {
+  position: absolute;
+  left: 50%;
+  translate: -50%;
+  top: 20%;
+}
+
+@keyframes loading {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

package/dist/esm/components/LoadingSvg.tpl

@@ -0,0 +1,14 @@
+import './Loading.css';
+
+//页面加载
+const Loading = (
+  <div className="cfmmUI loadingContainer">
+    <svg>
+      <path d="M 0,28 L 14,0 6,28 Z" fill="#172e8a" />
+      <path d="M 0,0 L 11,28 16.5,28 Z" fill="#172e8a" />
+      <path d="M 14,0 L 22.5,28 28,28 Z" fill="#172e8a" />
+    </svg>
+  </div>
+);
+
+export default Loading;

package/dist/esm/components/MenuFooter.css

@@ -0,0 +1,13 @@
+.cfmmUI-menuFooter {
+  height: 49px;
+  padding: 0 20px;
+  border-radius: 4px;
+  border-top: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 3%);
+  }
+}

package/dist/esm/components/MenuFooter.tpl

@@ -0,0 +1,24 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import React from 'react';
+import { MenuFooterProps } from '../types';
+import './MenuFooter.css';
+
+/**
+ * 下拉按钮组
+ * @param {DropdownButtonProps} props 
+ */
+const MenuFooter: React.FC<MenuFooterProps> = (props) => {
+  const { isCollapsed, handleCollapsed } = props;
+
+  const handleClick = () => {
+    handleCollapsed();
+  };
+
+  return (
+    <div className="cfmmUI-menuFooter" onClick={handleClick}>
+      {isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+    </div>
+  );
+};
+
+export default React.memo(MenuFooter);

package/dist/esm/components/MyColorPicker.tpl

@@ -0,0 +1,19 @@
+import { generate, green, presetPalettes, red } from '@ant-design/colors';
+import { ColorPicker, ColorPickerProps, theme } from 'antd';
+import React from 'react';
+
+type Presets = Required<ColorPickerProps>['presets'][number];
+
+const MyColorPicker: React.FC<ColorPickerProps> = (props) => {
+  const { token } = theme.useToken();
+
+  // 设置ColorPicker的面板
+  const genPresets = (presets = presetPalettes) => {
+    return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors }));
+  };
+  const presets = genPresets({ primary: generate(token.colorPrimary), red, green });
+
+  return <ColorPicker presets={presets} {...props} />;
+};
+
+export default React.memo(MyColorPicker);

package/dist/esm/components/MyFooterToolbar.css

@@ -0,0 +1,6 @@
+.cfmmUI-myFooterToolbar.ant-pro-footer-bar.fold {
+  width: calc(100vw - 64px);
+}
+.cfmmUI-myFooterToolbar.ant-pro-footer-bar.unfold {
+  width: calc(100vw - 256px);
+}

package/dist/esm/components/MyFooterToolbar.tpl

@@ -0,0 +1,56 @@
+import { FooterToolbar } from '@ant-design/pro-components';
+import { useIntl, useModel, useSelectedRoutes } from '@umijs/max';
+import classnames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import { MyFooterToolbarProps } from '../types';
+import "./MyFooterToolbar.css";
+
+/**
+ * 适配qiankun子应用的FooterToolbar(如果切换多语言有bug，因为pathnameRef缓存失效)
+ * @param {MyFooterToolbarProps} props
+ */
+const MyFooterToolbar = (props: MyFooterToolbarProps) => {
+  const { count, ...rest } = props;
+  const { formatMessage } = useIntl();
+
+  const { collapsed } = window.__POWERED_BY_QIANKUN__ ? useModel("@@qiankunStateFromMaster") : {};
+  const pathnameRef = useRef(location.pathname);
+  const selectedRoutes = useSelectedRoutes();
+  const [curIsActiveTabs, setCurIsActiveTabs] = useState<boolean>(false);
+
+  useEffect(() => {
+    setCurIsActiveTabs(pathnameRef.current === location.pathname);
+  }, [selectedRoutes]);
+
+  // 没有bug但是子应用需要传递appname
+  // const { collapsed } = useQiankunData();
+  // const { pathname } = useLocation();
+  // const selectedRoutes = useSelectedRoutes();
+  // const [curIsActiveTabs, setCurIsActiveTabs] = useState<boolean>(false);
+
+  // useEffect(() => {
+  //   setCurIsActiveTabs(pathname === location.pathname.replace(`/${APP_NAME}`, ''));
+  // }, [selectedRoutes]);
+  
+  return (
+    <>
+      {curIsActiveTabs && (
+        <FooterToolbar
+          extra={
+            <div>
+              <>{formatMessage({ id: 'cfmmUI.MyFooterToolbar.chosen', defaultMessage: '已选择' })}</>
+              <a style={{ fontWeight: 600, margin: '0 5px' }}>{count}</a>
+              <>{formatMessage({ id: 'cfmmUI.MyFooterToolbar.item', defaultMessage: '项' })}</>
+            </div>
+          }
+          {...rest}
+          className={classnames('cfmmUI-myFooterToolbar', collapsed ? 'fold' : 'unfold', props.className)}
+        >
+          {props.children}
+        </FooterToolbar>
+      )}
+    </>
+  );
+};
+
+export default React.memo(MyFooterToolbar);

package/dist/esm/components/MyPageContainer.tpl

@@ -0,0 +1,43 @@
+import { PageContainer } from "@ant-design/pro-components";
+import React, { useEffect, useMemo } from "react";
+import { useModel } from "@umijs/max";
+import { MyPageContainerProps } from "../types";
+
+/**
+ * @param {boolean} autoCollapseMenu - 折叠菜单属性
+ */
+const MyPageContainer: React.FC<MyPageContainerProps> = ({
+  autoCollapseMenu = false,
+  tempWaterMark,
+  children,
+  ...props
+}) => {
+  const { currentUser } = window.__POWERED_BY_QIANKUN__ ? useModel("@@qiankunStateFromMaster") : useModel("user");
+  const { handleCollapsed } = window.__POWERED_BY_QIANKUN__ ? useModel("@@qiankunStateFromMaster") : useModel("global");
+
+  const waterMarkText = useMemo(() => {
+    // 否则使用传入的水印文本或默认用户名
+    return tempWaterMark ?? currentUser?.userName;
+  }, [tempWaterMark, currentUser]);
+
+  useEffect(() => {
+    if (autoCollapseMenu) {
+      handleCollapsed?.(true);
+    }
+  }, []);
+
+  return (
+    <PageContainer
+      waterMarkProps={{ content: waterMarkText }}
+      header={{
+        title: props.title,
+        breadcrumb: props.breadcrumb,
+      }}
+      {...props}
+    >
+      {children}
+    </PageContainer>
+  );
+};
+
+export default MyPageContainer;

package/dist/esm/components/MyReactEcharts.tpl

@@ -0,0 +1,11 @@
+import { useModel } from '@umijs/max';
+import ReactECharts, { EChartsReactProps } from 'echarts-for-react';
+import React from 'react';
+
+const MyReactECharts = (props: EChartsReactProps) => {
+  let { isDarkTheme } = window.__POWERED_BY_QIANKUN__ ? useModel("@@qiankunStateFromMaster") : useModel("global");
+
+  return <ReactECharts style={{height: '100%'}} theme={isDarkTheme ? 'echarsDarkTheme' : ''} {...props} />;
+};
+
+export default React.memo(MyReactECharts);