💄 调整select

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"

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;

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>

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>

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"

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">

src/pages/common/PageAchi.vue

@@ -1,33 +1,40 @@
 <template>
   <v-app-bar>
-    <div class="top-title" @click="switchHideFin">{{ title }}</div>
+    <template #prepend>
-    <template #append>
+      <div class="achi-prepend">
-      <div class="achi-search">
+        <img alt="icon" src="../../assets/icons/achievements.svg" />
-        <v-text-field
+        <span @click="switchHideFin">我的成就</span>
-          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">
         <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>
-      <v-spacer />
+      </div>
     </template>
   </v-app-bar>
   <div class="wrap">
@@ -265,8 +272,28 @@ onUnmounted(async () => {
   }
 });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
-.achi-search {
+.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 {
+.top-extension {
-  margin-left: 15px;
+  position: relative;
-  color: var(--common-text-title);
+  padding: 8px;
-  cursor: pointer;
+  display: flex;
-  font-family: var(--font-title);
+  align-items: center;
-  font-size: 18px;
+  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);