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

添加作者评论特殊显示；

Browse Source 
修复评论bug
This commit is contained in:
Guarp 2025-03-15 18:56:17 +08:00
parent 5476cdcff1
commit 4140680fbd
12 changed files with 81 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Blog_box.vue
View File

@ -2,6 +2,7 @@
import {setRandomBGCL} from "../utils/randomBGCL.js";
import {blogImage} from "../utils/imageResource.js";
import DefaultCover from "./DefaultCover.vue";
import {formatGMTToLocal} from "../utils/formatTime.js";
defineProps({
blog: Object,
@ -15,9 +16,9 @@ defineProps({
<DefaultCover :imageSrc="blogImage(blog.cover)" :text="blog.title"/>
<div class="blog-details">
<h3>{{ blog.title }}</h3>
<h3>{{ blog.title || '无标题' }}</h3>
<p class="author">{{ blog.poster_name }}</p>
<p class="time"> {{ blog.post_date }}</p>
<p class="time"> {{ formatGMTToLocal(blog.post_date, 3) }}</p>
<div class="tags">
<span v-for="tag in blog.tags" :key="tag" class="tag">{{ tag }}</span>
</div>

25
src/components/Blog_comment.vue
View File

@ -7,6 +7,7 @@
<div class="comment-content">
<div class="user-info">
<span class="username">{{ comment.poster_name }}</span>
<span class="author-tag" v-if="comment.uid === blogAuthorUid">作者</span>
</div>
<div class="comment-text" :style="{fontSize: props.isSub ? '14px' : '16px'}">
{{ comment.content }}
@ -22,7 +23,7 @@
iconSize="16"
fontSize="12"
/>
<button class="reply" v-if="!isSub" @click="toggleReplyInputDisplay">回复</button>
<button class="reply" v-if="!isSub" @click="toggleReplyInputDisplay">{{ store.getters.hasUserInfo ? '回复' : '请先登录' }}</button>
</div>
<More_button
:delete-func="clickDeleteBtn"
@ -38,6 +39,7 @@
:reply-display="replyDisplay"
:comment-id="comment.id"
:input-display="replyInputDisplay"
:blog-author-uid="blogAuthorUid"
@set-reply-display="(state) => {replyDisplay = state}"
/>
<div v-if="replyDisplay" class="view-more-btn" @click="replyDisplay = false"><span>收起</span><el-icon style="margin: 0 5px"><ArrowUp /></el-icon></div>
@ -58,6 +60,7 @@ import store from "../store/index.js";
import Blog_commentReplyDisplay from "./Blog_commentReplyDisplay.vue";
import Blog_commentInput from "./Blog_replyInput.vue";
import {ArrowUp} from "@element-plus/icons-vue";
import router from "../router/index.js";
// 定义 props
const props = defineProps({
@ -68,6 +71,9 @@ const props = defineProps({
isSub: {
type: Boolean,
default: false
},
blogAuthorUid: {
type: Number
}
});
@ -76,6 +82,10 @@ const replyDisplayRef = ref(null);
const replyDisplay = ref(false);
const replyInputDisplay = ref(false);
const toggleReplyInputDisplay = () => {
if (!store.getters.hasUserInfo) {
router.push('/login');
return;
}
replyInputDisplay.value = ! replyInputDisplay.value;
}
@ -151,6 +161,18 @@ const clickDeleteBtn = async (isLiked) => {
font-size: 14px;
margin-right: 10px;
}
.author-tag {
background: #00e7e7;
color: black;
padding: 0 2px;
height: 20px;
font-size: 12px;
font-weight: bold;
}
.theme-light .author-tag {
background: #008686;
color: white;
}
.comment-text {
margin: 5px 0;
@ -185,7 +207,6 @@ const clickDeleteBtn = async (isLiked) => {
width: 50px;
}
.reply {
width: 50px;
font-size: 13px;
opacity: 0.6;
}

7
src/components/Blog_commentDisplay.vue
View File

@ -6,6 +6,7 @@
<el-divider v-if="index !== 0"/>
<Blog_comment
:comment="comment"
:blog-author-uid="blogAuthorUid"
@destroy-self="comments.splice(index, 1)"
/>
@ -41,6 +42,9 @@ const props = defineProps({
type: Number,
default: null
},
blogAuthorUid: {
type: Number
}
})
// 数据相关
const comments = ref([]) // 评论列表
@ -67,6 +71,9 @@ defineExpose({addCommentToFront, reSort});
const fetchComments = async (pageNum, sortMode) => {
if (!(sortMode > -1)) {
sortMode = store.state.userPreference.blogSortMode;
}
// await new Promise(resolve => setTimeout(resolve, 1000));// 测试测试
// return {
// list: (() => {

7
src/components/Blog_commentReplyDisplay.vue
View File

@ -17,6 +17,9 @@ const props = defineProps({
},
replyDisplay: {
type: Boolean
},
blogAuthorUid: {
type: Number
}
});
@ -41,6 +44,9 @@ const isLoading = ref(false);
const pageSize = 7;
const fetchComments = async (pageNum, sortMode) => {
if (!(sortMode > -1)) {
sortMode = store.state.userPreference.blogSortMode;
}
isLoading.value = true;
// await new Promise(resolve => setTimeout(resolve, 1000));// 测试测试
@ -108,6 +114,7 @@ watch(() => props.replyDisplay, (newValue, oldValue) => {
<div v-for="(comment, index) in comments" :key="comment.id" class="comment-item">
<Blog_comment
:comment="comment"
:blog-author-uid="blogAuthorUid"
@destroy-self="comments.splice(index, 1)"
:is-sub="true"
/>

4
src/components/Blog_replyInput.vue
View File

@ -82,7 +82,7 @@ const submitComment = async () => {
"content": commentBody,
"date": getCurrentISODateTime(),
"father": 0,
"id": String(response.commentId),
"id": response.commentId,
"likes": 0,
"poster_name": store.state.userInfo.username,
"profile": store.state.userInfo.profile,
@ -90,7 +90,7 @@ const submitComment = async () => {
});
commentInput.value = ''; // 清空输入框
} else {
swal.tip('error', '发送失败, 未知错误');
swal.tip('error', '发送失败');
}
} catch {
swal.tip('error', '发送失败, 网络错误');

6
src/pages/accountPages/Account.vue
View File

@ -27,9 +27,9 @@ onMounted(() => {
<li>
<router-link to="/account/setting" :class="{'current':$route.path.includes('setting')}">账号设置</router-link>
</li>
<li>
<router-link to="/account/self-page" :class="{'current':$route.path.includes('self-page')}">个人主页</router-link>
</li>
<!-- <li>-->
<!-- <router-link to="/account/self-page" :class="{'current':$route.path.includes('self-page')}">个人主页</router-link>-->
<!-- </li>-->
<li>
<router-link to="/account/works-manage" :class="{'current':$route.path.includes('works-manage')}">稿件管理</router-link>
</li>

30
src/pages/accountPages/Account_setting.vue
View File

@ -192,23 +192,23 @@ watch(autoSaveInterval, () => {
<label class="color-mode-box">
<input type="radio" v-model="store.state.theme" value="dark">深色模式
</label>
<div class="halving-line" />
<div class="auto-save-setting">
<label class="checkbox-label">
<!-- <div class="halving-line" />-->
<!-- <div class="auto-save-setting">-->
<!-- <label class="checkbox-label">-->
<input type="checkbox" @click="store.commit('toggleAutoSave')" :checked="store.state.editAutoSave.on">
</label>
<span>自动保存</span>
<!-- <input type="checkbox" @click="store.commit('toggleAutoSave')" :checked="store.state.editAutoSave.on">-->
<!-- </label>-->
<!-- <span>自动保存</span>-->
<select v-model="autoSaveInterval">
<option value="114514">动态更新</option>
<option value="15000">15秒</option>
<option value="30000">30秒</option>
<option value="45000">45秒</option>
<option value="60000">60秒</option>
<option value="100000">100秒</option>
</select>
</div>
<!-- <select v-model="autoSaveInterval">-->
<!-- <option value="114514">动态更新</option>-->
<!-- <option value="15000">15秒</option>-->
<!-- <option value="30000">30秒</option>-->
<!-- <option value="45000">45秒</option>-->
<!-- <option value="60000">60秒</option>-->
<!-- <option value="100000">100秒</option>-->
<!-- </select>-->
<!-- </div>-->
<!-- -->
<!-- <div class="intro-box">-->

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

@ -46,7 +46,9 @@ const checkWindowSize = () => {
// 在组件挂载时获取数据
onMounted(async () => {
console.log(sortMode.value, 'ads')
if (store.state.userPreference.blogSortMode === undefined) {
store.commit('setPreferenceValue', {blogSortMode: 1});
}
checkWindowSize();
window.addEventListener('resize', checkWindowSize);
@ -149,7 +151,7 @@ const submitComment = async () => {
"likes": 0,
"poster_name": store.state.userInfo.username,
"profile": store.state.userInfo.profile,
"uid": store.state.userInfo.uid
"uid": Number(store.state.userInfo.uid)
})
} else {
swal.tip('error', '发送失败, 未知错误');
@ -234,7 +236,7 @@ const changeSort = () => {
</el-container>
</div>
</div>
<el-container class="sort-btn" @click="changeSort">
<el-container class="sort-btn" @click="changeSort" v-if="blog.allow_comments === 1">
{{ ['降序', '升序'][sortMode] }}
<el-icon>
<ArrowDown v-if="sortMode === 0" />
@ -249,6 +251,7 @@ const changeSort = () => {
:scroll-container="scrollRef"
:blog-id="Number(id)"
:sort-mode="sortMode"
:blog-author-uid="blog.poster"
/>
<p v-else>不允许评论</p>
</div>

14
src/pages/blogPages/blogEditor.vue
View File

@ -3,7 +3,7 @@
<el-container>
<el-aside width="auto">
<div class="side-bar" v-if="blogStatus !== null">
<el-button v-if="blogStatus !== 1" type="primary" @click="submitBlog">发布{{ mobileTest() ? '' : '博客' }}</el-button>
<el-button type="primary" @click="submitBlog">{{ (blogStatus === 0 ? '发布' : '更改') + (mobileTest() ? '' : (blogStatus===0?'博客':'设置')) }}</el-button>
<el-button type="success" @click="saveBtn">{{ blogStatus === 1 ? '更新' : '保存' }}{{ mobileTest() ? '' : (blogStatus === 0 ? '草稿' : '博客') }}</el-button>
<el-button v-if="!viewing" type="warning" @click="viewing = true">{{
@ -208,10 +208,10 @@ const saveBtn = async () => {
store.commit('stopLoading');
switch (result) {
case 0:
swal.tip('success', `${blogStatus.value === 0 ? '保存' : '更新'}成功`);
swal.tip('success', `保存成功`);
break;
case 1:
swal.tip('error', `${blogStatus.value === 0 ? '保存' : '更新'}失败`);
swal.tip('error', `保存失败`);
break;
case 2:
swal.tip('error', `网络错误`)
@ -618,10 +618,18 @@ div[data-slate-editor] {
background-color: #262626;
}
.w-e-bar-item button:hover {
color: white;
background-color: #494949;
}
.w-e-bar-item button.active {
background: #737373;
}
.theme-light .w-e-bar-item button.active {
background: #c4c4c4;
}
.w-e-bar-item .disabled:hover {
background-color: #494949;

2
src/pages/blogPages/submitBlogPages/SubmitBlog_page.vue
View File

@ -43,7 +43,7 @@ const nonNullKeysCount = computed(() => {
const submit = async () => {
const formData = new FormData();
formData.append("allowComments", infoForm.value.allowComment);
formData.append("allow_comments", infoForm.value.allowComment);
formData.append("category", infoForm.value.tagSelect);
formData.append("draft", 0);

4
src/pages/blogPages/submitBlogPages/SubmitBlog_step_interaction.vue
View File

@ -20,8 +20,8 @@ const sendMessage = () => {
<el-container>
<div class="title">是否允许评论？</div>
<el-radio-group v-model="allowComment" class="ml-4" @change="sendMessage">
<el-radio :label="true" size="large">是</el-radio>
<el-radio :label="false" size="large">否</el-radio>
<el-radio :label="1" size="large">是</el-radio>
<el-radio :label="0" size="large">否</el-radio>
</el-radio-group>
</el-container>
</template>

1
src/utils/formatTime.js
View File

@ -1,4 +1,5 @@
export function formatGMTToLocal(timeString, sub) {
sub = sub || 0;
try {
if (!timeString || typeof timeString !== "string") {
throw new Error("Invalid input: timeString must be a non-empty string.");