refactor equip

web/src/components/game/panels/info/components/EntityRow.vue

@@ -4,7 +4,7 @@ import type { EffectEntity } from '@/types/core';
 
 defineProps<{
   item: EffectEntity;
-  meta?: string; // e.g. "Rank 3" or "Count: 5"
+  meta?: string; // e.g. "熟练度 50%"
   compact?: boolean;
 }>();
 
@@ -20,8 +20,9 @@ defineEmits(['click']);
     <span class="name" :style="{ color: getEntityColor(item) }">
       {{ item.name }}
     </span>
-    <span v-if="meta || item.grade" class="meta">
-      {{ meta || item.grade }}
+    <span class="info">
+      <span v-if="meta" class="meta">{{ meta }}</span>
+      <span v-if="item.grade" class="grade">{{ item.grade }}</span>
     </span>
   </div>
 </template>
@@ -48,9 +49,23 @@ defineEmits(['click']);
   font-size: 12px;
 }
 
+.info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.grade {
+  font-size: 11px;
+  padding: 1px 5px;
+  background: rgba(255, 215, 0, 0.15);
+  border: 1px solid rgba(255, 215, 0, 0.3);
+  border-radius: 3px;
+  color: #daa520;
+}
+
 .meta {
   font-size: 11px;
   color: #888;
 }
 </style>
-

web/src/components/game/panels/info/components/SecondaryPopup.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
 import type { EffectEntity } from '@/types/core';
 import { getEntityColor } from '@/utils/theme';
 
-const props = defineProps<{
+defineProps<{
   item: EffectEntity | null;
 }>();
 
-const emit = defineEmits(['close']);
-
-// 简单的状态，用于决定是否显示
-// 实际显示逻辑由父组件通过 props.item 控制
+defineEmits(['close']);
 </script>
 
 <template>
@@ -25,7 +21,8 @@ const emit = defineEmits(['close']);
       
       <div class="sec-body">
         <div class="sec-row" v-if="item.grade || item.rarity">
-          <span class="badge">{{ item.grade || item.rarity }}</span>
+          <span class="badge grade-badge">{{ item.grade || item.rarity }}</span>
+          <span v-if="item.type" class="badge type-badge">{{ item.type }}</span>
         </div>
         
         <div class="sec-desc" v-if="item.desc">{{ item.desc }}</div>
@@ -128,6 +125,24 @@ const emit = defineEmits(['close']);
   color: #fff;
 }
 
+.sec-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.grade-badge {
+  background: rgba(255, 215, 0, 0.2);
+  border: 1px solid rgba(255, 215, 0, 0.4);
+  color: #daa520;
+}
+
+.type-badge {
+  background: rgba(100, 149, 237, 0.2);
+  border: 1px solid rgba(100, 149, 237, 0.4);
+  color: #87ceeb;
+}
+
 .sec-desc {
   line-height: 1.5;
   color: #bbb;