From 60e2cc638284eb300ad21b5d44e6c5d2c2601f88 Mon Sep 17 00:00:00 2001
From: fylorn <249551762+fylorn@users.noreply.github.com>
Date: Wed, 30 Sep 2026 18:04:05 +0800
Subject: [PATCH] Lite page: redesign the install section

The section was a mostly empty left column beside a long stack of three
platforms, with the Homebrew command cut off and every caveat written out.
Now: a heading with the docs links, one tab per system (the visitor's own
system open; all three panels show without script), the requirement in one
sentence, one card per way to install (the recommended one marked, commands
shown in full), and the first-launch caveat as one short note.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/pages/LitePage.astro | 395 +++++++++++++++++++---------
 src/i18n/pages/lite.ts              | 130 +++++----
 2 files changed, 338 insertions(+), 187 deletions(-)

diff --git a/src/components/pages/LitePage.astro b/src/components/pages/LitePage.astro
index 48ceb07..a8e1526 100644
--- a/src/components/pages/LitePage.astro
+++ b/src/components/pages/LitePage.astro
@@ -70,7 +70,6 @@ const textLink =
 const nodes = [c.built.lite, c.built.core, c.built.upstreams];
 /** 截图外的一圈：和窗口自带的阴影配合，不再加边框 */
 const shotClass = "w-full rounded-[10px]";
-const platformLabel = "m-0 font-mono text-[13px] text-[var(--color-muted)]";
 const archLabel = { x64: "x64", arm64: "ARM64" } as const;
 ---
 
@@ -283,129 +282,131 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
       </div>
     </section>
 
-    <section id="install" data-os="other" class="scroll-mt-20 py-16 sm:py-20 lg:py-[88px]">
-      <div class="container-page grid items-start gap-8 lg:grid-cols-2 lg:gap-16">
-        <div class="flex min-w-0 flex-col gap-4">
-          <p class:list={[eyebrow, "m-0"]}>{c.install.eyebrow}</p>
-          <h2 class={h2}>{c.install.title}</h2>
-          <p class="m-0 text-base leading-relaxed text-[var(--color-muted)] sm:text-[17px]">{c.install.brewNote}</p>
-          <div class="flex flex-wrap items-center gap-x-6 gap-y-2">
+    <section id="install" data-os="mac" class="scroll-mt-20 py-16 sm:py-20 lg:py-[88px]">
+      <div class="container-page flex flex-col gap-8">
+        <div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between lg:gap-10">
+          <div class="flex min-w-0 flex-col gap-3">
+            <p class:list={[eyebrow, "m-0"]}>{c.install.eyebrow}</p>
+            <h2 class={h2}>{c.install.title}</h2>
+            <p class="m-0 text-base leading-relaxed text-[var(--color-muted)] sm:text-[17px]">{c.install.intro}</p>
+          </div>
+          <div class="flex shrink-0 flex-wrap items-center gap-x-6 gap-y-1">
             <a href={installDocsHref} class={textLink}>{c.install.docs}</a>
             <a href={sourceDocsHref} class={textLink}>{c.install.source}</a>
+            <a href={releases} target="_blank" rel="noopener" class={textLink}>{c.install.releases}</a>
           </div>
         </div>
-        <div class="flex min-w-0 flex-col gap-8" data-install-list>
-          <div class="flex min-w-0 flex-col gap-4" data-install-os="mac">
-            <p class={platformLabel}>{c.install.macLabel}</p>
-            <div class="flex items-center rounded-[14px] border border-[var(--color-border-strong)] bg-[var(--color-surface)] font-mono text-[15px] leading-relaxed sm:text-base">
-              <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap p-5 text-[#e6ebf2] sm:p-7">
-                <span class="select-none text-[var(--color-dim)]">$ </span><span data-cmd>brew install --cask thinkwatchproject/tap/thinkwatch-lite</span>
-              </code>
-              <button type="button" class="copy-cmd" data-copy="brew install --cask thinkwatchproject/tap/thinkwatch-lite" data-copied-label={ui.copied}>{ui.copy}</button>
-            </div>
-            <div class="flex flex-col gap-2 rounded-[14px] border border-[var(--color-border-strong)] p-5 sm:p-7">
-              <h3 class="m-0 text-lg font-semibold sm:text-xl">{c.install.dmgTitle}</h3>
-              <p class="m-0 text-[15px] leading-relaxed text-[var(--color-muted)] sm:text-base">{c.install.dmgBody}</p>
-              <a href={dmg.url} class="dl-button self-start">{c.install.dmgDownload}</a>
-              {liteVersion && dmg.sha && (
-                <p class="m-0 font-mono text-[13px] text-[var(--color-muted)]">
-                  {c.install.version} {liteVersion}
-                  {" · "}
-                  <a href={dmg.sha} class="text-[var(--color-brand-1)] transition-colors hover:text-[var(--color-brand-2)]">sha256</a>
-                </p>
-              )}
-              <a href={releases} target="_blank" rel="noopener" class:list={[textLink, "self-start"]}>
-                {c.install.releases}
-                <svg class="ml-1.5 h-4 w-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-                  <path d="M5 11L11 5M6 5h5v5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
-                </svg>
-              </a>
+
+        {/* 一个系统一栏，默认选中访客自己的系统（见页尾脚本）；没有脚本时三栏都显示 */}
+        <div role="tablist" aria-label={c.install.tabsLabel} class="install-tabs" data-install-tabs hidden>
+          {(["mac", "windows", "linux"] as const).map((os) => (
+            <button type="button" role="tab" id={`install-tab-${os}`} aria-controls={`install-${os}`} data-tab={os}>
+              {c.install.tabs[os]}
+            </button>
+          ))}
+        </div>
+
+        <div class="flex flex-col gap-12">
+          <div id="install-mac" role="tabpanel" aria-labelledby="install-tab-mac" class="install-panel" data-panel="mac">
+            <p class="install-req">{c.install.mac.req}</p>
+            <div class="grid gap-4 lg:grid-cols-[3fr_2fr]">
+              <div class="install-card">
+                <div class="flex items-center gap-2.5">
+                  <h3 class="install-card-title">{c.install.mac.brewTitle}</h3>
+                  <span class="install-tag">{c.install.recommended}</span>
+                </div>
+                <p class="install-card-body">{c.install.mac.brewBody}</p>
+                <div class="install-cmd">
+                  <code><span class="select-none text-[var(--color-dim)]">$ </span><span data-cmd>brew install --cask thinkwatchproject/tap/thinkwatch-lite</span></code>
+                  <button type="button" class="copy-cmd" data-copy="brew install --cask thinkwatchproject/tap/thinkwatch-lite" data-copied-label={ui.copied}>{ui.copy}</button>
+                </div>
+              </div>
+              <div class="install-card">
+                <h3 class="install-card-title">{c.install.mac.dmgTitle}</h3>
+                <p class="install-card-body">{c.install.mac.dmgBody}</p>
+                <div class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-2">
+                  <a href={dmg.url} class="dl-button">{c.install.mac.dmgDownload}</a>
+                  {liteVersion && (
+                    <p class="install-meta">
+                      {c.install.version} {liteVersion}
+                      {dmg.sha && <Fragment>{" · "}<a href={dmg.sha}>{c.install.sha}</a></Fragment>}
+                    </p>
+                  )}
+                </div>
+              </div>
             </div>
+            <p class="install-note">{c.install.mac.note}</p>
           </div>
-          <div class="flex min-w-0 flex-col gap-4" data-install-os="windows">
-            <p class={platformLabel}>{c.install.winLabel}</p>
-            <div class="flex flex-col gap-4 rounded-[14px] border border-[var(--color-border-strong)] p-5 sm:p-7">
-              <h3 class="m-0 text-lg font-semibold sm:text-xl">{c.install.winTitle}</h3>
-              <p class="m-0 text-[15px] leading-relaxed text-[var(--color-muted)] sm:text-base">{c.install.winBody}</p>
-              <div class="flex flex-col items-start gap-2">
+
+          <div id="install-windows" role="tabpanel" aria-labelledby="install-tab-windows" class="install-panel" data-panel="windows">
+            <p class="install-req">{c.install.windows.req}</p>
+            <div class="install-card">
+              <h3 class="install-card-title">{c.install.windows.title}</h3>
+              <p class="install-card-body">{c.install.windows.body}</p>
+              <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
                 {winArchs.map((arch) => (
-                  <a href={win[arch].url} class="win-download" data-win-arch={arch} hidden={arch !== "x64"}>
-                    {c.install.winDownload[arch]}
+                  <a href={win[arch].url} class="dl-button dl-primary" data-win-arch={arch} hidden={arch !== "x64"}>
+                    {c.install.windows.download[arch]}
                   </a>
                 ))}
                 {winArchs.map((arch) => (
-                  <p class="m-0 text-[15px] text-[var(--color-muted)]" data-win-other={arch} hidden={arch === "x64"}>
-                    {c.install.winOther}<a href={win[arch].url} class="font-medium text-[var(--color-brand-1)] transition-colors hover:text-[var(--color-brand-2)]">
-                      {c.install.winOtherLink[arch]}
-                    </a>
+                  <p class="install-meta" data-win-other={arch} hidden={arch === "x64"}>
+                    {c.install.other}<a href={win[arch].url}>{c.install.windows.otherLink[arch]}</a>
                   </p>
                 ))}
               </div>
               {liteVersion && (
-                <p class="m-0 font-mono text-[13px] text-[var(--color-muted)]">
+                <p class="install-meta">
                   {c.install.version} {liteVersion}
                   {winArchs.map((arch) =>
-                    win[arch].sha && (
-                      <Fragment>
-                        {" · "}
-                        <a href={win[arch].sha} class="text-[var(--color-brand-1)] transition-colors hover:text-[var(--color-brand-2)]">
-                          sha256 ({archLabel[arch]})
-                        </a>
-                      </Fragment>
-                    ),
+                    win[arch].sha && <Fragment>{" · "}<a href={win[arch].sha}>{c.install.sha} ({archLabel[arch]})</a></Fragment>,
                   )}
                 </p>
               )}
-              <p class="m-0 border-t border-[var(--color-border-strong)] pt-4 text-[15px] leading-relaxed text-[var(--color-muted)] sm:text-base">
-                {c.install.winUnsigned}
-              </p>
             </div>
+            <p class="install-note">{c.install.windows.note}</p>
           </div>
-          <div class="flex min-w-0 flex-col gap-4" data-install-os="linux">
-            <p class={platformLabel}>{c.install.linuxLabel}</p>
-            <div class="flex items-center rounded-[14px] border border-[var(--color-border-strong)] bg-[var(--color-surface)] font-mono text-[15px] leading-relaxed sm:text-base">
-              <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap p-5 text-[#e6ebf2] sm:p-7">
-                <span class="select-none text-[var(--color-dim)]">$ </span><span data-cmd>curl -fsSL {installScript} | sh</span>
-              </code>
-              <button type="button" class="copy-cmd" data-copy={`curl -fsSL ${installScript} | sh`} data-copied-label={ui.copied}>{ui.copy}</button>
-            </div>
-            <p class="m-0 text-[15px] leading-relaxed text-[var(--color-muted)] sm:text-base">{c.install.linuxScript}</p>
-            <div class="flex flex-col gap-4 rounded-[14px] border border-[var(--color-border-strong)] p-5 sm:p-7">
-              <h3 class="m-0 text-lg font-semibold sm:text-xl">{c.install.linuxTitle}</h3>
-              <p class="m-0 text-[15px] leading-relaxed text-[var(--color-muted)] sm:text-base">{c.install.linuxBody}</p>
-              <div class="flex flex-col items-start gap-2">
-                {linuxArchs.map((arch) => (
-                  <a href={linux[arch].url} class="dl-button" data-linux-arch={arch} hidden={arch !== "x86_64"}>
-                    {c.install.linuxDownload[arch]}
-                  </a>
-                ))}
-                {linuxArchs.map((arch) => (
-                  <p class="m-0 text-[15px] text-[var(--color-muted)]" data-linux-other={arch} hidden={arch === "x86_64"}>
-                    {c.install.linuxOther}<a href={linux[arch].url} class="font-medium text-[var(--color-brand-1)] transition-colors hover:text-[var(--color-brand-2)]">
-                      {c.install.linuxOtherLink[arch]}
+
+          <div id="install-linux" role="tabpanel" aria-labelledby="install-tab-linux" class="install-panel" data-panel="linux">
+            <p class="install-req">{c.install.linux.req}</p>
+            <div class="grid gap-4">
+              <div class="install-card">
+                <div class="flex items-center gap-2.5">
+                  <h3 class="install-card-title">{c.install.linux.scriptTitle}</h3>
+                  <span class="install-tag">{c.install.recommended}</span>
+                </div>
+                <p class="install-card-body">{c.install.linux.scriptBody}</p>
+                <div class="install-cmd">
+                  <code><span class="select-none text-[var(--color-dim)]">$ </span><span data-cmd>curl -fsSL {installScript} | sh</span></code>
+                  <button type="button" class="copy-cmd" data-copy={`curl -fsSL ${installScript} | sh`} data-copied-label={ui.copied}>{ui.copy}</button>
+                </div>
+              </div>
+              <div class="install-card">
+                <h3 class="install-card-title">{c.install.linux.appimageTitle}</h3>
+                <p class="install-card-body">{c.install.linux.appimageBody}</p>
+                <div class="mt-auto flex flex-wrap items-center gap-x-5 gap-y-2">
+                  {linuxArchs.map((arch) => (
+                    <a href={linux[arch].url} class="dl-button" data-linux-arch={arch} hidden={arch !== "x86_64"}>
+                      {c.install.linux.download[arch]}
                     </a>
+                  ))}
+                  {linuxArchs.map((arch) => (
+                    <p class="install-meta" data-linux-other={arch} hidden={arch === "x86_64"}>
+                      {c.install.other}<a href={linux[arch].url}>{c.install.linux.otherLink[arch]}</a>
+                    </p>
+                  ))}
+                </div>
+                {liteVersion && linuxArchs.some((arch) => linux[arch].sha) && (
+                  <p class="install-meta">
+                    {c.install.version} {liteVersion}
+                    {linuxArchs.map((arch) =>
+                      linux[arch].sha && <Fragment>{" · "}<a href={linux[arch].sha}>{c.install.sha} ({arch})</a></Fragment>,
+                    )}
                   </p>
-                ))}
+                )}
               </div>
-              {liteVersion && linuxArchs.some((arch) => linux[arch].sha) && (
-                <p class="m-0 font-mono text-[13px] text-[var(--color-muted)]">
-                  {c.install.version} {liteVersion}
-                  {linuxArchs.map((arch) =>
-                    linux[arch].sha && (
-                      <Fragment>
-                        {" · "}
-                        <a href={linux[arch].sha} class="text-[var(--color-brand-1)] transition-colors hover:text-[var(--color-brand-2)]">
-                          sha256 ({arch})
-                        </a>
-                      </Fragment>
-                    ),
-                  )}
-                </p>
-              )}
-              <p class="m-0 border-t border-[var(--color-border-strong)] pt-4 text-[15px] leading-relaxed text-[var(--color-muted)] sm:text-base">
-                {c.install.linuxNotes}
-              </p>
             </div>
+            <p class="install-note">{c.install.linux.note}</p>
           </div>
         </div>
       </div>
@@ -432,9 +433,9 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
 </Base>
 
 <!--
-  Which installer to put first. Windows visitors get the Windows block on top
-  with the button filled, Linux visitors the Linux block; everyone else keeps
-  macOS on top. The architecture comes from User-Agent Client Hints, or for
+  Which system's tab is open. Windows visitors get Windows, Linux visitors
+  Linux, everyone else macOS. Without script there are no tabs and all three
+  panels show. The architecture comes from User-Agent Client Hints, or for
   Linux without them (Firefox) from the User-Agent string: arm with 64-bit picks
   ARM64 / aarch64, and every other answer, a failure or a browser without the
   API picks x64 / x86_64, which is also what the page shows without script.
@@ -443,27 +444,49 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
 <script is:inline data-lite-download>
   (() => {
     const root = document.getElementById("install");
-    const list = root && root.querySelector("[data-install-list]");
-    if (!list) return;
+    const tabs = root && root.querySelector("[data-install-tabs]");
+    if (!tabs) return;
     const ua = navigator.userAgentData;
     const s = navigator.userAgent;
     const windows = (ua && ua.platform === "Windows") || /Windows NT/.test(s);
     const linux = !windows && !/Android/.test(s) && ((ua && ua.platform === "Linux") || /Linux/.test(s));
-    const os = windows ? "windows" : linux ? "linux" : "other";
-    const show = (arm) => {
-      const [key, arch] = linux ? ["linux", arm ? "aarch64" : "x86_64"] : ["win", arm ? "arm64" : "x64"];
+    const select = (os) => {
+      root.dataset.os = os;
+      for (const b of tabs.querySelectorAll("[data-tab]")) {
+        const on = b.dataset.tab === os;
+        b.setAttribute("aria-selected", String(on));
+        b.tabIndex = on ? 0 : -1;
+      }
+      for (const p of root.querySelectorAll("[data-panel]")) p.hidden = p.dataset.panel !== os;
+    };
+    tabs.hidden = false;
+    select(windows ? "windows" : linux ? "linux" : "mac");
+    tabs.addEventListener("click", (e) => {
+      const b = e.target.closest("[data-tab]");
+      if (b) select(b.dataset.tab);
+    });
+    tabs.addEventListener("keydown", (e) => {
+      if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+      const all = [...tabs.querySelectorAll("[data-tab]")];
+      const i = all.findIndex((b) => b.getAttribute("aria-selected") === "true");
+      const next = all[(i + (e.key === "ArrowRight" ? 1 : all.length - 1)) % all.length];
+      select(next.dataset.tab);
+      next.focus();
+    });
+    const show = (key, arch) => {
       for (const el of root.querySelectorAll(`[data-${key}-arch]`)) el.hidden = el.getAttribute(`data-${key}-arch`) !== arch;
       for (const el of root.querySelectorAll(`[data-${key}-other]`)) el.hidden = el.getAttribute(`data-${key}-other`) === arch;
     };
-    root.dataset.os = os;
-    list.prepend(list.querySelector(`[data-install-os="${windows ? "windows" : linux ? "linux" : "mac"}"]`));
-    if (!windows && !linux) return;
+    const apply = (arm) => {
+      show("win", arm && windows ? "arm64" : "x64");
+      show("linux", arm && linux ? "aarch64" : "x86_64");
+    };
     const guess = linux && /aarch64|arm64/.test(s);
-    show(guess);
-    if (!ua || typeof ua.getHighEntropyValues !== "function") return;
+    apply(guess);
+    if (!(windows || linux) || !ua || typeof ua.getHighEntropyValues !== "function") return;
     ua.getHighEntropyValues(["architecture", "bitness"]).then(
-      (v) => show(v.architecture === "arm" && v.bitness === "64"),
-      () => show(guess),
+      (v) => apply(v.architecture === "arm" && v.bitness === "64"),
+      () => apply(guess),
     );
   })();
 </script>
@@ -501,11 +524,132 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
     color: var(--color-brand-1);
   }
 
-  /* Download buttons. Outlined by default; the Windows one is filled for Windows
-     visitors, whose installer that is. The disk image stays outlined: on a Mac
-     the Homebrew command above it is the first choice. */
-  .dl-button,
-  .win-download {
+  /* Install section: tabs, cards, the command box and download buttons. */
+  .install-tabs {
+    display: inline-flex;
+    align-self: flex-start;
+    gap: 0.25rem;
+    border: 1px solid var(--color-border-strong);
+    border-radius: 12px;
+    padding: 0.25rem;
+    background: var(--color-surface);
+  }
+  .install-tabs[hidden] {
+    display: none;
+  }
+  .install-tabs button {
+    min-height: 2.5rem;
+    border-radius: 9px;
+    padding: 0 1.25rem;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--color-muted);
+    transition: background-color 150ms, color 150ms;
+  }
+  .install-tabs button:hover {
+    color: var(--color-text);
+  }
+  .install-tabs button[aria-selected="true"] {
+    background: var(--color-surface-2);
+    color: var(--color-text);
+    box-shadow: inset 0 0 0 1px var(--color-border-strong);
+  }
+  .install-tabs button:focus-visible {
+    outline: 2px solid var(--color-brand-1);
+    outline-offset: 2px;
+  }
+  .install-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .install-panel[hidden] {
+    display: none;
+  }
+  .install-req {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--color-text);
+  }
+  .install-card {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.75rem;
+    border: 1px solid var(--color-border-strong);
+    border-radius: 14px;
+    background: var(--color-surface);
+    padding: 1.5rem;
+  }
+  @media (min-width: 640px) {
+    .install-card {
+      padding: 1.75rem;
+    }
+  }
+  .install-card-title {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+  .install-card-body {
+    margin: 0;
+    font-size: 0.9375rem;
+    line-height: 1.65;
+    color: var(--color-muted);
+  }
+  .install-tag {
+    border-radius: 999px;
+    background: rgba(61, 219, 217, 0.12);
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--color-brand-1);
+  }
+  .install-cmd {
+    margin-top: auto;
+    display: flex;
+    min-width: 0;
+    align-items: stretch;
+    border: 1px solid var(--color-border-strong);
+    border-radius: 10px;
+    background: var(--color-bg);
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+  }
+  .install-cmd code {
+    min-width: 0;
+    flex: 1;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 0.875rem 1rem;
+    color: var(--color-text);
+  }
+  .install-meta {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--color-muted);
+  }
+  .install-meta[hidden] {
+    display: none;
+  }
+  .install-meta a {
+    color: var(--color-brand-1);
+    transition: color 150ms;
+  }
+  .install-meta a:hover {
+    color: var(--color-brand-2);
+  }
+  .install-note {
+    margin: 0;
+    border-left: 2px solid var(--color-border-strong);
+    padding-left: 0.875rem;
+    font-size: 0.9375rem;
+    line-height: 1.65;
+    color: var(--color-muted);
+  }
+
+  /* Download buttons: outlined, or filled where the button is the way to install. */
+  .dl-button {
     display: inline-flex;
     min-height: 2.75rem;
     align-items: center;
@@ -518,26 +662,19 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
     color: var(--color-brand-1);
     transition: background-color 150ms, color 150ms, border-color 150ms;
   }
-  .dl-button:hover,
-  .win-download:hover {
+  .dl-button:hover {
     border-color: var(--color-brand-2);
     color: var(--color-brand-2);
   }
-  .win-download[hidden] {
-    display: none;
-  }
   .dl-button[hidden] {
     display: none;
   }
-  [data-os="linux"] [data-linux-arch],
-  [data-os="windows"] .win-download {
+  .dl-primary {
     background: var(--color-brand-1);
     color: var(--color-bg);
   }
-  [data-os="linux"] [data-linux-arch]:hover,
-  [data-os="windows"] .win-download:hover {
+  .dl-primary:hover {
     background: var(--color-brand-2);
-    border-color: var(--color-brand-2);
     color: var(--color-bg);
   }
 
diff --git a/src/i18n/pages/lite.ts b/src/i18n/pages/lite.ts
index 1fc5e51..8dc43d9 100644
--- a/src/i18n/pages/lite.ts
+++ b/src/i18n/pages/lite.ts
@@ -158,37 +158,44 @@ export const liteCopy = {
     },
     install: {
       eyebrow: "Install",
-      title: "Installation on macOS, Windows and Linux",
-      brewNote: "The gateway ships inside the app; nothing else needs to be installed.",
-      macLabel: "macOS 12 or later · Apple silicon",
-      winLabel: "Windows 10 21H2 or later · x64 or ARM64",
-      dmgTitle: "Disk image",
-      dmgBody:
-        "Check it against its sha256 after downloading. The app is not signed by a registered Apple developer, so macOS quarantines a downloaded copy until the attribute is removed, or until Open Anyway is chosen in System Settings › Privacy & Security.",
-      dmgDownload: "Download the disk image (Apple silicon)",
-      releases: "All releases",
-      winTitle: "Windows installer",
-      winBody:
-        "The installer sets the app up for all users in Program Files, so Windows asks for administrator permission. WebView2 is downloaded during installation if it is missing; Windows 11 already includes it.",
-      winDownload: { x64: "Download for Windows (x64)", arm64: "Download for Windows (ARM64)" },
-      winOther: "Other architecture: ",
-      winOtherLink: { x64: "x64 installer", arm64: "ARM64 installer" },
-      version: "Version",
-      winUnsigned:
-        "The installer is not code-signed. Running it brings up SmartScreen's full-screen warning, “Windows protected your PC”; choose More info, then Run anyway.",
-      linuxLabel: "Ubuntu 22.04, Debian 12, Fedora 36 or later · x86_64 or aarch64",
-      linuxScript:
-        "The script downloads the AppImage for the machine's architecture, checks its sha256, installs it as ~/Applications/ThinkWatch-Lite.AppImage and starts it.",
-      linuxTitle: "AppImage",
-      linuxBody:
-        "Check it against its sha256, allow it to run (chmod +x, or “Allow executing file as program” in the file manager's Properties) and open it. Keep it in a folder the user can write to, such as ~/Applications, so that it can update itself. The first launch adds ThinkWatch Lite to the application menu.",
-      linuxDownload: { x86_64: "Download the AppImage (x86_64)", aarch64: "Download the AppImage (aarch64)" },
-      linuxOther: "Other architecture: ",
-      linuxOtherLink: { x86_64: "x86_64 AppImage", aarch64: "aarch64 AppImage" },
-      linuxNotes:
-        "The AppImage needs fusermount3 from the fuse3 package, which most desktops include. The tray icon on GNOME needs the AppIndicator extension, which Ubuntu ships and Fedora does not; without it, launching the app again from the application menu brings the window back.",
+      title: "Download ThinkWatch Lite",
+      intro: "The gateway ships inside the app; nothing else needs to be installed.",
       docs: "Installation guide",
       source: "Build from source",
+      tabsLabel: "Operating system",
+      tabs: { mac: "macOS", windows: "Windows", linux: "Linux" },
+      recommended: "Recommended",
+      version: "Version",
+      sha: "sha256",
+      releases: "All releases",
+      other: "Other architecture: ",
+      mac: {
+        req: "Requires macOS 12 or later on Apple silicon.",
+        brewTitle: "Homebrew",
+        brewBody: "Homebrew installs the app and keeps it up to date.",
+        dmgTitle: "Disk image",
+        dmgBody: "Download, open and drag the app into Applications. The app then updates itself.",
+        dmgDownload: "Download the disk image",
+        note: "The app is not notarized by Apple. When it is installed from the disk image and macOS blocks the first launch, choose Open Anyway in System Settings › Privacy & Security. The Homebrew install needs no such step.",
+      },
+      windows: {
+        req: "Requires Windows 10 21H2 or later on x64 or ARM64.",
+        title: "Installer",
+        body: "Installs the app for all users and keeps it up to date.",
+        download: { x64: "Download for Windows (x64)", arm64: "Download for Windows (ARM64)" },
+        otherLink: { x64: "x64 installer", arm64: "ARM64 installer" },
+        note: "The installer is not code-signed. When SmartScreen shows “Windows protected your PC”, choose More info, then Run anyway. Installing needs administrator permission, and WebView2 is downloaded if it is missing.",
+      },
+      linux: {
+        req: "Requires Ubuntu 22.04, Debian 12, Fedora 36 or a later distribution, on x86_64 or aarch64.",
+        scriptTitle: "Install script",
+        scriptBody: "Downloads the AppImage for this machine, checks its sha256, places it in ~/Applications and starts it.",
+        appimageTitle: "AppImage",
+        appimageBody: "Download, allow it to run (chmod +x) and open it.",
+        download: { x86_64: "Download the AppImage (x86_64)", aarch64: "Download the AppImage (aarch64)" },
+        otherLink: { x86_64: "x86_64 AppImage", aarch64: "aarch64 AppImage" },
+        note: "Needs fusermount3 from the fuse3 package, which most desktops include. Keep a downloaded AppImage in a folder the user can write to, such as ~/Applications, so that it can update itself. On GNOME the tray icon needs the AppIndicator extension.",
+      },
     },
     license: {
       title: "MIT License",
@@ -336,37 +343,44 @@ export const liteCopy = {
     },
     install: {
       eyebrow: "安装",
-      title: "在 macOS、Windows 与 Linux 上安装",
-      brewNote: "网关随应用一同安装，无需另行安装其他组件。",
-      macLabel: "macOS 12 及以上 · Apple silicon",
-      winLabel: "Windows 10 21H2 及以上 · x64 或 ARM64",
-      dmgTitle: "磁盘映像",
-      dmgBody:
-        "下载后与 sha256 校验值核对。应用未经 Apple 注册开发者签名，macOS 会为下载的副本添加隔离属性，移除该属性后即可打开；也可以在首次打开被拒绝后，在「系统设置 › 隐私与安全性」中点击「仍要打开」。",
-      dmgDownload: "下载磁盘映像（Apple silicon）",
-      releases: "全部版本",
-      winTitle: "Windows 安装程序",
-      winBody:
-        "安装程序为所有用户安装，装入 Program Files，因此 Windows 会请求管理员权限。缺少 WebView2 时安装程序会自动下载，Windows 11 已自带。",
-      winDownload: { x64: "下载 Windows 版（x64）", arm64: "下载 Windows 版（ARM64）" },
-      winOther: "其他架构：",
-      winOtherLink: { x64: "x64 安装程序", arm64: "ARM64 安装程序" },
-      version: "版本",
-      winUnsigned:
-        "安装程序未经代码签名。运行时 SmartScreen 会显示全屏警告「Windows 已保护你的电脑」，依次点击「更多信息」→「仍要运行」即可继续安装。",
-      linuxLabel: "Ubuntu 22.04、Debian 12、Fedora 36 及以上 · x86_64 或 aarch64",
-      linuxScript:
-        "脚本下载与本机架构对应的 AppImage，核对 sha256 后安装为 ~/Applications/ThinkWatch-Lite.AppImage 并启动。",
-      linuxTitle: "AppImage",
-      linuxBody:
-        "下载后与 sha256 校验值核对，允许其执行（chmod +x，或在文件管理器的「属性」中勾选「允许作为程序执行文件」），然后打开。AppImage 应放在当前用户可写的目录中（如 ~/Applications），以便自动更新。首次启动时会把 ThinkWatch Lite 添加到应用菜单。",
-      linuxDownload: { x86_64: "下载 AppImage（x86_64）", aarch64: "下载 AppImage（aarch64）" },
-      linuxOther: "其他架构：",
-      linuxOtherLink: { x86_64: "x86_64 AppImage", aarch64: "aarch64 AppImage" },
-      linuxNotes:
-        "AppImage 需要 fuse3 软件包中的 fusermount3，多数桌面系统已自带。GNOME 上的托盘图标需要 AppIndicator 扩展，Ubuntu 已自带，Fedora 没有；没有托盘时，从应用菜单再次启动即可重新打开窗口。",
+      title: "下载 ThinkWatch Lite",
+      intro: "网关随应用一同安装，无需另装其他组件。",
       docs: "安装指南",
       source: "从源码构建",
+      tabsLabel: "操作系统",
+      tabs: { mac: "macOS", windows: "Windows", linux: "Linux" },
+      recommended: "推荐",
+      version: "版本",
+      sha: "sha256 校验值",
+      releases: "全部版本",
+      other: "其他架构：",
+      mac: {
+        req: "需要 macOS 12 及以上，Apple silicon 芯片。",
+        brewTitle: "Homebrew",
+        brewBody: "由 Homebrew 负责安装与升级。",
+        dmgTitle: "磁盘映像",
+        dmgBody: "下载后打开，把应用拖入「应用程序」即可，之后应用自动更新。",
+        dmgDownload: "下载磁盘映像",
+        note: "应用未经 Apple 公证。用磁盘映像安装时，若首次打开被拦下，在「系统设置 › 隐私与安全性」中点「仍要打开」；通过 Homebrew 安装无需这一步。",
+      },
+      windows: {
+        req: "需要 Windows 10 21H2 及以上，x64 或 ARM64。",
+        title: "安装程序",
+        body: "为所有用户安装，之后应用自动更新。",
+        download: { x64: "下载 Windows 版（x64）", arm64: "下载 Windows 版（ARM64）" },
+        otherLink: { x64: "x64 安装程序", arm64: "ARM64 安装程序" },
+        note: "安装程序未经代码签名。SmartScreen 显示「Windows 已保护你的电脑」时，依次点「更多信息」「仍要运行」。安装需要管理员权限；缺少 WebView2 时会自动下载。",
+      },
+      linux: {
+        req: "需要 Ubuntu 22.04、Debian 12、Fedora 36 或更新的发行版，x86_64 或 aarch64。",
+        scriptTitle: "一键安装",
+        scriptBody: "按本机架构下载 AppImage，核对 sha256 后放入 ~/Applications 并启动。",
+        appimageTitle: "AppImage",
+        appimageBody: "下载后允许执行（chmod +x）再打开。",
+        download: { x86_64: "下载 AppImage（x86_64）", aarch64: "下载 AppImage（aarch64）" },
+        otherLink: { x86_64: "x86_64 AppImage", aarch64: "aarch64 AppImage" },
+        note: "需要 fuse3 软件包中的 fusermount3，多数桌面系统已自带。手动下载的 AppImage 应放在当前用户可写的目录（如 ~/Applications），以便自动更新；GNOME 上显示托盘图标需要 AppIndicator 扩展。",
+      },
     },
     license: {
       title: "MIT 许可证",