feat(admin): 添加形状选择预览功能并优化交互

在形状选择下拉框旁添加预览区域，显示当前选中形状的预览图像
优化类型切换时的预览容器状态管理

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';

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>';