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:
Jason
2025-10-16 16:39:03 +08:00
parent cfefe6b52a
commit 31f56f7c86
3 changed files with 37 additions and 59 deletions

View File

@@ -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>
);
}

View File

@@ -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>
);

View File

@@ -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>
);