guarp/cyber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加评论回复功能；

Browse Source 
修改获取资源地址
This commit is contained in:
Guarp 2025-03-15 08:28:15 +08:00
parent 4a6611d885
commit 83bd01fb79
17 changed files with 583 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/components/Blog_comment.vue Normal file
View File

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

60
src/components/Blog_commentDisplay.vue
View File

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

131
src/components/Blog_commentReplyDisplay.vue Normal file
View File

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

120
src/components/Blog_replyInput.vue Normal file
View File

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

122
src/components/Blog_rootComment.vue
View File

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

8
src/components/Like_button.vue
View File

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

39
src/components/More_button.vue
View File

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

2
src/components/Profile_display.vue
View File

@ -10,7 +10,7 @@ const props = defineProps({
default: 'default.jpg'
},
size: {
type: Number,
type: String,
default: 48
}
});

3
src/pages/Demos_home.vue
View File

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

3
src/pages/accountPages/Account_admin_userManage.vue
View File

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

33
src/pages/blogPages/SingleBlog_page.vue
View File

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

3
src/pages/demoPages/messageBoard/Message.vue
View File

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

3
src/pages/demoPages/podExercise/Quiz.vue
View File

@ -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(); // 初始生成一份试卷

5
src/store/index.js
View File

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

2
src/utils/axios.js
View File

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

9
src/utils/demoResource.js Normal file
View File

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

4
src/utils/imageResource.js
View File

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