@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/cjs/components/UTCRangePicker.tpl

@@ -0,0 +1,142 @@
+import { useModel } from '@umijs/max';
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import React, { useMemo } from 'react';
+import { UTC_FORMAT } from '../constants';
+import { RangePickerValueType, RangePickerOnChangeType, UTCRangePickerProps } from '../types';
+
+const { RangePicker } = DatePicker;
+
+/**
+ * 带UTC时区转换功能的RangePicker组件
+ */
+const UTCRangePicker = (props: UTCRangePickerProps) => {
+  // 设置mode后无法显示时间
+  const {
+    readonly,
+    convertTimeZone = true,
+    showTime = false,
+    mode,
+    endDateEndOfType,
+    startDatStartOfType,
+    ...reset
+  } = props;
+  const { timeZone, timeFormat, dateFormat } = window.__POWERED_BY_QIANKUN__ ? useModel("@@qiankunStateFromMaster") : useModel('user');
+
+  // 将日期转换为地区时间显示
+  const value: RangePickerValueType = useMemo(() => {
+    const v = props.value;
+    if (!v) return;
+    if (!dayjs(v[0]).isValid() && !dayjs(v[1]).isValid()) return;
+
+    const startTime = v[0] ? dayjs(v[0]) : undefined;
+    const endTime = v[1] ? dayjs(v[1]) : undefined;
+    return convertTimeZone
+      ? [startTime ? startTime.tz(timeZone) : undefined, endTime ? endTime.tz(timeZone) : undefined]
+      : [startTime, endTime];
+  }, [props.value, convertTimeZone, timeZone]);
+
+  // 获取设置的格式
+  const format = useMemo(() => {
+    if(typeof showTime === 'object' && showTime.format ) {
+      return `${dateFormat} ${showTime.format}`;
+    };
+    return props.format || showTime ? `${dateFormat} ${timeFormat}` : dateFormat;
+  }, [props.format, showTime, dateFormat, timeFormat]);
+
+  // 将日期转为标准时间
+  const handleChange: RangePickerOnChangeType = (dates, dateString: [string, string]) => {
+    if (!dates) {
+      props.onChange?.(dates, dateString);
+      return;
+    }
+
+    // 开始时间
+    const startTime = startDatStartOfType ? dates?.[0]?.startOf(startDatStartOfType) : dates?.[0];
+    const endTime = endDateEndOfType ? dates?.[1]?.endOf(endDateEndOfType) : dates?.[1];
+    const utcStartTime = startTime?.utc();
+    const utcEndTime = endTime?.utc();
+
+    // 转标准时间，显示时间转换有问题
+    const standardTime: any = convertTimeZone
+      ? [utcStartTime?.format(UTC_FORMAT), utcEndTime?.format(UTC_FORMAT)]
+      : [startTime?.format(UTC_FORMAT), endTime?.format(UTC_FORMAT)];
+    const datesString: any = [startTime?.format(format), endTime?.format(format)];
+
+    props.onChange?.(standardTime, datesString);
+  };
+
+  const readonlyRender =
+    value && value[0] ? <div>{`${dayjs(value[0]).format(format)} - ${dayjs(value[1]).format(format)}`}</div> : '-';
+
+  // 将日期转为数字
+  const handleValueToNumber = (v: string | undefined) => {
+    if (!v) return;
+    let value = v.replace(/\//g, '').replace(/-/g, '').replace(/:/g, '').replace(/\s/g, '');
+    if (value.length === 8 || value.length === 10 || value.length === 12 || value.length === 14) {
+      value = value.padEnd(14, '0');
+    } else {
+      return;
+    }
+
+    // 将其他格式的日期替换为20240811格式
+    if (dateFormat === 'DD-MM-YYYY' || dateFormat === 'DD/MM/YYYY') {
+      value = value
+        .slice(0, 8)
+        .replace(/^(\d{2})(\d{2})(\d{4})$/, '$3$2$1')
+        .concat(value.slice(8));
+    }
+    if (dateFormat === 'MM-DD-YYYY' || dateFormat === 'MM/DD/YYYY') {
+      value = value
+        .slice(0, 8)
+        .replace(/^(\d{2})(\d{2})(\d{4})$/, '$3$1$2')
+        .concat(value.slice(8));
+    }
+
+    return value;
+  };
+
+  // 将数字转为日期格式YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (dateTimeStr: string) => {
+    if (dateTimeStr.length !== 14) {
+      return;
+    }
+    return dateTimeStr.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5:$6');
+  };
+
+  // 按下tab键将输入的值设置为日期
+  const handleKeyDown = (e: any) => {
+    if (e.key !== 'Tab') return;
+    const v = handleValueToNumber(e.target.value);
+    if (!v) return;
+    const date = formatDateTime(v);
+    if (date) {
+      // 判断是开始时间还是结束时间
+      const index = e.target.getAttribute('date-range') === 'end' ? 1 : 0;
+      let arr: any = value ? value : [null, null];
+      let arr2: any = value ? value.map((item) => (item ? dayjs(item).format() : '')) : ['', ''];
+      // 设置开始时间或者结束时间
+      arr[index] = dayjs(date);
+      arr2[index] = date;
+      handleChange(arr, arr2);
+    }
+  };
+
+  return readonly ? (
+    <div>{readonlyRender}</div>
+  ) : (
+    <RangePicker
+      style={{ width: '100%' }}
+      showTime={showTime}
+      mode={showTime ? undefined : mode}
+      allowEmpty={[false, false]}
+      {...reset}
+      value={value}
+      format={format}
+      onChange={(dates, datesString) => handleChange(dates, datesString)}
+      onKeyDown={handleKeyDown}
+    />
+  );
+};
+
+export default React.memo(UTCRangePicker);

package/dist/cjs/components/UpdateForm.tpl

@@ -0,0 +1,32 @@
+import { DrawerForm, DrawerFormProps } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { memo } from 'react';
+
+/**
+ * 通用列表修改弹窗
+ * @param {DrawerFormProps<T>} props
+ * @children children
+ * @returns
+ */
+const UpdateForm = <T,>(props: DrawerFormProps<T>) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <DrawerForm
+      width={500}
+      //取消点击空白处关闭修改框和关闭左上角的关闭按钮
+      drawerProps={{ maskClosable: false, closable: false, forceRender: true }}
+      submitter={{
+        searchConfig: {
+          resetText: formatMessage({ id: 'cfmmUI.common.button.cancel', defaultMessage: '取消' }),
+          submitText: formatMessage({ id: 'cfmmUI.common.button.submit', defaultMessage: '提交' }),
+        },
+      }}
+      {...props}
+    >
+      {props.children}
+    </DrawerForm>
+  );
+};
+
+export default memo(UpdateForm) as <T>(props: DrawerFormProps<T>) => JSX.Element;

package/dist/cjs/components/UserDisable.tpl

@@ -0,0 +1,58 @@
+import { LoginOutlined } from '@ant-design/icons';
+import { useIntl, useModel } from '@umijs/max';
+import { Button, Result } from 'antd';
+import React from 'react';
+import MyPageContainer from './MyPageContainer';
+import MySelectLang from './MySelectLang';
+
+interface UserDisableProps {
+  logout?: () => void;
+}
+
+/**
+ * 禁用页面
+ * @param param0 logout 退出登录方法
+ * @returns
+ */
+const UserDisable: React.FC<UserDisableProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const { logout } = useModel('login');
+
+  return (
+    <MyPageContainer>
+      <Result
+        status="403"
+        style={{
+          height: '100%',
+          background: '#fff',
+        }}
+        title={formatMessage({
+          id: 'cfmmUI.common.userDisable.title',
+          defaultMessage: '用户禁用',
+        })}
+        subTitle={formatMessage({
+          id: 'cfmmUI.common.userDisable.Message',
+          defaultMessage: '用户已被禁用，请与管理员联系',
+        })}
+        extra={[
+          <Button
+            key="0"
+            icon={<LoginOutlined />}
+            type="primary"
+            onClick={() => {
+              props.logout?.() || logout?.();
+            }}
+          >
+            {formatMessage({
+              id: 'cfmmUI.common.useOtherUserLogin.title',
+              defaultMessage: '使用其他用户登陆',
+            })}
+          </Button>,
+          <MySelectLang key={'1'} />,
+        ]}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default UserDisable;

package/dist/cjs/components/UserNoPagePermission.tpl

@@ -0,0 +1,58 @@
+import { LoginOutlined } from '@ant-design/icons';
+import { useIntl, useModel } from '@umijs/max';
+import { Button, Result } from 'antd';
+import React from 'react';
+import MyPageContainer from './MyPageContainer';
+import MySelectLang from './MySelectLang';
+
+interface UserNoPermissionProps {
+  logout?: () => void;
+}
+
+/**
+ * 无权限页面
+ * @param param0 logout 退出登录方法
+ * @returns
+ */
+const UserNoPagePermission: React.FC<UserNoPermissionProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const { logout } = useModel('login');
+
+  return (
+    <MyPageContainer>
+      <Result
+        status="403"
+        style={{
+          height: '100%',
+          background: '#fff',
+        }}
+        title={formatMessage({
+          id: 'cfmmUI.common.UserNoPagePermission.title',
+          defaultMessage: '用户无该页面权限',
+        })}
+        subTitle={formatMessage({
+          id: 'cfmmUI.common.UserNoPagePermission.Message',
+          defaultMessage: '用户无该页面权限，请点击左侧菜单切换其他页面，仍要访问与管理员联系',
+        })}
+        extra={[
+          <Button
+            key="1"
+            icon={<LoginOutlined />}
+            type="primary"
+            onClick={() => {
+              props.logout?.() || logout?.();
+            }}
+          >
+            {formatMessage({
+              id: 'cfmmUI.common.useOtherUserLogin.title',
+              defaultMessage: '使用其他用户登陆',
+            })}
+          </Button>,
+          <MySelectLang key={'2'} />,
+        ]}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default UserNoPagePermission;

package/dist/cjs/components/UserNoPermission.tpl

@@ -0,0 +1,58 @@
+import { LoginOutlined } from '@ant-design/icons';
+import { useIntl, useModel } from '@umijs/max';
+import { Button, Result } from 'antd';
+import React from 'react';
+import MyPageContainer from './MyPageContainer';
+import MySelectLang from './MySelectLang';
+
+interface UserNoPermissionProps {
+  logout?: () => void;
+}
+
+/**
+ * 无权限页面
+ * @param param0 logout 退出登录方法
+ * @returns
+ */
+const UserNoPermission: React.FC<UserNoPermissionProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const { logout } = useModel('login');
+
+  return (
+    <MyPageContainer>
+      <Result
+        status="403"
+        style={{
+          height: '100%',
+          background: '#fff',
+        }}
+        title={formatMessage({
+          id: 'cfmmUI.common.userNoPermission.title',
+          defaultMessage: '用户无权限',
+        })}
+        subTitle={formatMessage({
+          id: 'cfmmUI.common.userNoPermission.Message',
+          defaultMessage: '用户无任务权限，请与管理员联系',
+        })}
+        extra={[
+          <Button
+            key="0"
+            icon={<LoginOutlined />}
+            type="primary"
+            onClick={() => {
+              props.logout?.() || logout?.();
+            }}
+          >
+            {formatMessage({
+              id: 'cfmmUI.common.useOtherUserLogin.title',
+              defaultMessage: '使用其他用户登陆',
+            })}
+          </Button>,
+          <MySelectLang key={'1'} />,
+        ]}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default UserNoPermission;

package/dist/cjs/components/ViewTableItemDrawer.tpl

@@ -0,0 +1,29 @@
+import { ProDescriptions } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { Drawer } from 'antd';
+import React from 'react';
+import { ViewTableItemDrawerProps } from '../types';
+
+/**
+ * 表格查看弹窗
+ * @param {IProps<T>} props row：行数据，columns：表格columns, onClose回调
+ * @returns
+ */
+const ViewTableItemDrawer = <T extends Record<string, any>>(props: ViewTableItemDrawerProps<T>) => {
+  const { formatMessage } = useIntl();
+  const { row, columns, ...resetDrawer } = props;
+
+  return (
+    <Drawer
+      width={500}
+      open={!!row}
+      title={formatMessage({ id: 'cfmmUI.common.button.view', defaultMessage: '查看' })}
+      closable={false}
+      {...resetDrawer}
+    >
+      {row && <ProDescriptions<T> column={1} dataSource={row ?? undefined} columns={columns as any} />}
+    </Drawer>
+  );
+};
+
+export default React.memo(ViewTableItemDrawer) as <T>(props: ViewTableItemDrawerProps<T>) => JSX.Element;

package/dist/cjs/components/VolumeFormItem.tpl

@@ -0,0 +1,59 @@
+import { Col, InputNumber, Row } from 'antd';
+import React, { useMemo } from 'react';
+import { VolumeFormItemProps } from '../types';
+
+// 体积的表单项（长宽高）
+/**
+ * @param onChange       值变化回调
+ * @param value          默认值
+ * @param split          分割符
+ * @param id
+ * @param count          文本框数量
+ */
+const VolumeFormItem = (props: VolumeFormItemProps) => {
+  const { value, splitProps, split = '*', count = 2, onChange } = props;
+
+  // 处理符号分割为input的值
+  const valueItem: any = useMemo(() => {
+    if (!value) return [];
+    return value.toLocaleLowerCase().replace(/\s+/g, '')?.split(split);
+  }, [value]);
+
+  const handleChange = (idx: number, value: string | null) => {
+    if (valueItem) {
+      valueItem[idx] = value;
+    }
+    // 如果没有数据返回空串
+    if (valueItem?.filter(Boolean).length === 0) {
+      onChange?.('');
+      return;
+    }
+
+    // 有数据时拼接符号
+    onChange?.(valueItem?.join(' ' + split + ' ') || '');
+  };
+
+  return (
+    <Row>
+      {new Array(count).fill('').map((_, i, arr) => {
+        return (
+          <React.Fragment key={`item-${i}`}>
+            <Col span={Math.floor(24 / count) - 1}>
+              <InputNumber
+                style={{ width: '100%' }}
+                controls={false}
+                onChange={(value) => handleChange(i, value)}
+                value={valueItem?.[i]}
+              />
+            </Col>
+            <Col span={1}>
+              {i < arr.length - 1 ? <span style={{ position: 'relative', top: 4, left: 1 }} {...splitProps}>{split}</span> : null}
+            </Col>
+          </React.Fragment>
+        );
+      })}
+    </Row>
+  );
+};
+
+export default React.memo(VolumeFormItem);

package/dist/cjs/components/WangEditor.css

@@ -0,0 +1,53 @@
+.htmlContainer {
+  padding: 0 10px;
+  margin-top: 20px;
+}
+
+.htmlContainer p, li {
+  white-space: pre-wrap; /* 保留空格 */
+}
+
+.htmlContainer blockquote {
+  border-left: 8px solid #d0e5f2;
+  padding: 10px 10px;
+  margin: 10px 0;
+  background-color: #f1f1f1;
+}
+
+.htmlContainer code {
+  font-family: monospace;
+  background-color: #eee;
+  padding: 3px;
+  border-radius: 3px;
+}
+
+.htmlContainer pre > code {
+  display: block;
+  padding: 10px;
+}
+
+.htmlContainer table {
+  border-collapse: collapse;
+}
+
+.htmlContainer table th,
+.htmlContainer table td {
+  border: 1px solid #ccc;
+  min-width: 50px;
+  height: 20px;
+}
+
+.htmlContainer table th {
+  background-color: #f1f1f1;
+}
+
+.htmlContainer ul,
+.htmlContainer ol {
+  list-style: inside;
+  padding-left: 20px;
+}
+
+.htmlContainer input[type="checkbox"] {
+  margin-right: 5px;
+}
+  

package/dist/cjs/components/WangEditor.tpl

@@ -0,0 +1,174 @@
+import '@wangeditor/editor/dist/css/style.css'; 
+
+import { useIntl, useModel } from '@umijs/max';
+import { DomEditor, i18nChangeLanguage, IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
+import { Editor, Toolbar } from '@wangeditor/editor-for-react';
+import React, { useEffect, useState } from 'react';
+import { uploadPackage } from "../services";
+import { WangEditorProps } from '../types';
+import { fileIdToViewerUrl } from '../utils/fileHelper';
+
+type InsertFnType = (url: string, alt: string, href: string) => void;
+
+const WangEditor: React.FC<WangEditorProps> = (props) => {
+  const { value, readOnly, fileIdToViewerUrl, toolbarConfig = {}, editorConfig = {}, toobarProps, ...resetEditorProps } = props;
+
+  const { formatMessage } = useIntl();
+  const { currentGlobalLang } = useModel('global');
+
+  // editor 实例
+  const [editor, setEditor] = useState<IDomEditor | null>(null);
+
+  // 编辑器内容
+  const [html, setHtml] = useState<string>(value || '');
+
+  // 工具栏配置
+  const [defautlToolbarConfig, setDefautlToolbarConfig] = useState<Partial<IToolbarConfig>>({});
+
+  const [defautlEditorConfig, setDefautlEditorConfig] = useState<Partial<IEditorConfig>>({});
+  // 编辑器配置
+  // const editorConfig: Partial<IEditorConfig> = {
+  //   placeholder: '请输入内容...',
+  // };
+
+  const handleChange = (editor: IDomEditor) => {
+    const html = editor.getHtml()?.replace('<p><br></p>', '');
+    setHtml(html);
+    props.onChange?.(html);
+  };
+
+  // 回显
+  useEffect(() => {
+    if (editor) {
+      setHtml(value || '');
+    }
+  }, [editor, value]);
+
+  // 设置多语言配置
+  useEffect(() => {
+    i18nChangeLanguage(currentGlobalLang);
+  }, [currentGlobalLang]);
+
+  // 初始化工具栏
+  const initToobarConfig = (editor: IDomEditor | null) => {
+    if (!editor) return;
+    const toolbar = DomEditor.getToolbar(editor);
+    if (!toolbar) return;
+
+    const curToolbarConfig = toolbar.getConfig();
+
+    // curToolbarConfig.toolbarKeys = [];   // 重新生成所有菜单
+
+    // toolbarConfig.insertKeys = {         // 在当前 toolbarKeys 的基础上继续插入新菜单
+    //   index: 5, // 插入的位置，基于当前的 toolbarKeys
+    //   keys: ['menu-key1', 'menu-key2']
+    // }
+
+    // 排除掉某些菜单，其他都保留
+    curToolbarConfig.excludeKeys = ['insertVideo'];
+
+    setDefautlToolbarConfig(curToolbarConfig);
+  };
+
+  // 初始化编辑器配置
+  const initEditorConfig = (editor: IDomEditor | null) => {
+    if (!editor) return;
+    
+    const editorConfig = editor.getConfig();
+    if (!editorConfig) return;
+
+    editorConfig.placeholder = formatMessage({ id: 'cfmmUI.common.placeholder.input' });
+
+    // 图片上传
+    if (editorConfig.MENU_CONF) {
+      // 插入图片
+      editorConfig.MENU_CONF['uploadImage'] = {
+        allowedFileTypes: ['image/*'],
+
+        // 自定义上传
+        async customUpload(file: File, insertFn: InsertFnType) {
+          // TS 语法
+          // file 即选中的文件
+          // 自己实现上传，并得到图片 url alt href
+          // 最后插入图片
+          const fmData = new FormData();
+          fmData.append('file', file);
+          fmData.append('bucketName', 'wangeditor');
+          const config = {
+            headers: { 'content-type': 'multipart/form-data' },
+          };
+
+          try {
+            const res = await uploadPackage(fmData, config);
+            if (res && res.code === 200 && res.data?.uploadFileId) {
+              const url = fileIdToViewerUrl?.(res.data.uploadFileId) as string
+              insertFn(url, res.data.originalFileName, url);
+            }
+          } catch (error) {
+            console.log('error', error);
+          }
+        },
+        
+
+        onBeforeUpload(file: File) {
+          // TS 语法
+          // file 选中的文件，格式如 { key: file }
+          return file;
+          // 可以 return
+          // 1. return file 或者 new 一个 file ，接下来将上传
+          // 2. return false ，不上传这个 file
+        },
+
+        // 单个文件上传成功之后
+        onSuccess(file: File, res: any) {
+          // TS 语法
+          console.log(`${file.name} 上传成功`, res);
+        },
+      };
+    }
+
+    setDefautlEditorConfig(defautlEditorConfig);
+  };
+
+  useEffect(() => {
+    // 初始化工具栏
+    initToobarConfig(editor);
+
+    initEditorConfig(editor);
+
+    // 及时销毁 editor ，重要！
+    return () => {
+      if (editor === null) return;
+      editor.destroy();
+      setEditor(null);
+    };
+  }, [editor]);
+
+  return (
+    <div style={{ border: readOnly ? 'none' : '1px solid #ccc', zIndex: 100 }}>
+      {readOnly ? null : (
+        <Toolbar
+          editor={editor}
+          defaultConfig={{ ...defautlToolbarConfig, ...toolbarConfig }}
+          mode="default"
+          style={{ borderBottom: '1px solid #ccc' }}
+          {...toobarProps}
+        />
+      )}
+
+      <Editor
+        // 配置更新刷新组件，否则不会更新视图
+        key={JSON.stringify(defautlEditorConfig)}
+        mode="default"
+        style={{ height: '310px', overflowY: 'hidden' }}
+        defaultConfig={{ readOnly, ...defautlEditorConfig, ...editorConfig }}
+        value={html}
+        onCreated={setEditor}
+        {...resetEditorProps}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+export default React.memo(WangEditor);

package/dist/cjs/components/WangEditorView.tpl

@@ -0,0 +1,24 @@
+import classnames from 'classnames';
+import React from 'react';
+import { WangEditorViewProps } from '../types';
+import './WangEditor.css';
+
+/**
+ * 渲染富文本的html
+ * @param props 节点的属性外加html：string
+ * @returns 
+ */
+const WangEditorView: React.FC<WangEditorViewProps> = (props) => {
+  const { html, className, ...reset } = props;
+  if (!html) return <></>;
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...reset}
+      className={classnames('htmlContainer', className)}
+    ></div>
+  );
+};
+
+export default WangEditorView;