bsn-components

项目介绍

项目背景或基础介绍

BSN React 公共组件

开发指南

运行环境

项目运行所需环境要求

• node: >= 16.18

• pnpm: >= 8.1.1

  pnpm 安装方法：npm install -g pnpm

本地开发

本地开发启动命令

• pnpm storybook

打包编译

项目构建命令

• pnpm build

开发资源

项目不同环节的产出，包括系统架构、产品原型、PRD、设计稿等

组件产出

| components | description | | ------------------ | ------------------------------- | | LibraryContext | 组件库公共配置 | | TableContext | CustomQuery组件table每行的数据 | | CustomQuery | 查询组件 | | CustomQueryButtons | 查询组件-表格行最后一列按钮组件 | | CustomTable | antd-table 二次封装 | | CustomForm | antd-form 二次封装 | | CustomButton | antd-button 二次封装 | | CustomConfirm | antd-confirm 二次封装 | | CustomModal | antd-modal 二次封装 |

LibraryContext

默认配置,类型内有具体注释

import { LibraryContext,type LibraryContextProps } from "@bsn/components-react";

export default function HomeLayout(props: PropsWithChildren) {
  const libraryContextVal = useMemo<LibraryContextProps>(
    () => ({
      // 国际化语言表示，zh-CN、en-US
      lang: "zh-CN",
      // 接口请求函数
      callRequest: <T, R>(func: (arg: T) => Promise<R>, arg: T) => Promise<R>;
      // 获取状态&类型的接口函数
      getStateApi: (key: string) => Promise<ResultInfo>;
      // 列表组件配置
      CustomQueryConfig?: {
         // table 操作列超过 actionsMax 个 显示更多按钮
        actionsMax: 3,
        // table 操作列更多按钮显示 (默认 0)： 0:更多, 1:...,
        actionsType: 0,
        // antd 主题配置
        antdTheme: {}
        // 查询部分配置,支持大部分 antd 原生 form 属性
        form?: {
          // 是否显示查询框的展开、收起按钮
          showExpand: false;
          // label&value 排列方式 通 antd [官方文档](https://ant-design.antgroup.com/components/form-cn)
          layout:  "inline",
          // 不同分辨率下 每行显示几个查询项
          layoutCol?: {
            xs: 1,
            sm: 1,
            md: 2,
            lg: 2,
            xl: 3,
            "2xl": 4
          };
          fieldNames: {
            requestParam: "data", // 查询接口入参字段配置： 默认 param:{...},
            requestPage: "page" // 查询接口入参字段配置： 默认 page:{pageSize,pageNum},
          };
        }
      }
    }),
    [params]
  );
  return <LibraryContext.Provider value={libraryContextVal}>
      {...}
    </LibraryContext.Provider>
}