设计原型：
以上大屏数据为模拟数据
脚手架命令：pnpm create vite my-react-app –template react-ts
一、项目描述
友情链接：
React 官方文档 高德 自定义地图 Mockjs 官方文档 DataV 官方文档 echarts 实例 ，echarts API文档
二、文件目录介绍 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Project ├─.eslintrc.cjs ----------- // eslint 配置 ├─.gitignore -------------- // git 控制文件 ├─custom.d.ts ------------- // 自定义类型声明 ├─index.html -------------- // 主页面 ├─mock -------------------- // 模拟数据 ├─package.json ------------ // 项目信息+依赖包 ├─pnpm-lock.yaml ---------- // 锁定依赖包 ├─README.md --------------- // 说明文档 ├─src │ ├─App.module.css │ ├─App.tsx --------------- // App 入口 │ ├─assets ---------------- // 静态资源 │ ├─components │ │ ├─AutoScale ----------- // 自动缩放 HOC │ │ ├─index.ts │ │ └─ScaleContainer ------ // 缩放容器 HOC │ ├─hooks │ │ └─useFullscreen.ts ---- // 控制全屏 Hooks │ ├─index.css │ ├─main.tsx -------------- // 主入口 │ ├─redux ----------------- // redux 相关 │ ├─services -------------- // 服务端相关配置文件 │ ├─utils ----------------- // 工具函数 │ ├─views ----------------- // 页面 │ └─vite-env.d.ts ├─tsconfig.json ----------- // ts 配置文件 ├─tsconfig.node.json ------ // node ts 配置文件 └─vite.config.ts ---------- // vite 配置文件
三、详情介绍 启动项目 需要提前安装好 nodejs 与 pnpm，下载项目后在项目主目录下运行 pnpm install 拉取依赖包，使用命令 pnpm dev 启动项目。
数据请求模拟 项目采用 Mockjs 模拟数据方式，配置在 mock 文件夹中，Mockjs 使用方法请查阅 Mockjs文档 ，主入口文件 main.tsx 引入 mock 文件。
接口 API 请求地址写在 services/api.service.ts 中，由 @reduxjs/toolkit createAsyncThunk 创建异步 Thunk 发起请求。
页面通过 useDispatch 发起请求，useSelector 接收数据。
图表组件 图表组件主要使用了 ECharts 和 DataV 可视化框架来进行开发。图表配置文件在 views/components/*/options.ts 中，数据由各个组件请求后导入。ECharts 渲染函数统一封装在了 utils/chart.js 中。
样式编写 样式编写使用了 CSS in JS (JSS) ，使样式具有组件级别的作用域，避免了全局样式污染的问题。
将 css 文件名修改为 xxx.module.css
导入样式文件 import styles from ‘./xxx.module.css’
使用 styles.className
定义 ts 类型文件1 2 3 4 5 declare module "*.css" { const css : { [key : string]: string } export default css }
vscode 安装插件：typescript-plugin-css-modules
作用：解析 css 文件，并生成 ts 对应的类型
使用：在 tsconfig.json 配置 plugins 字段 [{“typescript-plugin-css-modules”}]
在 项目根目录创建 .vscode 文件夹 创建 settings.json 文件1 2 3 4 5 { "typescript.tsdk" : "node_modules/typescript/lib" , "typescript.enablePromptUseWorkspaceTsdk" : true }
屏幕适配 本项目借助 HOC 高阶组件包裹，将大屏限制在 1920x1080 尺寸。通过动态计算缩放比例，实时控制容器缩放大小，具体代码请参阅。components/AutoScale 和 components/ScaleContainer 组件。
在编写大屏代码时，样式无需转换，按照设计稿 1920x1080 1:1 编写即可。
四、全屏控制 自定义 Hook（高阶组件）useFullscreen，用于控制页面全屏显示的功能，具体代码请参阅 hooks/useFullscreen 自定义钩子。
五、其它 这个项目是个人的作品，难免会有问题和 BUG。如果您发现任何问题，欢迎提出反馈和建议。我会尽力去更新和修复，并持续学习前端知识。非常感谢您的支持和理解！我很乐意与您交流，共同进步。
GitHub 地址 GitHub 地址 ：https://github.com/zhihuzeye/react-screen-demo.git
