♻️ 公告卡片组件抽离，支持分享

2025-12-12 09:18:14 +08:00 · 2024-10-11 17:02:07 +08:00
parent 454f9e9750
commit 67aa3b7363
2 changed files with 201 additions and 110 deletions
--- a/src/components/main/t-annocard.vue
+++ b/src/components/main/t-annocard.vue
@@ -0,0 +1,193 @@
+<template>
+  <div :id="`anno_card_${props.modelValue.id}`" class="anno-card">
+    <div class="anno-cover" :title="props.modelValue.title">
+      <img :src="localBanner" alt="cover" @click="createAnno" v-if="localBanner" />
+      <v-progress-circular color="primary" :indeterminate="true" />
+      <div class="anno-info">
+        <div class="anno-time">
+          <v-icon>mdi-clock-time-four-outline</v-icon>
+          <span>{{ props.modelValue.timeStr }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="anno-title" :title="props.modelValue.title" @click="shareAnno">
+      {{ parseTitle(props.modelValue.subtitle) }}
+    </div>
+    <div class="anno-label" :title="`标签：${props.modelValue.tagLabel}`">
+      <img :src="localTag" alt="tag" v-if="localTag" />
+      <v-icon v-else>mdi-tag</v-icon>
+      <span>{{ props.modelValue.tagLabel }}</span>
+    </div>
+    <div class="anno-id">{{ props.modelValue.id }}</div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from "vue";
+
+import TGLogger from "../../utils/TGLogger.js";
+import { generateShareImg, saveImgLocal } from "../../utils/TGShare.js";
+import { createTGWindow } from "../../utils/TGWindow.js";
+
+interface TAnnoCardProps {
+  region: string;
+  modelValue: TGApp.App.Announcement.ListCard;
+  lang: string;
+}
+
+const props = defineProps<TAnnoCardProps>();
+const localBanner = ref<string>();
+const localTag = ref<string>();
+
+onMounted(async () => {
+  localBanner.value = await saveImgLocal(props.modelValue.banner);
+  localTag.value = await saveImgLocal(props.modelValue.tagIcon);
+});
+
+watch(
+  () => props.modelValue,
+  async () => {
+    if (localBanner.value && localBanner.value.startsWith("blob:")) {
+      URL.revokeObjectURL(localBanner.value);
+    }
+    localBanner.value = await saveImgLocal(props.modelValue.banner);
+    if (localTag.value && localTag.value.startsWith("blob:")) {
+      URL.revokeObjectURL(localTag.value);
+    }
+    localTag.value = await saveImgLocal(props.modelValue.tagIcon);
+  },
+);
+
+onUnmounted(() => {
+  if (localBanner.value) URL.revokeObjectURL(localBanner.value);
+  if (localTag.value) URL.revokeObjectURL(localTag.value);
+});
+
+function parseTitle(title: string): string {
+  const dom = new DOMParser().parseFromString(title, "text/html");
+  return dom.body.innerText;
+}
+
+async function createAnno(): Promise<void> {
+  const annoPath = `/anno_detail/${props.region}/${props.modelValue.id}/${props.lang}`;
+  const annoTitle = `Anno_${props.modelValue.id} ${props.modelValue.title}`;
+  await TGLogger.Info(`[Announcements][createAnno][${props.modelValue.id}] 打开公告窗口`);
+  await createTGWindow(annoPath, "Sub_window", annoTitle, 960, 720, false, false);
+}
+
+async function shareAnno(): Promise<void> {
+  const fileName = `AnnoCard_${props.modelValue.id}_${props.modelValue.subtitle}`;
+  const element = <HTMLElement>document.querySelector(`#anno_card_${props.modelValue.id}`);
+  await generateShareImg(fileName, element, 2.5);
+}
+</script>
+<style lang="css" scoped>
+.anno-card {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  box-shadow: 2px 2px 5px var(--common-shadow-2);
+}
+
+.anno-cover {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 36 / 13;
+}
+
+.anno-cover img {
+  min-width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  transition: all 0.3s linear;
+}
+
+.anno-title {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding: 5px;
+  cursor: pointer;
+  font-size: 18px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.anno-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  background: rgb(0 0 0/50%);
+  font-size: 12px;
+}
+
+.anno-time {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 5px;
+  color: var(--tgc-white-1);
+  gap: 5px;
+}
+
+.anno-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  background: var(--common-shadow-2);
+  border-bottom-left-radius: 5px;
+  box-shadow: 0 0 10px var(--tgc-dark-1);
+  color: var(--tgc-white-1);
+  text-shadow: 0 0 5px var(--tgc-dark-1);
+}
+
+.anno-label img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.anno-cover img:hover {
+  cursor: pointer;
+  transform: scale(1.1);
+  transition: all 0.3s linear;
+}
+
+.anno-id {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  background: var(--common-shadow-1);
+  border-bottom-right-radius: 5px;
+  border-top-left-radius: 5px;
+  box-shadow: 2px 2px 5px var(--tgc-dark-1);
+  color: var(--tgc-white-1);
+  font-size: 12px;
+  text-shadow: 0 0 5px var(--tgc-dark-1);
+}
+</style>
--- a/src/pages/common/Announcements.vue
+++ b/src/pages/common/Announcements.vue
@@ -42,22 +42,13 @@
  <v-window v-model="tab">
    <v-window-item v-for="(value, index) in tabValues" :key="index" :value="value">
      <div class="anno-grid">
-        <v-card :rounded="true" v-for="item in annoCards[value]" :key="item.id">
-          <div class="anno-cover" :title="item.title">
-            <img :src="item.banner" alt="cover" @click="createAnno(item)" />
-            <div class="anno-info">
-              <div class="anno-time">
-                <v-icon>mdi-clock-time-four-outline</v-icon>
-                <span>{{ item.timeStr }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="anno-title" :title="item.title">{{ parseTitle(item.subtitle) }}</div>
-          <div class="anno-label" :title="`标签：${item.tagLabel}`">
-            <img :src="item.tagIcon" alt="tag" />
-            <span>{{ item.tagLabel }}</span>
-          </div>
-        </v-card>
+        <TAnnocard
+          v-for="item in annoCards[value]"
+          :key="item.id"
+          :model-value="item"
+          :region="curRegion"
+          :lang="curLang"
+        />
      </div>
    </v-window-item>
  </v-window>
@@ -68,10 +59,10 @@ import { nextTick, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";

 import showSnackbar from "../../components/func/snackbar.js";
+import TAnnocard from "../../components/main/t-annocard.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import { useAppStore } from "../../store/modules/app.js";
 import TGLogger from "../../utils/TGLogger.js";
-import { createTGWindow } from "../../utils/TGWindow.js";
 import { AnnoLang, AnnoServer } from "../../web/request/getAnno.js";
 import TGRequest from "../../web/request/TGRequest.js";
 import TGUtils from "../../web/utils/TGUtils.js";
@@ -235,22 +226,10 @@ function getAnnoTime(content: string): string | false {
  return false;
 }

-function parseTitle(title: string): string {
-  const dom = new DOMParser().parseFromString(title, "text/html");
-  return dom.body.innerText;
-}
-
 async function switchNews(): Promise<void> {
  await TGLogger.Info("[Announcements][switchNews] 切换米游社咨讯");
  await router.push("/news/2");
 }
-
-async function createAnno(item: TGApp.App.Announcement.ListCard): Promise<void> {
-  const annoPath = `/anno_detail/${curRegion.value}/${item.id}/${curLang.value}`;
-  const annoTitle = `Anno_${item.id} ${item.title}`;
-  await TGLogger.Info(`[Announcements][createAnno][${item.id}] 打开公告窗口`);
-  await createTGWindow(annoPath, "Sub_window", annoTitle, 960, 720, false, false);
-}
 </script>

 <style lang="css" scoped>
@@ -292,85 +271,4 @@ async function createAnno(item: TGApp.App.Announcement.ListCard): Promise<void>
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
 }
-
-.anno-cover {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 36 / 13;
-}
-
-.anno-cover img {
-  min-width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  transition: all 0.3s linear;
-}
-
-.anno-title {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  padding: 5px;
-  font-size: 18px;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.anno-info {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: rgb(0 0 0/50%);
-  font-size: 12px;
-}
-
-.anno-time {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin: 5px;
-  color: var(--tgc-white-1);
-  gap: 5px;
-}
-
-.anno-label {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 5px;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: var(--common-shadow-2);
-  border-bottom-left-radius: 5px;
-  box-shadow: 0 0 10px var(--tgc-dark-1);
-  color: var(--tgc-white-1);
-  text-shadow: 0 0 5px var(--tgc-dark-1);
-}
-
-.anno-label img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.anno-cover img:hover {
-  cursor: pointer;
-  transform: scale(1.1);
-  transition: all 0.3s linear;
-}
 </style>