refactor(图层管理): 重构图层列表更新逻辑,按指定顺序显示图层
This commit is contained in:
62
js/script.js
62
js/script.js
@@ -2514,15 +2514,26 @@
|
||||
requestAnimationFrame(() => {
|
||||
layersList.innerHTML = '';
|
||||
|
||||
// 获取所有图层(从顶层到底层)
|
||||
// 获取所有图层(按指定顺序:背景图-企业-嘉宾-编号-其他文本-层叠图)
|
||||
const layers = [];
|
||||
|
||||
// 1. 文本输入框(最上层)
|
||||
const textInputs = document.querySelectorAll('.preview-input-layer .text-input');
|
||||
console.log('updateLayersList: 找到', textInputs.length, '个文本输入框');
|
||||
textInputs.forEach((input, index) => {
|
||||
console.log('updateLayersList: 处理文本输入框', input.id, 'layer-hidden:', input.classList.contains('layer-hidden'));
|
||||
// 只过滤掉预设的隐藏状态,显示所有图层(包括被隐藏的)
|
||||
// 1. 背景图(最底层)
|
||||
if (currentImage) {
|
||||
layers.push({
|
||||
id: 'background',
|
||||
element: bgImage,
|
||||
name: '背景图',
|
||||
type: 'background',
|
||||
icon: '🌄',
|
||||
visible: !bgImage.classList.contains('layer-hidden')
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 固定文本图层(按顺序:企业、嘉宾、编号)
|
||||
const fixedOrder = ['input1', 'input2', 'input3'];
|
||||
fixedOrder.forEach(id => {
|
||||
const input = document.getElementById(id);
|
||||
if (input) {
|
||||
layers.push({
|
||||
id: input.id,
|
||||
element: input,
|
||||
@@ -2531,9 +2542,26 @@
|
||||
icon: '📝',
|
||||
visible: !input.classList.contains('layer-hidden')
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 层叠图
|
||||
// 3. 其他文本输入框(新添加的)
|
||||
const textInputs = document.querySelectorAll('.preview-input-layer .text-input');
|
||||
textInputs.forEach((input) => {
|
||||
// 跳过已处理的固定图层
|
||||
if (!fixedOrder.includes(input.id)) {
|
||||
layers.push({
|
||||
id: input.id,
|
||||
element: input,
|
||||
name: getLayerName(input),
|
||||
type: 'text',
|
||||
icon: '📝',
|
||||
visible: !input.classList.contains('layer-hidden')
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 4. 层叠图(最上层)
|
||||
const overlayImages = overlayLayer.querySelectorAll('.overlay-image');
|
||||
overlayImages.forEach((overlay, index) => {
|
||||
layers.push({
|
||||
@@ -2546,21 +2574,9 @@
|
||||
});
|
||||
});
|
||||
|
||||
// 3. 背景图(最底层)
|
||||
if (currentImage) {
|
||||
layers.push({
|
||||
id: 'background',
|
||||
element: bgImage,
|
||||
name: '背景图',
|
||||
type: 'background',
|
||||
icon: '🌄',
|
||||
visible: !bgImage.classList.contains('layer-hidden')
|
||||
});
|
||||
}
|
||||
|
||||
// 倒序显示(顶层在上)
|
||||
// 显示图层列表(已经是正确顺序,不需要倒序)
|
||||
console.log('updateLayersList: 总共', layers.length, '个图层');
|
||||
layers.reverse().forEach((layer, index) => {
|
||||
layers.forEach((layer, index) => {
|
||||
console.log('updateLayersList: 创建图层项', index, layer.id, layer.name, 'visible:', layer.visible);
|
||||
const layerItem = document.createElement('div');
|
||||
layerItem.className = 'layer-item';
|
||||
@@ -2605,7 +2621,7 @@
|
||||
const placeholder = element.dataset.placeholder;
|
||||
const id = element.id;
|
||||
if (id === 'input1') return '企业';
|
||||
if (id === 'input2') return '姓名';
|
||||
if (id === 'input2') return '嘉宾';
|
||||
if (id === 'input3') return '编号';
|
||||
return placeholder || '文本';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user