♻️ 用户相关的四个一级页面勉强改完

2025-12-12 09:18:14 +08:00 · 2023-09-02 14:03:23 +08:00
parent a8488c04f8
commit 95eca77d0a
18 changed files with 189 additions and 177 deletions
--- 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)"
            >
--- 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>
--- 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>
--- 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>
--- 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;
--- 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>
--- 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>
--- 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 {
--- 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 {
--- 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>
--- 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);
 }

--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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;
 }
--- 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>
--- 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;