feat: 调整为路由模式

package.json

@@ -11,19 +11,20 @@
     "vue"
   ],
   "scripts": {
-    "bootstrap": "pnpm install && pnpm run common:prepare",
     "dev": "vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "lint:fix": "eslint . --fix",
+    "bootstrap": "pnpm install && pnpm run common:prepare",
     "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml",
     "common:prepare": "husky install"
   },
   "dependencies": {
     "naive-ui": "^2.34.3",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.35.2",

pnpm-lock.yaml

@@ -20,11 +20,13 @@ specifiers:
   typescript: ~4.9.5
   vite: ^4.1.1
   vue: ^3.2.47
+  vue-router: ^4.1.6
   vue-tsc: ^1.0.24
 
 dependencies:
   naive-ui: 2.34.3_vue@3.2.47
   vue: 3.2.47
+  vue-router: 4.1.6_vue@3.2.47
 
 devDependencies:
   '@antfu/eslint-config': 0.35.2_7kw3g6rralp5ps6mg3uyzz6azm
@@ -955,6 +957,10 @@ packages:
       '@vue/compiler-dom': 3.2.47
       '@vue/shared': 3.2.47
 
+  /@vue/devtools-api/6.5.0:
+    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
+    dev: false
+
   /@vue/reactivity-transform/3.2.47:
     resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
     dependencies:
@@ -4402,6 +4408,15 @@ packages:
       - supports-color
     dev: true
 
+  /vue-router/4.1.6_vue@3.2.47:
+    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.47
+    dev: false
+
   /vue-template-compiler/2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:

src/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import { NConfigProvider } from 'naive-ui'
 import { NaiveProvider } from '@/components/common'
-import Chat from '@/views/Chat/index.vue'
 </script>
 
 <template>
+  <NConfigProvider class="h-full">
     <NaiveProvider>
-    <div class="h-full p-4 overflow-hidden">
+      <RouterView />
-      <Chat />
-    </div>
     </NaiveProvider>
+  </NConfigProvider>
 </template>

src/components/business/Chat/components/Message/Avatar.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+interface Props {
+  image?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <img v-if="image" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
+  <span v-else class="text-[27px]">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
+      <path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z" />
+    </svg>
+  </span>
+</template>

src/components/business/Chat/components/Message/Text.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="leading-relaxed whitespace-pre-wrap">
+    <slot />
+  </span>
+</template>

src/components/business/Chat/components/Message/index.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+import Avatar from './Avatar.vue'
+import Text from './Text.vue'
+
+interface Props {
+  message?: string
+  dateTime?: string
+  reversal?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': reversal }]">
+    <div
+      class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
+      :class="[reversal ? 'ml-3' : 'mr-3']"
+    >
+      <Avatar :image="reversal" />
+    </div>
+    <div class="flex flex-col flex-1 text-sm" :class="[reversal ? 'items-end' : 'items-start']">
+      <span class="text-xs text-[#b4bbc4]">
+        {{ dateTime }}
+      </span>
+      <div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
+        <Text>{{ message }}</Text>
+      </div>
+    </div>
+  </div>
+</template>

src/components/business/Chat/components/index.ts

@@ -0,0 +1,3 @@
+import Message from './Message/index.vue'
+
+export { Message }

src/components/business/Chat/index.vue

@@ -0,0 +1,113 @@
+<script setup lang='ts'>
+import { nextTick, onMounted, ref } from 'vue'
+import { NButton, NInput, useMessage } from 'naive-ui'
+import { Message } from './components'
+import { clearChatContext, fetchChatAPI } from './request'
+import { Layout } from './layout'
+import { HoverButton, SvgIcon } from '@/components/common'
+
+interface ListProps {
+  dateTime: string
+  message: string
+  reversal?: boolean
+}
+
+const scrollRef = ref<HTMLDivElement>()
+
+const ms = useMessage()
+
+const prompt = ref('')
+
+const loading = ref(false)
+
+const list = ref<ListProps[]>([])
+
+onMounted(initChat)
+
+function initChat() {
+  addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.', false)
+}
+
+async function handleClear() {
+  try {
+    const { message } = await clearChatContext()
+    ms.success(message)
+    list.value = []
+    setTimeout(initChat, 100)
+  }
+  catch (error) {
+    ms.error('Clear failed, please try again later.')
+  }
+}
+
+function handleEnter(event: KeyboardEvent) {
+  if (event.key === 'Enter')
+    handleSubmit()
+}
+
+async function handleSubmit() {
+  const message = prompt.value.trim()
+
+  if (!message || !message.length) {
+    ms.warning('Please enter a message')
+    return
+  }
+
+  addMessage(message, true)
+  prompt.value = ''
+
+  try {
+    loading.value = true
+    const { text } = await fetchChatAPI(message)
+    addMessage(text, false)
+  }
+  catch (error: any) {
+    addMessage(error.message ?? 'Request failed, please try again later.', false)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function addMessage(message: string, reversal = false) {
+  list.value.push({ dateTime: new Date().toLocaleString(), message, reversal })
+  nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
+}
+</script>
+
+<template>
+  <Layout>
+    <div class="flex flex-col h-full">
+      <header class="flex items-center justify-between p-4">
+        <h1 class="text-xl font-bold">
+          ChatGPT Web
+        </h1>
+        <div class="flex items-center space-x-4">
+          <HoverButton tooltip="Clear" @click="handleClear">
+            <SvgIcon icon="ri:delete-bin-6-line" />
+          </HoverButton>
+        </div>
+      </header>
+      <main class="flex-1 overflow-hidden border-y">
+        <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
+          <div>
+            <Message
+              v-for="(item, index) of list" :key="index" :date-time="item.dateTime" :message="item.message"
+              :reversal="item.reversal"
+            />
+          </div>
+        </div>
+      </main>
+      <footer class="p-4">
+        <div class="flex items-center justify-between space-x-2">
+          <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
+          <NButton type="primary" :loading="loading" @click="handleSubmit">
+            <template #icon>
+              <SvgIcon icon="ri:send-plane-fill" />
+            </template>
+          </NButton>
+        </div>
+      </footer>
+    </div>
+  </Layout>
+</template>

src/components/business/Chat/layout/Layout.vue

@@ -0,0 +1,27 @@
+<script setup lang='ts'>
+import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
+</script>
+
+<template>
+  <div class="h-full overflow-hidden border rounded-md shadow-md">
+    <NLayout class="h-full" has-sider>
+      <NLayoutSider
+        collapse-mode="width"
+        :collapsed-width="120"
+        :width="240"
+        show-trigger="arrow-circle"
+        class="p-4"
+        bordered
+      >
+        <span>Sider</span>
+      </NLayoutSider>
+      <NLayoutContent class="h-full">
+        <slot />
+      </NLayoutContent>
+    </NLayout>
+  </div>
+</template>
+
+<style>
+
+</style>

src/components/business/Chat/layout/index.ts

@@ -0,0 +1,3 @@
+import Layout from './Layout.vue'
+
+export { Layout }

src/components/business/Chat/request.ts

@@ -0,0 +1,41 @@
+import axios from 'axios'
+
+const BASE_URL = import.meta.env.VITE_GLOB_API_URL
+
+async function fetchChatAPI(message: string) {
+  if (!message || message.trim() === '')
+    return
+
+  try {
+    const { status, data } = await axios.post(`${BASE_URL}/chat`, { message })
+
+    if (status === 200) {
+      if (data.text)
+        return Promise.resolve(data)
+
+      if (data.statusText)
+        return Promise.reject(new Error(data.statusText))
+    }
+
+    return Promise.reject(new Error('Request failed'))
+  }
+  catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+async function clearChatContext() {
+  try {
+    const { status, data } = await axios.post(`${BASE_URL}/clear`)
+
+    if (status === 200)
+      return Promise.resolve(data)
+
+    return Promise.reject(new Error('Request failed'))
+  }
+  catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+export { fetchChatAPI, clearChatContext }

src/components/business/index.ts

@@ -0,0 +1,3 @@
+import Chat from './Chat/index.vue'
+
+export { Chat }

src/components/common/NaiveProvider.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { defineComponent, h } from 'vue'
 import {
-  NConfigProvider,
   NDialogProvider,
   NLoadingBarProvider,
   NMessageProvider,
@@ -31,7 +30,6 @@ const NaiveProviderContent = defineComponent({
 </script>
 
 <template>
-  <NConfigProvider class="h-full">
   <NLoadingBarProvider>
     <NDialogProvider>
       <NNotificationProvider>
@@ -42,5 +40,4 @@ const NaiveProviderContent = defineComponent({
       </NNotificationProvider>
     </NDialogProvider>
   </NLoadingBarProvider>
-  </NConfigProvider>
 </template>

src/main.ts

@@ -1,6 +1,8 @@
+import './styles/global.css'
+
 import { createApp } from 'vue'
 import App from './App.vue'
-import './styles/global.css'
+import { setupRouter } from '@/router'
 
 /** Tailwind's Preflight Style Override */
 function naiveStyleOverride() {
@@ -10,9 +12,10 @@ function naiveStyleOverride() {
 }
 
 /** Setup */
-function bootstrap() {
+async function bootstrap() {
   const app = createApp(App)
   naiveStyleOverride()
+  await setupRouter(app)
   app.mount('#app')
 }
 

src/router/index.ts

@@ -0,0 +1,22 @@
+import type { App } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('@/views/Home/index.vue'),
+  },
+]
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export async function setupRouter(app: App) {
+  app.use(router)
+  await router.isReady()
+}

src/views/home/index.vue

@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+import { Chat } from '@/components/business'
+</script>
+
+<template>
+  <div class="h-full p-4 overflow-hidden">
+    <Chat />
+  </div>
+</template>
+
+<style>
+
+</style>