组件规则

• 除src/components外，其他React的页面或组件必须使用'@/components`的组件，而不能直接使用'antd'组件。
• 组件必须同时书写storybook
• 使用value,onChange作为组件状态和修改回调属性。

组件目录结构

- src
  - components
    - atoms: 原子组件，最基础的组件，通常封装antd组件
    - layouts: 布局组件
    - molecules: 复杂的组件，如富文本，平面图。通常由原子组件组装。
    - organisms: 逻辑规则组件，如选择分店，选择资源。通常需要调用API获取数据。

组件样式

组件样式由两部分决定

1. Ant Design的主题: 通常不需要改
2. tailwind css覆盖: 通常用于修改组件中Ant Design不能覆盖的定制部分

如何写逻辑规则组件

逻辑规则组件通常从API中获取数据，再赋予原子或分子组件。例如根据分店，楼层等筛选。

逻辑组件的命名规则：KB-[模块概念名称]-[原子组件名称]，例如: KBLocationSelect, Location是分店，Select代表是封装<Select/>组件。

写逻辑规则组件的步骤很简单：

1. 从已有的组件目录中copy。
2. 修改copy后的名字。包括目录名，目录内的组件文件名，和组件Story名字
3. 进入组件文件，找到组件名称，高亮后Press F2,或右点选择重命名,更改名字。更改Props的名字。
4. 更改Stories中引用的名字。
5. 修改调用的API hook, 传入需要的参数。通常参数也需要加入到Props中。

组件原则

因为组件是基于Ant Design，组件通常需要有以下两个属性:

• value: 组件状态值，controlled
• onChange: 组件状态改变回调

几乎所有的表单组件都有这两个props。请按照此命名原则。不要写onSelectChange, onChanged等等。

组件介绍

KB[XXX]Select和KB[XXX]AutoComplete

Select和AutoComplete都是用于搜索和选择的组件，用于选择或搜索User, Resource, Role等等。

👉 选择使用Select和AutoComplete的标准是潜在搜索的范围。如果搜索的可能性超过100，使用AutoComplete.否则使用Select。

例如:

1. 用户数可能超过100，所以搜索用户一般用 KBUserAutoComplete
2. 但某个角色关联的用户数，比如选择"管理员"对应的人员，一般小于100，这时使用 KBUserSelect。

另一个例子

1. Resource的数量可能超过100，所以应该使用 KBResourceAutoComplete
2. ResourceType的数量一般小于100，所以应该使用 KBResourceTypeSelect.

Select在组件初始化时直接调用API，搜索是在客户端实现。AutoComplete在用户输入文字后调用API，搜索是在后端实现。

KBSearchInput

KBSearchInput和KB[XXX]Select和KB[XXX]AutoComplete都可能用于通过搜索过滤条件。

例如，员工列表中，用户可以输入关键字搜索名字或Email。员工列表根据搜索字段进行过滤。

KBSearchInput与Select，AutoComplete的区别在于：

KBSearchInput的搜索内容是在Table的范围内。例如Table显示的是员工列表KBSearchInput会实时更新列表，返回搜索范围内的数据。Table会实时更新。

KBSelect, KBAutoComplete只是用于修改筛选条件，用户需要从搜索结果中选择一项，Table才会更新。Table的主体通常不是KBSearchInput的主体。例如Table是预定列表，KBSelect是预定人搜索。

KBSearchInput的搜索也是在后端实现. KBSearchInput可能和AutoComplete的API是一致的，但通常不一样，因为AutoComplete往往只需要返回必要的数据，而KBSearchInput需要返回列表的所有字段。

KBEnumSelect/KBEnumSegmented/KBEnumTab/KBEnumTag

用于选择或显示状态或类型，例如资源状态选择框, 工单状态tab。

后端的Enum会自动生成3种形式，其中xxxEnumObjects可用于组件：

export const Default: Story = {
  args: {
    enums: RoleEntityLevelEnumObjects,
    modelName: 'roleLevel',
    onChange: (value: string) => {
      console.log(value)
    },
  },
}

• modelName: 传入enum的type名称，camelCase
• enums: 传入该enum的EnumObjects数组。

WARNING

当后端增加新的状态或修改状态时，我们需要同时手动修改roleLevels。

KBUserSelect/KBUserAutoComplete

选择用户组件。根据预计中选择的范围有以下两个组件:

KBUserSelect：从一部分用户中选择，例如角色列表中选择。

KBUserAutoComplete: 从大量用户中选择，可自动搜索。

KBPermit

根据当前用户权限，和开启的模块选择是否显示子组件。目前__只针对管理端__

<KBPermit permissions={[Permissions.LOCATION_CREATE]}>
  <KBCol className="gutter-row" span={8}>
    <KBFlex
      gap={8}
      className="tw-w-full tw-rounded-md tw-bg-gray-100 tw-px-4 tw-py-3"
    >
      <KBIcon name="building" size={20} />

      <KBTypography.Text className="tw-text-sm tw-font-medium">
        创建分店
      </KBTypography.Text>
    </KBFlex>
  </KBCol>
</KBPermit>