diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue index 7a14ce6..9435cef 100644 --- a/src/components/common/Navigator.vue +++ b/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] }); } diff --git a/src/i18n/zh/chatdoc/index.ts b/src/i18n/zh/chatdoc/index.ts index fdbfdca..e59502a 100644 --- a/src/i18n/zh/chatdoc/index.ts +++ b/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 }; diff --git a/src/i18n/zh/chatdoc/nav.ts b/src/i18n/zh/chatdoc/nav.ts new file mode 100644 index 0000000..641081b --- /dev/null +++ b/src/i18n/zh/chatdoc/nav.ts @@ -0,0 +1,5 @@ +export default { + chat: '对话', + setting: '设置', + knowledge: '知识库' +}; diff --git a/src/layouts/Chatdoc.vue b/src/layouts/Chatdoc.vue index ffa9703..e39f406 100644 --- a/src/layouts/Chatdoc.vue +++ b/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> diff --git a/src/pages/chatdoc/Chat.vue b/src/pages/chatdoc/Chat.vue new file mode 100644 index 0000000..05fb600 --- /dev/null +++ b/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> diff --git a/src/pages/chatdoc/Index.vue b/src/pages/chatdoc/Index.vue index b53f628..b95fd11 100644 --- a/src/pages/chatdoc/Index.vue +++ b/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 }, diff --git a/src/pages/chatdoc/Knowledge.vue b/src/pages/chatdoc/Knowledge.vue new file mode 100644 index 0000000..023bc83 --- /dev/null +++ b/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> diff --git a/src/pages/chatdoc/Setting.vue b/src/pages/chatdoc/Setting.vue new file mode 100644 index 0000000..c4cf7fe --- /dev/null +++ b/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> diff --git a/src/router/chatdoc.ts b/src/router/chatdoc.ts index 6c147ee..7ce8064 100644 --- a/src/router/chatdoc.ts +++ b/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') } ] }; diff --git a/src/router/constants.ts b/src/router/constants.ts index 6456486..c33ad12 100644 --- a/src/router/constants.ts +++ b/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';