From f47f078357ffbb1fd156a5c5fe9cb086929d5348 Mon Sep 17 00:00:00 2001
From: Agent <agent@openclaw.ai>
Date: Sat, 28 Mar 2026 14:01:05 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E6=A0=87=E6=94=B9=E7=94=A8?=
 =?UTF-8?q?=E7=AE=80=E6=B4=81=E7=BA=BF=E6=9D=A1=E9=A3=8E=E6=A0=BC=E7=AC=A6?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon.vue | 86 +++++++++++++++++++++++++----------------
 1 file changed, 53 insertions(+), 33 deletions(-)

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index e92aa0e..eb45770 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -1,39 +1,51 @@
 <template>
-  <view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx' }">
-    <text :style="{ fontSize: (size * 0.55) + 'rpx', color: color }">{{ iconChar }}</text>
+  <view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx', backgroundColor: bgColor, borderRadius: radius }">
+    <text :style="{ fontSize: fontSize, color: textColor }">{{ iconChar }}</text>
   </view>
 </template>
 
 <script>
+// 简洁线条图标（用 Unicode 符号）
 const icons = {
-  home: '首',
-  user: '用户',
-  chart: '图',
-  product: '商',
-  add: '添',
-  search: '搜',
-  order: '单',
-  edit: '编',
-  check: '确',
-  close: '关',
-  stock: '库',
-  alert: '警',
-  in: '入',
-  out: '出',
-  customer: '客',
-  money: '钱',
-  logout: '退',
-  right: '右',
-  left: '左',
-  down: '下',
-  lock: '锁',
-  calendar: '历',
-  setting: '设',
-  wechat: '微',
-  cash: '现',
-  alipay: '支',
-  plus: '加',
-  flow: '流'
+  home: '⌂',
+  user: '⊙',
+  chart: '◐',
+  product: '▦',
+  add: '+',
+  search: '◎',
+  order: '☰',
+  edit: '✎',
+  check: '✓',
+  close: '✕',
+  stock: '⌖',
+  alert: '⚡',
+  in: '↓',
+  out: '↑',
+  customer: '☺',
+  money: '¤',
+  logout: '↺',
+  right: '›',
+  left: '‹',
+  down: '⌄',
+  lock: '⌘',
+  calendar: '▦',
+  setting: '⚙',
+  wechat: '✉',
+  cash: '💵',
+  alipay: '💴',
+  plus: '+',
+  flow: '↔'
+}
+
+const colors = {
+  blue: '#1890ff',
+  green: '#52c41a',
+  red: '#ff4d4f',
+  orange: '#fa8c16',
+  purple: '#722ed1',
+  cyan: '#13c2c2',
+  pink: '#eb2f96',
+  gray: '#8c8c8c'
 }
 
 export default {
@@ -41,11 +53,20 @@ export default {
   props: {
     name: { type: String, required: true },
     size: { type: [Number, String], default: 48 },
-    color: { type: String, default: '' }
+    color: { type: String, default: '' },
+    bgColor: { type: String, default: 'transparent' },
+    radius: { type: String, default: '0' },
+    theme: { type: String, default: '' } // blue, green, red, orange, purple, cyan, pink
   },
   computed: {
     iconChar() {
-      return icons[this.name] || '?'
+      return icons[this.name] || '•'
+    },
+    textColor() {
+      return this.color || (this.theme ? colors[this.theme] : '#666')
+    },
+    fontSize() {
+      return (this.size * 0.5) + 'rpx'
     }
   }
 }
@@ -56,6 +77,5 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 500;
 }
 </style>
\ No newline at end of file