epic-designer-gold 0.0.4 → 0.0.5

package/packages/core/extensions/EDataSource/index.vue

@@ -1,437 +0,0 @@
-<template>
-  <div class="e-data-source">
-    <Button class="btn" @click="handleAdd">
-      <EIcon name="icon--epic--window-outline" class="mr-4px" />
-      <span>配置</span>
-      <span class="icon-numbers">{{ count || sourceData.length }}</span>
-    </Button>
-    <Drawer :size="800" v-model="show" append-to-body title="数据源">
-      <div class="drawer-content">
-        <div class="drawer-content-left">
-          <Button type="primary" class="btn" @click="addDataSource">
-            <EIcon name="icon--epic--add-rounded" class="mr-4px" />
-            <span>新增数据源</span>
-          </Button>
-          <div>
-            <div
-              class="source-item"
-              :class="{ active: item.id === formData?.id }"
-              v-for="item in sourceData"
-              :key="item.id"
-              @click="clickItem(item.id)"
-            >
-              <div class="source-item-title">
-                <div>{{ item.method.toLocaleUpperCase() }}</div>
-                <div>{{ item.apiName }}</div>
-              </div>
-              <div @click="deleteItem(item.id)" class="source-item-icon">
-                <EIcon name="icon--epic--delete-outline-rounded" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="drawer-content-right">
-          <div class="content">
-            <div class="content-empty" v-if="!formData || !Object.keys(formData).length">请选择数据源</div>
-            <div class="content-form" v-else>
-              <Form ref="ruleFormRef" :model="formData" label-position="top" :rules="rules" :label-width="120">
-                <FormItem prop="apiName" label="接口名称">
-                  <Input clearable v-model="formData.apiName"></Input>
-                </FormItem>
-                <FormItem prop="url" label="请求地址">
-                  <Input v-model="formData.url"></Input>
-                </FormItem>
-                <FormItem label="请求方法" required>
-                  <RadioGroup v-model="formData.method">
-                    <RadioButton label="GET" value="get">GET</RadioButton>
-                    <RadioButton label="POST" value="post">POST</RadioButton>
-                    <RadioButton label="PUT" value="put">PUT</RadioButton>
-                    <RadioButton label="DELETE" value="delete">DELETE</RadioButton>
-                  </RadioGroup>
-                </FormItem>
-                <div class="form-flex">
-                  <FormItem prop="dataKey" style="width: 30%" label="标签键名">
-                    <Input v-model="formData.dataKey"></Input>
-                  </FormItem>
-                  <FormItem prop="dataValue" style="width: 30%" label="值键名">
-                    <Input v-model="formData.dataValue"></Input>
-                  </FormItem>
-                  <FormItem style="width: 33%" label="数据位置">
-                    <Input v-model="formData.dataPath"></Input>
-                  </FormItem>
-                </div>
-                <div class="form-item">
-                  <div class="form-item-title">
-                    请求参数
-                    <Button @click="addParams" text type="primary" class="btn">
-                      <EIcon name="icon--epic--add-rounded" />
-                      添加
-                    </Button>
-                  </div>
-                  <div class="form-item-content" v-if="formData?.paramsList && formData?.paramsList.length">
-                    <div class="content-item" v-for="(it, i) in formData.paramsList" :key="it.value">
-                      <Select
-                        v-model="it.label"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数名"
-                      ></Select>
-                      <Select
-                        v-model="it.value"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数值"
-                      ></Select>
-                      <Button @click="deleteParams(i)" type="danger" circle>
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-                <div class="form-item">
-                  <div class="form-item-title">
-                    请求头
-                    <Button @click="addHeader" text type="primary" class="btn">
-                      <EIcon name="icon--epic--add-rounded" />
-                      添加
-                    </Button>
-                  </div>
-                  <div class="form-item-content" v-if="formData?.headerList && formData?.headerList.length">
-                    <div class="content-item" v-for="(it, i) in formData.headerList" :key="i">
-                      <Select
-                        v-model="it.label"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数名"
-                      ></Select>
-                      <Select
-                        v-model="it.value"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数值"
-                      ></Select>
-                      <Button @click="deleteHeader(i)" type="danger" circle>
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-                <div class="form-item">
-                  <div class="form-item-title">
-                    请求体
-                    <Button @click="addData" text type="primary" class="btn">
-                      <EIcon name="icon--epic--add-rounded" />
-                      添加
-                    </Button>
-                  </div>
-                  <div class="form-item-content" v-if="formData?.bodyList && formData?.bodyList.length">
-                    <div class="content-item" v-for="(it, index) in formData.bodyList" :key="index">
-                      <Select
-                        v-model="it.label"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数名"
-                      ></Select>
-                      <Select
-                        v-model="it.value"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数值"
-                      ></Select>
-                      <Button @click="deleteData(i)" type="danger" circle>
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </Button>
-                      <!-- <div class="icon-bg">
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </div> -->
-                    </div>
-                  </div>
-                </div>
-                <div class="content-right-btn">
-                  <Button type="info" @click="testRequire">请求测试</Button>
-                  <Button type="primary" @click="save">保存</Button>
-                </div>
-                <!-- <FormItem label="表单初始化请求">
-                  <Switch v-model="formData.init" inline-prompt active-text="是" inactive-text="否"></Switch>
-                </FormItem> -->
-              </Form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Drawer>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, onMounted, provide, reactive, ref, watch, watchEffect } from "vue";
-import { pluginManager, deepClone, EventBus } from "@epic-designer/utils";
-import type { ComponentSize, FormInstance, FormRules } from "element-plus";
-import { ElMessage } from "element-plus";
-import EIcon from "../../components/icon";
-import axios from "axios";
-const Button = pluginManager.getComponent("button");
-const Drawer = pluginManager.getComponent("Drawer");
-const Input = pluginManager.getComponent("input");
-const FormItem = pluginManager.getComponent("FormItem");
-const Form = pluginManager.getComponent("Form");
-const RadioGroup = pluginManager.getComponent("RadioGroup");
-const RadioButton = pluginManager.getComponent("RadioButton");
-const Select = pluginManager.getComponent("select");
-const Switch = pluginManager.getComponent("switch");
-const emits = defineEmits(["update:modelValue", "update:sourceData"]);
-const ruleFormRef = ref<FormInstance>();
-const count = ref(0);
-
-interface RuleForm {
-  apiName: string;
-  url: string;
-  dataKey: string;
-  dataValue: string;
-  dataPath: string;
-}
-const rules = reactive<FormRules<RuleForm>>({
-  apiName: [{ required: true, message: "请输入接口名称", trigger: "blur" }],
-  url: [{ required: true, message: "请输入请求地址", trigger: "blur" }],
-  dataKey: [{ required: true, message: "请输入标签键名", trigger: "blur" }],
-  dataValue: [{ required: true, message: "请输入值键名", trigger: "blur" }],
-});
-const show = ref(false);
-
-const sourceData = ref<any>([]);
-const formData = ref();
-const parameterArray = [
-  {
-    label: "1",
-    value: "1",
-  },
-];
-
-function handleAdd() {
-  show.value = true;
-}
-function getRandomCharacter() {
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  return characters.charAt(Math.floor(Math.random() * characters.length));
-}
-function generateRandomString(length) {
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += getRandomCharacter();
-  }
-
-  return result;
-}
-function addDataSource() {
-  formData.value = {
-    id: `${generateRandomString(5)}`,
-    url: "",
-    body: {},
-    bodyList: [],
-    // init: false,
-    apiName: `数据源_${generateRandomString(5)}`,
-    method: "get",
-    params: {},
-    paramsList: [],
-    dataKey: "name",
-    headers: {},
-    headerList: [],
-    dataPath: "",
-    dataValue: "id",
-  };
-  sourceData.value.push(formData.value);
-}
-function clickItem(id: string) {
-  sourceData.value = JSON.parse(JSON.stringify(pluginManager.getSourceData()));
-  if (formData.value?.id === id) {
-    formData.value = {};
-  } else {
-    formData.value = sourceData.value.find((el: { id: string }) => el.id === id);
-    // formData.value = JSON.parse(JSON.stringify(obj));
-    formData.value.paramsList = Object.keys(JSON.parse(formData.value.params)).map((el) => {
-      return {
-        label: el,
-        value: JSON.parse(formData.value.params)[el],
-      };
-    });
-    formData.value.bodyList = Object.keys(JSON.parse(formData.value.body)).map((el) => {
-      return {
-        label: el,
-        value: JSON.parse(formData.value.body)[el],
-      };
-    });
-    formData.value.headerList = Object.keys(JSON.parse(formData.value.headers)).map((el) => {
-      return {
-        label: el,
-        value: JSON.parse(formData.value.headers)[el],
-      };
-    });
-  }
-}
-function deleteItem(id: string) {
-  // sourceData.value = sourceData.value.filter((el: { id: string }) => el.id !== id);
-  // if (id === formData.value?.id) {
-  //   formData.value = {};
-  // }
-  EventBus.emit("deleteSourceData", id);
-}
-// 请求参数
-function addParams() {
-  formData.value?.paramsList.push({
-    label: "",
-    value: "",
-  });
-}
-function deleteParams(i: number) {
-  formData.value.paramsList.splice(i, 1);
-}
-// 请求头
-function addHeader() {
-  formData.value?.headerList.push({
-    label: "",
-    value: "",
-  });
-}
-function deleteHeader(i: number) {
-  formData.value.headerList.splice(i, 1);
-}
-// 请求体
-function addData() {
-  formData.value?.bodyList.push({
-    label: "",
-    value: "",
-  });
-}
-function deleteData(i: number) {
-  formData.value.bodyList.splice(i, 1);
-}
-
-onMounted(() => {
-  sourceData.value = JSON.parse(JSON.stringify(pluginManager.getSourceData()));
-});
-
-// 数据源保存时，接收数据
-EventBus.on("updateSource", (val: any) => {
-  sourceData.value = JSON.parse(JSON.stringify(pluginManager.getSourceData()));
-});
-async function testRequire() {
-  (ruleFormRef.value as any).validate(async (valid: boolean) => {
-    if (valid) {
-      try {
-        const params = {};
-        formData.value.paramsList.forEach((el: any) => {
-          params[el.label] = el.value;
-        });
-        const body = {};
-        formData.value.bodyList.forEach((el: any) => {
-          body[el.label] = el.value;
-        });
-        const headers = {};
-        formData.value.headerList.forEach((el: any) => {
-          headers[el.label] = el.value;
-        });
-        let res = await axios({
-          method: formData.value.method,
-          // url: formData.value.url,
-          url: "http://localhost:3333/users",
-          params,
-          data: body,
-          headers,
-        });
-        if (formData.value.dataPath) {
-          if (res.data[formData.value.dataPath] && res.data[formData.value.dataPath].length) {
-            ElMessage({
-              message: res.data[formData.value.dataPath].map((el: any) => {
-                return {
-                  label: el[formData.value.dataKey],
-                  value: el[formData.value.dataValue],
-                };
-              }),
-            });
-          } else {
-            ElMessage.info("配置错误");
-          }
-        } else {
-          if (res.data && res.data.length) {
-            ElMessage({
-              message: res.data.map((el: any) => {
-                return {
-                  label: el[formData.value.dataKey],
-                  value: el[formData.value.dataValue],
-                };
-              }),
-            });
-          } else {
-            ElMessage.info("配置错误");
-          }
-        }
-      } catch (e) {
-        ElMessage.error("请求失败");
-      } finally {
-      }
-    } else {
-      ElMessage.error("请填写必填项");
-    }
-  });
-}
-async function save() {
-  console.log("%c [  ]-390", "font-size:13px; background:pink; color:#bf2c9f;", formData.value);
-  // EventBus.emit("updateSource", new Date());
-
-  formData.value.body = formData.value.bodyList.reduce((arr: Record<string, string>, cur: Record<string, string>) => {
-    arr[cur.label] = cur.value;
-    return arr;
-  }, {});
-  formData.value.params = formData.value.paramsList.reduce(
-    (arr: Record<string, string>, cur: Record<string, string>) => {
-      arr[cur.label] = cur.value;
-      return arr;
-    },
-    {}
-  );
-  formData.value.headers = formData.value.headerList.reduce(
-    (arr: Record<string, string>, cur: Record<string, string>) => {
-      arr[cur.label] = cur.value;
-      return arr;
-    },
-    {}
-  );
-  (ruleFormRef.value as any).validate((valid: boolean) => {
-    if (valid) {
-      // 编辑
-      if (formData.value.id && formData.value.formID) {
-        EventBus.emit("updateSourceData", {
-          ...formData.value,
-          body: JSON.stringify(formData.value.body),
-          params: JSON.stringify(formData.value.params),
-          headers: JSON.stringify(formData.value.headers),
-        });
-        formData.value = {};
-      } else {
-        EventBus.emit("saveSourceData", {
-          ...formData.value,
-          body: JSON.stringify(formData.value.body),
-          params: JSON.stringify(formData.value.params),
-          headers: JSON.stringify(formData.value.headers),
-        });
-        formData.value = {};
-      }
-    }
-  });
-  // pluginManager.setSourceData(sourceData.value);
-  // emits("update:modelValue", sourceData.value);
-  // provide("setSourceData", sourceData.value);
-  // count.value = pluginManager.getSourceData().length;
-}
-</script>

package/packages/core/extensions/EInputSize/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <Input class="epic-input-size" v-model="size" v-model:value="size" type="number" min="0" placeholder="请输入">
-  <template #suffix>
-    <Select v-model:value="unit" v-model="unit" style="width: 68px" :options="unitArray" />
-  </template>
-  </Input>
-</template>
-<script lang="ts" setup>
-import { pluginManager } from '@epic-designer/utils'
-import { ref, watch, nextTick } from 'vue'
-const Input = pluginManager.getComponent('input')
-const Select = pluginManager.getComponent('select')
-const props = defineProps<{
-  modelValue?: string | number
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-const size = ref<string | null>(null)
-const unit = ref('px')
-const unitArray = [
-  { label: 'px', value: 'px' },
-  { label: '%', value: '%' },
-  { label: 'vw', value: 'vw' },
-  { label: 'vh', value: 'vh' },
-  { label: 'rem', value: 'rem' },
-  { label: 'em', value: 'em' },
-  { label: 'pt', value: 'pt' }
-]
-watch(() => props.modelValue, e => {
-  if (!e) return
-  // 默认传入数值时 单位默认为px
-  if (typeof e === 'number') {
-    size.value = String(e)
-    unit.value = 'px'
-    return
-  }
-  const num = parseFloat(e)
-  // 传入值为空或不正常时
-  if (isNaN(num)) {
-    size.value = null
-    return false
-  }
-  const regex = /^(\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt){1}$/
-  const match = e.trim().match(regex)
-  size.value = match?.[1] ?? null
-  unit.value = match?.[3] ?? ''
-}, {
-  immediate: true
-})
-
-watch(() => unit.value + size.value, () => {
-  handleUpdate()
-})
-
-function handleUpdate() {
-  nextTick(() => emit('update:modelValue', size.value ? size.value + unit.value : undefined))
-}
-
-</script>

package/packages/core/extensions/EOptionsEditor/index.vue

@@ -1,195 +0,0 @@
-<template>
-  <div class="">
-    <div>
-      <div class="epic-tabs-box">
-        <div
-          class="epic-tab cursor-pointer truncate"
-          :class="{ checked: activeItem.title === item.title }"
-          v-for="(item, index) in getSchemaTypeList"
-          :key="index"
-          :title="item.title"
-          @click="handelChecked(item)"
-        >
-          {{ item.title }}
-        </div>
-      </div>
-      <div v-if="activeItem.title === '静态'">
-        <div class="py-4 my-2 text-center text-gray-400 bg-white" v-show="!innerValue?.length">暂无选项</div>
-        <EOptionItem v-model="innerValue" />
-        <Button @click="handleAdd">添加选项</Button>
-      </div>
-      <div v-else>
-        <span style="font-size: 12px; margin-bottom: 8px; display: inline-block">数据源</span>
-        <Select v-model="differValue" placeholder="请选择数据源" clearable :options="canvasScaleOptions"></Select>
-      </div>
-    </div>
-
-    <!-- <Button @click="handleAdd">123</Button> -->
-  </div>
-</template>
-
-<script lang="ts" setup>
-import EOptionItem from "./optionItem.vue";
-import { PluginManager, pluginManager, EventBus } from "@epic-designer/utils";
-import { provide, reactive, ref, watch, computed, inject, toRefs, onMounted } from "vue";
-import { useVModel } from "@vueuse/core";
-import { ElMessage } from "element-plus";
-import axios from "axios";
-const Button = pluginManager.getComponent("button");
-const Select = pluginManager.getComponent("select");
-// const sourceData = pluginManager.getSourceData();
-const canvasScaleOptions = ref([]);
-// setInterval(() => {
-//   canvasScaleOptions.value = pluginManager.sourceData.map((el: any) => {
-//     return {
-//       ...el,
-//       label: el.name,
-//       value: el.id,
-//     };
-//   });
-// }, 0);
-const activeItem = reactive({
-  title: "静态",
-});
-const props = defineProps<{
-  tree?: boolean;
-  modelValue: Option[];
-  dynamicId?: String;
-  type?: string;
-}>();
-
-const emit = defineEmits(["update:modelValue", "update:EOptionsEditor"]);
-
-// 数据源更新
-EventBus.on("updateSource", (val: any) => {
-  canvasScaleOptions.value = pluginManager.sourceData.map((el: any) => {
-    return {
-      ...el,
-      label: el.apiName,
-      value: el.id,
-    };
-  });
-});
-onMounted(() => {
-  canvasScaleOptions.value = pluginManager.sourceData.map((el: any) => {
-    return {
-      ...el,
-      label: el.apiName,
-      value: el.id,
-    };
-  });
-});
-const innerValue = useVModel(props, "modelValue", emit);
-const differValue = useVModel(props, "dynamicId", emit);
-
-// 检测数据下拉框之类的数据是否可用
-function testArray(data: any) {
-  if (data && Object.prototype.toString.call(data) === "[object Array]") {
-    return data;
-  } else {
-    ElMessage.info("请检查数据位置是否配置准确");
-    // 获取的不是数字
-    return [];
-  }
-}
-
-watch(
-  () => differValue.value,
-  async () => {
-    if (differValue.value) {
-      activeItem.title = "动态";
-      // differValue.value.type = "动态";
-      const data: any = canvasScaleOptions.value.find((el: any) => el.id === differValue.value);
-      let res = await axios({
-        method: data?.method || "get",
-        // url: "/test" + data.url,
-        url: "http://localhost:3333/users",
-        params: data?.params ? JSON.parse(data?.params) : {},
-        data: data?.data ? JSON.parse(data?.data) : {},
-        headers: data?.header ? JSON.parse(data?.header) : {},
-      });
-      if (data && data?.dataPath) {
-        innerValue.value = testArray(res.data[data.dataPath]);
-      } else {
-        innerValue.value = testArray(res.data);
-      }
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-const getSchemaTypeList = [
-  {
-    title: "静态",
-  },
-  {
-    title: "动态",
-  },
-];
-
-function handelChecked(item: { title: string }) {
-  activeItem.title = item.title;
-  if (item.title === "静态") {
-    differValue.value = "";
-  } else {
-    // innerValue.value = [];
-  }
-}
-
-const inner = props.modelValue;
-
-interface Option {
-  label: string;
-  value: string;
-  children?: Option[];
-}
-
-provide("tree", props.tree);
-
-/**
- *  添加选项
- */
-function handleAdd() {
-  const option: Option = reactive({
-    label: "",
-    value: "",
-  });
-  if (innerValue.value.length) {
-    innerValue.value = [...innerValue.value, option];
-  } else {
-    innerValue.value = [option];
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.epic-tabs-box {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  background: var(--epic-compoent-tabs-color);
-  padding: 6px;
-  box-sizing: border-box;
-  margin-bottom: 12px;
-
-  .epic-tab {
-    height: 32px;
-    line-height: 28px;
-    border-radius: 6px;
-    font-size: var(--epic-text-sm);
-    font-weight: 500;
-    letter-spacing: 0em;
-    color: var(--epic-text-main);
-    // margin-bottom: 10px;
-    text-align: center;
-    flex: 1;
-
-    &.checked {
-      color: var(--epic-primary-color);
-      background-color: var(--epic-primary-hover-color);
-    }
-  }
-}
-</style>