smartdev-iot-com
v0.0.5
Published
在线预览:[戳我 😘](https://coding.jd.com/smarthome_fe/iot-ui.git)
Downloads
3
Readme
IOT UI 组件库
在线预览:戳我 😘
Q&A
1.添加了新的组件,路径也配置好了,为什么打开页面的时候展示404
a:重启项目试试
运行项目
提交代码
yarn commit
使用 yarn commit 替代 git commit生成规范的 Commit Message,当然为了效率你可以选择手写,但是要符合规范
本地预览:
git clone https://coding.jd.com/smarthome_fe/iot-ui/
cd iot-ui
yarn
yarn start
按顺序执行完命令后,即可在 localhost:3000 端口看到以下内容:
开发项目
一、项目结构
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 组件主题设置
--- 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 字体图标
二、开发
根据bool/switch 书写组件,执行yarn start 可在网站实时查看组件样式
写完组件后,配置grapesjsconfig.tsx 。拖拽工程根据这里的定义生成Type 和Block
判断该组件是否为拖拽元素(在Block.ts中导出),判断拖拽平台是否注册为基础组件(在types.ts 中导出)
发布组件
yarn release
登录服务器,停掉服务
ssh -p 22 [email protected] ps -ef | grep node 找到 node线程 //删除除了grep --color=auto **node** 以外的进程 Kill -9 进程号
升级组件库
//目录/export/servers/project/device-control-project npm update @jd/iot-ui
scp -P 22 -r /Users/fengyanwei/Desktop/图标库 [email protected]:/export/servers/project/device-control-project/public/fonts
启动服务
nohup npm run start & //回车两次
如果增加了字体图标如果将字体图标文件cp到服务器特定目录下
cd /export/servers/project/device-control-project/public 拷贝文件:scp -P 22 /Users/fengyanwei/Desktop/iot-ui-fonts.css [email protected]:/export/servers/project/device-control-project/public scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.svg [email protected]:/export/servers/project/device-control-project/public/fonts scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.ttf [email protected]:/export/servers/project/device-control-project/public/fonts scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.woff [email protected]:/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
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};取值注意。