From e3eb56d618a5e5f55971228ace1c8b0d514ab440 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Fri, 19 Dec 2025 21:14:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pageBag/pb-materialItem.vue   | 36 +++++++++++---------
 src/components/pageWiki/pw-material-item.vue |  8 +++--
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/pageBag/pb-materialItem.vue b/src/components/pageBag/pb-materialItem.vue
index 964817da..80d74207 100644
--- a/src/components/pageBag/pb-materialItem.vue
+++ b/src/components/pageBag/pb-materialItem.vue
@@ -3,15 +3,15 @@
   <div
     :class="{ empty: item.count === 0 }"
     :title="props.info.name"
-    class="pwm-box"
+    class="pb-mi-box"
     @click="toMaterial()"
   >
-    <div class="pwm-left">
+    <div class="pb-mi-left">
       <img :src="`/icon/bg/${props.info.star}-Star.webp`" alt="bg" class="bg" />
       <img :src="`/icon/material/${props.info.id}.webp`" alt="icon" class="icon" />
     </div>
-    <div class="pwm-right">{{ props.info.name }}</div>
-    <div class="pwm-extra">{{ props.info.type }}·{{ props.info.id }}</div>
+    <div class="pb-mi-right">{{ props.info.name }}</div>
+    <div class="pb-mi-extra">{{ props.info.type }}·{{ props.info.id }}</div>
     <div class="pb-mi-cnt">{{ item.count }}</div>
   </div>
 </template>
@@ -51,17 +51,14 @@ watch(
   },
 );
 
-const idColor = computed<string>(() => {
-  if (item.value.count > 0) return getOdStarColor(props.info.star);
-  return "var(--tgc-od-red)";
-});
+const idColor = computed<string>(() => getOdStarColor(props.info.star));
 </script>
 <style lang="scss" scoped>
 @use "@styles/github.styles.scss" as github-styles;
 
-$pwm-base: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
+$pb-mi-base: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
 
-.pwm-box {
+.pb-mi-box {
   position: relative;
   display: flex;
   overflow: hidden;
@@ -69,18 +66,22 @@ $pwm-base: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
   align-items: center;
   justify-content: flex-start;
   padding-right: 8px;
-  border: 1px solid $pwm-base;
+  border: 1px solid color-mix(in srgb, $pb-mi-base 20%, transparent);
   border-radius: 4px;
-  background: var(--box-bg-1);
+  background: color-mix(in srgb, $pb-mi-base 15%, transparent);
   column-gap: 4px;
   cursor: pointer;
 
   &.empty {
     opacity: 0.4;
+
+    .pb-mi-cnt {
+      color: var(--tgc-od-red);
+    }
   }
 }
 
-.pwm-left {
+.pb-mi-left {
   position: relative;
   height: 100%;
   flex-shrink: 0;
@@ -92,10 +93,11 @@ $pwm-base: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
     top: 0;
     width: 100%;
     height: 100%;
+    vertical-align: center;
   }
 }
 
-.pwm-right {
+.pb-mi-right {
   position: relative;
   overflow: hidden;
   max-width: 100%;
@@ -106,19 +108,19 @@ $pwm-base: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
   word-break: break-all;
 }
 
-.pwm-extra {
+.pb-mi-extra {
   position: absolute;
   z-index: 1;
   right: 2px;
   bottom: 0;
-  color: $pwm-base;
+  color: $pb-mi-base;
   font-size: 8px;
   font-style: italic;
   opacity: 0.8;
 }
 
 .pb-mi-cnt {
-  @include github-styles.github-tag-dark-gen($pwm-base);
+  @include github-styles.github-tag-dark-gen($pb-mi-base);
 
   position: absolute;
   top: 0;
diff --git a/src/components/pageWiki/pw-material-item.vue b/src/components/pageWiki/pw-material-item.vue
index f4aee13a..4a832e45 100644
--- a/src/components/pageWiki/pw-material-item.vue
+++ b/src/components/pageWiki/pw-material-item.vue
@@ -21,6 +21,8 @@ const idColor = computed<string>(() => getOdStarColor(props.material.star));
 <style lang="scss" scoped>
 @use "@styles/github.styles.scss" as github-styles;
 
+$pw-mi-base: v-bind(idcolor); /* stylelint-disable-line value-keyword-case */
+
 .pw-mi-box {
   position: relative;
   display: flex;
@@ -29,9 +31,9 @@ const idColor = computed<string>(() => getOdStarColor(props.material.star));
   align-items: center;
   justify-content: flex-start;
   padding-right: 8px;
-  border: 1px solid var(--common-shadow-1);
+  border: 1px solid color-mix(in srgb, $pw-mi-base 20%, transparent);
   border-radius: 4px;
-  background: var(--box-bg-1);
+  background: color-mix(in srgb, $pw-mi-base 15%, transparent);
   column-gap: 4px;
 }
 
@@ -66,7 +68,7 @@ const idColor = computed<string>(() => getOdStarColor(props.material.star));
   z-index: 1;
   right: 2px;
   bottom: 0;
-  color: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
+  color: $pw-mi-base;
   font-size: 8px;
   font-style: italic;
   opacity: 0.8;