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

<template>
  <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">

              <!-- 语言设置 -->
              <div class="p-b-5">
                <el-divider content-position="left">
                  <font class="fb f-s-18 normalFontColor">语言设置</font>
                </el-divider>
              </div>
              <el-form-item label="设置">
                <el-radio-group v-model="currentLang" @change="changeLang">
                  <el-radio label="zh-CN">简体中文</el-radio>
                  <!-- 你可以继续添加更多语言 -->
                  <!-- <el-radio label="en">English</el-radio> -->
                </el-radio-group>
              </el-form-item>

              <!-- 显示隐藏系统模块 -->
              <div class="p-t-10 p-b-5">
                <el-divider content-position="left">
                  <font class="fb f-s-18 normalFontColor">显示隐藏系统模块</font>
                </el-divider>
              </div>
              <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 {
      currentLang: this.$store.state.settings.language || 'zh-CN',
      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: 'message', label: '公告管理' },
        { value: 'category', label: '分类管理' },
        { value: 'product', label: '商品管理' },
        { value: 'broadcast', label: '广告管理' },
        { value: 'order', label: '订单与统计' },
        { value: 'download', label: '软件下载' }
      ],
      selectedModules: []
    }
  },
  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 })
      })
    },
    changeLang (lang) {
      this.$store.commit('settings/setLanguage', lang)
      this.$message.success(`语言已切换为：${lang === 'zh-CN' ? '简体中文' : lang}`)
      // 如果你用的是 vue-i18n，这里可能还需要调用 i18n.global.locale = lang
    }
  }
}
</script>