提交 4f6b65b8 编写于 作者: V vben

feat(trigger): add trigger config

上级 58f988a7
## Wip
### ✨ Features
- 菜单 trigger 可以选择位置
- 增加富文本嵌入表单的示例
- 表单组件 schema 增加 `required`属性。简化配置
- openModal 和 openDrawer 第二个参数可以代替`transferModalData`传参到内部
### ⚡ Performance Improvements
- 菜单性能继续优化,更流畅
- 优化懒加载组件及示例
- layout 样式微调
### 🎫 Chores
......
......@@ -11,7 +11,7 @@
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'moment/dist/locale/zh-cn';
import { useConfigProvider, useInitAppConfigStore, useListenerNetWork } from './useApp';
import { useLockPage } from '/@/hooks/web/useLockPage';
......
......@@ -73,7 +73,7 @@ export default defineComponent({
offset += 46;
}
return {
height: `calc(100% - ${offset - 10}px)`,
height: `calc(100% - ${offset - 12}px)`,
position: 'relative',
overflowY: 'auto',
};
......
......@@ -32,7 +32,7 @@ export default defineComponent({
* @description: 渲染图标
*/
function renderIcon(icon: string) {
return icon ? <Icon icon={icon} size={18} class="mr-1 menu-item-icon" /> : null;
return icon ? <Icon icon={icon} size={18} class="menu-item-icon" /> : null;
}
return () => {
......
......@@ -41,6 +41,7 @@
font-size: 12px;
flex-direction: column;
align-items: center;
line-height: 24px;
}
& > li > .ant-menu-submenu-title {
......@@ -183,9 +184,17 @@
transition: unset;
}
&:not(.basic-menu__sidebar-hor).ant-menu-inline-collapsed {
.basic-menu-item__level1 {
> div {
align-items: center;
}
}
}
&.ant-menu-dark:not(.basic-menu__sidebar-hor):not(.basic-menu__second) {
// Reset menu item row height
.ant-menu-item,
.ant-menu-item:not(.basic-menu-item__level1),
.ant-menu-sub.ant-menu-inline > .ant-menu-item,
.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
height: @app-menu-item-height;
......
......@@ -17,6 +17,16 @@ export enum MenuThemeEnum {
LIGHT = 'light',
}
// 折叠触发器位置
export enum TriggerEnum {
// 不显示
NONE = 'NONE',
// 菜单底部
FOOTER = 'FOOTER',
// 头部
HEADER = 'HEADER',
}
export type Mode = 'vertical' | 'vertical-right' | 'horizontal' | 'inline';
// menu mode
......
<template>
<div class="app-logo anticon" @click="handleGoHome" :style="wrapStyle">
<div class="app-logo anticon" :class="theme" @click="handleGoHome" :style="wrapStyle">
<img :src="logo" />
<div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
</div>
......@@ -26,6 +26,9 @@
type: Boolean as PropType<boolean>,
default: true,
},
theme: {
type: String,
},
},
setup(props) {
const showRef = ref<boolean>(!!props.showTitle);
......@@ -80,6 +83,9 @@
padding-left: 16px;
cursor: pointer;
// justify-content: center;
&.light {
border-bottom: 1px solid @border-color-base;
}
.logo-title {
font-size: 18px;
......
import { defineComponent } from 'vue';
import { Layout } from 'ant-design-vue';
// import { Layout } from 'ant-design-vue';
// hooks
import { ContentEnum } from '/@/enums/appEnum';
......@@ -13,9 +13,9 @@ export default defineComponent({
const { contentMode } = getProjectConfig;
const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
return (
<Layout.Content class={`layout-content ${wrapClass} `}>
{() => <PageLayout />}
</Layout.Content>
// <Layout.Content class={`layout-content ${wrapClass} `}>
<PageLayout class={`layout-content ${wrapClass} `} />
// </Layout.Content>
);
};
},
......
......@@ -6,6 +6,7 @@ import UserDropdown from './UserDropdown';
import LayoutMenu from './LayoutMenu';
import LayoutBreadcrumb from './LayoutBreadcrumb';
import LockAction from './actions/LockActionItem';
import LayoutTrigger from './LayoutTrigger';
import NoticeAction from './actions/notice/NoticeActionItem.vue';
import {
RedoOutlined,
......@@ -25,7 +26,7 @@ import { useModal } from '/@/components/Modal/index';
import { appStore } from '/@/store/modules/app';
import { errorStore } from '/@/store/modules/error';
import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { GITHUB_URL } from '/@/settings/siteSetting';
export default defineComponent({
name: 'DefaultLayoutHeader',
......@@ -75,6 +76,13 @@ export default defineComponent({
return theme ? `layout-header__header--${theme}` : '';
});
const showHeaderTrigger = computed(() => {
const { show, trigger, hidden } = unref(getProjectConfigRef).menuSetting;
if (!show || !hidden) return false;
return trigger === TriggerEnum.HEADER;
});
function handleToErrorList() {
errorStore.commitErrorListCountState(0);
push('/exception/error-log');
......@@ -92,6 +100,7 @@ export default defineComponent({
const {
useErrorHandle,
showLogo,
multiTabsSetting: { show: showTab },
headerSetting: {
theme: headerTheme,
useLockPage,
......@@ -114,11 +123,17 @@ export default defineComponent({
{() => (
<>
<div class="layout-header__content ">
{showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />}
{mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
<LayoutBreadcrumb showIcon={showBreadCrumbIcon} />
{showLogo && !isSidebarType && (
<Logo class={`layout-header__logo`} theme={headerTheme} />
)}
<div class="layout-header__left">
{unref(showHeaderTrigger) && <LayoutTrigger theme={headerTheme} sider={false} />}
{mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
<LayoutBreadcrumb showIcon={showBreadCrumbIcon} />
)}
</div>
{unref(showTopMenu) && (
<div
class={[`layout-header__menu `]}
......@@ -193,7 +208,7 @@ export default defineComponent({
</Tooltip>
</div>
)}
{showRedo && (
{showRedo && showTab && (
<Tooltip>
{{
title: () => '刷新',
......
......@@ -68,9 +68,6 @@ export default defineComponent({
return unref(getProjectConfigRef).menuSetting.mode === MenuModeEnum.HORIZONTAL;
});
onMounted(() => {
genMenus();
});
const [throttleHandleSplitLeftMenu] = useThrottle(handleSplitLeftMenu, 50);
// watch(
......@@ -90,6 +87,7 @@ export default defineComponent({
immediate: true,
}
);
watch(
[() => permissionStore.getLastBuildMenuTimeState, permissionStore.getBackMenuListState],
() => {
......@@ -112,7 +110,7 @@ export default defineComponent({
if (!children) {
appStore.commitProjectConfigState({
menuSetting: {
show: false,
hidden: false,
},
});
flatMenusRef.value = [];
......@@ -122,7 +120,7 @@ export default defineComponent({
const flatChildren = await getFlatChildrenMenus(children);
appStore.commitProjectConfigState({
menuSetting: {
show: true,
hidden: true,
},
});
flatMenusRef.value = flatChildren;
......@@ -193,6 +191,10 @@ export default defineComponent({
);
});
onMounted(() => {
genMenus();
});
return () => {
const {
showLogo,
......@@ -229,7 +231,11 @@ export default defineComponent({
{{
header: () =>
isShowLogo && (
<Logo showTitle={!collapsed} class={[`layout-menu__logo`, themeData]} />
<Logo
showTitle={!collapsed}
class={[`layout-menu__logo`, themeData]}
theme={themeData}
/>
),
}}
</BasicMenu>
......
import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue';
import { Layout } from 'ant-design-vue';
import SideBarTrigger from './SideBarTrigger';
import LayoutTrigger from './LayoutTrigger';
import { menuStore } from '/@/store/modules/menu';
// import darkMiniIMg from '/@/assets/images/sidebar/dark-mini.png';
// import lightMiniImg from '/@/assets/images/sidebar/light-mini.png';
// import lightImg from '/@/assets/images/sidebar/light.png';
import { appStore } from '/@/store/modules/app';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
import { useDebounce } from '/@/hooks/core/useDebounce';
import LayoutMenu from './LayoutMenu';
......@@ -133,6 +133,25 @@ export default defineComponent({
return unref(brokenRef) ? 0 : unref(getMiniWidth);
});
const showTrigger = computed(() => {
const {
menuSetting: { trigger },
} = unref(getProjectConfigRef);
return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER;
});
function handleSiderClick(e: ChangeEvent) {
if (!e || !e.target || e.target.className !== 'basic-menu__content') return;
const { collapsed, show } = appStore.getProjectConfig.menuSetting;
if (!collapsed || !show) return;
appStore.commitProjectConfigState({
menuSetting: {
collapsed: false,
},
});
}
function renderDragLine() {
const { menuSetting: { hasDrag = true } = {} } = unref(getProjectConfigRef);
return (
......@@ -149,8 +168,22 @@ export default defineComponent({
menuSetting: { theme, split: splitMenu },
} = unref(getProjectConfigRef);
const { getCollapsedState, getMenuWidthState } = menuStore;
const triggerDom = unref(showTrigger)
? {
trigger: () => <LayoutTrigger />,
}
: {};
const triggerAttr = unref(showTrigger)
? {}
: {
trigger: null,
};
return (
<Layout.Sider
onClick={handleSiderClick}
onCollapse={onCollapseChange}
breakpoint="md"
width={getMenuWidthState}
......@@ -161,9 +194,10 @@ export default defineComponent({
class="layout-sidebar"
ref={sideRef}
onBreakpoint={handleBreakpoint}
{...triggerAttr}
>
{{
trigger: () => <SideBarTrigger />,
...triggerDom,
default: () => (
<>
<LayoutMenu
......
import {
DoubleRightOutlined,
DoubleLeftOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined,
} from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
// store
import { menuStore } from '/@/store/modules/menu';
export default defineComponent({
name: 'LayoutTrigger',
props: {
sider: {
type: Boolean,
default: true,
},
theme: {
type: String,
},
},
setup(props) {
function toggleMenu() {
menuStore.commitCollapsedState(!menuStore.getCollapsedState);
}
return () => {
const siderTrigger = menuStore.getCollapsedState ? (
<DoubleRightOutlined />
) : (
<DoubleLeftOutlined />
);
if (props.sider) return siderTrigger;
return (
<span class={['layout-trigger', props.theme]} onClick={toggleMenu}>
{menuStore.getCollapsedState ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</span>
);
};
},
});
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
// store
import { menuStore } from '/@/store/modules/menu';
export default defineComponent({
name: 'SideBarTrigger',
setup() {
return () => (menuStore.getCollapsedState ? <DoubleRightOutlined /> : <DoubleLeftOutlined />);
},
});
......@@ -17,11 +17,10 @@
&__main {
position: relative;
height: 100%;
// overflow: hidden;
// overflow: auto;
&.fixed {
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
&.fixed.lock {
......@@ -373,9 +372,39 @@
}
}
.layout-breadcrumb {
padding: 0 16px;
.layout-header__left {
flex-grow: 1;
display: flex;
align-items: center;
.layout-trigger {
padding: 4px 10px 0 16px;
cursor: pointer;
.anticon {
font-size: 17px;
}
&.light {
&:hover {
background: @header-light-bg-hover-color;
}
svg {
fill: #000;
}
}
&.dark {
&:hover {
background: @header-dark-bg-hover-color;
}
}
}
.layout-breadcrumb {
padding: 0 8px;
}
}
.ant-layout-sider-trigger {
......
......@@ -73,7 +73,7 @@ export default defineComponent({
showSettingButton,
multiTabsSetting: { show: showTabs },
headerSetting: { fixed },
menuSetting: { split, show },
menuSetting: { split, hidden },
} = unref(getProjectConfigRef);
const fixedHeaderCls = fixed
......@@ -82,7 +82,7 @@ export default defineComponent({
const { isLock } = getLockInfo;
const showSideBar = split ? show : true;
const showSideBar = split ? hidden : true;
return (
<Layout class="default-layout relative">
{() => (
......@@ -107,9 +107,7 @@ export default defineComponent({
unref(showHeaderRef) && <LayoutHeader />}
{showTabs && !unref(getFullContent) && (
<Layout.Header class={`default-layout__tabs`}>
{() => <MultipleTabs />}
</Layout.Header>
<MultipleTabs class={`default-layout__tabs`} />
)}
{useOpenBackTop && <BackTop target={getTarget} />}
......
......@@ -2,7 +2,13 @@ import { defineComponent, computed, unref, ref } from 'vue';
import { BasicDrawer } from '/@/components/Drawer/index';
import { Divider, Switch, Tooltip, InputNumber, Select } from 'ant-design-vue';
import Button from '/@/components/Button/index.vue';
import { MenuModeEnum, MenuTypeEnum, MenuThemeEnum, TopMenuAlignEnum } from '/@/enums/menuEnum';
import {
MenuModeEnum,
MenuTypeEnum,
MenuThemeEnum,
TopMenuAlignEnum,
TriggerEnum,
} from '/@/enums/menuEnum';
import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
import { CopyOutlined, RedoOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { appStore } from '/@/store/modules/app';
......@@ -23,41 +29,49 @@ const themeOptions = [
{
value: MenuThemeEnum.LIGHT,
label: '亮色',
key: MenuThemeEnum.LIGHT,
},
{
value: MenuThemeEnum.DARK,
label: '暗色',
key: MenuThemeEnum.DARK,
},
];
const contentModeOptions = [
{
value: ContentEnum.FULL,
label: '流式',
key: ContentEnum.FULL,
},
{
value: ContentEnum.FIXED,
label: '定宽',
key: ContentEnum.FIXED,
},
];
const topMenuAlignOptions = [
{
value: TopMenuAlignEnum.CENTER,
label: '居中',
key: TopMenuAlignEnum.CENTER,
},
{
value: TopMenuAlignEnum.START,
label: '居左',
key: TopMenuAlignEnum.START,
},
{
value: TopMenuAlignEnum.END,
label: '居右',
key: TopMenuAlignEnum.END,
},
];
const menuTriggerOptions = [
{
value: TriggerEnum.NONE,
label: '不显示',
},
{
value: TriggerEnum.FOOTER,
label: '底部',
},
{
value: TriggerEnum.HEADER,
label: '顶部',
},
];
......@@ -181,7 +195,7 @@ export default defineComponent({
baseHandler('splitMenu', e);
},
def: split,
disabled: !unref(getShowMenuRef),
disabled: !unref(getShowMenuRef) || type !== MenuTypeEnum.MIX,
}),
renderSelectItem('顶栏主题', {
handler: (e) => {
......@@ -215,6 +229,7 @@ export default defineComponent({
menuWidth,
topMenuAlign,
collapsedShowTitle,
trigger,
} = {},
} = appStore.getProjectConfig;
return [
......@@ -262,6 +277,13 @@ export default defineComponent({
options: topMenuAlignOptions,
disabled: !unref(getShowHeaderRef),
}),
renderSelectItem('菜单折叠按钮', {
handler: (e) => {
baseHandler('menuTrigger', e);
},
def: trigger,
options: menuTriggerOptions,
}),
renderSelectItem('内容区域宽度', {
handler: (e) => {
baseHandler('contentMode', e);
......@@ -298,7 +320,7 @@ export default defineComponent({
disabled={!unref(getShowMenuRef)}
defaultValue={menuWidth}
formatter={(value: string) => `${parseInt(value)}px`}
onChange={(e) => {
onChange={(e: any) => {
baseHandler('menuWidth', e);
}}
/>
......@@ -424,13 +446,21 @@ export default defineComponent({
if (event === 'layout') {
const { mode, type, split } = value;
const splitOpt = split === undefined ? { split } : {};
let headerSetting = {};
if (type === MenuTypeEnum.TOP_MENU) {
headerSetting = {
theme: MenuThemeEnum.DARK,
};
}
config = {
menuSetting: {
mode,
type,
collapsed: false,
show: true,
...splitOpt,
},
headerSetting,
};
}
if (event === 'hasDrag') {
......@@ -440,6 +470,13 @@ export default defineComponent({
},
};
}
if (event === 'menuTrigger') {
config = {
menuSetting: {
trigger: value,
},
};
}
if (event === 'openPageLoading') {
config = {
openPageLoading: value,
......@@ -647,7 +684,7 @@ export default defineComponent({
<Switch
{...opt}
disabled={disabled}
onChange={(e) => {
onChange={(e: any) => {
handler && handler(e);
}}
checkedChildren="开"
......
import type { ProjectConfig } from '/@/types/config';
import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum } from '/@/enums/menuEnum';
import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
import { primaryColor } from '../../build/config/lessModifyVars';
import { isProdMode } from '/@/utils/env';
......@@ -23,6 +23,7 @@ const setting: ProjectConfig = {
// 是否显示logo
showLogo: true,
// 头部配置
headerSetting: {
fixed: true,
// 是否显示顶部
......@@ -50,8 +51,10 @@ const setting: ProjectConfig = {
collapsedShowTitle: false,
// 是否可拖拽
hasDrag: false,
// 是否显示
// 是否显示 没有dom
show: true,
// 是否显示 有dom
hidden: false,
// 是否显示搜索框
showSearch: true,
// 菜单宽度
......@@ -67,7 +70,9 @@ const setting: ProjectConfig = {
// 顶部菜单布局
topMenuAlign: 'center',
// 折叠菜单时候隐藏搜索框
collapsedShowSearch: true,
collapsedShowSearch: false,
// 折叠触发器的位置
trigger: TriggerEnum.HEADER,
},
// 消息配置
messageSetting: {
......
// 左侧菜单, 顶部菜单
import { MenuTypeEnum, MenuModeEnum, MenuThemeEnum } from '/@/enums/menuEnum';
import { MenuTypeEnum, MenuModeEnum, MenuThemeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
export interface MessageSetting {
......@@ -15,6 +15,7 @@ export interface MenuSetting {
hasDrag: boolean;
showSearch: boolean;
show: boolean;
hidden: boolean;
split: boolean;
menuWidth: number;
mode: MenuModeEnum;
......@@ -22,6 +23,7 @@ export interface MenuSetting {
theme: MenuThemeEnum;
topMenuAlign: 'start' | 'center' | 'end';
collapsedShowSearch: boolean;
trigger: TriggerEnum;
}
export interface MultiTabsSetting {
......
......@@ -42,6 +42,7 @@ export function genRouteModule(moduleList: AppRouteModule[]) {
}
// 动态引入
// TODO 错误写法
function asyncImportRoute(routes: AppRouteRecordRaw[]) {
routes.forEach((item) => {
let { component } = item;
......
......@@ -119,12 +119,7 @@ const viteConfig: UserConfig = {
},
// The package will be recompiled using rollup, and the new package compiled into the esm module specification will be put into node_modules/.vite_opt_cache
optimizeDeps: {
include: [
'echarts/map/js/china',
'ant-design-vue/es/locale/zh_CN',
'@ant-design/icons-vue',
'moment/locale/zh-cn',
],
include: ['echarts/map/js/china', 'ant-design-vue/es/locale/zh_CN', '@ant-design/icons-vue'],
},
// Local cross-domain proxy
......
......@@ -5513,7 +5513,7 @@ modify-values@^1.0.0:
resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
moment@^2.27.0:
moment@^2.27.0, moment@^2.29.1:
version "2.29.1"
resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册