From 1b5ddf9b3fe6a524f4c732d85dcb8237b1b8e566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Wed, 19 Mar 2025 10:45:49 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src-tauri/Cargo.toml              |  2 +-
 src/components/app/t-postcard.vue |  1 +
 src/pages/User/Abyss.vue          |  3 +-
 src/pages/User/Combat.vue         |  3 +-
 src/pages/User/Record.vue         |  1 +
 src/pages/User/Scripts.vue        |  3 +-
 src/pages/common/PageAchi.vue     | 94 ++++++++++++++++++-------------
 7 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 0940407b..9653495b 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -10,7 +10,7 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [lib]
-# The `_lib` suffix may seem redundant but it is necessary
+# The `_lib` suffix may seem redundant, but it is necessary
 # to make the lib name unique and wouldn't conflict with the bin name.
 # This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
 name = "teyvat_guide_lib"
diff --git a/src/components/app/t-postcard.vue b/src/components/app/t-postcard.vue
index 16d66472..c50c536e 100644
--- a/src/components/app/t-postcard.vue
+++ b/src/components/app/t-postcard.vue
@@ -296,6 +296,7 @@ function onUserClick(): void {
 
 .tpc-cover img {
   width: 100%;
+  height: 100%;
   object-fit: cover;
   object-position: center;
   transition: all 0.3s linear;
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index 993f8f78..7f2ab288 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -5,11 +5,12 @@
         <img alt="icon" src="/source/UI/userAbyss.webp" />
         <span>深境螺旋</span>
         <v-select
+          density="compact"
           variant="outlined"
           v-model="uidCur"
           :items="uidList"
           :hide-details="true"
-          title="游戏UID"
+          label="游戏UID"
         />
         <v-btn :rounded="true" class="ua-btn" @click="toCombat()">
           <template #prepend>
diff --git a/src/pages/User/Combat.vue b/src/pages/User/Combat.vue
index 6182a5f7..3228377c 100644
--- a/src/pages/User/Combat.vue
+++ b/src/pages/User/Combat.vue
@@ -5,11 +5,12 @@
         <img alt="icon" src="/source/UI/userCombat.webp" />
         <span>幻想真境剧诗</span>
         <v-select
+          density="compact"
           variant="outlined"
           v-model="uidCur"
           :items="uidList"
           :hide-details="true"
-          title="游戏UID"
+          label="游戏UID"
         />
         <v-btn :rounded="true" class="uc-btn" @click="toAbyss()">
           <template #prepend><img src="/source/UI/userAbyss.webp" alt="abyss" /></template>
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index e2feb273..b57a43bf 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -5,6 +5,7 @@
         <img alt="icon" src="/source/UI/userRecord.webp" />
         <span>原神战绩</span>
         <v-select
+          density="compact"
           variant="outlined"
           v-model="uidCur"
           :items="uidList"
diff --git a/src/pages/User/Scripts.vue b/src/pages/User/Scripts.vue
index 0a059c64..b308df4e 100644
--- a/src/pages/User/Scripts.vue
+++ b/src/pages/User/Scripts.vue
@@ -5,13 +5,14 @@
         <img alt="icon" src="/source/UI/toolbox.webp" />
         <span>实用脚本</span>
         <v-select
+          density="compact"
           class="us-top-select"
           variant="outlined"
           v-model="curAccount"
           :items="accounts"
           item-title="uid"
           :hide-details="true"
-          title="账号UID"
+          label="账号"
         >
           <template #selection="{ item }">
             <div class="select-main">
diff --git a/src/pages/common/PageAchi.vue b/src/pages/common/PageAchi.vue
index acd01973..1608ead1 100644
--- a/src/pages/common/PageAchi.vue
+++ b/src/pages/common/PageAchi.vue
@@ -1,33 +1,40 @@
 <template>
   <v-app-bar>
-    <div class="top-title" @click="switchHideFin">{{ title }}</div>
-    <template #append>
-      <div class="achi-search">
-        <v-text-field
-          v-model="search"
-          :hide-details="true"
-          :single-line="true"
-          append-icon="mdi-magnify"
-          label="搜索"
-          @keydown.enter="isSearch = true"
-        />
-      </div>
-    </template>
-    <template #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>
-      <div class="uid-select">
+    <template #prepend>
+      <div class="achi-prepend">
+        <img alt="icon" src="../../assets/icons/achievements.svg" />
+        <span @click="switchHideFin">我的成就</span>
         <v-select
+          density="compact"
           v-model="uidCur"
           :hide-details="true"
           :items="uidList"
           label="存档UID"
           variant="outlined"
         />
+        <span>{{ title }}</span>
+      </div>
+    </template>
+    <template #append>
+      <div class="achi-append">
+        <v-text-field
+          density="compact"
+          v-model="search"
+          :hide-details="true"
+          :single-line="true"
+          append-inner-icon="mdi-magnify"
+          label="搜索"
+          @keydown.enter="isSearch = true"
+        />
+      </div>
+    </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>
       </div>
-      <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-spacer />
     </template>
   </v-app-bar>
   <div class="wrap">
@@ -265,8 +272,28 @@ onUnmounted(async () => {
   }
 });
 </script>
-<style lang="css" scoped>
-.achi-search {
+<style lang="scss" scoped>
+.achi-prepend {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  gap: 8px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+
+  span {
+    color: var(--common-text-title);
+    font-family: var(--font-title);
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+
+.achi-append {
   position: relative;
   display: flex;
   width: 400px;
@@ -278,32 +305,23 @@ onUnmounted(async () => {
   color: var(--box-text-1);
 }
 
-.top-title {
-  margin-left: 15px;
-  color: var(--common-text-title);
-  cursor: pointer;
-  font-family: var(--font-title);
-  font-size: 18px;
+.top-extension {
+  position: relative;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 8px;
 }
 
 .top-btn {
   height: 40px;
   border: 1px solid var(--common-shadow-2);
-  margin-left: 15px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-title);
 }
 
-.uid-select {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 15px;
-  margin-left: 15px;
-  gap: 10px;
-}
-
 .wrap {
   display: flex;
   height: calc(100vh - 150px);