Kingsmai/diff.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): add style switcher and centralize diff logic

Browse Source 
Extract duplicated diff rendering logic into shared/diff-page.js
Implement theme switcher component across all templates
This commit is contained in:
xiaomai
2026-04-08 14:39:39 +08:00
parent 90792b276e
commit e9fcd411a7
9 changed files with 642 additions and 1271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
index.html
View File

@@ -43,6 +43,15 @@
.view-option.active {
@apply bg-white text-blue-700 shadow-sm font-semibold;
}
.style-switcher {
@apply flex items-center gap-2 bg-slate-100 px-4 py-1.5 rounded-full;
}
.style-switcher-label {
@apply text-sm font-medium text-slate-700;
}
.style-switcher-select {
@apply bg-white border border-slate-300 rounded-full px-3 py-1 text-sm font-medium text-slate-800 outline-none cursor-pointer shadow-sm hover:border-blue-500 transition-colors;
}
/* JS 动态插入的空状态提示 */
.empty-message {
@apply p-10 text-center text-slate-500 bg-slate-50/50;
@@ -197,6 +206,8 @@ function hello() {
📋 行内
</button>
</div>
<div data-style-switcher></div>
</div>
<!-- 操作按钮 -->
@@ -254,197 +265,38 @@ function hello() {
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.47/bundles/js/diff2html.min.js"></script>
<!-- 核心逻辑 (保持不变) -->
<script src="./shared/diff-page.js"></script>
<script>
(function () {
"use strict";
const leftTextarea = document.getElementById("leftTextarea");
const rightTextarea = document.getElementById("rightTextarea");
const compareBtn = document.getElementById("compareBtn");
const swapBtn = document.getElementById("swapBtn");
const exampleBtn = document.getElementById("exampleBtn");
const clearLeftBtn = document.getElementById("clearLeftBtn");
const clearRightBtn = document.getElementById("clearRightBtn");
const languageSelect = document.getElementById("languageSelect");
const diffOutput = document.getElementById("diff-output");
const diffStats = document.getElementById("diffStats");
const viewOptions = document.querySelectorAll(".view-option");
let currentView = "side-by-side";
function getSelectedLanguage() {
return languageSelect.value;
}
function getHighlightConfig() {
const lang = getSelectedLanguage();
if (lang === "plaintext") return false;
return { enabled: true, language: lang };
}
function generateUnifiedDiff(original, modified) {
return Diff.createTwoFilesPatch(
"原始",
"修改",
original || "",
modified || "",
"",
"",
{ context: 4 },
);
}
function renderDiff() {
const leftText = leftTextarea.value;
const rightText = rightTextarea.value;
let diffString;
try {
diffString = generateUnifiedDiff(leftText, rightText);
} catch (e) {
diffOutput.innerHTML = `<div class="empty-message" style="color:#ef4444;">生成差异时出错: ${e.message}</div>`;
diffStats.textContent = "";
return;
window.initDiffPage({
themeId: "light",
currentThemePath: "index.html",
switcherLabel: "🎨 风格",
switcherAriaLabel: "切换 Diff Checker 风格",
fileLabels: {
left: "原始",
right: "修改",
},
example: {
left: `function hello() {\n console.log("Hello World");\n return "Hi";\n}`,
right: `function hello() {\n console.log("Hello, Diff Checker!");\n return "Hey there";\n}`,
language: "javascript",
},
messages: {
generateError: (error) =>
`<div class="empty-message" style="color:#ef4444;">生成差异时出错: ${error.message}</div>`,
renderError: () =>
'<div class="empty-message">渲染差异失败，请检查输入</div>',
blankResult:
'<div class="empty-message">两个文本完全相同，没有差异</div>',
blankStats: "<span class='text-slate-500'>⚖️ 无差异</span>",
},
formatStats: ({ added, deleted, identical }) => {
if (identical) {
return "<span class='text-emerald-600 font-medium'>✅ 内容相同</span>";
}
const configuration = {
drawFileList: false,
matching: "lines",
outputFormat: currentView,
highlight: getHighlightConfig(),
renderNothingWhenEmpty: false,
};
let diffHtml = "";
try {
diffHtml = Diff2Html.html(diffString, configuration);
} catch (e) {
console.warn(e);
diffOutput.innerHTML = `<div class="empty-message">渲染差异失败，请检查输入</div>`;
diffStats.textContent = "";
return;
}
diffOutput.innerHTML = diffHtml;
const selectedLang = getSelectedLanguage();
if (selectedLang !== "plaintext") {
const codeBlocks = diffOutput.querySelectorAll("code");
if (codeBlocks.length > 0 && window.hljs) {
codeBlocks.forEach((block) => {
block.classList.forEach((cls) => {
if (cls.startsWith("language-")) block.classList.remove(cls);
});
block.classList.add(`language-${selectedLang}`);
if (block.dataset.highlighted) {
delete block.dataset.highlighted;
}
try {
hljs.highlightElement(block);
} catch (e) {}
});
}
}
const addedLines = diffOutput.querySelectorAll(".d2h-ins").length;
const deletedLines = diffOutput.querySelectorAll(".d2h-del").length;
if (addedLines === 0 && deletedLines === 0) {
diffStats.innerHTML =
"<span class='text-emerald-600 font-medium'>✅ 内容相同</span>";
} else {
diffStats.innerHTML = `<span class='text-emerald-600 font-medium'>+${addedLines} 行添加</span> &nbsp;|&nbsp; <span class='text-rose-500 font-medium'>-${deletedLines} 行删除</span>`;
}
if (!diffHtml.trim() || diffOutput.innerText.trim() === "") {
diffOutput.innerHTML =
'<div class="empty-message">两个文本完全相同，没有差异</div>';
diffStats.innerHTML =
"<span class='text-slate-500'>⚖️ 无差异</span>";
}
}
function setActiveView(view) {
currentView = view;
viewOptions.forEach((btn) => {
const val = btn.getAttribute("data-view");
if (val === view) {
btn.classList.add("active");
} else {
btn.classList.remove("active");
}
});
if (
diffOutput.querySelector(".d2h-wrapper") ||
diffOutput.children.length > 0
) {
renderDiff();
}
}
function loadExample() {
leftTextarea.value = `function hello() {\n console.log("Hello World");\n return "Hi";\n}`;
rightTextarea.value = `function hello() {\n console.log("Hello, Diff Checker!");\n return "Hey there";\n}`;
languageSelect.value = "javascript";
renderDiff();
}
function swapTexts() {
const temp = leftTextarea.value;
leftTextarea.value = rightTextarea.value;
rightTextarea.value = temp;
renderDiff();
}
function clearLeft() {
leftTextarea.value = "";
renderDiff();
}
function clearRight() {
rightTextarea.value = "";
renderDiff();
}
compareBtn.addEventListener("click", renderDiff);
swapBtn.addEventListener("click", swapTexts);
exampleBtn.addEventListener("click", loadExample);
clearLeftBtn.addEventListener("click", clearLeft);
clearRightBtn.addEventListener("click", clearRight);
languageSelect.addEventListener("change", () => {
if (
diffOutput.querySelector(".d2h-wrapper") ||
diffOutput.children.length > 0
) {
renderDiff();
}
});
viewOptions.forEach((btn) => {
btn.addEventListener("click", (e) => {
const view = e.currentTarget.getAttribute("data-view");
setActiveView(view);
});
});
document.addEventListener("keydown", (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
e.preventDefault();
renderDiff();
}
});
window.addEventListener("DOMContentLoaded", () => {
renderDiff();
});
if (
document.readyState === "complete" ||
document.readyState === "interactive"
) {
setTimeout(renderDiff, 10);
}
})();
return `<span class='text-emerald-600 font-medium'>+${added} 行添加</span> &nbsp;|&nbsp; <span class='text-rose-500 font-medium'>-${deleted} 行删除</span>`;
},
});
</script>
</body>
</html>