feat: 完善文章编辑功能

Yi.BBS.Vue3/src/components/ArticleContentInfo.vue

@@ -1,43 +1,41 @@
 <template>
     <div>
-        <div class="md" v-html="code"></div>
-        {{ code }}
-        <button @click="code='1234'">你好</button>
+        <div class="markdown-body" v-html="outputHtml"></div>
     </div>
 </template>
   
 <script setup>
 import { marked } from 'marked';
 import hljs from "highlight.js";
-import javascript from 'highlight.js/lib/languages/javascript';
-import 'highlight.js/styles/monokai-sublime.css';
-import { onMounted,ref } from 'vue';
-const code =ref( "```javascript\nfunction(){\n\tconsole.log(123)\n}\n```\n"
-+"# 你好世界\n"+
-"## 是我的"
-)
+//可以设置加载样式切换主题
+import 'highlight.js/styles/atom-one-dark.css'
+import '@/assets/github-markdown.css'
+import { ref,watch  } from 'vue';
 
-// const props = defineProps(['code'])
+const outputHtml=ref("")
+const props = defineProps(['code'])
+watch(props,(n,o)=>{
 
-onMounted(() => {
-    // code.value=props.code;
     marked.setOptions({
         renderer: new marked.Renderer(),
-        highlight: function (code) {
-            return hljs.highlightAuto(code.value).value;
-        },
+        highlight: function(code) {
+            return hljs.highlightAuto(code).value;
+          },
         pedantic: false,
-        gfm: true,
-        tables: true,
+        gfm: true,//允许 Git Hub标准的markdown
+        tables: true,//支持表格
+    
         breaks: false,
         sanitize: false,
         smartLists: true,
         smartypants: false,
-        xhtml: false
+        xhtml: false,
+        smartLists: true,
     }
     );
-    code.value = marked(code.value)
-    console.log( code.value," code.value");
+    //需要注意代码块样式
+    outputHtml.value = marked(n.code).replace(/<pre>/g, "<pre class='hljs'>")
 })
 
 </script>
+

Yi.BBS.Vue3/src/components/AvatarInfo.vue

@@ -15,6 +15,7 @@
             </div>
         </div>
         
+
         <el-button v-if="props.showWatching" type="primary" size="default" icon="Plus">关注</el-button>
 
     </div>
@@ -23,7 +24,7 @@
 
 import { onMounted } from 'vue';
 
-const props = defineProps(['size', 'src','showWatching','time'])
+const props = defineProps(['size', 'src','showWatching','time','id'])
 
 </script>
 <style scoped>

Yi.BBS.Vue3/src/components/MavonEdit.vue

@@ -1,5 +1,6 @@
 <template>
   <mavon-editor 
+  :v-model="text"
   :subfield="subfield" 
   :codeStyle="props.codeStyle" 
   :ishljs="true"
@@ -10,15 +11,29 @@
 </template>
 <script setup>
 // Local Registration
+
 import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
-import { ref } from 'vue';
+import { ref,computed,watch } from 'vue';
 const props = defineProps(['height','modelValue',"codeStyle"])
 const emit=defineEmits(['update:modelValue'])
 const subfield = true;
+
+//v-model传值出去
+const text = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
 const change=(value ,render)=>
 {
-  emit('update:modelValue', render)
+console.log(value,"value");
+  //不用给解析后htm的值，给value即可
+  emit('update:modelValue', value)
 }
 
 </script>