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

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>

src/plugins/Hutao/types/Character.d.ts

@@ -111,7 +111,7 @@ declare namespace TGApp.Plugins.Hutao.Character {
    * @memberof TGApp.Plugins.Hutao.Character
    * @description RawHutaoItem.SkillDepot.Skill => RhisdSkill
    * @property {number} GroupId 技能组编号
-   * @property {string[]} Proud.Description 技能描述
+   * @property {string[]} Proud.Descriptions 技能描述
    * @property {RhiParameter[]} Proud.Parameters 技能参数
    * @property {number} Id 技能编号
    * @property {string} Name 技能名称
@@ -122,7 +122,7 @@ declare namespace TGApp.Plugins.Hutao.Character {
   interface RhisdSkill {
     GroupId: number;
     Proud: {
-      Description: string[];
+      Descriptions: string[];
       Parameters: RhiParameter[];
     };
     Id: number;

src/types/App/Character.d.ts

@@ -20,7 +20,7 @@ declare namespace TGApp.App.Character {
    * @property {string} nameCard - 角色名片
    * @return WikiBriefInfo
    */
-  export interface WikiBriefInfo {
+  interface WikiBriefInfo {
     id: number;
     contentId: number;
     name: string;
@@ -32,6 +32,25 @@ declare namespace TGApp.App.Character {
     nameCard: string;
   }
 
+  /**
+   * @description Wiki 页详细信息-角色技能
+   * @since Beta v0.3.8
+   * @interface WikiSkill
+   * @memberof TGApp.Plugins.Hutao.Character
+   * @property {number} GroupId 技能组编号
+   * @property {number} Id 技能编号
+   * @property {string} Name 技能名称
+   * @property {string} Description 技能描述
+   * @property {string} Icon 技能图标
+   */
+  interface WikiSkill {
+    GroupId: number;
+    Id: number;
+    Name: string;
+    Description: string;
+    Icon: string;
+  }
+
   /**
    * @description Wiki 详细数据
    * @since Beta v0.3.8
@@ -80,7 +99,7 @@ declare namespace TGApp.App.Character {
     element: string;
     weapon: TGApp.Plugins.Hutao.Base.WeaponType;
     materials: TGApp.App.Calendar.Material[];
-    skills: TGApp.Plugins.Hutao.Character.RhisdSkill[];
+    skills: WikiSkill[];
     constellation: TGApp.Plugins.Hutao.Character.RhisdTalent[];
     talks: TGApp.Plugins.Hutao.Character.RhiFetter[];
     stories: TGApp.Plugins.Hutao.Character.RhiFetter[];

src/utils/toolFunc.ts

@@ -177,3 +177,22 @@ export function isColorSimilar(colorBg: string, colorText: string): boolean {
     : colorConvert.keyword.hex(<KEYWORD>colorText);
   return score(hexText, hexBg) === "Fail";
 }
+
+/**
+ * @description 解析带样式的文本
+ * @since Beta v0.3.8
+ * @param {string} desc - 带样式的文本
+ * @returns {string} 解析后的文本
+ */
+export function parseHtmlText(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;
+}