chore: update layout

vben
1 parent b335e751
Showing 6 changed files with 22 additions and 37 deletions
CHANGELOG.zh_CN.md
src/components/Application/src/AppLocalePicker.vue
src/layouts/default/feature/index.vue
src/layouts/default/header/index.less
src/layouts/default/header/index.vue
src/layouts/default/setting/index.vue
@@ -9,6 +9,7 @@
 ### ⚡ Performance Improvements
 - 调整获取用户信息接口返回值为数组格式
+- 将 error-log 列表固定为系统路由
 ### 🐛 Bug Fixes
@@ -4,6 +4,7 @@
 -->
 <template>
   <Dropdown
+    placement="bottomCenter"
     :trigger="['click']"
     :dropMenuList="localeList"
     :selectedKeys="selectedKeys"
 <template>
   <LayoutLockPage />
   <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
-  <SettingDrawer v-if="getShowSettingButton" />
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
@@ -14,15 +13,13 @@
     components: {
       BackTop,
       LayoutLockPage: createAsyncComponent(() => import('/@/views/sys/lock/index.vue')),
-      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
     },
     setup() {
-      const { getUseOpenBackTop, getShowSettingButton } = useRootSetting();
+      const { getUseOpenBackTop } = useRootSetting();
       return {
         getTarget: () => document.body,
         getUseOpenBackTop,
-        getShowSettingButton,
       };
     },
   });
 @header-trigger-prefix-cls: ~'@{namespace}-layout-header-trigger';
 @header-prefix-cls: ~'@{namespace}-layout-header';
-@locale-prefix-cls: ~'@{namespace}-app-locale-picker';
 @breadcrumb-prefix-cls: ~'@{namespace}-layout-breadcrumb';
 @logo-prefix-cls: ~'@{namespace}-app-logo';
@@ -104,7 +103,7 @@
   &-action {
     display: flex;
     min-width: 180px;
-    padding-right: 12px;
+    // padding-right: 12px;
     align-items: center;
     &__item {
@@ -146,13 +145,15 @@
     .@{header-prefix-cls}-action {
       &__item {
-        &:hover {
-          background: @header-light-bg-hover-color;
+        color: @text-color-base;
+
+        .app-iconify {
+          padding: 0 10px;
+          font-size: 16px !important;
         }
-        .@{locale-prefix-cls} {
-          padding: 0 6px;
-          color: rgba(0, 0, 0, 0.65);
+        &:hover {
+          background: @header-light-bg-hover-color;
         }
       }
@@ -41,14 +41,16 @@
       <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
-      <UserDropDown :theme="getHeaderTheme" />
-
       <AppLocalePicker
         v-if="getShowLocale"
         :reload="true"
         :showText="false"
         :class="`${prefixCls}-action__item`"
       />
+
+      <UserDropDown :theme="getHeaderTheme" />
+
+      <SettingDrawer v-if="getShowSettingButton" :class="`${prefixCls}-action__item`" />
     </div>
   </Header>
 </template>
@@ -76,6 +78,8 @@
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
   export default defineComponent({
     name: 'LayoutHeader',
     components: {
@@ -90,6 +94,9 @@
       Notify,
       AppSearch,
       ErrorAction,
+      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
+        loading: true,
+      }),
     },
     props: {
       fixed: propTypes.bool,
@@ -105,7 +112,7 @@
         getIsMixSidebar,
       } = useMenuSetting();
       const { getShowLocale } = useLocaleSetting();
-      const { getUseErrorHandle } = useRootSetting();
+      const { getUseErrorHandle, getShowSettingButton } = useRootSetting();
       const {
         getHeaderTheme,
@@ -167,6 +174,7 @@
         getUseErrorHandle,
         getLogoWidth,
         getIsMixSidebar,
+        getShowSettingButton,
       };
     },
   });
@@ -27,26 +27,3 @@
     },
   });
 </script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-setting-button';
-
-  .@{prefix-cls} {
-    position: absolute;
-    top: 45%;
-    right: 0;
-    z-index: 10;
-    display: flex;
-    padding: 10px;
-    color: @white;
-    cursor: pointer;
-    background: @primary-color;
-    border-radius: 6px 0 0 6px;
-    justify-content: center;
-    align-items: center;
-
-    svg {
-      width: 1em;
-      height: 1em;
-    }
-  }
-</style>