From 7a36ab66659f71f4643f940ad2a28b9cf1cb3bb2 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 19 Dec 2023 21:07:28 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E5=A4=8D=E7=94=A8?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=E6=8F=90=E5=87=BA=E6=9D=A5=EF=BC=8C=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E7=A0=8D=E6=8E=89=E6=95=B0=E5=80=BC=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tuc-detail-desc-constellation.vue         | 17 ++------------
 src/components/wiki/twc-constellations.vue    | 20 +++-------------
 src/components/wiki/twc-skills.vue            | 17 ++++++++++++--
 src/plugins/Hutao/types/Character.d.ts        |  4 ++--
 src/types/App/Character.d.ts                  | 23 +++++++++++++++++--
 src/utils/toolFunc.ts                         | 19 +++++++++++++++
 6 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/src/components/userCharacter/tuc-detail-desc-constellation.vue b/src/components/userCharacter/tuc-detail-desc-constellation.vue
index a320ac50..f3f7dbc6 100644
--- a/src/components/userCharacter/tuc-detail-desc-constellation.vue
+++ b/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 {
diff --git a/src/components/wiki/twc-constellations.vue b/src/components/wiki/twc-constellations.vue
index 28c96224..679bfe34 100644
--- a/src/components/wiki/twc-constellations.vue
+++ b/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 {
diff --git a/src/components/wiki/twc-skills.vue b/src/components/wiki/twc-skills.vue
index 0f39b5d1..72ed7b0a 100644
--- a/src/components/wiki/twc-skills.vue
+++ b/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>
diff --git a/src/plugins/Hutao/types/Character.d.ts b/src/plugins/Hutao/types/Character.d.ts
index ae9037be..c4d8f2e8 100644
--- a/src/plugins/Hutao/types/Character.d.ts
+++ b/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;
diff --git a/src/types/App/Character.d.ts b/src/types/App/Character.d.ts
index 5c7c1153..19a77214 100644
--- a/src/types/App/Character.d.ts
+++ b/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[];
diff --git a/src/utils/toolFunc.ts b/src/utils/toolFunc.ts
index cee06ff7..b7b5d736 100644
--- a/src/utils/toolFunc.ts
+++ b/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;
+}