README

@umijs/max 模板项目，更多功能参考 Umi Max 简介

总结

• ✅ 碰到问题多用谷歌、多看官方文档 百度 CSDN 都是一个抄一个 而且不一定好使
  • 比如 如何判断一个对象是不是 moment/dayjs 百度搜索都是什么说 可以使用_isAMomentObject 这个属性进行判断 谷歌一搜官方文档说了 直接用 moment.isMoment() dayjs.isDayjs() 就行 好用还清晰
• ✅ module vs namespace? type vs interface?
• ✅ app.ts 的接口报错的返回处理 & 异常处理再思考一下 ：全局异常处理，一部分是全局的错误拦截，另一部分是单独组件的错误拦截。
• ✅ 批量删除时弹窗里的表格可以正常在显示，单个删除时表格无法显示
  • 应该是 useState 执行时机的问题，使用 useRef/useSessionStorageState(ahooks) 来解决
• ✅ 控制台报错：Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?
  • 看官方文档解决 文档
• ✅ 因为后端没做字段控制适配，前端增加请求时的字段为空值时不传该字段，查看 umi 等相关文档 GET 请求参数序列化 文档
  • 使用query-string库的方法skipEmptyString: true, skipNull: true实现
• ✅ 使用 Ant-motion 做动画时 包裹组件动画不生效
  • 查文档得知 解决方法：每个子标签必须带 key，如果未设置 key 将不执行动画。
• ✅ 使用 antd 栅格布局 结合组件 styles 实现样式更优雅
• ✅ 添加搜索组件 其中展开按钮用 ahooks 的 useToggle
• ✅ 利用 Button 的 htmlType 属性 submit、reset
• ✅ replace()方法
• ✅ 整理一下 ahooks 一些好用的 hooks
• ✅ 解决登陆后左侧菜单获取的问题 仿照 fetchUserInfo 在 getInitialState 下添加个获取菜单的方法
• ✅ 从服务端请求菜单 问题：路由与页面匹配问题 & 服务端获取的菜单重定向不生效且 icon 不会自动转化 issues
  • app.ts layout 增加 iconfontUrl 用阿里的 iconfont
  • 通配符 * :id :name 匹配
• ✅ 关于提问 antd issue & Google & github & stackoverflow & 官方文档 & 最小重现 codesandbox
• ✅ 打开浏览器控制台 Network 发现首次进入页面有两个相同的 http 请求
  • 使用 ahooks useWhyDidYouUpdate 找到依赖状态的变化 其实就是 useEffect 首次执行一次 依赖的状态刚进入页面时会从无到有再执行一次
  • 使用 ahooks useUpdateEffect 让 useEffect 首次不执行，只在依赖项更新时运行
• ⬜ 动态模型的原理 字段的增加等
  • Get layout ? Get layout form 'listBuilder' (code from Model) : Get layout form 'Database' (code from Trait)
  • 有一个基础的页面 这个页面的请求的 url 、menthod 都是变量实现新增页面的请求
  • 前端传的布局 JSON { tableColumn tableToolbar...} 给后端，后端一式两份，一份格式化处理拆分 name sex age 字段进而动态扩充数据库字段，一份原封不动存储，前端需要时再传回去
  • 字段设置
  • Basic Route Name
  • Fields
  • Name Title Type List Sorter HideInColumn Edited Disabled
  • List Action
  • Title Type Action Url Method Action
  • TableToolBar
  • BatchToolBar
• ✅ 垃圾箱进入退出后 & 切换页面后 批量选择项（batchToolbar）持续存在 注意 setSelectedRowKeys setSelectedRows 置空解决
• ✅ console 报错的问题 组件也要加 key
• ✅ 有时间完善下登录页相关 & 国际化
• ✅ 安装 formily 报错
  • 版本问题 目前使用的 antd5，应安装 yarn add --save antd dayjs yarn add --save @formily/core @formily/react @formily/antd-v5 推测是 antd5 用 dayjs 而 antd4 用 momentjs 的问题
• ⬜ JSON Schema
• ✅ formily 表单加一个字段 组件为 Button 由于模块“"@formily/antd-v5"”没有导出的成员“Button” 采用 Antd 导出 Button 发现列出现了但是不显示 Button
  • 原因：F12 点击空白区域发现有 Button，但是没值 <Button></Button 使用 x-component-props = {{children:'Data',}} 解决
• ⬜ onClick 放置位置
  • 首先觉得使用 x-component-props = {{children:'Data',onClick:()=>{}}} 但是这样只能打开弹窗 不知道是谁打开、控制的 那个字段 数据怎么交互
  • 字段监听 antd 文档 focusTriggerAfterClose
• modal 未清空
• ✅ formily Chrome 浏览器插件比较好用 看各组件层级的状态比较清晰
• ✅ 提交表单后 菜单（路由）刷新 + loading
  • useModel 从 @@InitialState 下拿到 InitialState 和 setInitialState 提交完后 setInitialState 的 menu 为最新的 menu
  • refresh 从 @@InitialState 下还可以拿到一个 refresh 方法 这也可以刷新 会将所有 InitialState 都刷新一遍
• ⬜ 面包屑优化
• ⬜ 单元测试 端到端测试 e2e
• ⬜ 上线部署