refactor(图层管理): 重构图层列表更新逻辑，按指定顺序显示图层

js/script.js

@@ -2514,15 +2514,26 @@
         requestAnimationFrame(() => {
             layersList.innerHTML = '';
 
-        // 获取所有图层（从顶层到底层）
+        // 获取所有图层（按指定顺序：背景图-企业-嘉宾-编号-其他文本-层叠图）
         const layers = [];
 
-        // 1. 文本输入框（最上层）
+        // 1. 背景图（最底层）
-        const textInputs = document.querySelectorAll('.preview-input-layer .text-input');
+        if (currentImage) {
-        console.log('updateLayersList: 找到', textInputs.length, '个文本输入框');
+            layers.push({
-        textInputs.forEach((input, index) => {
+                id: 'background',
-            console.log('updateLayersList: 处理文本输入框', input.id, 'layer-hidden:', input.classList.contains('layer-hidden'));
+                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 || '文本';
     }