shuiwu/src/components/layout/menu.vue

<template>
  <div class="menu">
    <a-menu style="flex:1" :inlineIndent="5" v-model:selectedKeys="current" mode="inline" active-text-color="#000" @click="itemClick">
      <a-sub-menu v-for="item in mods" :key="item.systemmoduleid">
        <template #title>
          <div>
            <img width="15" style="margin-top:-2px;margin-right:5px" :src="item.iconurl" alt="">
            {{item.systemmodulename}}
        </div>
        </template>
        <a-menu-item v-for="app in item.apps" :key="app.systemappid" @click="routeChange(app)">{{app.meta.title}}</a-menu-item>
      </a-sub-menu>
    </a-menu>
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        切换主题
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a @click="setTheme('normal')">默认主题</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="setTheme('light')">明亮主题</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="setTheme('caffairs')">商务主题</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup>
import { ref,onBeforeMount} from 'vue';
import { useAuthStore } from '@/stores/modules/auth'
import { storeToRefs } from 'pinia'
import { useRouter } from "vue-router"
import { MenuFoldOutlined,MenuUnfoldOutlined} from '@ant-design/icons-vue'
import {ConfigProvider, Modal } from 'ant-design-vue';
const router = useRouter()
const store = useAuthStore()
let { mods } = storeToRefs(store)

const current = ref([])
const itemClick = (item, key, keyPath)=>{
  current.value = item.keyPath
}
const routeChange = (app)=>{
  store.appData(app)
  router.push({path:app.path})
}
const colorState = ref({})
const setTheme = (themeName)=> {
  if (themeName === 'light') {
    colorState.value = {
      primaryColor: '#f23557',
      errorColor: '#eb586f',
      warningColor: '#ffde7d',
      successColor: '#4aa0d5',
      infoColor: '#d8e9f0',
    }
   
    ConfigProvider.config({
      theme: colorState.value
    });
    
  } else if (themeName === 'normal') {
    colorState.value = {
      primaryColor: '#14317D',
      errorColor: '#ff4d4f',
      warningColor: '#faad14',
      successColor: '#52c41a',
      infoColor: '#1890ff',
    }
    ConfigProvider.config({
      theme: colorState.value
    });
  } else if (themeName === 'caffairs') {
    colorState.value = {
      primaryColor: '#404b69',
      errorColor: '#ff5f5f',
      warningColor: '#ffc93c',
      successColor: '#1fab89',
      infoColor: '#dbedf3',
      menuBg:'#fff'
    }
    ConfigProvider.config({
      theme: colorState.value
    });
  }
  
}
onBeforeMount(()=>{
 setTheme('light')

})
</script>
<style scoped>
.menu{
  width: 158px;
  background: #002671;
}
</style>