@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/esm/components/GlobalHeader.tpl

@@ -0,0 +1,313 @@
+import {
+  BranchesOutlined,
+  CloudDownloadOutlined,
+  EllipsisOutlined,
+  FileDoneOutlined,
+  FullscreenOutlined,
+  HomeOutlined,
+  QuestionCircleOutlined,
+} from '@ant-design/icons';
+import {
+  AvatarDropdown,
+  getLocale,
+  HeaderSearch,
+  history,
+  MySelectLang,
+  ThemeSwitch,
+  useIntl,
+  useModel,
+} from '@umijs/max';
+import { Dropdown, Tag, Tooltip } from 'antd';
+import { toggleFull } from 'be-full';
+import React, { Fragment, useMemo } from 'react';
+import { GlobalHeaderProps, GlobalRightItem } from '../types';
+import styles from './GlobalHeader.less';
+
+const VERSION_KEY = 'version';
+const ENV_TAG_COLOR: GlobalHeaderProps['ENVTagColor'] = {
+  dev: 'orange',
+  pre: 'orange',
+  test: 'green',
+  prod: 'green',
+};
+
+/**
+ * 全局头部组件
+ */
+const GlobalHeader: React.FC<GlobalHeaderProps> = (props) => {
+  const { replaceItems, insertItems, ENVTagColor = ENV_TAG_COLOR } = props;
+
+  const { setIsDarkTheme, templateDownloadModalOpenChange } = useModel('global');
+
+  // 容错处理：防止useModel('globalRef')不存在或其中某个ref缺失
+  let globalRefs;
+  try {
+    globalRefs = useModel('globalRef');
+  } catch (error) {
+    console.warn('useModel("globalRef") not available:', error);
+    globalRefs = {};
+  }
+
+  const {
+    globalAuthRef,
+    globalSystemHelperRef,
+    globalUserSettingRef,
+    globalSystemVersionRef,
+    globalLangSettingRef,
+    globalThemeSettingRef,
+  } = globalRefs || {};
+
+  const { formatMessage } = useIntl();
+
+  const groupMap: Record<string, any> = {
+    auth: globalAuthRef || null,
+    helper: globalSystemHelperRef || null,
+    avatar: globalUserSettingRef || null,
+    version: globalSystemVersionRef || null,
+    selectLang: globalLangSettingRef || null,
+    themeSwitch: globalThemeSettingRef || null,
+  };
+
+  const items: GlobalRightItem[] = [
+    {
+      key: 'AuthDropdown',
+      group: groupMap.auth,
+      component: <></>,
+    },
+    {
+      key: 'HeaderSearch',
+      group: groupMap.helper,
+      component: (
+        <HeaderSearch
+          className={`${styles.action} ${styles.search}`}
+          placeholder="系统搜索"
+          defaultValue="广东翠峰"
+          options={[
+            {
+              label: <a href="http://www.cfmm.com.cn">广东翠峰</a>,
+              value: '广东翠峰',
+            },
+          ]}
+          onSearch={() => {
+            //输入文字，查询出来的数据
+          }}
+        />
+      ),
+    },
+    {
+      key: 'Website',
+      group: groupMap.helper,
+      component: (
+        <Tooltip
+          title={formatMessage({
+            id: 'cfmmUI.GlobalHeader.button.Website',
+            defaultMessage: '官方网站',
+          })}
+        >
+          <a
+            style={{
+              color: 'inherit',
+            }}
+            target="_blank"
+            href="http://www.cfmm.com.cn"
+            rel="noopener noreferrer"
+            className={styles.action}
+          >
+            <HomeOutlined />
+          </a>
+        </Tooltip>
+      ),
+    },
+    {
+      key: 'helpDocs',
+      group: groupMap.helper,
+      component: (
+        <Tooltip
+          title={formatMessage({
+            id: 'cfmmUI.GlobalHeader.button.helpDocs',
+            defaultMessage: '帮助文档',
+          })}
+        >
+          <a
+            style={{
+              color: 'inherit',
+            }}
+            target="_blank"
+            href={`${HELP_DOCS_URL}${getLocale() === 'en-US' ? '' : getLocale()}`}
+            rel="noopener noreferrer"
+            className={styles.action}
+          >
+            <QuestionCircleOutlined />
+          </a>
+        </Tooltip>
+      ),
+    },
+    {
+      key: 'Full',
+      group: groupMap.helper,
+      component: (
+        <Tooltip title={''}>
+          <a
+            style={{
+              color: 'inherit',
+            }}
+            className={styles.action}
+            onClick={() => {
+              toggleFull();
+            }}
+          >
+            <FullscreenOutlined />
+          </a>
+        </Tooltip>
+      ),
+    },
+    {
+      key: 'more',
+      group: groupMap.helper,
+      component: (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: '1',
+                icon: <FileDoneOutlined />,
+                label: (
+                  <a onClick={() => templateDownloadModalOpenChange?.(true)}>
+                    {formatMessage({
+                      id: 'cfmmUI.GlobalHeader.button.template',
+                      defaultMessage: '模板下载',
+                    })}
+                  </a>
+                ),
+              },
+              {
+                key: '2',
+                icon: <CloudDownloadOutlined />,
+                label: (
+                  <a onClick={() => history.push('/clientDashboard/clientDownloadDashboard?s=f')}>
+                    {formatMessage({
+                      id: 'cfmmUI.GlobalHeader.button.client',
+                      defaultMessage: '客户端下载',
+                    })}
+                  </a>
+                ),
+              },
+            ],
+          }}
+        >
+          <EllipsisOutlined style={{ cursor: 'pointer', padding: '0 12px' }} />
+        </Dropdown>
+      ),
+    },
+    {
+      key: 'AvatarDropdown',
+      group: groupMap.avatar,
+      component: <AvatarDropdown className={styles.action} />,
+    },
+    {
+      key: 'REACT_APP_ENV',
+      group: groupMap.version,
+      component: REACT_APP_ENV ? (
+        <Tooltip
+          title={
+            <>
+              <div>{`Environment：${REACT_APP_ENV!.toLocaleUpperCase()}`}</div>
+              <div>{`Git Commit Hash Code：${localStorage.getItem(VERSION_KEY)?.toUpperCase()}`}</div>
+            </>
+          }
+        >
+          <Tag
+            icon={<BranchesOutlined />}
+            color={ENVTagColor[REACT_APP_ENV]}
+          >{`${REACT_APP_ENV!.toLocaleUpperCase()}-${localStorage.getItem(VERSION_KEY)?.toUpperCase()}`}</Tag>
+        </Tooltip>
+      ) : null,
+    },
+    {
+      key: 'MySelectLang',
+      group: groupMap.selectLang,
+      component: <MySelectLang className={styles.action} />,
+    },
+    {
+      key: 'ThemeSwitch',
+      group: groupMap.themeSwitch,
+      component: <ThemeSwitch style={{ height: 22 }} onThemeChange={setIsDarkTheme} />,
+    },
+  ];
+
+  const getModifiedItems = useMemo(() => {
+    if (!replaceItems?.length && !insertItems?.length) {
+      return items;
+    }
+
+    let newItems = [...items];
+
+    // 处理替换的项目
+    if (replaceItems?.length) {
+      const replaceKeys = new Set(replaceItems.map((item) => item.key));
+
+      newItems = newItems.map((item) =>
+        replaceKeys.has(item.key) ? replaceItems.find((replaceItem) => replaceItem.key === item.key) || item : item,
+      );
+    }
+
+    // 处理插入的项目
+    if (insertItems?.length) {
+      // 创建副本以避免直接修改原数组
+      const itemsWithInserts = [...newItems];
+
+      // 按索引从大到小排序，避免插入后索引变化
+      const sortedInserts = [...insertItems].sort((a, b) => b.index - a.index);
+
+      sortedInserts.forEach((item) => {
+        itemsWithInserts.splice(item.index, 0, item as GlobalRightItem);
+      });
+
+      newItems = itemsWithInserts;
+    }
+
+    return newItems;
+  }, [items, replaceItems, insertItems]);
+
+  // 按group分组渲染组件
+  const renderGroupedItems = useMemo(() => {
+    const result: React.ReactNode[] = [];
+    const renderedGroups = new Set<string>(); // 记录已渲染的分组
+
+    getModifiedItems.forEach((item, index) => {
+      if (item.group) {
+        const groupKey = Object.keys(groupMap).find((key) => groupMap[key as keyof typeof groupMap] === item.group);
+        const ref = groupKey ? groupMap[groupKey as keyof typeof groupMap] : null;
+
+        if (groupKey && ref && !renderedGroups.has(groupKey)) {
+          // 如果这个分组还没有渲染过，渲染整个分组
+          renderedGroups.add(groupKey);
+
+          // 找到所有属于这个分组的items
+          const groupItems = getModifiedItems.filter((groupItem) => groupItem.group === item.group);
+
+          result.push(
+            <div key={item.key} ref={ref} style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+              {groupItems.map((groupItem) => (
+                <Fragment key={groupItem.key}>{groupItem.component}</Fragment>
+              ))}
+            </div>,
+          );
+        } else if (!groupKey || !ref) {
+          // 如果分组的ref不存在，直接渲染组件
+          result.push(<Fragment key={item.key}>{item.component}</Fragment>);
+        }
+        // 如果分组已经渲染过，跳过这个item
+      } else {
+        // 没有分组的item直接渲染
+        result.push(<Fragment key={item.key}>{item.component}</Fragment>);
+      }
+    });
+
+    return result;
+  }, [getModifiedItems, groupMap]);
+
+  return <div className={styles.right}>{renderGroupedItems}</div>;
+};
+
+export default React.memo(GlobalHeader);

package/dist/esm/components/HeaderSearch.less

@@ -0,0 +1,32 @@
+.headerSearch {
+  .input {
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    transition: width 0.3s, margin-left 0.3s;
+
+    :global(.ant-select-selection) {
+      background: transparent;
+    }
+
+    input {
+      padding-right: 0;
+      padding-left: 0;
+      border: 0;
+      box-shadow: none !important;
+    }
+
+    &,
+    &:hover,
+    &:focus {
+      border-bottom: 1px solid @border-color-base;
+    }
+
+    &.show {
+      width: 210px;
+      margin-left: 8px;
+    }
+  }
+}

package/dist/esm/components/HeaderSearch.tpl

@@ -0,0 +1,92 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { AutoComplete, Input, InputRef } from "antd";
+import React, { useRef } from "react";
+import useMergeValue from "use-merge-value";
+import classNames from "classnames";
+import styles from "./HeaderSearch.less";
+import { HeaderSearchProps } from "../types";
+
+//头部查询框
+const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {
+  const {
+    className,
+    defaultValue,
+    onVisibleChange,
+    placeholder,
+    open,
+    defaultOpen,
+    ...restProps
+  } = props;
+
+  const inputRef = useRef<InputRef | null>(null);
+
+  const [value, setValue] = useMergeValue<string | undefined>(defaultValue, {
+    value: props.value,
+    onChange: props.onChange,
+  });
+
+  const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, {
+    value: props.open,
+    onChange: onVisibleChange,
+  });
+
+  const inputClass = classNames(styles.input, {
+    [styles.show]: searchMode,
+  });
+
+  return (
+    <div
+      className={classNames(className, styles.headerSearch)}
+      onClick={() => {
+        setSearchMode(true);
+        if (searchMode && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }}
+      onTransitionEnd={({ propertyName }) => {
+        if (propertyName === "width" && !searchMode) {
+          if (onVisibleChange) {
+            onVisibleChange(searchMode);
+          }
+        }
+      }}
+    >
+      <SearchOutlined
+        key="Icon"
+        style={{
+          cursor: "pointer",
+        }}
+      />
+      <AutoComplete
+        key="AutoComplete"
+        className={inputClass}
+        value={value}
+        style={{
+          height: 28,
+          marginTop: -6,
+        }}
+        options={restProps.options}
+        onChange={setValue}
+      >
+        <Input
+          ref={inputRef}
+          defaultValue={defaultValue}
+          aria-label={placeholder}
+          placeholder={placeholder}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              if (restProps.onSearch) {
+                restProps.onSearch(value);
+              }
+            }
+          }}
+          onBlur={() => {
+            setSearchMode(false);
+          }}
+        />
+      </AutoComplete>
+    </div>
+  );
+};
+
+export default React.memo(HeaderSearch);

package/dist/esm/components/HighlightStr.tpl

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StringToHighlightingFnType, HighlightStrProps } from '../types';
+
+/**
+ * 切割高亮字符串
+ * @param value 原始值
+ * @param highlightValue 高亮的值
+ * @returns {hasHighlight: index !== -1, beforeStr, highlightStr, afterStr}
+ */
+export const stringToHighlighting: StringToHighlightingFnType = (value, highlightValue) => {
+  const index = value.toLocaleLowerCase().indexOf(highlightValue.toLocaleLowerCase());
+  const beforeStr = value.substring(0, index);
+  const highlightStr = value.substring(index, index + highlightValue.length);
+  const afterStr = value.slice(index + highlightValue.length);
+
+  return { hasHighlight: index !== -1, beforeStr, highlightStr, afterStr };
+};
+
+
+const style = { whiteSpace: 'nowrap', paddingBottom: 2 };
+
+/**
+ * 高亮搜索条件
+ * @param {HighlightStrProps} props 
+ */
+const HighlightStr = (props: HighlightStrProps) => {
+  const { value, highlightValue, highlightStyle = {} } = props;
+  const { hasHighlight, beforeStr, highlightStr, afterStr } = stringToHighlighting(value, highlightValue);
+
+  return hasHighlight ? (
+    <span style={style}>
+      {beforeStr}
+      <span style={{ color: '#f50', ...highlightStyle }}>{highlightStr}</span>
+      {afterStr}
+    </span>
+  ) : (
+    <span style={style}>{value}</span>
+  );
+};
+
+export default React.memo(HighlightStr);

package/dist/esm/components/ImportDataUpload.tpl

@@ -0,0 +1,94 @@
+import { UploadOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, message, Upload, UploadProps } from 'antd';
+import React from 'react';
+import styles from './MyUpload.less';
+import { ImportDataUploadProps } from '../types';
+
+const ImportDataUpload: React.FC<ImportDataUploadProps> = (props) => {
+  const {
+    title,
+    uploadProps,
+    buttonProps,
+    children,
+    showDefautlMessage = true,
+    accept = '.txt,.json',
+    onImport,
+  } = props;
+
+  const { formatMessage } = useIntl();
+
+  // 导入文件
+  const handleCustomRequest: UploadProps['customRequest'] = async (info) => {
+    const { file } = info;
+    try {
+      let hide: any;
+      if (showDefautlMessage)
+        hide = message.loading(
+          formatMessage({
+            id: 'pages.File.import.waitingMessage',
+            defaultMessage: '正在导入',
+          }),
+          0,
+        );
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+          hide?.()
+          try {
+            onImport?.(e.target?.result as any);
+            
+            message.success(
+              formatMessage({
+                id: 'pages.File.import.successMessage',
+                defaultMessage: '导入成功！',
+              }),
+            );
+          } catch (error) {
+            message.error(
+              formatMessage(
+                {
+                  id: 'pages.File.import.failMessage',
+                  defaultMessage: '导入失败，请重试！',
+                },
+                {msg: JSON.stringify(error)}
+              ),
+            );
+            console.error('解析错误:', error);
+          }
+        };
+        
+        reader.readAsText(file as File);
+    } catch (error: any) {
+      // 这里可以抛出文件类型错误不正确的相关提示
+      message.error(
+        formatMessage({
+          id: 'pages.File.format.failMessage',
+          defaultMessage: '文件格式不正确',
+        }) + error.message,
+      );
+
+      console.log('error', error);
+    }
+  };
+
+  return (
+    <Upload
+      className={styles.importNotList}
+      maxCount={1}
+      customRequest={handleCustomRequest}
+      {...uploadProps}
+      accept={accept}
+    >
+      {children ? (
+        children
+      ) : (
+        <Button type="primary" icon={<UploadOutlined />} {...buttonProps}>
+          {title ? title : formatMessage({ id: 'pages.File.import', defaultMessage: '导入' })}
+        </Button>
+      )}
+    </Upload>
+  );
+};
+
+export default React.memo(ImportDataUpload);

package/dist/esm/components/ImportExecl.less

@@ -0,0 +1,10 @@
+.importExexl {
+  // 不显示上传的文件列表
+  :global(.ant-upload-list) {
+    display: none;
+  }
+
+  :global(.mainAnt-upload-list) {
+    display: none;
+  }
+}

package/dist/esm/components/ImportExecl.tpl

@@ -0,0 +1,108 @@
+import { importExexl } from '../utils/importHelper';
+import { UploadOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import type { UploadFile, UploadProps } from 'antd';
+import { Button, message, Upload } from 'antd';
+import React from 'react';
+import { ImportExeclProps } from '../types';
+import styles from './ImportExecl.less';
+
+const ImportExecl = <T,>(props: ImportExeclProps<T>) => {
+  const {
+    accept = ".xlsx, .xls",
+    title,
+    max,
+    header,
+    rangeStart,
+    uploadProps,
+    buttonProps,
+    children,
+    showDefautlMessage = true,
+    onChange,
+  } = props;
+
+  const { formatMessage } = useIntl();
+
+  // 导入文件
+  const handleCustomRequest: UploadProps['customRequest'] = async (info) => {
+    let hide;
+    try {
+      if (showDefautlMessage)
+        hide = message.loading(
+          formatMessage({
+            id: 'cfmmUI.File.import.waitingMessage',
+            defaultMessage: '正在导入',
+          }),
+          0,
+        );
+
+      const data = await importExexl({ file: info.file, rangeStart, max, header });
+      const result = await onChange?.(data as T, info.file as UploadFile);
+
+      hide?.();
+      if (result && showDefautlMessage) {
+        if (result.success) {
+          if (result.data && typeof result.data === 'number') {
+            message.success(
+              formatMessage(
+                {
+                  id: 'cfmmUI.File.import.exceed.success',
+                  defaultMessage: '成功导入 {count} 条数据',
+                },
+                { count: result.data },
+              ),
+            );
+          } else {
+            message.success(
+              formatMessage({
+                id: 'cfmmUI.File.import.successMessage',
+                defaultMessage: '导入成功！',
+              }),
+            );
+          }
+        } else {
+          message.error(
+            formatMessage(
+              {
+                id: 'cfmmUI.File.import.failMessage',
+                defaultMessage: '导入失败，请重试！',
+              },
+              { msg: result.failMsg ? JSON.stringify(result.failMsg) : undefined },
+            ),
+          );
+        }
+      }
+    } catch (error: any) {
+      hide?.();
+      // 这里可以抛出文件类型错误不正确的相关提示
+      message.error(
+        formatMessage({
+          id: 'cfmmUI.File.format.failMessage',
+          defaultMessage: '文件格式不正确',
+        }) + error.message,
+      );
+
+      console.log('error', error);
+    }
+  };
+
+  return (
+    <Upload
+      accept={accept}
+      className={styles.importExexl}
+      maxCount={1}
+      customRequest={handleCustomRequest}
+      {...uploadProps}
+    >
+      {children ? (
+        children
+      ) : (
+        <Button type="primary" icon={<UploadOutlined />} {...buttonProps}>
+          {title ? title : formatMessage({ id: 'cfmmUI.File.import', defaultMessage: '导入' })}
+        </Button>
+      )}
+    </Upload>
+  );
+};
+
+export default React.memo(ImportExecl) as <T,>(props: ImportExeclProps<T>) => React.ReactElement;