Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

⚡️ 完善组件样式

Browse Source 
*完善活动链接识别
*调整特殊文本偏移
*调整链接卡片图片宽度
*大别野卡片样式重构
This commit is contained in:
BTMuli
2023-12-07 01:23:55 +08:00
parent 71d7337384
commit 64ee8a36dc
4 changed files with 182 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/post/tp-linkCard.vue
View File

@@ -71,6 +71,7 @@ async function toLink() {
}
.tp-link-card-box img {
max-width: 50%;
max-height: 180px;
border-radius: 10px;
cursor: pointer;

39
src/components/post/tp-mention.vue
View File

@@ -1,10 +1,15 @@
<template>
<span class="mys-post-link" @click="toLink()">
<span class="tp-mention-box" @click="toLink()">
<v-icon size="small">mdi-account-circle-outline</v-icon>
<span>{{ props.data.insert.mention.nickname }}</span>
</span>
</template>
<script lang="ts" setup>
import { toRaw } from "vue";
import TGClient from "../../utils/TGClient";
import showConfirm from "../func/confirm";
interface TpMention {
insert: {
mention: {
@@ -20,8 +25,34 @@ interface TpMentionProps {
const props = defineProps<TpMentionProps>();
function toLink() {
const prefix = "https://www.miyoushe.com/ys/accountCenter/postList?id=";
window.open(prefix + props.data.insert.mention.uid);
console.log("tpMention", props.data.insert.mention.uid, toRaw(props.data).insert.mention);
async function toLink(): Promise<void> {
const uid = props.data.insert.mention.uid;
const confirm = await showConfirm({
title: "跳转提示",
text: "是否采用内置 JSBridge 跳转？",
});
if (confirm) {
const prefix = "https://m.miyoushe.com/ys/#/accountCenter/0?id=";
await TGClient.open("mention", `${prefix}${uid}`);
} else {
const prefix = "https://www.miyoushe.com/ys/accountCenter/postList?id=";
window.open(`${prefix}${uid}`);
}
}
</script>
<style lang="css" scoped>
.tp-mention-box {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
margin: 0 2px;
color: #00c3ff;
cursor: pointer;
transform: translateY(2px);
}
</style>

13
src/components/post/tp-text.vue
View File

@@ -1,5 +1,10 @@
<template>
<span v-if="mode == 'link'" class="tp-text-link" @click="toLink()">
<span
v-if="mode == 'link'"
class="tp-text-link"
@click="toLink()"
:title="props.data.attributes?.link"
>
<v-icon size="small">mdi-link-variant</v-icon>{{ props.data.insert }}
</span>
<span v-else-if="mode == 'emoji'" class="tp-text-emoji">
@@ -112,8 +117,11 @@ async function toLink() {
}
function isMysAct(url: string): boolean {
const prefix = ["https://act.mihoyo.com/", "https://mhyurl.cn"];
// link.startsWith("https://webstatic.mihoyo.com/ys/event/e20220303-birthday/")
if (url.startsWith("https://act.mihoyo.com")) return true;
for (const pre of prefix) {
if (url.startsWith(pre)) return true;
}
if (url.startsWith("https://webstatic.mihoyo.com")) {
return url.includes("event");
}
@@ -154,6 +162,7 @@ function getEmojiName() {
justify-content: center;
color: #00c3ff;
cursor: pointer;
transform: translateY(2px);
}
.tp-text-emoji {

182
src/components/post/tp-villaCard.vue
View File

@@ -1,57 +1,42 @@
<template>
<div class="mys-post-div">
<div class="mys-post-villa-card">
<img
class="mys-post-villa-card-bg"
alt="bg"
:src="props.data.insert.villa_card.villa_cover"
/>
<div class="mys-post-villa-card-bg-before"></div>
<div class="mys-post-villa-card-flex">
<div class="mys-post-villa-card-top">
<img
alt="topIcon"
class="mys-post-villa-card-icon"
:src="props.data.insert.villa_card.villa_avatar_url"
/>
<div class="mys-post-villa-card-content">
<div class="mys-post-villa-card-title">
{{ props.data.insert.villa_card.villa_name }}
</div>
<div class="mys-post-villa-card-desc">
<img
class="mys-post-villa-card-desc-icon"
alt="topDesc"
:src="props.data.insert.villa_card.owner_avatar_url"
/>
<span class="mys-post-villa-card-desc-text">
{{ props.data.insert.villa_card.owner_nickname }} 创建
</span>
</div>
</div>
</div>
<div class="mys-post-villa-card-mid">
<div class="mys-post-villa-card-tag">
{{ props.data.insert.villa_card.villa_member_num }}人在聊
</div>
<div v-if="props.data.insert.villa_card.tag_list">
<div
v-for="(tag, index) in props.data.insert.villa_card.tag_list"
:key="index"
class="mys-post-villa-card-tag"
>
{{ tag }}
</div>
</div>
</div>
<div class="mys-post-villa-card-bottom">
{{ props.data.insert.villa_card.villa_introduce }}
<div
class="tp-villa-card-box"
:style="{
backgroundImage: 'url(' + props.data.insert.villa_card.villa_cover + ')',
}"
>
<div class="tp-villa-card-content">
<img alt="cardIcon" :src="props.data.insert.villa_card.villa_avatar_url" />
<div class="tp-villa-card-info">
<span class="tp-villa-card-name">{{ props.data.insert.villa_card.villa_name }}</span>
<span class="tp-villa-card-owner">
<img alt="topIcon" :src="props.data.insert.villa_card.owner_avatar_url" />
<span>{{ props.data.insert.villa_card.owner_nickname }} 创建</span>
</span>
</div>
</div>
<div class="tp-villa-card-tags">
<div class="tp-villa-card-desc">
{{ props.data.insert.villa_card.villa_introduce }}
</div>
<div class="tp-villa-card-tag">
{{ props.data.insert.villa_card.villa_member_num }} 人在聊
</div>
<div v-if="props.data.insert.villa_card.tag_list">
<div
v-for="(tag, index) in props.data.insert.villa_card.tag_list"
:key="index"
class="tp-villa-card-tag"
>
{{ tag }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { toRaw } from "vue";
interface VillaRoom {
room_id: string;
room_name: string;
@@ -85,4 +70,107 @@ interface TpVillaCardProps {
}
const props = defineProps<TpVillaCardProps>();
console.log(
"tpVillaCard",
props.data.insert.villa_card.villa_id,
toRaw(props.data).insert.villa_card,
);
</script>
<style lang="css" scoped>
.tp-villa-card-box {
position: relative;
display: flex;
overflow: hidden;
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 10px;
margin: 10px auto;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
row-gap: 10px;
}
.tp-villa-card-content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
column-gap: 10px;
}
.tp-villa-card-content img {
width: 80px;
height: 80px;
border-radius: 5px;
}
.tp-villa-card-info {
display: flex;
height: 80px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
row-gap: 5px;
}
.tp-villa-card-name {
color: var(--tgc-white-4);
font-family: var(--font-title);
font-size: 20px;
text-shadow: 0 0 5px var(--common-shadow-2);
}
.tp-villa-card-owner {
display: flex;
align-items: center;
padding: 5px;
border-radius: 20px 5px 5px 20px;
backdrop-filter: blur(5px);
background: rgb(0 0 0/30%);
color: var(--tgc-white-1);
column-gap: 5px;
}
.tp-villa-card-owner img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.tp-villa-card-owner span {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
}
.tp-villa-card-desc {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 5px;
margin-right: auto;
backdrop-filter: blur(5px);
background: rgb(0 0 0/30%);
color: var(--tgc-white-1);
}
.tp-villa-card-tags {
display: flex;
width: 100%;
column-gap: 5px;
}
.tp-villa-card-tag {
padding: 5px 10px;
border-radius: 5px;
backdrop-filter: blur(5px);
background: rgb(0 0 0/30%);
color: var(--tgc-white-1);
font-family: var(--font-title);
font-size: 12px;
}
</style>