# 问题记录

## 问题记录格式
使用双链形式连接步骤文档，例如：[[第一阶段-基础架构搭建]]

## 问题文档索引
- [[第一阶段-基础架构搭建]] - 第一阶段问题记录（见下方问题列表）
- [[第二阶段-代码整合到RuoYi]] - 第二阶段问题记录：[[第二阶段-问题]]

## 问题列表

### 问题1
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：编译错误 - lombok和Spring包找不到
- **发生时间**：2025-11-10
- **错误信息**：
  - `java: 程序包lombok不存在`
  - `java: 找不到符号 符号: 类 Data`
  - `java: 程序包org.springframework.web.bind.annotation不存在`
- **问题原因**：
  1. pom.xml中第18行有错误标签`<n>`，应该是`<name>`
  2. Maven无法正确解析pom.xml，导致依赖无法下载
  3. IDE没有识别为Maven项目
- **解决方案**：
  1. 修复pom.xml中的错误标签（删除错误的`<n>`标签）
  2. 在IDE中重新加载Maven项目
  3. 安装Lombok插件（IntelliJ IDEA）
  4. 启用注解处理
  5. 重新构建项目
- **状态**：已解决

### 问题2
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：泛型类型推断错误 - Result<Void>类型不兼容
- **发生时间**：2025-11-10
- **错误信息**：
  - `java: 不兼容的类型: 推论变量T具有不兼容的限制范围`
  - `等式约束条件: java.lang.Void`
  - `下限: java.lang.String`
- **问题原因**：
  1. 当返回类型是`Result<Void>`时，调用`Result.success("消息")`会导致类型推断冲突
  2. `success(String message, T data)`方法期望第二个参数是T类型，但传入String时与Void冲突
- **解决方案**：
  1. 在Result类中添加`success(String message)`方法，专门用于返回无数据的成功响应
  2. 该方法只接受消息参数，data为null，避免类型推断冲突
- **状态**：已解决

### 问题3
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：Vue管理后台npm依赖冲突 - @vitejs/plugin-vue版本不兼容
- **发生时间**：2025-11-10
- **错误信息**：
  - `npm error ERESOLVE unable to resolve dependency tree`
  - `peer vite@"^3.0.0" from @vitejs/plugin-vue@3.2.0`
  - `Found: vite@4.5.14`
- **问题原因**：
  1. 项目使用vite@^4.0.0，但@vitejs/plugin-vue@^3.0.0只支持vite@^3.0.0
  2. 版本不匹配导致依赖冲突
- **解决方案**：
  1. 将@vitejs/plugin-vue从^3.0.0升级到^4.0.0，以兼容vite 4.x
  2. 添加@element-plus/icons-vue依赖
  3. 修复vite.config.js中的路径解析（使用ES模块方式）
  4. 修复layout中的图标导入
- **状态**：已解决

### 问题4
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp项目npm依赖冲突 - Vue版本不兼容
- **发生时间**：2025-11-10
- **错误信息**：
  - `npm error ERESOLVE unable to resolve dependency tree`
  - `peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.2`
  - `Found: vue@3.5.24`
- **问题原因**：
  1. 项目使用Vue 3，但@dcloudio/uni-app的某些版本依赖@vue/composition-api
  2. @vue/composition-api只支持Vue 2.x，与Vue 3不兼容
  3. 使用了"latest"标签导致安装了不兼容的版本
- **解决方案**：
  1. 指定UniApp相关依赖的具体版本，使用支持Vue 3的版本
  2. 使用@dcloudio/vite-plugin-uni和相关包的alpha版本（支持Vue 3）
  3. 固定Vue版本为3.2.47（稳定版本）
  4. 如果仍有问题，可以使用`npm install --legacy-peer-deps`
- **状态**：已解决

### 问题5
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp项目npm依赖冲突 - Vite版本不兼容
- **发生时间**：2025-11-10
- **错误信息**：
  - `npm error ERESOLVE unable to resolve dependency tree`
  - `peer vite@"5.2.8" from @dcloudio/vite-plugin-uni@3.0.0-alpha-4080420251023001`
  - `Found: vite@4.5.14`
- **问题原因**：
  1. @dcloudio/vite-plugin-uni的alpha版本需要vite@5.2.8
  2. 项目配置的vite版本为^4.5.0，版本不匹配
- **解决方案**：
  1. 将vite版本从^4.5.0升级到^5.2.8，以匹配@dcloudio/vite-plugin-uni的要求
  2. 如果仍有问题，可以使用`npm install --legacy-peer-deps`
- **状态**：已解决

### 问题6
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp项目运行错误 - 找不到manifest.json文件
- **发生时间**：2025-11-10
- **错误信息**：
  - `Error: ENOENT: no such file or directory, open 'D:\0_Project\02_Study\frontend-uniapp\src\manifest.json'`
- **问题原因**：
  1. UniApp CLI工具要求所有源文件必须在`src`目录下
  2. 项目创建时文件放在了根目录，不符合UniApp的项目结构要求
- **解决方案**：
  1. 创建`src`目录
  2. 将`manifest.json`、`pages.json`、`App.vue`、`main.js`移动到`src`目录
  3. 将`pages`、`store`、`utils`等目录移动到`src`目录
  4. 保持项目结构符合UniApp标准
- **状态**：已解决

### 问题7
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5开发服务器启动后浏览器无法访问
- **发生时间**：2025-11-10
- **错误信息**：
  - Vite dev server运行在`http://localhost:5173/`，但浏览器无法访问
  - 警告：`Could not auto-determine entry point from rollupOptions or html files`
- **问题原因**：
  1. 缺少`vite.config.js`配置文件，导致无法正确确定入口点
  2. `manifest.json`中的`devServer`端口配置与Vite默认端口不一致
  3. 缺少路径别名配置，导致`@`别名无法解析
- **解决方案**：
  1. 创建`vite.config.js`文件，配置入口点、路径别名、服务器设置
  2. 更新`manifest.json`中的`devServer`配置，端口改为5173，添加`host: "0.0.0.0"`和`open: true`
  3. 配置`optimizeDeps.include`以解决依赖预构建警告（只包含第三方库，不包含vue、vuex）
  4. 配置路径别名`@`指向`src`目录
- **状态**：已解决

### 问题8
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5开发服务器启动错误 - entry point cannot be marked as external
- **发生时间**：2025-11-10
- **错误信息**：
  - `The entry point "vue" cannot be marked as external`
  - `The entry point "vuex" cannot be marked as external`
- **问题原因**：
  1. 在`vite.config.js`的`optimizeDeps.include`中包含了`vue`和`vuex`
  2. UniApp的vite插件会将`vue`和`vuex`标记为external，不能同时包含在`optimizeDeps.include`中
  3. 这会导致构建冲突
- **解决方案**：
  1. 从`optimizeDeps.include`中移除`vue`和`vuex`
  2. 只保留第三方UI库（如`uview-ui`）在`optimizeDeps.include`中
  3. 让UniApp插件自动处理核心依赖的优化
- **状态**：已解决

### 问题9
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5开发服务器启动后访问根路径出现404错误
- **发生时间**：2025-11-10
- **错误信息**：
  - `找不到此 localhost 页面找不到 Web 地址对应的网页: http://localhost:5173/`
  - `HTTP ERROR 404`
- **问题原因**：
  1. 缺少`index.html`入口文件，Vite需要HTML文件作为入口
  2. `vite.config.js`中proxy target配置有多余空格
  3. `host: '0.0.0.0'`可能导致某些环境下的访问问题
  4. UniApp的vite插件可能没有自动生成入口HTML文件
- **解决方案**：
  1. 在项目根目录创建`index.html`文件，指向`/src/main.js`
  2. 修复`vite.config.js`中proxy target的空格问题
  3. 将`host`从`'0.0.0.0'`改为`'localhost'`（如果需要外部访问，可以改回）
  4. 简化`vite.config.js`配置，移除不必要的build配置
  5. 重新启动开发服务器
- **状态**：已解决

### 问题10
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5开发服务器编译错误 - 缺少sass预处理器
- **发生时间**：2025-11-10
- **错误信息**：
  - `[plugin:vite:css] Preprocessor dependency "sass" not found. Did you install it?`
  - `Try npm install -D sass`
- **问题原因**：
  1. `App.vue`中使用了`<style lang="scss">`，需要sass预处理器
  2. 项目依赖中没有安装`sass`包
  3. uView UI的样式文件也是scss格式，需要sass编译
- **解决方案**：
  1. 运行`npm install -D sass`安装sass预处理器
  2. 将sass添加到`package.json`的`devDependencies`中
  3. 重新启动开发服务器
- **状态**：已解决

### 问题11
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5开发服务器编译错误 - uView UI SCSS变量未定义
- **发生时间**：2025-11-10
- **错误信息**：
  - `[sass] Undefined variable: $u-border-color`
  - `node_modules\uview-ui\libs\css\common.scss 38:16`
- **问题原因**：
  1. uView UI的变量定义在`theme.scss`文件中
  2. 在导入`index.scss`之前没有先导入`theme.scss`
  3. 导致`common.scss`中使用的变量（如`$u-border-color`）未定义
- **解决方案**：
  1. 在`App.vue`的`<style>`标签中，先导入`uview-ui/theme.scss`
  2. 然后再导入`uview-ui/index.scss`
  3. 确保变量在使用前已经定义
- **状态**：已解决（后续替换为uView Plus）

### 问题12
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5运行时错误 - Vue.filter is not a function
- **发生时间**：2025-11-10
- **错误信息**：
  - `Uncaught TypeError: Vue.filter is not a function`
  - `at Object.install (index.js:65:9)`
- **问题原因**：
  1. 项目使用Vue 3，但uView UI 2.x是为Vue 2设计的
  2. Vue 3移除了`Vue.filter` API，而uView UI使用了这个API
  3. uView UI 2.x与Vue 3不兼容
- **解决方案**：
  1. 卸载`uview-ui`（Vue 2版本）
  2. 安装`uview-plus`（Vue 3版本）
  3. 更新`main.js`中的导入：`import uviewPlus from 'uview-plus'`
  4. 更新`App.vue`中的样式导入：先导入`uview-plus/theme.scss`，再导入`uview-plus/index.scss`
  5. 更新`pages.json`中的easycom配置：`uview-plus/components/u-$1/u-$1.vue`
- **状态**：已解决

### 问题13
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5编译错误 - uView Plus SCSS变量未定义
- **发生时间**：2025-11-10
- **错误信息**：
  - `[sass] Undefined variable: $u-border-color`
  - `node_modules\uview-plus\libs\css\common.scss 40:16`
- **问题原因**：
  1. uView Plus的变量定义在`theme.scss`文件中
  2. 在导入`index.scss`之前没有先导入`theme.scss`
  3. 导致`common.scss`中使用的变量（如`$u-border-color`）未定义
- **解决方案**：
  1. 在`App.vue`的`<style>`标签中，先导入`uview-plus/theme.scss`
  2. 然后再导入`uview-plus/index.scss`
  3. 确保变量在使用前已经定义
- **状态**：已解决

### 问题14
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5编译错误 - 无法解析uview-ui组件导入
- **发生时间**：2025-11-10
- **错误信息**：
  - `Failed to resolve import "uview-ui/components/u-input/u-input.vue"`
  - `from "src/pages/login/login.vue"`
- **问题原因**：
  1. 项目已从`uview-ui`迁移到`uview-plus`
  2. Vite缓存中仍然保存了旧的`uview-ui`路径引用
  3. 即使`pages.json`已更新，缓存仍在使用旧配置
- **解决方案**：
  1. 清除Vite缓存：删除`node_modules/.vite`目录
  2. 重启开发服务器
  3. 确保`pages.json`中的easycom配置指向`uview-plus`
- **状态**：已解决

### 问题15
- **关联步骤**：[[第一阶段-基础架构搭建]]
- **问题描述**：UniApp H5编译错误 - uView Plus组件样式变量未定义
- **发生时间**：2025-11-10
- **错误信息**：
  - `[sass] Undefined variable: $u-info`
  - `node_modules\uview-plus\components\u-button\vue.scss 12:37`
- **问题原因**：
  1. uView Plus的组件样式文件（如`u-button/vue.scss`）中使用了主题变量
  2. 这些变量只在`App.vue`中导入，组件的样式文件无法访问到
  3. 每个组件的样式文件都需要访问主题变量，但无法共享`App.vue`中的导入
- **解决方案**：
  1. 在`vite.config.js`的`css.preprocessorOptions.scss`中添加`additionalData`
  2. 配置为自动在每个SCSS文件前导入`uview-plus/theme.scss`
  3. 这样所有SCSS文件（包括组件样式）都能访问到主题变量
- **状态**：已解决

### 问题16
- **关联步骤**：[[第一阶段-功能实现记录]]
- **问题描述**：管理后台ECharts集成时图标组件未导入
- **发生时间**：2025-11-10
- **错误信息**：
  - 控制台报错：`Uncaught (in promise) Error: Component "TrendCharts" is not defined`
- **问题原因**：
  1. 在侧边栏菜单中使用了`TrendCharts`图标组件
  2. 但忘记在layout文件中导入和注册该组件
  3. 导致Vue无法识别该组件
- **解决方案**：
  1. 在`layout/Index.vue`中导入`TrendCharts`组件：`import { TrendCharts } from '@element-plus/icons-vue'`
  2. 在components选项中注册该组件
  3. 确保所有使用的图标组件都正确导入
- **状态**：已解决

### 问题17
- **关联步骤**：[[第一阶段-功能实现记录]]
- **问题描述**：WebSocket连接被Spring Security拦截
- **发生时间**：2025-11-10
- **错误信息**：
  - WebSocket连接请求返回403 Forbidden
  - 控制台报错：`WebSocket connection to 'ws://localhost:8080/ws/monitor/123' failed: HTTP Authentication failed; no valid credentials available`
- **问题原因**：
  1. Spring Security默认拦截所有请求，包括WebSocket连接
  2. 未为WebSocket路径配置免认证访问
  3. WebSocket连接无法通过认证
- **解决方案**：
  1. 在`SecurityConfig.java`中添加WebSocket路径的免认证配置
  2. 添加配置：`.antMatchers("/ws/**").permitAll()`
  3. 允许所有WebSocket连接请求通过
- **状态**：已解决

### 问题18
- **关联步骤**：[[第一阶段-功能实现记录]]
- **问题描述**：UniApp横屏配置不生效
- **发生时间**：2025-11-10
- **错误信息**：
  - 应用始终保持竖屏显示，无法切换到横屏
  - 控制台没有明显错误
- **问题原因**：
  1. 只配置了`manifest.json`中的横屏支持，但缺少`pages.json`中的页面级配置
  2. 需要在页面级别明确指定支持的屏幕方向
  3. 缺少屏幕方向的监听和控制逻辑
- **解决方案**：
  1. 在`pages.json`的`globalStyle.app-plus`中添加横屏配置
  2. 在需要横屏的具体页面（如课程详情页）的`style.app-plus`中添加横屏配置
  3. 创建`orientation.js`工具类，实现屏幕方向监听和控制
  4. 在课程详情页中集成方向监听逻辑
- **状态**：已解决

### 问题19
- **关联步骤**：[[第一阶段-功能实现记录]]
- **问题描述**：管理后台统计分析页面点击没有反应
- **发生时间**：2025-11-10
- **错误信息**：
  - 控制台报错：`Uncaught (in promise) ReferenceError: ref is not defined`
  - 页面空白或无法渲染
- **问题原因**：
  1. `ECharts.vue`组件中使用了`ref`函数
  2. 但忘记从Vue中导入`ref`
  3. 导致组件初始化失败，从而使统计分析页面无法显示
- **解决方案**：
  1. 在`ECharts.vue`中添加`ref`的导入：`import { computed, watch, onMounted, ref } from 'vue';`
  2. 确保所有使用的Vue API都正确导入
- **状态**：已解决