设计器

安装

盘古门户引擎使用Vue3语言实现，当第三方平台或系统使用Vue3语言搭建时，可通过安装NPM组件包使用设计器和渲染器组件。

yarn add pangea-ui

注意

盘古平台内置前端门户引擎，全新项目可通过使用盘古平台使用前端门户能力。

完整引用

import { createApp } from "vue";
import ArcoVue from "@arco-design/web-vue";
import ArcoVueIcon from "@arco-design/web-vue/es/icon";
import App from "./App.vue";
import PangeaUi from "pangea-ui";
import "pangea-ui/dist/style.css";

createApp(App).use(ArcoVue).use(ArcoVueIcon).use(PangeaUi).mount("#app");

按需加载（模板）

<template>
  <template>
    <HiDashboardDesign
      ref="designRef"
      :json="state.json"
      :component-list="[]"
      type="dashboard"
      :open-intl="openIntl"
      :intl-option="intlOption"
    >
      <template #action>
        <a-button type="primary" @click="save">保存</a-button>
      </template>
    </HiDashboardDesign>
  </template>

  <script lang="ts" setup>
    import { reactive, ref } from "vue";
    import HiDashboardDesign from "pangea-ui/dist/hi-dashboard-design";
    const designRef = ref(); // 设计器ref
    const state = reactive({
      json: {
        pages: [
          {
            key: 0,
            type: "dashboardDefault",
            name: "仪表盘容器",
            code: "",
            display: "",
            props: {
              backgroundColor: "white",
              events: {},
            },
            bindProps: {},
            coms: [],
            mode: "",
          },
        ],
        params: [],
        apis: [],
        funcs: [],
      },
    });
    const openIntl = ref(true); // 是否开启国际化
    const { t } = useI18n();
    const intlOption = {
      intlList: [], // 设计器左侧国际化的列表数据
      langList: [
        {
          languageCode: "zh_CN",
          languageName: "简体中文",
        },
        {
          languageCode: "en_GB",
          languageName: "English",
        },
      ], // 支持配置的语言列表
      languageCode: "zh_CN", // 当前语言环境
      registerMessage: registerMessage, // 国际化注册方法, 用于设计器内实时注册国际化数据
      showAlias: showAlias, // 国际化值渲染函数
    };

    // 注册国际化，intlList为设计器内已添加的国际化数据
    // intlList数据示例：[{LANGUAGE_KEY: "intl_uuid", "zh_CN": "测试", "en_GB": "test"}]
    function registerMessage(intlList) {
      // 用户根据传入的国际化数据以及系统当前的语言环境处理进行国际化注册
    }

    // 将国际化key等渲染为显示数据
    function showAlias(val) {
      let aliasT = val;
      let alias = val;
      try {
        alias = JSON.parse(val);
      } catch (error) {}
      if (alias && typeof alias === "object") {
        // 对象
        if (alias.intlKey) {
          aliasT = t?.(alias.intlKey) || alias.intlKey;
        } else {
          aliasT = alias.val;
        }
      } else if (alias && typeof alias === "string") {
        // 字符串
        aliasT = alias.startsWith("intl_") ? t?.(alias) : alias;
      }
      return aliasT;
    }

    const save = () => {
      console.log(design.value.getPageJson());
      state.json.pages[0].name += "1";
    };
  </script>
</template>

API

Props

参数名	描述	类型	默认值
json	设计器页面配置数据	Object	[]
tabs	顶部 tab 页签配置项	tabs[]
componentList	卡片列表数据	componentList[]
openIntl	是否开启国际化	boolean
intlOption	国际化配置项	intlOption
type	门户设计器类型	dashboard	dashboard
customCodeSuggestion	自定义代码编辑提示	ICustomCodeSuggestion[]	[]

intlOption

参数名	描述	类型	默认值
intlList	设计器中的国际化数据列表	IntlItem[]	[]
langList	国际化语言列表	LanguageItem[]
languageCode	当前语言环境	string	zh_CN
registerMessage	设计器内注册国际化方法	function
showAlias	渲染国际化数据方法	function
isNew	是否为新国际化	boolean	false

slot

属性名	描述
logo	设计器头部 logo 和标题自定义区域
action	设计器头部操作按钮自定义区域

events

属性名	描述
getPageJson	获取 json 方法
getIntlData	获取设计器内的国际化列表数据
getComponentList	获取组件列表数据

interface tabs {
  icon: ""; // 图标
  title: ""; // 标题
  slotName: ""; // name
}
interface componentList {
  id: "";
  groupName: "";
  components: [
    {
      code: string,
      name: string,
      desc: string,
      icon: string,
      config: any,
      defaultProps: any,
      component?: object,
      descriptions?: string,
      jsPath?: string,
    }
  ];
}
interface templateList {
  code: string;
  name: string;
  desc: string;
  icon: string;
  config: any;
  defaultProps: any;
}
interface LanguageItem {
  langaugeCode: string;
  languageName: string;
}
interface IntlItem {
  LANGUAGE_KEY: string;
  [语言编码]: string;
}
interface ICustomCodeSuggestion {
  meta: string; // 提示信息
  caption: string; // 触发内容
  value: string; // 自动填充代码内容
  score: number; // 权重，数值越大越靠前
}

国际化说明

目前设计器支持中文和英文两种语言。 传递国际化语言列表时遵循统一的语言编码。

{
  "中文": "zh_CN",
  "英文": "en_GB",
  "日语": "ja_JP",
  "法语": "fr_FR",
  "西班牙语": "es_ES",
  "越南语": "vi_VN",
  ...
}