From 78c2d7de2150e488141e5635f2b16b81f0bc8cc2 Mon Sep 17 00:00:00 2001
From: szdot <szdot@qq.com>
Date: Mon, 23 Jun 2025 03:02:54 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=20=E7=B3=BB=E7=BB=9F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=20=E6=8E=A7=E5=88=B6=E6=A8=A1=E5=9D=97=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=20=E9=9A=90=E8=97=8F=20=E3=80=90=E8=BF=87=20=20?=
 =?UTF-8?q?=E7=A8=8B=E3=80=91=EF=BC=9A=20=E3=80=90=E5=BD=B1=20=20=E5=93=8D?=
 =?UTF-8?q?=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 src/store/modules/app.js                      | 32 +++++++++
 src/views/layout/components/main/home/set.vue | 68 +++++++++++++++++--
 src/views/layout/components/menubar.vue       | 44 ++++++------
 3 files changed, 121 insertions(+), 23 deletions(-)

diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index e37aedd..1903a3a 100644
--- a/src/store/modules/app.js
+++ b/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
diff --git a/src/views/layout/components/main/home/set.vue b/src/views/layout/components/main/home/set.vue
index bca859a..16680e1 100644
--- a/src/views/layout/components/main/home/set.vue
+++ b/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>
diff --git a/src/views/layout/components/menubar.vue b/src/views/layout/components/menubar.vue
index 9c18d13..688a20a 100644
--- a/src/views/layout/components/menubar.vue
+++ b/src/views/layout/components/menubar.vue
@@ -16,21 +16,27 @@
       <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">
-          <el-menu-item @click="lt480Collapse()" v-if="route.children.length < 2" :key="route.path" :index="route.children[0].path">
-            <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">
-            <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">
-              <i class="fc" :class="child.meta.icon"></i>
-              <span>{{ child.meta.title }}</span>
+        <template v-for="route in routes">
+          <!-- 判断 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>
+
+            <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 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>
@@ -111,9 +117,9 @@ export default {
       }
     },
     /**
-     * @description: 动态加载无人机子路由，并保留静态配置（如集群控制）
-     * @param {Array} planes - 飞机对象数组，每个对象包含 id 和 name
-     */
+ * @description: 动态加载无人机子路由，并保留静态配置（如集群控制）
+ * @param {Array} planes - 飞机对象数组，每个对象包含 id 和 name
+ */
     loadRoute (planes) {
       // 1. 将每架飞机转换为一个路由配置对象
       const dynamicPlaneRoutes = planes.map((item) => ({
@@ -149,8 +155,8 @@ export default {
   },
   watch: {
     /**
-     * @description: 监听飞机列表 有刷新导航栏
-     */
+       * @description: 监听飞机列表 有刷新导航栏
+       */
     airList (val) {
       this.loadRoute(val)
       this.$forceUpdate()// 刷新本组件