403ffe0fde
Implement the mobile dashboard frontend, admin overview APIs, report archive export, and local dev proxy so the boss dashboard can run against real backend data while preserving MSW demos. Co-authored-by: Cursor <cursoragent@cursor.com>
123 lines
3.1 KiB
Markdown
123 lines
3.1 KiB
Markdown
# Dashboard Frontend
|
|
|
|
独立 H5 经营驾驶舱前端项目。第一阶段只使用本地 Mock 数据，不对接后端 API。
|
|
|
|
## 技术栈
|
|
|
|
- React 19
|
|
- TypeScript
|
|
- Vite
|
|
- antd-mobile
|
|
- TanStack Query
|
|
- Zustand
|
|
- Axios
|
|
- ECharts
|
|
- MSW
|
|
- Vitest
|
|
|
|
## 本地开发
|
|
|
|
```bash
|
|
nvm use --delete-prefix v24.14.1
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
默认访问：
|
|
|
|
```text
|
|
http://localhost:5174/h5/dashboard/boss
|
|
```
|
|
|
|
## 第一阶段范围
|
|
|
|
- H5 移动端老板驾驶舱首页
|
|
- 昨日经营核心 KPI
|
|
- 今日 10:15 / 14:55 节点快报 Mock
|
|
- 近 7 天交易趋势
|
|
- 用户、团队、商品排行
|
|
- 风险预警摘要
|
|
- 底部 Tab 导航
|
|
- MSW Mock 数据
|
|
|
|
## 校验
|
|
|
|
```bash
|
|
pnpm typecheck
|
|
pnpm test -- --run
|
|
pnpm build
|
|
```
|
|
# React + TypeScript + Vite
|
|
|
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
|
|
Currently, two official plugins are available:
|
|
|
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|
|
|
## React Compiler
|
|
|
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
|
|
|
## Expanding the ESLint configuration
|
|
|
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
|
|
```js
|
|
export default defineConfig([
|
|
globalIgnores(['dist']),
|
|
{
|
|
files: ['**/*.{ts,tsx}'],
|
|
extends: [
|
|
// Other configs...
|
|
|
|
// Remove tseslint.configs.recommended and replace with this
|
|
tseslint.configs.recommendedTypeChecked,
|
|
// Alternatively, use this for stricter rules
|
|
tseslint.configs.strictTypeChecked,
|
|
// Optionally, add this for stylistic rules
|
|
tseslint.configs.stylisticTypeChecked,
|
|
|
|
// Other configs...
|
|
],
|
|
languageOptions: {
|
|
parserOptions: {
|
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
tsconfigRootDir: import.meta.dirname,
|
|
},
|
|
// other options...
|
|
},
|
|
},
|
|
])
|
|
```
|
|
|
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
|
|
```js
|
|
// eslint.config.js
|
|
import reactX from 'eslint-plugin-react-x'
|
|
import reactDom from 'eslint-plugin-react-dom'
|
|
|
|
export default defineConfig([
|
|
globalIgnores(['dist']),
|
|
{
|
|
files: ['**/*.{ts,tsx}'],
|
|
extends: [
|
|
// Other configs...
|
|
// Enable lint rules for React
|
|
reactX.configs['recommended-typescript'],
|
|
// Enable lint rules for React DOM
|
|
reactDom.configs.recommended,
|
|
],
|
|
languageOptions: {
|
|
parserOptions: {
|
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
tsconfigRootDir: import.meta.dirname,
|
|
},
|
|
// other options...
|
|
},
|
|
},
|
|
])
|
|
```
|