Improve manual catalog UX
This commit is contained in:
+58
-6
@@ -33,11 +33,19 @@ SYNC_LOCK = threading.Lock()
|
||||
SCHEDULE_LOCK = threading.Lock()
|
||||
MYSQL_CONFIG_LOCK = threading.Lock()
|
||||
INDEX_ALIAS_LOCK = threading.Lock()
|
||||
MANUAL_REBUILD_LOCK = threading.Lock()
|
||||
NORMALIZE_RE = re.compile(r"[^0-9a-z\u4e00-\u9fff]+")
|
||||
SCHEDULE_TIME_RE = re.compile(r"^(?:[01]?\d|2[0-3]):[0-5]\d$")
|
||||
SCHEDULER_POLL_SECONDS = 20
|
||||
INDEX_DEVICE_NAME_ALIAS_MAP: dict[str, list[str]] | None = None
|
||||
DEVICE_TYPES = {"phone", "tablet", "wear", "tv", "computer", "other"}
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS: dict[str, object] = {
|
||||
"running": False,
|
||||
"last_started_at": None,
|
||||
"last_finished_at": None,
|
||||
"last_status": None,
|
||||
"last_message": None,
|
||||
}
|
||||
|
||||
|
||||
def truthy_env(name: str, default: str = "0") -> bool:
|
||||
@@ -471,7 +479,34 @@ def count_manual_alias_conflicts(device: dict[str, object]) -> int:
|
||||
return len(conflicts)
|
||||
|
||||
|
||||
def rebuild_generated_outputs() -> dict[str, object]:
|
||||
def _manual_mysql_loader_task() -> None:
|
||||
with MANUAL_REBUILD_LOCK:
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["running"] = True
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_started_at"] = local_now().isoformat(timespec="seconds")
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_status"] = "running"
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_message"] = "手动补录触发的 MySQL 刷新进行中。"
|
||||
try:
|
||||
load_proc = run_command(["python3", str(MYSQL_LOADER)])
|
||||
message = "\n".join(part for part in [load_proc.stdout.strip(), load_proc.stderr.strip()] if part).strip() or "MySQL 已刷新。"
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_status"] = "success" if load_proc.returncode == 0 else "failed"
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_message"] = message
|
||||
except Exception as err:
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_status"] = "failed"
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_message"] = str(err)
|
||||
finally:
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["running"] = False
|
||||
LAST_MANUAL_MYSQL_LOAD_STATUS["last_finished_at"] = local_now().isoformat(timespec="seconds")
|
||||
|
||||
|
||||
def start_manual_mysql_loader() -> bool:
|
||||
if LAST_MANUAL_MYSQL_LOAD_STATUS.get("running"):
|
||||
return False
|
||||
thread = threading.Thread(target=_manual_mysql_loader_task, name="manual-mysql-loader", daemon=True)
|
||||
thread.start()
|
||||
return True
|
||||
|
||||
|
||||
def rebuild_generated_outputs(*, defer_mysql_load: bool = False) -> dict[str, object]:
|
||||
build_proc = run_command(
|
||||
[
|
||||
"python3",
|
||||
@@ -504,6 +539,10 @@ def rebuild_generated_outputs() -> dict[str, object]:
|
||||
mysql_loaded = False
|
||||
mysql_message = "MySQL 未刷新。"
|
||||
if mysql_auto_load_enabled():
|
||||
if defer_mysql_load:
|
||||
started = start_manual_mysql_loader()
|
||||
mysql_message = "MySQL 后台刷新中。" if started else "MySQL 后台刷新已在进行中。"
|
||||
else:
|
||||
load_proc = run_command(["python3", str(MYSQL_LOADER)])
|
||||
mysql_message = "\n".join(part for part in [load_proc.stdout.strip(), load_proc.stderr.strip()] if part).strip() or "MySQL 已刷新。"
|
||||
if load_proc.returncode != 0:
|
||||
@@ -513,7 +552,13 @@ def rebuild_generated_outputs() -> dict[str, object]:
|
||||
"index_updated": True,
|
||||
"mysql_seed_updated": True,
|
||||
"mysql_loaded": mysql_loaded,
|
||||
"message": "本地覆盖库已保存，索引与 MySQL seed 已刷新。" if mysql_loaded else "本地覆盖库已保存，索引与 MySQL seed 已刷新，MySQL 未自动装载。",
|
||||
"message": (
|
||||
"本地覆盖库已保存，索引与 MySQL seed 已刷新，MySQL 正在后台刷新。"
|
||||
if defer_mysql_load and mysql_auto_load_enabled()
|
||||
else "本地覆盖库已保存，索引与 MySQL seed 已刷新。"
|
||||
if mysql_loaded
|
||||
else "本地覆盖库已保存，索引与 MySQL seed 已刷新，MySQL 未自动装载。"
|
||||
),
|
||||
"build_output": build_output,
|
||||
"mysql_seed_output": seed_output,
|
||||
"mysql_message": mysql_message,
|
||||
@@ -532,6 +577,13 @@ def manual_catalog_payload() -> dict[str, object]:
|
||||
"device_count": len(devices),
|
||||
},
|
||||
"catalog_file": str(MANUAL_CATALOG_PATH.relative_to(PROJECT_ROOT)),
|
||||
"mysql_refresh": {
|
||||
"running": bool(LAST_MANUAL_MYSQL_LOAD_STATUS.get("running")),
|
||||
"last_started_at": LAST_MANUAL_MYSQL_LOAD_STATUS.get("last_started_at"),
|
||||
"last_finished_at": LAST_MANUAL_MYSQL_LOAD_STATUS.get("last_finished_at"),
|
||||
"last_status": LAST_MANUAL_MYSQL_LOAD_STATUS.get("last_status"),
|
||||
"last_message": LAST_MANUAL_MYSQL_LOAD_STATUS.get("last_message"),
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@@ -552,7 +604,7 @@ def upsert_manual_brand(payload: dict[str, object]) -> dict[str, object]:
|
||||
catalog["brands"].append(incoming)
|
||||
validated = validate_manual_catalog(catalog)
|
||||
write_manual_catalog(validated)
|
||||
rebuild_result = rebuild_generated_outputs()
|
||||
rebuild_result = rebuild_generated_outputs(defer_mysql_load=True)
|
||||
return {
|
||||
"saved_brand": incoming,
|
||||
"catalog": manual_catalog_payload(),
|
||||
@@ -576,7 +628,7 @@ def upsert_manual_device(payload: dict[str, object]) -> dict[str, object]:
|
||||
catalog["devices"].append(device_payload)
|
||||
validated = validate_manual_catalog(catalog)
|
||||
write_manual_catalog(validated)
|
||||
rebuild_result = rebuild_generated_outputs()
|
||||
rebuild_result = rebuild_generated_outputs(defer_mysql_load=True)
|
||||
return {
|
||||
"saved_device": device_payload,
|
||||
"alias_conflict_count": count_manual_alias_conflicts(device_payload),
|
||||
@@ -602,7 +654,7 @@ def delete_manual_brand(payload: dict[str, object]) -> dict[str, object]:
|
||||
if len(next_brands) == len(catalog["brands"]):
|
||||
raise RuntimeError(f"未找到品牌: {brand_name}")
|
||||
write_manual_catalog({"brands": next_brands, "devices": catalog["devices"]})
|
||||
rebuild_result = rebuild_generated_outputs()
|
||||
rebuild_result = rebuild_generated_outputs(defer_mysql_load=True)
|
||||
return {
|
||||
"deleted_brand": brand_name,
|
||||
"catalog": manual_catalog_payload(),
|
||||
@@ -624,7 +676,7 @@ def delete_manual_device(payload: dict[str, object]) -> dict[str, object]:
|
||||
if len(next_devices) == len(catalog["devices"]):
|
||||
raise RuntimeError(f"未找到设备: {device_id}")
|
||||
write_manual_catalog({"brands": catalog["brands"], "devices": next_devices})
|
||||
rebuild_result = rebuild_generated_outputs()
|
||||
rebuild_result = rebuild_generated_outputs(defer_mysql_load=True)
|
||||
return {
|
||||
"deleted_device": device_id,
|
||||
"catalog": manual_catalog_payload(),
|
||||
|
||||
+120
-14
@@ -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() {
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user