110 lines
3.3 KiB
Markdown
110 lines
3.3 KiB
Markdown
# TOCO Project
|
||
|
||
## 开发
|
||
|
||
- install
|
||
|
||
```shell
|
||
yarn install
|
||
```
|
||
|
||
- dev
|
||
|
||
```shell
|
||
yarn start
|
||
```
|
||
|
||
- build
|
||
|
||
```shell
|
||
yarn build
|
||
```
|
||
|
||
## 路由和菜单
|
||
|
||
本工程采用配置化自动生成路由和菜单方案，在 `pages` 下的单个页面目录中配置 `meta.json` 文件，即可生成路由和菜单，具体配置如下：
|
||
|
||
```ts
|
||
interface Meta {
|
||
displayName?: string; // 展示在菜单上的名字
|
||
icon?: string; // 展示在菜单上的图标
|
||
headMenu?: // 是否展示在头部菜单 或 所属头部菜单的名字
|
||
| boolean
|
||
| {
|
||
key: string;
|
||
label: string;
|
||
icon?: string;
|
||
};
|
||
sideMenu?: // 是否展示在侧边菜单 或 所属侧边菜单的名字
|
||
| boolean
|
||
| {
|
||
key: string;
|
||
label: string;
|
||
icon?: string;
|
||
};
|
||
order?: number; // 菜单排列序号，数字越小越靠前
|
||
}
|
||
```
|
||
|
||
其中 `headMenu`、`sideMenu` 为 `true` 时，表示该页面是一个菜单页面，即点击对应 `displayName` 后直接跳转到该页面，参考 `demo` 页面。
|
||
如果 `headMenu`、`sideMenu` 是对象，则表示的是该页面 **所属** 的非页面菜单组，参考 `test` 页面。
|
||
|
||
## 常用方法和全局变量
|
||
|
||
在每个页面内，可以使用以下常用方法和全局变量：
|
||
|
||
```
|
||
navigate：页面跳转方法，用法：navigate('/path')
|
||
props：页面 props
|
||
tocoStore：全局 store
|
||
tocoServices：页面的请求
|
||
tocoRefs：页面上所有带 id 组件的 refs
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
|
||
```shell
|
||
src
|
||
├── App.tsx # 路由逻辑，一般不需要修改
|
||
├── app # store 主逻辑
|
||
│ └── store.ts # 如果写了新的 store，需要在这里引入
|
||
├── components # 组件放这里
|
||
├── config # 可以放一些常量、配置
|
||
│ └── index.ts
|
||
├── enum # 枚举值定义
|
||
│ └── index.ts
|
||
├── global.d.ts
|
||
├── index.tsx
|
||
├── langs # 国际化配置
|
||
│ ├── en_US.ts
|
||
│ ├── index.ts
|
||
│ └── zh_CN.ts
|
||
├── layout # 布局
|
||
│ ├── HeaderAndFooter
|
||
│ ├── HeaderAndSider
|
||
│ └── index.tsx # 可以在这里切换布局方案
|
||
├── pages # 页面放这里
|
||
│ ├── demo # 一个页面一个文件夹
|
||
│ │ ├── Demo.module.css # 页面样式
|
||
│ │ ├── Demo.tsx # 页面逻辑
|
||
│ │ ├── demoAPI.ts # 页面请求
|
||
│ │ ├── demoSlice.ts # 页面 store
|
||
│ │ └── meta.json # 页面元数据，用于生成路由和菜单，没有这个文件视为普通组件
|
||
│ └── test
|
||
├── react-app-env.d.ts
|
||
├── reportWebVitals.ts
|
||
├── setupProxy.js
|
||
├── setupTests.ts
|
||
├── style # 全局样式
|
||
│ ├── index.css
|
||
│ └── reset.css
|
||
├── themes # 主题配置
|
||
│ ├── CSSVariablesStyle.tsx # 用于定义css主题变量，不用修改
|
||
│ ├── dark.ts # 夜间主题
|
||
│ ├── default.ts # 日间主题
|
||
│ └── index.ts # 在这里定义自定义token，在主题文件内配置具体值
|
||
└── utils # 帮助函数放这里
|
||
```
|
||
|