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

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 {

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>

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

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>