From a804120fa2ddf513b24da6c12b5c3e974e3e538c Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 12 Oct 2026 14:59:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(manager):=20=E7=BB=84=E4=BB=B6=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=94=B9=E4=B8=BA=E5=9B=BE=E6=A0=87+=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E5=8F=8C=E5=88=97=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- config.js 21 个面板条目新增 icon 字段（element-plus 图标）
- 面板 item 渲染 el-icon + 名称，替换死的 img 占位
- 面板容器改 grid 两列，卡片式样式含 hover 高亮
---
 .../src/views/page-decoration/wap/config.js   | 21 ++++++++
 .../src/views/page-decoration/wap/index.vue   | 50 ++++++++++++++++++-
 .../src/views/page-decoration/wap/style.scss  | 23 ++++++---
 3 files changed, 84 insertions(+), 10 deletions(-)

diff --git a/manager/src/views/page-decoration/wap/config.js b/manager/src/views/page-decoration/wap/config.js
index af7bfad57..c5a7c8adb 100644
--- a/manager/src/views/page-decoration/wap/config.js
+++ b/manager/src/views/page-decoration/wap/config.js
@@ -13,6 +13,7 @@ export const modelData = [
   {
     type: "flexOne",
     name: "图片",
+    icon: "Picture",
     group: "base",
     // drawer: true,
     notAdd: true,
@@ -33,6 +34,7 @@ export const modelData = [
   {
     type: "carousel",
     name: "轮播图",
+    icon: "PictureFilled",
     group: "base",
     img: "md-image",
     // onlyImg: true,
@@ -101,6 +103,7 @@ export const modelData = [
   {
     type: "title",
     name: "标题栏",
+    icon: "Collection",
     group: "tools",
     img: "md-image",
     // notTitle:true,
@@ -370,6 +373,7 @@ export const modelData = [
   {
     type: "textPicture",
     name: "文字图片",
+    icon: "Document",
     group: "base",
     drawer: true,
     notAdd: true,
@@ -416,6 +420,7 @@ export const modelData = [
   {
     type: "tpl_ad_list",
     name: "广告魔方",
+    icon: "Grid",
     group: "base",
     img: "md-image",
     options: {
@@ -431,6 +436,7 @@ export const modelData = [
   {
     type: "menu",
     name: "宫格导航",
+    icon: "Menu",
     group: "base",
     img: "md-image",
     close: true,
@@ -482,6 +488,7 @@ export const modelData = [
   {
     type: "search",
     name: "搜索",
+    icon: "Search",
     group: "base",
     img: "md-image",
     notAdd: true,
@@ -498,6 +505,7 @@ export const modelData = [
   {
     type: "goods",
     name: "商品分类",
+    icon: "Goods",
     group: "base",
     img: "md-image",
     notAdd: true,
@@ -565,6 +573,7 @@ export const modelData = [
   {
     type: "notice",
     name: "公告",
+    icon: "Bell",
     group: "base",
     img: "md-image",
     notAdd: false,
@@ -591,6 +600,7 @@ export const modelData = [
     type: "promotionDetail",
     promotionsType: "PINTUAN",
     name: "拼团活动",
+    icon: "UserFilled",
     subBkColor: "#e1212b",
     subName: "惊喜折扣",
     subColor: "#fff",
@@ -608,6 +618,7 @@ export const modelData = [
     type: "promotionDetail",
     promotionsType: "LIVE",
     name: "直播活动",
+    icon: "VideoPlay",
     subBkColor: "#e1212b",
     subName: "优惠好价",
     subColor: "#fff",
@@ -625,6 +636,7 @@ export const modelData = [
     type: "promotionDetail",
     promotionsType: "SECKILL",
     name: "秒杀活动",
+    icon: "Timer",
     subBkColor: "#e1212b",
     subName: "x点场",
     subColor: "#fff",
@@ -642,6 +654,7 @@ export const modelData = [
     type: "promotionDetail",
     promotionsType: "KANJIA",
     name: "砍价活动",
+    icon: "Scissor",
     subBkColor: "#e1212b",
     subName: "超值好物",
     subColor: "#fff",
@@ -653,6 +666,7 @@ export const modelData = [
   {
     type: "video",
     name: "视频",
+    icon: "VideoCamera",
     group: "base",
     img: "md-image",
     notAdd: true,
@@ -694,6 +708,7 @@ export const modelData = [
   {
     type: "blank",
     name: "辅助空白",
+    icon: "Crop",
     group: "tools",
     img: "md-image",
     options: {
@@ -706,6 +721,7 @@ export const modelData = [
   {
     type: "line",
     name: "辅助线",
+    icon: "Minus",
     group: "tools",
     img: "md-image",
     options: {
@@ -720,6 +736,7 @@ export const modelData = [
   {
     type: "richText",
     name: "富文本",
+    icon: "EditPen",
     group: "tools",
     img: "md-image",
     options: {
@@ -733,6 +750,7 @@ export const modelData = [
   {
     type: "integral",
     name: "积分商城",
+    icon: "Coin",
     group: "marketing",
     img: "md-image",
     options: {
@@ -746,6 +764,7 @@ export const modelData = [
   {
     type: "coupon",
     name: "优惠券",
+    icon: "Ticket",
     group: "marketing",
     img: "md-image",
     options: {
@@ -759,6 +778,7 @@ export const modelData = [
   {
     type: "article",
     name: "文章列表",
+    icon: "Tickets",
     group: "base",
     img: "md-image",
     options: {
@@ -772,6 +792,7 @@ export const modelData = [
   {
     type: "shop",
     name: "店铺列表",
+    icon: "Shop",
     group: "base",
     img: "md-image",
     options: {
diff --git a/manager/src/views/page-decoration/wap/index.vue b/manager/src/views/page-decoration/wap/index.vue
index 1db5d69a9..f3a238673 100644
--- a/manager/src/views/page-decoration/wap/index.vue
+++ b/manager/src/views/page-decoration/wap/index.vue
@@ -21,7 +21,9 @@
           >
             <template #item="{ element: model }">
               <li class="model-item">
-                <img src alt />
+                <el-icon v-if="model.icon" :size="22">
+                  <component :is="model.icon" />
+                </el-icon>
                 <span>{{ model.name }}</span>
               </li>
             </template>
@@ -85,7 +87,30 @@
   </div>
 </template>
 <script>
-import { CircleClose } from "@element-plus/icons-vue";
+import {
+  CircleClose,
+  Picture,
+  PictureFilled,
+  Document,
+  Grid,
+  Menu,
+  Search,
+  Goods,
+  Bell,
+  VideoCamera,
+  VideoPlay,
+  Tickets,
+  Shop,
+  UserFilled,
+  Timer,
+  Scissor,
+  Coin,
+  Ticket,
+  Collection,
+  Crop,
+  Minus,
+  EditPen,
+} from "@element-plus/icons-vue";
 import templates from "./template/index";
 import Draggable from "vuedraggable";
 import { modelData } from "./config";
@@ -97,6 +122,27 @@ export default {
     Draggable,
     decorate,
     CircleClose,
+    Picture,
+    PictureFilled,
+    Document,
+    Grid,
+    Menu,
+    Search,
+    Goods,
+    Bell,
+    VideoCamera,
+    VideoPlay,
+    Tickets,
+    Shop,
+    UserFilled,
+    Timer,
+    Scissor,
+    Coin,
+    Ticket,
+    Collection,
+    Crop,
+    Minus,
+    EditPen,
   },
   data() {
     return {
diff --git a/manager/src/views/page-decoration/wap/style.scss b/manager/src/views/page-decoration/wap/style.scss
index 1482d9a55..72be75e61 100644
--- a/manager/src/views/page-decoration/wap/style.scss
+++ b/manager/src/views/page-decoration/wap/style.scss
@@ -4,9 +4,10 @@
     flex: 1.5;
     min-width: 250px;
     .model-view-menu-item {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      padding: 0 5px;
     }
     .model-group-title {
       font-size: 13px;
@@ -25,17 +26,23 @@
     flex: 6;
   }
   .model-item {
-    line-height: 1.75;
-    font-size: 13px;
-    margin: 0 5px 10px 5px;
+    line-height: 1.5;
+    font-size: 12px;
     border: 1px solid #ededed;
     background: #f6f6f9;
-    width: 70px;
-    height: 70px;
+    border-radius: 6px;
+    height: 64px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    gap: 4px;
+    color: #606266;
+    cursor: grab;
+    &:hover {
+      border-color: #409eff;
+      color: #409eff;
+    }
   }
 }
 .model-view-content {