测试

public/images/delete.svg

@@ -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>

src/pages/demoPages/messageBoard/Board_page.vue

@@ -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">
+      <div class="message-container" :class="{loading: pageLoading}">
-        <Message v-for="msg in messages" :message="msg"/>
+        <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>

src/pages/demoPages/messageBoard/Message.vue

@@ -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 {
+.theme-light .userinfo {
-  color: #dadada;
+  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>

src/store/index.js

@@ -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'],
     })]
 })