设计器

PC 端、移动端的界面都需要在 PC 端进行设计，所以设计器组件只需在 PC 端安装即可，且安装、引用、使用方式完全相同。可通过设计器组件的 type 属性（值为"PC"或"mobile"，默认为"PC"）区分设计器类型。

安装

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>
  <HiPageDesign
    ref="design"
    :json="state.json"
    type="PC"
    :component-list="componentList"
    :open-intl="openIntl"
    :intl-option="intlOption"
  >
    <template #action>
      <a-button type="primary" @click="save">保存</a-button>
    </template>
  </HiPageDesign>
</template>

<script lang="ts" setup>
  import { reactive, ref } from "vue";
  import { useI18n } from "vue-i18n";
  import componentList from "pangea-ui/dist/customConfig";

  const design = ref();
  const state = reactive({
    json: {
      pages: [
        {
          type: "default",
          name: "默认页",
          key: 0,
          props: {
            backgroundColor: "#f0f2f5",
            padding: "",
          },
          coms: [],
        },
      ],
      apis: [],
      params: [],
    },
  });
  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>

API

Props

参数名	描述	类型	默认值
json	设计器页面配置数据	Object	[]
tabs	顶部 tab 页签配置项	tabs[]
componentList	组件列表数据，不传入时使用默认组件列表	componentList[]
templateList	模板列表数据，不传入不显示模板列表	templateList[]
openIntl	是否开启国际化	boolean
intlOption	国际化配置项	intlOption
type	设计器类型	PC/mobile	PC
customCodeSuggestion	自定义代码编辑提示	ICustomCodeSuggestion[]	[]

intlOption

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

slot

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

events

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

interface tabs {
  icon: ""; // 图标
  title: ""; // 标题
  slotName: ""; // name
}
interface componentList {
  id: "";
  groupName: "";
  comDetailsList: [
    {
      code: string,
      name: string,
      desc: string,
      icon: string,
      config: any,
      defaultProps: any,
    }
  ];
}
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",
  ...
}