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:
@@ -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: "格式化" })}
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -142,7 +142,7 @@ const PromptFormPanel: React.FC<PromptFormPanelProps> = ({
|
||||
onChange={setContent}
|
||||
placeholder={t("prompts.contentPlaceholder", { filename })}
|
||||
darkMode={isDarkMode}
|
||||
minHeight="500px"
|
||||
minHeight="167px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user