Skip to content

Commit 05c9922

Browse files
Evil0ctalEvil0ctal
committed
fix(curl-converter): 修复对比功能UI细节问题
- 移除差异表格的 help 光标，恢复正常鼠标样式 - 优化对比输入框布局，减少两个输入框之间的间距 - 增加输入框高度便于粘贴长命令 - 长参数值截断显示并添加 title 属性显示完整值
1 parent 53c0b76 commit 05c9922

3 files changed

Lines changed: 134 additions & 40 deletions

File tree

‎tools/network/curl-converter/curl-converter.css‎

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -334,23 +334,33 @@
334334
.compare-container {
335335
display: grid;
336336
grid-template-columns: 1fr 1fr;
337-
gap: 16px;
337+
gap: 12px;
338338
margin-bottom: 16px;
339339
}
340340

341+
.compare-input {
342+
display: flex;
343+
flex-direction: column;
344+
}
345+
341346
.compare-input label {
342347
display: block;
343-
margin-bottom: 8px;
348+
margin-bottom: 6px;
344349
font-weight: 500;
350+
font-size: 0.9rem;
345351
}
346352

347353
.compare-input textarea {
348-
min-height: 150px;
354+
min-height: 180px;
355+
flex: 1;
356+
resize: vertical;
349357
}
350358

351359
/* 对比结果 */
352360
.compare-result {
353361
margin-top: 20px;
362+
overflow: hidden;
363+
max-width: 100%;
354364
}
355365

356366
.diff-summary {
@@ -359,6 +369,7 @@
359369
border-radius: 10px;
360370
padding: 16px;
361371
margin-bottom: 20px;
372+
overflow: hidden;
362373
}
363374

364375
.diff-summary h4 {
@@ -367,7 +378,7 @@
367378

368379
.diff-stats {
369380
display: flex;
370-
gap: 16px;
381+
gap: 12px;
371382
flex-wrap: wrap;
372383
}
373384

@@ -411,6 +422,7 @@
411422
border: 1px solid var(--border-color);
412423
border-radius: 10px;
413424
padding: 16px;
425+
overflow: hidden;
414426
}
415427

416428
.diff-section h5 {
@@ -422,32 +434,100 @@
422434
.diff-content {
423435
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
424436
font-size: 0.85rem;
437+
word-break: break-all;
438+
overflow-wrap: break-word;
439+
padding: 12px;
440+
background: var(--bg-tertiary);
441+
border-radius: 6px;
442+
max-height: 200px;
443+
overflow-y: auto;
444+
}
445+
446+
.diff-content > div {
447+
padding: 4px 0;
448+
word-break: break-all;
449+
}
450+
451+
/* 差异表格容器 */
452+
.diff-table-container {
453+
overflow-x: auto;
454+
max-width: 100%;
425455
}
426456

427457
.diff-table {
428458
width: 100%;
429459
border-collapse: collapse;
430460
font-size: 0.85rem;
461+
table-layout: fixed;
431462
}
432463

433464
.diff-table th,
434465
.diff-table td {
435466
padding: 8px 10px;
436467
text-align: left;
437468
border: 1px solid var(--border-color);
469+
vertical-align: top;
438470
}
439471

440472
.diff-table th {
441473
background: var(--bg-tertiary);
442474
font-weight: 600;
475+
white-space: nowrap;
476+
}
477+
478+
/* 差异表格列宽分配 */
479+
.diff-table th:nth-child(1),
480+
.diff-table td:nth-child(1) {
481+
width: 15%;
482+
min-width: 100px;
483+
word-break: break-all;
484+
}
485+
486+
.diff-table th:nth-child(2),
487+
.diff-table td:nth-child(2),
488+
.diff-table th:nth-child(3),
489+
.diff-table td:nth-child(3) {
490+
width: 35%;
491+
max-width: 300px;
492+
word-break: break-all;
493+
overflow-wrap: break-word;
494+
}
495+
496+
.diff-table th:nth-child(4),
497+
.diff-table td:nth-child(4) {
498+
width: 15%;
499+
min-width: 70px;
500+
white-space: nowrap;
443501
}
444502

445503
.diff-table td {
446504
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
505+
font-size: 0.8rem;
506+
line-height: 1.4;
507+
}
508+
509+
/* 长值单元格 */
510+
.diff-table td.diff-value {
511+
max-height: 100px;
512+
overflow: hidden;
513+
text-overflow: ellipsis;
447514
}
448515

449516
.diff-table .diff-status {
450517
white-space: nowrap;
518+
text-align: center;
519+
}
520+
521+
.diff-table .diff-key {
522+
font-weight: 500;
523+
color: var(--color-primary);
524+
word-break: break-all;
525+
}
526+
527+
.diff-table .diff-value {
528+
word-break: break-all;
529+
overflow-wrap: break-word;
530+
max-width: 300px;
451531
}
452532

453533
.diff-table tr.diff-added td { background: rgba(16, 185, 129, 0.1); }

‎tools/network/curl-converter/curl-converter.html‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -234,45 +234,51 @@ <h5 data-i18n="tools.curl-converter.urlDiff">URL 差异</h5>
234234
</div>
235235
<div class="diff-section" id="diff-query">
236236
<h5 data-i18n="tools.curl-converter.queryDiff">查询参数差异</h5>
237-
<table class="diff-table">
238-
<thead>
239-
<tr>
240-
<th data-i18n="tools.curl-converter.paramName">参数名</th>
241-
<th data-i18n="tools.curl-converter.firstValue">第一个值</th>
242-
<th data-i18n="tools.curl-converter.secondValue">第二个值</th>
243-
<th data-i18n="tools.curl-converter.status">状态</th>
244-
</tr>
245-
</thead>
246-
<tbody></tbody>
247-
</table>
237+
<div class="diff-table-container">
238+
<table class="diff-table">
239+
<thead>
240+
<tr>
241+
<th data-i18n="tools.curl-converter.paramName">参数名</th>
242+
<th data-i18n="tools.curl-converter.firstValue">第一个值</th>
243+
<th data-i18n="tools.curl-converter.secondValue">第二个值</th>
244+
<th data-i18n="tools.curl-converter.status">状态</th>
245+
</tr>
246+
</thead>
247+
<tbody></tbody>
248+
</table>
249+
</div>
248250
</div>
249251
<div class="diff-section" id="diff-headers">
250252
<h5 data-i18n="tools.curl-converter.headersDiff">请求头差异</h5>
251-
<table class="diff-table">
252-
<thead>
253-
<tr>
254-
<th data-i18n="tools.curl-converter.headerName">请求头</th>
255-
<th data-i18n="tools.curl-converter.firstValue">第一个值</th>
256-
<th data-i18n="tools.curl-converter.secondValue">第二个值</th>
257-
<th data-i18n="tools.curl-converter.status">状态</th>
258-
</tr>
259-
</thead>
260-
<tbody></tbody>
261-
</table>
253+
<div class="diff-table-container">
254+
<table class="diff-table">
255+
<thead>
256+
<tr>
257+
<th data-i18n="tools.curl-converter.headerName">请求头</th>
258+
<th data-i18n="tools.curl-converter.firstValue">第一个值</th>
259+
<th data-i18n="tools.curl-converter.secondValue">第二个值</th>
260+
<th data-i18n="tools.curl-converter.status">状态</th>
261+
</tr>
262+
</thead>
263+
<tbody></tbody>
264+
</table>
265+
</div>
262266
</div>
263267
<div class="diff-section" id="diff-body">
264268
<h5 data-i18n="tools.curl-converter.bodyDiff">请求体差异</h5>
265-
<table class="diff-table">
266-
<thead>
267-
<tr>
268-
<th data-i18n="tools.curl-converter.paramName">参数名</th>
269-
<th data-i18n="tools.curl-converter.firstValue">第一个值</th>
270-
<th data-i18n="tools.curl-converter.secondValue">第二个值</th>
271-
<th data-i18n="tools.curl-converter.status">状态</th>
272-
</tr>
273-
</thead>
274-
<tbody></tbody>
275-
</table>
269+
<div class="diff-table-container">
270+
<table class="diff-table">
271+
<thead>
272+
<tr>
273+
<th data-i18n="tools.curl-converter.paramName">参数名</th>
274+
<th data-i18n="tools.curl-converter.firstValue">第一个值</th>
275+
<th data-i18n="tools.curl-converter.secondValue">第二个值</th>
276+
<th data-i18n="tools.curl-converter.status">状态</th>
277+
</tr>
278+
</thead>
279+
<tbody></tbody>
280+
</table>
281+
</div>
276282
</div>
277283
</div>
278284
</div>

‎tools/network/curl-converter/curl-converter.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -781,10 +781,18 @@
781781
items.forEach(item => {
782782
const tr = document.createElement('tr');
783783
tr.className = `diff-${item.status}`;
784+
785+
// 格式化显示值，超长值截断并添加 title 提示
786+
const val1Str = String(item.val1);
787+
const val2Str = String(item.val2);
788+
const maxLen = 100;
789+
const displayVal1 = val1Str.length > maxLen ? val1Str.slice(0, maxLen) + '...' : val1Str;
790+
const displayVal2 = val2Str.length > maxLen ? val2Str.slice(0, maxLen) + '...' : val2Str;
791+
784792
tr.innerHTML = `
785-
<td>${escapeHtml(item.key)}</td>
786-
<td>${escapeHtml(String(item.val1))}</td>
787-
<td>${escapeHtml(String(item.val2))}</td>
793+
<td class="diff-key" title="${escapeHtml(item.key)}">${escapeHtml(item.key)}</td>
794+
<td class="diff-value" title="${escapeHtml(val1Str)}">${escapeHtml(displayVal1)}</td>
795+
<td class="diff-value" title="${escapeHtml(val2Str)}">${escapeHtml(displayVal2)}</td>
788796
<td class="diff-status"><span class="status-badge ${item.status}">${getStatusText(item.status)}</span></td>
789797
`;
790798
tbody.appendChild(tr);

0 commit comments

Comments
 (0)