feat: 完善文章编辑功能

Yi.BBS.Vue3/src/apis/discussApi.js

@@ -12,3 +12,17 @@ export function get(id){
         method: 'get'
     })
 };
+export function add(data){
+    return myaxios({
+        url: `/discuss`,
+        method: 'post',
+        data:data
+    })
+};
+export function update(id,data){
+    return myaxios({
+        url: `/discuss/${id}`,
+        method: 'put',
+        data:data
+    })
+};

Yi.BBS.Vue3/src/assets/github-markdown.css

@@ -0,0 +1,710 @@
+@font-face {
+    font-family: octicons-link;
+    src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
+  }
+  
+  .markdown-body {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    line-height: 1.5;
+    color: #24292e;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 16px;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+  
+  .markdown-body .pl-c {
+    color: #6a737d;
+  }
+  
+  .markdown-body .pl-c1,
+  .markdown-body .pl-s .pl-v {
+    color: #005cc5;
+  }
+  
+  .markdown-body .pl-e,
+  .markdown-body .pl-en {
+    color: #6f42c1;
+  }
+  
+  .markdown-body .pl-smi,
+  .markdown-body .pl-s .pl-s1 {
+    color: #24292e;
+  }
+  
+  .markdown-body .pl-ent {
+    color: #22863a;
+  }
+  
+  .markdown-body .pl-k {
+    color: #d73a49;
+  }
+  
+  .markdown-body .pl-s,
+  .markdown-body .pl-pds,
+  .markdown-body .pl-s .pl-pse .pl-s1,
+  .markdown-body .pl-sr,
+  .markdown-body .pl-sr .pl-cce,
+  .markdown-body .pl-sr .pl-sre,
+  .markdown-body .pl-sr .pl-sra {
+    color: #032f62;
+  }
+  
+  .markdown-body .pl-v,
+  .markdown-body .pl-smw {
+    color: #e36209;
+  }
+  
+  .markdown-body .pl-bu {
+    color: #b31d28;
+  }
+  
+  .markdown-body .pl-ii {
+    color: #fafbfc;
+    background-color: #b31d28;
+  }
+  
+  .markdown-body .pl-c2 {
+    color: #fafbfc;
+    background-color: #d73a49;
+  }
+  
+  .markdown-body .pl-c2::before {
+    content: "^M";
+  }
+  
+  .markdown-body .pl-sr .pl-cce {
+    font-weight: bold;
+    color: #22863a;
+  }
+  
+  .markdown-body .pl-ml {
+    color: #735c0f;
+  }
+  
+  .markdown-body .pl-mh,
+  .markdown-body .pl-mh .pl-en,
+  .markdown-body .pl-ms {
+    font-weight: bold;
+    color: #005cc5;
+  }
+  
+  .markdown-body .pl-mi {
+    font-style: italic;
+    color: #24292e;
+  }
+  
+  .markdown-body .pl-mb {
+    font-weight: bold;
+    color: #24292e;
+  }
+  
+  .markdown-body .pl-md {
+    color: #b31d28;
+    background-color: #ffeef0;
+  }
+  
+  .markdown-body .pl-mi1 {
+    color: #22863a;
+    background-color: #f0fff4;
+  }
+  
+  .markdown-body .pl-mc {
+    color: #e36209;
+    background-color: #ffebda;
+  }
+  
+  .markdown-body .pl-mi2 {
+    color: #f6f8fa;
+    background-color: #005cc5;
+  }
+  
+  .markdown-body .pl-mdr {
+    font-weight: bold;
+    color: #6f42c1;
+  }
+  
+  .markdown-body .pl-ba {
+    color: #586069;
+  }
+  
+  .markdown-body .pl-sg {
+    color: #959da5;
+  }
+  
+  .markdown-body .pl-corl {
+    text-decoration: underline;
+    color: #032f62;
+  }
+  
+  .markdown-body .octicon {
+    display: inline-block;
+    vertical-align: text-top;
+    fill: currentColor;
+  }
+  
+  .markdown-body a {
+    background-color: transparent;
+    -webkit-text-decoration-skip: objects;
+  }
+  
+  .markdown-body a:active,
+  .markdown-body a:hover {
+    outline-width: 0;
+  }
+  
+  .markdown-body strong {
+    font-weight: inherit;
+  }
+  
+  .markdown-body strong {
+    font-weight: bolder;
+  }
+  
+  .markdown-body h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  .markdown-body img {
+    border-style: none;
+  }
+  
+  .markdown-body svg:not(:root) {
+    overflow: hidden;
+  }
+  
+  .markdown-body code,
+  .markdown-body kbd,
+  .markdown-body pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  
+  .markdown-body hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+  }
+  
+  .markdown-body input {
+    font: inherit;
+    margin: 0;
+  }
+  
+  .markdown-body input {
+    overflow: visible;
+  }
+  
+  .markdown-body [type="checkbox"] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+  
+  .markdown-body * {
+    box-sizing: border-box;
+  }
+  
+  .markdown-body input {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+  
+  .markdown-body a {
+    color: #0366d6;
+    text-decoration: none;
+  }
+  
+  .markdown-body a:hover {
+    text-decoration: underline;
+  }
+  
+  .markdown-body strong {
+    font-weight: 600;
+  }
+  
+  .markdown-body hr {
+    height: 0;
+    margin: 15px 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #dfe2e5;
+  }
+  
+  .markdown-body hr::before {
+    display: table;
+    content: "";
+  }
+  
+  .markdown-body hr::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+  
+  .markdown-body table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+  
+  .markdown-body td,
+  .markdown-body th {
+    padding: 0;
+  }
+  
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  
+  .markdown-body h1 {
+    font-size: 32px;
+    font-weight: 600;
+  }
+  
+  .markdown-body h2 {
+    font-size: 24px;
+    font-weight: 600;
+  }
+  
+  .markdown-body h3 {
+    font-size: 20px;
+    font-weight: 600;
+  }
+  
+  .markdown-body h4 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  
+  .markdown-body h5 {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  
+  .markdown-body h6 {
+    font-size: 12px;
+    font-weight: 600;
+  }
+  
+  .markdown-body p {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+  
+  .markdown-body blockquote {
+    margin: 0;
+  }
+  
+  .markdown-body ul,
+  .markdown-body ol {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  
+  .markdown-body ol ol,
+  .markdown-body ul ol {
+    list-style-type: lower-roman;
+  }
+  
+  .markdown-body ul ul ol,
+  .markdown-body ul ol ol,
+  .markdown-body ol ul ol,
+  .markdown-body ol ol ol {
+    list-style-type: lower-alpha;
+  }
+  
+  .markdown-body dd {
+    margin-left: 0;
+  }
+  
+  .markdown-body code {
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 12px;
+  }
+  
+  .markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 12px;
+  }
+  
+  .markdown-body .octicon {
+    vertical-align: text-bottom;
+  }
+  
+  .markdown-body .pl-0 {
+    padding-left: 0 !important;
+  }
+  
+  .markdown-body .pl-1 {
+    padding-left: 4px !important;
+  }
+  
+  .markdown-body .pl-2 {
+    padding-left: 8px !important;
+  }
+  
+  .markdown-body .pl-3 {
+    padding-left: 16px !important;
+  }
+  
+  .markdown-body .pl-4 {
+    padding-left: 24px !important;
+  }
+  
+  .markdown-body .pl-5 {
+    padding-left: 32px !important;
+  }
+  
+  .markdown-body .pl-6 {
+    padding-left: 40px !important;
+  }
+  
+  .markdown-body::before {
+    display: table;
+    content: "";
+  }
+  
+  .markdown-body::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+  
+  .markdown-body>*:first-child {
+    margin-top: 0 !important;
+  }
+  
+  .markdown-body>*:last-child {
+    margin-bottom: 0 !important;
+  }
+  
+  .markdown-body a:not([href]) {
+    color: inherit;
+    text-decoration: none;
+  }
+  
+  .markdown-body .anchor {
+    float: left;
+    padding-right: 4px;
+    margin-left: -20px;
+    line-height: 1;
+  }
+  
+  .markdown-body .anchor:focus {
+    outline: none;
+  }
+  
+  .markdown-body p,
+  .markdown-body blockquote,
+  .markdown-body ul,
+  .markdown-body ol,
+  .markdown-body dl,
+  .markdown-body table,
+  .markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+  
+  .markdown-body hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #e1e4e8;
+    border: 0;
+  }
+  
+  .markdown-body blockquote {
+    padding: 0 1em;
+    color: #6a737d;
+    border-left: 0.25em solid #dfe2e5;
+  }
+  
+  .markdown-body blockquote>:first-child {
+    margin-top: 0;
+  }
+  
+  .markdown-body blockquote>:last-child {
+    margin-bottom: 0;
+  }
+  
+  .markdown-body kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 10px;
+    color: #444d56;
+    vertical-align: middle;
+    background-color: #fafbfc;
+    border: solid 1px #c6cbd1;
+    border-bottom-color: #959da5;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #959da5;
+  }
+  
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+  
+  .markdown-body h1 .octicon-link,
+  .markdown-body h2 .octicon-link,
+  .markdown-body h3 .octicon-link,
+  .markdown-body h4 .octicon-link,
+  .markdown-body h5 .octicon-link,
+  .markdown-body h6 .octicon-link {
+    color: #1b1f23;
+    vertical-align: middle;
+    visibility: hidden;
+  }
+  
+  .markdown-body h1:hover .anchor,
+  .markdown-body h2:hover .anchor,
+  .markdown-body h3:hover .anchor,
+  .markdown-body h4:hover .anchor,
+  .markdown-body h5:hover .anchor,
+  .markdown-body h6:hover .anchor {
+    text-decoration: none;
+  }
+  
+  .markdown-body h1:hover .anchor .octicon-link,
+  .markdown-body h2:hover .anchor .octicon-link,
+  .markdown-body h3:hover .anchor .octicon-link,
+  .markdown-body h4:hover .anchor .octicon-link,
+  .markdown-body h5:hover .anchor .octicon-link,
+  .markdown-body h6:hover .anchor .octicon-link {
+    visibility: visible;
+  }
+  
+  .markdown-body h1 {
+    padding-bottom: 0.3em;
+    font-size: 2em;
+    border-bottom: 1px solid #eaecef;
+  }
+  
+  .markdown-body h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.5em;
+    border-bottom: 1px solid #eaecef;
+  }
+  
+  .markdown-body h3 {
+    font-size: 1.25em;
+  }
+  
+  .markdown-body h4 {
+    font-size: 1em;
+  }
+  
+  .markdown-body h5 {
+    font-size: 0.875em;
+  }
+  
+  .markdown-body h6 {
+    font-size: 0.85em;
+    color: #6a737d;
+  }
+  
+  .markdown-body ul,
+  .markdown-body ol {
+    padding-left: 2em;
+  }
+  
+  .markdown-body ul ul,
+  .markdown-body ul ol,
+  .markdown-body ol ol,
+  .markdown-body ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  
+  .markdown-body li>p {
+    margin-top: 16px;
+  }
+  
+  .markdown-body li+li {
+    margin-top: 0.25em;
+  }
+  
+  .markdown-body dl {
+    padding: 0;
+  }
+  
+  .markdown-body dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: 600;
+  }
+  
+  .markdown-body dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+  
+  .markdown-body table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+  }
+  
+  .markdown-body table th {
+    font-weight: 600;
+  }
+  
+  .markdown-body table th,
+  .markdown-body table td {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+  
+  .markdown-body table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+  }
+  
+  .markdown-body table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+  }
+  
+  .markdown-body img {
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: #fff;
+  }
+  
+  .markdown-body img[align=right] {
+    padding-left: 20px;
+  }
+  
+  .markdown-body img[align=left] {
+    padding-right: 20px;
+  }
+  
+  .markdown-body code {
+    padding: 0;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(27,31,35,0.05);
+    border-radius: 3px;
+  }
+  
+  .markdown-body code::before,
+  .markdown-body code::after {
+    letter-spacing: -0.2em;
+    content: "\00a0";
+  }
+  
+  .markdown-body pre {
+    word-wrap: normal;
+  }
+  
+  .markdown-body pre>code {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+  }
+  
+  .markdown-body .highlight {
+    margin-bottom: 16px;
+  }
+  
+  .markdown-body .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+  }
+  
+  .markdown-body .highlight pre,
+  .markdown-body pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    /* background-color: #f6f8fa; */
+    border-radius: 3px;
+  }
+  
+  .markdown-body pre code {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .markdown-body pre code::before,
+  .markdown-body pre code::after {
+    content: normal;
+  }
+  
+  .markdown-body .full-commit .btn-outline:not(:disabled):hover {
+    color: #005cc5;
+    border-color: #005cc5;
+  }
+  
+  .markdown-body kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    line-height: 10px;
+    color: #444d56;
+    vertical-align: middle;
+    background-color: #fafbfc;
+    border: solid 1px #d1d5da;
+    border-bottom-color: #c6cbd1;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #c6cbd1;
+  }
+  
+  .markdown-body :checked+.radio-label {
+    position: relative;
+    z-index: 1;
+    border-color: #0366d6;
+  }
+  
+  .markdown-body .task-list-item {
+    list-style-type: none;
+  }
+  
+  .markdown-body .task-list-item+.task-list-item {
+    margin-top: 3px;
+  }
+  
+  .markdown-body .task-list-item input {
+    margin: 0 0.2em 0.25em -1.6em;
+    vertical-align: middle;
+  }
+  
+  .markdown-body hr {
+    border-bottom-color: #eee;
+  }
+  

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

@@ -1,43 +1,41 @@
 <template>
     <div>
-        <div class="md" v-html="code"></div>
+        <div class="markdown-body" v-html="outputHtml"></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 'highlight.js/styles/atom-one-dark.css'
-import { onMounted,ref } from 'vue';
+import '@/assets/github-markdown.css'
-const code =ref( "```javascript\nfunction(){\n\tconsole.log(123)\n}\n```\n"
+import { ref,watch  } from 'vue';
-+"# 你好世界\n"+
-"## 是我的"
-)
 
-// 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) {
+        highlight: function(code) {
-            return hljs.highlightAuto(code.value).value;
+            return hljs.highlightAuto(code).value;
-        },
+          },
         pedantic: false,
-        gfm: true,
+        gfm: true,//允许 Git Hub标准的markdown
-        tables: true,
+        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>

Yi.BBS.Vue3/src/layout/AppHeader.vue

@@ -31,7 +31,7 @@
     <div class="flex-grow" />
 
     <RouterLink to="/discuss"> <el-menu-item index="5">搜索</el-menu-item></RouterLink>
-    <RouterLink to="/addArt"><el-menu-item index="6">分享</el-menu-item></RouterLink>
+    <el-menu-item index="6">分享</el-menu-item>
     <el-sub-menu index="7">
       <template #title>学习</template>
       <el-menu-item index="7-1">学习 one</el-menu-item>

Yi.BBS.Vue3/src/router/index.js

@@ -3,6 +3,10 @@ import Layout from '../layout/Index.vue'
 import NotFound from '../views/NotFound.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
+  scrollBehavior(to, from, savedPosition) {
+    // 始终滚动到顶部
+    return { top: 0 }
+  },
   routes: [
     {
       path: '/',
@@ -26,9 +30,11 @@ const router = createRouter({
           component: () => import('../views/Discuss.vue')
         },
         {
-          name:'addArt',
+          //artType：discuss主题、article文章
-          path:'addArt',
+          //operType：create创建、update更新
-          component:()=>import('../views/AddArticle.vue')
+          name:'editArt',
+          path:'/editArt/:artType/:operType/:id',
+          component:()=>import('../views/EditArticle.vue')
         }
       ]
     },

Yi.BBS.Vue3/src/views/AddArticle.vue

@@ -1,55 +0,0 @@
-<template>
-  <div style="width: 100%;">
-    <div class="body-div">
-        <el-form  label-width="120px" label-position="left">
-
-    <el-form-item label="分类：">
-      <el-radio-group v-model="radio">
-      <el-radio-button label="1" >文章</el-radio-button>
-      <el-radio-button label="2"  >主题</el-radio-button>
-      <el-radio-button label="3"  >板块</el-radio-button>
-      <el-radio-button label="4" >其他</el-radio-button>
-    </el-radio-group>
-    </el-form-item>
-    <el-form-item label="标题：">
-      <el-input  placeholder="请输入" />
-    </el-form-item>
-    <el-form-item label="描述：">
-      <el-input placeholder="请输入" />
-    </el-form-item>
-    <el-form-item label="内容：">
-    
-<MavonEdit height="30rem" v-model="text" :codeStyle="codeStyle"/>
-    </el-form-item>
-    <el-form-item label="封面：">
-      <el-input placeholder="请输入" />
-    </el-form-item>
-    <el-form-item label="标签：">
-      <el-input placeholder="请输入" />
-    </el-form-item>
-    <el-form-item >  <el-button class="submit-btn" type="primary">提交</el-button></el-form-item>
-    </el-form>
-  </div>
-  </div>
-</template>
-<script setup>
-import MavonEdit from '@/components/MavonEdit.vue'
-import { ref } from 'vue';
-const text=ref("")
-const radio=ref(1)
-const codeStyle=ref("atom-one-dark");
-</script>
-<style scoped>
-.submit-btn
-{
-    width: 40%;
-}
-.body-div
-{
-    min-height: 1000px;
-    background-color: #fff;
-    margin: 1.5rem;
-    padding: 1.5rem;
-}
-
-</style>

Yi.BBS.Vue3/src/views/Article.vue

@@ -4,14 +4,16 @@
         <el-row :gutter="20" class="top-div">
 
             <el-col :span="5">
-                <el-row>
+                <el-row class="art-info-left">
-                    <el-col :span="24">
+         
-
+                        <el-col :span="24">
-                        <InfoCard class="art-info-left" header="主题信息" text="展开" hideDivider="true">
+                        <InfoCard  header="主题信息" text="展开" hideDivider="true">
                             <template #content>
+                                <el-button style="width: 100%;margin-bottom: 0.8rem;">首页</el-button>
                                 <el-tree :data="data" @node-click="handleNodeClick" />
                             </template>
                         </InfoCard>
+                        </el-col>
                         <el-col :span="24">
                             <InfoCard :items=items header="推荐好友" text="更多">
                                 <template #item="temp">
@@ -26,7 +28,7 @@
                                 </template>
                             </InfoCard>
                         </el-col>
-                    </el-col>
+            
 
                 </el-row>
 
@@ -39,10 +41,8 @@
                         <AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
 
                         <el-divider />
-                        
                         <h2>{{discuss.title}}</h2>
-                       <!-- {{discuss.content}} -->
+                       <ArticleContentInfo :code="discuss.content"></ArticleContentInfo>
-                       <ArticleContentInfo/>
 
                         <el-divider class="tab-divider" />
 
@@ -73,7 +73,14 @@
                         <InfoCard class="art-info-right" header="文章信息" text="更多" hideDivider="true">
                             <template #content>
                                 <div>
+
+                                  
+
                                     <ul class="art-info-ul">
+                                        <li>
+
+                                          <RouterLink :to='`/editArt/discuss/update/${route.params.discussId}`'> <el-button type="primary" size="default" >编辑</el-button></RouterLink>
+                                        </li>
                                         <li>
                                             分类： <span>文章</span>
                                         </li>
@@ -89,8 +96,8 @@
                             <template #content>
                                 <div>
                                     <ul class="art-info-ul">
-                                        <li v-for="i in 6">
+                                        <li v-for="(item,i) in catalogueData" :key="i">
-                                            <el-button style="width: 100%;justify-content: left" type="primary" text>{{ i }}：第一小结</el-button>
+                                            <el-button style="width: 100%;justify-content: left" type="primary" text>{{ `${i+1} ： ${item}` }}</el-button>
                                         </li>
                                     </ul>
                                 </div>
@@ -204,13 +211,25 @@ const data = [
 //主题内容
 const discuss=ref({});
 
+//目录数据
+const catalogueData=ref([]);
+
 //主题初始化
 const loadDiscuss=async()=>{
     discuss.value= await discussGet(route.params.discussId);
+    //加载目录
+    var reg = /(#{1,6})\s(.*)/g;
+    var myArray =discuss.value.content.match(reg);
+if(myArray!=null)
+{
+    catalogueData.value= myArray.map(x=>{ return x.replace(/#/g,"").replace(/\s/g,'')})
+}
+   
+  
 }
 
 
-onMounted(async()=>{
+ onMounted(async()=>{
    await loadDiscuss();
 
 })
@@ -220,7 +239,7 @@ onMounted(async()=>{
 {
     height:40rem;
 }
-.art-info-left {
+.art-info-left .el-col {
     margin-bottom: 1rem;
 }
 

Yi.BBS.Vue3/src/views/Discuss.vue

@@ -14,9 +14,10 @@
       />
     </el-form-item>
     <div class="form-right">
+ 
             <el-button>重置</el-button>
              <el-button type="primary" @click="async()=>{ await loadDiscussList();}">查询</el-button>
-            
+             <el-button @click="enterEditArticle" type="primary">分享</el-button>    
              <el-dropdown>
     <span class="el-dropdown-link">
       展开
@@ -71,10 +72,11 @@
 import DisscussCard from '@/components/DisscussCard.vue'
 import {getList} from '@/apis/discussApi.js'
 import { onMounted, ref,reactive  } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute,useRouter } from 'vue-router'
 
 //数据定义
 const route=useRoute()
+const router=useRouter()
 const activeName = ref('first')
 const discussList=ref([]);
 const total=ref(100)
@@ -82,7 +84,7 @@ const query=reactive({
   pageNum:1,
   pageSize:10,
   title:'',
-  plateId:''
+  plateId:route.params.plateId
 })
 
 const handleClick = (tab, event) => {
@@ -95,12 +97,15 @@ onMounted(async()=>{
 
 //加载discuss
 const loadDiscussList=async()=>{
-  query.plateId=route.params.plateId;
   const response= await getList(query);
  discussList.value=response.items;
  total.value=Number( response.total);
 }
 
+//进入添加主题页面
+const enterEditArticle=()=>{
+  router.push(`/editArt/discuss/create/${route.params.plateId}`)
+}
 </script>
 <style scoped>
 .el-pagination

Yi.BBS.Vue3/src/views/EditArticle.vue

@@ -0,0 +1,121 @@
+<template>
+  <div style="width: 100%;">
+    <div class="body-div">
+      <el-form label-width="120px" :model="discuss" label-position="left" :rules="rules" ref="ruleFormRef">
+
+        <el-form-item label="分类：">
+          <el-radio-group v-model="radio">
+            <el-radio-button label="1">文章</el-radio-button>
+            <el-radio-button label="2">主题</el-radio-button>
+            <el-radio-button label="3">板块</el-radio-button>
+            <el-radio-button label="4">其他</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="标题：" prop="title">
+          <el-input placeholder="请输入" v-model="discuss.title" />
+        </el-form-item>
+        <el-form-item label="描述：" prop="introduction">
+          <el-input placeholder="请输入" v-model="discuss.introduction" />
+        </el-form-item>
+        <el-form-item label="内容：" prop="content">
+          {{ discuss.content + "[111]" }}
+          <MavonEdit height="30rem" v-model="discuss.content" :codeStyle="codeStyle" />
+        </el-form-item>
+        <el-form-item label="封面：">
+          <el-input placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="标签：" prop="types">
+          <el-input placeholder="请输入" v-model="discuss.types" />
+        </el-form-item>
+        <el-form-item> <el-button @click="submit(ruleFormRef)" class="submit-btn"
+            type="primary">提交</el-button></el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script setup>
+import MavonEdit from '@/components/MavonEdit.vue'
+import { ref, reactive,onMounted } from 'vue';
+import { useRoute } from 'vue-router'
+
+import { add as discussAdd, update as discussUpdate,get as discussGet } from '@/apis/discussApi.js'
+
+//数据定义
+const route = useRoute()
+const radio = ref(1)
+const codeStyle = "atom-one-dark"
+//需要添加的主题信息
+const discuss = reactive({
+  title: "",
+  types: "",
+  introduction: "",
+  content: "",
+  plateId: route.params.id
+});
+//定义效验规则
+const ruleFormRef = ref(null)
+const rules = reactive({
+  title: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+    { min: 3, max: 20, message: '长度 3 到 20', trigger: 'blur' },
+  ],
+
+})
+//提交按钮,需要区分操作类型
+const submit = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //创建
+      if (route.params.operType == 'create') {
+        await discussAdd(discuss)
+
+      }
+      //更新
+      else if (route.params.operType == 'update') {
+        await discussUpdate(route.params.id, discuss)
+      }
+
+      ruleFormRef.value.resetFields();
+      discuss.plateId = route.params.id;
+    }
+  })
+
+}
+
+onMounted(async()=>{
+  //如果是更新操作，需要先查询
+  if (route.params.operType == 'update') {
+        await loadDiscuss();
+      }
+})
+//加载主题
+const loadDiscuss=async()=>{
+ const response= await discussGet(route.params.id);
+ discuss.content=  response.content;
+ discuss.title=  response.title;
+ discuss.types=  response.types;
+ discuss.introduction=  response.introduction;
+}
+// const clear = (source) => {
+//   const keys = Object.keys(source);
+//   let obj = {};
+//   keys.forEach((item) => {
+//     obj[item] = "";
+//   });
+//   Object.assign(source, obj);
+// };
+
+</script>
+<style scoped>
+.submit-btn {
+  width: 40%;
+}
+
+.body-div {
+  min-height: 1000px;
+  background-color: #fff;
+  margin: 1.5rem;
+  padding: 1.5rem;
+}
+</style>