❄️ refactor: provider naive wrapper

pdsuwwz · May 29, 2024 · 7220043 · 7220043
1 parent 6dccb80
commit 7220043
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 67 deletions.
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
@@ -325,6 +325,10 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "NotificationPlacement": true,
+    "reloadRouterViewInjectionKey": true,
+    "useApplyForceReload": true,
+    "useRegisterForceReload": true
   }
 }
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -95,6 +95,7 @@ declare global {
   const refDefault: typeof import('@vueuse/core')['refDefault']
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const reloadRouterViewInjectionKey: typeof import('./src/hooks/useForceReload')['reloadRouterViewInjectionKey']
   const render: typeof import('vue')['render']
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
@@ -128,6 +129,7 @@ declare global {
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useApplyForceReload: typeof import('./src/hooks/useForceReload')['useApplyForceReload']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
@@ -241,6 +243,7 @@ declare global {
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useRegisterForceReload: typeof import('./src/hooks/useForceReload')['useRegisterForceReload']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
@@ -319,6 +322,9 @@ declare global {
   // @ts-ignore
   export type { RouteRecordRaw, RouteLocationRaw, LocationQuery, RouteParams, RouteLocationNormalizedLoaded, RouteRecordName, NavigationGuard } from 'vue-router'
   import('vue-router')
+  // @ts-ignore
+  export type { NotificationPlacement } from 'naive-ui'
+  import('naive-ui')
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
@@ -415,6 +421,7 @@ declare module 'vue' {
     readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
     readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
     readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly reloadRouterViewInjectionKey: UnwrapRef<typeof import('./src/hooks/useForceReload')['reloadRouterViewInjectionKey']>
     readonly render: UnwrapRef<typeof import('vue')['render']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
@@ -448,6 +455,7 @@ declare module 'vue' {
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
     readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useApplyForceReload: UnwrapRef<typeof import('./src/hooks/useForceReload')['useApplyForceReload']>
     readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
@@ -561,6 +569,7 @@ declare module 'vue' {
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useRegisterForceReload: UnwrapRef<typeof import('./src/hooks/useForceReload')['useRegisterForceReload']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
@@ -725,6 +734,7 @@ declare module '@vue/runtime-core' {
     readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
     readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
     readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly reloadRouterViewInjectionKey: UnwrapRef<typeof import('./src/hooks/useForceReload')['reloadRouterViewInjectionKey']>
     readonly render: UnwrapRef<typeof import('vue')['render']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
@@ -758,6 +768,7 @@ declare module '@vue/runtime-core' {
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
     readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useApplyForceReload: UnwrapRef<typeof import('./src/hooks/useForceReload')['useApplyForceReload']>
     readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
@@ -871,6 +882,7 @@ declare module '@vue/runtime-core' {
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useRegisterForceReload: UnwrapRef<typeof import('./src/hooks/useForceReload')['useRegisterForceReload']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>

diff --git a/src/App.vue b/src/App.vue
@@ -13,7 +13,8 @@
 </template>
 
 <script lang="ts" setup>
-import NaiveProvider from './NaiveProvider.vue'
+import NaiveProvider from './provider/NaiveProvider.vue'
+
 import { dateZhCN, zhCN } from 'naive-ui'
 
 const { theme, themeOverrides } = useTheme()

diff --git a/src/components/Layout/LayoutArea.vue b/src/components/Layout/LayoutArea.vue
@@ -22,7 +22,10 @@
             <div
               class="inner-content"
             >
-              <slot name="content"></slot>
+              <slot
+                v-if="isRouterAlive"
+                name="content"
+              ></slot>
             </div>
           </main>
         </section>
@@ -32,14 +35,15 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 
 /**
  * 上下左右布局，顶部导航 + (底部左侧侧边栏 + 底部右侧内容区域)
  */
-export default defineComponent({
-  name: 'LayoutArea'
-})
+
+const { isRouterAlive } = useRegisterForceReload()
+
+
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/Layout/LayoutView.vue b/src/components/Layout/LayoutView.vue
@@ -22,30 +22,16 @@
       </LayoutSection>
     </template>
     <template #content>
-      <router-view />
+      <Layout />
     </template>
   </LayoutArea>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 
 import NavigationSideGoBack from '@/components/Navigation/Side/SideGoBack.vue'
 import NavigationNavBar from '@/components/Navigation/NavBar.vue'
 
-export default defineComponent({
-  name: 'LayoutView',
-  components: {
-    NavigationNavBar,
-    NavigationSideGoBack
-  },
-  setup () {
-    const router = useRouter()
-
-    return {
-    }
-  }
-})
-
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/Navigation/NavBar.vue b/src/components/Navigation/NavBar.vue
@@ -18,36 +18,42 @@
       <div style="flex: 1;"></div>
       <template v-if="auth">
         <NavigationSideAction />
+        <n-tooltip>
+          强制刷新路由
+          <template #trigger>
+            <div
+              class="h-full text-1.5em i-material-symbols:refresh"
+              flex="~ items-center"
+              cursor-pointer
+              @click="reloadRouterView()"
+            >
+            </div>
+          </template>
+        </n-tooltip>
         <NavigationAvatar />
       </template>
       <NavigationChangeTheme />
     </div>
   </header>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import NavigationSideAction from '@/components/Navigation/Side/SideAction.vue'
 import NavigationAvatar from '@/components/Navigation/Avatar.vue'
 import NavigationChangeTheme from '@/components/Navigation/ChangeTheme.vue'
 
-export default defineComponent({
-  name: 'NavigationNavBar',
-  components: {
-    NavigationSideAction,
-    NavigationAvatar,
-    NavigationChangeTheme
+defineProps({
+  auth: {
+    type: Boolean,
+    default: true
   },
-  props: {
-    auth: {
-      type: Boolean,
-      default: true
-    },
-    fixed: {
-      type: Boolean,
-      default: true
-    }
+  fixed: {
+    type: Boolean,
+    default: true
   }
 })
+
+const { reloadRouterView } = useApplyForceReload()
 </script>
 <style lang="scss" scoped>
 $headerHeight: 48px;

diff --git a/src/hooks/useForceReload.ts b/src/hooks/useForceReload.ts
@@ -0,0 +1,41 @@
+import { useChangeNotifyPlacement } from '@/provider/context'
+
+/**
+ * 强制刷新 Layout View 路由
+ */
+export type ReloadRouterViewApiInjection = () => void
+export const reloadRouterViewInjectionKey: InjectionKey<ReloadRouterViewApiInjection> = Symbol()
+
+export const useRegisterForceReload = () => {
+  const isRouterAlive = ref(true)
+
+  const { changeNotifyPlacement } = useChangeNotifyPlacement()
+  const reloadRouterView = () => {
+    isRouterAlive.value = false
+    nextTick(() => {
+      changeNotifyPlacement('bottom-right')
+      window.$ModalNotification.destroyAll()
+      window.$ModalNotification.success({
+        title: '页面刷新成功',
+        duration: 800,
+        closable: true
+      })
+      isRouterAlive.value = true
+    })
+  }
+
+  provide(reloadRouterViewInjectionKey, reloadRouterView)
+
+  return {
+    isRouterAlive,
+    reloadRouterView
+  }
+}
+
+export const useApplyForceReload = () => {
+  const reloadRouterView = inject(reloadRouterViewInjectionKey)!
+
+  return {
+    reloadRouterView
+  }
+}
diff --git a/src/NaiveProvider.vue → src/provider/NaiveProvider.vue b/src/NaiveProvider.vue → src/provider/NaiveProvider.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-
-import { DrawerProvider, useDrawer } from '@/components/Drawer'
+import {
+  DrawerProvider,
+  useDrawer
+} from '@/components/Drawer'
+import { useNotifyPlacement } from './context'
 
 function registerNaiveTools () {
   window.$ModalMessage = useMessage()
@@ -12,23 +15,26 @@ function registerNaiveTools () {
 
 const NaiveProviderWrapper = defineComponent({
   name: 'NaiveProviderWrapper',
-  setup() {
+  setup(props, { slots }) {
     registerNaiveTools()
-  },
-  render() {
-    return h('div')
+    return () => h(slots.default!)
   }
 })
+
+const { notifyPlacement } = useNotifyPlacement()
 </script>
 
 <template>
   <DrawerProvider>
     <NLoadingBarProvider>
       <NDialogProvider>
-        <NNotificationProvider>
+        <NNotificationProvider
+          :placement="notifyPlacement"
+        >
           <NMessageProvider>
-            <slot></slot>
-            <NaiveProviderWrapper />
+            <NaiveProviderWrapper>
+              <slot></slot>
+            </NaiveProviderWrapper>
           </NMessageProvider>
         </NNotificationProvider>
       </NDialogProvider>

diff --git a/src/provider/context.ts b/src/provider/context.ts
@@ -0,0 +1,25 @@
+import type { InjectionKey } from 'vue'
+
+type NotifyPlacementInjection = (placement: NotificationPlacement) => void
+
+export const notifyPlacementInjectionKey: InjectionKey<NotifyPlacementInjection> = Symbol()
+
+export const useNotifyPlacement = () => {
+  const placement = ref<NotificationPlacement>('top-right')
+
+  const emitChangeNotifyPlacement = (pt: NotificationPlacement) => {
+    placement.value = pt
+  }
+  provide(notifyPlacementInjectionKey, emitChangeNotifyPlacement)
+
+  return {
+    notifyPlacement: placement
+  }
+}
+
+export const useChangeNotifyPlacement = () => {
+  const changeNotifyPlacement = inject(notifyPlacementInjectionKey)!
+  return {
+    changeNotifyPlacement
+  }
+}
diff --git a/src/router/child-routes.ts b/src/router/child-routes.ts
@@ -63,28 +63,30 @@ const childrenRoutes: Array<RouteRecordRaw> = [
     path: '/result',
     redirect: {
       name: 'ProjectList'
-    }
-  },
-  {
-    path: '/result/:projectId',
-    component: LayoutView,
-    name: 'result',
-    redirect: {
-      name: 'ResultOverview'
     },
     children: [
       {
-        path: 'overview',
-        name: 'ResultOverview',
-        component: () => import('@/modules/Result/pages/overview.vue'),
-        meta: {
-          title: '总览'
+        path: ':projectId',
+        component: LayoutView,
+        name: 'result',
+        redirect: {
+          name: 'ResultOverview'
         },
         children: [
           {
-            path: '',
+            path: 'overview',
             name: 'ResultOverview',
-            component: () => import('@/modules/Result/pages/overview.vue')
+            component: () => import('@/modules/Result/pages/overview.vue'),
+            meta: {
+              title: '总览'
+            },
+            children: [
+              {
+                path: '',
+                name: 'ResultOverview',
+                component: () => import('@/modules/Result/pages/overview.vue')
+              }
+            ]
           }
         ]
       }