Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-21 04:49:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

🚸 处理下线villaCard渲染

Browse Source
This commit is contained in:
目棃
2025-03-07 15:52:45 +08:00
parent dd3ce101a6
commit fee1872b46
2 changed files with 219 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/viewPost/tp-parser.vue
View File

@@ -20,6 +20,7 @@ import TpTexts from "./tp-texts.vue";
import TpUid from "./tp-uid.vue";
import TpUnknown from "./tp-unknown.vue";
import TpVideo from "./tp-video.vue";
import TpVillaCard from "./tp-villaCard.vue";
import TpVod from "./tp-vod.vue";
import TpVote from "./tp-vote.vue";
@@ -92,15 +93,16 @@ function getParsedText(data: TpTextType): Array<TpTextType> {
function getTpName(tp: TGApp.Plugins.Mys.SctPost.Base): Component {
if (tp.children) return TpTexts;
if (typeof tp.insert === "string") return TpText;
if ("image" in tp.insert) return TpImage;
if ("vod" in tp.insert) return TpVod;
if ("video" in tp.insert) return TpVideo;
if ("game_user_info" in tp.insert) return TpUid;
if ("custom_emoticon" in tp.insert) return TpEmoticon;
if ("backup_text" in tp.insert) return TpBackupText;
if ("link_card" in tp.insert) return TpLinkCard;
if ("custom_emoticon" in tp.insert) return TpEmoticon;
if ("divider" in tp.insert) return TpDivider;
if ("game_user_info" in tp.insert) return TpUid;
if ("image" in tp.insert) return TpImage;
if ("link_card" in tp.insert) return TpLinkCard;
if ("mention" in tp.insert) return TpMention;
if ("video" in tp.insert) return TpVideo;
if ("villa_card" in tp.insert) return TpVillaCard;
if ("vod" in tp.insert) return TpVod;
if ("vote" in tp.insert) return TpVote;
return TpUnknown;
}

211
src/components/viewPost/tp-villaCard.vue Normal file
View File

@@ -0,0 +1,211 @@
<template>
<div class="tp-vc-box">
<div class="tp-vc-lock">
<img src="/source/UI/empty.webp" alt="empty" />
<span>该功能已下线</span>
</div>
<div class="tp-vc-cover">
<TMiImg :src="props.data.insert.villa_card.villa_cover" :ori="true" alt="bg" />
</div>
<div class="tp-vc-info">
<div class="tp-vci-top">
<div class="tp-vc-name">{{ props.data.insert.villa_card.villa_name }}</div>
<span>|</span>
<div class="tp-vc-owner">
<TMiImg alt="topIcon" :src="props.data.insert.villa_card.owner_avatar_url" :ori="true" />
<span>{{ props.data.insert.villa_card.owner_nickname }}</span>
</div>
</div>
<div class="tp-vc-tags">
<div class="tp-vc-tag">
<v-icon>mdi-account-group</v-icon>
<span>{{ props.data.insert.villa_card.villa_member_num }}</span>
</div>
<div
v-for="(tag, index) in props.data.insert.villa_card?.tag_list"
:key="index"
class="tp-vc-tag"
>
<v-icon>mdi-tag</v-icon>
<span>{{ tag }}</span>
</div>
</div>
<span class="tp-vc-desc">{{ props.data.insert.villa_card.villa_introduce }}</span>
</div>
<div class="tp-vc-icon">
<TMiImg alt="icon" :src="props.data.insert.villa_card.villa_avatar_url" :ori="true" />
</div>
</div>
</template>
<script lang="ts" setup>
import TMiImg from "@comp/app/t-mi-img.vue";
type VillaRoom = {
room_id: string;
room_name: string;
sender_avatar_list: Array<string>;
sender_num: string;
};
type TpVillaCard = {
insert: {
villa_card: {
villa_id: string;
villa_name: string;
villa_avatar_url: string;
villa_cover: string;
owner_uid: string;
owner_nickname: string;
owner_avatar_url: string;
villa_introduce?: string;
tag_list?: string[];
villa_member_num: string;
is_official?: boolean;
is_available: boolean;
hot_member_avatar?: string[];
hot_room?: VillaRoom;
};
};
};
type TpVillaCardProps = { data: TpVillaCard };
const props = defineProps<TpVillaCardProps>();
console.warn("tpVillaCard[Deprecated]", props.data.insert);
</script>
<style lang="css" scoped>
.tp-vc-box {
position: relative;
display: flex;
overflow: hidden;
height: 120px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
border: 1px solid var(--common-shadow-2);
border-radius: 10px;
margin: 10px auto;
}
.tp-vc-lock {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(1px);
background: var(--common-shadow-t-2);
color: var(--tgc-od-red);
font-family: var(--font-title);
img {
width: 80px;
height: 80px;
}
}
.tp-vc-cover {
position: relative;
z-index: 1;
height: 100%;
opacity: 0.3;
img {
height: 100%;
object-fit: contain;
}
}
.tp-vc-info {
position: relative;
z-index: 1;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 8px;
background: var(--box-bg-1);
opacity: 0.3;
row-gap: 4px;
}
.tp-vci-top {
position: relative;
display: flex;
align-items: center;
justify-content: center;
line-height: 28px;
}
.tp-vc-name {
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
}
.tp-vc-owner {
display: flex;
color: var(--common-text-title);
column-gap: 4px;
}
.tp-vc-owner img {
width: 28px;
height: 28px;
border-radius: 50%;
}
.tp-vc-owner span {
color: var(--common-text-title);
font-family: var(--box-text-1);
font-size: 20px;
}
.tp-vc-tags {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.tp-vc-tag {
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 5px;
background: var(--box-bg-2);
color: var(--tgc-pink-1);
column-gap: 2px;
font-family: var(--font-title);
font-size: 12px;
}
.tp-vc-desc {
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 5px;
margin-top: auto;
background: var(--box-bg-2);
color: var(--box-text-1);
}
.tp-vc-icon {
position: relative;
z-index: 1;
height: 100%;
opacity: 0.3;
img {
height: 100%;
object-fit: contain;
}
}
</style>