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>

29
Yi.BBS.Vue3/src/directive/permission/hasDiscussPermi.js Normal file
View File

@@ -0,0 +1,29 @@
/**
* v-hasDiscussPermi 操作权限处理
*/
import useUserStore from '@/stores/user'
//传一个值，一个主题id的创建者id，判断当前主题是否为自己创建，拥有*:*:*，直接跳过
export default {
mounted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
const permissions = useUserStore().permissions
const userId = useUserStore().id
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag==userId
})
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`请设置操作主题用户签值`)
}
}
}

3
Yi.BBS.Vue3/src/stores/user.js
View File

@@ -53,7 +53,8 @@ const useUserStore = defineStore('user',
// this.permissions=["*:*:*"]
this.name = user.nick
this.icon = avatar;
this.userName=user.userName
this.userName=user.userName;
this.id=user.id;
resolve(res)
}).catch(error => {
reject(error)

4
Yi.BBS.Vue3/src/utils/request.js
View File

@@ -39,7 +39,9 @@ const response=error.response.data;
//业务异常+应用异常，统一处理
switch(response.code)
{
case 401:
ElMessage.error('登录已过期')
break;
case 403:
ElMessage.error(response.message)
break;

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>