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

23
Yi.BBS.Vue3/src/components/CommentInfo.vue
View File

@@ -14,13 +14,14 @@
<el-divider />
<div v-hasPer="['bbs:comment:add']">
<el-input v-model="topContent" placeholder="发表一个友善的评论吧~" :rows="5" type="textarea"></el-input>
<el-button @click="addTopComment" type="primary" class="btn-top-comment">发表评论</el-button>
<el-button @click="addTopComment" type="primary" class="btn-top-comment" >发表评论</el-button>
<el-button class="btn-top-comment">其他</el-button>
<el-divider />
</div>
<!-- 开始评论主体 -->
<div v-for="item in commentList" :key="item.id" class="comment1">
@@ -31,13 +32,13 @@
<span class="time"> {{ item.creationTime }} </span>
<span class="pointer"><el-icon>
<Pointer />
</el-icon> 4</span>
<el-button type="primary" @click="replay(item.createUser.nick, item.id, item.id)" size="large" text>回复</el-button>
<el-button type="danger" @click="delComment(item.id)" size="large" text>删除</el-button>
</el-icon> 0</span>
<el-button type="primary" @click="replay(item.createUser.nick, item.id, item.id)" size="large" text v-hasPer="['bbs:comment:add']">回复</el-button>
<el-button type="danger" @click="delComment(item.id)" size="large" text v-hasPer="['bbs:comment:remove']">删除</el-button>
<div v-show="replayId == item.id" class="input-reply">
<el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
<div class="btn-reply">
<el-button @click="addComment" type="primary">回复</el-button>
<el-button @click="addComment" type="primary" v-hasPer="['bbs:comment:add']">回复</el-button>
</div>
</div>
@@ -57,12 +58,12 @@
<span class="pointer"> <el-icon>
<Pointer />
</el-icon>0</span>
<el-button type="primary" @click="replay(children.createUser.nick, children.id, item.id)" size="large" text>回复</el-button>
<el-button type="danger" @click="delComment(children.id)" size="large" text>删除</el-button>
<el-button type="primary" @click="replay(children.createUser.nick, children.id, item.id)" size="large" text v-hasPer="['bbs:comment:add']">回复</el-button>
<el-button type="danger" @click="delComment(children.id)" size="large" text v-hasPer="['bbs:comment:remove']">删除</el-button>
<div v-show="replayId == children.id" class="input-reply">
<el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
<div class="btn-reply">
<el-button @click="addComment" type="primary">回复</el-button>
<el-button @click="addComment" type="primary" v-hasPer="['bbs:comment:add']">回复</el-button>
</div>
</div>

189
Yi.BBS.Vue3/src/components/DisscussCard.vue
View File

@@ -1,86 +1,152 @@
<template>
<el-badge :value="props.badge??''" class="box-card" >
<el-card shadow="never" :style="{'border-color':props.color}" >
<el-badge :value="props.badge ?? ''" class="box-card">
<el-card shadow="never" :style="{ 'border-color': discuss.color }">
<el-row>
<div class="card-header">
<AvatarInfo :userInfo="props.user" :time="props.creationTime"/>
</div>
<!-- 头部 -->
<el-col :span=24 class="card-header">
<AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
</el-col>
<!-- 身体 -->
<el-col :span=18 >
<el-row>
<el-col v-if="discuss.isBan" :span=24 class=" item item-title "> <el-link size="100" :underline="false"
style="color:#F56C6C;" >{{ discuss.title }}</el-link></el-col>
<el-col v-else :span=24 class=" item item-title "> <el-link size="100" :underline="false"
@click="enterDiscuss(discuss.id)">{{ discuss.title }}</el-link></el-col>
<el-col :span=24 class=" item item-description">{{ discuss.introduction }}</el-col>
<el-col :span=24 class=" item item-tag"><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col>
</el-row>
</el-col>
<el-col :span=6 style=" display: flex;justify-content: center;">
<el-image :preview-src-list="[getUrl(discuss.cover)]" v-if="discuss.cover" :src="getUrl(discuss.cover)" style="width: 100px;height: 100px;" />
</el-col>
<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">
<el-space :size="10" :spacer="spacer">
<div class="item-description">
{{ props.creationTime }}
</div>
<!-- 底部 -->
<el-col :span=24 class=" item item-bottom " style=" margin-bottom: 0;">
<el-space :size="10" :spacer="spacer">
<div class="item-description">
{{ discuss.creationTime }}
</div>
<el-button text @click="agree" >
<el-icon v-if="isAgree" color="#409EFF"><CircleCheckFilled /></el-icon>
<el-icon v-else color="#1E1E1E" ><Pointer /></el-icon> 点赞:{{ agreeNum??0 }}</el-button>
<el-button icon="Star" text>
收藏</el-button>
<el-button icon="View" text>
浏览数:{{ props.seeNum??0 }}</el-button>
<el-button text @click="agree">
<el-icon v-if="discuss.isAgree" color="#409EFF">
<CircleCheckFilled />
</el-icon>
<el-icon v-else color="#1E1E1E">
<Pointer />
</el-icon> 点赞:{{ discuss.agreeNum ?? 0 }}</el-button>
<el-button icon="Star" text>
收藏</el-button>
<el-button icon="View" text>
浏览数:{{ discuss.seeNum ?? 0 }}</el-button>
</el-space>
</div>
</el-card>
</el-badge>
</el-space>
</el-col>
</el-row>
</el-card>
</el-badge>
</template>
<script setup>
import { h, ref ,toRef,onMounted} from 'vue'
import { h, ref, toRef, onMounted ,reactive} from 'vue'
import { useRouter } from 'vue-router'
import AvatarInfo from './AvatarInfo.vue';
import {operate} from '@/apis/agreeApi'
const props = defineProps(['title','introduction','creationTime','id','user','badge',"color","seeNum","agreeNum","isAgree"])
import { operate } from '@/apis/agreeApi'
const props = defineProps(['discuss','badge'])
const discuss=reactive({
id:'',
title:"",
introduction:"",
creationTime:"",
user:{},
color:"",
seeNum:0,
agreeNum:0,
isAgree:false,
cover:"",
isBan:false,
isAgree:false,
agreeNum:0
})
const router = useRouter()
const spacer = h(ElDivider, { direction: 'vertical' })
const enterDiscuss = (id) => {
router.push(`/article/${id}`)
}
const agreeNum=ref(0)
const isAgree=ref(false)
//点赞操作
const agree=async ()=>{
const response= await operate(props.id)
const res=response.data;
//提示框，颜色区分
if(res.isAgree)
{
isAgree.value=true;
agreeNum.value+=1;
ElMessage({
message: res.message,
type: 'success',
})
}
else
{
isAgree.value=false;
agreeNum.value-=1;
ElMessage({
message: res.message,
type: 'warning',
})
}
const getUrl= (str)=>{
return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`
}
onMounted(()=>{
isAgree.value=props.isAgree;
agreeNum.value=props.agreeNum;
})
//点赞操作
const agree = async () => {
const response = await operate(discuss.id)
const res = response.data;
//提示框，颜色区分
if (res.isAgree) {
discuss.isAgree = true;
discuss.agreeNum += 1;
ElMessage({
message: res.message,
type: 'success',
})
}
else {
discuss.isAgree = false;
discuss.agreeNum-= 1;
ElMessage({
message: res.message,
type: 'warning',
})
}
}
onMounted(() => {
// id:'',
// title:"",
// introduction:"",
// creationTime:"",
// user:{},
// color:"",
// seeNum:0,
// agreeNum:0,
// isAgree:""
discuss.id=props.discuss.id;
discuss.title=props.discuss.title;
discuss.introduction=props.discuss.introduction;
discuss.creationTime=props.discuss.creationTime;
discuss.user=props.discuss.user;
discuss.color=props.discuss.color;
discuss.seeNum=props.discuss.seeNum;
discuss.isAgree=props.discuss.isAgree;
discuss.agreeNum=props.discuss.agreeNum;
discuss.isBan=props.discuss.isBan;
discuss.cover=props.discuss.cover;
discuss.value = props.isAgree;
discuss.value = props.agreeNum;
})
</script>
<style scoped>
.el-card{
border: 2px solid white
.el-card {
border: 2px solid white
}
.item-bottom .el-icon {
@@ -127,5 +193,4 @@ onMounted(()=>{
font-size: initial;
font-weight: 700;
}
</style>

51
Yi.BBS.Vue3/src/components/echars/VisitsLineChart.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div ref="VisitsLineChart"></div>
</template>
<script setup>
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { ref ,onMounted} from 'vue';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
const VisitsLineChart=ref(null);
onMounted(()=>{
var myChart = echarts.init(VisitsLineChart.value, null, {
width: 320,
height: 230
});
var option;
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [82, 93, 90, 93, 129, 133, 132],
type: 'line',
areaStyle: {}
}
]
};
option && myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
})
</script>