---
name: 修复Layout菜单操作失效
overview: 修复 Vue 2 到 Vue 3 迁移导致的 layout 菜单折叠/展开/关闭失效问题，根本原因是使用了 Vue 2 的 beforeDestroy 生命周期钩子，需要全部替换为 Vue 3 的 beforeUnmount
todos:
  - id: fix-resize-handler
    content: "修复 ResizeHandler.js: beforeDestroy → beforeUnmount"
    status: completed
  - id: fix-topnav
    content: "修复 TopNav/index.vue: beforeDestroy → beforeUnmount"
    status: completed
  - id: fix-screenfull
    content: "修复 Screenfull/index.vue: beforeDestroy → beforeUnmount"
    status: completed
  - id: fix-rightpanel
    content: "修复 RightPanel/index.vue: beforeDestroy → beforeUnmount"
    status: completed
  - id: fix-editor-countto
    content: "修复 Editor 和 CountTo 组件: beforeDestroy → beforeUnmount"
    status: completed
  - id: fix-chart-components
    content: "修复所有图表组件和 mixins: beforeDestroy → beforeUnmount"
    status: completed
  - id: verify-layout
    content: 验证侧边栏、顶部菜单、全屏、右侧面板功能
    status: completed
isProject: false
---

# 修复 Layout 菜单操作失效问题

## 问题根源

Vue 3 中，生命周期钩子名称发生了变化：

- `beforeDestroy` → `beforeUnmount`
- `destroyed` → `unmounted`

当前项目使用了 `@vue/compat` (Vue 3 兼容模式)，但这些组件仍在使用 Vue 2 的生命周期钩子。这导致组件销毁时的清理代码（移除事件监听器）没有执行，从而导致：

1. **侧边栏折叠/展开失效** - `[ResizeHandler.js](mom-backend-ui/src/layout/mixin/ResizeHandler.js)` 中的 resize 监听器没有正确清理
2. **顶部菜单操作失效** - `[TopNav/index.vue](mom-backend-ui/src/components/TopNav/index.vue)` 中的 resize 监听器问题
3. **右侧面板关闭失效** - `[RightPanel/index.vue](mom-backend-ui/src/components/RightPanel/index.vue)` 中的 click 监听器问题
4. **全屏功能失效** - `[Screenfull/index.vue](mom-backend-ui/src/components/Screenfull/index.vue)` 中的监听器问题

## 影响范围

共 13 个文件使用了 `beforeDestroy`：

### 核心 Layout 相关（优先级 P0）

1. `[src/layout/mixin/ResizeHandler.js](mom-backend-ui/src/layout/mixin/ResizeHandler.js)` - 控制侧边栏响应式
2. `[src/components/TopNav/index.vue](mom-backend-ui/src/components/TopNav/index.vue)` - 顶部菜单
3. `[src/components/Screenfull/index.vue](mom-backend-ui/src/components/Screenfull/index.vue)` - 全屏功能
4. `[src/components/RightPanel/index.vue](mom-backend-ui/src/components/RightPanel/index.vue)` - 右侧面板

### 其他组件（优先级 P1）

1. `[src/components/Editor/index.vue](mom-backend-ui/src/components/Editor/index.vue)` - 富文本编辑器
2. `[src/components/CountTo/index.vue](mom-backend-ui/src/components/CountTo/index.vue)` - 数字动画

### 图表组件（优先级 P2）

1. `src/views/dashboard/BarChart.vue`
2. `src/views/dashboard/LineChart.vue`
3. `src/views/dashboard/PieChart.vue`
4. `src/views/dashboard/RaddarChart.vue`
5. `src/views/mes/report/chart/chart.vue`
6. `src/views/mes/report/chart/mixins/resize.js`
7. `src/views/dashboard/mixins/resize.js`

## 修复方案

### 方案：批量替换生命周期钩子

所有文件中的 `beforeDestroy` 直接替换为 `beforeUnmount`。

### 具体修改

#### 1. ResizeHandler Mixin

**文件**: `[src/layout/mixin/ResizeHandler.js](mom-backend-ui/src/layout/mixin/ResizeHandler.js)`

**第 17-19 行**:

```javascript
// 修复前
beforeDestroy() {
  window.removeEventListener('resize', this.$_resizeHandler)
},

// 修复后
beforeUnmount() {
  window.removeEventListener('resize', this.$_resizeHandler)
},
```

**影响**: 修复侧边栏折叠/展开功能

---

#### 2. TopNav 组件

**文件**: `[src/components/TopNav/index.vue](mom-backend-ui/src/components/TopNav/index.vue)`

**第 107-109 行**:

```javascript
// 修复前
beforeDestroy() {
  window.removeEventListener('resize', this.setVisibleNumber)
},

// 修复后
beforeUnmount() {
  window.removeEventListener('resize', this.setVisibleNumber)
},
```

**影响**: 修复顶部菜单响应式

---

#### 3. Screenfull 组件

**文件**: `[src/components/Screenfull/index.vue](mom-backend-ui/src/components/Screenfull/index.vue)`

**第 20-22 行**:

```javascript
// 修复前
beforeDestroy() {
  this.destroy()
},

// 修复后
beforeUnmount() {
  this.destroy()
},
```

**影响**: 修复全屏功能

---

#### 4. RightPanel 组件

**文件**: `[src/components/RightPanel/index.vue](mom-backend-ui/src/components/RightPanel/index.vue)`

**第 59-62 行**:

```javascript
// 修复前
beforeDestroy() {
  const elx = this.$refs.rightPanel
  elx.remove()
},

// 修复后
beforeUnmount() {
  const elx = this.$refs.rightPanel
  elx.remove()
},
```

**影响**: 修复右侧面板关闭功能

---

#### 5-6. Editor 和 CountTo 组件

**文件**: 

- `src/components/Editor/index.vue`
- `src/components/CountTo/index.vue`

**修改**: `beforeDestroy` → `beforeUnmount`

---

#### 7-13. 图表组件和 Mixins

**文件**:

- `src/views/dashboard/BarChart.vue`
- `src/views/dashboard/LineChart.vue`
- `src/views/dashboard/PieChart.vue`
- `src/views/dashboard/RaddarChart.vue`
- `src/views/mes/report/chart/chart.vue`
- `src/views/mes/report/chart/mixins/resize.js`
- `src/views/dashboard/mixins/resize.js`

**修改**: `beforeDestroy` → `beforeUnmount`

**影响**: 修复图表组件的内存泄漏问题

## 验证方法

### 测试 1: 侧边栏折叠/展开

1. 打开系统
2. 点击左上角的 hamburger 图标（三条横线）
3. 验证侧边栏正常折叠/展开
4. 调整浏览器窗口大小
5. 验证侧边栏在移动端自动收起

**预期结果**: 所有操作正常响应

---

### 测试 2: 顶部菜单

1. 启用顶部菜单模式（在布局设置中）
2. 点击顶部菜单项
3. 验证菜单切换正常
4. 调整浏览器窗口大小
5. 验证菜单项自动折叠到"更多菜单"

**预期结果**: 菜单操作正常

---

### 测试 3: 全屏功能

1. 点击顶部工具栏的全屏图标
2. 验证进入全屏
3. 再次点击退出全屏
4. 验证图标状态正确切换

**预期结果**: 全屏功能正常

---

### 测试 4: 右侧面板

1. 点击顶部的"布局设置"
2. 验证右侧面板打开
3. 点击面板外部区域
4. 验证面板自动关闭

**预期结果**: 面板开关正常

---

### 测试 5: 控制台检查

打开浏览器控制台，执行以下检查：

1. 切换不同页面
2. 确认没有 "beforeDestroy is deprecated" 警告
3. 确认没有内存泄漏警告
4. 确认事件监听器正确添加和移除

## Vue 3 生命周期对照表


| Vue 2           | Vue 3           | 说明       |
| --------------- | --------------- | -------- |
| `beforeCreate`  | `beforeCreate`  | 无变化      |
| `created`       | `created`       | 无变化      |
| `beforeMount`   | `beforeMount`   | 无变化      |
| `mounted`       | `mounted`       | 无变化      |
| `beforeUpdate`  | `beforeUpdate`  | 无变化      |
| `updated`       | `updated`       | 无变化      |
| `beforeDestroy` | `beforeUnmount` | **已重命名** |
| `destroyed`     | `unmounted`     | **已重命名** |
| `activated`     | `activated`     | 无变化      |
| `deactivated`   | `deactivated`   | 无变化      |
| `errorCaptured` | `errorCaptured` | 无变化      |


## 技术要点

### 为什么需要修复

1. **事件监听器泄漏**: `beforeDestroy` 未执行导致 `removeEventListener` 没有调用
2. **内存泄漏**: 未清理的监听器持续占用内存
3. **功能失效**: 新的事件监听器无法正常工作
4. **Vue 3 兼容性**: `@vue/compat` 不完全支持 Vue 2 语法

### 影响分析

```mermaid
graph TD
    A[组件挂载] --> B[添加事件监听器]
    B --> C[组件使用中]
    C --> D[组件卸载]
    D --> E{生命周期钩子}
    E -->|Vue 2: beforeDestroy| F[执行清理代码]
    E -->|Vue 3: beforeUnmount| F
    E -->|使用错误钩子| G[清理代码未执行]
    G --> H[监听器未移除]
    H --> I[功能失效]
    H --> J[内存泄漏]
    F --> K[监听器正确移除]
    K --> L[功能正常]
```



## 修复优先级

### P0 - 立即修复（影响核心功能）

- ResizeHandler.js
- TopNav/index.vue
- Screenfull/index.vue
- RightPanel/index.vue

### P1 - 高优先级（影响用户体验）

- Editor/index.vue
- CountTo/index.vue

### P2 - 中优先级（影响特定页面）

- 所有图表组件和 mixins

## 预期效果

修复后：

- ✅ 侧边栏折叠/展开正常工作
- ✅ 顶部菜单响应式正常
- ✅ 全屏功能正常
- ✅ 右侧面板开关正常
- ✅ 无内存泄漏
- ✅ 无控制台警告

## 后续建议

1. **全局搜索其他 Vue 2 语法**:
  ```bash
   grep -r "beforeDestroy\|destroyed\|\$listeners\|\$on\|\$off" --include="*.vue" --include="*.js"
  ```
2. **考虑完全迁移到 Vue 3**:
  - 移除 `@vue/compat` 依赖
  - 使用纯 Vue 3 API
  - 更新所有组件库到最新版本
3. **添加 ESLint 规则**:
  检测和阻止使用已弃用的 Vue 2 API