💄 渲染推荐理由

This commit is contained in:
目棃
2025-03-08 10:27:09 +08:00
parent d5aaecbf72
commit 9b152eb59f
6 changed files with 122 additions and 24 deletions

View File

@@ -21,6 +21,7 @@
"core:window:allow-center",
"core:window:allow-close",
"core:window:allow-destroy",
"core:window:allow-set-always-on-top",
"core:window:allow-set-size",
"core:window:allow-set-title",
"core:window:allow-set-fullscreen",

View File

@@ -19,6 +19,10 @@
</div>
<div class="tpc-bottom" v-if="card.data !== null">
<div class="tpc-tags">
<div v-for="(reason, idx) in card.reasons" :key="idx" class="tpc-reason" title="推荐理由">
<v-icon size="10">mdi-lightbulb-on</v-icon>
<span>{{ reason.text }}</span>
</div>
<div v-for="topic in card.topics" :key="topic.id" class="tpc-tag" @click="toTopic(topic)">
<v-icon size="10">mdi-tag</v-icon>
<span>{{ topic.name }}</span>
@@ -90,7 +94,8 @@ export type RenderCard = {
forum: RenderForum | null;
data: RenderData | null;
status?: RenderStatus;
topics: Array<TGApp.BBS.Topic.Info>;
topics: Array<TGApp.BBS.Post.Topic>;
reasons: Array<TGApp.BBS.Post.RecommendTags>;
};
enum ActStat {
@@ -164,6 +169,7 @@ function getCommonCard(item: TGApp.BBS.Post.FullData): RenderCard {
forum: forumData,
data: statData,
topics: item.topics,
reasons: item.recommend_reason?.tags ?? [],
};
}
@@ -184,6 +190,7 @@ function getPostCard(item: TGApp.BBS.Post.FullData): RenderCard {
}
async function shareCard(): Promise<void> {
console.log(props.modelValue);
if (!card.value) return;
const shareDom = document.querySelector<HTMLDivElement>(`#post-card-${card.value.postId}`);
if (shareDom === null) {
@@ -194,7 +201,7 @@ async function shareCard(): Promise<void> {
await generateShareImg(fileName, shareDom, 2.5);
}
async function toTopic(topic: TGApp.BBS.Topic.Info): Promise<void> {
async function toTopic(topic: TGApp.BBS.Post.Topic): Promise<void> {
const gid = props.modelValue.post.game_id;
await emit("active_deep_link", `router?path=/posts/topic/${gid}/${topic.id}`);
}
@@ -280,13 +287,8 @@ async function toForum(forum: RenderForum): Promise<void> {
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
color: var(--box-text-5);
font-size: 12px;
gap: 5px;
:hover {
color: var(--box-text-3);
}
}
.tpc-tag {
@@ -297,8 +299,25 @@ async function toForum(forum: RenderForum): Promise<void> {
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--box-bg-2);
color: var(--box-text-5);
cursor: pointer;
gap: 3px;
&:hover {
color: var(--box-text-3);
}
}
.tpc-reason {
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--box-bg-2);
color: var(--tgc-od-orange);
gap: 3px;
}
.tpc-forum {

View File

@@ -80,7 +80,7 @@ declare namespace TGApp.BBS.Post {
* @interface FullData
* @property {Post} post 帖子信息
* @property {Forum|null} forum 所属版块,可能为 null
* @property {Array<TGApp.BBS.Topic.Info>} topics 所属话题
* @property {Array<Topic>} topics 所属话题
* @property {User|null} user 发帖人,可能为 null
* @property {TGApp.BBS.User.SelfOperation} self_operation 当前用户操作
* @property {Stat|null} stat 帖子统计,可能为 null
@@ -107,12 +107,17 @@ declare namespace TGApp.BBS.Post {
* @property {unknown} challenge 挑战,可能为 null
* @property {Array<unknown>} hot_reply_list 热门回复列表
* @property {Array<unknown>} villa_msg_image_list 未知数据列表
* @property {unknown} contribution_act 未知数据,可能为 null
* @property {boolean} is_has_vote 是否有投票
* @property {boolean} is_has_lottery 是否有抽奖
* @property {string} release_time_type 发布时间类型
* @property {number} future_release_time 未来发布时间
* @return FullData
*/
type FullData = {
post: Post;
forum: Forum | null;
topics: Array<TGApp.BBS.Topic.Info>;
topics: Array<Topic>;
user: User | null;
self_operation: TGApp.BBS.User.SelfOperation;
stat: Stat | null;
@@ -139,6 +144,11 @@ declare namespace TGApp.BBS.Post {
challenge: unknown | null;
hot_reply_list: Array<unknown>;
villa_msg_image_list: Array<unknown>;
contribution_act: unknown | null;
is_has_vote: boolean;
is_has_lottery: boolean;
release_time_type: string;
future_release_time: number;
};
/**
@@ -158,6 +168,7 @@ declare namespace TGApp.BBS.Post {
* @property {boolean} is_followed 是否被关注
* @property {string} avatar_url 用户头像链接
* @property {string} pendant 用户挂件 URL可能为 ""
* @property {Array<TGApp.BBS.User.Certification>} certifications 用户认证信息列表
* @property {boolean} is_creator 是否是创作者
* @property {TGApp.BBS.User.AvatarExt} avatar_ext 用户头像扩展信息
* @return User
@@ -174,6 +185,7 @@ declare namespace TGApp.BBS.Post {
is_followed: boolean;
avatar_url: string;
pendant: string;
certifications: Array<TGApp.BBS.User.Certification>;
is_creator: boolean;
avatar_ext: TGApp.BBS.User.AvatarExt;
};
@@ -292,6 +304,31 @@ declare namespace TGApp.BBS.Post {
forum_cate: TGApp.BBS.Forum.ForumCate | null;
};
/**
* @description 话题信息
* @since Beta v0.7.2
* @interface Topic
* @property {number} id 话题 ID
* @property {string} name 话题名称
* @property {string} cover 话题封面图 URL
* @property {boolean} is_top 是否置顶
* @property {boolean} is_good 是否加精
* @property {boolean} is_interactive 是否互动
* @property {number} game_id 游戏 ID
* @property {number} content_type 内容类型
* @return Topic
*/
type Topic = {
id: number;
name: string;
cover: string;
is_top: boolean;
is_good: boolean;
is_interactive: boolean;
game_id: number;
content_type: number;
};
/**
* @description 帖子状态
* @since Beta v0.3.7
@@ -431,21 +468,21 @@ declare namespace TGApp.BBS.Post {
* @returns LinkCard
*/
type LinkCard = {
button_text: string;
card_id: string;
card_meta: unknown;
card_status: number;
cover: string;
landing_url: string;
landing_url_type: number;
link_type: number;
market_price: string;
origin_url: string;
origin_user_avatar: string;
origin_user_avatar_url: string;
origin_user_nickname: string;
price: string;
landing_url: string;
cover: string;
title: string;
origin_user_avatar: string;
origin_user_nickname: string;
card_id: string;
card_status: number;
market_price: string;
price: string;
button_text: string;
landing_url_type: number;
card_meta: unknown;
origin_user_avatar_url: string;
};
/**
@@ -513,9 +550,27 @@ declare namespace TGApp.BBS.Post {
* @description 推荐理由
* @since Beta v0.7.2
* @interface RecommendReason
* @property {Array<string>} tags 标签
* @property {boolean} is_following 是否关注
* @property {unknown|null} lottery 抽奖信息,可能为 null
* @property {Array<RecommendTags>} tags 标签
* @property {boolean} is_mentor_rec_block 是否为导师推荐
* @return RecommendReason
*/
type RecommendReason = { tags: Array<string>; is_mentor_rec_block: boolean };
type RecommendReason = {
is_following?: boolean;
lottery?: unknown | null;
tags: Array<RecommendTags>;
is_mentor_rec_block: boolean;
};
/**
* @description 推荐标签
* @since Beta v0.7.2
* @interface RecommendTags
* @property {string} text 标签文本
* @property {string} type 标签类型
* @property {string} deep_link 深度链接
* @return RecommendTags
*/
type RecommendTags = { text: string; type: string; deep_link: string };
}

View File

@@ -1,5 +1,6 @@
<template>
<TSwitchTheme />
<TPinWin />
<div class="taj-page">
<v-expansion-panels>
<v-expansion-panel>
@@ -69,6 +70,7 @@
</div>
</template>
<script lang="ts" setup>
import TPinWin from "@comp/app/t-pinWin.vue";
import TSwitchTheme from "@comp/app/t-switchTheme.vue";
import showLoading from "@comp/func/loading.js";
import { storeToRefs } from "pinia";

View File

@@ -1,5 +1,6 @@
<template>
<TSwitchTheme />
<TPinWin />
<div class="tpj-page">
<v-expansion-panels>
<v-expansion-panel>
@@ -48,6 +49,7 @@
</div>
</template>
<script lang="ts" setup>
import TPinWin from "@comp/app/t-pinWin.vue";
import TSwitchTheme from "@comp/app/t-switchTheme.vue";
import showLoading from "@comp/func/loading.js";
import showSnackbar from "@comp/func/snackbar.js";

View File

@@ -59,6 +59,15 @@
<span>{{ postData.collection.collection_title }}</span>
<span>{{ postData.collection.cur }}/{{ postData.collection.total }}</span>
</div>
<div
v-for="(tag, idx) in postData.recommend_reason?.tags"
:key="idx"
class="tp-post-reason"
title="推荐理由"
>
<v-icon size="12">mdi-lightbulb-on</v-icon>
<span>{{ tag.text }}</span>
</div>
<div
v-for="topic in postData.topics"
:key="topic.id"
@@ -296,7 +305,7 @@ async function toPost(): Promise<void> {
await TGClient.open("web_thin", link);
}
async function toTopic(topic: TGApp.BBS.Topic.Info): Promise<void> {
async function toTopic(topic: TGApp.BBS.Post.Topic): Promise<void> {
const gid = postData.value?.post.game_id ?? topic.game_id;
await emit("active_deep_link", `router?path=/posts/topic/${gid}/${topic.id}`);
}
@@ -473,4 +482,14 @@ onUnmounted(() => {
color: var(--box-text-3);
}
}
/* reason */
.tp-post-reason {
display: flex;
align-items: center;
justify-content: center;
color: var(--tgc-od-orange);
font-family: var(--font-title);
font-size: 12px;
}
</style>