From 9bb4a504528627434c35a2b22b07e5941ed6c10b Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 27 Nov 2025 13:32:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=9B=E6=A0=87=E8=A7=A3=E6=9E=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/components/AnalysisBidView.vue   | 123 +++++++++++++++++-
 .../components/child/AnalysisResultPanel.vue  |  49 ++++++-
 2 files changed, 163 insertions(+), 9 deletions(-)

diff --git a/src/views/analysis/components/AnalysisBidView.vue b/src/views/analysis/components/AnalysisBidView.vue
index c3bf2c4..fec2aa5 100644
--- a/src/views/analysis/components/AnalysisBidView.vue
+++ b/src/views/analysis/components/AnalysisBidView.vue
@@ -4,13 +4,25 @@
         <!-- 头部导航 -->
         <AnalysisHeader @back="handleBack" />
 
-        <!-- 主内容区域 -->
+        <!-- 一级标签页 - 占满整行 -->
+        <div class="main-tabs-container">
+            <el-tabs v-model="activeMainTab" @tab-click="handleMainTabClick" class="main-tabs">
+                <el-tab-pane
+                    v-for="tab in mainTabs"
+                    :key="tab.name"
+                    :label="tab.label"
+                    :name="tab.name"
+                />
+            </el-tabs>
+        </div>
+
+        <!-- 主内容区域 - 左右各占50% -->
         <div class="main-content">
-            <!-- 左侧：解析结果面板 -->
+            <!-- 左侧：解析结果面板（包含二级tab和内容） -->
             <div class="left-panel">
-                <AnalysisResultPanel ref="resultPanel" :main-tabs="mainTabs" :default-main-tab="defaultMainTab"
+                <AnalysisResultPanel ref="resultPanel" :main-tabs="mainTabs" :default-main-tab="activeMainTab"
                     :default-sub-tab="defaultSubTab" @main-tab-change="handleMainTabChange"
-                    @sub-tab-change="handleSubTabChange">
+                    @sub-tab-change="handleSubTabChange" :hide-main-tabs="true" :key="activeMainTab">
                     <!-- 项目信息 - 招标人 -->
                     <template #project-tenderer>
                         <div class="content-section">
@@ -196,7 +208,7 @@ export default {
         return {
             proId: decryptWithSM4(this.$route.query.proId),
             bidId: decryptWithSM4(this.$route.query.bidId),
-            defaultMainTab: 'project',
+            activeMainTab: 'project',
             defaultSubTab: 'response',
             analysisData: {},
             tenderDocumentUrl: '',
@@ -329,6 +341,10 @@ export default {
                 this.bidDocumentKey = data.bidDocumentKey || ''
             }
         },
+        handleMainTabClick(tab) {
+            this.activeMainTab = tab.name
+            this.handleMainTabChange(tab.name, '')
+        },
         handleMainTabChange(mainTab, subTab) {
             console.log('主标签切换:', mainTab, subTab)
         },
@@ -349,26 +365,119 @@ export default {
     height: calc(100vh - 84px);
     display: flex;
     flex-direction: column;
-    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
+    background: linear-gradient(180deg, #F1F6FF 0%, #E5EFFF 100%);
     overflow: hidden;
 
+    // 一级标签页容器 - 占满整行
+    .main-tabs-container {
+        flex-shrink: 0;
+        background: #F5F7FA;
+        padding: 12px 20px;
+        border-bottom: 1px solid #EBEEF5;
+
+        ::v-deep .main-tabs {
+            .el-tabs__header {
+                margin: 0;
+                padding: 0;
+                border-bottom: none;
+                background: transparent;
+            }
+
+            .el-tabs__nav-wrap {
+                &::after {
+                    display: none;
+                }
+            }
+
+            .el-tabs__nav {
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 0;
+            }
+
+            .el-tabs__item {
+                height: 36px;
+                line-height: 36px;
+                padding: 0 20px;
+                font-size: 14px;
+                color: #606266;
+                background: #FFFFFF;
+                border: none;
+                border-radius: 0;
+                margin-right: 0;
+                position: relative;
+                transition: all 0.3s ease;
+                cursor: pointer;
+                box-shadow: none;
+
+                // 第一个标签左圆角
+                &:first-child {
+                    border-top-left-radius: 6px;
+                    border-bottom-left-radius: 6px;
+                }
+
+                // 最后一个标签右圆角
+                &:last-child {
+                    border-top-right-radius: 6px;
+                    border-bottom-right-radius: 6px;
+                }
+
+                // 激活状态：蓝色背景 + 白色文字
+                &.is-active {
+                    color: #FFFFFF;
+                    background: #1F72EA;
+                    font-weight: 500;
+                    z-index: 1;
+
+                    // 激活标签的左侧圆角（如果是第一个，已经有圆角了）
+                    &:not(:first-child) {
+                        border-top-left-radius: 6px;
+                        border-bottom-left-radius: 6px;
+                    }
+
+                    // 激活标签的右侧保持直边（除非是最后一个）
+                    &:not(:last-child) {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                }
+
+                // 非激活状态：白色背景 + 深色文字
+                &:not(.is-active) {
+                    background: #FFFFFF;
+                    color: #606266;
+
+                    &:hover {
+                        background: #F0F4FF;
+                        color: #1F72EA;
+                    }
+                }
+            }
+        }
+    }
+
     .main-content {
         flex: 1;
         display: flex;
         gap: 20px;
-        padding: 0 20px 20px 20px;
+        padding: 20px;
         overflow: hidden;
 
         .left-panel {
             flex: 0 0 50%;
             min-width: 0;
             height: 100%;
+            display: flex;
+            flex-direction: column;
         }
 
         .right-panel {
             flex: 0 0 50%;
             min-width: 0;
             height: 100%;
+            display: flex;
+            flex-direction: column;
         }
     }
 }
diff --git a/src/views/analysis/components/child/AnalysisResultPanel.vue b/src/views/analysis/components/child/AnalysisResultPanel.vue
index afe2ebe..fbf0dfb 100644
--- a/src/views/analysis/components/child/AnalysisResultPanel.vue
+++ b/src/views/analysis/components/child/AnalysisResultPanel.vue
@@ -5,8 +5,8 @@
             <h3>解析结果</h3>
         </div>
         <div class="panel-content">
-            <!-- 主标签页 -->
-            <el-tabs v-model="activeMainTab" @tab-click="handleMainTabClick" class="main-tabs">
+            <!-- 主标签页（可选，可通过hideMainTabs隐藏） -->
+            <el-tabs v-if="!hideMainTabs" v-model="activeMainTab" @tab-click="handleMainTabClick" class="main-tabs">
                 <el-tab-pane
                     v-for="tab in mainTabs"
                     :key="tab.name"
@@ -41,6 +41,40 @@
                     </div>
                 </el-tab-pane>
             </el-tabs>
+            <!-- 隐藏主标签页时，直接显示当前主标签的内容 -->
+            <template v-else>
+                <template v-for="tab in mainTabs">
+                    <template v-if="tab.name === activeMainTab">
+                        <!-- 子标签页 -->
+                        <el-tabs
+                            v-if="tab.subTabs && tab.subTabs.length > 0"
+                            v-model="activeSubTab"
+                            @tab-click="handleSubTabClick"
+                            class="sub-tabs"
+                            :key="`sub-tabs-${tab.name}`"
+                        >
+                            <el-tab-pane
+                                v-for="subTab in tab.subTabs"
+                                :key="subTab.name"
+                                :label="subTab.label"
+                                :name="subTab.name"
+                            >
+                                <div class="tab-content">
+                                    <slot :name="`${tab.name}-${subTab.name}`">
+                                        <div class="empty-content">{{ subTab.label }}内容</div>
+                                    </slot>
+                                </div>
+                            </el-tab-pane>
+                        </el-tabs>
+                        <!-- 没有子标签页的内容 -->
+                        <div v-else class="tab-content" :key="`content-${tab.name}`">
+                            <slot :name="tab.name">
+                                <div class="empty-content">{{ tab.label }}内容</div>
+                            </slot>
+                        </div>
+                    </template>
+                </template>
+            </template>
         </div>
     </div>
 </template>
@@ -126,6 +160,11 @@ export default {
         defaultSubTab: {
             type: String,
             default: ''
+        },
+        // 是否隐藏主标签页
+        hideMainTabs: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -138,6 +177,12 @@ export default {
         defaultMainTab(newVal) {
             this.activeMainTab = newVal
             this.activeSubTab = this.getDefaultSubTab(newVal)
+        },
+        hideMainTabs(newVal) {
+            if (newVal) {
+                // 当隐藏主标签时，确保子标签正确初始化
+                this.activeSubTab = this.getDefaultSubTab(this.defaultMainTab)
+            }
         }
     },
     methods: {