@skylla/engine v2.0.57

Visual Docs - 可视化文档

Family Bucket - 全家桶介绍

1. CORE: @skylla/core
2. GUI: @skylla/gui
3. DEV: @skylla/dev
4. SDK: @skylla/sdk

Platform 平台（接入）

# install packages
yarn add @skylla/core
yarn add @skylla/gui

// import packages
import * as CORE from '@skylla/core';
import * as GUI from '@skylla/gui';

// get apis from visual
const { visualPlugin, visualStore, visualGui } = CORE;

// step 1: init STORE - set module into vuex, name `visual`
[vuex modules].visual = visualStore(/* some utils injection */);

// step 2: init GUI
visualGui(GUI);

// step 3: init PLUGIN
app.use(visualPlugin);

DEV 使用范例

@skylla/dev 是一个能让你拥有 Visual 组件库开发能力的依赖

# install package
yarn add --dev @skylla/dev

// in package.json
{
  "scripts": {
    "build": "visual-render --watch",
    "serve": "visual-server"
  }
}

STORE - 关于数仓

Visual 采用 store 形式 作 状态管理

内置配置（不可修改）

{
  // 预设配置
  preset: { /* Any */ },

  // 界面配置
  interface: { /* Any */ }
}

模板数据

{
  // 全局数仓
  store: [ /* Array => Object */ ],

  // 页头页尾 数仓
  vertexes: {
    // 页头
    header: [ /* Array => Object */ ],

    // 页尾
    footer: [ /* Array => Object */ ],
  },

  // 页面设置
  setting: { /* Any */ },
}

QUERY HACK - 参数彩蛋

• material={material}: （必须）加载物料库
• version={version}: （可选）指定物料库版本
• debug={material}: （可选）开启物料库本地调试模式
• mock={boolean}: （可选）是否开启接口 mock 模式
• draft={boolean}: （可选）是否开启草稿功能（可用于本地数据调试）
• print={boolean}: （调试）设值 false 可于 /preview 阻止打印
• pdf=save: （调试）于 /preview 触发 PDF 转换，并保存 PDF 文件

TIP: 关于 物料库 版本（version）的逻辑

• 如：有 id 的情况，则待读取 store 数据后，根据 store 中记录的 version 加载 material（action: visual/STORE_GET）
• 如：无 id，则根据 query 中的 version 参数，加载 material
• 如：query 中亦无 version 参数，则加载 latest 版本的 material

KEY OF API - 接口键值说明

• templateType: 模板类型
• templateName: 模板名称
• fields: 单类型数据
• collections: 复合型数据

附: 名词解释

• container: （可视化）容器
• adsorbent: （面板）吸附
• page: 页面
• panel: 面板
  • console: 操作台（区）
  • toper: 顶条（区）
  • materials: 物料（区）
  • layer: 图层（区）
  • optional: 配置（区）
  • setting: 全局设置（区）
  • copyright: 版权（区）
• grid: 珊格
• eye: 俯瞰