refactor: admin layout settings (#441)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/SettingDrawer/SettingDrawer.vue

@@ -6,8 +6,8 @@
           <h3 class="setting-drawer-index-title">整体风格设置</h3>
           <div class="setting-drawer-index-blockChecbox">
             <a-tooltip>
-              <template slot="title">暗色菜单风格</template>
+              <template #title>暗色菜单风格</template>
-              <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
+              <div class="setting-drawer-index-item" @click="handleSetMenuTheme('dark')">
                 <img alt="dark" src="/images/dark.svg" />
                 <div v-if="navTheme === 'dark'" class="setting-drawer-index-selectIcon">
                   <a-icon type="check" />
@@ -16,8 +16,8 @@
             </a-tooltip>
 
             <a-tooltip>
-              <template slot="title">亮色菜单风格</template>
+              <template #title>亮色菜单风格</template>
-              <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
+              <div class="setting-drawer-index-item" @click="handleSetMenuTheme('light')">
                 <img alt="light" src="/images/dark.svg" />
                 <div v-if="navTheme !== 'dark'" class="setting-drawer-index-selectIcon">
                   <a-icon type="check" />
@@ -31,8 +31,8 @@
           <h3 class="setting-drawer-index-title">主题色</h3>
           <div class="h-5">
             <a-tooltip v-for="(item, index) in colorList" :key="index" class="setting-drawer-theme-color-colorBlock">
-              <template slot="title">{{ item.key }}</template>
+              <template #title>{{ item.key }}</template>
-              <a-tag :color="item.color" @click="changeColor(item.color)">
+              <a-tag :color="item.color" @click="handleChangeColor(item.color)">
                 <a-icon v-if="item.color === primaryColor" type="check"></a-icon>
               </a-tag>
             </a-tooltip>
@@ -43,14 +43,14 @@
           <h3 class="setting-drawer-index-title">导航模式</h3>
 
           <div class="setting-drawer-index-blockChecbox">
-            <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
+            <div class="setting-drawer-index-item" @click="handleSetLayout('sidemenu')">
               <img alt="sidemenu" src="/images/sidemenu.svg" />
               <div v-if="layoutMode === 'sidemenu'" class="setting-drawer-index-selectIcon">
                 <a-icon type="check" />
               </div>
             </div>
 
-            <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
+            <div class="setting-drawer-index-item" @click="handleSetLayout('topmenu')">
               <img alt="topmenu" src="/images/topmenu.svg" />
               <div v-if="layoutMode !== 'sidemenu'" class="setting-drawer-index-selectIcon">
                 <a-icon type="check" />
@@ -62,10 +62,12 @@
         <div class="mt-6">
           <a-list :split="false">
             <a-list-item>
-              <a-tooltip slot="actions">
+              <template #actions>
-                <template slot="title"> 该设定仅 [顶部栏导航] 时有效 </template>
+                <a-tooltip>
+                  <template #title> 该设定仅 [顶部栏导航] 时有效</template>
                   <a-select
-                  :defaultValue="contentWidth"
+                    :disabled="layoutMode !== 'topmenu'"
+                    :value="contentWidth"
                     size="small"
                     style="width: 80px"
                     @change="handleContentWidthChange"
@@ -74,41 +76,54 @@
                     <a-select-option v-if="layoutMode !== 'sidemenu'" value="Fluid">流式</a-select-option>
                   </a-select>
                 </a-tooltip>
+              </template>
               <a-list-item-meta>
-                <div slot="title">内容区域宽度</div>
+                <template #title>
+                  <div>内容区域宽度</div>
+                </template>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
-              <a-switch slot="actions" :defaultChecked="fixedHeader" size="small" @change="handleFixedHeader" />
+              <template #actions>
+                <a-switch :checked="fixedHeader" size="small" @change="handleSetFixedHeader" />
+              </template>
               <a-list-item-meta>
-                <div slot="title">固定 Header</div>
+                <template #title>
+                  <div>固定 Header</div>
+                </template>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
+              <template #actions>
                 <a-switch
-                slot="actions"
+                  :checked="autoHideHeader"
-                :defaultChecked="autoHideHeader"
                   :disabled="!fixedHeader"
                   size="small"
-                @change="handleFixedHeaderHidden"
+                  @change="handleSetAutoHideHeader"
                 />
+              </template>
               <a-list-item-meta>
-                <a-tooltip slot="title" placement="left">
+                <template #title>
-                  <template slot="title">固定 Header 时可配置</template>
+                  <a-tooltip placement="left">
+                    <template #title>固定 Header 时可配置</template>
                     <div :style="{ opacity: !fixedHeader ? '0.5' : '1' }">下滑时隐藏 Header</div>
                   </a-tooltip>
+                </template>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
+              <template #actions>
                 <a-switch
-                slot="actions"
+                  :checked="fixedSidebar"
-                :defaultChecked="fixedSidebar"
                   :disabled="layoutMode === 'topmenu'"
                   size="small"
-                @change="handleFixedSidebar"
+                  @change="handleSetFixedSidebar"
                 />
+              </template>
               <a-list-item-meta>
-                <div slot="title" :style="{ opacity: layoutMode === 'topmenu' ? '0.5' : '1' }">固定侧边菜单</div>
+                <template #title>
+                  <div :style="{ opacity: layoutMode === 'topmenu' ? '0.5' : '1' }">固定侧边菜单</div>
+                </template>
               </a-list-item-meta>
             </a-list-item>
           </a-list>
@@ -148,43 +163,45 @@ export default {
     onClose() {
       this.ToggleLayoutSetting(false)
     },
-    handleMenuTheme(theme) {
+    handleSetMenuTheme(theme) {
       this.baseConfig.navTheme = theme
       this.$store.dispatch('ToggleTheme', theme)
     },
-    handleLayout(mode) {
+    handleSetLayout(mode) {
       this.baseConfig.layout = mode
       this.$store.dispatch('ToggleLayoutMode', mode)
-      this.handleFixedSidebar(false)
       if (mode === 'sidemenu') {
         this.handleContentWidthChange('Fixed')
+        this.handleSetFixedSidebar(true)
+      } else {
+        this.handleSetFixedHeader(true)
+        this.handleSetFixedSidebar(false)
       }
     },
     handleContentWidthChange(type) {
       this.baseConfig.contentWidth = type
       this.$store.dispatch('ToggleContentWidth', type)
     },
-    changeColor(color) {
+    handleChangeColor(color) {
       this.baseConfig.primaryColor = color
       if (this.primaryColor !== color) {
         this.$store.dispatch('ToggleColor', color)
         updateTheme(color)
       }
     },
-    handleFixedHeader(fixed) {
+    handleSetFixedHeader(fixed) {
       this.baseConfig.fixedHeader = fixed
       this.$store.dispatch('ToggleFixedHeader', fixed)
+
+      if (!fixed) {
+        this.handleSetAutoHideHeader(false)
+      }
     },
-    handleFixedHeaderHidden(autoHidden) {
+    handleSetAutoHideHeader(autoHidden) {
       this.baseConfig.autoHideHeader = autoHidden
       this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
     },
-    handleFixedSidebar(fixed) {
+    handleSetFixedSidebar(fixed) {
-      if (this.layoutMode === 'topmenu') {
-        this.baseConfig.fixedSidebar = false
-        this.$store.dispatch('ToggleFixedSidebar', false)
-        return
-      }
       this.baseConfig.fixedSidebar = fixed
       this.$store.dispatch('ToggleFixedSidebar', fixed)
     }

src/config/defaultSettings.js

@@ -1,10 +1,10 @@
 export default {
   primaryColor: '#1890FF',
   navTheme: 'dark',
-  layout: 'topmenu',
+  layout: 'sidemenu',
   contentWidth: 'Fixed',
   fixedHeader: false,
-  fixedSidebar: false,
+  fixedSidebar: true,
   autoHideHeader: false,
   storageOptions: {
     namespace: 'halo__',

src/store/modules/app.js

@@ -84,9 +84,6 @@ const app = {
       commit('TOGGLE_LAYOUT_MODE', mode)
     },
     ToggleFixedHeader({ commit }, fixedHeader) {
-      if (!fixedHeader) {
-        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
-      }
       commit('TOGGLE_FIXED_HEADER', fixedHeader)
     },
     ToggleFixedSidebar({ commit }, fixedSidebar) {