feat(Layout): Add cutMenu layout

kailong321200875 · Jan 21, 2022 · ff4dd3a · ff4dd3a
1 parent 1522e92
commit ff4dd3a
Show file tree

Hide file tree

Showing 23 changed files with 711 additions and 171 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -34,7 +34,7 @@ initDark()
 
 html,
 body {
-  padding: 0;
+  padding: 0 !important;
   margin: 0;
   overflow: hidden;
   .size;

diff --git a/src/components/Logo/src/Logo.vue b/src/components/Logo/src/Logo.vue
@@ -6,7 +6,7 @@ const appStore = useAppStore()
 
 const show = ref(true)
 
-const title = computed(() => appStore.getLogoTitle)
+const title = computed(() => appStore.getTitle)
 
 const layout = computed(() => appStore.getLayout)
 
@@ -19,15 +19,30 @@ onMounted(() => {
 watch(
   () => collapse.value,
   (collapse: boolean) => {
-    if (layout.value !== 'classic') {
+    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
+      show.value = true
+      return
+    }
+    if (!collapse) {
+      setTimeout(() => {
+        show.value = !collapse
+      }, 400)
+    } else {
+      show.value = !collapse
+    }
+  }
+)
+
+watch(
+  () => layout.value,
+  (layout) => {
+    if (layout === 'top' || layout === 'cutMenu') {
       show.value = true
     } else {
-      if (!collapse) {
-        setTimeout(() => {
-          show.value = !collapse
-        }, 400)
+      if (unref(collapse)) {
+        show.value = false
       } else {
-        show.value = !collapse
+        show.value = true
       }
     }
   }
@@ -55,7 +70,8 @@ watch(
         'ml-10px text-16px font-700',
         {
           'text-[var(--logo-title-text-color)]': layout === 'classic',
-          'text-[var(--top-header-text-color)]': layout === 'topLeft'
+          'text-[var(--top-header-text-color)]':
+            layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
         }
       ]"
     >
@@ -66,15 +82,4 @@ watch(
 
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-logo';
-
-.@{prefix-cls} {
-  &:after {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    border-bottom: 1px solid var(--logo-border-color);
-    content: '';
-  }
-}
 </style>
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { computed, defineComponent, unref } from 'vue'
+import { computed, defineComponent, unref, PropType } from 'vue'
 import { ElMenu, ElScrollbar } from 'element-plus'
 import { useAppStore } from '@/store/modules/app'
 import { usePermissionStore } from '@/store/modules/permission'
@@ -10,25 +10,35 @@ import { isUrl } from '@/utils/is'
 
 export default defineComponent({
   name: 'Menu',
-  setup() {
+  props: {
+    menuSelect: {
+      type: Function as PropType<(index: string) => void>,
+      default: undefined
+    }
+  },
+  setup(props) {
     const appStore = useAppStore()
 
+    const layout = computed(() => appStore.getLayout)
+
     const { push, currentRoute } = useRouter()
 
     const permissionStore = usePermissionStore()
 
     const menuMode = computed((): 'vertical' | 'horizontal' => {
       // 竖
-      const vertical: LayoutType[] = ['classic', 'topLeft']
+      const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu']
 
-      if (vertical.includes(appStore.getLayout)) {
+      if (vertical.includes(unref(layout))) {
         return 'vertical'
       } else {
         return 'horizontal'
       }
     })
 
-    const routers = computed(() => permissionStore.getRouters)
+    const routers = computed(() =>
+      unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
+    )
 
     const collapse = computed(() => appStore.getCollapse)
 
@@ -42,6 +52,10 @@ export default defineComponent({
     })
 
     const menuSelect = (index: string) => {
+      if (props.menuSelect) {
+        props.menuSelect(index)
+      }
+      // 自定义事件
       if (isUrl(index)) {
         window.open(index)
       } else {
@@ -52,19 +66,21 @@ export default defineComponent({
     return () => (
       <div
         class={[
-          'v-menu',
-          'h-[100%] overflow-hidden z-100 flex-col',
-          appStore.getCollapse
-            ? 'w-[var(--left-menu-min-width)]'
-            : 'w-[var(--left-menu-max-width)]',
-          'bg-[var(--left-menu-bg-color)]'
+          `v-menu v-menu__${unref(menuMode)}`,
+          'h-[100%] overflow-hidden z-100 flex-col bg-[var(--left-menu-bg-color)]',
+          {
+            'w-[var(--left-menu-min-width)]': unref(collapse) && unref(layout) !== 'cutMenu',
+            'w-[var(--left-menu-max-width)]': !unref(collapse) && unref(layout) !== 'cutMenu'
+          }
         ]}
       >
         <ElScrollbar>
           <ElMenu
             defaultActive={unref(activeMenu)}
             mode={unref(menuMode)}
-            collapse={unref(collapse)}
+            collapse={
+              unref(layout) === 'top' || unref(layout) === 'cutMenu' ? false : unref(collapse)
+            }
             backgroundColor="var(--left-menu-bg-color)"
             textColor="var(--left-menu-text-color)"
             activeTextColor="var(--left-menu-text-active-color)"
@@ -180,6 +196,35 @@ export default defineComponent({
       display: none;
     }
   }
+
+  // 水平菜单
+  &__horizontal {
+    height: calc(~'var( - -top-tool-height)') !important;
+
+    :deep(.el-menu--horizontal) {
+      height: calc(~'var( - -top-tool-height)');
+      border-bottom: none;
+      // 重新设置底部高亮颜色
+      & > .el-sub-menu.is-active {
+        .el-sub-menu__title {
+          border-bottom-color: var(--el-color-primary) !important;
+        }
+      }
+
+      .el-menu-item.is-active {
+        position: relative;
+
+        &:after {
+          display: none !important;
+        }
+      }
+
+      .v-menu__title {
+        max-height: calc(~'var( - -top-tool-height)') !important;
+        line-height: calc(~'var( - -top-tool-height)');
+      }
+    }
+  }
 }
 </style>
 
@@ -196,36 +241,35 @@ export default defineComponent({
   content: '';
 }
 
-.@{prefix-cls} {
-  &--vertical {
-    // 设置选中时子标题的颜色
-    .is-active {
-      & > .el-sub-menu__title {
-        color: var(--left-menu-text-active-color) !important;
-      }
+.@{prefix-cls}--vertical,
+.@{prefix-cls}--horizontal {
+  // 设置选中时子标题的颜色
+  .is-active {
+    & > .el-sub-menu__title {
+      color: var(--left-menu-text-active-color) !important;
     }
+  }
 
-    // 设置子菜单悬停的高亮和背景色
-    .el-sub-menu__title,
-    .el-menu-item {
-      &:hover {
-        color: var(--left-menu-text-active-color) !important;
-        background-color: var(--left-menu-bg-color) !important;
-      }
+  // 设置子菜单悬停的高亮和背景色
+  .el-sub-menu__title,
+  .el-menu-item {
+    &:hover {
+      color: var(--left-menu-text-active-color) !important;
+      background-color: var(--left-menu-bg-color) !important;
     }
+  }
 
-    // 设置选中时的高亮背景
-    .el-menu-item.is-active {
-      position: relative;
-      background-color: var(--left-menu-bg-active-color) !important;
+  // 设置选中时的高亮背景
+  .el-menu-item.is-active {
+    position: relative;
+    background-color: var(--left-menu-bg-active-color) !important;
 
-      &:hover {
-        background-color: var(--left-menu-bg-active-color) !important;
-      }
+    &:hover {
+      background-color: var(--left-menu-bg-active-color) !important;
+    }
 
-      &:after {
-        .is-active--after;
-      }
+    &:after {
+      .is-active--after;
     }
   }
 }

diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElDrawer, ElDivider } from 'element-plus'
-import { ref, unref } from 'vue'
+import { ref, unref, computed, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
@@ -15,6 +15,8 @@ const appStore = useAppStore()
 
 const { t } = useI18n()
 
+const layout = computed(() => appStore.getLayout)
+
 const drawer = ref(false)
 
 // 主题色相关
@@ -34,14 +36,20 @@ const setHeaderTheme = (color: string) => {
   const isDarkColor = colorIsDark(color)
   const textColor = isDarkColor ? '#fff' : 'inherit'
   const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
+  const topToolBorderColor = isDarkColor ? color : '#eee'
   setCssVar('--top-header-bg-color', color)
   setCssVar('--top-header-text-color', textColor)
   setCssVar('--top-header-hover-color', textHoverColor)
+  setCssVar('--top-tool-border-color', topToolBorderColor)
   appStore.setTheme({
     topHeaderBgColor: color,
     topHeaderTextColor: textColor,
-    topHeaderHoverColor: textHoverColor
+    topHeaderHoverColor: textHoverColor,
+    topToolBorderColor
   })
+  if (unref(layout) === 'top') {
+    setMenuTheme(color)
+  }
 }
 
 // 菜单主题相关
@@ -72,11 +80,26 @@ const setMenuTheme = (color: string) => {
     // logo字体颜色
     logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
     // logo边框颜色
-    logoBorderColor: isDarkColor ? 'inherit' : '#eee'
+    logoBorderColor: isDarkColor ? color : '#eee'
   }
   appStore.setTheme(theme)
   appStore.setCssVarTheme()
 }
+
+// 监听layout变化，重置一些主题色
+watch(
+  () => layout.value,
+  (n, o) => {
+    if (o === 'top') {
+      menuTheme.value = '#fff'
+      setMenuTheme('#fff')
+    }
+    if ((o === 'classic' || o === 'topLeft') && n === 'top') {
+      menuTheme.value = headerTheme.value
+      setMenuTheme(unref(menuTheme))
+    }
+  }
+)
 </script>
 
 <template>
@@ -136,21 +159,23 @@ const setMenuTheme = (color: string) => {
       />
 
       <!-- 菜单主题 -->
-      <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
-      <ColorRadioPicker
-        v-model="menuTheme"
-        :schema="[
-          '#fff',
-          '#001529',
-          '#212121',
-          '#273352',
-          '#191b24',
-          '#383f45',
-          '#001628',
-          '#344058'
-        ]"
-        @change="setMenuTheme"
-      />
+      <template v-if="layout !== 'top'">
+        <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
+        <ColorRadioPicker
+          v-model="menuTheme"
+          :schema="[
+            '#fff',
+            '#001529',
+            '#212121',
+            '#273352',
+            '#191b24',
+            '#383f45',
+            '#001628',
+            '#344058'
+          ]"
+          @change="setMenuTheme"
+        />
+      </template>
     </div>
 
     <!-- 界面显示 -->