# ruoyi-screen

Vue 3 + Vite + **ECharts** 大屏前端子项目（与 `ruoyi-ui` 独立）。

**规范说明**：`doc/可视化大屏.md`  
**Cursor 规则**：仓库根目录 `.cursor/rules/ruoyi-screen.mdc`（编辑本目录下文件时会自动带上约束）

**注意：本仓库根目录 `huimv-baqing` 下没有 `package.json`，必须在进入 `ruoyi-screen` 后再执行 npm 命令。** 若在根目录运行 `npm run dev`，会报错 `ENOENT: no such file or directory, open '.../package.json'`。

## 环境

- **Node.js ≥ 16.14** 即可（当前使用 **Vite 4**，避免在 Node 16 上出现 `crypto.getRandomValues is not a function`；Vite 5 需 Node ≥ 18）。
- 若已升级 **Node ≥ 18**，可自行把 `package.json` 里 `vite`、`@vitejs/plugin-vue` 升到 5.x。

## 命令

```bash
cd ruoyi-screen
npm install
npm run dev
```

浏览器访问终端里打印的本地地址（一般为 `http://localhost:5173`）。

```bash
npm run build
npm run preview
```

## ECharts 用法

封装组件：`src/components/ScreenChart.vue`  
传入 `option`（与 [ECharts option](https://echarts.apache.org/zh/option.html) 一致），组件负责 `init` / `resize` / `dispose`。

按需可改为：

```js
import * as echarts from "echarts/core"
import { BarChart } from "echarts/charts"
import { GridComponent, TooltipComponent, TitleComponent } from "echarts/components"
import { CanvasRenderer } from "echarts/renderers"
echarts.use([BarChart, GridComponent, TooltipComponent, TitleComponent, CanvasRenderer])
```

以减小打包体积。

## 常见问题（`npm run dev` 报错）

1. **ENOENT / 找不到 package.json**  
   先执行：`cd ruoyi-screen`（或你的本机路径下的 `ruoyi-screen`），再 `npm install`、`npm run dev`。

2. **找不到 vite / 依赖不完整**  
   在 `ruoyi-screen` 目录执行：`npm install`。

3. **端口被占用**  
   修改 `vite.config.js` 里 `server.port`，或关掉占用 5173 端口的程序。

4. **`crypto.getRandomValues is not a function`（启动 dev 失败）**  
   多为 Node 16 + Vite 5 不兼容。本项目已固定 **Vite 4**；请在 `ruoyi-screen` 目录删除 `node_modules` 与 `package-lock.json` 后重新执行 `npm install`。仍建议长期升级到 **Node 18 LTS**。