zksu
/
yoone-snow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

在形状选择下拉框旁添加预览区域，显示当前选中形状的预览图像
优化类型切换时的预览容器状态管理
This commit is contained in:
tikkhun 2025-12-12 11:06:04 +08:00
parent def279a87e
commit 7ce8be8bf9
2 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
js/admin-media.js
View File

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

1
yoone-snow.php
View File

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