admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: eliminate layout shift when switching app types with Claude plugin sync

Browse Source 
- Separate sync button containers for Codex and Claude modes
- Only render the container in corresponding app type to prevent layout jumping
- Apply same fix pattern as commit 0bcc04a for VS Code sync button
This commit is contained in:
Jason
2025-10-01 21:33:29 +08:00
parent 45a639e73f
commit db832a9654
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ProviderList.tsx
View File

@@ -320,11 +320,10 @@ const ProviderList: React.FC<ProviderListProps> = ({
</div> </div>
<div className="flex items-center gap-2 ml-4"> <div className="flex items-center gap-2 ml-4">
{/* VS Code 按钮占位容器 - 始终保持空间，避免布局跳动 */} {/* 同步按钮占位容器 - 只在对应模式下渲染，避免布局跳动 */}
<div className="w-[130px]"> {appType === "codex" ? (
{appType === "codex" && <div className="w-[130px]">
provider.category !== "official" && {provider.category !== "official" && isCurrent && (
isCurrent && (
<button <button
onClick={() => onClick={() =>
vscodeAppliedFor === provider.id vscodeAppliedFor === provider.id
@@ -348,10 +347,12 @@ const ProviderList: React.FC<ProviderListProps> = ({
: t("provider.applyToVSCode")} : t("provider.applyToVSCode")}
</button> </button>
)} )}
</div>
) : null}
{appType === "claude" && {appType === "claude" ? (
provider.category !== "official" && <div className="w-[130px]">
isCurrent && ( {provider.category !== "official" && isCurrent && (
<button <button
onClick={() => onClick={() =>
claudeApplied claudeApplied
@@ -375,7 +376,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
: t("provider.applyToClaudePlugin")} : t("provider.applyToClaudePlugin")}
</button> </button>
)} )}
</div> </div>
) : null}
<button <button
onClick={() => onSwitch(provider.id)} onClick={() => onSwitch(provider.id)}
disabled={isCurrent} disabled={isCurrent}