@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/cjs/components/PDFWrapper.tpl

@@ -0,0 +1,96 @@
+import { DownloadOutlined, EyeOutlined } from '@ant-design/icons';
+import { useIntl, useModel } from '@umijs/max';
+import { FloatButton } from 'antd';
+import dayjs from 'dayjs';
+import React, { useRef, useState } from 'react';
+import { usePageExport } from '../hooks/usePageExport';
+import { ExportPageProps } from '../types';
+
+const PDFWrapper: React.FC<ExportPageProps> = (props) => {
+  const { filename, pageWaterMarkText, showExportButton, showExportPDF, floatButtonProps, exportPageOptions } = props;
+
+  const { formatMessage } = useIntl();
+  const { currentUser } = window.__POWERED_BY_QIANKUN__ ? useModel('@@qiankunStateFromMaster') : useModel('user');
+  const { onExportPDF, onPreviewPDF, loading } = usePageExport();
+  const exportRef = useRef<HTMLDivElement>(null);
+
+  // 根据PDFWaterMark属性初始化tempWaterMark
+  const [tempWaterMark, setTempWaterMark] = useState<string | undefined>(currentUser.userName);
+
+  const handlePDF = (type: 'export' | 'preview') => {
+    if (loading) return; // 防止重复点击
+
+    setTempWaterMark(pageWaterMarkText ?? `${currentUser.userName} - ${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
+
+    setTimeout(() => {
+      if (exportRef.current) {
+        const actionFn = type === 'export' ? onExportPDF : onPreviewPDF;
+        actionFn(exportRef.current, {
+          filename,
+          ...exportPageOptions,
+        }).finally(() => {
+          // 导出完成后恢复原始水印
+          setTempWaterMark(currentUser.userName);
+        });
+      }
+    }, 100); // 小延迟确保水印渲染
+  };
+
+  // 将tempWaterMark传递给children
+  const renderChildren = () => {
+    if (!props.children) return null;
+
+    // 如果children是React元素，使用cloneElement传递props
+    if (React.isValidElement(props.children)) {
+      return React.cloneElement(props.children as any, {
+        tempWaterMark,
+        ...(props.children.props || {}),
+      });
+    }
+
+    // 如果是数组或其他类型，遍历处理
+    if (Array.isArray(props.children)) {
+      return React.Children.map(props.children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as any, {
+            tempWaterMark,
+            ...(child.props || {}),
+          });
+        }
+        return child;
+      });
+    }
+
+    return props.children;
+  };
+
+  return (
+    <>
+      <div ref={exportRef}>{renderChildren()}</div>
+      {showExportButton || showExportPDF ? (
+        <FloatButton.Group
+          trigger="hover"
+          style={{
+            insetInlineEnd: 16,
+            insetBlockEnd: 100,
+          }}
+          tooltip={<>{formatMessage({ id: 'cfmmUI.common.button.export' })} PDF</>}
+          {...floatButtonProps}
+        >
+          <FloatButton
+            tooltip={<>{formatMessage({ id: 'cfmmUI.common.button.preview' })} PDF</>}
+            onClick={() => handlePDF('preview')}
+            icon={<EyeOutlined />}
+          />
+          <FloatButton
+            icon={<DownloadOutlined />}
+            tooltip={<>{formatMessage({ id: 'cfmmUI.common.button.export' })} PDF</>}
+            onClick={() => handlePDF('export')}
+          />
+        </FloatButton.Group>
+      ) : null}
+    </>
+  );
+};
+
+export default React.memo(PDFWrapper);

package/dist/cjs/components/PageLoading.tpl

@@ -0,0 +1,16 @@
+import './Loading.css';
+
+//页面加载
+const Loading = () => {
+  return (
+    <div className="cfmmUI pageLoading loadingContainer">
+      <svg width={100} height={100} viewBox="0 0 40 40">
+        <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/cjs/components/PermissionSelect.tpl

@@ -0,0 +1,230 @@
+import { ModalForm } from '@ant-design/pro-form';
+import { Form, Tree } from 'antd';
+import { DataNode } from 'rc-tree/lib/interface';
+import React, { useEffect, useState } from 'react';
+import { useIntl, request } from '@umijs/max';
+import { BASE_API } from "../constants";
+import { PermissionSelectFormProps, MenuItem, PermissionItem } from "../types";
+
+export async function queryAllMenus() {
+  return request(`${BASE_API}/system/menu/list`, {
+    method: 'GET',
+  });
+}
+
+export async function queryAllPermissions() {
+  return request(`${BASE_API}/system/permission/list`, {
+    method: 'GET',
+  });
+}
+
+/**
+ * 选择权限组件
+ * @param props
+ * @returns
+ */
+const PermissionSelect: React.FC<PermissionSelectFormProps> = (props) => {
+  const { values, modalFormVisible, rootParentKey = '0', onSubmit, setModalFormVisible } = props;
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+
+  /**
+   * 加载的左侧菜单数据
+   */
+  const [menuTreeDate, setMenuTreeDate] = useState<DataNode[] | undefined>(undefined);
+
+  /**
+   * 选择的权限数据
+   */
+  const [selectPermissionList, setSelectPermissionList] = useState<React.Key[]>([]);
+
+  // 提交状态
+  const [submitting, setSubmitting] = useState(false);
+
+  /**
+   * 处理菜单的递归方法
+   * @param parentKey
+   * @param allMenuData
+   * @returns
+   */
+  const GetMenuTree = (
+    parentKey: number | string,
+    allMenuData: MenuItem[],
+    allPermissionData: PermissionItem[],
+  ): DataNode[] | undefined => {
+    let menuList: DataNode[] = [];
+
+    if (allMenuData.length > 0) {
+      /**
+       * 找出父级菜单下的所有菜单
+       */
+      let filterSonMenuList = allMenuData.filter((item) => item.parentId === parentKey);
+      const findSonMenuSortList = filterSonMenuList.sort((a, b) => Number(a.seqNo) - Number(b.seqNo));
+
+      /**
+       * 循环找出的子菜单
+       */
+      findSonMenuSortList.forEach((menuItem) => {
+        let sunItem = GetMenuTree(menuItem.menuId, allMenuData, allPermissionData);
+
+        /**
+         * 找出菜单对应的权限
+         * 如果菜单无效或者菜单权限无效，则节点不可用
+         */
+        const filterPermissions = allPermissionData.filter((item) => item.menuId === menuItem.menuId);
+        let PermissionNodes = filterPermissions.map((item) => ({
+          title: item.permissionName,
+          key: item.permissionId,
+          disableCheckbox: item.status.toUpperCase() === 'Y' && menuItem.status.toUpperCase() === 'Y' ? false : true,
+          disabled: item.status.toUpperCase() === 'Y' && menuItem.status.toUpperCase() === 'Y' ? false : true,
+        }));
+
+        if (sunItem && sunItem.length > 0) {
+          /**
+           * 子菜单和权限放在水平线上
+           */
+          sunItem = [...PermissionNodes, ...sunItem];
+
+          menuList.push({
+            title: (
+              <span
+                style={{
+                  color: menuItem.status.toUpperCase() === 'Y' ? '#1890ff' : '#cccccc',
+                  fontWeight: 'bold',
+                }}
+              >
+                {' '}
+                {menuItem.menuName}
+              </span>
+            ),
+            //菜单不可用，则将颜色设置为灰色，且菜单不可用
+            disableCheckbox: menuItem.status.toUpperCase() === 'Y' ? false : true,
+            disabled: menuItem.status.toUpperCase() === 'Y' ? false : true,
+            key: `Menu-${menuItem.menuId.toString()}`,
+            children: sunItem,
+          });
+        } else {
+          menuList.push({
+            title: (
+              <span
+                style={{
+                  color: menuItem.status.toUpperCase() === 'Y' ? '#1890ff' : '#cccccc',
+                  fontWeight: 'bold',
+                }}
+              >
+                {menuItem.menuName}
+              </span>
+            ),
+            //菜单不可用，则将颜色设置为灰色，且菜单不可用
+            disableCheckbox: menuItem.status.toUpperCase() === 'Y' ? false : true,
+            disabled: menuItem.status.toUpperCase() === 'Y' ? false : true,
+            key: `Menu-${menuItem.menuId.toString()}`,
+            children: PermissionNodes,
+          });
+        }
+      });
+
+      /**
+       * 返回处理好的菜单列表
+       */
+      return menuList;
+    }
+
+    return undefined;
+  };
+
+  /**
+   * 查询出所有菜单
+   * @returns
+   */
+  const handleSearchAllMenu = async () => {
+    const getAllMenus = await queryAllMenus();
+    
+    const getAllPermissions = await queryAllPermissions();
+
+    /**
+     * 循环处理生成菜单
+     */
+    const allSunMenuData: DataNode[] | undefined = GetMenuTree(rootParentKey, getAllMenus.rows, getAllPermissions.rows);
+
+    /**
+     * 绑定菜单数据至变量中
+     */
+    setMenuTreeDate(allSunMenuData);
+  };
+
+  /**
+   * 提交方法
+   */
+  const handleSubmit = async () => {
+    if (submitting) {
+      return; //如果在提交 就直接返回
+    }
+    setSubmitting(true);
+
+    try {
+      //调用父级的方法
+      await onSubmit(selectPermissionList);
+
+      //弹出框关闭后，清除选择的数据
+      setSelectPermissionList([]);
+    } catch (error) {
+      console.error('Submit error:', error);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  /**
+   * 点击复选框
+   * @param checkedKeys
+   * @param info
+   */
+  const onCheck = (checkedKeys: React.Key[]) => {
+    //过滤菜单及权限，菜单是'Menu-'开头的
+    const allSelectKey = checkedKeys.filter((o) => !o.toString().startsWith('Menu-'));
+    setSelectPermissionList(allSelectKey);
+  };
+
+  /**
+   * 首次则会加载所有菜单及所有权限
+   */
+  useEffect(() => {
+    handleSearchAllMenu();
+  }, []);
+
+  /**
+   * 当传过来的数据有变化时，即会取出当中的数据，然后设置默认选择的权限
+   */
+  useEffect(() => {
+    setSelectPermissionList(values);
+  }, [values]);
+
+  return (
+    <ModalForm
+      form={form}
+      width={500}
+      title={formatMessage({
+        id: 'cfmmUI.PermissionSelect.title',
+        defaultMessage: '选择权限',
+      })}
+      open={modalFormVisible}
+      onOpenChange={setModalFormVisible}
+      onFinish={handleSubmit}
+      //关闭弹窗清除数据
+      modalProps={{
+        destroyOnHidden: true,
+      }}
+    >
+      <Tree
+        checkable
+        defaultExpandAll={false}
+        defaultCheckedKeys={selectPermissionList}
+        treeData={menuTreeDate}
+        onCheck={(checkeds) => onCheck(checkeds as React.Key[])}
+      />
+    </ModalForm>
+  );
+};
+
+export default React.memo(PermissionSelect);

package/dist/cjs/components/ProFormUTCDatePicker.tpl

@@ -0,0 +1,20 @@
+import { Form } from 'antd';
+import React from 'react';
+import UTCDatePicker from './UTCDatePicker';
+import { UTCProFormDatePickerProps } from '../types';
+
+/**
+ * Form.Item带UTC时区转换功能的DatePicker组件
+ * 在antd5.19中， 日期选择器在form表单中有初始值会报错
+ */
+const UTCProFormDatePicker = (props: UTCProFormDatePickerProps) => {
+  const { fieldProps, disabled, readonly, ...formItemProps } = props;
+
+  return (
+    <Form.Item {...formItemProps}>
+      <UTCDatePicker disabled={disabled} readonly={readonly} {...fieldProps} />
+    </Form.Item>
+  );
+};
+
+export default React.memo(UTCProFormDatePicker);

package/dist/cjs/components/ProFormUTCRangePicker.tpl

@@ -0,0 +1,20 @@
+import { Form } from 'antd';
+import React from 'react';
+import UTCRangePicker from './UTCRangePicker';
+import { UTCProFormRangePickerProps } from '../types';
+
+/**
+ * Form.Item带UTC时区转换功能的RangePicker组件
+ * 在antd5.19中， 日期选择器在form表单中有初始值会报错
+ */
+const UTCProFormDatePicker = (props: UTCProFormRangePickerProps) => {
+  const { fieldProps, disabled, readonly, ...formItemProps } = props;
+
+  return (
+    <Form.Item {...formItemProps}>
+      <UTCRangePicker disabled={disabled} readonly={readonly} {...fieldProps}/>
+    </Form.Item>
+  );
+};
+
+export default React.memo(UTCProFormDatePicker);

package/dist/cjs/components/PromiseRender.tpl

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Spin } from 'antd';
+import { isEqual } from 'lodash';
+import { isComponentClass } from './Secured';
+//* eslint-disable-next-line import/no-cycle*/
+
+interface PromiseRenderProps<T, K> {
+  ok: T;
+  error: K;
+  promise: Promise<boolean>;
+}
+
+interface PromiseRenderState {
+  component: React.ComponentClass | React.FunctionComponent;
+}
+
+export default class PromiseRender<T, K> extends React.Component<
+  PromiseRenderProps<T, K>,
+  PromiseRenderState
+> {
+  state: PromiseRenderState = {
+    component: () => null,
+  };
+
+  componentDidMount() {
+    this.setRenderComponent(this.props);
+  }
+
+  shouldComponentUpdate = (nextProps: PromiseRenderProps<T, K>, nextState: PromiseRenderState) => {
+    const { component } = this.state;
+    if (!isEqual(nextProps, this.props)) {
+      this.setRenderComponent(nextProps);
+    }
+    if (nextState.component !== component) return true;
+    return false;
+  };
+
+  // set render Component : ok or error
+  setRenderComponent(props: PromiseRenderProps<T, K>) {
+    const ok = this.checkIsInstantiation(props.ok);
+    const error = this.checkIsInstantiation(props.error);
+    props.promise
+      .then(() => {
+        this.setState({
+          component: ok,
+        });
+        return true;
+      })
+      .catch(() => {
+        this.setState({
+          component: error,
+        });
+      });
+  }
+
+  // Determine whether the incoming component has been instantiated
+  // AuthorizedRoute is already instantiated
+  // Authorized  render is already instantiated, children is no instantiated
+  // Secured is not instantiated
+  checkIsInstantiation = (
+    target: React.ReactNode | React.ComponentClass,
+  ): React.FunctionComponent => {
+    if (isComponentClass(target)) {
+      const Target = target as React.ComponentClass;
+      return (props: any) => <Target {...props} />;
+    }
+    if (React.isValidElement(target)) {
+      return (props: any) => React.cloneElement(target, props);
+    }
+    return () => target as React.ReactNode & null;
+  };
+
+  render() {
+    const { component: Component } = this.state;
+    const { ok, error, promise, ...rest } = this.props;
+
+    return Component ? (
+      <Component {...rest} />
+    ) : (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          margin: 'auto',
+          paddingTop: 50,
+          textAlign: 'center',
+        }}
+      >
+        <Spin size="large" />
+      </div>
+    );
+  }
+}

package/dist/cjs/components/QrCodeModal.tpl

@@ -0,0 +1,19 @@
+import { Modal, QRCode } from 'antd';
+import React from 'react';
+import { QrCodeModalProps } from '../types';
+
+/** 二维码弹窗 */
+const QrCodeModal: React.FC<QrCodeModalProps> = (props) => {
+  const { value, code, ...reset } = props;
+  
+  return (
+    <Modal open={!!value} {...reset} onCancel={reset.onClose}>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <QRCode value={value || ''} />
+      </div>
+      <span style={{ display: 'flex', justifyContent: 'center' }}>{<span>{code}</span>}</span>
+    </Modal>
+  );
+};
+
+export default React.memo(QrCodeModal);

package/dist/cjs/components/RandomAvatar.tpl

@@ -0,0 +1,34 @@
+import multiavatar from '@multiavatar/multiavatar';
+import React, { useEffect, useState } from 'react';
+import { RandomAvatarProps, AvatarVersion } from "../types";
+
+/**
+ * 根据avatarCode生成头像组件
+ */
+const RandomAvatar: React.FC<RandomAvatarProps> = (props) => {
+  const { avatarCode, sansEnv, version, width = 50, ...resetDiv } = props;
+  const [svgCode, setSvgCode] = useState<string>('');
+
+  const generateAvatar = (
+    avatarCode: string,
+    sansEnv?: boolean,
+    version?: AvatarVersion,
+  ) => {
+    let svgCode = multiavatar(avatarCode, sansEnv, version);
+    setSvgCode(svgCode);
+  };
+
+  useEffect(() => {
+    generateAvatar(avatarCode, sansEnv, version);
+  }, [avatarCode, sansEnv, version]);
+
+  return (
+    <div
+      style={{ width }}
+      {...resetDiv}
+      dangerouslySetInnerHTML={{ __html: svgCode }}
+    ></div>
+  );
+};
+
+export default RandomAvatar;

package/dist/cjs/components/RefDrawerForm.tpl

@@ -0,0 +1,75 @@
+import { DrawerForm } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { ForwardedRef, forwardRef, memo, useImperativeHandle, useMemo, useState } from 'react';
+import { RefDrawerFormRefType, RefDrawerFormProps } from '../types';
+
+const defaultDrawerProps = { maskClosable: false, closable: false };
+
+// 使用ref控制弹窗显示的DrawerForm，外部不需要再关注弹窗的显隐，只需要调用ref.current.open()即可
+const RefDrawerForm = <T,>(props: RefDrawerFormProps<T>, ref: ForwardedRef<RefDrawerFormRefType>) => {
+  const { onCloseAfter, needResetForm = true, ...drawerFormProps } = props;
+  const { formatMessage } = useIntl();
+
+  const [visible, setVisible] = useState(false);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      show: () => {
+        setVisible(true);
+      },
+      close: () => {
+        setVisible(false);
+      },
+    }),
+    [],
+  );
+
+  const handleOpenChange = useMemoizedFn((visible: boolean) => {
+    setVisible(visible);
+    if (!visible) {
+      if (needResetForm) {
+        props.form?.resetFields();
+      }
+      onCloseAfter?.();
+    }
+  });
+
+  const handleSubmit = useMemoizedFn(async (values: T) => {
+    const success = await props.onFinish?.(values);
+    if (success) {
+      setVisible(false);
+    }
+  });
+
+  return (
+    <DrawerForm<T>
+      width={500}
+      //取消点击空白处关闭修改框和关闭左上角的关闭按钮
+      drawerProps={defaultDrawerProps}
+      submitter={useMemo(
+        () => ({
+          searchConfig: {
+            resetText: formatMessage({ id: 'cfmmUI.common.button.cancel', defaultMessage: '取消' }),
+            submitText: formatMessage({ id: 'cfmmUI.common.button.submit', defaultMessage: '提交' }),
+          },
+        }),
+        [],
+      )}
+      {...drawerFormProps}
+      open={visible}
+      onOpenChange={handleOpenChange}
+      onFinish={handleSubmit}
+    >
+      {props.children}
+    </DrawerForm>
+  );
+};
+
+/**
+ * 使用ref控制弹窗显示的DrawerForm，外部不需要再关注弹窗的显隐，只需要调用ref.current.open()即可
+ */
+export default memo(forwardRef(RefDrawerForm)) as <T = any>(
+  props: RefDrawerFormProps<T> & { ref?: ForwardedRef<RefDrawerFormRefType | undefined> },
+) => JSX.Element;