From bad134aa3fc2a0515d78dbba6076c27189c22809 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Thu, 24 Sep 2026 16:04:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(c=5Ficon=5Fselect):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=80=89=E6=8B=A9=E5=AF=B9=E8=AF=9D=E6=A1=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=90=9C=E7=B4=A2=E6=A1=86=E5=92=8C=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 419d2af05853d4d9ca8af2262b521f58aa5c1ae1)
---
 .../mobileConfigRight/c_icon_select.vue       | 61 ++++++++-----------
 1 file changed, 25 insertions(+), 36 deletions(-)

diff --git a/frontend/admin/src/diy/components/mobileConfigRight/c_icon_select.vue b/frontend/admin/src/diy/components/mobileConfigRight/c_icon_select.vue
index 1f258d594..2d00a4baa 100644
--- a/frontend/admin/src/diy/components/mobileConfigRight/c_icon_select.vue
+++ b/frontend/admin/src/diy/components/mobileConfigRight/c_icon_select.vue
@@ -1,15 +1,18 @@
 <template>
-  <el-dialog v-model="visible" width="800px" title="选择图标" append-to-body>
+  <el-dialog v-model="visible" width="640px" title="选择图标" append-to-body>
     <div class="icon-selector">
       <div class="search-box">
         <el-input v-model="searchText" placeholder="搜索图标名称" prefix-icon="Search" clearable></el-input>
       </div>
       <div class="icon-list">
-        <div class="icon-item" v-for="(item, index) in filteredIcons" :key="index" @click="selectIcon(item)">
-          <div class="icon-box">
-            <span :class="['mb-iconfont', cssPrefix + item.font_class]"></span>
-          </div>
-          <div class="icon-name">{{ item.name }}</div>
+        <div
+          class="icon-item"
+          v-for="(item, index) in filteredIcons"
+          :key="index"
+          :title="item.name"
+          @click="selectIcon(item)"
+        >
+          <span :class="['mb-iconfont', cssPrefix + item.font_class]"></span>
         </div>
       </div>
     </div>
@@ -56,49 +59,35 @@ defineExpose({ show });
 <style scoped lang="scss">
 .icon-selector {
   .search-box {
-    margin-bottom: 20px;
+    margin-bottom: 12px;
   }
   .icon-list {
-    display: flex;
-    flex-wrap: wrap;
-    max-height: 500px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+    gap: 4px;
+    max-height: 420px;
     overflow-y: auto;
-    border: 1px solid #eee;
-    padding: 10px;
+    border: 1px solid var(--el-border-color-lighter);
+    padding: 8px;
     border-radius: 4px;
 
     .icon-item {
-      width: 100px;
-      height: 100px;
+      aspect-ratio: 1;
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       border-radius: 4px;
-      transition: all 0.3s;
-      margin: 5px;
+      transition: all 0.2s;
+
+      // .mb-iconfont 全局默认 font-size:16px，直接命中图标，必须在图标上覆盖
+      .mb-iconfont {
+        font-size: 30px;
+      }
 
       &:hover {
-        background-color: #f5f7fa;
-        color: #409eff;
-      }
-
-      .icon-box {
-        margin-bottom: 10px;
-        .mb-iconfont {
-          font-size: 32px;
-        }
-      }
-
-      .icon-name {
-        font-size: 12px;
-        text-align: center;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: 0 5px;
+        background-color: var(--prev-color-primary-light-9);
+        color: var(--prev-color-primary);
       }
     }
   }