♻️ 复用方法提出来，暂时砍掉数值渲染

src/components/userCharacter/tuc-detail-desc-constellation.vue

@@ -19,33 +19,20 @@
     </template>
     <template #desc>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-html="parseDesc(props.modelValue.description)"></span>
+      <span v-html="parseHtmlText(props.modelValue.description)"></span>
     </template>
   </TucDetailDesc>
 </template>
 <script lang="ts" setup>
 import TucDetailConstellation from "./tuc-detail-constellation.vue";
 import TucDetailDesc from "./tuc-detail-desc.vue";
+import { parseHtmlText } from "../../utils/toolFunc";
 
 interface TucDetailDescConstellationProps {
   modelValue: TGApp.Sqlite.Character.RoleConstellation;
 }
 
 const props = defineProps<TucDetailDescConstellationProps>();
-
-// 解析描述
-function parseDesc(desc: string): string {
-  const reg = /<color=(.*?)>(.*?)<\/color>/g;
-  let match = reg.exec(desc);
-  while (match !== null) {
-    const color = match[1];
-    const text = match[2];
-    desc = desc.replace(match[0], `<span title="${text}" style="color: ${color};">${text}</span>`);
-    match = reg.exec(desc);
-  }
-  desc = desc.replace(/\\n/g, "<br />");
-  return desc;
-}
 </script>
 <style lang="css" scoped>
 .tuc-ddc-content {

src/components/wiki/twc-constellations.vue

@@ -21,7 +21,7 @@
         :key="item.Id"
         class="twc-constellation-desc"
       >
-        <span v-html="parseDesc(item.Description)"></span>
+        <span v-html="parseHtmlText(item.Description)"></span>
       </v-window-item>
     </v-window>
   </div>
@@ -29,28 +29,14 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+import { parseHtmlText } from "../../utils/toolFunc";
+
 interface TwcConstellationProps {
   data: TGApp.Plugins.Hutao.Character.RhisdTalent[];
 }
 
 const props = defineProps<TwcConstellationProps>();
 const tab = ref<string>();
-
-function parseDesc(desc: string): string {
-  const reg = /<color=(.*?)>(.*?)<\/color>/g;
-  let match = reg.exec(desc);
-  while (match !== null) {
-    const color = match[1];
-    const text = match[2];
-    desc = desc.replace(
-      match[0],
-      `<span title="${text}" style="color: ${color};font-weight: bold;">${text}</span>`,
-    );
-    match = reg.exec(desc);
-  }
-  desc = desc.replace(/\\n/g, "<br />");
-  return desc;
-}
 </script>
 <style lang="css" scoped>
 .twc-constellations-box {

src/components/wiki/twc-skills.vue

@@ -16,7 +16,9 @@
     </v-tabs>
     <v-window v-model="tab">
       <v-window-item :value="item.name" v-for="(item, index) in tabValues" :key="index">
-        {{ data[index] }}
+        <div class="twc-skill-special">
+          <span v-html="parseHtmlText(data[index].Description)"></span>
+        </div>
       </v-window-item>
     </v-window>
   </div>
@@ -24,8 +26,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 
+import { parseHtmlText } from "../../utils/toolFunc";
+
 interface TwcSkillsProps {
-  data: TGApp.Plugins.Hutao.Character.RhisdSkill[];
+  data: TGApp.App.Character.WikiSkill[];
 }
 
 const props = defineProps<TwcSkillsProps>();
@@ -62,4 +66,13 @@ onMounted(() => {
 .dark .twc-skill-tab img {
   filter: brightness(0.75);
 }
+
+.twc-skill-normal {
+  display: flex;
+}
+
+.twc-skill-special {
+  padding-left: 10px;
+  white-space: pre-wrap;
+}
 </style>