@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/sensitive/server.ts

@@ -0,0 +1,197 @@
+import { message } from 'antd';
+import axios from 'axios';
+const specialErrorCodes = ['10014'];
+
+type IDataSourceType = 'DataTable' | 'DirectDB';
+
+export interface SensitiveApiProps {
+  url?: string;
+  token?: string;
+  role?: string;
+  /** 由调用方传入，用于 i18n 错误提示兜底 */
+  getMessage?: (key: string) => string;
+}
+
+/** 敏感词模块业务 Server 约定接口（推荐由外部注入以便复用、mock） */
+export interface SensitiveServer {
+  getLibraryList: (params: any) => Promise<any>;
+  createLibrary: (params: any) => Promise<any>;
+  deleteLibrary: (id: any) => Promise<any>;
+  /** 更新敏感词库（如 name、words） */
+  updateLibrary: (id: string, params: { name?: string; words?: string[] }) => Promise<any>;
+  /** 下载导入模板（GET，带 token），返回 Blob 用于前端触发下载 */
+  downloadTemplate: (fileType: 'csv' | 'txt') => Promise<Blob | false>;
+  /** 导入敏感词文件：PUT FormData(file)，路径 /sensitive/word/:id/import */
+  importWords: (libraryId: string, file: File) => Promise<any>;
+  getWords : (id: any) => Promise<any>;
+}
+
+const AxiosInstance = ({ url, token, role, getMessage }: SensitiveApiProps): SensitiveServer => {
+  const fallback = (key: string, def: string) => (getMessage ? getMessage(key) : def);
+  const axios$ = axios.create({
+    baseURL: url,
+    // 配置请求超时时间
+    timeout: 1000000,
+  });
+  // 请求拦截
+  axios$.interceptors.request.use((config: any) => {
+    let target_cookie = token;
+
+    const noA = ['user/login', 'user/kaptcha', 'user/regist'];
+    // dangerous behaviour
+    if (!target_cookie && !noA.some((item: string) => config.url.includes(item))) {
+      window.location.pathname = '/login';
+      return;
+    }
+
+    config.headers.Authorization = target_cookie || '';
+    // 这里传中文会报错
+    config.headers.userName = role === '未登录用户' ? '' : role;
+    // config.headers.userId = roleId;
+    return config;
+  });
+  // 返回拦截
+  axios$.interceptors.response.use(
+    response => {
+      // 获取接口返回结果
+      const noA = ['user/kaptcha'];
+      const res = response.data;
+      if (noA.some((item: string) => response.config.url && response.config.url.includes(item))) {
+        return res;
+      }
+      if (res.size && res.type) {
+        return res;
+      }
+      const { success, errorMsg, errorCode } = res;
+      // 处理特殊错误码的情况,页面自己处理错误，例如上传文件重复
+      if (specialErrorCodes.includes(errorCode)) {
+        return res;
+      }
+      if (success) return res;
+      message.error(errorMsg || fallback('server.requestError', '请求出错，请稍后再试'));
+      return false;
+    },
+    error => {
+      // 主动取消请求，不给报错信息
+      if (error.message === 'canceled') {
+        return;
+      }
+      if (
+        error?.response?.data?.errorCode === '30013' ||
+        error?.response?.data?.errorCode === '30023'
+      ) {
+        message.error((error?.response?.data || {}).errorMsg || fallback('server.requestError', '请求出错，请稍后再试'));
+        // location.pathname = '/login';
+      }
+      if (error?.response?.status === 401) {
+        console.log('Error url:', error?.request?.responseURL);
+        message.error((error?.response?.data || {}).errorMsg || fallback('server.noPermission', '没有足够权限'));
+        //window.location.pathname = "/login";
+      }
+      console.log('Error occurs', error);
+      if ('未设置默认配置！' != (error?.response?.data || {}).errorMsg) {
+        message.error((error?.response?.data || {}).errorMsg || fallback('server.requestError', '请求出错，请稍后再试'));
+      }
+    }
+  );
+  const getLibraryList = async (params: any) => {
+    try {
+      const res: any = await axios$.get(`/sensitive/library?${new URLSearchParams(params).toString()}`);
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+
+  const createLibrary = async (params: any) => {
+    try {
+      const res: any = await axios$.post(`/sensitive/library`, params);
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+
+  const deleteLibrary = async (id: any) => {
+    try {
+      const res: any = await axios$.delete(`/sensitive/library/${id}`);
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+
+  const updateLibrary = async (id: string, params: { name?: string; words?: string[] }) => {
+    try {
+      const res: any = await axios$.put(`/sensitive/library/${id}`, params);
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+
+  /** 下载导入模板：GET 请求，走当前 axios 实例（baseURL 已含用户传入的 proxy），路径仅 /sensitive/word/downloadTemplate */
+  const downloadTemplate = async (fileType: 'csv' | 'txt'): Promise<Blob | false> => {
+    try {
+      const res: any = await axios$.get('/sensitive/word/downloadTemplate', {
+        params: { fileType },
+        responseType: 'blob',
+      });
+      if (res && typeof res.size === 'number') return res as Blob;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+
+  /** 导入敏感词文件：PUT /sensitive/word/:libraryId/import，FormData 字段 file（binary），不设 Content-Type 由 axios 自动带 boundary */
+  const importWords = async (libraryId: string, file: File): Promise<any> => {
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const res: any = await axios$.put(`/sensitive/word/${libraryId}/import`, formData);
+      if (res && res.success !== false) return res;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+
+  const getWords = async (id: string) => {
+    try {
+      const res: any = await axios$.get(`/sensitive/library/${id}`);
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+
+  return {
+    getLibraryList,
+    createLibrary,
+    deleteLibrary,
+    updateLibrary,
+    downloadTemplate,
+    importWords,
+    getWords
+  };
+};
+
+export default AxiosInstance;

package/src/modules/sensitiveId/AutoTag.tsx

@@ -0,0 +1,311 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { X, Plus } from 'lucide-react';
+import type { InputRef } from "antd";
+import { Input, message, Tag, theme } from "antd";
+import VirtualWrap from "./VirtualWrap";
+import { debounce } from "../../utils/commonFn"
+
+const FONT_SIZE = 12;
+const INPUT_WIDTH = 64;
+const ADD_TAG_TYPE = "add_tab_20250208";
+
+const canvas = document.createElement("canvas");
+interface AutoTagInterface {
+  wrapRef?: any;
+  tags: string[];
+  setTags: (arg: string[]) => void;
+  disabled?: boolean;
+  fuzzyNameOrId?: string;
+  addLabel?: string;
+}
+
+const AutoTag = ({
+  tags,
+  setTags,
+  disabled,
+  fuzzyNameOrId,
+  addLabel,
+  wrapRef = null
+}: AutoTagInterface) => {
+  const { token } = theme.useToken();
+  const [inputVisible, setInputVisible] = useState(false);
+  const [editInputIndex, setEditInputIndex] = useState(-1);
+  const [editInitVal, setEditInitVal] = useState<string>("");
+  const inputRef = useRef<InputRef>(null);
+  const editInputRef = useRef<InputRef>(null);
+  const tagInputStyle: React.CSSProperties = {
+    width: INPUT_WIDTH,
+    height: 32,
+    marginInlineEnd: 8,
+    verticalAlign: "top",
+    fontSize: FONT_SIZE,
+    lineHeight: 30,
+    minWidth: INPUT_WIDTH
+  };
+  const [containerHeight, setContainerHeight] = useState<number>(0);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [canvasContext, setCanvasContext] = useState<any>(
+    canvas.getContext("2d")
+  );
+  const [virtualList, setVirtualList] = useState<Array<any>>([]);
+
+  useEffect(() => {
+    setContainerRect();
+  }, [wrapRef]);
+
+  const handleClose = (removedTag: string) => () => {
+    const newTags = tags.filter((tag) => tag.trim() !== removedTag);
+    setTags(newTags);
+  };
+
+  const showInput = () => {
+    setInputVisible(true);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  const getStrLenght = (str: string) => {
+    let totalLength = 0;
+
+    for (let i = 0; i < str.length; i++) {
+      // 判断当前字符是字母还是数字
+      if (/[a-zA-Z0-9]/.test(str[i])) {
+        totalLength += 1.2; // 字母和数字长度为1
+      } else {
+        // 其他字符（比如汉字、emoji等）长度为2
+        totalLength += 2;
+      }
+    }
+
+    return (FONT_SIZE / 2) * totalLength + 30;
+  };
+
+  const handleInputConfirm = (e: any) => {
+    const _value = e.target.value.trim();
+    if (_value && !tags.includes(_value)) {
+      setTags([...tags, _value.slice(0, 16)]);
+    }
+    setInputVisible(false);
+  };
+
+  const handleEditInputConfirm = (e: any) => {
+    const _value = e.target.value.trim();
+    if (_value) {
+      const newTags = [...tags];
+      newTags[editInputIndex] = _value.slice(0, 16);
+      setTags(newTags);
+      setEditInputIndex(-1);
+    }
+  };
+
+  const tagPlusStyle: React.CSSProperties = {
+    height: 32,
+    background: token.colorBgContainer,
+    borderStyle: "dashed",
+    borderColor: "#D9D9D9",
+    padding: "0 15px",
+    lineHeight: "32px",
+    fontSize: FONT_SIZE,
+
+  };
+
+  const handleIptChange = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
+    const _value = e.target.value.trim();
+    const editIpt = editInputRef.current;
+    if (_value.length >= 16 && editIpt && editIpt.input) {
+      message.warning("敏感词最多可输入16个字符!");
+    }
+  }, 300);
+
+  const getTextWidth = (
+    text: string,
+    fontSize = 12,
+    fontFamily = "PingFangSC,微软雅黑,Helvetic"
+  ) => {
+    canvasContext.font = `${fontSize}px ${fontFamily}`;
+    return canvasContext.measureText(text).width;
+  };
+
+  const RenderRow = (props: any) => {
+    const { item } = props;
+    const { list } = item;
+    return (
+      <div className="mb-4">
+        {list && list.length
+          ? list.map((i: any, index: number) => (
+            <span key={`tag_wrap_${index}`}>{renderTag(i)}</span>
+          ))
+          : null}
+      </div>
+    );
+  };
+
+  const editTag = (label: string, idx: number) => (e: any) => {
+    if (disabled) return;
+    setEditInputIndex(idx);
+    setEditInitVal(label);
+    e.preventDefault();
+  };
+
+  const setEditIptWidth = () => {
+    const editIpt = editInputRef.current;
+    if (editIpt && editIpt.input) {
+      editIpt.input.style.width = `${getStrLenght(editIpt.input.value.slice(0, 16))}px`;
+    }
+  };
+  const setAddIptWidth = () => {
+    const addIpt = inputRef.current;
+    if (addIpt && addIpt.input) {
+      addIpt.input.style.width = `${getStrLenght(addIpt.input.value.slice(0, 16))}px`;
+    }
+  };
+
+  const editIptOnInput = debounce(setEditIptWidth, 200);
+
+  const addIptOnInput = debounce(setAddIptWidth, 200);
+
+  const renderTag = (tagData: any) => {
+    const { idx, label } = tagData;
+    return editInputIndex === idx ? (
+      <Input
+        ref={editInputRef}
+        key={`edit-ipt-${idx}`}
+        maxLength={16}
+        size="small"
+        style={tagInputStyle}
+        defaultValue={editInitVal}
+        onInput={editIptOnInput}
+        onBlur={handleEditInputConfirm}
+        onPressEnter={handleEditInputConfirm}
+        onChange={handleIptChange}
+      />
+    ) : label === ADD_TAG_TYPE ? (
+      inputVisible ? (
+        <Input
+          ref={inputRef}
+          type="text"
+          size="small"
+          maxLength={16}
+          style={tagInputStyle}
+          onInput={addIptOnInput}
+          onBlur={handleInputConfirm}
+          onPressEnter={handleInputConfirm}
+          onChange={handleIptChange}
+        />
+      ) : (
+        <Tag
+          icon={<Plus size={14} className="inline mr-[6px] mt-[-4px]" />}
+          color="processing"
+          style={tagPlusStyle}
+          onClick={showInput}
+        >
+          {addLabel || "添加"}
+        </Tag>
+      )
+    ) : (
+      <Tag
+        key={`tag_${idx}`}
+        style={{
+          userSelect: "none",
+          height: "32px",
+          lineHeight: "30px",
+          padding: "0 15px",
+          fontSize: `${FONT_SIZE}px`,
+          background: "white",
+          borderColor: "#EBEBEB"
+        }}
+        closable={!disabled}
+        onClose={handleClose(label)}
+      // closeIcon={<X />}
+      >
+        <span onDoubleClick={editTag(label, idx)}>{label}</span>
+      </Tag>
+    );
+  };
+
+  const setContainerRect = () => {
+    if (wrapRef && wrapRef.current) {
+      const { height, width } = wrapRef.current.getBoundingClientRect();
+      setContainerHeight(height);
+      setContainerWidth(width);
+    }
+  };
+
+  const filterTags = useMemo(() => {
+    return (tags || []).concat(ADD_TAG_TYPE).filter((tag) => {
+      return fuzzyNameOrId ? tag.indexOf(fuzzyNameOrId) > -1 : true;
+    });
+  }, [tags, fuzzyNameOrId]);
+
+  useEffect(() => {
+    if (containerWidth && containerHeight && filterTags && filterTags.length) {
+      fixRenderData();
+    }
+  }, [filterTags, containerHeight, containerWidth]);
+
+  const resizeFn = debounce(() => {
+    setContainerRect();
+  }, 500);
+
+  useEffect(() => {
+    window.addEventListener("resize", resizeFn);
+    return () => {
+      window.removeEventListener("resize", resizeFn);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (editInputIndex >= 0) {
+      setEditIptWidth();
+      setTimeout(() => {
+        editInputRef.current?.focus();
+      }, 100);
+    }
+  }, [editInputIndex]);
+
+  const fixRenderData = () => {
+    const _list: Array<any> = [];
+    let _row: Array<any> = [];
+    let len: number = 0;
+    const tagMargin = 18;
+    const fixWidth = 49 + tagMargin;
+    // console.log("fixRenderData", containerWidth)
+    filterTags.forEach((str: string, idx: number) => {
+      const _str = str.trim();
+      const strWidth = getTextWidth(_str);
+      const tagWidth = strWidth + fixWidth;
+      const obj = {
+        idx,
+        label: _str
+      };
+      if (len + tagWidth > containerWidth) {
+        _list.push({ idx, list: [..._row] });
+        _row = [{ ...obj }];
+        len = tagWidth;
+      } else {
+        len = len + tagWidth;
+        _row.push({ ...obj });
+      }
+    });
+    _list.push({ idx: _list.length + 1, list: [..._row] });
+    setVirtualList([..._list]);
+  };
+
+  const res = useMemo(() => {
+    return virtualList.length ? (
+      <VirtualWrap
+        list={virtualList}
+        itemHeight={22}
+        paddingY={12}
+        wrapPadding={32}
+        wrapperRef={wrapRef}
+        itemKey="idx"
+      >
+        <RenderRow />
+      </VirtualWrap>
+    ) : null;
+  }, [virtualList, editInputIndex, inputVisible]);
+
+  return <>{res}</>;
+};
+
+export default AutoTag;

package/src/modules/sensitiveId/UploadModal.tsx

@@ -0,0 +1,181 @@
+import {
+  Modal,
+  Form,
+  UploadProps,
+  UploadFile,
+  ConfigProvider,
+  message, Upload
+} from "antd";
+import { ReactNode, useEffect, useState } from "react";
+import { Button, defaultTheme, type Styles } from '@mxmweb/zui';
+const { Dragger } = Upload;
+import warningLinear from "../../assets/img/warningLinear.png";
+import upload from "../../assets/img/upload.png";
+import File from "../../assets/img/file.png";
+
+interface IEmpty {
+  isShowCreateModal: boolean;
+  closeModal: (isRefresh: boolean) => void;
+  uploadType?: string;
+  uploadEvents: (action: string, payload?: any) => void;
+  accept?: string;
+  children?: ReactNode;
+  footerChildren?: ReactNode;
+  title?: string | ReactNode;
+  // UploadFile: (id: string, formData: FormData) => void
+  multiple?: boolean;
+  subTitle?: string;
+  fileName?: string;
+}
+
+const UploadModal = (props: IEmpty) => {
+  const {
+    isShowCreateModal,
+    closeModal,
+    uploadEvents,
+    children,
+    accept = ".csv,.txt",
+    title,
+    // UploadFile,
+    multiple = true,
+    subTitle = "支持单次上传，支持 csv、txt格式。",
+    fileName = "file"
+  } = props;
+  const [createForm] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const [fileList, setFileList]: any = useState<UploadFile[]>([]);
+  const modalStyles = {
+    header: {
+      padding: "20px 24px",
+      borderBottom: "1px solid #F0F0F0",
+      margin: 0
+    },
+    body: { padding: "16px 24px 20px 24px", borderBottom: "1px solid #F0F0F0" },
+    mask: {},
+    footer: { padding: "16px 24px", margin: 0 },
+    content: { padding: 0, borderRadius: "4px" }
+  };
+  const successFn = () => {
+    closeModal(false);
+    setLoading(false);
+    createForm.resetFields();
+    uploadEvents("uploaded");
+  };
+
+  const handlerCancle = () => {
+    createForm.resetFields();
+    closeModal(false);
+  };
+
+  const handleOk = async () => {
+    const formData = new FormData();
+    fileList.forEach((file: any) => {
+      formData.append(fileName, file);
+    });
+
+    setLoading(true);
+    uploadEvents("uploaded", formData);
+
+
+  };
+  const upLoadProps: UploadProps = {
+    multiple,
+    fileList,
+    onRemove: (file) => {
+      setFileList((fileList: any) => {
+        const fileListIds = fileList.map((item: any) => item.uid);
+        const index = fileListIds.indexOf(file.uid);
+        const newFileList = fileList.slice();
+        newFileList.splice(index, 1);
+        return [...newFileList];
+      });
+    },
+    beforeUpload(file) {
+      if (fileList.length) {
+        message.warning("只能上传一个文件");
+        return;
+      }
+      setFileList((fileList: any) => {
+        return [...fileList, file];
+      });
+      return false;
+    }
+  };
+
+  const renderFooter = () => {
+    return (
+      <div className="flex justify-end gap-3">
+        <Button
+          label="取消"
+          onClick={handlerCancle}
+        />
+        <Button
+          mode="primary"
+          label="确认"
+          loading={loading}
+          onClick={handleOk}
+        />
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    if (!isShowCreateModal) {
+      setFileList([]);
+    }
+  }, [isShowCreateModal]);
+
+  return (
+    <ConfigProvider
+      modal={{
+        styles: modalStyles
+      }}
+    >
+      <Modal
+        title={title || "上传文件"}
+        open={isShowCreateModal}
+        footer={renderFooter}
+        onCancel={handlerCancle}
+        width={650}
+      >
+        <div className="">
+          <div className="h-[44px] bg-[#E6F4FF] flex items-center px-[12px] mb-[10px] rounded-[4px] justify-between">
+            <div className="flex items-center">
+              <img
+                src={warningLinear}
+                width={24}
+                height={24}
+                className="mr-[8px]"
+              />
+              <div className="text-text-color1">先下载模板后上传</div>
+            </div>
+            {children}
+          </div>
+          <Dragger
+            {...upLoadProps}
+            accept={accept}
+            iconRender={() => {
+              return <img src={File} width={12} height={12} />;
+            }}
+            style={{ backgroundColor: "#F9FAFC", borderColor: "#D9D9D9" }}
+          >
+            <div className="flex flex-col items-center">
+              <img src={upload} width={48} height={48} />
+              <p className="mt-[12px] text-[14px] text-text-color1 mb-[4px]">
+                点击或将文件拖拽到此处上传
+              </p>
+              <span style={{ color: "#999", fontSize: "12px", fontWeight: 400 }}>
+                {subTitle}
+              </span>
+            </div>
+
+          </Dragger>
+        </div>
+        <div className="btn-group"></div>
+      </Modal>
+    </ConfigProvider>
+  );
+};
+
+export default UploadModal;