feat(projects): 添加reload context
This commit is contained in:
parent
99adbc5a30
commit
03ebd49c86
14
package.json
14
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",
|
||||
|
428
pnpm-lock.yaml
428
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -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
10
src/context/app/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import useReloadContext from './useReloadContext';
|
||||
|
||||
const { useReloadProvide, useReloadInject } = useReloadContext();
|
||||
|
||||
/** 从App组件注入provide */
|
||||
function setupAppContext() {
|
||||
useReloadProvide();
|
||||
}
|
||||
|
||||
export { setupAppContext, useReloadInject };
|
36
src/context/app/useReloadContext.ts
Normal file
36
src/context/app/useReloadContext.ts
Normal 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
3
src/context/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { setupAppContext, useReloadInject } from './app';
|
||||
|
||||
export { setupAppContext, useReloadInject };
|
0
src/context/part/index.ts
Normal file
0
src/context/part/index.ts
Normal 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 };
|
||||
|
20
src/hooks/common/useContext.ts
Normal file
20
src/hooks/common/useContext.ts
Normal 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
|
||||
};
|
||||
}
|
@ -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
|
||||
};
|
||||
}
|
@ -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';
|
||||
|
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<style scoped></style>
|
@ -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();
|
||||
|
@ -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(() => {
|
||||
|
@ -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() {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user