♻️ 样式组件化

src/components/main/t-calendar.vue

@@ -25,10 +25,7 @@
     </div>
     <div class="calendar-divider" />
     <div class="calendar-sub">
-      <div class="calendar-sub-title">
-        <img src="/src/assets/icons/arrow-right.svg" alt="character">
-        <span>角色突破</span>
-      </div>
+      <TSubLine>角色突破</TSubLine>
       <div class="cards-grid">
         <div
           v-for="item in characterCards"
@@ -41,10 +38,7 @@
       </div>
     </div>
     <div class="calendar-sub">
-      <div class="calendar-sub-title">
-        <img src="/src/assets/icons/arrow-right.svg" alt="character">
-        <span>武器突破</span>
-      </div>
+      <TSubLine>武器突破</TSubLine>
       <div class="cards-grid">
         <div
           v-for="item in weaponCards"
@@ -62,6 +56,7 @@
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
+import TSubLine from "./t-subline.vue";
 import ToCalendar from "../overlay/to-calendar.vue";
 import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
 import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
@@ -202,25 +197,6 @@ function getContents (day: number) {
     margin: 5px;
 }
 
-.calendar-sub-title {
-  background: rgb(0 0 0 / 20%);
-  display: flex;
-  align-items: center;
-  height: 30px;
-  padding: 0 10px;
-  margin: 5px 0;
-  border-radius: 5px;
-  font-family: Genshin-Light, serif;
-  color: rgb(255 255 255 / 80%);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
-}
-
-.calendar-sub-title img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
 .cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

src/components/main/t-subline.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="tsl-box">
+    <img src="/src/assets/icons/arrow-right.svg" alt="right">
+    <slot>
+      {{ title }}
+    </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+  },
+});
+</script>
+<style lang="css" scoped>
+.tsl-box {
+  background: var(--common-bg-2);
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  font-family: var(--font-text);
+  color: var(--common-color-white);
+}
+
+.tsl-box img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+</style>

src/pages/User/Abyss.vue

@@ -27,10 +27,7 @@
             <span>更新于</span>
             <span>{{ item.updated }}</span>
           </div>
-          <div class="uaw-sub-title">
-            <img src="/src/assets/icons/arrow-right.svg" alt="character">
-            <span>统计周期 {{ item.startTime }} ~ {{ item.endTime }}</span>
-          </div>
+          <TSubLine>统计周期 {{ item.startTime }} ~ {{ item.endTime }}</TSubLine>
           <div class="uaw-o-box">
             <TuaOverview title="战斗次数" :val-text="item.totalBattleTimes" />
             <TuaOverview title="获得渊星" :val-text="item.totalStar" />
@@ -42,10 +39,7 @@
             <TuaOverview title="出战次数" :val-icons="item.revealRank" :icon-num="4" />
             <TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
           </div>
-          <div class="uaw-sub-title">
-            <img src="/src/assets/icons/arrow-right.svg" alt="character">
-            <span>详情</span>
-          </div>
+          <TSubLine>详情</TSubLine>
           <div class="uaw-d-box">
             <TuaDetail v-for="floor in JSON.parse(item.floors) as TGApp.Sqlite.Abyss.Floor[]" :model-value="floor" />
           </div>
@@ -62,6 +56,7 @@
 // vue
 import { computed, onMounted, ref } from "vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import TSubLine from "../../components/main/t-subline.vue";
 import TuaOverview from "../../components/userAbyss/tua-overview.vue";
 import TuaDetail from "../../components/userAbyss/tua-detail.vue";
 // store
@@ -202,24 +197,6 @@ async function shareAbyss (): Promise<void> {
   text-shadow: none;
 }
 
-.uaw-sub-title {
-  background: var(--common-bg-2);
-  display: flex;
-  align-items: center;
-  height: 30px;
-  padding: 0 10px;
-  margin: 5px 0;
-  border-radius: 5px;
-  font-family: var(--font-text);
-  color: var(--common-color-white);
-}
-
-.uaw-sub-title img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
 .uaw-o-box {
   width: 100%;
   display: grid;

src/pages/User/Record.vue

@@ -19,25 +19,13 @@
         分享
       </v-btn>
     </div>
-    <div class="ur-sub-title">
-      <img src="/src/assets/icons/arrow-right.svg" alt="overview">
-      <span>数据总览</span>
-    </div>
+    <TSubLine>数据总览</TSubLine>
     <TurOverviewGrid v-model="recordData.stats" />
-    <div class="ur-sub-title">
-      <img src="/src/assets/icons/arrow-right.svg" alt="overview">
-      <span>我的角色</span>
-    </div>
+    <TSubLine>角色信息</TSubLine>
     <TurAvatarGrid v-model="recordData.avatars" />
-    <div class="ur-sub-title">
-      <img src="/src/assets/icons/arrow-right.svg" alt="overview">
-      <span>世界探索</span>
-    </div>
+    <TSubLine>世界探索</TSubLine>
     <TurWorldGrid v-model="recordData.worldExplore" />
-    <div class="ur-sub-title">
-      <img src="/src/assets/icons/arrow-right.svg" alt="overview">
-      <span>尘歌壶</span>
-    </div>
+    <TSubLine>尘歌壶</TSubLine>
     <TurHomeGrid v-model="recordData.homes" />
   </div>
 </template>
@@ -45,6 +33,7 @@
 // vue
 import { computed, onMounted, ref } from "vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import TSubLine from "../../components/main/t-subline.vue";
 import TurOverviewGrid from "../../components/userRecord/tur-overview-grid.vue";
 import TurAvatarGrid from "../../components/userRecord/tur-avatar-grid.vue";
 import TurWorldGrid from "../../components/userRecord/tur-world-grid.vue";
@@ -154,22 +143,4 @@ function getTheme () {
   color: var(--common-color-white);
   margin-left: 15px;
 }
-
-.ur-sub-title {
-  background: var(--common-bg-2);
-  display: flex;
-  align-items: center;
-  height: 30px;
-  padding: 0 10px;
-  margin: 5px 0;
-  border-radius: 5px;
-  font-family: var(--font-text);
-  color: var(--common-color-white);
-}
-
-.ur-sub-title img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
 </style>