改进 菜单

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Chat: typeof import('./components/chat/chat.vue')['default']
+    ChatMenu: typeof import('./components/ChatMenu.vue')['default']
     Container: typeof import('./components/Container.vue')['default']
     copy: typeof import('./components/Menu copy.vue')['default']
     Menu: typeof import('./components/Menu.vue')['default']

src/components/ChatMenu.vue

@@ -0,0 +1,21 @@
+<template>
+  <n-menu
+    :value="currentRoute"
+    :collapsed="collapsed"
+    :collapsed-width="64"
+    :collapsed-icon-size="22"
+    :options="leftMenuOptions"
+  />
+</template>
+
+<script setup lang="ts">
+import { NMenu } from "naive-ui";
+import { useRoute } from "vue-router";
+import { leftMenuOptions } from "../plugins/menus/left";
+
+const route = useRoute();
+
+const currentRoute: any = computed(() => route.name);
+
+const collapsed = ref(false);
+</script>

src/components/Menu.vue

@@ -1,17 +1,27 @@
 <template>
-  <n-menu
+  <!-- <n-menu
     :value="currentRoute"
     :collapsed="collapsed"
     :collapsed-width="64"
     :collapsed-icon-size="22"
     :options="leftMenuOptions"
-  />
+  /> -->
+  <n-list hoverable clickable>
+    <template #header>
+      <!-- <n-icon :component="ChatboxOutline" /> -->
+      <span>对话列表</span>
+    </template>
+    <n-list-item v-for="i in 10" :key="i">
+      <n-thing> 对话 </n-thing>
+    </n-list-item>
+  </n-list>
 </template>
 
 <script setup lang="ts">
 import { NMenu } from "naive-ui";
 import { useRoute } from "vue-router";
 import { leftMenuOptions } from "../plugins/menus/left";
+import { ChatboxOutline } from "@vicons/ionicons5";
 
 const route = useRoute();