From a04bdee7cb0bfcee68978987871abbc0e996d4b4 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 19 Dec 2023 18:10:03 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B1=20=E8=A7=92=E8=89=B2=20wiki=20?=
 =?UTF-8?q?=E5=91=BD=E5=BA=A7=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96=EF=BC=8C?=
 =?UTF-8?q?=E6=8A=80=E8=83=BD=E6=A0=B7=E5=BC=8F=E8=8D=89=E5=88=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/wiki/twc-constellations.vue | 10 ++--
 src/components/wiki/twc-skills.vue         | 69 ++++++++++++++++++++++
 src/views/tw-character.vue                 |  4 +-
 3 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 src/components/wiki/twc-skills.vue

diff --git a/src/components/wiki/twc-constellations.vue b/src/components/wiki/twc-constellations.vue
index 09c76451..e9c1ead4 100644
--- a/src/components/wiki/twc-constellations.vue
+++ b/src/components/wiki/twc-constellations.vue
@@ -39,7 +39,7 @@ function parseDesc(desc: string): string {
 .twc-constellations-box {
   display: flex;
   flex-direction: column;
-  row-gap: 5px;
+  row-gap: 10px;
 }
 
 .twc-constellations-title {
@@ -67,9 +67,11 @@ function parseDesc(desc: string): string {
 .twc-constellation-top img {
   width: 30px;
   height: 30px;
-  padding: 2px;
-  border-radius: 5px;
-  background: var(--common-shadow-4);
+  filter: brightness(0.25);
+}
+
+.dark .twc-constellation-top img {
+  filter: brightness(0.75);
 }
 
 .twc-constellation-top span {
diff --git a/src/components/wiki/twc-skills.vue b/src/components/wiki/twc-skills.vue
new file mode 100644
index 00000000..874df4b7
--- /dev/null
+++ b/src/components/wiki/twc-skills.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="twc-skills-box">
+    <v-tabs v-model="tab">
+      <v-tab
+        v-for="(item, index) in tabValues"
+        :key="index"
+        :value="item.name"
+        class="twc-skill-tab"
+      >
+        <!-- todo 换成本地资源 -->
+        <img :src="`https://api.ambr.top/assets/UI/${item.icon}.png`" alt="icon" />
+      </v-tab>
+    </v-tabs>
+    <v-window v-model="tab">
+      <v-window-item :value="item.name" v-for="(item, index) in tabValues" :key="index">
+        {{ dataList[index] }}
+      </v-window-item>
+    </v-window>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+interface TwcSkillsProps {
+  data: {
+    normal: TGApp.Plugins.Hutao.Character.RhisdSkill[];
+    special: TGApp.Plugins.Hutao.Character.RhisdSkill[];
+  };
+}
+
+const props = defineProps<TwcSkillsProps>();
+const tab = ref<string>();
+const tabValues = ref<Array<{ name: string; icon: string }>>([]);
+const dataList = ref<TGApp.Plugins.Hutao.Character.RhisdSkill[]>([]);
+
+onMounted(() => {
+  props.data.normal.map((i) => tabValues.value.push({ name: i.Name, icon: i.Icon }));
+  props.data.special.map((i) => tabValues.value.push({ name: i.Name, icon: i.Icon }));
+  dataList.value = [...props.data.normal, ...props.data.special];
+  tab.value = tabValues.value[0].name;
+});
+</script>
+<style lang="css" scoped>
+.twc-skills-box {
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  row-gap: 10px;
+}
+
+.twc-skill-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 5px;
+}
+
+.twc-skill-tab img {
+  width: 30px;
+  height: 30px;
+  filter: brightness(0.25);
+}
+
+.dark .twc-skill-tab img {
+  filter: brightness(0.75);
+}
+</style>
diff --git a/src/views/tw-character.vue b/src/views/tw-character.vue
index 7028c28c..3dc7c62c 100644
--- a/src/views/tw-character.vue
+++ b/src/views/tw-character.vue
@@ -44,8 +44,7 @@
       </div>
     </div>
     <TwcMaterials :data="data.materials" />
-    <!--    <div class="twc-text-item">{{data?.skills}}</div>-->
-    <!-- todo 等级，天赋，命座 -->
+    <TwcSkills :data="data.skills" />
     <TwcConstellations :data="data.constellation" />
     <div class="twc-text">
       <div class="twc-text-title">资料</div>
@@ -74,6 +73,7 @@ import TItembox from "../components/main/t-itembox.vue";
 import ToLoading from "../components/overlay/to-loading.vue";
 import TwcConstellations from "../components/wiki/twc-constellations.vue";
 import TwcMaterials from "../components/wiki/twc-materials.vue";
+import TwcSkills from "../components/wiki/twc-skills.vue";
 import { getWikiData } from "../data";
 
 // 路由数据