perf: layout style optimization

vbenjs · Oct 31, 2020 · 7895b2f · 7895b2f
1 parent be0b712
commit 7895b2f
Show file tree

Hide file tree

Showing 27 changed files with 200 additions and 217 deletions.
diff --git a/.env b/.env
@@ -2,7 +2,7 @@
 VITE_PORT = 3100
 
 # spa-title
-VITE_GLOB_APP_TITLE = Vben Admin 2.0
+VITE_GLOB_APP_TITLE = Vben Admin
 
 # spa shortname
 VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -1,3 +1,13 @@
+## Wip
+
+### ⚡ Performance Improvements
+
+- Layout 界面布局样式调整
+
+### 🐛 Bug Fixes
+
+- 修复表格类型错误
+
 ## 2.0.0-rc.7 (2020-10-31)
 
 ### ✨ Features

diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/components/Breadcrumb/Breadcrumb.vue b/src/components/Breadcrumb/Breadcrumb.vue
@@ -37,7 +37,7 @@
   .breadcrumb {
     height: @header-height;
     padding-right: 20px;
-    font-size: 12px;
+    font-size: 14px;
     line-height: @header-height;
     // line-height: 1;
 

diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx
@@ -66,7 +66,7 @@ export default defineComponent({
         offset += 54;
       }
       return {
-        height: `calc(100% - ${offset - 30}px)`,
+        height: `calc(100% - ${offset - 38}px)`,
         position: 'relative',
         overflow: 'auto',
       };
@@ -147,6 +147,7 @@ export default defineComponent({
     }
 
     const showTitle = computed(() => {
+      if (props.isTop) return true;
       if (!props.isAppMenu) return true;
       if (!props.collapsedShowTitle) {
         return !menuStore.getCollapsedState;
@@ -247,7 +248,6 @@ export default defineComponent({
     return () => {
       const { getCollapsedState } = menuStore;
       const { mode } = props;
-
       return mode === MenuModeEnum.HORIZONTAL ? (
         renderMenu()
       ) : (

diff --git a/src/components/Menu/src/SearchInput.vue b/src/components/Menu/src/SearchInput.vue
@@ -94,7 +94,7 @@
       .ant-input {
         color: @text-color-base;
         background: #fff;
-        border: 0;
+        // border: 0;
         outline: none;
 
         &:hover,

diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
@@ -4,7 +4,7 @@
   color: @white;
   background: linear-gradient(
     118deg,
-    rgba(@primary-color, 0.7),
+    rgba(@primary-color, 0.8),
     rgba(@primary-color, 1)
   ) !important;
   border-radius: 2px;
@@ -32,6 +32,7 @@
       font-size: 12px;
       flex-direction: column;
       line-height: 24px;
+      align-items: center;
     }
 
     & > li[role='menuitem']:not(.ant-menu-submenu) {
@@ -93,6 +94,8 @@
   }
 
   &-bg__sidebar-hor {
+    overflow: hidden;
+
     &.ant-menu-horizontal {
       display: flex;
       border: 0;
@@ -105,23 +108,16 @@
       &.ant-menu-light {
         .ant-menu-item {
           &.basic-menu-item__level1 {
-            height: 38px;
-            line-height: 38px;
+            height: @header-height;
+            line-height: @header-height;
           }
         }
 
-        .ant-menu-item:hover,
         .ant-menu-submenu:hover,
-        .ant-menu-item-active,
-        .ant-menu-submenu-active,
         .ant-menu-item-open,
         .ant-menu-submenu-open,
         .ant-menu-item-selected,
-        .ant-menu-submenu-selected {
-          color: @primary-color !important;
-          border-bottom: 3px solid @primary-color;
-        }
-
+        .ant-menu-submenu-selected,
         .ant-menu-item:hover,
         .ant-menu-item-active,
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
@@ -261,10 +257,13 @@
   }
 
   &.ant-menu-light {
+    overflow-x: hidden;
+    border-right: none;
+
     .basic-menu-item__level1 {
       &.top-active-menu {
         color: @primary-color;
-        border-bottom: 6px solid @primary-color;
+        border-bottom: 3px solid @primary-color;
       }
     }
 
@@ -306,16 +305,9 @@
   }
 
   &-light {
-    border-right: 1px solid rgba(221, 221, 221, 0.6);
-
     .ant-layout-sider-trigger {
       color: @text-color-base;
-      background: @trigger-light-bg-color;
-
-      &:hover {
-        color: @text-color-base;
-        background: @trigger-light-hover-bg-color;
-      }
+      border-top: 1px solid @border-color-light;
     }
   }
 }

diff --git a/src/components/Menu/src/props.ts b/src/components/Menu/src/props.ts
@@ -54,6 +54,10 @@ export const basicProps = {
     type: Boolean as PropType<boolean>,
     default: true,
   },
+  isTop: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
   beforeClickFn: {
     type: Function as PropType<Fn>,
     default: null,

diff --git a/src/design/ant/index.less b/src/design/ant/index.less
@@ -2,10 +2,15 @@
 @import './input.less';
 @import './btn.less';
 
+// TODO beta.11 fix
 .ant-col {
   width: 100%;
 }
 
+// .ant-form-item-label {
+//   text-align: unset;
+// }
+
 // =================================
 // ==============descriptions=======
 // =================================

diff --git a/src/design/index.less b/src/design/index.less
@@ -36,7 +36,8 @@ input::-ms-reveal {
 }
 
 body {
-  font-family: 'Microsoft YaHei,微软雅黑,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB';
+  // font-family: 'Microsoft YaHei,微软雅黑,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB';
+  font-family: '-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji';
   font-style: normal;
   font-weight: normal;
   line-height: 1.428571429; // 20/14
@@ -149,7 +150,7 @@ object {
 }
 
 .ant-layout {
-  background: #f1f1f6;
+  background: #f0f2f5;
 
   &-content {
     position: relative;

diff --git a/src/design/public.less b/src/design/public.less
@@ -5,11 +5,11 @@
 }
 
 // TODO 滚动条样式-待修改
-::-webkit-scrollbar-track {
-  // background: rgba(0, 0, 0, 0.06);
-  // border-radius: 2px;
-  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
-}
+// ::-webkit-scrollbar-track {
+//   // background: rgba(0, 0, 0, 0.06);
+//   // border-radius: 2px;
+//   // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+// }
 
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {

diff --git a/src/design/var/index.less b/src/design/var/index.less
@@ -3,13 +3,13 @@
 @import 'breakpoint';
 
 // tabs
-@multiple-height: 36px;
+@multiple-height: 30px;
 
 // headers
-@header-height: 36px;
+@header-height: 46px;
 
 // logo width
-@logo-width: 40px;
+@logo-width: 36px;
 
 //
 @sider-drag-z-index: 200;
@@ -18,4 +18,4 @@
 // app menu
 
 // left-menu
-@app-menu-item-height: 44px;
+@app-menu-item-height: 42px;
diff --git a/src/layouts/Logo.vue b/src/layouts/Logo.vue
@@ -1,18 +1,23 @@
 <template>
-  <div class="app-logo" @click="handleGoHome">
+  <div class="app-logo" @click="handleGoHome" :style="wrapStyle">
     <img :src="logo" />
-    <div v-if="show" class="logo-title ml-1 mt-1 ellipsis">{{ globSetting.title }}</div>
+    <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, ref, watch } from 'vue';
+  import { computed, defineComponent, PropType, ref, watch } from 'vue';
   // hooks
   import { useSetting } from '/@/hooks/core/useSetting';
+  import { useTimeout } from '/@/hooks/core/useTimeout';
+  import { useGo } from '/@/hooks/web/usePage';
 
   import { PageEnum } from '/@/enums/pageEnum';
+  import { MenuTypeEnum } from '../enums/menuEnum';
+
   import logo from '/@/assets/images/logo.png';
-  import { useTimeout } from '/@/hooks/core/useTimeout';
-  import { useGo } from '/@/hooks/web/usePage';
+
+  import { menuStore } from '../store/modules/menu';
+  import { appStore } from '../store/modules/app';
 
   export default defineComponent({
     name: 'Logo',
@@ -44,11 +49,24 @@
         }
       );
 
+      const wrapStyle = computed(() => {
+        const { getCollapsedState } = menuStore;
+        const {
+          menuSetting: { menuWidth, type },
+        } = appStore.getProjectConfig;
+        const miniWidth = { minWidth: `${menuWidth}px` };
+        if (type !== MenuTypeEnum.SIDEBAR) {
+          return miniWidth;
+        }
+        return getCollapsedState ? {} : miniWidth;
+      });
+
       return {
         handleGoHome,
         globSetting,
         show: showRef,
         logo,
+        wrapStyle,
       };
     },
   });
@@ -59,12 +77,13 @@
   .app-logo {
     display: flex;
     align-items: center;
+    padding-left: 16px;
     cursor: pointer;
 
     .logo-title {
       display: none;
-      font-family: Georgia, serif;
       font-size: 16px;
+      font-weight: 400;
       .respond-to(medium,{
        display: block;
      });

diff --git a/src/layouts/default/LayoutContent.tsx b/src/layouts/default/LayoutContent.tsx
@@ -4,7 +4,6 @@ import { Layout } from 'ant-design-vue';
 
 import { ContentEnum } from '/@/enums/appEnum';
 import { appStore } from '/@/store/modules/app';
-// import { RouterView } from 'vue-router';
 import PageLayout from '/@/layouts/page/index';
 export default defineComponent({
   name: 'DefaultLayoutContent',
@@ -15,9 +14,7 @@ export default defineComponent({
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
         <Layout.Content class={`layout-content ${wrapClass} `}>
-          {{
-            default: () => <PageLayout />,
-          }}
+          {() => <PageLayout />}
         </Layout.Content>
       );
     };