🎨 代码格式化

2026-03-16 04:03:17 +08:00 · 2025-05-29 14:03:08 +08:00
parent 4a748f20b7
commit a8d9808deb
65 changed files with 314 additions and 281 deletions
--- a/src/assets/index.scss
+++ b/src/assets/index.scss
@@ -53,6 +53,7 @@
 * @description 根 html 样式
 * @since Beta v0.3.0
 */
+
 html {
  overflow: auto;
  background: var(--app-page-bg);
@@ -64,6 +65,7 @@ html {
 * @description 侧边滚动条样式
 * @since Beta v0.7.2
 */
+
 ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
--- a/src/assets/styles/github.styles.scss
+++ b/src/assets/styles/github.styles.scss
@@ -1,7 +1,7 @@
 /**
 * @file styles/github.styles.scss
 * @description GitHub styles
- * @since Beta v0.7.2
+ * @since Beta v0.7.7
 */

 /* Card，传入theme参数 */
@@ -9,11 +9,11 @@
  @include github-card-shadow($theme);

  @if $theme == "default" {
-    border: 1px solid #d1d9e0;
-    background: #ffffff;
+    border: 1px solid #d1d9e0ff;
+    background: #ffffffff;
  } @else {
-    border: 1px solid #3d444d;
-    background: #0d1117;
+    border: 1px solid #3d444dff;
+    background: #0d1117ff;
  }
 }

@@ -21,23 +21,23 @@
@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;
+      #1f23280f 0 1px 1px 0,
+      #1f23280f 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;
+      #01040999 0 1px 1px 0,
+      #01040999 0 1px 3px 0;
  }
 }

 /* Btn，传入theme参数 */
@mixin github-btn($theme: "default") {
  @if $theme == "default" {
-    border: 1px solid #d1d9e0;
-    background: #f6f8fa;
+    border: 1px solid #d1d9e0ff;
+    background: #f6f8faff;
  } @else {
-    border: 1px solid #3d444d;
-    background: #212830;
+    border: 1px solid #3d444dff;
+    background: #212830ff;
  }
 }

--- a/src/components/app/t-backTop.vue
+++ b/src/components/app/t-backTop.vue
@@ -65,6 +65,7 @@ onUnmounted(() => window.removeEventListener("scroll", handleScroll));
 }

 /* 动画 */
+
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 0.5s;
--- a/src/components/app/t-gameNav.vue
+++ b/src/components/app/t-gameNav.vue
@@ -139,7 +139,6 @@ async function toBBS(link: URL): Promise<void> {
 }

 .tgn-nav {
-  @include github-styles.github-card();
  display: flex;
  align-items: center;
  justify-content: center;
@@ -147,6 +146,8 @@ 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 {
--- a/src/components/app/t-mi-img.vue
+++ b/src/components/app/t-mi-img.vue
@@ -58,11 +58,11 @@ onUnmounted(() => {
 </script>
 <style lang="scss" scoped>
 .progress {
+  position: relative;
+  display: flex;
  width: 25px;
  height: 25px;
-  display: flex;
-  position: relative;
-  justify-content: center;
  align-items: center;
+  justify-content: center;
 }
 </style>
--- a/src/components/app/t-overlay.vue
+++ b/src/components/app/t-overlay.vue
@@ -88,8 +88,8 @@ function toClick(): void {
  align-items: center;
  justify-content: center;
  border-radius: 8px;
-  -webkit-backdrop-filter: blur(v-bind(blurVal));
-  backdrop-filter: blur(v-bind(blurVal));
-  background: rgb(0 0 0 / 50%);
+  -webkit-backdrop-filter: blur(v-bind(blurVal)); /* stylelint-disable-line value-keyword-case */
+  backdrop-filter: blur(v-bind(blurVal)); /* stylelint-disable-line value-keyword-case */
+  background: #00000080;
 }
 </style>
--- a/src/components/app/t-postcard.vue
+++ b/src/components/app/t-postcard.vue
@@ -285,7 +285,6 @@ function onUserClick(): void {
@use "@styles/github.styles.scss" as github-styles;

 .tpc-card {
-  @include github-styles.github-card();
  position: relative;
  display: flex;
  overflow: hidden;
@@ -300,6 +299,8 @@ function onUserClick(): void {
  &.select-mode {
    cursor: pointer;
  }
+
+  @include github-styles.github-card;
 }

 .dark .tpc-card {
@@ -375,7 +376,6 @@ function onUserClick(): void {
 }

 .tpc-tag {
-  @include github-styles.github-tag-dark-gen(#e06c63);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -387,17 +387,19 @@ 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 {
@@ -464,8 +466,8 @@ function onUserClick(): void {
  color: var(--box-text-7);
  font-size: 12px;
  gap: 2px;
-  white-space: nowrap;
  opacity: 0.6;
+  white-space: nowrap;
 }

 .tpc-act {
@@ -478,25 +480,25 @@ function onUserClick(): void {
  justify-content: space-between;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
-  background: rgb(0 0 0/50%);
+  background: #00000080;
  font-size: 12px;
 }

 .tpc-image-cnt {
  position: absolute;
-  bottom: 0;
  right: 0;
+  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
+  background: var(--tgc-od-blue);
  border-top-left-radius: 12px;
+  box-shadow: -2px -2px 8px var(--tgc-dark-1);
+  color: var(--tgc-white-1);
  column-gap: 2px;
  font-size: 12px;
-  color: var(--tgc-white-1);
-  background: var(--tgc-od-blue);
  opacity: 0.8;
-  box-shadow: -2px -2px 8px var(--tgc-dark-1);
 }

 .tpc-status {
@@ -505,7 +507,7 @@ function onUserClick(): void {
  align-items: center;
  justify-content: flex-start;
  padding: 4px 30px 4px 4px;
-  background-color: v-bind(cardBg);
+  background-color: v-bind(cardBg); /* stylelint-disable-line value-keyword-case */
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  color: var(--tgc-white-1);

@@ -515,7 +517,7 @@ function onUserClick(): void {
    left: 0;
    width: 100%;
    height: 100%;
-    background: rgb(255 255 255/40%);
+    background: #ffffff66;
    clip-path: polygon(
      calc(100% - 25px) 0,
      100% 0,
--- a/src/components/app/to-nameCard.vue
+++ b/src/components/app/to-nameCard.vue
@@ -158,23 +158,23 @@ async function shareNameCard(): Promise<void> {
  padding: 8px;
  border-radius: 4px;
  backdrop-filter: blur(5px);
-  background: rgb(0 0 0 / 25%);
+  background: #00000040;
  color: var(--tgc-white-1);
 }

 .dark .ton-content {
-  background: rgb(0 0 0/ 50%);
+  background: #00000080;
 }

 .ton-content :first-child {
  font-family: var(--font-title);
  font-size: 20px;
-  text-shadow: 0 0 5px rgb(0 0 0/80%);
+  text-shadow: 0 0 5px #000000cc;
 }

 .ton-content :nth-child(2) {
  border-bottom: 1px dotted var(--tgc-white-1);
-  text-shadow: 0 0 2px rgb(0 0 0/80%);
+  text-shadow: 0 0 2px #000000cc;
  white-space: pre-wrap;
 }

--- a/src/components/app/top-nameCard.vue
+++ b/src/components/app/top-nameCard.vue
@@ -39,15 +39,13 @@ 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);
  border-radius: 4px 50px 50px 4px;
  margin-bottom: 8px;
  background-color: var(--box-bg-1);
-  background-image: v-bind(bgImage);
+  background-image: v-bind(bgImage); /* stylelint-disable-line value-keyword-case */
  background-position: right;
  background-repeat: no-repeat;
  cursor: pointer;
@@ -61,6 +59,8 @@ const bgImage = computed<string>(() => {
  &.grey:hover {
    filter: grayscale(0);
  }
+
+  @include github-styles.github-card-shadow;
 }

 .dark .top-nc-box {
--- a/src/components/func/dialog.vue
+++ b/src/components/func/dialog.vue
@@ -197,6 +197,10 @@ defineExpose({ displayInputBox, displayCheckBox });
 }

 .dialog-overlay {
+  /* 颜色变量 */
+  --dialog-title: var(--tgc-dark-7);
+  --dialog-bg: var(--tgc-white-1);
+
  position: fixed;
  z-index: 100;
  top: 0;
@@ -208,13 +212,10 @@ defineExpose({ displayInputBox, displayCheckBox });
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
-
-  /* 颜色变量 */
-  --dialog-title: var(--tgc-dark-7);
-  --dialog-bg: var(--tgc-white-1);
 }

 /* 深色模式 */
+
 .dark .dialog-overlay {
  --dialog-title: var(--tgc-white-1);
  --dialog-bg: var(--tgc-dark-7);
--- a/src/components/func/loading.vue
+++ b/src/components/func/loading.vue
@@ -186,6 +186,7 @@ defineExpose({ displayBox });
 }

 /* loading */
+
 .loading-circle,
 .loading-circle > div {
  position: relative;
--- a/src/components/func/snackbar.vue
+++ b/src/components/func/snackbar.vue
@@ -110,13 +110,13 @@ defineExpose({ displayBox });
  justify-content: center;
  padding: 10px 20px;
  border-radius: 5px;
-  background-color: v-bind(bgColor);
-  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
+  background-color: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
+  box-shadow: 0 0 10px #00000033;
  word-break: break-all;
 }

 .func-snackbar-text {
-  color: #ffffff;
+  color: #ffffffff;
  font-size: 16px;
  font-weight: 500;
 }
--- a/src/components/pageAnno/ta-card.vue
+++ b/src/components/pageAnno/ta-card.vue
@@ -63,12 +63,13 @@ async function shareAnno(): Promise<void> {
@use "@styles/github.styles.scss" as github-styles;

 .anno-card {
-  @include github-styles.github-card();
  position: relative;
  overflow: hidden;
  width: 100%;
-  border-radius: 6px;
  box-sizing: border-box;
+  border-radius: 6px;
+
+  @include github-styles.github-card;
 }

 .dark .anno-card {
@@ -96,15 +97,15 @@ async function shareAnno(): Promise<void> {
 .anno-title {
  position: relative;
  overflow: hidden;
-  max-width: 100%;
  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
  padding: 4px;
+  margin-left: auto;
  cursor: pointer;
  font-size: 18px;
-  margin-left: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
-  box-sizing: border-box;
 }

 .anno-info {
@@ -117,7 +118,7 @@ async function shareAnno(): Promise<void> {
  justify-content: space-between;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
-  background: rgb(0 0 0/50%);
+  background: #00000080;
  font-size: 12px;
 }

--- 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;
-  padding: 24px 8px 8px;
  box-sizing: border-box;
+  padding: 24px 8px 8px;
  border-radius: 4px;
  margin-top: 24px;
+
+  @include github-styles.github-card;
 }

 .dark .thc-container {
@@ -36,16 +36,16 @@ defineProps<{ append?: boolean }>();
 .thc-append {
  position: absolute;
  top: -16px;
-  height: 32px;
  display: flex;
+  height: 32px;
+  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
+  border: 1px solid var(--tgc-od-white);
  border-radius: 4px;
  background: var(--tgc-od-blue);
  font-family: var(--font-title);
-  border: 1px solid var(--tgc-od-white);
-  box-sizing: border-box;
 }

 .thc-title {
--- a/src/components/pageHome/ph-pool-card.vue
+++ b/src/components/pageHome/ph-pool-card.vue
@@ -228,10 +228,10 @@ async function toPool(): Promise<void> {
  width: auto;
  max-width: 280px;
  height: 60px;
-  margin: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
+  margin: 8px;
  gap: 8px;

  &::-webkit-scrollbar-thumb {
--- a/src/components/pageHome/ph-position-card.vue
+++ b/src/components/pageHome/ph-position-card.vue
@@ -99,10 +99,10 @@ onUnmounted(() => {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
+  border: 1px solid var(--common-shadow-1);
  border-radius: 4px;
  background: var(--box-bg-1);
  color: var(--box-text-1);
-  border: 1px solid var(--common-shadow-1);
 }

 .top {
--- a/src/components/pageWiki/twc-weapon.vue
+++ b/src/components/pageWiki/twc-weapon.vue
@@ -136,8 +136,8 @@ async function toWiki(): Promise<void> {
 }

 .tww-brief-title {
-  width: fit-content;
  display: flex;
+  width: fit-content;
  align-items: center;
  justify-content: center;
  color: var(--common-text-title);
@@ -148,8 +148,8 @@ async function toWiki(): Promise<void> {
  img {
    width: 20px;
    height: 20px;
-    object-fit: contain;
    cursor: pointer;
+    object-fit: contain;
  }
 }

--- a/src/components/pageWiki/two-source.vue
+++ b/src/components/pageWiki/two-source.vue
@@ -24,7 +24,7 @@ const textColor = computed<string>(() => {
  display: flex;
  width: fit-content;
  align-items: center;
-  color: v-bind(textColor);
+  color: v-bind(textColor); /* stylelint-disable-line value-keyword-case */
  column-gap: 5px;
 }
 </style>
--- a/src/components/userAchi/tua-achi.vue
+++ b/src/components/userAchi/tua-achi.vue
@@ -96,8 +96,6 @@ 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;
@@ -107,6 +105,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
+
+  @include github-styles.github-card;
 }

 .dark .achi-container {
@@ -114,19 +114,19 @@ async function setAchiStat(stat: boolean): Promise<void> {
 }

 .achi-version {
-  @include github-styles.github-tag-dark-gen(#fb7299);
-
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
-  border-left: unset;
  border-top: unset;
+  border-left: unset;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 4px;
  font-family: var(--font-title);
  font-size: 10px;
  text-align: center;
+
+  @include github-styles.github-tag-dark-gen(#fb7299);
 }

 .achi-pre {
@@ -172,14 +172,15 @@ async function setAchiStat(stat: boolean): Promise<void> {
  }

  &__progress {
-    @include github-styles.github-tag-dark-gen(#00aeec);
-    padding: 0 4px;
-    border-radius: 4px;
-    height: 21px;
    display: flex;
+    height: 21px;
    align-items: center;
    justify-content: center;
+    padding: 0 4px;
+    border-radius: 4px;
    font-size: 12px;
+
+    @include github-styles.github-tag-dark-gen(#00aeec);
  }
 }

--- a/src/components/userAchi/tua-series.vue
+++ b/src/components/userAchi/tua-series.vue
@@ -99,27 +99,25 @@ function selectSeries(): void {
@use "@styles/github.styles.scss" as github-styles;

 .tuas-card {
-  @include github-styles.github-card();
-
  position: relative;
  display: flex;
+  overflow: hidden;
+  height: 60px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
-  height: 60px;
  border-radius: 4px;
  color: var(--box-text-1);
  column-gap: 8px;
  cursor: pointer;
-  overflow: hidden;

  &.tuas-selected {
    background: var(--box-bg-1);
  }

  &.tuas-radius {
-    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
+    border-top-right-radius: 30px;
  }

  &:hover {
@@ -129,20 +127,21 @@ 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;
  bottom: 0;
  width: 64px;
@@ -152,21 +151,22 @@ function selectSeries(): void {
  font-family: var(--font-title);
  font-size: 10px;
  text-align: center;
-  z-index: 3;
+
+  @include github-styles.github-tag-dark-gen(#ffa726);
 }

 .tuas-reward {
  position: absolute;
+  z-index: 0;
  top: -1px;
  right: -2px;
  height: 62px;
-  z-index: 0;

  img {
    height: 100%;
+    filter: grayscale(1);
    object-fit: contain;
    opacity: 0.3;
-    filter: grayscale(1);
    transition: filter 0.5s ease-in-out;

    &.finish {
@@ -177,14 +177,14 @@ function selectSeries(): void {

 .tuas-icon {
  position: relative;
-  flex-shrink: 0;
+  z-index: 1;
  width: 40px;
  height: 40px;
+  box-sizing: border-box;
+  flex-shrink: 0;
  padding: 5px;
  border-radius: 50%;
-  box-sizing: border-box;
  background: var(--tgc-dark-7);
-  z-index: 1;

  img {
    width: 100%;
--- a/src/components/userAvatar/tua-avatar-box.vue
+++ b/src/components/userAvatar/tua-avatar-box.vue
@@ -138,8 +138,6 @@ 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;
@@ -151,6 +149,8 @@ function getWeaponTitle(): string {
  &:hover .tua-abl-bg {
    filter: grayscale(0);
  }
+
+  @include github-styles.github-card;
 }

 .dark .tua-ab-box {
@@ -206,8 +206,8 @@ function getWeaponTitle(): string {
  background: rgb(0 0 0 / 40%);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
-  font-family: var(--font-title);
  color: var(--tgc-white-1);
+  font-family: var(--font-title);
 }

 .tua-abl-fetter {
@@ -231,9 +231,9 @@ function getWeaponTitle(): string {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
-  row-gap: 4px;
  border-radius: 4px;
  aspect-ratio: 21/10;
+  row-gap: 4px;
 }

 .tua-abl-bg {
@@ -285,10 +285,10 @@ function getWeaponTitle(): string {
    display: flex;
    width: 40px;
    height: 40px;
+    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 5px;
-    box-sizing: border-box;
    border: 1px solid var(--box-bg-4);
    border-radius: 50%;
    background: var(--tgc-dark-7);
@@ -297,9 +297,9 @@ function getWeaponTitle(): string {

  :last-child {
    display: flex;
+    width: 48px;
    align-items: center;
    justify-content: center;
-    width: 48px;
    border-radius: 5px;
    background: var(--box-bg-4);
    color: var(--box-text-4);
--- a/src/components/userAvatar/tua-dc-prop.vue
+++ b/src/components/userAvatar/tua-dc-prop.vue
@@ -30,7 +30,7 @@ function getRightTitle(): string {
 .tua-dcp-box {
  position: relative;
  display: flex;
-  width: v-bind(getWidth);
+  width: v-bind(getWidth); /* stylelint-disable-line value-keyword-case */
  height: 20px;
  align-items: center;
  justify-content: space-between;
--- a/src/components/userAvatar/tua-detail-overlay.vue
+++ b/src/components/userAvatar/tua-detail-overlay.vue
@@ -106,10 +106,11 @@ function handleClick(pos: "left" | "right"): void {

 .tdo-avatars-container {
  position: relative;
-  width: v-bind(avatarsWidth);
+  width: v-bind(avatarsWidth); /* stylelint-disable-line value-keyword-case */
 }

 /* stylelint-disable selector-class-pattern */
+
 .tdo-avatars-container :deep(.v-slide-group__next),
 .tdo-avatars-container :deep(.v-slide-group__prev) {
  color: var(--tgc-od-white);
--- a/src/components/userAvatarCard/duc-detail-olb.vue
+++ b/src/components/userAvatarCard/duc-detail-olb.vue
@@ -40,7 +40,7 @@ const props = defineProps<DucDetailOlbProps>();
  border-radius: 50%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
-  background: rgb(0 0 0/40%);
+  background: #00000066;
 }

 .duc-dolb-lock {
@@ -55,7 +55,7 @@ const props = defineProps<DucDetailOlbProps>();
  border-radius: 50%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
-  background-color: rgb(0 0 0 / 40%);
+  background-color: #00000066;
 }

 .duc-dolb-icon {
--- a/src/components/userAvatarCard/duc-detail-relic.vue
+++ b/src/components/userAvatarCard/duc-detail-relic.vue
@@ -37,7 +37,7 @@ const relicBg = computed<string>(() => {
  width: 60px;
  height: 60px;
  border-radius: 50%;
-  background: rgb(50 56 68/50%);
+  background: #32384480;
 }

 .duc-dr-bg {
@@ -86,7 +86,7 @@ const relicBg = computed<string>(() => {
  justify-content: center;
  border: 2px solid var(--tgc-od-red);
  border-radius: 50%;
-  background: v-bind(relicBg);
+  background: v-bind(relicBg); /* stylelint-disable-line value-keyword-case */
  color: var(--tgc-white-1);
  font-family: var(--font-title);
  font-size: 12px;
--- a/src/components/userAvatarOld/tuc-detail-constellation.vue
+++ b/src/components/userAvatarOld/tuc-detail-constellation.vue
@@ -32,7 +32,7 @@ defineProps<{ modelValue: TGApp.Game.Avatar.Constellation }>();
  justify-content: center;
  padding: 3px;
  border-radius: 50%;
-  background-color: rgb(0 0 0 / 50%);
+  background-color: #00000080;
 }

 .tuc-dc-icon {
@@ -42,9 +42,9 @@ defineProps<{ modelValue: TGApp.Game.Avatar.Constellation }>();
  align-items: center;
  justify-content: center;
  padding: 3px;
-  border: 1px solid rgb(0 0 0/20%);
+  border: 1px solid #00000033;
  border-radius: 50%;
-  background: rgb(50 56 68/50%);
+  background: #32384480;
 }

 .tuc-dc-icon img {
--- a/src/components/userAvatarOld/tuc-detail-old.vue
+++ b/src/components/userAvatarOld/tuc-detail-old.vue
@@ -170,8 +170,8 @@ function switchBg(): void {
  justify-content: center;
  border-radius: 5px;
  margin: 0 auto;
-  object-fit: v-bind(bgFit);
-  transform: translateY(v-bind(bgTransY));
+  object-fit: v-bind(bgFit); /* stylelint-disable-line value-keyword-case */
+  transform: translateY(v-bind(bgTransY)); /* stylelint-disable-line value-keyword-case */

  img {
    width: 100%;
@@ -270,6 +270,7 @@ function switchBg(): void {
 }

 /* 左侧显示区域 */
+
 .tuc-dol-item {
  position: relative;
  border-radius: 5px;
@@ -300,6 +301,7 @@ function switchBg(): void {
 }

 /* 右侧显示区域 */
+
 .tuc-dor-box {
  position: relative;
  width: 100%;
@@ -317,6 +319,7 @@ function switchBg(): void {
 }

 /* 环状排列6个命座 */
+
 .tuc-dor-item:nth-child(1) {
  top: 10px;
  left: 10px;
--- a/src/components/userAvatarOld/tuc-detail-relic.vue
+++ b/src/components/userAvatarOld/tuc-detail-relic.vue
@@ -22,7 +22,7 @@ defineProps<{ modelValue: TGApp.Game.Avatar.Relic | false; pos: number }>();
  width: 60px;
  height: 60px;
  border-radius: 5px;
-  background: rgb(50 56 68/50%);
+  background: #32384480;
 }

 .tuc-dr-bg {
--- a/src/components/userCombat/tuc-buffs.vue
+++ b/src/components/userCombat/tuc-buffs.vue
@@ -32,7 +32,9 @@ const columnCnt = computed<number>(() => {
  display: grid;
  width: 100%;
  grid-gap: 4px;
+  /* stylelint-disable value-keyword-case */
  grid-template-columns: repeat(v-bind(columnCnt), 1fr);
+  /* stylelint-enable value-keyword-case */
 }

 .tuc-buff-item {
--- a/src/components/userGacha/gro-data-line.vue
+++ b/src/components/userGacha/gro-data-line.vue
@@ -75,14 +75,14 @@ const progressWidth = computed<string>(() => {
  position: relative;
  display: flex;
  width: 100%;
+  height: 48px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
-  height: 48px;
+  border: 1px solid var(--common-shadow-1);
  border-radius: 4px;
  background: var(--box-bg-2);
-  border: 1px solid var(--common-shadow-1);
  column-gap: 4px;
 }

@@ -90,11 +90,11 @@ const progressWidth = computed<string>(() => {
  position: absolute;
  bottom: 0;
  left: 0;
-  width: v-bind(progressWidth);
+  width: v-bind(progressWidth); /* stylelint-disable-line value-keyword-case */
  max-width: 100%;
  height: 4px;
  border-radius: 4px;
-  background: v-bind(progressColor);
+  background: v-bind(progressColor); /* stylelint-disable-line value-keyword-case */
 }

 .gro-dl-icon {
@@ -119,16 +119,16 @@ const progressWidth = computed<string>(() => {
 }

 .gro-dl-name {
-  line-height: 18px;
  color: var(--common-text-title);
  font-family: var(--font-title);
  font-size: 14px;
+  line-height: 18px;
 }

 .gro-dl-time {
-  line-height: 14px;
  color: var(--box-text-7);
  font-size: 12px;
+  line-height: 14px;
 }

 .gro-dl-info {
@@ -153,7 +153,7 @@ const progressWidth = computed<string>(() => {
  padding: 4px;
  border-radius: 50%;
  background: var(--box-bg-3);
-  color: v-bind(progressColor);
+  color: v-bind(progressColor); /* stylelint-disable-line value-keyword-case */
  font-family: var(--font-title);
  transform: rotate(25deg);
 }
--- a/src/components/userGacha/gro-data-view.vue
+++ b/src/components/userGacha/gro-data-view.vue
@@ -238,8 +238,10 @@ watch(
  padding-right: 4px;
 }

-/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable selector-class-pattern */
+
 :deep(.v-virtual-scroll__item + .v-virtual-scroll__item) {
  margin-top: 8px;
 }
+/* stylelint-enable selector-class-pattern */
 </style>
--- a/src/components/userGacha/gro-history.vue
+++ b/src/components/userGacha/gro-history.vue
@@ -57,10 +57,12 @@ onMounted(() => {
  height: 100%;
 }

-/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable selector-class-pattern */
+
 .gro-container :deep(.v-tabs.v-slide-group--vertical) {
  max-height: 100%;
 }
+/* stylelint-enable selector-class-pattern */

 .gro-window {
  position: relative;
@@ -74,10 +76,12 @@ onMounted(() => {
  overflow-y: scroll;
 }

-/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable selector-class-pattern */
+
 .gro-window :deep(.v-window__container) {
  width: 100%;
 }
+/* stylelint-enable selector-class-pattern */

 .gro-pools {
  position: relative;
--- a/src/components/userGacha/gro-overview.vue
+++ b/src/components/userGacha/gro-overview.vue
@@ -57,6 +57,6 @@ watch(
  display: grid;
  height: 100%;
  grid-column-gap: 8px;
-  grid-template-columns: v-bind(cnCols);
+  grid-template-columns: v-bind(cnCols); /* stylelint-disable-line value-keyword-case */
 }
 </style>
--- a/src/components/userGacha/ug-his-card.vue
+++ b/src/components/userGacha/ug-his-card.vue
@@ -141,8 +141,6 @@ function getBox(id: number): TItemBoxData {
 }

 .ug-his-banner {
-  @include github-styles.github-card-shadow();
-
  width: 50vw;
  border-radius: 4px;
  cursor: pointer;
@@ -152,6 +150,8 @@ function getBox(id: number): TItemBoxData {
    scale: 0.95;
    transition: 0.5s ease-in-out;
  }
+
+  @include github-styles.github-card-shadow;
 }

 .ug-his-info {
@@ -164,9 +164,9 @@ function getBox(id: number): TItemBoxData {

 .ug-his-title {
  display: flex;
-  column-gap: 8px;
  align-items: center;
  justify-content: flex-start;
+  column-gap: 8px;

  :first-child {
    color: var(--common-text-title);
@@ -176,15 +176,15 @@ function getBox(id: number): TItemBoxData {
 }

 .ug-his-tag {
-  @include github-styles.github-tag-dark-gen(#e06c63);
-
  display: flex;
+  height: fit-content;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
-  height: fit-content;
  border-radius: 4px;
  font-size: 16px;
+
+  @include github-styles.github-tag-dark-gen(#e06c63);
 }

 .ug-his-sub {
--- a/src/components/userRecord/tur-role-info.vue
+++ b/src/components/userRecord/tur-role-info.vue
@@ -20,17 +20,17 @@ defineProps<TurRoleInfoProps>();
@use "@styles/github.styles.scss" as github-styles;

 .tur-ri-box {
-  @include github-styles.github-card();
-
  position: relative;
  display: flex;
  height: 48px;
+  box-sizing: border-box;
  align-items: center;
  justify-content: center;
-  column-gap: 4px;
-  border-radius: 24px;
  padding: 4px 12px 4px 4px;
-  box-sizing: border-box;
+  border-radius: 24px;
+  column-gap: 4px;
+
+  @include github-styles.github-card;
 }

 .dark .tur-ri-box {
@@ -64,20 +64,20 @@ defineProps<TurRoleInfoProps>();
  display: flex;
  align-items: center;
  justify-content: flex-start;
+  color: var(--common-text-title);
  column-gap: 4px;
  font-family: var(--font-title);
-  color: var(--common-text-title);
  font-size: 16px;
  line-height: 20px;
 }

 .tur-ri-subtitle {
  display: flex;
-  font-size: 14px;
-  line-height: 16px;
  align-items: center;
  justify-content: flex-start;
-  column-gap: 10px;
  color: var(--box-text-1);
+  column-gap: 10px;
+  font-size: 14px;
+  line-height: 16px;
 }
 </style>
--- a/src/components/userRecord/tur-world-sub.vue
+++ b/src/components/userRecord/tur-world-sub.vue
@@ -69,10 +69,10 @@ const icon = computed<string>(() => {
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
-  border-radius: 4px;
-  column-gap: 4px;
-  background: var(--box-bg-1);
  border: 1px solid var(--common-shadow-1);
+  border-radius: 4px;
+  background: var(--box-bg-1);
+  column-gap: 4px;
 }

 .tur-ws-bg {
@@ -92,7 +92,7 @@ const icon = computed<string>(() => {
 .tur-ws-icon img {
  width: 100%;
  height: 100%;
-  filter: v-bind(imgFilter);
+  filter: v-bind(imgFilter); /* stylelint-disable-line value-keyword-case */
 }

 .tur-ws-content {
--- a/src/components/userScripts/tus-mission.vue
+++ b/src/components/userScripts/tus-mission.vue
@@ -300,24 +300,24 @@ async function autoSign(ck: TGApp.App.Account.Cookie, ch?: string): Promise<void
 <style lang="scss" scoped>
 .tusm-box {
  position: relative;
+  display: flex;
  width: 100%;
  box-sizing: border-box;
-  padding: 12px;
-  background: var(--box-bg-1);
-  border-radius: 4px;
-  border: 1px solid var(--common-shadow-2);
-  display: flex;
  flex-direction: column;
-  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  background: var(--box-bg-1);
  color: var(--box-text-1);
+  gap: 8px;
 }

 .tusm-top {
  position: relative;
-  width: 100%;
  display: flex;
-  justify-content: space-between;
+  width: 100%;
  align-items: center;
+  justify-content: space-between;
 }

 .tusm-title {
@@ -343,14 +343,14 @@ async function autoSign(ck: TGApp.App.Account.Cookie, ch?: string): Promise<void

 .mission-item {
  position: relative;
+  display: flex;
  width: 100%;
  box-sizing: border-box;
-  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
-  background: var(--box-bg-2);
  border-radius: 4px;
+  background: var(--box-bg-2);
  color: var(--box-text-2);

  .left {
--- a/src/components/userScripts/tus-output.vue
+++ b/src/components/userScripts/tus-output.vue
@@ -42,26 +42,26 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .tuso-box {
  position: relative;
-  height: 100%;
-  box-sizing: border-box;
  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-left: auto;
  width: 800px;
  min-width: 800px;
+  height: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
  padding: 12px;
-  background: var(--box-bg-1);
-  border-radius: 4px;
  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  margin-left: auto;
+  background: var(--box-bg-1);
+  gap: 4px;
 }

 .tuso-top {
  position: relative;
-  width: 100%;
  display: flex;
-  justify-content: space-between;
+  width: 100%;
  align-items: flex-end;
+  justify-content: space-between;
 }

 .tuso-title {
@@ -83,12 +83,12 @@ onUnmounted(() => {
 .tuso-mid {
  position: relative;
  display: flex;
-  flex-direction: column;
  height: 100%;
-  background: var(--box-bg-2);
-  border-radius: 4px;
-  padding: 8px;
  box-sizing: border-box;
+  flex-direction: column;
+  padding: 8px;
+  border-radius: 4px;
+  background: var(--box-bg-2);
  overflow-y: auto;
 }

--- a/src/components/userScripts/tus-sign.vue
+++ b/src/components/userScripts/tus-sign.vue
@@ -312,24 +312,24 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise
 <style lang="scss" scoped>
 .tuss-box {
  position: relative;
+  display: flex;
  width: 100%;
  box-sizing: border-box;
-  padding: 12px;
-  background: var(--box-bg-1);
-  border-radius: 4px;
-  border: 1px solid var(--common-shadow-2);
-  display: flex;
  flex-direction: column;
-  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  background: var(--box-bg-1);
  color: var(--box-text-1);
+  gap: 8px;
 }

 .tuss-top {
  position: relative;
-  width: 100%;
  display: flex;
-  justify-content: space-between;
+  width: 100%;
  align-items: center;
+  justify-content: space-between;
 }

 .tuss-title {
@@ -355,23 +355,23 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise

 .tuss-item {
  position: relative;
-  width: 100%;
-  box-sizing: border-box;
  display: flex;
+  width: 100%;
+  height: 80px;
+  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
-  column-gap: 8px;
  padding: 10px;
-  background: var(--box-bg-2);
  border-radius: 4px;
+  background: var(--box-bg-2);
  color: var(--box-text-2);
-  height: 80px;
+  column-gap: 8px;
  cursor: pointer;
  user-select: none;

  &:hover {
-    background: var(--box-bg-3);
    border: 1px solid var(--common-shadow-1);
+    background: var(--box-bg-3);
  }
 }

@@ -385,24 +385,24 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise

 .tuss-icon {
  position: relative;
+  overflow: hidden;
  width: 48px;
  height: 48px;
  border-radius: 4px;
-  overflow: hidden;

  img {
-    border-radius: 4px;
    width: 100%;
    height: 100%;
+    border-radius: 4px;
  }

  .delete {
    position: absolute;
    bottom: 0;
    left: 0;
+    display: flex;
    width: 16px;
    height: 16px;
-    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
@@ -413,30 +413,30 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise

 .tuss-stat {
  position: relative;
-  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
+  margin-left: auto;
  column-gap: 4px;
 }

 .tuss-reward {
  position: relative;
  display: flex;
-  align-items: center;
-  justify-content: center;
  width: 48px;
  height: 48px;
+  align-items: center;
+  justify-content: center;
  border-radius: 50%;
  background: var(--box-bg-4);

  img {
    width: 100%;
    height: 100%;
-    border-radius: 50%;
-    padding: 10px;
    box-sizing: border-box;
+    padding: 10px;
    border: 1px solid var(--common-shadow-1);
+    border-radius: 50%;
  }

  span {
@@ -445,11 +445,11 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise
    width: fit-content;
    min-width: 48px;
    padding: 0 4px;
+    border: 1px solid var(--common-shadow-1);
    border-radius: 12px;
+    background: var(--app-page-bg);
    font-size: 8px;
    text-align: center;
-    background: var(--app-page-bg);
-    border: 1px solid var(--common-shadow-1);
  }
 }
 </style>
--- a/src/components/viewPost/tp-avatar.vue
+++ b/src/components/viewPost/tp-avatar.vue
@@ -139,7 +139,7 @@ const levelColor = computed<string>(() => {
  width: 18px;
  height: 18px;
  border-radius: 50%;
-  background: v-bind(levelColor);
+  background: v-bind(levelColor); /* stylelint-disable-line value-keyword-case */
  color: var(--tgc-white-1);
  font-size: 10px;
  line-height: 18px;
--- a/src/components/viewPost/tp-backupText.vue
+++ b/src/components/viewPost/tp-backupText.vue
@@ -48,7 +48,7 @@ console.log("tpBackupText", props.data.insert.backup_text, toRaw(props.data));
 <style lang="css" scoped>
 .tp-backup-lottery {
  margin-right: 4px;
-  color: #00c3ff;
+  color: #00c3ffff;
  cursor: pointer;

  :first-child {
--- a/src/components/viewPost/tp-emoticon.vue
+++ b/src/components/viewPost/tp-emoticon.vue
@@ -83,7 +83,7 @@ onUnmounted(() => {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
-  background: v-bind(bgColor);
+  background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
 }

 .tp-emo-info {
@@ -99,9 +99,9 @@ onUnmounted(() => {
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: -1px 1px 4px var(--common-shadow-2);
+  cursor: default;
  font-family: var(--font-title);
  font-size: 12px;
-  cursor: default;
  white-space: nowrap;
 }
 </style>
--- a/src/components/viewPost/tp-gameCard.vue
+++ b/src/components/viewPost/tp-gameCard.vue
@@ -61,25 +61,25 @@ async function toGame(): Promise<void> {
 <style lang="scss" scoped>
 .tp-game-card-box {
  position: relative;
-  margin: 12px 0;
+  display: flex;
  width: 100%;
  box-sizing: border-box;
-  display: flex;
  align-items: center;
  justify-content: flex-start;
-  column-gap: 12px;
  padding: 8px 16px;
-  border-radius: 4px;
-  background: var(--box-bg-1);
  border: 1px solid var(--common-shadow-1);
+  border-radius: 4px;
+  margin: 12px 0;
+  background: var(--box-bg-1);
+  column-gap: 12px;
 }

 .icon {
  position: relative;
-  flex-shrink: 0;
+  overflow: hidden;
  width: 80px;
  height: 80px;
-  overflow: hidden;
+  flex-shrink: 0;

  img {
    width: 100%;
@@ -97,8 +97,8 @@ async function toGame(): Promise<void> {

  span {
    &:first-child {
-      font-family: var(--font-title);
      color: var(--common-text-title);
+      font-family: var(--font-title);
      font-size: 20px;
    }

@@ -110,10 +110,10 @@ async function toGame(): Promise<void> {

 .act {
  height: 40px;
+  margin-left: auto;
  background: var(--tgc-btn-1);
  color: var(--btn-text);
  font-family: var(--font-title);
-  margin-left: auto;
 }

 .dark .act {
--- a/src/components/viewPost/tp-image.vue
+++ b/src/components/viewPost/tp-image.vue
@@ -113,12 +113,12 @@ function getImageTitle(): string {
 }

 .tp-image-box img {
-  width: v-bind(imgWidth);
+  width: v-bind(imgWidth); /* stylelint-disable-line value-keyword-case */
  max-width: 100%;
  height: auto;
  border-radius: 4px;
+  background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
  cursor: pointer;
-  background: v-bind(bgColor);
 }

 .tp-image-load {
@@ -141,7 +141,7 @@ function getImageTitle(): string {
  justify-content: center;
  border-radius: 50%;
  background: var(--tgc-od-white);
-  box-shadow: 0 0 4px rgb(0 0 0 / 50%);
+  box-shadow: 0 0 4px #00000080;
  cursor: pointer;
 }
 </style>
--- a/src/components/viewPost/tp-linkCard.vue
+++ b/src/components/viewPost/tp-linkCard.vue
@@ -108,14 +108,14 @@ async function toLink(): Promise<void> {

 .tp-link-card-price {
  display: inline-block;
-  color: #ff6d6d;
+  color: #ff6d6dff;
  font-size: 20px;
 }

 .tp-link-card-btn {
  display: inline-block;
  margin-left: auto;
-  color: #00c3ff;
+  color: #00c3ffff;
  cursor: pointer;
  text-align: right;
 }
--- a/src/components/viewPost/tp-mention.vue
+++ b/src/components/viewPost/tp-mention.vue
@@ -29,7 +29,7 @@ async function toLink(): Promise<void> {
  border: 1px solid var(--common-shadow-1);
  border-radius: 4px;
  margin: 2px;
-  color: #00c3ff;
+  color: #00c3ffff;
  cursor: pointer;
 }
 </style>
--- a/src/components/viewPost/tp-parser.vue
+++ b/src/components/viewPost/tp-parser.vue
@@ -94,12 +94,13 @@ function getParsedText(data: TpTextType): Array<TpTextType> {
 function getTpName(tp: TGApp.BBS.SctPost.Base): Component {
  if (tp.children) return TpTexts;
  if (typeof tp.insert === "string") return TpText;
-  // custom_emoticon属于backup_text的一种，必须放在backup_text判断的前面
-  if ("custom_emoticon" in tp.insert) return TpEmoticon;
  // game_user_info属于backup_text的一种，必须放在backup_text判断的前面
  if ("game_user_info" in tp.insert) return TpUid;
  if ("backup_text" in tp.insert) {
-    if (tp.insert.backup_text === "[游戏卡片]") return TpGameCard;
+    if (tp.insert.backup_text === "[游戏卡片]" && "reception_card" in tp.insert) return TpGameCard;
+    if (tp.insert.backup_text === "[自定义表情]" && "custom_emoticon" in tp.insert) {
+      return TpEmoticon;
+    }
    return TpBackupText;
  }
  if ("divider" in tp.insert) return TpDivider;
--- a/src/components/viewPost/tp-text.vue
+++ b/src/components/viewPost/tp-text.vue
@@ -138,9 +138,9 @@ function getEmojiName(): string {
 </script>
 <style lang="css" scoped>
 .tp-text-link {
-  color: #00c3ff;
+  color: #00c3ffff;
  cursor: pointer;
-  text-decoration: underline solid #00c3ff;
+  text-decoration: underline solid #00c3ffff;
  text-underline-position: under;
 }

--- a/src/components/viewPost/tp-texts.vue
+++ b/src/components/viewPost/tp-texts.vue
@@ -50,9 +50,9 @@ function getTitle(): string {
 <style lang="scss" scoped>
 .tp-texts {
  line-break: anywhere;
+  text-align: v-bind("props.data.attributes?.align");
  white-space: pre-wrap;
  word-break: break-all;
-  text-align: v-bind("props.data.attributes?.align");

  &.tp-inline {
    display: inline;
--- a/src/components/viewPost/tp-uid.vue
+++ b/src/components/viewPost/tp-uid.vue
@@ -68,12 +68,12 @@ function getGameName(): string {
  padding: 5px;
  border: 1px solid var(--common-shadow-2);
  border-radius: 3px;
-  background-color: #f4efe9;
+  background-color: #f4efe9ff;
  background-image: url("/source/post/tp_uid_bg.webp");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
-  color: #a17a58;
+  color: #a17a58ff;
 }

 .tpu-top {
@@ -111,7 +111,7 @@ function getGameName(): string {
  align-items: center;
  justify-content: center;
  padding: 0 5px;
-  border: 1px solid rgb(161 122 88 / 30%);
+  border: 1px solid #a17a584d;
  border-radius: 3px;
  font-size: 12px;
  opacity: 0.7;
--- a/src/components/viewPost/tp-video.vue
+++ b/src/components/viewPost/tp-video.vue
@@ -68,7 +68,7 @@ onUnmounted(() => {
  position: relative;
  max-width: 100%;
  margin: 10px auto;
-  aspect-ratio: v-bind(videoAspectRatio);
+  aspect-ratio: v-bind(videoAspectRatio); /* stylelint-disable-line value-keyword-case */
 }

 .tp-video-container {
@@ -79,7 +79,7 @@ onUnmounted(() => {
  max-width: 100%;
  border: none;
  border-radius: 10px;
-  aspect-ratio: v-bind(videoAspectRatio);
+  aspect-ratio: v-bind(videoAspectRatio); /* stylelint-disable-line value-keyword-case */
 }

 .tp-video-share {
@@ -93,7 +93,7 @@ onUnmounted(() => {
  align-items: center;
  justify-content: center;
  border-radius: 10px;
-  aspect-ratio: v-bind(videoAspectRatio);
+  aspect-ratio: v-bind(videoAspectRatio); /* stylelint-disable-line value-keyword-case */
 }

 .tp-video-cover {
@@ -119,7 +119,7 @@ onUnmounted(() => {
  align-items: center;
  padding: 2px 5px;
  border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
  color: var(--tgc-white-4);
  font-family: var(--font-title);
  font-size: 12px;
@@ -136,7 +136,7 @@ onUnmounted(() => {
  justify-content: center;
  padding: 5px;
  border-radius: 5px;
-  background: rgb(0 0 0 / 50%);
+  background: #00000080;
  color: var(--tgc-white-1);
  font-family: var(--font-title);
  font-size: 12px;
@@ -150,7 +150,7 @@ onUnmounted(() => {
  align-items: center;
  padding: 2px 5px;
  border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
  color: var(--tgc-white-4);
  font-family: var(--font-title);
  font-size: 12px;
--- a/src/components/viewPost/tp-vod.vue
+++ b/src/components/viewPost/tp-vod.vue
@@ -139,14 +139,14 @@ onUnmounted(() => {
  position: relative;
  max-width: 100%;
  margin: 10px auto;
-  aspect-ratio: v-bind(vodAspectRatio);
+  aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }

 .tp-vod-container {
  overflow: hidden;
  max-width: 100%;
  border-radius: 10px;
-  aspect-ratio: v-bind(vodAspectRatio);
+  aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }

 .tp-vod-share {
@@ -160,7 +160,7 @@ onUnmounted(() => {
  align-items: center;
  justify-content: center;
  border-radius: 10px;
-  aspect-ratio: v-bind(vodAspectRatio);
+  aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }

 .tp-vod-cover {
@@ -187,7 +187,7 @@ onUnmounted(() => {
  align-items: center;
  padding: 2px 5px;
  border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
  color: var(--tgc-white-4);
  font-family: var(--font-title);
  font-size: 12px;
@@ -202,7 +202,7 @@ onUnmounted(() => {
  align-items: center;
  padding: 2px 5px;
  border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
  color: var(--tgc-white-4);
  font-family: var(--font-title);
  font-size: 12px;
--- a/src/components/viewPost/vp-btn-reply.vue
+++ b/src/components/viewPost/vp-btn-reply.vue
@@ -207,8 +207,8 @@ async function handleDebug(): Promise<void> {
 .tpr-main-filter {
  position: relative;
  display: flex;
-  flex-direction: column;
  width: 100%;
+  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--app-page-content);
@@ -217,9 +217,9 @@ async function handleDebug(): Promise<void> {

 .tpr-title {
  position: relative;
+  display: flex;
  width: 100%;
  box-sizing: border-box;
-  display: flex;
  align-items: center;
  justify-content: space-between;

@@ -242,8 +242,8 @@ async function handleDebug(): Promise<void> {
 }

 .tpr-subtitle {
-  width: 100%;
  display: flex;
+  width: 100%;
  align-items: center;
  justify-content: space-between;
 }
@@ -259,8 +259,8 @@ async function handleDebug(): Promise<void> {
  align-items: center;
  justify-content: center;
  cursor: pointer;
-  font-size: 18px;
  font-family: var(--font-title);
+  font-size: 18px;
 }

 .tpr-reply-list {
--- a/src/components/viewPost/vp-overlay-follow.vue
+++ b/src/components/viewPost/vp-overlay-follow.vue
@@ -102,10 +102,10 @@ async function loadMore(refresh: boolean = false): Promise<void> {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 4px;
  color: var(--common-text-title);
  font-family: var(--font-title);
  font-size: 20px;
+  gap: 4px;

  img {
    width: 32px;
--- a/src/components/viewPost/vp-overlay-image.vue
+++ b/src/components/viewPost/vp-overlay-image.vue
@@ -136,7 +136,7 @@ async function onDownload(): Promise<void> {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
-    background: v-bind(bgColor);
+    background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
    object-fit: contain;
  }
 }
@@ -149,7 +149,7 @@ async function onDownload(): Promise<void> {
  cursor: zoom-out;

  img {
-    background: v-bind(bgColor);
+    background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
  }
 }

@@ -166,7 +166,7 @@ async function onDownload(): Promise<void> {
  border: 1px solid var(--tgc-od-white);
  border-radius: 4px;
  background-color: var(--common-shadow-2);
-  color: #ffffff;
+  color: #ffffffff;
 }

 .tpoi-info-item {
--- a/src/components/viewPost/vp-overlay-user.vue
+++ b/src/components/viewPost/vp-overlay-user.vue
@@ -138,29 +138,29 @@ async function loadPosts(): Promise<void> {
 .vp-ou-user {
  position: relative;
  display: flex;
+  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 4px;
-  max-width: 100%;
 }

 .vp-ouu-info {
  position: relative;
  display: flex;
+  max-width: 100%;
  align-items: center;
  justify-content: center;
-  max-width: 100%;

  .left {
    position: relative;
+    display: flex;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
-    padding: 5px;
-    display: flex;
    align-items: center;
    justify-content: center;
+    padding: 5px;

    .avatar {
      position: relative;
@@ -230,7 +230,7 @@ async function loadPosts(): Promise<void> {
        justify-content: center;
        padding: 0 2px;
        border-radius: 2px;
-        background: v-bind(levelColor);
+        background: v-bind(levelColor); /* stylelint-disable-line value-keyword-case */
        color: var(--tgc-white-1);
        font-size: 12px;
      }
@@ -271,9 +271,9 @@ async function loadPosts(): Promise<void> {
  display: flex;
  align-items: center;
  justify-content: center;
+  color: var(--box-text-4);
  column-gap: 8px;
  font-size: 12px;
-  color: var(--box-text-4);
  opacity: 0.6;
 }

--- a/src/components/viewPost/vp-reply-item.vue
+++ b/src/components/viewPost/vp-reply-item.vue
@@ -216,7 +216,7 @@ async function handleUser(): Promise<void> {
  await emit("userMention", uid);
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .tpr-reply-box {
  position: relative;
  display: flex;
@@ -308,7 +308,7 @@ async function handleUser(): Promise<void> {
  justify-content: center;
  padding: 0 2px;
  border-radius: 2px;
-  background: v-bind(levelColor);
+  background: v-bind(levelColor); /* stylelint-disable-line value-keyword-case */
  color: var(--tgc-white-1);
  font-size: 12px;
 }
@@ -416,8 +416,8 @@ async function handleUser(): Promise<void> {
  opacity: 0.3;

  :last-child {
-    color: #00c3ff;
-    text-decoration: underline solid #00c3ff;
+    color: #00c3ffff;
+    text-decoration: underline solid #00c3ffff;
    text-underline-position: under;
  }
 }
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -487,24 +487,25 @@ 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 {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 4px;
  border-radius: 4px;
  font-family: var(--font-title);
  font-size: 18px;
+  gap: 4px;

  img {
-    flex-shrink: 0;
    width: 28px;
    height: 28px;
+    flex-shrink: 0;
  }
 }

--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -205,11 +205,11 @@ async function deleteRecord(): Promise<void> {

 .ur-top-title {
  position: relative;
-  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
+  margin-left: 8px;
  gap: 8px;

  img {
@@ -243,17 +243,17 @@ async function deleteRecord(): Promise<void> {
 }

 .ur-box {
-  @include github-styles.github-card-shadow();
-
  position: relative;
  display: flex;
+  box-sizing: border-box;
  flex-direction: column;
  padding: 8px;
-  box-sizing: border-box;
  border: 1px solid var(--common-shadow-2);
  border-radius: 4px;
-  row-gap: 4px;
  background: var(--app-page-bg);
+  row-gap: 4px;
+
+  @include github-styles.github-card-shadow;
 }

 .dark .ur-box {
--- a/src/pages/User/Scripts.vue
+++ b/src/pages/User/Scripts.vue
@@ -200,10 +200,10 @@ async function tryExecAll(): Promise<void> {
 .select-main {
  position: relative;
  display: flex;
+  height: 24px;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
-  height: 24px;

  img {
    width: 24px;
@@ -228,13 +228,13 @@ async function tryExecAll(): Promise<void> {

 .select-item {
  position: relative;
-  width: 100%;
  display: flex;
+  width: 100%;
+  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
-  column-gap: 4px;
  padding: 8px;
-  box-sizing: border-box;
+  column-gap: 4px;

  img {
    width: 24px;
@@ -267,10 +267,10 @@ async function tryExecAll(): Promise<void> {
 .top-hint {
  position: relative;
  padding: 8px;
-  font-size: 20px;
  color: var(--tgc-pink-1);
-  font-family: var(--font-title);
  cursor: pointer;
+  font-family: var(--font-title);
+  font-size: 20px;
 }

 .us-page-container {
@@ -283,27 +283,27 @@ async function tryExecAll(): Promise<void> {

 .us-scripts {
  position: relative;
-  width: 100%;
  display: flex;
+  width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
+  padding-right: 8px;
  overflow-y: auto;
  row-gap: 8px;
-  max-height: 100%;
-  padding-right: 8px;
-  box-sizing: border-box;
 }

 .us-title {
  position: sticky;
-  width: 100%;
-  background: var(--app-page-bg);
-  top: 0;
  z-index: 2;
+  top: 0;
  display: flex;
+  width: 100%;
  align-items: center;
  justify-content: space-between;
+  background: var(--app-page-bg);

  span {
    color: var(--common-text-title);
--- a/src/pages/common/PageAchi.vue
+++ b/src/pages/common/PageAchi.vue
@@ -322,11 +322,11 @@ onUnmounted(async () => {

 .top-extension {
  position: relative;
-  padding: 8px;
-  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
+  padding: 8px;
+  margin-left: 8px;
  column-gap: 8px;
 }

@@ -344,15 +344,15 @@ onUnmounted(async () => {
  align-items: center;
  justify-content: center;
  cursor: pointer;
-  font-size: 18px;
  font-family: var(--font-title);
+  font-size: 18px;
 }

 .top-link {
-  margin-left: auto;
  margin-right: 16px;
-  cursor: pointer;
+  margin-left: auto;
  color: var(--tgc-od-white);
+  cursor: pointer;

  &:hover {
    color: var(--tgc-od-orange);
@@ -367,11 +367,11 @@ onUnmounted(async () => {

 .left-wrap {
  position: relative;
-  box-sizing: border-box;
  width: 332px;
  height: 100%;
-  padding-right: 8px;
+  box-sizing: border-box;
  flex-shrink: 0;
+  padding-right: 8px;
  overflow-y: auto;
 }

--- a/src/pages/common/PostNews.vue
+++ b/src/pages/common/PostNews.vue
@@ -232,6 +232,7 @@ async function searchPost(): Promise<void> {
 }

 /* load more */
+
 .load-news {
  display: flex;
  align-items: center;
--- a/src/views/t-anno-json.vue
+++ b/src/views/t-anno-json.vue
@@ -129,11 +129,11 @@ onMounted(async () => {
 }

 .taj-box {
-  border-radius: 4px;
  position: relative;
  width: 100%;
-  padding: 12px;
-  box-sizing: border-box;
  max-width: 100%;
+  box-sizing: border-box;
+  padding: 12px;
+  border-radius: 4px;
 }
 </style>
--- a/src/views/t-post-json.vue
+++ b/src/views/t-post-json.vue
@@ -117,12 +117,12 @@ onMounted(async () => {
 }

 .tpj-box {
-  border-radius: 4px;
  position: relative;
  width: 100%;
-  padding: 12px;
-  box-sizing: border-box;
  max-width: 100%;
+  box-sizing: border-box;
+  padding: 12px;
+  border-radius: 4px;
  background: var(--box-bg-1);
 }
 </style>
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -356,8 +356,6 @@ 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;
  margin: 0 auto;
@@ -365,6 +363,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }

 /* title */
+
 .tp-post-title {
  display: flex;
  width: fit-content;
@@ -390,6 +389,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }

 /* subtitle */
+
 .tp-post-subtitle {
  position: relative;
  display: flex;
@@ -411,6 +411,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }

 /* info */
+
 .tp-post-info {
  position: relative;
  display: flex;
@@ -440,6 +441,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }

 /* meta */
+
 .tp-post-meta {
  display: flex;
  align-items: center;
@@ -485,6 +487,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }

 /* extra */
+
 .tp-post-extra {
  position: relative;
  display: flex;
@@ -493,16 +496,15 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
-  column-gap: 4px;
-  row-gap: 8px;
+  gap: 8px 4px;
 }

 .tp-post-collection,
 .tp-post-topic,
 .tp-post-reason {
+  display: flex;
  height: 20px;
  box-sizing: border-box;
-  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
@@ -513,28 +515,34 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }

 /* 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);

+.tp-post-topic {
  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>