fix: 用按钮排序替代拖拽，修复求和字段被清空的问题

Coze-Commit-Type: user
Coze-User-ID: 3722323274763196
Coze-Conversation-ID: 9894087

templates/index.html

@@ -273,34 +273,17 @@
             display: flex;
             align-items: center;
             gap: 8px;
-            padding: 8px 12px;
+            padding: 6px 10px;
-            background: white;
+            background: #f0f9ff;
-            border: 1px solid #e1e8ed;
+            border: 1px solid #bae6fd;
-            border-radius: 6px;
+            border-radius: 4px;
-            cursor: grab;
+            font-size: 12px;
-            transition: all 0.2s ease;
-            user-select: none;
         }
 
-        .selected-field-item:hover {
+        .selected-field-item .field-index {
-            border-color: #4a90e2;
+            color: #0284c7;
-            box-shadow: 0 2px 4px rgba(74, 144, 226, 0.1);
+            font-weight: 600;
-        }
+            min-width: 24px;
-
-        .selected-field-item:active {
-            cursor: grabbing;
-        }
-
-        .selected-field-item.dragging {
-            opacity: 0.5;
-            border-color: #4a90e2;
-            background: #f0f7ff;
-        }
-
-        .selected-field-item .drag-handle {
-            color: #999;
-            font-size: 14px;
-            cursor: grab;
         }
 
         .selected-field-item .field-name {
@@ -309,6 +292,37 @@
             color: #333;
         }
 
+        .selected-field-item .field-actions {
+            display: flex;
+            gap: 4px;
+        }
+
+        .selected-field-item .btn-move {
+            width: 20px;
+            height: 20px;
+            border: 1px solid #cbd5e1;
+            background: white;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 12px;
+            line-height: 1;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .selected-field-item .btn-move:hover:not(:disabled) {
+            background: #e2e8f0;
+            border-color: #94a3b8;
+        }
+
+        .selected-field-item .btn-move:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+        }
+
         .selected-field-item .field-index {
             font-size: 11px;
             color: #999;
@@ -1167,7 +1181,12 @@
 
             const fieldsList = document.getElementById('fields-list');
             const checkedFields = Array.from(fieldsList.querySelectorAll('input:checked')).map(c => c.value);
-            refreshSumFieldsList(checkedFields, []);
+            
+            // 保留当前求和字段的选择状态
+            const sumFieldsList = document.getElementById('sum-fields-list');
+            const currentSumFields = sumFieldsList ? Array.from(sumFieldsList.querySelectorAll('input:checked')).map(c => c.value) : [];
+            
+            refreshSumFieldsList(checkedFields, currentSumFields);
             refreshSelectedFieldsOrder(checkedFields);
         }
 
@@ -1182,75 +1201,42 @@
                 orderList.innerHTML = selectedFields.map((fieldKey, index) => {
                     const field = allFields.find(f => f.key === fieldKey);
                     const displayName = field ? field.display : fieldKey;
+                    const isFirst = index === 0;
+                    const isLast = index === selectedFields.length - 1;
                     return `
-                        <div class="selected-field-item" draggable="true" data-field="${fieldKey}">
+                        <div class="selected-field-item" data-field="${fieldKey}">
-                            <span class="drag-handle">☰</span>
-                            <span class="field-name">${displayName}</span>
                             <span class="field-index">#${index + 1}</span>
+                            <span class="field-name">${displayName}</span>
+                            <div class="field-actions">
+                                <button type="button" class="btn-move" onclick="moveFieldUp(${index})" ${isFirst ? 'disabled' : ''} title="上移">↑</button>
+                                <button type="button" class="btn-move" onclick="moveFieldDown(${index})" ${isLast ? 'disabled' : ''} title="下移">↓</button>
+                            </div>
                         </div>
                     `;
                 }).join('');
-                
-                // 添加拖拽事件监听
-                initDragAndDrop();
             }
         }
 
-        // 初始化拖拽排序
+        // 字段上移
-        function initDragAndDrop() {
+        function moveFieldUp(index) {
+            if (index <= 0) return;
             const orderList = document.getElementById('selected-fields-order');
-            if (!orderList) return;
+            const items = Array.from(orderList.querySelectorAll('.selected-field-item'));
-            
+            const item = items[index];
-            const items = orderList.querySelectorAll('.selected-field-item');
+            const prevItem = items[index - 1];
-            let draggedItem = null;
+            orderList.insertBefore(item, prevItem);
+            updateFieldIndexes();
+        }
 
-            // 为容器添加 dragover 和 drop 事件
+        // 字段下移
-            orderList.addEventListener('dragover', function(e) {
+        function moveFieldDown(index) {
-                e.preventDefault();
+            const orderList = document.getElementById('selected-fields-order');
-                e.dataTransfer.dropEffect = 'move';
+            const items = Array.from(orderList.querySelectorAll('.selected-field-item'));
-            });
+            if (index >= items.length - 1) return;
-
+            const item = items[index];
-            orderList.addEventListener('drop', function(e) {
+            const nextItem = items[index + 1];
-                e.preventDefault();
+            orderList.insertBefore(nextItem, item);
-            });
+            updateFieldIndexes();
-
-            items.forEach(item => {
-                item.addEventListener('dragstart', function(e) {
-                    draggedItem = this;
-                    setTimeout(() => this.classList.add('dragging'), 0);
-                    e.dataTransfer.effectAllowed = 'move';
-                    e.dataTransfer.setData('text/plain', this.dataset.field);
-                });
-
-                item.addEventListener('dragend', function() {
-                    this.classList.remove('dragging');
-                    draggedItem = null;
-                    // 更新序号
-                    updateFieldIndexes();
-                });
-
-                item.addEventListener('dragover', function(e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.dataTransfer.dropEffect = 'move';
-                    
-                    if (this !== draggedItem && draggedItem) {
-                        const rect = this.getBoundingClientRect();
-                        const midY = rect.top + rect.height / 2;
-                        
-                        if (e.clientY < midY) {
-                            orderList.insertBefore(draggedItem, this);
-                        } else {
-                            orderList.insertBefore(draggedItem, this.nextSibling);
-                        }
-                    }
-                });
-
-                item.addEventListener('drop', function(e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                });
-            });
         }
 
         // 更新字段序号
@@ -1258,8 +1244,14 @@
             const orderList = document.getElementById('selected-fields-order');
             const items = orderList.querySelectorAll('.selected-field-item');
             items.forEach((item, index) => {
-                const indexEl = item.querySelector('.field-index');
+                const indexSpan = item.querySelector('.field-index');
-                if (indexEl) indexEl.textContent = `#${index + 1}`;
+                if (indexSpan) indexSpan.textContent = `#${index + 1}`;
+                
+                // 更新按钮状态
+                const upBtn = item.querySelector('.btn-move[title="上移"]');
+                const downBtn = item.querySelector('.btn-move[title="下移"]');
+                if (upBtn) upBtn.disabled = index === 0;
+                if (downBtn) downBtn.disabled = index === items.length - 1;
             });
         }