feat(trigger): add trigger config

CHANGELOG.zh_CN.md

@@ -1,9 +1,17 @@
 ## Wip
 
+### ✨ Features
+
+- 菜单 trigger 可以选择位置
+- 增加富文本嵌入表单的示例
+- 表单组件 schema 增加 `required`属性。简化配置
+- openModal 和 openDrawer 第二个参数可以代替`transferModalData`传参到内部
+
 ### ⚡ Performance Improvements
 
 - 菜单性能继续优化,更流畅
 - 优化懒加载组件及示例
+- layout 样式微调
 
 ### 🎫 Chores
 

package.json

@@ -28,6 +28,7 @@
     "echarts": "^4.9.0",
     "lodash-es": "^4.17.15",
     "mockjs": "^1.1.0",
+    "moment": "^2.29.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",

src/App.vue

@@ -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';

src/components/Menu/src/BasicMenu.tsx

@@ -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',
       };

src/components/Menu/src/MenuContent.tsx

@@ -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 () => {

src/components/Menu/src/index.less

@@ -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;

src/enums/menuEnum.ts

@@ -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

src/layouts/Logo.vue

@@ -1,5 +1,5 @@
 <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;

src/layouts/default/LayoutContent.tsx

@@ -1,5 +1,5 @@
 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>
       );
     };
   },

src/layouts/default/LayoutHeader.tsx

@@ -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: () => '刷新',

src/layouts/default/LayoutMenu.tsx

@@ -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>

src/layouts/default/LayoutSideBar.tsx

@@ -1,14 +1,14 @@
 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

src/layouts/default/LayoutTrigger.tsx

@@ -0,0 +1,43 @@
+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>
+      );
+    };
+  },
+});