在背包里面能正确显示物品的图片

Build_God_Api/Build_God_Api/Dto/ScrapDto.cs

@@ -16,6 +16,7 @@ namespace Build_God_Api.Dto
         public int HpBonus { get; set; }
         public int MagicBonus { get; set; }
         public bool IsActive { get; set; } = true;
+        public string? Icon { get; set; }
     }
 
     public class ScrapScanResultDto

Build_God_Api/Build_God_Api/Services/ScrapService.cs

@@ -213,7 +213,8 @@ namespace Build_God_Api.Services
                 DefenseBonus = dto.DefenseBonus,
                 HpBonus = dto.HpBonus,
                 MagicBonus = dto.MagicBonus,
-                IsActive = dto.IsActive
+                IsActive = dto.IsActive,
+                Icon = dto.Icon
             };
 
             await db.Insertable(scrap).ExecuteCommandAsync();
@@ -237,6 +238,7 @@ namespace Build_God_Api.Services
             scrap.HpBonus = dto.HpBonus;
             scrap.MagicBonus = dto.MagicBonus;
             scrap.IsActive = dto.IsActive;
+            scrap.Icon = dto.Icon;
 
             await db.Updateable(scrap).ExecuteCommandAsync();
             return true;

Build_God_Game/src/assets/icons/scrap/铅笔.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775978219061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6446" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M205.241 595.797L683.948 117.09l207.463 207.463L412.704 803.26z" fill="#ED9520" p-id="6447"></path><path d="M356.254 746.826L834.961 268.12l56.426 56.427-478.706 478.707z" fill="#D1791A" p-id="6448"></path><path d="M408.7 807.2L133.4 875l67.8-275.2 95.8 31.9 15.9 63.8 63.8 16z" fill="#F4ECD9" p-id="6449"></path><path d="M379.7 720.3L133.5 875l275.2-67.8z" fill="#EADABB" p-id="6450"></path><path d="M163.7 752l-30.3 123 123-30.3z" fill="#565F66" p-id="6451"></path><path d="M495.7 394.3c-2.9 0-5.8-1.1-8-3.3-4.4-4.4-4.4-11.6 0-16l159.6-159.6c4.4-4.4 11.5-4.4 16 0 4.4 4.4 4.4 11.6 0 16L503.7 391c-2.3 2.2-5.1 3.3-8 3.3z" fill="#FFFFFF" p-id="6452"></path><path d="M691.8 186.8m-11.3 0a11.3 11.3 0 1 0 22.6 0 11.3 11.3 0 1 0-22.6 0Z" fill="#FFFFFF" p-id="6453"></path><path d="M903.3 312.5c-6.6-6.6-17.3-6.6-23.9 0L416.1 775.9l-21.9-65.8 79.3-79.3c6.6-6.6 6.6-17.3 0-23.9-6.6-6.6-17.3-6.6-23.9 0l-80.8 80.8c-1.1 1.1-2 2.4-2.8 3.8l-39.2-9.8-9.8-39.1c1.4-0.8 2.7-1.6 3.8-2.8L600 360.6c6.6-6.6 6.6-17.3 0-23.9-6.6-6.6-17.3-6.6-23.9 0L298.4 614.3l-65.8-21.9L695.9 129c6.6-6.6 6.6-17.3 0-23.9-6.6-6.6-17.3-6.6-23.9 0L193.2 583.8c-0.7 0.7-1.3 1.5-1.9 2.3-3.2 2.3-5.6 5.7-6.6 9.6L117 871c-0.4 1.4-0.5 2.9-0.5 4.3 0.1 4.3 1.8 8.5 5 11.7 2.4 2.4 5.4 4 8.7 4.6 1.1 0.2 2.2 0.3 3.3 0.3 1.3 0 2.7-0.2 4-0.5l123-30.3 152.2-37.5c3.9-1 7.3-3.3 9.6-6.6 0.8-0.6 1.6-1.2 2.3-1.9l478.7-478.7c6.6-6.5 6.6-17.2 0-23.9zM156.5 851.9l16.4-66.7 50.3 50.3-66.7 16.4zM261.6 826l-79.2-79.2 30.8-125.2 69.5 23.2 13.7 54.8c1.5 6.1 6.2 10.8 12.3 12.3l54.8 13.7 23.2 69.5L261.6 826z" fill="#2D3742" p-id="6454"></path><path d="M534.7 545.6c3.3 3.3 7.6 5 12 5s8.7-1.7 12-5l233-233c6.6-6.6 6.6-17.3 0-23.9-6.6-6.6-17.3-6.6-23.9 0l-233 233c-6.7 6.6-6.7 17.3-0.1 23.9z" fill="#2D3742" p-id="6455"></path></svg>

Build_God_Game/src/views/BagView.vue

@@ -46,7 +46,8 @@ const scrapLevelColorMap: Record<number, string> = {
 
 const getItemIcon = (item: { icon: string | null }) => {
   if (item.icon) {
-    return new URL(`../assets/icons/${item.icon}`, import.meta.url).href
+    const [dir, file] = item.icon.split('/')
+    return new URL(`../assets/icons/${dir}/${file}`, import.meta.url).href
   }
   return itemDefaultIcon
 }
@@ -82,11 +83,13 @@ onMounted(() => {
 <template>
   <div class="bag-page">
     <Particles :particle-count="30" :particle-colors="['#ffffff', '#cccccc']" class="particles-bg" />
-    
+
     <div class="bag-container">
       <StarBorder as="div" color="#8b5cf6" speed="5s" :thickness="2" class="back-btn" @click="handleBack">
         <div class="back-content">
-          <el-icon><ArrowLeft /></el-icon>
+          <el-icon>
+            <ArrowLeft />
+          </el-icon>
           <span>返回</span>
         </div>
       </StarBorder>
@@ -116,18 +119,15 @@ onMounted(() => {
         <div class="section" v-if="bagStore.paginatedEquipment.length > 0 || bagStore.totalEquipmentPages > 0">
           <div class="section-header">
             <span class="section-title">装备</span>
-            <span class="section-count">({{ bagStore.paginatedEquipment.length }} / {{ bagStore.equipmentItems.length }})</span>
+            <span class="section-count">({{ bagStore.paginatedEquipment.length }} / {{ bagStore.equipmentItems.length
+            }})</span>
           </div>
           <div class="items-grid">
-            <el-tooltip
+            <el-tooltip v-for="item in bagStore.paginatedEquipment" :key="item.id" :content="getEquipmentTooltip(item)"
-              v-for="item in bagStore.paginatedEquipment"
+              placement="top" :show-after="300">
-              :key="item.id"
-              :content="getEquipmentTooltip(item)"
-              placement="top"
-              :show-after="300"
-            >
               <div class="item-cell">
-                <img v-if="item.icon" :src="getItemIcon(item)" class="item-icon-img" :class="'rarity-' + (item.itemRarity || 1)" />
+                <img v-if="item.icon" :src="getItemIcon(item)" class="item-icon-img"
+                  :class="'rarity-' + (item.itemRarity || 1)" />
                 <div v-else class="item-icon">⚔️</div>
                 <span class="item-name">{{ item.itemName }}</span>
                 <span v-if="item.quantity > 1" class="item-count">{{ item.quantity }}</span>
@@ -135,19 +135,12 @@ onMounted(() => {
             </el-tooltip>
           </div>
           <div v-if="bagStore.totalEquipmentPages > 1" class="pagination">
-            <button 
+            <button class="page-btn" :disabled="bagStore.equipmentPage === 1" @click="bagStore.prevEquipmentPage()">
-              class="page-btn" 
-              :disabled="bagStore.equipmentPage === 1"
-              @click="bagStore.prevEquipmentPage()"
-            >
               上一页
             </button>
             <span class="page-info">{{ bagStore.equipmentPage }} / {{ bagStore.totalEquipmentPages }}</span>
-            <button 
+            <button class="page-btn" :disabled="bagStore.equipmentPage >= bagStore.totalEquipmentPages"
-              class="page-btn" 
+              @click="bagStore.nextEquipmentPage()">
-              :disabled="bagStore.equipmentPage >= bagStore.totalEquipmentPages"
-              @click="bagStore.nextEquipmentPage()"
-            >
               下一页
             </button>
           </div>
@@ -160,13 +153,8 @@ onMounted(() => {
             <span class="section-count">({{ bagStore.paginatedPills.length }} / {{ bagStore.pillItems.length }})</span>
           </div>
           <div class="items-grid">
-            <el-tooltip
+            <el-tooltip v-for="item in bagStore.paginatedPills" :key="item.id" :content="getPillTooltip(item)"
-              v-for="item in bagStore.paginatedPills"
+              placement="top" :show-after="300">
-              :key="item.id"
-              :content="getPillTooltip(item)"
-              placement="top"
-              :show-after="300"
-            >
               <div class="item-cell">
                 <img v-if="item.icon" :src="getItemIcon(item)" class="item-icon-img" />
                 <div v-else class="item-icon">💊</div>
@@ -176,19 +164,12 @@ onMounted(() => {
             </el-tooltip>
           </div>
           <div v-if="bagStore.totalPillPages > 1" class="pagination">
-            <button 
+            <button class="page-btn" :disabled="bagStore.pillPage === 1" @click="bagStore.prevPillPage()">
-              class="page-btn" 
-              :disabled="bagStore.pillPage === 1"
-              @click="bagStore.prevPillPage()"
-            >
               上一页
             </button>
             <span class="page-info">{{ bagStore.pillPage }} / {{ bagStore.totalPillPages }}</span>
-            <button 
+            <button class="page-btn" :disabled="bagStore.pillPage >= bagStore.totalPillPages"
-              class="page-btn" 
+              @click="bagStore.nextPillPage()">
-              :disabled="bagStore.pillPage >= bagStore.totalPillPages"
-              @click="bagStore.nextPillPage()"
-            >
               下一页
             </button>
           </div>
@@ -198,18 +179,15 @@ onMounted(() => {
         <div class="section" v-if="bagStore.paginatedScraps.length > 0 || bagStore.totalScrapPages > 0">
           <div class="section-header">
             <span class="section-title">垃圾</span>
-            <span class="section-count">({{ bagStore.paginatedScraps.length }} / {{ bagStore.scrapItems.length }})</span>
+            <span class="section-count">({{ bagStore.paginatedScraps.length }} / {{ bagStore.scrapItems.length
+            }})</span>
           </div>
           <div class="items-grid">
-            <el-tooltip
+            <el-tooltip v-for="item in bagStore.paginatedScraps" :key="item.id" :content="getScrapTooltip(item)"
-              v-for="item in bagStore.paginatedScraps"
+              placement="top" :show-after="300">
-              :key="item.id"
-              :content="getScrapTooltip(item)"
-              placement="top"
-              :show-after="300"
-            >
               <div class="item-cell scrap-cell">
-                <img v-if="item.icon" :src="getItemIcon(item)" class="item-icon-img" :style="{ borderColor: scrapLevelColorMap[item.scrapLevel || 1] }" />
+                <img v-if="item.icon" :src="getItemIcon(item)" class="item-icon-img"
+                  :style="{ borderColor: scrapLevelColorMap[item.scrapLevel || 1] }" />
                 <div v-else class="item-icon" :style="{ color: scrapLevelColorMap[item.scrapLevel || 1] }">📦</div>
                 <span class="item-name">{{ item.itemName }}</span>
                 <span v-if="item.quantity > 1" class="item-count">{{ item.quantity }}</span>
@@ -217,19 +195,12 @@ onMounted(() => {
             </el-tooltip>
           </div>
           <div v-if="bagStore.totalScrapPages > 1" class="pagination">
-            <button 
+            <button class="page-btn" :disabled="bagStore.scrapPage === 1" @click="bagStore.prevScrapPage()">
-              class="page-btn" 
-              :disabled="bagStore.scrapPage === 1"
-              @click="bagStore.prevScrapPage()"
-            >
               上一页
             </button>
             <span class="page-info">{{ bagStore.scrapPage }} / {{ bagStore.totalScrapPages }}</span>
-            <button 
+            <button class="page-btn" :disabled="bagStore.scrapPage >= bagStore.totalScrapPages"
-              class="page-btn" 
+              @click="bagStore.nextScrapPage()">
-              :disabled="bagStore.scrapPage >= bagStore.totalScrapPages"
-              @click="bagStore.nextScrapPage()"
-            >
               下一页
             </button>
           </div>
@@ -315,7 +286,9 @@ onMounted(() => {
   font-size: 0.9rem;
 }
 
-.loading, .error, .empty {
+.loading,
+.error,
+.empty {
   text-align: center;
   padding: 40px;
   color: #888888;
@@ -425,10 +398,21 @@ onMounted(() => {
   text-align: center;
 }
 
-.rarity-1 { filter: grayscale(0.3); }
+.rarity-1 {
-.rarity-2 { filter: hue-rotate(80deg) saturate(1.5); }
+  filter: grayscale(0.3);
-.rarity-3 { filter: hue-rotate(200deg) saturate(2); }
+}
-.rarity-4 { filter: hue-rotate(-30deg) saturate(2) brightness(1.2); }
+
+.rarity-2 {
+  filter: hue-rotate(80deg) saturate(1.5);
+}
+
+.rarity-3 {
+  filter: hue-rotate(200deg) saturate(2);
+}
+
+.rarity-4 {
+  filter: hue-rotate(-30deg) saturate(2) brightness(1.2);
+}
 
 .pagination {
   display: flex;