From fe2e5bfad93d0008aa8a1dae489084a7aa4eedd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A6=E5=90=9B?=
 <73606411+setube@users.noreply.github.com>
Date: Thu, 25 Dec 2025 21:29:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96ResourceIcon?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=8F=8A=E5=85=BC=E5=AE=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将ResourceIcon根元素由div改为span，调整样式为inline-block和shrink-0，提升布局灵活性。颜色由渐变改为纯色背景，增强在Android WebView等环境下的显示兼容性。尺寸样式增加min-width/min-height，确保图标不被压缩。
---
 src/components/common/ResourceIcon.vue | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/common/ResourceIcon.vue b/src/components/common/ResourceIcon.vue
index 48bc4a5..5f24301 100644
--- a/src/components/common/ResourceIcon.vue
+++ b/src/components/common/ResourceIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[colors[type], sizes[size], 'rounded shadow-sm']" />
+  <span :class="[colors[type], sizes[size], 'inline-block rounded shrink-0']" />
 </template>
 
 <script setup lang="ts">
@@ -8,21 +8,22 @@
     size?: 'sm' | 'md' | 'lg'
   }
 
-  const props = withDefaults(defineProps<Props>(), {
+  withDefaults(defineProps<Props>(), {
     size: 'md'
   })
 
+  // 使用纯色背景，在 Android WebView 中更可靠
   const colors = {
-    metal: 'bg-gradient-to-br from-slate-400 to-slate-600',
-    crystal: 'bg-gradient-to-br from-cyan-400 to-blue-600',
-    deuterium: 'bg-gradient-to-br from-green-400 to-emerald-600',
-    darkMatter: 'bg-gradient-to-br from-purple-600 to-indigo-900',
-    energy: 'bg-gradient-to-br from-yellow-400 to-orange-500'
+    metal: 'bg-slate-500',
+    crystal: 'bg-cyan-500',
+    deuterium: 'bg-green-500',
+    darkMatter: 'bg-purple-700',
+    energy: 'bg-yellow-500'
   }
 
   const sizes = {
-    sm: 'w-3 h-3',
-    md: 'w-4 h-4',
-    lg: 'w-5 h-5'
+    sm: 'w-3 h-3 min-w-3 min-h-3',
+    md: 'w-4 h-4 min-w-4 min-h-4',
+    lg: 'w-5 h-5 min-w-5 min-h-5'
   }
 </script>