yuanzhen869/MobileModels
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve manual catalog UX

Browse Source
This commit is contained in:
yuanzhen869
2026-04-15 09:15:48 +08:00
parent d29cbed1fa
commit f6541d291e
2 changed files with 184 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/brand_management.html
+121 -15
View File
@@ -378,12 +378,12 @@
.manual-brand-table col:nth-child(3) { width: 180px; }
.manual-brand-table col:nth-child(4) { width: 240px; }
.manual-brand-table col:nth-child(5) { width: 200px; }
.manual-device-table col:nth-child(1) { width: 160px; }
.manual-device-table col:nth-child(2) { width: 240px; }
.manual-device-table col:nth-child(1) { width: 140px; }
.manual-device-table col:nth-child(2) { width: 280px; }
.manual-device-table col:nth-child(3) { width: 140px; }
.manual-device-table col:nth-child(4) { width: auto; }
.manual-device-table col:nth-child(5) { width: 280px; }
.manual-device-table col:nth-child(6) { width: 200px; }
.manual-device-table col:nth-child(4) { width: 220px; }
.manual-device-table col:nth-child(5) { width: 220px; }
.manual-device-table col:nth-child(6) { width: 220px; }
.manual-brand-table th,
.manual-brand-table td,
.manual-device-table th,
@@ -394,10 +394,30 @@
.manual-device-table td {
line-height: 1.4;
}
.manual-device-table td:nth-child(5) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.manual-brand-table .tag,
.manual-device-table .tag {
margin: 0;
}
.manual-brand-table th:last-child,
.manual-brand-table td:last-child,
.manual-device-table th:last-child,
.manual-device-table td:last-child {
position: sticky;
right: 0;
z-index: 2;
background: #fff;
box-shadow: -8px 0 12px rgba(36, 56, 89, 0.06);
}
.manual-brand-table th:last-child,
.manual-device-table th:last-child {
background: #f7f9fd;
z-index: 3;
}
.manual-actions-bar {
margin-bottom: 10px;
padding-left: 10px;
@@ -405,6 +425,40 @@
.manual-actions-bar .btns {
margin-top: 0;
}
.status-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
}
.status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.status-pill.running {
background: #eef4ff;
color: #1e59c9;
}
.status-pill.success {
background: #eefaf2;
color: #177245;
}
.status-pill.failed {
background: #fff1f0;
color: #b42318;
}
.status-pill.idle {
background: #f4f6fa;
color: #5b6679;
}
.collapse-card {
padding: 0;
overflow: hidden;
@@ -774,6 +828,9 @@
<li>保存后会重建索引和 MySQL seed；是否自动刷新 MySQL 取决于左侧同步配置中的自动装载开关。</li>
<li>本地覆盖库不会被“原始数据同步”覆盖，适合补录学习机、教育终端、定制设备。</li>
</ul>
<div id="manualRefreshBadge" class="status-row">
<span class="status-pill idle">等待刷新</span>
</div>
<div id="manualStatus" class="sub">正在读取本地覆盖库。</div>
</div>
</details>
@@ -982,6 +1039,7 @@
let managedBrandConfig = null;
let managedSourceConfig = null;
let manualCatalog = { brands: [], devices: [] };
let manualCatalogPollTimer = null;
let managedBrandAliasToBrand = new Map();
let managedBrandToManufacturer = new Map();
let managedManufacturerToBrands = new Map();
@@ -1031,6 +1089,7 @@
const indexStatusEl = document.getElementById("indexStatus");
const indexSummaryEl = document.getElementById("indexSummary");
const manualStatusEl = document.getElementById("manualStatus");
const manualRefreshBadgeEl = document.getElementById("manualRefreshBadge");
const manualBrandBodyEl = document.getElementById("manualBrandBody");
const manualDeviceBodyEl = document.getElementById("manualDeviceBody");
const addManualBrandBtnEl = document.getElementById("addManualBrandBtn");
@@ -1105,6 +1164,50 @@
return [...names].sort((a, b) => a.localeCompare(b));
}
function buildManualStatusText(payload = manualCatalog) {
const brands = Array.isArray(payload && payload.brands) ? payload.brands : [];
const devices = Array.isArray(payload && payload.devices) ? payload.devices : [];
const refresh = (payload && payload.mysql_refresh) || {};
const parts = [
`本地覆盖库: 品牌 ${brands.length} 个，设备 ${devices.length} 个。`,
"保存后会刷新索引和 MySQL seed。",
];
if (refresh.running) {
parts.push("MySQL 后台刷新中。");
} else if (refresh.last_status === "success") {
parts.push("MySQL 后台刷新已完成。");
} else if (refresh.last_status === "failed") {
parts.push(`MySQL 后台刷新失败: ${refresh.last_message || "请检查容器日志。"}`);
}
return parts.join(" ");
}
function buildManualStatusBadge(payload = manualCatalog) {
const refresh = (payload && payload.mysql_refresh) || {};
if (refresh.running) {
return '<span class="status-pill running">后台刷新中</span>';
}
if (refresh.last_status === "success") {
return '<span class="status-pill success">后台刷新完成</span>';
}
if (refresh.last_status === "failed") {
return '<span class="status-pill failed">后台刷新失败</span>';
}
return '<span class="status-pill idle">等待刷新</span>';
}
function scheduleManualCatalogPoll() {
if (manualCatalogPollTimer) {
window.clearTimeout(manualCatalogPollTimer);
manualCatalogPollTimer = null;
}
const refresh = (manualCatalog && manualCatalog.mysql_refresh) || {};
if (!refresh.running) return;
manualCatalogPollTimer = window.setTimeout(() => {
loadManualCatalog({ silent: true });
}, 2500);
}
function updateSyncButtons() {
const busy = syncRunning || mysqlInitRunning;
syncUpstreamBtnEl.disabled = busy || !syncSupported;
@@ -1992,7 +2095,8 @@
function renderManualCatalog() {
const brands = Array.isArray(manualCatalog && manualCatalog.brands) ? manualCatalog.brands : [];
const devices = Array.isArray(manualCatalog && manualCatalog.devices) ? manualCatalog.devices : [];
manualStatusEl.textContent = `本地覆盖库: 品牌 ${brands.length} 个，设备 ${devices.length} 个。保存后会刷新索引和 MySQL seed。`;
manualRefreshBadgeEl.innerHTML = buildManualStatusBadge();
manualStatusEl.textContent = buildManualStatusText();
if (!brands.length) {
manualBrandBodyEl.innerHTML = `<tr><td colspan="5" class="sub">暂无手动品牌</td></tr>`;
@@ -2059,15 +2163,20 @@
await deleteManualDevice(deviceId);
});
});
scheduleManualCatalogPoll();
}
async function loadManualCatalog() {
manualStatusEl.textContent = "正在读取本地覆盖库。";
async function loadManualCatalog(options = {}) {
const silent = !!options.silent;
if (!silent) {
manualStatusEl.textContent = "正在读取本地覆盖库。";
}
try {
const payload = await fetchJson("/api/manual-catalog", { cache: "no-store" });
manualCatalog = {
brands: Array.isArray(payload.brands) ? payload.brands : [],
devices: Array.isArray(payload.devices) ? payload.devices : [],
mysql_refresh: payload.mysql_refresh || null,
};
renderManualCatalog();
} catch (err) {
@@ -2113,7 +2222,7 @@
body: JSON.stringify(payload),
});
manualCatalog = result.catalog || manualCatalog;
manualStatusEl.textContent = result.message || "品牌已保存。";
manualStatusEl.textContent = `${result.message || "品牌已保存。"} ${result.mysql_message || ""}`.trim();
renderManualCatalog();
await loadIndexFromPath();
await loadSyncStatus({ preserveLog: true });
@@ -2173,7 +2282,7 @@
body: JSON.stringify(payload),
});
manualCatalog = result.catalog || manualCatalog;
manualStatusEl.textContent = `${result.message || "设备已保存。"}${typeof result.alias_conflict_count === "number" ? ` 命中现有别名冲突 ${result.alias_conflict_count} 个。` : ""}`;
manualStatusEl.textContent = `${result.message || "设备已保存。"}${typeof result.alias_conflict_count === "number" ? ` 命中现有别名冲突 ${result.alias_conflict_count} 个。` : ""} ${result.mysql_message || ""}`.trim();
renderManualCatalog();
await loadIndexFromPath();
await loadSyncStatus({ preserveLog: true });
@@ -2188,7 +2297,7 @@
body: JSON.stringify({ name }),
});
manualCatalog = result.catalog || manualCatalog;
manualStatusEl.textContent = result.message || `品牌 ${name} 已删除。`;
manualStatusEl.textContent = `${result.message || `品牌 ${name} 已删除。`} ${result.mysql_message || ""}`.trim();
renderManualCatalog();
await loadIndexFromPath();
await loadSyncStatus({ preserveLog: true });
@@ -2201,7 +2310,7 @@
body: JSON.stringify({ id }),
});
manualCatalog = result.catalog || manualCatalog;
manualStatusEl.textContent = result.message || "设备已删除。";
manualStatusEl.textContent = `${result.message || "设备已删除。"} ${result.mysql_message || ""}`.trim();
renderManualCatalog();
await loadIndexFromPath();
await loadSyncStatus({ preserveLog: true });
@@ -2265,9 +2374,6 @@
reloadIndexBtnEl.addEventListener("click", loadIndexFromPath);
brandModalCancelBtnEl.addEventListener("click", closeBrandModal);
brandModalBackdropEl.addEventListener("click", (e) => {
if (e.target === brandModalBackdropEl) closeBrandModal();
});
brandModalSaveBtnEl.addEventListener("click", async () => {
if (!modalSaveHandler) return;
try {