diff --git a/static/js/app.js b/static/js/app.js index aec68ab..4d83a5e 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -912,7 +912,66 @@ function displayDifferences() { const currentSearchValue = document.getElementById('differenceSearch')?.value || ''; if (!filteredDifferenceResults || !filteredDifferenceResults.length) { - differencesContainer.innerHTML = '

未发现差异

'; + // 显示搜索和控制界面，即使没有结果 + let html = ` + +
+
+
+
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+ + + + +
+
+ + +
+ + ${currentSearchValue ? `没有找到包含"${escapeHtml(currentSearchValue)}"的差异记录` : '未发现差异'} + ${currentSearchValue ? '
请尝试其他搜索条件或点击"清除"按钮查看所有结果' : ''} +
+ `; + + differencesContainer.innerHTML = html; + + // 恢复搜索框的焦点和光标位置 + if (currentSearchValue) { + const searchInput = document.getElementById('differenceSearch'); + if (searchInput) { + searchInput.focus(); + searchInput.setSelectionRange(searchInput.value.length, searchInput.value.length); + } + } return; } @@ -956,6 +1015,9 @@ function displayDifferences() {
+ @@ -1031,18 +1093,14 @@ function displayDifferences() { ${diffs.length} 个差异字段
- -

主键: ${formatCompositeKey(keyObj)}

-
+
`; @@ -1082,12 +1140,8 @@ function displayDifferences() { ${isJson ? 'JSON' : ''} ${isArray ? '数组' : ''}
-
-
+
@@ -1138,6 +1192,13 @@ function displayDifferences() { differencesContainer.innerHTML = html; + // 初始化全部展开/收起按钮的状态 + const toggleButton = document.getElementById('toggleAllText'); + if (toggleButton) { + // 由于默认展开，按钮文本应该是"全部收起" + toggleButton.innerHTML = '全部收起'; + } + // 恢复搜索框的焦点和光标位置 if (currentSearchValue) { const searchInput = document.getElementById('differenceSearch'); @@ -1176,7 +1237,69 @@ function displayIdenticalResults() { const currentSearchValue = document.getElementById('identicalSearch')?.value || ''; if (!filteredIdenticalResults.length) { - identicalContainer.innerHTML = '

没有完全相同的记录

'; + // 显示搜索和控制界面，即使没有结果 + let html = ` + +
+
+
+ + + + 共 0 条记录 +
+
+
+
+ +
+
+
+ + +
+
+ + + + +
+
+ + +
+ + ${(currentIdenticalSearchTerm || currentSearchValue) ? `没有找到包含"${escapeHtml(currentIdenticalSearchTerm || currentSearchValue)}"的相同记录` : '没有完全相同的记录'} + ${(currentIdenticalSearchTerm || currentSearchValue) ? '
请尝试其他搜索条件或点击"清除"按钮查看所有结果' : ''} +
+ `; + + identicalContainer.innerHTML = html; + + // 恢复搜索框的焦点和光标位置 + if (currentSearchValue) { + const searchInput = document.getElementById('identicalSearch'); + if (searchInput) { + searchInput.focus(); + searchInput.setSelectionRange(searchInput.value.length, searchInput.value.length); + } + } return; } @@ -1243,10 +1366,6 @@ function displayIdenticalResults() { 完全匹配
- @@ -1254,7 +1373,7 @@ function displayIdenticalResults() {

主键: ${formatCompositeKey(result.key)}

-
+
`; @@ -2002,9 +2121,6 @@ function copyRawData() { // 复制差异主键 function copyDifferenceKeys() { - console.log('copyDifferenceKeys 被调用'); - console.log('filteredDifferenceResults:', filteredDifferenceResults); - if (!filteredDifferenceResults || filteredDifferenceResults.length === 0) { showAlert('warning', '无差异数据可复制'); return; @@ -2016,7 +2132,6 @@ function copyDifferenceKeys() { const uniqueKeys = new Set(); filteredDifferenceResults.forEach(diff => { - console.log('处理差异记录:', diff); if (diff.key) { let keyText = ''; @@ -2028,8 +2143,6 @@ function copyDifferenceKeys() { keyText = String(diff.key); } - console.log('提取的主键:', keyText); - // 避免重复主键 if (!uniqueKeys.has(keyText)) { uniqueKeys.add(keyText); @@ -2038,8 +2151,6 @@ function copyDifferenceKeys() { } }); - console.log('收集到的主键列表:', differenceKeys); - if (differenceKeys.length === 0) { showAlert('warning', '未找到有效的主键数据'); return; @@ -2047,11 +2158,9 @@ function copyDifferenceKeys() { // 将主键列表转换为文本格式（每行一个） const keyText = differenceKeys.join('\n'); - console.log('准备复制的文本:', keyText); // 复制到剪贴板 navigator.clipboard.writeText(keyText).then(() => { - console.log('复制成功'); showAlert('success', `已复制 ${differenceKeys.length} 个差异主键到剪贴板`); }).catch(err => { console.error('复制失败:', err); @@ -2064,6 +2173,47 @@ function copyDifferenceKeys() { } } +// 切换所有差异详情的展开/收起状态 +function toggleAllDifferenceCollapse() { + // 获取当前页面的所有差异展开区域 + const collapseElements = document.querySelectorAll('#differences [id^="keyGroup"]'); + const toggleButton = document.getElementById('toggleAllText'); + + if (collapseElements.length === 0) { + showAlert('warning', '没有找到差异详情'); + return; + } + + // 检查当前状态 - 如果大部分是展开的，就全部收起；否则全部展开 + let expandedCount = 0; + collapseElements.forEach(element => { + if (element.classList.contains('show')) { + expandedCount++; + } + }); + + const shouldExpand = expandedCount < collapseElements.length / 2; + + collapseElements.forEach(element => { + if (shouldExpand) { + // 展开 + element.classList.add('show'); + } else { + // 收起 + element.classList.remove('show'); + } + }); + + // 更新按钮文本 + if (shouldExpand) { + toggleButton.innerHTML = '全部收起'; + showAlert('success', `已展开 ${collapseElements.length} 个差异详情`); + } else { + toggleButton.innerHTML = '全部展开'; + showAlert('success', `已收起 ${collapseElements.length} 个差异详情`); + } +} + // 显示差异数据的原生数据 function showDifferenceRawData(keyStr) { showRawData(keyStr); // 复用相同的原生数据显示逻辑 @@ -4284,10 +4434,6 @@ function renderRawDataContent() { ${item.displayName}
- @@ -4295,7 +4441,7 @@ function renderRawDataContent() {

主键: ${keyValue}

-
+ 
${escapeHtml(jsonData)}