背景

「组件化」一直是前端工程师绕不开的话题，不管是日常业务开发、封装业务组件，还是基础设施建设开发 UI 组件或基础组件；亦或者是 React 、Vue、Angular 等 MV*框架，都是秉承着组件作为基础原子概念，所以可以肯定的是：  组件是下一代 web 技术的发展关键  。 但业界并没有对组件化有一个准确的定义，都是一些主观的意识，一般都是以程序模式设计思想里的“高内聚、低耦合、高扩展、可复用”的几个基本概念来描述，组件内部要保证逻辑的集中和完整，组件外部要提供可扩展性 api，并且独立性、简单可用性要保证。几个小的组件可层层嵌套，组合成一个大的组件，提供给外部使用，就像搭积木一样。 随着公司业务的不断增长，组件化除了为业务带来一致的设计语言和工作效率提升外，也为设计团队的产出和协作方式带来了影响和变化。UI 团队在进行需求设计的同时，前端团队也可逐步沉淀出一套适用于多平台、多业务的组件库，以此来提升设计和协同效率，并最终实现公司价值甚至商业价值。

介绍

NjoyDesign 是云想科技提供的一个企业级业务组件库，通过长期的业务沉淀和积累打造的高性能、稳定、高复用性的组件库，目前已经在公司创新业务线、短剧业务线上落地应用，预计将组件库涵盖组件业务场景整体提升 65%以上，部分组件提效 200%以上。

需要的环境

"antd": ">=4.0.0"
"react": ">=16.9.0"
"node": ">=16.18.0"

快速上手

• 安装

  # 通过npm安装
  $ npm install @nj/njoyd
  
  # 通过yarn安装
  $ yarn install @nj/njoyd

• 使用组件

  # 引入组件
  $ import { Login, Preview } from '@nj/njoyd'
  
  # 引入样式
  $ import '@nj/njoyd/dist/esm/njoyd.less'

定制主题

• 全局主题

  在工程的 index.tsx 中添加全局主题配置，主题参数参考 Antdtheme、NjoydTheme。

  import { Config } from '@nj/njoyd';
  
  Config.set({
    theme: {
      colorPrimary: '#1677ff',
    },
  });

  import { Config, SearchInput } from '@nj/njoyd';
  
  Config.set({
    theme: {
      colorPrimary: '#1677ff',
    },
  });
  
  export default () => {
    return <SearchInput></SearchInput>;
  };

• 单个组件主题

  在组件支持定制主题的前提下，使用 theme 传入主题参数配置单个组件主题，主题参数参考 Antdtheme、NjoydTheme。

  import { SearchInput } from '@nj/njoyd';
  
  export default () => {
    return <SearchInput theme={{ colorPrimary: 'red' }}></SearchInput>;
  };

  import { Config, SearchInput } from '@nj/njoyd';
  
  export default () => {
    return <SearchInput theme={{ colorPrimary: 'red' }}></SearchInput>;
  };

• AntdTheme

  基于 Antd 主题定制 字段，挑选出部分进行兼容支持，允许用户进行单独定制，其他未支持的字段则使用 Antd 默认值，只是不支持单独定制。

  | 属性名 | 描述 | 类型 | 默认值 | | ---------------------- | ------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------- | | colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一 | string | #1677ff | | borderRadius | 基础组件的圆角大小，例如按钮、输入框、卡片等 | number | 6 | | colorError | 失败按钮、错误状态提示（Result）组件 | string | #ff4d4f | | colorInfo | Alert 、Tag、 Progress 等组件都有用到该组梯度变量 | string | #1677ff | | boxShadow | 控制元素阴影样式 | string | 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) | | colorTextPlaceholder | 控制占位文本的颜色 | string | rgba(0, 0, 0, 0.25) |

• NjoydTheme

  继承所有 AntdTheme 的属性

  | 属性名 | 描述 | 类型 | 默认值 | | ------ | ---- | ---- | ------ | | | | | |