import { LitElement, html, css } from 'lit'; import { I18nProvider } from '@/components'; import { useMeta } from '@/utils'; const $t = new I18nProvider(); export default class extends LitElement { static properties = { leftInput: { type: String }, rightInput: { type: String }, ignoreWhitespace: { type: Boolean }, hasProcessed: { type: Boolean }, error: { type: String }, rows: { type: Array }, copied: { type: String } }; static styles = css` .page { min-height: calc(100vh - 72px); padding: 10px; display: flex; align-items: flex-start; justify-content: center; } .main { width: 100%; max-width: 1120px; } .title { text-align: center; font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; color: var(--ro-primary); } .sub-title { text-align: center; font-size: 0.9rem; color: #6b7280; margin-bottom: 16px; } .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 900px) { .inputs, .head, .row { grid-template-columns: 1fr; } .cell-left { border-right: none; border-bottom: 1px solid #e2e8f0; } } textarea { min-height: 240px; width: 100%; border-radius: 18px; border: 1px solid #d1d5db; padding: 12px 14px; font-size: 0.85rem; box-sizing: border-box; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; white-space: pre; } textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--ro-primary); } .controls { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .controls-spacer { flex: 1 1 auto; } .btn { padding: 8px 20px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; border: none; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-primary { background: var(--ro-primary); color: #fff; font-size: 1.1rem; } .btn-secondary { background: #fff; color: var(--ro-primary); border: 1px solid var(--ro-primary); } .chk { display: inline-flex; align-items: center; gap: 6px; color: #334155; font-size: 0.85rem; } hr { margin: 18px 0; } .error { color: #b91c1c; font-size: 0.85rem; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; white-space: pre-wrap; word-break: break-word; } .summary { margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .summary-text { color: #334155; font-size: 0.86rem; margin-right: auto; } .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; font-size: 0.76rem; font-weight: 700; border: 1px solid transparent; } .badge-same { background: #f8fafc; color: #475569; border-color: #e2e8f0; } .badge-modify { background: #fff7ed; color: #9a3412; border-color: #fed7aa; } .badge-add { background: #ecfdf3; color: #166534; border-color: #bbf7d0; } .badge-remove { background: #fef2f2; color: #991b1b; border-color: #fecaca; } .copy-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; font-size: 0.76rem; color: #334155; } .copy-btn.copied { background: #e0f2fe; border-color: #7dd3fc; } .result { border: 1px solid #d1d5de; border-radius: 12px; background: #fff; overflow: hidden; } .head { display: grid; grid-template-columns: 1fr 1fr; background: #f8fafc; border-bottom: 1px solid #e2e8f0; } .head div { padding: 8px 10px; font-size: 0.8rem; font-weight: 700; color: #334155; } .row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #f1f5f9; } .row:last-child { border-bottom: none; } .cell { min-height: 28px; display: grid; grid-template-columns: 52px 1fr; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.82rem; } .cell-left { border-right: 1px solid #e2e8f0; } .line-no { color: #64748b; text-align: right; padding: 6px 8px 6px 0; border-right: 1px solid #e2e8f0; user-select: none; } .code { padding: 6px 10px; white-space: pre-wrap; word-break: break-word; } .empty { color: #94a3b8; font-style: italic; } .row.same .cell-left, .row.same .cell-right { background: #fff; } .row.add .cell-right { background: #ecfdf3; } .row.remove .cell-left { background: #fef2f2; } .row.modify .cell-left { background: #fff7ed; } .row.modify .cell-right { background: #ecfeff; } .char-add { background: #bbf7d0; color: #14532d; border-radius: 3px; } .char-remove { background: #fecaca; color: #7f1d1d; border-radius: 3px; text-decoration: line-through; } `; constructor() { super(); this.leftInput = ''; this.rightInput = ''; this.ignoreWhitespace = false; this.hasProcessed = false; this.error = ''; this.rows = []; this.copied = ''; } onLeft(e) { this.leftInput = e.target.value; } onRight(e) { this.rightInput = e.target.value; } onIgnoreWhitespace(e) { this.ignoreWhitespace = !!e.target.checked; } norm(s) { if (!this.ignoreWhitespace) return s || ''; return String(s || '').replace(/\s+/g, ' ').trim(); } copyText(key, value) { if (!value) return; navigator?.clipboard?.writeText(value).then(() => { this.copied = key; setTimeout(() => { this.copied = ''; }, 1000); }); } lineSimilarity(a, b) { const left = this.norm(a); const right = this.norm(b); if (left === right) return 1; if (!left.length || !right.length) return 0; const lcs = this.lcsLength(Array.from(left), Array.from(right), 8000); return lcs / Math.max(left.length, right.length); } lcsLength(A, B, limit = 50000) { const n = A.length; const m = B.length; if (!n || !m) return 0; if (n * m > limit) { let common = 0; const short = n < m ? A : B; const longText = (n < m ? B : A).join(''); for (const ch of short) { if (longText.includes(ch)) common += 1; } return Math.min(common, Math.min(n, m)); } const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0)); for (let i = n - 1; i >= 0; i -= 1) { for (let j = m - 1; j >= 0; j -= 1) { dp[i][j] = A[i] === B[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]); } } return dp[0][0]; } charDiff(a, b) { const A = Array.from(a || ''); const B = Array.from(b || ''); const n = A.length; const m = B.length; if (n * m > 120000) { return { left: [{ t: 'remove', v: a || '' }], right: [{ t: 'add', v: b || '' }] }; } const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0)); for (let i = n - 1; i >= 0; i -= 1) { for (let j = m - 1; j >= 0; j -= 1) { dp[i][j] = A[i] === B[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]); } } const left = []; const right = []; let i = 0; let j = 0; const push = (arr, type, ch) => { const last = arr[arr.length - 1]; if (last && last.t === type) last.v += ch; else arr.push({ t: type, v: ch }); }; while (i < n && j < m) { if (A[i] === B[j]) { push(left, 'same', A[i]); push(right, 'same', B[j]); i += 1; j += 1; } else if (dp[i + 1][j] >= dp[i][j + 1]) { push(left, 'remove', A[i]); i += 1; } else { push(right, 'add', B[j]); j += 1; } } while (i < n) { push(left, 'remove', A[i]); i += 1; } while (j < m) { push(right, 'add', B[j]); j += 1; } return { left, right }; } lineEquals(a, b) { return this.norm(a) === this.norm(b); } buildLineMatches(aLines, bLines) { const n = aLines.length; const m = bLines.length; const tooLarge = n * m > 40000; if (tooLarge) { const rows = []; let leftNo = 0; let rightNo = 0; const max = Math.max(n, m); for (let i = 0; i < max; i += 1) { const a = aLines[i]; const b = bLines[i]; if (a === undefined) { rightNo += 1; rows.push({ type: 'add', leftNo: '', rightNo, left: '', right: b, leftSeg: [{ t: 'same', v: '' }], rightSeg: [{ t: 'add', v: b || '' }] }); continue; } if (b === undefined) { leftNo += 1; rows.push({ type: 'remove', leftNo, rightNo: '', left: a, right: '', leftSeg: [{ t: 'remove', v: a || '' }], rightSeg: [{ t: 'same', v: '' }] }); continue; } leftNo += 1; rightNo += 1; if (this.lineEquals(a, b)) { rows.push({ type: 'same', leftNo, rightNo, left: a, right: b, leftSeg: [{ t: 'same', v: a || '' }], rightSeg: [{ t: 'same', v: b || '' }] }); } else { const diff = this.charDiff(a, b); rows.push({ type: 'modify', leftNo, rightNo, left: a, right: b, leftSeg: diff.left, rightSeg: diff.right }); } } return rows; } const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0)); for (let i = n - 1; i >= 0; i -= 1) { for (let j = m - 1; j >= 0; j -= 1) { if (this.lineEquals(aLines[i], bLines[j])) dp[i][j] = dp[i + 1][j + 1] + 1; else dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1]); } } const rows = []; let i = 0; let j = 0; let leftNo = 0; let rightNo = 0; const pushAdd = (line) => { rightNo += 1; rows.push({ type: 'add', leftNo: '', rightNo, left: '', right: line, leftSeg: [{ t: 'same', v: '' }], rightSeg: [{ t: 'add', v: line || '' }] }); }; const pushRemove = (line) => { leftNo += 1; rows.push({ type: 'remove', leftNo, rightNo: '', left: line, right: '', leftSeg: [{ t: 'remove', v: line || '' }], rightSeg: [{ t: 'same', v: '' }] }); }; const pushSame = (left, right) => { leftNo += 1; rightNo += 1; rows.push({ type: 'same', leftNo, rightNo, left, right, leftSeg: [{ t: 'same', v: left || '' }], rightSeg: [{ t: 'same', v: right || '' }] }); }; const pushModify = (left, right) => { leftNo += 1; rightNo += 1; const diff = this.charDiff(left, right); rows.push({ type: 'modify', leftNo, rightNo, left, right, leftSeg: diff.left, rightSeg: diff.right }); }; while (i < n && j < m) { if (this.lineEquals(aLines[i], bLines[j])) { pushSame(aLines[i], bLines[j]); i += 1; j += 1; continue; } const canPair = i + 1 < n && j + 1 < m && this.lineEquals(aLines[i + 1], bLines[j + 1]); if (canPair) { pushModify(aLines[i], bLines[j]); i += 1; j += 1; continue; } const addAdvance = dp[i][j + 1]; const removeAdvance = dp[i + 1][j]; if (addAdvance > removeAdvance) { pushAdd(bLines[j]); j += 1; continue; } if (removeAdvance > addAdvance) { pushRemove(aLines[i]); i += 1; continue; } const similarity = this.lineSimilarity(aLines[i], bLines[j]); if (similarity >= 0.45) { pushModify(aLines[i], bLines[j]); i += 1; j += 1; } else if ((aLines[i] || '').length <= (bLines[j] || '').length) { pushAdd(bLines[j]); j += 1; } else { pushRemove(aLines[i]); i += 1; } } while (i < n) { pushRemove(aLines[i]); i += 1; } while (j < m) { pushAdd(bLines[j]); j += 1; } return rows; } process() { this.error = ''; this.hasProcessed = false; this.rows = []; const a = this.leftInput || ''; const b = this.rightInput || ''; if (!a.trim() && !b.trim()) { this.error = $t('diff_inputRequired'); return; } try { this.rows = this.buildLineMatches(a.split('\n'), b.split('\n')); this.hasProcessed = true; } catch (err) { this.error = err?.message || $t('diff_failed'); } } renderSeg(seg, side) { return seg.map((x) => { if (x.t === 'same') return x.v; if (side === 'left' && x.t === 'remove') return html`${x.v}`; if (side === 'right' && x.t === 'add') return html`${x.v}`; return x.v; }); } renderCode(seg, side) { if (!seg?.length || seg.every((item) => !item.v)) { return html`—`; } return this.renderSeg(seg, side); } renderResult() { if (this.error) return html`

${this.error}

`; if (!this.hasProcessed) return ''; const adds = this.rows.filter((r) => r.type === 'add').length; const removes = this.rows.filter((r) => r.type === 'remove').length; const modifies = this.rows.filter((r) => r.type === 'modify').length; const same = this.rows.filter((r) => r.type === 'same').length; const diffText = this.rows .map((r) => { if (r.type === 'same') return ` ${r.left}`; if (r.type === 'add') return `+ ${r.right}`; if (r.type === 'remove') return `- ${r.left}`; return `- ${r.left}\n+ ${r.right}`; }) .join('\n'); return html`

${$t('diff_summary', { same, modified: modifies, added: adds, removed: removes })}

=${same} ~${modifies} +${adds} -${removes}

${$t('diff_original')}

${$t('diff_changed')}

${this.rows.map((r) => html`

${r.leftNo}

${this.renderCode(r.leftSeg, 'left')}

${r.rightNo}

${this.renderCode(r.rightSeg, 'right')}

`)}

`; } render() { useMeta({ title: $t("diff_title"), meta: { description: { name: 'description', content: $t('diff_subtitle') }, } }) return html`

${$t('diff_title')}

${$t('diff_subtitle')}

${$t('diff_ignoreWhitespace')}

${this.renderResult()}

`; } }