Merge pull request #13685 from esengine/fix/13682-versions-nav-update-dot

fix(settings): mark the Version row when an update is known

desktop/frontend-next/perf/harness.tsx

@@ -149,6 +149,10 @@ class BenchPort extends MockPort {
     return { path, content, revision: "r1" };
   }
 
+  async updateMode() {
+    return query.has("update") ? "notify" : super.updateMode();
+  }
+
   async versions() {
     if (query.has("update")) return { current: "2.42.0", pinned: "", stalePin: false, latest: "2.43.0", newer: true, versions: [] };
     if (!query.has("versions")) return super.versions();

desktop/frontend-next/src/styles/studio.css

@@ -150,7 +150,8 @@ body { background: var(--page); }
 [data-titlebar="app"] .nav { -webkit-app-region: drag; }
 [data-titlebar="app"] .nav button { -webkit-app-region: no-drag; }
 .studio-settings, .navbtn { position: relative; }
-.studio-settings .upd-dot, .navbtn .upd-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+.studio-settings .upd-dot, .navbtn .upd-dot, .prefs-nav .upd-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+.prefs-nav .upd-dot { top: 6px; left: 21px; right: auto; }
 .navbtn .fbk-badge { position: absolute; top: 3px; right: 2px; min-width: 14px; height: 14px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); font: var(--w-med) calc(9px * var(--fs-scale, 1))/1 var(--ui); }
 .navgrp { gap: 3px; }
 .navbtn { width: 36px; height: 36px; border-radius: 8px; }

desktop/frontend-next/src/ui/Settings.tsx

@@ -8,6 +8,7 @@ import { arrowTabs } from "./tablist";
 import { useSettingsSearch } from "./useSettingsSearch";
 import { bytes, tokens as fmtTokens } from "../i18n/format";
 import { ICON, NAV, SECTION_NAME } from "./prefsnav";
+import { UpdateDot } from "./UpdateDot";
 import { Group, SCOPE_SAID } from "./Group";
 import { PlanApproval } from "./PlanApproval";
 import { SessionCoordination } from "./SessionCoordination";
@@ -443,6 +444,7 @@ export function Settings({ hub, onError, port, networkPort, localWorkspacePort,
                     tabIndex={at === id ? 0 : -1}
                     aria-selected={at === id} disabled={updatingPkg.applying} onClick={() => setAt(id)}>
                     <svg viewBox="0 0 16 16" aria-hidden="true">{ICON[id]}</svg>
+                    {id === "versions" && <UpdateDot />}
                     <span className="nm">{t(name)}</span>
                     <span className="nv" title={nav[id] || undefined} data-danger={danger(id) ? "" : undefined}>
                       {nav[id]}

desktop/frontend-next/src/ui/settings-versions-update-dot.interaction.test.tsx

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import "./testkit";
+import { Settings } from "./Settings";
+import { MockPort } from "../port/mock";
+import { MockHub } from "../port/mock_hub";
+import { resetUpdateWatch, startUpdateWatch } from "../state/updatewatch";
+
+afterEach(() => { cleanup(); resetUpdateWatch(); vi.useRealTimers(); });
+
+const settings = (port: MockPort) => (
+  <Settings hub={new MockHub()} onError={() => {}} port={port} networkPort={port}
+    status={null} theme="" reloadThemes={() => {}} onTheme={() => {}} contrast="" onContrast={() => {}}
+    weight="" onWeight={() => {}} look={{}} onLook={() => {}} onClose={() => {}} onChanged={() => {}}
+    at="versions" account={null} accountUnread="" reloadAccount={() => {}} />
+);
+
+const watch = async (newer: boolean) => {
+  vi.useFakeTimers();
+  const hub = { current: "2.20.0", pinned: "", stalePin: false, latest: "2.21.0", newer, versions: [] };
+  const stop = startUpdateWatch({ updateMode: () => Promise.resolve("notify" as const), versions: () => Promise.resolve(hub) });
+  await act(async () => { await vi.advanceTimersByTimeAsync(61_000); });
+  vi.useRealTimers();
+  return stop;
+};
+
+describe("the update mark in the settings list", () => {
+  it("sits on the versions row, where the window's gear points", async () => {
+    const stop = await watch(true);
+    render(settings(new MockPort()));
+    const row = (await screen.findAllByRole("tab")).find((el) => el.getAttribute("data-value") === "versions");
+    expect(row?.querySelector(".upd-dot")).not.toBeNull();
+    expect(row?.textContent).toContain("有新版本 2.21.0");
+    for (const other of screen.getAllByRole("tab").filter((el) => el !== row)) expect(other.querySelector(".upd-dot")).toBeNull();
+    stop();
+  });
+
+  it("is absent when no newer release is known", async () => {
+    const stop = await watch(false);
+    render(settings(new MockPort()));
+    await screen.findAllByRole("tab");
+    expect(document.querySelector(".prefs-nav .upd-dot")).toBeNull();
+    stop();
+  });
+});

release-notes/studio/unreleased/13682-versions-nav-update-dot.md

@@ -0,0 +1,2 @@
+- 修复：有新版本时，设置弹窗左侧列表里的「版本」一行也会出现和左下角设置图标一样的提示点，打开设置后能直接看到该点哪里。关联 #13682。
+- Fixed: When a newer release is known, the Version row in the settings list now carries the same mark as the gear, so the update entry is easy to find. Refs #13682.