feat: 更新侧边栏按钮，添加目标仓库链接和样式优化

sidepanel/sidepanel.css

@@ -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-color: var(--border);
-  border-radius: var(--radius-sm);
 }
 .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-sm { padding-inline: 12px; font-size: 12px; }
-.btn-xs { padding: 4px 10px; font-size: 11px; }
+.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: var(--data-field-height);
-  min-height: 33px;
-  padding-top: 0;
-  padding-bottom: 0;
   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: var(--data-field-height);
-  min-height: 33px;
 }
 
 .hero-sms-free-phone-cell {
@@ -2583,10 +2579,7 @@ header {
 }
 
 #btn-hero-sms-price-preview {
-  height: 33px;
+  min-height: var(--data-field-height);
-  min-height: 33px;
-  padding-top: 0;
-  padding-bottom: 0;
   align-self: flex-start;
 }
 

sidepanel/sidepanel.html

@@ -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"
-          <input type="text" id="input-kiro-rs-url" class="data-input"
+          placeholder="请输入 kiro.rs 管理地址" />
-            placeholder="请输入 kiro.rs 管理地址" />
-          <button id="btn-open-kiro-rs-github" class="btn btn-ghost btn-xs data-inline-btn" type="button">GitHub</button>
-        </div>
       </div>
       <div class="data-row" id="row-kiro-rs-key" style="display:none;">
         <span class="data-label">API Key</span>

sidepanel/sidepanel.js

@@ -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', () => {
+btnOpenTargetRepository?.addEventListener('click', () => {
-  openExternalUrl('https://github.com/QLHazyCoder/kiro.rs');
+  const repositoryUrl = btnOpenTargetRepository.dataset.repositoryUrl
-});
+    || getTargetRepositoryUrl(getSelectedFlowId(), getSelectedTargetId());
-
+  if (repositoryUrl) {
-btnOpenWebchat2ApiGithub?.addEventListener('click', () => {
+    openExternalUrl(repositoryUrl);
-  openExternalUrl('https://github.com/zqbxdev/webchat2api');
+  }
 });
 
 btnGpcHelperBalance?.addEventListener('click', async () => {

tests/sidepanel-flow-source-registry.test.js

@@ -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', () => {
+test('sidepanel project repository button resolves the configured target repositories', () => {
-  assert.match(sidepanelSource, /openExternalUrl\('https:\/\/github\.com\/QLHazyCoder\/kiro\.rs'\)/);
+  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', () => {
+test('sidepanel target repository helper switches URLs by current flow target', () => {
-  assert.match(sidepanelSource, /openExternalUrl\('https:\/\/github\.com\/zqbxdev\/webchat2api'\)/);
+  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', () => {

tests/sidepanel-form-layout.test.js

@@ -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/);
 });