|
|
@@ -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>
|
