组件修改

src/views/investingManage/addControl.vue

@@ -3,10 +3,13 @@
     <div class="add-project-content" v-loading="loading">
       <routerBack />
       <div class="tabs-content">
-        <div class="project-tab-content">
+        <div class="project-tab-content-wrapper">
           <div class="tab-content">
             <el-form :model="formData" :label-width="80" :disabled="isPreview">
-              <el-collapse v-model="activeCollapse">
+              <el-collapse
+                v-model="activeCollapse"
+                v-collapse-nav="navigationItems"
+              >
                 <el-collapse-item title="项目信息" name="项目信息">
                   <el-row :gutter="20">
                     <el-col :span="12">
@@ -979,6 +982,15 @@
               </el-collapse>
             </el-form>
           </div>
+          <div class="navigation-wrapper">
+            <CollapseNavigation
+              :nav-items="navigationItems"
+              :active-item="activeCollapse"
+              title="目录导航"
+              width="auto"
+              @nav-click="handleNavClick"
+            />
+          </div>
         </div>
       </div>
       <div class="add-project-header">
@@ -994,11 +1006,12 @@
   </div>
 </template>
 <script setup>
-import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import FileUploader from "@/components/FileUploader/index.vue";
 import routerBack from "@/components/common/routerBack.vue";
+import CollapseNavigation from "@/components/CollapseNavigation/index.vue";
 
 import { useUserStore } from "@/stores/user.js";
 const userStore = useUserStore();
@@ -1016,6 +1029,60 @@ const activeCollapse = reactive([
   "其他建设目标重大偏差",
   "投资收益",
 ]);
+
+// ========== 导航配置（由 v-collapse-nav 指令自动生成） ==========
+const navigationItems = ref([]);
+
+// 导航点击处理
+const handleNavClick = (item) => {
+  console.log("Navigation clicked:", item);
+
+  // 点击导航时自动展开对应的折叠面板
+  if (!activeCollapse.includes(item.name)) {
+    activeCollapse.push(item.name);
+  }
+
+  // 等待 DOM 更新后滚动
+  nextTick(() => {
+    setTimeout(() => {
+      const targetId = `collapse-${item.name}`;
+      const targetElement = document.getElementById(targetId);
+
+      console.log("Scrolling to element:", {
+        targetId,
+        found: !!targetElement,
+        element: targetElement,
+      });
+
+      if (targetElement) {
+        // 使用 scrollIntoView 获得更平滑的效果
+        targetElement.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          inline: "nearest",
+        });
+
+        // 可选：添加额外的偏移量调整
+        setTimeout(() => {
+          const elementPosition = targetElement.getBoundingClientRect().top;
+          if (elementPosition < 80) {
+            // 如果距离顶部太近，向上滚动一点
+            window.scrollBy({
+              top: elementPosition - 80,
+              behavior: "smooth",
+            });
+          }
+        }, 300);
+      } else {
+        console.error("Element not found:", targetId);
+        console.log(
+          "Available collapse elements:",
+          document.querySelectorAll('[id^="collapse-"]'),
+        );
+      }
+    }, 300); // 增加延迟确保动画完成
+  });
+};
 let formData = reactive({});
 let loading = ref(false);
 
@@ -1572,6 +1639,24 @@ const saveClick = () => {
 </script>
 
 <style lang="less">
+// 布局容器
+.project-tab-content-wrapper {
+  display: flex;
+  gap: 20px;
+  position: relative;
+}
+
+.tab-content {
+  flex: 1;
+  min-width: 0; // 防止flex子项溢出
+}
+
+.navigation-wrapper {
+  flex-shrink: 0;
+  width: auto;
+  padding-left: 10px;
+}
+
 .fileCla {
   .el-form-item {
     display: block !important;

src/views/projectManage/addProject.vue

@@ -6060,6 +6060,20 @@ userInfo.roles.map((item) => {
   }
 });
 
+const navigationItems1 = ref([]);
+const navigationItems2 = ref([]);
+const navigationItems3 = ref([]);
+const navigationItems4 = ref([]);
+const navigationItems5 = ref([]);
+const navigationItems6 = ref([]);
+
+const activeCollapse1 = ref([]);
+const activeCollapse2 = ref([]);
+const activeCollapse3 = ref([]);
+const activeCollapse4 = ref([]);
+const activeCollapse5 = ref([]);
+const activeCollapse6 = ref([]);
+
 // tab相关
 const pageActiveName = ref("立项填报");
 const lxTabActiveName = ref("基本信息");
@@ -7813,4 +7827,32 @@ const submitAudit = () => {
 };
 </script>
 
-<style lang="less"></style>
+<!-- <style scoped lang="less">
+.collapse-navigation {
+  position: fixed;
+  top: 228px;
+  right: 36px;
+}
+
+.project-tab-content {
+  margin-right: 230px;
+}
+// 布局容器
+.tabBody {
+  display: flex;
+  gap: 20px;
+  position: relative;
+}
+
+.navigation-wrapper {
+  flex-shrink: 0;
+  width: auto;
+  padding-left: 10px;
+  .nav-list {
+    width: 215px;
+  }
+}
+.tab-content {
+  width: 100%;
+}
+</style> -->