From 33df639c04ad5fd73a4018398b5d950691ef23e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Fri, 17 Apr 2026 20:35:07 +0800
Subject: [PATCH] feat(desktop): embed ClaudeOfficialLogin into Claude Official
 card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Official 卡片改成 flex-col 布局,原 header 内容包在可点击 row
- 激活状态下在 header 下方展示 <ClaudeOfficialLogin> (login / logout button)
- 未激活状态保持原"点击整块切换"UX 不变

Card root 不再带 onClick 以免 login/logout button 的 click 冒泡触发切换。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 desktop/src/pages/Settings.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/desktop/src/pages/Settings.tsx b/desktop/src/pages/Settings.tsx
index 07468330..e8a2877a 100644
--- a/desktop/src/pages/Settings.tsx
+++ b/desktop/src/pages/Settings.tsx
@@ -20,6 +20,7 @@ import { SkillList } from '../components/skills/SkillList'
 import { SkillDetail } from '../components/skills/SkillDetail'
 import { ComputerUseSettings } from './ComputerUseSettings'
 import { useUIStore, type SettingsTab } from '../stores/uiStore'
+import { ClaudeOfficialLogin } from '../components/settings/ClaudeOfficialLogin'
 
 export function Settings() {
   const [activeTab, setActiveTab] = useState<SettingsTab>('providers')
@@ -138,23 +139,33 @@ function ProviderSettings() {
 
       {/* Official provider — always visible at top */}
       <div
-        className={`relative flex items-center gap-4 px-4 py-3.5 rounded-xl border transition-all mb-2 ${
+        className={`relative flex flex-col rounded-xl border transition-all mb-2 ${
           isOfficialActive
             ? 'border-[var(--color-brand)] bg-[var(--color-primary-fixed)]'
-            : 'border-[var(--color-border)] hover:border-[var(--color-border-focus)] cursor-pointer'
+            : 'border-[var(--color-border)] hover:border-[var(--color-border-focus)]'
         }`}
-        onClick={() => !isOfficialActive && handleActivateOfficial()}
       >
-        <span className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${isOfficialActive ? 'bg-[var(--color-success)]' : 'bg-[var(--color-text-tertiary)]'}`} />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.providers.officialName')}</span>
-            {isOfficialActive && (
-              <span className="px-1.5 py-0.5 text-[10px] font-bold rounded bg-[var(--color-brand)] text-white leading-none">{t('common.active')}</span>
-            )}
+        <div
+          className={`flex items-center gap-4 px-4 py-3.5 ${!isOfficialActive ? 'cursor-pointer' : ''}`}
+          onClick={() => !isOfficialActive && handleActivateOfficial()}
+        >
+          <span className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${isOfficialActive ? 'bg-[var(--color-success)]' : 'bg-[var(--color-text-tertiary)]'}`} />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.providers.officialName')}</span>
+              {isOfficialActive && (
+                <span className="px-1.5 py-0.5 text-[10px] font-bold rounded bg-[var(--color-brand)] text-white leading-none">{t('common.active')}</span>
+              )}
+            </div>
+            <div className="text-xs text-[var(--color-text-tertiary)] mt-0.5">{t('settings.providers.officialDesc')}</div>
           </div>
-          <div className="text-xs text-[var(--color-text-tertiary)] mt-0.5">{t('settings.providers.officialDesc')}</div>
         </div>
+
+        {isOfficialActive && (
+          <div className="px-4 pb-4 pt-2 border-t border-[var(--color-border-separator)]">
+            <ClaudeOfficialLogin />
+          </div>
+        )}
       </div>
 
       {/* Saved providers */}