add nav

src/components/common/Navigator.vue

@@ -77,6 +77,9 @@ import { ElButton, ElTooltip, ElMenu, ElMenuItem } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   ROUTE_CHATDOC_INDEX,
+  ROUTE_CHATDOC_CHAT,
+  ROUTE_CHATDOC_KNOWLEDGE,
+  ROUTE_CHATDOC_SETTING,
   ROUTE_CHAT_CONVERSATION,
   ROUTE_CHAT_CONVERSATION_NEW,
   ROUTE_CONSOLE_ROOT,
@@ -128,7 +131,7 @@ export default defineComponent({
         },
         displayName: this.$t('common.nav.chatdoc'),
         icon: 'fa-solid fa-file-lines',
-        routes: [ROUTE_CHATDOC_INDEX]
+        routes: [ROUTE_CHATDOC_INDEX, ROUTE_CHATDOC_CHAT, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING]
       });
     }
 

src/i18n/zh/chatdoc/index.ts

@@ -1,4 +1,5 @@
 import message from './message';
 import title from './title';
+import nav from './nav';
 
-export default { message, title };
+export default { message, title, nav };

src/i18n/zh/chatdoc/nav.ts

@@ -0,0 +1,5 @@
+export default {
+  chat: '对话',
+  setting: '设置',
+  knowledge: '知识库'
+};

src/layouts/Chatdoc.vue

@@ -1,39 +1,72 @@
 <template>
   <div class="main">
-    <div class="side">
-      <slot name="side">
-        <side-panel />
-      </slot>
-    </div>
+    <el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu">
+      <el-menu-item
+        v-for="(menuItem, menuItemIndex) in menuItems"
+        :key="menuItemIndex"
+        :index="menuItem.index"
+        @click="onClickMenu(menuItem)"
+      >
+        {{ menuItem.title }}
+      </el-menu-item>
+    </el-menu>
     <div class="chatdoc">
       <slot name="chatdoc" />
     </div>
-    <el-button round class="menu" @click="drawer = true">
-      <font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
-    </el-button>
-    <el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
-      <side-panel />
-    </el-drawer>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import SidePanel from '@/components/chatdoc/SidePanel.vue';
-import { ElDrawer, ElButton } from 'element-plus';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { ElMenu, ElMenuItem } from 'element-plus';
+import { ROUTE_CHATDOC_CHAT, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING } from '@/router';
+import { RouteLocationRaw } from 'vue-router';
+
+interface IMenuItem {
+  index: string;
+  title: string;
+  route?: RouteLocationRaw;
+}
+
+interface IData {
+  drawer: boolean;
+  activeMenu: string | undefined;
+  menuItems: IMenuItem[];
+}
 
 export default defineComponent({
   name: 'LayoutChatdoc',
   components: {
-    SidePanel,
-    ElDrawer,
-    ElButton,
-    FontAwesomeIcon
+    ElMenu,
+    ElMenuItem
   },
-  data() {
+  data(): IData {
     return {
-      drawer: false
+      drawer: false,
+      activeMenu: undefined,
+      menuItems: [
+        {
+          index: 'chat',
+          title: this.$t('chatdoc.nav.chat'),
+          route: {
+            name: ROUTE_CHATDOC_CHAT
+          }
+        },
+        {
+          index: 'setting',
+          title: this.$t('chatdoc.nav.setting'),
+          route: {
+            name: ROUTE_CHATDOC_SETTING
+          }
+        },
+        {
+          index: 'knowledge',
+          title: this.$t('chatdoc.nav.knowledge'),
+          route: {
+            name: ROUTE_CHATDOC_KNOWLEDGE
+          }
+        }
+      ]
     };
   },
   async mounted() {
@@ -46,6 +79,12 @@ export default defineComponent({
     },
     async onGetRepositories() {
       await this.$store.dispatch('chatdoc/onGetRepositories');
+    },
+    async onClickMenu(menuItem: IMenuItem) {
+      this.activeMenu = menuItem.index;
+      if (menuItem.route) {
+        await this.$router.push(menuItem.route);
+      }
     }
   }
 });
@@ -55,14 +94,14 @@ export default defineComponent({
 .main {
   flex: 1;
   display: flex;
-  flex-direction: row;
-  .side {
-    width: 300px;
-    height: 100%;
-    overflow-y: scroll;
+  flex-direction: column;
+
+  .menu {
+    width: 100%;
+    justify-content: center;
   }
 
-  .chat {
+  .chatdoc {
     height: 100%;
     padding: 15px;
     flex: 1;
@@ -72,24 +111,4 @@ export default defineComponent({
     flex-direction: column;
   }
 }
-
-.menu {
-  display: none;
-}
-
-@media (max-width: 767px) {
-  .side {
-    display: none;
-  }
-  .chat {
-    width: 100%;
-  }
-  .menu {
-    display: block;
-    position: fixed;
-    right: 20px;
-    top: 20px;
-    z-index: 2000;
-  }
-}
 </style>

src/pages/chatdoc/Chat.vue

@@ -0,0 +1,22 @@
+<template>
+  <layout>
+    <template #chatdoc> Chat </template>
+  </layout>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Layout from '@/layouts/Chatdoc.vue';
+
+export default defineComponent({
+  name: 'ChatdocChat',
+  components: {
+    Layout
+  },
+  data() {
+    return {};
+  },
+  async mounted() {},
+  methods: {}
+});
+</script>

src/pages/chatdoc/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <template #chatdoc> hi </template>
+    <template #chatdoc> Index </template>
   </layout>
 </template>
 
@@ -9,7 +9,7 @@ import { defineComponent } from 'vue';
 import Layout from '@/layouts/Chatdoc.vue';
 
 export default defineComponent({
-  name: 'ChatdocIndex',
+  name: 'ChatdocKnowledge',
   components: {
     Layout
   },

src/pages/chatdoc/Knowledge.vue

@@ -0,0 +1,22 @@
+<template>
+  <layout>
+    <template #chatdoc> Knowledge </template>
+  </layout>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Layout from '@/layouts/Chatdoc.vue';
+
+export default defineComponent({
+  name: 'ChatdocKnowledge',
+  components: {
+    Layout
+  },
+  data() {
+    return {};
+  },
+  async mounted() {},
+  methods: {}
+});
+</script>

src/pages/chatdoc/Setting.vue

@@ -0,0 +1,22 @@
+<template>
+  <layout>
+    <template #chatdoc> Setting </template>
+  </layout>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Layout from '@/layouts/Chatdoc.vue';
+
+export default defineComponent({
+  name: 'ChatdocSetting',
+  components: {
+    Layout
+  },
+  data() {
+    return {};
+  },
+  async mounted() {},
+  methods: {}
+});
+</script>

src/router/chatdoc.ts

@@ -1,4 +1,4 @@
-import { ROUTE_CHATDOC_INDEX } from './constants';
+import { ROUTE_CHATDOC_CHAT, ROUTE_CHATDOC_INDEX, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING } from './constants';
 
 export default {
   path: '/chatdoc',
@@ -11,6 +11,21 @@ export default {
       path: '',
       name: ROUTE_CHATDOC_INDEX,
       component: () => import('@/pages/chatdoc/Index.vue')
+    },
+    {
+      path: 'chat',
+      name: ROUTE_CHATDOC_CHAT,
+      component: () => import('@/pages/chatdoc/Chat.vue')
+    },
+    {
+      path: 'knowledge',
+      name: ROUTE_CHATDOC_KNOWLEDGE,
+      component: () => import('@/pages/chatdoc/Knowledge.vue')
+    },
+    {
+      path: 'setting',
+      name: ROUTE_CHATDOC_SETTING,
+      component: () => import('@/pages/chatdoc/Setting.vue')
     }
   ]
 };

src/router/constants.ts

@@ -10,6 +10,9 @@ export const ROUTE_MIDJOURNEY_INDEX = 'midjourney-index';
 export const ROUTE_MIDJOURNEY_HISTORY = 'midjourney-history';
 
 export const ROUTE_CHATDOC_INDEX = 'chatdoc-index';
+export const ROUTE_CHATDOC_CHAT = 'chatdoc-chat';
+export const ROUTE_CHATDOC_SETTING = 'chatdoc-setting';
+export const ROUTE_CHATDOC_KNOWLEDGE = 'chatdoc-knowledge';
 
 export const ROUTE_CONSOLE_ROOT = 'console-root';
 export const ROUTE_CONSOLE_ORDER_LIST = 'console-order-list';