v2模型管理相关

2026-07-14 16:30:26 +08:00
parent f179a5b755
commit a6eaf57898
8 changed files with 1634 additions and 107 deletions
@@ -0,0 +1,93 @@
+<template>
+	<div class="kv-editor">
+		<div v-for="(item, index) in kvList" :key="index" class="kv-row">
+			<el-input v-model="item.key" placeholder="key" size="small" class="kv-key" @input="emitUpdate" />
+			<el-input v-model="item.value" placeholder="value" size="small" class="kv-value" @input="emitUpdate" />
+			<el-button size="small" text type="danger" class="kv-del" @click="removeRow(index)">
+				<el-icon><Delete /></el-icon>
+			</el-button>
+		</div>
+		<el-button size="small" class="kv-add" @click="addRow">
+			<el-icon><Plus /></el-icon> 添加
+		</el-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Plus, Delete } from '@element-plus/icons-vue';
+
+const props = defineProps<{
+	modelValue: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: Record<string, unknown>): void;
+}>();
+
+const kvList = ref<{ key: string; value: string }[]>([]);
+
+function toKvList(obj: Record<string, unknown>): { key: string; value: string }[] {
+	return Object.entries(obj || {}).map(([k, v]) => ({
+		key: k,
+		value: typeof v === 'string' ? v : JSON.stringify(v),
+	}));
+}
+
+function toRecord(list: { key: string; value: string }[]): Record<string, unknown> {
+	const obj: Record<string, unknown> = {};
+	for (const item of list) {
+		if (item.key.trim()) {
+			obj[item.key.trim()] = item.value;
+		}
+	}
+	return obj;
+}
+
+function emitUpdate() {
+	emit('update:modelValue', toRecord(kvList.value));
+}
+
+function addRow() {
+	kvList.value.push({ key: '', value: '' });
+}
+
+function removeRow(index: number) {
+	kvList.value.splice(index, 1);
+	emitUpdate();
+}
+
+watch(
+	() => props.modelValue,
+	(val) => {
+		kvList.value = toKvList(val);
+	},
+	{ immediate: true, deep: true }
+);
+</script>
+
+<style scoped lang="scss">
+.kv-editor {
+	width: 100%;
+	.kv-row {
+		display: flex;
+		gap: 6px;
+		margin-bottom: 6px;
+		align-items: center;
+		.kv-key {
+			flex: 1;
+			min-width: 0;
+		}
+		.kv-value {
+			flex: 2;
+			min-width: 0;
+		}
+		.kv-del {
+			flex-shrink: 0;
+		}
+	}
+	.kv-add {
+		font-size: 12px;
+	}
+}
+</style>