⚡️ 完善组件样式

*完善活动链接识别 *调整特殊文本偏移 *调整链接卡片图片宽度 *大别野卡片样式重构
BTMuli · Dec 6, 2023 · 64ee8a3 · 64ee8a3
1 parent 71d7337
commit 64ee8a3
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>