225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Rclone 尺寸对比器</title>
|
|
<style>
|
|
:root {
|
|
--success: #28a745; --danger: #dc3545; --warning: #ffc107; --info: #17a2b8;
|
|
--bg: #f8f9fa; --card-bg: #ffffff; --text: #2d3436; --primary: #0984e3;
|
|
}
|
|
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); padding: 20px; margin: 0; }
|
|
.container { max-width: 1100px; margin: auto; }
|
|
|
|
/* 拖拽区 */
|
|
.drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
|
|
.drop-box { border: 2px dashed #bdc3c7; border-radius: 12px; padding: 5px 15px; text-align: center; background: white; cursor: pointer; transition: 0.2s; }
|
|
.drop-box.loaded { border-color: var(--success); background: #f6ffed; }
|
|
.drop-box.hover { border-color: var(--primary); background: #e6f7ff; }
|
|
|
|
/* 统计卡片 - 增加到4项 */
|
|
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; display: none; }
|
|
.stat-card { background: white; padding: 12px; border-radius: 10px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-bottom: 4px solid #ddd; }
|
|
.stat-val { font-size: 24px; font-weight: 800; display: block; margin-bottom: 4px; }
|
|
.stat-label { font-size: 12px; color: #636e72; font-weight: 600; text-transform: uppercase; }
|
|
|
|
/* 报告区域 */
|
|
.report-card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); display: none; }
|
|
.btn-group { margin-bottom: 20px; display: flex; gap: 10px; }
|
|
.btn { padding: 9px 18px; border: 1px solid #dfe6e9; border-radius: 8px; background: white; cursor: pointer; font-weight: 600; transition: 0.2s; }
|
|
.btn:hover { background: #f1f2f6; }
|
|
.btn-active { background: var(--danger) !important; color: white; border-color: var(--danger); }
|
|
|
|
/* 树状 UI */
|
|
ul { list-style: none; padding-left: 22px; border-left: 1px dashed #dfe6e9; margin: 6px 0; }
|
|
li { margin: 5px 0; }
|
|
.item-row { display: flex; align-items: center; padding: 4px 8px; border-radius: 5px; transition: 0.1s; }
|
|
.item-row:hover { background: #f8f9fa; }
|
|
|
|
summary { cursor: pointer; outline: none; list-style: none; }
|
|
summary::-webkit-details-marker { display: none; }
|
|
|
|
.badge {
|
|
display: inline-block; min-width: 22px; height: 18px; line-height: 18px;
|
|
text-align: center; border-radius: 4px; color: white; font-size: 11px;
|
|
font-weight: bold; margin-right: 12px; flex-shrink: 0;
|
|
}
|
|
|
|
.folder-icon { margin-right: 8px; font-size: 1.1em; opacity: 0.7; }
|
|
.error-dot { color: var(--danger); margin-left: 8px; font-size: 14px; animation: blink 2s infinite; }
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
|
|
|
/* 过滤模式：隐藏一致的项目 */
|
|
.filter-mode .is-match, .filter-mode .is-pure-match { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2 style="text-align:center; margin-bottom:30px;">🎬 Rclone 双向对比工具</h2>
|
|
|
|
<div class="drop-grid">
|
|
<div id="drop-remote" class="drop-box"><p id="t-remote">1. 拖入云端清单</p><input type="file" id="file-remote" style="display:none"></div>
|
|
<div id="drop-local" class="drop-box"><p id="t-local">2. 拖入本地清单</p><input type="file" id="file-local" style="display:none"></div>
|
|
</div>
|
|
|
|
<div id="report-section">
|
|
<div class="stat-grid" id="stat-bar">
|
|
<div class="stat-card" style="border-color: var(--success)"><span class="stat-label">一致 (Match)</span><span id="cnt-match" class="stat-val" style="color: var(--success)">0</span></div>
|
|
<div class="stat-card" style="border-color: var(--danger)"><span class="stat-label">不同 (Diff)</span><span id="cnt-diff" class="stat-val" style="color: var(--danger)">0</span></div>
|
|
<div class="stat-card" style="border-color: var(--warning)"><span class="stat-label">缺失 (Missing)</span><span id="cnt-miss" class="stat-val" style="color: var(--warning)">0</span></div>
|
|
<div class="stat-card" style="border-color: var(--info)"><span class="stat-label">多余 (Extra)</span><span id="cnt-extra" class="stat-val" style="color: var(--info)">0</span></div>
|
|
</div>
|
|
|
|
<div class="report-card" id="report-card">
|
|
<div class="btn-group">
|
|
<button onclick="toggleFilter()" id="filterBtn" class="btn">只看异常</button>
|
|
<button onclick="toggleAll(true)" class="btn">全部展开</button>
|
|
<button onclick="toggleAll(false)" class="btn">全部收起</button>
|
|
</div>
|
|
<div id="treeContainer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let remoteMap = null, localMap = null, errorMode = false;
|
|
|
|
function setupBox(id, fileId, type) {
|
|
const box = document.getElementById(id);
|
|
const input = document.getElementById(fileId);
|
|
box.onclick = () => input.click();
|
|
box.ondragover = (e) => { e.preventDefault(); box.classList.add('hover'); };
|
|
box.ondragleave = () => box.classList.remove('hover');
|
|
box.ondrop = (e) => { e.preventDefault(); box.classList.remove('hover'); handleFile(e.dataTransfer.files[0], type); };
|
|
input.onchange = (e) => handleFile(e.target.files[0], type);
|
|
}
|
|
|
|
setupBox('drop-remote', 'file-remote', 'remote');
|
|
setupBox('drop-local', 'file-local', 'local');
|
|
|
|
function handleFile(file, type) {
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const map = new Map();
|
|
e.target.result.split(/\r?\n/).forEach(line => {
|
|
if (!line.trim()) return;
|
|
const parts = line.split('|');
|
|
if (parts.length >= 2) {
|
|
const size = parts[0].trim();
|
|
const path = parts.slice(1).join('|').replace(/^\/+|\/+$/g, '');
|
|
map.set(path, size);
|
|
}
|
|
});
|
|
if (type === 'remote') { remoteMap = map; document.getElementById('t-remote').innerText = "✅ 云端清单已加载"; document.getElementById('drop-remote').classList.add('loaded'); }
|
|
else { localMap = map; document.getElementById('t-local').innerText = "✅ 本地清单已加载"; document.getElementById('drop-local').classList.add('loaded'); }
|
|
if (remoteMap && localMap) startComparison();
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
function startComparison() {
|
|
const tree = {}, stats = {match:0, diff:0, miss:0, extra:0}, folderErrors = new Set();
|
|
|
|
// 获取所有路径的并集
|
|
const allPaths = new Set([...remoteMap.keys(), ...localMap.keys()]);
|
|
|
|
allPaths.forEach(path => {
|
|
const rSize = remoteMap.get(path);
|
|
const lSize = localMap.get(path);
|
|
let symbol = '';
|
|
|
|
if (rSize !== undefined && lSize !== undefined) {
|
|
if (rSize === lSize) { symbol = '='; stats.match++; }
|
|
else { symbol = '*'; stats.diff++; }
|
|
} else if (rSize !== undefined && lSize === undefined) {
|
|
symbol = '-'; stats.miss++; // 缺失
|
|
} else {
|
|
symbol = '+'; stats.extra++; // 多余
|
|
}
|
|
|
|
// 构建树状结构
|
|
let curr = tree;
|
|
const parts = path.split('/');
|
|
parts.forEach((part, i) => {
|
|
if (i === parts.length - 1) {
|
|
curr[part] = symbol;
|
|
} else {
|
|
if (!curr[part] || typeof curr[part] === 'string') curr[part] = {};
|
|
curr = curr[part];
|
|
}
|
|
});
|
|
|
|
// 标记含异常的文件夹
|
|
if (symbol !== '=') {
|
|
let acc = "";
|
|
parts.slice(0, -1).forEach(p => {
|
|
acc = acc ? `${acc}/${p}` : p;
|
|
folderErrors.add(acc);
|
|
});
|
|
}
|
|
});
|
|
|
|
// 更新统计 UI
|
|
document.getElementById('cnt-match').innerText = stats.match;
|
|
document.getElementById('cnt-diff').innerText = stats.diff;
|
|
document.getElementById('cnt-miss').innerText = stats.miss;
|
|
document.getElementById('cnt-extra').innerText = stats.extra;
|
|
|
|
document.getElementById('stat-bar').style.display = 'grid';
|
|
document.getElementById('report-card').style.display = 'block';
|
|
document.getElementById('treeContainer').innerHTML = renderTree(tree, "", folderErrors);
|
|
}
|
|
|
|
function renderTree(node, currentPath, errors) {
|
|
let html = "<ul>";
|
|
const sortedKeys = Object.keys(node).sort((a, b) => {
|
|
const aIsFolder = typeof node[a] === 'object';
|
|
const bIsFolder = typeof node[b] === 'object';
|
|
return aIsFolder === bIsFolder ? a.localeCompare(b) : (aIsFolder ? -1 : 1);
|
|
});
|
|
|
|
sortedKeys.forEach(name => {
|
|
const val = node[name];
|
|
const thisPath = currentPath ? `${currentPath}/${name}` : name;
|
|
|
|
if (typeof val === 'object') {
|
|
const hasErr = errors.has(thisPath);
|
|
html += `<li class="folder ${hasErr?'has-error':'is-pure-match'}">
|
|
<details>
|
|
<summary><div class="item-row"><span class="folder-icon">📁</span>${name}/ ${hasErr?'<span class="error-dot">●</span>':''}</div></summary>
|
|
${renderTree(val, thisPath, errors)}
|
|
</details>
|
|
</li>`;
|
|
} else {
|
|
const cfg = {
|
|
'=': {c: 'var(--success)', s: '='},
|
|
'*': {c: 'var(--danger)', s: '*'},
|
|
'-': {c: 'var(--warning)', s: '-'},
|
|
'+': {c: 'var(--info)', s: '+'}
|
|
}[val];
|
|
|
|
html += `<li class="${val==='='?'is-match':'is-error'}">
|
|
<div class="item-row">
|
|
<span class="badge" style="background:${cfg.c}">${cfg.s}</span>
|
|
<span class="file-name">${name}</span>
|
|
</div>
|
|
</li>`;
|
|
}
|
|
});
|
|
return html + "</ul>";
|
|
}
|
|
|
|
function toggleFilter() {
|
|
errorMode = !errorMode;
|
|
document.getElementById('treeContainer').classList.toggle('filter-mode', errorMode);
|
|
const btn = document.getElementById('filterBtn');
|
|
btn.innerText = errorMode ? "显示全部" : "只看异常";
|
|
btn.classList.toggle('btn-active', errorMode);
|
|
if(errorMode) document.querySelectorAll('.has-error > details').forEach(d => d.open = true);
|
|
}
|
|
|
|
function toggleAll(open) { document.querySelectorAll('details').forEach(d => d.open = open); }
|
|
</script>
|
|
</body>
|
|
</html> |