fix(toolkits/pro) prevent the ficker of some pages (opentiny#121)

packages/toolkits/pro/template/tinyvue/src/hooks/loading.ts

@@ -1,16 +1,33 @@
 import { ref } from 'vue';
 
-export default function useLoading(initValue = false) {
+/**
+ * use logding hook
+ * @param initValue 
+ * @param closeDelay the dealy time of turning off loading to prevent ficker 
+ * @returns
+ */
+export default function useLoading(initValue = false, closeDelay = 200) {
+  let preOpenTime = Date.now();
+  let closeTimer: ReturnType<typeof setTimeout> | null;
   const loading = ref(initValue);
   const setLoading = (value: boolean) => {
+    if (value) {
+      preOpenTime = Date.now();
+    } else {
+      const declinedTime = closeDelay - preOpenTime + Date.now();
+      if (declinedTime > 0) {
+        closeTimer ||
+          (closeTimer = setTimeout(() => {
+            loading.value = value;
+            closeTimer = null;
+          }, declinedTime));
+        return;
+      }
+    }
     loading.value = value;
   };
   const toggle = () => {
-    loading.value = !loading.value;
-  };
-  return {
-    loading,
-    setLoading,
-    toggle,
+    setLoading(!loading.value);
   };
+  return [loading, setLoading, toggle];
 }

packages/toolkits/pro/template/tinyvue/src/hooks/request.ts

@@ -10,14 +10,14 @@ import useLoading from './loading';
 
 export default function useRequest<T>(
   api: () => Promise<AxiosResponse<HttpResponse>>,
-  defaultValue = [] as unknown as T,
+  defaultValue = ([] as unknown) as T,
   isLoading = true
 ) {
-  const { loading, setLoading } = useLoading(isLoading);
+  const [loading, setLoading] = useLoading(isLoading);
   const response = ref<T>(defaultValue);
   api()
-    .then((res) => {
-      response.value = res.data as unknown as UnwrapRef<T>;
+    .then(res => {
+      response.value = (res.data as unknown) as UnwrapRef<T>;
     })
     .finally(() => {
       setLoading(false);

packages/toolkits/pro/template/tinyvue/src/views/login/components/login-info.vue

@@ -73,7 +73,7 @@
 
   const router = useRouter();
   const { t } = useI18n();
-  const { loading, setLoading } = useLoading();
+  const [ loading, setLoading ] = useLoading();
   const userStore = useUserStore();
   const loginFormInfo = ref();
 

packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue

@@ -72,7 +72,7 @@
 
   const router = useRouter();
   const { t } = useI18n();
-  const { loading, setLoading } = useLoading();
+  const [loading, setLoading] = useLoading();
   const userStore = useUserStore();
   const loginFormMail = ref();
 

packages/toolkits/pro/template/tinyvue/src/views/login/components/login-register.vue

@@ -79,7 +79,7 @@
 
   // 注册
   const { t } = useI18n();
-  const { loading, setLoading } = useLoading();
+  const [loading, setLoading] = useLoading();
   const ruleForm = ref();
 
   // 切换模式