diff --git a/src/components/userAchi/tua-achi.vue b/src/components/userAchi/tua-achi.vue
index 3acc30a7..08976678 100644
--- a/src/components/userAchi/tua-achi.vue
+++ b/src/components/userAchi/tua-achi.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="achi-container" :title="getAchiTitle()" @click="selectAchi()">
+  <div :title="getAchiTitle()" class="achi-container" @click="selectAchi()">
     <div class="achi-version">v{{ data.version }}</div>
     <div class="achi-pre">
       <div class="achi-pre-icon">
@@ -190,33 +190,16 @@ async function setAchiStat(stat: boolean): Promise<void> {
   }
 }
 
-.achi-append-icon span {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  width: 100%;
-  height: 10px;
-  align-items: center;
-  justify-content: center;
-  background: #00000080;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  color: var(--tgc-white-1);
-  font-size: 8px;
-}
-
 .achi-append {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  column-gap: 10px;
-}
+  column-gap: 8px;
 
-.achi-append :nth-last-child(2) {
-  margin-right: 10px;
-  color: var(--box-text-4);
-  font-size: small;
+  :first-child:not(:last-child) {
+    color: var(--box-text-4);
+    font-size: small;
+  }
 }
 
 .achi-append-icon {
@@ -226,10 +209,27 @@ async function setAchiStat(stat: boolean): Promise<void> {
   border-radius: 4px;
   background-image: url("/icon/bg/5-Star.webp");
   background-size: cover;
-}
 
-.achi-append-icon img {
-  width: 40px;
-  height: 40px;
+  img {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+  }
+
+  span {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 10px;
+    align-items: stretch;
+    justify-content: center;
+    background: #00000080;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    color: var(--tgc-white-1);
+    font-size: 8px;
+  }
 }
 </style>
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index bb092fe0..9eae3409 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -6,19 +6,19 @@
         <img alt="icon" src="/source/UI/userAbyss.webp" />
         <span>深境螺旋</span>
         <v-select
-          density="compact"
-          variant="outlined"
           v-model="uidCur"
-          :items="uidList"
           :hide-details="true"
+          :items="uidList"
+          density="compact"
           label="游戏UID"
+          variant="outlined"
         />
-        <v-btn :rounded="true" class="ua-btn" @click="toCombat()">
-          <img src="/source/UI/userCombat.webp" alt="combat" />
+        <v-btn :rounded="true" class="ua-btn" variant="elevated" @click="toCombat()">
+          <img alt="combat" src="/source/UI/userCombat.webp" />
           <span>真境剧诗</span>
         </v-btn>
-        <v-btn :rounded="true" class="ua-btn" @click="toChallenge()">
-          <img src="/source/UI/userChallenge.webp" alt="challenge" />
+        <v-btn :rounded="true" class="ua-btn" variant="elevated" @click="toChallenge()">
+          <img alt="challenge" src="/source/UI/userChallenge.webp" />
           <span>幽境危战</span>
         </v-btn>
       </div>
@@ -26,21 +26,33 @@
     <template #append>
       <div class="uat-acts">
         <v-btn
-          class="ua-btn"
-          @click="shareAbyss()"
           :disabled="localAbyss.length === 0"
+          class="ua-btn"
           prepend-icon="mdi-share"
+          variant="elevated"
+          @click="shareAbyss()"
         >
           分享
         </v-btn>
-        <v-btn class="ua-btn" @click="refreshAbyss()" prepend-icon="mdi-refresh">刷新</v-btn>
-        <v-btn class="ua-btn" @click="tryReadAbyss()" prepend-icon="mdi-download">导入</v-btn>
-        <v-btn class="ua-btn" @click="deleteAbyss()" prepend-icon="mdi-delete">删除</v-btn>
+        <v-btn class="ua-btn" prepend-icon="mdi-refresh" variant="elevated" @click="refreshAbyss()">
+          刷新
+        </v-btn>
+        <v-btn
+          class="ua-btn"
+          prepend-icon="mdi-download"
+          variant="elevated"
+          @click="tryReadAbyss()"
+        >
+          导入
+        </v-btn>
+        <v-btn class="ua-btn" prepend-icon="mdi-delete" variant="elevated" @click="deleteAbyss()">
+          删除
+        </v-btn>
       </div>
     </template>
   </v-app-bar>
   <div class="ua-box">
-    <v-tabs v-model="userTab" direction="vertical" class="ua-tabs-box" center-active>
+    <v-tabs v-model="userTab" center-active class="ua-tabs-box" direction="vertical">
       <v-tab v-for="item in localAbyss" :key="item.id" :value="item.id">第{{ item.id }}期</v-tab>
     </v-tabs>
     <v-window v-model="userTab" class="ua-window">
@@ -64,20 +76,20 @@
           </div>
           <TSubLine>统计周期 {{ item.startTime }} ~ {{ item.endTime }}</TSubLine>
           <div class="uaw-o-box">
-            <TuaOverview title="战斗次数" :val-text="item.totalBattleTimes" />
-            <TuaOverview title="获得渊星" :val-text="item.totalStar" />
+            <TuaOverview :val-text="item.totalBattleTimes" title="战斗次数" />
+            <TuaOverview :val-text="item.totalStar" title="获得渊星" />
             <TuaOverview
-              title="最深抵达"
               :val-text="
                 item.skippedFloor !== '' ? `${item.maxFloor}(${item.skippedFloor})` : item.maxFloor
               "
+              title="最深抵达"
             />
-            <TuaOverview title="最多击破" :val-icons="item.defeatRank" />
-            <TuaOverview title="最多承伤" :val-icons="item.takeDamageRank" />
-            <TuaOverview title="最强一击" :val-icons="item.damageRank" />
-            <TuaOverview title="元素战技" :val-icons="item.normalSkillRank" />
-            <TuaOverview title="出战次数" :val-icons="item.revealRank" :multi4="true" />
-            <TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
+            <TuaOverview :val-icons="item.defeatRank" title="最多击破" />
+            <TuaOverview :val-icons="item.takeDamageRank" title="最多承伤" />
+            <TuaOverview :val-icons="item.damageRank" title="最强一击" />
+            <TuaOverview :val-icons="item.normalSkillRank" title="元素战技" />
+            <TuaOverview :multi4="true" :val-icons="item.revealRank" title="出战次数" />
+            <TuaOverview :val-icons="item.energySkillRank" title="元素爆发" />
           </div>
           <div class="uaw-d-box">
             <TuaDetail v-for="floor in item.floors" :key="floor.id" :floor />
@@ -86,7 +98,7 @@
       </v-window-item>
     </v-window>
     <div v-show="localAbyss.length === 0" class="user-empty">
-      <img src="/source/UI/empty.webp" alt="empty" />
+      <img alt="empty" src="/source/UI/empty.webp" />
       <span>暂无数据，请尝试刷新</span>
     </div>
   </div>
@@ -128,7 +140,6 @@ onMounted(async () => {
   else if (uidList.value.length > 0) uidCur.value = uidList.value[0];
   else uidCur.value = "";
   await showLoading.update(`正在加载${uidCur.value}的深渊数据`);
-  await loadAbyss();
   await showLoading.end();
   showSnackbar.success(`已加载${uidCur.value}的${localAbyss.value.length}条深渊数据`);
 });
@@ -295,7 +306,7 @@ async function tryReadAbyss(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: 8px;
+  margin-left: 12px;
   gap: 8px;
 
   img {
@@ -314,11 +325,11 @@ async function tryReadAbyss(): Promise<void> {
 }
 
 .uat-acts {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
-  margin-left: 8px;
+  margin-right: 12px;
   gap: 8px;
 }
 
@@ -335,10 +346,6 @@ async function tryReadAbyss(): Promise<void> {
   }
 }
 
-.dark .ua-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .ua-box {
   display: flex;
   height: calc(100vh - 96px);
diff --git a/src/pages/User/Challenge.vue b/src/pages/User/Challenge.vue
index 9f186bcc..5805f2c6 100644
--- a/src/pages/User/Challenge.vue
+++ b/src/pages/User/Challenge.vue
@@ -14,11 +14,11 @@
           variant="outlined"
           @update:model-value="switchUid"
         />
-        <v-btn :rounded="true" class="ucp-btn" @click="toAbyss()">
+        <v-btn class="ucp-btn" rounded variant="elevated" @click="toAbyss()">
           <img alt="abyss" src="/source/UI/userAbyss.webp" />
           <span>深境螺旋</span>
         </v-btn>
-        <v-btn :rounded="true" class="ucp-btn" @click="toCombat()">
+        <v-btn class="ucp-btn" rounded variant="elevated" @click="toCombat()">
           <img alt="abyss" src="/source/UI/userCombat.webp" />
           <span>真境剧诗</span>
         </v-btn>
@@ -45,15 +45,33 @@
             :disabled="localChallenge.length === 0"
             class="ucp-btn"
             prepend-icon="mdi-share"
+            variant="elevated"
             @click="shareChallenge()"
           >
             分享
           </v-btn>
-          <v-btn class="ucp-btn" prepend-icon="mdi-refresh" @click="refreshChallenge()">刷新</v-btn>
-          <v-btn class="ucp-btn" prepend-icon="mdi-download" @click="tryReadChallenge()">
+          <v-btn
+            class="ucp-btn"
+            prepend-icon="mdi-refresh"
+            variant="elevated"
+            @click="refreshChallenge()"
+            >刷新
+          </v-btn>
+          <v-btn
+            class="ucp-btn"
+            prepend-icon="mdi-download"
+            variant="elevated"
+            @click="tryReadChallenge()"
+          >
             导入
           </v-btn>
-          <v-btn class="ucp-btn" prepend-icon="mdi-delete" @click="deleteChallenge()">删除</v-btn>
+          <v-btn
+            class="ucp-btn"
+            prepend-icon="mdi-delete"
+            variant="elevated"
+            @click="deleteChallenge()"
+            >删除
+          </v-btn>
         </div>
         <div class="pop-list">
           <TucPopItem v-for="avatar in popList" :key="avatar.avatar_id" :avatar />
@@ -393,7 +411,7 @@ async function tryReadChallenge(): Promise<void> {
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  padding: 8px;
+  margin-left: 12px;
   column-gap: 8px;
 
   img {
@@ -424,16 +442,12 @@ async function tryReadChallenge(): Promise<void> {
   }
 }
 
-.dark .ucp-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .ucp-top-append {
   position: relative;
   width: fit-content;
-  height: 100%;
+  height: 40px;
   box-sizing: border-box;
-  padding: 8px;
+  margin-right: 12px;
 }
 
 .ucp-top-extension {
@@ -443,7 +457,8 @@ async function tryReadChallenge(): Promise<void> {
   box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
-  padding: 0 8px;
+  padding: 0 16px;
+  margin-bottom: 4px;
 }
 
 .act-list {
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index bb5e2975..7e19f58a 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -5,35 +5,38 @@
       <div class="uc-top-title">
         <img alt="icon" src="/source/UI/userAvatar.webp" />
         <span>我的角色</span>
-        <v-btn class="uc-top-btn" @click="showSelect = true">筛选角色</v-btn>
-        <v-btn class="uc-top-btn" @click="resetSelect = true">重置筛选</v-btn>
+        <v-btn class="uc-top-btn" variant="elevated" @click="showSelect = true">筛选角色</v-btn>
+        <v-btn class="uc-top-btn" variant="elevated" @click="resetSelect = true">重置筛选</v-btn>
       </div>
     </template>
     <template #append>
       <div class="uc-top-btns">
         <v-btn
+          v-model:loading="loadData"
           class="uc-top-btn"
           prepend-icon="mdi-refresh"
+          variant="elevated"
           @click="refresh()"
-          v-model:loading="loadData"
         >
           刷新
         </v-btn>
         <v-btn
+          v-model:loading="loadShare"
+          :disabled="enableShare"
           class="uc-top-btn"
           prepend-icon="mdi-share"
-          :disabled="enableShare"
+          variant="elevated"
           @click="share()"
-          v-model:loading="loadShare"
         >
           分享
         </v-btn>
         <v-btn
+          v-model:loading="loadDel"
+          :disabled="uidCur === undefined"
           class="uc-top-btn"
           prepend-icon="mdi-delete"
+          variant="elevated"
           @click="deleteUid()"
-          :disabled="uidCur === undefined"
-          v-model:loading="loadDel"
         >
           删除
         </v-btn>
@@ -43,23 +46,23 @@
       <div class="uc-select">
         <v-select
           v-model="showMode"
-          :items="modeList"
-          label="详情视图模式"
           :hide-details="true"
-          item-title="label"
-          item-value="value"
-          variant="outlined"
+          :items="modeList"
           class="uc-select-btn"
           density="compact"
+          item-title="label"
+          item-value="value"
+          label="详情视图模式"
+          variant="outlined"
         />
         <v-select
           v-model="uidCur"
-          :items="uidList"
-          label="当前UID"
           :hide-details="true"
-          variant="outlined"
+          :items="uidList"
           class="uc-select-btn"
           density="compact"
+          label="当前UID"
+          variant="outlined"
         />
       </div>
     </template>
@@ -69,10 +72,10 @@
       <div class="uc-box-title">
         <span class="uc-box-uid">UID：{{ uidCur }}</span>
         <span
-          class="uc-ov-item"
           v-for="(item, index) in roleOverview"
           :key="index"
           :title="`${item.label}：${item.cnt}`"
+          class="uc-ov-item"
         >
           <img :src="`/icon/element/${item.label}.webp`" alt="element" />
           <span>{{ item.cnt }}</span>
@@ -84,7 +87,7 @@
         <span>更新于 {{ getUpdateTime() }}</span>
       </div>
     </div>
-    <div class="uc-grid" v-if="!isEmpty">
+    <div v-if="!isEmpty" class="uc-grid">
       <TuaAvatarBox
         v-for="(role, index) in selectedList"
         :key="index"
@@ -92,20 +95,20 @@
         @click="selectRole(role)"
       />
     </div>
-    <div class="uc-empty" v-else>
-      <img src="/source/UI/empty.webp" alt="empty" />
+    <div v-else class="uc-empty">
+      <img alt="empty" src="/source/UI/empty.webp" />
     </div>
   </div>
   <TuaDetailOverlay
     v-if="dataVal"
     v-model="showOverlay"
+    v-model:mode="showMode"
     :avatar="dataVal"
     :avatars="selectedList"
-    v-model:mode="showMode"
     @to-next="handleSwitch"
     @to-avatar="selectRole"
   />
-  <TwoSelectC v-model="showSelect" @select-c="handleSelect" v-model:reset="resetSelect" />
+  <TwoSelectC v-model="showSelect" v-model:reset="resetSelect" @select-c="handleSelect" />
 </template>
 <script lang="ts" setup>
 import showDialog from "@comp/func/dialog.js";
@@ -430,8 +433,7 @@ function handleSwitch(next: boolean): void {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
-  margin-left: 8px;
+  margin-left: 12px;
   gap: 8px;
 
   img {
@@ -450,8 +452,8 @@ function handleSwitch(next: boolean): void {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  margin-bottom: 4px;
   margin-left: 16px;
-  gap: 8px;
 }
 
 .uc-select-btn {
@@ -522,21 +524,16 @@ function handleSwitch(next: boolean): void {
 .uc-top-btns {
   display: flex;
   align-content: center;
-  margin-right: 16px;
+  margin-right: 12px;
   column-gap: 8px;
 }
 
 .uc-top-btn {
-  border-radius: 5px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-text);
 }
 
-.dark .uc-top-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .uc-grid {
   display: grid;
   gap: 8px;
diff --git a/src/pages/User/Combat.vue b/src/pages/User/Combat.vue
index 582a32ef..c92335f3 100644
--- a/src/pages/User/Combat.vue
+++ b/src/pages/User/Combat.vue
@@ -13,11 +13,11 @@
           label="游戏UID"
           variant="outlined"
         />
-        <v-btn :rounded="true" class="uc-btn" @click="toAbyss()">
+        <v-btn class="uc-btn" rounded variant="elevated" @click="toAbyss()">
           <img alt="abyss" src="/source/UI/userAbyss.webp" />
           <span>深境螺旋</span>
         </v-btn>
-        <v-btn :rounded="true" class="uc-btn" @click="toChallenge()">
+        <v-btn class="uc-btn" rounded variant="elevated" @click="toChallenge()">
           <img alt="challenge" src="/source/UI/userChallenge.webp" />
           <span>幽境危战</span>
         </v-btn>
@@ -27,20 +27,30 @@
       <div class="uct-right">
         <v-btn
           :disabled="localCombat.length === 0"
-          :rounded="true"
           class="uc-btn"
           prepend-icon="mdi-share"
+          variant="elevated"
           @click="shareCombat()"
         >
           分享
         </v-btn>
-        <v-btn :rounded="true" class="uc-btn" prepend-icon="mdi-refresh" @click="refreshCombat()">
+        <v-btn
+          class="uc-btn"
+          prepend-icon="mdi-refresh"
+          variant="elevated"
+          @click="refreshCombat()"
+        >
           刷新
         </v-btn>
-        <v-btn :rounded="true" class="uc-btn" prepend-icon="mdi-download" @click="tryReadCombat()">
+        <v-btn
+          class="uc-btn"
+          prepend-icon="mdi-download"
+          variant="elevated"
+          @click="tryReadCombat()"
+        >
           导入
         </v-btn>
-        <v-btn :rounded="true" class="uc-btn" prepend-icon="mdi-delete" @click="deleteCombat()">
+        <v-btn class="uc-btn" prepend-icon="mdi-delete" variant="elevated" @click="deleteCombat()">
           删除
         </v-btn>
       </div>
@@ -324,10 +334,6 @@ async function tryReadCombat(): Promise<void> {
   }
 }
 
-.dark .uc-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .uc-box {
   display: flex;
   height: calc(100vh - 96px);
diff --git a/src/pages/User/Gacha.vue b/src/pages/User/Gacha.vue
index f14ef9ff..afbd67d0 100644
--- a/src/pages/User/Gacha.vue
+++ b/src/pages/User/Gacha.vue
@@ -24,25 +24,64 @@
     </template>
     <template #extension>
       <div class="gacha-top-btns">
-        <v-btn class="gacha-top-btn" prepend-icon="mdi-refresh" @click="confirmRefresh(false)">
+        <v-btn
+          class="gacha-top-btn"
+          prepend-icon="mdi-refresh"
+          variant="elevated"
+          @click="confirmRefresh(false)"
+        >
           增量刷新
         </v-btn>
-        <v-btn class="gacha-top-btn" prepend-icon="mdi-refresh" @click="confirmRefresh(true)">
+        <v-btn
+          class="gacha-top-btn"
+          prepend-icon="mdi-refresh"
+          variant="elevated"
+          @click="confirmRefresh(true)"
+        >
           全量刷新
         </v-btn>
-        <v-btn class="gacha-top-btn" prepend-icon="mdi-import" @click="importUigf()">导入</v-btn>
-        <v-btn class="gacha-top-btn" prepend-icon="mdi-import" @click="importUigf4()">
+        <v-btn
+          class="gacha-top-btn"
+          prepend-icon="mdi-import"
+          variant="elevated"
+          @click="importUigf()"
+          >导入</v-btn
+        >
+        <v-btn
+          class="gacha-top-btn"
+          prepend-icon="mdi-import"
+          variant="elevated"
+          @click="importUigf4()"
+        >
           导入(v4)
         </v-btn>
-        <v-btn class="gacha-top-btn" prepend-icon="mdi-export" @click="exportUigf()">导出</v-btn>
-        <v-btn class="gacha-top-btn" prepend-icon="mdi-export" @click="exportUigf4()">
+        <v-btn
+          class="gacha-top-btn"
+          prepend-icon="mdi-export"
+          variant="elevated"
+          @click="exportUigf()"
+          >导出</v-btn
+        >
+        <v-btn
+          class="gacha-top-btn"
+          prepend-icon="mdi-export"
+          variant="elevated"
+          @click="exportUigf4()"
+        >
           导出(v4)
         </v-btn>
-        <v-btn class="gacha-top-btn" prepend-icon="mdi-delete" @click="deleteGacha()">删除</v-btn>
+        <v-btn
+          class="gacha-top-btn"
+          prepend-icon="mdi-delete"
+          variant="elevated"
+          @click="deleteGacha()"
+          >删除</v-btn
+        >
         <v-btn
           class="gacha-top-btn"
           prepend-icon="mdi-database-check"
           title="检测并补充遗漏的itemId"
+          variant="elevated"
           @click="checkData()"
         >
           检测数据
@@ -480,20 +519,16 @@ async function checkData(): Promise<void> {
 
 .gacha-top-btns {
   display: flex;
+  margin-bottom: 4px;
   margin-left: 16px;
   column-gap: 8px;
 }
 
 .gacha-top-btn {
-  border-radius: 5px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }
 
-.dark .gacha-top-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .gacha-container {
   display: flex;
   height: calc(100vh - 144px);
diff --git a/src/pages/User/GachaB.vue b/src/pages/User/GachaB.vue
index c0d74a63..3629695f 100644
--- a/src/pages/User/GachaB.vue
+++ b/src/pages/User/GachaB.vue
@@ -1,4 +1,4 @@
-<!-- 千星奇域祈愿记录页面 TODO：处理活动卡池次数共享 -->
+variantelevated<!-- 千星奇域祈愿记录页面 TODO：处理活动卡池次数共享 -->
 <template>
   <v-app-bar>
     <template #prepend>
@@ -18,13 +18,30 @@
     </template>
     <template #extension>
       <div class="gb-top-btns">
-        <v-btn class="gb-top-btn" prepend-icon="mdi-refresh" @click="confirmRefresh(false)">
+        <v-btn
+          class="gb-top-btn"
+          prepend-icon="mdi-refresh"
+          variant="elevated"
+          @click="confirmRefresh(false)"
+        >
           增量刷新
         </v-btn>
-        <v-btn class="gb-top-btn" prepend-icon="mdi-refresh" @click="confirmRefresh(true)">
+        <v-btn
+          class="gb-top-btn"
+          prepend-icon="mdi-refresh"
+          variant="elevated"
+          @click="confirmRefresh(true)"
+        >
           全量刷新
         </v-btn>
-        <v-btn class="gb-top-btn" prepend-icon="mdi-delete" @click="deleteGacha()">删除</v-btn>
+        <v-btn
+          class="gb-top-btn"
+          prepend-icon="mdi-delete"
+          variant="elevated"
+          @click="deleteGacha()"
+        >
+          删除
+        </v-btn>
       </div>
     </template>
   </v-app-bar>
@@ -303,20 +320,16 @@ async function deleteGacha(): Promise<void> {
 
 .gb-top-btns {
   display: flex;
+  margin-bottom: 4px;
   margin-left: 16px;
   column-gap: 8px;
 }
 
 .gb-top-btn {
-  border-radius: 4px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }
 
-.dark .gb-top-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .gb-container {
   display: flex;
   height: calc(100vh - 144px);
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index b4994c05..a70404a8 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -5,38 +5,46 @@
         <img alt="icon" src="/source/UI/userRecord.webp" />
         <span>原神战绩</span>
         <v-select
-          density="compact"
-          variant="outlined"
           v-model="uidCur"
-          :items="uidList"
           :hide-details="true"
+          :items="uidList"
+          density="compact"
           label="游戏UID"
+          variant="outlined"
         />
       </div>
     </template>
     <template #append>
       <div class="ur-top-btns">
-        <v-btn prepend-icon="mdi-refresh" class="ur-top-btn" @click="refreshRecord()">更新</v-btn>
         <v-btn
-          prepend-icon="mdi-share"
           class="ur-top-btn"
-          @click="shareRecord()"
+          prepend-icon="mdi-refresh"
+          variant="elevated"
+          @click="refreshRecord()"
+          >更新</v-btn
+        >
+        <v-btn
           :disabled="recordData === undefined"
+          class="ur-top-btn"
+          prepend-icon="mdi-share"
+          variant="elevated"
+          @click="shareRecord()"
         >
           分享
         </v-btn>
         <v-btn
-          prepend-icon="mdi-delete"
-          class="ur-top-btn"
-          @click="deleteRecord()"
           :disabled="recordData === undefined"
+          class="ur-top-btn"
+          prepend-icon="mdi-delete"
+          variant="elevated"
+          @click="deleteRecord()"
         >
           删除
         </v-btn>
       </div>
     </template>
   </v-app-bar>
-  <div class="ur-box" v-if="recordData">
+  <div v-if="recordData" class="ur-box">
     <div class="ur-box-title">
       <TurRoleInfo :role="recordData.role" :uid="uidCur ?? 0" />
       <span class="sign">TeyvatGuide v{{ version }} | {{ recordData.updated }}</span>
@@ -58,7 +66,7 @@
       <TurHomeGrid :model-value="recordData.homes" />
     </PhCompCard>
   </div>
-  <div class="ur-empty" v-else>
+  <div v-else class="ur-empty">
     <img alt="empty" src="/source/UI/empty.webp" />
     <span>DATA NOT FOUND</span>
   </div>
@@ -207,8 +215,7 @@ async function deleteRecord(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
-  margin-left: 8px;
+  margin-left: 12px;
   gap: 8px;
 
   img {
@@ -226,7 +233,7 @@ async function deleteRecord(): Promise<void> {
 .ur-top-btns {
   position: relative;
   display: flex;
-  margin-right: 16px;
+  margin-right: 12px;
   gap: 8px;
 }
 
@@ -237,10 +244,6 @@ async function deleteRecord(): Promise<void> {
   font-family: var(--font-text);
 }
 
-.dark .ur-top-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .ur-box {
   @include github-styles.github-card-shadow;
 
diff --git a/src/pages/User/Scripts.vue b/src/pages/User/Scripts.vue
index a16ef770..ca46edbe 100644
--- a/src/pages/User/Scripts.vue
+++ b/src/pages/User/Scripts.vue
@@ -46,15 +46,15 @@
             </div>
           </template>
         </v-select>
-        <v-btn :loading="runAll" class="run-all-btn" variant="elevated" @click="tryExecAll()"
-          >一键执行</v-btn
-        >
+        <v-btn :loading="runAll" class="run-all-btn" variant="elevated" @click="tryExecAll()">
+          一键执行
+        </v-btn>
       </div>
     </template>
     <template #append>
-      <span class="top-hint" title="点击验证" @click="tryCkVerify()">
-        需要验证码登录/游戏扫码登录所需cookie！！！
-      </span>
+      <v-btn class="us-test-btn" title="点击验证" variant="elevated" @click="tryCkVerify()">
+        打卡测试
+      </v-btn>
     </template>
   </v-app-bar>
   <div class="us-page-container">
@@ -180,8 +180,8 @@ async function tryExecAll(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  gap: 10px;
+  margin-left: 12px;
+  column-gap: 8px;
 
   img {
     width: 32px;
@@ -298,12 +298,13 @@ async function tryExecAll(): Promise<void> {
   row-gap: 8px;
 }
 
-.run-all-btn {
+.run-all-btn,
+.us-test-btn {
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }
 
-.dark .run-all-btn {
-  border: 1px solid var(--common-shadow-1);
+.us-test-btn {
+  margin-right: 12px;
 }
 </style>
diff --git a/src/pages/common/PageAchi.vue b/src/pages/common/PageAchi.vue
index 41355cfd..a01fd1f4 100644
--- a/src/pages/common/PageAchi.vue
+++ b/src/pages/common/PageAchi.vue
@@ -31,10 +31,18 @@
     </template>
     <template #extension>
       <div class="top-extension">
-        <v-btn class="top-btn" prepend-icon="mdi-import" @click="importJson()">导入</v-btn>
-        <v-btn class="top-btn" prepend-icon="mdi-export" @click="exportJson()">导出</v-btn>
-        <v-btn class="top-btn" prepend-icon="mdi-plus" @click="createUid()">新建存档</v-btn>
-        <v-btn class="top-btn" prepend-icon="mdi-delete" @click="deleteUid()">删除存档</v-btn>
+        <v-btn class="top-btn" prepend-icon="mdi-import" variant="elevated" @click="importJson()"
+          >导入</v-btn
+        >
+        <v-btn class="top-btn" prepend-icon="mdi-export" variantelevated @click="exportJson()"
+          >导出</v-btn
+        >
+        <v-btn class="top-btn" prepend-icon="mdi-plus" variant="elevated" @click="createUid()"
+          >新建存档</v-btn
+        >
+        <v-btn class="top-btn" prepend-icon="mdi-delete" variant="elevated" @click="deleteUid()"
+          >删除存档</v-btn
+        >
         <div class="top-switch" @click="switchHideFin">
           <v-icon v-if="hideFin" color="var(--tgc-od-green)">
             mdi-checkbox-marked-circle-outline
@@ -47,6 +55,7 @@
         class="top-link top-btn"
         prepend-icon="mdi-import"
         title="通过Yae导入"
+        variant="elevated"
         @click="toYae()"
       >
         YAE
@@ -377,7 +386,6 @@ async function toYae(): Promise<void> {
   height: 50px;
   align-items: center;
   justify-content: center;
-  padding: 10px;
   margin: 0 10px;
   color: var(--box-text-1);
 }
@@ -387,14 +395,13 @@ async function toYae(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
-  margin-left: 8px;
+  margin-bottom: 4px;
+  margin-left: 16px;
   column-gap: 8px;
 }
 
 .top-btn {
   height: 40px;
-  border: 1px solid var(--common-shadow-2);
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-title);
@@ -412,6 +419,7 @@ async function toYae(): Promise<void> {
 
 .top-link {
   margin-right: 16px;
+  margin-bottom: 4px;
   margin-left: auto;
 }
 
diff --git a/src/pages/common/PageAnno.vue b/src/pages/common/PageAnno.vue
index e3cf7ffc..b4c58cc4 100644
--- a/src/pages/common/PageAnno.vue
+++ b/src/pages/common/PageAnno.vue
@@ -1,42 +1,57 @@
+<!-- 公告页面 -->
 <template>
   <v-app-bar>
     <template #prepend>
-      <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
-        <v-tab v-for="(tab, index) in tabList" :key="index" :value="tab.value">
-          {{ tab.text }}
-        </v-tab>
-      </v-tabs>
-      <div class="anno-selects">
-        <v-select
-          class="anno-select"
-          :items="serverList"
-          v-model="server"
-          item-title="text"
-          item-value="value"
-          label="服务器"
-          width="200px"
-          density="compact"
-          :disabled="isReq"
-        />
-        <v-select
-          class="anno-select"
-          :items="langList"
-          v-model="lang"
-          item-title="text"
-          item-value="value"
-          label="语言"
-          width="200px"
-          density="compact"
-          :disabled="isReq"
-        />
+      <div class="pa-prepend">
+        <v-tabs v-model="tab" align-tabs="start" class="pa-tabs">
+          <v-tab v-for="(tab, index) in tabList" :key="index" :value="tab.value">
+            {{ tab.text }}
+          </v-tab>
+        </v-tabs>
+        <div class="pa-selects">
+          <v-select
+            v-model="server"
+            :disabled="isReq"
+            :items="serverList"
+            class="anno-select"
+            density="compact"
+            item-title="text"
+            item-value="value"
+            label="服务器"
+            width="200px"
+          />
+          <v-select
+            v-model="lang"
+            :disabled="isReq"
+            :items="langList"
+            class="anno-select"
+            density="compact"
+            item-title="text"
+            item-value="value"
+            label="语言"
+            width="200px"
+          />
+        </div>
       </div>
     </template>
     <template #append>
       <div class="anno-top-append">
-        <v-btn class="anno-switch-btn" @click="switchNews" prepend-icon="mdi-bullhorn">
+        <v-btn
+          class="anno-btn"
+          prepend-icon="mdi-bullhorn"
+          rounded
+          variant="elevated"
+          @click="switchNews"
+        >
           切换米游社咨讯
         </v-btn>
-        <v-btn class="anno-switch-btn" v-if="isLogin" @click="showIframe()">
+        <v-btn
+          v-if="isLogin"
+          class="anno-btn"
+          size="small"
+          variant="elevated"
+          @click="showIframe()"
+        >
           <v-icon>mdi-web</v-icon>
         </v-btn>
       </div>
@@ -57,7 +72,7 @@ import showSnackbar from "@comp/func/snackbar.js";
 import TaCard from "@comp/pageAnno/ta-card.vue";
 import TaoIframe from "@comp/pageAnno/tao-iframe.vue";
 import { AnnoLangEnum, AnnoTypeEnum, getAnnoLangDesc, getAnnoTypeDesc } from "@enum/anno.js";
-import { getGameServerDesc, GameServerEnum } from "@enum/game.js";
+import { GameServerEnum, getGameServerDesc } from "@enum/game.js";
 import hk4eReq from "@req/hk4eReq.js";
 import useAppStore from "@store/app.js";
 import TGLogger from "@utils/TGLogger.js";
@@ -216,24 +231,34 @@ async function switchNews(): Promise<void> {
   await router.push("/news/2");
 }
 </script>
+<style lang="scss" scoped>
+.pa-prepend {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 12px;
+  column-gap: 8px;
+}
 
-<style lang="css" scoped>
-.anno-tab {
+.pa-tabs {
+  margin-bottom: 8px;
   color: var(--common-text-title);
   font-family: var(--font-title);
 }
 
-.anno-selects {
+.pa-selects {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 25px;
-  margin: 0 10px;
-  gap: 10px;
+  margin: 0 8px;
+  column-gap: 8px;
 }
 
 .anno-select {
   width: 150px;
+  height: 40px;
   color: var(--common-text-title);
   font-family: var(--font-title);
 }
@@ -242,21 +267,17 @@ async function switchNews(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 16px;
+  margin-right: 12px;
   column-gap: 8px;
 }
 
-.anno-switch-btn {
+.anno-btn {
   height: 40px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-title);
 }
 
-.dark .anno-switch-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .anno-grid {
   display: grid;
   font-family: var(--font-title);
diff --git a/src/pages/common/PageBagMaterial.vue b/src/pages/common/PageBagMaterial.vue
index a2fea726..f1a2ce7d 100644
--- a/src/pages/common/PageBagMaterial.vue
+++ b/src/pages/common/PageBagMaterial.vue
@@ -53,19 +53,30 @@
     </template>
     <template #append>
       <div class="pbm-nav-extension">
-        <v-btn class="pbm-ne-btn" prepend-icon="mdi-import" @click="tryCallYae()">导入</v-btn>
-        <v-btn class="pbm-ne-btn" prepend-icon="mdi-plus" @click="createUid()">新建存档</v-btn>
-        <v-btn class="pbm-ne-btn" prepend-icon="mdi-delete" @click="deleteUid()">删除存档</v-btn>
+        <v-btn
+          class="pbm-ne-btn"
+          prepend-icon="mdi-import"
+          variant="elevated"
+          @click="tryCallYae()"
+        >
+          导入
+        </v-btn>
+        <v-btn class="pbm-ne-btn" prepend-icon="mdi-plus" variant="elevated" @click="createUid()">
+          新建存档
+        </v-btn>
+        <v-btn class="pbm-ne-btn" prepend-icon="mdi-delete" variant="elevated" @click="deleteUid()">
+          删除存档
+        </v-btn>
       </div>
     </template>
   </v-app-bar>
   <div class="pbm-container">
     <template v-for="material in materialShow" :key="`${curUid}-${material.info.id}`">
       <PbMaterialItem
+        :cur="curMaterial"
         :info="material.info"
         :tb="material.tb"
         @select="handleSelect"
-        :cur="curMaterial"
       />
     </template>
   </div>
@@ -380,13 +391,12 @@ function switchMaterial(isNext: boolean): void {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 16px;
+  margin-right: 12px;
   column-gap: 8px;
 }
 
 .pbm-ne-btn {
   height: 40px;
-  border: 1px solid var(--common-shadow-2);
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-title);
diff --git a/src/pages/common/PostCollect.vue b/src/pages/common/PostCollect.vue
index c8cbd035..c91d54e2 100644
--- a/src/pages/common/PostCollect.vue
+++ b/src/pages/common/PostCollect.vue
@@ -2,88 +2,102 @@
   <v-app-bar>
     <div class="pc-top">
       <div class="pc-title">
-        <img src="/source/UI/posts.webp" alt="posts" />
+        <img alt="posts" src="/source/UI/posts.webp" />
         <span>收藏</span>
       </div>
       <v-select
-        :hide-details="true"
-        density="compact"
         v-model="curSelect"
-        class="pc-select"
-        :items="collections"
         :clearable="curSelect !== '未分类'"
-        variant="outlined"
+        :hide-details="true"
+        :items="collections"
+        class="pc-select"
+        density="compact"
         label="合集"
+        variant="outlined"
       >
         <template v-slot:item="{ props, item }">
-          <v-list-item v-bind="props" :title="item.raw.title" :subtitle="item.raw.desc" />
+          <v-list-item :subtitle="item.raw.desc" :title="item.raw.title" v-bind="props" />
         </template>
       </v-select>
     </div>
-    <template #append>
-      <v-pagination class="pc-page" v-model="page" :total-visible="view" :length="length" />
-    </template>
     <template #extension>
-      <div class="pc-btns">
-        <v-btn
+      <div class="pc-extension">
+        <div class="pc-btns">
+          <v-btn
+            :title="sortId ? '按更新时间排序' : '按帖子ID排序'"
+            class="pc-btn"
+            icon="mdi-sort"
+            size="small"
+            variant="elevated"
+            @click="sortPost(!sortId)"
+          />
+          <v-btn
+            :disabled="selectedMode"
+            class="pc-btn"
+            icon="mdi-refresh"
+            size="small"
+            title="获取用户收藏"
+            variant="elevated"
+            @click="freshUser()"
+          />
+          <v-btn
+            :disabled="selectedMode"
+            class="pc-btn"
+            icon="mdi-import"
+            size="small"
+            title="导入其他用户收藏"
+            variant="elevated"
+            @click="freshOther"
+          />
+          <v-btn
+            :icon="selectedMode ? 'mdi-folder-move' : 'mdi-pencil'"
+            class="pc-btn"
+            size="small"
+            title="编辑收藏"
+            variant="elevated"
+            @click="toSelect()"
+          />
+          <v-btn
+            :disabled="selectedMode"
+            class="pc-btn"
+            icon="mdi-plus"
+            size="small"
+            title="新建分类"
+            variant="elevated"
+            @click="addCollect"
+          />
+          <v-btn
+            :disabled="selectedMode || curSelect === '未分类'"
+            class="pc-btn"
+            icon="mdi-information"
+            size="small"
+            title="编辑分类"
+            variant="elevated"
+            @click="toEdit()"
+          />
+          <v-btn
+            :title="selectedMode ? '删除帖子分类' : '清空合集'"
+            class="pc-btn"
+            icon="mdi-delete"
+            size="small"
+            variant="elevated"
+            @click="deleteOper(false)"
+          />
+          <v-btn
+            :title="selectedMode ? '删除帖子' : '删除合集'"
+            class="pc-btn"
+            icon="mdi-delete-forever"
+            size="small"
+            variant="elevated"
+            @click="deleteOper(true)"
+          />
+        </div>
+        <v-pagination
+          v-model="page"
+          :length="length"
+          :total-visible="view"
           size="small"
-          class="pc-btn"
-          icon="mdi-sort"
-          @click="sortPost(!sortId)"
-          :title="sortId ? '按更新时间排序' : '按帖子ID排序'"
-        />
-        <v-btn
-          :disabled="selectedMode"
-          size="small"
-          class="pc-btn"
-          icon="mdi-refresh"
-          title="获取用户收藏"
-          @click="freshUser()"
-        />
-        <v-btn
-          :disabled="selectedMode"
-          size="small"
-          class="pc-btn"
-          icon="mdi-import"
-          @click="freshOther"
-          title="导入其他用户收藏"
-        />
-        <v-btn
-          size="small"
-          class="pc-btn"
-          :icon="selectedMode ? 'mdi-folder-move' : 'mdi-pencil'"
-          @click="toSelect()"
-          title="编辑收藏"
-        />
-        <v-btn
-          :disabled="selectedMode"
-          size="small"
-          class="pc-btn"
-          icon="mdi-plus"
-          @click="addCollect"
-          title="新建分类"
-        />
-        <v-btn
-          :disabled="selectedMode || curSelect === '未分类'"
-          size="small"
-          class="pc-btn"
-          icon="mdi-information"
-          @click="toEdit()"
-          title="编辑分类"
-        />
-        <v-btn
-          size="small"
-          class="pc-btn"
-          icon="mdi-delete"
-          @click="deleteOper(false)"
-          :title="selectedMode ? '删除帖子分类' : '清空合集'"
-        />
-        <v-btn
-          size="small"
-          class="pc-btn"
-          icon="mdi-delete-forever"
-          @click="deleteOper(true)"
-          :title="selectedMode ? '删除帖子' : '删除合集'"
+          variant="elevated"
         />
       </div>
     </template>
@@ -91,15 +105,15 @@
   <div class="pc-posts">
     <div v-for="item in curPosts" :key="item.post.post_id">
       <TPostCard
-        @onSelected="handleSelected"
         :model-value="item"
         :select-mode="selectedMode"
         :user-click="true"
+        @onSelected="handleSelected"
         @onUserClick="handleUserClick"
       />
     </div>
   </div>
-  <ToCollectPost @submit="load" :post="selectedPost" v-model="showCollect" />
+  <ToCollectPost v-model="showCollect" :post="selectedPost" @submit="load" />
   <VpOverlayUser v-model="showUser" :gid="curGid" :uid="curUid" />
 </template>
 <script lang="ts" setup>
@@ -405,6 +419,7 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
 </script>
 <style lang="css" scoped>
 .pc-top {
+  position: relative;
   display: flex;
   margin-left: 12px;
   gap: 8px;
@@ -432,11 +447,21 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   min-width: 150px;
 }
 
+.pc-extension {
+  position: relative;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  margin-bottom: 4px;
+}
+
 .pc-btns {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: 16px;
   gap: 8px;
 }
 
@@ -447,14 +472,10 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   font-family: var(--font-title);
 }
 
-.dark .pc-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .pc-posts {
   display: grid;
   grid-auto-rows: auto;
-  grid-gap: 8px;
+  gap: 8px;
   grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
 }
 </style>
diff --git a/src/pages/common/PostForum.vue b/src/pages/common/PostForum.vue
index 9f292eda..d01c5d26 100644
--- a/src/pages/common/PostForum.vue
+++ b/src/pages/common/PostForum.vue
@@ -2,28 +2,28 @@
   <v-app-bar>
     <template #prepend>
       <div class="posts-top">
-        <img src="/source/UI/posts.webp" alt="posts" />
+        <img alt="posts" src="/source/UI/posts.webp" />
         <span>帖子</span>
       </div>
     </template>
     <div class="posts-switch">
       <v-select
         v-model="curGid"
-        class="post-switch-item"
+        :disabled="isReq"
         :items="sortGameList"
+        class="post-switch-item"
         item-title="text"
         item-value="gid"
-        variant="outlined"
         label="分区"
-        :disabled="isReq"
+        variant="outlined"
       >
         <template #selection="{ item }">
           <div class="select-item main">
             <TMiImg
               v-if="item.raw.icon"
-              :src="item.raw.icon"
-              :ori="true"
               :alt="item.raw.text"
+              :ori="true"
+              :src="item.raw.icon"
               :title="item.raw.text"
               class="icon"
             />
@@ -32,16 +32,16 @@
         </template>
         <template #item="{ props, item }">
           <div
-            v-bind="props"
-            class="select-item sub"
             :class="{ selected: item.raw.gid === curGid }"
+            class="select-item sub"
+            v-bind="props"
           >
             <TMiImg
               v-if="item.raw.icon"
-              :src="item.raw.icon"
               :alt="item.raw.text"
-              class="icon"
               :ori="true"
+              :src="item.raw.icon"
+              class="icon"
             />
             <span>{{ item.raw.text }}</span>
           </div>
@@ -49,19 +49,19 @@
       </v-select>
       <v-select
         v-model="selectedForum"
-        class="post-switch-item"
-        :items="curForums"
-        item-title="text"
-        variant="outlined"
-        label="版块"
         :disabled="isReq"
+        :items="curForums"
+        class="post-switch-item"
+        item-title="text"
+        label="版块"
+        variant="outlined"
       >
         <template #selection="{ item }">
           <div class="select-item main">
             <TMiImg
-              :src="item.raw.icon"
               :alt="item.raw.text"
               :ori="true"
+              :src="item.raw.icon"
               :title="item.raw.text"
               class="icon"
             />
@@ -70,38 +70,44 @@
         </template>
         <template #item="{ props, item }">
           <div
-            v-bind="props"
-            class="select-item sub"
-            @click="selectedForum = item.raw"
             :class="{ selected: item.raw.value === selectedForum?.value }"
+            class="select-item sub"
+            v-bind="props"
+            @click="selectedForum = item.raw"
           >
-            <TMiImg :src="item.raw.icon" :alt="item.raw.text" :ori="true" class="icon" />
+            <TMiImg :alt="item.raw.text" :ori="true" :src="item.raw.icon" class="icon" />
             <span>{{ item.raw.text }}</span>
           </div>
         </template>
       </v-select>
       <v-select
         v-model="curSortType"
-        class="post-switch-item"
+        :disabled="isReq"
         :items="sortOrderList"
+        class="post-switch-item"
         item-title="text"
         item-value="value"
-        variant="outlined"
         label="排序"
-        :disabled="isReq"
+        variant="outlined"
       />
       <v-text-field
         v-model="search"
-        class="post-switch-item"
+        :hide-details="true"
+        :single-line="true"
         append-inner-icon="mdi-magnify"
+        class="post-switch-item"
         label="请输入帖子 ID 或搜索词"
         variant="outlined"
-        :single-line="true"
-        :hide-details="true"
         @click:append="searchPost"
         @keyup.enter="searchPost"
       />
-      <v-btn :rounded="true" class="post-forum-btn" @click="freshPostData()" :loading="isReq">
+      <v-btn
+        :loading="isReq"
+        :rounded="true"
+        class="post-forum-btn"
+        variant="elevated"
+        @click="freshPostData()"
+      >
         <v-icon>mdi-refresh</v-icon>
         <span>刷新</span>
       </v-btn>
@@ -115,10 +121,10 @@
       <TPostCard :model-value="post" :user-click="true" @onUserClick="handleUserClick" />
     </div>
   </div>
-  <VpOverlaySearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
+  <VpOverlaySearch v-model="showSearch" :gid="curGid.toString()" :keyword="search" />
   <VpOverlayUser v-model="showUser" :gid="curGid" :uid="curUid" />
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import TGameNav from "@comp/app/t-gameNav.vue";
 import TMiImg from "@comp/app/t-mi-img.vue";
 import TPostCard from "@comp/app/t-postcard.vue";
@@ -395,15 +401,11 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   font-family: var(--font-title);
 }
 
-.dark .post-forum-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .posts-grid {
   display: grid;
   font-family: var(--font-title);
   grid-auto-rows: auto;
-  grid-gap: 8px;
+  gap: 8px;
   grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
 }
 
diff --git a/src/pages/common/PostNews.vue b/src/pages/common/PostNews.vue
index 4b5296b1..00a76aa4 100644
--- a/src/pages/common/PostNews.vue
+++ b/src/pages/common/PostNews.vue
@@ -1,13 +1,13 @@
 <template>
-  <v-app-bar density="compact">
+  <v-app-bar>
     <template #prepend>
-      <v-tabs v-model="tab" align-tabs="start" class="news-tab">
+      <v-tabs v-model="tab" align-tabs="center" class="news-tab">
         <v-tab
           v-for="(value, index) in tabValues"
           :key="index"
+          :disabled="loading"
           :value="value"
           @click="firstLoad(value)"
-          :disabled="loading"
         >
           {{ rawData[value].name }}
         </v-tab>
@@ -16,28 +16,36 @@
     <template #title>
       <v-text-field
         v-model="search"
-        class="news-search"
-        append-icon="mdi-magnify"
-        label="请输入帖子 ID 或搜索词"
-        :single-line="true"
         :hide-details="true"
+        :single-line="true"
+        append-icon="mdi-magnify"
+        class="news-search"
+        density="compact"
+        label="请输入帖子 ID 或搜索词"
         @keydown.enter="searchPost()"
         @click:append="searchPost()"
       />
     </template>
     <template #append>
       <v-btn
-        class="post-news-btn"
         :loading="loading"
-        @click="firstLoad(tab, true)"
-        icon="mdi-refresh"
-      />
-      <v-btn class="post-news-btn" @click="handleList()" icon="mdi-view-list" />
-      <v-btn
         class="post-news-btn"
-        @click="switchAnno"
+        size="small"
+        variant="elevated"
+        @click="firstLoad(tab, true)"
+      >
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
+      <v-btn class="post-news-btn" size="small" variant="elevated" @click="handleList()">
+        <v-icon>mdi-view-list</v-icon>
+      </v-btn>
+      <v-btn
         v-if="gid === '2'"
+        class="post-news-btn"
         prepend-icon="mdi-bullhorn"
+        rounded
+        variant="elevated"
+        @click="switchAnno"
       >
         切换游戏内公告
       </v-btn>
@@ -53,7 +61,7 @@
     </v-window-item>
   </v-window>
   <ToChannel v-model="showList" :gid="gid" />
-  <VpOverlaySearch :gid="gid" v-model="showSearch" :keyword="search" />
+  <VpOverlaySearch v-model="showSearch" :gid="gid" :keyword="search" />
 </template>
 <script lang="ts" setup>
 import TPostCard from "@comp/app/t-postcard.vue";
@@ -198,20 +206,23 @@ async function searchPost(): Promise<void> {
 </script>
 <style lang="scss" scoped>
 .news-tab {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   color: var(--common-text-title);
   font-family: var(--font-title);
+
+  &:first-child {
+    margin-left: 12px;
+  }
 }
 
 .post-news-btn {
   height: 40px;
-  border-radius: 3px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-title);
 
   &:last-child {
-    margin-right: 16px;
+    margin-right: 12px;
   }
 }
 
@@ -219,20 +230,16 @@ async function searchPost(): Promise<void> {
   margin-left: 8px;
 }
 
-.dark .post-news-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .news-search {
-  margin: 0 10px;
+  margin: 0 16px;
   color: var(--box-text-1);
 }
 
 .news-grid {
   display: grid;
   font-family: var(--font-title);
+  gap: 8px;
   grid-auto-rows: auto;
-  grid-gap: 8px;
   grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
 }
 </style>
diff --git a/src/pages/common/PostTopic.vue b/src/pages/common/PostTopic.vue
index 6c164c4e..17509170 100644
--- a/src/pages/common/PostTopic.vue
+++ b/src/pages/common/PostTopic.vue
@@ -1,34 +1,40 @@
+<!-- 话题页面 -->
 <template>
   <v-app-bar>
     <template #prepend>
-      <div class="post-topic-top" v-if="topicInfo" :class="sidebar.collapse ? 'wide' : 'thin'">
-        <TMiImg :src="topicInfo.topic.cover" alt="cover" :ori="true" />
+      <div v-if="topicInfo" :class="sidebar.collapse ? 'wide' : 'thin'" class="post-topic-top">
+        <TMiImg :ori="true" :src="topicInfo.topic.cover" alt="cover" />
         <div class="post-topic-info">
-          <span>{{ curTopic }}-{{ topicInfo.topic.name }}</span>
-          <span :title="topicInfo.topic.desc">{{ topicInfo.topic.desc }}</span>
+          <span class="post-topic-title">{{ topicInfo.topic.name }}</span>
+          <span :title="topicInfo.topic.desc" class="post-topic-desc">{{
+            topicInfo.topic.desc
+          }}</span>
+        </div>
+        <div :title="`话题ID：${topicInfo.topic.id}`" class="post-topic-id">
+          {{ topicInfo.topic.id }}
         </div>
       </div>
     </template>
     <template #extension>
-      <TGameNav :model-value="curGid" v-if="curGid !== 0" style="margin-left: 8px" />
+      <TGameNav v-if="curGid !== 0" :model-value="curGid" style="margin-left: 8px" />
     </template>
     <div class="post-topic-switch">
       <v-select
         v-model="curGame"
-        class="post-switch-item"
-        :items="getGameList(topicInfo?.game_info_list)"
-        item-title="name"
-        :item-value="(item) => item"
-        variant="outlined"
-        label="分区"
         :disabled="isReq"
+        :item-value="(item) => item"
+        :items="getGameList(topicInfo?.game_info_list)"
+        class="post-switch-item"
+        item-title="name"
+        label="分区"
+        variant="outlined"
       >
         <template #selection="{ item }">
           <div class="select-item main">
             <img
               v-if="item.raw.icon"
-              :src="item.raw.icon"
               :alt="item.raw.name"
+              :src="item.raw.icon"
               :title="item.raw.name"
               class="icon"
             />
@@ -36,11 +42,11 @@
           </div>
         </template>
         <template #item="{ props, item }">
-          <div v-bind="props" class="select-item sub" :class="{ selected: item.raw.id === curGid }">
+          <div :class="{ selected: item.raw.id === curGid }" class="select-item sub" v-bind="props">
             <img
               v-if="item.raw.icon"
-              :src="item.raw.icon"
               :alt="item.raw.name"
+              :src="item.raw.icon"
               :title="item.raw.name"
               class="icon"
             />
@@ -50,30 +56,32 @@
       </v-select>
       <v-select
         v-model="curSortType"
-        class="post-switch-item"
+        :disabled="isReq"
         :items="sortList"
+        class="post-switch-item"
         item-title="text"
         item-value="value"
-        variant="outlined"
         label="排序"
-        :disabled="isReq"
+        variant="outlined"
       />
       <v-text-field
         v-model="search"
-        class="post-switch-item"
+        :hide-details="true"
+        :single-line="true"
         append-inner-icon="mdi-magnify"
+        class="post-switch-item"
         label="请输入帖子 ID 或搜索词"
         variant="outlined"
-        :single-line="true"
-        :hide-details="true"
         @click:append="searchPost"
         @keyup.enter="searchPost"
       />
       <v-btn
         :loading="isReq"
         class="post-topic-btn"
-        @click="freshPostData()"
         prepend-icon="mdi-refresh"
+        rounded
+        variant="elevated"
+        @click="freshPostData()"
       >
         刷新
       </v-btn>
@@ -84,7 +92,7 @@
       <TPostCard :model-value="post" :user-click="true" @onUserClick="handleUserClick" />
     </div>
   </div>
-  <VpOverlaySearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
+  <VpOverlaySearch v-model="showSearch" :gid="curGid.toString()" :keyword="search" />
   <VpOverlayUser v-model="showUser" :gid="curGid" :uid="curUid" />
 </template>
 <script lang="ts" setup>
@@ -295,6 +303,7 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   display: flex;
   overflow: hidden;
   max-width: 100%;
+  height: 48px;
   box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
@@ -305,8 +314,9 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   gap: 4px;
 
   img {
-    width: 50px;
-    height: 50px;
+    height: 100%;
+    flex-shrink: 0;
+    aspect-ratio: 1;
   }
 
   &.wide {
@@ -331,21 +341,33 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
+}
 
-  :first-child {
-    color: var(--common-text-title);
-    font-family: var(--font-title);
-    font-size: 18px;
-  }
+.post-topic-title {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 18px;
+  line-height: 20px;
+}
 
-  :last-child {
-    overflow: hidden;
-    max-width: 100%;
-    max-lines: 1;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
-  }
+.post-topic-desc {
+  overflow: hidden;
+  max-width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  max-lines: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+
+.post-topic-id {
+  position: absolute;
+  z-index: 1;
+  top: 2px;
+  right: 2px;
+  color: var(--tgc-od-red);
+  font-size: 8px;
 }
 
 .post-topic-switch {
@@ -368,10 +390,6 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   font-family: var(--font-title);
 }
 
-.dark .post-topic-btn {
-  border: 1px solid var(--common-shadow-2);
-}
-
 .post-topic-grid {
   display: grid;
   font-family: var(--font-title);