fix: unify dialog layout and fix content padding issues

- Fix negative margin overflow in all dialog content areas
- Standardize dialog structure with flex-col layout
- Add consistent py-4 spacing to all content areas
- Ensure proper spacing between header, content, and footer

Affected components:
- AddProviderDialog, EditProviderDialog
- McpFormModal, McpPanel
- UsageScriptModal
- SettingsDialog

All dialogs now follow unified layout pattern:
- DialogContent: flex flex-col max-h-[90vh]
- Content area: flex-1 overflow-y-auto px-6 py-4
- No negative margins that cause content overflow
This commit is contained in:
Jason
2025-10-18 16:52:02 +08:00
parent 404297cd30
commit 57552b3159
31 changed files with 306 additions and 208 deletions

View File

@@ -1,12 +1,12 @@
import { useState, useCallback, useEffect, useRef } from 'react';
import TOML from 'smol-toml';
import { useState, useCallback, useEffect, useRef } from "react";
import TOML from "smol-toml";
/**
* Codex config.toml 格式校验 Hook
* 使用 smol-toml 进行实时 TOML 语法校验(带 debounce
*/
export function useCodexTomlValidation() {
const [configError, setConfigError] = useState('');
const [configError, setConfigError] = useState("");
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
/**
@@ -17,18 +17,17 @@ export function useCodexTomlValidation() {
const validateToml = useCallback((tomlText: string): boolean => {
// 空字符串视为合法(允许为空)
if (!tomlText.trim()) {
setConfigError('');
setConfigError("");
return true;
}
try {
TOML.parse(tomlText);
setConfigError('');
setConfigError("");
return true;
} catch (error) {
const errorMessage = error instanceof Error
? error.message
: 'TOML 格式错误';
const errorMessage =
error instanceof Error ? error.message : "TOML 格式错误";
setConfigError(errorMessage);
return false;
}
@@ -38,23 +37,26 @@ export function useCodexTomlValidation() {
* 带 debounce 的校验函数500ms 延迟)
* @param tomlText - 待校验的 TOML 文本
*/
const debouncedValidate = useCallback((tomlText: string) => {
// 清除之前的定时器
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
const debouncedValidate = useCallback(
(tomlText: string) => {
// 清除之前的定时器
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
// 设置新的定时器
debounceTimerRef.current = setTimeout(() => {
validateToml(tomlText);
}, 500);
}, [validateToml]);
// 设置新的定时器
debounceTimerRef.current = setTimeout(() => {
validateToml(tomlText);
}, 500);
},
[validateToml],
);
/**
* 清空错误信息
*/
const clearError = useCallback(() => {
setConfigError('');
setConfigError("");
}, []);
// 清理定时器