feat(grid): add compact JSON editor action

This commit is contained in:
dadong authored and GitHub committed 2026-08-18 11:49:57 +08:00
1 parent d93abea495
commit 4c260b1a2f
3 files changed
+24 -2

No files matched your search

@@ -12057,6 +12057,9 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
<Button v-if="activeValueEditorActions.includes('formatJson')" variant="outline" size="sm" class="h-6 text-xs" @mousedown.prevent @click="formatValueEditorJson">
{{ t("grid.formatJson") }}
</Button>
<Button v-if="activeValueEditorActions.includes('compactJson')" variant="outline" size="sm" class="h-6 text-xs" @mousedown.prevent @click="compactDetailJson">
{{ t("grid.compactJson") }}
</Button>
<Button v-if="activeValueEditorActions.includes('setNull')" variant="outline" size="sm" class="h-6 text-xs" @mousedown.prevent @click="setValueEditorNull">
{{ t("grid.setNull") }}
</Button>
@@ -0,0 +1,18 @@
import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
import { compactJsonText, valueEditorActions } from "@/lib/dataGrid/cellDetailPresentation";
const dataGridSource = readFileSync(new URL("../../../components/grid/DataGrid.vue", import.meta.url), "utf8");
describe("cellDetailPresentation", () => {
it("offers compact JSON beside format JSON for editable JSON values", () => {
expect(valueEditorActions({ canSetNull: true, canFormatJson: true })).toEqual(["formatJson", "compactJson", "setNull", "restoreOriginal"]);
expect(valueEditorActions({ canSetNull: false, canFormatJson: false })).toEqual(["restoreOriginal"]);
expect(compactJsonText('{\n "name": "DBX",\n "enabled": true\n}')).toBe('{"name":"DBX","enabled":true}');
});
it("wires the value editor compact action to the existing compact handler", () => {
expect(dataGridSource).toContain("activeValueEditorActions.includes('compactJson')");
expect(dataGridSource).toContain('@click="compactDetailJson"');
});
});
@@ -1,7 +1,7 @@
import { safeJsonFormat } from "@/lib/common/safeJsonFormat";
export type CellDetailTab = "details" | "hexViewer" | "valueEditor";
export type ValueEditorAction = "formatJson" | "setNull" | "restoreOriginal";
export type ValueEditorAction = "formatJson" | "compactJson" | "setNull" | "restoreOriginal";
export const CELL_DETAIL_JSON_FORMAT_MAX_LENGTH = 50_000;
@@ -49,7 +49,8 @@ function cellDetailRawEditorText(value: unknown): string {
export function valueEditorActions(options: { canSetNull: boolean; canFormatJson?: boolean }): ValueEditorAction[] {
const actions: ValueEditorAction[] = [];
if (options.canFormatJson) actions.push("formatJson");
// JSON 校验通过后同时提供格式化和压缩,避免两个入口的编辑能力不一致。
if (options.canFormatJson) actions.push("formatJson", "compactJson");
if (options.canSetNull) actions.push("setNull");
actions.push("restoreOriginal");
return actions;