diff --git a/js/script.js b/js/script.js index cbc11bc..53c076e 100644 --- a/js/script.js +++ b/js/script.js @@ -2514,26 +2514,54 @@ 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: input.id, - element: input, - name: getLayerName(input), - type: 'text', - icon: '📝', - visible: !input.classList.contains('layer-hidden') + 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, + name: getLayerName(input), + type: 'text', + 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 || '文本'; }