toco-react-template/template/README.md

# {{projectName}}

## 开发

- install

    ```shell
    yarn install
    ```

- dev

    ```shell
    yarn start
    ```

- build

    ```shell
    yarn build
    ```
  
## 路由和菜单

本工程采用配置化自动生成路由和菜单方案，在 `pages` 下的单个页面目录中配置 `meta.json` 文件，即可生成路由和菜单，具体配置如下：

```ts
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` 页面。

## 常用方法和全局变量

在每个页面内，可以使用以下常用方法和全局变量：

  ```
  navigate：页面跳转方法，用法：navigate('/path')
  props：页面 props
  tocoStore：全局 store
  tocoServices：页面的请求
  tocoRefs：页面上所有带 id 组件的 refs
  tocoModals：页面上所有带 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 # 帮助函数放这里
    ```