From 95eca77d0a06ac960f5e58788814d1feceb23a42 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 2 Sep 2023 14:03:23 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=9A=84=E5=9B=9B=E4=B8=AA=E4=B8=80=E7=BA=A7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8B=89=E5=BC=BA=E6=94=B9=E5=AE=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/func/confirm.vue               |  2 +-
 src/components/gachaRecord/gro-dataview.vue   | 11 +--
 src/components/gachaRecord/gro-overview.vue   |  1 -
 src/components/main/t-subline.vue             | 16 +++--
 .../userAbyss/tua-detail-battle.vue           |  6 --
 src/components/userAbyss/tua-detail-level.vue |  3 +-
 src/components/userAbyss/tua-detail-title.vue | 18 ++---
 src/components/userAbyss/tua-detail.vue       |  9 ++-
 src/components/userAbyss/tua-overview.vue     | 13 ++--
 src/components/userCharacter/tuc-role-box.vue | 22 +++---
 src/components/userRecord/tur-home-sub.vue    | 12 ++--
 .../userRecord/tur-overview-sub.vue           |  8 +--
 src/components/userRecord/tur-world-sub.vue   | 15 ++--
 src/pages/User/Abyss.vue                      | 39 ++++++-----
 src/pages/User/Characters.vue                 | 68 ++++++++++--------
 src/pages/User/Gacha.vue                      | 70 ++++++++++---------
 src/pages/User/Record.vue                     | 46 +++++++-----
 src/pages/common/Achievements.vue             |  7 +-
 18 files changed, 189 insertions(+), 177 deletions(-)

diff --git a/src/components/func/confirm.vue b/src/components/func/confirm.vue
index 6ebab03b..b6ae3a5a 100644
--- a/src/components/func/confirm.vue
+++ b/src/components/func/confirm.vue
@@ -20,7 +20,7 @@
             <button
               class="confirm-btn"
               :style="{
-                backgroundColor: 'var(--box-bg-t-4)',
+                backgroundColor: 'var(--tgc-dark-2)',
               }"
               @click="handleClick(true)"
             >
diff --git a/src/components/gachaRecord/gro-dataview.vue b/src/components/gachaRecord/gro-dataview.vue
index d9f5930c..23870ff6 100644
--- a/src/components/gachaRecord/gro-dataview.vue
+++ b/src/components/gachaRecord/gro-dataview.vue
@@ -207,8 +207,9 @@ watch(
 .gro-dv-container {
   height: 100%;
   padding: 10px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  background: var(--common-shadow-2);
+  background: var(--box-bg-2);
 }
 
 .gro-dvt-title {
@@ -223,16 +224,16 @@ watch(
 
 .gro-dvt-subtitle {
   width: 100%;
-  color: var(--common-text-quote);
   font-family: var(--font-text);
   font-size: 12px;
+  opacity: 0.6;
 }
 
 .gro-mid-list {
   padding-top: 5px;
   padding-bottom: 5px;
   border-top: 1px solid var(--common-shadow-4);
-  color: var(--common-text-content);
+  color: var(--box-text-7);
 }
 
 .gro-ml-item {
@@ -250,7 +251,7 @@ watch(
 
 .gro-b-window-item {
   display: flex;
-  max-height: calc(100vh - 400px);
+  max-height: calc(100vh - 420px);
   flex-direction: column;
   margin-top: 10px;
   gap: 5px;
@@ -285,6 +286,6 @@ watch(
   justify-content: space-between;
   padding: 0 10px;
   border-radius: 5px;
-  background: var(--common-shadow-2);
+  background: var(--box-bg-3);
 }
 </style>
diff --git a/src/components/gachaRecord/gro-overview.vue b/src/components/gachaRecord/gro-overview.vue
index 3a993869..c244e013 100644
--- a/src/components/gachaRecord/gro-overview.vue
+++ b/src/components/gachaRecord/gro-overview.vue
@@ -44,6 +44,5 @@ watch(
   width: 100%;
   height: 100%;
   grid-gap: 10px;
-  transition: all 0.3s ease-in-out;
 }
 </style>
diff --git a/src/components/main/t-subline.vue b/src/components/main/t-subline.vue
index aafe6fdc..c2ee0ac9 100644
--- 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" class="tsl-icon" />
     <slot>
       {{ props.title }}
     </slot>
@@ -14,19 +14,21 @@ const props = defineProps<{
 <style lang="css" scoped>
 .tsl-box {
   display: flex;
-  height: 30px;
   align-items: center;
-  padding: 0 10px;
+  padding: 5px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin: 5px 0;
-  background: var(--common-shadow-2);
-  color: var(--common-color-white);
-  font-family: var(--font-text);
+  color: var(--box-text-4);
+  font-family: var(--font-title);
+  gap: 5px;
 }
 
 .tsl-box img {
   width: 20px;
   height: 20px;
-  margin-right: 5px;
+  padding: 5px;
+  border-radius: 5px;
+  background: var(--common-shadow-4);
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail-battle.vue b/src/components/userAbyss/tua-detail-battle.vue
index 2cd24995..74305cc8 100644
--- a/src/components/userAbyss/tua-detail-battle.vue
+++ b/src/components/userAbyss/tua-detail-battle.vue
@@ -21,12 +21,6 @@ interface TuaDetailBattleProps {
 const props = defineProps<TuaDetailBattleProps>();
 </script>
 <style lang="css" scoped>
-.tud-db-box {
-  padding: 5px;
-  border-radius: 5px;
-  background: var(--common-shadow-t-1);
-}
-
 .tud-db-icons-grid {
   display: flex;
   flex-direction: row;
diff --git a/src/components/userAbyss/tua-detail-level.vue b/src/components/userAbyss/tua-detail-level.vue
index 87a4e119..932bed75 100644
--- a/src/components/userAbyss/tua-detail-level.vue
+++ b/src/components/userAbyss/tua-detail-level.vue
@@ -25,9 +25,10 @@ const props = defineProps<TuaDetailLevelProps>();
   display: flex;
   flex-direction: column;
   padding: 10px;
+  border: 1px inset var(--common-shadow-2);
   border-radius: 5px;
   margin-top: 10px;
-  background: var(--common-shadow-1);
+  background: var(--box-bg-2);
   gap: 10px;
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail-title.vue b/src/components/userAbyss/tua-detail-title.vue
index fa456923..864796cc 100644
--- a/src/components/userAbyss/tua-detail-title.vue
+++ b/src/components/userAbyss/tua-detail-title.vue
@@ -43,31 +43,27 @@ const props = defineProps<TuaDetailTitleProps>();
   height: 30px;
   align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid var(--common-shadow-4);
 }
 
 .tud-t-title {
-  color: var(--common-text-content);
+  color: var(--box-text-4);
 }
 
 .tud-t-val {
   display: flex;
   align-items: center;
-  color: var(--common-color-white);
-  font-family: var(--font-text);
-  text-shadow: 0 0 10px var(--common-color-yellow);
-}
-
-.dark .tud-t-val {
-  color: var(--common-color-yellow);
-  text-shadow: none;
+  color: var(--tgc-yellow-1);
+  font-family: var(--font-title);
+  gap: 5px;
 }
 
 .tud-t-val img {
   width: 20px;
   height: 20px;
+  padding: 1px;
   border-radius: 50%;
-  margin-right: 5px;
-  background: var(--common-shadow-4);
+  background: var(--tgc-btn-1);
   object-fit: cover;
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail.vue b/src/components/userAbyss/tua-detail.vue
index d34b245b..8108c799 100644
--- a/src/components/userAbyss/tua-detail.vue
+++ b/src/components/userAbyss/tua-detail.vue
@@ -5,7 +5,6 @@
       :name="`第${props.modelValue.id}层`"
       mode="floor"
     />
-    <div class="tuad-divider" />
     <div class="tuad-index-box">
       <TuaDetailLevel
         v-for="level in props.modelValue.levels"
@@ -26,11 +25,11 @@ interface TuaDetailProps {
 const props = defineProps<TuaDetailProps>();
 </script>
 <style lang="css" scoped>
-.tuad-divider {
-  width: 100%;
-  height: 1px;
+.tuad-box {
+  padding: 10px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  background: var(--common-text-content);
+  background: var(--box-bg-1);
 }
 
 .tuad-index-box {
diff --git a/src/components/userAbyss/tua-overview.vue b/src/components/userAbyss/tua-overview.vue
index 5f4db6b2..ab2b6194 100644
--- a/src/components/userAbyss/tua-overview.vue
+++ b/src/components/userAbyss/tua-overview.vue
@@ -45,26 +45,21 @@ const getIconNum = computed(() => (props.multi4 ? 4 : 1));
   align-items: center;
   justify-content: center;
   padding: 10px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  background: var(--common-shadow-1);
+  background: var(--box-bg-2);
 }
 
 .tuao-title {
-  color: var(--common-text-content);
+  color: var(--box-text-4);
   font-family: var(--font-title);
   font-size: 20px;
 }
 
 .tuao-val-text {
-  color: var(--common-color-white);
+  color: var(--tgc-yellow-1);
   font-family: var(--font-text);
   font-size: 20px;
-  text-shadow: 0 0 10px var(--common-color-yellow);
-}
-
-.dark .tuao-val-text {
-  color: var(--common-color-yellow);
-  text-shadow: none;
 }
 
 .tuao-val-icons {
diff --git a/src/components/userCharacter/tuc-role-box.vue b/src/components/userCharacter/tuc-role-box.vue
index b1d878be..225536ad 100644
--- a/src/components/userCharacter/tuc-role-box.vue
+++ b/src/components/userCharacter/tuc-role-box.vue
@@ -130,15 +130,12 @@ onUnmounted(() => {
   padding: 5px;
   border: 1px inset var(--common-shadow-4);
   border-radius: 5px;
+  background: var(--box-bg-2);
   cursor: pointer;
   row-gap: 5px;
   transition: all 0.3s;
 }
 
-.tuc-rb-box:hover {
-  box-shadow: 0 0 10px var(--common-color-yellow);
-}
-
 .tuc-rb-top {
   display: flex;
   width: 100%;
@@ -153,7 +150,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 5px;
-  border: 1px inset var(--common-bg-1);
+  border: 1px solid var(--common-shadow-4);
   border-radius: 5px;
   font-family: var(--font-title);
   font-size: 12px;
@@ -176,7 +173,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: var(--common-shadow-8);
+  color: var(--box-text-4);
   column-gap: 5px;
 }
 
@@ -199,14 +196,14 @@ onUnmounted(() => {
   justify-content: center;
   border-radius: 5px;
   backdrop-filter: blur(5px);
-  background: var(--common-shadow-4);
+  background: var(--tgc-btn-1);
 }
 
 .tuc-rbb-bg img {
   width: 100%;
   height: 100%;
   border-radius: 5px;
-  object-fit: contain;
+  object-fit: fill;
 }
 
 .tuc-rbb-content {
@@ -236,9 +233,10 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 5px;
+  border: 1px solid var(--tgc-white-8);
   border-radius: 50%;
-  background: rgb(0 0 0 /40%);
-  box-shadow: 0 0 10px rgb(255 255 255/40%);
+  background: var(--tgc-dark-7);
+  opacity: 0.5;
 }
 
 .tuc-rbb-talent :nth-child(2) {
@@ -247,9 +245,9 @@ onUnmounted(() => {
   height: 30px;
   align-items: center;
   justify-content: center;
-  color: #faf7e8;
+  color: var(--tgc-white-8);
   font-family: var(--font-title);
   font-size: 12px;
-  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  text-shadow: 0 0 10px var(--tgc-dark-7);
 }
 </style>
diff --git a/src/components/userRecord/tur-home-sub.vue b/src/components/userRecord/tur-home-sub.vue
index 7bf3db1b..d196df16 100644
--- a/src/components/userRecord/tur-home-sub.vue
+++ b/src/components/userRecord/tur-home-sub.vue
@@ -10,7 +10,6 @@
       {{ data.name }}
     </div>
     <div class="tur-hs-title">
-      <!-- canvas -->
       <img :src="getUrl.icon" alt="comfort" />
       {{ data.comfortName }}
     </div>
@@ -65,20 +64,18 @@ onMounted(async () => {
   position: absolute;
   top: 10px;
   right: 10px;
-  color: var(--common-color-white);
+  color: var(--tgc-white-1);
   font-family: var(--font-text);
   font-size: 16px;
-  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
 }
 
 .tur-hs-title {
   display: flex;
   align-items: center;
   padding: 10px;
-  color: var(--common-color-white);
+  color: var(--tgc-white-1);
   font-family: var(--font-title);
   font-size: 20px;
-  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
 }
 
 .tur-hs-title img {
@@ -92,15 +89,16 @@ onMounted(async () => {
   width: 100%;
   justify-content: space-between;
   padding: 10px;
+  backdrop-filter: blur(5px);
   background: rgb(0 0 0 / 40%);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  color: var(--common-color-white);
+  color: var(--tgc-white-1);
   text-align: center;
 }
 
 .tur-hs-text :nth-child(1) {
-  color: var(--common-color-yellow);
+  color: var(--tgc-yellow-1);
   font-family: var(--font-text);
 }
 
diff --git a/src/components/userRecord/tur-overview-sub.vue b/src/components/userRecord/tur-overview-sub.vue
index 37c6369e..3fc6b919 100644
--- a/src/components/userRecord/tur-overview-sub.vue
+++ b/src/components/userRecord/tur-overview-sub.vue
@@ -29,21 +29,21 @@ defineProps<TAOProps>();
   align-items: center;
   justify-content: center;
   padding: 5px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  background: var(--common-shadow-1);
+  background: var(--box-bg-2);
 }
 
 .tur-os-title {
-  color: var(--common-text-content);
+  color: var(--box-text-4);
   font-family: var(--font-title);
   font-size: 20px;
 }
 
 .tur-os-text {
-  color: var(--common-color-white);
+  color: var(--tgc-yellow-1);
   font-family: var(--font-text);
   font-size: 20px;
-  text-shadow: 0 0 10px var(--common-color-yellow);
 }
 
 .dark .tur-os-text {
diff --git a/src/components/userRecord/tur-world-sub.vue b/src/components/userRecord/tur-world-sub.vue
index b0bd0e52..c82a8696 100644
--- a/src/components/userRecord/tur-world-sub.vue
+++ b/src/components/userRecord/tur-world-sub.vue
@@ -86,8 +86,9 @@ async function listenOnTheme(): Promise<void> {
   align-items: center;
   justify-content: center;
   padding: 10px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  background: var(--common-shadow-1);
+  background: var(--box-bg-2);
 }
 
 .tur-ws-icon {
@@ -104,11 +105,11 @@ async function listenOnTheme(): Promise<void> {
 .tur-ws-content {
   width: calc(100% - 60px);
   height: 100%;
-  color: var(--common-text-content);
+  color: var(--box-text-4);
 }
 
 .tur-ws-title {
-  border-bottom: 1px inset var(--common-text-content);
+  border-bottom: 1px inset var(--common-shadow-8);
   font-family: var(--font-title);
   font-size: 20px;
 }
@@ -128,12 +129,6 @@ async function listenOnTheme(): Promise<void> {
 }
 
 .tur-ws-sub :nth-last-child(2) {
-  color: var(--common-color-white);
-  text-shadow: 0 0 10px var(--common-color-yellow);
-}
-
-.dark .tur-ws-sub :nth-last-child(2) {
-  color: var(--common-color-yellow);
-  text-shadow: none;
+  color: var(--tgc-yellow-1);
 }
 </style>
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index 8531ba3b..8f28dcb0 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -6,15 +6,15 @@
         第{{ item.id }}期
       </v-tab>
       <div class="ua-tab-bottom">
-        <v-btn class="ua-btn" variant="outlined" @click="shareAbyss">
+        <v-btn class="ua-btn" @click="shareAbyss">
           <v-icon>mdi-share</v-icon>
           <span>分享</span>
         </v-btn>
-        <v-btn class="ua-btn" variant="outlined" @click="getAbyssData">
+        <v-btn class="ua-btn" @click="getAbyssData">
           <v-icon>mdi-refresh</v-icon>
           <span>刷新</span>
         </v-btn>
-        <v-btn class="ua-btn" variant="outlined" @click="uploadAbyss">
+        <v-btn class="ua-btn" @click="uploadAbyss">
           <v-icon>mdi-cloud-upload</v-icon>
           <span>上传</span>
         </v-btn>
@@ -27,7 +27,7 @@
         :value="item.id"
         class="ua-window-item"
       >
-        <div :ref="getAbyssRef">
+        <div :ref="getAbyssRef" class="uaw-i-ref">
           <div class="uaw-title">
             <span>第</span>
             <span>{{ item.id }}</span>
@@ -97,6 +97,7 @@ const localAbyssID = ref<number[]>([]);
 const curAbyss = ref<TGApp.Sqlite.Abyss.SingleTable>(<TGApp.Sqlite.Abyss.SingleTable>{});
 const abyssRef = ref<HTMLElement>(<HTMLElement>{});
 
+// todo 优化数据加载
 onMounted(async () => {
   loadingTitle.value = "正在加载深渊数据";
   await initAbyssData();
@@ -199,31 +200,36 @@ async function uploadAbyss(): Promise<void> {
   height: calc(100vh - 35px);
   align-items: center;
   justify-content: left;
+  border: 1px solid var(--common-shadow-4);
   border-radius: 5px;
-  box-shadow: 0 0 10px 0 var(--common-shadow-4);
 }
 
 .ua-tab {
   width: 100px;
   height: 100%;
-  color: var(--common-text-title);
+  color: var(--box-text-4);
   font-family: var(--font-text);
 }
 
 .ua-tab-bottom {
   position: absolute;
   bottom: 0;
+  display: flex;
   width: 100%;
+  flex-wrap: wrap;
   padding: 10px;
+  gap: 10px;
 }
 
 .ua-btn {
-  margin-top: 15px;
-  background: var(--common-shadow-2);
-  color: var(--common-color-white);
+  border-radius: 5px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+  font-family: var(--font-text);
 }
 
 .ua-window {
+  overflow: hidden;
   width: calc(100% - 100px);
   height: 100%;
   padding: 10px;
@@ -233,10 +239,15 @@ async function uploadAbyss(): Promise<void> {
   height: 100%;
   padding: 10px;
   border-radius: 5px;
-  box-shadow: 0 0 10px var(--common-shadow-2);
   overflow-y: auto;
 }
 
+.uaw-i-ref {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
 .uaw-title {
   display: flex;
   align-items: center;
@@ -248,13 +259,7 @@ async function uploadAbyss(): Promise<void> {
 .uaw-title :nth-child(2n) {
   margin-right: 10px;
   margin-left: 10px;
-  color: var(--common-color-white);
-  text-shadow: 0 0 10px var(--common-color-yellow);
-}
-
-.dark .uaw-title :nth-child(2n) {
-  color: var(--common-color-yellow);
-  text-shadow: none;
+  color: var(--tgc-yellow-1);
 }
 
 .uaw-o-box {
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index d79ce94b..8c1bc341 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -3,26 +3,31 @@
   <div class="uc-box">
     <div class="uc-top">
       <div class="uc-top-title">
-        {{ user.nickname }} UID：{{ user.gameUid }} 更新于 {{ getUpdateTime() }}
+        <span v-if="user">
+          {{ user.nickname }} UID：{{ user.gameUid }} 更新于 {{ getUpdateTime() }}
+        </span>
+        <span v-else> 暂无数据 </span>
+      </div>
+      <div class="uc-top-btns">
+        <v-btn class="uc-top-btn" @click="refreshRoles()">
+          <template #prepend>
+            <v-icon>mdi-refresh</v-icon>
+          </template>
+          更新角色数据
+        </v-btn>
+        <v-btn class="uc-top-btn" @click="refreshTalent()">
+          <template #prepend>
+            <v-icon>mdi-refresh</v-icon>
+          </template>
+          更新天赋数据
+        </v-btn>
+        <v-btn class="uc-top-btn" @click="shareRoles()">
+          <template #prepend>
+            <v-icon>mdi-share</v-icon>
+          </template>
+          分享
+        </v-btn>
       </div>
-      <v-btn variant="outlined" class="uc-top-btn" @click="refreshRoles()">
-        <template #prepend>
-          <v-icon>mdi-refresh</v-icon>
-        </template>
-        更新角色数据
-      </v-btn>
-      <v-btn variant="outlined" class="uc-top-btn" @click="refreshTalent()">
-        <template #prepend>
-          <v-icon>mdi-refresh</v-icon>
-        </template>
-        更新天赋数据
-      </v-btn>
-      <v-btn variant="outlined" class="uc-top-btn" @click="shareRoles()">
-        <template #prepend>
-          <v-icon>mdi-share</v-icon>
-        </template>
-        分享
-      </v-btn>
     </div>
     <!-- grid 布局，参考 Snap.Hutao -->
     <div class="uc-grid">
@@ -181,10 +186,14 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole): void {
 </script>
 <style lang="css" scoped>
 .uc-box {
+  display: flex;
   width: 100%;
+  flex-direction: column;
   padding: 10px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  box-shadow: 0 0 10px var(--common-shadow-4);
+  background: var(--box-bg-1);
+  gap: 10px;
 }
 
 .uc-top {
@@ -192,29 +201,32 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole): void {
   width: 100%;
   height: 50px;
   align-items: center;
+  justify-content: space-between;
   padding: 10px;
-  border-radius: 5px;
+  border-bottom: 1px solid var(--common-shadow-2);
 }
 
 .uc-top-title {
-  margin-right: 10px;
   color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
 }
 
+.uc-top-btns {
+  display: flex;
+  gap: 15px;
+}
+
 .uc-top-btn {
   border-radius: 5px;
-  margin-left: 15px;
-  background: var(--common-shadow-2);
-  color: var(--common-color-white);
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
   font-family: var(--font-text);
 }
 
 .uc-grid {
   display: grid;
-  padding: 10px;
-  grid-gap: 10px v-bind(gridGap);
-  grid-template-columns: repeat(auto-fill, 180px);
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 }
 </style>
diff --git a/src/pages/User/Gacha.vue b/src/pages/User/Gacha.vue
index 99403c68..2c738946 100644
--- a/src/pages/User/Gacha.vue
+++ b/src/pages/User/Gacha.vue
@@ -1,39 +1,29 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
-  <v-app-bar class="gacha-top-bar">
-    <template #prepend>
-      <v-app-bar-title> 祈愿记录</v-app-bar-title>
-    </template>
-    <template #default>
-      <v-select
-        v-model="uidCur"
-        class="gacha-top-select"
-        :items="selectItem"
-        variant="underlined"
-      />
-      <v-spacer />
-    </template>
-    <template #append>
+  <div class="gacha-top-bar">
+    <div class="gacha-top-title">祈愿记录</div>
+    <v-select v-model="uidCur" class="gacha-top-select" :items="selectItem" variant="outlined" />
+    <div class="gacha-top-btns">
       <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="handleImportBtn()">
         导入
       </v-btn>
       <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="handleExportBtn"> 导出</v-btn>
-    </template>
-  </v-app-bar>
+    </div>
+  </div>
   <div class="gacha-container">
     <v-tabs v-model="tab" align-tabs="start" class="gacha-tab" direction="vertical">
       <v-tab value="echarts">图表概览</v-tab>
       <v-tab value="overview">数据概览</v-tab>
       <div class="gacha-tab-bottom">
-        <v-btn class="gacha-tab-btn" variant="outlined" @click="backupGacha">
+        <v-btn class="gacha-tab-btn" @click="backupGacha">
           <v-icon>mdi-cloud-download</v-icon>
           <span>备份</span>
         </v-btn>
-        <v-btn class="gacha-tab-btn" variant="outlined" @click="deleteGacha">
+        <v-btn class="gacha-tab-btn" @click="deleteGacha">
           <v-icon>mdi-delete</v-icon>
           <span>删除</span>
         </v-btn>
-        <v-btn class="gacha-tab-btn" variant="outlined" @click="restoreGacha">
+        <v-btn class="gacha-tab-btn" @click="restoreGacha">
           <v-icon>mdi-cloud-upload</v-icon>
           <span>恢复</span>
         </v-btn>
@@ -306,37 +296,52 @@ watch(uidCur, async (newUid) => {
 <style lang="css" scoped>
 .gacha-top-bar {
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
-  background: rgb(0 0 0/50%);
-  color: #f4d8a8;
+  padding: 10px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 5px;
+  margin-bottom: 10px;
+  background: var(--box-bg-1);
+  column-gap: 50px;
   font-family: var(--font-title);
+  font-size: 20px;
+}
+
+.gacha-top-title {
+  color: var(--common-text-title);
 }
 
 .gacha-top-select {
   height: 60px;
-  margin-left: 20px;
+}
+
+.gacha-top-btns {
+  display: flex;
+  column-gap: 10px;
 }
 
 .gacha-top-btn {
-  margin: 0 10px;
-  background: #393b40;
-  color: #faf7e8 !important;
+  border-radius: 5px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
 }
 
 .gacha-container {
   display: flex;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 130px);
   align-items: center;
   justify-content: left;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  box-shadow: 0 0 10px 0 var(--common-shadow-4);
+  background: var(--box-bg-1);
 }
 
 .gacha-tab {
   width: 100px;
   height: 100%;
-  color: var(--common-text-title);
+  color: var(--box-text-4);
   font-family: var(--font-title);
 }
 
@@ -347,12 +352,13 @@ watch(uidCur, async (newUid) => {
   width: 100%;
   flex-direction: column;
   padding: 10px;
-  gap: 15px;
+  gap: 10px;
 }
 
 .gacha-tab-btn {
-  background: var(--common-shadow-t-2);
-  color: var(--common-text-content);
+  border-radius: 5px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
 }
 
 .gacha-window {
@@ -363,8 +369,6 @@ watch(uidCur, async (newUid) => {
 
 .gacha-window-item {
   height: 100%;
-  padding: 5px;
-  border: 1px inset var(--common-shadow-8);
   border-radius: 5px;
   overflow-y: auto;
 }
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index 54fefced..0b883620 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -6,18 +6,20 @@
         <span v-if="!isEmpty">{{ getTitle() }} 更新于 {{ recordData.updated }}</span>
         <span v-else>原神战绩【暂无数据】【{{ user.gameUid }}】</span>
       </div>
-      <v-btn variant="outlined" class="ur-top-btn" @click="refresh()">
-        <template #prepend>
-          <v-icon>mdi-refresh</v-icon>
-        </template>
-        更新数据
-      </v-btn>
-      <v-btn variant="outlined" class="ur-top-btn" @click="shareRecord()">
-        <template #prepend>
-          <v-icon>mdi-share</v-icon>
-        </template>
-        分享
-      </v-btn>
+      <div class="ur-top-btns">
+        <v-btn class="ur-top-btn" @click="refresh()">
+          <template #prepend>
+            <v-icon>mdi-refresh</v-icon>
+          </template>
+          更新数据
+        </v-btn>
+        <v-btn class="ur-top-btn" @click="shareRecord()">
+          <template #prepend>
+            <v-icon>mdi-share</v-icon>
+          </template>
+          分享
+        </v-btn>
+      </div>
     </div>
     <TSubLine>数据总览</TSubLine>
     <TurOverviewGrid v-model="recordData.stats" />
@@ -112,10 +114,14 @@ async function shareRecord(): Promise<void> {
 </script>
 <style lang="css" scoped>
 .ur-box {
+  display: flex;
   width: 100%;
+  flex-direction: column;
   padding: 10px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  box-shadow: 0 0 10px var(--common-shadow-4);
+  background: var(--box-bg-1);
+  row-gap: 5px;
 }
 
 .ur-top {
@@ -123,22 +129,26 @@ async function shareRecord(): Promise<void> {
   width: 100%;
   height: 50px;
   align-items: center;
+  justify-content: space-between;
   padding: 10px;
-  border-radius: 5px;
+  border-bottom: 1px solid var(--common-shadow-2);
 }
 
 .ur-top-title {
-  margin-right: 10px;
   color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
 }
 
+.ur-top-btns {
+  display: flex;
+  gap: 15px;
+}
+
 .ur-top-btn {
   border-radius: 5px;
-  margin-left: 15px;
-  background: var(--common-shadow-2);
-  color: var(--common-color-white);
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
   font-family: var(--font-text);
 }
 </style>
diff --git a/src/pages/common/Achievements.vue b/src/pages/common/Achievements.vue
index 3a1562b5..b13c6404 100644
--- a/src/pages/common/Achievements.vue
+++ b/src/pages/common/Achievements.vue
@@ -19,6 +19,7 @@
   <div class="wrap">
     <!-- 左侧菜单 -->
     <div class="left-wrap">
+      <!-- todo 简化 -->
       <v-list
         v-for="series in seriesList"
         :key="series.id"
@@ -30,7 +31,7 @@
           <template #prepend>
             <v-img width="40px" style="margin-right: 10px" :src="getIcon(series.id)" />
           </template>
-          <v-list-item-title>
+          <v-list-item-title :title="series.name">
             {{ series.name }}
           </v-list-item-title>
           <v-list-item-subtitle>
@@ -340,6 +341,7 @@ function getIcon(series: number): string | undefined {
   border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin-bottom: 10px;
+  background: var(--box-bg-1);
   column-gap: 50px;
   font-family: var(--font-title);
   font-size: 20px;
@@ -413,7 +415,8 @@ function getIcon(series: number): string | undefined {
 .card-left {
   border: 1px solid var(--common-shadow-2);
   border-radius: 10px;
-  margin: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
   background: var(--box-bg-1);
   color: var(--box-text-1);
   cursor: pointer;