From 76be2dc85c1fad9eddf69ad540aaf6b9e6f30a38 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Thu, 16 Jul 2026 17:26:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(json-schema-editor):=20JSON=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=96=B0=E5=A2=9E=20isContainer=20=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E5=AD=97=E6=AE=B5=E8=81=94=E5=8A=A8=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将旧的分级 upLevel/remove 联动规则改为基于完整路径的平铺结构。

新增特性：
- 标量字段（string/number/boolean）配置面板中增加"容器字段"开关
- 开关打开后展示"联动隐藏"下拉菜单，列出当前字段同级及以上所有可选字段
- 下拉展示格式："字段key — 完整路径"（如 type — messages.attrs[0].content.attrs[0].type）
- 选中后以 { key: path } 格式输出，渲染器按路径直接定位隐藏字段

核心改动：
- index.vue: 新增 getAvailableFields / getNodeJsonPath 替代旧的分级遍历逻辑
  - getAvailableFields: 从当前字段向上遍历，跳过数组层级，根级只含容器自身
  - getNodeJsonPath: inAttrs 状态机生成完整路径（messages.attrs[0].content.attrs[0].type）
  - linkRules 类型从 Array<{ upLevel, remove[] }> 改为 Array<Record<string, string>>
  - formToConfig / hasAnyConfig 同步更新
- FieldConfigDialog.vue: 重构联动隐藏UI，单 el-select multiple 替代分级 checkbox
- JsonNode.vue: 类型同步 + 摘要显示容器触发器及规则数

数据格式示例：
  "isContainer": true,
  "linkRules": [
    { "type": "messages.attrs[0].content.attrs[0].type" }
  ]
---
 .../json-schema-editor/FieldConfigDialog.vue  | 106 ++++++++++++-----
 .../json-schema-editor/JsonNode.vue           |   8 ++
 src/components/json-schema-editor/index.vue   | 108 ++++++++++++++++++
 3 files changed, 192 insertions(+), 30 deletions(-)

diff --git a/src/components/json-schema-editor/FieldConfigDialog.vue b/src/components/json-schema-editor/FieldConfigDialog.vue
index 0564042..d73633d 100644
--- a/src/components/json-schema-editor/FieldConfigDialog.vue
+++ b/src/components/json-schema-editor/FieldConfigDialog.vue
@@ -26,9 +26,9 @@
 						<div class="form-hint">JSON 数据类型</div>
 					</el-form-item>
 					<el-form-item v-if="form.jsonType === 'object'" label="循环生成">
-					<el-switch v-model="form.loop" />
-					<span class="form-hint">此对象字段是否循环生成</span>
-				</el-form-item>
+						<el-switch v-model="form.loop" />
+						<span class="form-hint">此对象字段是否循环生成</span>
+					</el-form-item>
 					<el-form-item v-if="jsonTypeIsScalar" label="默认值">
 						<template v-if="form.jsonType === 'boolean'">
 							<el-select v-model="form.defaultValue" placeholder="选择默认值" clearable>
@@ -38,21 +38,30 @@
 						</template>
 						<el-input v-else v-model="form.defaultValue" placeholder="留空则无默认值" clearable />
 					</el-form-item>
+					<el-form-item v-if="jsonTypeIsScalar" label="容器字段">
+						<el-switch v-model="form.isContainer" />
+						<span class="form-hint">{{ form.isContainer ? '此字段为容器触发器，将联动隐藏其他字段' : '' }}</span>
+					</el-form-item>
+					<el-form-item v-if="form.isContainer && form._levelFields.length > 0" label="联动隐藏">
+						<el-select multiple collapse-tags collapse-tags-tooltip :model-value="selectedKeys" @change="onSelectChange" placeholder="选择要隐藏的字段" style="width:100%">
+							<el-option v-for="field in form._levelFields" :key="field.key" :label="`${field.key} — ${field.path}`" :value="field.key" />
+						</el-select>
+					</el-form-item>
 					<template v-if="jsonTypeIsScalar">
 						<el-divider content-position="left">表单属性</el-divider>
 						<el-form-item label="表单显示">
 							<el-switch v-model="form.isForm" />
 							<span class="form-hint">{{ form.isForm ? '在表单中展示' : '隐藏字段' }}</span>
 						</el-form-item>
-							<el-form-item label="表单控件">
-								<el-select v-model="form.fieldType" @change="onTypeChange">
-									<el-option v-for="opt in fieldTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
-								</el-select>
-								<div class="form-hint">此字段在表单中以什么组件展示</div>
-							</el-form-item>
-							<el-form-item label="必填项">
-								<el-switch v-model="form.required" />
-							</el-form-item>
+						<el-form-item label="表单控件">
+							<el-select v-model="form.fieldType" @change="onTypeChange">
+								<el-option v-for="opt in fieldTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+							</el-select>
+							<div class="form-hint">此字段在表单中以什么组件展示</div>
+						</el-form-item>
+						<el-form-item label="必填项">
+							<el-switch v-model="form.required" />
+						</el-form-item>
 						<el-divider content-position="left">约束规则</el-divider>
 						<el-form-item v-if="form.fieldType === 'select'" label="选项列表">
 							<div class="options-editor">
@@ -135,13 +144,22 @@
 					<span class="form-hint">此对象字段是否循环生成</span>
 				</el-form-item>
 				<el-form-item v-if="jsonTypeIsScalar" label="默认值">
-						<template v-if="form.jsonType === 'boolean'">
-							<el-select v-model="form.defaultValue" placeholder="选择默认值" clearable>
-								<el-option label="true" value="true" />
-								<el-option label="false" value="false" />
-							</el-select>
-						</template>
-						<el-input v-else v-model="form.defaultValue" placeholder="留空则无默认值" clearable />
+					<template v-if="form.jsonType === 'boolean'">
+						<el-select v-model="form.defaultValue" placeholder="选择默认值" clearable>
+							<el-option label="true" value="true" />
+							<el-option label="false" value="false" />
+						</el-select>
+					</template>
+					<el-input v-else v-model="form.defaultValue" placeholder="留空则无默认值" clearable />
+				</el-form-item>
+				<el-form-item v-if="jsonTypeIsScalar" label="容器字段">
+					<el-switch v-model="form.isContainer" />
+					<span class="form-hint">{{ form.isContainer ? '此字段为容器触发器，将联动隐藏其他字段' : '' }}</span>
+				</el-form-item>
+				<el-form-item v-if="form.isContainer && form._levelFields.length > 0" label="联动隐藏">
+					<el-select multiple collapse-tags collapse-tags-tooltip :model-value="selectedKeys" @change="onSelectChange" placeholder="选择要隐藏的字段" style="width:100%">
+						<el-option v-for="field in form._levelFields" :key="field.key" :label="`${field.key} — ${field.path}`" :value="field.key" />
+					</el-select>
 				</el-form-item>
 				<template v-if="jsonTypeIsScalar">
 					<el-divider content-position="left">表单属性</el-divider>
@@ -149,15 +167,15 @@
 						<el-switch v-model="form.isForm" />
 						<span class="form-hint">{{ form.isForm ? '在表单中展示' : '隐藏字段' }}</span>
 					</el-form-item>
-						<el-form-item label="表单控件">
-							<el-select v-model="form.fieldType" @change="onTypeChange">
-								<el-option v-for="opt in fieldTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
-							</el-select>
-							<div class="form-hint">此字段在表单中以什么组件展示</div>
-						</el-form-item>
-						<el-form-item label="必填项">
-							<el-switch v-model="form.required" />
-						</el-form-item>
+					<el-form-item label="表单控件">
+						<el-select v-model="form.fieldType" @change="onTypeChange">
+							<el-option v-for="opt in fieldTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+						</el-select>
+						<div class="form-hint">此字段在表单中以什么组件展示</div>
+					</el-form-item>
+					<el-form-item label="必填项">
+						<el-switch v-model="form.required" />
+					</el-form-item>
 					<el-divider content-position="left">约束规则</el-divider>
 					<el-form-item v-if="form.fieldType === 'select'" label="选项列表">
 						<div class="options-editor">
@@ -211,10 +229,18 @@ import { Plus } from '@element-plus/icons-vue';
 
 interface UploadRule { format: string; maxSize?: number; maxCount?: number; }
 
+interface AvailableField {
+	key: string;
+	path: string;
+}
+
 interface FieldFormData {
 	nodeKey: string; nodeId: string; jsonType: string; fieldType: string;
 	label: string; description: string; role: string;
 	isForm: boolean; required: boolean; loop: boolean; defaultValue: string; options: Array<{ label: string; value: string }>;
+	isContainer: boolean;
+	linkRules: Array<Record<string, string>>;
+	_levelFields: AvailableField[];
 	constraint: {
 		minLength?: number; maxLength?: number; pattern?: string;
 		min?: number; max?: number; numberType?: string;
@@ -242,6 +268,9 @@ const form = reactive<FieldFormData>({
 	nodeKey: '', nodeId: '', jsonType: 'string', fieldType: 'string',
 	label: '', description: '', role: '',
 	isForm: true, required: false, loop: false, defaultValue: '', options: [], constraint: {},
+	isContainer: false,
+	linkRules: [],
+	_levelFields: [],
 });
 
 const uploadRules = ref<UploadRule[]>([]);
@@ -257,11 +286,26 @@ const dialogTitle = computed(() => {
 		: '字段配置 —— ' + form.nodeKey;
 });
 
+// 当前选中的字段 key 列表（用于 v-model）
+const selectedKeys = computed(() =>
+	form.linkRules.map((r) => Object.keys(r)[0]).filter(Boolean) as string[]
+);
+
+function onSelectChange(keys: string[]) {
+	form.linkRules = keys.map((key) => {
+		const match = form._levelFields.find((f) => f.key === key);
+		return { [key]: match ? match.path : key };
+	});
+}
+
 function resetForm() {
 	form.nodeKey = ''; form.nodeId = ''; form.jsonType = 'string'; form.fieldType = 'string';
 	form.label = ''; form.description = ''; form.role = '';
 	form.isForm = true; form.required = false; form.defaultValue = '';
 	form.loop = false;
+	form.isContainer = false;
+	form.linkRules = [];
+	form._levelFields = [];
 	form.options = []; form.constraint = {};
 	// @ts-ignore
 	form._createParentId = undefined; form._isArrayParent = false;
@@ -276,10 +320,9 @@ function loadForm(data: FieldFormData | null) {
 	form.jsonType = data.jsonType || 'string'; form.fieldType = data.fieldType;
 	form.label = data.label || ''; form.description = data.description || ''; form.role = data.role || '';
 	form.isForm = data.isForm ?? true; form.required = data.required || false;
-		form.loop = data.loop ?? false;
+	form.loop = data.loop ?? false;
 	form.defaultValue = data.defaultValue || '';
 	form.options = data.options ? [...data.options] : [];
-	// 兼容旧格式：如果 options 是字符串数组，转为 { label, value }
 	if (form.options.length > 0 && typeof (form.options as any)[0] === 'string') {
 		form.options = (data.options as string[]).map(s => ({ label: s, value: s }));
 	}
@@ -288,6 +331,9 @@ function loadForm(data: FieldFormData | null) {
 	form._createParentId = data._createParentId; form._isArrayParent = data._isArrayParent ?? false;
 	// @ts-ignore
 	form._childrenCount = data._childrenCount ?? 0;
+	form.isContainer = data.isContainer ?? false;
+	form.linkRules = data.linkRules ? data.linkRules.map((r) => ({ ...r })) : [];
+	form._levelFields = data._levelFields ? data._levelFields.map((l) => ({ ...l })) : [];
 	if (data.constraint?.uploadRules?.length) {
 		uploadRules.value = data.constraint.uploadRules.map((r) => ({ ...r }));
 	} else if (data.constraint?.accept) {
diff --git a/src/components/json-schema-editor/JsonNode.vue b/src/components/json-schema-editor/JsonNode.vue
index 69a8750..2fa5ffa 100644
--- a/src/components/json-schema-editor/JsonNode.vue
+++ b/src/components/json-schema-editor/JsonNode.vue
@@ -92,6 +92,8 @@ interface JsonNodeData {
 		role?: string;
 		isForm?: boolean;
 		required?: boolean;
+	isContainer?: boolean;
+		linkRules?: Array<Record<string, string>>;
 		defaultValue?: string | number;
 		options?: Array<{ label: string; value: string }>;
 		constraint?: Record<string, any>;
@@ -105,6 +107,8 @@ function hasConfig(node: JsonNodeData): boolean {
 	if (c.options?.length) return true;
 	if (c.required) return true;
 	if (c.isForm === false) return true;
+	if (c.isContainer) return true;
+	if (c.linkRules?.length) return true;
 	if (c.constraint && Object.keys(c.constraint).length > 0) return true;
 	const defaultTypes: Record<string, string> = { string: 'string', number: 'number', boolean: 'switch' };
 	if (c.fieldType && c.fieldType !== defaultTypes[node.type]) return true;
@@ -128,6 +132,10 @@ function configSummary(node: JsonNodeData): string {
 	if (c.defaultValue !== undefined && c.defaultValue !== '' && c.defaultValue !== null) {
 		parts.push(`默认=${c.defaultValue}`);
 	}
+	if (c.isContainer) {
+		parts.push("容器触发器");
+		if (c.linkRules?.length) parts.push(`联动 ${c.linkRules.length} 条规则`);
+	}
 	const con = c.constraint;
 	if (con) {
 		if (con.minLength || con.maxLength) {
diff --git a/src/components/json-schema-editor/index.vue b/src/components/json-schema-editor/index.vue
index 175bfcd..5c63c10 100644
--- a/src/components/json-schema-editor/index.vue
+++ b/src/components/json-schema-editor/index.vue
@@ -76,6 +76,8 @@ interface FieldConfig {
 	isForm?: boolean;
 	required?: boolean;
 	loop?: boolean;
+	isContainer?: boolean;
+	linkRules?: Array<Record<string, string>>;
 	defaultValue?: string | number;
 	options?: Array<{ label: string; value: string }>;
 	constraint?: {
@@ -88,6 +90,11 @@ interface FieldConfig {
 	};
 }
 
+interface AvailableField {
+	key: string;
+	path: string;
+}
+
 interface JsonNodeData {
 	_id: string; key: string; keyEditable: boolean;
 	type: 'string' | 'number' | 'boolean' | 'null' | 'object' | 'array';
@@ -102,6 +109,9 @@ interface FieldFormData {
 	jsonType: string;
 	fieldType: string; label: string; description: string; role: string;
 	isForm: boolean; required: boolean; loop: boolean; defaultValue: string; options: Array<{ label: string; value: string }>;
+	isContainer: boolean;
+	linkRules: Array<Record<string, string>>;
+	_levelFields: AvailableField[];
 	constraint: {
 		minLength?: number; maxLength?: number; pattern?: string;
 		min?: number; max?: number; numberType?: string;
@@ -205,6 +215,87 @@ function defaultFormType(jsonType: string): string {
 	return m[jsonType] || 'string';
 }
 
+/** 收集当前字段同级及以上的所有可选字段（平铺，含完整路径） */
+function getAvailableFields(nodeId: string): AvailableField[] {
+	const result: AvailableField[] = [];
+	const currentKey = findNodeById(nodeId)?.key;
+	if (!currentKey) return [];
+
+	// 构建祖先链 [root, ..., currentNode]
+	const path: { node: JsonNodeData; parent: JsonNodeData | null }[] = [];
+	(function walk(n: JsonNodeData, p: JsonNodeData | null): boolean {
+		if (n._id === nodeId) { path.push({ node: n, parent: p }); return true; }
+		for (const c of n.children) { if (walk(c, n)) { path.push({ node: n, parent: p }); return true; } }
+		return false;
+	})(rootNode.value, null);
+	if (path.length < 2) return [];
+
+	// 从当前字段开始逐层向上，收集同辈字段（含容器自身）
+	const seen = new Set<string>();
+	// path = [current, ..., root]，所以从倒数第 2 个（root 的直子）开始向前遍历
+	for (let i = path.length - 2; i >= 0; i--) {
+		const container = path[i];
+		const parent = container.parent;
+
+		// 跳过数组层级（数组元素的兄弟是索引号，无意义）
+		if (parent && parent.type === 'array') continue;
+
+		// 根级（path.length-2 = root 的直子）只包含容器自身
+		if (i === path.length - 2) {
+			if (container.node.key !== currentKey && !seen.has(container.node.key)) {
+				seen.add(container.node.key);
+				result.push({ key: container.node.key, path: getNodeJsonPath(container.node._id) });
+			}
+			continue;
+		}
+
+		// 其他层级：收集所有同辈字段（含容器自身）
+		const siblings = parent ? parent.children : container.node.children;
+		for (const sib of siblings) {
+			if (sib.key === currentKey) continue;
+			if (seen.has(sib.key)) continue;
+			seen.add(sib.key);
+
+			result.push({ key: sib.key, path: getNodeJsonPath(sib._id) });
+		}
+	}
+	return result;
+}
+
+/** 计算某个节点在 JSON 中的完整路径（如 messages.attrs[1].content.attrs[1].type） */
+function getNodeJsonPath(nodeId: string): string {
+	// 构建祖先链 [root, ..., target]
+	const chain: JsonNodeData[] = [];
+	(function walk(n: JsonNodeData): boolean {
+		if (n._id === nodeId) { chain.unshift(n); return true; }
+		for (const c of n.children) { if (walk(c)) { chain.unshift(n); return true; } }
+		return false;
+	})(rootNode.value);
+	if (chain.length < 1) return '';
+
+	let path = '';
+	let inAttrs = true;
+
+	for (let i = 1; i < chain.length; i++) {
+		const node = chain[i];
+		const parent = chain[i - 1];
+
+		if (i === 1) {
+			path = node.key;
+			inAttrs = true;
+		} else if (parent.type === 'array') {
+			path += `.attrs[${node.key}]`;
+			inAttrs = true;
+		} else if (inAttrs) {
+			path += `.${node.key}`;
+			inAttrs = false;
+		} else {
+			path += `.attrs.${node.key}`;
+			inAttrs = true;
+		}
+	}
+	return path;
+}
 // --- paste JSON ---
 
 const showPasteDialog = ref(false);
@@ -286,6 +377,13 @@ function formToConfig(form: FieldFormData): FieldConfig {
 	cfg.isForm = form.isForm ?? true;
 	cfg.required = form.required ?? false;
 	cfg.loop = form.loop ?? false;
+	// isContainer + linkRules
+	if (form.isContainer && form.linkRules?.length > 0) {
+		cfg.isContainer = true;
+		cfg.linkRules = form.linkRules
+				.filter((r) => r && typeof r === 'object' && Object.keys(r).length > 0)
+				.map((r) => ({ ...r }));
+	}
 	// 非骨架字段：有值才发
 	if (form.description) cfg.description = form.description;
 	if (form.role) cfg.role = form.role;
@@ -313,6 +411,8 @@ function hasAnyConfig(node: JsonNodeData): boolean {
 	if (c.required) return true;
 	if (c.loop) return true;
 	if (c.isForm === false) return true;
+	if (c.isContainer) return true;
+	if (c.linkRules?.length) return true;
 	if (c.constraint && Object.keys(c.constraint).length > 0) return true;
 	if (c.fieldType && c.fieldType !== defaultFormType(node.type)) return true;
 	return false;
@@ -323,6 +423,8 @@ function openFieldDialog(nodeId: string) {
 	const node = findNodeById(nodeId);
 	if (!node) return;
 	const cfg = node.config || {};
+	const isScalar = node.type !== 'object' && node.type !== 'array';
+	const levelFields = isScalar ? getAvailableFields(nodeId) : [];
 	fieldDialog.value = {
 		visible: true,
 		typeOptions: typeOptionList,
@@ -338,6 +440,9 @@ function openFieldDialog(nodeId: string) {
 			isForm: cfg.isForm ?? true,
 			required: cfg.required ?? false,
 			loop: cfg.loop ?? false,
+			isContainer: cfg.isContainer ?? false,
+			linkRules: cfg.linkRules ? cfg.linkRules.map((r) => ({ ...r })) : [],
+			_levelFields: levelFields,
 			defaultValue: String(cfg.defaultValue ?? ''),
 			options: cfg.options || [],
 			constraint: cfg.constraint ? { ...cfg.constraint } : {},
@@ -370,6 +475,9 @@ function openAddChildDialog(parentNodeId: string) {
 			isForm: true,
 			required: false,
 			loop: false,
+			isContainer: false,
+			linkRules: [],
+			_levelFields: [],
 			defaultValue: '',
 			options: [],
 			constraint: {},