A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 重构多个组件并优化公共样式

Browse Source 
重构了item-head、item-bottom、item-offer、item-summary和item-tenement组件，优化了props传递和数据处理逻辑
将公共头部和导航样式提取到public.css中，避免重复代码
修复了item-tenement组件中图片显示和数据处理的问题
更新了item-bottom组件的点赞和收藏逻辑，增加错误提示
优化了item-head组件的用户信息显示逻辑
调整了多个组件的样式细节，包括间距、图标大小等
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-30 19:09:38 +08:00
parent 28c890cf94
commit d4244fc783
38 changed files with 2092 additions and 4485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
component/item-bottom/item-bottom.js
View File

@@ -23,6 +23,8 @@ export const itemBottom = defineComponent({
let isLikeGif = ref(false);
let cancelOperate = inject("cancelOperate");
const likeClick = () => {
if (realname.value == 0 && userInfoWin.value?.uin > 0) {
openAttest();
@@ -36,11 +38,19 @@ export const itemBottom = defineComponent({
const token = item.value.token || "";
if (["offer", "offer_summary", "interviewexperience"].includes(item.value["type"]) && item.value["is_like"]) {
creationAlertBox("error", "不可取消点赞");
return;
}
ajax(`/v2/api/forum/postTopicLike`, {
token,
})
.then((res) => {
if (res.code != 200) return;
if (res.code != 200) {
creationAlertBox("error", res.message);
return;
}
let data = res.data;
item.value["is_like"] = data.status;
@@ -71,12 +81,17 @@ export const itemBottom = defineComponent({
token,
})
.then((res) => {
if (res.code != 200) return;
if (res.code != 200) {
creationAlertBox("error", res.message);
return;
}
const data = res.data || {};
item.value["is_collect"] = data.status;
item.value["collections"] = data.collections;
creationAlertBox("success", res.message);
// 调用父组件的方法
cancelOperate(token);
// this.triggerEvent("uncollect", item.token);
})
.catch((err) => {
@@ -91,5 +106,5 @@ export const itemBottom = defineComponent({
like,
},
template: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div><like v-if="isLikeGif"></like>`,
template: `<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div><like v-if="isLikeGif"></like>`,
});