feat: add vditor locally

src/components/MarkdownEditor.vue

@@ -40,6 +40,7 @@ onMounted(() => {
         cache: {
             enable: false, // 禁用vditor内置缓存
         },
+        cdn: '/vditor', // 本地资源，完全离线
         upload: {
             url: '/api/admin/upload/img',
             headers: {

src/views/admin/details.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <el-row>
         <el-col :span="24">
             <el-button @click="goBack()">
@@ -102,4 +102,4 @@ onMounted(() => {
     display: block;
     margin: 0 auto;
 }
-</style>
+</style> -->

src/views/blog/blog.vue

@@ -88,7 +88,7 @@ import axios from 'axios';
 
 const userinfo = userInfoStore();
 const activeMenu = ref('1');
-const u_name = userinfo.user.name === ''?'登录':userinfo.user.name
+const u_name = ref('')
 
 // 控制登录弹窗的显示与隐藏
 const loginDialog = ref(false);
@@ -174,7 +174,7 @@ const blogLogin = () => {
         const redirect_uri = `${origin}/admin`
         window.open(redirect_uri, '_blank')
     }
-    if (u_name === '登录') {
+    if (u_name.value === '登录') {
         loginDialog.value = true;
     } else {
         router.push('/me')
@@ -266,6 +266,8 @@ const getCode = async () => {
     startCountdown()
 }
 
+watch(u_name,u_name.value=userinfo.token === null?'登录':userinfo.user.name,{ immediate: true })
+
 
 </script>
 

src/views/blog/viewDetails.vue

@@ -13,8 +13,12 @@
     </el-row>
     <el-row>
         <el-col :span="24">
-            <div style="width: 100%;">
-                <div v-html="Content" class="markdown-body"></div>
+            <div ref="vditorPreviewRef" style="width: 100%;"></div>
+            <div v-if="isLoading" style="text-align: center; padding: 40px; color: #999;">
+                <el-icon class="is-loading" style="font-size: 24px;">
+                    <Loading />
+                </el-icon>
+                <p>加载中...</p>
             </div>
         </el-col>
     </el-row>
@@ -24,55 +28,66 @@
 import { useRouter } from 'vue-router'
 import { viewDetailsStore } from '@/store/details'
 import { onMounted, ref } from 'vue'
-import { marked } from 'marked'
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
 
 const router = useRouter()
 
 const details = viewDetailsStore()
 
-
-const Content = ref('')
-
+const vditorPreviewRef = ref(null)
+const isLoading = ref(true)
 
 const goBack = () => {
     router.back()
 }
 
-const convertContent = () => {
-    const markdownContent = details.detail.content
-    Content.value = marked.parse(markdownContent)
-}
-
-
 onMounted(() => {
-    convertContent()
+    const markdownContent = details.detail.content || ''
+        if (vditorPreviewRef.value) {
+        const renderMarkdown = () => {
+            Vditor.preview(vditorPreviewRef.value, markdownContent, {
+                theme: {
+                    current: 'light'
+                },
+                cdn: '/vditor'
+            })
+            isLoading.value = false
+        }
+
+        if (window.requestIdleCallback) {
+            window.requestIdleCallback(renderMarkdown, { timeout: 1000 })
+        } else {
+            setTimeout(renderMarkdown, 100)
+        }
+    }
 })
 </script>
 
 <style scoped>
 @import 'github-markdown-css/github-markdown.css';
 
-::v-deep(.markdown-body) {
+::v-deep(.vditor-preview) {
     padding: 20px;
 }
 
-::v-deep(.markdown-body table) {
+::v-deep(.vditor-preview table) {
     width: 100%;
     border-collapse: collapse;
 }
 
-::v-deep(.markdown-body th),
-::v-deep(.markdown-body td) {
+::v-deep(.vditor-preview th),
+::v-deep(.vditor-preview td) {
     border: 1px solid #d0d7de;
     padding: 8px;
 }
 
-::v-deep(.markdown-body th) {
+::v-deep(.vditor-preview th) {
     background-color: #f6f8fa;
     font-weight: 600;
 }
 
-::v-deep(.markdown-body img) {
+::v-deep(.vditor-preview img) {
     max-width: 100%;
     height: auto;
     display: block;