feat(mmsmapping): 添加 XML 映射生成功能和波形标记功能

- 新增 getXmlFromJsonApi 接口用于从 JSON 生成 XML 映射 - 添加 XML 映射相关的数据结构定义和响应处理 - 实现 XML 映射生成功能，支持 JSON 到 XML 的转换 - 添加波形图表点击事件处理和标记功能 - 实现趋势图表的标记点显示和标签功能 - 更新界面以支持 XML 映射预览和导出 - 优化图表交互体验，添加标记工具模式 - 重构部分界面组件以支持新的映射功能
2026-05-08 09:54:52 +08:00
parent fe3ab1f679
commit a1e1fb124a
16 changed files with 1821 additions and 210 deletions
--- a/frontend/src/views/tools/mmsMapping/components/JsonMappingTree.vue
+++ b/frontend/src/views/tools/mmsMapping/components/JsonMappingTree.vue
@@ -0,0 +1,196 @@
+<template>
+    <div class="json-mapping-tree-viewer">
+        <div class="json-tree-toolbar">
+            <div class="json-tree-meta">{{ metaText }}</div>
+            <div class="json-tree-actions">
+                <slot name="actions" />
+                <el-button type="primary" plain size="small" :disabled="!rootNode" @click="expandAll">全部展开</el-button>
+                <el-button plain size="small" :disabled="!rootNode" @click="collapseAll">全部收起</el-button>
+            </div>
+        </div>
+
+        <div v-if="rootNode" class="json-tree-body">
+            <JsonTreeNode :node="rootNode" :depth="0" :is-last="true" :expanded-keys="expandedKeys" @toggle="toggleNode" />
+        </div>
+        <pre v-else class="mapping-json-text">{{ source }}</pre>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import JsonTreeNode, { type JsonTreeNodeModel, type JsonValueType } from './JsonMappingTreeNode.vue'
+
+defineOptions({
+    name: 'JsonMappingTree'
+})
+
+type JsonValue = null | boolean | number | string | JsonValue[] | { [key: string]: JsonValue }
+const props = defineProps<{
+    source: string
+    metaText?: string
+}>()
+
+const expandedKeys = ref<Set<string>>(new Set())
+
+const parsedJson = computed<{ valid: true; value: JsonValue } | { valid: false }>(() => {
+    try {
+        return {
+            valid: true,
+            value: JSON.parse(props.source) as JsonValue
+        }
+    } catch {
+        return {
+            valid: false
+        }
+    }
+})
+
+const rootNode = computed(() => {
+    if (!parsedJson.value.valid) return null
+
+    return buildJsonNode(undefined, parsedJson.value.value, '$')
+})
+
+watch(
+    rootNode,
+    node => {
+        expandedKeys.value = new Set(node ? collectContainerKeys(node) : [])
+    },
+    { immediate: true }
+)
+
+function buildJsonNode(keyName: string | undefined, source: JsonValue, path: string): JsonTreeNodeModel {
+    if (Array.isArray(source)) {
+        return {
+            id: path,
+            keyName,
+            openToken: '[',
+            closeToken: ']',
+            summary: ` ${source.length} 项`,
+            children: source.map((item, index) => buildJsonNode(undefined, item, `${path}/${index}`))
+        }
+    }
+
+    if (source && typeof source === 'object') {
+        const entries = Object.entries(source)
+
+        return {
+            id: path,
+            keyName,
+            openToken: '{',
+            closeToken: '}',
+            summary: ` ${entries.length} 项`,
+            children: entries.map(([key, value]) => buildJsonNode(key, value, `${path}/${escapePathKey(key)}`))
+        }
+    }
+
+    return {
+        id: path,
+        keyName,
+        valueText: formatPrimitiveValue(source),
+        valueType: getPrimitiveType(source)
+    }
+}
+
+function collectContainerKeys(node: JsonTreeNodeModel): string[] {
+    if (!node.children) return []
+
+    return [node.id, ...node.children.flatMap(collectContainerKeys)]
+}
+
+function escapePathKey(key: string) {
+    return key.replace(/~/g, '~0').replace(/\//g, '~1')
+}
+
+function formatPrimitiveValue(source: JsonValue) {
+    if (typeof source === 'string') return JSON.stringify(source)
+    if (source === null) return 'null'
+    return String(source)
+}
+
+function getPrimitiveType(source: JsonValue): JsonValueType {
+    if (source === null) return 'null'
+    if (typeof source === 'boolean') return 'boolean'
+    if (typeof source === 'number') return 'number'
+    return 'string'
+}
+
+function toggleNode(id: string) {
+    const nextKeys = new Set(expandedKeys.value)
+
+    if (nextKeys.has(id)) {
+        nextKeys.delete(id)
+    } else {
+        nextKeys.add(id)
+    }
+
+    expandedKeys.value = nextKeys
+}
+
+function expandAll() {
+    if (!rootNode.value) return
+
+    expandedKeys.value = new Set(collectContainerKeys(rootNode.value))
+}
+
+function collapseAll() {
+    expandedKeys.value = new Set()
+}
+</script>
+
+<style scoped lang="scss">
+.json-mapping-tree-viewer {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.json-tree-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 28px;
+    gap: 8px;
+    margin-bottom: 8px;
+    white-space: nowrap;
+}
+
+.json-tree-meta {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    color: #64748b;
+    font-size: 13px;
+    text-overflow: ellipsis;
+}
+
+.json-tree-actions {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 8px;
+}
+
+.json-tree-body,
+.mapping-json-text {
+    flex: 1;
+    min-height: 0;
+    margin: 0;
+    padding: 16px;
+    border: 1px solid #dbe3f0;
+    border-radius: 10px;
+    background: #ffffff;
+    overflow: auto;
+    font-family: Consolas, 'Courier New', monospace;
+    font-size: 13px;
+    line-height: 1.7;
+    color: #172033;
+}
+
+.mapping-json-text {
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+</style>
--- a/frontend/src/views/tools/mmsMapping/components/JsonMappingTreeNode.vue
+++ b/frontend/src/views/tools/mmsMapping/components/JsonMappingTreeNode.vue
@@ -0,0 +1,153 @@
+<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>
--- a/frontend/src/views/tools/mmsMapping/components/MappingConfirmDialog.vue
+++ b/frontend/src/views/tools/mmsMapping/components/MappingConfirmDialog.vue
@@ -1,7 +1,7 @@
 <template>
    <el-dialog
        :model-value="visible"
-        title="人工确认索引配置"
+        title="人工索引配置"
        width="960px"
        destroy-on-close
        top="6vh"
@@ -10,107 +10,122 @@
    >
        <div class="dialog-description">
            这里展示 ICD 候选索引的人工确认结果。请按分组确认每个标签是否启用，并为已启用标签选择合法的
-            lnInst，确认后会自动回填到 request.indexSelection。
+            lnInst，确认后会自动回填到索引配置。
        </div>

        <el-empty v-if="!draftGroups.length" description="当前没有可确认的索引分组。" />

-        <div v-else class="dialog-content">
-            <section v-for="group in draftGroups" :key="group.groupKey" class="group-card">
-                <div class="group-header">
-                    <div>
-                        <h3 class="group-title">{{ group.groupDesc || group.groupKey }}</h3>
-                        <p class="group-key">{{ group.groupKey }}</p>
+        <template v-else>
+            <div class="dialog-search-bar">
+                <el-input
+                    v-model="indexSearchKeyword"
+                    :prefix-icon="Search"
+                    clearable
+                    placeholder="按分组、标签、目标报告、数据集或 lnInst 检索"
+                />
+                <span class="dialog-search-count">{{ filteredLabelCount }} / {{ totalLabelCount }}</span>
+            </div>
+
+            <div v-if="filteredDraftGroups.length" class="dialog-content">
+                <section v-for="group in filteredDraftGroups" :key="group.groupKey" class="group-card">
+                    <div class="group-header">
+                        <div>
+                            <h3 class="group-title">{{ group.groupDesc || group.groupKey }}</h3>
+                            <p class="group-key">{{ group.groupKey }}</p>
+                        </div>
+                        <el-tag type="info" effect="light">{{ group.labelItems.length }} 个标签</el-tag>
                    </div>
-                    <el-tag type="info" effect="light">{{ group.labelItems.length }} 个标签</el-tag>
-                </div>

-                <div class="label-list">
-                    <article v-for="item in group.labelItems" :key="item.itemKey" class="label-card">
-                        <div class="label-main">
-                            <div class="label-meta">
-                                <div class="label-title-row">
-                                    <span class="label-title">{{ item.label }}</span>
-                                    <el-tag v-if="item.required" type="danger" effect="light" size="small">必选</el-tag>
-                                    <el-tag v-if="item.configurableOnce" type="success" effect="light" size="small">
-                                        共享 lnInst
-                                    </el-tag>
-                                </div>
-                                <div class="label-options">
-                                    <span class="label-hint">共同可选值</span>
-                                    <template v-if="item.commonLnInstValues.length">
-                                        <el-tag
-                                            v-for="value in item.commonLnInstValues"
-                                            :key="`${item.label}-${value}`"
-                                            size="small"
-                                            effect="plain"
-                                        >
-                                            {{ value }}
+                    <div class="label-list">
+                        <article v-for="item in group.labelItems" :key="item.itemKey" class="label-card">
+                            <div class="label-main">
+                                <div class="label-meta">
+                                    <div class="label-title-row">
+                                        <span class="label-title">{{ item.label }}</span>
+                                        <el-tag v-if="item.required" type="danger" effect="light" size="small">必选</el-tag>
+                                        <el-tag v-if="item.configurableOnce" type="success" effect="light" size="small">
+                                            共享 lnInst
                                        </el-tag>
-                                    </template>
-                                    <span v-else class="label-hint">当前没有共同 lnInst</span>
+                                    </div>
+                                    <div class="label-options">
+                                        <span class="label-hint">共同可选值</span>
+                                        <template v-if="item.commonLnInstValues.length">
+                                            <el-tag
+                                                v-for="value in item.commonLnInstValues"
+                                                :key="`${item.label}-${value}`"
+                                                size="small"
+                                                effect="plain"
+                                            >
+                                                {{ value }}
+                                            </el-tag>
+                                        </template>
+                                        <span v-else class="label-hint">当前没有共同 lnInst</span>
+                                    </div>
                                </div>
-                            </div>

-                            <div class="label-actions">
-                                <el-switch
-                                    v-model="item.enabled"
-                                    :disabled="item.required"
-                                    inline-prompt
-                                    active-text="启用"
-                                    inactive-text="停用"
-                                />
-                                <el-select
-                                    v-model="item.lnInst"
-                                    class="lninst-select"
-                                    placeholder="请选择 lnInst"
-                                    clearable
-                                    :disabled="!item.enabled || !item.commonLnInstValues.length"
-                                >
-                                    <el-option
-                                        v-for="value in item.commonLnInstValues"
-                                        :key="`${item.label}-option-${value}`"
-                                        :label="value"
-                                        :value="value"
+                                <div class="label-actions">
+                                    <el-switch
+                                        v-model="item.enabled"
+                                        :disabled="item.required"
+                                        inline-prompt
+                                        active-text="启用"
+                                        inactive-text="停用"
                                    />
-                                </el-select>
-                            </div>
-                        </div>
-
-                        <el-alert
-                            v-if="item.enabled && !item.lnInst"
-                            title="已启用的标签必须选择 lnInst"
-                            type="warning"
-                            :closable="false"
-                            class="label-alert"
-                        />
-
-                        <div class="target-list">
-                            <div v-for="target in item.targets" :key="target.targetKey" class="target-item">
-                                <div class="target-name-row">
-                                    <span class="target-name">{{ target.reportDesc || target.reportName || '--' }}</span>
-                                    <span class="target-code">{{ target.reportName || '--' }} / {{ target.dataSetName || '--' }}</span>
-                                </div>
-                                <div class="target-lninst-row">
-                                    <span class="label-hint">目标报告可选值</span>
-                                    <template v-if="target.availableLnInstValues.length">
-                                        <el-tag
-                                            v-for="value in target.availableLnInstValues"
-                                            :key="`${target.reportName}-${target.dataSetName}-${value}`"
-                                            size="small"
-                                            effect="plain"
-                                        >
-                                            {{ value }}
-                                        </el-tag>
-                                    </template>
-                                    <span v-else class="label-hint">当前没有可用 lnInst</span>
+                                    <el-select
+                                        v-model="item.lnInst"
+                                        class="lninst-select"
+                                        placeholder="请选择 lnInst"
+                                        clearable
+                                        :disabled="!item.enabled || !item.commonLnInstValues.length"
+                                    >
+                                        <el-option
+                                            v-for="value in item.commonLnInstValues"
+                                            :key="`${item.label}-option-${value}`"
+                                            :label="value"
+                                            :value="value"
+                                        />
+                                    </el-select>
                                </div>
                            </div>
-                        </div>
-                    </article>
-                </div>
-            </section>
-        </div>
+
+                            <el-alert
+                                v-if="item.enabled && !item.lnInst"
+                                title="已启用的标签必须选择 lnInst"
+                                type="warning"
+                                :closable="false"
+                                class="label-alert"
+                            />
+
+                            <div class="target-list">
+                                <div v-for="target in item.targets" :key="target.targetKey" class="target-item">
+                                    <div class="target-name-row">
+                                        <span class="target-name">{{ target.reportDesc || target.reportName || '--' }}</span>
+                                        <span class="target-code">
+                                            {{ target.reportName || '--' }} / {{ target.dataSetName || '--' }}
+                                        </span>
+                                    </div>
+                                    <div class="target-lninst-row">
+                                        <span class="label-hint">目标报告可选值</span>
+                                        <template v-if="target.availableLnInstValues.length">
+                                            <el-tag
+                                                v-for="value in target.availableLnInstValues"
+                                                :key="`${target.reportName}-${target.dataSetName}-${value}`"
+                                                size="small"
+                                                effect="plain"
+                                            >
+                                                {{ value }}
+                                            </el-tag>
+                                        </template>
+                                        <span v-else class="label-hint">当前没有可用 lnInst</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </article>
+                    </div>
+                </section>
+            </div>
+            <el-empty v-else description="当前检索条件下没有匹配的索引配置。" />
+        </template>

        <template #footer>
            <div class="dialog-footer">
@@ -127,6 +142,7 @@
 </template>

 <script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
 import { computed, ref, watch } from 'vue'
 import type { MmsMapping } from '@/api/tools/mmsmapping/interface'

@@ -300,6 +316,45 @@ const buildInitialDraftGroups = (groups: MmsMapping.IndexConfirmGroup[]): Confir
        .filter(group => group.groupKey)

 const draftGroups = ref<ConfirmDialogDraftGroup[]>([])
+const indexSearchKeyword = ref('')
+
+const totalLabelCount = computed(() => draftGroups.value.reduce((total, group) => total + group.labelItems.length, 0))
+
+const normalizedIndexSearchKeyword = computed(() => indexSearchKeyword.value.trim().toLowerCase())
+
+const matchText = (values: string[], keyword: string) => values.some(value => value.toLowerCase().includes(keyword))
+
+const isLabelItemMatched = (item: ConfirmDialogDraftLabelItem, keyword: string) =>
+    matchText([item.label, item.lnInst, ...item.commonLnInstValues], keyword) ||
+    item.targets.some(target =>
+        matchText(
+            [target.reportDesc, target.reportName, target.dataSetName, ...target.availableLnInstValues],
+            keyword
+        )
+    )
+
+const filteredDraftGroups = computed<ConfirmDialogDraftGroup[]>(() => {
+    const keyword = normalizedIndexSearchKeyword.value
+
+    if (!keyword) return draftGroups.value
+
+    return draftGroups.value
+        .map(group => {
+            const groupMatched = matchText([group.groupDesc, group.groupKey], keyword)
+
+            return {
+                ...group,
+                labelItems: groupMatched
+                    ? group.labelItems
+                    : group.labelItems.filter(item => isLabelItemMatched(item, keyword))
+            }
+        })
+        .filter(group => group.labelItems.length)
+})
+
+const filteredLabelCount = computed(() =>
+    filteredDraftGroups.value.reduce((total, group) => total + group.labelItems.length, 0)
+)

 watch(
    () => [props.confirmData, props.visible] as const,
@@ -307,6 +362,7 @@ watch(
        if (!visible) return
        // 关键业务节点：弹窗每次打开都基于最新 confirmData 重新生成草稿，避免不同 ICD 的确认状态串用。
        draftGroups.value = buildInitialDraftGroups(confirmData)
+        indexSearchKeyword.value = ''
    },
    { immediate: true }
 )
@@ -346,6 +402,21 @@ const handleConfirm = () => {
    color: #4b5563;
 }

+.dialog-search-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.dialog-search-count {
+    flex: 0 0 auto;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #64748b;
+    white-space: nowrap;
+}
+
 .dialog-content {
    display: flex;
    flex-direction: column;
@@ -526,6 +597,7 @@ const handleConfirm = () => {

    .group-header,
    .label-main,
+    .dialog-search-bar,
    .dialog-footer {
        flex-direction: column;
        align-items: flex-start;
--- a/frontend/src/views/tools/mmsMapping/index.vue
+++ b/frontend/src/views/tools/mmsMapping/index.vue
@@ -5,9 +5,11 @@
                <MappingRequestPanel
                    :selected-icd-file-name="selectedIcdFileName"
                    :is-submitting="isSubmitting"
+                    :is-parsing="isParsing"
                    :icd-file-accept="icdFileAccept"
                    :request-status-text="requestStatusText"
                    :request-status-tag-type="requestStatusTagType"
+                    :can-parse="canParseIcd"
                    :can-reset="canResetPage"
                    @file-change="handleIcdFileChange"
                    @parse="handleParseIcd"
@@ -18,11 +20,12 @@
                    v-if="showConfigPanel"
                    v-model:index-selection-json="indexSelectionJsonText"
                    :is-submitting="isSubmitting"
+                    :is-generating="isGenerating"
                    :can-generate="canGenerate"
                    :json-error="indexSelectionError"
                    :show-generate-button="showGenerateButton"
                    :show-confirm-button="Boolean(confirmData.length)"
-                    :confirm-button-text="indexSelectionJsonText.trim() ? '重新确认' : '人工确认'"
+                    confirm-button-text="人工索引配置"
                    :can-confirm="!isSubmitting"
                    :has-default-json="Boolean(indexSelectionJsonText.trim())"
                    :empty-description="configEmptyDescription"
@@ -37,11 +40,21 @@
                :response-status-tag-type="responseStatusTagType"
                :mapping-meta-text="mappingMetaText"
                :mapping-json-preview="mappingJsonPreview"
+                :xml-meta-text="xmlMetaText"
+                :xml-mapping-preview="xmlMappingPreview"
+                :xml-empty-text="xmlEmptyText"
                :problem-tab-label="problemTabLabel"
                :problem-list="problemList"
                :problem-empty-text="problemEmptyText"
-                :can-export-mapping="Boolean(mappingJsonPreview)"
+                :method-describe="methodDescribe"
+                :can-export-json-mapping="canExportJsonMapping"
+                :can-export-xml-mapping="canExportXmlMapping"
+                :can-generate-xml-mapping="canGenerateXmlMapping"
+                :is-generating-xml="isGeneratingXml"
+                :show-xml-mapping-tab="showXmlMappingTab"
                @export-mapping="handleExportMapping"
+                @generate-xml-mapping="handleGenerateXmlMapping"
+                @update-mapping-json="handleUpdateMappingJson"
            />
        </div>

@@ -63,7 +76,8 @@ import {
    buildIndexConfirmDataApi,
    buildIndexSelectionApi,
    getIcdApi,
-    getIcdMmsJsonApi
+    getIcdMmsJsonApi,
+    getXmlFromJsonApi
 } from '@/api/tools/mmsmapping'
 import type { MmsMapping } from '@/api/tools/mmsmapping/interface'
 import MappingRequestPanel from './components/MappingRequestPanel.vue'
@@ -77,8 +91,9 @@ defineOptions({
    name: 'MmsMappingView'
 })

-type ResultTab = 'mapping' | 'problem'
+type ResultTab = 'json' | 'xml' | 'problem'
 type TagType = 'success' | 'warning' | 'info' | 'primary' | 'danger'
+type ExportMappingType = 'json' | 'xml'

 const DEFAULT_REQUEST_FORM: MmsMapping.BaseRequestForm = {
    version: '1.0',
@@ -87,7 +102,8 @@ const DEFAULT_REQUEST_FORM: MmsMapping.BaseRequestForm = {

 const selectedIcdFile = ref<File | null>(null)
 const responsePayload = ref<MmsMapping.MappingTaskResponse | null>(null)
-const activeResultTab = ref<ResultTab>('mapping')
+const xmlResponsePayload = ref<MmsMapping.MappingTaskResponse | null>(null)
+const activeResultTab = ref<ResultTab>('json')
 const parsedCandidates = ref<MmsMapping.IndexCandidateGroup[]>([])
 const confirmData = ref<MmsMapping.IndexConfirmGroup[]>([])
 const indexSelectionJsonText = ref('')
@@ -95,6 +111,7 @@ const confirmDialogVisible = ref(false)
 const isParsing = ref(false)
 const isConfirmingSelection = ref(false)
 const isGenerating = ref(false)
+const isGeneratingXml = ref(false)
 const icdFileAccept = '.icd,.cid,.scd,.xml'
 const problemEmptyText = '当前返回未包含 problems'

@@ -128,8 +145,8 @@ const logConfirmDataDiagnostics = (groups: MmsMapping.IndexConfirmGroup[]) => {
                    }))
                }))
                .filter(item =>
-                    [item.label, ...item.commonLnInstValues, ...item.targets.map(target => target.dataSetName)].some(value =>
-                        String(value || '').includes('间谐波')
+                    [item.label, ...item.commonLnInstValues, ...item.targets.map(target => target.dataSetName)].some(
+                        value => String(value || '').includes('间谐波')
                    )
                )
        }))
@@ -184,15 +201,22 @@ const parsedIndexSelectionState = computed(() => {
    }
 })

-const isSubmitting = computed(() => isParsing.value || isConfirmingSelection.value || isGenerating.value)
+const isSubmitting = computed(
+    () => isParsing.value || isConfirmingSelection.value || isGenerating.value || isGeneratingXml.value
+)
 const canResetPage = computed(() =>
    Boolean(
-        selectedIcdFile.value || responsePayload.value || confirmData.value.length || indexSelectionJsonText.value.trim()
+        selectedIcdFile.value ||
+        responsePayload.value ||
+        xmlResponsePayload.value ||
+        confirmData.value.length ||
+        indexSelectionJsonText.value.trim()
    )
 )
 const indexSelectionError = computed(() => parsedIndexSelectionState.value.error)
-const canGenerate = computed(
-    () => Boolean(selectedIcdFile.value && indexSelectionJsonText.value.trim() && !indexSelectionError.value)
+const canParseIcd = computed(() => Boolean(selectedIcdFile.value && !isSubmitting.value))
+const canGenerate = computed(() =>
+    Boolean(selectedIcdFile.value && indexSelectionJsonText.value.trim() && !indexSelectionError.value && !isSubmitting.value)
 )
 // 关键业务节点：请求配置区只在用户已经选择 ICD 后展示，避免初始态暴露无效的请求编辑区。
 const showConfigPanel = computed(() => Boolean(selectedIcdFile.value))
@@ -201,17 +225,18 @@ const selectedIcdFileName = computed(() => selectedIcdFile.value?.name || '')

 const configEmptyDescription = computed(() => {
    if (isParsing.value) return '正在获取 ICD 候选数据并准备人工确认，请稍候。'
-    if (isConfirmingSelection.value) return '正在根据人工确认结果生成 request.indexSelection，请稍候。'
+    if (isConfirmingSelection.value) return '正在根据人工索引配置生成索引配置，请稍候。'
    if (confirmDialogVisible.value || confirmData.value.length) {
-        return '请先在弹窗中完成人工确认，确认后会自动回填 request.indexSelection。'
+        return '请先在弹窗中完成人工索引配置，确认后会自动回填索引配置。'
    }
    if (selectedIcdFile.value) return '已选择 ICD 文件，请先点击“解析 ICD”进入人工确认流程。'
-    return '当前 ICD 暂未生成可编辑的 request.indexSelection。'
+    return '当前 ICD 暂未生成可编辑的索引配置。'
 })

 const requestStatusText = computed(() => {
    if (isParsing.value) return '解析中'
    if (isConfirmingSelection.value) return '确认中'
+    if (isGeneratingXml.value) return 'XML转换中'
    if (isGenerating.value) return '生成中'
    if (confirmDialogVisible.value) return '待人工确认'
    if (selectedIcdFile.value && indexSelectionJsonText.value.trim()) return '已确认'
@@ -221,7 +246,7 @@ const requestStatusText = computed(() => {
 })

 const requestStatusTagType = computed<TagType>(() => {
-    if (isParsing.value || isConfirmingSelection.value || isGenerating.value) return 'warning'
+    if (isParsing.value || isConfirmingSelection.value || isGenerating.value || isGeneratingXml.value) return 'warning'
    if (confirmDialogVisible.value) return 'primary'
    if (selectedIcdFile.value && indexSelectionJsonText.value.trim()) return 'success'
    if (selectedIcdFile.value) return 'primary'
@@ -229,15 +254,24 @@ const requestStatusTagType = computed<TagType>(() => {
 })

 const responseStatusText = computed(() => {
-    if (isSubmitting.value) return '等待返回'
-    return responsePayload.value?.status || '暂无结果'
+    if (isGenerating.value) return 'JSON生成中'
+    if (isGeneratingXml.value) return 'XML生成中'
+    if (isParsing.value || isConfirmingSelection.value) return '处理中'
+    if (xmlResponsePayload.value?.status === 'FAILED') return 'XML失败'
+    if (responsePayload.value?.status === 'FAILED') return '失败'
+    if (responsePayload.value?.status === 'NEED_INDEX_SELECTION') return '待配置'
+    if (xmlResponsePayload.value) return 'XML已生成'
+    if (mappingJsonPreview.value) return 'JSON已生成'
+    if (responsePayload.value) return '已解析'
+    return '未生成'
 })

 const responseStatusTagType = computed<TagType>(() => {
    if (isSubmitting.value) return 'warning'
+    if (xmlResponsePayload.value?.status === 'FAILED') return 'danger'
    if (responsePayload.value?.status === 'FAILED') return 'danger'
    if (responsePayload.value?.status === 'NEED_INDEX_SELECTION') return 'warning'
-    if (responsePayload.value) return 'success'
+    if (xmlResponsePayload.value || responsePayload.value) return 'success'
    return 'info'
 })

@@ -258,7 +292,64 @@ const mappingMetaText = computed(() => {
    return `mappingJson ${mappingJsonPreview.value.length} 字符`
 })

-const problemList = computed(() => responsePayload.value?.problems?.filter(Boolean) || [])
+// 关键业务节点：getXmlFromJson 标准响应把 XML 文本放在 xmlFile.content，旧字段仅保留为兼容兜底。
+const xmlContentForExport = computed(
+    () =>
+        xmlResponsePayload.value?.xmlFile?.content?.trim() ||
+        xmlResponsePayload.value?.mappingXml?.trim() ||
+        xmlResponsePayload.value?.xmlContent?.trim() ||
+        xmlResponsePayload.value?.xmlText?.trim() ||
+        ''
+)
+const canExportJsonMapping = computed(() => Boolean(mappingJsonPreview.value && !isSubmitting.value))
+const canExportXmlMapping = computed(() => Boolean(xmlContentForExport.value && !isSubmitting.value))
+const canGenerateXmlMapping = computed(() => Boolean(mappingJsonPreview.value && !isSubmitting.value))
+const showXmlMappingTab = computed(() =>
+    Boolean(xmlResponsePayload.value && xmlResponsePayload.value.status !== 'FAILED')
+)
+
+const xmlMappingPreview = computed(() => {
+    const source = xmlContentForExport.value
+
+    if (source) return source
+
+    const savedPath = xmlResponsePayload.value?.savedPath?.trim()
+    if (savedPath) return `XML 文件已生成：\n${savedPath}`
+
+    return ''
+})
+
+const xmlMetaText = computed(() => {
+    const xmlFile = xmlResponsePayload.value?.xmlFile
+
+    if (xmlFile?.fileName) {
+        const encoding = xmlFile.encoding?.trim()
+        const contentType = xmlFile.contentType?.trim()
+        const suffixParts = [encoding, contentType].filter(Boolean)
+
+        return suffixParts.length ? `${xmlFile.fileName}（${suffixParts.join('，')}）` : xmlFile.fileName
+    }
+
+    if (xmlResponsePayload.value?.savedPath) return `XML 文件路径：${xmlResponsePayload.value.savedPath}`
+    if (xmlMappingPreview.value) return `XML映射 ${xmlMappingPreview.value.length} 字符`
+    return '当前未生成 XML 映射'
+})
+
+const xmlEmptyText = computed(() => {
+    if (isGeneratingXml.value) return '正在根据 JSON 映射生成 XML 映射'
+    if (xmlResponsePayload.value && xmlResponsePayload.value.status !== 'FAILED') {
+        return '当前接口返回未包含 xmlFile.content'
+    }
+    if (mappingJsonPreview.value) return '当前接口返回未包含 XML 内容或文件路径'
+    return '请先生成 JSON 映射'
+})
+
+const problemList = computed(() => [
+    ...(responsePayload.value?.problems?.filter(Boolean) || []),
+    ...(xmlResponsePayload.value?.problems?.filter(Boolean) || [])
+])
+
+const methodDescribe = computed(() => xmlResponsePayload.value?.methodDescribe?.trim() || '')

 const problemTabLabel = computed(() => {
    if (!problemList.value.length) return '问题列表'
@@ -266,9 +357,53 @@ const problemTabLabel = computed(() => {
 })

 const resolveResultTab = (payload: MmsMapping.MappingTaskResponse | null): ResultTab => {
-    if (payload?.mappingJson?.trim()) return 'mapping'
+    if (payload?.mappingJson?.trim()) return 'json'
    if (payload?.problems?.filter(Boolean).length) return 'problem'
-    return 'mapping'
+    return 'json'
+}
+
+const handleGenerateXmlMapping = async () => {
+    const mappingJson = responsePayload.value?.mappingJson?.trim()
+
+    if (!mappingJson) {
+        ElMessage.warning('请先生成 JSON 映射')
+        return
+    }
+
+    isGeneratingXml.value = true
+    activeResultTab.value = 'json'
+    xmlResponsePayload.value = null
+
+    try {
+        // 关键业务节点：XML 映射依赖本次接口返回的完整 mappingJson，避免使用旧结果生成不一致的 XML 文件。
+        const response = await getXmlFromJsonApi({
+            request: {
+                mappingJson
+            }
+        })
+        const payload = unwrapApiPayload<MmsMapping.MappingTaskResponse>(response)
+
+        xmlResponsePayload.value = payload
+
+        if (payload.status === 'FAILED') {
+            ElMessage.warning(payload.message || 'XML 映射生成失败')
+            activeResultTab.value = payload.problems?.filter(Boolean).length ? 'problem' : 'json'
+            return
+        }
+
+        activeResultTab.value = 'xml'
+        ElMessage.success(payload.message || 'XML 映射生成完成')
+    } catch (error) {
+        xmlResponsePayload.value = {
+            status: 'FAILED',
+            message: getErrorMessage(error),
+            problems: [getErrorMessage(error)]
+        }
+        activeResultTab.value = 'problem'
+        ElMessage.warning(getErrorMessage(error))
+    } finally {
+        isGeneratingXml.value = false
+    }
 }

 const stripProblemsFromIcdPayload = (payload: MmsMapping.MappingTaskResponse): MmsMapping.MappingTaskResponse => {
@@ -282,11 +417,12 @@ const stripProblemsFromIcdPayload = (payload: MmsMapping.MappingTaskResponse): M

 const resetParsedState = () => {
    responsePayload.value = null
+    xmlResponsePayload.value = null
    parsedCandidates.value = []
    confirmData.value = []
    indexSelectionJsonText.value = ''
    confirmDialogVisible.value = false
-    activeResultTab.value = 'mapping'
+    activeResultTab.value = 'json'
 }

 const handleIcdFileChange = (event: Event) => {
@@ -314,6 +450,7 @@ const handleParseIcd = async () => {

    isParsing.value = true
    responsePayload.value = null
+    xmlResponsePayload.value = null
    confirmDialogVisible.value = false
    confirmData.value = []
    indexSelectionJsonText.value = ''
@@ -379,7 +516,7 @@ const handleConfirmIndexSelection = async (confirmedData: MmsMapping.ConfirmedIn
        // 关键业务节点：只有 buildIndexSelection 返回的正式结果才能进入请求配置区，避免前端自行拼装绑定关系。
        indexSelectionJsonText.value = formatIndexSelectionJson(indexSelection)
        confirmDialogVisible.value = false
-        ElMessage.success('人工确认完成，已回填 request.indexSelection')
+        ElMessage.success('人工索引配置完成，已回填索引配置')
    } catch (error) {
        ElMessage.error(getErrorMessage(error))
    } finally {
@@ -395,7 +532,7 @@ const handleGenerateMapping = async () => {

    if (!indexSelectionJsonText.value.trim()) {
        if (confirmData.value.length) {
-            ElMessage.warning('请先完成人工确认并生成 request.indexSelection')
+            ElMessage.warning('请先完成人工索引配置并生成索引配置')
            return
        }

@@ -407,7 +544,7 @@ const handleGenerateMapping = async () => {
    if (error) {
        responsePayload.value = {
            status: 'NEED_INDEX_SELECTION',
-            message: 'request.indexSelection 格式有误，请继续修正',
+            message: '索引配置格式有误，请继续修正',
            problems: [error]
        }
        activeResultTab.value = 'problem'
@@ -417,9 +554,10 @@ const handleGenerateMapping = async () => {

    isGenerating.value = true
    responsePayload.value = null
+    xmlResponsePayload.value = null

    try {
-        // 关键业务节点：正式生成阶段只消费当前请求配置区里的 request.indexSelection，确保导出的映射与最终确认结果一致。
+        // 关键业务节点：正式生成阶段只消费当前请求配置区里的索引配置，确保导出的映射与最终确认结果一致。
        const response = await getIcdMmsJsonApi({
            icdFile: selectedIcdFile.value,
            request: {
@@ -446,34 +584,64 @@ const handleGenerateMapping = async () => {
        ElMessage.success(payload.message || '映射生成完成')
    } catch (error) {
        responsePayload.value = null
+        xmlResponsePayload.value = null
        ElMessage.error(getErrorMessage(error))
    } finally {
        isGenerating.value = false
    }
 }

-const buildExportFileName = () => {
-    const baseFileName = selectedIcdFile.value?.name.replace(/\.[^.]+$/, '') || 'mapping-summary'
-    return `${baseFileName}-mapping-summary.json`
+const buildExportFileName = (type: ExportMappingType) => {
+    const baseFileName = selectedIcdFile.value?.name.replace(/\.[^.]+$/, '')
+    const suffix = `${type}-mapping.${type}`
+
+    return baseFileName ? `${baseFileName}-${suffix}` : suffix
 }

-const handleExportMapping = () => {
-    if (!mappingJsonPreview.value) {
-        ElMessage.warning('当前没有可导出的映射摘要')
-        return
-    }
-
-    const blob = new Blob([mappingJsonPreview.value], { type: 'application/json;charset=utf-8' })
+const downloadTextFile = (content: string, fileName: string, mimeType: string) => {
+    const blob = new Blob([content], { type: mimeType })
    const objectUrl = window.URL.createObjectURL(blob)
    const link = document.createElement('a')

    link.href = objectUrl
-    link.download = buildExportFileName()
+    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(objectUrl)
-    ElMessage.success('映射摘要已导出')
+}
+
+const handleExportMapping = (type: ExportMappingType) => {
+    if (type === 'json' && !mappingJsonPreview.value) {
+        ElMessage.warning('当前没有可导出的 JSON 映射')
+        return
+    }
+
+    if (type === 'xml' && !xmlContentForExport.value) {
+        ElMessage.warning('当前没有可导出的 XML 映射')
+        return
+    }
+
+    if (type === 'json') {
+        downloadTextFile(mappingJsonPreview.value, buildExportFileName('json'), 'application/json;charset=utf-8')
+        ElMessage.success('JSON 映射已导出')
+        return
+    }
+
+    downloadTextFile(xmlContentForExport.value, buildExportFileName('xml'), 'application/xml;charset=utf-8')
+    ElMessage.success('XML 映射已导出')
+}
+
+const handleUpdateMappingJson = (mappingJson: string) => {
+    if (!responsePayload.value) return
+
+    // 关键业务节点：序列配置修改的是当前 JSON 映射结果，XML 结果需要清空，避免继续展示旧 JSON 转换出的 XML。
+    responsePayload.value = {
+        ...responsePayload.value,
+        mappingJson
+    }
+    xmlResponsePayload.value = null
+    activeResultTab.value = 'json'
 }

 const resetPage = () => {