【无标题】

---

学习内容：

提示：这里可以添加要学的内容

未注明明确版本的组件/工具，视为官网的最新版本。

骨架程序元素

统一的工程目录结构

视图（控制台 + 简单）

主菜单

路由配置

身份识别和访问控制（IAM）对接和状态（Token及用户信息）维护

全局样式（Chakra UI，Tailwind CSS，及各组件的样式定义）

运行环境及工程配置类

NodeJS 版本管理工具：nvm

NodeJS 版本：18

打包工具：vite 4.1

代码质量控制：eslint, prettier

版本控制工具：git

包管理工具：pnpm，禁用 yarn/cnpm/npm，采用npm官方源，禁用国内镜像。

测试开发

单元测试：vitest

e2e测试：cypress 12+

页面开发

开发语言：TypeScript 4.9+/5.0+

UI框架：Chakra UI 2.7+

CSS框架：Tailwind CSS 3.3+

状态管理：Zustand 4+ 自有代码中禁用 Redux

表单框架：Formik（表单验证优先使用 Yup，具体参考 Formik 文档中关于 Yup 的说明）

网络请求：axios 1.4+，请求第三方系统可采用简易方式 fetch

Mock 数据框架：MSW

常用工具库

标准库增强：lodash

日期与时间：dayjs

数字格式与转换：Numeral-js

复杂浮窗实现：Floating UI

网络查询增强：React Query

Chakra UI 中部分组件禁用及其替代品

Select 使用 React Select 替代

带树状结构的 Select 使用 React Dropdown Tree Select 替代

级联选择的 Select 使用 ？

Icon 使用 React Icon 替代，对于 UI 单独设计的图标沿用 iconfont 的引入方法

Table 使用 TanStack Table 替代

Chakra UI 中缺失的组件及其补充

日期/时间选择器使用 react-datepicker

图表：echarts

上传：FilePond （图片预览及编辑通过插件，具体参考其文档）

树结构：React Sortable Tree

图片预览：React Simple Image Viewer

轮播图：Embla Carousel

动画：Framer Motion

图谱：vis.js Network

地图：Leaflet

列表拖拽：React Beautiful Dnd

流程图：React Flow

地图: maplibre

---