add code highlighting

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

@@ -9,7 +9,10 @@ defineProps<Props>()
 
 <template>
   <div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
-    <span class="leading-relaxed whitespace-pre-wrap" :class="[{ 'text-red-500': error }]">
+    <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 }]">
       <slot />
     </span>
   </div>

src/main.ts

@@ -3,7 +3,8 @@ import App from './App.vue'
 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()
@@ -12,6 +13,15 @@ async function bootstrap() {
 
   await setupRouter(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)
+      }
+    }
+  })
+
   app.mount('#app')
 }
 

src/styles/global.css

@@ -7,3 +7,7 @@ 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: 10 * 1000,
+  timeout: 60 * 1000,
 })
 
 service.interceptors.request.use(