# CollapseNavigation 组件使用指南

## 功能说明

这是一个基于 Element Plus `el-collapse` 的粘性导航组件，可以自动为折叠面板生成右侧导航，支持：

- 自动获取所有折叠面板项
- 点击导航快速定位到对应面板
- 滚动时自动高亮当前可见的面板
- 粘性定位，始终可见
- 响应式设计

## 快速使用

### 1. 基础用法

```vue
<template>
  <div class="page-container">
    <div class="content-wrapper">
      <!-- 主内容区 -->
      <div class="main-content">
        <el-collapse v-model="activeCollapse" v-collapse-nav="navigationItems">
          <el-collapse-item title="项目基本信息" name="项目基本信息">
            <!-- 内容 -->
          </el-collapse-item>
          <el-collapse-item title="投资信息" name="投资信息">
            <!-- 内容 -->
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 右侧导航 -->
      <div class="nav-wrapper">
        <CollapseNavigation
          :nav-items="navigationItems"
          :active-item="activeCollapse"
          @nav-click="handleNavClick"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CollapseNavigation from "@/components/CollapseNavigation/index.vue";

const activeCollapse = ref(["项目基本信息"]);
const navigationItems = ref([]); // 由指令自动填充

const handleNavClick = (item) => {
  // 点击导航时自动展开对应面板
  if (!activeCollapse.value.includes(item.name)) {
    activeCollapse.value.push(item.name);
  }
};
</script>

<style scoped>
.content-wrapper {
  display: flex;
  gap: 20px;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.nav-wrapper {
  flex-shrink: 0;
  width: 200px;
}
</style>
```

## 组件 Props

| 参数            | 说明           | 类型         | 默认值      |
| --------------- | -------------- | ------------ | ----------- |
| navItems        | 导航项列表     | Array        | []          |
| activeItem      | 当前激活的项   | String/Array | ''          |
| width           | 导航宽度       | String       | '200px'     |
| title           | 导航标题       | String       | '快速导航'  |
| scrollContainer | 滚动容器选择器 | String       | '' (window) |
| offset          | 滚动偏移量     | Number       | 0           |

## 组件事件

| 事件名            | 说明             | 参数             |
| ----------------- | ---------------- | ---------------- |
| navClick          | 导航项被点击     | item: 导航项对象 |
| update:activeItem | 激活项变化时触发 | name: 导航项名称 |

## 自定义指令

### v-collapse-nav

自动获取 `el-collapse` 的所有子项并生成导航数据。

**用法：**

```vue
<el-collapse v-collapse-nav="navigationItems">
  <!-- 折叠面板项 -->
</el-collapse>
```

**参数：**

- `navigationItems`: 响应式数组，用于接收生成的导航数据

## 高级配置

### 自定义滚动容器

如果页面有自定义滚动容器，可以指定容器选择器：

```vue
<CollapseNavigation
  :nav-items="navigationItems"
  :active-item="activeCollapse"
  scroll-container=".custom-scroll-container"
/>
```

### 调整偏移量

如果页面有固定头部，可以设置偏移量：

```vue
<CollapseNavigation
  :nav-items="navigationItems"
  :active-item="activeCollapse"
  :offset="80"
/>
```

### 自定义导航标题

```vue
<CollapseNavigation
  :nav-items="navigationItems"
  :active-item="activeCollapse"
  title="目录导航"
/>
```

## 样式定制

组件使用了 less，你可以通过全局样式覆盖来定制外观：

```less
// 修改导航项悬停背景色
.collapse-navigation .nav-item:hover {
  background: #f0f0f0;
}

// 修改激活项颜色
.collapse-navigation .nav-item.active {
  color: #custom-color;
}
```

## 注意事项

1. 确保 `el-collapse-item` 有唯一的 `name` 属性
2. 导航组件需要粘性定位的父容器
3. 如果内容是动态加载的，指令会自动更新导航项
4. 建议配合 `activeCollapse` 使用，点击导航时自动展开对应面板

## 完整示例

参考文件：`src/views/everydayPage/annualAdd.vue`
