提交 41d79008 作者: vben

refactor: refactor setting

上级 0692b479
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
### ✨ Refactor ### ✨ Refactor
- 重构整体 layout。更改代码实现方式。代码更精简 - 重构整体 layout。更改代码实现方式。代码更精简
- 配置项重构
### ✨ Features ### ✨ Features
...@@ -11,6 +12,7 @@ ...@@ -11,6 +12,7 @@
### 🎫 Chores ### 🎫 Chores
- 移除 messageSetting 配置 - 移除 messageSetting 配置
- 更新 antdv 到`2.0.0-rc.2`
- 暂时删除 `@vueuse/core`.等稳定后在集成。目前不太稳定。 - 暂时删除 `@vueuse/core`.等稳定后在集成。目前不太稳定。
## 2.0.0-rc.11 (2020-11-18) ## 2.0.0-rc.11 (2020-11-18)
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
}, },
"dependencies": { "dependencies": {
"@iconify/iconify": "^2.0.0-rc.2", "@iconify/iconify": "^2.0.0-rc.2",
"ant-design-vue": "2.0.0-beta.15", "ant-design-vue": "2.0.0-rc.2",
"apexcharts": "3.22.0", "apexcharts": "3.22.0",
"axios": "^0.21.0", "axios": "^0.21.0",
"crypto-es": "^1.2.6", "crypto-es": "^1.2.6",
......
...@@ -5,9 +5,8 @@ export const createContext = <T>( ...@@ -5,9 +5,8 @@ export const createContext = <T>(
contextInjectKey: InjectionKey<T> = Symbol(), contextInjectKey: InjectionKey<T> = Symbol(),
_readonly = true _readonly = true
) => { ) => {
const state = reactive({ const state = reactive({ ...context });
...context,
});
const provideData = _readonly ? readonly(state) : state; const provideData = _readonly ? readonly(state) : state;
provide(contextInjectKey, provideData); provide(contextInjectKey, provideData);
}; };
......
...@@ -12,16 +12,10 @@ type RootSetting = Omit< ...@@ -12,16 +12,10 @@ type RootSetting = Omit<
export function useRootSetting() { export function useRootSetting() {
const getRootSetting = computed((): RootSetting => appStore.getProjectConfig); const getRootSetting = computed((): RootSetting => appStore.getProjectConfig);
const getOpenPageLoading = computed(() => unref(getRootSetting).openPageLoading);
const getPageLoading = computed(() => appStore.getPageLoading); const getPageLoading = computed(() => appStore.getPageLoading);
const getOpenRouterTransition = computed(() => unref(getRootSetting).openRouterTransition);
const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive); const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive);
const getRouterTransition = computed(() => unref(getRootSetting).routerTransition);
const getCanEmbedIFramePage = computed(() => unref(getRootSetting).canEmbedIFramePage); const getCanEmbedIFramePage = computed(() => unref(getRootSetting).canEmbedIFramePage);
const getPermissionMode = computed(() => unref(getRootSetting).permissionMode); const getPermissionMode = computed(() => unref(getRootSetting).permissionMode);
...@@ -65,10 +59,7 @@ export function useRootSetting() { ...@@ -65,10 +59,7 @@ export function useRootSetting() {
getRootSetting, getRootSetting,
getLayoutContentMode, getLayoutContentMode,
getPageLoading, getPageLoading,
getOpenPageLoading,
getOpenRouterTransition,
getOpenKeepAlive, getOpenKeepAlive,
getRouterTransition,
getCanEmbedIFramePage, getCanEmbedIFramePage,
getPermissionMode, getPermissionMode,
getShowLogo, getShowLogo,
......
import type { TransitionSetting } from '/@/types/config';
import { computed, unref } from 'vue';
import { appStore } from '/@/store/modules/app';
export function useTransitionSetting() {
const getTransitionSetting = computed(() => appStore.getProjectConfig.transitionSetting);
const getEnableTransition = computed(() => unref(getTransitionSetting).enable);
const getOpenNProgress = computed(() => unref(getTransitionSetting)?.openNProgress);
const getOpenPageLoading = computed(() => {
return unref(getTransitionSetting)?.openPageLoading && unref(getEnableTransition);
});
const getBasicTransition = computed(() => unref(getTransitionSetting)?.basicTransition);
function setTransitionSetting(transitionSetting: Partial<TransitionSetting>) {
appStore.commitProjectConfigState({ transitionSetting });
}
return {
setTransitionSetting,
getTransitionSetting,
getEnableTransition,
getOpenNProgress,
getOpenPageLoading,
getBasicTransition,
};
}
...@@ -11,11 +11,15 @@ ...@@ -11,11 +11,15 @@
} }
&__loading { &__loading {
position: fixed; position: absolute;
z-index: @page-loading-z-index; z-index: @page-loading-z-index;
&.fill {
background: rgba(240, 242, 245) !important;
}
> .basic-loading { > .basic-loading {
margin-bottom: 20%; margin-bottom: 30%;
} }
} }
} }
import './index.less'; import './index.less';
import { defineComponent, unref } from 'vue'; import { defineComponent, unref, computed } from 'vue';
import { FullLoading } from '/@/components/Loading/index'; import { FullLoading } from '/@/components/Loading/index';
import { RouterView } from 'vue-router'; import { RouterView } from 'vue-router';
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
export default defineComponent({ export default defineComponent({
name: 'LayoutContent', name: 'LayoutContent',
setup() { setup() {
const { getOpenPageLoading, getLayoutContentMode, getPageLoading } = useRootSetting(); const { getOpenPageLoading } = useTransitionSetting();
const { getShowMultipleTab } = useMultipleTabSetting();
const { getLayoutContentMode, getPageLoading } = useRootSetting();
const getLoadingClass = computed(() => {
return [
`layout-content__loading`,
{ fill: unref(getShowMultipleTab), hidden: !unref(getPageLoading) },
];
});
return () => { return () => {
return ( return (
<div class={['layout-content', unref(getLayoutContentMode)]}> <div class={['layout-content', unref(getLayoutContentMode)]}>
{unref(getOpenPageLoading) && ( {unref(getOpenPageLoading) && <FullLoading class={unref(getLoadingClass)} />}
<FullLoading class={[`layout-content__loading`, { hidden: !unref(getPageLoading) }]} />
)}
<RouterView /> <RouterView />
</div> </div>
); );
......
...@@ -24,14 +24,13 @@ export default defineComponent({ ...@@ -24,14 +24,13 @@ export default defineComponent({
name: 'MultiTabs', name: 'MultiTabs',
setup() { setup() {
let isAddAffix = false; let isAddAffix = false;
const go = useGo(); const go = useGo();
const { currentRoute } = useRouter(); const { currentRoute } = useRouter();
const { activeKeyRef } = useTabs(); const { activeKeyRef } = useTabs();
// 当前tab列表 const getTabsState = computed(() => tabStore.getTabsState);
const getTabsState = computed(() => {
return tabStore.getTabsState;
});
// If you monitor routing changes, tab switching will be stuck. So setting this method // If you monitor routing changes, tab switching will be stuck. So setting this method
watch( watch(
...@@ -43,6 +42,7 @@ export default defineComponent({ ...@@ -43,6 +42,7 @@ export default defineComponent({
} }
const lastChangeRoute = unref(tabStore.getLastChangeRouteState); const lastChangeRoute = unref(tabStore.getLastChangeRouteState);
if (!lastChangeRoute || !userStore.getTokenState) return; if (!lastChangeRoute || !userStore.getTokenState) return;
const { path, fullPath } = lastChangeRoute; const { path, fullPath } = lastChangeRoute;
......
...@@ -17,6 +17,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting'; ...@@ -17,6 +17,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { updateColorWeak, updateGrayMode } from '/@/setup/theme'; import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
...@@ -177,9 +178,6 @@ export default defineComponent({ ...@@ -177,9 +178,6 @@ export default defineComponent({
setup(_, { attrs }) { setup(_, { attrs }) {
const { const {
getContentMode, getContentMode,
getRouterTransition,
getOpenRouterTransition,
getOpenPageLoading,
getShowFooter, getShowFooter,
getShowBreadCrumb, getShowBreadCrumb,
getShowBreadCrumbIcon, getShowBreadCrumbIcon,
...@@ -190,6 +188,13 @@ export default defineComponent({ ...@@ -190,6 +188,13 @@ export default defineComponent({
} = useRootSetting(); } = useRootSetting();
const { const {
getOpenPageLoading,
getBasicTransition,
getEnableTransition,
getOpenNProgress,
} = useTransitionSetting();
const {
getIsHorizontal, getIsHorizontal,
getShowMenu, getShowMenu,
getMenuType, getMenuType,
...@@ -447,27 +452,34 @@ export default defineComponent({ ...@@ -447,27 +452,34 @@ export default defineComponent({
function renderTransition() { function renderTransition() {
return ( return (
<> <>
{renderSwitchItem('页面切换loading', { {renderSwitchItem('顶部进度条', {
handler: (e) => {
baseHandler(HandlerEnum.OPEN_PROGRESS, e);
},
def: unref(getOpenNProgress),
})}
{renderSwitchItem('切换loading', {
handler: (e) => { handler: (e) => {
baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e); baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e);
}, },
def: unref(getOpenPageLoading), def: unref(getOpenPageLoading),
disabled: !unref(getEnableTransition),
})} })}
{renderSwitchItem('切换动画', { {renderSwitchItem('切换动画', {
handler: (e) => { handler: (e) => {
baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e); baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
}, },
def: unref(getOpenRouterTransition), def: unref(getEnableTransition),
})} })}
{renderSelectItem('路由动画', { {renderSelectItem('动画类型', {
handler: (e) => { handler: (e) => {
baseHandler(HandlerEnum.ROUTER_TRANSITION, e); baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
}, },
def: unref(getRouterTransition), def: unref(getBasicTransition),
options: routerTransitionOptions, options: routerTransitionOptions,
disabled: !unref(getOpenRouterTransition), disabled: !unref(getEnableTransition),
})} })}
</> </>
); );
......
...@@ -29,9 +29,6 @@ export enum HandlerEnum { ...@@ -29,9 +29,6 @@ export enum HandlerEnum {
TABS_SHOW_QUICK, TABS_SHOW_QUICK,
TABS_SHOW, TABS_SHOW,
OPEN_PAGE_LOADING,
OPEN_ROUTE_TRANSITION,
ROUTER_TRANSITION,
LOCK_TIME, LOCK_TIME,
FULL_CONTENT, FULL_CONTENT,
CONTENT_MODE, CONTENT_MODE,
...@@ -41,6 +38,11 @@ export enum HandlerEnum { ...@@ -41,6 +38,11 @@ export enum HandlerEnum {
COLOR_WEAK, COLOR_WEAK,
SHOW_LOGO, SHOW_LOGO,
SHOW_FOOTER, SHOW_FOOTER,
ROUTER_TRANSITION,
OPEN_PROGRESS,
OPEN_PAGE_LOADING,
OPEN_ROUTE_TRANSITION,
} }
export const themeOptions = [ export const themeOptions = [
......
...@@ -66,17 +66,20 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf ...@@ -66,17 +66,20 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
case HandlerEnum.MENU_SHOW_SEARCH: case HandlerEnum.MENU_SHOW_SEARCH:
return { menuSetting: { showSearch: value } }; return { menuSetting: { showSearch: value } };
// ============root================== // ============transition==================
case HandlerEnum.OPEN_PAGE_LOADING: case HandlerEnum.OPEN_PAGE_LOADING:
appStore.commitPageLoadingState(false); appStore.commitPageLoadingState(false);
return { openPageLoading: value }; return { transitionSetting: { openPageLoading: value } };
case HandlerEnum.ROUTER_TRANSITION:
return { transitionSetting: { basicTransition: value } };
case HandlerEnum.OPEN_ROUTE_TRANSITION: case HandlerEnum.OPEN_ROUTE_TRANSITION:
return { openRouterTransition: value }; return { transitionSetting: { enable: value } };
case HandlerEnum.ROUTER_TRANSITION: case HandlerEnum.OPEN_PROGRESS:
return { routerTransition: value }; return { transitionSetting: { openNProgress: value } };
// ============root==================
case HandlerEnum.LOCK_TIME: case HandlerEnum.LOCK_TIME:
return { lockTime: value }; return { lockTime: value };
......
...@@ -11,6 +11,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting'; ...@@ -11,6 +11,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { tabStore } from '/@/store/modules/tab'; import { tabStore } from '/@/store/modules/tab';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
interface DefaultContext { interface DefaultContext {
Component: FunctionalComponent; Component: FunctionalComponent;
...@@ -21,12 +22,9 @@ export default defineComponent({ ...@@ -21,12 +22,9 @@ export default defineComponent({
name: 'PageLayout', name: 'PageLayout',
setup() { setup() {
const { getShowMenu } = useMenuSetting(); const { getShowMenu } = useMenuSetting();
const { const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
getOpenKeepAlive,
getRouterTransition, const { getBasicTransition, getEnableTransition } = useTransitionSetting();
getOpenRouterTransition,
getCanEmbedIFramePage,
} = useRootSetting();
const { getMax } = useMultipleTabSetting(); const { getMax } = useMultipleTabSetting();
...@@ -45,7 +43,7 @@ export default defineComponent({ ...@@ -45,7 +43,7 @@ export default defineComponent({
// No longer show animations that are already in the tab // No longer show animations that are already in the tab
const cacheTabs = unref(getCacheTabsRef); const cacheTabs = unref(getCacheTabsRef);
const isInCache = cacheTabs.includes(route.name as string); const isInCache = cacheTabs.includes(route.name as string);
const name = isInCache && route.meta.inTab ? 'fade' : null; const name = isInCache && route.meta.inTab ? 'fade-slide' : null;
const renderComp = () => <Component key={route.fullPath} />; const renderComp = () => <Component key={route.fullPath} />;
...@@ -57,10 +55,10 @@ export default defineComponent({ ...@@ -57,10 +55,10 @@ export default defineComponent({
renderComp() renderComp()
); );
return unref(getOpenRouterTransition) ? ( return unref(getEnableTransition) ? (
<Transition <Transition
{...transitionEvent} {...transitionEvent}
name={name || route.meta.transitionName || unref(getRouterTransition)} name={name || route.meta.transitionName || unref(getBasicTransition)}
mode="out-in" mode="out-in"
appear={true} appear={true}
> >
......
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { appStore } from '/@/store/modules/app'; import { appStore } from '/@/store/modules/app';
import { tryOnUnmounted } from '/@/utils/helper/vueHelper'; import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
export function useTransition() { export function useTransition() {
function handleAfterEnter() { function handleAfterEnter() {
const { getOpenPageLoading, getOpenRouterTransition } = useRootSetting(); const { getOpenPageLoading, getEnableTransition } = useTransitionSetting();
if (!getOpenPageLoading.value || !getOpenRouterTransition.value) return; if (!getOpenPageLoading.value || !getEnableTransition.value) return;
// Close loading after the route switching animation ends // Close loading after the route switching animation ends
appStore.setPageLoadingAction(false); appStore.setPageLoadingAction(false);
} }
......
...@@ -16,7 +16,7 @@ import { tabStore } from '/@/store/modules/tab'; ...@@ -16,7 +16,7 @@ import { tabStore } from '/@/store/modules/tab';
const globSetting = useGlobSetting(); const globSetting = useGlobSetting();
export function createGuard(router: Router) { export function createGuard(router: Router) {
const { openNProgress, closeMessageOnSwitch, removeAllHttpPending } = useProjectSetting(); const { closeMessageOnSwitch, removeAllHttpPending } = useProjectSetting();
let axiosCanceler: AxiosCanceler | null; let axiosCanceler: AxiosCanceler | null;
if (removeAllHttpPending) { if (removeAllHttpPending) {
axiosCanceler = new AxiosCanceler(); axiosCanceler = new AxiosCanceler();
...@@ -44,7 +44,6 @@ export function createGuard(router: Router) { ...@@ -44,7 +44,6 @@ export function createGuard(router: Router) {
Modal.destroyAll(); Modal.destroyAll();
notification.destroy(); notification.destroy();
} }
// TODO Some special interfaces require long connections
// Switching the route will delete the previous request // Switching the route will delete the previous request
removeAllHttpPending && axiosCanceler!.removeAllPending(); removeAllHttpPending && axiosCanceler!.removeAllPending();
} catch (error) { } catch (error) {
...@@ -58,7 +57,6 @@ export function createGuard(router: Router) { ...@@ -58,7 +57,6 @@ export function createGuard(router: Router) {
// change html title // change html title
setTitle(to.meta.title, globSetting.title); setTitle(to.meta.title, globSetting.title);
}); });
createProgressGuard(router);
openNProgress && createProgressGuard(router);
createPermissionGuard(router); createPermissionGuard(router);
} }
...@@ -3,20 +3,18 @@ import { tabStore } from '/@/store/modules/tab'; ...@@ -3,20 +3,18 @@ import { tabStore } from '/@/store/modules/tab';
import { appStore } from '/@/store/modules/app'; import { appStore } from '/@/store/modules/app';
import { userStore } from '/@/store/modules/user'; import { userStore } from '/@/store/modules/user';
import { getParams } from '/@/utils/helper/routeHelper'; import { getParams } from '/@/utils/helper/routeHelper';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { unref } from 'vue';
const { getOpenPageLoading, getEnableTransition } = useTransitionSetting();
export function createPageLoadingGuard(router: Router) { export function createPageLoadingGuard(router: Router) {
let isFirstLoad = true; let isFirstLoad = true;
router.beforeEach(async (to) => { router.beforeEach(async (to) => {
const { const { openKeepAlive, multiTabsSetting: { show } = {} } = appStore.getProjectConfig;
openKeepAlive,
openRouterTransition,
openPageLoading,
multiTabsSetting: { show } = {},
} = appStore.getProjectConfig;
if (!userStore.getTokenState) { if (!userStore.getTokenState) {
return true; return true;
} }
if (!openRouterTransition && openPageLoading) { if (!unref(getEnableTransition) && unref(getOpenPageLoading)) {
appStore.commitPageLoadingState(true); appStore.commitPageLoadingState(true);
return true; return true;
} }
...@@ -32,11 +30,10 @@ export function createPageLoadingGuard(router: Router) { ...@@ -32,11 +30,10 @@ export function createPageLoadingGuard(router: Router) {
return true; return true;
}); });
router.afterEach(async (to, from) => { router.afterEach(async (to, from) => {
const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
const realToPath = to.path.replace(getParams(to), ''); const realToPath = to.path.replace(getParams(to), '');
const realFormPath = from.path.replace(getParams(from), ''); const realFormPath = from.path.replace(getParams(from), '');
if ( if (
(!openRouterTransition && openPageLoading) || (!unref(getEnableTransition) && unref(getOpenPageLoading)) ||
isFirstLoad || isFirstLoad ||
to.meta.afterCloseLoading || to.meta.afterCloseLoading ||
realToPath === realFormPath realToPath === realFormPath
......
import type { Router } from 'vue-router'; import type { Router } from 'vue-router';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import NProgress from 'nprogress'; import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; import 'nprogress/nprogress.css';
import { unref } from 'vue';
const { getOpenNProgress } = useTransitionSetting();
export function createProgressGuard(router: Router) { export function createProgressGuard(router: Router) {
// NProgress.inc(0.1); // NProgress.inc(0.1);
// NProgress.configure({ easing: 'ease', speed: 200, showSpinner: false }); // NProgress.configure({ easing: 'ease', speed: 200, showSpinner: false });
router.beforeEach(async (to) => { router.beforeEach(async (to) => {
!to.meta.inTab && NProgress.start(); !to.meta.inTab && unref(getOpenNProgress) && NProgress.start();
return true; return true;
}); });
router.afterEach(async (to) => { router.afterEach(async (to) => {
!to.meta.inTab && NProgress.done(); !to.meta.inTab && unref(getOpenNProgress) && NProgress.done();
return true; return true;
}); });
} }
...@@ -7,155 +7,158 @@ import { isProdMode } from '/@/utils/env'; ...@@ -7,155 +7,158 @@ import { isProdMode } from '/@/utils/env';
// ! You need to clear the browser cache after the change // ! You need to clear the browser cache after the change
const setting: ProjectConfig = { const setting: ProjectConfig = {
// locale setting
locale: {
// Locale
lang: 'zh_CN',
// Default locale
fallback: 'zh_CN',
// available Locales
availableLocales: ['zh_CN', 'en'],
},
// color
// TODO 主题色
themeColor: primaryColor,
// Whether to show the configuration button // Whether to show the configuration button
showSettingButton: true, showSettingButton: true,
// 权限模式 // Permission mode
permissionMode: PermissionModeEnum.ROLE, permissionMode: PermissionModeEnum.ROLE,
// 网站灰色模式,用于可能悼念的日期开启 // color
// TODO Theme color
themeColor: primaryColor,
// Website gray mode, open for possible mourning dates
grayMode: false, grayMode: false,
// 色弱模式 // Color Weakness Mode
colorWeak: false, colorWeak: false,
// 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内 // Whether to cancel the menu, the top, the multi-tab page display, for possible embedded in other systems
fullContent: false, fullContent: false,
// content mode // content mode
contentMode: ContentEnum.FULL, contentMode: ContentEnum.FULL,
// 是否显示logo // Whether to display the logo
showLogo: true, showLogo: true,
// 是否显示页脚 // Whether to show footer
showFooter: true, showFooter: true,
// 头部配置 // locale setting
locale: {
// Locale
lang: 'zh_CN',
// Default locale
fallback: 'zh_CN',
// available Locales
availableLocales: ['zh_CN', 'en'],
},
// Header configuration
headerSetting: { headerSetting: {
// header bg color // header bg color
bgColor: '#ffffff', bgColor: '#ffffff',
// Fixed at the top
fixed: true, fixed: true,
// 是否显示顶部 // Whether to show top
show: true, show: true,
// theme // theme
theme: ThemeEnum.LIGHT, theme: ThemeEnum.LIGHT,
// 开启锁屏功能 // Whether to enable the lock screen function
useLockPage: true, useLockPage: true,
// 显示刷新按钮 // Whether to show the refresh button
showRedo: true, showRedo: true,
// 显示全屏按钮 // Whether to show the full screen button
showFullScreen: true, showFullScreen: true,
// 显示文档按钮 // Whether to show the document button
showDoc: true, showDoc: true,
// 显示消息中心按钮 // Whether to show the notification button
showNotice: true, showNotice: true,
}, },
// 菜单配置 // Menu configuration
menuSetting: { menuSetting: {
// sidebar menu bg color // sidebar menu bg color
bgColor: '#273352', bgColor: '#273352',
// Whether to fix the left menu
fixed: true, fixed: true,
// 菜单折叠 // Menu collapse
collapsed: false, collapsed: false,
// 折叠菜单时候是否显示菜单名 // Whether to display the menu name when folding the menu
collapsedShowTitle: false, collapsedShowTitle: false,
// 是否可拖拽 // Whether it can be dragged
// Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
hasDrag: false, hasDrag: false,
// 是否显示 没有dom // Whether to show no dom
show: true, show: true,
// 是否显示 有dom // Whether to show dom
hidden: true, hidden: true,
// 是否显示搜索框 // Whether to show search box
showSearch: true, showSearch: true,
// 菜单宽度 // Menu width
menuWidth: 210, menuWidth: 210,
// 菜单模式 // Menu mode
mode: MenuModeEnum.INLINE, mode: MenuModeEnum.INLINE,
// 菜单类型 // Menu type
type: MenuTypeEnum.SIDEBAR, type: MenuTypeEnum.SIDEBAR,
// 菜单主题 // Menu theme
theme: ThemeEnum.DARK, theme: ThemeEnum.DARK,
// 分割菜单 // Split menu
split: false, split: false,
// 顶部菜单布局 // Top menu layout
topMenuAlign: 'center', topMenuAlign: 'center',
// 折叠菜单时候隐藏搜索框 // Hide the search box when the menu is collapsed
collapsedShowSearch: false, collapsedShowSearch: false,
// 折叠触发器的位置 // Fold trigger position
trigger: TriggerEnum.HEADER, trigger: TriggerEnum.HEADER,
// 开启手风琴模式,只显示一个菜单 // Turn on accordion mode, only show a menu
accordion: true, accordion: true,
}, },
// 多标签 // Multi-label
multiTabsSetting: { multiTabsSetting: {
// 开启 // Turn on
show: true, show: true,
// 开启快速操作 // Turn on quick actions
showQuick: true, showQuick: true,
// Maximum number of tab cache
// 标签页缓存最大数量
max: 12, max: 12,
}, },
// 是否开启KeepAlive缓存 开发时候最好关闭,不然每次都需要清除缓存 // Transition Setting
transitionSetting: {
// Whether to open the page switching animation
// The disabled state will also disable pageLoadinng
enable: true,
// Route basic switching animation
basicTransition: RouterTransitionEnum.FADE_SIDE,
// Whether to open page switching loading
// Only open when enable=true
openPageLoading: true,
// Whether to open the top progress bar
openNProgress: true,
},
// Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
openKeepAlive: true, openKeepAlive: true,
// 自动锁屏时间,为0不锁屏。 单位分钟 默认0 // Automatic screen lock time, 0 does not lock the screen. Unit minute default 0
lockTime: 0, lockTime: 0,
// 显示面包屑 // Whether to show breadcrumbs
showBreadCrumb: true, showBreadCrumb: true,
// 显示面包屑图标 // Whether to show the breadcrumb icon
showBreadCrumbIcon: false, showBreadCrumbIcon: false,
// 使用error-handler-plugin // Use error-handler-plugin
useErrorHandle: isProdMode(), useErrorHandle: isProdMode(),
// 开启页面切换动画 // Whether to open back to top
openRouterTransition: true,
// 路由切换动画
routerTransition: RouterTransitionEnum.FADE_SIDE,
// 是否开启登录安全校验
openLoginVerify: true,
// 是否开启页面切换loading
openPageLoading: true,
// 是否开启回到顶部
useOpenBackTop: true, useOpenBackTop: true,
// 开启顶部进度条 // Is it possible to embed iframe pages
openNProgress: isProdMode(),
// 是否可以嵌入iframe页面
canEmbedIFramePage: true, canEmbedIFramePage: true,
// 切换界面的时候是否删除未关闭的message及notify // Whether to delete unclosed messages and notify when switching the interface
closeMessageOnSwitch: true, closeMessageOnSwitch: true,
// 切换界面的时候是否取消已经发送但是未响应的http请求。 // Whether to cancel the http request that has been sent but not responded when switching the interface.
// 如果开启,想对单独接口覆盖。可以在单独接口设置 // If it is enabled, I want to overwrite a single interface. Can be set in a separate interface
removeAllHttpPending: true, removeAllHttpPending: true,
}; };
......
...@@ -59,6 +59,20 @@ export interface LocaleSetting { ...@@ -59,6 +59,20 @@ export interface LocaleSetting {
availableLocales: LocaleType[]; availableLocales: LocaleType[];
} }
export interface TransitionSetting {
// Whether to open the page switching animation
enable: boolean;
// Route basic switching animation
basicTransition: RouterTransitionEnum;
// Whether to open page switching loading
openPageLoading: boolean;
// Whether to open the top progress bar
openNProgress: boolean;
}
export interface ProjectConfig { export interface ProjectConfig {
locale: LocaleSetting; locale: LocaleSetting;
...@@ -86,6 +100,9 @@ export interface ProjectConfig { ...@@ -86,6 +100,9 @@ export interface ProjectConfig {
// 多标签页设置 // 多标签页设置
multiTabsSetting: MultiTabsSetting; multiTabsSetting: MultiTabsSetting;
transitionSetting: TransitionSetting;
// pageLayout是否开启keep-alive // pageLayout是否开启keep-alive
openKeepAlive: boolean; openKeepAlive: boolean;
...@@ -97,18 +114,8 @@ export interface ProjectConfig { ...@@ -97,18 +114,8 @@ export interface ProjectConfig {
showBreadCrumbIcon: boolean; showBreadCrumbIcon: boolean;
// 使用error-handler-plugin // 使用error-handler-plugin
useErrorHandle: boolean; useErrorHandle: boolean;
// 开启页面切换动画
openRouterTransition: boolean;
// 路由切换动画
routerTransition: RouterTransitionEnum;
// 是否开启登录安全校验
openLoginVerify: boolean;
// 是否开启页面切换loading
openPageLoading: boolean;
// 是否开启回到顶部 // 是否开启回到顶部
useOpenBackTop: boolean; useOpenBackTop: boolean;
// 开启顶部进度条
openNProgress: boolean;
// 是否可以嵌入iframe页面 // 是否可以嵌入iframe页面
canEmbedIFramePage: boolean; canEmbedIFramePage: boolean;
// 切换界面的时候是否删除未关闭的message及notify // 切换界面的时候是否删除未关闭的message及notify
......
...@@ -7,10 +7,13 @@ ...@@ -7,10 +7,13 @@
import { appStore } from '/@/store/modules/app'; import { appStore } from '/@/store/modules/app';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
export default defineComponent({ export default defineComponent({
name: 'Redirect', name: 'Redirect',
setup() { setup() {
const { currentRoute, replace } = useRouter(); const { currentRoute, replace } = useRouter();
const { getOpenPageLoading, getEnableTransition } = useTransitionSetting();
const { params, query } = unref(currentRoute); const { params, query } = unref(currentRoute);
const { path } = params; const { path } = params;
const _path = Array.isArray(path) ? path.join('/') : path; const _path = Array.isArray(path) ? path.join('/') : path;
...@@ -18,8 +21,7 @@ ...@@ -18,8 +21,7 @@
path: '/' + _path, path: '/' + _path,
query, query,
}); });
const { openRouterTransition, openPageLoading } = appStore.getProjectConfig; if (unref(getEnableTransition) && unref(getOpenPageLoading)) {
if (openRouterTransition && openPageLoading) {
setTimeout(() => { setTimeout(() => {
appStore.setPageLoadingAction(false); appStore.setPageLoadingAction(false);
}, 0); }, 0);
......
...@@ -12,24 +12,24 @@ ...@@ -12,24 +12,24 @@
lodash-es "^4.17.15" lodash-es "^4.17.15"
resize-observer-polyfill "^1.5.1" resize-observer-polyfill "^1.5.1"
"@ant-design/colors@^4.0.0": "@ant-design/colors@^5.0.0":
version "4.0.5" version "5.0.0"
resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-4.0.5.tgz#d7d100d7545cca8f624954604a6892fc48ba5aae" resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-5.0.0.tgz#46b73b4cc6935b35fc8b84555e8e42c8cfc190e6"
integrity sha512-3mnuX2prnWOWvpFTS2WH2LoouWlOgtnIpc6IarWN6GOzzLF8dW/U8UctuvIPhoboETehZfJ61XP+CGakBEPJ3Q== integrity sha512-Pe1rYorgVC1v4f+InDXvIlQH715pO1g7BsOhy/ehX/U6ebPKqojmkYJKU3lF+84Zmvyar7ngZ28hesAa1nWjLg==
dependencies: dependencies:
tinycolor2 "^1.4.1" "@ctrl/tinycolor" "^3.1.6"
"@ant-design/icons-svg@^4.0.0": "@ant-design/icons-svg@^4.0.0":
version "4.1.0" version "4.1.0"
resolved "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c" resolved "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ== integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
"@ant-design/icons-vue@^5.1.5": "@ant-design/icons-vue@^5.1.6":
version "5.1.5" version "5.1.6"
resolved "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-5.1.5.tgz#8e83ba90a29b7ed8b4c2e7282f5908b9b3de519b" resolved "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-5.1.6.tgz#af15cbf2375d95199e90166adce4c9f6ad1c17f1"
integrity sha512-j1qHhzFCLh4UNoOoVNDFKp4qbzX2bpc/am+rNCqNDeze/TpbQ38nSBSmNPucHuD7koQtAjBW+AIcnToYCgKvpA== integrity sha512-1KY04c/0iDM88ICdu6EW2/ZPOrH+FyL0uvR350XnVqvnDiLijdcrRaLzkZgCdBcy7cy5t5+onXKocymndCOdRA==
dependencies: dependencies:
"@ant-design/colors" "^4.0.0" "@ant-design/colors" "^5.0.0"
"@ant-design/icons-svg" "^4.0.0" "@ant-design/icons-svg" "^4.0.0"
"@babel/runtime" "^7.10.4" "@babel/runtime" "^7.10.4"
lodash "^4.17.15" lodash "^4.17.15"
...@@ -992,6 +992,11 @@ ...@@ -992,6 +992,11 @@
resolved "https://registry.npmjs.org/@commitlint/types/-/types-11.0.0.tgz#719cf05fcc1abb6533610a2e0f5dd1e61eac14fe" resolved "https://registry.npmjs.org/@commitlint/types/-/types-11.0.0.tgz#719cf05fcc1abb6533610a2e0f5dd1e61eac14fe"
integrity sha512-VoNqai1vR5anRF5Tuh/+SWDFk7xi7oMwHrHrbm1BprYXjB2RJsWLhUrStMssDxEl5lW/z3EUdg8RvH/IUBccSQ== integrity sha512-VoNqai1vR5anRF5Tuh/+SWDFk7xi7oMwHrHrbm1BprYXjB2RJsWLhUrStMssDxEl5lW/z3EUdg8RvH/IUBccSQ==
"@ctrl/tinycolor@^3.1.6":
version "3.1.7"
resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.1.7.tgz#1585f67629882002a9f8e15a2941c9a4321bf80c"
integrity sha512-/0C6fjXbCwu22k8mMsKRSAo9zgu61d2p75Or9IuIC0Vu5CWN88t2QHK93LhNnxnqHWf5SFwFU28w9cKfTmnfvg==
"@eslint/eslintrc@^0.2.1": "@eslint/eslintrc@^0.2.1":
version "0.2.1" version "0.2.1"
resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz#f72069c330461a06684d119384435e12a5d76e3c" resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz#f72069c330461a06684d119384435e12a5d76e3c"
...@@ -1847,13 +1852,13 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: ...@@ -1847,13 +1852,13 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
dependencies: dependencies:
color-convert "^2.0.1" color-convert "^2.0.1"
ant-design-vue@2.0.0-beta.15: ant-design-vue@2.0.0-rc.2:
version "2.0.0-beta.15" version "2.0.0-rc.2"
resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-beta.15.tgz#3c787dabb70a33885d0e751e58f9a5610ed06134" resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.2.tgz#fd3b4a5a64fccbb53ed488a194317a040de2223e"
integrity sha512-OxZy+ZYU3LauIL4Rhqwy441K/iD++Cit6upnQy5+LVUrX0PSObPqPqMWVpncbAmJJYTEz88gkvgGeYqBdzouWA== integrity sha512-XA7X/7HHIveiTh41bZWGfoQ2Rys/rqWknK2zzdHwVnfw9ST3v+ciMKH0Uegyn7m14QL/EdUkC8zGsXpiSXqKNQ==
dependencies: dependencies:
"@ant-design-vue/use" "^0.0.1-0" "@ant-design-vue/use" "^0.0.1-0"
"@ant-design/icons-vue" "^5.1.5" "@ant-design/icons-vue" "^5.1.6"
"@babel/runtime" "^7.10.5" "@babel/runtime" "^7.10.5"
"@simonwep/pickr" "~1.7.0" "@simonwep/pickr" "~1.7.0"
add-dom-event-listener "^1.0.2" add-dom-event-listener "^1.0.2"
...@@ -7705,11 +7710,6 @@ through@2, "through@>=2.2.7 <3", through@^2.3.6, through@^2.3.8: ...@@ -7705,11 +7710,6 @@ through@2, "through@>=2.2.7 <3", through@^2.3.6, through@^2.3.8:
resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
tinycolor2@^1.4.1:
version "1.4.2"
resolved "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
tmp@^0.0.33: tmp@^0.0.33:
version "0.0.33" version "0.0.33"
resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论