From 83bd01fb796655d73f36045fdce5d685554c8875 Mon Sep 17 00:00:00 2001
From: Guarp <guarp2022@163.com>
Date: Sat, 15 Mar 2025 08:28:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=84=E8=AE=BA=E5=9B=9E?=
 =?UTF-8?q?=E5=A4=8D=E5=8A=9F=E8=83=BD=EF=BC=9B=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E8=B5=84=E6=BA=90=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Blog_comment.vue               | 204 ++++++++++++++++++
 src/components/Blog_commentDisplay.vue        |  60 ++++--
 src/components/Blog_commentReplyDisplay.vue   | 131 +++++++++++
 src/components/Blog_replyInput.vue            | 120 +++++++++++
 src/components/Blog_rootComment.vue           | 122 -----------
 src/components/Like_button.vue                |   8 +-
 src/components/More_button.vue                |  39 +++-
 src/components/Profile_display.vue            |   2 +-
 src/pages/Demos_home.vue                      |   3 +-
 .../accountPages/Account_admin_userManage.vue |   3 +-
 src/pages/blogPages/SingleBlog_page.vue       |  33 +--
 src/pages/demoPages/messageBoard/Message.vue  |   3 +-
 src/pages/demoPages/podExercise/Quiz.vue      |   3 +-
 src/store/index.js                            |   5 +-
 src/utils/axios.js                            |   2 +-
 src/utils/demoResource.js                     |   9 +
 src/utils/imageResource.js                    |   4 +-
 17 files changed, 583 insertions(+), 168 deletions(-)
 create mode 100644 src/components/Blog_comment.vue
 create mode 100644 src/components/Blog_commentReplyDisplay.vue
 create mode 100644 src/components/Blog_replyInput.vue
 delete mode 100644 src/components/Blog_rootComment.vue
 create mode 100644 src/utils/demoResource.js

diff --git a/src/components/Blog_comment.vue b/src/components/Blog_comment.vue
new file mode 100644
index 0000000..1d062a9
--- /dev/null
+++ b/src/components/Blog_comment.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="comment-container">
+    <!-- 用户头像 -->
+    <Profile_display :id="comment.profile" :size="props.isSub ? '24' : '40'"/>
+
+    <!-- 评论内容 -->
+    <div class="comment-content">
+      <div class="user-info">
+        <span class="username">{{ comment.poster_name }}</span>
+      </div>
+      <div class="comment-text" :style="{fontSize: props.isSub ? '14px' : '16px'}">
+        {{ comment.content }}
+      </div>
+      <div class="comment-meta">
+        <div class="comment-action-buttons">
+          <span class="date">{{ formattedTime }}</span>
+          <Like_button
+              :active="comment.liked"
+              :amount="comment.likes"
+              :toggleFunc="clickLikeBtn"
+              direction="h"
+              iconSize="16"
+              fontSize="12"
+          />
+          <button class="reply" v-if="!isSub" @click="toggleReplyInputDisplay">回复</button>
+        </div>
+        <More_button
+            :delete-func="clickDeleteBtn"
+            :allow-delete="comment.uid === Number(store.state.userInfo.uid)"
+        />
+      </div>
+      <div class="view-more">
+        <span v-if="!isSub && comment.reply_amount > 0" >
+          <span v-if="!replyDisplay" class="view-more-text">共 {{ comment.reply_amount }} 条回复，</span>
+        <span v-if="!replyDisplay" class="view-more-btn" @click="replyDisplay = true">点击查看</span>
+        </span>
+        <Blog_commentReplyDisplay
+            :reply-display="replyDisplay"
+            :comment-id="comment.id"
+            :input-display="replyInputDisplay"
+            @set-reply-display="(state) => {replyDisplay = state}"
+        />
+        <span v-if="replyDisplay" class="view-more-btn" @click="replyDisplay = false">收起 ∧</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed, ref} from 'vue';
+import Like_button from './Like_button.vue';
+import Profile_display from "./Profile_display.vue";
+import {formatGMTToLocal, timeDifference} from "../utils/formatTime.js";
+import api from "../utils/axios.js";
+import swal from "../utils/sweetalert.js";
+import More_button from "./More_button.vue";
+import store from "../store/index.js";
+import Blog_commentReplyDisplay from "./Blog_commentReplyDisplay.vue";
+import Blog_commentInput from "./Blog_replyInput.vue";
+
+// 定义 props
+const props = defineProps({
+  comment: {
+    type: Object,
+    required: true,
+  },
+  isSub: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['destroy-self']);
+const replyDisplayRef = ref(null);
+const replyDisplay = ref(false);
+const replyInputDisplay = ref(false);
+const toggleReplyInputDisplay = () => {
+  replyInputDisplay.value = ! replyInputDisplay.value;
+}
+
+
+const formattedTime = computed(() => {
+  const localTime = formatGMTToLocal(props.comment.date, 3);
+  return localTime;
+})
+
+// 切换点赞状态的函数
+const clickLikeBtn = async (isLiked) => {
+  try {
+    if (isLiked) {
+      const response = await api.post(`/comments/${props.comment.id}/like`);
+      if (response.code !== 0) {
+        swal.tip('error', '点赞失败');
+      }
+    } else {
+      const response = await api.delete(`/comments/${props.comment.id}/like`);
+      if (response.code !== 0) {
+        swal.tip('error', '取消点赞失败');
+      }
+    }
+    return true;
+  } catch {
+    swal.tip('error', '网络错误');
+  }
+}
+
+const clickDeleteBtn = async (isLiked) => {
+  const result = await swal.window('info', '确定要删除此评论吗?', '删除后不可恢复', '确定', '取消');
+  if (!result.isConfirmed) {
+    return;
+  }
+  try {
+    if (isLiked) {
+      const response = await api.delete(`/comments/${props.comment.id}`);
+      if (response.code === 0) {
+        emit('destroy-self');
+        return;
+      }
+      swal.tip('error', '删除失败');
+    }
+  } catch(e) {
+    swal.tip('error', '网络错误');
+  }
+}
+</script>
+
+<style scoped>
+.comment-container {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px;
+  color: #d9d9d9;
+  transition: all 0.3s ease;
+}
+.theme-light .comment-container {
+  color: #262626;
+}
+
+.comment-content {
+  margin-left: 10px;
+  flex: 1;
+}
+
+.user-info {
+  font-size: 14px;
+  //color: #333;
+}
+
+.username {
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.comment-text {
+  margin: 5px 0;
+  color: #d9d9d9;
+}
+.theme-light .comment-text {
+  color: #262626;
+}
+
+.comment-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  //color: #999;
+}
+
+.comment-action-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: revert;
+  height: 25px;
+}
+
+.date {
+  margin-right: 15px;
+  font-size: 13px;
+  opacity: 0.8;
+  align-self: center;
+}
+.like {
+  width: 50px;
+}
+.reply {
+  width: 50px;
+  font-size: 13px;
+  opacity: 0.6;
+}
+.view-more-text {
+  opacity: 0.8;
+}
+.view-more {
+  font-size: 12px;
+  opacity: 1;
+  margin-top: 5px;
+}
+
+.view-more-btn {
+  cursor: pointer;
+  opacity: 0.8;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Blog_commentDisplay.vue b/src/components/Blog_commentDisplay.vue
index 35962ae..b8208a5 100644
--- a/src/components/Blog_commentDisplay.vue
+++ b/src/components/Blog_commentDisplay.vue
@@ -4,7 +4,10 @@
     <div class="comment-list">
       <div v-for="(comment, index) in comments" :key="comment.id" class="comment-item">
         <el-divider v-if="index !== 0"/>
-        <Blog_rootComment :comment="comment"/>
+        <Blog_comment
+            :comment="comment"
+            @destroy-self="comments.splice(index, 1)"
+        />
 
       </div>
 
@@ -12,15 +15,17 @@
       <div v-if="loading" class="loading">加载中...</div>
       <div v-if="isEnd && comments.length > 0" class="no-more">没有更多评论了</div>
       <div v-if="error" class="error">{{ error }}</div>
-      <div v-if="!loading && comments.length === 0" class="empty">暂无评论</div>
+      <div v-if="!loading && comments.length === 0 && !error" class="empty">暂无评论</div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import {ref, onMounted, onUnmounted} from 'vue'
 import {getInfoWithPages} from "../utils/getInfoWithPages.js";
-import Blog_rootComment from "./Blog_rootComment.vue";
+import Blog_comment from "./Blog_comment.vue";
+import {getCurrentISODateTime} from "../utils/formatTime.js";
+import store from "../store/index.js";
 
 // 接收父组件传入的滚动容器引用
 const props = defineProps({
@@ -46,20 +51,51 @@ const scrollContainer = ref(null) // 滚动容器引用
 function addCommentToFront(newComments) {
   comments.value.unshift(newComments); // 在数组前插入新项
 }
+
 // 通过 defineExpose 暴露方法
-defineExpose({ addCommentToFront });
+defineExpose({addCommentToFront});
 
 
 const fetchComments = async (pageNum) => {
-  try {
-    // 这里是模拟的 API 调用
-    const response = await getInfoWithPages(`/blogs/${props.blogId}/comments`, pageNum,  pageSize, {sort: 'DESC'})
+  // await new Promise(resolve => setTimeout(resolve, 1000));// 测试测试
+  // return {
+  //   list: (() => {
+  //     let arr = [];
+  //     for (let i = 0; i < 20; i++) {
+  //       arr.push({
+  //         "belong_blog": props.blogId,
+  //         "content": Math.random(),
+  //         "date": getCurrentISODateTime(),
+  //         "father": 0,
+  //         "id": Math.floor(Math.random() * 10000),
+  //         "likes": Math.floor(Math.random() * 100),
+  //         "liked": Math.random()>0.5,
+  //         "poster_name": Math.random(),
+  //         "profile": store.state.userInfo.profile,
+  //         "uid": 20+Math.floor(Math.random() * 10),
+  //         "reply_amount": Math.floor(Math.random() * 100)
+  //       })
+  //     }
+  //     return arr;
+  //   })(),
+  //   total: 1145
+  // }
 
+  try {
+
+    const response = await getInfoWithPages(`/blogs/${props.blogId}/comments`, pageNum, pageSize, {sort: 'DESC'})
+
+    if (response.code === 3) {
+      error.value = 1;
+      throw new Error('请刷新重试')
+    }
     return {
       list: response.data || [],
       total: response.amount || 0
     }
   } catch (err) {
+
+    error.value = 1
     throw new Error('获取评论失败: ' + err.message)
   }
 }
@@ -72,12 +108,14 @@ const loadComments = async () => {
   error.value = null
 
   try {
-    const { list, total } = await fetchComments(page.value)
+    const {list, total} = await fetchComments(page.value)
     amount.value = total;
 
     comments.value = [...comments.value, ...list]
     page.value++
 
+    console.log(total)
+
     // 判断是否还有更多数据
     if (comments.value.length >= total || list.length < pageSize) {
       isEnd.value = true
@@ -92,14 +130,13 @@ const loadComments = async () => {
 // 处理滚动事件
 const handleScroll = (e) => {
   const container = e.target
-  const { scrollTop, scrollHeight, clientHeight } = container
+  const {scrollTop, scrollHeight, clientHeight} = container
   if (scrollHeight - scrollTop - clientHeight <= 100 && !loading.value) {
     loadComments()
   }
 }
 
 onMounted(() => {
-  console.log('props.scrollContainer', props.scrollContainer)
   loadComments()
   if (props.scrollContainer) {
     props.scrollContainer.addEventListener('scroll', handleScroll)
@@ -122,7 +159,6 @@ onUnmounted(() => {
 .comment-list {
   overflow-y: auto;
   padding: 10px;
-
   border-radius: 4px;
 }
 
diff --git a/src/components/Blog_commentReplyDisplay.vue b/src/components/Blog_commentReplyDisplay.vue
new file mode 100644
index 0000000..d0cb37c
--- /dev/null
+++ b/src/components/Blog_commentReplyDisplay.vue
@@ -0,0 +1,131 @@
+<script setup>
+
+import Blog_comment from "./Blog_comment.vue";
+import {getCurrentISODateTime} from "../utils/formatTime.js";
+import store from "../store/index.js";
+import {getInfoWithPages} from "../utils/getInfoWithPages.js";
+import {onMounted, ref, watch} from "vue";
+import PagingController from "./PagingController.vue";
+import Blog_commentInput from "./Blog_replyInput.vue";
+
+const props = defineProps({
+  commentId: {
+    type: Number,
+    required: true
+  },
+  inputDisplay: {
+    type: Boolean
+  },
+  replyDisplay: {
+    type: Boolean
+  }
+});
+
+const emit = defineEmits(['set-reply-display']);
+
+function addCommentToFront(newComments) {
+  emit('set-reply-display', true);
+  if (comments.value.length >= pageSize - 1) {
+    comments.value.pop();
+  }
+  comments.value.unshift(newComments); // 在数组前插入新项
+}
+
+const hmReplyDisplay = ref(false);
+
+const comments = ref([]);
+const amount = ref(0);
+const currentPage = ref(0);
+const isLoading = ref(false);
+
+const pageSize = 7;
+
+const fetchComments = async (pageNum) => {
+  isLoading.value = true;
+  // await new Promise(resolve => setTimeout(resolve, 1000));// 测试测试
+  // comments.value = (() => {
+  //   let arr = [];
+  //   for (let i = 0; i < 10; i++) {
+  //     arr.push({
+  //       "belong_blog": props.commentId,
+  //       "content": Math.random(),
+  //       "date": getCurrentISODateTime(),
+  //       "father": 0,
+  //       "id": Math.floor(Math.random() * 10000),
+  //       "likes": Math.floor(Math.random() * 100),
+  //       "liked": Math.random() > 0.5,
+  //       "poster_name": Math.random(),
+  //       "profile": store.state.userInfo.profile,
+  //       "uid": 20 + Math.floor(Math.random() * 10),
+  //     })
+  //   }
+  //   return arr;
+  // })();
+  // amount.value = 40;
+  // currentPage.value = pageNum;
+  // isLoading.value = false;
+  // return;
+
+  try {
+
+    const response = await getInfoWithPages(`/comments/${props.commentId}/replies`, pageNum, pageSize, {sort: 'DESC'})
+
+    if (response.code === 3) {
+      error.value = 1;
+      throw new Error('请刷新重试')
+    }
+    comments.value = response.data;
+    amount.value = Math.ceil(response.amount / pageSize);
+    currentPage.value = pageNum
+  } catch (err) {
+
+    error.value = 1
+    throw new Error('获取评论失败: ' + err.message)
+  }
+  isLoading.value = false;
+}
+
+onMounted(() => {
+
+})
+watch(() => props.replyDisplay, (newValue, oldValue) => {
+  if (newValue) {
+    fetchComments(1)
+  }
+
+})
+</script>
+
+<template>
+  <el-container v-loading="isLoading" element-loading-background="rgba(122, 122, 122, 0)">
+    <div class="comment-list" :style="{opacity: isLoading ? '0.6' : '1'}" v-if="replyDisplay">
+      <div v-for="(comment, index) in comments" :key="comment.id" class="comment-item">
+        <Blog_comment
+            :comment="comment"
+            @destroy-self="comments.splice(index, 1)"
+            :is-sub="true"
+        />
+      </div>
+      <PagingController
+          v-if="amount>1"
+          :current-page="currentPage"
+          :amount="amount"
+          :go-page-func="fetchComments"
+          :loading="isLoading"
+      />
+    </div>
+    <Blog_commentInput
+        :always-show-btn="true"
+        v-if="inputDisplay"
+        :add-comment-to-front="addCommentToFront"
+        :comment-id="commentId"/>
+  </el-container>
+  <!-- 评论列表 -->
+
+</template>
+
+<style scoped>
+.el-container {
+  flex-direction: column;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Blog_replyInput.vue b/src/components/Blog_replyInput.vue
new file mode 100644
index 0000000..d36d237
--- /dev/null
+++ b/src/components/Blog_replyInput.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="comment-input">
+    <el-container>
+      <el-aside class="comment-input-profile" width="50px">
+        <Profile_display v-if="profileImage" :id="store.getters.profileImage" size="50"/>
+      </el-aside>
+      <el-main>
+        <el-container class="comment-area">
+          <el-input
+              autosize
+              type="textarea"
+              placeholder="写点什么..."
+              v-model="commentInput"
+              @focus="commentInputFocus = true"
+              @blur="commentInputFocus = false"
+          />
+          <el-button
+              class="submit-root-commit"
+              type="primary"
+              v-if="alwaysShowBtn || commentInputFocus || commentButtonFocus || commentSubmitLoading"
+              :disabled="commentInput.trim() === '' || commentSubmitLoading"
+              @mouseenter="commentButtonFocus = true"
+              @mouseleave="commentButtonFocus = false"
+              @click="submitComment"
+          >{{ commentSubmitLoading ? "稍等" : "提交" }}
+          </el-button>
+        </el-container>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import api from '../utils/axios.js';
+import { getCurrentISODateTime } from '../utils/formatTime.js';
+import Profile_display from '../components/Profile_display.vue';
+import swal from '../utils/sweetalert.js';
+
+// 获取 Vuex store
+const store = useStore();
+const profileImage = store.getters.profileImage;
+
+// 定义状态
+const commentInput = ref('');
+const commentInputFocus = ref(false);
+const commentButtonFocus = ref(false);
+const commentSubmitLoading = ref(false);
+
+// 定义 props
+const props = defineProps({
+  commentId: {
+    type: Number,
+    required: true
+  },
+  addCommentToFront: {
+    type: Function,
+
+  },
+  alwaysShowBtn: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 提交评论的函数
+const submitComment = async () => {
+  const commentBody = commentInput.value.trim();
+  if (!commentBody) {
+    return;
+  }
+  commentSubmitLoading.value = true;
+  try {
+    const response = await api.post(`/comments/${props.commentId}/replies`, (() => {
+      const form = new FormData();
+      form.append('content', commentBody);
+      return form;
+    })());
+    if (response.code === 0) {
+      props.addCommentToFront({
+        "content": commentBody,
+        "date": getCurrentISODateTime(),
+        "father": 0,
+        "id": String(response.commentId),
+        "likes": 0,
+        "poster_name": store.state.userInfo.username,
+        "profile": store.state.userInfo.profile,
+        "uid": Number(store.state.userInfo.uid)
+      });
+      commentInput.value = ''; // 清空输入框
+    } else {
+      swal.tip('error', '发送失败, 未知错误');
+    }
+  } catch {
+    swal.tip('error', '发送失败, 网络错误');
+  }
+  commentSubmitLoading.value = false;
+};
+</script>
+
+<style scoped>
+.comment-input-profile {
+  display: flex;
+  padding-top: 20px;
+  justify-content: center;
+}
+
+.comment-area {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  gap: 10px;
+}
+
+.submit-root-commit {
+  width: 83px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Blog_rootComment.vue b/src/components/Blog_rootComment.vue
deleted file mode 100644
index a4bc5a0..0000000
--- a/src/components/Blog_rootComment.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <div class="comment-container">
-    <!-- 用户头像 -->
-    <Profile_display :id="comment.profile" size="40"/>
-
-    <!-- 评论内容 -->
-    <div class="comment-content">
-      <div class="user-info">
-        <span class="username">{{ comment.poster_name }}</span>
-      </div>
-      <div class="comment-text">
-        {{ comment.content }}
-      </div>
-      <div class="comment-meta">
-        <span class="date">{{ formattedTime }}</span>
-        <Like_button
-            :active="comment.liked"
-            :amount="comment.likes"
-            :toggleFunc="clickLikeBtn"
-            direction="h"
-            iconSize="16"
-            fontSize="12"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {computed, ref} from 'vue';
-import Like_button from './Like_button.vue';
-import Profile_display from "./Profile_display.vue";
-import {formatGMTToLocal, timeDifference} from "../utils/formatTime.js";
-import api from "../utils/axios.js";
-import swal from "../utils/sweetalert.js";
-
-// 定义 props
-const props = defineProps({
-  comment: {
-    type: Object,
-    required: true,
-  }
-});
-
-// 定义点赞状态
-
-const formattedTime = computed(() => {
-  const localTime = formatGMTToLocal(props.comment.date, 3);
-  return localTime;
-})
-
-// 切换点赞状态的函数
-const clickLikeBtn = async (isLiked) => {
-  try {
-    if (isLiked) {
-      const response = await api.post(`/comments/${props.comment.id}/like`);
-      if (response.code !== 0) {
-        swal.tip('error', '点赞失败');
-      }
-    } else {
-      const response = await api.delete(`/comments/${props.comment.id}/like`);
-      if (response.code !== 0) {
-        swal.tip('error', '取消点赞失败');
-      }
-    }
-  } catch {
-    swal.tip('error', '网络错误');
-  }
-}
-</script>
-
-<style scoped>
-.comment-container {
-  display: flex;
-  align-items: flex-start;
-  padding: 10px;
-  color: #d9d9d9;
-  transition: all 0.3s ease;
-}
-.theme-light .comment-container {
-  color: #262626;
-}
-
-.comment-content {
-  margin-left: 10px;
-  flex: 1;
-}
-
-.user-info {
-  font-size: 14px;
-  //color: #333;
-}
-
-.username {
-  font-size: 14px;
-  margin-right: 10px;
-}
-
-.comment-text {
-  margin: 5px 0;
-
-}
-
-.comment-meta {
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  //color: #999;
-}
-
-.date {
-  margin-right: 15px;
-  font-size: 13px;
-  opacity: 0.8;
-}
-
-.like {
-  position: absolute;
-  margin-left: 130px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Like_button.vue b/src/components/Like_button.vue
index d4f84dc..ccca97a 100644
--- a/src/components/Like_button.vue
+++ b/src/components/Like_button.vue
@@ -23,11 +23,11 @@ const props = defineProps({
     default: 'h'
   },
   iconSize: {
-    type: Number,
+    type: String,
     default: 16
   },
   fontSize: {
-    type: Number,
+    type: String,
     default: 16
   }
 });
@@ -88,8 +88,8 @@ watch(() => props.amount, () => {
 </script>
 
 <template>
-  <label class="like" :class="{'vertical': direction.includes('v'), 'disable': disable}">
-    <span @click="clickFunc" :disabled="disable">
+  <label @click="clickFunc" class="like" :class="{'vertical': direction.includes('v'), 'disable': disable}">
+    <span :disabled="disable">
       <svg v-if="!(alterActive)" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            :width="iconSize" :height="iconSize">
diff --git a/src/components/More_button.vue b/src/components/More_button.vue
index 8da8120..63d1cb7 100644
--- a/src/components/More_button.vue
+++ b/src/components/More_button.vue
@@ -1,13 +1,44 @@
 <script setup>
 
+import {Delete} from "@element-plus/icons-vue";
+import {computed} from "vue";
+
+const props = defineProps({
+  allowDelete: {
+    type: Boolean,
+  },
+  deleteFunc: {
+    type: Function
+  }
+})
+
+const allowList = computed(() => Object.keys(props)
+    .filter(item => item.includes('allow'))
+    .filter(item => props[item] === true)
+);
+
 </script>
 
 <template>
-  <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-    <path d="M9.082233333333333 3.665566666666667C9.082233333333333 4.2632666666666665 8.597733333333332 4.7478066666666665 8 4.7478066666666665C7.4023 4.7478066666666665 6.917766666666666 4.2632666666666665 6.917766666666666 3.665566666666667C6.917766666666666 3.0678666666666663 7.4023 2.583333333333333 8 2.583333333333333C8.597733333333332 2.583333333333333 9.082233333333333 3.0678666666666663 9.082233333333333 3.665566666666667zM9.0823 12.332333333333333C9.0823 12.930066666666665 8.597733333333332 13.414633333333331 8 13.414633333333331C7.402233333333333 13.414633333333331 6.917666666666666 12.930066666666665 6.917666666666666 12.332333333333333C6.917666666666666 11.734566666666666 7.402233333333333 11.25 8 11.25C8.597733333333332 11.25 9.0823 11.734566666666666 9.0823 12.332333333333333zM8 9.083233333333332C8.598299999999998 9.083233333333332 9.0833 8.598233333333333 9.0833 7.9999666666666664C9.0833 7.4016666666666655 8.598299999999998 6.916666666666666 8 6.916666666666666C7.4017 6.916666666666666 6.9167 7.4016666666666655 6.9167 7.9999666666666664C6.9167 8.598233333333333 7.4017 9.083233333333332 8 9.083233333333332z" fill="currentColor"></path>
-  </svg>
+  <el-col :span="1" v-if="allowList.length > 0">
+    <el-dropdown>
+      <button class="more">
+        <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M9.082233333333333 3.665566666666667C9.082233333333333 4.2632666666666665 8.597733333333332 4.7478066666666665 8 4.7478066666666665C7.4023 4.7478066666666665 6.917766666666666 4.2632666666666665 6.917766666666666 3.665566666666667C6.917766666666666 3.0678666666666663 7.4023 2.583333333333333 8 2.583333333333333C8.597733333333332 2.583333333333333 9.082233333333333 3.0678666666666663 9.082233333333333 3.665566666666667zM9.0823 12.332333333333333C9.0823 12.930066666666665 8.597733333333332 13.414633333333331 8 13.414633333333331C7.402233333333333 13.414633333333331 6.917666666666666 12.930066666666665 6.917666666666666 12.332333333333333C6.917666666666666 11.734566666666666 7.402233333333333 11.25 8 11.25C8.597733333333332 11.25 9.0823 11.734566666666666 9.0823 12.332333333333333zM8 9.083233333333332C8.598299999999998 9.083233333333332 9.0833 8.598233333333333 9.0833 7.9999666666666664C9.0833 7.4016666666666655 8.598299999999998 6.916666666666666 8 6.916666666666666C7.4017 6.916666666666666 6.9167 7.4016666666666655 6.9167 7.9999666666666664C6.9167 8.598233333333333 7.4017 9.083233333333332 8 9.083233333333332z" fill="currentColor"></path>
+        </svg>
+      </button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item :icon="Delete" @click="deleteFunc">删除</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-col>
+
 </template>
 
 <style scoped>
-
+.more {
+  color: rgb(128, 128, 128);
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Profile_display.vue b/src/components/Profile_display.vue
index e01b824..a4e32f1 100644
--- a/src/components/Profile_display.vue
+++ b/src/components/Profile_display.vue
@@ -10,7 +10,7 @@ const props = defineProps({
     default: 'default.jpg'
   },
   size: {
-    type: Number,
+    type: String,
     default: 48
   }
 });
diff --git a/src/pages/Demos_home.vue b/src/pages/Demos_home.vue
index c306aa2..b9d4431 100644
--- a/src/pages/Demos_home.vue
+++ b/src/pages/Demos_home.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import Demos_box from '../components/Demos_box.vue'
 import {getDomain} from "../utils/getDomain.js";
+import {demoIconURL} from "../utils/demoResource.js";
 const searchQuery = ref('')
 
 const demos = ref([
@@ -17,7 +18,7 @@ const demos = ref([
     date: '2025-2-26',
     author: ["Louis Zhou"],
     tags: ['课内'],
-    image: 'https://' + getDomain() + '/data/demos/pod/icon.png'
+    image: demoIconURL('pod')
   },
   {
     id: 'gungame3d',
diff --git a/src/pages/accountPages/Account_admin_userManage.vue b/src/pages/accountPages/Account_admin_userManage.vue
index 54d3716..f657c14 100644
--- a/src/pages/accountPages/Account_admin_userManage.vue
+++ b/src/pages/accountPages/Account_admin_userManage.vue
@@ -7,6 +7,7 @@ import store from "../../store/index.js";
 import swal from "../../utils/sweetalert.js";
 import {getDomain} from "../../utils/getDomain.js";
 import Swal from "sweetalert2";
+import {userProfile} from "../../utils/imageResource.js";
 
 const currentPage = ref(1);
 const amount = ref(1);
@@ -127,7 +128,7 @@ onMounted(() => {
     <div class="user-bar" v-for="user in userList" :class="{loading: pageLoading}">
       <div class="role-display">{{ role2Text(user.role_id) }}</div>
       <div class="left">
-        <img :src=" `https://${getDomain()}/data/user/profile/` + user.profile" alt="空">
+        <img :src="userProfile(user.profile)" alt="空">
         <div class="content">
           <span class="username">{{ user.username }}</span>
           <span class="birth">{{ user.birth }}</span>
diff --git a/src/pages/blogPages/SingleBlog_page.vue b/src/pages/blogPages/SingleBlog_page.vue
index 472599b..e8e6f95 100644
--- a/src/pages/blogPages/SingleBlog_page.vue
+++ b/src/pages/blogPages/SingleBlog_page.vue
@@ -7,7 +7,7 @@ import router from "../../router/index.js";
 import swal from "../../utils/sweetalert.js";
 import Like_button from "../../components/Like_button.vue";
 import store from "../../store/index.js";
-import Blog_rootComment from "../../components/Blog_rootComment.vue";
+import Blog_rootComment from "../../components/Blog_comment.vue";
 import {getInfoWithPages} from "../../utils/getInfoWithPages.js";
 import Blog_commentDisplay from "../../components/Blog_commentDisplay.vue";
 import Profile_display from "../../components/Profile_display.vue";
@@ -20,13 +20,6 @@ const blog = ref(
     {
       complete: false
     }
-    // {
-    //   complete: true,
-    //   title: 'asd',
-    //   content: `${'asdasd'.repeat(999)}`,
-    //   allowComment: true,
-    //   post_date: 'asd',
-    // }
 )
 const posterInfo = ref(null)
 const interactInfo = ref({
@@ -50,17 +43,26 @@ const checkWindowSize = () => {
 
 // 在组件挂载时获取数据
 onMounted(async () => {
-  // setTimeout(() => {
-  //   interactInfo.value.likes = 114;
-  //   interactInfo.value.liked = true;
-  //       interactInfo.value.complete = true;
-  // }, 100);
   checkWindowSize();
   window.addEventListener('resize', checkWindowSize);
+
+  // setTimeout(() => { // 测试测试
+  //   interactInfo.value.likes = 114;
+  //   interactInfo.value.liked = true;
+  //   interactInfo.value.complete = true;
+  //   blog.value = {
+  //     complete: true,
+  //     title: 'asd',
+  //     content: `${'asdasd'.repeat(99)}`,
+  //     allow_comments: 1,
+  //     post_date: 'asd',
+  //   }
+  // }, 100);
+  // return;
+
   // 获取博客数据
   try {
     const blogResponse = await api.get(`/blogs/${id}`);
-    console.log(blogResponse)
     if (blogResponse.code === 1) {
       await router.push('/404')
       return;
@@ -69,7 +71,6 @@ onMounted(async () => {
       blog.value = blogResponse.data;
       document.title = blog.value.title + ' CYBER 博客';
       blog.value.complete = true;
-      console.log(blog.value)
 
       setTimeout(() => {
         interactInfo.value.likes = blog.value.likes;
@@ -195,7 +196,7 @@ const submitComment = async () => {
               <div class="comment-input" v-if="store.getters.hasUserInfo">
                 <el-container>
                   <el-aside class="comment-input-profile" width="60px">
-                    <Profile_display v-if="posterInfo" :id="store.getters.profileImage" size="55"/>
+                    <Profile_display v-if="store.getters.profileImage" :id="store.getters.profileImage" size="55"/>
                   </el-aside>
                   <el-main>
                     <el-container class="comment-area">
diff --git a/src/pages/demoPages/messageBoard/Message.vue b/src/pages/demoPages/messageBoard/Message.vue
index c34215f..6aea556 100644
--- a/src/pages/demoPages/messageBoard/Message.vue
+++ b/src/pages/demoPages/messageBoard/Message.vue
@@ -7,6 +7,7 @@ import api from "../../../utils/axios.js";
 import AuthService from "../../../../services/auth.js";
 import {getDomain} from "../../../utils/getDomain.js";
 import Like_button from "../../../components/Like_button.vue";
+import {userProfile} from "../../../utils/imageResource.js";
 
 defineProps({
   message: Object,
@@ -34,7 +35,7 @@ async function deleteMessage(id, message) {
 <template>
   <div class="message">
     <div class="avatar" :style="{ background: setRandomBGCL }">
-      <img :src=" `https://${getDomain()}/data/user/profile/` + message.profile" alt="Profile">
+      <img :src="userProfile(message.profile)" alt="Profile">
     </div>
     <div class="details">
       <div class="userinfo">
diff --git a/src/pages/demoPages/podExercise/Quiz.vue b/src/pages/demoPages/podExercise/Quiz.vue
index e7e24fe..fee7244 100644
--- a/src/pages/demoPages/podExercise/Quiz.vue
+++ b/src/pages/demoPages/podExercise/Quiz.vue
@@ -82,6 +82,7 @@ import {useRoute} from 'vue-router'
 import swal from "../../../utils/sweetalert.js";
 import router from "../../../router/index.js";
 import {getDomain} from "../../../utils/getDomain.js";
+import {demoResourceURL} from "../../../utils/demoResource.js";
 
 const route = useRoute()
 
@@ -123,7 +124,7 @@ const initial = async () => {
   const categorise = route.query.cat || 'apphy1'
   const file = route.query.id || 'phy250227';
   try {
-    const response = await axios.get(`https://${getDomain()}/data/demos/pod/${categorise}/${file}.json`);
+    const response = await axios.get(demoResourceURL('pod', `${categorise}/${file}.json`));
     const jsonData = response.data;
     Object.assign(data, jsonData);
     generateNewExam(); // 初始生成一份试卷
diff --git a/src/store/index.js b/src/store/index.js
index 27c049c..b4f14db 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,6 +2,7 @@ import {createStore} from 'vuex';
 import createPersistedStatePlugin from '../plugins/vuexLocalStorage';
 import {getDomain} from "../utils/getDomain.js";
 import createSessionStatePlugin from "../plugins/vuexSessionStorage.js";
+import {userProfile} from "../utils/imageResource.js";
 
 const store = createStore({
     state: {
@@ -83,9 +84,9 @@ const store = createStore({
         hasUserInfo: state => !!state.userInfo.uid,
         profileImage: state => {
             if (state.userInfo.profile) {
-                return `https://${getDomain()}/data/user/profile/` + state.userInfo.profile;
+                return userProfile(state.userInfo.profile);
             } else {
-                return `https://${getDomain()}/data/user/profile/default.jpg`
+                return userProfile('default.jpg');
             }
         },
         userRole: state => {
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 056d1d6..36f8290 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -3,7 +3,7 @@ import store from '../store';
 import {getDomain} from "./getDomain.js";
 
 const api = axios.create({
-    baseURL: `https://api.mva-cyber.club:5001`,
+    baseURL: `https://mva-cyber.club:5001`,
     timeout: 6000,
 });
 
diff --git a/src/utils/demoResource.js b/src/utils/demoResource.js
new file mode 100644
index 0000000..c209eac
--- /dev/null
+++ b/src/utils/demoResource.js
@@ -0,0 +1,9 @@
+import {getDomain} from "./getDomain.js";
+
+export function demoResourceURL(demoId, path) {
+    return `https://${getDomain()}:4433/data/demos/${demoId}/${path}`
+}
+
+export function demoIconURL(demoId) {
+    return `https://${getDomain()}:4433/data/demos/${demoId}/icon.png`
+}
\ No newline at end of file
diff --git a/src/utils/imageResource.js b/src/utils/imageResource.js
index 3ce3f6f..d703b51 100644
--- a/src/utils/imageResource.js
+++ b/src/utils/imageResource.js
@@ -1,9 +1,9 @@
 import {getDomain} from "./getDomain.js";
 
 export function blogImage(id) {
-    return `https://${getDomain()}/data/blog/images/${id}`;
+    return `https://${getDomain()}:4433/data/image/blog/${id}`;
 }
 
 export function userProfile(id) {
-    return `https://${getDomain()}/data/user/profile/${id}`
+    return `https://${getDomain()}:4433/data/image/profile/${id}`
 }
\ No newline at end of file