hxuanyu/TFT-Strategist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新激活状态样式，确保在CSS和JavaScript中正确处理激活项的显示逻辑，优化代码可读性和维护性。

Browse Source
This commit is contained in:
hxuanyu 2025-04-02 15:03:09 +08:00
parent ff5e98d296
commit 10c990bd95
3 changed files with 36 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/web/static/css/style.css
View File

@ -74,4 +74,13 @@
.chess-list { .chess-list {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
}
/* 激活状态样式 */
.synergy-weight-item.active,
.chess-weight-item.active {
background-color: #e0e7ff;
border-left: 3px solid #4f46e5;
padding-left: 5px;
border-radius: 4px;
} }

118
src/web/static/js/main.js
View File

@ -552,14 +552,14 @@ function updateActiveStatus(results) {
// 添加激活的羁绊 // 添加激活的羁绊
result.active_synergies.forEach(synergy => { result.active_synergies.forEach(synergy => {
console.log('激活羁绊：', synergy); console.log('激活羁绊：', synergy);
if (synergy.id) activeSynergies.add(synergy.id); if (synergy.id) activeSynergies.add(String(synergy.id)); // 确保ID是字符串
if (synergy.name) activeSynergyNames.add(synergy.name); // 添加名称 if (synergy.name) activeSynergyNames.add(synergy.name); // 添加名称
}); });
// 添加激活的棋子 // 添加激活的棋子
result.chess_list.forEach(chess => { result.chess_list.forEach(chess => {
console.log('激活棋子：', chess); console.log('激活棋子：', chess);
if (chess.id) activeChess.add(chess.id); if (chess.id) activeChess.add(String(chess.id)); // 确保ID是字符串
if (chess.name) activeChessNames.add(chess.name); // 添加名称 if (chess.name) activeChessNames.add(chess.name); // 添加名称
}); });
}); });
@ -569,101 +569,37 @@ function updateActiveStatus(results) {
console.log('所有激活的棋子ID：', Array.from(activeChess)); console.log('所有激活的棋子ID：', Array.from(activeChess));
console.log('所有激活的棋子名称：', Array.from(activeChessNames)); console.log('所有激活的棋子名称：', Array.from(activeChessNames));
// 记录是否有成功匹配 // 处理羁绊激活状态
let synergyMatched = false; $('.synergy-weight-item').each(function() {
let chessMatched = false; const $item = $(this);
const synergyId = String($item.data('synergy-id'));
// 使用多种方式尝试匹配 const synergyName = $item.data('synergy-name') || $item.find('label').text().trim();
// 1. 通过ID直接匹配 // 通过ID或名称匹配
activeSynergies.forEach(synergyId => { if (activeSynergies.has(synergyId) ||
const selector = `.synergy-weight-item[data-synergy-id="${synergyId}"]`; activeSynergyNames.has(synergyName) ||
const $elements = $(selector); activeSynergyNames.has(synergyName.toLowerCase())) {
console.log('查找羁绊元素(通过ID)：', selector, $elements.length); $item.addClass('active');
if ($elements.length > 0) { console.log('激活羁绊：', synergyId, synergyName);
$elements.addClass('active');
synergyMatched = true;
} }
}); });
activeChess.forEach(chessId => { // 处理棋子激活状态
const selector = `.chess-weight-item[data-chess-id="${chessId}"]`; $('.chess-weight-item').each(function() {
const $elements = $(selector); const $item = $(this);
console.log('查找棋子元素(通过ID)：', selector, $elements.length); const chessId = String($item.data('chess-id'));
if ($elements.length > 0) { const chessName = $item.data('chess-name') || $item.find('label').text().trim();
$elements.addClass('active');
chessMatched = true; // 通过ID或名称匹配
if (activeChess.has(chessId) ||
activeChessNames.has(chessName) ||
activeChessNames.has(chessName.toLowerCase())) {
$item.addClass('active');
console.log('激活棋子：', chessId, chessName);
} }
}); });
// 2. 通过名称匹配 // 记录激活项目数量统计
if (!synergyMatched) {
console.log('ID匹配失败，尝试使用名称匹配羁绊');
$('.synergy-weight-item').each(function() {
const $item = $(this);
const synergyName = $item.find('label').text().trim();
const dataName = $item.data('synergy-name');
if (activeSynergyNames.has(synergyName) ||
(dataName && activeSynergyNames.has(dataName))) {
$item.addClass('active');
console.log('通过名称匹配到羁绊：', synergyName);
synergyMatched = true;
}
});
}
if (!chessMatched) {
console.log('ID匹配失败，尝试使用名称匹配棋子');
$('.chess-weight-item').each(function() {
const $item = $(this);
const chessName = $item.find('label').text().trim();
const dataName = $item.data('chess-name');
if (activeChessNames.has(chessName) ||
(dataName && activeChessNames.has(dataName))) {
$item.addClass('active');
console.log('通过名称匹配到棋子：', chessName);
chessMatched = true;
}
});
}
// 3. 最后的尝试：直接遍历匹配名称（不区分大小写）
if (!synergyMatched) {
console.log('所有正常匹配方式失败，尝试不区分大小写的名称匹配');
const lowerSynergyNames = Array.from(activeSynergyNames).map(name => name.toLowerCase());
$('.synergy-weight-item').each(function() {
const $item = $(this);
const synergyName = $item.find('label').text().trim().toLowerCase();
if (lowerSynergyNames.includes(synergyName)) {
$item.addClass('active');
console.log('通过不区分大小写名称匹配到羁绊：', synergyName);
}
});
}
if (!chessMatched) {
const lowerChessNames = Array.from(activeChessNames).map(name => name.toLowerCase());
$('.chess-weight-item').each(function() {
const $item = $(this);
const chessName = $item.find('label').text().trim().toLowerCase();
if (lowerChessNames.includes(chessName)) {
$item.addClass('active');
console.log('通过不区分大小写名称匹配到棋子：', chessName);
}
});
}
// 添加高亮样式，以便更好地区分激活项
$('.synergy-weight-item.active').css('background-color', '#e0e7ff');
$('.chess-weight-item.active').css('background-color', '#e0e7ff');
// 输出激活项目数量统计
console.log('成功激活的羁绊数量：', $('.synergy-weight-item.active').length); console.log('成功激活的羁绊数量：', $('.synergy-weight-item.active').length);
console.log('成功激活的棋子数量：', $('.chess-weight-item.active').length); console.log('成功激活的棋子数量：', $('.chess-weight-item.active').length);

9
src/web/templates/index.html
View File

@ -44,15 +44,6 @@
.drawer-backdrop.open { .drawer-backdrop.open {
display: block; display: block;
} }
/* 添加激活状态样式 */
.synergy-weight-item.active,
.chess-weight-item.active {
background-color: #e0e7ff;
border-left: 3px solid #4f46e5;
padding-left: 5px;
border-radius: 4px;
}
</style> </style>
</head> </head>
<body class="bg-gray-100 min-h-screen"> <body class="bg-gray-100 min-h-screen">