From 5db3ce773793d06fa17336aca42470d2aae93fb8 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Tue, 1 Dec 2020 20:59:17 +0800
Subject: [PATCH] refactor: add loading component and demo

---
 CHANGELOG.en_US.md                            |   2 +-
 CHANGELOG.zh_CN.md                            |  12 +-
 build/config/lessModifyVars.ts                |   1 +
 index.html                                    | 186 ++++++++++++------
 package.json                                  |   2 +-
 public/resource/img/loading.svg               |  49 -----
 src/assets/images/loading.svg                 |  67 -------
 .../Application/src/AppLocalePicker.vue       |   4 +
 src/components/Application/src/AppLogo.vue    |   4 +
 src/components/Drawer/src/BasicDrawer.tsx     |   8 +-
 src/components/Loading/BasicLoading.vue       |  55 ------
 src/components/Loading/FullLoading.vue        |  50 -----
 src/components/Loading/index.ts               |  10 +-
 src/components/Loading/src/createLoading.ts   |  60 ++++++
 src/components/Loading/src/index.vue          |  82 ++++++++
 src/components/Loading/src/indicator.tsx      |   9 +
 src/components/Loading/src/types.ts           |  10 +
 src/components/Loading/src/useLoading.ts      |  39 ++++
 src/components/Loading/type.ts                |   8 -
 src/components/Preview/src/index.tsx          |  17 +-
 src/design/public.less                        |   5 -
 src/hooks/web/useI18n.ts                      |   1 +
 src/layouts/default/content/index.less        |   4 -
 src/layouts/default/content/index.tsx         |  16 +-
 src/layouts/page/index.tsx                    |   1 +
 src/locales/lang/en/routes/demo/comp.ts       |   2 +
 src/locales/lang/zh_CN/routes/demo/comp.ts    |   2 +
 src/router/menus/modules/demo/comp.ts         |   4 +
 src/router/routes/modules/demo/comp.ts        |   8 +
 src/setup/ant-design-vue/index.ts             |   2 -
 src/setup/ant-design-vue/spin.tsx             |  12 --
 src/setup/directives/index.ts                 |   2 +
 src/setup/directives/loading.ts               |  43 ++++
 src/setup/i18n/index.ts                       |   3 +-
 src/views/demo/comp/loading/index.vue         |  96 +++++++++
 tsconfig.json                                 |   2 +-
 vite.config.ts                                |   4 +-
 yarn.lock                                     |  11 +-
 38 files changed, 545 insertions(+), 348 deletions(-)
 delete mode 100644 public/resource/img/loading.svg
 delete mode 100644 src/assets/images/loading.svg
 delete mode 100644 src/components/Loading/BasicLoading.vue
 delete mode 100644 src/components/Loading/FullLoading.vue
 create mode 100644 src/components/Loading/src/createLoading.ts
 create mode 100644 src/components/Loading/src/index.vue
 create mode 100644 src/components/Loading/src/indicator.tsx
 create mode 100644 src/components/Loading/src/types.ts
 create mode 100644 src/components/Loading/src/useLoading.ts
 delete mode 100644 src/components/Loading/type.ts
 delete mode 100644 src/setup/ant-design-vue/spin.tsx
 create mode 100644 src/setup/directives/loading.ts
 create mode 100644 src/views/demo/comp/loading/index.vue

diff --git a/CHANGELOG.en_US.md b/CHANGELOG.en_US.md
index 3df310482..c85cc8384 100644
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -3,7 +3,7 @@
 ## (破坏性更新) Breaking changes
 
 - The ClickOutSide component import method is changed from `import ClickOutSide from'/@/components/ClickOutSide/index.vue'` to `import {ClickOutSide} from'/@/components/ClickOutSide'`
-- Button component import method changed from `import ClickOutSide from'/@/components/Button/index.vue'` to `import {Button} from'/@/components/Button'`
+- Button component import method changed from `import Button from'/@/components/Button/index.vue'` to `import {Button} from'/@/components/Button'`
 - StrengthMeter component import method is changed from `import StrengthMeter from'/@/components/StrengthMeter'` to `import {StrengthMeter} from'/@/components/StrengthMeter'`
 - In addition to the examples, the global internationalization function is added, supporting Chinese and English
 
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 622c3ca4d..ee693a9c3 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,9 +1,19 @@
+## Wip
+
+### ✨ Features
+
+- 还原 antdv 默认 loading，重构 `Loading` 组件，增加`useLoading`和`v-loading`指令。并增加示例
+
+### 🎫 Chores
+
+- 首屏 loading 修改
+
 ## 2.0.0-rc.12 (2020-11-30)
 
 ## (破坏性更新) Breaking changes
 
 - ClickOutSide 组件引入方式由 `import ClickOutSide from '/@/components/ClickOutSide/index.vue'`变更为`import { ClickOutSide } from '/@/components/ClickOutSide'`
-- Button 组件引入方式由 `import ClickOutSide from '/@/components/Button/index.vue'`变更为`import { Button } from '/@/components/Button'`
+- Button 组件引入方式由 `import Button from '/@/components/Button/index.vue'`变更为`import { Button } from '/@/components/Button'`
 - StrengthMeter 组件引入方式由 `import StrengthMeter from '/@/components/StrengthMeter'`变更为`import { StrengthMeter } from '/@/components/StrengthMeter'`
 - 除示例外加入全局国际化功能，支持中文与英文
 
diff --git a/build/config/lessModifyVars.ts b/build/config/lessModifyVars.ts
index 73cbc187e..b51223bb3 100644
--- a/build/config/lessModifyVars.ts
+++ b/build/config/lessModifyVars.ts
@@ -2,6 +2,7 @@
  * less global variable
  */
 const primaryColor = '#018ffb';
+// const primaryColor = '#0065cc';
 //{
 const modifyVars = {
   'primary-color': primaryColor, //  Global dominant color
diff --git a/index.html b/index.html
index 9c9dbbdd9..10e33a16e 100644
--- a/index.html
+++ b/index.html
@@ -13,68 +13,136 @@
     <title></title>
     <link rel="icon" href="/favicon.ico" />
     <%= viteHtmlPluginOptions.injectConfig %>
-
-    <style>
-      @keyframes load {
-        0% {
-          -webkit-transform: rotate(-360deg);
-          transform: rotate(-360deg);
-        }
-
-        100% {
-          -webkit-transform: rotate(0);
-          transform: rotate(0);
-        }
-      }
-
-      .app-loading {
-        width: 100%;
-        height: 100%;
-        background: #f0f2f5;
-      }
-
-      .app-loading .app-loading-wrap {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate3d(-50%, -50%, 0);
-        transform: translate3d(-50%, -50%, 0);
-      }
-
-      .app-loading .g-loading {
-        display: block;
-        width: 48px;
-        margin: 30px auto;
-        -webkit-animation: load 1.2s linear infinite;
-        animation: load 1.2s linear infinite;
-        -webkit-transform-origin: center center;
-        transform-origin: center center;
-      }
-
-      .app-loading .app-loading-wrap img.logo {
-        display: block;
-        width: 90px;
-        margin: 0 auto;
-        margin-bottom: 20px;
-      }
-
-      .app-loading .app-loading-wrap .app-loading__tip {
-        display: block;
-        margin: 20px auto 0 0;
-        font-size: 30px;
-        color: rgba(0, 0, 0, 0.85);
-      }
-    </style>
   </head>
   <body>
     <div id="app">
-      <section class="app-loading">
-        <section class="app-loading-wrap">
-          <img src="./resource/img/logo.png" class="logo" alt="Logo" />
-          <img src="./resource/img/loading.svg" alt="" class="g-loading" />
-          <h1 class="app-loading__tip"><%= viteHtmlPluginOptions.title %></h1>
-        </section>
-      </section>
+      <style>
+        .app-loading {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .app-loading .app-loading-wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: flex;
+          -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .app-loading .dots {
+          display: flex;
+          padding: 98px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading-title {
+          display: flex;
+          margin-top: 30px;
+          font-size: 30px;
+          color: rgba(0, 0, 0, 0.85);
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading-logo {
+          display: block;
+          width: 90px;
+          margin: 0 auto;
+          margin-bottom: 20px;
+        }
+
+        .dot {
+          position: relative;
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          margin-top: 30px;
+          font-size: 32px;
+          transform: rotate(45deg);
+          box-sizing: border-box;
+          animation: antRotate 1.2s infinite linear;
+        }
+
+        .dot i {
+          position: absolute;
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-color: #0065cc;
+          border-radius: 100%;
+          opacity: 0.3;
+          transform: scale(0.75);
+          animation: antSpinMove 1s infinite linear alternate;
+          transform-origin: 50% 50%;
+        }
+
+        .dot i:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+
+        .dot i:nth-child(2) {
+          top: 0;
+          right: 0;
+          -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+        }
+
+        .dot i:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+        }
+
+        .dot i:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          -webkit-animation-delay: 1.2s;
+          animation-delay: 1.2s;
+        }
+        @keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+        @-webkit-keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+        @keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+        @-webkit-keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+      </style>
+      <div class="app-loading">
+        <div class="app-loading-wrap">
+          <img src="./resource/img/logo.png" class="app-loading-logo" alt="Logo" />
+          <div class="app-loading-dots">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+          <div class="app-loading-title"><%= viteHtmlPluginOptions.title %></div>
+        </div>
+      </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/package.json b/package.json
index e749fa197..4fa309b36 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
-    "ant-design-vue": "2.0.0-rc.2",
+    "ant-design-vue": "^2.0.0-rc.2",
     "apexcharts": "3.22.0",
     "axios": "^0.21.0",
     "crypto-es": "^1.2.6",
diff --git a/public/resource/img/loading.svg b/public/resource/img/loading.svg
deleted file mode 100644
index 15395c62e..000000000
--- a/public/resource/img/loading.svg
+++ /dev/null
@@ -1,49 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 200 200" version="1.1" 
-  xmlns="http://www.w3.org/2000/svg" 
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style type="text/css">
-        .left-linear {
-          fill: url(#left-linear);
-        }
-
-        .right-linear {
-          fill: url(#right-linear);
-        }
-
-        .top {
-          fill: #64acff;
-        }
-
-        .bottom {
-          fill: #9dbfe4;
-        }
-        svg {
-          display: block;
-        }
-
-        .tip {
-          display: block;
-          min-width: 100px;
-          margin-top: 4px;
-          font-size: 13px;
-          color: rgba(0, 0, 0, 0.85);;
-          text-align: left;
-        }
-  </style>
-  <circle cx="97" cy="97" r="81" stroke-width="16" stroke="#327fd8" fill="none"></circle>
-  <g class="load">
-    <linearGradient id="left-linear" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="100" y2="180">
-      <stop offset="0" style="stop-color: #64acff;" />
-      <stop offset="1" style="stop-color: #9DBFE4;" />
-    </linearGradient>
-    <path class="left-linear" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z" />
-    <circle class="bottom" cx="100" cy="190" r="10" />
-    <linearGradient id="right-linear" gradientUnits="userSpaceOnUse" x1="100" y1="120" x2="100" y2="180">
-      <stop offset="0" style="stop-color: transparent;" />
-      <stop offset="1" style="stop-color: transparent;" />
-    </linearGradient>
-    <path class="right-linear" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z" />
-    <circle class="top" cx="100" cy="10" r="10" />
-  </g>
-</svg>
diff --git a/src/assets/images/loading.svg b/src/assets/images/loading.svg
deleted file mode 100644
index b85b89286..000000000
--- a/src/assets/images/loading.svg
+++ /dev/null
@@ -1,67 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 200 200" version="1.1" 
-  xmlns="http://www.w3.org/2000/svg" 
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style type="text/css">
-        .left-linear {
-          fill: url(#left-linear);
-        }
-
-        .right-linear {
-          fill: url(#right-linear);
-        }
-
-        .top {
-          fill: #64acff;
-        }
-
-        .bottom {
-          fill: #9dbfe4;
-        }
-        @keyframes load {
-          0% {
-            transform: rotate(-360deg);
-          }
-
-          100% {
-            transform: rotate(0);
-          }
-        }
-
-        .load {
-          animation: load 1.4s linear infinite;
-          transform-origin: center center;
-        }
-
-        svg {
-          display: block;
-        }
-
-        .tip {
-          display: block;
-          min-width: 100px;
-          margin-top: 4px;
-          font-size: 13px;
-          color: #303133;
-          text-align: left;
-        }
-  </style>
-  <circle cx="97" cy="97" r="81" stroke-width="16" stroke="#327fd8" fill="none"></circle>
-  <g class="load">
-    <!--右半圆环-->
-    <linearGradient id="left-linear" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="100" y2="180">
-      <stop offset="0" style="stop-color: #64acff;" />
-      <stop offset="1" style="stop-color: #9DBFE4;" />
-    </linearGradient>
-    <path class="left-linear" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z" />
-    <!--左半圆环-->
-    <circle class="bottom" cx="100" cy="190" r="10" />
-    <linearGradient id="right-linear" gradientUnits="userSpaceOnUse" x1="100" y1="120" x2="100" y2="180">
-      <stop offset="0" style="stop-color: transparent;" />
-      <stop offset="1" style="stop-color: transparent;" />
-    </linearGradient>
-    <path class="right-linear" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z" />
-    <!--左半圆环-->
-    <circle class="top" cx="100" cy="10" r="10" />
-  </g>
-</svg>
diff --git a/src/components/Application/src/AppLocalePicker.vue b/src/components/Application/src/AppLocalePicker.vue
index 48ab5bd71..5ef9e78ac 100644
--- a/src/components/Application/src/AppLocalePicker.vue
+++ b/src/components/Application/src/AppLocalePicker.vue
@@ -1,3 +1,7 @@
+<!--
+ * @Author: Vben
+ * @Description: Multi-language switching component
+-->
 <template>
   <Dropdown
     :trigger="['click']"
diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue
index 6ce85ef6a..5763fe56c 100644
--- a/src/components/Application/src/AppLogo.vue
+++ b/src/components/Application/src/AppLogo.vue
@@ -1,3 +1,7 @@
+<!--
+ * @Author: Vben
+ * @Description: logo component
+-->
 <template>
   <div
     class="app-logo anticon"
diff --git a/src/components/Drawer/src/BasicDrawer.tsx b/src/components/Drawer/src/BasicDrawer.tsx
index 3736bb7ac..84d0cff7b 100644
--- a/src/components/Drawer/src/BasicDrawer.tsx
+++ b/src/components/Drawer/src/BasicDrawer.tsx
@@ -7,7 +7,7 @@ import { defineComponent, ref, computed, watchEffect, watch, unref, nextTick, to
 import { Drawer, Row, Col, Button } from 'ant-design-vue';
 
 import { BasicTitle } from '/@/components/Basic';
-import { FullLoading } from '/@/components/Loading/index';
+import { Loading } from '/@/components/Loading';
 import { LeftOutlined } from '@ant-design/icons-vue';
 
 import { useI18n } from '/@/hooks/web/useI18n';
@@ -97,9 +97,7 @@ export default defineComponent({
     );
 
     const getLoading = computed(() => {
-      return {
-        hidden: !unref(getProps).loading,
-      };
+      return !!unref(getProps)?.loading;
     });
 
     watchEffect(() => {
@@ -230,7 +228,7 @@ export default defineComponent({
             default: () => (
               <>
                 <div ref={scrollRef} style={unref(getScrollContentStyle)}>
-                  <FullLoading absolute tip={t('loadingText')} class={unref(getLoading)} />
+                  <Loading absolute tip={t('loadingText')} loading={unref(getLoading)} />
                   {getSlot(slots)}
                 </div>
                 {renderFooter()}
diff --git a/src/components/Loading/BasicLoading.vue b/src/components/Loading/BasicLoading.vue
deleted file mode 100644
index f0afa908b..000000000
--- a/src/components/Loading/BasicLoading.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <section class="basic-loading">
-    <img
-      src="/@/assets/images/loading.svg"
-      alt=""
-      :height="getLoadingIconSize"
-      :width="getLoadingIconSize"
-    />
-    <span class="mt-4" v-if="tip"> {{ tip }}</span>
-  </section>
-</template>
-
-<script lang="ts">
-  import type { PropType } from 'vue';
-  // components
-  import { defineComponent, computed } from 'vue';
-
-  import { SizeEnum, sizeMap } from '/@/enums/sizeEnum';
-
-  import { BasicLoadingProps } from './type';
-
-  export default defineComponent({
-    inheritAttrs: false,
-    name: 'BasicLoading',
-    props: {
-      tip: {
-        type: String as PropType<string>,
-        default: '',
-      },
-      size: {
-        type: String as PropType<SizeEnum>,
-        default: SizeEnum.DEFAULT,
-        validator: (v: SizeEnum): boolean => {
-          return [SizeEnum.DEFAULT, SizeEnum.SMALL, SizeEnum.LARGE].includes(v);
-        },
-      },
-    },
-    setup(props: BasicLoadingProps) {
-      const getLoadingIconSize = computed(() => {
-        const { size } = props;
-        return sizeMap.get(size);
-      });
-
-      return { getLoadingIconSize };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .basic-loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-</style>
diff --git a/src/components/Loading/FullLoading.vue b/src/components/Loading/FullLoading.vue
deleted file mode 100644
index ec738bd34..000000000
--- a/src/components/Loading/FullLoading.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <section class="full-loading" :style="getStyle">
-    <BasicLoading :tip="tip" :size="SizeEnum.DEFAULT" />
-  </section>
-</template>
-<script lang="ts">
-  import type { PropType } from 'vue';
-  import { defineComponent, computed } from 'vue';
-  import BasicLoading from './BasicLoading.vue';
-
-  import { SizeEnum } from '/@/enums/sizeEnum';
-
-  export default defineComponent({
-    name: 'FullLoading',
-    components: { BasicLoading },
-    props: {
-      tip: {
-        type: String as PropType<string>,
-        default: '',
-      },
-      absolute: Boolean as PropType<boolean>,
-    },
-    setup(props) {
-      const getStyle = computed((): any => {
-        return props.absolute
-          ? {
-              position: 'absolute',
-              left: 0,
-              top: 0,
-              'z-index': 1,
-            }
-          : {};
-      });
-
-      return { getStyle, SizeEnum };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .full-loading {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    // background: rgba(255, 255, 255, 0.3);
-    // background: #f0f2f5;
-    background: rgba(240, 242, 245, 0.5);
-    justify-content: center;
-    align-items: center;
-  }
-</style>
diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts
index 39bdd88a3..f8e584574 100644
--- a/src/components/Loading/index.ts
+++ b/src/components/Loading/index.ts
@@ -1,2 +1,8 @@
-export { default as BasicLoading } from './BasicLoading.vue';
-export { default as FullLoading } from './FullLoading.vue';
+import './src/indicator';
+import LoadingLib from './src/index.vue';
+import { withInstall } from '../util';
+
+export { useLoading } from './src/useLoading';
+export { createLoading } from './src/createLoading';
+
+export const Loading = withInstall(LoadingLib);
diff --git a/src/components/Loading/src/createLoading.ts b/src/components/Loading/src/createLoading.ts
new file mode 100644
index 000000000..bb7fd08ef
--- /dev/null
+++ b/src/components/Loading/src/createLoading.ts
@@ -0,0 +1,60 @@
+import { VNode, defineComponent } from 'vue';
+import type { LoadingProps } from './types';
+
+import { createVNode, render, reactive, h } from 'vue';
+import Loading from './index.vue';
+
+export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElement) {
+  let vm: Nullable<VNode> = null;
+  const data = reactive({
+    tip: '',
+    loading: true,
+    ...props,
+  });
+
+  const LoadingWrap = defineComponent({
+    setup() {
+      return () => {
+        return h(Loading, { ...data });
+      };
+    },
+  });
+
+  vm = createVNode(LoadingWrap);
+
+  render(vm, document.createElement('div'));
+
+  function close() {
+    if (vm?.el && vm.el.parentNode) {
+      vm.el.parentNode.removeChild(vm.el);
+    }
+  }
+
+  function open(target: HTMLElement = document.body) {
+    if (!vm || !vm.el) {
+      return;
+    }
+    target.appendChild(vm.el as HTMLElement);
+  }
+
+  if (target) {
+    open(target);
+  }
+  return {
+    vm,
+    close,
+    open,
+    setTip: (tip: string) => {
+      data.tip = tip;
+    },
+    setLoading: (loading: boolean) => {
+      data.loading = loading;
+    },
+    get loading() {
+      return data.loading;
+    },
+    get $el() {
+      return vm?.el as HTMLElement;
+    },
+  };
+}
diff --git a/src/components/Loading/src/index.vue b/src/components/Loading/src/index.vue
new file mode 100644
index 000000000..4d24a7347
--- /dev/null
+++ b/src/components/Loading/src/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <section class="full-loading" :class="{ absolute }" v-show="loading" :style="getStyle">
+    <Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
+  </section>
+</template>
+<script lang="ts">
+  import { computed, CSSProperties, PropType } from 'vue';
+
+  import { defineComponent } from 'vue';
+  import { Spin } from 'ant-design-vue';
+
+  import { SizeEnum } from '/@/enums/sizeEnum';
+  import { ThemeEnum } from '/@/enums/appEnum';
+
+  export default defineComponent({
+    name: 'Loading',
+    components: { Spin },
+    props: {
+      tip: {
+        type: String as PropType<string>,
+        default: '',
+      },
+      size: {
+        type: String as PropType<SizeEnum>,
+        default: SizeEnum.LARGE,
+        validator: (v: SizeEnum): boolean => {
+          return [SizeEnum.DEFAULT, SizeEnum.SMALL, SizeEnum.LARGE].includes(v);
+        },
+      },
+      absolute: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+      loading: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+      background: {
+        type: String as PropType<string>,
+      },
+      theme: {
+        type: String as PropType<'dark' | 'light'>,
+        default: 'light',
+      },
+    },
+    setup(props) {
+      const getStyle = computed(
+        (): CSSProperties => {
+          const { background, theme } = props;
+          const bgColor = background
+            ? background
+            : theme === ThemeEnum.DARK
+            ? 'rgba(0, 0, 0, 0.2)'
+            : 'rgba(240, 242, 245, 0.4)';
+          return { background: bgColor };
+        }
+      );
+
+      return { getStyle };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .full-loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+
+    &.absolute {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+  }
+</style>
diff --git a/src/components/Loading/src/indicator.tsx b/src/components/Loading/src/indicator.tsx
new file mode 100644
index 000000000..f74bc0e65
--- /dev/null
+++ b/src/components/Loading/src/indicator.tsx
@@ -0,0 +1,9 @@
+// If you need to modify the default icon, you can open the comment and modify it here
+
+// import { Spin } from 'ant-design-vue';
+// import { LoadingOutlined } from '@ant-design/icons-vue';
+// Spin.setDefaultIndicator({
+//   indicator: () => {
+//     return <LoadingOutlined spin />;
+//   },
+// });
diff --git a/src/components/Loading/src/types.ts b/src/components/Loading/src/types.ts
new file mode 100644
index 000000000..9af60e612
--- /dev/null
+++ b/src/components/Loading/src/types.ts
@@ -0,0 +1,10 @@
+import { SizeEnum } from '/@/enums/sizeEnum';
+
+export interface LoadingProps {
+  tip: string;
+  size: SizeEnum;
+  absolute: boolean;
+  loading: boolean;
+  background: string;
+  theme: 'dark' | 'light';
+}
diff --git a/src/components/Loading/src/useLoading.ts b/src/components/Loading/src/useLoading.ts
new file mode 100644
index 000000000..10f8e31e6
--- /dev/null
+++ b/src/components/Loading/src/useLoading.ts
@@ -0,0 +1,39 @@
+import { unref } from 'vue';
+import { createLoading } from './createLoading';
+import type { LoadingProps } from './types';
+import type { Ref } from 'vue';
+
+export interface UseLoadingOptions {
+  target?: HTMLElement | Ref<ElRef>;
+  props?: Partial<LoadingProps>;
+}
+
+export function useLoading(props: Partial<LoadingProps>): [Fn, Fn];
+export function useLoading(opt: Partial<UseLoadingOptions>): [Fn, Fn];
+
+export function useLoading(opt: Partial<LoadingProps> | Partial<UseLoadingOptions>): [Fn, Fn] {
+  let props: Partial<LoadingProps>;
+  let target: HTMLElement | Ref<ElRef> = document.body;
+
+  if (Reflect.has(opt, 'target') || Reflect.has(opt, 'props')) {
+    const options = opt as Partial<UseLoadingOptions>;
+    props = options.props || {};
+    target = options.target || document.body;
+  } else {
+    props = opt as Partial<LoadingProps>;
+  }
+
+  const instance = createLoading(props);
+
+  const open = (): void => {
+    const t = unref(target);
+    if (!t) return;
+    instance.open(t);
+  };
+
+  const close = (): void => {
+    instance.close();
+  };
+
+  return [open, close];
+}
diff --git a/src/components/Loading/type.ts b/src/components/Loading/type.ts
deleted file mode 100644
index 03a050fe0..000000000
--- a/src/components/Loading/type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { SizeEnum } from '/@/enums/sizeEnum';
-
-export interface BasicLoadingProps {
-  // 提示语
-  tip: string;
-
-  size: SizeEnum;
-}
diff --git a/src/components/Preview/src/index.tsx b/src/components/Preview/src/index.tsx
index 334b8a479..8d915605a 100644
--- a/src/components/Preview/src/index.tsx
+++ b/src/components/Preview/src/index.tsx
@@ -1,16 +1,17 @@
+import './index.less';
+
 import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
 
 import { basicProps } from './props';
 import { Props } from './types';
-import './index.less';
 
-import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+import { CloseOutlined, LeftOutlined, RightOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+import { Spin } from 'ant-design-vue';
 
 import resumeSvg from '/@/assets/svg/preview/resume.svg';
 import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
 import scaleSvg from '/@/assets/svg/preview/scale.svg';
 import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
-import loadingSvg from '/@/assets/images/loading.svg';
 import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
 enum StatueEnum {
   LOADING,
@@ -271,12 +272,14 @@ export default defineComponent({
         imgState.show && (
           <div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
             <div class={`${prefixCls}-content`}>
-              <img
-                width="32"
-                src={loadingSvg}
+              <Spin
+                indicator={<LoadingOutlined style="font-size: 24px" spin />}
+                spinning={true}
                 class={[
                   `${prefixCls}-image`,
-                  imgState.status === StatueEnum.LOADING ? '' : 'hidden',
+                  {
+                    hidden: imgState.status !== StatueEnum.LOADING,
+                  },
                 ]}
               />
               <img
diff --git a/src/design/public.less b/src/design/public.less
index 905fc904d..42089df7a 100644
--- a/src/design/public.less
+++ b/src/design/public.less
@@ -3,11 +3,6 @@
   height: 100%;
 }
 
-.app-svg-loading {
-  position: relative;
-  width: auto;
-}
-
 // =================================
 // ==============scrollbar==========
 // =================================
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
index 2c50c713c..1a852f803 100644
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -26,6 +26,7 @@ export function useI18n(namespace?: string) {
   return {
     ...methods,
     t: (key: string, ...arg: Parameters<typeof t>) => {
+      if (!key) return '';
       return t(getKey(key), ...arg);
     },
   };
diff --git a/src/layouts/default/content/index.less b/src/layouts/default/content/index.less
index 42bd51b65..6912f98de 100644
--- a/src/layouts/default/content/index.less
+++ b/src/layouts/default/content/index.less
@@ -14,10 +14,6 @@
     position: absolute;
     z-index: @page-loading-z-index;
 
-    &.fill {
-      background: rgba(240, 242, 245) !important;
-    }
-
     > .basic-loading {
       margin-bottom: 15%;
     }
diff --git a/src/layouts/default/content/index.tsx b/src/layouts/default/content/index.tsx
index 03544998f..464e58f54 100644
--- a/src/layouts/default/content/index.tsx
+++ b/src/layouts/default/content/index.tsx
@@ -1,31 +1,25 @@
 import './index.less';
 
-import { defineComponent, unref, computed } from 'vue';
-import { FullLoading } from '/@/components/Loading/index';
+import { defineComponent, unref } from 'vue';
+import { Loading } from '/@/components/Loading';
 
 import { RouterView } from 'vue-router';
 
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 
 export default defineComponent({
   name: 'LayoutContent',
   setup() {
     const { getOpenPageLoading } = useTransitionSetting();
-    const { getShowMultipleTab } = useMultipleTabSetting();
     const { getLayoutContentMode, getPageLoading } = useRootSetting();
 
-    const getLoadingClass = computed(() => {
-      return [
-        `layout-content__loading`,
-        { fill: unref(getShowMultipleTab), hidden: !unref(getPageLoading) },
-      ];
-    });
     return () => {
       return (
         <div class={['layout-content', unref(getLayoutContentMode)]}>
-          {unref(getOpenPageLoading) && <FullLoading class={unref(getLoadingClass)} />}
+          {unref(getOpenPageLoading) && (
+            <Loading loading={unref(getPageLoading)} absolute class="layout-content__loading" />
+          )}
           <RouterView />
         </div>
       );
diff --git a/src/layouts/page/index.tsx b/src/layouts/page/index.tsx
index f94a02e52..24e8551f0 100644
--- a/src/layouts/page/index.tsx
+++ b/src/layouts/page/index.tsx
@@ -22,6 +22,7 @@ export default defineComponent({
   name: 'PageLayout',
   setup() {
     const { getShowMenu } = useMenuSetting();
+
     const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
 
     const { getBasicTransition, getEnableTransition } = useTransitionSetting();
diff --git a/src/locales/lang/en/routes/demo/comp.ts b/src/locales/lang/en/routes/demo/comp.ts
index 029d7287b..4099ef129 100644
--- a/src/locales/lang/en/routes/demo/comp.ts
+++ b/src/locales/lang/en/routes/demo/comp.ts
@@ -24,4 +24,6 @@ export default {
   qrcode: 'QR code',
   strength: 'Password strength',
   upload: 'Upload',
+
+  loading: 'Loading',
 };
diff --git a/src/locales/lang/zh_CN/routes/demo/comp.ts b/src/locales/lang/zh_CN/routes/demo/comp.ts
index 13d8345a1..cf49f6c4f 100644
--- a/src/locales/lang/zh_CN/routes/demo/comp.ts
+++ b/src/locales/lang/zh_CN/routes/demo/comp.ts
@@ -24,4 +24,6 @@ export default {
   qrcode: '二维码组件',
   strength: '密码强度组件',
   upload: '上传组件',
+
+  loading: 'Loading',
 };
diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts
index 81858a4fd..6b467693c 100644
--- a/src/router/menus/modules/demo/comp.ts
+++ b/src/router/menus/modules/demo/comp.ts
@@ -44,6 +44,10 @@ const menu: MenuModule = {
         path: 'upload',
         name: 'routes.demo.comp.upload',
       },
+      {
+        path: 'loading',
+        name: 'routes.demo.comp.loading',
+      },
       {
         path: 'scroll',
         name: 'routes.demo.comp.scroll',
diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts
index 8cc0e577d..b5dc62717 100644
--- a/src/router/routes/modules/demo/comp.ts
+++ b/src/router/routes/modules/demo/comp.ts
@@ -178,6 +178,14 @@ const comp: AppRouteModule = {
         title: 'routes.demo.comp.upload',
       },
     },
+    {
+      path: '/loading',
+      name: 'LoadingDemo',
+      component: () => import('/@/views/demo/comp/loading/index.vue'),
+      meta: {
+        title: 'routes.demo.comp.loading',
+      },
+    },
   ],
 };
 
diff --git a/src/setup/ant-design-vue/index.ts b/src/setup/ant-design-vue/index.ts
index 15ee4a64a..d16f7cc85 100644
--- a/src/setup/ant-design-vue/index.ts
+++ b/src/setup/ant-design-vue/index.ts
@@ -12,8 +12,6 @@ import {
 } from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 
-import './spin';
-
 export function setupAntd(app: App<Element>) {
   // need
   // Here are the components required before registering and logging in
diff --git a/src/setup/ant-design-vue/spin.tsx b/src/setup/ant-design-vue/spin.tsx
deleted file mode 100644
index 5cfae8b1a..000000000
--- a/src/setup/ant-design-vue/spin.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Spin } from 'ant-design-vue';
-import svgImg from '/@/assets/images/loading.svg';
-
-Spin.setDefaultIndicator({
-  indicator: () => {
-    return (
-      <div class="app-svg-loading">
-        <img src={svgImg} alt="" height="32" width="32" />
-      </div>
-    );
-  },
-});
diff --git a/src/setup/directives/index.ts b/src/setup/directives/index.ts
index 34c865539..0329eb651 100644
--- a/src/setup/directives/index.ts
+++ b/src/setup/directives/index.ts
@@ -3,7 +3,9 @@
  */
 import type { App } from 'vue';
 import { setupPermissionDirective } from './permission';
+import { setupLoadingDirective } from './loading';
 
 export function setupGlobDirectives(app: App) {
   setupPermissionDirective(app);
+  setupLoadingDirective(app);
 }
diff --git a/src/setup/directives/loading.ts b/src/setup/directives/loading.ts
new file mode 100644
index 000000000..20c6e4453
--- /dev/null
+++ b/src/setup/directives/loading.ts
@@ -0,0 +1,43 @@
+import { createLoading } from '/@/components/Loading';
+import type { Directive, App } from 'vue';
+
+const loadingDirective: Directive = {
+  mounted(el, binding) {
+    const tip = el.getAttribute('loading-tip');
+    const background = el.getAttribute('loading-background');
+    const theme = el.getAttribute('loading-theme');
+    const size = el.getAttribute('loading-size');
+    const fullscreen = !!binding.modifiers.fullscreen;
+    const instance = createLoading(
+      {
+        tip,
+        background,
+        theme,
+        size: size || 'large',
+        loading: !!binding.value,
+        absolute: !fullscreen,
+      },
+      fullscreen ? document.body : el
+    );
+    el.instance = instance;
+  },
+  updated(el, binding) {
+    const instance = el.instance;
+    if (!instance) return;
+    instance.setTip(el.getAttribute('loading-tip'));
+    if (binding.oldValue !== binding.value) {
+      if (binding.oldValue !== binding.value) {
+        instance.setLoading?.(binding.value && !instance.loading);
+      }
+    }
+  },
+  unmounted(el) {
+    el?.instance?.close();
+  },
+};
+
+export function setupLoadingDirective(app: App) {
+  app.directive('loading', loadingDirective);
+}
+
+export default loadingDirective;
diff --git a/src/setup/i18n/index.ts b/src/setup/i18n/index.ts
index 90fb27f8f..8d704b1f2 100644
--- a/src/setup/i18n/index.ts
+++ b/src/setup/i18n/index.ts
@@ -15,7 +15,8 @@ const localeData: I18nOptions = {
   messages: localeMessages,
   availableLocales: availableLocales,
   sync: true, //If you don’t want to inherit locale from global scope, you need to set sync of i18n component option to false.
-  silentTranslationWarn: false, // true - warning off
+  silentTranslationWarn: true, // true - warning off
+  missingWarn: false,
   silentFallbackWarn: true,
 };
 
diff --git a/src/views/demo/comp/loading/index.vue b/src/views/demo/comp/loading/index.vue
new file mode 100644
index 000000000..7524cef62
--- /dev/null
+++ b/src/views/demo/comp/loading/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="p-5" ref="wrapEl" v-loading="loadingRef" loading-tip="加载中...">
+    <a-alert message="组件方式" />
+    <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">全屏 Loading</a-button>
+    <a-button class="my-4" type="primary" @click="openCompAbsolute">容器内 Loading</a-button>
+    <Loading :loading="loading" :absolute="absolute" :tip="tip" />
+
+    <a-alert message="函数方式" />
+
+    <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">全屏 Loading</a-button>
+    <a-button class="my-4" type="primary" @click="openFnWrapLoading">容器内 Loading</a-button>
+
+    <a-alert message="指令方式" />
+    <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
+      打开指令Loading
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, toRefs, ref } from 'vue';
+  import { Loading, useLoading } from '/@/components/Loading';
+  export default defineComponent({
+    components: { Loading },
+    setup() {
+      const wrapEl = ref<ElRef>(null);
+
+      const loadingRef = ref(false);
+      const compState = reactive({
+        absolute: false,
+        loading: false,
+        tip: '加载中...',
+      });
+      const [openFullLoading, closeFullLoading] = useLoading({
+        tip: '加载中...',
+      });
+
+      const [openWrapLoading, closeWrapLoading] = useLoading({
+        target: wrapEl,
+        props: {
+          tip: '加载中...',
+          absolute: true,
+        },
+      });
+
+      function openLoading(absolute: boolean) {
+        compState.absolute = absolute;
+        compState.loading = true;
+        setTimeout(() => {
+          compState.loading = false;
+        }, 2000);
+      }
+
+      function openCompFullLoading() {
+        openLoading(false);
+      }
+
+      function openCompAbsolute() {
+        openLoading(true);
+      }
+
+      function openFnFullLoading() {
+        openFullLoading();
+
+        setTimeout(() => {
+          closeFullLoading();
+        }, 2000);
+      }
+
+      function openFnWrapLoading() {
+        openWrapLoading();
+
+        setTimeout(() => {
+          closeWrapLoading();
+        }, 2000);
+      }
+
+      function openDirectiveLoading() {
+        loadingRef.value = true;
+        setTimeout(() => {
+          loadingRef.value = false;
+        }, 2000);
+      }
+
+      return {
+        openCompFullLoading,
+        openFnFullLoading,
+        openFnWrapLoading,
+        openCompAbsolute,
+        wrapEl,
+        loadingRef,
+        openDirectiveLoading,
+        ...toRefs(compState),
+      };
+    },
+  });
+</script>
diff --git a/tsconfig.json b/tsconfig.json
index 683297dc1..d095229af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "es2016",
     "module": "esnext",
     "moduleResolution": "node",
     "strict": true,
diff --git a/vite.config.ts b/vite.config.ts
index 781ecc775..67d1ddc2d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,7 @@ import { createProxy } from './build/vite/proxy';
 import globbyTransform from './build/vite/plugin/transform/globby';
 import dynamicImportTransform from './build/vite/plugin/transform/dynamic-import';
 
-import { isDevFn, loadEnv } from './build/utils';
+import { loadEnv } from './build/utils';
 
 import { createRollupPlugin, createVitePlugins } from './build/vite/plugin';
 
@@ -55,7 +55,7 @@ const viteConfig: UserConfig = {
    * Available options are 'terser' or 'esbuild'.
    * @default 'terser'
    */
-  minify: isDevFn() ? false : 'terser',
+  minify: 'terser',
   /**
    * Base public path when served in production.
    * @default '/'
diff --git a/yarn.lock b/yarn.lock
index 05b4873d7..896fb405c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,13 +25,14 @@
   integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
 
 "@ant-design/icons-vue@^5.1.6":
-  version "5.1.6"
-  resolved "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-5.1.6.tgz#af15cbf2375d95199e90166adce4c9f6ad1c17f1"
-  integrity sha512-1KY04c/0iDM88ICdu6EW2/ZPOrH+FyL0uvR350XnVqvnDiLijdcrRaLzkZgCdBcy7cy5t5+onXKocymndCOdRA==
+  version "5.1.7"
+  resolved "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-5.1.7.tgz#5f8e26b547c3ecc16c0820152b935e8a44b5fad3"
+  integrity sha512-6UN/FydLs/bHC0WZxgSpdk0Ct8Ejzr7gdOx5sAIULpSprkxoHWiUbzTy8BMmUduImL42YY1L/qtZYJD6pIzmcQ==
   dependencies:
     "@ant-design/colors" "^5.0.0"
     "@ant-design/icons-svg" "^4.0.0"
     "@babel/runtime" "^7.10.4"
+    "@types/lodash" "^4.14.165"
     lodash "^4.17.15"
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
@@ -1420,7 +1421,7 @@
   dependencies:
     "@types/lodash" "*"
 
-"@types/lodash@*":
+"@types/lodash@*", "@types/lodash@^4.14.165":
   version "4.14.165"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f"
   integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg==
@@ -1959,7 +1960,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-ant-design-vue@2.0.0-rc.2:
+ant-design-vue@^2.0.0-rc.2:
   version "2.0.0-rc.2"
   resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.2.tgz#fd3b4a5a64fccbb53ed488a194317a040de2223e"
   integrity sha512-XA7X/7HHIveiTh41bZWGfoQ2Rys/rqWknK2zzdHwVnfw9ST3v+ciMKH0Uegyn7m14QL/EdUkC8zGsXpiSXqKNQ==