feat: 添加文章页面

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

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <div class="md" v-html="code"></div>
+        {{ code }}
+        <button @click="code='1234'">你好</button>
+    </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"+
+"## 是我的"
+)
+
+// const props = defineProps(['code'])
+
+onMounted(() => {
+    // code.value=props.code;
+    marked.setOptions({
+        renderer: new marked.Renderer(),
+        highlight: function (code) {
+            return hljs.highlightAuto(code.value).value;
+        },
+        pedantic: false,
+        gfm: true,
+        tables: true,
+        breaks: false,
+        sanitize: false,
+        smartLists: true,
+        smartypants: false,
+        xhtml: false
+    }
+    );
+    code.value = marked(code.value)
+    console.log( code.value," code.value");
+})
+
+</script>

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

@@ -20,6 +20,7 @@
     </div>
 </template>
 <script setup>
+
 import { onMounted } from 'vue';
 
 const props = defineProps(['size', 'src','showWatching','time'])

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

@@ -7,7 +7,7 @@
 
 
 
-        <div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss">{{props.title}}</el-link></div>
+        <div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss(props.id)">{{props.title}}</el-link></div>
         <div class=" item item-description">{{props.introduction}}</div>
         <div class=" item item-tag"><el-tag v-for="i in 4" :key="i">教程</el-tag></div>
         <div class=" item item-bottom">
@@ -35,12 +35,12 @@ import { h, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import AvatarInfo from './AvatarInfo.vue';
 
-const props = defineProps(['title','introduction','createTime'])
+const props = defineProps(['title','introduction','createTime','id'])
 
 const router = useRouter()
 const spacer = h(ElDivider, { direction: 'vertical' })
-const enterDiscuss = () => {
-    router.push("/article")
+const enterDiscuss = (id) => {
+    router.push(`/article/${id}`)
 }
 </script>
 <style scoped>