☑️ feat: mermaid copy code (#52)

Author: pdsuwwz

components.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable */
+
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399

eslint.config.js

@@ -388,6 +388,10 @@ export default defineFlatConfig([
     }
   },
 
+  ...pluginVue.configs['flat/base'],
+  ...pluginVue.configs['flat/essential'],
+  ...pluginVue.configs['flat/strongly-recommended'],
+  ...pluginVue.configs['flat/recommended'],
   {
     files: ['**/*.vue'],
     languageOptions: {
@@ -408,10 +412,6 @@ export default defineFlatConfig([
     },
     processor: pluginVue.processors['.vue'],
     rules: {
-      ...pluginVue.configs['flat/base'].rules,
-      ...pluginVue.configs['flat/essential'].rules,
-      ...pluginVue.configs['flat/strongly-recommended'].rules,
-      ...pluginVue.configs['flat/recommended'].rules,
       'vue/no-v-html': 'off',
       'vue/multi-word-component-names': 0,
       'vue/singleline-html-element-content-newline': 'off',

src/components/Layout/CenterPanel.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { systemTitle } from '@/base'
 </script>
 
 <template>

src/components/MarkdownPreview/index.vue

@@ -5,7 +5,7 @@ import type { CrossTransformFunction, TransformFunction } from './models'
 import { defaultMockModelName } from './models'
 
 interface Props {
-  reader: ReadableStreamDefaultReader<Uint8Array> | null | undefined
+  reader?: ReadableStreamDefaultReader<Uint8Array> | null | undefined
   model: string | null| undefined
   transformStreamFn: TransformFunction | null | undefined
 }
@@ -235,24 +235,24 @@ const showText = () => {
     cancelAnimationFrame(typingAnimationFrame)
     typingAnimationFrame = null
     readerLoading.value = false
-    renderMermaidProcess()
+    renderMermaidProcess(scrollToBottom)
     return
   }
 
   // 若 reader 还没结束，则保持打字行为
   if (!readIsOver.value) {
     runReadBuffer()
-    renderMermaidProcess()
+    renderMermaidProcess(scrollToBottom)
     typingAnimationFrame = requestAnimationFrame(showText)
   } else {
     // 读取剩余的 buffer
     runReadBuffer(
       () => {
-        renderMermaidProcess()
+        renderMermaidProcess(scrollToBottom)
         typingAnimationFrame = requestAnimationFrame(showText)
       },
       () => {
-        renderMermaidProcess()
+        renderMermaidProcess(scrollToBottom)
 
         window.$ModalNotification.success({
           title: '生成完毕',

src/components/MarkdownPreview/plugins/markdown.ts

@@ -118,11 +118,11 @@ export const renderMarkdownText = (content: string) => {
   return md.render(mermaidTransformed)
 }
 
-const debounceRenderMermaid = _.debounce(() => {
-  processMermaid.fn()
+const debounceRenderMermaid = _.debounce((callback = () => {}) => {
+  processMermaid.fn(callback)
 }, 10)
 
 // 触发 Mermaid 渲染
-export const renderMermaidProcess = () => {
-  debounceRenderMermaid()
+export const renderMermaidProcess = (callback = () => {}) => {
+  debounceRenderMermaid(callback)
 }

src/components/MarkdownPreview/plugins/mermaid.ts

@@ -2,7 +2,7 @@ import mermaid from 'mermaid'
 import CryptoJs from 'crypto-js'
 
 export const processMermaid = {
-  fn: () => {}
+  fn: (callback) => {}
 }
 
 const computeHash = (str) => {
@@ -43,7 +43,10 @@ export const mermaidPlugin = (md, options = {}) => {
 
 
     if (cache.has(hash)) {
-      return `<div data-mermaid-hash="${ hash }">${ cache.get(hash) }</div>`
+      return `
+        ${ defaultFence(tokens, idx, opts, env, self) }
+        <div data-mermaid-hash="${ hash }">${ cache.get(hash) }</div>
+      `
     }
 
     return `
@@ -59,7 +62,7 @@ export const mermaidPlugin = (md, options = {}) => {
   }
 
   // 后处理渲染 mermaid
-  const renderMermaid = async (container) => {
+  const renderMermaid = async (container, callback = () => {}) => {
     const encodedContent = container.dataset.mermaidContent
     const content = decodeURIComponent(encodedContent)
     const hash = container.dataset.mermaidHash
@@ -93,6 +96,8 @@ export const mermaidPlugin = (md, options = {}) => {
       fragment.appendChild(wrapper)
 
       container.replaceWith(fragment)
+
+      callback()
     } catch (err) {
       console.error('Mermaid 渲染失败:', err)
       container.dataset.mermaidStatus = 'error'
@@ -101,7 +106,7 @@ export const mermaidPlugin = (md, options = {}) => {
   }
 
   // 全局渲染控制器
-  const processContainers = () => {
+  const processContainers = (callback = () => {}) => {
     const containers = document.querySelectorAll(`
       div[data-mermaid-status="pending"]
     `) as NodeListOf<HTMLElement>
@@ -116,7 +121,7 @@ export const mermaidPlugin = (md, options = {}) => {
         container.dataset.mermaidStatus = 'pending'
       }
       nextTick(() => {
-        renderMermaid(container)
+        renderMermaid(container, callback)
       })
     })
   }
@@ -131,8 +136,8 @@ export const mermaidPlugin = (md, options = {}) => {
   })
 
   // 触发 Mermaid 图表渲染 export
-  processMermaid.fn = () => {
-    processContainers()
+  processMermaid.fn = (callback = () => {}) => {
+    processContainers(callback)
   }
 }
 

src/components/Navigation/NavBar.vue

@@ -37,35 +37,38 @@ const handleToRepo = () => {
     <div
       class="header-left"
     >
+      <div
+        flex="~ items-center justify-center"
+        class="text-20"
+        select-none
+        cursor-pointer
+        @click="handleToRepo()"
+      >
+        <div class="size-24 i-streamline-emojis:cloud-1"></div>
+        <div class="flex-1 pl-10 font-600 text-center">{{ systemTitle }}</div>
+      </div>
     </div>
     <div class="flex-1">
       <div
         flex="~ col items-center justify-center"
         px-36px
       >
-        <div
-          flex="~ items-center justify-center"
-          class="text-20"
-          select-none
-          cursor-pointer
-          @click="handleToRepo()"
-        >
-          <div class="size-24 i-streamline-emojis:cloud-1"></div>
-          <div class="flex-1 pl-10 font-600 text-center">{{ systemTitle }}</div>
-        </div>
         <slot name="bottom"></slot>
       </div>
     </div>
 
     <div class="header-right">
+      <slot name="right"></slot>
     </div>
   </header>
 </template>
 
 <style lang="scss" scoped>
 
 .navigation-nav-header-container {
-  --at-apply: w-full flex items-center justify-center py-10;
+  --at-apply: w-full flex items-center justify-center;
+  --at-apply: px-16 py-10;
+  --at-apply: lt-lg:flex-col;
 
   .header-left,
   .header-right {

src/views/chat.vue

@@ -252,18 +252,18 @@ const promptTextList = ref([
         flex="~ justify-between items-center"
       >
         <NavigationNavBar>
-          <template #bottom>
+          <template #right>
             <div
               flex="~ justify-center items-center wrap"
-              class="pt-10 text-16"
+              class="text-16 line-height-16"
             >
-              <span>当前模型：</span>
+              <span class="lt-xs:hidden">当前模型：</span>
               <div
                 flex="~ justify-center items-center"
               >
                 <n-select
                   v-model:value="businessStore.systemModelName"
-                  class="w-280 pr-10 font-italic font-bold"
+                  class="w-280 lt-xs:w-260 pr-10 font-italic font-bold"
                   placeholder="请选择模型"
                   :disabled="stylizingLoading"
                   :options="modelListSelections"
@@ -283,7 +283,11 @@ const promptTextList = ref([
                     >本仓库</a>到本地运行
                   </div>
                   <template #trigger>
-                    <span class="cursor-help font-bold c-primary text-17 i-radix-icons:question-mark-circled"></span>
+                    <span
+                      class="cursor-help font-bold c-primary text-17 i-ic:sharp-help"
+                      ml-10
+                      mr-24
+                    ></span>
                   </template>
                 </CustomTooltip>
               </div>

uno.config.ts

@@ -2,7 +2,7 @@ import {
   defineConfig,
   presetAttributify,
   presetIcons,
-  presetUno,
+  presetWind3,
   toEscapedSelector,
   transformerDirectives
 } from 'unocss'
@@ -12,7 +12,7 @@ import presetRemToPx from '@unocss/preset-rem-to-px'
 
 export default defineConfig({
   presets: [
-    presetUno(),
+    presetWind3(),
     presetAttributify(),
     presetIcons(),
     presetRemToPx({
@@ -23,6 +23,14 @@ export default defineConfig({
     transformerDirectives()
   ],
   theme: {
+    breakpoints: {
+      'xs': '475px',
+      'sm': '640px',
+      'md': '1024px',
+      'lg': '1200px',
+      'xl': '1440px',
+      '2xl': '1920px'
+    },
     colors: {
       primary: '#692ee6',
       success: '#52c41a',