diff --git a/assets/image_20260710155918072.png b/assets/image_20260710155918072.png new file mode 100644 index 0000000..72b6f2d Binary files /dev/null and b/assets/image_20260710155918072.png differ diff --git a/templates/index.html b/templates/index.html index 74e0533..7ee7ea3 100644 --- a/templates/index.html +++ b/templates/index.html @@ -273,34 +273,17 @@ display: flex; align-items: center; gap: 8px; - padding: 8px 12px; - background: white; - border: 1px solid #e1e8ed; - border-radius: 6px; - cursor: grab; - transition: all 0.2s ease; - user-select: none; + padding: 6px 10px; + background: #f0f9ff; + border: 1px solid #bae6fd; + border-radius: 4px; + font-size: 12px; } - .selected-field-item:hover { - border-color: #4a90e2; - box-shadow: 0 2px 4px rgba(74, 144, 226, 0.1); - } - - .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-index { + color: #0284c7; + font-weight: 600; + min-width: 24px; } .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 ` -
- - ${displayName} +
#${index + 1} + ${displayName} +
+ + +
`; }).join(''); - - // 添加拖拽事件监听 - initDragAndDrop(); } } - // 初始化拖拽排序 - function initDragAndDrop() { + // 字段上移 + function moveFieldUp(index) { + if (index <= 0) return; const orderList = document.getElementById('selected-fields-order'); - if (!orderList) return; - - const items = orderList.querySelectorAll('.selected-field-item'); - let draggedItem = null; + const items = Array.from(orderList.querySelectorAll('.selected-field-item')); + const item = items[index]; + const prevItem = items[index - 1]; + orderList.insertBefore(item, prevItem); + updateFieldIndexes(); + } - // 为容器添加 dragover 和 drop 事件 - orderList.addEventListener('dragover', function(e) { - e.preventDefault(); - e.dataTransfer.dropEffect = 'move'; - }); - - orderList.addEventListener('drop', function(e) { - e.preventDefault(); - }); - - 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(); - }); - }); + // 字段下移 + function moveFieldDown(index) { + const orderList = document.getElementById('selected-fields-order'); + const items = Array.from(orderList.querySelectorAll('.selected-field-item')); + if (index >= items.length - 1) return; + const item = items[index]; + const nextItem = items[index + 1]; + orderList.insertBefore(nextItem, item); + updateFieldIndexes(); } // 更新字段序号 @@ -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'); - if (indexEl) indexEl.textContent = `#${index + 1}`; + const indexSpan = item.querySelector('.field-index'); + 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; }); }