From 25bb259d7a7648451a8007906b123ec4df90b808 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Sun, 1 Jun 2025 19:37:52 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20=E8=B0=83=E6=95=B4=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=8E=92=E5=BA=8F&=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylelintrc.yml                             |  2 +-
 src/components/app/t-gameNav.vue             |  4 +-
 src/components/app/t-postcard.vue            | 12 ++---
 src/components/app/top-nameCard.vue          |  4 +-
 src/components/func/loading.vue              | 54 ++++++++++----------
 src/components/pageAnno/ta-card.vue          |  4 +-
 src/components/pageHome/ph-comp-card.vue     |  4 +-
 src/components/userAchi/tua-achi.vue         | 12 ++---
 src/components/userAchi/tua-series.vue       | 12 ++---
 src/components/userAvatar/tua-avatar-box.vue |  4 +-
 src/components/userGacha/ug-his-card.vue     |  8 +--
 src/components/userRecord/tur-role-info.vue  |  4 +-
 src/pages/User/Characters.vue                |  4 +-
 src/pages/User/Record.vue                    |  4 +-
 src/views/t-post.vue                         | 54 +++++++-------------
 15 files changed, 84 insertions(+), 102 deletions(-)

diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index aa675e90..16373eda 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -25,10 +25,10 @@ rules:
     - true
     - severity: warning
   order/order:
+    - at-rules
     - custom-properties
     - declarations
     - rules
-    - at-rules
   prettier/prettier: true
   property-no-vendor-prefix:
     - true
diff --git a/src/components/app/t-gameNav.vue b/src/components/app/t-gameNav.vue
index a76c7171..412fab41 100644
--- a/src/components/app/t-gameNav.vue
+++ b/src/components/app/t-gameNav.vue
@@ -139,6 +139,8 @@ async function toBBS(link: URL): Promise<void> {
 }
 
 .tgn-nav {
+  @include github-styles.github-card;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -146,8 +148,6 @@ async function toBBS(link: URL): Promise<void> {
   border-radius: 4px;
   color: var(--tgc-white-1);
   cursor: pointer;
-
-  @include github-styles.github-card;
 }
 
 .dark .tgn-nav {
diff --git a/src/components/app/t-postcard.vue b/src/components/app/t-postcard.vue
index e1821512..1b160947 100644
--- a/src/components/app/t-postcard.vue
+++ b/src/components/app/t-postcard.vue
@@ -285,6 +285,8 @@ function onUserClick(): void {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tpc-card {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   overflow: hidden;
@@ -299,8 +301,6 @@ function onUserClick(): void {
   &.select-mode {
     cursor: pointer;
   }
-
-  @include github-styles.github-card;
 }
 
 .dark .tpc-card {
@@ -376,6 +376,8 @@ function onUserClick(): void {
 }
 
 .tpc-tag {
+  @include github-styles.github-tag-dark-gen(#e06c63);
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -387,19 +389,17 @@ function onUserClick(): void {
   &:hover {
     @include github-styles.github-tag-dark-gen(#00aeec);
   }
-
-  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
 .tpc-reason {
+  @include github-styles.github-tag-dark-gen(#d19a66);
+
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   border-radius: 4px;
   gap: 4px;
-
-  @include github-styles.github-tag-dark-gen(#d19a66);
 }
 
 .tpc-forum {
diff --git a/src/components/app/top-nameCard.vue b/src/components/app/top-nameCard.vue
index bf4352ed..926ffa95 100644
--- a/src/components/app/top-nameCard.vue
+++ b/src/components/app/top-nameCard.vue
@@ -39,6 +39,8 @@ const bgImage = computed<string>(() => {
 @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-1);
@@ -59,8 +61,6 @@ const bgImage = computed<string>(() => {
   &.grey:hover {
     filter: grayscale(0);
   }
-
-  @include github-styles.github-card-shadow;
 }
 
 .dark .top-nc-box {
diff --git a/src/components/func/loading.vue b/src/components/func/loading.vue
index 488467a8..ad96f5e5 100644
--- a/src/components/func/loading.vue
+++ b/src/components/func/loading.vue
@@ -73,6 +73,33 @@ async function displayBox(params: LoadingParams): Promise<void> {
 defineExpose({ displayBox });
 </script>
 <style lang="css" scoped>
+@keyframes ball-clip-rotate-pulse-rotate {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes ball-clip-rotate-pulse-scale {
+  0%,
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  30% {
+    opacity: 0.3;
+    transform: translate(-50%, -50%) scale(0.15);
+  }
+}
+
 .func-loading-outer-enter-active,
 .func-loading-outer-leave-active,
 .func-loading-inner-enter-active {
@@ -229,31 +256,4 @@ defineExpose({ displayBox });
   height: 16px;
   animation: ball-clip-rotate-pulse-scale 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
 }
-
-@keyframes ball-clip-rotate-pulse-rotate {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-
-  50% {
-    transform: translate(-50%, -50%) rotate(180deg);
-  }
-
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
-@keyframes ball-clip-rotate-pulse-scale {
-  0%,
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  30% {
-    opacity: 0.3;
-    transform: translate(-50%, -50%) scale(0.15);
-  }
-}
 </style>
diff --git a/src/components/pageAnno/ta-card.vue b/src/components/pageAnno/ta-card.vue
index b717d101..cfe15a80 100644
--- a/src/components/pageAnno/ta-card.vue
+++ b/src/components/pageAnno/ta-card.vue
@@ -133,13 +133,13 @@ function getAnnoTime(content: string): string | false {
 @use "@styles/github.styles.scss" as github-styles;
 
 .anno-card {
+  @include github-styles.github-card;
+
   position: relative;
   overflow: hidden;
   width: 100%;
   box-sizing: border-box;
   border-radius: 6px;
-
-  @include github-styles.github-card;
 }
 
 .dark .anno-card {
diff --git a/src/components/pageHome/ph-comp-card.vue b/src/components/pageHome/ph-comp-card.vue
index 62ea9360..e61d41fc 100644
--- a/src/components/pageHome/ph-comp-card.vue
+++ b/src/components/pageHome/ph-comp-card.vue
@@ -18,14 +18,14 @@ defineProps<{ append?: boolean }>();
 @use "@styles/github.styles.scss" as github-styles;
 
 .thc-container {
+  @include github-styles.github-card;
+
   position: relative;
   min-height: 100px;
   box-sizing: border-box;
   padding: 24px 8px 8px;
   border-radius: 4px;
   margin-top: 24px;
-
-  @include github-styles.github-card;
 }
 
 .dark .thc-container {
diff --git a/src/components/userAchi/tua-achi.vue b/src/components/userAchi/tua-achi.vue
index f6aa6df5..75cf1c65 100644
--- a/src/components/userAchi/tua-achi.vue
+++ b/src/components/userAchi/tua-achi.vue
@@ -96,6 +96,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
 @use "@styles/github.styles.scss" as github-styles;
 
 .achi-container {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   height: 60px;
@@ -105,8 +107,6 @@ async function setAchiStat(stat: boolean): Promise<void> {
   padding: 8px;
   border-radius: 4px;
   cursor: pointer;
-
-  @include github-styles.github-card;
 }
 
 .dark .achi-container {
@@ -114,6 +114,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
 }
 
 .achi-version {
+  @include github-styles.github-tag-dark-gen(#fb7299);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -125,8 +127,6 @@ async function setAchiStat(stat: boolean): Promise<void> {
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
-
-  @include github-styles.github-tag-dark-gen(#fb7299);
 }
 
 .achi-pre {
@@ -172,6 +172,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
   }
 
   &__progress {
+    @include github-styles.github-tag-dark-gen(#00aeec);
+
     display: flex;
     height: 21px;
     align-items: center;
@@ -179,8 +181,6 @@ async function setAchiStat(stat: boolean): Promise<void> {
     padding: 0 4px;
     border-radius: 4px;
     font-size: 12px;
-
-    @include github-styles.github-tag-dark-gen(#00aeec);
   }
 }
 
diff --git a/src/components/userAchi/tua-series.vue b/src/components/userAchi/tua-series.vue
index 64c6e075..16679cba 100644
--- a/src/components/userAchi/tua-series.vue
+++ b/src/components/userAchi/tua-series.vue
@@ -99,6 +99,8 @@ function selectSeries(): void {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tuas-card {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   overflow: hidden;
@@ -127,19 +129,19 @@ function selectSeries(): void {
       }
     }
   }
-
-  @include github-styles.github-card;
 }
 
 .dark .tuas-card {
+  @include github-styles.github-card("dark");
+
   &.tuas-selected {
     background: var(--box-bg-1);
   }
-
-  @include github-styles.github-card("dark");
 }
 
 .tuas-version {
+  @include github-styles.github-tag-dark-gen(#ffa726);
+
   position: absolute;
   z-index: 3;
   right: 0;
@@ -151,8 +153,6 @@ function selectSeries(): void {
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
-
-  @include github-styles.github-tag-dark-gen(#ffa726);
 }
 
 .tuas-reward {
diff --git a/src/components/userAvatar/tua-avatar-box.vue b/src/components/userAvatar/tua-avatar-box.vue
index bb5bc3a8..fd090381 100644
--- a/src/components/userAvatar/tua-avatar-box.vue
+++ b/src/components/userAvatar/tua-avatar-box.vue
@@ -138,6 +138,8 @@ function getWeaponTitle(): string {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tua-ab-box {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -145,8 +147,6 @@ function getWeaponTitle(): string {
   border-radius: 4px;
   cursor: pointer;
   row-gap: 4px;
-
-  @include github-styles.github-card;
 }
 
 .dark .tua-ab-box {
diff --git a/src/components/userGacha/ug-his-card.vue b/src/components/userGacha/ug-his-card.vue
index d0bfe501..eee78e6f 100644
--- a/src/components/userGacha/ug-his-card.vue
+++ b/src/components/userGacha/ug-his-card.vue
@@ -141,6 +141,8 @@ function getBox(id: number): TItemBoxData {
 }
 
 .ug-his-banner {
+  @include github-styles.github-card-shadow;
+
   width: 50vw;
   border-radius: 4px;
   cursor: pointer;
@@ -150,8 +152,6 @@ function getBox(id: number): TItemBoxData {
     scale: 0.95;
     transition: 0.5s ease-in-out;
   }
-
-  @include github-styles.github-card-shadow;
 }
 
 .ug-his-info {
@@ -176,6 +176,8 @@ function getBox(id: number): TItemBoxData {
 }
 
 .ug-his-tag {
+  @include github-styles.github-tag-dark-gen(#e06c63);
+
   display: flex;
   height: fit-content;
   align-items: center;
@@ -183,8 +185,6 @@ function getBox(id: number): TItemBoxData {
   padding: 0 8px;
   border-radius: 4px;
   font-size: 16px;
-
-  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
 .ug-his-sub {
diff --git a/src/components/userRecord/tur-role-info.vue b/src/components/userRecord/tur-role-info.vue
index 0e8b78fb..6d46b235 100644
--- a/src/components/userRecord/tur-role-info.vue
+++ b/src/components/userRecord/tur-role-info.vue
@@ -20,6 +20,8 @@ defineProps<TurRoleInfoProps>();
 @use "@styles/github.styles.scss" as github-styles;
 
 .tur-ri-box {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   height: 48px;
@@ -29,8 +31,6 @@ defineProps<TurRoleInfoProps>();
   padding: 4px 12px 4px 4px;
   border-radius: 24px;
   column-gap: 4px;
-
-  @include github-styles.github-card;
 }
 
 .dark .tur-ri-box {
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index fc589cb1..914a15bd 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -487,10 +487,10 @@ function handleSwitch(next: boolean): void {
 }
 
 .uc-box-uid {
+  @include github-styles.github-tag-dark-gen(#ffcd0c);
+
   padding: 2px 4px;
   border-radius: 4px;
-
-  @include github-styles.github-tag-dark-gen(#ffcd0c);
 }
 
 .uc-ov-item {
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index dde60a4b..031fa13c 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -243,6 +243,8 @@ async function deleteRecord(): Promise<void> {
 }
 
 .ur-box {
+  @include github-styles.github-card-shadow;
+
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -252,8 +254,6 @@ async function deleteRecord(): Promise<void> {
   border-radius: 4px;
   background: var(--app-page-bg);
   row-gap: 4px;
-
-  @include github-styles.github-card-shadow;
 }
 
 .dark .ur-box {
diff --git a/src/views/t-post.vue b/src/views/t-post.vue
index 581629a7..070413a7 100644
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -356,7 +356,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 </script>
 <style lang="scss" scoped>
-
+@use "@styles/github.styles.scss" as github-styles;
 
 .tp-post-body {
   width: 800px;
@@ -364,8 +364,6 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   font-family: var(--font-text);
 }
 
-/* title */
-
 .tp-post-title {
   display: flex;
   width: fit-content;
@@ -390,8 +388,6 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   text-align: center;
 }
 
-/* subtitle */
-
 .tp-post-subtitle {
   position: relative;
   display: flex;
@@ -412,8 +408,6 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   font-family: var(--font-title);
 }
 
-/* info */
-
 .tp-post-info {
   position: relative;
   display: flex;
@@ -442,8 +436,6 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   opacity: 0.6;
 }
 
-/* meta */
-
 .tp-post-meta {
   display: flex;
   align-items: center;
@@ -458,22 +450,22 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-}
 
-.mpm-forum img {
-  width: 28px;
-  height: 28px;
-  object-fit: cover;
-}
+  img {
+    width: 28px;
+    height: 28px;
+    object-fit: cover;
 
-.mpm-forum img:first-child {
-  border-radius: 4px;
-}
+    &:first-child {
+      border-radius: 4px;
+    }
+  }
 
-.mpm-forum span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .mpm-item {
@@ -488,8 +480,6 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   }
 }
 
-/* extra */
-
 .tp-post-extra {
   position: relative;
   display: flex;
@@ -516,35 +506,27 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   font-size: 12px;
 }
 
-/* collection */
-
 .tp-post-collection {
+  @include github-styles.github-tag-dark-gen(#3572a5);
+
   cursor: pointer;
 
   &:hover {
     @include github-styles.github-tag-dark-gen(#98c379);
   }
-
-  @include github-styles.github-tag-dark-gen(#3572a5);
 }
 
-/* topic */
-
 .tp-post-topic {
+  @include github-styles.github-tag-dark-gen(#e06c63);
+
   cursor: pointer;
 
   &:hover {
     @include github-styles.github-tag-dark-gen(#00aeec);
   }
-
-  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
-/* reason */
-
 .tp-post-reason {
   @include github-styles.github-tag-dark-gen(#d19a66);
 }
-
-@use "@styles/github.styles.scss" as github-styles;
 </style>