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:
Jason
2026-06-19 17:37:43 +08:00
parent e648b7425e
commit a3b3a06f5e
6 changed files with 18 additions and 1 deletions
+10 -1
View File
@@ -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