feat: 添加侧边栏贡献按钮，优化打开上传页面逻辑，更新相关测试
This commit is contained in:
QLHazyCoder
@@ -118,6 +118,30 @@ header {
|
||||
|
||||
.header-left svg { color: var(--blue); }
|
||||
|
||||
.header-icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.header-icon-link:hover svg {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-icon-link:focus-visible,
|
||||
.header-version-link:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--blue) 28%, transparent);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.header-version-block {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -144,6 +168,22 @@ header {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header-version-link {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.header-version-link:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.header-version-title.is-version-label { color: var(--blue); }
|
||||
.header-version-title.is-update-available { color: var(--orange); }
|
||||
.header-version-title.is-check-failed { color: var(--text-primary); }
|
||||
|
||||
@@ -16,13 +16,17 @@
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
|
||||
</svg>
|
||||
<button id="btn-repo-home" class="header-icon-link" type="button" aria-label="打开 GitHub 仓库"
|
||||
title="打开 GitHub 仓库">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="header-version-block">
|
||||
<div class="header-version-main">
|
||||
<div id="extension-update-status" class="header-version-title">Pro0.0</div>
|
||||
<button id="extension-update-status" class="header-version-title header-version-link" type="button"
|
||||
aria-label="打开 GitHub Releases 页面" title="打开 GitHub Releases 页面">Pro0.0</button>
|
||||
<button id="btn-release-log" class="header-link-btn" type="button" hidden>更新日志</button>
|
||||
</div>
|
||||
<span id="extension-version-meta" class="header-version-meta" hidden></span>
|
||||
@@ -30,6 +34,8 @@
|
||||
</div>
|
||||
<div class="header-btns">
|
||||
<div class="run-group">
|
||||
<button id="btn-contribution-mode" class="btn btn-outline btn-sm btn-contribution-mode" type="button"
|
||||
title="打开账号贡献上传页面">贡献</button>
|
||||
<input type="number" id="input-run-count" class="run-count-input" value="1" min="1" max="50" title="运行次数" />
|
||||
<button id="btn-auto-run" class="btn btn-success" title="自动执行全部步骤">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
@@ -46,8 +52,6 @@
|
||||
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-contribution-mode" class="btn btn-outline btn-sm btn-contribution-mode" type="button"
|
||||
title="打开账号贡献上传页面">贡献</button>
|
||||
<button id="btn-theme" class="theme-toggle" title="切换主题">
|
||||
<svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
||||
+45
-10
@@ -22,6 +22,7 @@ const btnAccountRecordsNext = document.getElementById('btn-account-records-next'
|
||||
const btnCloseAccountRecords = document.getElementById('btn-close-account-records');
|
||||
const btnClearAccountRecords = document.getElementById('btn-clear-account-records');
|
||||
const updateSection = document.getElementById('update-section');
|
||||
const btnRepoHome = document.getElementById('btn-repo-home');
|
||||
const extensionUpdateStatus = document.getElementById('extension-update-status');
|
||||
const extensionVersionMeta = document.getElementById('extension-version-meta');
|
||||
const btnReleaseLog = document.getElementById('btn-release-log');
|
||||
@@ -1823,21 +1824,47 @@ function openExternalUrl(url) {
|
||||
window.open(targetUrl, '_blank', 'noopener');
|
||||
}
|
||||
|
||||
function getRepositoryHomeUrl() {
|
||||
const serviceRepositoryUrl = String(sidepanelUpdateService?.repositoryUrl || '').trim();
|
||||
if (serviceRepositoryUrl) {
|
||||
return serviceRepositoryUrl;
|
||||
}
|
||||
|
||||
const releasesPageUrl = String(sidepanelUpdateService?.releasesPageUrl || '').trim();
|
||||
if (releasesPageUrl) {
|
||||
return releasesPageUrl.replace(/\/releases\/?$/, '');
|
||||
}
|
||||
|
||||
return 'https://github.com/QLHazyCoder/codex-oauth-automation-extension';
|
||||
}
|
||||
|
||||
function getReleaseListUrl() {
|
||||
const snapshotReleaseListUrl = String(currentReleaseSnapshot?.releasesPageUrl || '').trim();
|
||||
if (snapshotReleaseListUrl) {
|
||||
return snapshotReleaseListUrl;
|
||||
}
|
||||
|
||||
const serviceReleaseListUrl = String(sidepanelUpdateService?.releasesPageUrl || '').trim();
|
||||
if (serviceReleaseListUrl) {
|
||||
return serviceReleaseListUrl;
|
||||
}
|
||||
|
||||
return `${getRepositoryHomeUrl()}/releases`;
|
||||
}
|
||||
|
||||
function openRepositoryHomePage() {
|
||||
openExternalUrl(getRepositoryHomeUrl());
|
||||
}
|
||||
|
||||
function openReleaseListPage() {
|
||||
openExternalUrl(getReleaseListUrl());
|
||||
}
|
||||
|
||||
async function openContributionUploadPage() {
|
||||
if (isContributionButtonLocked()) {
|
||||
throw new Error('当前流程运行中，请先停止后再打开贡献页面。');
|
||||
}
|
||||
|
||||
const confirmed = await openConfirmModal({
|
||||
title: '账号贡献',
|
||||
message: '确认打开账号贡献上传页面吗？',
|
||||
confirmLabel: '前往上传',
|
||||
confirmVariant: 'btn-primary',
|
||||
});
|
||||
if (!confirmed) {
|
||||
return false;
|
||||
}
|
||||
|
||||
openExternalUrl(CONTRIBUTION_UPLOAD_URL);
|
||||
return true;
|
||||
}
|
||||
@@ -3289,6 +3316,14 @@ btnContributionMode?.addEventListener('click', async () => {
|
||||
}
|
||||
});
|
||||
|
||||
btnRepoHome?.addEventListener('click', () => {
|
||||
openRepositoryHomePage();
|
||||
});
|
||||
|
||||
extensionUpdateStatus?.addEventListener('click', () => {
|
||||
openReleaseListPage();
|
||||
});
|
||||
|
||||
configMenu?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
@@ -54,7 +54,7 @@ test('sidepanel html contains contribution button in header', () => {
|
||||
assert.match(html, />贡献</);
|
||||
});
|
||||
|
||||
test('openContributionUploadPage confirms then opens upload page in a new tab', async () => {
|
||||
test('openContributionUploadPage opens upload page in a new tab directly', async () => {
|
||||
const bundle = [
|
||||
extractFunction('openContributionUploadPage'),
|
||||
].join('\n');
|
||||
@@ -65,10 +65,6 @@ const CONTRIBUTION_UPLOAD_URL = 'https://apikey.qzz.io/';
|
||||
function isContributionButtonLocked() {
|
||||
return false;
|
||||
}
|
||||
async function openConfirmModal(options) {
|
||||
calls.push({ type: 'confirm', options });
|
||||
return true;
|
||||
}
|
||||
function openExternalUrl(url) {
|
||||
calls.push({ type: 'open', url });
|
||||
}
|
||||
@@ -84,15 +80,6 @@ return {
|
||||
const result = await api.openContributionUploadPage();
|
||||
assert.equal(result, true);
|
||||
assert.deepStrictEqual(api.getCalls(), [
|
||||
{
|
||||
type: 'confirm',
|
||||
options: {
|
||||
title: '账号贡献',
|
||||
message: '确认打开账号贡献上传页面吗？',
|
||||
confirmLabel: '前往上传',
|
||||
confirmVariant: 'btn-primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'open',
|
||||
url: 'https://apikey.qzz.io/',
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
const test = require('node:test');
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
|
||||
const sidepanelSource = fs.readFileSync('sidepanel/sidepanel.js', 'utf8');
|
||||
|
||||
function extractFunction(name) {
|
||||
const markers = [`async function ${name}(`, `function ${name}(`];
|
||||
const start = markers
|
||||
.map((marker) => sidepanelSource.indexOf(marker))
|
||||
.find((index) => index >= 0);
|
||||
if (start < 0) {
|
||||
throw new Error(`missing function ${name}`);
|
||||
}
|
||||
|
||||
let parenDepth = 0;
|
||||
let signatureEnded = false;
|
||||
let braceStart = -1;
|
||||
for (let i = start; i < sidepanelSource.length; i += 1) {
|
||||
const ch = sidepanelSource[i];
|
||||
if (ch === '(') {
|
||||
parenDepth += 1;
|
||||
} else if (ch === ')') {
|
||||
parenDepth -= 1;
|
||||
if (parenDepth === 0) {
|
||||
signatureEnded = true;
|
||||
}
|
||||
} else if (ch === '{' && signatureEnded) {
|
||||
braceStart = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let depth = 0;
|
||||
let end = braceStart;
|
||||
for (; end < sidepanelSource.length; end += 1) {
|
||||
const ch = sidepanelSource[end];
|
||||
if (ch === '{') depth += 1;
|
||||
if (ch === '}') {
|
||||
depth -= 1;
|
||||
if (depth === 0) {
|
||||
end += 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return sidepanelSource.slice(start, end);
|
||||
}
|
||||
|
||||
test('sidepanel html exposes header repo and releases entry points', () => {
|
||||
const html = fs.readFileSync('sidepanel/sidepanel.html', 'utf8');
|
||||
|
||||
assert.match(
|
||||
html,
|
||||
/id="btn-repo-home"[\s\S]*title="打开 GitHub 仓库"/
|
||||
);
|
||||
assert.match(
|
||||
html,
|
||||
/id="extension-update-status"[\s\S]*title="打开 GitHub Releases 页面"/
|
||||
);
|
||||
});
|
||||
|
||||
test('header link helpers resolve repo and releases urls', () => {
|
||||
const bundle = [
|
||||
extractFunction('getRepositoryHomeUrl'),
|
||||
extractFunction('getReleaseListUrl'),
|
||||
extractFunction('openRepositoryHomePage'),
|
||||
extractFunction('openReleaseListPage'),
|
||||
].join('\n');
|
||||
|
||||
const api = new Function(`
|
||||
const opened = [];
|
||||
const sidepanelUpdateService = {
|
||||
releasesPageUrl: 'https://github.com/example/project/releases',
|
||||
};
|
||||
let currentReleaseSnapshot = null;
|
||||
function openExternalUrl(url) {
|
||||
opened.push(url);
|
||||
}
|
||||
${bundle}
|
||||
return {
|
||||
getRepositoryHomeUrl,
|
||||
getReleaseListUrl,
|
||||
openRepositoryHomePage,
|
||||
openReleaseListPage,
|
||||
setSnapshot(snapshot) {
|
||||
currentReleaseSnapshot = snapshot;
|
||||
},
|
||||
getOpened() {
|
||||
return opened;
|
||||
},
|
||||
};
|
||||
`)();
|
||||
|
||||
assert.equal(
|
||||
api.getRepositoryHomeUrl(),
|
||||
'https://github.com/example/project'
|
||||
);
|
||||
assert.equal(
|
||||
api.getReleaseListUrl(),
|
||||
'https://github.com/example/project/releases'
|
||||
);
|
||||
|
||||
api.setSnapshot({
|
||||
releasesPageUrl: 'https://github.com/example/project/releases',
|
||||
});
|
||||
api.openRepositoryHomePage();
|
||||
api.openReleaseListPage();
|
||||
|
||||
assert.deepEqual(api.getOpened(), [
|
||||
'https://github.com/example/project',
|
||||
'https://github.com/example/project/releases',
|
||||
]);
|
||||
});
|
||||
+2
-3
@@ -163,9 +163,8 @@
|
||||
流程：
|
||||
|
||||
1. 用户点击顶部 `贡献`
|
||||
2. sidepanel 复用现有 `openConfirmModal(...)` 询问是否打开上传页
|
||||
3. 用户确认后，扩展调用统一的新标签页打开逻辑
|
||||
4. 浏览器打开 `https://apikey.qzz.io/`
|
||||
2. 扩展调用统一的新标签页打开逻辑
|
||||
3. 浏览器直接打开 `https://apikey.qzz.io/`
|
||||
|
||||
边界：
|
||||
|
||||
|
||||
+2
-2
@@ -115,7 +115,7 @@
|
||||
- `sidepanel/account-records-manager.js`：侧边栏邮箱记录面板管理器，负责“记录”按钮、覆盖层开关、分页列表、成功/失败/停止统计摘要和清理确认。
|
||||
- `sidepanel/sidepanel.css`：侧边栏样式文件。
|
||||
- `sidepanel/sidepanel.html`：侧边栏页面结构；当前步骤列表已改为动态容器，日志区提供“记录”按钮并挂接邮箱记录覆盖层，顶部新增临时 `贡献` 按钮用于直接打开账号贡献上传页，同时继续加载 `managed-alias-utils.js`，把旧的“邮箱前缀”字段语义改为“别名基邮箱”。
|
||||
- `sidepanel/sidepanel.js`：侧边栏主入口脚本，负责 UI 状态同步、动态步骤渲染、按钮交互、独立本地同步配置、共享验证码自动重发次数配置与广播接收，并装配 Hotmail / iCloud / LuckMail / 邮箱记录面板 manager；当前顶部 `贡献` 按钮会复用现有确认弹窗与新标签页打开能力，直接跳转到账号贡献上传页。
|
||||
- `sidepanel/sidepanel.js`：侧边栏主入口脚本，负责 UI 状态同步、动态步骤渲染、按钮交互、独立本地同步配置、共享验证码自动重发次数配置与广播接收，并装配 Hotmail / iCloud / LuckMail / 邮箱记录面板 manager；当前顶部 `贡献` 按钮会在新标签页中直接打开账号贡献上传页。
|
||||
- `sidepanel/update-service.js`：侧边栏更新检查服务，负责 GitHub Releases 查询、`Pro` / `v` 双版本族排序、缓存读取与版本展示。
|
||||
|
||||
## `tests/`
|
||||
@@ -160,7 +160,7 @@
|
||||
- `tests/managed-alias-utils.test.js`：覆盖 Gmail / 2925 共享别名工具的解析、生成、兼容性判断。
|
||||
- `tests/microsoft-email.test.js`：测试 Microsoft 邮件拉取与验证码提取逻辑。
|
||||
- `tests/sidepanel-hotmail-manager.test.js`：测试侧边栏 Hotmail 管理器模块接线与空态渲染。
|
||||
- `tests/sidepanel-contribution-button.test.js`：测试侧边栏顶部 `贡献` 按钮的 HTML 接线，以及确认后打开账号贡献上传页的最小行为。
|
||||
- `tests/sidepanel-contribution-button.test.js`：测试侧边栏顶部 `贡献` 按钮的 HTML 接线，以及直接打开账号贡献上传页的最小行为。
|
||||
- `tests/sidepanel-account-records-manager.test.js`：测试侧边栏邮箱记录覆盖层的 HTML 接入、helper 地址归一化与 manager 渲染逻辑。
|
||||
- `tests/sidepanel-icloud-manager.test.js`：测试侧边栏 iCloud 管理器模块接线与空态渲染。
|
||||
- `tests/sidepanel-icloud-provider.test.js`：测试侧边栏 iCloud 登录地址解析逻辑。
|
||||
|
||||
Reference in New Issue
Block a user