github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 14:13:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(layout): add mix sidebar mode

Browse Source
This commit is contained in:
vben
2020-12-21 23:38:16 +08:00
parent 2e79c9f37a
commit e6db0d39b9
64 changed files with 1520 additions and 1087 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/assets/images/layout/menu-mix.svg
View File

@@ -1,39 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-18" fill="#fff" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

39
src/assets/images/layout/menu-sidebar.svg
View File

@@ -1,39 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

39
src/assets/images/layout/menu-top.svg
View File

@@ -1,39 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1254.000000, -337.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 338.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

19
src/components/Application/src/AppLogo.vue
View File

@@ -3,14 +3,10 @@
* @Description: logo component
-->
<template>
<div
class="anticon"
:class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
@click="handleGoHome"
>
<div class="anticon" :class="[prefixCls, theme]" @click="handleGoHome">
<img src="/@/assets/images/logo.png" />
<div class="ml-2 ellipsis" :class="[`${prefixCls}__title`]" v-show="showTitle">
{{ globSetting.title }}
{{ title }}
</div>
</div>
</template>
@@ -40,9 +36,7 @@
setup() {
const { prefixCls } = useDesign('app-logo');
const { getCollapsedShowTitle } = useMenuSetting();
const globSetting = useGlobSetting();
const { title } = useGlobSetting();
const go = useGo();
@@ -52,8 +46,7 @@
return {
handleGoHome,
globSetting,
getCollapsedShowTitle,
title,
prefixCls,
};
},
@@ -70,10 +63,6 @@
cursor: pointer;
transition: all 0.2s ease;
&.collapsed-show-title {
padding-left: 20px;
}
&.light {
border-bottom: 1px solid @border-color-base;
}

2
src/components/Application/src/search/AppSearchModal.vue
View File

@@ -65,10 +65,12 @@
import { useI18n } from '/@/hooks/web/useI18n';
import { ClickOutSide } from '/@/components/ClickOutSide';
import { useAppInject } from '/@/hooks/web/useAppInject';
export default defineComponent({
name: 'AppSearchModal',
components: { SearchOutlined, ClickOutSide, AppSearchFooter },
emits: ['close'],
props: {
visible: Boolean,
},

7
src/components/ClickOutSide/src/index.vue
View File

@@ -3,12 +3,13 @@
</template>
<script lang="ts">
import type { Ref } from 'vue';
import { defineComponent, ref } from 'vue';
import { defineComponent, ref, onMounted } from 'vue';
import { useClickOutside } from '/@/hooks/web/useClickOutside';
export default defineComponent({
name: 'ClickOutSide',
emits: ['mounted', 'clickOutside'],
setup(_, { emit }) {
const wrap = ref<ElRef>(null);
@@ -16,6 +17,10 @@
emit('clickOutside');
});
onMounted(() => {
emit('mounted');
});
return { wrap };
},
});

2
src/components/Markdown/src/index.vue
View File

@@ -57,7 +57,7 @@
onUnmounted(() => {
const vditorInstance = unref(vditorRef);
if (!vditorInstance) return;
vditorInstance.destroy();
vditorInstance?.destroy?.();
});
return {

4
src/components/Menu/index.ts
View File

@@ -6,4 +6,8 @@ export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'
loading: false,
});
export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'), {
loading: false,
});
withInstall(BasicMenu);

8
src/components/Menu/src/BasicMenu.vue
View File

@@ -17,7 +17,7 @@
:item="item"
:theme="theme"
:level="1"
:showTitle="showTitle"
:showTitle="!getCollapsed"
:isHorizontal="isHorizontal"
/>
</template>
@@ -95,16 +95,12 @@
prefixCls,
`justify-${align}`,
{
[`${prefixCls}--hide-title`]: !unref(showTitle),
[`${prefixCls}--collapsed-show-title`]: props.collapsedShowTitle,
[`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
[`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
},
];
});
const showTitle = computed(() => props.collapsedShowTitle && unref(getCollapsed));
const getInlineCollapseOptions = computed(() => {
const isInline = props.mode === MenuModeEnum.INLINE;
@@ -168,7 +164,7 @@
getMenuClass,
handleOpenChange,
getOpenKeys,
showTitle,
getCollapsed,
...toRefs(menuState),
};
},

1
src/components/Menu/src/components/MenuItemTag.vue
View File

@@ -15,6 +15,7 @@
const getShowTag = computed(() => {
const { item, showTitle, isHorizontal } = props;
if (!item || showTitle || isHorizontal) return false;
const { tag } = item;

125
src/components/Menu/src/index.less
View File

@@ -48,47 +48,16 @@
opacity: 1 !important;
}
&--hide-title {
&.ant-menu-inline-collapsed > .ant-menu-item,
&.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
&.ant-menu-inline-collapsed
> .ant-menu-item-group
> .ant-menu-item-group-list
> .ant-menu-submenu
> .ant-menu-submenu-title,
&.ant-menu-inline-collapsed .ant-menu-submenu-title {
padding-right: 16px !important;
padding-left: 16px !important;
}
}
&--collapsed-show-title.ant-menu-inline-collapsed {
.@{basic-menu-prefix-cls}-item__level1 {
padding: 2px 0;
}
& > li[role='menuitem']:not(.ant-menu-submenu),
& > li > .ant-menu-submenu-title {
display: flex;
margin-top: 10px;
font-size: 12px;
flex-direction: column;
align-items: center;
line-height: 24px;
}
& > li > .ant-menu-submenu-title {
line-height: 24px;
}
.@{basic-menu-content-prefix-cls}-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.@{basic-menu-content-prefix-cls}--show-title {
line-height: 30px;
}
}
&.ant-menu-inline-collapsed > .ant-menu-item,
&.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
&.ant-menu-inline-collapsed
> .ant-menu-item-group
> .ant-menu-item-group-list
> .ant-menu-submenu
> .ant-menu-submenu-title,
&.ant-menu-inline-collapsed .ant-menu-submenu-title {
padding-right: 16px !important;
padding-left: 16px !important;
}
.@{basic-menu-content-prefix-cls}-wrapper {
@@ -252,43 +221,6 @@
}
}
.@{basic-menu-tag-prefix-cls} {
position: absolute;
top: calc(50% - 8px);
right: 30px;
display: inline-block;
padding: 2px 4px;
margin-right: 4px;
font-size: 12px;
line-height: 14px;
color: #fff;
border-radius: 2px;
&--dot {
top: calc(50% - 4px);
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
&--primary {
background: @primary-color;
}
&--error {
background: @error-color;
}
&--success {
background: @success-color;
}
&--warn {
background: @warning-color;
}
}
.ant-menu-submenu,
.ant-menu-submenu-inline {
transition: unset;
@@ -322,3 +254,40 @@
}
}
}
.@{basic-menu-tag-prefix-cls} {
position: absolute;
top: calc(50% - 8px);
right: 30px;
display: inline-block;
padding: 2px 4px;
margin-right: 4px;
font-size: 12px;
line-height: 14px;
color: #fff;
border-radius: 2px;
&--dot {
top: calc(50% - 4px);
width: 6px;
height: 6px;
padding: 0;
border-radius: 50%;
}
&--primary {
background: @primary-color;
}
&--error {
background: @error-color;
}
&--success {
background: @success-color;
}
&--warn {
background: @warning-color;
}
}

3
src/components/Menu/src/props.ts
View File

@@ -10,8 +10,6 @@ export const basicProps = {
default: () => [],
},
collapsedShowTitle: propTypes.bool,
// 最好是4 倍数
inlineIndent: propTypes.number.def(20),
// 菜单组件的mode属性
@@ -19,7 +17,6 @@ export const basicProps = {
type: String as PropType<MenuModeEnum>,
default: MenuModeEnum.INLINE,
},
showLogo: propTypes.bool,
type: {
type: String as PropType<MenuTypeEnum>,
default: MenuTypeEnum.MIX,

2
src/components/Tinymce/src/Editor.vue
View File

@@ -107,7 +107,7 @@
function destory() {
if (getTinymce() !== null) {
getTinymce().remove(unref(editorRef));
getTinymce()?.remove?.(unref(editorRef));
}
}

2
src/design/var/index.less
View File

@@ -26,6 +26,8 @@
@layout-sider-fixed-z-index: 510;
@layout-mix-sider-fixed-z-index: 550;
@preview-comp-z-index: 1000;
@page-footer-z-index: 99;

84
src/directives/clickOutside.ts Normal file
View File

@@ -0,0 +1,84 @@
import { on } from '/@/utils/domUtils';
import { isServer } from '/@/utils/is';
import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue';
type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
type FlushList = Map<
HTMLElement,
{
documentHandler: DocumentHandler;
bindingFn: (...args: unknown[]) => unknown;
}
>;
const nodeList: FlushList = new Map();
let startClick: MouseEvent;
if (!isServer) {
on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
on(document, 'mouseup', (e: MouseEvent) => {
for (const { documentHandler } of nodeList.values()) {
documentHandler(e, startClick);
}
});
}
function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
let excludes: HTMLElement[] = [];
if (Array.isArray(binding.arg)) {
excludes = binding.arg;
} else {
// due to current implementation on binding type is wrong the type casting is necessary here
excludes.push((binding.arg as unknown) as HTMLElement);
}
return function (mouseup, mousedown) {
const popperRef = (binding.instance as ComponentPublicInstance<{
popperRef: Nullable<HTMLElement>;
}>).popperRef;
const mouseUpTarget = mouseup.target as Node;
const mouseDownTarget = mousedown.target as Node;
const isBound = !binding || !binding.instance;
const isTargetExists = !mouseUpTarget || !mouseDownTarget;
const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
const isSelf = el === mouseUpTarget;
const isTargetExcluded =
(excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
(excludes.length && excludes.includes(mouseDownTarget as HTMLElement));
const isContainedByPopper =
popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
if (
isBound ||
isTargetExists ||
isContainedByEl ||
isSelf ||
isTargetExcluded ||
isContainedByPopper
) {
return;
}
binding.value();
};
}
const ClickOutside: ObjectDirective = {
beforeMount(el, binding) {
nodeList.set(el, {
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value,
});
},
updated(el, binding) {
nodeList.set(el, {
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value,
});
},
unmounted(el) {
nodeList.delete(el);
},
};
export default ClickOutside;

2
src/enums/menuEnum.ts
View File

@@ -4,6 +4,8 @@
export enum MenuTypeEnum {
// left menu
SIDEBAR = 'sidebar',
MIX_SIDEBAR = 'mix-sidebar',
// mixin menu
MIX = 'mix',
// top menu

12
src/hooks/setting/useHeaderSetting.ts
View File

@@ -16,6 +16,7 @@ const {
getSplit,
getShowHeaderTrigger,
getIsSidebarType,
getIsMixSidebar,
getIsTopMenu,
} = useMenuSetting();
const { getShowBreadCrumb, getShowLogo } = useRootSetting();
@@ -27,13 +28,18 @@ const getShowFullHeaderRef = computed(() => {
!unref(getFullContent) &&
unref(getShowMixHeaderRef) &&
unref(getShowHeader) &&
!unref(getIsTopMenu)
!unref(getIsTopMenu) &&
!unref(getIsMixSidebar)
);
});
const getShowInsetHeaderRef = computed(() => {
const need = !unref(getFullContent) && unref(getShowHeader);
return (need && !unref(getShowMixHeaderRef)) || (need && unref(getIsTopMenu));
return (
(need && !unref(getShowMixHeaderRef)) ||
(need && unref(getIsTopMenu)) ||
(need && unref(getIsMixSidebar))
);
});
// Get header configuration
@@ -66,7 +72,7 @@ const getShowBread = computed(() => {
});
const getShowHeaderLogo = computed(() => {
return unref(getShowLogo) && !unref(getIsSidebarType);
return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
});
const getShowContent = computed(() => {

16
src/hooks/setting/useMenuSetting.ts
View File

@@ -37,10 +37,10 @@ const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
const getAccordion = computed(() => unref(getMenuSetting).accordion);
const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
const getCloseMixSidebarOnChange = computed(() => unref(getMenuSetting).closeMixSidebarOnChange);
const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
@@ -61,6 +61,10 @@ const getIsHorizontal = computed(() => {
return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
});
const getIsMixSidebar = computed(() => {
return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
});
const getIsMixMode = computed(() => {
return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX;
});
@@ -70,14 +74,15 @@ const getRealWidth = computed(() => {
});
const getMiniWidthNumber = computed(() => {
const { collapsedShowTitle } = unref(getMenuSetting);
return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
return SIDE_BAR_MINI_WIDTH;
});
const getCalcContentWidth = computed(() => {
const width =
unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
? 0
: unref(getIsMixSidebar)
? SIDE_BAR_SHOW_TIT_MINI_WIDTH
: unref(getRealWidth);
return `calc(100% - ${unref(width)}px)`;
@@ -124,7 +129,6 @@ export function useMenuSetting() {
getMenuTheme,
getCanDrag,
getIsHorizontal,
getCollapsedShowTitle,
getIsSidebarType,
getAccordion,
getShowTopMenu,
@@ -135,5 +139,7 @@ export function useMenuSetting() {
getMenuBgColor,
getShowSidebar,
getIsMixMode,
getIsMixSidebar,
getCloseMixSidebarOnChange,
};
}

2
src/hooks/web/useApexCharts.ts
View File

@@ -51,7 +51,7 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
tryOnUnmounted(() => {
if (!chartInstance) return;
chartInstance.destroy();
chartInstance?.destroy?.();
chartInstance = null;
});

2
src/hooks/web/useI18n.ts
View File

@@ -36,5 +36,5 @@ export function useI18n(namespace?: string) {
// Mainly to configure the vscode i18nn ally plugin. This function is only used for routing and menus. Please use useI18n for other places
// 为什么要编写此函数？
// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useIs18n
// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useI18n
export const t = (key: string) => key;

4
src/layouts/default/header/components/Breadcrumb.vue
View File

@@ -48,7 +48,7 @@
if (currentRoute.value.name === REDIRECT_NAME) {
return;
}
const matched = currentRoute.value.matched;
const matched = currentRoute.value?.matched;
if (!matched || matched.length === 0) return;
let breadcrumbList = filter(toRaw(matched), (item) => {
@@ -102,7 +102,7 @@
color: @breadcrumb-item-normal-color;
a {
color: @text-color-base;
color: rgba(0, 0, 0, 0.65);
&:hover {
color: @primary-color;

6
src/layouts/default/header/index.vue
View File

@@ -10,7 +10,9 @@
:style="getLogoWidth"
/>
<LayoutTrigger
v-if="(getShowContent && getShowHeaderTrigger && !getSplit) || getIsMobile"
v-if="
(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
"
:theme="getHeaderTheme"
:sider="false"
/>
@@ -110,6 +112,7 @@
getSplit,
getIsMixMode,
getMenuWidth,
getIsMixSidebar,
} = useMenuSetting();
const { getShowLocale } = useLocaleSetting();
const { getUseErrorHandle } = useRootSetting();
@@ -173,6 +176,7 @@
getUseLockPage,
getUseErrorHandle,
getLogoWidth,
getIsMixSidebar,
};
},
});

5
src/layouts/default/index.vue
View File

@@ -2,7 +2,7 @@
<Layout :class="prefixCls">
<LayoutFeatures />
<LayoutHeader fixed v-if="getShowFullHeaderRef" />
<Layout>
<Layout class="ant-layout-has-sider">
<LayoutSideBar v-if="getShowSidebar || getIsMobile" />
<Layout :class="`${prefixCls}__main`">
<LayoutMultipleHeader />
@@ -53,13 +53,14 @@
const { getShowFullHeaderRef } = useHeaderSetting();
const { getShowSidebar } = useMenuSetting();
const { getShowSidebar, getIsMixSidebar } = useMenuSetting();
return {
getShowFullHeaderRef,
getShowSidebar,
prefixCls,
getIsMobile,
getIsMixSidebar,
};
},
});

3
src/layouts/default/menu/index.tsx
View File

@@ -43,7 +43,6 @@ export default defineComponent({
const {
getMenuMode,
getMenuType,
getCollapsedShowTitle,
getMenuTheme,
getCollapsed,
getAccordion,
@@ -132,12 +131,10 @@ export default defineComponent({
isHorizontal={props.isHorizontal}
type={unref(getMenuType)}
mode={unref(getComputedMenuMode)}
collapsedShowTitle={unref(getCollapsedShowTitle)}
theme={unref(getComputedMenuTheme)}
items={unref(menusRef)}
accordion={unref(getAccordion)}
onMenuClick={handleMenuClick}
showLogo={unref(getIsShowLogo)}
/>
);
}

35
src/layouts/default/setting/SettingDrawer.tsx
View File

@@ -61,7 +61,6 @@ export default defineComponent({
getShowMenu,
getMenuType,
getTrigger,
getCollapsedShowTitle,
getMenuFixed,
getCollapsed,
getCanDrag,
@@ -71,6 +70,8 @@ export default defineComponent({
getMenuBgColor,
getIsTopMenu,
getSplit,
getIsMixSidebar,
getCloseMixSidebarOnChange,
} = useMenuSetting();
const {
@@ -106,6 +107,13 @@ export default defineComponent({
def={unref(getSplit)}
disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
/>
<SwitchItem
title={t('layout.setting.closeMixSidebarOnChange')}
event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
def={unref(getCloseMixSidebarOnChange)}
disabled={!unref(getIsMixSidebar)}
/>
</>
);
}
@@ -166,14 +174,9 @@ export default defineComponent({
title={t('layout.setting.menuCollapse')}
event={HandlerEnum.MENU_COLLAPSED}
def={unref(getCollapsed)}
disabled={!unref(getShowMenuRef)}
/>
<SwitchItem
title={t('layout.setting.collapseMenuDisplayName')}
event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
def={unref(getCollapsedShowTitle)}
disabled={!unref(getShowMenuRef) || !unref(getCollapsed)}
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
/>
<SwitchItem
title={t('layout.setting.fixedHeader')}
event={HandlerEnum.HEADER_FIXED}
@@ -184,7 +187,7 @@ export default defineComponent({
title={t('layout.setting.fixedSideBar')}
event={HandlerEnum.MENU_FIXED}
def={unref(getMenuFixed)}
disabled={!unref(getShowMenuRef)}
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
/>
<SelectItem
title={t('layout.setting.topMenuLayout')}
@@ -192,7 +195,10 @@ export default defineComponent({
def={unref(getTopMenuAlign)}
options={topMenuAlignOptions}
disabled={
!unref(getShowHeader) || unref(getSplit) || (!unref(getIsTopMenu) && !unref(getSplit))
!unref(getShowHeader) ||
unref(getSplit) ||
(!unref(getIsTopMenu) && !unref(getSplit)) ||
unref(getIsMixSidebar)
}
/>
<SelectItem
@@ -200,7 +206,7 @@ export default defineComponent({
event={HandlerEnum.MENU_TRIGGER}
def={triggerDef}
options={triggerOptions}
disabled={!unref(getShowMenuRef)}
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
/>
<SelectItem
title={t('layout.setting.contentMode')}
@@ -282,7 +288,12 @@ export default defineComponent({
event={HandlerEnum.HEADER_SHOW}
def={unref(getShowHeader)}
/>
<SwitchItem title="Logo" event={HandlerEnum.SHOW_LOGO} def={unref(getShowLogo)} />
<SwitchItem
title="Logo"
event={HandlerEnum.SHOW_LOGO}
def={unref(getShowLogo)}
disabled={unref(getIsMixSidebar)}
/>
<SwitchItem
title={t('layout.setting.footer')}
event={HandlerEnum.SHOW_FOOTER}

122
src/layouts/default/setting/components/TypePicker.vue
View File

@@ -6,12 +6,13 @@
@click="handler(item)"
:class="[
`${prefixCls}__item`,
`${prefixCls}__item--${item.type}`,
{
[`${prefixCls}__item--active`]: def === item.type,
},
]"
>
<img :src="item.src" />
<div class="mix-sidebar" />
</div>
</Tooltip>
</template>
@@ -58,33 +59,118 @@
&__item {
position: relative;
width: 70px;
height: 50px;
margin: 0 20px 20px 0;
width: 56px;
height: 48px;
margin-right: 16px;
overflow: hidden;
cursor: pointer;
border-radius: 6px;
background-color: #f0f2f5;
border-radius: 4px;
box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
&::before,
&::after {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
content: '';
opacity: 0;
transition: all 0.3s;
}
&--sidebar {
&::before {
top: 0;
left: 0;
z-index: 1;
width: 33%;
height: 100%;
background-color: #273352;
border-radius: 4px 0 0 4px;
}
&::after {
top: 0;
left: 0;
width: 100%;
height: 25%;
background-color: #fff;
}
}
&--mix {
&::before {
top: 0;
left: 0;
width: 33%;
height: 100%;
background-color: #fff;
border-radius: 4px 0 0 4px;
}
&::after {
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 25%;
background-color: #273352;
}
}
&--top-menu {
&::after {
top: 0;
left: 0;
width: 100%;
height: 25%;
background-color: #273352;
}
}
&--mix-sidebar {
&::before {
top: 0;
left: 0;
z-index: 1;
width: 25%;
height: 100%;
background-color: #273352;
border-radius: 4px 0 0 4px;
}
&::after {
top: 0;
left: 0;
width: 100%;
height: 25%;
background-color: #fff;
}
.mix-sidebar {
position: absolute;
left: 25%;
width: 15%;
height: 100%;
background-color: #fff;
}
}
// &::after {
// position: absolute;
// top: 50%;
// left: 50%;
// width: 0;
// height: 0;
// content: '';
// opacity: 0;
// transition: all 0.3s;
// }
&:hover,
&--active {
padding: 12px;
border: 2px solid @primary-color;
&::before,
&::after {
top: -8px;
left: -4px;
width: 80px;
height: 64px;
border: 2px solid @primary-color;
border-radius: 6px;
opacity: 1;
border-radius: 0;
}
}
}

12
src/layouts/default/setting/enum.ts
View File

@@ -1,9 +1,6 @@
import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
import { MenuModeEnum, MenuTypeEnum, TopMenuAlignEnum, TriggerEnum } from '/@/enums/menuEnum';
import mixImg from '/@/assets/images/layout/menu-mix.svg';
import sidebarImg from '/@/assets/images/layout/menu-sidebar.svg';
import menuTopImg from '/@/assets/images/layout/menu-top.svg';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
@@ -22,6 +19,7 @@ export enum HandlerEnum {
MENU_THEME,
MENU_SPLIT,
MENU_FIXED,
MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE,
// header
HEADER_SHOW,
@@ -116,19 +114,21 @@ export const menuTypeList = [
title: t('layout.setting.menuTypeSidebar'),
mode: MenuModeEnum.INLINE,
type: MenuTypeEnum.SIDEBAR,
src: sidebarImg,
},
{
title: t('layout.setting.menuTypeMix'),
mode: MenuModeEnum.INLINE,
type: MenuTypeEnum.MIX,
src: mixImg,
},
{
title: t('layout.setting.menuTypeTopMenu'),
mode: MenuModeEnum.HORIZONTAL,
type: MenuTypeEnum.TOP_MENU,
src: menuTopImg,
},
{
title: t('layout.setting.menuTypeMixSidebar'),
mode: MenuModeEnum.INLINE,
type: MenuTypeEnum.MIX_SIDEBAR,
},
];

5
src/layouts/default/setting/handler.ts
View File

@@ -48,9 +48,6 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
case HandlerEnum.MENU_WIDTH:
return { menuSetting: { menuWidth: value } };
case HandlerEnum.MENU_COLLAPSED_SHOW_TITLE:
return { menuSetting: { collapsedShowTitle: value } };
case HandlerEnum.MENU_SHOW_SIDEBAR:
return { menuSetting: { show: value } };
@@ -60,6 +57,8 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
case HandlerEnum.MENU_SPLIT:
return { menuSetting: { split: value } };
case HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
return { menuSetting: { closeMixSidebarOnChange: value } };
case HandlerEnum.MENU_FIXED:
return { menuSetting: { fixed: value } };

52
src/layouts/default/sider/LayoutSider.vue
View File

@@ -128,5 +128,55 @@
});
</script>
<style lang="less">
@import './index.less';
@import (reference) '../../../design/index.less';
@prefix-cls: ~'@{namespace}-layout-sideBar';
.@{prefix-cls} {
z-index: @layout-sider-fixed-z-index;
&--fixed {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
&--mix {
top: @header-height;
height: calc(100% - @header-height);
}
&.ant-layout-sider-dark {
background: @sider-dark-bg-color;
.ant-layout-sider-trigger {
color: darken(@white, 25%);
background: @trigger-dark-bg-color;
&:hover {
color: @white;
background: @trigger-dark-hover-bg-color;
}
}
}
&:not(.ant-layout-sider-dark) {
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
.ant-layout-sider-trigger {
color: @text-color-base;
border-top: 1px solid @border-color-light;
}
}
.ant-layout-sider-zero-width-trigger {
top: 40%;
z-index: 10;
}
& .ant-layout-sider-trigger {
height: 36px;
line-height: 36px;
}
}
</style>

408
src/layouts/default/sider/MixSider.vue Normal file
View File

@@ -0,0 +1,408 @@
<template>
<div :class="`${prefixCls}-dom`" />
<div
v-click-outside="handleClickOutside"
:class="[
prefixCls,
getMenuTheme,
{
open: openMenu,
},
]"
>
<AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
<ScrollContainer>
<ul :class="`${prefixCls}-module`">
<li
:class="[
`${prefixCls}-module__item `,
{
[`${prefixCls}-module__item--active`]: item.path === activePath,
},
]"
v-for="item in menuModules"
:key="item.path"
@click="hanldeModuleClick(item.path)"
>
<MenuTag :item="item" :showTitle="false" :isHorizontal="false" />
<g-icon
:class="`${prefixCls}-module__icon`"
:size="22"
:icon="item.meta && item.meta.icon"
/>
<p :class="`${prefixCls}-module__name`">{{ t(item.name) }}</p>
</li>
</ul>
</ScrollContainer>
<div :class="`${prefixCls}-menu-list`" ref="sideRef" :style="getMenuStyle">
<div
:class="[
`${prefixCls}-menu-list__title`,
{
show: openMenu,
},
]"
>
<span class="text"> {{ title }}</span>
</div>
<ScrollContainer :class="`${prefixCls}-menu-list__content`">
<BasicMenu
:isHorizontal="false"
mode="inline"
:items="chilrenMenus"
:theme="getMenuTheme"
@menuClick="handleMenuClick"
/>
</ScrollContainer>
<div
v-show="getShowDragBar && openMenu"
:class="`${prefixCls}-drag-bar`"
ref="dragBarRef"
></div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, computed, CSSProperties, unref } from 'vue';
import type { Menu } from '/@/router/types';
import type { RouteLocationNormalized } from 'vue-router';
import { useDesign } from '/@/hooks/web/useDesign';
import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
import { useI18n } from '/@/hooks/web/useI18n';
import { ScrollContainer } from '/@/components/Container';
import { AppLogo } from '/@/components/Application';
import { useGo } from '/@/hooks/web/usePage';
import { BasicMenu, MenuTag } from '/@/components/Menu';
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDragLine } from './useLayoutSider';
import clickOutside from '/@/directives/clickOutside';
import { useGlobSetting } from '/@/hooks/setting';
export default defineComponent({
name: 'LayoutMixSider',
components: {
ScrollContainer,
AppLogo,
BasicMenu,
MenuTag,
},
directives: {
clickOutside,
},
setup() {
let menuModules = ref<Menu[]>([]);
const activePath = ref('');
const chilrenMenus = ref<Menu[]>([]);
const openMenu = ref(false);
const dragBarRef = ref<ElRef>(null);
const sideRef = ref<ElRef>(null);
const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
const { prefixCls } = useDesign('layout-mix-sider');
const go = useGo();
const { t } = useI18n();
const {
getMenuWidth,
getCanDrag,
getCloseMixSidebarOnChange,
getMenuTheme,
getMixSidebarTheme,
} = useMenuSetting();
const { title } = useGlobSetting();
useDragLine(sideRef, dragBarRef, true);
const getMenuStyle = computed(
(): CSSProperties => {
return {
width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
};
}
);
const getShowDragBar = computed(() => unref(getCanDrag));
onMounted(async () => {
menuModules.value = await getShallowMenus();
});
listenerLastChangeTab((route) => {
currentRoute.value = route;
setActive();
if (unref(getCloseMixSidebarOnChange)) {
openMenu.value = false;
}
});
async function hanldeModuleClick(path: string) {
const children = await getChildrenMenus(path);
if (unref(activePath) === path) {
openMenu.value = !unref(openMenu);
if (!unref(openMenu)) {
setActive();
}
} else {
openMenu.value = true;
activePath.value = path;
}
if (!children || children.length === 0) {
go(path);
chilrenMenus.value = [];
openMenu.value = false;
return;
}
chilrenMenus.value = children;
}
async function setActive() {
const path = currentRoute.value?.path;
if (!path) return;
const parentPath = await getCurrentParentPath(path);
activePath.value = parentPath;
// hanldeModuleClick(parentPath);
}
function handleMenuClick(path: string) {
go(path);
}
function handleClickOutside() {
openMenu.value = false;
setActive();
}
return {
t,
prefixCls,
menuModules,
hanldeModuleClick,
activePath,
chilrenMenus,
getShowDragBar,
handleMenuClick,
getMenuStyle,
handleClickOutside,
sideRef,
dragBarRef,
title,
openMenu,
getMenuTheme,
getMixSidebarTheme,
};
},
});
</script>
<style lang="less">
@import (reference) '../../../design/index.less';
@prefix-cls: ~'@{namespace}-layout-mix-sider';
@tag-prefix-cls: ~'@{namespace}-basic-menu-item-tag';
@width: 80px;
.@{prefix-cls} {
position: fixed;
top: 0;
left: 0;
z-index: @layout-mix-sider-fixed-z-index;
width: @width;
height: 100%;
max-width: @width;
min-width: @width;
overflow: hidden;
background: @sider-dark-bg-color;
transition: all 0.2s ease 0s;
flex: 0 0 @width;
.@{tag-prefix-cls} {
position: absolute;
top: 6px;
right: 2px;
}
&-dom {
width: @width;
height: 100%;
max-width: @width;
min-width: @width;
overflow: hidden;
transition: all 0.2s ease 0s;
flex: 0 0 @width;
}
&-logo {
display: flex;
height: @header-height;
padding-left: 0 !important;
justify-content: center;
img {
width: @logo-width;
height: @logo-width;
}
}
&.light {
.@{prefix-cls}-logo {
border-bottom: 1px solid rgb(238, 238, 238);
}
&.open {
> .scroll-container {
border-right: 1px solid rgb(238, 238, 238);
}
}
.@{prefix-cls}-module {
&__item {
font-weight: normal;
color: rgba(0, 0, 0, 0.65);
&--active {
color: @primary-color;
background: unset;
}
}
}
}
&.dark {
&.open {
.@{prefix-cls}-logo {
border-bottom: 1px solid rgb(114 114 114);
}
> .scroll-container {
border-right: 1px solid rgb(114 114 114);
}
}
.@{prefix-cls}-menu-list {
background: @sider-dark-bg-color;
&__title {
color: @white;
border-bottom: none;
border-bottom: 1px solid rgb(114 114 114);
}
}
}
&-module {
position: relative;
height: calc(100% - @header-height) !important;
padding-top: 1px;
&__item {
position: relative;
padding: 12px 0;
color: rgba(255, 255, 255, 0.65);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
color: @white;
}
// &:hover,
&--active {
font-weight: 700;
color: @white;
background: @sider-dark-darken-bg-color;
&::before {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: @primary-color;
content: '';
}
}
}
&__icon {
margin-bottom: 8px;
font-size: 24px;
}
&__name {
margin-bottom: 0;
font-size: 12px;
}
}
&-menu-list {
position: fixed;
top: 0;
left: 80px;
width: 0;
width: 200px;
height: calc(100%);
background: #fff;
transition: width 0.2s;
.@{tag-prefix-cls} {
position: absolute;
top: 10px;
right: 30px;
}
&__title {
display: flex;
height: @header-height;
margin-left: -6px;
font-size: 18px;
color: @primary-color;
border-bottom: 1px solid rgb(238, 238, 238);
opacity: 0;
transition: unset;
// justify-content: center;
align-items: center;
justify-content: start;
&.show {
opacity: 1;
transition: all 0.5s ease;
}
}
&__content {
height: calc(100% - @header-height) !important;
.scrollbar__wrap {
height: 100%;
overflow-x: hidden;
}
.scrollbar__bar.is-horizontal {
display: none;
}
.ant-menu {
height: 100%;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
border-right: 1px solid transparent;
}
}
}
&-drag-bar {
position: absolute;
top: 0;
right: -3px;
width: 3px;
height: 100%;
cursor: ew-resize;
background: #f8f8f9;
border-top: none;
border-bottom: none;
box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
}
}
</style>

51
src/layouts/default/sider/index.less
View File

@@ -1,51 +0,0 @@
@import (reference) '../../../design/index.less';
@prefix-cls: ~'@{namespace}-layout-sideBar';
.@{prefix-cls} {
z-index: @layout-sider-fixed-z-index;
&--fixed {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
&--mix {
top: @header-height;
height: calc(100% - @header-height);
}
&.ant-layout-sider-dark {
background: @sider-dark-bg-color;
.ant-layout-sider-trigger {
color: darken(@white, 25%);
background: @trigger-dark-bg-color;
&:hover {
color: @white;
background: @trigger-dark-hover-bg-color;
}
}
}
&:not(.ant-layout-sider-dark) {
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
.ant-layout-sider-trigger {
color: @text-color-base;
border-top: 1px solid @border-color-light;
}
}
.ant-layout-sider-zero-width-trigger {
top: 40%;
z-index: 10;
}
& .ant-layout-sider-trigger {
height: 36px;
line-height: 36px;
}
}

8
src/layouts/default/sider/index.vue
View File

@@ -10,6 +10,7 @@
>
<Sider />
</Drawer>
<MixSider v-else-if="getIsMixSidebar" />
<Sider v-else />
</template>
<script lang="ts">
@@ -17,16 +18,17 @@
import Sider from './LayoutSider.vue';
import { Drawer } from 'ant-design-vue';
import MixSider from './MixSider.vue';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
export default defineComponent({
name: 'SiderWrapper',
components: { Sider, Drawer },
components: { Sider, Drawer, MixSider },
setup() {
const { prefixCls } = useDesign('layout-sider-wrapper');
const { getIsMobile } = useAppInject();
const { setMenuSetting, getCollapsed, getMenuWidth } = useMenuSetting();
const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
function handleClose() {
setMenuSetting({
@@ -34,7 +36,7 @@
});
}
return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth };
return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
},
});
</script>

46
src/layouts/default/sider/useLayoutSider.ts
View File

@@ -71,21 +71,30 @@ export function useTrigger(getIsMobile: Ref<boolean>) {
* @param siderRef
* @param dragBarRef
*/
export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>, mix = false) {
const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting();
onMounted(() => {
nextTick(() => {
const [exec] = useDebounce(changeWrapWidth, 20);
const [exec] = useDebounce(changeWrapWidth, 80);
exec();
});
});
function getEl(elRef: Ref<ElRef | ComponentRef>): any {
const el = unref(elRef);
if (!el) return null;
if (Reflect.has(el, '$el')) {
return (unref(elRef) as ComponentRef)?.$el;
}
return unref(elRef);
}
function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
document.onmousemove = function (innerE) {
let iT = (ele as any).left + (innerE.clientX - clientX);
innerE = innerE || window.event;
const maxT = 600;
const maxT = 800;
const minT = unref(getMiniWidthNumber);
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
@@ -97,31 +106,36 @@ export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
// Drag and drop in the menu area-release the mouse
function removeMouseup(ele: any) {
const wrap = unref(siderRef).$el;
const wrap = getEl(siderRef);
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
wrap.style.transition = 'width 0.2s';
const width = parseInt(wrap.style.width);
const miniWidth = unref(getMiniWidthNumber);
if (!unref(getCollapsed)) {
width > miniWidth + 20
? setMenuSetting({ menuWidth: width })
: setMenuSetting({ collapsed: true });
if (!mix) {
const miniWidth = unref(getMiniWidthNumber);
if (!unref(getCollapsed)) {
width > miniWidth + 20
? setMenuSetting({ menuWidth: width })
: setMenuSetting({ collapsed: true });
} else {
width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width });
}
} else {
width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width });
setMenuSetting({ menuWidth: width });
}
ele.releaseCapture?.();
};
}
function changeWrapWidth() {
const ele = unref(dragBarRef)?.$el;
if (!ele) {
return;
}
const side = unref(siderRef);
const wrap = (side || {}).$el;
const ele = getEl(dragBarRef);
if (!ele) return;
const wrap = getEl(siderRef);
if (!wrap) return;
ele.onmousedown = (e: any) => {
wrap.style.transition = 'unset';
const clientX = e?.clientX;

5
src/layouts/page/useCache.ts
View File

@@ -15,7 +15,10 @@ export function useCache(isPage: boolean) {
if (routeName && ![ParentLayoutName].includes(routeName)) {
name.value = routeName;
} else {
const matched = currentRoute.value.matched;
const matched = currentRoute.value?.matched;
if (!matched) {
return;
}
const len = matched.length;
if (len < 2) return;
name.value = matched[len - 2].name as string;

5
src/locales/lang/en/layout/setting.ts
View File

@@ -12,7 +12,8 @@ export default {
menuTriggerTop: 'Top',
// menu type
menuTypeSidebar: 'Left menu mode',
menuTypeMix: 'Mixed mode',
menuTypeMixSidebar: 'Left menu mixed mode',
menuTypeMix: 'Top Menu Mix mode',
menuTypeTopMenu: 'Top menu mode',
on: 'On',
@@ -35,6 +36,7 @@ export default {
interfaceDisplay: 'Interface display',
animation: 'Animation',
splitMenu: 'Split menu',
closeMixSidebarOnChange: 'Switch page to close menu',
headerTheme: 'Header theme',
sidebarTheme: 'Menu theme',
@@ -43,7 +45,6 @@ export default {
menuSearch: 'Menu search',
menuAccordion: 'Sidebar accordion',
menuCollapse: 'Collapse menu',
collapseMenuDisplayName: 'Collapse menu display name',
topMenuLayout: 'Top menu layout',
menuCollapseButton: 'Menu collapse button',
contentMode: 'Content area width',

6
src/locales/lang/en/routes/demo/comp.ts
View File

@@ -9,6 +9,12 @@ export default {
scrollAction: 'Scroll Function',
virtualScroll: 'Virtual Scroll',
tree: 'Tree',
treeBasic: 'Basic',
editTree: 'Right-click',
actionTree: 'Function operation',
modal: 'Modal',
drawer: 'Drawer',
desc: 'Desc',

2
src/locales/lang/en/routes/demo/level.ts
View File

@@ -1,3 +1,3 @@
export default {
level: 'Multi menu cache',
level: 'MultiMenu',
};

7
src/locales/lang/en/routes/demo/tree.ts
View File

@@ -1,7 +0,0 @@
export default {
tree: 'Tree',
basic: 'Basic',
editTree: 'Right-click',
actionTree: 'Function operation',
};

5
src/locales/lang/zh_CN/layout/setting.ts
View File

@@ -12,7 +12,8 @@ export default {
menuTriggerTop: '顶部',
// menu type
menuTypeSidebar: '左侧菜单模式',
menuTypeMix: '混合模式',
menuTypeMixSidebar: '左侧菜单混合模式',
menuTypeMix: '顶部菜单混合模式',
menuTypeTopMenu: '顶部菜单模式',
on: '开',
@@ -34,6 +35,7 @@ export default {
interfaceDisplay: '界面显示',
animation: '动画',
splitMenu: '分割菜单',
closeMixSidebarOnChange: '切换页面关闭菜单',
headerTheme: '顶栏主题',
sidebarTheme: '菜单主题',
@@ -42,7 +44,6 @@ export default {
menuSearch: '菜单搜索',
menuAccordion: '侧边菜单手风琴模式',
menuCollapse: '折叠菜单',
collapseMenuDisplayName: '折叠菜单显示名称',
topMenuLayout: '顶部菜单布局',
menuCollapseButton: '菜单折叠按钮',
contentMode: '内容区域宽度',

2
src/locales/lang/zh_CN/routes/demo/charts.ts
View File

@@ -1,5 +1,5 @@
export default {
charts: '图表库',
charts: '图表',
map: '地图',
line: '折线图',
pie: '饼图',

5
src/locales/lang/zh_CN/routes/demo/comp.ts
View File

@@ -9,6 +9,11 @@ export default {
scrollAction: '滚动函数',
virtualScroll: '虚拟滚动',
tree: 'Tree',
treeBasic: '基础树',
editTree: '右键示例',
actionTree: '函数操作示例',
modal: '弹窗扩展',
drawer: '抽屉扩展',
desc: '详情组件',

2
src/locales/lang/zh_CN/routes/demo/level.ts
View File

@@ -1,3 +1,3 @@
export default {
level: '多级菜单缓存',
level: '多级菜单',
};

7
src/locales/lang/zh_CN/routes/demo/tree.ts
View File

@@ -1,7 +0,0 @@
export default {
tree: 'Tree',
basic: '基础树',
editTree: '右键示例',
actionTree: '函数操作示例',
};

143
src/router/menus/modules/demo/comp.ts
View File

@@ -14,6 +14,107 @@ const menu: MenuModule = {
path: 'basic',
name: t('routes.demo.comp.basic'),
},
{
path: 'form',
name: t('routes.demo.form.form'),
children: [
{
path: 'basic',
name: t('routes.demo.form.basic'),
},
{
path: 'useForm',
name: t('routes.demo.form.useForm'),
},
{
path: 'refForm',
name: t('routes.demo.form.refForm'),
},
{
path: 'advancedForm',
name: t('routes.demo.form.advancedForm'),
},
{
path: 'ruleForm',
name: t('routes.demo.form.ruleForm'),
},
{
path: 'dynamicForm',
name: t('routes.demo.form.dynamicForm'),
},
{
path: 'customerForm',
name: t('routes.demo.form.customerForm'),
},
],
},
{
path: 'table',
name: t('routes.demo.table.table'),
children: [
{
path: 'basic',
name: t('routes.demo.table.basic'),
},
{
path: 'treeTable',
name: t('routes.demo.table.treeTable'),
},
{
path: 'fetchTable',
name: t('routes.demo.table.fetchTable'),
},
{
path: 'fixedColumn',
name: t('routes.demo.table.fixedColumn'),
},
{
path: 'customerCell',
name: t('routes.demo.table.customerCell'),
},
{
path: 'formTable',
name: t('routes.demo.table.formTable'),
},
{
path: 'useTable',
name: t('routes.demo.table.useTable'),
},
{
path: 'refTable',
name: t('routes.demo.table.refTable'),
},
{
path: 'multipleHeader',
name: t('routes.demo.table.multipleHeader'),
},
{
path: 'mergeHeader',
name: t('routes.demo.table.mergeHeader'),
},
{
path: 'expandTable',
name: t('routes.demo.table.expandTable'),
},
{
path: 'fixedHeight',
name: t('routes.demo.table.fixedHeight'),
},
{
path: 'footerTable',
name: t('routes.demo.table.footerTable'),
},
{
path: 'editCellTable',
name: t('routes.demo.table.editCellTable'),
},
{
path: 'editRowTable',
name: t('routes.demo.table.editRowTable'),
},
],
},
{
path: 'countTo',
name: t('routes.demo.comp.countTo'),
@@ -54,6 +155,48 @@ const menu: MenuModule = {
content: 'new',
},
},
{
path: 'tree',
name: t('routes.demo.comp.tree'),
children: [
{
path: 'basic',
name: t('routes.demo.comp.treeBasic'),
},
{
path: 'editTree',
name: t('routes.demo.comp.editTree'),
},
{
path: 'actionTree',
name: t('routes.demo.comp.actionTree'),
},
],
},
{
name: t('routes.demo.editor.editor'),
path: 'editor',
children: [
{
path: 'markdown',
name: t('routes.demo.editor.markdown'),
},
{
path: 'tinymce',
name: t('routes.demo.editor.tinymce'),
children: [
{
path: 'index',
name: t('routes.demo.editor.tinymceBasic'),
},
{
path: 'editor',
name: t('routes.demo.editor.tinymceForm'),
},
],
},
],
},
{
path: 'scroll',
name: t('routes.demo.comp.scroll'),

31
src/router/menus/modules/demo/editor.ts
View File

@@ -1,31 +0,0 @@
import type { MenuModule } from '/@/router/types.d';
import { t } from '/@/hooks/web/useI18n';
const menu: MenuModule = {
orderNo: 500,
menu: {
name: t('routes.demo.editor.editor'),
path: '/editor',
children: [
{
path: 'markdown',
name: t('routes.demo.editor.markdown'),
},
{
path: 'tinymce',
name: t('routes.demo.editor.tinymce'),
children: [
{
path: 'index',
name: t('routes.demo.editor.tinymceBasic'),
},
{
path: 'editor',
name: t('routes.demo.editor.tinymceForm'),
},
],
},
],
},
};
export default menu;

22
src/router/menus/modules/demo/feat.ts
View File

@@ -62,6 +62,28 @@ const menu: MenuModule = {
path: 'error-log',
name: t('routes.demo.feat.errorLog'),
},
{
name: t('routes.demo.excel.excel'),
path: 'excel',
children: [
{
path: 'customExport',
name: t('routes.demo.excel.customExport'),
},
{
path: 'jsonExport',
name: t('routes.demo.excel.jsonExport'),
},
{
path: 'arrayExport',
name: t('routes.demo.excel.arrayExport'),
},
{
path: 'importExcel',
name: t('routes.demo.excel.importExcel'),
},
],
},
{
path: 'testTab',
name: t('routes.demo.feat.tab'),

42
src/router/menus/modules/demo/form.ts
View File

@@ -1,42 +0,0 @@
import type { MenuModule } from '/@/router/types.d';
import { t } from '/@/hooks/web/useI18n';
const menu: MenuModule = {
orderNo: 40,
menu: {
path: '/form',
name: t('routes.demo.form.form'),
children: [
{
path: 'basic',
name: t('routes.demo.form.basic'),
},
{
path: 'useForm',
name: t('routes.demo.form.useForm'),
},
{
path: 'refForm',
name: t('routes.demo.form.refForm'),
},
{
path: 'advancedForm',
name: t('routes.demo.form.advancedForm'),
},
{
path: 'ruleForm',
name: t('routes.demo.form.ruleForm'),
},
{
path: 'dynamicForm',
name: t('routes.demo.form.dynamicForm'),
},
{
path: 'customerForm',
name: t('routes.demo.form.customerForm'),
},
],
},
};
export default menu;

73
src/router/menus/modules/demo/table.ts
View File

@@ -1,73 +0,0 @@
import type { MenuModule } from '/@/router/types.d';
import { t } from '/@/hooks/web/useI18n';
const menu: MenuModule = {
orderNo: 30,
menu: {
path: '/table',
name: t('routes.demo.table.table'),
children: [
{
path: 'basic',
name: t('routes.demo.table.basic'),
},
{
path: 'treeTable',
name: t('routes.demo.table.treeTable'),
},
{
path: 'fetchTable',
name: t('routes.demo.table.fetchTable'),
},
{
path: 'fixedColumn',
name: t('routes.demo.table.fixedColumn'),
},
{
path: 'customerCell',
name: t('routes.demo.table.customerCell'),
},
{
path: 'formTable',
name: t('routes.demo.table.formTable'),
},
{
path: 'useTable',
name: t('routes.demo.table.useTable'),
},
{
path: 'refTable',
name: t('routes.demo.table.refTable'),
},
{
path: 'multipleHeader',
name: t('routes.demo.table.multipleHeader'),
},
{
path: 'mergeHeader',
name: t('routes.demo.table.mergeHeader'),
},
{
path: 'expandTable',
name: t('routes.demo.table.expandTable'),
},
{
path: 'fixedHeight',
name: t('routes.demo.table.fixedHeight'),
},
{
path: 'footerTable',
name: t('routes.demo.table.footerTable'),
},
{
path: 'editCellTable',
name: t('routes.demo.table.editCellTable'),
},
{
path: 'editRowTable',
name: t('routes.demo.table.editRowTable'),
},
],
},
};
export default menu;

25
src/router/menus/modules/demo/tree.ts
View File

@@ -1,25 +0,0 @@
import type { MenuModule } from '/@/router/types.d';
import { t } from '/@/hooks/web/useI18n';
const menu: MenuModule = {
orderNo: 50,
menu: {
path: '/tree',
name: t('routes.demo.tree.tree'),
children: [
{
path: 'basic',
name: t('routes.demo.tree.basic'),
},
{
path: 'editTree',
name: t('routes.demo.tree.editTree'),
},
{
path: 'actionTree',
name: t('routes.demo.tree.actionTree'),
},
],
},
};
export default menu;

286
src/router/routes/modules/demo/comp.ts
View File

@@ -22,6 +22,208 @@ const comp: AppRouteModule = {
title: t('routes.demo.comp.basic'),
},
},
{
path: 'form',
name: 'FormDemo',
redirect: '/comp/form/basic',
component: getParentLayout('FormDemo'),
meta: {
// icon: 'mdi:form-select',
title: t('routes.demo.form.form'),
},
children: [
{
path: 'basic',
name: 'FormBasicDemo',
component: () => import('/@/views/demo/form/index.vue'),
meta: {
title: t('routes.demo.form.basic'),
},
},
{
path: 'useForm',
name: 'UseFormDemo',
component: () => import('/@/views/demo/form/UseForm.vue'),
meta: {
title: t('routes.demo.form.useForm'),
},
},
{
path: 'refForm',
name: 'RefFormDemo',
component: () => import('/@/views/demo/form/RefForm.vue'),
meta: {
title: t('routes.demo.form.refForm'),
},
},
{
path: 'advancedForm',
name: 'AdvancedFormDemo',
component: () => import('/@/views/demo/form/AdvancedForm.vue'),
meta: {
title: t('routes.demo.form.advancedForm'),
},
},
{
path: 'ruleForm',
name: 'RuleFormDemo',
component: () => import('/@/views/demo/form/RuleForm.vue'),
meta: {
title: t('routes.demo.form.ruleForm'),
},
},
{
path: 'dynamicForm',
name: 'DynamicFormDemo',
component: () => import('/@/views/demo/form/DynamicForm.vue'),
meta: {
title: t('routes.demo.form.dynamicForm'),
},
},
{
path: 'customerForm',
name: 'CustomerFormDemo',
component: () => import('/@/views/demo/form/CustomerForm.vue'),
meta: {
title: t('routes.demo.form.customerForm'),
},
},
],
},
{
path: 'table',
name: 'TableDemo',
redirect: '/comp/table/basic',
component: getParentLayout('TableDemo'),
meta: {
// icon: 'carbon:table-split',
title: t('routes.demo.table.table'),
},
children: [
{
path: 'basic',
name: 'TableBasicDemo',
component: () => import('/@/views/demo/table/Basic.vue'),
meta: {
title: t('routes.demo.table.basic'),
},
},
{
path: 'treeTable',
name: 'TreeTableDemo',
component: () => import('/@/views/demo/table/TreeTable.vue'),
meta: {
title: t('routes.demo.table.treeTable'),
},
},
{
path: 'fetchTable',
name: 'FetchTableDemo',
component: () => import('/@/views/demo/table/FetchTable.vue'),
meta: {
title: t('routes.demo.table.fetchTable'),
},
},
{
path: 'fixedColumn',
name: 'FixedColumnDemo',
component: () => import('/@/views/demo/table/FixedColumn.vue'),
meta: {
title: t('routes.demo.table.fixedColumn'),
},
},
{
path: 'customerCell',
name: 'CustomerCellDemo',
component: () => import('/@/views/demo/table/CustomerCell.vue'),
meta: {
title: t('routes.demo.table.customerCell'),
},
},
{
path: 'formTable',
name: 'FormTableDemo',
component: () => import('/@/views/demo/table/FormTable.vue'),
meta: {
title: t('routes.demo.table.formTable'),
},
},
{
path: 'useTable',
name: 'UseTableDemo',
component: () => import('/@/views/demo/table/UseTable.vue'),
meta: {
title: t('routes.demo.table.useTable'),
},
},
{
path: 'refTable',
name: 'RefTableDemo',
component: () => import('/@/views/demo/table/RefTable.vue'),
meta: {
title: t('routes.demo.table.refTable'),
},
},
{
path: 'multipleHeader',
name: 'MultipleHeaderDemo',
component: () => import('/@/views/demo/table/MultipleHeader.vue'),
meta: {
title: t('routes.demo.table.multipleHeader'),
},
},
{
path: 'mergeHeader',
name: 'MergeHeaderDemo',
component: () => import('/@/views/demo/table/MergeHeader.vue'),
meta: {
title: t('routes.demo.table.mergeHeader'),
},
},
{
path: 'expandTable',
name: 'ExpandTableDemo',
component: () => import('/@/views/demo/table/ExpandTable.vue'),
meta: {
title: t('routes.demo.table.expandTable'),
},
},
{
path: 'fixedHeight',
name: 'FixedHeightDemo',
component: () => import('/@/views/demo/table/FixedHeight.vue'),
meta: {
title: t('routes.demo.table.fixedHeight'),
},
},
{
path: 'footerTable',
name: 'FooterTableDemo',
component: () => import('/@/views/demo/table/FooterTable.vue'),
meta: {
title: t('routes.demo.table.footerTable'),
},
},
{
path: 'editCellTable',
name: 'EditCellTableDemo',
component: () => import('/@/views/demo/table/EditCellTable.vue'),
meta: {
title: t('routes.demo.table.editCellTable'),
},
},
{
path: 'editRowTable',
name: 'EditRowTableDemo',
component: () => import('/@/views/demo/table/EditRowTable.vue'),
meta: {
title: t('routes.demo.table.editRowTable'),
},
},
],
},
{
path: 'transition',
name: 'transitionDemo',
@@ -38,7 +240,89 @@ const comp: AppRouteModule = {
title: t('routes.demo.comp.countTo'),
},
},
{
path: 'tree',
name: 'TreeDemo',
redirect: '/comp/tree/basic',
component: getParentLayout('TreeDemo'),
meta: {
// icon: 'clarity:tree-view-line',
title: t('routes.demo.comp.tree'),
},
children: [
{
path: 'basic',
name: 'BasicTreeDemo',
component: () => import('/@/views/demo/tree/index.vue'),
meta: {
title: t('routes.demo.comp.treeBasic'),
},
},
{
path: 'editTree',
name: 'EditTreeDemo',
component: () => import('/@/views/demo/tree/EditTree.vue'),
meta: {
title: t('routes.demo.comp.editTree'),
},
},
{
path: 'actionTree',
name: 'ActionTreeDemo',
component: () => import('/@/views/demo/tree/ActionTree.vue'),
meta: {
title: t('routes.demo.comp.actionTree'),
},
},
],
},
{
path: 'editor',
name: 'EditorDemo',
redirect: '/comp/editor/markdown',
component: getParentLayout('EditorDemo'),
meta: {
// icon: 'carbon:table-split',
title: t('routes.demo.editor.editor'),
},
children: [
{
path: 'markdown',
name: 'MarkdownDemo',
component: () => import('/@/views/demo/editor/Markdown.vue'),
meta: {
title: t('routes.demo.editor.markdown'),
},
},
{
path: 'tinymce',
component: getParentLayout('TinymceDemo'),
name: 'TinymceDemo',
meta: {
title: t('routes.demo.editor.tinymce'),
},
redirect: '/comp/editor/tinymce/index',
children: [
{
path: 'index',
name: 'TinymceBasicDemo',
component: () => import('/@/views/demo/editor/tinymce/index.vue'),
meta: {
title: t('routes.demo.editor.tinymceBasic'),
},
},
{
path: 'editor',
name: 'TinymceFormDemo',
component: () => import('/@/views/demo/editor/tinymce/Editor.vue'),
meta: {
title: t('routes.demo.editor.tinymceForm'),
},
},
],
},
],
},
{
path: 'scroll',
name: 'ScrollDemo',

54
src/router/routes/modules/demo/editor.ts
View File

@@ -1,54 +0,0 @@
import type { AppRouteModule } from '/@/router/types';
import { getParentLayout, LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
const editor: AppRouteModule = {
path: '/editor',
name: 'Editor',
component: LAYOUT,
redirect: '/editor/markdown',
meta: {
icon: 'carbon:table-split',
title: t('routes.demo.editor.editor'),
},
children: [
{
path: 'markdown',
name: 'MarkdownDemo',
component: () => import('/@/views/demo/editor/Markdown.vue'),
meta: {
title: t('routes.demo.editor.markdown'),
},
},
{
path: 'tinymce',
component: getParentLayout('TinymceDemo'),
name: 'TinymceDemo',
meta: {
title: t('routes.demo.editor.tinymce'),
},
redirect: '/editor/tinymce/index',
children: [
{
path: 'index',
name: 'TinymceBasicDemo',
component: () => import('/@/views/demo/editor/tinymce/index.vue'),
meta: {
title: t('routes.demo.editor.tinymceBasic'),
},
},
{
path: 'editor',
name: 'TinymceFormDemo',
component: () => import('/@/views/demo/editor/tinymce/Editor.vue'),
meta: {
title: t('routes.demo.editor.tinymceForm'),
},
},
],
},
],
};
export default editor;

52
src/router/routes/modules/demo/excel.ts
View File

@@ -1,52 +0,0 @@
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
const excel: AppRouteModule = {
path: '/excel',
name: 'Excel',
component: LAYOUT,
redirect: '/excel/customExport',
meta: {
icon: 'mdi:microsoft-excel',
title: t('routes.demo.excel.excel'),
},
children: [
{
path: 'customExport',
name: 'CustomExport',
component: () => import('/@/views/demo/excel/CustomExport.vue'),
meta: {
title: t('routes.demo.excel.customExport'),
},
},
{
path: 'jsonExport',
name: 'JsonExport',
component: () => import('/@/views/demo/excel/JsonExport.vue'),
meta: {
title: t('routes.demo.excel.jsonExport'),
},
},
{
path: 'arrayExport',
name: 'ArrayExport',
component: () => import('/@/views/demo/excel/ArrayExport.vue'),
meta: {
title: t('routes.demo.excel.arrayExport'),
},
},
{
path: 'importExcel',
name: 'ImportExcel',
component: () => import('/@/views/demo/excel/ImportExcel.vue'),
meta: {
title: t('routes.demo.excel.importExcel'),
},
},
],
};
export default excel;

47
src/router/routes/modules/demo/feat.ts
View File

@@ -1,6 +1,6 @@
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { getParentLayout, LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
const feat: AppRouteModule = {
@@ -110,6 +110,51 @@ const feat: AppRouteModule = {
title: t('routes.demo.feat.errorLog'),
},
},
{
path: 'excel',
name: 'Excel',
redirect: '/feat/excel/customExport',
component: getParentLayout('Excel'),
meta: {
// icon: 'mdi:microsoft-excel',
title: t('routes.demo.excel.excel'),
},
children: [
{
path: 'customExport',
name: 'CustomExport',
component: () => import('/@/views/demo/excel/CustomExport.vue'),
meta: {
title: t('routes.demo.excel.customExport'),
},
},
{
path: 'jsonExport',
name: 'JsonExport',
component: () => import('/@/views/demo/excel/JsonExport.vue'),
meta: {
title: t('routes.demo.excel.jsonExport'),
},
},
{
path: 'arrayExport',
name: 'ArrayExport',
component: () => import('/@/views/demo/excel/ArrayExport.vue'),
meta: {
title: t('routes.demo.excel.arrayExport'),
},
},
{
path: 'importExcel',
name: 'ImportExcel',
component: () => import('/@/views/demo/excel/ImportExcel.vue'),
meta: {
title: t('routes.demo.excel.importExcel'),
},
},
],
},
{
path: 'testTab/:id',
name: 'TestTab',

74
src/router/routes/modules/demo/form.ts
View File

@@ -1,74 +0,0 @@
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
const form: AppRouteModule = {
path: '/form',
name: 'FormDemo',
component: LAYOUT,
redirect: '/form/basic',
meta: {
icon: 'mdi:form-select',
title: t('routes.demo.form.form'),
},
children: [
{
path: 'basic',
name: 'FormBasicDemo',
component: () => import('/@/views/demo/form/index.vue'),
meta: {
title: t('routes.demo.form.basic'),
},
},
{
path: 'useForm',
name: 'UseFormDemo',
component: () => import('/@/views/demo/form/UseForm.vue'),
meta: {
title: t('routes.demo.form.useForm'),
},
},
{
path: 'refForm',
name: 'RefFormDemo',
component: () => import('/@/views/demo/form/RefForm.vue'),
meta: {
title: t('routes.demo.form.refForm'),
},
},
{
path: 'advancedForm',
name: 'AdvancedFormDemo',
component: () => import('/@/views/demo/form/AdvancedForm.vue'),
meta: {
title: t('routes.demo.form.advancedForm'),
},
},
{
path: 'ruleForm',
name: 'RuleFormDemo',
component: () => import('/@/views/demo/form/RuleForm.vue'),
meta: {
title: t('routes.demo.form.ruleForm'),
},
},
{
path: 'dynamicForm',
name: 'DynamicFormDemo',
component: () => import('/@/views/demo/form/DynamicForm.vue'),
meta: {
title: t('routes.demo.form.dynamicForm'),
},
},
{
path: 'customerForm',
name: 'CustomerFormDemo',
component: () => import('/@/views/demo/form/CustomerForm.vue'),
meta: {
title: t('routes.demo.form.customerForm'),
},
},
],
};
export default form;

140
src/router/routes/modules/demo/table.ts
View File

@@ -1,140 +0,0 @@
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
const table: AppRouteModule = {
path: '/table',
name: 'TableDemo',
component: LAYOUT,
redirect: '/table/basic',
meta: {
icon: 'carbon:table-split',
title: t('routes.demo.table.table'),
},
children: [
{
path: 'basic',
name: 'TableBasicDemo',
component: () => import('/@/views/demo/table/Basic.vue'),
meta: {
title: t('routes.demo.table.basic'),
},
},
{
path: 'treeTable',
name: 'TreeTableDemo',
component: () => import('/@/views/demo/table/TreeTable.vue'),
meta: {
title: t('routes.demo.table.treeTable'),
},
},
{
path: 'fetchTable',
name: 'FetchTableDemo',
component: () => import('/@/views/demo/table/FetchTable.vue'),
meta: {
title: t('routes.demo.table.fetchTable'),
},
},
{
path: 'fixedColumn',
name: 'FixedColumnDemo',
component: () => import('/@/views/demo/table/FixedColumn.vue'),
meta: {
title: t('routes.demo.table.fixedColumn'),
},
},
{
path: 'customerCell',
name: 'CustomerCellDemo',
component: () => import('/@/views/demo/table/CustomerCell.vue'),
meta: {
title: t('routes.demo.table.customerCell'),
},
},
{
path: 'formTable',
name: 'FormTableDemo',
component: () => import('/@/views/demo/table/FormTable.vue'),
meta: {
title: t('routes.demo.table.formTable'),
},
},
{
path: 'useTable',
name: 'UseTableDemo',
component: () => import('/@/views/demo/table/UseTable.vue'),
meta: {
title: t('routes.demo.table.useTable'),
},
},
{
path: 'refTable',
name: 'RefTableDemo',
component: () => import('/@/views/demo/table/RefTable.vue'),
meta: {
title: t('routes.demo.table.refTable'),
},
},
{
path: 'multipleHeader',
name: 'MultipleHeaderDemo',
component: () => import('/@/views/demo/table/MultipleHeader.vue'),
meta: {
title: t('routes.demo.table.multipleHeader'),
},
},
{
path: 'mergeHeader',
name: 'MergeHeaderDemo',
component: () => import('/@/views/demo/table/MergeHeader.vue'),
meta: {
title: t('routes.demo.table.mergeHeader'),
},
},
{
path: 'expandTable',
name: 'ExpandTableDemo',
component: () => import('/@/views/demo/table/ExpandTable.vue'),
meta: {
title: t('routes.demo.table.expandTable'),
},
},
{
path: 'fixedHeight',
name: 'FixedHeightDemo',
component: () => import('/@/views/demo/table/FixedHeight.vue'),
meta: {
title: t('routes.demo.table.fixedHeight'),
},
},
{
path: 'footerTable',
name: 'FooterTableDemo',
component: () => import('/@/views/demo/table/FooterTable.vue'),
meta: {
title: t('routes.demo.table.footerTable'),
},
},
{
path: 'editCellTable',
name: 'EditCellTableDemo',
component: () => import('/@/views/demo/table/EditCellTable.vue'),
meta: {
title: t('routes.demo.table.editCellTable'),
},
},
{
path: 'editRowTable',
name: 'EditRowTableDemo',
component: () => import('/@/views/demo/table/EditRowTable.vue'),
meta: {
title: t('routes.demo.table.editRowTable'),
},
},
],
};
export default table;

43
src/router/routes/modules/demo/tree.ts
View File

@@ -1,43 +0,0 @@
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
const tree: AppRouteModule = {
path: '/tree',
name: 'TreeDemo',
component: LAYOUT,
redirect: '/tree/basic',
meta: {
icon: 'clarity:tree-view-line',
title: t('routes.demo.tree.tree'),
},
children: [
{
path: 'basic',
name: 'BasicTreeDemo',
component: () => import('/@/views/demo/tree/index.vue'),
meta: {
title: t('routes.demo.tree.basic'),
},
},
{
path: 'editTree',
name: 'EditTreeDemo',
component: () => import('/@/views/demo/tree/EditTree.vue'),
meta: {
title: t('routes.demo.tree.editTree'),
},
},
{
path: 'actionTree',
name: 'ActionTreeDemo',
component: () => import('/@/views/demo/tree/ActionTree.vue'),
meta: {
title: t('routes.demo.tree.actionTree'),
},
},
],
};
export default tree;

2
src/settings/colorSetting.ts
View File

@@ -11,6 +11,7 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
'#24292e',
'#394664',
'#001529',
'#383f45',
];
// sider preset color
@@ -24,4 +25,5 @@ export const SIDE_BAR_BG_COLOR_LIST: string[] = [
'#001628',
'#28333E',
'#344058',
'#383f45',
];

6
src/settings/projectSetting.ts
View File

@@ -81,11 +81,9 @@ const setting: ProjectConfig = {
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
canDrag: false,
canDrag: true,
// Whether to show no dom
show: true,
// Whether to show dom
@@ -106,6 +104,8 @@ const setting: ProjectConfig = {
trigger: TriggerEnum.HEADER,
// Turn on accordion mode, only show a menu
accordion: true,
// Switch page to close menu
closeMixSidebarOnChange: false,
},
// Multi-label

5
src/store/modules/tab.ts
View File

@@ -88,8 +88,9 @@ class Tab extends VuexModule {
if (item.meta?.affix) {
const name = item.name as string;
pageCacheSet.add(name);
} else if (item.matched && needCache) {
const matched = item.matched;
} else if (item?.matched && needCache) {
const matched = item?.matched;
if (!matched) return;
const len = matched.length;
if (len < 2) return;

3
src/types/config.d.ts vendored
View File

@@ -7,7 +7,6 @@ export interface MenuSetting {
bgColor: string;
fixed: boolean;
collapsed: boolean;
collapsedShowTitle: boolean;
canDrag: boolean;
show: boolean;
hidden: boolean;
@@ -19,6 +18,7 @@ export interface MenuSetting {
topMenuAlign: 'start' | 'center' | 'end';
trigger: TriggerEnum;
accordion: boolean;
closeMixSidebarOnChange: boolean;
}
export interface MultiTabsSetting {
@@ -109,6 +109,7 @@ export interface ProjectConfig {
// pageLayout是否开启keep-alive
openKeepAlive: boolean;
//
// 锁屏时间
lockTime: number;
// 显示面包屑

2
src/utils/factory/createAsyncComponent.tsx
View File

@@ -34,7 +34,9 @@ export function createAsyncComponent(loader: Fn, options: Options = {}) {
loadingComponent: loading ? <Spin spinning={true} size={size} /> : undefined,
// The error component will be displayed if a timeout is
// provided and exceeded. Default: Infinity.
// TODO
timeout,
// errorComponent
// Defining if component is suspensible. Default: true.
// suspensible: false,
delay,