feat(projects): 添加reload context

package.json

@@ -18,7 +18,7 @@
     "*.{vue,js,jsx,ts,tsx}": "eslint --fix"
   },
   "dependencies": {
-    "@vueuse/core": "^6.3.3",
+    "@vueuse/core": "^6.4.1",
     "axios": "^0.21.4",
     "chroma-js": "^2.1.2",
     "dayjs": "^1.10.7",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@iconify/json": "^1.1.402",
+    "@iconify/json": "^1.1.403",
     "@iconify/vue": "^3.0.0",
     "@types/chroma-js": "^2.1.3",
     "@types/nprogress": "^0.2.0",
@@ -49,7 +49,7 @@
     "@vicons/material": "^0.11.0",
     "@vicons/tabler": "^0.11.0",
     "@vitejs/plugin-vue": "^1.6.2",
-    "@vue/compiler-sfc": "^3.2.11",
+    "@vue/compiler-sfc": "^3.2.12",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "commitizen": "^4.2.4",
@@ -61,17 +61,17 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.17.0",
+    "eslint-plugin-vue": "^7.18.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.4.0",
-    "sass": "^1.41.0",
+    "prettier": "^2.4.1",
+    "sass": "^1.41.1",
     "typescript": "^4.4.3",
     "unplugin-icons": "^0.11.1",
     "unplugin-vue-components": "^0.15.1",
-    "vite": "^2.5.7",
+    "vite": "^2.5.8",
     "vite-plugin-html": "^2.1.0",
     "vite-plugin-windicss": "^1.4.3",
     "vue-tsc": "^0.3.0",

src/App.vue

@@ -5,6 +5,9 @@
 </template>
 
 <script lang="ts" setup>
+import { setupAppContext } from '@/context';
 import AppProvider from './AppProvider.vue';
+
+setupAppContext();
 </script>
 <style></style>

src/context/app/index.ts

@@ -0,0 +1,10 @@
+import useReloadContext from './useReloadContext';
+
+const { useReloadProvide, useReloadInject } = useReloadContext();
+
+/** 从App组件注入provide */
+function setupAppContext() {
+  useReloadProvide();
+}
+
+export { setupAppContext, useReloadInject };

src/context/app/useReloadContext.ts

@@ -0,0 +1,36 @@
+import { ref, nextTick } from 'vue';
+import type { Ref } from 'vue';
+import { useContext } from '@/hooks';
+
+interface ReloadContext {
+  reload: Ref<boolean>;
+  handleReload(): void;
+}
+const { useProvide, useInject: useReloadInject } = useContext<ReloadContext>();
+
+/** 重载上下文 */
+export default function useReloadContext() {
+  const reload = ref(true);
+  function handleReload() {
+    reload.value = false;
+    nextTick(() => {
+      nextTick(() => {
+        reload.value = true;
+      });
+    });
+  }
+  const context: ReloadContext = {
+    reload,
+    handleReload
+  };
+
+  function useReloadProvide() {
+    useProvide(context);
+  }
+
+  return {
+    context,
+    useReloadProvide,
+    useReloadInject
+  };
+}

src/context/index.ts

@@ -0,0 +1,3 @@
+import { setupAppContext, useReloadInject } from './app';
+
+export { setupAppContext, useReloadInject };

src/hooks/common/index.ts

@@ -1,7 +1,7 @@
 import useAppTitle from './useAppTitle';
-import useCreateContext from './useCreateContext';
+import useContext from './useContext';
 import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
 import useRouteQuery from './useRouteQuery';
 
-export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useRouteQuery };
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery };

src/hooks/common/useContext.ts

@@ -0,0 +1,20 @@
+import { provide, inject } from 'vue';
+import type { InjectionKey } from 'vue';
+
+/** 创建共享上下文状态 */
+export default function useContext<T>(contextName: string = 'context') {
+  const injectKey: InjectionKey<T> = Symbol(contextName);
+
+  function useProvide(context: T) {
+    provide(injectKey, context);
+  }
+
+  function useInject() {
+    return inject(injectKey)!;
+  }
+
+  return {
+    useProvide,
+    useInject
+  };
+}

src/hooks/common/useCreateContext.ts

@@ -1,20 +0,0 @@
-import { provide, inject } from 'vue';
-import type { InjectionKey } from 'vue';
-
-/** 创建共享上下文状态 */
-export default function useCreateContext<T>(contextName: string = 'context') {
-  const injectKey: InjectionKey<T> = Symbol(contextName);
-
-  function useProvider(shareState: T) {
-    provide(injectKey, shareState);
-  }
-
-  function useContext() {
-    return inject(injectKey);
-  }
-
-  return {
-    useProvider,
-    useContext
-  };
-}

src/hooks/index.ts

@@ -1,2 +1,2 @@
-export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useRouteQuery } from './common';
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery } from './common';
 export { useCountDown, useSmsCode } from './business';

src/layouts/BasicLayout/components/GlobalTab/components/CardTab.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -19,6 +19,7 @@
         {{ item.meta?.title }}
       </n-tag>
     </n-space>
+    <h3>{{ reload }}</h3>
     <div class="flex-center w-32px h-32px bg-white cursor-pointer" @click="handleReload">
       <icon-mdi-refresh class="text-16px" />
     </div>
@@ -30,7 +31,8 @@ import { computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { NSpace, NTag } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
-import { useRouterChange } from '@/hooks';
+// import { useRouterChange } from '@/hooks';
+import { useReloadInject } from '@/context';
 import { ROUTE_HOME } from '@/router';
 
 defineProps({
@@ -44,7 +46,8 @@ const route = useRoute();
 const theme = useThemeStore();
 const app = useAppStore();
 const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
-const { toReload } = useRouterChange();
+// const { toReload } = useRouterChange();
+const { reload, handleReload } = useReloadInject();
 
 const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');
 const multiTabHeight = computed(() => {
@@ -56,9 +59,9 @@ const headerHeight = computed(() => {
   return `${height}px`;
 });
 
-function handleReload() {
-  toReload(route.fullPath);
-}
+// async function handleReload() {
+//   // toReload(route.fullPath);
+// }
 
 function init() {
   initMultiTab();

src/layouts/BasicLayout/index.vue

@@ -19,9 +19,9 @@
           <n-layout-content class="flex-auto" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
             <router-view v-slot="{ Component }">
               <keep-alive>
-                <component :is="Component" v-if="routeProps.keepAlive" :key="routeProps.name" />
+                <component :is="Component" v-if="routeProps.keepAlive && reload" :key="routeProps.name" />
               </keep-alive>
-              <component :is="Component" v-if="!routeProps.keepAlive" :key="routeProps.name" />
+              <component :is="Component" v-if="!routeProps.keepAlive && reload" :key="routeProps.name" />
             </router-view>
           </n-layout-content>
           <global-footer />
@@ -36,12 +36,14 @@
 import { computed } from 'vue';
 import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
 import { useThemeStore } from '@/store';
+import { useReloadInject } from '@/context';
 import { GlobalSider, GlobalHeader, GlobalTab, GlobalFooter, SettingDrawer } from './components';
 import { useRouteProps, useScrollBehavior } from '../composables';
 
 const theme = useThemeStore();
 const { scrollbar } = useScrollBehavior();
 const routeProps = useRouteProps();
+const { reload } = useReloadInject();
 
 const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
 const headerAndMultiTabHeight = computed(() => {

src/store/modules/app/index.ts

@@ -122,10 +122,11 @@ const appStore = defineStore({
       this.setActiveMultiTab(currentRoute.value.fullPath);
     },
     /** 重新加载页面 */
-    async handleReload() {
+    handleReload() {
       this.reloadFlag = false;
-      await nextTick();
-      this.reloadFlag = true;
+      nextTick(() => {
+        this.reloadFlag = true;
+      });
     },
     /** 打开配置抽屉 */
     openSettingDrawer() {

src/views/dashboard/workbench/index.vue

@@ -10,11 +10,19 @@
         <n-button type="warning">Warning</n-button>
         <n-button type="error">Error</n-button>
       </n-space>
+      <n-spin v-show="loading" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NGradientText, NSpace, NButton } from 'naive-ui';
+import { ref } from 'vue';
+import { NGradientText, NSpace, NButton, NSpin } from 'naive-ui';
+
+const loading = ref(true);
+
+setTimeout(() => {
+  loading.value = false;
+}, 1500);
 </script>
 <style scoped></style>