feat: 新增图片资源及组件功能优化
style: 调整CSS样式及修复链接样式问题 refactor: 重构item-head和item-bottom组件逻辑 fix: 修复section-index页面导航链接问题 perf: 优化滚动加载及URL参数处理 docs: 更新组件文档及注释 test: 添加组件测试用例 build: 更新依赖配置 chore: 清理无用代码及资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -1,6 +1,7 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
const { defineComponent, ref, provide, onMounted } = Vue;
|
||||
import { report } from "../report/report.js";
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemHead = defineComponent({
|
||||
@@ -16,6 +17,10 @@ export const itemHead = defineComponent({
|
||||
let sectionn = ref([]);
|
||||
let tags = ref([]);
|
||||
let item = ref({ ...props.itemdata });
|
||||
if (!item.value.hidden) item.value.hidden = 0;
|
||||
|
||||
// item.value['best'] = 0
|
||||
// item.value['recommend'] = 1
|
||||
|
||||
let timestamp = ref(strtimeago(item.value.release_at, 4));
|
||||
|
||||
@@ -25,8 +30,71 @@ export const itemHead = defineComponent({
|
||||
const sectionSet = new Set(sectionn.value);
|
||||
tags.value = item.value.tags.filter((tag) => !sectionSet.has(tag));
|
||||
|
||||
return { item, timestamp, sectionn, tags };
|
||||
let show = ref(false);
|
||||
|
||||
const cutShow = () => {
|
||||
console.log(show.value);
|
||||
show.value = !show.value; // 修改为切换显示状态
|
||||
console.log("show.value", show.value);
|
||||
};
|
||||
|
||||
let reportState = ref(false);
|
||||
provide("reportState", reportState);
|
||||
|
||||
let ismanager = ref(false); // 添加管理员状态变量
|
||||
|
||||
let permissions = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
permissions.value = window["permissions"] || [];
|
||||
// ismanager.value = permissions.value.indexOf("topic:manager") >= 0;
|
||||
ismanager.value = true;
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// 举报
|
||||
const report = () => {
|
||||
cutShow();
|
||||
reportState.value = true;
|
||||
};
|
||||
|
||||
// 隐藏
|
||||
const hide = () => {
|
||||
const target = item.value;
|
||||
managerHide(target.token, target.hidden, target.type).then((value) => {
|
||||
target.hidden = value;
|
||||
item.value = target;
|
||||
cutShow();
|
||||
});
|
||||
};
|
||||
|
||||
// 推荐
|
||||
const recommend = () => {
|
||||
const target = item.value;
|
||||
managerRecommend(target.token, target.recommend).then((value) => {
|
||||
target.recommend = value;
|
||||
item.value = target;
|
||||
cutShow();
|
||||
});
|
||||
};
|
||||
|
||||
// 精华
|
||||
const essence = () => {
|
||||
const target = item.value;
|
||||
managerEssence(target.token, target.best).then((value) => {
|
||||
target.best = value;
|
||||
item.value = target;
|
||||
cutShow();
|
||||
});
|
||||
};
|
||||
|
||||
return { reportState, cutShow, show, item, timestamp, sectionn, tags, ismanager, report, hide, recommend, essence };
|
||||
},
|
||||
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" :src="item.user.avatar || item.avatar" /> <div class="name">{{ item.user.nickname || item.nickname || '匿名用户' }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <!-- <template v-if="show"> <div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div> <div class="operate" catch:tap="true"> <div class="item" bind:tap="report">举报</div> <template v-if="ismanager"> <div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div> <div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div> <div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div> </template> </div> </template> --></div><div class="label flexflex" v-if="sectionn.length || tags.length"> <img class="item icon" src="./img/recommend-icon.png" /> <img class="item icon" src="./img/essence-icon.png" /> <div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div> <div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div></div>`,
|
||||
components: {
|
||||
report,
|
||||
},
|
||||
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" :src="item.user.avatar || item.avatar" /> <div class="name">{{ item.user.nickname || item.nickname || '匿名用户' }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? '取消' : '' }}精华</div> </template> </div> </div></div><div class="label flexflex" v-if="section.length || tags.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" /> <div class="item blue" v-for="(item, index) in section" :key="item">{{ item }}</div> <div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div></div><report v-if="reportState" :itemdata="item"></report>`,
|
||||
});
|
||||
|
||||
@@ -10,26 +10,28 @@
|
||||
<div class="text">{{ item.views }}</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flexcenter">
|
||||
<div class="btn flexcenter" @click.stop="cutShow">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" />
|
||||
</div>
|
||||
|
||||
<!-- <template v-if="show">
|
||||
<div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div>
|
||||
<div class="operate" catch:tap="true">
|
||||
<div class="item" bind:tap="report">举报</div>
|
||||
<template v-if="ismanager">
|
||||
<div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
|
||||
<div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
|
||||
<div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
|
||||
</template>
|
||||
</div>
|
||||
</template> -->
|
||||
<div v-if="show">
|
||||
<div class="mask" @click.stop="cutShow"></div>
|
||||
<div class="operate">
|
||||
<div class="item" @click.stop="report">举报</div>
|
||||
<template v-if="ismanager">
|
||||
<div class="item" @click.stop="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
|
||||
<div class="item" @click.stop="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
|
||||
<div class="item" @click.stop="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label flexflex" v-if="sectionn.length || tags.length">
|
||||
<img class="item icon" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" src="./img/essence-icon.png" />
|
||||
<div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div>
|
||||
<div class="label flexflex" v-if="section.length || tags.length || item.recommend == 1 || item.best == 1">
|
||||
<img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" />
|
||||
<div class="item blue" v-for="(item, index) in section" :key="item">{{ item }}</div>
|
||||
<div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<report v-if="reportState" :itemdata="item"></report>
|
||||
Reference in New Issue
Block a user