From 30985812355b0232330e6a3c1e398f404b0214aa Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 29 Jan 2026 23:27:52 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E8=A1=A8=E6=83=85=E5=8A=A0=E8=BD=BD=E5=A4=B1=E8=B4=A5=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E9=87=8D=E6=96=B0=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/viewPost/tp-emoticon.vue | 42 +++++++++++++++++++------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/viewPost/tp-emoticon.vue b/src/components/viewPost/tp-emoticon.vue
index 8627941c..6c8e9022 100644
--- a/src/components/viewPost/tp-emoticon.vue
+++ b/src/components/viewPost/tp-emoticon.vue
@@ -1,31 +1,33 @@
 <!-- 自定义表情组件 -->
 <template>
-  <div class="tp-emo-box" title="自定义表情" v-if="localUrl !== undefined">
+  <div v-if="localUrl !== undefined" class="tp-emo-box" title="自定义表情">
     <img
-      :src="localUrl"
-      @click="showOverlay = true"
+      ref="emoticonRef"
       :alt="props.data.insert.custom_emoticon.hash"
+      :src="localUrl"
+      @click="handleEmoticonClick"
+      @error="handleEmoticonError"
     />
-    <div class="tp-emo-info" v-if="props.data.insert.custom_emoticon.size.width > 100">
+    <div v-if="props.data.insert.custom_emoticon.size.width > 100" class="tp-emo-info">
       自定义表情
     </div>
   </div>
-  <div v-else class="tp-image-load" :title="props.data.insert.custom_emoticon.url">
+  <div v-else :title="props.data.insert.custom_emoticon.url" class="tp-image-load">
     <v-progress-circular :indeterminate="true" color="primary" size="small" />
     <span>加载中...</span>
   </div>
   <VpOverlayImage
-    :image="image"
     v-model="showOverlay"
-    v-model:link="localUrl"
-    :ori="true"
-    :format="fmt"
     v-model:bgColor="bgColor"
+    v-model:link="localUrl"
+    :format="fmt"
+    :image="image"
+    :ori="true"
   />
 </template>
 <script lang="ts" setup>
 import { saveImgLocal } from "@utils/TGShare.js";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef } from "vue";
 
 import type { TpImage } from "./tp-image.vue";
 import VpOverlayImage from "./vp-overlay-image.vue";
@@ -73,6 +75,8 @@ const props = defineProps<TpEmoticonProps>();
 const localUrl = ref<string>();
 const showOverlay = ref<boolean>(false);
 const bgColor = ref<string>("transparent");
+const loadErr = ref<boolean>(false);
+const emoticonEl = useTemplateRef<HTMLImageElement>("emoticonRef");
 const fmt = computed<string>(() => getImageExt());
 const image = computed<TpImage>(() => ({
   insert: { image: props.data.insert.custom_emoticon.url },
@@ -97,6 +101,24 @@ function getImageExt(): string {
   const arr = props.data.insert.custom_emoticon.url.split(".");
   return arr[arr.length - 1];
 }
+
+async function handleEmoticonClick(): Promise<void> {
+  if (loadErr.value) {
+    localUrl.value = undefined;
+    await nextTick();
+    localUrl.value = await saveImgLocal(props.data.insert.custom_emoticon.url);
+    return;
+  }
+  showOverlay.value = true;
+}
+
+function handleEmoticonError(): void {
+  if (!emoticonEl.value) return;
+  loadErr.value = true;
+  emoticonEl.value.alt = "自定义表情";
+  emoticonEl.value.title = props.data.insert.custom_emoticon.url;
+  emoticonEl.value.style.cursor = "default";
+}
 </script>
 <style lang="scss" scoped>
 .tp-emo-box {