@skylla/materials NPM

开发说明

使用 `@skylla/dev` 搭建物料库开发环境

npm i -d @skylla/dev
# or
yarn add -D @skylla/dev

// package.json
{
  "scripts": {
    "serve": "server",
    "build": "render",
  }
}

# 1. 启动物料库本地浏览服务，默认端口：3000
yarn serve

# 2. 启动物料库开发监听服务
yarn build --watch

开启调试模式

https://printer.domain/visual?debug={material-namepsace}

目录结构

.
├─ index.js - 入口文件
├─ vue.config.js - 环境配置文件（参考 vue-cli 文档）
├─ /dist -（实时）编译输出目录
├─ /deploy - CICD 构建目录
└─ /src - 源码目录
   └─ <material-name> // 组件目录
      └─ index.vue // 组件主文件
      └─ option.vue // 组件配置文件

数据结构

{
  /* 组件名称 */
  "name": <string>,

  /* 源信息 */
  "meta": <object>,

  /* 坐标信息 */
  "axes": <object>,

  /* 数源 - 参考：https://yapi.lcops.xyz/mock/913/getResource */
  "source": <object>,

  /* 配置 - 参考：各组件目录下 readme.md 文件 */
  "option": {
    /* 样式类 */
    "css": <object>,

    /* 预设类 */
    "preset": <object>,

    /* 表单类 */
    "formic": <object>,

    /* 存续类 - 于 非编辑时态 使用 */
    "vars": <object>
  },
};

组件结构

index.vue

export default {
  // 组件注册名
  name: "m-text",

  // 组件源信息
  meta: {
    // 唯一身份标识
    id: "952713",
    // 图标（取自 Antv）
    icon: "FormOutlined",
    // 组件名称
    label: "文本",
    // 排序权重
    index: 100,
    // 可用性
    disabled: false
  },

  // 坐标信息
  axes: {
    x: 0,
    y: 0,
    w: 200,
    h: 160
  },

  // 入参: 整个 props 可以不写, 环境中默认有 mixin 处理
  props: {
    // 数源
    source: {
      type: [Object],
      default() {
        return {};
      }
    },

    // 配置
    option: {
      type: [Object],
      default() {
        return {};
      }
    }
  }
};

option.vue

// 纯净如新 (无需任何入参, 也可接受index.vue的prop)
export default {};

内置能力

STORE 数仓

// 快速更新状态
// 注: `visual` 是 可视化平台 默认 命名空间
this.$store.update("visual", {
  namespace: "printer"
});

// 内置状态
this.preview; // 打印状态识别
this.preset; // 属性预设
this.setting; // 全局设置
this.background; // 背景设置
this.one; // 当前栅格单元
this.axes; // 坐标信息
this.materials; // 组件（物料）信息

HTTP 请求

// Send a Get Request
await this.$http(<address>).get(<params>, <option>);

// Send a Post Request
await this.$http(<address>).post(<params>, <option>);