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

@ -75,3 +75,12 @@
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;
}

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

@ -552,14 +552,14 @@ function updateActiveStatus(results) {
// 添加激活的羁绊
result.active_synergies.forEach(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); // 添加名称
});
// 添加激活的棋子
result.chess_list.forEach(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); // 添加名称
});
});
@ -569,101 +569,37 @@ function updateActiveStatus(results) {
console.log('所有激活的棋子ID：', Array.from(activeChess));
console.log('所有激活的棋子名称：', Array.from(activeChessNames));
// 记录是否有成功匹配
let synergyMatched = false;
let chessMatched = false;
// 使用多种方式尝试匹配
// 1. 通过ID直接匹配
activeSynergies.forEach(synergyId => {
const selector = `.synergy-weight-item[data-synergy-id="${synergyId}"]`;
const $elements = $(selector);
console.log('查找羁绊元素(通过ID)：', selector, $elements.length);
if ($elements.length > 0) {
$elements.addClass('active');
synergyMatched = true;
}
});
activeChess.forEach(chessId => {
const selector = `.chess-weight-item[data-chess-id="${chessId}"]`;
const $elements = $(selector);
console.log('查找棋子元素(通过ID)：', selector, $elements.length);
if ($elements.length > 0) {
$elements.addClass('active');
chessMatched = true;
}
});
// 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');
const synergyId = String($item.data('synergy-id'));
const synergyName = $item.data('synergy-name') || $item.find('label').text().trim();
if (activeSynergyNames.has(synergyName) ||
(dataName && activeSynergyNames.has(dataName))) {
// 通过ID或名称匹配
if (activeSynergies.has(synergyId) ||
activeSynergyNames.has(synergyName) ||
activeSynergyNames.has(synergyName.toLowerCase())) {
$item.addClass('active');
console.log('通过名称匹配到羁绊：', synergyName);
synergyMatched = true;
console.log('激活羁绊：', synergyId, synergyName);
}
});
}
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');
const chessId = String($item.data('chess-id'));
const chessName = $item.data('chess-name') || $item.find('label').text().trim();
if (activeChessNames.has(chessName) ||
(dataName && activeChessNames.has(dataName))) {
// 通过ID或名称匹配
if (activeChess.has(chessId) ||
activeChessNames.has(chessName) ||
activeChessNames.has(chessName.toLowerCase())) {
$item.addClass('active');
console.log('通过名称匹配到棋子：', chessName);
chessMatched = true;
console.log('激活棋子：', chessId, chessName);
}
});
}
// 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('成功激活的棋子数量：', $('.chess-weight-item.active').length);

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

@ -44,15 +44,6 @@
.drawer-backdrop.open {
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>
</head>
<body class="bg-gray-100 min-h-screen">