🚸 一些调整

src/components/app/t-postcard.vue

@@ -5,8 +5,8 @@
         <img :src="localCover" alt="cover" v-if="localCover" />
         <v-progress-circular color="primary" :indeterminate="true" v-else-if="card.cover !== ''" />
         <img src="/source/UI/defaultCover.webp" alt="cover" v-else />
-        <div v-if="isAct" class="tpc-act">
-          <div class="tpc-status">{{ card.status?.status }}</div>
+        <div v-if="card.status" class="tpc-act">
+          <div class="tpc-status">{{ card.status?.label }}</div>
           <div class="tpc-time">
             <v-icon>mdi-clock-time-four-outline</v-icon>
             <span>{{ card.subtitle }}</span>
@@ -77,15 +77,28 @@ import { createPost } from "@/utils/TGWindow.js";
 
 type TPostCardProps = { modelValue: TGApp.Plugins.Mys.Post.FullData; selectMode?: boolean };
 type TPostCardEmits = (e: "onSelected", v: string) => void;
+type TPostStatus = TGApp.Plugins.Mys.News.RenderStatus & { stat: ActStat };
 
+enum ActStat {
+  UNKNOWN,
+  STARTED,
+  FINISHED,
+  SELECTION,
+}
+
+const stats: Readonly<Array<TPostStatus>> = [
+  { stat: ActStat.UNKNOWN, label: "未知", color: "var(--tgc-od-red)" },
+  { stat: ActStat.STARTED, label: "进行中", color: "var(--tgc-od-green)" },
+  { stat: ActStat.FINISHED, label: "已结束", color: "var(--tgc-od-white)" },
+  { stat: ActStat.SELECTION, label: "评选中", color: "var(--tgc-od-orange)" },
+];
 const props = withDefaults(defineProps<TPostCardProps>(), { selectMode: false });
 const emits = defineEmits<TPostCardEmits>();
-const isAct = ref<boolean>(false);
 const card = shallowRef<TGApp.Plugins.Mys.News.RenderCard>();
 const localCover = ref<string>();
 
 const cardBg = computed<string>(() => {
-  if (card.value && card.value.status) return card.value.status.colorCss;
+  if (card.value && card.value.status) return card.value.status.color;
   return "none";
 });
 
@@ -114,52 +127,12 @@ onUnmounted(() => {
   }
 });
 
-// todo 优化结构
-/**
- * @description 活动状态
- * @since Alpha v0.2.1
- * @enum {TGApp.Plugins.Mys.News.RenderStatus}
- * @property {TGApp.Plugins.Mys.News.RenderStatus} STARTED 进行中
- * @property {TGApp.Plugins.Mys.News.RenderStatus} FINISHED 已结束
- * @property {TGApp.Plugins.Mys.News.RenderStatus} SELECTION 评选中
- * @return EnumStatus
- */
-const EnumStatus = {
-  STARTED: {
-    status: "进行中",
-    colorCss: "var(--tgc-od-green)",
-  },
-  FINISHED: {
-    status: "已结束",
-    colorCss: "var(--tgc-od-white)",
-  },
-  SELECTION: {
-    status: "评选中",
-    colorCss: "var(--tgc-od-orange)",
-  },
-  UNKNOWN: {
-    status: "未知",
-    colorCss: "var(--tgc-od-red)",
-  },
-};
-
-/**
- * @description 获取活动状态
- * @since Alpha
- * @param {number} status 活动状态码
- * @returns {string}
- */
 function getActivityStatus(status: number): TGApp.Plugins.Mys.News.RenderStatus {
-  switch (status) {
-    case 1:
-      return EnumStatus.STARTED;
-    case 2:
-      return EnumStatus.SELECTION;
-    case 3:
-      return EnumStatus.FINISHED;
-    default:
-      return EnumStatus.UNKNOWN;
+  if (status satisfies ActStat) {
+    const stat: ActStat = status;
+    return stats[stat];
   }
+  return stats[ActStat.UNKNOWN];
 }
 
 function getPostCover(item: TGApp.Plugins.Mys.Post.FullData): string {
@@ -179,26 +152,28 @@ function getPostCover(item: TGApp.Plugins.Mys.Post.FullData): string {
  * @returns {TGApp.Plugins.Mys.News.RenderCard} 渲染用咨讯列表项
  */
 function getCommonCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.News.RenderCard {
+  let forumData: TGApp.Plugins.Mys.News.RenderForum | null = null;
+  let statData: TGApp.Plugins.Mys.News.RenderData | null = null;
+  if (item.forum !== null) {
+    forumData = { name: item.forum.name, icon: item.forum.icon, id: item.forum.id };
+  }
+  if (item.stat !== null) {
+    statData = {
+      mark: item.stat.bookmark_num,
+      forward: item.stat.forward_num,
+      like: item.stat.like_num,
+      reply: item.stat.reply_num,
+      view: item.stat.view_num,
+    };
+  }
   return {
     title: item.post.subject,
     cover: getPostCover(item),
     postId: Number(item.post.post_id),
     subtitle: item.post.post_id,
     user: item.user,
-    forum:
-      item.forum === null
-        ? null
-        : { name: item.forum.name, icon: item.forum.icon, id: item.forum.id },
-    data:
-      item.stat === null
-        ? null
-        : {
-            mark: item.stat.bookmark_num,
-            forward: item.stat.forward_num,
-            like: item.stat.like_num,
-            reply: item.stat.reply_num,
-            view: item.stat.view_num,
-          },
+    forum: forumData,
+    data: statData,
     topics: item.topics,
   };
 }
@@ -210,7 +185,6 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
     item.news_meta !== null &&
     item.news_meta.start_at_sec !== "0"
   ) {
-    isAct.value = true;
     const startTime = new Date(Number(item.news_meta.start_at_sec) * 1000).toLocaleDateString();
     const endTime = new Date(Number(item.news_meta.end_at_sec) * 1000).toLocaleDateString();
     const statusInfo = getActivityStatus(item.news_meta.activity_status);

src/components/app/t-sidebar.vue

@@ -1,76 +1,62 @@
-<!-- todo UI调整 -->
 <template>
   <v-navigation-drawer :permanent="true" :rail="rail" class="tsb-box">
     <v-list class="side-list" density="compact" :nav="true">
-      <!-- 负责收缩侧边栏 -->
-      <v-list-item @click="rail = !rail">
-        <template v-if="rail" #prepend>
-          <v-list-item-action>
-            <v-icon>mdi-chevron-right</v-icon>
-          </v-list-item-action>
-        </template>
-        <template v-else #append>
-          <v-list-item-action>
-            <v-icon>mdi-chevron-left</v-icon>
-          </v-list-item-action>
-        </template>
-      </v-list-item>
+      <v-list-item
+        @click="rail = !rail"
+        :prepend-icon="rail ? 'mdi-chevron-right' : undefined"
+        :append-icon="!rail ? 'mdi-chevron-left' : undefined"
+      />
       <!-- 菜单项 -->
-      <v-list-item :title.attr="'首页'" value="home" :link="true" href="/">
+      <v-list-item :title.attr="'首页'" :link="true" href="/">
         <template #title>首页</template>
         <template #prepend>
           <img src="/source/UI/paimon.webp" alt="homeIcon" class="side-icon paimon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'公告'" value="announcements" :link="true" href="/announcements">
+      <v-list-item title.attr="'公告'" :link="true" href="/announcements">
         <template #title>公告</template>
         <template #prepend>
           <img src="@/assets/icons/board.svg" alt="annoIcon" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item
-        :title.attr="'咨讯'"
-        value="news"
-        :link="true"
-        :href="`/news/2/${recentNewsType}`"
-      >
+      <v-list-item :title.attr="'咨讯'" :link="true" :href="`/news/2/${recentNewsType}`">
         <template #title>咨讯</template>
         <template #prepend>
           <img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'帖子'" value="posts" :link="true" href="/posts/forum">
+      <v-list-item :title.attr="'帖子'" :link="true" href="/posts/forum">
         <template #title>帖子</template>
         <template #prepend>
           <img src="/source/UI/posts.png" alt="posts" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'成就'" value="achievements" :link="true" href="/achievements">
+      <v-list-item :title.attr="'成就'" :link="true" href="/achievements">
         <template #title>成就</template>
         <template #prepend>
           <img src="@/assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon" />
         </template>
       </v-list-item>
       <v-divider />
-      <v-list-item :title.attr="'原神战绩'" value="record" :link="true" href="/user/record">
+      <v-list-item :title.attr="'原神战绩'" :link="true" href="/user/record">
         <template #title>原神战绩</template>
         <template #prepend>
           <img src="/source/UI/userRecord.webp" alt="record" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'我的角色'" value="character" :link="true" href="/user/characters">
+      <v-list-item :title.attr="'我的角色'" :link="true" href="/user/characters">
         <template #title>我的角色</template>
         <template #prepend>
           <img src="/source/UI/userAvatar.webp" alt="characters" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'深渊记录'" value="abyss" :link="true" href="/user/abyss">
+      <v-list-item :title.attr="'深渊记录'" :link="true" href="/user/abyss">
         <template #title>深渊记录</template>
         <template #prepend>
           <img src="/source/UI/userAbyss.webp" alt="abyss" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'祈愿记录'" value="gacha" :link="true" href="/user/gacha">
+      <v-list-item :title.attr="'祈愿记录'" :link="true" href="/user/gacha">
         <template #title>祈愿记录</template>
         <template #prepend>
           <img src="/source/UI/userGacha.webp" alt="gacha" class="side-icon" />
@@ -80,14 +66,11 @@
       <v-list-item
         v-show="isDevEnv"
         :title.attr="'测试页面'"
-        value="test"
         :link="true"
         href="/test"
+        prepend-icon="mdi-test-tube"
       >
         <template #title>测试页面</template>
-        <template #prepend>
-          <v-icon>mdi-test-tube</v-icon>
-        </template>
       </v-list-item>
       <v-divider v-show="isDevEnv" />
       <v-menu :open-on-click="true" location="end">
@@ -100,69 +83,36 @@
           </v-list-item>
         </template>
         <v-list class="side-list-menu wiki" density="compact" :nav="true">
-          <v-list-item
-            class="side-item-menu"
-            title="深渊数据库"
-            value="wiki-abyss"
-            :link="true"
-            href="/wiki/abyss"
-          >
+          <v-list-item class="side-item-menu" title="深渊数据库" :link="true" href="/wiki/abyss">
             <template #prepend>
               <img src="/source/UI/wikiAbyss.webp" alt="abyssIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
-          <v-list-item
-            class="side-item-menu"
-            title="角色图鉴"
-            value="wiki-character"
-            :link="true"
-            href="/wiki/character/0"
-          >
+          <v-list-item class="side-item-menu" title="角色图鉴" :link="true" href="/wiki/character">
             <template #prepend>
               <img src="/source/UI/wikiAvatar.webp" alt="characterIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
-          <v-list-item
-            class="side-item-menu"
-            title="武器图鉴"
-            value="wiki-weapon"
-            :link="true"
-            href="/wiki/weapon/0"
-          >
+          <v-list-item class="side-item-menu" title="武器图鉴" :link="true" href="/wiki/weapon">
             <template #prepend>
               <img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
           <v-list-item
             class="side-item-menu"
-            value="wiki-nameCard"
             :link="true"
             href="/wiki/nameCard"
-          >
-            <template #default>
-              <v-icon size="20" color="var(--tgc-yellow-2)">mdi-credit-card-outline</v-icon>
-              <span style="margin-left: 10px; font-size: 0.8125rem">名片图鉴</span>
-            </template>
-          </v-list-item>
-          <v-list-item
-            class="side-item-menu"
-            title="材料图鉴"
-            value="wiki-material"
-            :link="true"
-            href="/wiki/material"
-          >
+            prepend-icon="mdi-credit-card-outline"
+            title="名片图鉴"
+          />
+          <v-list-item class="side-item-menu" title="材料图鉴" :link="true" href="/wiki/material">
             <template #prepend>
               <img src="/source/UI/wikiGCG.webp" alt="gcgIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
         </v-list>
       </v-menu>
-      <v-list-item
-        :title.attr="'留影叙佳期'"
-        value="archive-birthday"
-        :link="true"
-        href="/archive/birthday"
-      >
+      <v-list-item :title.attr="'留影叙佳期'" :link="true" href="/archive/birthday">
         <template #title>留影叙佳期</template>
         <template #prepend>
           <img src="/source/UI/act_birthday.png" alt="archive_birthday_icon" class="side-icon" />
@@ -201,13 +151,12 @@
             </v-list-item>
           </v-list>
         </v-menu>
-        <v-list-item :title.attr="themeTitle" @click="switchTheme()">
+        <v-list-item
+          :title.attr="themeTitle"
+          @click="switchTheme()"
+          :prepend-icon="theme === 'default' ? 'mdi-weather-night' : 'mdi-weather-sunny'"
+        >
           <template #title>{{ themeTitle }}</template>
-          <template #prepend>
-            <v-icon>
-              {{ theme === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
-            </v-icon>
-          </template>
         </v-list-item>
         <v-list-item :title.attr="'设置'" value="config" :link="true" href="/config">
           <template #title>设置</template>

src/components/userAvatarOld/tuc-detail-old.vue

@@ -1,4 +1,3 @@
-<!-- todo 调整逻辑 -->
 <template>
   <div class="tuc-do-box">
     <img :src="bg" alt="role" class="tuc-do-bg" />
@@ -7,7 +6,7 @@
         <div class="tuc-do-left">
           <div
             class="tuc-dol-item"
-            :style="`opacity: ${selected.pos === 0 ? '1' : '0.5'}`"
+            :class="{ selected: selected.pos === 0 }"
             @click="showDetail(props.modelValue.weapon, '武器', 0)"
           >
             <TucDetailItemBox
@@ -19,10 +18,7 @@
             v-for="(item, index) in relicList"
             :key="index"
             class="tuc-dol-item"
-            :style="{
-              cursor: item ? 'pointer' : 'default',
-              opacity: selected.pos === index + 1 ? '1' : item ? '0.5' : '1',
-            }"
+            :class="{ selected: selected.pos === index + 1 }"
             @click="showDetail(item, '圣遗物', index + 1)"
           >
             <TucDetailRelic :model-value="item" :pos="index + 1" />
@@ -35,9 +31,7 @@
               :key="item.pos"
               class="tuc-dor-item"
               :model-value="item"
-              :style="{
-                border: selected.pos === item.pos + 5 ? '2px solid var(--tgc-yellow-1)' : '',
-              }"
+              :class="{ selected: selected.pos === item.pos + 5 }"
               @click="showDetail(item, '命座', item.pos + 5)"
             />
           </div>
@@ -269,6 +263,28 @@ function switchBg(): void {
   border-radius: 5px;
   margin-top: 50px;
   cursor: pointer;
+
+  &:nth-child(1) {
+    opacity: 0.5;
+
+    &.selected {
+      opacity: 1;
+    }
+  }
+
+  &:nth-child(2),
+  &:nth-child(3),
+  &:nth-child(4),
+  &:nth-child(5),
+  &:nth-child(6) {
+    cursor: pointer;
+    opacity: 0.5;
+
+    &.selected {
+      cursor: default;
+      opacity: 1;
+    }
+  }
 }
 
 /* 右侧显示区域 */
@@ -280,7 +296,12 @@ function switchBg(): void {
 
 .tuc-dor-item {
   position: absolute;
+  border: unset;
   cursor: pointer;
+
+  &.selected {
+    border: 2px solid var(--tgc-yellow-1);
+  }
 }
 
 /* 环状排列6个命座 */