{{projectName}}

开发

• install

  yarn install
  

• dev

  yarn start
  

• build

  yarn build
  

路由、布局、菜单

• 路由

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

• 布局

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

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

• 菜单会根据路由和布局自动生成

  • 顶栏+侧栏：一级路由放置在顶栏，其余层级放置在侧栏
  • 仅侧栏/仅顶栏：所有菜单项均在分布侧栏/顶栏菜单中

常用方法和全局变量

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

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

目录结构

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