@skylla/engine

engine of skylla

Usage no npm install needed!

<script type="module">
  import skyllaEngine from 'https://cdn.skypack.dev/@skylla/engine';
</script>

README

Visual Docs - 可视化文档

Family Bucket - 全家桶介绍

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

Platform 平台（接入）

# install packages
yarn add @linkjs/visual-core
yarn add @linkjs/visual-gui

// import packages
import * as CORE from '@linkjs/visual-core';
import * as GUI from '@linkjs/visual-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 使用范例

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

示例 REPO

# install package
yarn add --dev @linkjs/visual-dev

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

SDK 能力说明

点此查看

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 - 接口键值说明

resource: https://yapi.lcops.xyz/mock/913/getResource?id=109

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

附: 名词解释

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