mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-24 12:44:18 +08:00
feat(providers): tighten Add Provider header spacing and add footer hint
- Reduce title->tabs and tabs->card vertical gaps from 24px to 12px - Add an always-visible footer hint guiding users to fill the fields below after choosing a preset (pinned footer, never scrolls off) - FullScreenPanel: add optional contentClassName prop to scope content padding overrides without affecting the other panels that share it - i18n: add provider.addFooterHint in zh/en/ja/zh-TW
This commit is contained in:
@@ -10,6 +10,7 @@ import {
|
||||
DRAG_REGION_STYLE,
|
||||
} from "@/lib/platform";
|
||||
import { isTextEditableTarget } from "@/utils/domUtils";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface FullScreenPanelProps {
|
||||
isOpen: boolean;
|
||||
@@ -17,6 +18,11 @@ interface FullScreenPanelProps {
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
/**
|
||||
* 覆盖内容区滚动容器的内边距/间距类。默认 `px-6 py-6 space-y-6`。
|
||||
* 通过 `cn`(twMerge) 合并,传入如 `pt-3` 只覆盖顶部内边距,其余保持默认。
|
||||
*/
|
||||
contentClassName?: string;
|
||||
}
|
||||
|
||||
const DRAG_BAR_HEIGHT = isWindows() || isLinux() ? 0 : 28; // px - match App.tsx
|
||||
@@ -33,6 +39,7 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
|
||||
onClose,
|
||||
children,
|
||||
footer,
|
||||
contentClassName,
|
||||
}) => {
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
@@ -136,7 +143,9 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto scroll-overlay">
|
||||
<div className="px-6 py-6 space-y-6 w-full">{children}</div>
|
||||
<div className={cn("px-6 py-6 space-y-6 w-full", contentClassName)}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
|
||||
@@ -280,6 +280,9 @@ export function AddProviderDialog({
|
||||
const footer =
|
||||
!showUniversalTab || activeTab === "app-specific" ? (
|
||||
<>
|
||||
<span className="mr-auto min-w-0 text-xs text-muted-foreground truncate">
|
||||
{t("provider.addFooterHint")}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
@@ -322,6 +325,7 @@ export function AddProviderDialog({
|
||||
title={t("provider.addNewProvider")}
|
||||
onClose={() => onOpenChange(false)}
|
||||
footer={footer}
|
||||
contentClassName="pt-3"
|
||||
>
|
||||
{showUniversalTab ? (
|
||||
<Tabs
|
||||
|
||||
@@ -115,6 +115,7 @@
|
||||
"editProviderHint": "Configuration will be applied to the current provider immediately after update.",
|
||||
"deleteProvider": "Delete Provider",
|
||||
"addNewProvider": "Add New Provider",
|
||||
"addFooterHint": "💡 After choosing a preset, fill in the fields below (e.g. API Key)",
|
||||
"addClaudeProvider": "Add Claude Code Provider",
|
||||
"addCodexProvider": "Add Codex Provider",
|
||||
"addGeminiProvider": "Add Gemini Provider",
|
||||
|
||||
@@ -115,6 +115,7 @@
|
||||
"editProviderHint": "保存すると現在のプロバイダーにすぐ反映されます。",
|
||||
"deleteProvider": "プロバイダーを削除",
|
||||
"addNewProvider": "新しいプロバイダーを追加",
|
||||
"addFooterHint": "💡 プリセットを選んだら、下のフィールド(API Key など)を入力してください",
|
||||
"addClaudeProvider": "Claude Code プロバイダーを追加",
|
||||
"addCodexProvider": "Codex プロバイダーを追加",
|
||||
"addGeminiProvider": "Gemini プロバイダーを追加",
|
||||
|
||||
@@ -115,6 +115,7 @@
|
||||
"editProviderHint": "更新設定後將立即套用至目前供應商。",
|
||||
"deleteProvider": "刪除供應商",
|
||||
"addNewProvider": "新增供應商",
|
||||
"addFooterHint": "💡 選擇預設後,請在下方填寫 API Key 等欄位",
|
||||
"addClaudeProvider": "新增 Claude Code 供應商",
|
||||
"addCodexProvider": "新增 Codex 供應商",
|
||||
"addGeminiProvider": "新增 Gemini 供應商",
|
||||
|
||||
@@ -115,6 +115,7 @@
|
||||
"editProviderHint": "更新配置后将立即应用到当前供应商。",
|
||||
"deleteProvider": "删除供应商",
|
||||
"addNewProvider": "添加新供应商",
|
||||
"addFooterHint": "💡 选择预设后,请在下方填写 API Key 等字段",
|
||||
"addClaudeProvider": "添加 Claude Code 供应商",
|
||||
"addCodexProvider": "添加 Codex 供应商",
|
||||
"addGeminiProvider": "添加 Gemini 供应商",
|
||||
|
||||
Reference in New Issue
Block a user