💄 调整文本部分的样式

src/components/post/tp-text.vue

@@ -6,7 +6,7 @@
     :title="props.data.attributes?.link"
     :style="getTextStyle()"
   >
-    <v-icon size="small">mdi-link-variant</v-icon>
+    <v-icon size="small" v-if="!props.data.insert.startsWith('>>')">mdi-link-variant</v-icon>
     <span>{{ props.data.insert }}</span>
   </div>
   <span v-else-if="mode == 'emoji'" class="tp-text-emoji">

src/components/post/tp-texts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="getLineStyle()" class="tp-texts">
+  <div :style="getLineStyle()" :class="getClass()" :title="getTitle()">
     <component
       :is="getComp(text)"
       v-for="(text, index) in props.data.children"
@@ -31,22 +31,32 @@ function getComp(text: TpTextType | TpMentionType): string {
   return TpMention;
 }
 
+function getClass(): string {
+  if (props.data.attributes && props.data.attributes.header) {
+    return `tp-texts tp-texts-header${props.data.attributes.header}`;
+  }
+  return "tp-texts";
+}
+
+function getTitle(): string {
+  if (props.data.attributes && props.data.attributes.link) {
+    return props.data.attributes.link;
+  }
+  if (props.data.attributes && props.data.attributes.header) {
+    return `H${props.data.attributes.header}`;
+  }
+  return "";
+}
+
 function getLineStyle(): StyleValue {
   const style = <Array<StyleValue>>[];
   if (props.data.attributes === undefined) {
     return style;
   }
-  const ruleBold: StyleValue = "fontFamily: var(--font-title)";
-  const headerFontSizes = ["2rem", "1.75rem", "1.5rem", "1.25rem", "1rem", "0.75rem"];
   if (props.data.attributes.align) {
     const ruleAlign: StyleValue = `textAlign: ${props.data.attributes.align}`;
     style.push(ruleAlign);
   }
-  if (props.data.attributes.header) {
-    const ruleHeader: StyleValue = `fontSize: ${headerFontSizes[props.data.attributes.header - 1]}`;
-    style.push(ruleHeader);
-    style.push(ruleBold);
-  }
   return style;
 }
 </script>
@@ -54,4 +64,37 @@ function getLineStyle(): StyleValue {
 .tp-texts {
   white-space: pre-wrap;
 }
+
+.tp-texts-header1,
+.tp-texts-header2,
+.tp-texts-header3,
+.tp-texts-header4,
+.tp-texts-header5,
+.tp-texts-header6 {
+  font-family: var(--font-title);
+}
+
+.tp-texts-header1 {
+  font-size: 24px;
+}
+
+.tp-texts-header2 {
+  font-size: 20px;
+}
+
+.tp-texts-header3 {
+  font-size: 18px;
+}
+
+.tp-texts-header4 {
+  font-size: 16px;
+}
+
+.tp-texts-header5 {
+  font-size: 14px;
+}
+
+.tp-texts-header6 {
+  font-size: 12px;
+}
 </style>