测试
This commit is contained in:
parent
7d2b387aee
commit
4590b3b787
11
public/images/delete.svg
Normal file
11
public/images/delete.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="white" fill-rule="nonzero">
|
||||
<rect opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M12.5146059,5.54590692 L12.5146059,12.5459069 C12.5146059,13.6504764 11.6191754,14.5459069 10.5146059,14.5459069 L5.51460589,14.5459069 C4.41003639,14.5459069 3.51460589,13.6504764 3.51460589,12.5459069 L3.51460589,5.54590692" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<line x1="6" y1="1.85714286" x2="9.5" y2="1.85714286" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="1.88309006" y1="3.6900534" x2="14.0338156" y2="3.6900534" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="5.71428571" y1="7.63739248" x2="5.71428571" y2="11.230495" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="8.01783774" y1="7.62825381" x2="8.01783774" y2="11.2213564" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="10.3396003" y1="7.63344062" x2="10.3396003" y2="11.2265432" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -1,64 +1,140 @@
|
||||
<script setup>
|
||||
|
||||
import Message from "./Message.vue";
|
||||
import {ref} from "vue";
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import api from "../../../utils/axios.js";
|
||||
import store from "../../../store/index.js";
|
||||
import swal from "../../../utils/sweetalert.js";
|
||||
import AuthService from "../../../../services/auth.js";
|
||||
|
||||
const messages = ref(store.state.demos.board?.messages || []);
|
||||
const amount = ref(store.state.demos.board?.amount || 0);
|
||||
const currentPage = ref(store.state.demos.board?.currentPage || 1);
|
||||
|
||||
const pageLoading = ref(false);
|
||||
const sendCD = ref(store.state.demos.board?.sendCD || 0);
|
||||
|
||||
const userInput = ref('');
|
||||
|
||||
async function refreshBoard(page, pageSize) {
|
||||
if (!page) {
|
||||
page = currentPage.value;
|
||||
}
|
||||
if (!pageSize) {
|
||||
pageSize = 10;
|
||||
}
|
||||
try {
|
||||
await api.post(`/viewboard`, {
|
||||
PAGE: page,
|
||||
PAGE_SIZE: pageSize
|
||||
}).then(res => {
|
||||
messages.value = res.data;
|
||||
amount.value = Math.ceil(res.amount / pageSize);
|
||||
store.commit('setDemoValue', {demo: 'board', value: {messages: messages.value}});
|
||||
store.commit('setDemoValue', {demo: 'board', value: {amount: amount.value}});
|
||||
})
|
||||
} catch {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
async function goPage(page) {
|
||||
const messageTemp = messages.value
|
||||
pageLoading.value = true;
|
||||
currentPage.value = page;
|
||||
if (await refreshBoard(page) === 0) {
|
||||
store.commit('setDemoValue', {demo: 'board', value: {currentPage: page}});
|
||||
pageLoading.value = false;
|
||||
return;
|
||||
}
|
||||
swal.tip('error', '加载留言板失败...')
|
||||
messages.value = messageTemp;
|
||||
pageLoading.value = false;
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
sendCD.value = 'wait';
|
||||
try {
|
||||
const response = await api.post('/postmessage', {
|
||||
TOKEN: AuthService.getToken(),
|
||||
CONTENT: userInput.value
|
||||
});
|
||||
if (response.code !== 0) {
|
||||
swal.tip('error', '发送失败');
|
||||
return;
|
||||
}
|
||||
userInput.value = '';
|
||||
sendCD.value = 5;
|
||||
await refreshBoard();
|
||||
return;
|
||||
} catch {
|
||||
swal.tip('error', '网络连接错误...');
|
||||
}
|
||||
sendCD.value = 0;
|
||||
}
|
||||
|
||||
let interval = null; // 定时器引用
|
||||
function startCountdown() {
|
||||
if (interval) clearInterval(interval); // 避免重复创建定时器
|
||||
|
||||
interval = setInterval(() => {
|
||||
if (sendCD.value > 0) {
|
||||
sendCD.value--;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 监听 sendCD 变量
|
||||
watch(sendCD, (newValue) => {
|
||||
if (newValue > 0 && !interval) {
|
||||
startCountdown();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshBoard();
|
||||
})
|
||||
|
||||
const messages = ref([{
|
||||
"content": "1",
|
||||
"date": "2025-02-09 15:06:03",
|
||||
"id": 50,
|
||||
"is_deleted": 0,
|
||||
"name": "username",
|
||||
"uid": 22
|
||||
},
|
||||
{
|
||||
"content": "<#ffff00>aaaaaaaaaaaa",
|
||||
"date": "2024-10-24 15:02:43",
|
||||
"id": 49,
|
||||
"is_deleted": 0,
|
||||
"name": "guarp001",
|
||||
"uid": 23
|
||||
},
|
||||
{
|
||||
"content": "99",
|
||||
"date": "2024-10-14 15:15:10",
|
||||
"id": 48,
|
||||
"is_deleted": 1,
|
||||
"name": "guarp001",
|
||||
"uid": 23
|
||||
},
|
||||
{
|
||||
"content": "9",
|
||||
"date": "2024-10-14 15:15:00",
|
||||
"id": 47,
|
||||
"is_deleted": 1,
|
||||
"name": "guarp001",
|
||||
"uid": 23
|
||||
},
|
||||
{
|
||||
"content": "88",
|
||||
"date": "2024-10-14 15:14:36",
|
||||
"id": 46,
|
||||
"is_deleted": 0,
|
||||
"name": "guarp001",
|
||||
"uid": 23
|
||||
},
|
||||
{
|
||||
"content": "88",
|
||||
"date": "2024-10-14 15:14:36",
|
||||
"id": 45,
|
||||
"is_deleted": 0,
|
||||
"name": "guarp001",
|
||||
"uid": 23
|
||||
},]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="board-body">
|
||||
<div class="message-container">
|
||||
<Message v-for="msg in messages" :message="msg"/>
|
||||
<div class="message-container" :class="{loading: pageLoading}">
|
||||
<Message v-for="msg in messages" :message="msg" @refresh-board="refreshBoard"/>
|
||||
<div v-if="messages?.length === 0">正在加载...</div>
|
||||
</div>
|
||||
<div class="paging-container">
|
||||
<div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)">1</div>
|
||||
<span v-if="currentPage > 5">...</span>
|
||||
<div class="page-btn" v-for="index in ((a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i))
|
||||
(currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 3):amount-1)"
|
||||
@click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
|
||||
</div>
|
||||
<span v-if="currentPage < amount - 5">...</span>
|
||||
<div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}">{{ amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sender-container">
|
||||
<div class="sender-tips">
|
||||
<img :src="store.getters.profileImage" alt="Avatar">
|
||||
<div class="text">
|
||||
<div>{{ store.state.userInfo.username }}</div>
|
||||
<div><{{ store.state.userInfo.role_id === 1 ? '管理员' : '普通用户' }}></div>
|
||||
</div>
|
||||
<div class="refresh-btn">
|
||||
<button @click="refreshBoard()">刷新</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sender-input">
|
||||
<input class="message-input" v-model="userInput">
|
||||
<button class="send-button" @click="sendMessage" :disabled="sendCD !== 0">{{ sendCD === 0 ? '发送' : sendCD === 'wait' ? '稍等' : `${sendCD} 秒` }}</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -69,11 +145,14 @@ const messages = ref([{
|
||||
align-items: center;
|
||||
justify-items: flex-start;
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
height: calc(100vh - 130px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.board-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
@ -83,12 +162,137 @@ const messages = ref([{
|
||||
border: cyan solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .board-body {
|
||||
border: #b2b2b2 solid 1px;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.message-container.loading {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.paging-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: black;
|
||||
//width: 25px;
|
||||
height: 25px;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
border: cyan solid 1px;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: cyan;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sender-container {
|
||||
margin: 20px;
|
||||
background-color: #212121;
|
||||
border: cyan solid 1px;
|
||||
border-radius: 10px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sender-tips {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sender-tips img {
|
||||
width: 50px;
|
||||
margin: 15px 15px 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sender-tips .text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.refresh-btn button {
|
||||
background-color: #4f4f4f;
|
||||
color: cyan;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sender-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 97%;
|
||||
gap: 10px;
|
||||
margin: 15px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.message-input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 发送按钮样式 */
|
||||
.send-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
/* 鼠标悬停时的按钮样式 */
|
||||
.send-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.send-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.send-button:disabled {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,38 @@
|
||||
<script setup>
|
||||
|
||||
import {setRandomBGCL} from "../../../utils/randomBGCL.js";
|
||||
import {getRandomIMG} from "../../../utils/randomIMG.js";
|
||||
import swal from "../../../utils/sweetalert.js";
|
||||
import store from "../../../store/index.js";
|
||||
import api from "../../../utils/axios.js";
|
||||
import AuthService from "../../../../services/auth.js";
|
||||
|
||||
defineProps({
|
||||
message: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['refresh-board']);
|
||||
async function deleteMessage(id, message) {
|
||||
swal.window('info', '确定要删除词条评论吗？', `《${message}》`, '确定', '取消').then(async (res) => {
|
||||
if (res.isConfirmed) {
|
||||
const response = await api.post(`/board/${id}/delete`, {
|
||||
TOKEN: AuthService.getToken()
|
||||
});
|
||||
if (response.code !== 0) {
|
||||
swal.tip('error', '删除失败...');
|
||||
return;
|
||||
}
|
||||
swal.tip('success', '删除成功');
|
||||
await emit('refresh-board');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message">
|
||||
<div class="avatar" :style="{ background: setRandomBGCL }">
|
||||
<img :src="getRandomIMG(Math.random())" alt="Avatar">
|
||||
<img alt="Profile">
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="userinfo">
|
||||
@ -34,6 +55,14 @@ defineProps({
|
||||
<!-- </label>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div v-if="String(message.uid) === store.state.userInfo.uid ||
|
||||
store.state.userInfo.role_id >= 1" class="delete-message" @click="deleteMessage(message.id, message.content)">
|
||||
<div class="delete-ico"/>
|
||||
<span>删除留言</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -46,6 +75,10 @@ defineProps({
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.theme-light .message {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.message .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -71,23 +104,28 @@ defineProps({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
color: #dadada;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.userinfo .name {
|
||||
color: #dadada;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.userinfo .role {
|
||||
color: #dadada;
|
||||
.theme-light .userinfo {
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
.details .content {
|
||||
word-break: break-word;
|
||||
color: white;
|
||||
}
|
||||
.details .bottom {
|
||||
|
||||
.theme-light .content {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@ -100,7 +138,7 @@ defineProps({
|
||||
|
||||
}
|
||||
|
||||
.bottom .like {
|
||||
.like {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@ -113,4 +151,50 @@ defineProps({
|
||||
padding: 2px 0 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
//display: flex;
|
||||
//flex-direction: row;
|
||||
}
|
||||
|
||||
.delete-message {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: small;
|
||||
width: 75px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.message:hover .delete-message {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.message:hover .delete-message:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.theme-light .delete-message {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.delete-message .delete-ico {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ffffff;
|
||||
-webkit-mask-image: url('/public/images/delete.svg');
|
||||
mask-image: url('/public/images/delete.svg');
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.theme-light .delete-ico {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
|
||||
.theme-light .delete-message span {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -8,7 +8,8 @@ const store = createStore({
|
||||
theme: localStorage.getItem('theme') || 'dark',
|
||||
loading: {},
|
||||
token: null,
|
||||
userInfo: {}
|
||||
userInfo: {},
|
||||
demos: {}
|
||||
},
|
||||
mutations: {
|
||||
toggleTheme(state) {
|
||||
@ -31,6 +32,9 @@ const store = createStore({
|
||||
},
|
||||
stopLoading(state) {
|
||||
state.loading.isLoading = false;
|
||||
},
|
||||
setDemoValue(state, obj) {
|
||||
state.demos[obj.demo] = {...state.demos[obj.demo], ...obj.value}
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
@ -46,7 +50,7 @@ const store = createStore({
|
||||
},
|
||||
plugins: [createPersistedStatePlugin({
|
||||
key: 'cyberStorage',
|
||||
whitelist: ['theme', 'userInfo'],
|
||||
whitelist: ['theme', 'userInfo', 'demos'],
|
||||
})]
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user