From 1d0b0704516f1c739e782751defe054b3ddcb82a Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sun, 10 Dec 2023 13:12:48 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E8=A1=A8?=
 =?UTF-8?q?=E6=83=85=E5=8C=85=E6=B8=B2=E6=9F=93=E9=94=99=E8=AF=AF=EF=BC=8C?=
 =?UTF-8?q?=E7=BC=BA=E4=B9=8F=E6=97=B6=E8=87=AA=E5=8A=A8=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tp-text.vue | 64 +++++++++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/components/post/tp-text.vue b/src/components/post/tp-text.vue
index ed6d10d3..5b16bfe2 100644
--- a/src/components/post/tp-text.vue
+++ b/src/components/post/tp-text.vue
@@ -10,6 +10,12 @@
   <span v-else-if="mode == 'emoji'" class="tp-text-emoji">
     <img :src="getEmojiUrl()" :alt="getEmojiName()" :title="getEmojiName()" />
   </span>
+  <TpText
+    v-else-if="mode == 'emojis'"
+    v-for="(emoji, index) in emojis"
+    :data="emoji"
+    :key="index"
+  />
   <span v-else :style="getTextStyle()" class="tp-text-span">
     {{ props.data.insert }}
   </span>
@@ -41,19 +47,63 @@ interface TpTextProps {
 const props = defineProps<TpTextProps>();
 const mode = ref<string>("text");
 const router = useRouter();
+const localEmojis = ref(localStorage.getItem("emojis"));
+const emojis = ref<TpText[]>([]);
 
 console.log("tpText", JSON.stringify(props.data.insert), toRaw(props.data)?.attributes);
 
-onMounted(() => {
+onMounted(async () => {
   if (props.data.attributes && "link" in props.data.attributes) {
     mode.value = "link";
-  } else if (props.data.insert.startsWith("_(") && props.data.insert.endsWith(")")) {
+    return;
+  }
+  const count = countEmoji(props.data.insert);
+  if (count == 1) {
     mode.value = "emoji";
+  } else if (count > 1) {
+    mode.value = "emojis";
+    emojis.value = await parseEmojis(props.data);
   } else {
     mode.value = "text";
   }
 });
 
+// 获取可能的 emoji 数量
+function countEmoji(text: string): number {
+  const reg = /_\((.*?)\)/g;
+  const res = text.match(reg);
+  if (res) {
+    return res.length;
+  }
+  return 0;
+}
+
+// 解析表情
+async function parseEmojis(text: TpText): Promise<TpText[]> {
+  if (localEmojis.value == null) {
+    localEmojis.value = JSON.stringify(await getEmojis());
+    localStorage.setItem("emojis", localEmojis.value);
+  }
+  const parseEmojis = JSON.parse(localEmojis.value);
+  const res: TpText[] = [];
+  const reg = /_\((.*?)\)/g;
+  const resSplit = text.insert.split(reg);
+  for (let i = 0; i < resSplit.length; i++) {
+    const item = resSplit[i];
+    if (parseEmojis[item]) {
+      res.push({
+        insert: `_(${item})`,
+      });
+    } else {
+      res.push({
+        insert: item,
+        attributes: text.attributes,
+      });
+    }
+  }
+  return res;
+}
+
 // 解析文本样式
 function getTextStyle(): StyleValue {
   const style = <Array<StyleValue>>[];
@@ -130,8 +180,8 @@ function isMysAct(url: string): boolean {
 
 // 解析表情链接
 function getEmojiUrl(): string {
-  let emojis = localStorage.getItem("emojis");
-  if (!emojis) {
+  if (localEmojis.value == null || !JSON.parse(localEmojis.value)[getEmojiName()]) {
+    console.warn("tpEmoji unknown", getEmojiName());
     getEmojis().then((res) => {
       if ("retcode" in res) {
         console.error(res);
@@ -142,13 +192,13 @@ function getEmojiUrl(): string {
         mode.value = "text";
         return "";
       } else {
-        emojis = JSON.stringify(res);
-        localStorage.setItem("emojis", emojis);
+        localEmojis.value = JSON.stringify(res);
+        localStorage.setItem("emojis", localEmojis.value);
       }
     });
   }
   const emojiName = getEmojiName();
-  return JSON.parse(<string>emojis)[emojiName];
+  return JSON.parse(<string>localEmojis.value)[emojiName];
 }
 
 function getEmojiName() {