fix(settings): stabilize MCP permission layout

This commit is contained in:
t8y2 2026-07-21 12:09:31 +08:00
parent 8d7acf074d
commit 8d68a527a0
2 changed files with 25 additions and 6 deletions

View File

@ -4924,12 +4924,19 @@ onUnmounted(cleanupPreviewEditor);
</label>
</div>
</fieldset>
<p class="flex items-start gap-1.5 text-xs" :class="mcpExecutionMode === 'high_risk_write' ? 'text-amber-600 dark:text-amber-400' : 'text-muted-foreground'">
<AlertTriangle v-if="mcpExecutionMode === 'high_risk_write'" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
<span v-if="mcpExecutionMode === 'read_only'">{{ t("settings.mcpExecutionModeReadOnlyDescription") }}</span>
<span v-else-if="mcpExecutionMode === 'safe_write'">{{ t("settings.mcpExecutionModeSafeWriteDescription") }}</span>
<span v-else>{{ t("settings.mcpExecutionModeHighRiskWriteDescription") }}</span>
</p>
<!-- Keep every translation in one grid cell so mode changes cannot reflow the capability matrix. -->
<div data-mcp-execution-mode-description class="grid text-xs">
<p class="col-start-1 row-start-1 text-muted-foreground" :class="mcpExecutionMode === 'read_only' ? 'visible' : 'invisible'">
{{ t("settings.mcpExecutionModeReadOnlyDescription") }}
</p>
<p class="col-start-1 row-start-1 text-muted-foreground" :class="mcpExecutionMode === 'safe_write' ? 'visible' : 'invisible'">
{{ t("settings.mcpExecutionModeSafeWriteDescription") }}
</p>
<p class="col-start-1 row-start-1 flex items-start gap-1.5 text-amber-600 dark:text-amber-400" :class="mcpExecutionMode === 'high_risk_write' ? 'visible' : 'invisible'">
<AlertTriangle class="mt-0.5 h-3.5 w-3.5 shrink-0" />
<span>{{ t("settings.mcpExecutionModeHighRiskWriteDescription") }}</span>
</p>
</div>
<div class="space-y-1.5">
<div class="space-y-0.5">
<p class="text-xs font-medium">{{ t("settings.mcpCapabilityTitle") }}</p>

View File

@ -91,6 +91,18 @@ describe("MCP policy settings state", () => {
expect(loadingStart).toBeLessThan(policyLoad);
expect(loadingEnd).toBeGreaterThan(policyLoad);
});
it("keeps translated mode descriptions in one responsive layout track", () => {
const descriptionStart = settingsDialogSource.indexOf("data-mcp-execution-mode-description");
const descriptionEnd = settingsDialogSource.indexOf("settings.mcpCapabilityTitle", descriptionStart);
const descriptionSource = settingsDialogSource.slice(descriptionStart, descriptionEnd);
expect(descriptionStart).toBeGreaterThan(-1);
expect(descriptionEnd).toBeGreaterThan(descriptionStart);
expect(descriptionSource).toContain('class="grid text-xs"');
expect(descriptionSource.match(/col-start-1 row-start-1/g)).toHaveLength(3);
expect(descriptionSource.match(/\? 'visible' : 'invisible'/g)).toHaveLength(3);
});
});
describe("MCP connection search", () => {