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

package/src/modules/sensitiveId/VirtualWrap.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useRef } from "react";
+import VirtualList from "rc-virtual-list";
+import { debounce } from "../../utils/commonFn"
+
+type T = {
+  clientHeight: number;
+  current: HTMLDivElement | null;
+};
+
+export interface IVirtualWrap {
+  className?: string;
+  list: Array<any>;
+  paddingY: number;
+  itemHeight: number;
+  wrapPadding: number;
+  children: React.ReactNode;
+  wrapperRef: React.RefObject<T>;
+  itemKey?: string;
+  onClick?: (row: any) => void;
+}
+
+const VirtualWrap: React.FC<IVirtualWrap> = (props) => {
+  const {
+    list,
+    itemHeight,
+    paddingY,
+    wrapPadding,
+    children,
+    itemKey,
+    wrapperRef,
+    onClick
+  } = props;
+  const [containerHeight, setContainerHeight] = useState<number>();
+  const pageSizeRef = useRef(0);
+  const [data, setData] = useState<any[]>([]);
+
+  const appendData = () => {
+    if (list && (list.length || list.length === 0)) {
+      const len = data.length;
+      const max = list.length;
+      const _end = len + pageSizeRef.current;
+      const end = _end > max ? max : _end;
+      if (end > len) {
+        const newData = list.slice(len, end);
+        setData([...data, ...newData]);
+      }
+    }
+  };
+
+  const initData = () => {
+    if (wrapperRef && wrapperRef.current && wrapperRef.current.clientHeight) {
+      const { clientHeight } = wrapperRef.current;
+      const _pageSize =
+        Math.ceil((clientHeight - wrapPadding) / (itemHeight + paddingY)) + 5;
+      setContainerHeight(clientHeight);
+      pageSizeRef.current = _pageSize;
+      appendData();
+    }
+  };
+
+  const resizeFn = debounce(() => {
+    initData();
+  }, 500);
+
+  useEffect(() => {
+    window.addEventListener("resize", resizeFn);
+    return () => {
+      window.removeEventListener("resize", resizeFn);
+    };
+  }, []);
+
+  useEffect(() => {
+    initData();
+  }, [wrapperRef, list]);
+
+  const rowClick = (row: any) => {
+    onClick && onClick(row);
+  };
+
+  return (
+    <>
+      {list && list.length && data.length ? (
+        <VirtualList
+          data={list}
+          height={
+            containerHeight && containerHeight > wrapPadding
+              ? containerHeight - wrapPadding
+              : containerHeight
+          }
+          itemHeight={itemHeight + paddingY}
+          itemKey={itemKey || "id"}
+        >
+          {(item: any, index: number) => (
+            <div
+              className="p-0"
+              key={
+                itemKey && item.length
+                  ? `virtual-row-${item[0][itemKey]}`
+                  : Object.prototype.toString.call(item) === "[object String]"
+                    ? JSON.stringify(item)
+                    : index
+              }
+              onClick={() => {
+                rowClick(item);
+              }}
+            >
+              {React.Children.map(children, (child) => {
+                if (!React.isValidElement(child)) {
+                  return null;
+                }
+                return React.cloneElement(child, {
+                  ...child.props,
+                  key: `item_${index}`,
+                  item
+                });
+              })}
+            </div>
+          )}
+        </VirtualList>
+      ) : null}
+    </>
+  );
+};
+
+export default VirtualWrap;

package/src/modules/sensitiveId/index.tsx

@@ -0,0 +1,253 @@
+import { useRef, useState, useEffect } from "react";
+import { Dropdown, Flex, Input, Spin, message } from "antd";
+import { CirclePlus, Search, ArrowLeft, CircleAlert } from 'lucide-react';
+import { CustomComponents } from '@mxmweb/xviewer';
+import { Button, defaultTheme, type Styles } from '@mxmweb/zui';
+import AutoTag from "./AutoTag";
+import UploadModal from "./UploadModal";
+import AxiosInstance from './server';
+import "../../style.css"
+
+interface SensitiveDetailProps {
+  url?: string;
+  token?: string;
+  role?: string;
+  id: string | number;
+  CustomComponents?: CustomComponents;
+  styles?: Styles;
+  eventsEmit?: (eventName: string, data?: any) => void;
+}
+
+
+const SensitiveDetail = ({
+  url, token, role, styles, CustomComponents, id, eventsEmit
+}: SensitiveDetailProps) => {
+
+
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [fuzzyNameOrId, setFuzzyNameOrId] = useState("");
+  const [tags, setTags]: any = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [detailData, setDetailData]: any = useState({});
+  const [filter, setFilter] = useState("");
+
+  const tagsWrapRef = useRef(null);
+  const { getLibraryListById, updateLibrary, downloadTemplate, UploadFile } = AxiosInstance({ url, token, role });
+
+  useEffect(() => {
+    if (id) {
+      fetchDetail();
+    }
+
+  }, [id]);
+
+  const fetchDetail = async () => {
+    try {
+      setLoading(true);
+      const res = await getLibraryListById({ id });
+      setLoading(false);
+      if (res) {
+        setTags(res.words || []);
+        setDetailData(res);
+      }
+    } catch (e) {
+      setLoading(false);
+    }
+  };
+
+
+  const handleDownload = async (fileType: "csv" | "text") => {
+    try {
+      const res = await downloadTemplate(fileType)
+      if (res) {
+        const href = URL.createObjectURL(res);
+        const box = document.createElement("a");
+        box.href = href;
+        box.download = `模板文件.${fileType}`;
+        box.click();
+      }
+    } catch (e) {
+      console.log("报错下载文件", e);
+    }
+  };
+
+  const editSensitiveWords = async () => {
+    if (!id) {
+      return message.warning("缺少敏感词库ID!");
+    }
+    try {
+      setLoading(true);
+      const res = await updateLibrary({
+        ...detailData,
+        words: tags
+      });
+      setLoading(false);
+      if (res) {
+        message.success(`编辑敏感词成功!`);
+        eventsEmit && eventsEmit("go_back");;
+      } else {
+        message.error("修改敏感词失败!");
+      }
+    } catch (error) {
+      setLoading(false);
+      message.error("修改敏感词失败!");
+    }
+  };
+
+  // 事件分流函数，先处理核心层UI/动画，再决定是否向上透传
+  async function handleEventsEmit(name: string, data?: any, appFn?: any) {
+    console.log('[adopter] mergedEventsEmit', name, data, appFn);
+    // 1. 先处理核心层UI/动画/数据
+    switch (name) {
+      case "search_name":
+        const inputElement = data.target as HTMLInputElement;
+        setFuzzyNameOrId(inputElement.value.trim());
+        break
+      case "search_key_down":
+        if (data.key === "Enter") {
+          setFilter(fuzzyNameOrId);
+        }
+        break
+      case "click_Search":
+        setFilter(fuzzyNameOrId);
+        break
+      case "update":
+        await editSensitiveWords();
+        break;
+      case "show_upload_modal":
+        setShowUploadModal(true);
+        break;
+      case "uploaded":
+        const res = await UploadFile(id, data)
+        if (res) {
+          setShowUploadModal(false)
+        }
+        break
+
+      default:
+        // 2. 透传到业务层（如有需要）
+        if (eventsEmit && typeof eventsEmit === 'function') {
+          eventsEmit(name, data);
+        }
+        break;
+    }
+  }
+
+
+  return (
+    <>
+      <div className="w-full h-full px-[16px] py-[16px]">
+        <div className=" w-full flex flex-row items-center pt-[4px] pb-[20px]">
+          <ArrowLeft onClick={() => handleEventsEmit("go_back")} color="#5A8DF5" />
+          <div className="ml-[20px] text-[16px] text-[#1D2129] bold truncate w-[300px]">
+            {detailData?.name}
+          </div>
+        </div>
+        <div className="px-[20px] pt-[20px] h-[calc(100%-77px)] rounded-[8px] bg-white">
+          <Flex justify="space-between">
+            <Flex>
+              <Button
+                mode="primary"
+                icon={<CirclePlus size={14} />}
+                label=" 导入"
+                onClick={() => {
+                  handleEventsEmit("show_upload_modal");
+                }}
+              />
+
+              <div className="ml-[16px] text-[12px] text-[#999] flex items-center">
+                <CircleAlert size={14} />
+                <div className="ml-[4px]">敏感词最多可输入16个字符</div>
+              </div>
+            </Flex>
+            <Input
+              value={fuzzyNameOrId}
+              placeholder="请输入内容"
+              style={{ width: "240px" }}
+              suffix={
+                <Search
+                  color="#999"
+                  size={14}
+                  onClick={() => handleEventsEmit("click_Search")}
+                />
+              }
+              onChange={(e) => handleEventsEmit("search_name", e)}
+              onKeyDown={(e) => handleEventsEmit("search_key_down", e)}
+            />
+          </Flex>
+          <div
+            ref={tagsWrapRef}
+            className="overflow-hidden border h-[calc(100%-120px)] border-solid border-[#D9D9D9] py-4 pl-4 pr-1 bg-[#F5F5F5] mt-4 rounded-lg"
+          >
+            <AutoTag
+              wrapRef={tagsWrapRef}
+              tags={tags}
+              setTags={setTags}
+              fuzzyNameOrId={filter}
+            />
+          </div>
+          <div className="h-[72px] flex items-center justify-end gap-3">
+            <Button
+              label="取消"
+              onClick={() => handleEventsEmit("go_back")}
+            />
+            <Button
+              mode="primary"
+              label="保存"
+              onClick={() => {
+                handleEventsEmit("update");
+              }}
+            />
+
+          </div>
+        </div>
+        {loading && (
+          <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center bg-[rgba(255,255,255,.3)]">
+            <Spin size="large" spinning={loading}></Spin>
+          </div>
+        )}
+      </div>
+      <UploadModal
+        isShowCreateModal={showUploadModal}
+        closeModal={setShowUploadModal}
+        uploadEvents={handleEventsEmit}
+        multiple={false}
+      // url={`/sensitive/word/${id}/import`}
+      >
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: "csv",
+                label: "csv"
+              },
+              {
+                key: "txt",
+                label: "txt"
+              }
+            ]
+          }}
+          dropdownRender={(menu) => (
+            <div
+              onClick={(e: any) => {
+                e.stopPropagation();
+                handleDownload(e.target.innerText)
+              }}
+            >
+              {menu}
+            </div>
+          )}
+          placement="bottom"
+        >
+          <Button
+            className="border-[#EBEBEB] text-primary-color bg-white"
+          >
+            下载模板
+          </Button>
+        </Dropdown>
+      </UploadModal>
+    </>
+  );
+};
+
+export default SensitiveDetail;

package/src/modules/sensitiveId/server.ts

@@ -0,0 +1,142 @@
+import { message } from 'antd';
+import axios from 'axios';
+const specialErrorCodes = ['10014'];
+
+type IDataSourceType = 'DataTable' | 'DirectDB';
+
+interface SensitiveApiProps {
+  url?: string;
+  token?: string;
+  role?: string;
+}
+const AxiosInstance = ({ url, token, role }: SensitiveApiProps) => {
+  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 || '请求出错，请稍后再试');
+      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 || '请求出错，请稍后再试');
+        // location.pathname = '/login';
+      }
+      if (error?.response?.status === 401) {
+        console.log('Error url:', error?.request?.responseURL);
+        message.error((error?.response?.data || {}).errorMsg || '没有足够权限');
+        //window.location.pathname = "/login";
+      }
+      console.log('Error occurs', error);
+      if ('未设置默认配置！' != (error?.response?.data || {}).errorMsg) {
+        message.error((error?.response?.data || {}).errorMsg || '请求出错，请稍后再试');
+      }
+    }
+  );
+
+  const getLibraryListById = async (params: any) => {
+    try {
+      const res: any = await axios$.get(`/library/${params.id}`);
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log("e", e);
+      return false;
+    }
+  };
+
+  const updateLibrary = async (params: any) => {
+    try {
+      const res: any = await axios$.put(`/library/${params.id}`, params);
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log("e", e);
+      return false;
+    }
+  };
+
+  const downloadTemplate = async (type: "csv" | "text") => {
+    try {
+      const res: any = await axios$.get(`/word/downloadTemplate?fileType=${type}`, {
+        responseType: "blob",
+        headers: {
+          Authorization: token
+        }
+      });
+      if(res) return res
+      return false;
+    } catch (e) {
+      console.log("e", e);
+      return false;
+    }
+  }
+
+  const UploadFile = async (id: string| number, formData: FormData) => {
+    try {
+      const res: any = await axios$.put(`/word/${id}/import`, formData, {
+        headers: {
+          Authorization: token || ""
+        }
+      });
+      if (res.success) return res.success
+      return false;
+    } catch (e) {
+      console.log("e", e);
+      return false;
+    }
+  }
+  return {
+    getLibraryListById,
+    updateLibrary,
+    downloadTemplate,
+    UploadFile
+  };
+};
+
+export default AxiosInstance;