From 4729fc7d4a5eb20f6d34b6e69c013b70a1e4d4a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Sat, 9 Mar 2024 00:03:25 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=B8=96=E5=AD=90=E7=BB=93=E6=9E=84=E5=8C=96=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E5=96=84=E6=96=87=E6=9C=AC=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tp-backupText.vue |  1 +
 src/components/post/tp-divider.vue    |  1 +
 src/components/post/tp-image.vue      |  2 +-
 src/components/post/tp-linkCard.vue   |  1 +
 src/components/post/tp-mention.vue    |  1 +
 src/components/post/tp-parser.vue     | 17 ++++++-
 src/components/post/tp-text.vue       | 67 +++++++++++++++++++++++----
 src/components/post/tp-unknown.vue    |  1 +
 src/components/post/tp-video.vue      |  1 +
 src/components/post/tp-vod.vue        |  1 +
 src/components/post/tp-vote.vue       |  1 +
 11 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/src/components/post/tp-backupText.vue b/src/components/post/tp-backupText.vue
index 86af02aa..efe35ed5 100644
--- a/src/components/post/tp-backupText.vue
+++ b/src/components/post/tp-backupText.vue
@@ -42,6 +42,7 @@ interface TpBackupText {
 
 interface TpBackupTextProps {
   data: TpBackupText;
+  next: unknown;
 }
 
 const props = defineProps<TpBackupTextProps>();
diff --git a/src/components/post/tp-divider.vue b/src/components/post/tp-divider.vue
index 75b2f32d..2cd79c4a 100644
--- a/src/components/post/tp-divider.vue
+++ b/src/components/post/tp-divider.vue
@@ -21,6 +21,7 @@ interface TpDivider {
 
 interface TpDividerProps {
   data: TpDivider;
+  next: unknown;
 }
 
 const props = defineProps<TpDividerProps>();
diff --git a/src/components/post/tp-image.vue b/src/components/post/tp-image.vue
index 340f3cfc..db12d98c 100644
--- a/src/components/post/tp-image.vue
+++ b/src/components/post/tp-image.vue
@@ -27,9 +27,9 @@ export interface TpImage {
     align?: "center"; // 待补充
   };
 }
-
 interface TpImageProps {
   data: TpImage;
+  next: unknown;
 }
 
 const props = defineProps<TpImageProps>();
diff --git a/src/components/post/tp-linkCard.vue b/src/components/post/tp-linkCard.vue
index 68dc53c7..f116e5bd 100644
--- a/src/components/post/tp-linkCard.vue
+++ b/src/components/post/tp-linkCard.vue
@@ -39,6 +39,7 @@ interface TpLinkCard {
 
 interface TpLinkCardProps {
   data: TpLinkCard;
+  next: unknown;
 }
 
 const props = defineProps<TpLinkCardProps>();
diff --git a/src/components/post/tp-mention.vue b/src/components/post/tp-mention.vue
index 01351d1d..206413af 100644
--- a/src/components/post/tp-mention.vue
+++ b/src/components/post/tp-mention.vue
@@ -22,6 +22,7 @@ interface TpMention {
 
 interface TpMentionProps {
   data: TpMention;
+  next: unknown;
 }
 
 const props = defineProps<TpMentionProps>();
diff --git a/src/components/post/tp-parser.vue b/src/components/post/tp-parser.vue
index dfb88cfb..daf2ccbc 100644
--- a/src/components/post/tp-parser.vue
+++ b/src/components/post/tp-parser.vue
@@ -1,5 +1,11 @@
 <template>
-  <component v-for="(tp, index) in props.data" :key="index" :is="getTpName(tp)" :data="tp" />
+  <component
+    v-for="(tp, index) in props.data"
+    :key="index"
+    :is="getTpName(tp, index)"
+    :data="tp"
+    :next="getTpNext(index)"
+  />
 </template>
 <script lang="ts" setup>
 import TpBackupText from "./tp-backupText.vue";
@@ -19,7 +25,7 @@ interface TpParserProps {
 
 const props = defineProps<TpParserProps>();
 
-function getTpName(tp: TGApp.Plugins.Mys.SctPost.Base) {
+function getTpName(tp: TGApp.Plugins.Mys.SctPost.Base, index: number) {
   if (typeof tp.insert === "string") {
     return TpText;
   } else if ("image" in tp.insert) {
@@ -41,4 +47,11 @@ function getTpName(tp: TGApp.Plugins.Mys.SctPost.Base) {
   }
   return TpUnknown;
 }
+
+function getTpNext(index: number) {
+  if (index + 1 >= props.data.length) {
+    return undefined;
+  }
+  return props.data[index + 1];
+}
 </script>
diff --git a/src/components/post/tp-text.vue b/src/components/post/tp-text.vue
index 87739a03..73ae9bbf 100644
--- a/src/components/post/tp-text.vue
+++ b/src/components/post/tp-text.vue
@@ -12,13 +12,21 @@
   </span>
   <TpText
     v-else-if="mode == 'emojis'"
-    v-for="(emoji, index) in emojis"
+    v-for="(emoji, indexE) in emojis"
     :data="emoji"
-    :key="index"
+    :key="indexE"
+    :next="indexE === emojis.length - 1 ? undefined : next"
   />
-  <span v-else :style="getTextStyle()" class="tp-text-span">
+  <TpText
+    v-else-if="mode == 'texts'"
+    v-for="(text, indexT) in texts"
+    :data="text"
+    :key="indexT"
+    :next="indexT === texts.length - 1 ? next : undefined"
+  />
+  <div v-else :style="getTextStyle()" class="tp-text-span">
     {{ props.data.insert }}
-  </span>
+  </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, StyleValue, toRaw } from "vue";
@@ -32,6 +40,7 @@ import showSnackbar from "../func/snackbar";
 interface TpText {
   insert: string;
   attributes?: {
+    header?: number;
     link?: string;
     bold?: boolean;
     color?: string;
@@ -41,12 +50,14 @@ interface TpText {
 
 interface TpTextProps {
   data: TpText;
+  next: TGApp.Plugins.Mys.SctPost.Base | undefined;
 }
 
 const props = defineProps<TpTextProps>();
 const mode = ref<string>("text");
 const localEmojis = ref(localStorage.getItem("emojis"));
 const emojis = ref<TpText[]>([]);
+const texts = ref<TpText[]>([]);
 const router = useRouter();
 
 console.log("tpText", JSON.stringify(props.data.insert), toRaw(props.data)?.attributes);
@@ -68,16 +79,47 @@ onMounted(async () => {
     emojis.value = res.map((i) => ({ insert: i, attributes: props.data.attributes }));
     return;
   }
+  if (props.data.insert.includes("\n") && props.data.insert !== "\n") {
+    mode.value = "texts";
+    const splits = props.data.insert.split("\n");
+    const temp = [];
+    for (let i = 0; i < splits.length; i++) {
+      if (splits[i] !== "") {
+        temp.push({ insert: splits[i], attributes: props.data.attributes });
+      }
+      if (i !== splits.length - 1) {
+        temp.push({ insert: "\n", attributes: props.data.attributes });
+      }
+    }
+    texts.value = temp;
+    return;
+  }
   mode.value = "text";
 });
 
 // 解析文本样式
 function getTextStyle(): StyleValue {
   const style = <Array<StyleValue>>[];
-  const data: TpText = <TpText>props.data;
+  let data: TpText;
+  if (props.data.insert === "\n") {
+    style.push("display: inline");
+    return style;
+  }
+  if (props.next?.insert === "\n") {
+    data = {
+      insert: props.data.insert,
+      attributes: {
+        ...props.data.attributes,
+        ...props.next.attributes,
+      },
+    };
+  } else {
+    data = props.data;
+  }
   if (data.attributes) {
+    const ruleBold: StyleValue = "fontFamily: var(--font-title)";
+    const headerFontSizes = ["2rem", "1.75rem", "1.5rem", "1.25rem", "1rem", "0.75rem"];
     if (data.attributes.bold) {
-      const ruleBold: StyleValue = "fontFamily: var(--font-title)";
       style.push(ruleBold);
     }
     if (data.attributes.color) {
@@ -88,12 +130,20 @@ function getTextStyle(): StyleValue {
       const ruleColor: StyleValue = `color: ${colorGet}`;
       style.push(ruleColor);
     }
-    // todo 这边效果不是很好
-    // refer: 45245869
     if (data.attributes.align) {
       const ruleAlign: StyleValue = `textAlign: ${data.attributes.align}`;
       style.push(ruleAlign);
     }
+    if (data.attributes.header) {
+      const ruleHeader: StyleValue = `fontSize: ${headerFontSizes[data.attributes.header - 1]}`;
+      style.push(ruleHeader);
+      style.push(ruleBold);
+    }
+    if (!data.attributes.align && !data.attributes.header) {
+      style.push("display: inline");
+    }
+  } else {
+    style.push("display: inline");
   }
   return style;
 }
@@ -179,5 +229,6 @@ function getEmojiName() {
 .tp-text-span {
   overflow-wrap: break-word;
   white-space: pre-wrap;
+  word-break: break-all;
 }
 </style>
diff --git a/src/components/post/tp-unknown.vue b/src/components/post/tp-unknown.vue
index 42577565..71840c69 100644
--- a/src/components/post/tp-unknown.vue
+++ b/src/components/post/tp-unknown.vue
@@ -10,6 +10,7 @@ import TGLogger from "../../utils/TGLogger";
 
 interface TpUnknownProps {
   data: TGApp.Plugins.Mys.SctPost.Empty;
+  next: unknown;
 }
 
 const props = defineProps<TpUnknownProps>();
diff --git a/src/components/post/tp-video.vue b/src/components/post/tp-video.vue
index 2f59bbbb..4de7cfad 100644
--- a/src/components/post/tp-video.vue
+++ b/src/components/post/tp-video.vue
@@ -38,6 +38,7 @@ interface TpVideo {
 
 interface TpVideoProps {
   data: TpVideo;
+  next: unknown;
 }
 
 const props = defineProps<TpVideoProps>();
diff --git a/src/components/post/tp-vod.vue b/src/components/post/tp-vod.vue
index 26cd148a..50a9656d 100644
--- a/src/components/post/tp-vod.vue
+++ b/src/components/post/tp-vod.vue
@@ -43,6 +43,7 @@ interface TpVod {
 
 interface TpVodProps {
   data: TpVod;
+  next: unknown;
 }
 
 const props = defineProps<TpVodProps>();
diff --git a/src/components/post/tp-vote.vue b/src/components/post/tp-vote.vue
index 94d444ac..cbc7ac53 100644
--- a/src/components/post/tp-vote.vue
+++ b/src/components/post/tp-vote.vue
@@ -36,6 +36,7 @@ interface TpVote {
 
 interface TpVoteProps {
   data: TpVote;
+  next: unknown;
 }
 
 interface TpVoteInfo {