From 7ce8be8bf9beb74340a3326b40f9086678e8473c Mon Sep 17 00:00:00 2001
From: tikkhun <tikkhun@163.com>
Date: Fri, 12 Dec 2025 11:06:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E6=B7=BB=E5=8A=A0=E5=BD=A2?=
 =?UTF-8?q?=E7=8A=B6=E9=80=89=E6=8B=A9=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在形状选择下拉框旁添加预览区域，显示当前选中形状的预览图像
优化类型切换时的预览容器状态管理
---
 js/admin-media.js | 25 +++++++++++++++++++++++++
 yoone-snow.php    |  1 +
 2 files changed, 26 insertions(+)

diff --git a/js/admin-media.js b/js/admin-media.js
index c50a27e..fe5d831 100644
--- a/js/admin-media.js
+++ b/js/admin-media.js
@@ -19,6 +19,7 @@
     var emojiSuggestBox = document.getElementById('yooneSnowEmojiSuggest');
     var shapeListContainer = document.getElementById('yooneSnowShapeList');
     var shapeAddSelect = document.getElementById('yooneSnowAddShapeSelect');
+    var shapeLabelPreviewHost = document.getElementById('yooneSnowAddShapeLabelPreview');
     var shapeAddButton = null;
     var emojiSelect = document.getElementById('yooneSnowEmojiSelect');
     var typeSelect = document.getElementById('yooneSnowAddTypeSelect');
@@ -530,11 +531,30 @@
     }
 
     if (shapeAddSelect){
+      // 监听默认形状下拉变化 用于更新左侧图像预览并添加卡片
       shapeAddSelect.addEventListener('change', function(){
         var val = shapeAddSelect.value;
         if (String(val).trim() !== ''){
+          // 更新左侧预览 显示当前选择形状的图像或渲染预览
+          if (shapeLabelPreviewHost){
+            while (shapeLabelPreviewHost.firstChild){ shapeLabelPreviewHost.removeChild(shapeLabelPreviewHost.firstChild); }
+            var previewEl = createShapePreviewElement(val);
+            if (previewEl){
+              try { previewEl.style.backgroundColor = 'transparent'; } catch(e){}
+              try { previewEl.style.border = 'none'; } catch(e){}
+              try { previewEl.style.borderRadius = '0'; } catch(e){}
+              shapeLabelPreviewHost.style.display = 'flex';
+              shapeLabelPreviewHost.appendChild(previewEl);
+            }
+          }
+          // 添加形状卡片到列表
           addShapeBox(val);
+          // 重置下拉并清空预览 保持与未选中状态一致
           shapeAddSelect.value = '';
+          if (shapeLabelPreviewHost){
+            while (shapeLabelPreviewHost.firstChild){ shapeLabelPreviewHost.removeChild(shapeLabelPreviewHost.firstChild); }
+            shapeLabelPreviewHost.style.display = 'none';
+          }
         }
       });
     }
@@ -549,6 +569,11 @@
       paneEmoji.style.display = (t === 'emoji') ? 'flex' : 'none';
       paneMedia.style.display = (t === 'media') ? 'flex' : 'none';
       paneText.style.display = (t === 'text') ? 'flex' : 'none';
+      if (shapeLabelPreviewHost){
+        // 切換類型時預覽容器默認隱藏 僅在選中形狀時顯示
+        shapeLabelPreviewHost.style.display = 'none';
+        while (shapeLabelPreviewHost.firstChild){ shapeLabelPreviewHost.removeChild(shapeLabelPreviewHost.firstChild); }
+      }
     }
     if (typeSelect){
       typeSelect.value = 'default';
diff --git a/yoone-snow.php b/yoone-snow.php
index c0e7534..002e6b0 100644
--- a/yoone-snow.php
+++ b/yoone-snow.php
@@ -468,6 +468,7 @@ function yoone_snow_register_settings() {
             echo '</select></label>';
             echo '</div>';
             echo '<div id="yooneSnowAddDefaultPane" style="display:flex;gap:8px;align-items:center;position:relative;">';
+            echo '<div id="yooneSnowAddShapeLabelPreview" style="width:32px;height:32px;display:none;align-items:center;justify-content:center;"></div>';
             echo '<select id="yooneSnowAddShapeSelect" style="min-width:240px;"><option value="">Select shape</option>';
             foreach ($options as $key => $label) {
                 echo '<option value="' . esc_attr($key) . '">' . esc_html($label) . '</option>';