feat: add icon field to equipment and pill, update bag API

Build_God_Admin_Frontend/Frontend/src/api/equipment.ts

@@ -12,6 +12,7 @@ export interface EquipmentTemplate {
   attributePool: string;
   randomAttrCount: number;
   maxEnhanceLevel: number;
+  icon: string | null;
 }
 
 export interface EquipmentAttribute {

Build_God_Admin_Frontend/Frontend/src/api/pill.ts

@@ -10,6 +10,7 @@ export interface Pill {
   requirdLevelId?: number;
   effectValue?: number;
   duration?: number;
+  icon?: string | null;
 }
 
 //获取所有

Build_God_Admin_Frontend/Frontend/src/views/admin/EquipmentsView.vue

@@ -40,7 +40,8 @@ const formData = ref<Partial<EquipmentTemplate>>({
   money: 0,
   attributePool: '[]',
   randomAttrCount: 4,
-  maxEnhanceLevel: 10
+  maxEnhanceLevel: 10,
+  icon: null
 })
 
 const attributePoolList = ref<EquipmentAttributePool[]>([])
@@ -114,7 +115,8 @@ const openDialog = (eq?: EquipmentTemplate) => {
       money: undefined,
       attributePool: '[]',
       randomAttrCount: 4,
-      maxEnhanceLevel: 10
+      maxEnhanceLevel: 10,
+      icon: null
     }
     attributePoolList.value = []
   }
@@ -169,6 +171,7 @@ const saveEquipment = async () => {
       attributePool: formData.value.attributePool || '[]',
       randomAttrCount: formData.value.randomAttrCount || 4,
       maxEnhanceLevel: formData.value.maxEnhanceLevel || 10,
+      icon: formData.value.icon || null,
     }
 
     var result = await AddEquipmentTemplate(newOne)
@@ -359,6 +362,9 @@ const fetchAttributeTypes = async () => {
         <el-form-item label="价格">
           <el-input v-model="formData.money" placeholder="价格" clearable />
         </el-form-item>
+        <el-form-item label="图标文件名">
+          <el-input v-model="formData.icon" placeholder="如: sword.png" clearable />
+        </el-form-item>
         <el-form-item label="随机属性数量">
           <el-input-number v-model="formData.randomAttrCount" :min="1" :max="10" />
         </el-form-item>

Build_God_Admin_Frontend/Frontend/src/views/admin/PillsView.vue

@@ -28,6 +28,7 @@ const formData = ref<Pill>({
   requirdLevelId: undefined,
   effectValue: undefined,
   duration: undefined,
+  icon: undefined,
 })
 
 const filteredPills = computed(() => {
@@ -81,6 +82,7 @@ const openDialog = (pill?: Pill) => {
       requirdLevelId: undefined,
       effectValue: undefined,
       duration: undefined,
+      icon: undefined,
     }
   }
   showDialog.value = true
@@ -118,6 +120,7 @@ const savePill = async () => {
       requirdLevelId: formData.value.requirdLevelId,
       effectValue: formData.value.effectValue,
       duration: formData.value.duration,
+      icon: formData.value.icon,
     }
     var result = await AddPill(newOne)
     if (result) {
@@ -267,6 +270,9 @@ const fetchLevels = async () => {
         <el-form-item label="描述" style="width: 100%;">
           <el-input v-model="formData.description" type="textarea" clearable></el-input>
         </el-form-item>
+        <el-form-item label="图标文件名">
+          <el-input v-model="formData.icon" placeholder="如: pill_health.png" clearable></el-input>
+        </el-form-item>
         <div class="dialog-footer">
           <el-button type="info" @click="closeDialog">取消</el-button>
           <el-button type="primary" @click="savePill">保存</el-button>

Build_God_Api/Build_God_Api/DB/Equipment.cs

@@ -57,6 +57,12 @@ namespace Build_God_Api.DB
         /// 最大强化等级
         /// </summary>
         public int MaxEnhanceLevel { get; set; }
+
+        /// <summary>
+        /// 图标文件名
+        /// </summary>
+        [SugarColumn(IsNullable = true)]
+        public string? Icon { get; set; }
     }
 
     /// <summary>

Build_God_Api/Build_God_Api/DB/Pill.cs

@@ -46,6 +46,11 @@ namespace Build_God_Api.DB
         /// 持续时间(秒)  如果是 0 就表示是永久
         /// </summary>
         public decimal Duration { get; set; }
+
+        /// <summary>
+        /// 图标文件名
+        /// </summary>
+        public string? Icon { get; set; }
     }
 
     public enum PillType

Build_God_Api/Build_God_Api/Services/BagService.cs

@@ -35,6 +35,7 @@ namespace Build_God_Api.Services
         public int Quantity { get; set; }
         public string? ItemName { get; set; }
         public int? ItemRarity { get; set; }
+        public string? Icon { get; set; }
     }
 
     public class CharacterBagDto
@@ -187,12 +188,14 @@ namespace Build_God_Api.Services
                         .FirstAsync(x => x.Id == item.ItemId);
                     dto.ItemName = equipment?.Name;
                     dto.ItemRarity = equipment != null ? (int)equipment.Rarity : null;
+                    dto.Icon = equipment?.Icon;
                 }
                 else if (item.ItemType == BagItemType.Pill)
                 {
                     var pill = await db.Queryable<Pill>()
                         .FirstAsync(x => x.Id == item.ItemId);
                     dto.ItemName = pill?.Name;
+                    dto.Icon = pill?.Icon;
                 }
 
                 result.Add(dto);

Build_God_Game/src/api/bag.ts

@@ -24,6 +24,7 @@ export interface BagItem {
   quantity: number
   itemName: string | null
   itemRarity: number | null
+  icon: string | null
 }
 
 export const getCharacterBag = (characterId: number): Promise<CharacterBag | null> => {

Build_God_Game/src/assets/images/item-default.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+  <circle cx="8.5" cy="8.5" r="1.5"/>
+  <polyline points="21,15 16,10 5,21"/>
+</svg>

Build_God_Game/src/views/BagView.vue

@@ -7,6 +7,7 @@ import StarBorder from '@/components/StarBorder/StarBorder.vue'
 import Particles from '@/components/Particles/Particles.vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
 import bagIcon from '@/assets/images/bag.svg'
+import itemDefaultIcon from '@/assets/images/item-default.svg'
 
 const router = useRouter()
 const bagStore = useBagStore()
@@ -34,6 +35,13 @@ const getItemTooltip = (item: { itemType: number; itemId: number; quantity: numb
   return `${item.itemName}\n类型: ${type}${rarity ? ` | 稀有度: ${rarity}` : ''}\n数量: ${item.quantity}`
 }
 
+const getItemIcon = (item: { icon: string | null }) => {
+  if (item.icon) {
+    return new URL(`../assets/icons/${item.icon}`, import.meta.url).href
+  }
+  return itemDefaultIcon
+}
+
 const handleBack = () => {
   router.push('/game')
 }
@@ -84,7 +92,8 @@ onMounted(() => {
           :show-after="300"
         >
           <div class="item-cell">
-            <div class="item-icon" :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" :class="'rarity-' + (item.itemRarity || 1)">
               {{ item.itemType === 1 ? '⚔️' : '💊' }}
             </div>
             <span class="item-name">{{ item.itemName }}</span>
@@ -231,6 +240,13 @@ onMounted(() => {
   margin-bottom: 8px;
 }
 
+.item-icon-img {
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: contain;
+  margin-bottom: 8px;
+}
+
 .item-name {
   color: #cccccc;
   font-size: 0.75rem;