diff --git a/repo/js/背包材料统计/对产出的latest_record.txt档案进行剖析用的网页@由蜜柑魚制作.html b/repo/js/背包材料统计/对产出的latest_record.txt档案进行剖析用的网页@由蜜柑魚制作.html
index 055dc0d8..c36522f7 100644
--- a/repo/js/背包材料统计/对产出的latest_record.txt档案进行剖析用的网页@由蜜柑魚制作.html
+++ b/repo/js/背包材料统计/对产出的latest_record.txt档案进行剖析用的网页@由蜜柑魚制作.html
@@ -6,8 +6,9 @@
请先至少扫瞄两次记录
功能
1.显示两次扫描记录中，背包材料各个物品的变更数量
- 2.当物品数量大于9000时会标记红色，提示用户作出处理
+ 2.点击表格中的标题"变更数量"，切换变更数量 由少至多 或 由多至少 排序
3.怪物掉落素材独有，依照稀有度排序，快速看到多了多少个不能分解的紫色、蓝色材料
+ 4.当物品数量大于9000时会标记红色，提示用户作出处理
快捷键
Alt+f = 进入或退出全屏模式
w = 向上滚动
@@ -22,6 +23,9 @@
适配各种Windows系统时间格式，避免因时间格式不同而不显示的问题
1.3
00:00~06:30 预设深色模式
+1.4
+ 新增 依据背包材料数量排序
+ 点击表格中的标题[较新日斯]，切换依据背包材料数量 由少至多 或 由多至少 排序
-->
@@ -403,8 +407,10 @@
/* 排序按钮样式 */
.sortable {
- cursor: pointer;
position: relative;
+ padding-right: 20px;
+ /* 为箭头留出空间 */
+ cursor: pointer;
}
.sortable:hover {
@@ -416,7 +422,7 @@
}
.sortable::after {
- content: "↕";
+ content: "";
position: absolute;
right: 8px;
font-size: 0.8em;
@@ -551,6 +557,18 @@
border: 2px dashed #4a6fa5;
background-color: #1a2a3a;
}
+
+ /* 新增样式：未激活排序的指示符 */
+ .sortable.inactive::after {
+ content: "↕";
+ color: #999;
+ opacity: 0.5;
+ }
+
+ /* 深色模式下的未激活排序指示符 */
+ body.dark-mode .sortable.inactive::after {
+ color: #aaa;
+ }
@@ -878,7 +896,6 @@
if (scans.length < 2) continue;
const latestScan = scans[0];
const previousScan = scans[1];
- console.log("N:" + scans[0].timestamp + ":" + scans[1].timestamp)
// 创建表格
const section = document.createElement('div');
@@ -896,8 +913,9 @@
| ${previousScan.timestamp} |
- ${latestScan.timestamp} |
- 变更数量 |
+
+ ${latestScan.timestamp} |
+ 变更数量 |
@@ -907,7 +925,7 @@
const tbody = section.querySelector('tbody');
const toggleBtn = section.querySelector('.category-header');
- const sortHeader = section.querySelector('.sortable');
+ const sortHeaders = section.querySelectorAll('.sortable');
const rareSortBtn = section.querySelector('.rare-sort-btn');
// 添加折叠功能
@@ -922,33 +940,65 @@
}
});
- // 添加变更数量排序功能
- sortHeader.addEventListener('click', function () {
- const currentSort = this.getAttribute('data-sort');
- const newSort = currentSort === 'desc' ? 'asc' : 'desc';
- this.setAttribute('data-sort', newSort);
+ // 为所有可排序列添加点击事件
+ sortHeaders.forEach(header => {
+ header.addEventListener('click', function () {
+ const sortType = this.getAttribute('data-sort-type');
+ const currentSort = this.getAttribute('data-sort');
- // 更新排序指示器
- this.classList.remove('asc', 'desc');
- this.classList.add(newSort);
+ // 确定新排序方向
+ let newSort;
+ if (currentSort === 'none') {
+ newSort = 'desc'; // 从未激活状态开始设为降序
+ } else {
+ newSort = currentSort === 'desc' ? 'asc' : 'desc';
+ }
- // 获取当前稀有度排序状态
- const useRareSort = rareSortBtn.classList.contains('active');
- sortTable(tbody, newSort, useRareSort);
+ // 更新排序状态
+ this.setAttribute('data-sort', newSort);
+
+ // 移除所有排序状态类
+ this.classList.remove('asc', 'desc', 'inactive');
+
+ // 添加新状态类
+ this.classList.add(newSort);
+
+ // 重置其他排序列的状态
+ sortHeaders.forEach(otherHeader => {
+ if (otherHeader !== this) {
+ otherHeader.setAttribute('data-sort', 'none');
+ otherHeader.classList.remove('asc', 'desc');
+ otherHeader.classList.add('inactive');
+ }
+ });
+
+ // 获取稀有度排序状态
+ const useRareSort = rareSortBtn.classList.contains('active');
+
+ // 调用排序函数
+ sortTable(tbody, sortType, newSort, useRareSort);
+ });
});
- // 添加稀有度排序功能
+ // 更新稀有度排序按钮事件
rareSortBtn.addEventListener('click', function (e) {
e.stopPropagation();
// 切换按钮状态
const isActive = this.classList.toggle('active');
- // 获取当前变更数量的排序方向
- const sortDirection = sortHeader.getAttribute('data-sort');
+ // 获取当前激活的排序列
+ const activeHeader = section.querySelector('.sortable.asc, .sortable.desc');
+ let sortType = 'change'; // 默认使用变更数量排序
+ let sortDirection = 'desc';
- // 重新排序表格
- sortTable(tbody, sortDirection, isActive);
+ if (activeHeader) {
+ sortType = activeHeader.getAttribute('data-sort-type');
+ sortDirection = activeHeader.getAttribute('data-sort');
+ }
+
+ // 重新排序
+ sortTable(tbody, sortType, sortDirection, isActive);
});
// 处理每个物品
@@ -981,11 +1031,11 @@
// 检查数量是否超过9000
const row = document.createElement('tr');
row.innerHTML = `
- ${item} |
- ${previousQty} |
- ${latestQty} |
- ${changeSign}${change} |
- `;
+ ${item} |
+ ${previousQty} |
+ ${latestQty} |
+ ${changeSign}${change} |
+ `;
// 存储稀有度等级用于排序
row.dataset.rarity = getRarityLevel(item);
@@ -997,7 +1047,15 @@
if (tbody.children.length > 0) {
resultsContainer.appendChild(section);
// 初始排序（由多到少）
- sortTable(tbody, 'desc', false);
+ sortTable(tbody, 'change', 'desc', false);
+
+ // 给变更数量列添加默认排序指示
+ const changeHeader = section.querySelector('[data-sort-type="change"]');
+ changeHeader.classList.add('desc');
+
+ // 给较新日期列添加未激活指示
+ const newQtyHeader = section.querySelector('[data-sort-type="newQty"]');
+ newQtyHeader.classList.add('inactive');
}
}
@@ -1007,14 +1065,11 @@
}
}
- // 表格排序函数
- function sortTable(tbody, sortDirection, useRareSort) {
+ // 排序函数
+ function sortTable(tbody, sortType, sortDirection, useRareSort) {
const rows = Array.from(tbody.querySelectorAll('tr'));
rows.sort((a, b) => {
- const aChange = parseInt(a.cells[3].textContent);
- const bChange = parseInt(b.cells[3].textContent);
-
// 如果启用了稀有度排序
if (useRareSort) {
const aRarity = parseInt(a.dataset.rarity);
@@ -1026,8 +1081,25 @@
}
}
- // 再按变更数量排序
- return sortDirection === 'desc' ? bChange - aChange : aChange - bChange;
+ // 根据排序类型获取值
+ let aValue, bValue;
+
+ if (sortType === 'change') {
+ // 变更数量在第四列（索引3）
+ aValue = parseInt(a.cells[3].textContent);
+ bValue = parseInt(b.cells[3].textContent);
+ } else if (sortType === 'newQty') {
+ // 新时间数量在第三列（索引2）
+ aValue = parseInt(a.cells[2].textContent);
+ bValue = parseInt(b.cells[2].textContent);
+ } else {
+ // 默认按变更数量
+ aValue = parseInt(a.cells[3].textContent);
+ bValue = parseInt(b.cells[3].textContent);
+ }
+
+ // 根据排序方向排序
+ return sortDirection === 'desc' ? bValue - aValue : aValue - bValue;
});
// 清空表格并重新添加排序后的行
@@ -1039,7 +1111,7 @@
tbody.appendChild(row);
});
}
-
+
// 显示错误信息
function showError(message) {
errorMessage.textContent = message;
@@ -1096,4 +1168,4 @@
-