refactor: add loading component and demo

src/assets/images/loading.svg

@@ -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>

src/components/Application/src/AppLocalePicker.vue

@@ -1,3 +1,7 @@
+<!--
+ * @Author: Vben
+ * @Description: Multi-language switching component
+-->
 <template>
   <Dropdown
     :trigger="['click']"

src/components/Application/src/AppLogo.vue

@@ -1,3 +1,7 @@
+<!--
+ * @Author: Vben
+ * @Description: logo component
+-->
 <template>
   <div
     class="app-logo anticon"

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

src/components/Loading/BasicLoading.vue

@@ -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>

src/components/Loading/FullLoading.vue

@@ -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>

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

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

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>

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

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';
+}

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];
+}

src/components/Loading/type.ts

@@ -1,8 +0,0 @@
-import { SizeEnum } from '/@/enums/sizeEnum';
-
-export interface BasicLoadingProps {
-  // 提示语
-  tip: string;
-
-  size: SizeEnum;
-}

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

src/design/public.less

@@ -3,11 +3,6 @@
   height: 100%;
 }
 
-.app-svg-loading {
-  position: relative;
-  width: auto;
-}
-
 // =================================
 // ==============scrollbar==========
 // =================================

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

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

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

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

src/locales/lang/en/routes/demo/comp.ts

@@ -24,4 +24,6 @@ export default {
   qrcode: 'QR code',
   strength: 'Password strength',
   upload: 'Upload',
+
+  loading: 'Loading',
 };

src/locales/lang/zh_CN/routes/demo/comp.ts

@@ -24,4 +24,6 @@ export default {
   qrcode: '二维码组件',
   strength: '密码强度组件',
   upload: '上传组件',
+
+  loading: 'Loading',
 };

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',

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

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

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>