♻️ 优化代码

src/components/post/tp-linkCard.vue

@@ -1,22 +1,19 @@
 <template>
-  <div class="mys-post-link-card">
+  <div class="tp-link-card-box">
-    <div class="mys-post-link-card-cover">
+    <img :src="props.data.insert.link_card.cover" alt="cover" @click="toLink()" />
-      <img :src="props.data.insert.link_card.cover" alt="cover" />
+    <div class="tp-link-card-content">
-    </div>
+      <span>{{ props.data.insert.link_card.title }}</span>
-    <div class="mys-post-link-card-content">
+      <div v-if="props.data.insert.link_card.price" class="tp-link-card-price">
-      <div class="mys-post-link-card-title">
-        {{ props.data.insert.link_card.title }}
-      </div>
-      <div v-if="props.data.insert.link_card.price" class="mys-post-link-card-price">
         {{ props.data.insert.link_card.price }}
       </div>
-      <div @click="toLink()" class="mys-post-link-card-btn">
+      <div @click="toLink()" class="tp-link-card-btn">
         {{ props.data.insert.link_card.button_text ?? "详情" }} >
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { toRaw } from "vue";
 import { useRouter } from "vue-router";
 
 import { isMysPost } from "../../plugins/Mys/utils/parsePost";
@@ -46,6 +43,8 @@ interface TpLinkCardProps {
 const props = defineProps<TpLinkCardProps>();
 const router = useRouter();
 
+console.log("tpLinkCard", props.data.insert.link_card.card_id, toRaw(props.data).insert.link_card);
+
 async function toLink() {
   const link = props.data.insert.link_card.landing_url;
   if (isMysPost(link)) {
@@ -60,3 +59,55 @@ async function toLink() {
   }
 }
 </script>
+<style lang="css" scoped>
+.tp-link-card-box {
+  display: flex;
+  max-width: 100%;
+  padding: 10px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 10px;
+  background: var(--app-side-bg);
+  column-gap: 10px;
+}
+
+.tp-link-card-box img {
+  max-height: 180px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.tp-link-card-box img:hover {
+  scale: 0.9;
+}
+
+.tp-link-card-content {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--font-title);
+}
+
+.tp-link-card-content :nth-child(1) {
+  width: 100%;
+  color: var(--common-text-title);
+  font-size: 20px;
+  text-align: left;
+}
+
+.tp-link-card-price {
+  display: inline-block;
+  color: #ff6d6d;
+  font-size: 20px;
+}
+
+.tp-link-card-btn {
+  display: inline-block;
+  margin-left: auto;
+  color: #00c3ff;
+  cursor: pointer;
+  text-align: right;
+}
+</style>

src/components/post/tp-text.vue

@@ -88,10 +88,7 @@ async function toLink() {
         post_id: link.split("/").pop(),
       },
     });
-  } else if (
+  } else if (isMysAct(link)) {
-    link.startsWith("https://webstatic.mihoyo.com/ys/event/e20220303-birthday/") ||
-    link.startsWith("https://act.mihoyo.com")
-  ) {
     const resOpen = await showConfirm({
       title: "采用内置 JSBridge？",
       text: "取消则使用外部浏览器打开",
@@ -114,6 +111,15 @@ async function toLink() {
   }
 }
 
+function isMysAct(url: string): boolean {
+  // link.startsWith("https://webstatic.mihoyo.com/ys/event/e20220303-birthday/")
+  if (url.startsWith("https://act.mihoyo.com")) return true;
+  if (url.startsWith("https://webstatic.mihoyo.com")) {
+    return url.includes("event");
+  }
+  return false;
+}
+
 // 解析表情链接
 function getEmojiUrl(): string {
   let emojis = localStorage.getItem("emojis");