feat(useTitle): Add useTitle

feat(useNProgress): Add useNProgress

src/hooks/web/useAxios.ts

@@ -1,12 +1,8 @@
-import { service } from '@/plugins/axios'
+import { service } from '@/config/axios'
 
 import { AxiosPromise } from 'axios'
 
-import { useAppStoreWithOut } from '@/store/modules/app'
-
-import { config } from '@/config/axios'
-
-const appStore = useAppStoreWithOut()
+import { config } from '@/config/axios/config'
 
 const { default_headers } = config
 
@@ -22,7 +18,7 @@ export function useAxios() {
     return service({
       url: url,
       method,
-      params: appStore.getRequestTime ? { time: new Date().getTime(), ...(params || {}) } : params,
+      params,
       data,
       responseType: responseType,
       headers: {

src/hooks/web/useNProgress.ts

@@ -0,0 +1,32 @@
+import { watch, ref, nextTick, unref } from 'vue'
+import type { NProgressOptions } from 'nprogress'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import { useCssVar } from '@vueuse/core'
+
+const primaryColor = useCssVar('--el-color-primary', document.documentElement)
+
+export function useNProgress() {
+  const isLoading = ref(false)
+  NProgress.configure({ showSpinner: false } as NProgressOptions)
+
+  watch(
+    () => isLoading.value,
+    async (loading: boolean) => {
+      loading ? NProgress.start() : NProgress.done()
+      await nextTick()
+      const bar = document.getElementById('nprogress')?.getElementsByClassName('bar')[0] as ElRef
+      if (bar) {
+        bar.style.background = unref(primaryColor.value)
+      }
+    }
+  )
+
+  function toggle() {
+    isLoading.value = !isLoading.value
+  }
+
+  return {
+    toggle
+  }
+}

src/hooks/web/useTitle.ts

@@ -0,0 +1,25 @@
+import { watch, ref } from 'vue'
+import { isString } from '@/utils/is'
+import { useAppStoreWithOut } from '@/store/modules/app'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const appStore = useAppStoreWithOut()
+
+export function useTitle(newTitle?: string) {
+  const { t } = useI18n()
+  const title = ref(
+    newTitle ? `${appStore.getTitle} - ${t(newTitle as string)}` : appStore.getTitle
+  )
+
+  watch(
+    title,
+    (n, o) => {
+      if (isString(n) && n !== o && document) {
+        document.title = n
+      }
+    },
+    { immediate: true }
+  )
+
+  return title
+}