English｜简体中文

开发须知

基础

pnpm 包管理工具
vite 构建工具
typescript 默认开发语言

CSS

tailwindcss 原子化 css 工具库，建议使用tailwindcss + css in js方案，放弃 less，sass 之类预处理工具。
emotion css in js

状态管理

react-query 接口状态管理
jotai 本地状态管理

fetch 接口&类型定义

@openapitools/openapi-generator-cli OpenAPI 2.0/3.x 文档生成接口及类型定义，pnpm run gcapi 调用 openapitools.json 生成文档,inputSpec 可填远程地址，依赖 docker。

表单

formilyjs 表单渲染引擎，antd 项目建议使用
react-hook-form 基于 React Hooks 的表单库，mui 项目建议使用
react-hook-form-mui 基于react-hook-form和mui的表单组件库
Zod 使用静态类型推断进行 TypeScript 优先模式验证

其他库

antd 已预设相关配置
@tanstack/react-router ts 友好的路由库
biomejs 强制使用，禁止关闭
clsx css 类名连接组合
es-toolkit 先进的 JavaScript 实用程序库
@ant-design/pro-components 基于antd的重型组件,包含ProLayout,ProTable等
ahooks react hook 是工具库
nice-modal-react 命令式弹窗库，增加代码可读性
echarts 开源的数据可视化库
echarts-for-react ECharts React 包装库

目录

components 全局组件放于此
comm 常量放于此
pages 页面组件放在这里
- Home 首页
  - assets 此功能相关资源
  - components 此功能页面的组件放于此
  - index.tsx Home 的入口文件
  - service 页面逻辑抽象放

推荐

table + 查询 form 参考 table/index.tsx demo
子页面容器,Header 设置，参考 home/index.tsx PageContainer
建议使用 css in js 替换 css,less,提高 css 可维护性
面包屑开箱即用