3.9 KiB
3.9 KiB
{{projectName}}
开发
-
install
yarn install -
dev
yarn start -
build
yarn build
路由和菜单
本工程采用配置化自动生成路由和菜单方案，在 pages 下的单个页面目录中配置 meta.json 文件，即可生成路由和菜单，具体配置如下：
interface Meta {
displayName?: string; // 展示在菜单上的名字， 可以用 {{language_id}} 包起来，用于国际化显示
icon?: string; // 展示在菜单上的图标
headMenu?: // 是否展示在头部菜单 或 所属头部菜单的名字
| boolean
| {
key: string;
label: string; // 可以用 {{language_id}} 包起来，用于国际化显示
icon?: string;
order?: number; // 菜单序号，数字越小越靠前
};
sideMenu?: // 是否展示在侧边菜单 或 所属侧边菜单的名字
| boolean
| {
key: string;
label: string; // 可以用 {{language_id}} 包起来，用于国际化显示
icon?: string;
order?: number; // 菜单序号，数字越小越靠前
};
order?: number; // 菜单序号，数字越小越靠前
route?: string; // 当前页面路由名字,支持 ':id' 等路由参数，不同则默认等于目录名
}
其中 headMenu、sideMenu 为 true 时，表示该页面是一个菜单页面，即点击对应 displayName 后直接跳转到该页面，参考 demo 页面。
如果 headMenu、sideMenu 是对象，则表示的是该页面 所属 的非页面菜单组，参考 test 页面。
常用方法和全局变量
在每个页面内，可以使用以下常用方法和全局变量：
props：页面 props
params：当前页面路由参数
search：当前页面搜索参数
location：当前页面路由信息
navigate：页面跳转方法，用法：navigate('/path')
tocoStore：全局 store
tocoServices：页面的请求
tocoRefs：页面上所有带 id 组件的 refs
tocoModals：页面上所有带 id 弹窗的 refs
目录结构
```shell
src
├── App.tsx # 路由逻辑，一般不需要修改
├── Root.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 # 一个页面一个文件夹
│ │ ├── index.module.css # 页面样式
│ │ ├── index.tsx # 页面逻辑
│ │ ├── api.ts # 页面请求
│ │ ├── slice.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 # 帮助函数放这里
```