💄 调整UI

src/components/app/t-itemBox.vue

@@ -145,6 +145,7 @@ const props = defineProps<TItemBoxProps>();
   display: flex;
   width: 100%;
   height: v-bind("props.modelValue.innerHeight ?? 0") px;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   -webkit-backdrop-filter: blur(v-bind("props.modelValue.innerBlur ?? 0"));

src/components/app/t-sidebar.vue

@@ -79,7 +79,7 @@
         <template #title>测试页面</template>
       </v-list-item>
       <v-divider v-show="isDevEnv" />
-      <v-menu :open-on-click="true" location="end">
+      <v-menu :open-on-click="true" location="end" :offset="[8, 0]">
         <template #activator="{ props }">
           <v-list-item :title.attr="'图鉴'" v-bind="props">
             <template #title>图鉴</template>
@@ -88,7 +88,7 @@
             </template>
           </v-list-item>
         </template>
-        <v-list class="side-list-menu wiki" density="compact" :nav="true">
+        <v-list class="side-list-menu sub" density="compact" :nav="true">
           <v-list-item class="side-item-menu" title="深渊数据库" :link="true" href="/wiki/abyss">
             <template #prepend>
               <img src="/source/UI/wikiAbyss.webp" alt="abyssIcon" class="side-icon-menu" />
@@ -133,7 +133,7 @@
               </template>
             </v-list-item>
           </template>
-          <v-list class="side-list-menu" density="compact" :nav="true">
+          <v-list class="side-list-menu sub" density="compact" :nav="true">
             <v-list-item class="side-item-menu" title="签到" @click="openClient('sign_in')">
               <template #prepend>
                 <img src="/source/UI/userGacha.webp" class="side-icon-menu" alt="sing_in" />
@@ -260,8 +260,8 @@ onUnmounted(() => {
   font-family: var(--font-title);
 }
 
-.side-list-menu.wiki {
-  margin-left: 10px;
+.side-list-menu.sub {
+  box-shadow: -2px 0 4px var(--common-shadow-2) !important;
 }
 
 .side-item-menu {

src/components/userGacha/gro-data-line.vue

@@ -4,15 +4,13 @@
     <div class="gro-dl-icon">
       <img :alt="props.data.name" :src="getIcon()" />
     </div>
-    <div class="gro-dl-line">
-      <div class="gro-dl-base">
-        <div class="gro-dl-name">{{ props.data.name }}</div>
-        <div class="gro-dl-time">{{ props.data.time }}</div>
-      </div>
-      <div class="gro-dl-info">
-        <div class="gro-dl-cnt">{{ props.count }}</div>
-        <div class="gro-dl-hint" v-if="hint !== ''">{{ hint }}</div>
-      </div>
+    <div class="gro-dl-base">
+      <div class="gro-dl-name">{{ props.data.name }}</div>
+      <div class="gro-dl-time">{{ props.data.time }}</div>
+    </div>
+    <div class="gro-dl-info">
+      <div class="gro-dl-cnt">{{ props.count }}</div>
+      <div class="gro-dl-hint" v-if="hint !== ''">{{ hint }}</div>
     </div>
   </div>
 </template>
@@ -57,10 +55,10 @@ function getEndHint(): string {
 }
 
 const progressColor = computed<string>(() => {
-  if (hint === "UP" && props.data.rank === "5") return "var(--tgc-od-orange)";
-  if (hint === "UP" && props.data.rank === "4") return "var(--tgc-od-purple)";
-  if (hint === "歪") return "var(--tgc-od-red)";
-  return "var(--tgc-od-blue)";
+  if (hint === "UP" && props.data.rank === "5") return "#d19a66";
+  if (hint === "UP" && props.data.rank === "4") return "#c678dd";
+  if (hint === "歪") return "#e06c75";
+  return "#61afef";
 });
 const progressWidth = computed<string>(() => {
   let final = 10;
@@ -72,19 +70,20 @@ const progressWidth = computed<string>(() => {
   return ((props.count / final) * 100).toFixed(2) + "%";
 });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .gro-dl-box {
   position: relative;
   display: flex;
-  width: calc(100% - 10px);
-  height: 40px;
+  width: 100%;
+  box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
-  padding: 5px;
-  border-radius: 5px;
-  margin: 0 5px;
-  background: var(--box-bg-3);
-  column-gap: 5px;
+  padding: 8px;
+  height: 48px;
+  border-radius: 4px;
+  background: var(--box-bg-2);
+  border: 1px solid var(--common-shadow-1);
+  column-gap: 4px;
 }
 
 .gro-dl-progress {
@@ -93,16 +92,16 @@ const progressWidth = computed<string>(() => {
   left: 0;
   width: v-bind(progressWidth);
   max-width: 100%;
-  height: 5px;
-  border-radius: 5px;
+  height: 4px;
+  border-radius: 4px;
   background: v-bind(progressColor);
-  transition: width 0.5s;
 }
 
 .gro-dl-icon {
   display: flex;
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
 
@@ -112,13 +111,6 @@ const progressWidth = computed<string>(() => {
   }
 }
 
-.gro-dl-line {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .gro-dl-base {
   display: flex;
   flex-direction: column;
@@ -127,23 +119,24 @@ const progressWidth = computed<string>(() => {
 }
 
 .gro-dl-name {
-  height: 16px;
+  line-height: 18px;
   color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 14px;
 }
 
 .gro-dl-time {
-  height: 14px;
+  line-height: 14px;
   color: var(--box-text-7);
   font-size: 12px;
 }
 
 .gro-dl-info {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: center;
-  column-gap: 5px;
+  margin-left: auto;
+  column-gap: 4px;
 }
 
 .gro-dl-cnt {
@@ -153,13 +146,13 @@ const progressWidth = computed<string>(() => {
 
 .gro-dl-hint {
   display: flex;
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
   align-items: center;
   justify-content: center;
-  padding: 5px;
+  padding: 4px;
   border-radius: 50%;
-  background: var(--box-bg-1);
+  background: var(--box-bg-3);
   color: v-bind(progressColor);
   font-family: var(--font-title);
   transform: rotate(25deg);

src/components/userGacha/gro-data-view.vue

@@ -34,26 +34,24 @@
     </div>
     <!-- 这边放具体物品的列表 -->
     <div class="gro-bottom">
-      <v-tabs v-model="tab">
+      <v-tabs v-model="tab" density="compact">
         <v-tab value="5">5☆</v-tab>
         <v-tab value="4">4☆</v-tab>
       </v-tabs>
       <v-window v-model="tab" class="gro-bottom-window">
         <v-window-item value="5" class="gro-b-window-item">
-          <GroDataLine
-            v-for="(item, index) in star5List"
-            :key="index"
-            :data="item.data"
-            :count="item.count"
-          />
+          <v-virtual-scroll :items="star5List" :item-height="48">
+            <template #default="{ item }">
+              <GroDataLine :data="item.data" :count="item.count" />
+            </template>
+          </v-virtual-scroll>
         </v-window-item>
         <v-window-item value="4" class="gro-b-window-item">
-          <GroDataLine
-            v-for="(item, index) in star4List"
-            :key="index"
-            :data="item.data"
-            :count="item.count"
-          />
+          <v-virtual-scroll :items="star4List" :item-height="48">
+            <template #default="{ item }">
+              <GroDataLine :data="item.data" :count="item.count" />
+            </template>
+          </v-virtual-scroll>
         </v-window-item>
       </v-window>
     </div>
@@ -178,9 +176,10 @@ watch(
 <style lang="css" scoped>
 .gro-dv-container {
   height: 100%;
-  padding: 10px;
-  border-radius: 5px;
-  background: var(--box-bg-2);
+  box-sizing: border-box;
+  padding: 8px;
+  border-radius: 4px;
+  background: var(--box-bg-1);
 }
 
 .gro-dvt-title {
@@ -190,7 +189,7 @@ watch(
   justify-content: space-between;
   color: var(--common-text-title);
   font-family: var(--font-title);
-  font-size: 20px;
+  font-size: 18px;
 }
 
 .gro-dvt-subtitle {
@@ -201,8 +200,8 @@ watch(
 }
 
 .gro-mid-list {
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding-top: 4px;
+  padding-bottom: 4px;
   border-top: 1px solid var(--common-shadow-4);
   color: var(--box-text-7);
 }
@@ -217,18 +216,30 @@ watch(
 }
 
 .gro-bottom {
+  position: relative;
+  display: flex;
   width: 100%;
+  height: calc(100% - 150px);
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .gro-bottom-window {
-  height: calc(100vh - 440px);
+  position: relative;
+  height: calc(100vh - 428px);
+  overflow-y: auto;
 }
 
 .gro-b-window-item {
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
-  gap: 5px;
-  overflow-y: auto;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 4px;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+:deep(.v-virtual-scroll__item + .v-virtual-scroll__item) {
+  margin-top: 8px;
 }
 </style>

src/components/userGacha/gro-history.vue

@@ -50,7 +50,6 @@ onMounted(() => {
   height: 100%;
   align-items: center;
   justify-content: space-between;
-  column-gap: 10px;
 }
 
 .gro-tabs {
@@ -71,7 +70,7 @@ onMounted(() => {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding-right: 10px;
+  padding-right: 8px;
   overflow-y: scroll;
 }
 
@@ -87,6 +86,6 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  row-gap: 10px;
+  row-gap: 8px;
 }
 </style>

src/components/userGacha/gro-overview.vue

@@ -49,16 +49,14 @@ function getCnCols(): string {
 // 监听数据变化
 watch(
   () => props.modelValue,
-  () => {
-    cnCols.value = getCnCols();
-  },
+  () => (cnCols.value = getCnCols()),
 );
 </script>
 <style lang="css" scoped>
 .gro-o-container {
   display: grid;
   height: 100%;
-  grid-column-gap: 10px;
+  grid-column-gap: 8px;
   grid-template-columns: v-bind(cnCols);
 }
 </style>

src/components/userGacha/ug-his-card.vue

@@ -127,26 +127,29 @@ function getBox(id: number): TItemBoxData {
 }
 </script>
 <style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .user-gacha-history-card-comp {
   position: relative;
   display: flex;
   width: 100%;
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 10px;
-  border-radius: 10px;
-  background: var(--box-bg-2);
-  column-gap: 10px;
+  padding: 8px;
+  border-radius: 4px;
+  background: var(--box-bg-1);
+  column-gap: 8px;
 }
 
 .ug-his-banner {
+  @include github-styles.github-card-shadow();
+
   width: 50vw;
-  border-radius: 10px;
+  border-radius: 4px;
   cursor: pointer;
   transition: 0.5s ease-in-out;
 
   &:hover {
-    box-shadow: 0 0 10px 5px var(--box-bg-2);
     scale: 0.95;
     transition: 0.5s ease-in-out;
   }
@@ -162,7 +165,9 @@ function getBox(id: number): TItemBoxData {
 
 .ug-his-title {
   display: flex;
-  column-gap: 10px;
+  column-gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
 
   :first-child {
     color: var(--common-text-title);
@@ -172,13 +177,14 @@ function getBox(id: number): TItemBoxData {
 }
 
 .ug-his-tag {
+  @include github-styles.github-tag-dark-gen(#e06c63);
+
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 5px;
-  border-radius: 5px;
-  background: var(--box-bg-1);
-  color: var(--box-text-5);
+  padding: 0 8px;
+  height: fit-content;
+  border-radius: 4px;
   font-size: 16px;
 }
 
@@ -192,7 +198,7 @@ function getBox(id: number): TItemBoxData {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  gap: 10px;
+  gap: 8px;
   overflow-y: auto;
 
   &.lv5 {
@@ -200,7 +206,7 @@ function getBox(id: number): TItemBoxData {
   }
 
   &.lv4 {
-    max-height: 170px;
+    max-height: 168px;
   }
 }
 </style>

src/components/viewPost/vp-reply-item.vue

@@ -344,7 +344,7 @@ async function handleUser(): Promise<void> {
 
 .tpr-content {
   position: relative;
-  max-width: 100%;
+  width: 100%;
 }
 
 .tpr-info {

src/pages/User/Gacha.vue

@@ -1,30 +1,41 @@
 <template>
-  <div class="gacha-top-bar">
-    <div class="gacha-top-title">
-      <img src="/source/UI/userGacha.webp" alt="gacha" />
-      <span>祈愿记录</span>
-    </div>
-    <v-select v-model="uidCur" class="gacha-top-select" :items="selectItem" variant="outlined" />
-    <div class="gacha-top-btns">
-      <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(false)">
-        增量刷新
-      </v-btn>
-      <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(true)">
-        全量刷新
-      </v-btn>
-      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="importUigf()">导入</v-btn>
-      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="importUigf4()">
-        导入(v4)
-      </v-btn>
-      <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="exportUigf()">导出</v-btn>
-      <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="exportUigf4()">
-        导出(v4)
-      </v-btn>
-      <v-btn prepend-icon="mdi-delete" class="gacha-top-btn" @click="deleteGacha()">删除</v-btn>
-    </div>
-  </div>
+  <v-app-bar>
+    <template #prepend>
+      <div class="gacha-top-title">
+        <img src="/source/UI/userGacha.webp" alt="gacha" />
+        <span>祈愿记录</span>
+        <v-select
+          :hide-details="true"
+          density="compact"
+          v-model="uidCur"
+          :items="selectItem"
+          variant="outlined"
+          label="游戏UID"
+        />
+      </div>
+    </template>
+    <template #extension>
+      <div class="gacha-top-btns">
+        <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(false)">
+          增量刷新
+        </v-btn>
+        <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(true)">
+          全量刷新
+        </v-btn>
+        <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="importUigf()">导入</v-btn>
+        <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="importUigf4()">
+          导入(v4)
+        </v-btn>
+        <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="exportUigf()">导出</v-btn>
+        <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="exportUigf4()">
+          导出(v4)
+        </v-btn>
+        <v-btn prepend-icon="mdi-delete" class="gacha-top-btn" @click="deleteGacha()">删除</v-btn>
+      </div>
+    </template>
+  </v-app-bar>
   <div class="gacha-container">
-    <v-tabs v-model="tab" align-tabs="start" class="gacha-tab">
+    <v-tabs v-model="tab" align-tabs="start" class="gacha-tab" density="compact">
       <v-tab value="overview">数据概览</v-tab>
       <v-tab value="echarts">图表概览</v-tab>
       <v-tab value="table">数据表格</v-tab>
@@ -355,27 +366,12 @@ async function deleteGacha(): Promise<void> {
 }
 </script>
 <style lang="css" scoped>
-.gacha-top-bar {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  border: 1px solid var(--common-shadow-1);
-  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 {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  gap: 10px;
+  margin-left: 12px;
+  column-gap: 8px;
 
   img {
     width: 32px;
@@ -389,13 +385,10 @@ async function deleteGacha(): Promise<void> {
   }
 }
 
-.gacha-top-select {
-  height: 60px;
-}
-
 .gacha-top-btns {
   display: flex;
-  column-gap: 10px;
+  margin-left: 16px;
+  column-gap: 8px;
 }
 
 .gacha-top-btn {
@@ -404,19 +397,23 @@ async function deleteGacha(): Promise<void> {
   color: var(--btn-text);
 }
 
+.dark .gacha-top-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
 .gacha-container {
   display: flex;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 144px);
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
-  background: var(--box-bg-1);
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  background: var(--app-page-bg);
 }
 
 .gacha-tab {
-  height: 50px;
+  height: 40px;
   color: var(--box-text-4);
   font-family: var(--font-title);
 }
@@ -424,11 +421,10 @@ async function deleteGacha(): Promise<void> {
 .gacha-window {
   width: 100%;
   height: 100%;
-  padding: 10px;
+  padding: 8px;
 }
 
 .gacha-window-item {
   height: 100%;
-  border-radius: 5px;
 }
 </style>

src/pages/common/PostCollect.vue

@@ -6,6 +6,8 @@
         <span>收藏</span>
       </div>
       <v-select
+        :hide-details="true"
+        density="compact"
         v-model="curSelect"
         class="pc-select"
         :items="collections"
@@ -384,17 +386,15 @@ async function mergePosts(posts: Array<TGApp.BBS.Post.FullData>, collect: string
 <style lang="css" scoped>
 .pc-top {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  padding: 0 10px;
-  gap: 10px;
+  margin-left: 12px;
+  gap: 8px;
 }
 
 .pc-title {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 8px;
 
   img {
     width: 32px;
@@ -409,26 +409,28 @@ async function mergePosts(posts: Array<TGApp.BBS.Post.FullData>, collect: string
 }
 
 .pc-select {
-  max-width: 400px;
-  height: 50px;
+  min-width: 150px;
 }
 
 .pc-btns {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 10px;
-  gap: 10px;
+  margin-left: 16px;
+  gap: 8px;
 }
 
 .pc-btn {
   height: 40px;
-  border: 1px solid var(--common-shadow-4);
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-title);
 }
 
+.dark .pc-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
 .pc-posts {
   display: grid;
   grid-auto-rows: auto;