refactor: add loading component and demo

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

src/setup/ant-design-vue/spin.tsx

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

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

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;

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