🐛兼容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"));
 const H5Code = React.lazy(() => import("./pages/H5Code"));
@@ -59,6 +60,9 @@ export default function App() {
 
       {/* 点击预览视频组件 */}
       <VideoLookDom />
+
+      {/* antd 轻提示 ---兼容360浏览器 */}
+      <MessageCom />
     </>
   );
 }

src/assets/styles/base.css

@@ -3,170 +3,134 @@
   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: #333;
 }
-
 a {
   text-decoration: none;
   color: #333;
   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: #863326
+  --themeColor: #863326;
 }
-
 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: #2f489a;
 }
-
-/* 按钮的危险颜色 */
-.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 {
   background-color: #fff;
@@ -180,7 +144,6 @@ img {
   position: relative;
   color: #333;
 }
-
 .pageTitlt::before {
   content: '';
   position: absolute;
@@ -190,11 +153,9 @@ img {
   height: 24px;
   background-color: var(--themeColor);
 }
-
 #upInput {
   display: none;
 }
-
 #upInput2 {
   display: none;
 }

src/assets/styles/base.less

@@ -0,0 +1,214 @@
+* {
+  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: #333;
+}
+
+a {
+  text-decoration: none;
+  color: #333;
+  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: #863326;
+}
+
+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);
+}
+
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow-y: auto;
+
+  /* 普通按钮的颜色 */
+  .ant-btn-text {
+    color: #2f489a;
+  }
+
+  /* 按钮的危险颜色 */
+  .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 {
+  background-color: #fff;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  font-weight: 700;
+  padding-left: 30px;
+  border-radius: 10px;
+  position: relative;
+  color: #333;
+}
+
+.pageTitlt::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 18px;
+  width: 5px;
+  height: 24px;
+  background-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/Goods/index.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/store/action/goods";
 import { GoodsTableSearch } from "@/types";
 import { typeChangeObj } from "@/utils/changeData";
+import { MessageFu } from "@/utils/message";
 import {
   Input,
   Select,
@@ -15,7 +16,6 @@ import {
   Table,
   Switch,
   Popconfirm,
-  message,
 } from "antd";
 import React, {
   useCallback,
@@ -190,7 +190,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 {
@@ -18,6 +18,7 @@ import {
   goodsUploadAPI,
 } from "@/store/action/goods";
 import { baseURL } from "@/utils/http";
+import { MessageFu } from "@/utils/message";
 
 // 上传附件的进度条
 const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
@@ -61,7 +62,7 @@ function GoodsAdd({ id, closePage, upTableList, addTableList }: Props) {
 
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
-    // return message.warning("有表单不符号规则!");
+    // return MessageFu.warning("有表单不符号规则!");
   }, []);
 
   useEffect(() => {
@@ -104,15 +105,15 @@ function GoodsAdd({ id, closePage, upTableList, addTableList }: Props) {
   // 通过校验点击确定
   const onFinish = useCallback(
     async (values: GoodsTableSearch) => {
-      if (cover === "") return message.warning("请上传封面图!");
+      if (cover === "") return MessageFu.warning("请上传封面图!");
       if (type === "model" && modelSrc === "")
-        return message.warning("请输入模型的链接地址!");
+        return MessageFu.warning("请输入模型的链接地址!");
       if (type === "img" && imgFile.filePath === "")
-        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 fileArr = { fileName: "", filePath: "" };
 
@@ -133,7 +134,7 @@ function GoodsAdd({ id, closePage, upTableList, addTableList }: Props) {
       const res: any = await goodsSaveAPI(obj);
 
       if (res.code === 0) {
-        message.success(id ? "编辑成功!" : "新增成功!");
+        MessageFu.success(id ? "编辑成功!" : "新增成功!");
         if (id) upTableList();
         else addTableList();
 
@@ -166,12 +167,12 @@ function GoodsAdd({ id, closePage, upTableList, addTableList }: 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 > 10 * 1024 * 1024) {
         e.target.value = "";
-        return message.warning("最大支持10M!");
+        return MessageFu.warning("最大支持10M!");
       }
       // 创建FormData对象
       const fd = new FormData();
@@ -184,7 +185,7 @@ function GoodsAdd({ id, closePage, upTableList, addTableList }: Props) {
 
       const res: any = await goodsUploadAPI(fd);
       if (res.code === 0) {
-        message.success("上传成功!");
+        MessageFu.success("上传成功!");
         setCover(res.data.filePath);
       }
       UpAsyncLodingDom.style.opacity = 0;
@@ -219,12 +220,12 @@ function GoodsAdd({ id, closePage, upTableList, addTableList }: Props) {
         // 校验格式
         if (!anType.includes(filesInfo.type)) {
           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();
@@ -236,7 +237,7 @@ function GoodsAdd({ id, closePage, upTableList, addTableList }: Props) {
 
         const res: any = await goodsUploadAPI(fd);
         if (res.code === 0) {
-          message.success("上传成功!");
+          MessageFu.success("上传成功!");
           if (type === "img") setImgFile(res.data);
           else if (type === "audio") setAudioFile(res.data);
           else if (type === "video") setVideoFile(res.data);

src/pages/Hot/index.tsx

@@ -11,7 +11,7 @@ import { TooltipComponent, LegendComponent } from "echarts/components";
 
 import { PieChart } from "echarts/charts";
 import { LabelLayout } from "echarts/features";
-import { Button, Empty, message, Select, Tooltip } from "antd";
+import { Button, Empty, Select, Tooltip } from "antd";
 import ExportJsonExcel from "js-export-excel";
 import dayjs from "dayjs";
 import {
@@ -20,6 +20,7 @@ import {
   getHotWallAPI,
 } from "@/store/action/hot";
 import { HotGoodsLikeAPIType, HotWallAPIType } from "@/types";
+import { MessageFu } from "@/utils/message";
 
 echarts.use([
   GridComponent,
@@ -204,7 +205,7 @@ function Hot() {
 
   // 点击导出
   const deriveFu = useCallback(async () => {
-    if (likeData.length === 0) return message.warning("当前搜索条件没有数据!");
+    if (likeData.length === 0) return MessageFu.warning("当前搜索条件没有数据!");
     const name = dayjs(new Date()).format("YYYYMMDD");
 
     const option = {

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 inco3 from '@/assets/img/inco3.png'
 import inco4 from '@/assets/img/inco4.png'
 import inco5 from '@/assets/img/inco5.png'
 import inco6 from '@/assets/img/inco6.png'
+import { MessageFu } from "@/utils/message";
 
 function Layout() {
   const dispatch = useDispatch();
@@ -163,14 +164,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("/");

src/pages/Role/RoleAdd/index.tsx

@@ -1,10 +1,11 @@
 import { getRoleInfoByIdAPI, roleSaveAPI } from "@/store/action/role";
 
-import { Button, Checkbox, Input, message, Modal, Popconfirm } from "antd";
+import { Button, Checkbox, Input, Modal, Popconfirm } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
 import "./index.css";
 import { AddRoleType, PermissionsAPIType, RoleTableType } from "@/types";
+import { MessageFu } from "@/utils/message";
 const { TextArea } = Input;
 
 type Props = {
@@ -56,10 +57,10 @@ function RoleAdd({ id, closePage, upTableList, addTableList }: Props) {
 
   // 点击提交
   const btnOkFu = useCallback(async () => {
-    if (roleName === "") return message.warning("请输入角色名称!");
+    if (roleName === "") return MessageFu.warning("请输入角色名称!");
 
     if (list.every((v) => !v.authority))
-      return message.warning("至少勾选一个页面权限!");
+      return MessageFu.warning("至少勾选一个页面权限!");
 
     const obj: AddRoleType = {
       id: id ? id : null,
@@ -70,7 +71,7 @@ function RoleAdd({ id, closePage, upTableList, addTableList }: Props) {
     const res: any = await roleSaveAPI(obj);
 
     if (res.code === 0) {
-      message.success(id ? "编辑成功!" : "新增成功!");
+      MessageFu.success(id ? "编辑成功!" : "新增成功!");
       closePage();
       if (id) addTableList();
       else upTableList();

src/pages/Role/index.tsx

@@ -5,7 +5,8 @@ import {
   roleRemoveAPI,
 } from "@/store/action/role";
 import { RoleTableType } from "@/types";
-import { Button, Input, message, Popconfirm, Switch, Table } from "antd";
+import { MessageFu } from "@/utils/message";
+import { Button, Input, Popconfirm, Switch, Table } from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -80,7 +81,7 @@ function Role() {
     async (id: number) => {
       const res: any = await roleRemoveAPI(id);
       if (res.code === 0) {
-        message.success("删除成功!");
+        MessageFu.success("删除成功!");
         dispatch(getRoleListAPI(tableSelect));
       }
     },

src/pages/User/UserAdd/index.tsx

@@ -1,7 +1,8 @@
 import { RootState } from "@/store";
 import { getUserInfoByIdAPI, userSaveAPI } from "@/store/action/user";
 import { SaveUserType } from "@/types";
-import { Button, Form, Input, message, Modal, Popconfirm, Select } from "antd";
+import { MessageFu } from "@/utils/message";
+import { Button, Form, Input, Modal, Popconfirm, Select } from "antd";
 import React, { useCallback, useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import "./index.css";
@@ -18,14 +19,14 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
   const FormBoxRef = useRef<any>({});
 
   const getInfoInAPIFu = useCallback(async (id: number) => {
-    const res =await getUserInfoByIdAPI(id)
-    FormBoxRef.current.setFieldsValue(res.data)
-    console.log("是编辑，在这里发请求拿数据",res);
+    const res = await getUserInfoByIdAPI(id);
+    FormBoxRef.current.setFieldsValue(res.data);
+    console.log("是编辑，在这里发请求拿数据", res);
   }, []);
 
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
-    // return message.warning("有表单不符号规则!");
+    // return MessageFu.warning("有表单不符号规则!");
   }, []);
 
   useEffect(() => {
@@ -51,7 +52,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
       const res: any = await userSaveAPI(obj);
 
       if (res.code === 0) {
-        message.success(id ? "编辑成功!" : "新增成功!");
+        MessageFu.success(id ? "编辑成功!" : "新增成功!");
         if (id) upTableList();
         else addTableList();
 
@@ -87,7 +88,12 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
             rules={[{ required: true, message: "请输入账号名!" }]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
-            <Input disabled={id} maxLength={15} showCount placeholder="请输入内容" />
+            <Input
+              disabled={id}
+              maxLength={15}
+              showCount
+              placeholder="请输入内容"
+            />
           </Form.Item>
 
           <Form.Item

src/pages/User/index.tsx

@@ -7,6 +7,7 @@ import {
   userRemoveAPI,
 } from "@/store/action/user";
 import { UserTableAPIType, UserTableListType } from "@/types";
+import { MessageFu } from "@/utils/message";
 import {
   Input,
   DatePicker,
@@ -14,7 +15,6 @@ import {
   Table,
   Switch,
   Popconfirm,
-  message,
 } from "antd";
 import React, {
   useCallback,
@@ -166,7 +166,7 @@ function User() {
     async (id: number) => {
       const res: any = await userRemoveAPI(id);
       if (res.code === 0) {
-        message.success("删除成功!");
+        MessageFu.success("删除成功!");
         getList();
       }
     },
@@ -176,7 +176,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------------点击新增或者编辑出来的页面
@@ -186,7 +186,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);

src/pages/Wall/WallAdd/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, message, Modal, Popconfirm, Select } from "antd";
+import { Button, Input, Modal, Popconfirm, Select } from "antd";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   PlusOutlined,
@@ -15,6 +15,7 @@ import {
 } from "@/store/action/wall";
 import { WallUpSaveAPI } from "@/types";
 import { useDispatch } from "react-redux";
+import { MessageFu } from "@/utils/message";
 
 type Props = {
   id: number;
@@ -86,13 +87,13 @@ function WallAdd({ id, closeFu, upList }: Props) {
         // 校验格式
         if (!typeArr.includes(filesInfo.type)) {
           e.target.value = "";
-          return message.warning(tit1);
+          return MessageFu.warning(tit1);
         }
 
         // 校验大小
         if (filesInfo.size > fileSize) {
           e.target.value = "";
-          return message.warning(tit2);
+          return MessageFu.warning(tit2);
         }
 
         // 创建FormData对象
@@ -104,7 +105,7 @@ function WallAdd({ id, closeFu, upList }: Props) {
 
         const res: any = await wallUploadAPI(fd);
         if (res.code === 0) {
-          message.success("上传成功!");
+          MessageFu.success("上传成功!");
 
           // 上传的是图片
           if (type === "img") setCover(res.data);
@@ -119,13 +120,13 @@ function WallAdd({ id, closeFu, upList }: Props) {
 
   // 点击确定
   const btnOkFu = useCallback(async () => {
-    if (name === "") return message.warning("请输入名称!");
+    if (name === "") return MessageFu.warning("请输入名称!");
 
     if (
       (type === "img" && cover.fileName === "") ||
       (type === "video" && video.fileName === "")
     )
-      return message.warning("请上传附件!");
+      return MessageFu.warning("请上传附件!");
 
     const obj: WallUpSaveAPI = {
       fileName: type === "img" ? cover.fileName : video.fileName,
@@ -138,7 +139,7 @@ function WallAdd({ id, closeFu, upList }: Props) {
     const res: any = await wallUpSaveAPI(obj);
 
     if (res.code === 0) {
-      message.success(`${id ? "编辑" : "新增"}成功!`);
+      MessageFu.success(`${id ? "编辑" : "新增"}成功!`);
 
       upList();
       closeFu();

src/pages/Wall/WallTable/index.tsx

@@ -8,7 +8,7 @@ import {
   wallSortAPI,
 } from "@/store/action/wall";
 import { WallTableList } from "@/types";
-import { Button, message, Popconfirm, Switch, Table, Tooltip } from "antd";
+import { Button, Popconfirm, Switch, Table, Tooltip } from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -24,6 +24,7 @@ import { ExclamationOutlined } from "@ant-design/icons";
 // 表格拖动排序-----------------
 import { DndProvider, useDrag, useDrop } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import { MessageFu } from "@/utils/message";
 
 function WallTable() {
   const dispatch = useDispatch();
@@ -37,7 +38,7 @@ function WallTable() {
     async (id: number) => {
       const res: any = await wallRemoveAPI(id);
       if (res.code === 0) {
-        message.success("删除成功!");
+        MessageFu.success("删除成功!");
         dispatch(getWallTableListAPI());
       }
     },
@@ -65,7 +66,7 @@ function WallTable() {
   const editTableFu = useCallback(
     (id: number) => {
       if (id === 0 && results.length >= 20)
-        return message.warning("最多支持上传20个内容！");
+        return MessageFu.warning("最多支持上传20个内容！");
 
       editId.current = id;
       setOpen(true);

src/pages/Wall/index.tsx

@@ -1,12 +1,4 @@
-import {
-  Button,
-  Radio,
-  Tooltip,
-  DatePicker,
-  Select,
-  message,
-  Popconfirm,
-} from "antd";
+import { Button, Radio, Tooltip, DatePicker, Select, Popconfirm } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { ExclamationOutlined } from "@ant-design/icons";
@@ -14,6 +6,7 @@ import dayjs from "dayjs";
 import { editWallAutoApi, getWallAutoApi } from "@/store/action/wall";
 import { EditWallAutoApi } from "@/types";
 import WallTable from "./WallTable";
+import { MessageFu } from "@/utils/message";
 const { RangePicker } = DatePicker;
 function Wall() {
   // 获取自动播放信息
@@ -77,7 +70,7 @@ function Wall() {
     } as EditWallAutoApi;
     const res: any = await editWallAutoApi(obj);
     if (res.code === 0) {
-      message.success("修改成功!");
+      MessageFu.success("修改成功!");
       getWallAutoApiFu();
     }
     btnX();

src/store/reducer/login.ts

@@ -1,4 +1,5 @@
 import { DictListTypeObj, PermissionsAPIType } from "@/types";
+import { MessageType } from "@/utils/message";
 
 // 初始化状态
 const initState = {
@@ -20,6 +21,12 @@ const initState = {
   } as DictListTypeObj,
   // 有关权限的信息
   authPageArr: [] as PermissionsAPIType[],
+  // antd轻提示(兼容360浏览器)
+  message: {
+    txt: "",
+    type: "info",
+    duration: 3,
+  } as MessageType,
 };
 
 // 定义 action 类型
@@ -28,7 +35,8 @@ type LoginActionType =
   | { type: "login/asyncLoding"; payload: boolean }
   | { type: "login/lookVideo"; payload: string }
   | { type: "login/getDictList"; payload: DictListTypeObj }
-  | { type: "login/setAuthPageArr"; payload: PermissionsAPIType[] };
+  | { type: "login/setAuthPageArr"; payload: PermissionsAPIType[] }
+  | { type: "login/message"; payload: MessageType };
 
 // 频道 reducer
 export default function loginReducer(
@@ -51,6 +59,9 @@ export default function loginReducer(
     // 有关权限的信息
     case "login/setAuthPageArr":
       return { ...state, authPageArr: action.payload };
+    // antd轻提示(兼容360浏览器)
+    case "login/message":
+      return { ...state, message: action.payload };
     default:
       return state;
   }

src/utils/http.ts

@@ -1,8 +1,8 @@
 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/
@@ -63,14 +63,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) {
@@ -83,9 +83,9 @@ http.interceptors.response.use(
 
     // 如果因为网络原因，response没有，给提示消息
     if (!err.response) {
-      message.warning("网络繁忙，请稍后重试!");
+      MessageFu.warning("网络繁忙，请稍后重试!");
     } else {
-      message.warning("错误!");
+      MessageFu.warning("错误!");
     }
     // 响应错误也要取消 上传文件的进度条
     if (UpAsyncLodingDom) UpAsyncLodingDom.style.opacity = 0;

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,
+      },
+    });
+  },
+};