refactor(mcp): improve form modal layout with adaptive height editor

Restructure MCP form modal for better space utilization.
- Split form into upper form fields and lower JSON editor sections
- Add full-height mode support for JsonEditor component
- Use flex layout for editor to fill available space
- Update PromptFormPanel to use full-height editor
- Fix locale text formatting
This commit is contained in:
YoVinchen
2025-11-22 16:11:06 +08:00
parent 99471f6706
commit 4ed3e3bf84
3 changed files with 231 additions and 217 deletions

View File

@@ -247,14 +247,23 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
}
};
const isFullHeight = height === "100%";
return (
<div style={{ width: "100%" }}>
<div ref={editorRef} style={{ width: "100%" }} />
<div
style={{ width: "100%", height: isFullHeight ? "100%" : "auto" }}
className={isFullHeight ? "flex flex-col" : ""}
>
<div
ref={editorRef}
style={{ width: "100%", height: isFullHeight ? undefined : "auto" }}
className={isFullHeight ? "flex-1 min-h-0" : ""}
/>
{language === "json" && (
<button
type="button"
onClick={handleFormat}
className="mt-2 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
className={`${isFullHeight ? "mt-2 flex-shrink-0" : "mt-2"} inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors`}
>
<Wand2 className="w-3.5 h-3.5" />
{t("common.format", { defaultValue: "格式化" })}

View File

@@ -429,7 +429,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</Button>
}
>
<div className="glass rounded-xl p-6 border border-white/10 space-y-6">
<div className="flex flex-col h-full gap-6">
{/* 上半部分:表单字段 */}
<div className="glass rounded-xl p-6 border border-white/10 space-y-6 flex-shrink-0">
{/* 预设选择(仅新增时展示) */}
{!isEditing && (
<div>
@@ -440,8 +442,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<button
type="button"
onClick={applyCustom}
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
selectedPreset === -1
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${selectedPreset === -1
? "bg-emerald-500 text-white dark:bg-emerald-600"
: "bg-accent text-muted-foreground hover:bg-accent/80"
}`}
@@ -455,8 +456,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
key={preset.id}
type="button"
onClick={() => applyPreset(idx)}
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
selectedPreset === idx
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${selectedPreset === idx
? "bg-emerald-500 text-white dark:bg-emerald-600"
: "bg-accent text-muted-foreground hover:bg-accent/80"
}`}
@@ -628,10 +628,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</div>
</>
)}
</div>
{/* 配置输入框 */}
<div>
<div className="flex items-center justify-between mb-2">
{/* 下半部分JSON 配置编辑器 - 自适应剩余高度 */}
<div className="glass rounded-xl p-6 border border-white/10 flex flex-col flex-1 min-h-0">
<div className="flex items-center justify-between mb-4 flex-shrink-0">
<label className="text-sm font-medium text-foreground">
{useToml ? t("mcp.form.tomlConfig") : t("mcp.form.jsonConfig")}
</label>
@@ -645,6 +646,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</button>
)}
</div>
<div className="flex-1 min-h-0 flex flex-col">
<div className="flex-1 min-h-0">
<JsonEditor
value={formConfig}
onChange={handleConfigChange}
@@ -657,16 +660,18 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
rows={12}
showValidation={!useToml}
language={useToml ? "javascript" : "json"}
height="300px"
height="100%"
/>
</div>
{configError && (
<div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm">
<div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm flex-shrink-0">
<AlertCircle size={16} />
<span>{configError}</span>
</div>
)}
</div>
</div>
</div>
</FullScreenPanel>
{/* Wizard Modal */}

View File

@@ -142,7 +142,7 @@ const PromptFormPanel: React.FC<PromptFormPanelProps> = ({
onChange={setContent}
placeholder={t("prompts.contentPlaceholder", { filename })}
darkMode={isDarkMode}
minHeight="500px"
minHeight="167px"
/>
</div>
</div>