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