🎨 代码格式化

2025-12-16 09:58:13 +08:00 · 2023-06-25 16:15:15 +08:00
parent 7982649bbc
commit 7567bba147
174 changed files with 29970 additions and 29840 deletions
--- a/src/components/main/t-backTop.vue
+++ b/src/components/main/t-backTop.vue
@@ -1,7 +1,7 @@
 <template>
  <transition name="fade">
    <div v-show="canTop" class="back-top" @click="handleScrollTop">
-      <img src="../../assets/icons/arrow-top.svg" alt="back-icon">
+      <img src="../../assets/icons/arrow-top.svg" alt="back-icon" />
    </div>
  </transition>
 </template>
@@ -13,7 +13,7 @@ const scrollTop = ref(0); // 滚动条距离顶部的距离
 const canTop = ref(false); // 默认不显示

 // 监听滚动事件
-function handleScroll () {
+function handleScroll() {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
  // 超过500px显示回到顶部按钮
  canTop.value = scrollTop.value > 500;
@@ -26,10 +26,10 @@ function handleScroll () {
 }

 // 点击回到顶部
-function handleScrollTop () {
+function handleScrollTop() {
  let timer = 0;
  cancelAnimationFrame(timer);
-  timer = requestAnimationFrame(function fn () {
+  timer = requestAnimationFrame(function fn() {
    if (scrollTop.value > 0) {
      scrollTop.value -= 50;
      document.body.scrollTop = document.documentElement.scrollTop = scrollTop.value;
--- a/src/components/main/t-calendar.vue
+++ b/src/components/main/t-calendar.vue
@@ -2,9 +2,7 @@
  <div class="calendar-box">
    <div class="calendar-title">
      <div class="calendar-title-left">
-        <v-icon size="small">
-          mdi-calendar-clock
-        </v-icon>
+        <v-icon size="small"> mdi-calendar-clock </v-icon>
        <span>今日素材</span>
        <span>{{ dateNow }}</span>
      </div>
@@ -119,7 +117,7 @@ defineExpose({
 });

 onMounted(() => {
-  const dayNow = (new Date().getDay()) === 0 ? 7 : (new Date().getDay());
+  const dayNow = new Date().getDay() === 0 ? 7 : new Date().getDay();
  weekNow.value = dayNow;
  btnNow.value = dayNow;
  calendarNow.value = getCalendar(dayNow);
@@ -129,17 +127,17 @@ onMounted(() => {
 });

 // 获取当前日历
-function getCalendar (day: number) {
+function getCalendar(day: number) {
  return calendarData.value.filter((item) => item.dropDays.includes(day));
 }

-function selectContent (item: TGApp.App.Calendar.Item, type: string) {
+function selectContent(item: TGApp.App.Calendar.Item, type: string) {
  selectedItem.value = item;
  selectedType.value = type;
  showItem.value = true;
 }

-function getContents (day: number) {
+function getContents(day: number) {
  btnNow.value = day;
  calendarNow.value = getCalendar(day);
  characterCards.value = calendarNow.value.filter((item) => item.itemType === "character");
@@ -159,7 +157,7 @@ function getContents (day: number) {
  height: 45px;
  font-size: 20px;
  display: flex;
-  color:rgb(255 255 255 / 80%);
+  color: rgb(255 255 255 / 80%);
 }

 .calendar-title-left {
@@ -182,8 +180,8 @@ function getContents (day: number) {
 }

 .calendar-title-btn {
-    margin-left: 10px;
-    border-radius: 5px;
+  margin-left: 10px;
+  border-radius: 5px;
 }

 .calendar-divider {
@@ -194,12 +192,12 @@ function getContents (day: number) {
 }

 .calendar-sub {
-    margin: 5px;
+  margin: 5px;
 }

 .cards-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    grid-gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-gap: 8px;
 }
 </style>
--- a/src/components/main/t-itembox-2.vue
+++ b/src/components/main/t-itembox-2.vue
@@ -3,13 +3,13 @@
    <div class="tib2-left">
      <slot name="left">
        <div v-if="props.modelValue.bg !== undefined" class="tib2-bg">
-          <img :src="props.modelValue.bg" alt="bg">
+          <img :src="props.modelValue.bg" alt="bg" />
        </div>
        <div class="tib2-icon">
-          <img :src="props.modelValue.icon" alt="icon">
+          <img :src="props.modelValue.icon" alt="icon" />
        </div>
        <div v-if="props.modelValue.star !== undefined" class="tib2-star">
-          <img :src="props.modelValue.star" alt="element">
+          <img :src="props.modelValue.star" alt="element" />
        </div>
      </slot>
    </div>
@@ -19,18 +19,17 @@
  </div>
 </template>
 <script lang="ts" setup>
-
 export interface TItemBox2Data {
-  width: string,
-  height: string,
-  bg?: string,
-  icon: string,
-  star?: string,
-  name: string,
+  width: string;
+  height: string;
+  bg?: string;
+  icon: string;
+  star?: string;
+  name: string;
 }

 interface TItemBox2Props {
-  modelValue: TItemBox2Data,
+  modelValue: TItemBox2Data;
 }

 const props = defineProps<TItemBox2Props>();
@@ -38,16 +37,16 @@ const props = defineProps<TItemBox2Props>();
 <style lang="css" scoped>
 .tib2-box {
  position: relative;
-  height: v-bind(props["modelValue"]["height"]);
-  width: v-bind(props["modelValue"]["width"]);
+  height: v-bind(props[ "modelValue"][ "height"]);
+  width: v-bind(props[ "modelValue"][ "width"]);
  display: flex;
  border-radius: 5px;
  background: rgb(20 20 20 / 30%);
 }

 .tib2-left {
-  width: v-bind(props["modelValue"]["height"]);
-  height: v-bind(props["modelValue"]["height"]);
+  width: v-bind(props[ "modelValue"][ "height"]);
+  height: v-bind(props[ "modelValue"][ "height"]);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
@@ -57,8 +56,8 @@ const props = defineProps<TItemBox2Props>();
 .tib2-icon {
  position: absolute;
  top: 0;
-  width: v-bind(props["modelValue"]["height"]);
-  height: v-bind(props["modelValue"]["height"]);
+  width: v-bind(props[ "modelValue"][ "height"]);
+  height: v-bind(props[ "modelValue"][ "height"]);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
@@ -74,7 +73,7 @@ const props = defineProps<TItemBox2Props>();
 .tib2-star {
  position: absolute;
  bottom: -5px;
-  width: v-bind(props["modelValue"]["height"]);
+  width: v-bind(props[ "modelValue"][ "height"]);
  height: auto;
 }

@@ -87,7 +86,7 @@ const props = defineProps<TItemBox2Props>();
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: calc(0.2 * v-bind(props["modelValue"]["height"]));
+  font-size: calc(0.2 * v-bind(props[ "modelValue"][ "height"]));
  color: var(--common-color-white);
  overflow: hidden;
 }
--- a/src/components/main/t-itembox.vue
+++ b/src/components/main/t-itembox.vue
@@ -2,31 +2,31 @@
  <div class="tib-box">
    <div class="tib-bg">
      <slot name="bg">
-        <img :src="modelValue.bg" alt="bg">
+        <img :src="modelValue.bg" alt="bg" />
      </slot>
    </div>
    <div class="tib-icon">
      <slot name="icon">
-        <img :src="modelValue.icon" alt="icon">
+        <img :src="modelValue.icon" alt="icon" />
      </slot>
    </div>
    <div class="tib-cover">
      <div class="tib-lt">
-        <img :src="modelValue.lt" alt="lt">
+        <img :src="modelValue.lt" alt="lt" />
      </div>
      <div v-show="modelValue.rt" class="tib-rt">
        {{ modelValue.rt }}
      </div>
      <div class="tib-inner">
        <slot name="inner-icon">
-          <img v-show="modelValue.innerIcon" :src="modelValue.innerIcon" alt="inner-icon">
+          <img v-show="modelValue.innerIcon" :src="modelValue.innerIcon" alt="inner-icon" />
        </slot>
        <slot name="inner-text">
          <span>{{ modelValue.innerText }}</span>
        </slot>
      </div>
    </div>
-    <div v-if="modelValue.display==='outer'" class="tib-outer">
+    <div v-if="modelValue.display === 'outer'" class="tib-outer">
      <slot name="outer-text">
        <span>{{ modelValue.outerText }}</span>
      </slot>
@@ -37,24 +37,24 @@
 import { computed } from "vue";

 export interface TItemBoxData {
-  bg: string,
-  icon: string,
-  size: string,
-  height: string,
-  display: "inner" | "outer",
-  lt: string,
-  ltSize: string,
-  rt?: string,
-  rtSize?: string,
-  innerHeight?: number,
-  innerIcon?: string,
-  innerText: string,
-  outerHeight?: number,
-  outerText?: string,
+  bg: string;
+  icon: string;
+  size: string;
+  height: string;
+  display: "inner" | "outer";
+  lt: string;
+  ltSize: string;
+  rt?: string;
+  rtSize?: string;
+  innerHeight?: number;
+  innerIcon?: string;
+  innerText: string;
+  outerHeight?: number;
+  outerText?: string;
 }

 interface TItemBoxProps {
-  modelValue: TItemBoxData,
+  modelValue: TItemBoxData;
 }

 const props = withDefaults(defineProps<TItemBoxProps>(), {
@@ -78,16 +78,16 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
 <style lang="css" scoped>
 .tib-box {
  position: relative;
-  width: v-bind(props["modelValue"]["size"]);
-  height: v-bind(props["modelValue"]["height"]);
+  width: v-bind(props[ "modelValue"][ "size"]);
+  height: v-bind(props[ "modelValue"][ "height"]);
 }

 .tib-bg {
  position: absolute;
  top: 0;
  left: 0;
-  width: v-bind(props["modelValue"]["size"]);
-  height: v-bind(props["modelValue"]["size"]);
+  width: v-bind(props[ "modelValue"][ "size"]);
+  height: v-bind(props[ "modelValue"][ "size"]);
  border-radius: 5px;
  overflow: hidden;
 }
@@ -100,8 +100,8 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);

 .tib-icon {
  position: relative;
-  width: v-bind(props["modelValue"]["size"]);
-  height: v-bind(props["modelValue"]["size"]);
+  width: v-bind(props[ "modelValue"][ "size"]);
+  height: v-bind(props[ "modelValue"][ "size"]);
  overflow: hidden;
  border-radius: 5px;
 }
@@ -116,8 +116,8 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
  position: absolute;
  top: 0;
  left: 0;
-  width: v-bind(props["modelValue"]["size"]);
-  height: v-bind(props["modelValue"]["size"]);
+  width: v-bind(props[ "modelValue"][ "size"]);
+  height: v-bind(props[ "modelValue"][ "size"]);
  border-radius: 5px;
  display: flex;
  justify-content: center;
@@ -130,8 +130,8 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
  top: 0;
  left: 0;
  padding: 5px;
-  width: v-bind(props["modelValue"]["ltSize"]);
-  height: v-bind(props["modelValue"]["ltSize"]);
+  width: v-bind(props[ "modelValue"][ "ltSize"]);
+  height: v-bind(props[ "modelValue"][ "ltSize"]);
  display: flex;
  justify-content: center;
  align-items: center;
@@ -147,8 +147,8 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
  position: absolute;
  top: 0;
  right: 0;
-  width: v-bind(props["modelValue"]["rtSize"]);
-  height: v-bind(props["modelValue"]["rtSize"]);
+  width: v-bind(props[ "modelValue"][ "rtSize"]);
+  height: v-bind(props[ "modelValue"][ "rtSize"]);
  background: rgb(0 0 0 / 40%);
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
--- a/src/components/main/t-overlay.vue
+++ b/src/components/main/t-overlay.vue
@@ -26,19 +26,21 @@ const props = withDefaults(defineProps<TolProps>(), {
  blurVal: "20px",
 });

-watch(() => props.modelValue, () => {
-  if (props.modelValue) {
-    showTolo.value = true;
-    showToli.value = true;
-  } else {
-    setTimeout(() => {
-      showToli.value = false;
-    }, 100);
-    setTimeout(() => {
-      showTolo.value = false;
-    }, 300);
-  }
-},
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      showTolo.value = true;
+      showToli.value = true;
+    } else {
+      setTimeout(() => {
+        showToli.value = false;
+      }, 100);
+      setTimeout(() => {
+        showTolo.value = false;
+      }, 300);
+    }
+  },
 );
 </script>
 <style lang="css" scoped>
--- a/src/components/main/t-pool.vue
+++ b/src/components/main/t-pool.vue
@@ -1,19 +1,15 @@
 <template>
  <div class="pool-box">
    <div class="pool-title">
-      <img src="../../assets/icons/icon-wish.svg" alt="wish">
+      <img src="../../assets/icons/icon-wish.svg" alt="wish" />
      限时祈愿
    </div>
    <div v-if="!loading" class="pool-grid">
-      <v-card
-        v-for="pool in poolCards"
-        :key="pool.post_id"
-        class="pool-card"
-      >
+      <v-card v-for="pool in poolCards" :key="pool.post_id" class="pool-card">
        <v-list class="pool-list">
          <v-list-item :title="pool.title" :subtitle="pool.subtitle">
            <template #prepend>
-              <img :src="pool.voice.icon" class="pool-sideIcon" alt="icon">
+              <img :src="pool.voice.icon" class="pool-sideIcon" alt="icon" />
            </template>
            <template v-if="pool.voice.url" #append>
              <audio :src="pool.voice.url" controls />
@@ -21,7 +17,7 @@
          </v-list-item>
        </v-list>
        <div class="pool-cover" @click="toPost(pool)">
-          <img :src="pool.cover" alt="cover">
+          <img :src="pool.cover" alt="cover" />
        </div>
        <div class="pool-character">
          <div class="pool-icon-grid">
@@ -31,11 +27,16 @@
              class="pool-icon"
              @click="toOuter(character.url, pool.title)"
            >
-              <img :src="character.icon" alt="character">
+              <img :src="character.icon" alt="character" />
            </div>
          </div>
          <div class="pool-clock">
-            <v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" :color="poolColor[pool.post_id]">
+            <v-progress-circular
+              :model-value="poolTimePass[pool.post_id]"
+              size="100"
+              width="10"
+              :color="poolColor[pool.post_id]"
+            >
              {{ poolTimeGet[pool.post_id] }}
            </v-progress-circular>
          </div>
@@ -92,7 +93,7 @@ defineExpose({
  loading,
 });

-function poolLastInterval (postId: number) {
+function poolLastInterval(postId: number) {
  const pool = poolCards.value.find((pool) => pool.post_id === postId);
  if (!pool) return;
  if (poolTimeGet.value[postId] === "未开始") {
@@ -105,7 +106,7 @@ function poolLastInterval (postId: number) {
    const isEnd = pool.time.end_stamp - Date.now();
    poolTimeGet.value[postId] = getLastPoolTime(isEnd);
    poolTimePass.value[postId] =
-        ((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
+      ((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
    if (isEnd >= 0) return;
    clearInterval(timer.value[postId]);
    timer.value[postId] = null;
@@ -156,7 +157,7 @@ onMounted(async () => {
 });

 // 检测是否有新的限时祈愿
-function checkCover (data: GachaData[]) {
+function checkCover(data: GachaData[]) {
  // 如果没有缓存
  if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) {
    return false;
@@ -180,7 +181,7 @@ function checkCover (data: GachaData[]) {
  });
 }

-async function toOuter (url: string, title: string) {
+async function toOuter(url: string, title: string) {
  if (!url) {
    barText.value = "链接为空!";
    barColor.value = "error";
@@ -190,14 +191,14 @@ async function toOuter (url: string, title: string) {
  createTGWindow(url, "祈愿", title, 1200, 800, true, true);
 }

-function getLastPoolTime (time: number) {
+function getLastPoolTime(time: number) {
  const hour = Math.floor(time / 1000 / 60 / 60);
  const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
  const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
  return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
 }

-function toPost (pool: GachaCard) {
+function toPost(pool: GachaCard) {
  const path = router.resolve({
    name: "帖子详情",
    params: {
@@ -225,7 +226,7 @@ onUnmounted(() => {

 .pool-title {
  color: var(--common-text);
-	font-family: var(--font-title);
+  font-family: var(--font-title);
  font-size: 20px;
  display: flex;
 }
@@ -235,7 +236,7 @@ onUnmounted(() => {
  height: 25px;
  transform: translate(0, 2px);
  margin-right: 10px;
-	border-radius: 50%;
+  border-radius: 50%;
  background: var(--common-bg-2);
 }

@@ -247,19 +248,19 @@ onUnmounted(() => {
 }

 .pool-card {
-	background: #45b787; /* 蛙绿 */
-	color: #eef7f2; /* 丹白 */
-	border-radius: 5px;
+  background: #45b787; /* 蛙绿 */
+  color: #eef7f2; /* 丹白 */
+  border-radius: 5px;
 }

 .dark .pool-card {
-	background: #1f2623; /* 苷蓝绿 */
+  background: #1f2623; /* 苷蓝绿 */
 }

 .pool-list {
-	font-family: var(--font-title);
-	background: inherit;
-	color: inherit;
+  font-family: var(--font-title);
+  background: inherit;
+  color: inherit;
 }

 .pool-sideIcon {
@@ -267,7 +268,7 @@ onUnmounted(() => {
  width: 40px;
  height: 40px;
  border-radius: 50%;
-	background: var(--common-bg-2);
+  background: var(--common-bg-2);
 }

 .pool-cover {
@@ -282,7 +283,7 @@ onUnmounted(() => {
 }

 .pool-cover img {
-	width: 100%;
+  width: 100%;
  transition: all 0.5s;
  border-radius: 10px;
 }
@@ -301,22 +302,22 @@ onUnmounted(() => {
 }

 .pool-icon-grid {
-	display: grid;
-	grid-template-columns: repeat(4,70px);
-	grid-column-gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(4, 70px);
+  grid-column-gap: 10px;
 }

 .pool-icon {
-	width: 70px;
-	height: 70px;
-	border-radius: 5px;
+  width: 70px;
+  height: 70px;
+  border-radius: 5px;
 }

 .pool-icon img {
-	width: 100%;
-	height: 100%;
-	border-radius: 5px;
-	cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  cursor: pointer;
 }

 .pool-clock {
--- a/src/components/main/t-position.vue
+++ b/src/components/main/t-position.vue
@@ -1,15 +1,11 @@
 <template>
  <div class="position-box">
    <div class="position-title">
-      <img src="../../assets/icons/board.svg" alt="act">
+      <img src="../../assets/icons/board.svg" alt="act" />
      <span>近期活动</span>
    </div>
    <div v-if="!loading" class="position-grid">
-      <v-card
-        v-for="card in positionCards"
-        :key="card.post_id"
-        class="position-card"
-      >
+      <v-card v-for="card in positionCards" :key="card.post_id" class="position-card">
        <v-list class="position-list">
          <v-list-item :title="card.title" :subtitle="card.abstract">
            <template #prepend>
@@ -18,9 +14,7 @@
              </v-avatar>
            </template>
            <template #append>
-              <v-btn variant="outlined" @click="toPost(card)">
-                查看
-              </v-btn>
+              <v-btn variant="outlined" @click="toPost(card)"> 查看 </v-btn>
            </template>
          </v-list-item>
        </v-list>
@@ -38,7 +32,9 @@
              positionTimeGet[card.post_id]
            }}</span>
            <!-- 粉红 -->
-            <span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #f2b9b2">已结束</span>
+            <span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #f2b9b2"
+              >已结束</span
+            >
          </div>
        </v-card-text>
      </v-card>
@@ -74,7 +70,7 @@ defineExpose({
  loading,
 });

-function positionLastInterval (postId: number) {
+function positionLastInterval(postId: number) {
  const timeGet = positionTimeGet.value[postId];
  if (timeGet === "未知" || timeGet === "已结束") {
    clearInterval(positionTimer.value[postId]);
@@ -110,17 +106,17 @@ onMounted(async () => {
  loading.value = false;
 });

-function getLastPositionTime (time: number) {
+function getLastPositionTime(time: number) {
  const day = Math.floor(time / (24 * 3600 * 1000));
  const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
  const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
  const second = Math.floor((time % (60 * 1000)) / 1000);
-  return `${day}天 ${hour.toFixed(0).padStart(2, "0")}:${minute.toFixed(0).padStart(2, "0")}:${second
+  return `${day}天 ${hour.toFixed(0).padStart(2, "0")}:${minute
    .toFixed(0)
-    .padStart(2, "0")}`;
+    .padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
 }

-async function toPost (card: PositionCard) {
+async function toPost(card: PositionCard) {
  // 获取路由路径
  const path = router.resolve({
    name: "帖子详情",
@@ -173,7 +169,7 @@ onUnmounted(() => {
 .position-card {
  background: #45b787; /* 蛙绿 */
  color: #eef7f2; /* 月白 */
-  border-radius: 5px
+  border-radius: 5px;
 }

 .dark .position-card {
--- a/src/components/main/t-shareBtn.vue
+++ b/src/components/main/t-shareBtn.vue
@@ -1,9 +1,7 @@
 <template>
  <div class="share-box">
    <div class="share-btn" @click="shareContent()">
-      <v-icon style="color:var(--theme-switch-icon)">
-        mdi-share-variant
-      </v-icon>
+      <v-icon style="color: var(--theme-switch-icon)"> mdi-share-variant </v-icon>
    </div>
  </div>
 </template>
@@ -18,7 +16,7 @@ interface TShareBtnProps {

 const props = defineProps<TShareBtnProps>();

-async function shareContent () {
+async function shareContent() {
  await generateShareImg(props.title, props.modelValue);
 }
 </script>
--- a/src/components/main/t-sidebar.vue
+++ b/src/components/main/t-sidebar.vue
@@ -17,38 +17,38 @@
      <!-- 菜单项 -->
      <v-list-item value="home" title="首页" :link="true" href="/">
        <template #prepend>
-          <img src="/source/UI/paimon.webp" alt="homeIcon" class="side-icon">
+          <img src="/source/UI/paimon.webp" alt="homeIcon" class="side-icon" />
        </template>
      </v-list-item>
      <v-list-item title="公告" value="announcements" :link="true" href="/announcements">
        <template #prepend>
-          <img src="../../assets/icons/board.svg" alt="annoIcon" class="side-icon">
+          <img src="../../assets/icons/board.svg" alt="annoIcon" class="side-icon" />
        </template>
      </v-list-item>
      <v-list-item title="咨讯" value="news" :link="true" href="/news/2">
        <template #prepend>
-          <img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon">
+          <img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon" />
        </template>
      </v-list-item>
      <v-list-item title="成就" value="achievements" :link="true" href="/achievements">
        <template #prepend>
-          <img src="../../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
+          <img src="../../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon" />
        </template>
      </v-list-item>
      <v-divider />
      <v-list-item title="原神战绩" value="record" :link="true" href="/user/record">
        <template #prepend>
-          <img src="/source/UI/userRecord.webp" alt="record" class="side-icon">
+          <img src="/source/UI/userRecord.webp" alt="record" class="side-icon" />
        </template>
      </v-list-item>
      <v-list-item title="我的角色" value="character" :link="true" href="/user/characters">
        <template #prepend>
-          <img src="/source/UI/userAvatar.webp" alt="characters" class="side-icon">
+          <img src="/source/UI/userAvatar.webp" alt="characters" class="side-icon" />
        </template>
      </v-list-item>
      <v-list-item title="深渊记录" value="abyss" :link="true" href="/user/abyss">
        <template #prepend>
-          <img src="/source/UI/userAbyss.webp" alt="abyss" class="side-icon">
+          <img src="/source/UI/userAbyss.webp" alt="abyss" class="side-icon" />
        </template>
      </v-list-item>
      <!-- todo -->
@@ -68,35 +68,35 @@
        <template #activator="{ props }">
          <v-list-item title="图鉴" v-bind="props">
            <template #prepend>
-              <img src="/source/UI/guideMini.webp" alt="wikiIcon" class="side-icon-mini">
+              <img src="/source/UI/guideMini.webp" alt="wikiIcon" class="side-icon-mini" />
            </template>
          </v-list-item>
        </template>
        <v-list-item title="深渊数据库" value="wiki-abyss" :link="true" href="/wiki/abyss">
          <template #prepend>
-            <img src="/icon/star/Abyss.webp" alt="abyssIcon" class="side-icon">
+            <img src="/icon/star/Abyss.webp" alt="abyssIcon" class="side-icon" />
          </template>
        </v-list-item>
        <v-list-item title="GCG" value="wiki-GCG" :link="true" href="/wiki/GCG">
          <template #prepend>
-            <img src="../../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
+            <img src="../../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon" />
          </template>
        </v-list-item>
        <v-list-item title="角色图鉴" value="wiki-character" :link="true" href="/wiki/character">
          <template #prepend>
-            <img src="/source/UI/avatarMini.webp" alt="characterIcon" class="side-icon-mini">
+            <img src="/source/UI/avatarMini.webp" alt="characterIcon" class="side-icon-mini" />
          </template>
        </v-list-item>
        <v-list-item title="武器图鉴" value="wiki-weapon" :link="true" href="/wiki/weapon">
          <template #prepend>
-            <img src="/source/UI/weaponMini.webp" alt="weaponIcon" class="side-icon-mini">
+            <img src="/source/UI/weaponMini.webp" alt="weaponIcon" class="side-icon-mini" />
          </template>
        </v-list-item>
      </v-list-group>
      <div class="bottom-menu">
        <v-list-item>
          <template #prepend>
-            <img :src="userInfo.avatar" alt="userIcon" class="side-icon">
+            <img :src="userInfo.avatar" alt="userIcon" class="side-icon" />
          </template>
          <template #default>
            <v-list-item-title>
@@ -113,7 +113,7 @@
        </v-list-item>
        <v-list-item title="设置" value="config" :link="true" href="/config">
          <template #prepend>
-            <img src="../../assets/icons/setting.svg" alt="setting" class="side-icon">
+            <img src="../../assets/icons/setting.svg" alt="setting" class="side-icon" />
          </template>
        </v-list-item>
      </div>
@@ -143,10 +143,10 @@ const userInfo = computed(() => {
 const rail = ref(appStore.sidebar.collapse);
 // theme
 const themeGet = computed({
-  get () {
+  get() {
    return appStore.theme;
  },
-  set (value: string) {
+  set(value: string) {
    appStore.theme = value;
  },
 });
@@ -155,15 +155,15 @@ const themeTitle = computed(() => {
 });

 const open = computed({
-  get () {
+  get() {
    return appStore.getSubmenu();
  },
-  set (value: string[]) {
+  set(value: string[]) {
    appStore.sidebar.submenu.wiki = value.includes("wiki");
  },
 });

-function collapse () {
+function collapse() {
  rail.value = !rail.value;
  appStore.sidebar.collapse = rail.value;
 }
@@ -172,14 +172,14 @@ onMounted(async () => {
  await listenOnTheme();
 });

-async function listenOnTheme () {
+async function listenOnTheme() {
  await event.listen("readTheme", (e) => {
    const theme = e.payload as string;
    themeGet.value = theme === "default" ? "default" : "dark";
  });
 }

-async function switchTheme () {
+async function switchTheme() {
  await event.emit("readTheme", themeGet.value === "default" ? "dark" : "default");
 }
 </script>
--- a/src/components/main/t-subline.vue
+++ b/src/components/main/t-subline.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="tsl-box">
-    <img src="/src/assets/icons/arrow-right.svg" alt="right">
+    <img src="/src/assets/icons/arrow-right.svg" alt="right" />
    <slot>
      {{ title }}
    </slot>
--- a/src/components/main/t-switchTheme.vue
+++ b/src/components/main/t-switchTheme.vue
@@ -1,8 +1,8 @@
 <template>
  <div class="switch-box">
    <div class="switch-btn" @click="switchTheme()">
-      <v-icon style="color:var(--theme-switch-icon)">
-        {{ themeGet === 'default' ? 'mdi-weather-night' : 'mdi-weather-sunny' }}
+      <v-icon style="color: var(--theme-switch-icon)">
+        {{ themeGet === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
      </v-icon>
    </div>
  </div>
@@ -19,10 +19,10 @@ import { useAppStore } from "../../store/modules/app";
 const appStore = useAppStore();
 // theme
 const themeGet = computed({
-  get () {
+  get() {
    return appStore.theme;
  },
-  set (value: string) {
+  set(value: string) {
    appStore.theme = value;
  },
 });
@@ -31,12 +31,12 @@ onMounted(async () => {
  await listenOnTheme();
 });

-async function switchTheme () {
+async function switchTheme() {
  appStore.changeTheme();
  await event.emit("readTheme", themeGet.value);
 }

-async function listenOnTheme () {
+async function listenOnTheme() {
  await event.listen("readTheme", (e) => {
    const theme = e.payload as string;
    themeGet.value = theme === "default" ? "default" : "dark";