feat: 更新侧边栏按钮，添加目标仓库链接和样式优化
This commit is contained in:
QLHazyCoder
+15
-22
@@ -412,12 +412,15 @@ header {
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 7px 14px;
|
||||
min-height: var(--data-field-height);
|
||||
padding: 0 12px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
line-height: 1;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
@@ -433,12 +436,14 @@ header {
|
||||
.btn-success {
|
||||
background: var(--green);
|
||||
color: #fff;
|
||||
border-color: var(--green);
|
||||
}
|
||||
.btn-success:hover { opacity: 0.9; box-shadow: 0 2px 8px var(--green-soft); }
|
||||
|
||||
.btn-danger {
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
border-color: var(--red);
|
||||
}
|
||||
.btn-danger:hover { opacity: 0.9; box-shadow: 0 2px 8px var(--red-soft); }
|
||||
|
||||
@@ -468,10 +473,9 @@ header {
|
||||
.run-count-input:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
background: var(--bg-field);
|
||||
color: var(--text-secondary);
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
|
||||
|
||||
@@ -482,8 +486,8 @@ header {
|
||||
}
|
||||
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
|
||||
|
||||
.btn-sm { padding: 5px 12px; font-size: 12px; }
|
||||
.btn-xs { padding: 4px 10px; font-size: 11px; }
|
||||
.btn-sm { padding-inline: 12px; font-size: 12px; }
|
||||
.btn-xs { padding-inline: 10px; font-size: 11px; }
|
||||
|
||||
/* ============================================================
|
||||
Extension Updates
|
||||
@@ -1547,14 +1551,10 @@ header {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#btn-fetch-email {
|
||||
padding-inline: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.data-inline-btn {
|
||||
flex: 0 0 auto;
|
||||
min-width: var(--data-inline-action-min-width);
|
||||
min-height: var(--data-field-height);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -2437,10 +2437,7 @@ header {
|
||||
|
||||
.hero-sms-country-menu-btn {
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
min-height: 33px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
min-height: var(--data-field-height);
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -2543,8 +2540,7 @@ header {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
min-height: 33px;
|
||||
min-height: var(--data-field-height);
|
||||
}
|
||||
|
||||
.hero-sms-free-phone-cell {
|
||||
@@ -2583,10 +2579,7 @@ header {
|
||||
}
|
||||
|
||||
#btn-hero-sms-price-preview {
|
||||
height: 33px;
|
||||
min-height: 33px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
min-height: var(--data-field-height);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
@@ -137,7 +137,8 @@
|
||||
<option value="sub2api">SUB2API</option>
|
||||
<option value="codex2api">Codex2API</option>
|
||||
</select>
|
||||
<button id="btn-open-webchat2api-github" class="btn btn-ghost btn-xs data-inline-btn" type="button">GitHub</button>
|
||||
<button id="btn-open-target-repository" class="btn btn-outline btn-sm data-inline-btn" type="button"
|
||||
aria-label="打开项目 GitHub 仓库" title="打开项目 GitHub 仓库">GitHub</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contribution-mode-panel" class="contribution-mode-panel" hidden>
|
||||
@@ -258,11 +259,8 @@
|
||||
</div>
|
||||
<div class="data-row" id="row-kiro-rs-url" style="display:none;">
|
||||
<span class="data-label">kiro.rs</span>
|
||||
<div class="data-inline">
|
||||
<input type="text" id="input-kiro-rs-url" class="data-input"
|
||||
placeholder="请输入 kiro.rs 管理地址" />
|
||||
<button id="btn-open-kiro-rs-github" class="btn btn-ghost btn-xs data-inline-btn" type="button">GitHub</button>
|
||||
</div>
|
||||
<input type="text" id="input-kiro-rs-url" class="data-input"
|
||||
placeholder="请输入 kiro.rs 管理地址" />
|
||||
</div>
|
||||
<div class="data-row" id="row-kiro-rs-key" style="display:none;">
|
||||
<span class="data-label">API Key</span>
|
||||
|
||||
+49
-8
@@ -89,7 +89,7 @@ const btnImportSettings = document.getElementById('btn-import-settings');
|
||||
const inputImportSettingsFile = document.getElementById('input-import-settings-file');
|
||||
const labelSourceSelector = document.getElementById('label-source-selector');
|
||||
const selectPanelMode = document.getElementById('select-panel-mode');
|
||||
const btnOpenWebchat2ApiGithub = document.getElementById('btn-open-webchat2api-github');
|
||||
const btnOpenTargetRepository = document.getElementById('btn-open-target-repository');
|
||||
const rowVpsUrl = document.getElementById('row-vps-url');
|
||||
const inputVpsUrl = document.getElementById('input-vps-url');
|
||||
const rowVpsPassword = document.getElementById('row-vps-password');
|
||||
@@ -179,7 +179,6 @@ const rowCodex2ApiAdminKey = document.getElementById('row-codex2api-admin-key');
|
||||
const inputCodex2ApiAdminKey = document.getElementById('input-codex2api-admin-key');
|
||||
const rowKiroRsUrl = document.getElementById('row-kiro-rs-url');
|
||||
const inputKiroRsUrl = document.getElementById('input-kiro-rs-url');
|
||||
const btnOpenKiroRsGithub = document.getElementById('btn-open-kiro-rs-github');
|
||||
const rowKiroRsKey = document.getElementById('row-kiro-rs-key');
|
||||
const inputKiroRsKey = document.getElementById('input-kiro-rs-key');
|
||||
const btnTestKiroRs = document.getElementById('btn-test-kiro-rs');
|
||||
@@ -1620,6 +1619,18 @@ let customEmailPoolEntriesState = [];
|
||||
|
||||
const EYE_OPEN_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>';
|
||||
const EYE_CLOSED_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19C5 19 1 12 1 12a21.77 21.77 0 0 1 5.06-6.94"/><path d="M9.9 4.24A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.86 21.86 0 0 1-2.16 3.19"/><path d="M1 1l22 22"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/></svg>';
|
||||
const TARGET_REPOSITORY_URLS = Object.freeze({
|
||||
openai: Object.freeze({
|
||||
cpa: 'https://github.com/router-for-me/CLIProxyAPI',
|
||||
sub2api: 'https://github.com/Wei-Shaw/sub2api',
|
||||
}),
|
||||
kiro: Object.freeze({
|
||||
'kiro-rs': 'https://github.com/QLHazyCoder/kiro.rs',
|
||||
}),
|
||||
grok: Object.freeze({
|
||||
webchat2api: 'https://github.com/zqbxdev/webchat2api',
|
||||
}),
|
||||
});
|
||||
const PRIVACY_MASKED_INPUT_IDS = Object.freeze([
|
||||
'input-contribution-qq',
|
||||
'input-sub2api-url',
|
||||
@@ -9390,6 +9401,33 @@ function getSelectedTargetId(flowId = getSelectedFlowId()) {
|
||||
);
|
||||
}
|
||||
|
||||
function getTargetRepositoryUrl(flowId = getSelectedFlowId(), targetId = getSelectedTargetId(flowId)) {
|
||||
const normalizedFlowId = normalizeFlowId(flowId);
|
||||
const normalizedTargetId = normalizeTargetIdForFlow(
|
||||
normalizedFlowId,
|
||||
targetId,
|
||||
getDefaultTargetIdForFlow(normalizedFlowId)
|
||||
);
|
||||
return TARGET_REPOSITORY_URLS[normalizedFlowId]?.[normalizedTargetId] || '';
|
||||
}
|
||||
|
||||
function updateTargetRepositoryButton(flowId = getSelectedFlowId(), targetId = getSelectedTargetId(flowId)) {
|
||||
if (!btnOpenTargetRepository) {
|
||||
return;
|
||||
}
|
||||
const repositoryUrl = getTargetRepositoryUrl(flowId, targetId);
|
||||
const hasRepositoryUrl = Boolean(repositoryUrl);
|
||||
btnOpenTargetRepository.hidden = !hasRepositoryUrl;
|
||||
btnOpenTargetRepository.disabled = !hasRepositoryUrl;
|
||||
btnOpenTargetRepository.dataset.repositoryUrl = repositoryUrl;
|
||||
const targetLabel = getFlowRegistry()?.getTargetLabel?.(flowId, targetId) || targetId;
|
||||
const title = hasRepositoryUrl
|
||||
? `打开 ${targetLabel} 项目 GitHub 仓库`
|
||||
: `${targetLabel} 暂未配置项目仓库`;
|
||||
btnOpenTargetRepository.setAttribute('aria-label', title);
|
||||
btnOpenTargetRepository.title = title;
|
||||
}
|
||||
|
||||
function renderFlowSelectorOptions(selectedFlowId = getSelectedFlowId()) {
|
||||
if (!selectFlow) {
|
||||
return [];
|
||||
@@ -13941,6 +13979,9 @@ function updatePanelModeUI() {
|
||||
if (selectPanelMode) {
|
||||
selectPanelMode.value = effectiveTargetId;
|
||||
}
|
||||
if (typeof updateTargetRepositoryButton === 'function') {
|
||||
updateTargetRepositoryButton(activeFlowId, effectiveTargetId);
|
||||
}
|
||||
const visibleGroupIds = Array.isArray(capabilityState?.visibleGroupIds)
|
||||
? capabilityState.visibleGroupIds
|
||||
: [];
|
||||
@@ -15820,12 +15861,12 @@ btnGpcHelperConvertApiKey?.addEventListener('click', () => {
|
||||
openExternalUrl(GPC_HELPER_PORTAL_URL);
|
||||
});
|
||||
|
||||
btnOpenKiroRsGithub?.addEventListener('click', () => {
|
||||
openExternalUrl('https://github.com/QLHazyCoder/kiro.rs');
|
||||
});
|
||||
|
||||
btnOpenWebchat2ApiGithub?.addEventListener('click', () => {
|
||||
openExternalUrl('https://github.com/zqbxdev/webchat2api');
|
||||
btnOpenTargetRepository?.addEventListener('click', () => {
|
||||
const repositoryUrl = btnOpenTargetRepository.dataset.repositoryUrl
|
||||
|| getTargetRepositoryUrl(getSelectedFlowId(), getSelectedTargetId());
|
||||
if (repositoryUrl) {
|
||||
openExternalUrl(repositoryUrl);
|
||||
}
|
||||
});
|
||||
|
||||
btnGpcHelperBalance?.addEventListener('click', async () => {
|
||||
|
||||
@@ -38,13 +38,12 @@ test('sidepanel html exposes flow selector and kiro source fields', () => {
|
||||
'id="select-flow"',
|
||||
'<option value="grok">Grok</option>',
|
||||
'id="label-source-selector"',
|
||||
'id="btn-open-webchat2api-github"',
|
||||
'id="btn-open-target-repository"',
|
||||
'id="row-step6-cookie-settings"',
|
||||
'id="row-shared-auto-run"',
|
||||
'id="row-auto-run-thread-interval"',
|
||||
'id="row-oauth-callback"',
|
||||
'id="row-kiro-rs-url"',
|
||||
'id="btn-open-kiro-rs-github"',
|
||||
'id="row-kiro-rs-key"',
|
||||
'id="btn-test-kiro-rs"',
|
||||
'id="row-kiro-rs-test-status"',
|
||||
@@ -64,6 +63,12 @@ test('sidepanel html exposes flow selector and kiro source fields', () => {
|
||||
assert.match(sidepanelHtml, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
|
||||
});
|
||||
assert.doesNotMatch(sidepanelHtml, /id="btn-export-grok-sso"/);
|
||||
assert.match(
|
||||
sidepanelHtml,
|
||||
/id="btn-open-target-repository"[^>]*class="btn btn-outline btn-sm data-inline-btn"[^>]*>GitHub<\/button>/
|
||||
);
|
||||
const repositoryButtonTag = sidepanelHtml.match(/<button[^>]*id="btn-open-target-repository"[\s\S]*?<\/button>/)?.[0] || '';
|
||||
assert.doesNotMatch(repositoryButtonTag, /<svg/);
|
||||
assert.ok(
|
||||
sidepanelHtml.indexOf('<script src="../flows/kiro/workflow.js"></script>')
|
||||
< sidepanelHtml.indexOf('<script src="../flows/grok/index.js"></script>')
|
||||
@@ -147,13 +152,57 @@ return {
|
||||
assert.equal(api.btnClearGrokSso.disabled, false);
|
||||
});
|
||||
|
||||
test('sidepanel Kiro GitHub button opens the configured fork', () => {
|
||||
assert.match(sidepanelSource, /openExternalUrl\('https:\/\/github\.com\/QLHazyCoder\/kiro\.rs'\)/);
|
||||
test('sidepanel project repository button resolves the configured target repositories', () => {
|
||||
assert.match(sidepanelSource, /cpa:\s*'https:\/\/github\.com\/router-for-me\/CLIProxyAPI'/);
|
||||
assert.match(sidepanelSource, /sub2api:\s*'https:\/\/github\.com\/Wei-Shaw\/sub2api'/);
|
||||
assert.match(sidepanelSource, /'kiro-rs':\s*'https:\/\/github\.com\/QLHazyCoder\/kiro\.rs'/);
|
||||
assert.match(sidepanelSource, /webchat2api:\s*'https:\/\/github\.com\/zqbxdev\/webchat2api'/);
|
||||
assert.doesNotMatch(sidepanelSource, /github\.com\/hank9999\/kiro\.rs/);
|
||||
assert.match(sidepanelSource, /btnOpenTargetRepository\?\.addEventListener\('click'/);
|
||||
});
|
||||
|
||||
test('sidepanel webchat2api GitHub button opens the configured repository', () => {
|
||||
assert.match(sidepanelSource, /openExternalUrl\('https:\/\/github\.com\/zqbxdev\/webchat2api'\)/);
|
||||
test('sidepanel target repository helper switches URLs by current flow target', () => {
|
||||
const bundle = [
|
||||
extractFunction(sidepanelSource, 'getTargetRepositoryUrl'),
|
||||
].join('\n');
|
||||
|
||||
const api = new Function(`
|
||||
const TARGET_REPOSITORY_URLS = Object.freeze({
|
||||
openai: Object.freeze({
|
||||
cpa: 'https://github.com/router-for-me/CLIProxyAPI',
|
||||
sub2api: 'https://github.com/Wei-Shaw/sub2api',
|
||||
}),
|
||||
kiro: Object.freeze({
|
||||
'kiro-rs': 'https://github.com/QLHazyCoder/kiro.rs',
|
||||
}),
|
||||
grok: Object.freeze({
|
||||
webchat2api: 'https://github.com/zqbxdev/webchat2api',
|
||||
}),
|
||||
});
|
||||
function normalizeFlowId(value) {
|
||||
return ['openai', 'kiro', 'grok'].includes(value) ? value : 'openai';
|
||||
}
|
||||
function getDefaultTargetIdForFlow(flowId) {
|
||||
return flowId === 'grok' ? 'webchat2api' : (flowId === 'kiro' ? 'kiro-rs' : 'cpa');
|
||||
}
|
||||
function normalizeTargetIdForFlow(flowId, targetId, fallback) {
|
||||
const targets = {
|
||||
openai: ['cpa', 'sub2api', 'codex2api'],
|
||||
kiro: ['kiro-rs'],
|
||||
grok: ['webchat2api'],
|
||||
}[flowId] || [];
|
||||
return targets.includes(targetId) ? targetId : fallback;
|
||||
}
|
||||
function getSelectedFlowId() { return 'openai'; }
|
||||
function getSelectedTargetId() { return 'cpa'; }
|
||||
${bundle}
|
||||
return { getTargetRepositoryUrl };
|
||||
`)();
|
||||
|
||||
assert.equal(api.getTargetRepositoryUrl('openai', 'cpa'), 'https://github.com/router-for-me/CLIProxyAPI');
|
||||
assert.equal(api.getTargetRepositoryUrl('openai', 'sub2api'), 'https://github.com/Wei-Shaw/sub2api');
|
||||
assert.equal(api.getTargetRepositoryUrl('grok', 'webchat2api'), 'https://github.com/zqbxdev/webchat2api');
|
||||
assert.equal(api.getTargetRepositoryUrl('openai', 'codex2api'), '');
|
||||
});
|
||||
|
||||
test('sidepanel step definitions rerender when active flow changes even if plus/signup settings stay the same', () => {
|
||||
|
||||
@@ -109,9 +109,15 @@ test('sidepanel form controls share one width system', () => {
|
||||
const dataLabelBlock = readCssRuleBlock(css, '.data-label');
|
||||
|
||||
assert.match(css, /--data-label-width:\s*76px;/);
|
||||
assert.match(css, /--data-field-height:\s*34px;/);
|
||||
assert.match(css, /\.data-label\s*\{[\s\S]*flex:\s*0 0 var\(--data-label-width\);/);
|
||||
assert.match(css, /\.data-inline\s*\{[\s\S]*flex:\s*1 1 0;/);
|
||||
assert.match(css, /\.data-inline > \.data-input,[\s\S]*\.data-inline > \.input-with-icon\s*\{[\s\S]*flex:\s*1 1 0;/);
|
||||
assert.match(css, /\.btn\s*\{[\s\S]*min-height:\s*var\(--data-field-height\);[\s\S]*border:\s*1px solid var\(--border\);/);
|
||||
assert.match(css, /\.data-input\s*\{[\s\S]*min-height:\s*var\(--data-field-height\);/);
|
||||
assert.match(css, /\.data-select\s*\{[\s\S]*min-height:\s*var\(--data-field-height\);/);
|
||||
assert.match(css, /\.data-inline-btn\s*\{[\s\S]*min-width:\s*var\(--data-inline-action-min-width\);/);
|
||||
assert.match(css, /\.data-inline-btn\s*\{[\s\S]*min-height:\s*var\(--data-field-height\);/);
|
||||
assert.doesNotMatch(dataLabelBlock, /width:\s*56px;/);
|
||||
assert.doesNotMatch(css, /icon-action-btn/);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user