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;
});
}