feat(desktop): embed ClaudeOfficialLogin into Claude Official card

- 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

@@ -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,11 +139,14 @@ 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)]'
         }`}
+      >
+        <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)]'}`} />
@@ -157,6 +161,13 @@ function ProviderSettings() {
           </div>
         </div>
 
+        {isOfficialActive && (
+          <div className="px-4 pb-4 pt-2 border-t border-[var(--color-border-separator)]">
+            <ClaudeOfficialLogin />
+          </div>
+        )}
+      </div>
+
       {/* Saved providers */}
       {isLoading && providers.length === 0 ? (
         <div className="flex justify-center py-8">