feat(projects): 添加reload context

This commit is contained in:
Soybean 2021-09-18 22:16:31 +08:00
parent 99adbc5a30
commit 03ebd49c86
17 changed files with 354 additions and 228 deletions

View File

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

File diff suppressed because it is too large Load Diff

View File

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

10
src/context/app/index.ts Normal file
View File

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

View File

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

3
src/context/index.ts Normal file
View File

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

View File

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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(() => {

View File

@ -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() {

View File

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