🌱 角色 wiki 命座样式优化，技能样式草创

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;
+  filter: brightness(0.25);
-  border-radius: 5px;
+}
-  background: var(--common-shadow-4);
+
+.dark .twc-constellation-top img {
+  filter: brightness(0.75);
 }
 
 .twc-constellation-top span {

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>

src/views/tw-character.vue

@@ -44,8 +44,7 @@
       </div>
     </div>
     <TwcMaterials :data="data.materials" />
-    <!--    <div class="twc-text-item">{{data?.skills}}</div>-->
+    <TwcSkills :data="data.skills" />
-    <!-- todo 等级，天赋，命座 -->
     <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";
 
 // 路由数据