policeSecurity/policeManagement/src/components/layout/layout.vue

<template>
  <a-layout class="main-content">
    <a-layout-sider :collapsed="collapsed" theme="light" :trigger="null" collapsible>
      <div v-if="!collapsed" class="title flex-center">
        <div>公安后台</div>
      </div>
      <div v-else class="logo flex-center">
        <img src="@/assets/vue.svg" title="超级后台" alt="xx"/>
      </div>

      <!-- 动态生成菜单项 -->
      <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" theme="light" mode="inline">
        <template v-for="route in staticRouter">
          <a-menu-item v-if="route.meta?.title === undefined && route.children" :key="route.path"
                       @click="handleMenuClick(route.children[0].path)">
            <router-link :to="`${route.children[0].path}`" class="flex_">
              <!--              <icon-font :font-class="route.icon"/>-->
              <HomeOutlined v-if="route.name === 'dashboard'"/>
              <InsuranceOutlined v-if="route.name === 'police'"/>
              <SoundOutlined v-if="route.name === 'law'"/>
              <ApartmentOutlined v-if="route.name === 'warning'"/>
              <span>{{ route?.children[0]?.meta?.title }}</span>
            </router-link>
          </a-menu-item>
          <a-sub-menu v-if="route.children && route.children.length && route?.meta?.title" :key="route.path">
            <template #title>
              <MailOutlined v-if="route.name === 'query-'"/>
              <UserOutlined v-if="route.name === 'user'"/>
              <span>{{ route.meta?.title }}</span>
            </template>
            <a-menu-item v-for="child in route.children" :key="child.path"
                         @click="handleMenuClick(`${route.path}/${child.path}`)">
              <router-link :to="`${route.path}/${child.path}`">{{ child.meta?.title }}</router-link>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="layout-header">
        <layout-header v-model:collapsed="collapsed"/>
      </a-layout-header>
      <a-layout-content class="layout-content">
        <!-- <keep-alive> 会缓存已经访问过的组件，当你再次访问同一个页面时，它会直接从缓存中加载，而不会触发重新渲染 -->
        <!-- router-view 必须绑定一个key 否则就会出现 路由切换白屏的问题（路由切换后，页面不显示内容，刷新后正常显示），但是这样也会导致一个问题就是 会导致keep-alive失效、因为这种方式会强制刷新路由-->

        <router-view v-slot="{ Component, route }" :key="route.path">
          <!-- <router-view v-slot="{ Component, route }"> -->
          <transition appear name="fade-transform" mode="out-in">
            <keep-alive :include="keepAliveNames">
              <component :is="Component" :key="route.path"/>
            </keep-alive>
          </transition>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import IconFont from "@/components/iconfont/IconFont.vue";
import {
  InsuranceOutlined,
  HomeOutlined,
  SoundOutlined,
  MailOutlined,
  ApartmentOutlined,
  UserOutlined,
  AppstoreOutlined
} from '@ant-design/icons-vue'
import LayoutHeader from '@/components/layout/header/LayoutHeader.vue'
import {computed, watch, onMounted} from 'vue'
import {staticRouter} from '@/router/staticRouters'
import {useRoute} from 'vue-router'

const route = useRoute()
const selectedKeys = ref([route.path])
/**
 * [Vue warn] Write operation failed: computed value is readonly
 * computed 计算属性绑定到 v-model。在 Vue 3 中，v-model 是一个双向绑定，它不仅读取数据，还期望可以写入数据。然而，computed 属性默认是只读的，所以会报这个警告。
 */
const handleMenuClick = (path: any) => {
  // 手动更新 selectedKeys，让 Vue 立即识别到变化
  selectedKeys.value = [path]
  localStorage.setItem('selectedKeys', JSON.stringify([path]))
}
watch(
    () => route.path,
    (newPath) => {
      selectedKeys.value = [newPath]
    }
)
const openKeys = ref([])
// 页面加载时，读取 localStorage 中的菜单状态
onMounted(() => {
  const savedSelectedKeys = localStorage.getItem('selectedKeys')
  const savedOpenKeys = localStorage.getItem('openKeys')

  if (savedSelectedKeys) {
    selectedKeys.value = JSON.parse(savedSelectedKeys)
  }
  if (savedOpenKeys) {
    openKeys.value = JSON.parse(savedOpenKeys)
  }
})

// 监听 selectedKeys 和 openKeys 变化，并保存到 localStorage
watch(selectedKeys, (newSelectedKeys) => {
  localStorage.setItem('selectedKeys', JSON.stringify(newSelectedKeys))
})

watch(openKeys, (newOpenKeys) => {
  localStorage.setItem('openKeys', JSON.stringify(newOpenKeys))
})

// 当前选中的菜单项
// const selectedKeys = computed(() => route.path)

// const selectedKeys = computed(() => {
//   console.log(route.path)
//   console.log([route.path])

//   return [route.path]
// })
// 过滤出需要在菜单中显示的路由
// const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
// staticRouter.forEach((element) => {
//   console.log(element.meta?.title)
// })

// 示例：动态控制缓存页面的名称
// const keepAliveNames = ref(['index'])

import {ref} from 'vue'
// 控制菜单折叠
const collapsed = ref<boolean>(false)

// const keepAliveNames = ref<string[]>(['Index', 'Register'])
const keepAliveNames = ref<string[]>(['index', 'rindex'])
</script>

<style scoped lang="scss">
.flex_ {
  display: flex;
  flex-direction: row;
  align-items: center;

}

.main-content {
  width: 100vw;
  height: 100vh;

  .layout-header {
    background: #ffffff;
    padding: 0;
  }

  .layout-content {
    margin: 10px;
    // padding: 4px;
    // background: #f5f7fd;
    min-height: 280px;
    border-radius: 5px;
    overflow: auto;
  }
}

.title {
  height: 32px;
  width: 168px;
  transition: width 2ms linear 2ms;
  margin: 16px;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

.logo {
  margin: 16px;

  img {
    width: 50px;
    height: 50px;
  }
}

.site-layout .site-layout-background {
  background: #ffffff;
}
</style>