调整一下ui,字符比较模式和调色盘高亮改为上下排列,按钮改为复选框.

gogogo

<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>文本对比工具</title>
<style>
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f4f8;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 20px;
}
.description {
text-align: center;
color: #7f8c8d;
margin-bottom: 20px;
}
.input-section {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.textarea-wrapper {
flex: 1;
}
textarea {
width: 100%;
height: 150px;
padding: 15px;
border: 1px solid #bdc3c7;
border-radius: 8px;
resize: vertical;
font-size: 14px;
transition: border-color 0.3s ease;
}
textarea:focus {
outline: none;
border-color: #3498db;
}
.button-group {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
button {
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
.output-section {
display: flex;
border: 1px solid #bdc3c7;
border-radius: 8px;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s ease;
}
.output-section.visible {
opacity: 1;
}
.output-wrapper {
flex: 1;
display: flex;
}
.line-numbers {
padding: 15px 10px;
background-color: #ecf0f1;
border-right: 1px solid #bdc3c7;
text-align: right;
color: #7f8c8d;
font-size: 14px;
min-width: 30px;
}
.output {
flex: 1;
padding: 15px;
white-space: pre-wrap;
word-break: break-all;
min-height: 200px;
overflow-y: scroll;
font-size: 14px;
line-height: 1.6;
}
.divider {
width: 2px;
background-color: #bdc3c7;
}
.diff {
background-color: #ffeaa7;
padding: 2px 0;
}
.same {
background-color: #add8e6;
padding: 2px 0;
}
.toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.toggle-label {
margin-left: 10px;
line-height: 34px;
}
</style>
</head>
<body>
<div class=“container”>
<h1>文本对比工具</h1>
<p class=“description”>输入两段文本，点击"对比文本"按钮查看差异。黄色高亮显示不同之处，蓝色高亮显示相同之处。</p>
<div class=“toggle-container”>
<div class=“toggle-container-item”>
<label class=“toggle-switch”>
<input type=“checkbox” id=“compareMode”>
<span class=“slider”></span>
</label>
<span class=“toggle-label”>字符比较模式（默认为段落比较，开启后使用贪婪匹配最大相似文本）</span>
</div>
<div class=“toggle-container-item”>
<label class=“toggle-switch”>
<input type=“checkbox” id=“paletteMode”>
<span class=“slider”></span>
</label>
<span class=“toggle-label”>调色盘高亮（默认黄色显示不同文本，开启后使用蓝色显示相同文本）</span>
</div>
</div>
<div class=“input-section”>
<div class=“textarea-wrapper”>
<textarea id=“text1” placeholder=“输入第一段文本”></textarea>
</div>
<div class=“textarea-wrapper”>
<textarea id=“text2” placeholder=“输入第二段文本”></textarea>
</div>
</div>
<div class=“button-group”>
<button onclick=“compareTexts()”>对比文本</button>
<button onclick=“clearTexts()”>清除文本</button>
</div>
<div class=“output-section” id=“outputSection”>
<div class=“output-wrapper”>
<div class=“line-numbers” id=“lineNumbers1”></div>
<div id=“output1” class=“output”></div>
</div>
<div class=“divider”></div>
<div class=“output-wrapper”>
<div class=“line-numbers” id=“lineNumbers2”></div>
<div id=“output2” class=“output”></div>
</div>
</div>
</div>
<script>
    // 页面加载时恢复保存的文本
    window.onload = function() {
        document.getElementById('text1').value = localStorage.getItem('text1') || '';
        document.getElementById('text2').value = localStorage.getItem('text2') || '';
    }

    function compareTexts() {
        const text1 = document.getElementById('text1').value;
        const text2 = document.getElementById('text2').value;
        const isCharMode = document.getElementById('compareMode').checked;
        const isPaletteMode = document.getElementById('paletteMode').checked;

        // 保存文本到localStorage
        localStorage.setItem('text1', text1);
        localStorage.setItem('text2', text2);

        const output1 = document.getElementById('output1');
        const output2 = document.getElementById('output2');
        const lineNumbers1 = document.getElementById('lineNumbers1');
        const lineNumbers2 = document.getElementById('lineNumbers2');

        const result1 = highlightDifferences(text1, text2, isCharMode, isPaletteMode);
        const result2 = highlightDifferences(text2, text1, isCharMode, isPaletteMode);

        output1.innerHTML = result1.html;
        output2.innerHTML = result2.html;

        // 显示行号
        lineNumbers1.innerHTML = generateLineNumbers(result1.lineCount);
        lineNumbers2.innerHTML = generateLineNumbers(result2.lineCount);

        // 设置滚动同步
        setupScrollSync(output1, output2);

        // 显示结果区域
        const outputSection = document.getElementById('outputSection');
        outputSection.classList.add('visible');
    }
function escapeHTML(html) {
return html
.replace(/&/g, ‘&’)
.replace(/</g, ‘<’)
.replace(/>/g, ‘>’)
.replace(/“/g, ‘”’)
.replace(/‘/g, ’'');
}

function highlightDifferences(text1, text2, isCharMode, isPaletteMode) {
const lines1 = text1.split(‘\n’);
const lines2 = text2.split(‘\n’);
let result = '';
let lineCount = 0;
for (let i = 0; i < Math.max(lines1.length, lines2.length); i++) {
    const line1 = lines1[i] ? escapeHTML(lines1[i]) : '';
    const line2 = lines2[i] ? escapeHTML(lines2[i]) : '';
    let lineResult = '';

            if (isCharMode) {
                const lcs = longestCommonSubsequence(line1, line2);
                lineResult = isPaletteMode ? highlightCharSame(line1, line2, lcs) : highlightCharDifferences(line1, line2, lcs);
            } else {
                const words1 = line1.split(/\s+/);
                const words2 = line2.split(/\s+/);
                const lcs = longestCommonSubsequence(words1.join(' '), words2.join(' '));
                lineResult = isPaletteMode ? highlightWordSame(words1, words2, lcs) : highlightWordDifferences(words1, words2, lcs);
            }

            result += lineResult + '\n';
            lineCount++;
        }

        return { html: result, lineCount: lineCount };
    }

    function longestCommonSubsequence(s1, s2) {
        const m = s1.length;
        const n = s2.length;
        const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));

        for (let i = 1; i <= m; i++) {
            for (let j = 1; j <= n; j++) {
                if (s1[i - 1] === s2[j - 1]) {
                    dp[i][j] = dp[i - 1][j - 1] + 1;
                } else {
                    dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
                }
            }
        }

        let lcs = '';
        let i = m, j = n;
        while (i > 0 && j > 0) {
            if (s1[i - 1] === s2[j - 1]) {
                lcs = s1[i - 1] + lcs;
                i--;
                j--;
            } else if (dp[i - 1][j] > dp[i][j - 1]) {
                i--;
            } else {
                j--;
            }
        }

        return lcs;
    }

    function highlightCharDifferences(line1, line2, lcs) {
        let result = '';
        let i = 0, j = 0;

        for (let k = 0; k < lcs.length; k++) {
            while (i < line1.length && line1[i] !== lcs[k]) {
                result += `<span class="diff">${line1[i]}</span>`;
                i++;
            }
            while (j < line2.length && line2[j] !== lcs[k]) {
                j++;
            }
            if (i < line1.length && line1[i] === lcs[k]) {
                result += line1[i];
                i++;
            }
            if (j < line2.length && line2[j] === lcs[k]) {
                j++;
            }
        }

        while (i < line1.length) {
            result += `<span class="diff">${line1[i]}</span>`;
            i++;
        }

        return result;
    }

    function highlightCharSame(line1, line2, lcs) {
        let result = '';
        let i = 0, j = 0;

        for (let k = 0; k < lcs.length; k++) {
            while (i < line1.length && line1[i] !== lcs[k]) {
                result += line1[i];
                i++;
            }
            while (j < line2.length && line2[j] !== lcs[k]) {
                j++;
            }
            if (i < line1.length && line1[i] === lcs[k]) {
                result += `<span class="same">${line1[i]}</span>`;
                i++;
            }
            if (j < line2.length && line2[j] === lcs[k]) {
                j++;
            }
        }

        while (i < line1.length) {
            result += line1[i];
            i++;
        }

        return result;
    }

    function highlightWordDifferences(words1, words2, lcs) {
        let result = '';
        let i = 0, j = 0;

        for (let k = 0; k < lcs.length; k++) {
            while (i < words1.length && words1[i] !== lcs[k]) {
                result += `<span class="diff">${words1[i]}</span> `;
                i++;
            }
            while (j < words2.length && words2[j] !== lcs[k]) {
                j++;
            }
            if (i < words1.length && words1[i] === lcs[k]) {
                result += words1[i] + ' ';
                i++;
            }
            if (j < words2.length && words2[j] === lcs[k]) {
                j++;
            }
        }

        while (i < words1.length) {
            result += `<span class="diff">${words1[i]}</span> `;
            i++;
        }

        return result;
    }

    function highlightWordSame(words1, words2, lcs) {
        let result = '';
        let i = 0, j = 0;

        for (let k = 0; k < lcs.length; k++) {
            while (i < words1.length && words1[i] !== lcs[k]) {
                result += words1[i] + ' ';
                i++;
            }
            while (j < words2.length && words2[j] !== lcs[k]) {
                j++;
            }
            if (i < words1.length && words1[i] === lcs[k]) {
                result += `<span class="same">${words1[i]}</span> `;
                i++;
            }
            if (j < words2.length && words2[j] === lcs[k]) {
                j++;
            }
        }

        while (i < words1.length) {
            result += words1[i] + ' ';
            i++;
        }

        return result;
    }

    function generateLineNumbers(count) {
        return Array.from({ length: count }, (_, i) => i + 1).join('<br>');
    }

    function setupScrollSync(element1, element2) {
        element1.onscroll = function() {
            element2.scrollTop = element1.scrollTop;
        };
        element2.onscroll = function() {
            element1.scrollTop = element2.scrollTop;
        };
    }

    function clearTexts() {
        document.getElementById('text1').value = '';
        document.getElementById('text2').value = '';
        document.getElementById('output1').innerHTML = '';
        document.getElementById('output2').innerHTML = '';
        document.getElementById('lineNumbers1').innerHTML = '';
        document.getElementById('lineNumbers2').innerHTML = '';
        localStorage.removeItem('text1');
        localStorage.removeItem('text2');
        document.getElementById('outputSection').classList.remove('visible');
    }
</script>
</body>
</html>

AI

#1 gogogo 要将字符比较模式和调色盘高亮更改为上下排列，并将按钮改为复选框，你需要对HTML结构和相关的CSS样式进行一些调整。以下是根据你的要求修改后的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对比工具</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f4f8;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .description {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        .input-section {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .textarea-wrapper {
            flex: 1;
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            resize: vertical;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        textarea:focus {
            outline: none;
            border-color: #3498db;
        }
        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        button {
            padding: 12px 24px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #2980b9;
        }
        .output-section {
            display: flex;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .output-section.visible {
            opacity: 1;
        }
        .output-wrapper {
            flex: 1;
            display: flex;
        }
        .line-numbers {
            padding: 15px 10px;
            background-color: #ecf0f1;
            border-right: 1px solid #bdc3c7;
            text-align: right;
            color: #7f8c8d;
            font-size: 14px;
            min-width: 30px;
        }
        .output {
            flex: 1;
            padding: 15px;
            white-space: pre-wrap;
            word-break: break-all;
            min-height: 200px;
            overflow-y: scroll;
            font-size: 14px;
            line-height: 1.6;
        }
        .divider {
            width: 2px;
            background-color: #bdc3c7;
        }
        .diff {
            background-color: #ffeaa7;
            padding: 2px 0;
        }
        .same {
            background-color: #add8e6;
            padding: 2px 0;
        }
        .toggle-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }
        .toggle-item {
            display: flex;
            align-items: center;
        }
        .toggle-label {
            margin-left: 10px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文本对比工具</h1>
        <p class="description">输入两段文本，点击"对比文本"按钮查看差异。黄色高亮显示不同之处，蓝色高亮显示相同之处。</p>
        <div class="toggle-container">
            <div class="toggle-item">
                <label>
                    <input type="checkbox" id="compareMode">
                    <span class="toggle-label">字符比较模式（默认为段落比较，开启后使用贪婪匹配最大相似文本）</span>
                </label>
            </div>
            <div class="toggle-item">
                <label>
                    <input type="checkbox" id="paletteMode">
                    <span class="toggle-label">调色盘高亮（默认黄色显示不同文本，开启后使用蓝色显示相同文本）</span>
                </label>
            </div>
        </div>
        <div class="input-section">
            <div class="textarea-wrapper">
                <textarea id="text1" placeholder="输入第一段文本"></textarea>
            </div>
            <div class="textarea-wrapper">
                <textarea id="text2" placeholder="输入第二段文本"></textarea>
            </div>
        </div>
        <div class="button-group">
            <button onclick="compareTexts()">对比文本</button>
            <button onclick="clearTexts()">清除文本</button>
        </div>
        <div class="output-section" id="outputSection">
            <div class="output-wrapper">
                <div class="line-numbers" id="lineNumbers1"></div>
                <div id="output1" class="output"></div>
            </div>
            <div class="divider"></div>
            <div class="output-wrapper">
                <div class="line-numbers" id="lineNumbers2"></div>
                <div id="output2" class="output"></div>
            </div>
        </div>
    </div>
    <script>
        // 页面加载时恢复保存的文本
        window.onload = function() {
            document.getElementById('text1').value = localStorage.getItem('text1') || '';
            document.getElementById('text2').value = localStorage.getItem('text2') || '';
        }
        
        function compareTexts() {
            const text1 = document.getElementById('text1').value;
            const text2 = document.getElementById('text2').value;
            const isCharMode = document.getElementById('compareMode').checked;
            const isPaletteMode = document.getElementById('paletteMode').checked;
            // 保存文本到localStorage
            localStorage.setItem('text1', text1);
            localStorage.setItem('text2', text2);
            const output1 = document.getElementById('output1');
            const output2 = document.getElementById('output2');
            const lineNumbers1 = document.getElementById('lineNumbers1');
            const lineNumbers2 = document.getElementById('lineNumbers2');
            const result1 = highlightDifferences(text1, text2, isCharMode, isPaletteMode);
            const result2 = highlightDifferences(text2, text1, isCharMode, isPaletteMode);
            output1.innerHTML = result1.html;
            output2.innerHTML = result2.html;
            // 显示行号
            lineNumbers1.innerHTML = generateLineNumbers(result1.lineCount);
            lineNumbers2.innerHTML = generateLineNumbers(result2.lineCount);
            // 设置滚动同步
            setupScrollSync(output1, output2);
            // 显示结果区域
            const outputSection = document.getElementById('outputSection');
            outputSection.classList.add('visible');
        }

        // 省略其余的 JavaScript 代码，保持不变...

        function clearTexts() {
            document.getElementById('text1').value = '';
            document.getElementById('text2').value = '';
            document.getElementById('output1').innerHTML = '';
            document.getElementById('output2').innerHTML = '';
            document.getElementById('lineNumbers1').innerHTML = '';
            document.getElementById('lineNumbers2').innerHTML = '';
            localStorage.removeItem('text1');
            localStorage.removeItem('text2');
            document.getElementById('outputSection').classList.remove('visible');
        }
    </script>
</body>
</html>

修改内容：

布局调整：在toggle-container中更改为上下排列，使用flex-direction: column;。
复选框：将原来的label用作复选框，将内容包裹在label标签内部，去掉原来的开关样式。
CSS更新：相应地添加了一些样式以保证复选框和文本的对齐。

这样，界面就被调整为你所需要的形式，复选框也替代了原有按钮。你可以根据需要调整样式，进一步美化界面。

右肩有点痛

调整哪里的UI？

AI

#3 右肩有点痛以下是需要调整的UI部分：

字符比较模式和调色盘高亮排列：
- 将原来的水平布局更改为垂直布局，使字符比较模式和调色盘高亮的选项上下排列。
将按钮改为复选框：
- 把原有的切换开关样式改为复选框，使用简单的<input type="checkbox">替代，并移除原有的切换开关效果。

具体修改

修改toggle-container的CSS，使其呈现为垂直布局：

   .toggle-container {
       display: flex;
       flex-direction: column;  /* 改为垂直布局 */
       gap: 10px;  /* 调整间距 */
       margin-bottom: 20px;
   }

调整toggle-item的HTML结构，使复选框和标签组合在一起：

   <div class="toggle-item">
       <label>
           <input type="checkbox" id="compareMode">
           <span class="toggle-label">字符比较模式（默认为段落比较，开启后使用贪婪匹配最大相似文本）</span>
       </label>
   </div>
   <div class="toggle-item">
       <label>
           <input type="checkbox" id="paletteMode">
           <span class="toggle-label">调色盘高亮（默认黄色显示不同文本，开启后使用蓝色显示相同文本）</span>
       </label>
   </div>

最终解决方案

你最终的HTML代码中，字符比较模式和调色盘高亮的部分应如此更新。这会让它们在界面上垂直显示，并将每个选项改为复选框。若想实现上述调整，可以使用我在前一个回答中提供的完整代码，确保持有这些修改。

gogogo

有点问题,右侧的文本框的右边距有问题,继续

AI

#5 gogogo 感谢你的反馈！为了解决右侧文本框的右边距问题，我们可以调整一些CSS样式，以确保两边的文本框之间留有合适的间隔，同时使右侧文本框有缓冲空间。

具体修改:

调整 textarea-wrapper 的样式：
- 给右侧的文本框添加一个右边距，这样可以避免它贴得太近。

.textarea-wrapper {
    flex: 1;
    margin-right: 20px; /* 右侧文本框添加右边距 */
}

.textarea-wrapper:last-child {
    margin-right: 0; /* 最后一个文本框去掉右边距 */
}

更新后的HTML和CSS：

以下是经过调整后的CSS样式和HTML结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对比工具</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f4f8;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .description {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        .input-section {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .textarea-wrapper {
            flex: 1;
            margin-right: 20px; /* 右侧文本框添加右边距 */
        }
        .textarea-wrapper:last-child {
            margin-right: 0; /* 最后一个文本框去掉右边距 */
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            resize: vertical;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        textarea:focus {
            outline: none;
            border-color: #3498db;
        }
        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        button {
            padding: 12px 24px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #2980b9;
        }
        .output-section {
            display: flex;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .output-section.visible {
            opacity: 1;
        }
        .output-wrapper {
            flex: 1;
            display: flex;
        }
        .line-numbers {
            padding: 15px 10px;
            background-color: #ecf0f1;
            border-right: 1px solid #bdc3c7;
            text-align: right;
            color: #7f8c8d;
            font-size: 14px;
            min-width: 30px;
        }
        .output {
            flex: 1;
            padding: 15px;
            white-space: pre-wrap;
            word-break: break-all;
            min-height: 200px;
            overflow-y: scroll;
            font-size: 14px;
            line-height: 1.6;
        }
        .divider {
            width: 2px;
            background-color: #bdc3c7;
        }
        .diff {
            background-color: #ffeaa7;
            padding: 2px 0;
        }
        .same {
            background-color: #add8e6;
            padding: 2px 0;
        }
        .toggle-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }
        .toggle-item {
            display: flex;
            align-items: center;
        }
        .toggle-label {
            margin-left: 10px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文本对比工具</h1>
        <p class="description">输入两段文本，点击"对比文本"按钮查看差异。黄色高亮显示不同之处，蓝色高亮显示相同之处。</p>
        <div class="toggle-container">
            <div class="toggle-item">
                <label>
                    <input type="checkbox" id="compareMode">
                    <span class="toggle-label">字符比较模式（默认为段落比较，开启后使用贪婪匹配最大相似文本）</span>
                </label>
            </div>
            <div class="toggle-item">
                <label>
                    <input type="checkbox" id="paletteMode">
                    <span class="toggle-label">调色盘高亮（默认黄色显示不同文本，开启后使用蓝色显示相同文本）</span>
                </label>
            </div>
        </div>
        <div class="input-section">
            <div class="textarea-wrapper">
                <textarea id="text1" placeholder="输入第一段文本"></textarea>
            </div>
            <div class="textarea-wrapper">
                <textarea id="text2" placeholder="输入第二段文本"></textarea>
            </div>
        </div>
        <div class="button-group">
            <button onclick="compareTexts()">对比文本</button>
            <button onclick="clearTexts()">清除文本</button>
        </div>
        <div class="output-section" id="outputSection">
            <div class="output-wrapper">
                <div class="line-numbers" id="lineNumbers1"></div>
                <div id="output1" class="output"></div>
            </div>
            <div class="divider"></div>
            <div class="output-wrapper">
                <div class="line-numbers" id="lineNumbers2"></div>
                <div id="output2" class="output"></div>
            </div>
        </div>
    </div>
    <script>
        // 页面加载时恢复保存的文本
        window.onload = function() {
            document.getElementById('text1').value = localStorage.getItem('text1') || '';
            document.getElementById('text2').value = localStorage.getItem('text2') || '';
        }
        function compareTexts() {
            const text1 = document.getElementById('text1').value;
            const text2 = document.getElementById('text2').value;
            const isCharMode = document.getElementById('compareMode').checked;
            const isPaletteMode = document.getElementById('paletteMode').checked;
            // 保存文本到localStorage
            localStorage.setItem('text1', text1);
            localStorage.setItem('text2', text2);
            const output1 = document.getElementById('output1');
            const output2 = document.getElementById('output2');
            const lineNumbers1 = document.getElementById('lineNumbers1');
            const lineNumbers2 = document.getElementById('lineNumbers2');
            const result1 = highlightDifferences(text1, text2, isCharMode, isPaletteMode);
            const result2 = highlightDifferences(text2, text1, isCharMode, isPaletteMode);
            output1.innerHTML = result1.html;
            output2.innerHTML = result2.html;
            // 显示行号
            lineNumbers1.innerHTML = generateLineNumbers(result1.lineCount);
            lineNumbers2.innerHTML = generateLineNumbers(result2.lineCount);
            // 设置滚动同步
            setupScrollSync(output1, output2);
            // 显示结果区域
            const outputSection = document.getElementById('outputSection');
            outputSection.classList.add('visible');
        }
        // 省略其他 JavaScript 代码，保持不变...
        function clearTexts() {
            document.getElementById('text1').value = '';
            document.getElementById('text2').value = '';
            document.getElementById('output1').innerHTML = '';
            document.getElementById('output2').innerHTML = '';
            document.getElementById('lineNumbers1').innerHTML = '';
            document.getElementById('lineNumbers2').innerHTML = '';
            localStorage.removeItem('text1');
            localStorage.removeItem('text2');
            document.getElementById('outputSection').classList.remove('visible');
        }
    </script>
</body>
</html>

解释：

在.textarea-wrapper类中添加了margin-right来增加右侧的空间，确保文本框不会紧贴界面边缘。
增加了最后一个文本框去掉右边距的样式，避免其影响整体布局的美观。

请查看并确认适用性，如果还有其他的问题，欢迎继续反馈！

gogogo

不对重改,输入第二段文本的右边距有问题超出父容器了.

AI

#7 gogogo 感谢你的反馈，抱歉给你带来了困扰！如果右侧文本框超出了父容器，我们可以通过调整布局来确保它们适当地适应容器的宽度。以下是调整后的HTML和CSS，以确保两侧的文本框都有正确的边距，且不超出父容器的宽度。

修改内容：

调整 input-section 的 CSS：使用 flex 布局，使两个文本框自动适应容器宽度，并确保有适当的间距。
移除右侧文本框的多余右边距：使用 gap 属性来增加文本框之间的间距，而不是使用单独的右边距。

更新后的HTML和CSS结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对比工具</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f4f8;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .description {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        .input-section {
            display: flex;
            gap: 20px; /* 控制两个文本框之间的间距 */
            margin-bottom: 20px;
        }
        .textarea-wrapper {
            flex: 1; /* 确保文本框平分剩余空间 */
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            resize: vertical;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        textarea:focus {
            outline: none;
            border-color: #3498db;
        }
        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        button {
            padding: 12px 24px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #2980b9;
        }
        .output-section {
            display: flex;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .output-section.visible {
            opacity: 1;
        }
        .output-wrapper {
            flex: 1;
            display: flex;
        }
        .line-numbers {
            padding: 15px 10px;
            background-color: #ecf0f1;
            border-right: 1px solid #bdc3c7;
            text-align: right;
            color: #7f8c8d;
            font-size: 14px;
            min-width: 30px;
        }
        .output {
            flex: 1;
            padding: 15px;
            white-space: pre-wrap;
            word-break: break-all;
            min-height: 200px;
            overflow-y: scroll;
            font-size: 14px;
            line-height: 1.6;
        }
        .divider {
            width: 2px;
            background-color: #bdc3c7;
        }
        .diff {
            background-color: #ffeaa7;
            padding: 2px 0;
        }
        .same {
            background-color: #add8e6;
            padding: 2px 0;
        }
        .toggle-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }
        .toggle-item {
            display: flex;
            align-items: center;
        }
        .toggle-label {
            margin-left: 10px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文本对比工具</h1>
        <p class="description">输入两段文本，点击"对比文本"按钮查看差异。黄色高亮显示不同之处，蓝色高亮显示相同之处。</p>
        <div class="toggle-container">
            <div class="toggle-item">
                <label>
                    <input type="checkbox" id="compareMode">
                    <span class="toggle-label">字符比较模式（默认为段落比较，开启后使用贪婪匹配最大相似文本）</span>
                </label>
            </div>
            <div class="toggle-item">
                <label>
                    <input type="checkbox" id="paletteMode">
                    <span class="toggle-label">调色盘高亮（默认黄色显示不同文本，开启后使用蓝色显示相同文本）</span>
                </label>
            </div>
        </div>
        <div class="input-section">
            <div class="textarea-wrapper">
                <textarea id="text1" placeholder="输入第一段文本"></textarea>
            </div>
            <div class="textarea-wrapper">
                <textarea id="text2" placeholder="输入第二段文本"></textarea>
            </div>
        </div>
        <div class="button-group">
            <button onclick="compareTexts()">对比文本</button>
            <button onclick="clearTexts()">清除文本</button>
        </div>
        <div class="output-section" id="outputSection">
            <div class="output-wrapper">
                <div class="line-numbers" id="lineNumbers1"></div>
                <div id="output1" class="output"></div>
            </div>
            <div class="divider"></div>
            <div class="output-wrapper">
                <div class="line-numbers" id="lineNumbers2"></div>
                <div id="output2" class="output"></div>
            </div>
        </div>
    </div>
    <script>
        // 页面加载时恢复保存的文本
        window.onload = function() {
            document.getElementById('text1').value = localStorage.getItem('text1') || '';
            document.getElementById('text2').value = localStorage.getItem('text2') || '';
        }
        function compareTexts() {
            const text1 = document.getElementById('text1').value;
            const text2 = document.getElementById('text2').value;
            const isCharMode = document.getElementById('compareMode').checked;
            const isPaletteMode = document.getElementById('paletteMode').checked;
            // 保存文本到localStorage
            localStorage.setItem('text1', text1);
            localStorage.setItem('text2', text2);
            const output1 = document.getElementById('output1');
            const output2 = document.getElementById('output2');
            const lineNumbers1 = document.getElementById('lineNumbers1');
            const lineNumbers2 = document.getElementById('lineNumbers2');
            const result1 = highlightDifferences(text1, text2, isCharMode, isPaletteMode);
            const result2 = highlightDifferences(text2, text1, isCharMode, isPaletteMode);
            output1.innerHTML = result1.html;
            output2.innerHTML = result2.html;
            // 显示行号
            lineNumbers1.innerHTML = generateLineNumbers(result1.lineCount);
            lineNumbers2.innerHTML = generateLineNumbers(result2.lineCount);
            // 设置滚动同步
            setupScrollSync(output1, output2);
            // 显示结果区域
            const outputSection = document.getElementById('outputSection');
            outputSection.classList.add('visible');
        }

        // 省略其他 JavaScript 代码，保持不变...

        function clearTexts() {
            document.getElementById('text1').value = '';
            document.getElementById('text2').value = '';
            document.getElementById('output1').innerHTML = '';
            document.getElementById('output2').innerHTML = '';
            document.getElementById('lineNumbers1').innerHTML = '';
            document.getElementById('lineNumbers2').innerHTML = '';
            localStorage.removeItem('text1');
            localStorage.removeItem('text2');
            document.getElementById('outputSection').classList.remove('visible');
        }
    </script>
</body>
</html>

关键修改：

在 .input-section 中使用了 gap 属性来设置两个文本框之间的间距，而不是单独地控制每个文本框的边距，这样可以确保它们不会超出容器的宽度。
flex: 1; 属性确保文本框可以自动适应剩余的宽度，避免超出容器边界。

请尝试将上述代码替换为现有代码，并查看效果。如仍存在问题，请随时告诉我！