From 64ee8a36dcd0cd00160395d586c3f618baf5be82 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 7 Dec 2023 01:23:55 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

*完善活动链接识别
*调整特殊文本偏移
*调整链接卡片图片宽度
*大别野卡片样式重构
---
 src/components/post/tp-linkCard.vue  |   1 +
 src/components/post/tp-mention.vue   |  39 +++++-
 src/components/post/tp-text.vue      |  13 +-
 src/components/post/tp-villaCard.vue | 182 ++++++++++++++++++++-------
 4 files changed, 182 insertions(+), 53 deletions(-)

diff --git a/src/components/post/tp-linkCard.vue b/src/components/post/tp-linkCard.vue
index 58e96be2..de187318 100644
--- a/src/components/post/tp-linkCard.vue
+++ b/src/components/post/tp-linkCard.vue
@@ -71,6 +71,7 @@ async function toLink() {
 }
 
 .tp-link-card-box img {
+  max-width: 50%;
   max-height: 180px;
   border-radius: 10px;
   cursor: pointer;
diff --git a/src/components/post/tp-mention.vue b/src/components/post/tp-mention.vue
index 65c75484..dcd85bd0 100644
--- a/src/components/post/tp-mention.vue
+++ b/src/components/post/tp-mention.vue
@@ -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>
diff --git a/src/components/post/tp-text.vue b/src/components/post/tp-text.vue
index 9cb98cb9..62f8e0cb 100644
--- a/src/components/post/tp-text.vue
+++ b/src/components/post/tp-text.vue
@@ -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 {
diff --git a/src/components/post/tp-villaCard.vue b/src/components/post/tp-villaCard.vue
index 3241f702..732c867c 100644
--- a/src/components/post/tp-villaCard.vue
+++ b/src/components/post/tp-villaCard.vue
@@ -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>