xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善文章编辑功能

Browse Source
This commit is contained in:
橙子
2023-03-12 01:50:11 +08:00
parent 3de32945f2
commit 27962cd25f
13 changed files with 933 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Yi.BBS.Vue3/src/apis/discussApi.js
View File

@@ -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
})
};

710
Yi.BBS.Vue3/src/assets/github-markdown.css Normal file
View File

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

40
Yi.BBS.Vue3/src/components/ArticleContentInfo.vue
View File

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

3
Yi.BBS.Vue3/src/components/AvatarInfo.vue
View File

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

19
Yi.BBS.Vue3/src/components/MavonEdit.vue
View File

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

2
Yi.BBS.Vue3/src/layout/AppHeader.vue
View File

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

12
Yi.BBS.Vue3/src/router/index.js
View File

@@ -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',
path:'addArt',
component:()=>import('../views/AddArticle.vue')
//artType：discuss主题、article文章
//operType：create创建、update更新
name:'editArt',
path:'/editArt/:artType/:operType/:id',
component:()=>import('../views/EditArticle.vue')
}
]
},

55
Yi.BBS.Vue3/src/views/AddArticle.vue
View File

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

43
Yi.BBS.Vue3/src/views/Article.vue
View File

@@ -4,14 +4,16 @@
<el-row :gutter="20" class="top-div">
<el-col :span="5">
<el-row>
<el-col :span="24">
<InfoCard class="art-info-left" header="主题信息" text="展开" hideDivider="true">
<el-row class="art-info-left">
<el-col :span="24">
<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/>
<ArticleContentInfo :code="discuss.content"></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">
<el-button style="width: 100%;justify-content: left" type="primary" text>{{ i }}：第一小结</el-button>
<li v-for="(item,i) in catalogueData" :key="i">
<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;
}

13
Yi.BBS.Vue3/src/views/Discuss.vue
View File

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

121
Yi.BBS.Vue3/src/views/EditArticle.vue Normal file
View File

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

BIN
Yi.Framework.Net6/src/project/BBS/Yi.BBS.Web/yi-sqlsugar-dev.db
View File

Binary file not shown.

BIN
Yi.Framework.Net6/src/project/bbs/Yi.BBS.Web/yi-sqlsugar-dev.db
View File

Binary file not shown.