smartdev-iot-com
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

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 端口看到以下内容:

preview.png

开发项目

一、项目结构

  • 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 字体图标

二、开发

  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配置方式

  • 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};取值注意。

结语

仓库地址

Readme

Keywords

none

Package Sidebar

Install

npm i smartdev-iot-com

Weekly Downloads

0

Version

0.0.5

License

ISC

Unpacked Size

2.21 MB

Total Files

937

Last publish

Collaborators

  • lin5073491