CN_Tool_client/frontend/src/views/tools/mmsMapping/components/JsonMappingTreeNode.vue

<template>
    <div v-if="!node.children" class="json-tree-line" :style="indentStyle">
        <span class="json-tree-spacer" />
        <template v-if="node.keyName !== undefined">
            <span class="json-tree-key">{{ JSON.stringify(node.keyName) }}</span>
            <span class="json-tree-colon">: </span>
        </template>
        <span :class="['json-tree-value', `is-${node.valueType}`]">{{ node.valueText }}</span>
        <span v-if="!isLast" class="json-tree-comma">,</span>
    </div>

    <div v-else class="json-tree-node">
        <div class="json-tree-line is-container" :style="indentStyle">
            <button class="json-tree-toggle" type="button" :title="isExpanded ? '收起' : '展开'" @click="emit('toggle', node.id)">
                {{ isExpanded ? '⌄' : '›' }}
            </button>
            <template v-if="node.keyName !== undefined">
                <span class="json-tree-key">{{ JSON.stringify(node.keyName) }}</span>
                <span class="json-tree-colon">: </span>
            </template>
            <span class="json-tree-token">{{ node.openToken }}</span>
            <span v-if="!isExpanded" class="json-tree-ellipsis"> ... </span>
            <span v-if="!isExpanded" class="json-tree-token">{{ node.closeToken }}</span>
            <span class="json-tree-summary">{{ node.summary }}</span>
            <span v-if="!isExpanded && !isLast" class="json-tree-comma">,</span>
        </div>

        <template v-if="isExpanded">
            <JsonMappingTreeNode
                v-for="(child, index) in node.children"
                :key="child.id"
                :node="child"
                :depth="depth + 1"
                :is-last="index === node.children.length - 1"
                :expanded-keys="expandedKeys"
                @toggle="emit('toggle', $event)"
            />
            <div class="json-tree-line is-close" :style="indentStyle">
                <span class="json-tree-spacer" />
                <span class="json-tree-token">{{ node.closeToken }}</span>
                <span v-if="!isLast" class="json-tree-comma">,</span>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
    name: 'JsonMappingTreeNode'
})

export type JsonValueType = 'string' | 'number' | 'boolean' | 'null'

export interface JsonTreeNodeModel {
    id: string
    keyName?: string
    openToken?: '{' | '['
    closeToken?: '}' | ']'
    summary?: string
    children?: JsonTreeNodeModel[]
    valueText?: string
    valueType?: JsonValueType
}

const props = defineProps<{
    node: JsonTreeNodeModel
    depth: number
    isLast: boolean
    expandedKeys: Set<string>
}>()

const emit = defineEmits<{
    (event: 'toggle', id: string): void
}>()

const isExpanded = computed(() => props.expandedKeys.has(props.node.id))
const indentStyle = computed(() => ({
    paddingLeft: `${props.depth * 18}px`
}))
</script>

<style scoped lang="scss">
.json-tree-line {
    display: flex;
    align-items: flex-start;
    min-height: 24px;
    white-space: pre;
}

.json-tree-line.is-container {
    color: #172033;
}

.json-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 22px;
    margin: 0 2px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
}

.json-tree-toggle:hover {
    color: #2563eb;
}

.json-tree-spacer {
    flex: 0 0 20px;
    width: 20px;
}

.json-tree-key {
    color: #7c3aed;
}

.json-tree-colon,
.json-tree-comma,
.json-tree-token {
    color: #334155;
}

.json-tree-ellipsis,
.json-tree-summary {
    color: #94a3b8;
}

.json-tree-value.is-string {
    color: #047857;
}

.json-tree-value.is-number {
    color: #b45309;
}

.json-tree-value.is-boolean {
    color: #2563eb;
}

.json-tree-value.is-null {
    color: #64748b;
}
</style>