代码规范

如果不分页查询，都需要传limit: MAX_PAGINATION_LIMIT, 否则只会返回默认10个
所有的columns，map的items都需要有唯一的key
尽量避免从server获取全部数据，再在客户端去filter的情况
Table render必须加类型
使用cn设置css的className

组件

避免把代码写在一个组件内，尽量分拆成小组件
全局组件在components目录：
- atoms：封装antd和其他第三方基础组件
- molecules: 复杂的组合atoms组件，但不涉及业务逻辑，没有API调用
- organisms: 涉及业务的组件，需要有API调用
尽量使用已定义的全局组件。
1. 熟练掌握ant design各组件的使用方式
2. 布局使用KBFlex, KBSpace, KBGrid组件
3. 使用tailwindcss
筛选框(Select), Segmented, Tabs等和选择有关的组件使用方式：
- 如果数据是Enum类型，数据由后端定义，如状态值等，使用后端定义的EnumObjects.更多信息
- 如果数据是后端用户数据，数据由用户输入，如用户列表，资源列表，创建或使用organisms中的组件.更多信息
- 如果数据是简单的数组，如容纳人数范围，将options定义常数数据结构，在组件中引用。
显示用户：使用 <KBUser/> 组件
时间段选择: <KBTimeRangePicker/>组件，包括几种不同mode

表单

动态显示表单字段

可以用Form.useWatch hook自动监听表单修改，动态显示其他字段:

tsx

const [form] = useForm()
const showContent = Form.useWatch('is_enabled', form)

这里showContent会根据用户对form的修改自动更新。我们可以动态显示其他字段:

tsx

{
  showContent && <Form.Item>...</Form.Item>
}

表单校验message

如果必填字段需要显示校验错误信息，一般不用写required message。前提是label是一个string。message会自动根据label显示。但是如果label是ReactNode就不行了。所以大家注意一下，尽量用label string。特殊情况和产品讨论一下是否能够改设计。不能改再用message

库使用规范

React-Query

默认的react-query设置在react-query-client.ts，默认staleTime是15分钟。即15分钟内除非主动invalidate，会使用缓存数据。

      defaultOptions: {
        queries: {
          refetchOnReconnect: true, // refetch data when reconnect
          refetchOnWindowFocus: true, // refetch data when window focus
          staleTime: 1000 * 60 * 15, // default keep data for 15 minutes
          retry: isProdEnv ? 3 : 0, // Set the number of retries to 0 in development
        },
      },

如果需要更快或更慢刷新数据，在单独的API调用中修改staleTime.

useDepartmentAdminGetDepartmentTree(
        {},
        {
          query: {
            staleTime: 100000 * 60 * 60,
          },
        }
      )

默认情况下调用mutate都会自动invalidate该模块的所有query，所以你不需要手动invalidate.
如何invalidate API数据(创建，更新或删除回显)？

通常情况下mutate会自动更新数据。使用mutate后数据就会自动刷新。

如何关闭自动刷新API数据?

调用mutate函数时，传入{invalidateOnSuccess: false}

如何强制刷新(invalidate)API 数据？

如果需要强制刷新API数据,使用 useInvalidate hook. 注意需要先关闭自动invalidate, 否则会刷新两次。

Invalidate react query的query key是什么？

React Query的query和mutate都带有query key。我们项目的key的format是 ["api", "v5", "模块名", "其他path"]。使用useInvalidate('tasks')可获取invalidate tasks模块所有数据的key。

默认在mutate时，会invalidate该模块的所有数据，即自动调用了useInvalidate('模块名')。所以不需要手动刷新数据。

如果组件load时不能或不用发起网络请求，使用enabled:

如果需要主动重新刷新网络数据，使用refetch

Note: 通常情况下不需要主动refetch。mutate会自动invalidate从而获取新的数据。更多信息

如果重新获取数据?

使用refetch:

const {data, refetch} = useMyQuery()

...
refetch()

通常情况下因为我们自动invalidate了数据，所以不需要refetch。但在例如周期性获取数据时，可以使用refetch.

当使用数组作为Api参数时，需要sort以保证每次的queryKey一致，否则会导致重新请求数据：

Jotai

如果只是更新状态，使用useSetAtom:

使用atomWithImmer管理复杂结构的状态数据。

Immer

状态更新采用Immer，对数组，和比较深的数据结构更新更简单高效：

用户信息

如何获取当前用户的默认分店？

useUserLocationOrDefault hook

如何获取当前页面所在分店?

const [currentLocationId] = useAtom(currentLocationIdAtom)

WARNING

几乎所有的/locations下的API调用都应该传入currentLocationId

如何获取用户头像地址?

如果需要显示用户头像，直接使用<KBUser/>即可。如果需要获取用户头像URL，使用getUserAvatar()函数。

代码规范 ​

组件 ​

表单 ​

库使用规范 ​

React-Query ​

Jotai ​

Immer ​

用户信息 ​