refactor(ccdiProject): 将下拉菜单项提升为顶层菜单项实现扁平化导航

ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="detail-query-container">
+    <div class="placeholder-content">
+      <i class="el-icon-document"></i>
+      <p>流水明细查询功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailQuery",
+  props: {
+    projectId: {
+      type: [String, Number],
+      default: null,
+    },
+    projectInfo: {
+      type: Object,
+      default: () => ({
+        projectName: "",
+        updateTime: "",
+        projectStatus: "0",
+      }),
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.detail-query-container {
+  padding: 40px 20px;
+  background: #fff;
+  min-height: 400px;
+}
+
+.placeholder-content {
+  text-align: center;
+  color: #909399;
+
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0;
+  }
+}
+</style>

ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="preliminary-check-container">
+    <div class="placeholder-content">
+      <i class="el-icon-data-analysis"></i>
+      <p>结果总览功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PreliminaryCheck",
+  props: {
+    projectId: {
+      type: [String, Number],
+      default: null,
+    },
+    projectInfo: {
+      type: Object,
+      default: () => ({
+        projectName: "",
+        updateTime: "",
+        projectStatus: "0",
+      }),
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.preliminary-check-container {
+  padding: 40px 20px;
+  background: #fff;
+  min-height: 400px;
+}
+
+.placeholder-content {
+  text-align: center;
+  color: #909399;
+
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0;
+  }
+}
+</style>

ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="special-check-container">
+    <div class="placeholder-content">
+      <i class="el-icon-search"></i>
+      <p>专项排查功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SpecialCheck",
+  props: {
+    projectId: {
+      type: [String, Number],
+      default: null,
+    },
+    projectInfo: {
+      type: Object,
+      default: () => ({
+        projectName: "",
+        updateTime: "",
+        projectStatus: "0",
+      }),
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.special-check-container {
+  padding: 40px 20px;
+  background: #fff;
+  min-height: 400px;
+}
+
+.placeholder-content {
+  text-align: center;
+  color: #909399;
+
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0;
+  }
+}
+</style>

ruoyi-ui/src/views/ccdiProject/detail.vue

@@ -25,38 +25,24 @@
         </div>
       </div>
       <div class="header-right">
-        <div class="action-buttons">
+        <el-menu
-          <el-button
+          :default-active="activeTab"
-            size="small"
+          mode="horizontal"
-            type="primary"
+          @select="handleMenuSelect"
-            icon="el-icon-upload2"
+          class="nav-menu"
-            @click="handleUploadData"
         >
-            上传数据
+          <el-menu-item index="upload">上传数据</el-menu-item>
-          </el-button>
+          <el-menu-item index="config">参数配置</el-menu-item>
-          <el-button
+          <el-menu-item index="overview">结果总览</el-menu-item>
-            size="small"
+          <el-menu-item index="special">专项排查</el-menu-item>
-            icon="el-icon-setting"
+          <el-menu-item index="detail">流水明细查询</el-menu-item>
-            @click="handleParamConfig"
+        </el-menu>
-          >
-            参数配置
-          </el-button>
-          <el-dropdown @command="handleCheckResultCommand" trigger="click">
-            <el-button size="small" icon="el-icon-document">
-              初核结果<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="overview">结果总览</el-dropdown-item>
-              <el-dropdown-item command="special">专项排查</el-dropdown-item>
-              <el-dropdown-item command="detail">流水明细查询</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
       </div>
     </div>
 
-    <!-- 数据上传页面 -->
+    <!-- 动态组件渲染区域 -->
-    <UploadData
+    <component
+      :is="currentComponent"
       :project-id="projectId"
       :project-info="projectInfo"
       @menu-change="handleMenuChange"
@@ -70,26 +56,26 @@
 
 <script>
 import UploadData from "./components/detail/UploadData";
-// import UploadParams from "./components/detail/UploadParams";
+import ParamConfig from "./components/detail/ParamConfig";
-// import ParamConfig from "./components/detail/ParamConfig";
+import PreliminaryCheck from "./components/detail/PreliminaryCheck";
-// import PreliminaryCheck from "./components/detail/PreliminaryCheck";
+import SpecialCheck from "./components/detail/SpecialCheck";
-// import SpecialCheck from "./components/detail/SpecialCheck";
+import DetailQuery from "./components/detail/DetailQuery";
-// import DetailQuery from './components/detail/DetailQuery'
 
 export default {
   name: "ProjectDetail",
   components: {
     UploadData,
-    // UploadParams,
+    ParamConfig,
-    // ParamConfig,
+    PreliminaryCheck,
-    // PreliminaryCheck,
+    SpecialCheck,
-    // SpecialCheck,
+    DetailQuery,
-    // DetailQuery,
   },
   data() {
     return {
-      // 当前标签页
+      // 当前激活的菜单项索引
-      activeTab: "data",
+      activeTab: "upload",
+      // 当前显示的组件名称
+      currentComponent: "UploadData",
       // 项目ID
       projectId: this.$route.params.projectId,
       // 项目信息
@@ -182,26 +168,27 @@ export default {
     handleBack() {
       this.$router.push("/ccdiProject");
     },
+    /** 菜单选择事件 */
+    handleMenuSelect(index) {
+      console.log("菜单选择:", index);
+      this.activeTab = index;
+
+      // 组件映射
+      const componentMap = {
+        upload: "UploadData",
+        config: "ParamConfig",
+        overview: "PreliminaryCheck",
+        special: "SpecialCheck",
+        detail: "DetailQuery",
+      };
+
+      this.currentComponent = componentMap[index] || "UploadData";
+    },
     /** UploadData 组件：菜单切换 */
     handleMenuChange({ key, route }) {
       console.log("切换到菜单:", key, route);
-      // 根据不同的菜单项跳转到不同的组件或页面
+      // 直接触发菜单选择
-      switch (route) {
+      this.handleMenuSelect(route);
-        case "config":
-          this.$message.info("参数配置功能开发中");
-          break;
-        case "overview":
-          this.$message.info("结果总览功能开发中");
-          break;
-        case "special":
-          this.$message.info("专项排查功能开发中");
-          break;
-        case "detail":
-          this.$message.info("流水明细查询功能开发中");
-          break;
-        default:
-          break;
-      }
     },
     /** UploadData 组件：数据上传完成 */
     handleDataUploaded({ type }) {
@@ -223,33 +210,6 @@ export default {
       console.log("拉取本行信息");
       this.$message.info("拉取本行信息功能开发中");
     },
-    /** 上传数据 (原方法，已由UploadData组件处理) */
-    handleUploadData() {
-      console.log("上传数据");
-      this.$message.info("上传数据功能已迁移至上传页面");
-    },
-    /** 参数配置 (原方法) */
-    handleParamConfig() {
-      console.log("参数配置");
-      this.$message.info("参数配置功能开发中");
-    },
-    /** 初核结果下拉菜单命令 */
-    handleCheckResultCommand(command) {
-      console.log("初核结果命令:", command);
-      switch (command) {
-        case "overview":
-          this.$message.info("结果总览功能开发中");
-          break;
-        case "special":
-          this.$message.info("专项排查功能开发中");
-          break;
-        case "detail":
-          this.$message.info("流水明细查询功能开发中");
-          break;
-        default:
-          break;
-      }
-    },
     /** 数据上传完成 */
     handleDataUploaded() {
       console.log("数据上传完成");
@@ -353,21 +313,51 @@ export default {
   }
 
   .header-right {
-    .action-buttons {
     display: flex;
     align-items: center;
-      gap: 12px;
 
-      .el-button {
+    .nav-menu {
-        padding: 8px 16px;
+      // 移除默认背景色和边框
+      background-color: transparent;
+      border-bottom: none;
+
+      // 菜单项基础样式
+      .el-menu-item,
+      .el-submenu__title {
         font-size: 14px;
+        color: #606266;
+        padding: 0 16px;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid transparent;
 
-        .el-icon--right {
+        &:hover {
-          margin-left: 4px;
+          background-color: #f5f7fa;
+          color: #303133;
         }
       }
 
-      .el-tag {
+      // 子菜单容器高度统一
+      .el-submenu {
+        height: 40px;
+        line-height: 40px;
+      }
+
+      // 激活状态：底部下划线 + 蓝色文字
+      .el-menu-item.is-active {
+        color: #1890ff;
+        border-bottom: 2px solid #1890ff;
+        background-color: transparent;
+      }
+
+      // 下拉菜单激活状态
+      .el-submenu.is-active > .el-submenu__title {
+        color: #1890ff;
+        border-bottom: 2px solid #1890ff;
+      }
+
+      // 下拉菜单图标
+      .el-submenu__icon-arrow {
         margin-left: 4px;
       }
     }
@@ -471,6 +461,25 @@ export default {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
+
+    .header-right {
+      width: 100%;
+      margin-top: 12px;
+
+      .nav-menu {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+
+        .el-menu-item,
+        .el-submenu {
+          flex: 1;
+          text-align: center;
+          padding: 0 8px;
+          font-size: 13px;
+        }
+      }
+    }
   }
 
   .info-content {
@@ -494,4 +503,22 @@ export default {
     }
   }
 }
+
+// 下拉菜单弹窗样式
+::v-deep .el-menu--popup {
+  min-width: 140px;
+
+  .el-menu-item {
+    font-size: 14px;
+
+    &:hover {
+      background-color: #f5f7fa;
+    }
+
+    &.is-active {
+      color: #1890ff;
+      background-color: #e6f7ff;
+    }
+  }
+}
 </style>