# IOT UI 组件库

在线预览：[戳我 😘](https://coding.jd.com/smarthome_fe/iot-ui.git)

## Q&A

#### 1.添加了新的组件，路径也配置好了，为什么打开页面的时候展示404

      a:重启项目试试

## 运行项目

* 提交代码
  
  ```bash
  yarn commit
  ```
  
  使用 yarn commit 替代 git commit生成规范的 Commit Message，当然为了效率你可以选择手写，但是要符合规范

本地预览：

```bash
git clone https://coding.jd.com/smarthome_fe/iot-ui/
cd iot-ui
yarn
yarn start
```

按顺序执行完命令后，即可在 localhost:3000 端口看到以下内容：

![preview.png](https://tva1.sinaimg.cn/large/007S8ZIlgy1gete7pnjdkj31j90u00yn.jpg)

## 开发项目

### 一、项目结构

* Components  自定义组件
  
  * Blocks.ts 导出组件的block 定义.如果不希望拖拽可以不导出
  
  * Types.ts 导出组件的Type 定义.必须导出。如果不再使用，可在这里移除
  
  * index.ts 正常导出组件。做为普通组件使用
  
  * Bool  盛放bool 类型组件
    
    * switch
      
      * Demo  开发时用于调试的demo目录
      
      * style 样式
      
      * build.tsx 打包定义文件
      
      * GrapesjsConfig.tsx
        
         这里配置组件平台的组件及block
        
        Type: 相当于标签
        
        block: 拖拽元素，用于形成左侧组件列表
        
        类型为:GrapesjsConfig,根据想要的按结构书写即可
      
      * Index.mdx docz 库使用文件，用于形成组件调试预览网站
        
        * 组件介绍
          
          CodeBox 代码展示
          
          Props 组件属性说明
          
          MyTheme 组件主题设置
          
          ```mdx
          ---
          name: 电源开关
          route: /IOTPower
          menu: 组件
          ---
          import { CodeBox } from '../../doc-comps/code-box';
          import MyTheme from '../../doc-comps/theme';
          import { Playground, Props } from 'docz'
          import IOTPower from './IOTPower';
          
          import BasicDemo from './demo/1-demo-basic';
          import BasicDemoCode from '!raw-loader!./demo/1-demo-basic.tsx';
          import style from '!raw-loader!./style/index.less';
          import theme from '!raw-loader!../../base/theme.css';
          
          #电源开关
          
          控制设备开关。
          
          ## 代码演示
          
          ### 基本用法
          
          <CodeBox code={BasicDemoCode} title="基本用法" desc="使用kind控制Alert类型">
            <BasicDemo />
          </CodeBox>
          ## API
          <Props of={IOTPower}/>
          
          ## 主题设置
          <MyTheme style={style} oldTheme={theme}/>
          ```
          
          
      
      * index.ts
      
      * Interface.ts 定义类型
      
      * IOTSwitch 组件定义文件

* scripts 脚本目录

* Static  静态资源
  
  * font 字体图标

### 二、开发

1. 根据bool/switch 书写组件，执行yarn start  可在网站实时查看组件样式

2. 写完组件后，配置grapesjsconfig.tsx 。拖拽工程根据这里的定义生成Type 和Block

3. 判断该组件是否为拖拽元素(在Block.ts中导出),判断拖拽平台是否注册为基础组件(在types.ts 中导出)

4. 发布组件
   
   ```
   yarn release
   ```

5. 登录服务器，停掉服务
   
   ```
   ssh -p 22 root@10.170.224.217
   ps -ef | grep node 找到 node线程
   //删除除了grep --color=auto **node** 以外的进程
   Kill -9 进程号
   ```

6. 升级组件库
   
   ```
   //目录/export/servers/project/device-control-project
   npm update @jd/iot-ui
   ```
   
   scp -P 22 -r /Users/fengyanwei/Desktop/图标库 root@10.170.224.217:/export/servers/project/device-control-project/public/fonts

7. 启动服务
   
   ```
    nohup npm run start &
    //回车两次
   ```

8. 如果增加了字体图标如果将字体图标文件cp到服务器特定目录下
   
   ```
   cd /export/servers/project/device-control-project/public
   
   拷贝文件:scp -P 22 /Users/fengyanwei/Desktop/iot-ui-fonts.css root@10.170.224.217:/export/servers/project/device-control-project/public
   
   scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.svg root@10.170.224.217:/export/servers/project/device-control-project/public/fonts
   
   scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.ttf root@10.170.224.217:/export/servers/project/device-control-project/public/fonts
   
   scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.woff root@10.170.224.217:/export/servers/project/device-control-project/public/fonts
   ```

### 三、 关键类

#### 1、ITraits

```
export interface ITraits {
  type: string;//属性类型
  name: string;//在attributes 中的名称
  value: any;//默认值
  label?: string;//左侧展示名称
  placeHold?:string;//当是文本类型时文本框的placehold
  optionValue?:string;//可选类型时使用
  optionName?:string;
}
```

type 支持的类型有:Text、Number、Checkbox、Select、Color、Button以及自定义的类型option-text

* Text、Number、Checkbox、Select、Color、Button配置方式
  
  * 详细见:[grapes](https://grapesjs.com/docs/modules/Traits.html#built-in-trait-types)

* option-text 配置方式:

```
{
  type: 'option-text',
  name: 'showSubtitle',
  value: true,
  optionName: 'subTitle',
  optionValue: '副标题',
  placeHold: '可选副标题',
 }
```

#### 2、TypeConfig

```
export interface TypeConfig {
  tagName: string; //标签名称
  render: (attributes: any) => JSX.Element; //渲染逻辑
  traits: (opt: any) => Array<ITraits>; //修改属性
}
```

render 的参数是你配置的traits 中的{name:value};取值注意。

## 结语

[仓库地址](https://coding.jd.com/smarthome_fe/iot-ui.git)