🐛-兼容360浏览器；antd封装 上下文 轻提示

package-lock.json

@@ -8,6 +8,7 @@
       "name": "demo",
       "version": "0.1.0",
       "dependencies": {
+        "@ant-design/cssinjs": "^1.5.6",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/cssinjs": "^1.5.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.tsx

@@ -11,6 +11,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "./store";
 import UpAsyncLoding from "./components/UpAsyncLoding";
 import VideoLookDom from "./components/VideoLookDom";
+import MessageCom from "./components/Message";
 const Layout = React.lazy(() => import("./pages/Layout"));
 const Login = React.lazy(() => import("./pages/Login"));
 
@@ -57,6 +58,9 @@ export default function App() {
 
       {/* 点击预览视频组件 */}
       <VideoLookDom />
+
+      {/* antd 轻提示 ---兼容360浏览器 */}
+      <MessageCom />
     </>
   );
 }

src/assets/styles/base.css

@@ -3,182 +3,143 @@
   padding: 0;
   box-sizing: border-box;
 }
-
 html {
   height: 100%;
   font-size: 14px;
   user-select: none;
 }
-
 body {
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
   color: #7e8293;
 }
-
 a {
   text-decoration: none;
   color: #7e8293;
   outline: none;
 }
-
 i {
   font-style: normal;
 }
-
 img {
   max-width: 100%;
   max-height: 100%;
   vertical-align: middle;
+  object-fit: cover;
 }
-
 ul {
   list-style: none;
 }
-
-#root {
-  width: 100vw;
-  height: 100vh;
-  min-width: 1600px;
-  min-height: 900px;
-  overflow-y: auto;
-
-}
-
 body {
   overflow-y: overlay;
 }
-
 /* 文本域取消下拉 */
 textarea {
   resize: none !important;
 }
-
 /* 主题色 */
 :root {
-  --themeColor: #b34831
+  --themeColor: #b34831;
 }
-
 a {
   color: var(--themeColor);
 }
-
-
-/* 普通按钮的颜色 */
-.ant-btn-text {
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+/* 兼容360浏览器的下拉框 */
+.ant-select-selector {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow-y: auto;
+  /* 普通按钮的颜色 */
+  /* 按钮的危险颜色 */
+  /* antd分页器样式 */
+  /* 表格的图片居中 */
+  /* antd图片预览组件 */
+  /* antd表格居中 */
+}
+#root .ant-btn-text {
   color: #409eff;
 }
-
-/* 按钮的危险颜色 */
-.ant-btn-text.ant-btn-dangerous {
+#root .ant-btn-text.ant-btn-dangerous {
   color: var(--themeColor);
 }
-
-/* antd分页器样式 */
-.ant-pagination .ant-pagination-item {
+#root .ant-pagination .ant-pagination-item {
   border-radius: 50%;
   border: 1px solid #999;
   background-color: transparent !important;
 }
-
-.ant-pagination .ant-pagination-item-active {
+#root .ant-pagination .ant-pagination-item-active {
   background-color: var(--themeColor) !important;
 }
-
-
-.ant-pagination .ant-pagination-item-active a {
+#root .ant-pagination .ant-pagination-item-active a {
   color: #fff !important;
 }
-
-.ant-pagination .ant-pagination-item:hover {
+#root .ant-pagination .ant-pagination-item:hover {
   background-color: var(--themeColor) !important;
 }
-
-.ant-pagination .ant-pagination-item:hover a {
+#root .ant-pagination .ant-pagination-item:hover a {
   color: #fff !important;
 }
-
-.ant-pagination-prev {
+#root .ant-pagination-prev {
   border-radius: 50% !important;
   border: 1px solid #999;
 }
-
-.ant-pagination-prev:hover {
+#root .ant-pagination-prev:hover {
   background-color: var(--themeColor);
 }
-
-.ant-pagination-prev:hover button {
+#root .ant-pagination-prev:hover button {
   color: #fff;
 }
-
-
-
-.ant-pagination-next {
+#root .ant-pagination-next {
   border-radius: 50% !important;
   border: 1px solid #999;
 }
-
-
-.ant-pagination-next:hover {
+#root .ant-pagination-next:hover {
   background-color: var(--themeColor);
 }
-
-.ant-pagination-next:hover button {
+#root .ant-pagination-next:hover button {
   color: #fff;
 }
-
-.ant-pagination-disabled {
+#root .ant-pagination-disabled {
   border: 1px solid #ccc;
 }
-
-.ant-pagination-disabled:hover {
+#root .ant-pagination-disabled:hover {
   background-color: transparent;
 }
-
-img {
-  object-fit: cover;
-}
-
-/* 表格的图片居中 */
-.tableImgAuto {
+#root .tableImgAuto {
   display: flex;
   justify-content: center;
 }
-
-[hidden] {
-  display: none !important;
-}
-
-
-/* 找不到页面 */
-.noFindPage {
-  opacity: 0;
-  transition: opacity .5s;
-}
-
-/* antd图片预览组件 */
-.ant-image {
+#root .ant-image {
   display: none;
 }
-
-/* antd表格居中 */
-
-.ant-table-cell {
+#root .ant-table-cell {
   text-align: center !important;
 }
-
+[hidden] {
+  display: none !important;
+}
 /* 页面的顶部title */
 .pageTitlt {
   font-size: 20px;
   font-weight: 700;
   color: var(--themeColor);
 }
-
-
 #upInput {
   display: none;
 }
-
 #upInput2 {
   display: none;
-}
+}

src/assets/styles/base.less

@@ -0,0 +1,196 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  font-size: 14px;
+  user-select: none;
+}
+
+body {
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  height: 100%;
+  color: #7e8293;
+}
+
+a {
+  text-decoration: none;
+  color: #7e8293;
+  outline: none;
+}
+
+i {
+  font-style: normal;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  object-fit: cover;
+}
+
+ul {
+  list-style: none;
+}
+
+body {
+  overflow-y: overlay;
+}
+
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+}
+
+/* 主题色 */
+:root {
+  --themeColor: #b34831;
+}
+
+a {
+  color: var(--themeColor);
+}
+
+
+
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity .5s;
+}
+
+
+/* 兼容360浏览器的下拉框 */
+.ant-select-selector {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+// 重置antd样式
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow-y: auto;
+
+  /* 普通按钮的颜色 */
+  .ant-btn-text {
+    color: #409eff;
+  }
+
+  /* 按钮的危险颜色 */
+  .ant-btn-text.ant-btn-dangerous {
+    color: var(--themeColor);
+  }
+
+  /* antd分页器样式 */
+  .ant-pagination .ant-pagination-item {
+    border-radius: 50%;
+    border: 1px solid #999;
+    background-color: transparent !important;
+  }
+
+  .ant-pagination .ant-pagination-item-active {
+    background-color: var(--themeColor) !important;
+  }
+
+
+  .ant-pagination .ant-pagination-item-active a {
+    color: #fff !important;
+  }
+
+  .ant-pagination .ant-pagination-item:hover {
+    background-color: var(--themeColor) !important;
+  }
+
+  .ant-pagination .ant-pagination-item:hover a {
+    color: #fff !important;
+  }
+
+  .ant-pagination-prev {
+    border-radius: 50% !important;
+    border: 1px solid #999;
+  }
+
+  .ant-pagination-prev:hover {
+    background-color: var(--themeColor);
+  }
+
+  .ant-pagination-prev:hover button {
+    color: #fff;
+  }
+
+
+
+  .ant-pagination-next {
+    border-radius: 50% !important;
+    border: 1px solid #999;
+  }
+
+
+  .ant-pagination-next:hover {
+    background-color: var(--themeColor);
+  }
+
+  .ant-pagination-next:hover button {
+    color: #fff;
+  }
+
+  .ant-pagination-disabled {
+    border: 1px solid #ccc;
+  }
+
+  .ant-pagination-disabled:hover {
+    background-color: transparent;
+  }
+
+
+  /* 表格的图片居中 */
+  .tableImgAuto {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* antd图片预览组件 */
+  .ant-image {
+    display: none;
+  }
+
+  /* antd表格居中 */
+
+  .ant-table-cell {
+    text-align: center !important;
+  }
+}
+
+
+
+[hidden] {
+  display: none !important;
+}
+
+
+
+
+/* 页面的顶部title */
+.pageTitlt {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--themeColor);
+}
+
+
+#upInput {
+  display: none;
+}
+
+#upInput2 {
+  display: none;
+}

src/components/AuthRoute/index.tsx

@@ -1,5 +1,5 @@
 import { hasToken } from "@//utils/storage";
-import { message } from "antd";
+import { MessageFu } from "@/utils/message";
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
 
@@ -17,7 +17,7 @@ export default function AuthRoute({ path, component: Com, ...rest }: AtahType) {
       render={() => {
         if (hasToken()) return <Com />;
         else {
-          message.warning("登录失效!");
+          MessageFu.warning("登录失效!");
           return (
             <Redirect
               to={{

src/components/Message/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import { message } from "antd";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+
+function MessageCom() {
+  // 从仓库中获取 antd 轻提示信息
+  const messageReducerInfo = useSelector(
+    (state: RootState) => state.loginStore.message
+  );
+
+  const [messageApi, contextHolder] = message.useMessage();
+
+  useEffect(() => {
+    if (messageReducerInfo.txt) {
+      messageApi.open({
+        type: messageReducerInfo.type,
+        content: messageReducerInfo.txt,
+        duration: messageReducerInfo.duration,
+      });
+    }
+  }, [messageApi, messageReducerInfo]);
+
+  return <>{contextHolder}</>;
+}
+
+const MemoMessage = React.memo(MessageCom);
+
+export default MemoMessage;

src/index.tsx

@@ -7,7 +7,13 @@ import { Provider } from "react-redux";
 import { createRoot } from "react-dom/client";
 
 import { ConfigProvider } from "antd";
-// import dayjs from "dayjs";
+
+// 兼容360浏览器
+import {
+  StyleProvider,
+  legacyLogicalPropertiesTransformer,
+} from "@ant-design/cssinjs";
+
 import "dayjs/locale/zh-cn";
 import locale from "antd/locale/zh_CN";
 
@@ -24,7 +30,12 @@ root.render(
     }}
   >
     <Provider store={store}>
-      <App />
+      <StyleProvider
+        hashPriority="high"
+        transformers={[legacyLogicalPropertiesTransformer]}
+      >
+        <App />
+      </StyleProvider>
     </Provider>
   </ConfigProvider>
 );

src/pages/Exhibit/Edit.tsx

@@ -5,12 +5,13 @@ import {
   exhibitionSaveAPI,
 } from "@/store/action/exhibit";
 import { ExhibitTableType } from "@/types/api/exhibit";
-import { Button, Form, Input, message, Modal, Popconfirm } from "antd";
+import { Button, Form, Input, Modal, Popconfirm } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { PlusOutlined, CloseCircleOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import "./index.css";
+import { MessageFu } from "@/utils/message";
 
 type Props = {
   id: number;
@@ -32,7 +33,7 @@ function ExhibitEdit({ id, closeFu, upList }: Props) {
     // 回显表单信息
     FormBoxRef.current.setFieldsValue(res.data);
     // 回显展馆封面
-    setCover(res.data.thumb)
+    setCover(res.data.thumb);
   }, []);
 
   useEffect(() => {
@@ -54,12 +55,12 @@ function ExhibitEdit({ id, closeFu, upList }: Props) {
       const type = ["image/jpeg", "image/png"];
       if (!type.includes(filesInfo.type)) {
         e.target.value = "";
-        return message.warning("只支持jpg、png格式!");
+        return MessageFu.warning("只支持jpg、png格式!");
       }
       // 校验大小
       if (filesInfo.size > 20 * 1024 * 1024) {
         e.target.value = "";
-        return message.warning("最大支持20M!");
+        return MessageFu.warning("最大支持20M!");
       }
       // 创建FormData对象
       const fd = new FormData();
@@ -70,7 +71,7 @@ function ExhibitEdit({ id, closeFu, upList }: Props) {
 
       const res: any = await exhibitUploadAPI(fd);
       if (res.code === 0) {
-        message.success("上传成功!");
+        MessageFu.success("上传成功!");
         setCover(res.data.filePath);
       }
       UpAsyncLodingDom.style.opacity = 0;
@@ -81,7 +82,7 @@ function ExhibitEdit({ id, closeFu, upList }: Props) {
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
     setCoverCheck(true);
-    // return message.warning("有表单不符号规则!");
+    // return MessageFu.warning("有表单不符号规则!");
   }, []);
 
   // 通过校验-点击确定
@@ -100,7 +101,7 @@ function ExhibitEdit({ id, closeFu, upList }: Props) {
       const res = await exhibitionSaveAPI(obj);
 
       if (res.code === 0) {
-        message.success("编辑成功!");
+        MessageFu.success("编辑成功!");
         // 更新列表
         upList();
         // 关闭弹窗

src/pages/Goods/index.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/store/action/goods";
 import { GoodsTableSearch } from "@/types";
 import { typeChangeObj } from "@/utils/changeData";
+import { MessageFu } from "@/utils/message";
 import {
   Input,
   Select,
@@ -16,7 +17,6 @@ import {
   Table,
   Switch,
   Popconfirm,
-  message,
 } from "antd";
 import React, {
   useCallback,
@@ -192,7 +192,7 @@ function Goods() {
     async (id: number) => {
       const res: any = await goodsRemoveAPI(id);
       if (res.code === 0) {
-        message.success("删除成功!");
+        MessageFu.success("删除成功!");
         getList();
       }
     },

src/pages/GoodsAdd/index.tsx

@@ -1,6 +1,6 @@
 import { RootState } from "@/store";
 import { GoodsTableSearch } from "@/types";
-import { Button, Form, Input, message, Popconfirm, Radio, Select } from "antd";
+import { Button, Form, Input, Popconfirm, Radio, Select } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
@@ -20,6 +20,7 @@ import {
 } from "@/store/action/goods";
 import { baseURL } from "@/utils/http";
 import { ExhibitTableType } from "@/types/api/exhibit";
+import { MessageFu } from "@/utils/message";
 
 // 上传附件的进度条
 const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
@@ -67,7 +68,7 @@ function GoodsAdd({
 
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
-    // return message.warning("有表单不符号规则!");
+    // return MessageFu.warning("有表单不符号规则!");
   }, []);
 
   useEffect(() => {
@@ -158,15 +159,15 @@ function GoodsAdd({
   // 通过校验点击确定
   const onFinish = useCallback(
     async (values: GoodsTableSearch) => {
-      if (cover === "") return message.warning("请上传封面图!");
+      if (cover === "") return MessageFu.warning("请上传封面图!");
       if (type === "model" && modelFile.filePath === "")
-        return message.warning("请输上传模型附件!");
+        return MessageFu.warning("请输上传模型附件!");
       if (type === "img" && imgFile.length === 0)
-        return message.warning("请上传图片附件!");
+        return MessageFu.warning("请上传图片附件!");
       if (type === "audio" && audioFile.filePath === "")
-        return message.warning("请上传音频附件!");
+        return MessageFu.warning("请上传音频附件!");
       if (type === "video" && videoFile.filePath === "")
-        return message.warning("请上传视频附件!");
+        return MessageFu.warning("请上传视频附件!");
 
       let fileIds = "";
 
@@ -187,7 +188,7 @@ function GoodsAdd({
       const res: any = await goodsSaveAPI(obj);
 
       if (res.code === 0) {
-        message.success(id ? "编辑成功!" : "新增成功!");
+        MessageFu.success(id ? "编辑成功!" : "新增成功!");
         if (id) upTableList();
         else addTableList();
 
@@ -220,12 +221,12 @@ function GoodsAdd({
       const type = ["image/jpeg", "image/png"];
       if (!type.includes(filesInfo.type)) {
         e.target.value = "";
-        return message.warning("只支持jpg、png格式!");
+        return MessageFu.warning("只支持jpg、png格式!");
       }
       // 校验大小
       if (filesInfo.size > 20 * 1024 * 1024) {
         e.target.value = "";
-        return message.warning("最大支持20M!");
+        return MessageFu.warning("最大支持20M!");
       }
       // 创建FormData对象
       const fd = new FormData();
@@ -238,7 +239,7 @@ function GoodsAdd({
 
       const res: any = await goodsUploadAPI(fd);
       if (res.code === 0) {
-        message.success("上传成功!");
+        MessageFu.success("上传成功!");
         setCover(res.data.filePath);
       }
       UpAsyncLodingDom.style.opacity = 0;
@@ -279,19 +280,19 @@ function GoodsAdd({
         if (type !== "model") {
           if (!anType.includes(filesInfo.type)) {
             e.target.value = "";
-            return message.warning(anTit1);
+            return MessageFu.warning(anTit1);
           }
         } else {
           if (!filesInfo.name.includes(".4dage")) {
             e.target.value = "";
-            return message.warning(anTit1);
+            return MessageFu.warning(anTit1);
           }
         }
 
         // 校验大小
         if (filesInfo.size > anSize) {
           e.target.value = "";
-          return message.warning(anTit2);
+          return MessageFu.warning(anTit2);
         }
         // 创建FormData对象
         const fd = new FormData();
@@ -303,7 +304,7 @@ function GoodsAdd({
 
         const res: any = await goodsUploadAPI(fd);
         if (res.code === 0) {
-          message.success("上传成功!");
+          MessageFu.success("上传成功!");
           if (type === "img") setImgFile([res.data, ...imgFile]);
           else if (type === "audio") setAudioFile(res.data);
           else if (type === "video") setVideoFile(res.data);

src/pages/Layout/index.tsx

@@ -13,7 +13,7 @@ import AuthRoute from "@/components/AuthRoute";
 import NotFound from "@/components/NotFound";
 import classNames from "classnames";
 import history from "@/utils/history";
-import { Button, Form, Input, message, Modal, Popconfirm } from "antd";
+import { Button, Form, Input, Modal, Popconfirm } from "antd";
 import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
 import { getDictListAPI, passWordEditAPI } from "@/store/action/login";
@@ -27,6 +27,7 @@ import inco1Ac from "@/assets/img/inco1Ac.png";
 import inco2Ac from "@/assets/img/inco2Ac.png";
 import inco3Ac from "@/assets/img/inco3Ac.png";
 import inco4Ac from "@/assets/img/inco4Ac.png";
+import { MessageFu } from "@/utils/message";
 
 function Layout() {
   const dispatch = useDispatch();
@@ -86,8 +87,7 @@ function Layout() {
   useEffect(() => {
     const userInfo = getTokenInfo().user;
 
-    console.log(123,userInfo);
-    
+    console.log(123, userInfo);
 
     if (userInfo.isAdmin === 1) {
       listTemp[0].done = listTemp[1].done = true;
@@ -158,14 +158,14 @@ function Layout() {
   const onFinish = async (values: any) => {
     // 通过校验之后发送请求
     if (values.oldPassword === values.newPassword)
-      return message.warning("新旧密码不能相同!");
+      return MessageFu.warning("新旧密码不能相同!");
     const obj = {
       oldPassword: encodeStr(Base64.encode(values.oldPassword)),
       newPassword: encodeStr(Base64.encode(values.newPassword)),
     };
     const res: any = await passWordEditAPI(obj);
     if (res.code === 0) {
-      message.success("修改成功!");
+      MessageFu.success("修改成功!");
       loginExit();
     }
   };

src/pages/Login/index.tsx

@@ -1,6 +1,6 @@
 import styles from "./index.module.scss";
 
-import { Input, Button, message } from "antd";
+import { Input, Button } from "antd";
 import { UserOutlined, LockOutlined } from "@ant-design/icons";
 import { useEffect, useState } from "react";
 import { Base64 } from "js-base64";
@@ -9,6 +9,7 @@ import { userLoginAPI } from "@/store/action/login";
 import { setTokenInfo } from "@/utils/storage";
 import history from "@/utils/history";
 import { useDispatch } from "react-redux";
+import { MessageFu } from "@/utils/message";
 
 export default function Login() {
   const dispatch = useDispatch();
@@ -29,15 +30,15 @@ export default function Login() {
   // 点击登录
   const loginClickFu = async () => {
     // 非空判断
-    if (userName === "") return message.warning("请输入用户名!");
-    else if (passWord === "") return message.warning("请输入密码!");
+    if (userName === "") return MessageFu.warning("请输入用户名!");
+    else if (passWord === "") return MessageFu.warning("请输入密码!");
     const obj = {
       userName,
       passWord: encodeStr(Base64.encode(passWord)),
     };
     const res: any = await userLoginAPI(obj);
     if (res.code === 0) {
-      message.success("登录成功");
+      MessageFu.success("登录成功");
       // 用户信息存到本地
       setTokenInfo(res.data);
       history.push("/");
@@ -47,7 +48,11 @@ export default function Login() {
   return (
     <div className={styles.Login}>
       <div className="loginTop">
-        <h3>中医药文化宣传教育基地<br/>线上展馆管理后台</h3>
+        <h3>
+          中医药文化宣传教育基地
+          <br />
+          线上展馆管理后台
+        </h3>
       </div>
       <div className="main">
         <div className="mainLeft">

src/pages/User/UserAdd/index.tsx

@@ -1,12 +1,12 @@
 import { getUserInfoByIdAPI, userSaveAPI } from "@/store/action/user";
 import { SaveUserType } from "@/types";
 import { ExhibitTableType } from "@/types/api/exhibit";
+import { MessageFu } from "@/utils/message";
 import {
   Button,
   Checkbox,
   Form,
   Input,
-  message,
   Modal,
   Popconfirm,
 } from "antd";
@@ -70,7 +70,7 @@ function UserAdd({
 
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
-    // return message.warning("有表单不符号规则!");
+    // return MessageFu.warning("有表单不符号规则!");
   }, []);
 
   // 设置表单初始数据（区分编辑和新增）
@@ -131,9 +131,9 @@ function UserAdd({
   const onFinish = useCallback(
     async (values: any) => {
       if (pagePower.every((v) => !v.authority))
-        return message.warning("至少勾选一个功能权限!");
+        return MessageFu.warning("至少勾选一个功能权限!");
       if (dataPower.every((v) => !v.authority))
-        return message.warning("至少勾选一个数据权限!");
+        return MessageFu.warning("至少勾选一个数据权限!");
 
       const obj: SaveUserType = {
         ...values,
@@ -151,7 +151,7 @@ function UserAdd({
       const res: any = await userSaveAPI(obj);
 
       if (res.code === 0) {
-        message.success(id ? "编辑成功!" : "新增成功!");
+        MessageFu.success(id ? "编辑成功!" : "新增成功!");
         if (id) upTableList();
         else addTableList();
 

src/pages/User/index.module.scss

@@ -24,7 +24,7 @@
 
     .tableBox {
       margin-top: 15px;
-      height: calc(100% - 110px);
+      height: calc(100% - 128px);
       background-color: #fff;
       border-radius: 10px;
     }

src/pages/User/index.tsx

@@ -7,15 +7,8 @@ import {
   userRemoveAPI,
 } from "@/store/action/user";
 import { UserTableAPIType, UserTableListType } from "@/types";
-import {
-  Input,
-  DatePicker,
-  Button,
-  Table,
-  Switch,
-  Popconfirm,
-  message,
-} from "antd";
+import { MessageFu } from "@/utils/message";
+import { Input, DatePicker, Button, Table, Switch, Popconfirm } from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -42,7 +35,6 @@ function User() {
     searchKey: "",
   });
 
-
   // 进来页面也要获取展馆的表格信息，用于数据权限的选择
   useEffect(() => {
     dispatch(getExhibitListAPI());
@@ -54,7 +46,6 @@ function User() {
     (state: RootState) => state.ExhibitReducer.list
   );
 
-
   // 封装发送请求的函数
 
   const getList = useCallback(async () => {
@@ -159,7 +150,7 @@ function User() {
     async (id: number) => {
       const res: any = await userRemoveAPI(id);
       if (res.code === 0) {
-        message.success("删除成功!");
+        MessageFu.success("删除成功!");
         getList();
       }
     },
@@ -169,7 +160,7 @@ function User() {
   // 点击重置密码
   const resetPassFu = useCallback(async (id: number) => {
     const res: any = await userPassResetAPI(id);
-    if (res.code === 0) message.success("重置成功!");
+    if (res.code === 0) MessageFu.success("重置成功!");
   }, []);
 
   // 0------------点击新增或者编辑出来的页面
@@ -179,7 +170,7 @@ function User() {
   const openEditPageFu = useCallback(
     (id: number) => {
       if (id === 0 && tableInfo.list.length >= 30)
-        return message.warning("最多支持30个用户！");
+        return MessageFu.warning("最多支持30个用户！");
 
       editId.current = id;
       setEditPageShow(true);
@@ -314,7 +305,7 @@ function User() {
       {/* 表格主体 */}
       <div className="tableBox">
         <Table
-          scroll={{ y: 575 }}
+          scroll={{ y: 555 }}
           dataSource={tableInfo.list}
           columns={columns}
           rowKey="id"

src/store/reducer/login.ts

@@ -1,3 +1,4 @@
+import { MessageType } from "@/utils/message";
 
 // 初始化状态
 const initState = {
@@ -17,7 +18,12 @@ const initState = {
     level: [],
     source: [],
   } as any,
-
+  // antd轻提示(兼容360浏览器)
+  message: {
+    txt: "",
+    type: "info",
+    duration: 3,
+  } as MessageType,
 };
 
 // 定义 action 类型
@@ -26,6 +32,7 @@ type LoginActionType =
   | { type: "login/asyncLoding"; payload: boolean }
   | { type: "login/lookVideo"; payload: string }
   | { type: "login/getDictList"; payload: any }
+  | { type: "login/message"; payload: MessageType };
 
 // 频道 reducer
 export default function loginReducer(
@@ -45,7 +52,9 @@ export default function loginReducer(
     // 所有的下拉框数据
     case "login/getDictList":
       return { ...state, dictList: action.payload };
-
+    // antd轻提示(兼容360浏览器)
+    case "login/message":
+      return { ...state, message: action.payload };
     default:
       return state;
   }

src/utils/http.ts

@@ -1,15 +1,15 @@
 import axios from "axios";
 import history from "./history";
 import { getTokenInfo, removeTokenInfo } from "./storage";
-import { message } from "antd";
 import store from "@/store";
+import { MessageFu } from "./message";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
   // process.env.NODE_ENV === "development"
   //   ? "http://192.168.20.55:8040/api/"
   //   : "";
-process.env.NODE_ENV === "development" ? "https://jszhongyi.4dage.com" : "";
+  process.env.NODE_ENV === "development" ? "https://jszhongyi.4dage.com" : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -62,14 +62,14 @@ http.interceptors.response.use(
       clearTimeout(timeId);
       timeId = window.setTimeout(() => {
         removeTokenInfo();
-        message.warning("登录失效!");
+        MessageFu.warning("登录失效!");
         history.push("/login");
       }, 200);
     } else if (response.data.code === 0) {
-      // message.success(response.data.msg);
+      // MessageFu.success(response.data.msg);
     } else if (response.data.code === 3014)
-      message.warning("用户名不存在或密码错误，请联系管理员!");
-    else message.warning(response.data.msg);
+      MessageFu.warning("用户名不存在或密码错误，请联系管理员!");
+    else MessageFu.warning(response.data.msg);
     return response.data;
   },
   async function (err) {
@@ -82,9 +82,9 @@ http.interceptors.response.use(
 
     // 如果因为网络原因，response没有，给提示消息
     if (!err.response) {
-      message.warning("网络繁忙，请稍后重试!");
+      MessageFu.warning("网络繁忙，请稍后重试!");
     } else {
-      message.warning("错误!");
+      MessageFu.warning("错误!");
     }
 
     // 响应错误也要取消 上传文件的进度条

src/utils/message.ts

@@ -0,0 +1,50 @@
+import store from "@/store";
+
+export type MessageType = {
+  txt: string;
+  type: "info" | "success" | "error" | "warning";
+  duration: number;
+};
+
+export const MessageFu = {
+  info: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "info",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+  success: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "success",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+  error: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "error",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+  warning: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "warning",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+};