zhanghan11/eomksp
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

运维社区运维论坛贴子和发表帖子功能

Browse Source
This commit is contained in:
zhangjunwen 2024-04-30 15:58:05 +08:00
parent 6a9c997c5c
commit 38e9a410b0
10 changed files with 2737 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
inspur-service/inspur-community/pom.xml Normal file
View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>inspur</artifactId>
<groupId>com.inspur</groupId>
<version>3.8.7</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>inspur-community</artifactId>
<description>运维社区模块</description>
<dependencies>
<!-- 通用工具-->
<dependency>
<groupId>com.inspur</groupId>
<artifactId>inspur-common</artifactId>
</dependency>
<!-- 系统模块-->
<dependency>
<groupId>com.inspur</groupId>
<artifactId>inspur-system</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
</dependencies>
</project>

52
inspur-ui/src/api/community/info.js Normal file
View File

@ -0,0 +1,52 @@
import request from "@/utils/request";
// 查询社区帖子信息列表
export function listCommunityInfo(query) {
return request({
url: "/community/info/list",
method: "get",
params: query,
});
}
// 查询社区帖子信息详细
export function getCommunityInfo(postId) {
return request({
url: "/community/info/" + postId,
method: "get",
});
}
// 新增社区帖子信息
export function addCommunityInfo(data) {
return request({
url: "/community/info",
method: "post",
data: data,
});
}
// 修改社区帖子信息
export function updateCommunityInfo(data) {
return request({
url: "/community/info",
method: "put",
data: data,
});
}
//浏览量加一
export function addViews(postId) {
return request({
url: "/community/info/addViews/" + postId,
method: "put",
});
}
// 删除社区帖子信息
export function delCommunityInfo(postId) {
return request({
url: "/community/info/" + postId,
method: "delete",
});
}

3
inspur-ui/src/components/Emoji/emoji.json Normal file
View File

@ -0,0 +1,3 @@
{
"data": ["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠","💘","❤","💓","💔","💕","💖","💗","💙","💚","💛","💜","💝","💞","💟","❣","💪","👈","👉","☝","👆","👇","✌","✋","👌","👍","👎","✊","👊","👋","👏","👐","✍","🍇","🍈","🍉","🍊","🍋","🍌","🍍","🍎","🍏","🍐","🍑","🍒","🍓","🍅","🍆","🌽","🍄","🌰","🍞","🍖","🍗","🍔","🍟","🍕","🍳","🍲","🍱","🍘","🍙","🍚","🍛","🍜","🍝","🍠","🍢","🍣","🍤","🍥","🍡","🍦","🍧","🍨","🍩","🍪","🎂","🍰","🍫","🍬","🍭","🍮","🍯","🍼","☕","🍵","🍶","🍷","🍸","🍹","🍺","🍻","🍴","🌹","🍀","🍎","💰","📱","🌙","🍁","🍂","🍃","🌷","💎","🔪","🔫","🏀","⚽","⚡","👄","👍","🔥","🙈","🙉","🙊","🐵","🐒","🐶","🐕","🐩","🐺","🐱","😺","😸","😹","😻","😼","😽","🙀","😿","😾","🐈","🐯","🐅","🐆","🐴","🐎","🐮","🐂","🐃","🐄","🐷","🐖","🐗","🐽","🐏","🐑","🐐","🐪","🐫","🐘","🐭","🐁","🐀","🐹","🐰","🐇","🐻","🐨","🐼","🐾","🐔","🐓","🐣","🐤","🐥","🐦","🐧","🐸","🐊","🐢","🐍","🐲","🐉","🐳","🐋","🐬","🐟","🐠","🐡","🐙","🐚","🐌","🐛","🐜","🐝","🐞","🦋","😈","👿","👹","👺","💀","☠","👻","👽","👾","💣"]
}

68
inspur-ui/src/components/Emoji/index.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<el-popover placement="bottom" trigger="click" ref="popover"
v-model="popoverVisible">
<div class="emjioBox">
<ul class="emjio">
<li class="emjioLi" v-for="(item,i) in this.emojiList" :key="i" @click="selectEmit(item)">
{{item}}
</li>
</ul>
</div>
<el-link :underline="false" title="添加表情"
slot="reference">
😀
</el-link>
</el-popover>
</template>
<script>
import emojiList from './emoji.json';
export default {
name: 'emoji',
props: {},
data() {
return {
emojiList: [],
popoverVisible: false,
}
},
watch: {},
created() {
this.init();
},
methods: {
init() {
this.emojiList = emojiList.data
},
// 选择表情
selectEmit(item) {
this.$emit('output', item)
this.popoverVisible = false
}
},
beforeDestroy() {
}
}
</script>
<style lang="scss" scoped>
.emjioBox {
background: #fff;
height: 150px;
width: 300px;
overflow: auto;
text-align: left;
}
.emjioBox .emjio {
padding: 0;
}
.emjioBox li {
display: inline-block;
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
cursor: pointer;
}
</style>

204
inspur-ui/src/views/community/comment/InputComponent.vue Normal file
View File

@ -0,0 +1,204 @@
<template>
<transition name="fade">
<div
class="input-wrapper"
v-if="show"
>
<el-input
class="gray-bg-input"
maxlength="100"
show-word-limit
v-model="inputComment"
type="textarea"
:rows="3"
@focus="inputFocus"
@blur="blur"
:placeholder="name"
>
</el-input>
<!--enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp"-->
<transition name="fade2">
<div
class="btn-control"
v-show="controlShow"
>
<el-row>
<el-col
:span="12"
style="text-align: left"
>
<Emoji @output="output"></Emoji>
</el-col>
<el-col
:span="12"
style="text-align: right"
>
<span
class="cancel"
@click="cancel"
>取消</span>
<el-button
class="btn"
type="success"
round
@click="commitComment"
>确定</el-button>
</el-col>
</el-row>
</div>
</transition>
</div>
</transition>
</template>
<script>
import Emoji from "@/components/Emoji";
export default {
props: {
//控制整个组件是否显示
show: {
type: Boolean,
required: true,
},
//传入input框的默认值
value: {
type: String,
},
//传入input框的默认值
toComment: {
type: String,
},
//传入input框的默认值
toId: {
type: Number,
},
//类型，end(文章末尾处), comment(评论里),
type: {
type: String,
// default: 'comment'
},
},
components: { Emoji },
data() {
return {
inputComment: "",
name: "",
id: "",
//确定取消按钮是否显示
controlShow: false,
cursorIndexStart: null, //光标选中开始的位置
cursorIndexEnd: null, //光标选中结束的位置
};
},
computed: {},
methods: {
/**
* 点击取消按钮
*/
cancel() {
if (this.type === "end") {
this.controlShow = false;
}
this.$emit("cancel");
},
/**
* 提交评论
*/
commitComment() {
this.$emit("confirm", { inputComment: this.inputComment, id: this.id });
this.inputComment = "";
},
//input活得焦点时调用
inputFocus() {
// console.log("focus");
if (this.type === "end") {
this.controlShow = true;
}
},
blur(e) {
this.cursorIndexStart = e.srcElement.selectionStart; // 获取input输入框失去焦点时光标选中开始的位置
this.cursorIndexEnd = e.srcElement.selectionEnd; // 获取input输入框失去焦点时光标选中结束的位置
},
output(val) {
if (this.cursorIndexStart !== null && this.inputComment) {
//如果 文本域获取了焦点, 则在光标位置处插入对应字段内容
this.inputComment =
this.inputComment.substring(0, this.cursorIndexStart) +
val +
this.inputComment.substring(this.cursorIndexEnd);
} else {
// 如果 文本域未获取焦点, 则在字符串末尾处插入对应字段内容
this.inputComment = this.inputComment ? this.inputComment : "" + val;
}
},
},
watch: {
//监听toComment更新，赋值给name
toComment: function (newValue, oldValue) {
this.name = newValue;
this.inputComment = "";
},
toId: function (newValue, oldValue) {
this.id = newValue;
this.inputComment = "";
},
},
mounted() {
if (this.type === "end") {
this.controlShow = false;
} else {
this.controlShow = true;
}
// console.log(this.controlShow)
},
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.fade-enter-active,
fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.input-wrapper {
padding: 10px;
.fade2-enter-active,
fade2-leave-active {
transition: opacity 0.5s;
}
.fade2-enter,
.fade2-leave-to {
opacity: 0;
}
.gray-bg-input,
.el-input__inner {
/*background-color: #67C23A;*/
}
.btn-control {
justify-content: flex-end;
align-items: center;
padding-top: 10px;
.cancel {
font-size: 16px;
color: #606266;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #333;
}
}
.confirm {
font-size: 16px;
}
}
}
</style>

339
inspur-ui/src/views/community/comment/Ipcomment.vue Normal file
View File

@ -0,0 +1,339 @@
<template>
<el-container style="opacity: 0.9">
<div class="author">
<el-avatar
v-if="token==null"
icon="el-icon-user-solid"
size="large"
>
<!-- style="background-color: #666" -->
</el-avatar>
<el-avatar
v-else
:src="avatar"
size="large"
></el-avatar>
<div>
<div class="nkname">
<span
class="name"
v-if="token==null"
>匿名用户</span>
<span
class="name"
v-else
>{{name}} </span>
</div>
</div>
</div>
<el-form
:model="messageForm"
:rules="messageFormRules"
ref="messageFormRef"
>
<el-form-item prop="content">
<el-input
@blur="blur"
:rows="5"
v-model="messageForm.content"
type="textarea"
maxlength="100"
show-word-limit
placeholder="请输入你的评论"
></el-input>
</el-form-item>
<el-form-item style="text-align: right">
<el-row>
<el-col
:span="12"
style="text-align: left"
>
<Emoji @output="output"></Emoji>
</el-col>
<el-col
:span="12"
style="text-align: right"
>
<el-button
type="primary"
@click="publish"
>点击发表</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<el-divider v-if="messageList.length>0"><span style="color: #999;font-size: small;">最新评论</span></el-divider>
<comment
:comments="messageList"
@replyConfirm="commitComment"
></comment>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getMessageList"
/>
</el-container>
</template>
<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
// import {
// cmsListComment,
// cmsAddComment,
// } from "@/api/cms/comment"
import comment from "./comments.vue";
import Emoji from "@/components/Emoji";
export default {
name: "Ipcomment",
data() {
return {
picList: [],
editing: false,
messageList: [],
// userInfo: null,
message: {
userId: -1,
content: "",
},
messageForm: {},
// 总条数
total: 0,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
parentId: null,
mainId: null,
likeNum: null,
content: null,
type: null,
blogId: this.$route.query.id,
userId: null,
delFlag: null,
createBy: null,
},
messageFormRules: {
content: [
{
min: 0,
max: 100,
message: "评论内容不超过100字！",
},
],
},
cursorIndexStart: null, //光标选中开始的位置
cursorIndexEnd: null, //光标选中结束的位置
};
},
created() {
this.getMessageList();
this.reset();
},
updated: function () {
this.$nextTick(function () {
// 仅在整个视图都被渲染之后才会运行的代码
this.to();
});
},
computed: {
...mapGetters(["token", "avatar", "name"]),
},
components: {
comment,
Emoji,
},
methods: {
// 表单重置
reset() {
this.messageForm = {
id: null,
parentId: null,
mainId: null,
likeNum: null,
content: null,
type: null,
blogId: this.$route.query.id,
userId: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
this.resetForm("messageForm");
},
// 评论发表
publish() {
let token = getToken();
this.$refs.messageFormRef.validate(async (valid) => {
if (!valid) return;
if (
this.messageForm.content == null ||
this.messageForm.content == ""
) {
this.$modal.msgError("评论内容不能为空！");
return;
}
if (token == null || token == "") {
this.messageForm.createBy = "匿名用户";
this.messageForm.type = "0";
} else {
this.messageForm.createBy = this.$store.getters.name;
this.messageForm.type = "0";
}
cmsAddComment(this.messageForm).then((response) => {
this.$modal.msgSuccess("评论发表成功");
this.reset();
this.getMessageList();
});
});
},
/**
* 提交评论
*/
commitComment(value) {
this.reset();
this.messageForm.content = value.inputComment;
this.messageForm.parentId = value.id;
let token = getToken();
this.$refs.messageFormRef.validate(async (valid) => {
if (!valid) return;
if (
this.messageForm.content == null ||
this.messageForm.content == ""
) {
this.$modal.msgError("评论内容不能为空！");
return;
}
if (token == null || token == "") {
this.messageForm.createBy = "匿名用户";
this.messageForm.type = "1";
} else {
this.messageForm.createBy = this.$store.getters.name;
this.messageForm.type = "1";
}
cmsAddComment(this.messageForm).then((response) => {
this.$modal.msgSuccess("评论发表成功");
this.reset();
this.getMessageList();
});
});
},
// 获取评论列表
async getMessageList() {
let token = getToken();
if (token != null && token != "") {
this.queryParams.createBy = this.$store.getters.name;
}
// cmsListComment(this.queryParams).then((response) => {
// for (let i = 0; i < response.rows.length; i++) {
// let mesInfo = response.rows[i];
// if (mesInfo.avatar != null && mesInfo.avatar != "") {
// response.rows[i].avatar =
// process.env.VUE_APP_BASE_API + mesInfo.avatar;
// }
// if (mesInfo.children != null && mesInfo.children != "") {
// for (let j = 0; j < response.rows[i].children.length; j++) {
// let children = response.rows[i].children;
// if (children.avatar != null && children.avatar != "") {
// response.rows[i].children[j].avatar =
// process.env.VUE_APP_BASE_API + children.avatar;
// }
// }
// }
// }
// this.messageList = response.rows;
// this.total = response.total;
// });
},
blur(e) {
this.cursorIndexStart = e.srcElement.selectionStart; // 获取input输入框失去焦点时光标选中开始的位置
this.cursorIndexEnd = e.srcElement.selectionEnd; // 获取input输入框失去焦点时光标选中结束的位置
},
output(val) {
if (this.cursorIndexStart !== null && this.messageForm.content) {
//如果 文本域获取了焦点, 则在光标位置处插入对应字段内容
this.messageForm.content =
this.messageForm.content.substring(0, this.cursorIndexStart) +
val +
this.messageForm.content.substring(this.cursorIndexEnd);
} else {
// 如果 文本域未获取焦点, 则在字符串末尾处插入对应字段内容
this.messageForm.content = this.messageForm.content
? this.messageForm.content
: "" + val;
}
},
//跳转到相应位置
to() {
if (this.$route.query.commentId != null) {
var toEl = document.getElementById(this.$route.query.commentId);
if (toEl != null) {
if (toEl != null && toEl != "") {
// toEl 为指定跳转到该位置的DOM节点
let bridgeCms = toEl;
let bodyTop = document.body;
let heightCms = 0;
// 计算该 DOM 节点到 bodyTop 顶部距离
do {
heightCms += bridgeCms.offsetTop;
bridgeCms = bridgeCms.offsetParent;
} while (bridgeCms !== bodyTop);
// 滚动到指定位置
window.scrollTo({
top: heightCms,
behavior: "smooth",
});
}
}
}
},
},
};
</script>
<style scoped>
.el-container {
display: block;
}
.author {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
margin-bottom: 20px;
}
.comment {
border-bottom: 1px dashed #ccc;
margin: 30px 0;
display: flex;
}
.content {
text-align: left;
font-size: 14px;
flex-grow: 1;
}
.nkname {
margin: 10px;
max-width: 530px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.date {
color: #999;
margin-left: 10px;
}
.reply {
margin-left: 10px;
}
</style>

369
inspur-ui/src/views/community/comment/comments.vue Normal file
View File

@ -0,0 +1,369 @@
<!--评论模块-->
<template>
<div class="container">
<div class="comment" v-for="item in comments">
<div class="info" :id="item.id">
<el-avatar v-if="item.avatar!==''&&item.avatar!=null" :src="item.avatar"></el-avatar>
<el-avatar v-else icon="el-icon-user-solid"></el-avatar>
<div class="right">
<div class="name">{{item.createBy}}</div>
<div class="date">{{item.createTime}}</div>
</div>
</div>
<div class="content">{{item.content}}</div>
<div class="control">
<span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
<svg-icon icon-class="like" />
<span class="like-num" style="margin-left: 5px;">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
</span>
<span class="comment-reply" @click="showCommentInput(item)">
<svg-icon icon-class="comment" />
<span style="margin-left: 5px;">回复</span>
</span>
</div>
<div class="reply">
<div class="item" v-for="reply in item.children" :id="reply.id">
<div class="reply-content">
<span class="from-name">{{reply.createBy}}</span><span>: </span>
<span class="to-name" v-show="reply.parentId!=reply.mainId">@{{reply.pcreateBy}}</span>
<span v-show="reply.delFlag=='0'">{{reply.content}}</span>
<span v-show="reply.delFlag=='1'" style="color: #909399;">该评论已被删除！</span>
</div>
<div class="reply-bottom">
<span>{{reply.createTime}}</span>
<span class="reply-text" @click="showCommentInput(item, reply)">
<svg-icon icon-class="comment" />
<span style="margin-left: 5px;">回复</span>
</span>
</div>
</div>
<div class="write-reply" v-if="item.children!=null" @click="showCommentInput(item)">
<i class="el-icon-edit"></i>
<span class="add-comment">添加新评论</span>
</div>
<input-component :show="showItemId === item.id"
:value="inputComment"
:toComment="name"
:toId="id"
@cancel="cancelInput"
@confirm="commitComment">
</input-component>
<!--<transition name="fade">-->
<!--<div class="input-wrapper" v-if="showItemId === item.id">-->
<!--<el-input class="gray-bg-input"-->
<!--v-model="inputComment"-->
<!--type="textarea"-->
<!--:rows="3"-->
<!--autofocus-->
<!--placeholder="写下你的评论">-->
<!--</el-input>-->
<!--<div class="btn-control">-->
<!--<span class="cancel" @click="cancel">取消</span>-->
<!--<el-button class="btn" type="success" round @click="commitComment">确定</el-button>-->
<!--</div>-->
<!--</div>-->
<!--</transition>-->
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import InputComponent from './InputComponent'
import {
getToken
} from '@/utils/auth'
// import {
// addCmsCommentLike,
// delCmsCommentLike,
// } from "@/api/cms/comment"
export default {
props: {
comments: {
type: Array,
required: true
}
},
components: {
"input-component": InputComponent
},
data() {
return {
inputComment: '',
name: '',
id: null,
showItemId: '',
commentLikeForm: {},
}
},
computed: {},
methods: {
// 表单重置
reset() {
this.commentLikeForm = {
commentId: null,
userId: null,
likeNum: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("commentLikeForm");
},
/**
* 新增点赞
*/
addCommentLike(item){
let token = getToken();
this.reset();
if (token==null || token == '') {
this.commentLikeForm.createBy = "匿名用户"
this.commentLikeForm.commentId = item.id
this.commentLikeForm.likeNum = item.likeNum
} else {
this.commentLikeForm.createBy = this.$store.getters.name
this.commentLikeForm.commentId = item.id
this.commentLikeForm.likeNum = item.likeNum
}
addCmsCommentLike(this.commentLikeForm).then(response => {
this.reset();
});
},
/**
* 删除点赞
*/
delCommentLike(item){
let token = getToken();
this.reset();
if (token==null || token == '') {
this.commentLikeForm.createBy = "匿名用户"
this.commentLikeForm.commentId = item.id
this.commentLikeForm.likeNum = item.likeNum
} else {
this.commentLikeForm.createBy = this.$store.getters.name
this.commentLikeForm.commentId = item.id
this.commentLikeForm.likeNum = item.likeNum
}
delCmsCommentLike(this.commentLikeForm).then(response => {
this.reset();
});
},
/**
* 点赞
*/
likeClick(item) {
if (item.isLike === null) {
Vue.$set(item, "isLike", true);
item.likeNum++
this.addCommentLike(item)
} else {
if (item.isLike) {
item.likeNum--
this.delCommentLike(item)
} else {
item.likeNum++
this.addCommentLike(item)
}
item.isLike = !item.isLike;
}
},
/**
* 点击取消按钮
*/
cancelInput() {
this.showItemId = ''
},
/**
* 提交评论
*/
commitComment(value) {
this.$emit("replyConfirm", value)
// console.log(value);
},
/**
* 点击评论按钮显示输入框
* item: 当前大评论
* reply: 当前回复的评论
*/
showCommentInput(item, reply) {
if (reply) {
this.inputComment = ""
this.name = "回复@" + reply.createBy + ":"
this.id = reply.id
} else {
this.inputComment = ''
this.name = '写下你的评论'
this.id = item.id
}
this.showItemId = item.id
}
},
created() {
// console.log(this.comments)
}
}
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.container {
padding: 0 10px;
box-sizing: border-box;
.comment {
display: flex;
flex-direction: column;
padding: 10px;
border-bottom: 1px solid #F2F6FC;
.info {
display: flex;
align-items: center;
.right {
display: flex;
flex-direction: column;
margin-left: 10px;
.name {
font-size: 16px;
color: #303133;
margin-bottom: 5px;
font-weight: 500;
}
.date {
font-size: 12px;
color: #909399;
}
}
}
.content {
font-size: 16px;
color: #303133;
line-height: 20px;
padding: 10px 0;
}
.control {
display: flex;
align-items: center;
font-size: 14px;
color: #909399;
.like {
display: flex;
align-items: center;
margin-right: 20px;
cursor: pointer;
&.active, &:hover {
color: #409EFF;
}
.iconfont {
font-size: 14px;
margin-right: 5px;
}
}
.comment-reply {
display: flex;
align-items: center;
cursor: pointer;
&:hover {
color: #333;
}
.iconfont {
font-size: 16px;
margin-right: 5px;
}
}
}
.reply {
margin: 10px 0;
border-left: 2px solid #DCDFE6;
.item {
margin: 0 10px;
padding: 10px 0;
border-bottom: 1px dashed #EBEEF5;
.reply-content {
display: flex;
align-items: center;
font-size: 14px;
color: #303133;
.from-name {
color: #409EFF;
}
.to-name {
color: #409EFF;
margin-left: 5px;
margin-right: 5px;
}
}
.reply-bottom {
display: flex;
align-items: center;
margin-top: 6px;
font-size: 12px;
color: #909399;
.reply-text {
display: flex;
align-items: center;
margin-left: 10px;
cursor: pointer;
&:hover {
color: #333;
}
.icon-comment {
margin-right: 5px;
}
}
}
}
.write-reply {
display: flex;
align-items: center;
font-size: 14px;
color: #909399;
padding: 10px;
cursor: pointer;
&:hover {
color: #303133;
}
.el-icon-edit {
margin-right: 5px;
}
}
.fade-enter-active, fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.input-wrapper {
padding: 10px;
.gray-bg-input, .el-input__inner {
/*background-color: #67C23A;*/
}
.btn-control {
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 10px;
.cancel {
font-size: 16px;
color: #606266;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #333;
}
}
.confirm {
font-size: 16px;
}
}
}
}
}
}
</style>

437
inspur-ui/src/views/community/forum/forumDetails.vue Normal file
View File

@ -0,0 +1,437 @@
<template>
<el-row :gutter="20">
<el-col
:sm="3"
class="hidden-xs-only"
style="opacity:0;"
>左侧占位</el-col>
<el-col
:xs="24"
:sm="18"
>
<el-card
style="background-color: rgba(255, 255, 255,1)"
class="first-card"
>
<div
slot="header"
class="total blog-info"
>
<div class="user-info">
<i class="el-icon-user"></i>
<span class="header"> {{blog.userName}}</span>
</div>
<div class="blog-date">
<i class="el-icon-date"></i>
<span> {{blog.postTime}}</span>
</div>
<div class="blog-views">
<i class="el-icon-view"></i>
<span> {{blog.views}}</span>
</div>
</div>
<h2 class="blog-title header">{{blog.postTitle}}
<!-- <el-tag
size="mini"
v-for="tag in blog.types"
:key="tag.typeId"
type="info"
>{{tag.typeName}}</el-tag> -->
</h2>
<div style="display:flex">
<div class="tag-type"><template>
<dict-tag
:options="dict.type.post_type"
:value="blog.postType"
/>
</template></div>
<div class="tag-type"><template>
<dict-tag
:options="dict.type.community_field"
:value="blog.omField"
/>
</template></div>
<div class="tag-type"><template>
<dict-tag
:options="dict.type.community_industry"
:value="blog.omIndustry"
/>
</template></div>
</div>
<div
class="typo m-padded-lr-responsive m-padded-tb-large ql-editor"
v-html="blog.postContent"
></div>
<!-- <div class="tags">
<div
class="tag-item"
v-for="tag in blog.tags"
:key="tag.tagId"
>
<div class="sjx-outer">
<div class="sjx-inner"></div>
</div>
<div class="tag">
{{tag.tagName}}
</div>
</div>
</div> -->
<!-- <div class="appreciate">
<el-popover
placement="bottom"
title=""
width="300"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button class="zanshang" slot="reference" type="danger" round plain>赞赏</el-button>
</el-popover>
</div> -->
<!-- <el-table
:data="blog.blogFilesNew"
:border="true"
style="width: 99.99%;"
>
<el-table-column
align="center"
min-width="30%"
prop="remark"
label="附件"
>
<template slot-scope="scope">
<el-row>
<el-col :span="6">
<div class="blogFilesInfoName">名称：</div>
</el-col>
<el-col :span="18"><el-input
v-model="scope.row.fileOriginName"
disabled
/></el-col>
</el-row>
<el-row style="margin-top: 4px;">
<el-col :span="6">
<div class="blogFilesInfoName">大小：</div>
</el-col>
<el-col :span="18"><el-input
v-model="scope.row.fileSize"
disabled
/></el-col>
</el-row>
<el-row style="margin-top: 4px;">
<el-col :span="6">
<div class="blogFilesInfoName">类型：</div>
</el-col>
<el-col :span="18"><el-input
v-model="scope.row.fileSuffix"
disabled
/></el-col>
</el-row>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="50%"
prop="remark"
label="备注"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.remark"
type="textarea"
:rows="6"
size="small"
disabled
/>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="20%"
label="操作"
>
<template slot-scope="scope">
<el-button
size="mini"
plain
@click="handleDownload(scope.row)"
>下载</el-button>
</template>
</el-table-column>
</el-table> -->
<div class="author">
<ul>
<li>作者 {{blog.userName}}</li>
<li>发表时间 {{blog.postTime}}</li>
</ul>
</div>
<el-card
shadow="never"
class="comments"
>
<div
class="header"
style="padding-bottom: 10px;"
>
评论
</div>
<comment></comment>
</el-card>
</el-card>
</el-col>
<el-col
:xs="24"
:sm="0"
></el-col>
<el-col
:sm="3"
class="hidden-xs-only"
style="opacity:0;"
>右侧占位</el-col>
<!-- 设置底部距离的 -->
<el-backtop :bottom="60">
<div style="{
height: 50px;
width: 50px;
background-color: rgba(240,239,241,1);
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
border-radius:2px;
color: #1989fa;
}">
<svg-icon icon-class="top" />
</div>
</el-backtop>
</el-row>
</template>
<script>
import comment from "../comment/Ipcomment";
import { mapState } from "vuex";
import {
listCommunityInfo,
getCommunityInfo,
addCommunityInfo,
updateCommunityInfo,
CommunityInfo,
addViews,
} from "@/api/community/info";
export default {
dicts: ["post_type", "community_field", "community_industry"],
components: {
comment,
},
data() {
return {
blog: {},
commentForm: {
content: "",
},
};
},
watch: {
$route(to, from) {
this.$router.go(0);
},
},
created() {
this.getBlogInfomation();
},
computed: {
...mapState(["userInfo", "administrator"]),
},
methods: {
// 获取博客详情信息
async getBlogInfomation() {
// 增加阅读量
addViews(this.$route.query.id);
getCommunityInfo(this.$route.query.id).then((response) => {
this.blog = response.data;
});
},
// 文件下载处理
// handleDownload(row) {
// var name = row.fileOriginName;
// var url = row.filePath;
// var suffix = url.substring(url.lastIndexOf("."), url.length);
// const a = document.createElement("a");
// a.setAttribute("download", name);
// a.setAttribute("target", "_blank");
// a.setAttribute("href", process.env.VUE_APP_BASE_API + url);
// a.click();
// },
},
};
</script>
<style scoped>
.tag-type {
display: flex;
margin: 0 5px 0 5px;
}
.el-card {
width: 100%;
}
.el-popper /deep/ {
box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%);
}
.first-card {
border-radius: 10px 10px 10px 10px;
position: relative;
padding-bottom: 10px;
/*text-align: center;*/
font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei,
Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
hr.style-one {
width: 100%;
background-image: linear-gradient(
to right,
rgba(64, 158, 255, 0),
rgba(64, 158, 255, 0.75),
rgba(64, 158, 255, 0)
);
}
.forum-type-span {
font-size: medium;
color: #d56611;
}
.appreciate {
text-align: center;
}
.tags {
display: flex;
align-items: center;
margin-left: 50px;
margin-top: 20px;
}
.tag-item {
display: flex;
justify-content: space-around;
align-items: center;
margin-left: 10px;
margin-bottom: 20px;
}
.tag {
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
background-color: #ecf5ff;
border: 1px solid #409eff;
color: #409eff;
display: flex;
}
.sjx-outer {
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #409eff;
position: relative;
}
.sjx-inner {
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #ecf5ff;
top: -7px;
left: 1px;
position: absolute;
}
.author {
text-align: left;
background-color: #fcfff5;
box-shadow: 0 0 0 1px #a3c293 inset;
color: #2c662d;
width: 100%;
position: absolute;
left: 0;
margin: 20px 0;
padding: 20px 0;
font-size: small;
font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB,
Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
.comments {
margin-top: 150px;
box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
border: 1px solid rgba(34, 36, 38, 0.15);
border-top: 2px solid #409eff;
text-align: left;
}
.blog-title {
text-align: center;
}
.blog-info {
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.4);
font-size: 13px;
}
.blog-date {
margin-right: 5px;
float: right;
}
.blog-views {
margin-right: 5px;
float: right;
}
.user-info {
justify-content: space-around;
align-items: center;
margin-right: 15px;
float: left;
}
.header {
text-decoration: none;
color: #3a8ee6;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.tags {
margin-left: 0;
margin-top: 20px;
}
hr {
display: none;
}
.comment-content {
font-size: 12px !important;
}
}
@media only screen and (max-width: 480px) {
h2 {
font-weight: normal;
}
code,
pre {
font-size: 13px !important;
}
}
.blogFilesInfoName {
text-align: center;
padding-top: 5px;
}
</style>

306
inspur-ui/src/views/community/forum/forumForm.vue Normal file
View File

@ -0,0 +1,306 @@
<template>
<div class="app-container">
<div>
<div style="text-align:center;margin-bottom:5px">
<i
class="el-icon-chat-line-round"
style="color:blue"
></i>
<span style="font-weight:bold">发表新贴</span>
</div>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
>
<el-form-item
label="标题"
prop="postTitle"
>
<el-row>
<el-col :span="24">
<el-input
v-model="form.postTitle"
placeholder="请输入标题"
/>
</el-col>
</el-row>
</el-form-item>
<!-- <el-row>
<el-col :span="8">
<el-form-item label="首图">
<el-radio-group v-model="form.blogPicType">
<el-radio-button label="0">地址</el-radio-button>
<el-radio-button label="1">上传</el-radio-button>
</el-radio-group>
<div
v-show="form.blogPicType == '0'"
class="tabBlock"
>
<el-input
v-model="form.blogPicLink"
placeholder="请输入图片地址 https://"
style="margin-bottom: 10px;"
/>
<el-image
:src="form.blogPicLink"
:preview-src-list="[form.blogPicLink]"
fit="cover"
class="blogPic"
>
<div
slot="error"
class="image-slot"
>
<el-image
src="/errorImg.jpg"
fit="cover"
class="blogPic"
></el-image>
</div>
</el-image>
</div>
<div
v-show="form.blogPicType == '1'"
class="tabBlock"
>
<imageUpload
v-model="form.blogPic"
:limit="1"
/>
</div>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="简介">
<el-input
type="textarea"
v-model="form.blogDesc"
:autosize="{ minRows: 7, maxRows: 7}"
maxlength="50"
show-word-limit
placeholder="请输入简介"
/>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item
prop="postContent"
label="内容"
>
<Editor
v-model="form.postContent"
type="base64"
:min-height="192"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item
prop="postType"
label="帖子类型"
>
<el-select
v-model="form.postType"
placeholder="请选择"
filterable
clearable
>
<el-option
v-for="item in dict.type.post_type"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="omField"
label="运维领域"
>
<el-select
v-model="form.omField"
placeholder="请选择"
clearable
>
<el-option
v-for="item in dict.type.community_field"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="omIndustry"
label="运维行业"
>
<el-select
v-model="form.omIndustry"
placeholder="请选择"
clearable
>
<el-option
v-for="item in dict.type.community_industry"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div style="text-align:right">
<el-button
type="primary"
@click="releaseForm"
>发 表</el-button>
</div>
</div>
</template>
<script>
import {
listCommunityInfo,
getCommunityInfo,
addCommunityInfo,
updateCommunityInfo,
CommunityInfo,
} from "@/api/community/info";
export default {
name: "forum",
dicts: ["post_type", "community_field", "community_industry"],
data() {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 文章管理表格数据
blogList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
postType: null,
omField: null,
omIndustry: null,
postTitle: null,
postContent: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
postTitle: [
{
required: true,
message: "标题不能为空",
trigger: "blur",
},
],
postContent: [
{
required: true,
message: "内容不能为空",
trigger: "blur",
},
],
postType: [
{
required: true,
message: "帖子类型不能为空",
trigger: "change",
},
],
omField: [
{
required: true,
message: "运维行业不能为空",
trigger: "change",
},
],
omIndustry: [
{
required: true,
message: "运维领域不能为空",
trigger: "change",
},
],
},
// 类型选项
typeOptions: [],
// 标签选项
tagOptions: [],
};
},
created() {},
methods: {
validate(callback) {
//这个form是子组件内部 el-form 的 ref="contentForm"
this.$refs.form.validate((valid) => {
callback(valid);
});
},
/** 查询文章管理列表 */
getList() {},
/**发布帖子 */
releaseForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
addCommunityInfo(this.form).then((response) => {
this.$emit("addSucess", response.data);
this.reset();
});
}
});
},
// 取消按钮
cancel() {},
// 表单重置
reset() {
this.form = {};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
background-color: #f6f6f6;
}
</style>

927
inspur-ui/src/views/community/forum/index.vue Normal file
View File

@ -0,0 +1,927 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col
:sm="2"
class="hidden-xs-only"
style="opacity:0;"
>左侧占位</el-col>
<el-col
:xs="24"
:sm="15"
>
<el-card
style="background-color: rgba(255,255,255,0.9)"
class="left-item"
>
<div
slot="header"
class="total"
>
<div class="titleIndex">
<i
v-if="selected"
class="el-icon-back"
@click="updateForumList"
></i>
<span>{{selectMethod}}</span>
</div>
<!-- <span>共 <span style="color: #3a8ee6; font-size: 20px">{{totalcount}}</span> 篇</span> -->
</div>
<el-row
type="flex"
align="middle"
style="flex-wrap: wrap"
:gutter="20"
v-for="forum in forumList"
:key="forum.postId"
shadow="never"
class="forum-content"
>
<div @click="getForumInfo(forum.postId)">
<!-- <el-col
class="img"
:xs="24"
:sm="6"
>
<el-image
v-if="forum.blogPicType == '0'"
lazy
:src="forum.blogPicLink"
>
<div
slot="error"
class="image-slot"
>
<el-image
src="/errorImg.jpg"
fit="cover"
class="blogPic"
>></el-image>
</div>
</el-image>
<el-image
v-if="forum.blogPicType == '1'"
lazy
:src="forum.blogPic"
></el-image>
</el-col> -->
<el-col
:xs="24"
:sm="18"
style="padding-left: 10px;padding-right: 10px;margin-bottom: 5px;margin-top: -5px;"
>
<div>
<h3><svg-icon
icon-class="Topping"
v-show="forum.top==1"
/> {{forum.postTitle}}</h3>
<!-- <div style="margin-bottom: 10px;">
<span style="color: rgba(0, 0, 0, .4);"> {{forum.blogDesc}}</span>
</div> -->
<!-- <div style="margin-bottom: 10px;">
<el-tag
effect="plain"
size="mini"
v-for="tag in forum.tags"
:key="tag.tagId"
type="success"
>
{{tag.tagName}}
</el-tag>
</div> -->
<div class="forum-info">
<div class="user-info">
<i class="el-icon-user"></i>
<span class="header">{{ forum.userName}}</span>
</div>
<div class="forum-date">
<i class="el-icon-date"></i>
<span> {{forum.postTime}}</span>
</div>
<div class="forum-views">
<i class="el-icon-view"></i>
<span> {{forum.views}}</span>
</div>
<!-- <div class="forum-type">
<el-tag
size="mini"
v-for="tag in forum.types"
:key="tag.typeId"
type="info"
>
{{tag.typeName}}
</el-tag>
</div> -->
</div>
</div>
</el-col>
</div>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
@pagination="getForumList"
style="margin-bottom: 30px;float: right;margin-right: 10px;"
/>
</el-card>
<forumForm
ref="form"
@addSucess="releaseSuc"
></forumForm>
</el-col>
<el-col
:xs="24"
:sm="5"
>
<el-card
style="background-color: rgba(255,255,255,0.9)"
class=" right-item"
>
<div
slot="header"
class="attributes"
>
<b>帖子热度榜</b>
</div>
<ul
class=" forum-type-ul"
style="margin-top: 5px;"
>
<li
class=" forum-type-li"
v-for="cmsType in typeList"
:key="cmsType.typeId"
@click="selectType(cmsType)"
:class="cmsType.typeId === typeId? 'activeType':''"
>
<div style="display: flex;align-items: center">
<el-image
style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px"
lazy
:src="cmsType.typePicLink"
v-show="cmsType.typePicType == '0'"
>
<div
slot="error"
style="width: 28px;height: 28px; border-radius: 50%;"
>
<i
class="el-icon-collection"
style="margin-left:6px;"
></i>
</div>
</el-image>
<el-image
style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px"
lazy
:src="cmsType.typePic"
v-show="cmsType.typePicType == '1'"
>
<div
slot="error"
style="width: 28px;height: 28px; border-radius: 50%;"
>
<i
class="el-icon-collection"
style="margin-left:6px;"
></i>
</div>
</el-image>
{{cmsType.typeName}}
</div>
<div>{{cmsType.blogNum}}</div>
</li>
</ul>
<div
class="more"
@click="dealType"
>
<i
v-if="moreType"
class="el-icon-arrow-down"
></i>
<i
v-else
class="el-icon-arrow-up"
></i>
</div>
</el-card>
<el-card
style="background-color: rgba(255,255,255,0.9)"
class=" right-item"
>
<div
slot="header"
class="attributes"
>
<b>标签</b>
</div>
<div class="tags">
<div
class=" tag-item"
v-for="tag in tagList"
:key="tag.tagId"
@click="selectTag(tag)"
:class="tag.tagId === tagId? 'activeTag':''"
>
<div class="sjx-outer">
<div class="sjx-inner"></div>
</div>
<div class="tag">
{{tag.tagName}}
{{tag.blogNum}}
</div>
</div>
</div>
<div
class="more"
@click="dealTag"
>
<i
v-if="moreTag"
class="el-icon-arrow-down"
></i>
<i
v-else
class="el-icon-arrow-up"
></i>
</div>
</el-card>
<el-card
style="background-color: rgba(255,255,255,0.9)"
class=" right-item"
>
<div
slot="header"
class="attributes"
>
<b>最新推荐</b>
</div>
<div
class=" recommend-forum l-text"
v-for="forum in recommendList"
:key="forum.id"
@click="getForumInfo(forum.postId)"
>
<a class="recommend-a">{{forum.title}}</a>
</div>
</el-card>
</el-col>
<el-col
:sm="2"
class="hidden-xs-only"
style="opacity:0;"
>右侧占位</el-col>
</el-row>
</div>
</template>
<script>
import "element-ui/lib/theme-chalk/display.css";
import forumForm from "./forumForm.vue";
import { Loading } from "element-ui";
import {
listCommunityInfo,
getCommunityInfo,
addCommunityInfo,
updateCommunityInfo,
CommunityInfo,
addViews,
} from "@/api/community/info";
export default {
name: "forum",
components: {
forumForm,
},
data() {
return {
totalcount: 100,
queryInfo: {
query: "",
pagenum: 1,
pagesize: 8,
},
intro: "",
forumList: [],
typeList: [],
tagList: [],
fullTypeList: [],
fullTagList: [],
recommendList: [],
selectMethod: "全部帖子",
typeId: -1,
tagId: -1,
selected: false,
moreType: true,
moreTag: true,
value: new Date(),
timer: null,
start: false,
screenWidth: document.documentElement.clientWidth, //实时屏幕宽度
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 总条数
total: 0,
};
},
computed: {
pagSmall() {
return this.screenWidth <= 768;
},
// 计算分页栏样式
pagLayout() {
if (this.screenWidth < 768) {
return "prev, pager, next";
} else {
return "total, prev, pager, next, jumper";
}
},
},
created() {
window.addEventListener("resize", this.screenAdapter);
},
mounted() {
this.getForumList();
// this.$nextTick(function () {
// // 仅在整个视图都被渲染之后才会运行的代码
// this.getTypeList()
// this.getForumList();
// this.getTagList()
// this.getRecommendList()
// let str = '这是我的个人博客、会分享关于编程，开发以及其他方面的一些内容，希望可以对您有所帮助...';
// let idx = 0;
// let that = this
// let timer = setTimeout(function fn() {
// // console.log(this.intro)
// that.intro = that.intro + str.substring(idx, idx + 1)
// idx++
// if (idx > str.length) {
// that.intro = ''
// idx = 0
// }
// setTimeout(fn, 200)
// }, 2000)
// this.screenWidth = document.documentElement.clientWidth
// })
},
methods: {
releaseSuc() {
this.$modal.msgSuccess("发表成功");
// this.getForumList();\
window.location.reload();
},
/** 获取博客列表 */
getForumList() {
let loadingInstance = Loading.service({
target: ".left-item",
});
listCommunityInfo(this.queryParams)
.then((response) => {
this.forumList = response.rows;
this.total = response.total;
})
.finally(() => {
loadingInstance.close();
});
},
// 开始进入主页
startRead() {
this.$nextTick(() => {
document.getElementById("index").scrollIntoView({
behavior: "smooth",
block: "start",
// inline: 'nearest'
});
});
},
compare(property) {
return function (a, b) {
let value1 = a[property].length;
let value2 = b[property].length;
return value2 - value1;
};
},
// 获取推荐博客列表
async getRecommendList() {
cmsListRecommend(this.queryParams).then((response) => {
const { data: res } = response;
this.recommendList = response.rows.slice(0, 4);
this.total = response.total;
});
},
// 获取博客类型列表
async getTypeList() {
getForumDetail(this.$route.query.id).then((response) => {
for (let i = 0; i < response.types.length; i++) {
let typeInfo = response.types[i];
if (typeInfo.typePic.length > 0) {
response.types[i].typePic =
process.env.VUE_APP_BASE_API + typeInfo.typePic;
}
}
const { data: res } = response;
this.fullTypeList = response.types;
this.typeList = response.types.slice(0, 4);
});
},
// 获取博客标签列表
async getTagList() {
getForumDetail(this.$route.query.id).then((response) => {
const { data: res } = response;
this.fullTagList = response.tags;
this.tagList = response.tags.slice(0, 6);
});
},
// 跳转到博客详情页
getForumInfo(postId) {
let routeUrl = this.$router.push({
path: "/community/forumDetails",
query: {
id: postId,
},
});
},
// 修改当前页码
handleCurrentChange(newSize) {
this.queryInfo.pagenum = newSize;
this.getForumList();
},
// 修改当前页大小
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize;
},
// 按分类筛选博客
async selectType(cmsType) {
let loadingInstance = Loading.service({
target: ".left-item",
});
this.typeId = cmsType.typeId;
cmsListByTypeId(this.typeId)
.then((response) => {
this.blogList = this.picSrc(response.rows);
this.total = response.total;
// this.totalcount = res.data.totalElements
this.selectMethod = "分类: " + cmsType.typeName;
this.selected = true;
})
.finally(() => {
loadingInstance.close();
});
},
// 按标签筛选博客
async selectTag(tag) {
let loadingInstance = Loading.service({
target: ".left-item",
});
this.tagId = tag.tagId;
cmsListByTagId(this.tagId)
.then((response) => {
this.blogList = this.picSrc(response.rows);
this.total = response.total;
// this.totalcount = res.data.totalElements
this.selectMethod = "标签: " + tag.tagName;
this.selected = true;
})
.finally(() => {
loadingInstance.close();
});
},
// 更新博客列表
updateForumList() {
this.selected = false;
this.typeId = -1;
this.tagId = -1;
this.selectMethod = "全部博客";
this.getForumList();
},
// 得到所有的标签
async getFullTagList() {
this.tagList = this.fullTagList;
},
async dealType() {
if (this.moreType) {
this.typeList = this.fullTypeList;
} else {
this.typeList = this.fullTypeList.slice(0, 4);
}
this.moreType = !this.moreType;
},
async dealTag() {
if (this.moreTag) {
await this.getFullTagList();
} else {
this.tagList = this.fullTagList.slice(0, 6);
}
this.moreTag = !this.moreTag;
},
// 屏幕尺寸变化的监听函数
screenAdapter() {
this.screenWidth = document.documentElement.clientWidth;
},
},
};
</script>
<style scoped>
/* .app-container {
background-image: url("../../../assets/images/login-background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: 0px;
padding: 0px;
width: 100%;
height: 120vh;
position: fixed;
} */
.welcome {
background-color: rgba(0, 0, 0, 0.1);
border: none;
height: 90%;
position: relative;
}
.border {
width: 812px;
height: 112px;
position: absolute;
top: -6px;
left: -6px;
border: 3px solid white;
box-sizing: border-box;
animation: clipMe 5s linear infinite;
}
.tit {
box-sizing: border-box;
position: relative;
width: 800px;
height: 100px;
line-height: 100px;
box-shadow: inset 0 0 0 1px white;
margin: 40px auto;
margin-top: 80px;
color: white;
text-align: center;
font-size: 50px;
font-weight: normal;
letter-spacing: 10px;
}
.intro {
letter-spacing: 5px;
line-height: 50px;
width: 80%;
margin: 0 auto;
text-align: center;
font-weight: normal;
color: white;
}
.down {
animation: bounce 2s infinite;
animation-duration: 3s;
font-size: 25px;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
}
.down:hover {
animation: none;
cursor: pointer;
box-shadow: 0 0 20px 0 white;
transition: all 0.2s;
}
.left-item .pagination-container {
background: rgb(255, 255, 255, 0);
}
@keyframes clipMe {
0%,
100% {
clip: rect(0px, 806px, 6px, 0px);
}
25% {
clip: rect(0px, 6px, 112px, 0px);
}
50% {
clip: rect(112px, 812px, 112px, 0px);
}
75% {
clip: rect(0px, 812px, 112px, 806px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translate(-50%, 0);
}
40% {
transform: translate(-50%, -30px);
}
60% {
transform: translate(-50%, -15px);
}
}
.forum-type-ul {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 0;
border-radius: 5px;
}
.el-pagination {
padding-bottom: 20px;
}
.el-card /deep/ .el-card__body {
padding: 0;
}
.right-item {
margin-bottom: 20px;
}
.forum-type-li:first-child {
border-top: 1px solid rgba(179, 216, 255, 0.5);
}
.forum-type-li {
border-bottom: 1px solid rgba(179, 216, 255, 0.5);
}
.more {
text-align: center;
color: #3a8ee6;
padding: 8px;
}
.more:hover {
cursor: pointer;
color: #3a8ee6;
}
.forum-type-li:hover {
background-color: rgba(213, 255, 255, 0.3);
cursor: pointer;
}
.activeType {
background-color: rgba(58, 142, 230, 0.3);
cursor: pointer;
}
.tags {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 15px 13px 0;
border-bottom: 1px solid rgba(179, 216, 255, 0.5);
}
.tag-item {
display: flex;
justify-content: space-around;
align-items: center;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
box-sizing: border-box;
}
.tag {
background-color: #ecf5ff;
box-sizing: border-box;
display: inline-block;
height: 22px;
padding: 0 10px;
line-height: 22px;
font-size: 10px;
color: #409eff;
border-radius: 4px;
white-space: nowrap;
border: 1px solid #409eff;
transition: 0.2s;
}
.sjx-outer {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #409eff;
position: relative;
transition: 0.2s;
}
.sjx-inner {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #ecf5ff;
top: -6px;
left: 1px;
position: absolute;
transition: 0.2s;
}
.tag-item:hover,
.activeTag {
box-sizing: border-box;
}
.tag {
color: white;
background-color: #409eff;
cursor: pointer;
}
.sjx-inner {
border-right: 6px solid #409eff;
}
.forum-type-li {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 40px;
}
.recommend-forum {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 0;
border-radius: 5px;
}
.recommend-a {
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
line-height: 40px;
display: block;
text-decoration: none;
color: black;
}
.recommend-a:hover {
color: #3a8ee6;
}
.total {
display: flex;
justify-content: space-between;
align-items: center;
font-size: larger;
font-weight: bold;
}
.titleIndex {
display: flex;
align-items: center;
}
.el-icon-back {
font-weight: bolder;
color: #3a8ee6;
margin-right: 10px;
}
.el-icon-back:hover {
cursor: pointer;
}
.forum-content:hover {
border-left: 5px solid #3a8ee6;
border-right: 5px solid #3a8ee6;
background-color: rgba(58, 142, 230, 0.3);
cursor: pointer;
}
.forum-content {
padding: 10px;
height: auto;
border-bottom: 1px solid rgb(199, 163, 92);
/*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
transition: 0.3s;
}
.el-image {
border-radius: 5px;
box-sizing: border-box;
flex-shrink: 0;
}
.forum-info {
display: flex;
justify-content: space-around;
align-items: center;
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
}
.user-info {
display: flex;
align-items: center;
margin-right: 15px;
float: left;
}
.header {
display: flex;
align-items: center;
text-decoration: none;
color: #3a8ee6;
font-weight: bold;
word-break: keep-all;
}
.forum-date {
display: flex;
align-items: center;
float: right;
margin-left: 5px;
width: 200px;
}
.forum-views {
display: flex;
align-items: center;
float: right;
margin-left: 5px;
width: 180px;
}
.forum-type {
float: right;
margin-left: auto;
}
.forum-tag {
float: right;
margin-left: auto;
}
@media screen and (max-width: 768px) {
/* .forum-date {
display: none;
} */
.welcome {
width: 100%;
}
.border {
display: none;
}
.tit {
font-size: 2rem;
width: 100%;
line-height: 50px;
letter-spacing: 2px;
height: auto;
}
.intro {
font-size: 1rem;
line-height: 30px;
}
.el-pagination {
width: 100%;
}
}
</style>