添加chat功能

src/App.vue

@@ -1,8 +1,50 @@
 <script setup>
-import uploadFileMiao from "./components/uploadFileMiao.vue";
-import downloadFileMiao from "./components/downloadFileMiao.vue";
-import settingMiao from "./components/setting.vue";
-import {NNotificationProvider,NMessageProvider,NCard,NTabs,NTabPane} from 'naive-ui'
+import upload from "./views/uploadFileMiao.vue";
+import download from "./views/downloadFileMiao.vue";
+import setting from "./views/setting.vue";
+import chat from "./views/chat.vue";
+import { NNotificationProvider, NMessageProvider, NCard, NMenu, NIcon } from 'naive-ui'
+import { ref, watch, h ,shallowRef} from "vue";
+// import { RouterView, useRouter } from "vue-router";
+import {
+    ArrowUpCircleOutline as uploadIcon,
+    ArrowDownCircleOutline as downloadIcon,
+    ChatboxEllipsesOutline as chatIcon,
+    SettingsOutline as settingIcon
+    
+} from '@vicons/ionicons5'
+
+const activePage = ref('upload')
+const isComponent = shallowRef(upload)
+watch(activePage, () => {
+    isComponent.value={upload,download,setting,chat}[activePage.value]
+})
+function renderIcon(icon) {
+    return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions = [
+    {
+        label: '上传',
+        key: 'upload',
+        icon: renderIcon(uploadIcon),
+    },
+    {
+        label: '下载',
+        key: 'download',
+        icon: renderIcon(downloadIcon),
+    },
+    {
+        label: 'Chat',
+        key: 'chat',
+        icon: renderIcon(chatIcon),
+    },
+    {
+        label: '设置',
+        key: 'setting',
+        icon: renderIcon(settingIcon),
+    }
+]
 
 
 </script>
@@ -12,17 +54,35 @@ import {NNotificationProvider,NMessageProvider,NCard,NTabs,NTabPane} from 'naive
         <n-notification-provider placement="bottom-right" :max="3">
             <n-message-provider>
                 <n-card content-style="padding: 0; margin:0;" id="theCard">
-                    <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;">
-                        <n-tab-pane name="上传文件">
-                            <uploadFileMiao style />
-                        </n-tab-pane>
-                        <n-tab-pane name="下载文件">
-                            <downloadFileMiao style/>
-                        </n-tab-pane>
-                        <n-tab-pane name="设置">
-                            <settingMiao style="max-width:100%" />
-                        </n-tab-pane>
-                    </n-tabs>
+                    <div id="menu">
+                        <n-menu mode="horizontal" :responsive="true" v-model:value="activePage" :options="menuOptions" :icon-size="26"></n-menu>
+                    </div>
+
+                    <div style="padding: 20px;">
+                        <KeepAlive>
+                            <component :is="isComponent"></component>
+                        </KeepAlive>
+                        <!-- <router-view v-slot="{ Component }">
+                            <keep-alive :include=['uploadFileMiao']>
+                            <component :is="Component" :key="$route.fullPath"/>
+                            </keep-alive>
+                        </router-view> -->
+                    </div>
+                    <!-- <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;"
+                        display-directive="show">
+                            <n-tab-pane name="上传文件">
+                                <uploadFileMiao style />
+                            </n-tab-pane>
+                            <n-tab-pane name="下载文件">
+                                <downloadFileMiao style />
+                            </n-tab-pane>
+                            <n-tab-pane name="miaoChat">
+                                <chat style />
+                            </n-tab-pane>
+                            <n-tab-pane name="设置">
+                                <settingMiao style="max-width:100%" />
+                            </n-tab-pane>
+                    </n-tabs> -->
                 </n-card>
             </n-message-provider>
         </n-notification-provider>
@@ -39,9 +99,19 @@ import {NNotificationProvider,NMessageProvider,NCard,NTabs,NTabPane} from 'naive
     justify-content: center;
     align-items: center;
 }
+
 #theCard {
-    width: 50%;
-    height: 80%;
+    width: 40vw;
+    height: 90vh;
+}
+
+#menu{
+    width:  100%;
+    height: auto;
+    /* background-color: blue; */
+    padding-top: 5px;
+    border-bottom: 1px solid  rgb(60, 60, 60, 0.1);
+    user-select: none
 }
 @media screen and (max-width:768px) {
     #theCard {