From 96dfec969c68768b5f7ac3dda7abea56c1658b52 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 14:59:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E6=88=90?=
 =?UTF-8?q?=E5=B0=B1=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/github.styles.scss   | 11 +++-
 src/components/app/top-nameCard.vue    | 20 +++++--
 src/components/userAchi/tua-achi.vue   | 40 ++++++++------
 src/components/userAchi/tua-series.vue | 76 ++++++++++++++++++++------
 src/pages/common/PageAchi.vue          | 16 ++++--
 5 files changed, 119 insertions(+), 44 deletions(-)

diff --git a/src/assets/styles/github.styles.scss b/src/assets/styles/github.styles.scss
index 9aaecfa0..d00948f7 100644
--- a/src/assets/styles/github.styles.scss
+++ b/src/assets/styles/github.styles.scss
@@ -6,13 +6,22 @@
 
 /* Card，传入theme参数 */
 @mixin github-card($theme: 'default') {
+  @include github-card-shadow($theme);
+
   @if $theme == 'default' {
     background: #ffffff;
     border: 1px solid #d1d9e0;
-    box-shadow: rgba(31, 35, 40, 0.06) 0 1px 1px 0, rgba(31, 35, 40, 0.06) 0 1px 3px 0;
   } @else {
     background: #0d1117;
     border: 1px solid #3d444d;
+  }
+}
+
+/* CardShadow，传入theme参数 */
+@mixin github-card-shadow($theme: 'default') {
+  @if $theme == 'default' {
+    box-shadow: rgba(31, 35, 40, 0.06) 0 1px 1px 0, rgba(31, 35, 40, 0.06) 0 1px 3px 0;
+  } @else {
     box-shadow: rgba(1, 4, 9, 0.6) 0 1px 1px 0, rgba(1, 4, 9, 0.6) 0 1px 3px 0;
   }
 }
diff --git a/src/components/app/top-nameCard.vue b/src/components/app/top-nameCard.vue
index a1be98c8..d39553f2 100644
--- a/src/components/app/top-nameCard.vue
+++ b/src/components/app/top-nameCard.vue
@@ -7,7 +7,7 @@
       <template #prepend>
         <v-img
           width="80px"
-          style="margin-right: 10px"
+          style="margin-right: 8px"
           :src="`/WIKI/nameCard/icon/${props.data.name}.webp`"
         />
       </template>
@@ -28,13 +28,17 @@ const bgImage = computed<string>(() => {
   return `url("/WIKI/nameCard/bg/${props.data.name}.webp")`;
 });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .top-nc-box {
+  @include github-styles.github-card-shadow();
+
   width: 100%;
   height: 80px;
-  border: 1px solid var(--common-shadow-2);
-  border-radius: 10px 50px 50px 10px;
-  margin-bottom: 10px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 4px 50px 50px 4px;
+  margin-bottom: 8px;
   background-color: var(--box-bg-1);
   background-image: v-bind(bgImage);
   background-position: right;
@@ -43,7 +47,11 @@ const bgImage = computed<string>(() => {
   font-family: var(--font-title);
 }
 
+.dark .top-nc-box {
+  @include github-styles.github-card-shadow("dark");
+}
+
 .desc {
-  text-shadow: 1px 1px 1px #222;
+  text-shadow: 0 0 2px var(--common-shadow-8);
 }
 </style>
diff --git a/src/components/userAchi/tua-achi.vue b/src/components/userAchi/tua-achi.vue
index 71e7be6e..832f0651 100644
--- a/src/components/userAchi/tua-achi.vue
+++ b/src/components/userAchi/tua-achi.vue
@@ -90,32 +90,38 @@ async function setAchiStat(stat: boolean): Promise<void> {
   model.value = data.value;
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .achi-container {
+  @include github-styles.github-card();
+
   position: relative;
   display: flex;
   height: 60px;
+  box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
-  border-radius: 10px;
-  margin-bottom: 10px;
-  background: var(--box-bg-1);
-  color: var(--box-text-7);
+  padding: 8px;
+  border-radius: 4px;
   cursor: pointer;
 }
 
+.dark .achi-container {
+  @include github-styles.github-card("dark");
+}
+
 .achi-version {
+  @include github-styles.github-tag-dark-gen(#fb7299);
+
   position: absolute;
   top: 0;
   left: 0;
-  width: 50px;
-  border-right: 1px solid var(--common-shadow-1);
-  border-bottom: 1px solid var(--common-shadow-1);
-  background: var(--box-bg-2);
+  width: 48px;
+  border-left: unset;
+  border-top: unset;
   border-bottom-right-radius: 20px;
-  border-top-left-radius: 10px;
-  color: var(--tgc-pink-1);
+  border-top-left-radius: 4px;
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
@@ -125,7 +131,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  column-gap: 10px;
+  column-gap: 8px;
 }
 
 .achi-pre-icon {
@@ -154,7 +160,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
 .achi-pre-info :nth-child(1) {
   display: flex;
   align-items: flex-end;
-  column-gap: 5px;
+  column-gap: 4px;
   font-family: var(--font-title);
   font-size: 14px;
 }
@@ -179,8 +185,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
   align-items: center;
   justify-content: center;
   background: rgb(0 0 0 / 50%);
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
   color: var(--tgc-white-1);
   font-size: 8px;
 }
@@ -202,7 +208,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
   position: relative;
   width: 40px;
   height: 40px;
-  border-radius: 5px;
+  border-radius: 4px;
   background-image: url("/icon/bg/5-Star.webp");
   background-size: cover;
 }
diff --git a/src/components/userAchi/tua-series.vue b/src/components/userAchi/tua-series.vue
index c6a80732..4c5b5c7a 100644
--- a/src/components/userAchi/tua-series.vue
+++ b/src/components/userAchi/tua-series.vue
@@ -1,7 +1,20 @@
 <template>
-  <div class="tuas-card" @click="selectSeries" v-if="data">
+  <div
+    class="tuas-card"
+    @click="selectSeries"
+    v-if="data"
+    :class="{ 'tuas-selected': props.cur === props.series }"
+  >
     <div class="tuas-version">v{{ data.version }}</div>
-    <img alt="icon" class="tuas-icon" :src="`/icon/achievement/${data.icon}.webp`" />
+    <div class="tuas-icon">
+      <img alt="icon" :src="`/icon/achievement/${data.icon}.webp`" />
+      <v-progress-circular
+        class="progress"
+        bg-color="var(--tgc-od-white)"
+        color="var(--tgc-yellow-2)"
+        :model-value="`${(overview.fin / overview.total) * 100}`"
+      />
+    </div>
     <div class="tuas-content">
       <span :title="data.name">{{ data.name }}</span>
       <span>{{ overview.fin }}/{{ overview.total }}</span>
@@ -63,44 +76,75 @@ function selectSeries(): void {
   emits("selectSeries", props.series);
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .tuas-card {
+  @include github-styles.github-card();
+
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 10px;
-  border-radius: 10px;
-  margin-bottom: 10px;
-  background: var(--box-bg-1);
+  justify-content: flex-start;
+  padding: 8px;
+  height: 60px;
+  border-radius: 4px;
   color: var(--box-text-1);
-  column-gap: 10px;
+  column-gap: 8px;
   cursor: pointer;
+  overflow: hidden;
+
+  &.tuas-selected {
+    background: var(--box-bg-1);
+  }
+}
+
+.dark .tuas-card {
+  @include github-styles.github-card("dark");
+
+  &.tuas-selected {
+    background: var(--box-bg-1);
+  }
 }
 
 .tuas-version {
+  @include github-styles.github-tag-dark-gen(#ffa726);
+
   position: absolute;
   right: 0;
   bottom: 0;
-  width: 80px;
-  border-top: 1px solid var(--common-shadow-1);
-  border-left: 1px solid var(--common-shadow-1);
-  background: var(--box-bg-2);
-  border-bottom-right-radius: 10px;
+  width: 64px;
+  border-right: unset;
+  border-bottom: unset;
   border-top-left-radius: 20px;
-  color: var(--tgc-yellow-1);
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
-  text-shadow: 1px 1px 1px var(--common-shadow-1);
 }
 
 .tuas-icon {
+  position: relative;
+  flex-shrink: 0;
   width: 40px;
   height: 40px;
   padding: 5px;
   border-radius: 50%;
+  box-sizing: border-box;
   background: var(--tgc-dark-7);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 40px;
+  }
 }
 
 .tuas-content {
diff --git a/src/pages/common/PageAchi.vue b/src/pages/common/PageAchi.vue
index 1608ead1..34aa2a74 100644
--- a/src/pages/common/PageAchi.vue
+++ b/src/pages/common/PageAchi.vue
@@ -41,6 +41,7 @@
     <v-virtual-scroll :items="seriesList" class="left-wrap" item-height="60">
       <template #default="{ item }">
         <TuaSeries
+          class="left-item"
           v-model:cur="selectedSeries"
           :series="item"
           :uid="uidCur"
@@ -324,14 +325,21 @@ onUnmounted(async () => {
 
 .wrap {
   display: flex;
-  height: calc(100vh - 150px);
-  column-gap: 10px;
+  height: calc(100vh - 144px);
+  column-gap: 8px;
 }
 
 .left-wrap {
-  width: 400px;
+  position: relative;
+  box-sizing: border-box;
+  width: 332px;
   height: 100%;
-  padding-right: 10px;
+  padding-right: 8px;
+  flex-shrink: 0;
   overflow-y: auto;
 }
+
+:deep(.v-virtual-scroll__item + .v-virtual-scroll__item) {
+  margin-top: 8px;
+}
 </style>