add notice after config

2026-07-31 10:20:33 +08:00
parent 692d8dd18a
commit d45acaf50f
12 changed files with 2721 additions and 2277 deletions
@@ -21,6 +21,11 @@ const identificationExample = {
  repeat: 2
 };

+const configFields = {
+  volume: Object.keys(volumeExample),
+  identification: Object.keys(identificationExample)
+};
+
 const state = {
  configType: "volume",
  imagePaths: { csv: null, json: null },
@@ -33,7 +38,9 @@ const state = {
  defaultDeviceId: "",
  review: null,
  retryDeviceId: null,
+  notificationDeviceId: null,
  lightbox: { mediaType: null, scale: 1, fit: true, previousFocus: null },
+  notifications: [],
  connected: false
 };

@@ -66,12 +73,14 @@ const elements = {
      openImage: document.querySelector('[data-open-plot="json"]')
    }
  },
-  configEditor: document.querySelector("#config-editor"),
+  configForm: document.querySelector("#config-form"),
  configLabel: document.querySelector("#config-label"),
  configPath: document.querySelector("#config-path"),
  publishTarget: document.querySelector("#publish-target"),
  publishButton: document.querySelector("#publish-config"),
  publishResult: document.querySelector("#publish-result"),
+  configNotifications: document.querySelector("#config-notifications"),
+  configNotificationBadge: document.querySelector("#config-notification-badge"),
  lineCompany: document.querySelector("#line-company"),
  licenseTarget: document.querySelector("#license-target"),
  licenseList: document.querySelector("#license-list"),
@@ -225,6 +234,11 @@ function renderLineOptions() {
 function updateSelectedTarget() {
  const company = selectedCompany();
  const line = selectedLine();
+  if (state.notificationDeviceId !== elements.deviceId.value) {
+    state.notificationDeviceId = elements.deviceId.value;
+    state.notifications = [];
+    renderNotifications();
+  }
  elements.licenseTarget.value = company && line ? `${company.name} / ${line.name}` : "";
  void syncConnection();
 }
@@ -413,16 +427,91 @@ function activateTab(target) {
 }

 function activateConfigType(configType) {
-  try {
-    state.configs[state.configType] = JSON.parse(elements.configEditor.value);
-  } catch (_error) {
-    // Keep the last valid configuration when changing views.
-  }
+  syncCurrentConfig();
  state.configType = configType;
  document.querySelectorAll(".segment").forEach((item) => item.classList.toggle("active", item.dataset.type === configType));
  renderConfig();
 }

+function isPowerOfTwo(value) {
+  return Number.isInteger(value) && value >= 2 && (value & (value - 1)) === 0;
+}
+
+function clearConfigErrors() {
+  elements.configForm.querySelectorAll("[aria-invalid]").forEach((input) => input.removeAttribute("aria-invalid"));
+  elements.configForm.querySelectorAll(".config-field-error").forEach((item) => item.remove());
+}
+
+function showConfigFieldError(field, message) {
+  const input = elements.configForm.querySelector(`[data-config-field="${field}"]`);
+  if (!input) return;
+  input.setAttribute("aria-invalid", "true");
+  const error = document.createElement("p");
+  error.className = "config-field-error";
+  error.textContent = message;
+  input.closest(".config-field").append(error);
+}
+
+function readConfigForm({ showErrors = false } = {}) {
+  const type = state.configType;
+  const parameters = {};
+  let invalidField = null;
+  let invalidMessage = null;
+  clearConfigErrors();
+  for (const field of configFields[type]) {
+    const input = elements.configForm.querySelector(`[data-config-field="${field}"]`);
+    const text = input?.value.trim() || "";
+    if (field === "levels") {
+      const values = text.split(",").map((value) => value.trim()).filter(Boolean);
+      parameters[field] = values.map(Number);
+      if (!values.length || parameters[field].some((value) => !Number.isFinite(value))) {
+        invalidField = field;
+        invalidMessage = "请输入以逗号分隔的有效数字。";
+      } else if (!isPowerOfTwo(parameters[field].length)) {
+        invalidField = field;
+        invalidMessage = "元素个数必须是不小于 2 的 2 的整数次幂。";
+      }
+      continue;
+    }
+    const value = Number(text);
+    parameters[field] = value;
+    if (!text || !Number.isFinite(value)) {
+      invalidField = field;
+      invalidMessage = "请输入有效数字。";
+    } else if (["num_runs", "n_order", "repeat"].includes(field) && !Number.isInteger(value)) {
+      invalidField = field;
+      invalidMessage = "请输入整数。";
+    }
+  }
+  if (invalidField) {
+    if (showErrors) showConfigFieldError(invalidField, invalidMessage);
+    throw new Error(`${invalidField}：${invalidMessage}`);
+  }
+  return parameters;
+}
+
+function syncCurrentConfig() {
+  try {
+    state.configs[state.configType] = readConfigForm();
+  } catch (_error) {
+    // Preserve the last valid values until the user corrects the visible form.
+  }
+}
+
+function normalizeImportedConfig(parameters) {
+  if (!parameters || typeof parameters !== "object" || Array.isArray(parameters)) {
+    throw new Error("导入配置必须是 JSON 对象");
+  }
+  const fields = configFields[state.configType];
+  const unknown = Object.keys(parameters).filter((field) => !fields.includes(field));
+  if (unknown.length) throw new Error(`导入配置包含未知字段：${unknown.join(", ")}`);
+  const normalized = { ...state.configs[state.configType] };
+  for (const field of fields) {
+    if (parameters[field] !== undefined) normalized[field] = parameters[field];
+  }
+  return normalized;
+}
+
 function switchToIdentificationConfigForRetry() {
  if (!state.review) return;
  state.retryDeviceId = state.review.deviceId;
@@ -464,11 +553,16 @@ async function submitRetryReview() {

 function renderConfig() {
  const isVolume = state.configType === "volume";
-  elements.configEditor.value = JSON.stringify(state.configs[state.configType], null, 2);
+  const config = state.configs[state.configType];
+  elements.configForm.innerHTML = configFields[state.configType].map((field) => {
+    const value = field === "levels" ? config[field].join(", ") : config[field];
+    const integer = ["num_runs", "n_order", "repeat"].includes(field);
+    return `<div class="config-field"><label for="config-${field}">${field}</label><input id="config-${field}" data-config-field="${field}" type="${field === "levels" ? "text" : "number"}"${field === "levels" ? "" : ` step="${integer ? "1" : "any"}"` } value="${escapeHtml(value)}" required></div>`;
+  }).join("");
  elements.configLabel.textContent = isVolume ? "容积测量配置" : "系统辨识配置";
  elements.publishTarget.textContent = isVolume ? "Server 配置文件" : "设备辨识配置";
  elements.publishButton.textContent = isVolume ? "上传容积配置" : "发布辨识配置";
-  elements.configPath.textContent = "可直接编辑，或从本地 JSON 导入";
+  elements.configPath.textContent = "字段名称固定；可填写右侧数据或从本地 JSON 导入";
  elements.publishResult.textContent = "等待操作";
  delete elements.publishResult.dataset.tone;
 }
@@ -688,8 +782,13 @@ elements.identificationFileList.addEventListener("click", async (event) => {
 document.querySelector("#import-config").addEventListener("click", async () => {
  const result = await runBusy("正在导入配置", () => window.reinloop.chooseConfig());
  if (!result) return;
-  state.configs[state.configType] = result.parameters;
-  elements.configEditor.value = JSON.stringify(result.parameters, null, 2);
+  try {
+    state.configs[state.configType] = normalizeImportedConfig(result.parameters);
+    renderConfig();
+  } catch (error) {
+    showError(error);
+    return;
+  }
  elements.configPath.textContent = result.filePath;
  setStatus("配置已导入", "success");
 });
@@ -700,8 +799,13 @@ document.querySelector("#load-server").addEventListener("click", async () => {
    credentials: credentials()
  }));
  if (!parameters) return;
-  state.configs[state.configType] = parameters;
-  elements.configEditor.value = JSON.stringify(parameters, null, 2);
+  try {
+    state.configs[state.configType] = normalizeImportedConfig(parameters);
+    renderConfig();
+  } catch (error) {
+    showError(new Error(`Server 配置无效：${error.message}`));
+    return;
+  }
  elements.publishResult.textContent = "已读取当前 Server 配置";
  elements.publishResult.dataset.tone = "success";
  setStatus("读取完成", "success");
@@ -710,9 +814,9 @@ document.querySelector("#load-server").addEventListener("click", async () => {
 elements.publishButton.addEventListener("click", async () => {
  let parameters;
  try {
-    parameters = JSON.parse(elements.configEditor.value);
+    parameters = readConfigForm({ showErrors: true });
  } catch (error) {
-    showError(new Error(`JSON 格式错误: ${error.message}`));
+    showError(error);
    return;
  }

@@ -732,6 +836,10 @@ elements.publishButton.addEventListener("click", async () => {
    ? `${result.message}: ${result.storagePath}`
    : result.message;
  elements.publishResult.dataset.tone = "success";
+  if (state.configType === "volume") {
+    const notification = state.notifications.find((item) => item.type === "volume_request_started");
+    if (notification) void acknowledgeNotification(notification);
+  }
  if (state.configType === "identification" && state.retryDeviceId) {
    await submitRetryReview();
  } else {
@@ -830,4 +938,72 @@ elements.controlFileList.addEventListener("click", async (event) => {
      button.disabled = false;
    }
  }
+});
+
+function renderNotifications() {
+  elements.configNotificationBadge.hidden = state.notifications.length === 0;
+  elements.configNotificationBadge.textContent = String(state.notifications.length);
+  elements.configNotifications.innerHTML = state.notifications.map((notification) => {
+    const action = notification.type === "volume_request_started"
+      ? "处理配置"
+      : notification.type === "volume_result_ready"
+        ? "查看结果"
+        : "查看绘图";
+    const secondaryAction = notification.type === "identification_result_ready" ? "查看辨识数据" : "";
+    return `<article class="panel-notification" data-notification-id="${escapeHtml(notification.notificationId)}" data-type="${escapeHtml(notification.type)}"><div class="notification-copy"><strong>${escapeHtml(notification.title)}</strong><span>${escapeHtml(notification.message)}</span></div><div class="notification-actions"><button class="button secondary" data-notification-action="primary" data-notification-id="${escapeHtml(notification.notificationId)}">${action}</button>${secondaryAction ? `<button class="button secondary" data-notification-action="secondary" data-notification-id="${escapeHtml(notification.notificationId)}">${secondaryAction}</button>` : ""}<button class="button icon" title="关闭提醒" aria-label="关闭提醒" data-notification-action="close" data-notification-id="${escapeHtml(notification.notificationId)}">x</button></div></article>`;
+  }).join("");
+}
+
+async function acknowledgeNotification(notification) {
+  const result = await runBusy("正在确认提醒", () => window.reinloop.acknowledgeNotification({
+    deviceId: notification.deviceId,
+    notificationId: notification.notificationId,
+    credentials: credentials()
+  }));
+  if (!result) return false;
+  state.notifications = state.notifications.filter((item) => item.notificationId !== notification.notificationId);
+  renderNotifications();
+  return true;
+}
+
+async function handleNotificationAction(notification, action) {
+  if (action === "close") {
+    await acknowledgeNotification(notification);
+    return;
+  }
+  if (notification.type === "volume_request_started") {
+    activateTab("config-panel");
+    activateConfigType("volume");
+    elements.configForm.querySelector("input")?.focus();
+    return;
+  }
+  if (notification.type === "volume_result_ready") {
+    const result = await runBusy("正在打开容积测试结果", () => window.reinloop.openNotificationFile({
+      fileID: notification.fileID,
+      credentials: credentials()
+    }));
+    if (result) setStatus(`已打开结果文件：${result.filePath}`, "success");
+    return;
+  }
+  if (action === "primary") {
+    activateTab("plot-panel");
+    return;
+  }
+  activateTab("identification-data-panel");
+  await refreshIdentificationFiles();
+}
+
+elements.configNotifications.addEventListener("click", (event) => {
+  const button = event.target.closest("button[data-notification-id]");
+  if (!button) return;
+  const notification = state.notifications.find((item) => item.notificationId === button.dataset.notificationId);
+  if (notification) void handleNotificationAction(notification, button.dataset.notificationAction);
+});
+
+window.reinloop.onPanelNotification((notification) => {
+  if (!notification?.notificationId || notification.deviceId !== elements.deviceId.value) return;
+  state.notificationDeviceId = notification.deviceId;
+  if (state.notifications.some((item) => item.notificationId === notification.notificationId)) return;
+  state.notifications.push(notification);
+  renderNotifications();
 });