/umi-ui

Umi UI for umi 3

Primary LanguageTypeScript

Umi UI

Umi 研发工作台,集成一系列可视化辅助编程(VAP)插件,帮助开发者更快更好地开发 Umi 项目。

https://user-images.githubusercontent.com/13595509/73431180-c77ab400-437a-11ea-9baa-ebd00109b1d0.png

用于 umi@3 项目

🎬 快速开始

第一步,先在项目中安装 @umijs/preset-ui

$ yarn add @umijs/preset-ui -D

开始使用:

# in umi project root path
- $ umi dev

✨ 主要功能

任务

命令可视化展示

https://camo.githubusercontent.com/9352fc593eb35e8cde6162b8a333d32d2a3c3197/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323031392f6769662f38363032352f313537303638373036313932302d36663239623636342d346335382d343335312d383933622d6234333035333334316366352e676966

资产

页面中插入区块

https://camo.githubusercontent.com/b8218fb0de21a567f474c0bb4e4a9d8dd96257ca/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323031392f6769662f38363032352f313537343134353634323731322d34656638663065302d623833352d343633382d616336382d3732336163303736393533352e676966

指定页面中可插入区块位置

import React from 'react';
import { UmiUIFlag } from 'umi';

import { Button } from 'antd';

export default () => (
  <div>Hello
    <div>
      <p>World</p>
      <UmiUIFlag />
      <p>
        aaaaa
        <div>
          <UmiUIFlag inline />Hello Inline<UmiUIFlag inline />
        </div>
      </p>
    </div>
    <Button type="primary">World</Button>
  </div>
)

https://user-images.githubusercontent.com/13595509/73427305-731f0680-4371-11ea-83de-1f19a99c32cd.png

从页面打开资产

gif

window.postMessage(
  JSON.stringify({
    action: 'umi.ui.block.addTemplate',
    // 只需要 4 个参数
    payload:  {
      name: '分析页',
      key: "DashboardAnalysis",
      url: "https://github.com/ant-design/pro-blocks/tree/master/DashboardAnalysis",
      path: "DashboardAnalysis",
    }
  }),
  '*'
)

小气泡信息提示

aaa

如果 UI 插件希望调用小气泡,可通过以下 API:

// 小气泡开启 loading
window.parent.postMessage(
  JSON.stringify({
    action: 'umi.ui.toggleIconLoading',
  }),
  '*',
);

// 修改小气泡显示的文字
window.parent.postMessage(
  JSON.stringify({
    action: 'umi.ui.changeEdit',
    payload: {
      'zh-CN': 'OneAPI 更新了',
      'en-US': 'OneAPI Updated',
    },
  }),
  '*',
);

更多功能

📖 API

API 由 Umi 插件基础 API + 客户端 API 组成。

😊 如何贡献?

master 用于 umi@3

目录结构

.
├── README.md
├── examples
│   └── app # dev 开发时测试的项目
├── lerna.json
├── package.json
├── packages
│   ├── preset-ui # ui 插件集,包含后面的插件
│   │   ├── package.json
│   │   └── src
│   │       ├── bubble # mini 版小气泡
│   │       ├── index.ts # 集成 blocks、tasks、./plugins/*
│   │       └── plugins
│   │           ├── configuration # 配置 UI 插件
│   │           ├── dashboard # Dashboard 面板插件
│   │           └── routes # TODO: 路由
│   │  
│   ├── block-sdk # 区块 SDK,用于 plugin-blocks 和 plugin-ui-blocks
│   │   ├── package.json
│   │   ├── .fatherrc.ts # father-build 构建 cjs
│   │   └── src # sdk 主体
│   │
│   ├── plugin-ui-blocks # 资产 UI 插件
│   │   ├── dist # ui 目录构建的 index.umd.js
│   │   ├── package.json
│   │   ├── .fatherrc.ts # father-build 构建 umd 与 cjs
│   │   ├── src # 服务端逻辑
│   │   └── ui # 客户端 UI 部分
│   ├── plugin-ui-tasks
│   │   ├── package.json
│   │   ├── src
│   │   └── ui
│   ├── theme # Umi UI 主题包,后续更换成 antd@4 暗色主题包
│   │   ├── dark.less
│   │   ├── light.less
│   │   └── package.json
│   ├── types # Umi UI 类型,集成在 @umijs/types 中,建议社区插件从 @umijs/types 导入
│   └── ui # Umi UI server
│       ├── client # Umi UI 主体
│       │   └── src
│       │       └── PluginAPI.ts # 提供插件客户端 API
│       ├── package.json
│       └── src # Umi UI Server
├── scripts
│   ├── dev.ts
│   ├── publish.js
│   ├── syncTNPM.js # 同步 tnpm
│   ├── ui.js # ui 构建脚本,使用 umi 构建 Umi UI 主框架
│   └── uiPlugins.js
└── test # TODO: 更多场景测试用例
     └── ui.e2e.ts  # e2e 测试用例

准备工作

clone 下仓库后,先执行相应包的安装、link 工作。

$ yarn

开发调试

执行构建,并且带上 -w 用于实时修改编译:

# 单独一个终端
$ yarn build -w

执行 UI 构建,也带上 -w

# 另启一个终端
$ yarn ui:build -w

进入 cd example/app 测试项目:

# 第三个终端
# 仓库调试带上了 BABEL_CACHE=none DEBUG=umiui*
$ yarn start
🚀 Starting Umi UI using umi@3.0.1...
🌈 Umi UI mini Ready on port 3000

访问 http://localhost:3000 就是 Umi UI。

调试如图:

插件开发原理

UI 插件与普通 Umi 的插件实际是一样的原理。

只是比一般的 Umi 插件,多使用两个 API:

  • api.addUIPlugin 用于加载 ui 的 umd 包
  • api.onUISocket 为前端 ui 提供服务端接口

了解更多

UI 插件组织

本仓库包括:

  • UI Server(@umijs/ui/src/UmiUI.ts,使用 Express)
  • UI 主框架(@umijs/ui/client,使用 umi 构建)
  • UI 插件集(@umijs/plugin-ui)
    • Dashboard 面板(./plugins/dashboard)
    • 配置插件(./plugins/configuration)
    • 资产插件(@umijs/plugin-ui-blocks)
    • 任务插件(@umijs/plugin-ui-tasks)