linglong-ui

Getting Started

Install dependencies

$ yarn

Start the dev server

$ yarn start

Build documentation

$ yarn docs:build

Build library via father-build

$ yarn build

开发环境

node：14.12.0

代码规范

编码规范按之前约定的[Web编码规范V1.0]和工程内的lint工具，保持 lint 工具开启

组件约定

antd 组件

antd 组件只需要书写文档:

button └─index.md

组件实体由 index.tsx 导出:

// src/index.ts
export {Input} from 'antd';

自定义组件

在主题配置修改之外，仍需对组件样式、交互（组件层面）做修改的，需要新增一个组件单元，并增加LL前缀;比如LLButton组件的目录：

ll-button ├─index.md ├─index.ts ├─ll-button.tsx ├─ll-button.less └─ll-button.d.ts

组件书写方式

组件推荐使用 function + hook 形式组织

说明编写

在组件文件夹下编写index.md

提供了一个脚本供使用，方便从antd组件demo说明中提取demo、替换文本、插入index.md的操作：

1. 拷贝antd/components下目标组件的index.zh-CN.md、demo目录到linglong-ui的src下
2. yarn demo:build --demo=button （此时docs绝大部分工作完成了，有问题再手动修改）
3. 检查docs是否运行正常

css

使用引入式的方式 import './button.less'

组件类命由三部分组成

• 项目前缀：linglong
• 组件前缀：button
• 当前类名：cotainer

可以通过 less mixin或者 classnames实现

git 组件创建流程

develop 拉取组件分支 --> feature/ll-button --> 开发完成 --> request-merge 到 develop(是否需要评审)

Less 变量设置

自定义变量以 @linglong-custom- 开头

Preview Site

• layout 控制 Preview Site 的基本样式
• 如需更改 Preview Site 样式可以依次更改 variable.less -> layout.less | markdown.less

Component Theme

• 大部分都可通过 src/antd-custom.less 进行更改变量即可

部署

docs部署

访问地址：http://10.40.152.129:10091/

两种部署方式：

1. 已接入质效平台，项目地址, 构建后可直接部署在T1（10.40.152.129）上。

2. ssh登录T1，手动部署到/data/base/static/linglong-ui-lib/目录下

Axure & Sketch Resources

Axure & Sketch resources url path:

• /docs/Home/downloadConfig.ts
• /src/resources/Resources/downloadConfig.ts