feat: redesign settings release panel

linhay · linhay · commit e2f46f6fa88f · 2026-05-25T00:30:28.000+08:00
diff --git a/docs-linhay/memory/2026-05-25.md b/docs-linhay/memory/2026-05-25.md
@@ -0,0 +1,3 @@
+# 2026-05-25
+
+- Settings Release Panel 重设计：`frontend/src/features/settings/components/SettingsReleasePanel.tsx` 改为信息矩阵 + 右侧操作区，并为当前版本、最新 release、GetTokens Git Hash、CLIProxyAPI Git Hash 增加 GitHub 外链入口。URL 构造逻辑收敛到 `settingsRelease.ts`，占位 hash（`DEV`、`—`）不显示外链；浏览器预览下外链走 `window.open`，Wails 桌面下走 `BrowserOpenURL`。验证：`npm run test:unit`、`npm run typecheck`、`npm run build` 通过；Playwright 预览截图落位 `docs-linhay/screenshots/20260525/settings/20260525-settings-release-panel-after-v02.png`。375px 预览暴露的是既有固定侧边栏桌面壳宽度问题，不作为本次 release panel 阻塞。
diff --git a/docs-linhay/screenshots/20260525/settings/20260525-settings-release-panel-after-v02.png b/docs-linhay/screenshots/20260525/settings/20260525-settings-release-panel-after-v02.png
diff --git a/frontend/src/features/settings/SettingsFeature.tsx b/frontend/src/features/settings/SettingsFeature.tsx
@@ -19,7 +19,13 @@ import { useI18n } from '../../context/I18nContext';
 import { useTextScale } from '../../context/TextScaleContext';
 import { useTheme } from '../../context/ThemeContext';
 import { buildGitHashLabel, formatBuildGitHash } from './settingsBuildMetadata';
-import { mapCheckedRelease } from './settingsRelease';
+import {
+  buildGetTokensReleaseURL,
+  buildGitHubCommitURL,
+  cliProxyApiGitHubRepositoryURL,
+  getTokensGitHubRepositoryURL,
+  mapCheckedRelease,
+} from './settingsRelease';
 import {
   localProjectedUsageRefreshIntervalOptions,
   parseLocalProjectedUsageRefreshIntervalMinutes,
@@ -31,7 +37,7 @@ import {
 } from './settingsTextScale';
 import { getSettingsSectionBadge, type SettingsSectionID } from './settingsLayout';
 import { toErrorMessage } from '../../utils/error';
-import { hasWailsAppBindings } from '../../utils/previewMode';
+import { hasWailsAppBindings, hasWailsRuntime } from '../../utils/previewMode';
 import { formatAppVersion } from '../../utils/version';
 import type { LocaleCode, ReleaseInfo, SegmentedOption, SidecarStatus, ThemeMode } from '../../types';
 
@@ -108,6 +114,10 @@ export default function SettingsFeature({
   const currentVersionLabel = formatAppVersion(version);
   const latestReleaseLabel = availableRelease ? formatAppVersion(availableRelease.version) : '—';
   const cliProxyApiGitHashLabel = formatBuildGitHash(sidecarStatus.gitHash);
+  const currentReleaseGitHubURL = buildGetTokensReleaseURL(currentVersionLabel);
+  const latestReleaseGitHubURL = availableRelease?.releaseUrl ?? '';
+  const gitHashGitHubURL = buildGitHubCommitURL(getTokensGitHubRepositoryURL, buildGitHashLabel);
+  const cliProxyApiGitHashGitHubURL = buildGitHubCommitURL(cliProxyApiGitHubRepositoryURL, cliProxyApiGitHashLabel);
   const textScaleOptions: ReadonlyArray<SegmentedOption<typeof textScale>> = [
     { id: 'default', label: t('settings.text_scale_default') },
     { id: 'large', label: t('settings.text_scale_large') },
@@ -278,7 +288,7 @@ export default function SettingsFeature({
     setIsOpeningRelease(true);
     setUpdateMessage('');
     try {
-      BrowserOpenURL(availableRelease.releaseUrl);
+      openExternalURL(availableRelease.releaseUrl);
       setUpdateMessage(t('settings.update_redirected'));
     } catch (error) {
       setUpdateMessage(`${t('settings.update_error')}: ${toErrorMessage(error)}`);
@@ -288,6 +298,25 @@ export default function SettingsFeature({
     setIsOpeningRelease(false);
   }
 
+  function handleOpenGitHubURL(url: string) {
+    openExternalURL(url);
+  }
+
+  function openExternalURL(url: string) {
+    if (!url) {
+      return;
+    }
+
+    if (hasWailsRuntime()) {
+      BrowserOpenURL(url);
+      return;
+    }
+
+    if (typeof window !== 'undefined') {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }
+
   async function handleLocalUsageIntervalChange(value: LocalProjectedUsageRefreshIntervalID) {
     setLocalUsageInterval(value);
     setIsSavingLocalUsageSettings(true);
@@ -709,6 +738,7 @@ export default function SettingsFeature({
               cliProxyApiGitHashLabel={cliProxyApiGitHashLabel}
               latestReleaseTitle={t('settings.latest_release')}
               latestReleaseLabel={latestReleaseLabel}
+              latestReleaseGitHubURL={latestReleaseGitHubURL}
               updateAssetTitle={t('settings.update_asset')}
               updateAssetName={availableRelease?.assetName || '—'}
               updateChannelTitle={t('settings.update_channel')}
@@ -719,6 +749,11 @@ export default function SettingsFeature({
                     ? 'settings.update_channel_hint_auto'
                     : 'settings.update_channel_hint_manual'
               )}
+              currentReleaseGitHubURL={currentReleaseGitHubURL}
+              gitHashGitHubURL={gitHashGitHubURL}
+              cliProxyApiGitHashGitHubURL={cliProxyApiGitHashGitHubURL}
+              openGitHubLabel={t('settings.open_github')}
+              onOpenGitHubURL={handleOpenGitHubURL}
               updateMessage={updateMessage}
               checkUpdateLabel={t('settings.check_update')}
               checkingUpdateLabel={t('settings.checking_update')}
diff --git a/frontend/src/features/settings/components/SettingsReleasePanel.stories.tsx b/frontend/src/features/settings/components/SettingsReleasePanel.stories.tsx
@@ -26,10 +26,16 @@ const baseProps = {
   cliProxyApiGitHashLabel: '7f1c2d9',
   latestReleaseTitle: '最新版本',
   latestReleaseLabel: '0.2.2',
+  latestReleaseGitHubURL: 'https://github.com/AxApp/GetTokens/releases/tag/v0.2.2',
   updateAssetTitle: '更新包',
   updateAssetName: 'GetTokens_macOS_AppleSilicon.dmg',
   updateChannelTitle: '更新通道',
   updateChannelHint: '自动下载并应用当前架构的 macOS 更新包。',
+  currentReleaseGitHubURL: 'https://github.com/AxApp/GetTokens/releases/tag/v0.2.1',
+  gitHashGitHubURL: 'https://github.com/AxApp/GetTokens/commit/960ebd9fd83f',
+  cliProxyApiGitHashGitHubURL: 'https://github.com/AxApp/CLIProxyAPI/commit/7f1c2d9',
+  openGitHubLabel: '打开 GitHub',
+  onOpenGitHubURL: () => undefined,
   updateMessage: '',
   checkUpdateLabel: '检查更新',
   checkingUpdateLabel: '检查中',
diff --git a/frontend/src/features/settings/components/SettingsReleasePanel.tsx b/frontend/src/features/settings/components/SettingsReleasePanel.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { ExternalLink } from 'lucide-react';
 
 const fieldMetaStyle = { fontSize: 'var(--gt-settings-meta-size, 8px)' } as const;
 const bodyTextStyle = { fontSize: 'var(--gt-settings-body-size, 9px)' } as const;
@@ -15,10 +16,16 @@ interface SettingsReleasePanelProps {
   cliProxyApiGitHashLabel: string;
   latestReleaseTitle: string;
   latestReleaseLabel: string;
+  latestReleaseGitHubURL: string;
   updateAssetTitle: string;
   updateAssetName: string;
   updateChannelTitle: string;
   updateChannelHint: ReactNode;
+  currentReleaseGitHubURL: string;
+  gitHashGitHubURL: string;
+  cliProxyApiGitHashGitHubURL: string;
+  openGitHubLabel: string;
+  onOpenGitHubURL: (url: string) => void;
   updateMessage: string;
   checkUpdateLabel: string;
   checkingUpdateLabel: string;
@@ -42,10 +49,16 @@ export default function SettingsReleasePanel({
   cliProxyApiGitHashLabel,
   latestReleaseTitle,
   latestReleaseLabel,
+  latestReleaseGitHubURL,
   updateAssetTitle,
   updateAssetName,
   updateChannelTitle,
   updateChannelHint,
+  currentReleaseGitHubURL,
+  gitHashGitHubURL,
+  cliProxyApiGitHashGitHubURL,
+  openGitHubLabel,
+  onOpenGitHubURL,
   updateMessage,
   checkUpdateLabel,
   checkingUpdateLabel,
@@ -59,26 +72,54 @@ export default function SettingsReleasePanel({
 }: SettingsReleasePanelProps) {
   return (
     <div
-      className="card-swiss bg-[var(--bg-surface)] !p-5"
+      className="card-swiss overflow-hidden bg-[var(--bg-surface)] !p-0"
       data-design-system-component="true"
       data-design-system-component-name="SettingsReleasePanel"
       data-design-system-git-hash={gitHashLabel}
     >
-      <div className="grid gap-5 md:grid-cols-[1.1fr_0.9fr]">
-        <div className="space-y-4">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            <SettingsReleaseValue title={currentVersionTitle} value={currentVersionLabel} />
+      <div className="grid md:grid-cols-[minmax(0,1fr)_17rem]">
+        <div className="min-w-0">
+          <div className="grid grid-cols-1 border-b border-dashed border-[var(--border-color)] sm:grid-cols-2 lg:grid-cols-4">
+            <SettingsReleaseValue
+              title={currentVersionTitle}
+              value={currentVersionLabel}
+              actionURL={currentReleaseGitHubURL}
+              actionLabel={openGitHubLabel}
+              onOpenURL={onOpenGitHubURL}
+              strong
+            />
             <SettingsReleaseValue title={releaseLabelTitle} value={releaseLabel} />
-            <SettingsReleaseValue title={gitHashTitle} value={gitHashLabel} mono />
-            <SettingsReleaseValue title={cliProxyApiGitHashTitle} value={cliProxyApiGitHashLabel} mono />
+            <SettingsReleaseValue
+              title={gitHashTitle}
+              value={gitHashLabel}
+              mono
+              actionURL={gitHashGitHubURL}
+              actionLabel={openGitHubLabel}
+              onOpenURL={onOpenGitHubURL}
+            />
+            <SettingsReleaseValue
+              title={cliProxyApiGitHashTitle}
+              value={cliProxyApiGitHashLabel}
+              mono
+              actionURL={cliProxyApiGitHashGitHubURL}
+              actionLabel={openGitHubLabel}
+              onOpenURL={onOpenGitHubURL}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-4 border-t border-dashed border-[var(--border-color)] pt-4 sm:grid-cols-2">
-            <SettingsReleaseValue title={latestReleaseTitle} value={latestReleaseLabel} />
+          <div className="grid grid-cols-1 border-b border-dashed border-[var(--border-color)] sm:grid-cols-2">
+            <SettingsReleaseValue
+              title={latestReleaseTitle}
+              value={latestReleaseLabel}
+              actionURL={latestReleaseGitHubURL}
+              actionLabel={openGitHubLabel}
+              onOpenURL={onOpenGitHubURL}
+              strong
+            />
             <SettingsReleaseValue title={updateAssetTitle} value={updateAssetName} mono body />
           </div>
 
-          <div className="border-t border-dashed border-[var(--border-color)] pt-4">
+          <div className="px-4 py-4">
             <div className="font-bold uppercase tracking-widest text-[var(--text-muted)]" style={fieldMetaStyle}>
               {updateChannelTitle}
             </div>
@@ -96,7 +137,7 @@ export default function SettingsReleasePanel({
           </div>
         </div>
 
-        <div className="space-y-3 border-t border-dashed border-[var(--border-color)] pt-4 md:border-l md:border-t-0 md:pl-5 md:pt-0">
+        <div className="grid content-start gap-3 border-t border-dashed border-[var(--border-color)] bg-[var(--bg-main)] p-4 md:border-l md:border-t-0">
           <button className="btn-swiss w-full" onClick={onCheckUpdate} disabled={isCheckingUpdate}>
             {isCheckingUpdate ? checkingUpdateLabel : checkUpdateLabel}
           </button>
@@ -119,22 +160,45 @@ function SettingsReleaseValue({
   value,
   mono = false,
   body = false,
+  strong = false,
+  actionURL = '',
+  actionLabel = '',
+  onOpenURL,
 }: {
   title: string;
   value: string;
   mono?: boolean;
   body?: boolean;
+  strong?: boolean;
+  actionURL?: string;
+  actionLabel?: string;
+  onOpenURL?: (url: string) => void;
 }) {
   const valueClassName = mono
     ? 'break-all font-mono font-bold text-[var(--text-primary)]'
-    : 'font-black uppercase italic text-[var(--text-primary)]';
+    : strong
+      ? 'font-black uppercase italic text-[var(--text-primary)]'
+      : 'font-bold uppercase text-[var(--text-primary)]';
 
   return (
-    <div className="min-w-0 space-y-1">
-      <div className="font-bold uppercase tracking-widest text-[var(--text-muted)]" style={fieldMetaStyle}>
-        {title}
+    <div className="min-w-0 border-b border-dashed border-[var(--border-color)] px-4 py-3 last:border-b-0 sm:border-b-0 sm:border-r sm:last:border-r-0 lg:border-r lg:[&:nth-child(4n)]:border-r-0">
+      <div className="flex min-h-6 items-center justify-between gap-2">
+        <div className="font-bold uppercase tracking-widest text-[var(--text-muted)]" style={fieldMetaStyle}>
+          {title}
+        </div>
+        {actionURL && onOpenURL ? (
+          <button
+            type="button"
+            className="inline-flex h-6 w-6 shrink-0 items-center justify-center border border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)] transition active:scale-95 hover:bg-[var(--bg-surface)]"
+            aria-label={`${actionLabel}: ${value}`}
+            title={actionLabel}
+            onClick={() => onOpenURL(actionURL)}
+          >
+            <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
+          </button>
+        ) : null}
       </div>
-      <div className={valueClassName} style={body ? bodyTextStyle : valueTextStyle}>
+      <div className={`mt-1 ${valueClassName}`} style={body ? bodyTextStyle : valueTextStyle}>
         {value}
       </div>
     </div>
diff --git a/frontend/src/features/settings/settingsRelease.test.mjs b/frontend/src/features/settings/settingsRelease.test.mjs
@@ -1,7 +1,11 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
 
-import { mapCheckedRelease } from './settingsRelease.ts';
+import {
+  buildGitHubCommitURL,
+  buildGetTokensReleaseURL,
+  mapCheckedRelease,
+} from './settingsRelease.ts';
 
 test('mapCheckedRelease keeps release page url for manual update flow', () => {
   const release = mapCheckedRelease({
@@ -23,3 +27,32 @@ test('mapCheckedRelease returns null when updater has no newer release', () => {
   assert.equal(mapCheckedRelease(null), null);
   assert.equal(mapCheckedRelease(undefined), null);
 });
+
+test('buildGitHubCommitURL links valid hashes to the selected repository', () => {
+  assert.equal(
+    buildGitHubCommitURL('https://github.com/AxApp/GetTokens', '960ebd9fd83f'),
+    'https://github.com/AxApp/GetTokens/commit/960ebd9fd83f',
+  );
+  assert.equal(
+    buildGitHubCommitURL('https://github.com/AxApp/CLIProxyAPI', ' e5bcdfb6 '),
+    'https://github.com/AxApp/CLIProxyAPI/commit/e5bcdfb6',
+  );
+});
+
+test('buildGitHubCommitURL ignores placeholder build hashes', () => {
+  assert.equal(buildGitHubCommitURL('https://github.com/AxApp/GetTokens', 'DEV'), '');
+  assert.equal(buildGitHubCommitURL('https://github.com/AxApp/GetTokens', '—'), '');
+  assert.equal(buildGitHubCommitURL('https://github.com/AxApp/GetTokens', ''), '');
+});
+
+test('buildGetTokensReleaseURL prefers checked release url and falls back to current version tag', () => {
+  assert.equal(
+    buildGetTokensReleaseURL('1.0.23', 'https://github.com/AxApp/GetTokens/releases/tag/v1.0.24'),
+    'https://github.com/AxApp/GetTokens/releases/tag/v1.0.24',
+  );
+  assert.equal(
+    buildGetTokensReleaseURL('1.0.23'),
+    'https://github.com/AxApp/GetTokens/releases/tag/v1.0.23',
+  );
+  assert.equal(buildGetTokensReleaseURL('DEV'), '');
+});
diff --git a/frontend/src/features/settings/settingsRelease.ts b/frontend/src/features/settings/settingsRelease.ts
@@ -1,5 +1,8 @@
 import type { ReleaseInfo } from '../../types';
 
+export const getTokensGitHubRepositoryURL = 'https://github.com/AxApp/GetTokens';
+export const cliProxyApiGitHubRepositoryURL = 'https://github.com/AxApp/CLIProxyAPI';
+
 export function mapCheckedRelease(result: ReleaseInfo | null | undefined): ReleaseInfo | null {
   if (!result) {
     return null;
@@ -12,3 +15,27 @@ export function mapCheckedRelease(result: ReleaseInfo | null | undefined): Relea
     releaseNote: result.releaseNote,
   };
 }
+
+export function buildGitHubCommitURL(repositoryURL: string, gitHash: string): string {
+  const normalizedHash = gitHash.trim();
+  if (!normalizedHash || normalizedHash === 'DEV' || normalizedHash === '—') {
+    return '';
+  }
+
+  return `${repositoryURL.replace(/\/$/, '')}/commit/${encodeURIComponent(normalizedHash)}`;
+}
+
+export function buildGetTokensReleaseURL(currentVersion: string, checkedReleaseURL = ''): string {
+  const normalizedCheckedReleaseURL = checkedReleaseURL.trim();
+  if (normalizedCheckedReleaseURL) {
+    return normalizedCheckedReleaseURL;
+  }
+
+  const normalizedVersion = currentVersion.trim();
+  if (!normalizedVersion || normalizedVersion === 'DEV' || normalizedVersion === '—') {
+    return '';
+  }
+
+  const tag = normalizedVersion.startsWith('v') ? normalizedVersion : `v${normalizedVersion}`;
+  return `${getTokensGitHubRepositoryURL}/releases/tag/${encodeURIComponent(tag)}`;
+}
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -1333,6 +1333,7 @@
     "apply_update": "Apply Update & Quit",
     "applying_update": "Applying...",
     "apply_update_hint": "The app will quit after a successful update. Relaunch to enter the new version.",
+    "open_github": "Open GitHub",
     "open_release_page": "Open Release Page",
     "opening_release_page": "Opening...",
     "manual_update_hint": "Signed macOS releases avoid in-place bundle patching; install the update from the release page instead.",
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
@@ -1333,6 +1333,7 @@
     "apply_update": "应用更新并退出",
     "applying_update": "升级中...",
     "apply_update_hint": "应用成功后程序会退出；重新启动后进入新版本。",
+    "open_github": "打开 GitHub",
     "open_release_page": "打开发布页安装",
     "opening_release_page": "打开中...",
     "manual_update_hint": "macOS 已签名发布包不做 bundle 内原地替换，改为跳转发布页安装。",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# 2026-05-25`
	`2`	`+`
	`3`	+- Settings Release Panel 重设计：`frontend/src/features/settings/components/SettingsReleasePanel.tsx` 改为信息矩阵 + 右侧操作区，并为当前版本、最新 release、GetTokens Git Hash、CLIProxyAPI Git Hash 增加 GitHub 外链入口。URL 构造逻辑收敛到 `settingsRelease.ts`，占位 hash（`DEV`、`—`）不显示外链；浏览器预览下外链走 `window.open`，Wails 桌面下走 `BrowserOpenURL`。验证：`npm run test:unit`、`npm run typecheck`、`npm run build` 通过；Playwright 预览截图落位 `docs-linhay/screenshots/20260525/settings/20260525-settings-release-panel-after-v02.png`。375px 预览暴露的是既有固定侧边栏桌面壳宽度问题，不作为本次 release panel 阻塞。