fix: add scrollbars to provider dialogs and simplify theme toggle
## Changes ### Add scrollbars to provider dialogs - **AddProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper - **EditProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper - Both dialogs now follow the same scrolling pattern as other dialogs in the app - Wrap ProviderForm in `<div className="flex-1 overflow-y-auto -mx-6 px-6">` for proper scrolling ### Simplify theme toggle - **mode-toggle.tsx**: Change from dropdown menu to direct toggle button - Remove DropdownMenu and related imports - Click now directly toggles between light and dark mode - Simpler UX: one click to switch themes instead of opening a menu - Remove "system" theme option from quick toggle (still available in settings if needed) ## Benefits - **Consistent scrolling**: All dialogs now have proper scroll behavior when content exceeds viewport height - **Better UX**: Theme toggle is faster and more intuitive with direct click - **Code simplification**: Removed unnecessary dropdown menu complexity from theme toggle All TypeScript type checks and Prettier formatting checks pass.
This commit is contained in:
@@ -1,55 +1,29 @@
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
|
||||
export function ModeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleChange = (value: string) => {
|
||||
if (value === "light" || value === "dark" || value === "system") {
|
||||
setTheme(value);
|
||||
const toggleTheme = () => {
|
||||
// 如果当前是 dark 或 system(且系统是暗色),切换到 light
|
||||
// 否则切换到 dark
|
||||
if (theme === "dark") {
|
||||
setTheme("light");
|
||||
} else {
|
||||
setTheme("dark");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Button variant="outline" size="icon" onClick={toggleTheme}>
|
||||
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">
|
||||
{t("common.toggleTheme", { defaultValue: "切换主题" })}
|
||||
</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>
|
||||
{t("common.theme", { defaultValue: "主题" })}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuRadioGroup value={theme} onValueChange={handleChange}>
|
||||
<DropdownMenuRadioItem value="light">
|
||||
{t("common.lightMode", { defaultValue: "浅色" })}
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="dark">
|
||||
{t("common.darkMode", { defaultValue: "深色" })}
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="system">
|
||||
{t("common.systemMode", { defaultValue: "跟随系统" })}
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ export function AddProviderDialog({
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{submitLabel}</DialogTitle>
|
||||
<DialogDescription>
|
||||
@@ -66,12 +66,14 @@ export function AddProviderDialog({
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto -mx-6 px-6">
|
||||
<ProviderForm
|
||||
appType={appType}
|
||||
submitLabel={t("common.add", { defaultValue: "添加" })}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -60,7 +60,7 @@ export function EditProviderDialog({
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{t("provider.editProvider", { defaultValue: "编辑供应商" })}
|
||||
@@ -72,6 +72,7 @@ export function EditProviderDialog({
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto -mx-6 px-6">
|
||||
<ProviderForm
|
||||
appType={appType}
|
||||
submitLabel={t("common.save", { defaultValue: "保存" })}
|
||||
@@ -83,6 +84,7 @@ export function EditProviderDialog({
|
||||
settingsConfig: provider.settingsConfig,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user