【类 型】：feat

【原  因】：增加 系统设置 控制模块显示 隐藏
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/store/modules/app.js

@@ -1,3 +1,24 @@
+//  默认模块显示配置
+const defaultModuleVisibilityMap = {
+  home: true,
+  model: true,
+  register: true,
+  product: true,
+  route: true,
+  planes: true,
+  site: true,
+  shop: true,
+  admin: true,
+  category: true,
+  broadcast: true,
+  order: true,
+  nofly: true
+}
+
+// 从 localStorage 读取已有配置，合并覆盖默认配置
+const savedVisibility = JSON.parse(localStorage.getItem('moduleVisibilityMap') || '{}')
+const moduleVisibilityMap = { ...defaultModuleVisibilityMap, ...savedVisibility }
+
 const state = {
   mqttState: false, // mqtt连接状态
   isCollapse: localStorage.getItem('isCollapse') ? !!+localStorage.getItem('isCollapse') : true, // 侧边导航栏 显隐
@@ -6,6 +27,8 @@ const state = {
   defaultLonLat: null, // 地图默认经纬度
   defaultZoom: null, // 地图默认缩放
 
+  moduleVisibilityMap, // 使用合并后的 moduleVisibilityMap 初始化
+
   /* 页面参数 */
   orderSerch: null, // 订单列表页搜索条件
   toMessageIdArr: [], // 用户管理 发布公告页面  id临时传参
@@ -14,6 +37,15 @@ const state = {
 }
 
 const mutations = {
+  // 设置 模块显示隐藏参数
+  setModuleVisibility (state, { key, visible }) {
+    state.moduleVisibilityMap[key] = visible
+    localStorage.setItem('moduleVisibilityMap', JSON.stringify(state.moduleVisibilityMap))
+  },
+  setAllModuleVisibility (state, visibilityMap) {
+    state.moduleVisibilityMap = visibilityMap
+    localStorage.setItem('moduleVisibilityMap', JSON.stringify(state.moduleVisibilityMap))
+  },
   // 导航栏 显隐
   setCollapse () {
     state.isCollapse = !state.isCollapse

src/views/layout/components/main/home/set.vue

@@ -1,19 +1,79 @@
 <template>
-  <div class="h-100">
+  <div class="app-container">
+    <el-row class="m-t-0">
+      <el-col :span="24">
+        <el-container>
+          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
+            <div class="l">
+              <i class="iconfont icon-shezhi f-s-20"></i>
+              <font class="m-l-10 f-s-18 fb">设置</font>
+            </div>
+          </el-header>
+          <el-main class="border p-20">
+            <el-form label-width="120px">
+
+            <!-- 添加删除系统模块 -->
+            <el-form-item label="增删系统模块">
+              <el-checkbox-group v-model="selectedModules" @change="handleChange">
+                <el-checkbox v-for="item in moduleOptions" :key="item.value" :label="item.value">
+                  {{ item.label }}
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex'
 
 export default {
   name: 'Set',
   data () {
     return {
+      moduleOptions: [
+        { value: 'home', label: '概况' },
+        { value: 'model', label: '机型管理' },
+        { value: 'register', label: '飞机管理' },
+        { value: 'nofly', label: '飞行限制' },
+        { value: 'route', label: '航线管理' },
+        { value: 'site', label: '站点管理' },
+        { value: 'planes', label: '无人机' },
+        { value: 'shop', label: '商铺管理' },
+        { value: 'admin', label: '管理员管理' },
+        { value: 'category', label: '分类管理' },
+        { value: 'product', label: '商品管理' }
+      ],
+      selectedModules: []
     }
   },
-  components: {
+  computed: {
+    ...mapState('app', {
+      moduleVisibilityMap: state => state.moduleVisibilityMap
+    })
+  },
+  created () {
+    // 根据 Vuex 中的 moduleVisibilityMap 初始化 selectedModules（取所有显示为 true 的模块）
+    this.selectedModules = Object.keys(this.moduleVisibilityMap)
+      .filter(key => this.moduleVisibilityMap[key])
+  },
+  methods: {
+    ...mapMutations('app', ['setModuleVisibility']),
+    handleChange () {
+      // 先把所有模块都设为 false
+      Object.keys(this.moduleVisibilityMap).forEach(key => {
+        this.setModuleVisibility({ key, visible: false })
+      })
+      // 再把选中的模块设为 true
+      this.selectedModules.forEach(key => {
+        this.setModuleVisibility({ key, visible: true })
+      })
+    }
   }
 }
 </script>
-
-<style></style>

src/views/layout/components/menubar.vue

@@ -16,22 +16,28 @@
       <el-menu v-show="show" class="border-n" :router="true" :default-active="activeMenu" :unique-opened="true"
         background-color="#304156" text-color="rgb(191, 203, 217)" active-text-color="#409EFF"
         :collapse-transition="false" :collapse="isCollapse">
-        <template v-for="(route, index) in routes">
+        <template v-for="route in routes">
-          <el-menu-item @click="lt480Collapse()" v-if="route.children.length < 2" :key="route.path" :index="route.children[0].path">
+          <!-- 判断 moduleVisibilityMap 是否允许显示 -->
+          <template v-if="$store.state.app.moduleVisibilityMap[route.path.replace('/', '')]">
+            <el-menu-item v-if="route.children.length < 2" :key="route.path + '-single'" :index="route.children[0].path"
+              @click="lt480Collapse()">
               <i class="fc" :class="route.children[0].meta.icon"></i>
               <span slot="title">{{ route.children[0].meta.title }}</span>
             </el-menu-item>
-          <el-submenu v-else :key="index" :index="route.path">
+
+            <el-submenu v-else :key="route.path + '-group'" :index="route.path">
               <template slot="title">
                 <i class="fc" :class="route.meta.icon"></i>
                 <span>{{ route.meta.title }}</span>
               </template>
-            <el-menu-item @click="lt480Collapse()" v-for="child in route.children" :key="child.path" :index="child.path">
+              <el-menu-item v-for="child in route.children" :key="child.path" :index="child.path"
+                @click="lt480Collapse()">
                 <i class="fc" :class="child.meta.icon"></i>
                 <span>{{ child.meta.title }}</span>
               </el-menu-item>
             </el-submenu>
           </template>
+        </template>
       </el-menu>
     </transition>
     <!-- end menu -->