新增意见展开按钮 删除冗余查看按钮 修复差异字段查询

static/js/app.js

@@ -912,7 +912,66 @@ function displayDifferences() {
     const currentSearchValue = document.getElementById('differenceSearch')?.value || '';
     
     if (!filteredDifferenceResults || !filteredDifferenceResults.length) {
-        differencesContainer.innerHTML = '<p class="text-success"><i class="fas fa-check"></i> 未发现差异</p>';
+        // 显示搜索和控制界面，即使没有结果
+        let html = `
+            <!-- 字段筛选按钮和操作按钮 -->
+            <div class="mb-3">
+                <div class="row">
+                    <div class="col-md-8">
+                        <div class="btn-group btn-group-sm flex-wrap" role="group">
+                            <button type="button" class="btn btn-outline-primary active" onclick="filterByField('')">
+                                全部 (0)
+                            </button>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="d-flex justify-content-end">
+                            <button type="button" class="btn btn-outline-primary btn-sm me-2" onclick="toggleAllDifferenceCollapse()">
+                                <i class="fas fa-expand-alt"></i> <span id="toggleAllText">全部收起</span>
+                            </button>
+                            <button type="button" class="btn btn-success btn-sm" onclick="copyDifferenceKeys()">
+                                <i class="fas fa-copy"></i> 复制差异主键
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 搜索框 -->
+            <div class="mb-3">
+                <div class="input-group">
+                    <span class="input-group-text"><i class="fas fa-search"></i></span>
+                    <input type="text" class="form-control" placeholder="搜索主键、字段名或值内容..." 
+                           onkeypress="if(event.key === 'Enter') searchDifferenceResults(this.value)" 
+                           id="differenceSearch"
+                           value="${currentSearchValue}">
+                    <button class="btn btn-outline-secondary" type="button" onclick="searchDifferenceResults(document.getElementById('differenceSearch').value)">
+                        <i class="fas fa-search"></i> 搜索
+                    </button>
+                    <button class="btn btn-outline-secondary" type="button" onclick="clearDifferenceSearch()">
+                        <i class="fas fa-times"></i> 清除
+                    </button>
+                </div>
+            </div>
+            
+            <!-- 无结果提示 -->
+            <div class="alert alert-info text-center">
+                <i class="fas fa-search"></i> 
+                ${currentSearchValue ? `没有找到包含"${escapeHtml(currentSearchValue)}"的差异记录` : '未发现差异'}
+                ${currentSearchValue ? '<br><small class="text-muted">请尝试其他搜索条件或点击"清除"按钮查看所有结果</small>' : ''}
+            </div>
+        `;
+        
+        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() {
                 </div>
                 <div class="col-md-4">
                     <div class="d-flex justify-content-end">
+                        <button type="button" class="btn btn-outline-primary btn-sm me-2" onclick="toggleAllDifferenceCollapse()">
+                            <i class="fas fa-expand-alt"></i> <span id="toggleAllText">全部收起</span>
+                        </button>
                         <button type="button" class="btn btn-success btn-sm" onclick="copyDifferenceKeys()">
                             <i class="fas fa-copy"></i> 复制差异主键
                         </button>
@@ -1031,18 +1093,14 @@ function displayDifferences() {
                             <span class="badge bg-primary ms-2">${diffs.length} 个差异字段</span>
                         </div>
                         <div class="col-auto">
-                            <button class="btn btn-sm btn-outline-secondary" type="button" 
-                                    data-bs-toggle="collapse" data-bs-target="#keyGroup${globalIndex}">
-                                <i class="fas fa-chevron-down"></i> 展开/收起
-                            </button>
-                            <button class="btn btn-sm btn-outline-info ms-2" onclick='showDifferenceRawData(${JSON.stringify(JSON.stringify(keyObj))})'>
+                            <button class="btn btn-sm btn-outline-info" onclick='showDifferenceRawData(${JSON.stringify(JSON.stringify(keyObj))})'>
                                 <i class="fas fa-code"></i> 原生数据
                             </button>
                         </div>
                     </div>
                     <p class="mb-0 mt-2"><strong>主键:</strong> ${formatCompositeKey(keyObj)}</p>
                 </div>
-                <div class="collapse" id="keyGroup${globalIndex}">
+                <div class="collapse show" id="keyGroup${globalIndex}">
                     <div class="card-body">
         `;
         
@@ -1082,12 +1140,8 @@ function displayDifferences() {
                                 ${isJson ? '<span class="badge bg-info ms-2">JSON</span>' : ''}
                                 ${isArray ? '<span class="badge bg-warning ms-2">数组</span>' : ''}
                             </div>
-                            <button class="btn btn-sm btn-outline-secondary" type="button" 
-                                    data-bs-toggle="collapse" data-bs-target="#${fieldId}">
-                                <i class="fas fa-eye"></i> 查看
-                            </button>
                         </div>
-                        <div class="collapse" id="${fieldId}">
+                        <div class="collapse show" id="${fieldId}">
                             <div class="row">
                                 <div class="col-md-6">
                                     <div class="card">
@@ -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 = '<p class="text-muted"><i class="fas fa-info-circle"></i> 没有完全相同的记录</p>';
+        // 显示搜索和控制界面，即使没有结果
+        let html = `
+            <!-- 分页控制 -->
+            <div class="row mb-3">
+                <div class="col-md-6">
+                    <div class="d-flex align-items-center">
+                        <label class="form-label me-2 mb-0">每页显示:</label>
+                        <select class="form-select form-select-sm me-2" style="width: auto;" onchange="changePageSize(this.value)">
+                            <option value="5" ${identicalPageSize == 10 ? 'selected' : ''}>10条</option>
+                            <option value="10" ${identicalPageSize == 50 ? 'selected' : ''}>50条</option>
+                            <option value="20" ${identicalPageSize == 100 ? 'selected' : ''}>100条</option>
+                            <option value="50" ${identicalPageSize == 200 ? 'selected' : ''}>200条</option>
+                            <option value="100" ${identicalPageSize == 500 ? 'selected' : ''}>500条</option>
+                            <option value="custom">自定义</option>
+                        </select>
+                        <input type="number" class="form-control form-control-sm me-2" style="width: 80px; display: none;" 
+                               id="customPageSize" placeholder="数量" min="1" max="1000" 
+                               onchange="setCustomPageSize(this.value)" onkeypress="handleCustomPageSizeEnter(event)">
+                        <span class="ms-2 text-muted">共 0 条记录</span>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="d-flex justify-content-end align-items-center">
+                        <!-- 无分页控制 -->
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 搜索框 -->
+            <div class="mb-3">
+                <div class="input-group">
+                    <span class="input-group-text"><i class="fas fa-search"></i></span>
+                    <input type="text" class="form-control" placeholder="搜索主键或字段内容..." 
+                           onkeypress="if(event.key === 'Enter') searchIdenticalResults(this.value)" 
+                           id="identicalSearch"
+                           value="${currentIdenticalSearchTerm || ''}">
+                    <button class="btn btn-outline-secondary" type="button" onclick="searchIdenticalResults(document.getElementById('identicalSearch').value)">
+                        <i class="fas fa-search"></i> 搜索
+                    </button>
+                    <button class="btn btn-outline-secondary" type="button" onclick="clearIdenticalSearch()">
+                        <i class="fas fa-times"></i> 清除
+                    </button>
+                </div>
+            </div>
+            
+            <!-- 无结果提示 -->
+            <div class="alert alert-info text-center">
+                <i class="fas fa-search"></i> 
+                ${(currentIdenticalSearchTerm || currentSearchValue) ? `没有找到包含"${escapeHtml(currentIdenticalSearchTerm || currentSearchValue)}"的相同记录` : '没有完全相同的记录'}
+                ${(currentIdenticalSearchTerm || currentSearchValue) ? '<br><small class="text-muted">请尝试其他搜索条件或点击"清除"按钮查看所有结果</small>' : ''}
+            </div>
+        `;
+        
+        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() {
                             <span class="badge bg-success ms-2">完全匹配</span>
                         </div>
                         <div class="col-auto">
-                            <button class="btn btn-sm btn-outline-secondary me-2" type="button" 
-                                    data-bs-toggle="collapse" data-bs-target="#collapse${globalIndex}">
-                                <i class="fas fa-eye"></i> 查看详情
-                            </button>
                             <button class="btn btn-sm btn-outline-info" onclick='showRawData(${JSON.stringify(JSON.stringify(result.key))})'>
                                 <i class="fas fa-code"></i> 原生数据
                             </button>
@@ -1254,7 +1373,7 @@ function displayIdenticalResults() {
                     </div>
                     <p class="mb-0 mt-2"><strong>主键:</strong> ${formatCompositeKey(result.key)}</p>
                 </div>
-                <div class="collapse" id="collapse${globalIndex}">
+                <div class="collapse show" id="collapse${globalIndex}">
                     <div class="card-body">
         `;
         
@@ -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() {
                             <span class="badge ${envBadgeClass} ms-2">${item.displayName}</span>
                         </div>
                         <div class="col-auto">
-                            <button class="btn btn-sm btn-outline-secondary me-2" type="button" 
-                                    data-bs-toggle="collapse" data-bs-target="#rawCollapse${globalIndex}">
-                                <i class="fas fa-eye"></i> 查看详情
-                            </button>
                             <button class="btn btn-sm btn-outline-info" onclick='copyRawRecord(${JSON.stringify(JSON.stringify(item.data))})'>
                                 <i class="fas fa-copy"></i> 复制
                             </button>
@@ -4295,7 +4441,7 @@ function renderRawDataContent() {
                     </div>
                     <p class="mb-0 mt-2"><strong>主键:</strong> ${keyValue}</p>
                 </div>
-                <div class="collapse" id="rawCollapse${globalIndex}">
+                <div class="collapse show" id="rawCollapse${globalIndex}">
                     <div class="card-body">
                         <pre class="bg-light p-3 rounded" style="max-height: 500px; overflow-y: auto; font-size: 0.9em; line-height: 1.4;">${escapeHtml(jsonData)}</pre>
                     </div>