🐛 修复 wcag-color 无法对比 keyword 导致的渲染异常

src/components/viewPost/tp-texts.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    class="tp-texts"
     :class="{
       'tp-inline': props.data.attributes === undefined || props.data.attributes.align === undefined,
       'tp-texts-header1': props.data.attributes && props.data.attributes.header === 1,
@@ -11,17 +10,18 @@
       'tp-texts-header6': props.data.attributes && props.data.attributes.header === 6,
     }"
     :title="getTitle()"
+    class="tp-texts"
   >
     <component
       :is="getComp(text)"
       v-for="(text, index) in props.data.children"
-      :data="text"
       :key="index"
+      :data="text"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import type { Component } from "vue";
+import { type Component, toRaw } from "vue";
 
 import TpImage from "./tp-image.vue";
 import TpMention, { type TpMention as TpMentionType } from "./tp-mention.vue";
@@ -32,6 +32,7 @@ type TpTexts = { children: Array<TpTextType | TpMentionType> } & TpTextType;
 type TpTextsProps = { data: TpTexts };
 
 const props = defineProps<TpTextsProps>();
+console.log("tpTexts", toRaw(props.data));
 
 function getComp(text: TpTextType | TpMentionType): Component {
   if (typeof text.insert === "string") return TpText;

src/utils/colorFunc.ts

@@ -1,7 +1,8 @@
 /**
  * 颜色相关处理
- * @since Beta v0.9.0
+ * @since Beta v0.9.1
  */
+import { colord } from "colord";
 import { score } from "wcag-color";
 
 /**
@@ -29,13 +30,19 @@ export function getOdStarColor(star: number): string {
 
 /**
  * 判断颜色是否相似
- * @since Beta v0.9.0
+ * @since Beta v0.9.1
  * @param colorBg - 背景颜色
  * @param colorText - 文本颜色
  * @returns 是否相似
  */
 export function isColorSimilar(colorBg: string, colorText: string): boolean {
-  return score(colorText, colorBg) === "Fail";
+  let res = true;
+  try {
+    res = score(colord(colorBg).toHex(), colord(colorText).toHex()) === "Fail";
+  } catch (e) {
+    console.error("isColorSimilar", e);
+  }
+  return res;
 }
 
 /**