perf: 优化loading组件和样式等

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "stylelint.vscode-stylelint",
-    "mikestead.dotenv"
+    "mikestead.dotenv",
+    "dsznajder.es7-react-js-snippets"
   ]
 }

src/components/loading/index.scss

@@ -1,16 +1,11 @@
-.pub-loading {
-  position: fixed;
+$prefix-cls: 'pub-loading';
+
+.#{$prefix-cls} {
+  position: absolute;
   inset: 0;
-  z-index: 9999999;
+  z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
   background-color: rgba($color: #000, $alpha: 20%);
-
-  svg {
-    width: 100px;
-    height: 100px;
-  }
 }

src/components/loading/index.tsx

@@ -1,33 +1,39 @@
-import { memo } from 'react';
+import { Root, createRoot } from 'react-dom/client';
+
+import { SpinLoading } from 'antd-mobile';
+
+import { createDesign } from '@/hooks';
 
 import './index.scss';
 
-/** Loading组件示例，可替换为ui库的loading组件作二次封装 */
+let container: HTMLDivElement | null = null;
+let root: Root | null = null;
+
+const { prefixCls } = createDesign('pub-loading');
+
 function Loading() {
   return (
-    <div className="pub-loading">
-      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-        <path
-          fill="none"
-          stroke="#4579FF"
-          strokeDasharray="15"
-          strokeDashoffset="15"
-          strokeLinecap="round"
-          strokeWidth="2"
-          d="M12 3C16.9706 3 21 7.02944 21 12"
-        >
-          <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0" />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            repeatCount="indefinite"
-            type="rotate"
-            values="0 12 12;360 12 12"
-          />
-        </path>
-      </svg>
+    <div className={prefixCls}>
+      <SpinLoading style={{ '--size': '42px' }} />
     </div>
   );
 }
 
-export default memo(Loading);
+Loading.show = () => {
+  if (container || root) return;
+  container = document.createElement('div');
+  container.setAttribute('id', 'pub-loading');
+  root = createRoot(container);
+  root.render(<Loading />);
+  document.body.appendChild(container);
+};
+
+Loading.hide = () => {
+  if (container && root) {
+    root.unmount();
+    document.body.removeChild(container);
+    container = root = null;
+  }
+};
+
+export default Loading;

src/router/utils/lazy-load.tsx

@@ -1,14 +1,15 @@
 import { FC, ReactNode, Suspense } from 'react';
 
+import { Loading } from '@/components';
+
 /**
  * 组件懒加载，结合Suspense实现
  * @param Component 组件对象
  * @returns 返回新组件
  */
 export const LazyLoad = (Component: FC): ReactNode => {
   return (
-    // fallback的loading效果可自行修改为ui组件库的loading组件或骨架屏等等
-    <Suspense fallback={<div className="route-loading"></div>}>
+    <Suspense fallback={<Loading />}>
       <Component />
     </Suspense>
   );

src/services/service.ts

@@ -1,5 +1,7 @@
 import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 
+import { Loading } from '@/components';
+
 // 创建axios实例
 const axiosInstance: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL, // 请求的默认前缀 只要是发出去请求就会 默认带上这个前缀
@@ -15,9 +17,11 @@ axiosInstance.interceptors.request.use(
     // if (token) {
     //     config.headers.Authorization = `Bearer ${token}`
     // }
+    Loading.show(); // 请求前显示loading
     return config;
   },
   (err: AxiosError) => {
+    Loading.hide(); // 请求结束隐藏loading
     return Promise.reject(err);
   },
 );
@@ -35,11 +39,13 @@ axiosInstance.interceptors.response.use(
     //   default:
     //     return res.data || {};
     // }
+    Loading.hide(); // 请求结束隐藏loading
     return res; // res.data
   },
   (err: AxiosError) => {
     // 如果接口请求报错时，也可以直接返回对象，如return { message: onErrorReason(error.message) }，这样使用async/await就不需要加try/catch
     // onErrorReason(err.message) // 做一些全局的错误提示，可用ui库的message提示组件
+    Loading.hide(); // 请求结束隐藏loading
     return Promise.resolve(err);
   },
 );

src/styles/css/reset.css

@@ -179,3 +179,9 @@ pre {
 ::-webkit-scrollbar {
   display: none;
 }
+
+/* p,
+span,
+div {
+  word-break: break-word;
+} */

src/styles/scss/global.scss

@@ -3,31 +3,11 @@
   display: none !important;
 }
 
-/* HTML: <div class="route-loading"></div> */
-.route-loading {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 120px;
-  height: 22px;
-  color: #514b82;
-  border: 2px solid;
-  border-radius: 20px;
-  transform: translate(-50%, -50%);
-}
-
-.route-loading::before {
-  position: absolute;
-  inset: 0 100% 0 0;
-  margin: 2px;
-  content: '';
-  background: currentcolor;
-  border-radius: inherit;
-  animation: l6 2s infinite;
-
-  @keyframes l6 {
-    100% {
-      inset: 0;
-    }
-  }
+#root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 28px; // 基本字体大小
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 34px;
 }