feat: 调整代码

src/directives/highlight.ts

@@ -1,23 +0,0 @@
-import type { App, Directive } from 'vue'
-import hljs from 'highlight.js'
-import { includeCode } from '@/utils/format'
-
-hljs.configure({ ignoreUnescapedHTML: true })
-
-function highlightCode(el: HTMLElement) {
-  if (includeCode(el.textContent))
-    hljs.highlightBlock(el)
-}
-
-export default function setupHighlightDirective(app: App) {
-  const highLightDirective: Directive<HTMLElement> = {
-    mounted(el: HTMLElement) {
-      highlightCode(el)
-    },
-    updated(el: HTMLElement) {
-      highlightCode(el)
-    },
-  }
-
-  app.directive('highlight', highLightDirective)
-}

src/directives/index.ts

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

src/main.ts

@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import { setupDirectives } from './directives'
 import { setupI18n } from './locales'
 import { setupAssets } from './plugins'
 import { setupStore } from './store'
@@ -12,8 +11,6 @@ async function bootstrap() {
 
   setupStore(app)
 
-  setupDirectives(app)
-
   setupI18n(app)
 
   await setupRouter(app)

src/views/chat/components/Message/Text.vue

@@ -2,8 +2,9 @@
 import { computed, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
 import mdKatex from '@traptitech/markdown-it-katex'
-import mdhljs from 'markdown-it-highlightjs'
+import hljs from 'highlight.js'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { t } from '@/locales'
 
 interface Props {
   inversion?: boolean
@@ -20,11 +21,17 @@ const textRef = ref<HTMLElement>()
 
 const mdi = new MarkdownIt({
   linkify: true,
+  highlight(code, language) {
+    const validLang = !!(language && hljs.getLanguage(language))
+    if (validLang) {
+      const lang = language ?? ''
+      return highlightBlock(hljs.highlight(lang, code, true).value, lang)
+    }
+    return highlightBlock(hljs.highlightAuto(code).value, '')
+  },
 })
 
-mdi
-  .use(mdhljs, { auto: true, inline: true })
-  .use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
 
 const wrapClass = computed(() => {
   return [
@@ -45,6 +52,10 @@ const text = computed(() => {
   return value
 })
 
+function highlightBlock(str: string, lang?: string) {
+  return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+}
+
 defineExpose({ textRef })
 </script>
 

src/views/chat/components/Message/style.less

@@ -19,7 +19,6 @@
 		line-height: 1.65;
 	}
 
-	.katexmath-block,
 	.highlight pre,
 	pre {
 		background-color: #fff;
@@ -61,7 +60,6 @@
 html.dark {
 
 	.highlight pre,
-	.katexmath-block,
 	pre {
 		background-color: #282c34;
 	}

src/views/chat/hooks/useCopyCode.ts

@@ -1,4 +1,5 @@
 import { onMounted, onUpdated } from 'vue'
+import { copyText } from '@/utils/format'
 
 export function useCopyCode() {
   function copyCodeBlock() {
@@ -8,7 +9,10 @@ export function useCopyCode() {
       const codeBlock = wrapper.querySelector('.code-block-body')
       if (copyBtn && codeBlock) {
         copyBtn.addEventListener('click', () => {
-          navigator.clipboard.writeText(codeBlock.textContent ?? '')
+          if (navigator.clipboard?.writeText)
+            navigator.clipboard.writeText(codeBlock.textContent ?? '')
+          else
+            copyText({ text: codeBlock.textContent ?? '', origin: true })
         })
       }
     })

src/views/chat/layout/sider/List.vue

@@ -15,8 +15,8 @@ const dataSources = computed(() => chatStore.history)
 async function handleSelect({ uuid }: Chat.History) {
   if (isActive(uuid))
     return
-    
-  if(chatStore.active)
+
+  if (chatStore.active)
     chatStore.updateHistory(chatStore.active, { isEdit: false })
   await chatStore.setActive(uuid)