系统配置添加子菜单

src/router/modules/basic.js

@@ -73,17 +73,18 @@ export const UserManagePage = {
 export const SystemConfigPage = {
   path: '/system_config',
   component: DEFAULT,
-  redirect: '/system_config',
+  redirect: '/system_config/mail',
   meta: {
     title: '系统管理',
     icon: 'setting',
   },
   children: [
     {
-      path: '/system_config',
-      name: 'SystemConfig',
+      path: 'mail',
+      name: 'MailConfig',
       component: () => import('@/views/system_config'),
     },
+
   ],
 };
 

src/views/system_config/common/menu.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="menu">
+    <ul class="menu-list">
+      <li
+        v-for="{ key, name } in subMenuList"
+        :key="key"
+        :class="['menu-item', { active: key === activeKey }]"
+        @click="changeSubMenu(key)"
+      >
+        {{ name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ConfigMenuPage',
+  props: {
+    curKey: {
+      type: String,
+      default: 'mail',
+    },
+  },
+  data() {
+    return {
+      activeKey: this.curKey,
+      // 子菜单列表
+      subMenuList: [{ key: 'mail', name: '邮箱配置' }],
+    };
+  },
+  methods: {
+    /**
+     * 切换子菜单
+     * @param {number} key - 子菜单键
+     */
+    changeSubMenu(key) {
+      if (key === this.activeKey) return;
+      this.activeKey = key;
+      this.$router.push({ path: `/system_config/${key}` });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.menu {
+  z-index: 9;
+  display: flex;
+  background-color: $main-background-color;
+
+  &-list {
+    display: flex;
+    justify-content: space-around;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+
+    .menu-item {
+      padding: 10px 20px;
+      cursor: pointer;
+      background-color: #ebebeb;
+      border: $border;
+      border-radius: 4px;
+      transition: background-color 0.3s ease;
+
+      &:hover {
+        background-color: #e0e0e0;
+      }
+
+      &.active {
+        font-weight: bold;
+        background-color: #fff;
+        box-shadow: 0 2px 4px #e6e6e6;
+      }
+    }
+  }
+}
+</style>

src/views/system_config/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="system_config">
+    <Menu cur-key="mail" />
     <div class="btn-box">
       <el-button type="primary" @click="getInfo" :loading="refresh_loading">刷新</el-button>
       <el-button type="primary" :loading="loading" @click="onSubmit">应用</el-button>
@@ -56,8 +57,10 @@
 
 <script>
 import { getSysConfigMailbox, setSysConfigMailbox } from '@/api/user';
+import Menu from './common/menu.vue';
 export default {
-  name: 'SystemConfig',
+  name: 'MailConfig',
+  components: { Menu },
   data() {
     const validateEmail = (rule, value, callback) => {
       if (value === '') {
@@ -141,15 +144,17 @@ export default {
   .btn-box {
     width: 100%;
     max-width: 1148px;
-    padding: 20px 0;
-    margin: 10px auto;
+    padding: 5px 0;
+    margin: 0 auto;
     border-bottom: $border;
   }
 
   .config-form {
     width: 100%;
     max-width: 1148px;
+    height: calc(100vh - 190px);
     margin: 10px auto;
+    overflow: auto;
 
     :deep .el-input--small {
       width: 304px;