# linglong-ui

## Getting Started

Install dependencies

```bash
$ yarn
```

Start the dev server

```bash
$ yarn start
```

Build documentation

```bash
$ yarn docs:build
```

Build library via `father-build`

```bash
$ yarn build

```
## 开发环境

node：14.12.0
## 代码规范

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

## 组件约定

### antd 组件

antd 组件只需要书写文档:

button
  └─index.md

组件实体由 index.tsx 导出:

```jsx
// 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/](http://10.40.152.129:10091/)

两种部署方式：

1. 已接入质效平台，[项目地址](http://console.devops.iflytek.com/ipipeline/applicationPipeline?projectId=f8e203c9-a527-4aed-b136-14279caa0185&appId=55712c2d79572d6f7278d6cb351d947d&t=0.7953684910227563), 构建后可直接部署在```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