clientManageSystem/src/layout/index.vue

<template>
  <div class="layout">
    <Header :horizontalNavList="[]"></Header>
    <el-watermark :font="font" :content="[waterText]" :z-index="9999">
      <AppMain :menuItems="menuList"/>
    </el-watermark>

  </div>
</template>

<!-- vue3 setup -->
<script setup lang="ts">
import {computed,ref,reactive,} from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import Header from './components/header.vue'
import AppMain from './components/AppMain.vue'

const store = useStore()
const route = useRoute()

// 此处要根据登录用户的权限 分条件展示 不同的内容
const menuList =  computed(()=>{
  if(route.path.startsWith('/main/myCustomerDetail')){
    return []
  }
  return store.state.siderNav
})


const font = reactive({
  color: 'rgba(0, 0, 0, 0.08)',
})
const waterText = computed(()=>{
  let userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  return userInfo.username + ' ' + userInfo.phoneNo
})
</script>