CN_Tool_client/frontend/src/views/tools/mmsmapping/components/MappingResultPanel.vue

<template>
    <section class="mapping-panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">调试输出</h2>
                <p class="panel-description">右侧展示最近一次接口返回的 mappingJson 和 problems，并支持导出当前映射摘要。</p>
            </div>
            <div class="panel-actions">
                <el-button plain :icon="Download" :disabled="!canExportMapping" @click="emit('export-mapping')">
                    导出映射文件
                </el-button>
                <el-tag :type="responseStatusTagType" effect="light">{{ responseStatusText }}</el-tag>
            </div>
        </div>

        <div class="panel-content panel-content--fixed">
            <div class="panel-section result-card grow-card preview-tab-section">
                <el-tabs v-model="activeTabProxy" class="preview-tabs">
                    <el-tab-pane label="映射摘要" name="mapping">
                        <div class="preview-header preview-header--compact">
                            <div class="preview-meta">{{ mappingMetaText }}</div>
                        </div>
                        <div class="mapping-json-scroll">
                            <pre v-if="mappingJsonPreview" class="mapping-json-text">{{ mappingJsonPreview }}</pre>
                            <el-empty v-else description="当前返回未包含 mappingJson" />
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="problemTabLabel" name="problem">
                        <div class="problem-section">
                            <div v-if="problemList.length" class="problem-list">
                                <div v-for="(problem, index) in problemList" :key="`${index}-${problem}`" class="problem-item">
                                    <span class="problem-index">{{ index + 1 }}</span>
                                    <span class="problem-text">{{ problem }}</span>
                                </div>
                            </div>
                            <el-empty v-else :description="problemEmptyText" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import { Download } from '@element-plus/icons-vue'
import { computed } from 'vue'

defineOptions({
    name: 'MappingResultPanel'
})

type TagType = 'success' | 'warning' | 'info' | 'primary' | 'danger'

const props = defineProps<{
    responseStatusText: string
    responseStatusTagType: TagType
    activeResultTab: 'mapping' | 'problem'
    mappingMetaText: string
    mappingJsonPreview: string
    problemTabLabel: string
    problemList: string[]
    problemEmptyText: string
    canExportMapping: boolean
}>()

const emit = defineEmits<{
    (event: 'update:activeResultTab', value: 'mapping' | 'problem'): void
    (event: 'export-mapping'): void
}>()

const activeTabProxy = computed({
    get: () => props.activeResultTab,
    set: value => emit('update:activeResultTab', value)
})
</script>

<style scoped lang="scss">
.mapping-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: #1f2937;
}

.panel-description {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
}

.panel-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: auto;
}

.panel-content--fixed {
    overflow: hidden;
}

.panel-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.result-card {
    padding: 16px;
}

.grow-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.preview-tab-section {
    overflow: hidden;
}

.preview-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.preview-tabs :deep(.el-tabs__header) {
    margin-bottom: 16px;
}

.preview-tabs :deep(.el-tabs__nav-wrap::after) {
    background-color: #e5e7eb;
}

.preview-tabs :deep(.el-tabs__item) {
    height: 36px;
    font-size: 15px;
    font-weight: 600;
    color: #4b5563;
}

.preview-tabs :deep(.el-tabs__item.is-active) {
    color: #2563eb;
}

.preview-tabs :deep(.el-tabs__content) {
    flex: 1;
    min-height: 0;
}

.preview-tabs :deep(.el-tab-pane) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.preview-header--compact {
    margin-bottom: 12px;
}

.preview-meta {
    font-size: 13px;
    color: #64748b;
}

.mapping-json-scroll,
.problem-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

.mapping-json-text {
    margin: 0;
    padding: 16px;
    border: 1px solid #dbe3f0;
    border-radius: 10px;
    background: #ffffff;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.7;
    color: #172033;
    white-space: pre-wrap;
    word-break: break-word;
}

.problem-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.problem-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #f3d19e;
    border-radius: 10px;
    background: #fff7ed;
}

.problem-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f97316;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.problem-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.7;
    color: #7c2d12;
    word-break: break-word;
}

@media (max-width: 768px) {
    .mapping-panel {
        padding: 20px;
    }

    .panel-header,
    .panel-actions,
    .preview-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>