diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index ee03f373..728e8fed 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -25,6 +25,8 @@ rules:
     - true
     - severity: warning
   order/order:
+    - name: use
+      type: at-rule
     - name: include
       type: at-rule
     - custom-properties
diff --git a/src/components/pageBag/pb-materialItem.vue b/src/components/pageBag/pb-materialItem.vue
index 7cc3b91b..964817da 100644
--- a/src/components/pageBag/pb-materialItem.vue
+++ b/src/components/pageBag/pb-materialItem.vue
@@ -1,6 +1,11 @@
 <!-- 背包材料物品项 -->
 <template>
-  <div :title="props.info.name" class="pwm-box" @click="toMaterial()">
+  <div
+    :class="{ empty: item.count === 0 }"
+    :title="props.info.name"
+    class="pwm-box"
+    @click="toMaterial()"
+  >
     <div class="pwm-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" />
@@ -46,11 +51,16 @@ watch(
   },
 );
 
-const idColor = computed<string>(() => getOdStarColor(props.info.star));
+const idColor = computed<string>(() => {
+  if (item.value.count > 0) return getOdStarColor(props.info.star);
+  return "var(--tgc-od-red)";
+});
 </script>
 <style lang="scss" scoped>
 @use "@styles/github.styles.scss" as github-styles;
 
+$pwm-base: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
+
 .pwm-box {
   position: relative;
   display: flex;
@@ -59,11 +69,15 @@ const idColor = computed<string>(() => getOdStarColor(props.info.star));
   align-items: center;
   justify-content: flex-start;
   padding-right: 8px;
-  border: 1px solid var(--common-shadow-1);
+  border: 1px solid $pwm-base;
   border-radius: 4px;
   background: var(--box-bg-1);
   column-gap: 4px;
   cursor: pointer;
+
+  &.empty {
+    opacity: 0.4;
+  }
 }
 
 .pwm-left {
@@ -97,14 +111,14 @@ const idColor = computed<string>(() => getOdStarColor(props.info.star));
   z-index: 1;
   right: 2px;
   bottom: 0;
-  color: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
+  color: $pwm-base;
   font-size: 8px;
   font-style: italic;
   opacity: 0.8;
 }
 
 .pb-mi-cnt {
-  @include github-styles.github-tag-dark-gen(#009688);
+  @include github-styles.github-tag-dark-gen($pwm-base);
 
   position: absolute;
   top: 0;
diff --git a/src/pages/common/PageBagMaterial.vue b/src/pages/common/PageBagMaterial.vue
index f1a2ce7d..d4862563 100644
--- a/src/pages/common/PageBagMaterial.vue
+++ b/src/pages/common/PageBagMaterial.vue
@@ -201,7 +201,9 @@ async function loadMaterialList(uid: number): Promise<void> {
       tList.push({ type: info.type, number: material.count });
     }
   }
-  materialList.value = mList;
+  materialList.value = mList.sort(
+    (a, b) => a.info.type.localeCompare(b.info.type) || b.info.id - a.info.id,
+  );
   materialShow.value = mList;
   materialTypes.value = tList;
   curIdx.value = 0;