intelligrow/star-chart-search-enhancer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign popup update panel

Browse Source
This commit is contained in:
wangshaoqing
2026-05-25 15:50:51 +08:00
parent 18b9d8eee5
commit e1cf2970da
4 changed files with 319 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/popup/index.html
+177
View File
@@ -4,6 +4,183 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Star Chart Search Enhancer</title>
<style>
:root {
color-scheme: light;
--popup-bg: #f3f4f6;
--popup-card: #ffffff;
--popup-text: #111827;
--popup-subtle: #6b7280;
--popup-border: #d1d5db;
--popup-accent: #8f1f4b;
--popup-accent-strong: #74183b;
--popup-success: #065f46;
--popup-warning: #92400e;
}
html,
body {
width: 380px;
min-height: 560px;
margin: 0;
background: var(--popup-bg);
color: var(--popup-text);
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body {
box-sizing: border-box;
}
#app {
box-sizing: border-box;
padding: 14px;
}
.popup-shell {
display: grid;
gap: 12px;
}
.popup-header {
padding: 6px 2px 2px;
}
.popup-eyebrow {
margin: 0 0 6px;
color: var(--popup-subtle);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.popup-header h1 {
margin: 0;
font-size: 24px;
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.03em;
}
.popup-card {
background: var(--popup-card);
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 16px;
padding: 14px;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}
.popup-card-title {
margin: 0 0 10px;
font-size: 14px;
font-weight: 700;
color: var(--popup-subtle);
}
.popup-status {
margin: 0 0 6px;
font-size: 14px;
font-weight: 600;
}
.popup-status--accent {
color: var(--popup-accent);
}
.popup-user {
margin: 0 0 2px;
font-size: 16px;
font-weight: 700;
}
.popup-copy,
.popup-error,
.popup-warning,
.popup-success {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: var(--popup-subtle);
}
.popup-error {
color: #b42318;
}
.popup-warning {
color: var(--popup-warning);
font-weight: 600;
}
.popup-success {
color: var(--popup-success);
font-weight: 600;
}
.popup-notes {
margin: 0 0 12px;
padding-left: 18px;
color: var(--popup-text);
font-size: 13px;
line-height: 1.45;
}
.popup-notes li + li {
margin-top: 6px;
}
.popup-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.popup-footer {
display: flex;
justify-content: flex-start;
}
.popup-button {
appearance: none;
border: 1px solid var(--popup-border);
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.popup-button--primary {
border-color: var(--popup-accent);
background: var(--popup-accent);
color: #fff;
}
.popup-button--primary:hover {
background: var(--popup-accent-strong);
border-color: var(--popup-accent-strong);
}
.popup-button--secondary {
background: #fff;
color: var(--popup-text);
}
.popup-button--secondary:hover,
.popup-button--ghost:hover {
background: rgba(17, 24, 39, 0.04);
}
.popup-button--ghost {
background: transparent;
color: var(--popup-subtle);
border-color: transparent;
padding-inline: 0;
}
</style>
</head>
<body>
<main id="app"></main>
src/popup/index.ts
+3 -2
View File
@@ -104,7 +104,7 @@ async function renderCurrentAuthState(
}
renderLoggedIn(root, response.value);
void runUpdateCheck(root, sendMessage, updateOptions);
await runUpdateCheck(root, sendMessage, updateOptions);
root
.querySelector('[data-popup-sign-out="button"]')
?.addEventListener("click", () => {
@@ -195,9 +195,10 @@ async function runUpdateCheck(
status: "available"
});
bindUpdateDownloadButtons(root, sendMessage, manifest);
} catch {
} catch (error) {
renderUpdateStatus(root, {
currentVersion: options.currentVersion,
message: error instanceof Error ? error.message : String(error),
status: "error"
});
}
src/popup/view.ts
+59 -39
View File
@@ -3,11 +3,18 @@ import type { UpdateManifest } from "../shared/update-check";
export function renderLoggedOut(root: HTMLElement, error?: string | null): void {
root.innerHTML = `
<section data-popup-state="logged-out">
<h1>Star Chart Search Enhancer</h1>
<p>登录后才能使用星图增强功能</p>
${error ? `<p data-popup-error="true">${error}</p>` : ""}
<button type="button" data-popup-sign-in="button">登录 Logto</button>
<section class="popup-shell" data-popup-shell="root" data-popup-state="logged-out">
<header class="popup-header" data-popup-header="root">
<p class="popup-eyebrow">内部工具</p>
<h1>Star Chart Search Enhancer</h1>
</header>
<section class="popup-card popup-card--account" data-popup-account="card">
<div class="popup-card-title">登录状态</div>
<p class="popup-status">未登录</p>
<p class="popup-copy">登录后才能使用星图增强功能</p>
${error ? `<p class="popup-error" data-popup-error="true">${escapeHtml(error)}</p>` : ""}
<button type="button" class="popup-button popup-button--primary" data-popup-sign-in="button">登录 Logto</button>
</section>
</section>
`;
}
@@ -19,16 +26,24 @@ export function renderLoggedIn(
const userInfo = authState.userInfo;
root.innerHTML = `
<section data-popup-state="logged-in">
<h1>Star Chart Search Enhancer</h1>
<p>已登录</p>
<p>${userInfo?.name ?? userInfo?.username ?? "未知用户"}</p>
<p>${userInfo?.email ?? ""}</p>
<section data-popup-update="root">
<h2>版本更新</h2>
<p data-popup-update-status="text">正在检查更新...</p>
<section class="popup-shell" data-popup-shell="root" data-popup-state="logged-in">
<header class="popup-header" data-popup-header="root">
<p class="popup-eyebrow">内部工具</p>
<h1>Star Chart Search Enhancer</h1>
</header>
<section class="popup-card popup-card--account" data-popup-account="card">
<div class="popup-card-title">登录状态</div>
<p class="popup-status">已登录</p>
<p class="popup-user">${escapeHtml(userInfo?.name ?? userInfo?.username ?? "未知用户")}</p>
<p class="popup-copy">${escapeHtml(userInfo?.email ?? "")}</p>
</section>
<button type="button" data-popup-sign-out="button">退出登录</button>
<section class="popup-card popup-card--update" data-popup-update="card" data-popup-update-root="root">
<div class="popup-card-title">版本更新</div>
<p data-popup-update-status="text" class="popup-status">正在检查更新...</p>
</section>
<footer class="popup-footer">
<button type="button" class="popup-button popup-button--ghost" data-popup-sign-out="button">退出登录</button>
</footer>
</section>
`;
}
@@ -38,50 +53,54 @@ export function renderUpdateStatus(
options: {
currentVersion: string;
manifest?: UpdateManifest;
message?: string | null;
status: "checking" | "error" | "latest" | "available";
}
): void {
const container = root.querySelector('[data-popup-update="root"]');
const container = root.querySelector('[data-popup-update-root="root"]');
if (!container) {
return;
}
if (options.status === "checking") {
container.innerHTML = `
<h2>版本更新</h2>
<p data-popup-update-status="text">当前版本：${options.currentVersion}</p>
<p>正在检查更新...</p>
<div class="popup-card-title">版本更新</div>
<p data-popup-update-status="text" class="popup-status">当前版本：${options.currentVersion}</p>
<p class="popup-copy">正在检查更新...</p>
`;
return;
}
if (options.status === "error") {
container.innerHTML = `
<h2>版本更新</h2>
<p data-popup-update-status="text">当前版本：${options.currentVersion}</p>
<p>暂时无法检查更新</p>
<p>如果需要新版，请联系维护同事获取更新包。</p>
<div class="popup-card-title">版本更新</div>
<p data-popup-update-status="text" class="popup-status">当前版本：${options.currentVersion}</p>
<p class="popup-warning">暂时无法检查更新</p>
${options.message ? `<p class="popup-error">${escapeHtml(options.message)}</p>` : ""}
<p class="popup-copy">如果需要新版，请联系维护同事获取更新包。</p>
`;
return;
}
if (options.status === "latest" || !options.manifest) {
container.innerHTML = `
<h2>版本更新</h2>
<p data-popup-update-status="text">当前版本：${options.currentVersion}</p>
<p>当前已是最新版本</p>
<div class="popup-card-title">版本更新</div>
<p data-popup-update-status="text" class="popup-status">当前版本：${options.currentVersion}</p>
<p class="popup-success">当前已是最新版本</p>
`;
return;
}
container.innerHTML = `
<h2>版本更新</h2>
<p data-popup-update-status="text">当前版本：${options.currentVersion}</p>
<p>发现新版本：${options.manifest.latestVersion}</p>
<div class="popup-card-title">版本更新</div>
<p data-popup-update-status="text" class="popup-status">当前版本：${options.currentVersion}</p>
<p class="popup-status popup-status--accent">发现新版本：${options.manifest.latestVersion}</p>
${renderReleaseNotes(options.manifest.releaseNotes)}
<button type="button" data-popup-download-update="button">下载更新包</button>
<button type="button" data-popup-download-guide="button">下载使用说明</button>
<p data-popup-update-download-status="text">下载后请解压新版 zip，并在 chrome://extensions 里重新加载插件。</p>
<div class="popup-actions">
<button type="button" class="popup-button popup-button--primary" data-popup-download-update="button">下载更新包</button>
<button type="button" class="popup-button popup-button--secondary" data-popup-download-guide="button">下载使用说明</button>
</div>
<p data-popup-update-download-status="text" class="popup-copy">下载后请解压新版 zip，并在 chrome://extensions 里重新加载插件。</p>
`;
}
@@ -103,7 +122,7 @@ function renderReleaseNotes(releaseNotes: string[]): string {
}
return `
<ul>
<ul class="popup-notes">
${releaseNotes.map((note) => `<li>${escapeHtml(note)}</li>`).join("")}
</ul>
`;
@@ -122,15 +141,16 @@ export function renderDevPanel(
authState: AuthStateValue
): void {
const panel = root.ownerDocument.createElement("section");
panel.className = "popup-card popup-card--dev";
panel.dataset.popupDevPanel = "root";
panel.innerHTML = `
<h2>dev auth panel</h2>
<p>resource: ${authState.resource ?? ""}</p>
<p>scopes: ${(authState.scopes ?? []).join(", ")}</p>
<p>token: ${authState.tokenAvailable ? "available" : "missing"}</p>
<p>expires: ${authState.accessTokenExpiresAt ?? "unknown"}</p>
<p>error: ${authState.lastError ?? ""}</p>
<button type="button" data-popup-test-protected-api="button">测试受保护接口</button>
<div class="popup-card-title">dev auth panel</div>
<p class="popup-copy">resource: ${escapeHtml(authState.resource ?? "")}</p>
<p class="popup-copy">scopes: ${escapeHtml((authState.scopes ?? []).join(", "))}</p>
<p class="popup-copy">token: ${authState.tokenAvailable ? "available" : "missing"}</p>
<p class="popup-copy">expires: ${escapeHtml(String(authState.accessTokenExpiresAt ?? "unknown"))}</p>
<p class="popup-copy">error: ${escapeHtml(authState.lastError ?? "")}</p>
<button type="button" class="popup-button popup-button--secondary" data-popup-test-protected-api="button">测试受保护接口</button>
<pre data-popup-protected-api-result="output"></pre>
`;
root.appendChild(panel);