。

package.json

@@ -41,6 +41,7 @@
     "qs": "^6.11.1",
     "query-string": "^8.1.0",
     "resolve-url": "^0.2.1",
+    "vditor": "^3.9.6",
     "vite-plugin-imagemin": "^0.6.1",
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",

src/views/page/PaperGen.vue

@@ -78,6 +78,14 @@
             </div>
         </n-card>
     </n-modal>
+
+    <n-drawer v-model:show="showEditor" width="100%" height="100%" placement="bottom" @afterEnter="onEditorShow">
+        <n-drawer-content title="编辑" body-content-style="padding:0">
+            <div class="px-4 py-8">
+                <div id="editor"></div>
+            </div>
+        </n-drawer-content>
+    </n-drawer>
 </template>
 <script lang="ts" setup>
 import { h, defineComponent, ref, reactive, onMounted, Ref, computed } from 'vue'
@@ -100,7 +108,10 @@ import {
     NLayoutHeader,
     NLayoutContent,
     NAvatar,
-    NPopover
+    NPopover,
+    NDropdown,
+    NDrawer,
+    NDrawerContent
 } from 'naive-ui'
 import { fetchPaperOrders, fetchGenPaper, fetchPaperResults, fetchCreatePaperOrder, fetchUpdatePaperOrder } from '@/api'
 import { format, parseISO } from 'date-fns'
@@ -108,6 +119,13 @@ import { UserAvatar } from '@/components/common'
 import { LoginForm } from '@/components/common'
 import { useUserStore } from '@/store'
 import { storeToRefs } from 'pinia'
+import MarkdownIt from 'markdown-it'
+import mdKatex from '@traptitech/markdown-it-katex'
+import mila from 'markdown-it-link-attributes'
+import hljs from 'highlight.js'
+import { t } from '@/locales'
+import Vditor from 'vditor'
+import 'vditor/src/assets/less/index.less'
 
 const message = useMessage()
 const showLogin = ref(false)
@@ -346,14 +364,47 @@ const resultColumns: DataTableColumn[] = [
         width: '150px',
         render(row: any) {
             return h(
-                NButton,
+                NDropdown,
                 {
                     size: 'small',
-                    onClick: () => {
-                        window.open(row.fileUrl, '_blank')
+                    options: [
+                        {
+                            label: 'Word',
+                            key: 'word'
+                        },
+                        {
+                            label: 'Markdown',
+                            key: 'markdown'
+                        }
+                    ],
+                    trigger: 'click',
+                    onSelect(key: string | number) {
+                        console.log(key)
+                        if (key === 'word') {
+                            window.open(row.fileUrl, '_blank')
+                        } else {
+                            // Create element with <a> tag
+                            const link = document.createElement('a')
+
+                            // Create a blog object with the file content which you want to add to the file
+                            const file = new Blob([row.content], { type: 'text/plain' })
+
+                            // Add file content in the object URL
+                            link.href = URL.createObjectURL(file)
+
+                            // Add file name
+                            link.download = row.fileUrl
+                                .split('/')
+                                .pop()
+                                .replace(/\.docx$/, '.md')
+
+                            // Add click event to <a> tag to save file.
+                            link.click()
+                            URL.revokeObjectURL(link.href)
+                        }
                     }
                 },
-                { default: () => '下载' }
+                () => h(NButton, { size: 'small', type: 'primary' }, { default: () => '下载' })
             )
         }
     }
@@ -410,4 +461,35 @@ function editRow(row: any) {
     form.value?.restoreValidation()
     showForm.value = true
 }
+
+const mdi = new MarkdownIt({
+    linkify: true,
+    highlight(code, language) {
+        const validLang = !!(language && hljs.getLanguage(language))
+        if (validLang) {
+            const lang = language ?? ''
+            return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
+        }
+        return highlightBlock(hljs.highlightAuto(code).value, '')
+    }
+})
+
+mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
+mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+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>`
+}
+
+const showEditor = ref(false)
+setTimeout(() => {
+    showEditor.value = true
+}, 500)
+function onEditorShow() {
+    console.log('show')
+    const vditor = new Vditor('editor', {
+        height: '100%'
+    })
+}
 </script>

yarn.lock

@@ -3143,6 +3143,11 @@ didyoumean@^1.2.2:
   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
+diff-match-patch@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmmirror.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
@@ -7941,6 +7946,13 @@ vdirs@^0.1.4, vdirs@^0.1.8:
   dependencies:
     evtd "^0.2.2"
 
+vditor@^3.9.6:
+  version "3.9.6"
+  resolved "https://registry.npmmirror.com/vditor/-/vditor-3.9.6.tgz#c6a9e460984992d00b7d4b1f9f79bc75cbba4e34"
+  integrity sha512-97sPNHnBpfEFnk5WARCpmdKxgUiPtp0/fPLAUmzZ+axFFf7kExWHRNIUO7OTQzEUMJP/rcXESQTlYGhgKYrsOQ==
+  dependencies:
+    diff-match-patch "^1.0.5"
+
 vite-plugin-html@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmmirror.com/vite-plugin-html/-/vite-plugin-html-3.2.0.tgz#0d4df9900642a321a139f1c25c05195ba9d0ec79"