💄 完善 wiki 页面样式

src/components/wiki/twc-constellations.vue

@@ -1,23 +1,40 @@
 <template>
   <div class="twc-constellations-box">
-    <div class="twc-constellations-title">命座</div>
-    <div class="twc-constellation" v-for="item in props.data" :key="item.Id">
-      <div class="twc-constellation-top">
+    <v-tabs v-model="tab">
+      <v-tab
+        v-for="item in props.data"
+        :key="item.Id"
+        :value="item.Name"
+        :title="item.Name"
+        class="twc-constellation-tab"
+        density="compact"
+      >
         <!-- todo 换成本地资源 -->
         <img :src="`https://api.ambr.top/assets/UI/${item.Icon}.png`" alt="icon" />
-        <span>{{ item.Name }}</span>
-      </div>
-      <div class="twc-constellation-bottom">
+        <span v-if="tab === item.Name">{{ item.Name }}</span>
+      </v-tab>
+    </v-tabs>
+    <v-window v-model="tab">
+      <v-window-item
+        :value="item.Name"
+        v-for="item in props.data"
+        :key="item.Id"
+        class="twc-constellation-desc"
+      >
         <span v-html="parseDesc(item.Description)"></span>
-      </div>
-    </div>
+      </v-window-item>
+    </v-window>
   </div>
 </template>
 <script setup lang="ts">
+import { ref } from "vue";
+
 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;
@@ -37,49 +54,32 @@ function parseDesc(desc: string): string {
 </script>
 <style lang="css" scoped>
 .twc-constellations-box {
-  display: flex;
-  flex-direction: column;
-  row-gap: 10px;
-}
-
-.twc-constellations-title {
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-  font-size: 18px;
-}
-
-.twc-constellation {
   display: flex;
   flex-direction: column;
   padding: 5px;
   border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  row-gap: 5px;
 }
 
-.twc-constellation-top {
+.twc-constellation-tab {
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-start;
-  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
 }
 
-.twc-constellation-top img {
+.twc-constellation-tab img {
   width: 30px;
   height: 30px;
   filter: brightness(0.25);
 }
 
-.dark .twc-constellation-top img {
+.dark .twc-constellation-tab img {
   filter: brightness(0.75);
 }
 
-.twc-constellation-top span {
-  border-bottom: 1px solid var(--common-shadow-4);
-  font-weight: bold;
-}
-
-.twc-constellation-bottom {
+.twc-constellation-desc {
+  padding-left: 10px;
   white-space: pre-wrap;
 }
 </style>

src/components/wiki/twc-skills.vue

@@ -5,10 +5,13 @@
         v-for="(item, index) in tabValues"
         :key="index"
         :value="item.name"
+        :title="item.name"
         class="twc-skill-tab"
+        density="compact"
       >
         <!-- todo 换成本地资源 -->
         <img :src="`https://api.ambr.top/assets/UI/${item.icon}.png`" alt="icon" />
+        <span v-if="tab === item.name">{{ item.name }}</span>
       </v-tab>
     </v-tabs>
     <v-window v-model="tab">
@@ -41,14 +44,13 @@ onMounted(() => {
   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;
+  justify-content: center;
+  font-weight: bold;
 }
 
 .twc-skill-tab img {

src/views/tw-character.vue

@@ -46,20 +46,46 @@
     <TwcMaterials :data="data.materials" />
     <TwcSkills :data="data.skills" />
     <TwcConstellations :data="data.constellation" />
-    <div class="twc-text">
-      <div class="twc-text-title">资料</div>
-      <div class="twc-text-item" v-for="(item, index) in data?.talks" :key="index">
-        <div class="twc-text-item-title">{{ item.Title }}</div>
-        <div class="twc-text-item-content">{{ item.Context }}</div>
-      </div>
-    </div>
-    <div class="twc-text">
-      <div class="twc-text-title">故事</div>
-      <div class="twc-text-item" v-for="(item, index) in data.stories" :key="index">
-        <div class="twc-text-item-title">{{ item.Title }}</div>
-        <div class="twc-text-item-content">{{ item.Context }}</div>
-      </div>
-    </div>
+    <v-expansion-panels :theme="vuetifyTheme" class="twc-text-item">
+      <v-expansion-panel>
+        <template #title><span class="twc-text-title">资料</span></template>
+        <template #text>
+          <v-expansion-panels variant="popout">
+            <v-expansion-panel
+              expand-icon="mdi-menu-down"
+              v-for="(item, index) in data?.talks"
+              :key="index"
+            >
+              <template #title
+                ><span class="twc-text-item-title">{{ item.Title }}</span></template
+              >
+              <template #text
+                ><span class="twc-text-item-content">{{ item.Context }}</span></template
+              >
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </template>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <template #title><span class="twc-text-title">故事</span></template>
+        <template #text>
+          <v-expansion-panels variant="popout">
+            <v-expansion-panel
+              expand-icon="mdi-menu-down"
+              v-for="(item, index) in data.stories"
+              :key="index"
+            >
+              <template #title
+                ><span class="twc-text-item-title">{{ item.Title }}</span></template
+              >
+              <template #text
+                ><span class="twc-text-item-content">{{ item.Context }}</span></template
+              >
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </template>
+      </v-expansion-panel>
+    </v-expansion-panels>
   </div>
 </template>
 <script lang="ts" setup>
@@ -75,6 +101,7 @@ 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";
+import { useAppStore } from "../store/modules/app";
 
 // 路由数据
 const id = <string>useRoute().params.id;
@@ -84,6 +111,12 @@ const loadingEmpty = ref<boolean>(false);
 const loadingTitle = ref<string>("正在加载");
 const loadingSub = ref<string>();
 
+// 主题
+const appStore = useAppStore();
+const vuetifyTheme = computed(() => {
+  return appStore.theme === "dark" ? "dark" : "light";
+});
+
 // 数据
 const data = ref<TGApp.App.Character.WikiItem>();
 const box = computed(() => {
@@ -141,6 +174,7 @@ onMounted(async () => {
 
 .twc-brief {
   display: flex;
+  align-items: flex-end;
   column-gap: 10px;
 }
 
@@ -164,6 +198,7 @@ onMounted(async () => {
 .twc-bi-top :nth-child(2) {
   display: flex;
   align-items: flex-end;
+  font-size: 14px;
   opacity: 0.8;
 }
 
@@ -206,9 +241,6 @@ onMounted(async () => {
 .twc-text-item {
   display: flex;
   flex-direction: column;
-  padding: 5px;
-  border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
   row-gap: 5px;
 }