工具平台ui组件包/ob-toolplat-ui

目录

• 安装/引用
• 组件
  • 平台顶部条
  • 平台侧边栏
  • 插件详情
  • 插件列表
  • 节点列表
  • 用户信息
• 样式
• 属性/事件
• 数据
  • 传入/使用
  • 数据结构体
• 依赖项
• 注意事项
• 潜在优化点

安装/引用

• 安装 在package.json中添加依赖项

  • "element-ui": "^2.15.6"
  • "ob-toolplat-plugin-info: "^0.0.10"

  后使用npm install安装

• 引用

  • 引用ElementUI依赖 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
  • 引用组件 import PluginInfo from 'ob-toolplat-plugin-info' import 'ob-toolplat-plugin-info/lib/ob-toolplat-plugin-info.css' Vue.use(PluginInfo)

组件

平台顶部条

<header-bar>

- 属性

| 属性/Attribute | Type | Description | | :--: | :--: | :--: | | -- | -- | -- |

- 事件

| 事件/Event | Description | Parameter | | :--: | :--: | :--: | | -- | -- | -- |

- 样式

- 数据

-- 暂无 --

平台侧边栏

<side-bar>

- 属性

| 属性/Attribute | Type | Description | | :--: | :--: | :--: | | -- | -- | -- |

- 事件

| 事件/Event | Description | Parameter | | :--: | :--: | :--: | | select | 侧边选中 | home/database/node |

- 样式

- 数据

-- 暂无 --

插件列表

<plugin-list>

- 属性

| 属性/Attribute | Type | Description | | :--: | :--: | :--: | | pluginInfoList | array | 插件基础信息列表 | | installed | bool | 是否为已安装列表 |

- 事件

| 事件/Event | Description | Parameter | | :--: | :--: | :--: | | install | 插件安装 | id: 选中插件的id | | uninstall | 插件卸载 | id: 选中插件的id | | info | 查看某插件的详情 | id: 选中插件的id | | select | 插件列表选中 | id: 选中插件的id |

- 方法

| 方法/Method | Description | Parameter | | :--: | :--: | :--: | | AppendPluginList(pluginList) | 添加新插件列表 | pluginList: 需要添加的插件列表 | | removePlugin(plugin) | 从列表中删除插件 | plugin: 需要删除的插件object |

节点列表

<node-list>

- 属性

| 属性/Attribute | Type | Description | | :--: | :--: | :--: | | localDisconnected | bool | 本地节点是否断开 |

- 事件

| 事件/Event | Description | Parameter | | :--: | :--: | :--: | | local-disconnect | 本地节点断开 | -- | | local-connect | 本地节点连接 | -- | | select | 插件列表选中 | newNode: 新选中的节点Object |

- 方法

| 方法/Method | Description | Parameter | | :--: | :--: | :--: | | addNode(node) | 添加新节点 | node: 需要添加的新节点 | | removeNode(node) | 移除某个节点 | node: 需要移除的节点Object |

- 样式

• 已安装插件列表

• 插件库插件列表

- 数据

-- 暂无 --

插件详情

<plugin-info>

- 属性

| Attribute name | Type | Description | --- | ----------- |------| | pluginInfoBasic | object | 插件基本信息 |

- 事件

| Event name | Description | Parameter | --- | ----------- |------| | enable | 启用插件 | -- | | disable | 禁用插件 | -- | | install | 安装插件 | -- | | uninstall | 卸载插件 | -- | | beta | 插件切换为Beta版 | -- | | stable | 插件切换为稳定版 | -- |

- 方法

| 方法/Method | Description | Parameter | | :--: | -- | -- | | updateDetailInfo(detailInfo) | 更新插件详情信息 | detailInfo: 需要更新的插件详情信息 |

- 样式

- 数据

-- 暂无 --

用户信息

<user-info>

- 属性

| Attribute name | Type | Description | --- | ----------- |------| | userInfo | object | 用户信息 |

- 事件

| Event name | Description | Parameter | --- | ----------- |------| | logout | 用户登出 | -- |

- 样式

- 数据

-- 暂无 --

使用

html标签为<plugin-info> 样例可参考ob-toolplat-plugin-info/Examples/App.vue

样式

• 主页面+Detail子页

• Dependency/依赖项子页

• Change Log/变更日志子页

• History Version/历史版本子页 --样式待定--

属性/事件

• 属性/Attribute | Attribute name | Type | Description | --- | ----------- |------| | pluginInfo | object | 插件信息 |

属性数据结构体

PluginInfo

• ER-Diagram

ps: pluginInfo.localStatus.enable功能待定，是否变更为start用作开启插件按钮？

• 事件/Event | Event name | Description | Parameter | --- | ----------- |------| | enable | 启用插件 | -- | | disable | 禁用插件 | -- | | install | 安装插件 | -- | | uninstall | 卸载插件 | -- | | beta | 插件切换为Beta版 | -- | | stable | 插件切换为稳定版 | -- |

plugin-list

依赖项

• ElementUI: "element-ui": "^2.4.5",
• Marked.js: "marked": "^4.0.12",
• github-markdown-css: "github-markdown-css": "^5.1.0",
• highlight.js: "highlight.js": "^11.5.0"

注意事项

• pluginInfo.iconSrc为插件图标的url，而非路径
• pluginInfo.markdown中的数据为.md格式的单行字符串，.md文件获取和转换为单行字符串的功能考虑是在vue上做还是数据库端做？

潜在优化点

• 数据结构体pluginInfo可考虑拆未两部分，一部分为主要信息primary，一部分为次要信息secondary，对于详细页面组件可提供两部分信息，而对于插件次要信息中的依赖项列表和插件列表组件可仅提供主要信息，能减少传输数据量