perf: 优化 pr 代码

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

@@ -9,11 +9,14 @@ defineProps<Props>()
 
 <template>
   <div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
-    <span v-if="!reversal" class="leading-relaxed whitespace-pre-wrap" :class="[{ 'text-red-500': error }]" v-hljs>
-      <slot />
-    </span>
-    <span v-else class="leading-relaxed whitespace-pre-wrap" :class="[{ 'text-red-500': error }]">
+    <span v-highlight class="leading-relaxed whitespace-pre-wrap">
       <slot />
     </span>
   </div>
 </template>
+
+<style>
+.hljs {
+  background-color: #fff0 !important;
+}
+</style>

src/components/business/Chat/index.vue

@@ -17,7 +17,7 @@ const historyStore = useHistoryStore()
 
 const scrollRef = ref<HTMLDivElement>()
 
-const { addChat, clearChat: handleClear } = useChat()
+const { addChat, clearChat } = useChat()
 
 const prompt = ref('')
 const loading = ref(false)
@@ -54,7 +54,7 @@ async function handleSubmit() {
   }
   catch (error: any) {
     if (error.message !== 'cancelled')
-      addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, { error: true })
+      addMessage(`${error.message ?? 'Request failed, please try again later.'}`, { error: true })
   }
   finally {
     loading.value = false
@@ -79,8 +79,12 @@ function scrollToBottom() {
   nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
 }
 
+function handleClear() {
+  handleCancel()
+  clearChat()
+}
+
 function handleCancel() {
-  // 取消之后一定要重新赋值，否则会报错
   controller.abort()
   controller = new AbortController()
   loading.value = false

src/directives/highlight.ts

@@ -0,0 +1,15 @@
+import type { App, Directive } from 'vue'
+import hljs from 'highlight.js'
+
+const regexp = /^(?:\s{4}|\t).+/gm
+
+export default function setupHighlightDirective(app: App) {
+  const highLightDirective: Directive<HTMLElement> = {
+    mounted(el: HTMLElement) {
+      if (el.textContent?.indexOf(' = ') !== -1 || el.textContent.match(regexp))
+        hljs.highlightBlock(el)
+    },
+  }
+
+  app.directive('highlight', highLightDirective)
+}

src/directives/index.ts

@@ -0,0 +1,6 @@
+import type { App } from 'vue'
+import setupHighlightDirective from './highlight'
+
+export function setupDirectives(app: App) {
+  setupHighlightDirective(app)
+}

src/main.ts

@@ -1,26 +1,19 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import { setupDirectives } from './directives'
 import { setupAssets } from '@/plugins'
 import { setupStore } from '@/store'
 import { setupRouter } from '@/router'
-import hljs from 'highlight.js'
-import "highlight.js/styles/xcode.css"
+
 async function bootstrap() {
   const app = createApp(App)
   setupAssets()
 
   setupStore(app)
 
-  await setupRouter(app)
+  setupDirectives(app)
 
-  let regexp = /^(?:\s{4}|\t).+/gm
-  app.directive('hljs', {
-    mounted: (el: HTMLElement) => {
-      if (el.textContent?.indexOf(" = ") != -1 || el.textContent.match(regexp)) {
-        hljs.highlightBlock(el)
-      }
-    }
-  })
+  await setupRouter(app)
 
   app.mount('#app')
 }

src/plugins/assets.ts

@@ -1,3 +1,4 @@
+import 'highlight.js/styles/xcode.css'
 import '@/styles/global.css'
 
 /** Tailwind's Preflight Style Override */

src/styles/global.css

@@ -7,7 +7,3 @@ body,
 #app {
 	height: 100%;
 }
-
-.hljs{
-	background-color: #fff0!important;
-}

src/utils/request/axios.ts

@@ -2,7 +2,7 @@ import axios, { type AxiosResponse } from 'axios'
 
 const service = axios.create({
   baseURL: import.meta.env.VITE_GLOB_API_URL,
-  timeout: 60 * 1000,
+  timeout: 30 * 1000,
 })
 
 service.interceptors.request.use(