toco-react-template/README.md

# {{projectName}}

## 开发

- install

    ```shell
    yarn install
    ```

- dev

    ```shell[src](src)
    yarn start
    ```

- build

    ```shell
    yarn build
    ```

## 路由、布局、菜单

- 路由
  - 路由配置位于`src/router/config.tsx`文件
  - 配置形式类似于`ReactRouter 6`
  - `menu`字段会用于菜单项显示

- 布局
  - 通过修改根路由节点的`type`属性实现`顶栏+侧栏`、`仅顶栏`、`仅侧栏`的布局模式

    ```tsx
    export const routerConfig: RootRoute = {
      path: '/',
      element: <Layout type={LayoutType.Default} />,
      ...
    }
    ```


- 菜单会根据`路由`和`布局`自动生成
  - 顶栏+侧栏：一级路由放置在`顶栏`，其余层级放置在`侧栏`
  - 仅侧栏/仅顶栏：所有菜单项均在分布`侧栏/顶栏`菜单中

## 常用方法和全局变量

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

  ```
  props：页面 props
    params：当前页面路由参数
    search：当前页面搜索参数
    location：当前页面路由信息
    navigate：页面跳转方法，用法：navigate('/path')
  tocoServices：页面的请求
  tocoRefs：页面上所有带 id 组件的 refs
  tocoModals：页面上所有带 id 弹窗的 refs
  ```

## 目录结构

  ```shell
  src
  ├── Icon.tsx  # Icon组件，对应Toco前端工程的iconfont配置项
  ├── Root.tsx # 页面根
  ├── app      # 应用
  │   ├── common.ts  # 应用配置store
  │   ├── enum.ts    # 枚举值
  │   ├── hooks.ts   # store的hook
  │   ├── index.tsx  # 应用入口
  │   ├── langs      # 多语言配置
  │   ├── message.ts # 全局消息
  │   ├── request.ts # 请求实例
  │   ├── storage.ts # localStorage
  │   └── store.ts   # store实例
  ├── components # 组件放这里
  ├── index.tsx  # 前端入口
  ├── layout     # 布局
  ├── pages      # 页面放这里
  ├── router     # 路由
  │   ├── config.tsx # 配置路由、菜单项文本、布局类型
  │   ├── index.tsx  # 路由导出
  └── style      # 全局样式
      ├── index.css 
      └── reset.css
  ```