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-26 01:28:48 +08:00
parent c83fcb7f26
commit b6f4cbfb4f
77 changed files with 932 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@
<el-col :span="5">
<el-row class="art-info-left">
<el-col :span="24">
<InfoCard header="主题信息" text="展开" hideDivider="true">
<InfoCard header="文章信息" text="展开" hideDivider="true">
<template #content>
<el-button style="width: 100%; margin-bottom: 0.8rem" @click="loadDiscuss(true)">首页</el-button>
<el-button v-hasPer="['bbs:article:add']" @click="addArticle(0)" type="primary"
@@ -17,14 +17,14 @@
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items="items" header="推荐好友" text="更多">
<InfoCard :items="items" header="作者分享" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items="items" header="推荐好友" text="更多">
<InfoCard :items="items" header="内容推荐" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
@@ -41,6 +41,9 @@
<!-- :userInfo="{nick:'qwe'} -->
<el-divider />
<h2>{{ discuss.title }}</h2>
<el-image :preview-src-list="[getUrl(discuss.cover)]" v-if="discuss.cover" :src="getUrl(discuss.cover)" style="width: 150px;height: 150px;" />
<ArticleContentInfo :code="discuss.content??''"></ArticleContentInfo>
<el-divider class="tab-divider" />
@@ -66,7 +69,7 @@
<el-col :span="5">
<el-row class="right-div">
<el-col :span="24">
<InfoCard class="art-info-right" header="文章信息" text="更多" hideDivider="true">
<InfoCard class="art-info-right" header="主题信息" text="更多" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
@@ -79,9 +82,9 @@
v-hasPer="['bbs:discuss:remove']"
@click="delHander(route.params.discussId)">删除</el-button>
</li>
<li>分类： <span>文章</span></li>
<li>分类： <span>主题</span></li>
标签：
<el-tag type="success">文章</el-tag>
<el-tag type="success">主题</el-tag>
<el-tag type="info">资源</el-tag>
</ul>
</div>
@@ -104,14 +107,14 @@
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items="items" header="推荐好友" text="更多">
<InfoCard :items="items" header="其他" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items="items" header="推荐好友" text="更多">
<InfoCard :items="items" header="其他" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
@@ -145,7 +148,10 @@ const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
const articleData = ref([]);
//主题内容
const discuss = ref({});
//封面url
const getUrl= (str)=>{
return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`
}
//当前默认选择的子文章
const currentNodeKey=route.params.articleId;

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

@@ -48,7 +48,7 @@
<el-tab-pane label="最热" name="host"> </el-tab-pane>
</el-tabs>
<el-collapse >
<el-collapse class="collapse-list" style="background-color: #F0F2F5;" >
<el-collapse-item >
<template #title>
<div class="collapse-top">
@@ -58,14 +58,14 @@
</div>
</template>
<div class="div-item" v-for="i in topDiscussList" >
<DisscussCard :title="i.title" :isAgree="i.isAgree" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :user="i.user" :color="i.color" :seeNum="i.seeNum" badge="置顶"/>
<DisscussCard :discuss="i" badge="置顶"/>
</div>
</el-collapse-item>
</el-collapse>
<el-divider v-show="topDiscussList.length>0" />
<div class="div-item" v-for="i in discussList" >
<DisscussCard :title="i.title" :isAgree="i.isAgree" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :color="i.color" :seeNum="i.seeNum" :user="i.user"/>
<DisscussCard :discuss="i"/>
</div>
<div>
<el-pagination
@@ -210,4 +210,7 @@ display: flex;
{
width:20rem;
}
.collapse-list >>> .el-collapse-item__header {
border-bottom-color: #F0F2F5 !important;
}
</style>

84
Yi.BBS.Vue3/src/views/EditArticle.vue
View File

@@ -2,7 +2,7 @@
<div style="width: 100%">
<div class="body-div">
<el-form label-width="120px" :model="editForm" label-position="left" :rules="rules" ref="ruleFormRef">
<el-form-item label="分类：">
<el-form-item label="类型：">
<el-radio-group v-model="radio">
<el-radio-button label="discuss">主题</el-radio-button>
<el-radio-button label="article">文章</el-radio-button>
@@ -10,6 +10,16 @@
<el-radio-button label="orther">其他</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="权限：" v-if="route.query.artType == 'discuss'">
<el-radio-group v-model="perRadio">
<el-radio-button label="Public">公开</el-radio-button>
<el-radio-button label="Oneself">仅自己可见</el-radio-button>
<el-radio-button label="User">部分用户可见</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="route.query.artType == 'article'" label="子文章名称：" prop="name">
<el-input placeholder="请输入" v-model="editForm.name" />
</el-form-item>
@@ -22,8 +32,21 @@
<el-form-item label="内容：" prop="content">
<MavonEdit height="30rem" v-model="editForm.content" :codeStyle="codeStyle" />
</el-form-item>
<el-form-item label="封面：">
<el-input placeholder="请输入" />
<el-form-item label="封面：" v-if="route.query.artType == 'discuss'">
<!-- 主题封面选择 -->
<el-upload
class="avatar-uploader"
:action="fileUploadUrl"
:show-file-list="false"
:on-success="onSuccess"
>
<el-image v-if="dialogImageUrl" :src="getUrl(dialogImageUrl)" style="width: 178px;height: 178px;" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="标签：" prop="types">
<el-input placeholder="请输入" v-model="editForm.types" />
@@ -54,16 +77,32 @@ import {
//数据定义
const route = useRoute();
const router = useRouter();
const perRadio=ref("Public");
const radio = ref(route.query.artType);
const codeStyle = "atom-one-dark";
//封面完整显示的url
const fileUploadUrl=`${import.meta.env.VITE_APP_BASEAPI}/file`
//封面的url
const dialogImageUrl = ref('')
//文件上传成功后
const onSuccess=(response)=>{
dialogImageUrl.value=response[0].id
}
//封面url
const getUrl= (str)=>{
return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`
}
//整个页面上的表单
const editForm = reactive({
title: "",
types: "",
introduction: "",
content: "",
name: ""
name: "",
});
//组装主题内容： 需要更新主题信息
@@ -87,7 +126,7 @@ const rules = reactive({
],
content: [
{ required: true, message: "请输入内容", trigger: "blur" },
{ min: 10, max: 4000, message: "长度 10 到4000", trigger: "blur" },
{ min: 10, max: 4000, message: "长度 10 到9999", trigger: "blur" },
],
});
//提交按钮,需要区分操作类型
@@ -104,7 +143,8 @@ const submit = async (formEl) => {
discuss.introduction = editForm.introduction;
discuss.content = editForm.content;
discuss.plateId = discuss.plateId ?? route.query.plateId
discuss.cover=dialogImageUrl.value;
discuss.permissionType=perRadio.value;
//主题创建
if (route.query.operType == "create") {
const response = await discussAdd(discuss);
@@ -189,6 +229,8 @@ const loadDiscuss = async () => {
editForm.types = res.types;
editForm.introduction = res.introduction;
discuss.plateId = res.plateId;
dialogImageUrl.value= res.cover;
perRadio.value=res.permissionType;
};
//加载文章
const loadArticle = async () => {
@@ -210,4 +252,34 @@ const loadArticle = async () => {
margin: 1.5rem;
padding: 1.5rem;
}
.avatar-uploader >>>.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader >>>.el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
.el-upload
{
}
</style>

245
Yi.BBS.Vue3/src/views/Index.vue
View File

@@ -1,91 +1,97 @@
<template >
<div style="width: 1200px;">
<el-row :gutter="20" class="top-div" >
<el-row :gutter="20" class="top-div">
<el-col :span="17">
<div class="scrollbar">
<ScrollbarInfo/>
</div>
<el-row class="left-div">
<el-col :span="8" v-for="i in plateList" class="plate" :style="{ 'padding-left': i%3==1?0:0.2+'rem','padding-right': i%3==0?0:0.2+'rem'}" >
<PlateCard :name="i.name" :introduction="i.introduction" :id="i.id" />
<el-col :span="17">
<div class="scrollbar">
<ScrollbarInfo />
</div>
<el-row class="left-div">
<el-col :span="8" v-for="i in plateList" class="plate"
:style="{ 'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem', 'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem' }">
<PlateCard :name="i.name" :introduction="i.introduction" :id="i.id" />
</el-col>
<el-col :span="24" v-for="i in discussList">
<DisscussCard :title="i.title" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :user="i.user" :seeNum="i.seeNum" :isAgree="i.isAgree"/>
</el-col>
<el-col :span="24">
<el-empty v-show="discussList.length<=0" description="推荐位置，空空如也" />
</el-col>
</el-row>
<el-col :span="24" v-for="i in discussList">
<DisscussCard :discuss="i" />
</el-col>
<el-col :span="24">
<el-empty v-show="discussList.length <= 0" description="推荐位置，空空如也" />
</el-col>
</el-row>
</el-col>
<el-col :span="7">
<el-row class="right-div">
<el-col :span="24" >
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in bannerList">
<div class="carousel-font" :style="{color:item.color}">{{ item.name }}</div>
<el-image style="width: 100%; height: 100%" :src="item.logo" fit="cover" />
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="24" >
<InfoCard header="简介" text="详情">
<template #content >
<div class="introduce">
没有什么能够阻挡，人类对代码<span style="color: #1890ff;">优雅</span>的追求
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24" >
<InfoCard :items=items header="本月排行" text="更多">
<template #item="temp">
<AvatarInfo>
<template #bottom>
本月积分：680
</template>
</AvatarInfo>
</template>
</InfoCard>
</el-col>
<el-col :span="7">
<el-row class="right-div">
<el-col :span="24">
<el-col :span="24" >
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo/>
</template>
</InfoCard>
</el-col>
<el-col :span="24" >
<InfoCard :items=items header="其他" text="更多">
<template #item="temp">
{{temp}}
</template>
</InfoCard>
</el-col>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in bannerList">
<div class="carousel-font" :style="{ color: item.color }">{{ item.name }}</div>
<el-image style="width: 100%; height: 100%" :src="item.logo" fit="cover" />
</el-carousel-item>
</el-carousel>
<el-col :span="24" style=" background: transparent;">
<BottomInfo/>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="24" >
<InfoCard header="访问统计" class="VisitsLineChart" text="详情">
<template #content>
<VisitsLineChart />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard header="简介" text="详情">
<template #content>
<div class="introduce">
没有什么能够阻挡，人类对代码<span style="color: #1890ff;">优雅</span>的追求
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="本月排行" text="更多">
<template #item="temp">
<AvatarInfo>
<template #bottom>
本月积分：680
</template>
</AvatarInfo>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24" style=" background: transparent;">
<BottomInfo />
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script setup>
@@ -95,68 +101,75 @@ import PlateCard from '@/components/PlateCard.vue'
import ScrollbarInfo from '@/components/ScrollbarInfo.vue'
import AvatarInfo from '@/components/AvatarInfo.vue'
import BottomInfo from '@/components/BottomInfo.vue'
import VisitsLineChart from '@/components/echars/VisitsLineChart.vue'
import {getList} from '@/apis/plateApi.js'
import {getList as bannerGetList} from '@/apis/bannerApi.js'
import {getList as discussGetList} from '@/apis/discussApi.js'
import { onMounted, ref ,reactive} from 'vue'
var plateList=ref([]);
var discussList=ref([]);
var bannerList=ref([]);
import { getList } from '@/apis/plateApi.js'
import { getList as bannerGetList } from '@/apis/bannerApi.js'
import { getList as discussGetList } from '@/apis/discussApi.js'
import { onMounted, ref, reactive } from 'vue'
var plateList = ref([]);
var discussList = ref([]);
var bannerList = ref([]);
const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
//主题查询参数
const query=reactive({
pageNum:1,
pageSize:10,
isTop:true
const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
//主题查询参数
const query = reactive({
pageNum: 1,
pageSize: 10,
isTop: true
});
//初始化
onMounted(async()=>{
plateList.value= ( await getList()).data.items;
discussList.value=(await discussGetList(query)).data.items;
bannerList.value=(await bannerGetList()).data.items
});
onMounted(async () => {
plateList.value = (await getList()).data.items;
discussList.value = (await discussGetList(query)).data.items;
bannerList.value = (await bannerGetList()).data.items
});
</script>
<style scoped >
.introduce
{
color: rgba(0,0,0,.45);
font-size: small;
.introduce {
color: rgba(0, 0, 0, .45);
font-size: small;
}
.plate
{
.plate {
background: transparent !important;
}
.left-div .el-col{
background-color: #FFFFFF;
margin-bottom: 1rem;
}
.right-div .el-col
{
background-color:#FFFFFF;
.left-div .el-col {
background-color: #FFFFFF;
margin-bottom: 1rem;
}
.carousel-font{
.right-div .el-col {
background-color: #FFFFFF;
margin-bottom: 1rem;
}
.carousel-font {
position: absolute;
z-index: 1;
top: 10%;
left: 10%;
z-index: 1;
top: 10%;
left: 10%;
}
.top-div
{
.top-div {
padding-top: 0.5rem;
}
.scrollbar
{ display: block;
.scrollbar {
display: block;
margin-bottom: 0.5rem;
}
.VisitsLineChart >>> .el-card__body
{
padding: 0.5rem;
}
</style>