epic-designer-gold 1.0.0 → 1.0.1

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

@@ -0,0 +1,243 @@
+<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";
+import Cookies from "js-cookie";
+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 | number;
+  type?: string;
+}>();
+
+const emit = defineEmits(["update:modelValue", "update:EOptionsEditor"]);
+
+// 数据源删除
+EventBus.on("deleteSourceData", (e) => {
+  if (differValue.value === e) {
+    differValue.value = "";
+    innerValue.value = [];
+    // handleSelectChecked(differValue.value);
+  }
+});
+// 数据源更新
+EventBus.on("updateSource", (val: any) => {
+  canvasScaleOptions.value = pluginManager.sourceData.map((el: any) => {
+    return {
+      ...el,
+      label: el.apiName,
+      value: el.id,
+    };
+  });
+  // handleSelectChecked(differValue.value);
+});
+onMounted(() => {
+  canvasScaleOptions.value = pluginManager.sourceData.map((el: any) => {
+    return {
+      ...el,
+      label: el.apiName,
+      value: el.id,
+    };
+  });
+  // handleSelectChecked(differValue.value);
+});
+const innerValue = useVModel(props, "modelValue", emit);
+const differValue = useVModel(props, "dynamicId", emit);
+
+// 检测数据下拉框之类的数据是否可用
+function testArray(item: any, key: string, value: string) {
+  if (item && Object.prototype.toString.call(item) === "[object Array]") {
+    return item.map((data: any) => {
+      if (data.children && data.children.length) {
+        return {
+          label: data[key],
+          value: data[value] + "",
+          children: testArray(data.children, key, value),
+        };
+      } else {
+        return {
+          label: data[key],
+          value: data[value] + "",
+        };
+      }
+    });
+  } else {
+    ElMessage.info("请检查数据位置是否配置准确");
+    // 获取的不是数字
+    return [];
+  }
+}
+
+watch(
+  () => differValue.value,
+  async () => {
+    if (differValue.value) {
+      activeItem.title = "动态";
+    } else {
+      activeItem.title = "静态";
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+const getSchemaTypeList = [
+  {
+    title: "静态",
+  },
+  {
+    title: "动态",
+  },
+];
+
+async function handelChecked(item: { title: string }) {
+  activeItem.title = item.title;
+  if (item.title === "静态") {
+    innerValue.value = [];
+    differValue.value = "";
+  } else {
+    innerValue.value = [];
+    canvasScaleOptions.value = pluginManager.sourceData.map((el: any) => {
+      return {
+        ...el,
+        label: el.apiName,
+        value: el.id,
+      };
+    });
+  }
+}
+async function handleSelectChecked(item: any) {
+  const data: any = canvasScaleOptions.value.find((el: any) => el.id === item);
+  if (data && data.url) {
+    let res = await axios({
+      method: data?.method || "get",
+      url: 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),
+            Authorization: "Bearer " + Cookies.get("Admin-Token"),
+          }
+        : {
+            Authorization: "Bearer " + Cookies.get("Admin-Token"),
+          },
+    });
+    if (data && data?.dataPath) {
+      const arr = data.dataPath.split(".");
+      const result = arr.reduce((pre: any, cur: any) => {
+        return pre[cur];
+      }, res.data);
+      innerValue.value = testArray(result, data.dataKey, data.dataValue);
+    } else {
+      innerValue.value = testArray(res.data, data.dataKey, data.dataValue);
+    }
+  }
+}
+
+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>

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

@@ -0,0 +1,72 @@
+<template>
+  <draggable v-model="innerValue" item-key="id" :component-data="{
+    type: 'transition-group',
+  }" group="option-list" handle=".handle" :animation="200">
+    <template #item="{ element: option, index }">
+      <div>
+        <div :class="tree ? 'grid-cols-[16px_auto_auto_16px_16px]' : 'grid-cols-[16px_auto_auto_16px]'"
+          class="option-item text-16px grid text-$epic-text-secondary gap-2 items-center mb-2">
+          <EIcon class="mr-2 cursor-move handle" name="icon--epic--drag" />
+          <Input v-model="option.label" v-model:value="option.label" placeholder="label"></Input>
+          <Input v-model="option.value" v-model:value="option.value" placeholder="value"></Input>
+          <EIcon v-if="tree" class="cursor-pointer text-lg!" name="icon--epic--add-rounded" @click="handleAddChildren(option)" />
+          <EIcon class="hover:text-red cursor-pointer" name="icon--epic--delete-outline-rounded" @click="handleRemove(index)" />
+        </div>
+        <div class="pl-4" v-if="option.children">
+          <EOptionItem v-model="option.children" />
+        </div>
+      </div>
+    </template>
+  </draggable>
+</template>
+
+<script lang="ts" setup>
+import draggable from 'vuedraggable'
+import { pluginManager } from '@epic-designer/utils'
+import { inject } from 'vue';
+import EIcon from '../../components/icon'
+import { useVModel } from '@vueuse/core'
+
+interface Option {
+  label: string,
+  value: string,
+  children?: Option[]
+}
+
+defineOptions({
+  name: 'EOptionItem'
+})
+
+const props = defineProps<{
+  modelValue: Option[],
+}>()
+const Input = pluginManager.getComponent('input')
+const tree = inject('tree', false)
+const emit = defineEmits(['update:modelValue'])
+const innerValue = useVModel(props, 'modelValue', emit)
+
+
+/**
+ *  添加选项子选项
+ */
+function handleAddChildren(option: Option) {
+  const childrenOption: Option = {
+    label: "",
+    value: ""
+  }
+
+  if (option.children) {
+    option.children.push(childrenOption)
+  } else {
+    option.children = [childrenOption]
+  }
+}
+
+/**
+ * 删除选项
+ * @param index 
+ */
+function handleRemove(index: number) {
+  innerValue.value = innerValue.value.filter((_item, i) => i !== index)
+}
+</script>

package/packages/core/extensions/ERuleEditor/ERuleItem.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    class="rule-item-main bg-white m-t-2 p-2 rounded  border border-solid border-gray-200 hover:border-primary transition-all relative">
+    <template v-for="(componentSchema, index) in ruleItemSchemas" :key="index">
+      <div v-if="componentSchema.show ? componentSchema.show() : true" class="flex m-t-2 first:m-0">
+        <div class="epic-attr-label" title="校验时机">
+          {{ componentSchema.label }}
+        </div>
+        <div class="epic-attr-input">
+          <ENode v-model="modelRule[componentSchema.model]" :componentSchema="{ ...componentSchema, noFormItem: true }" @change="handleUpdate" />
+        </div>
+      </div>
+    </template>
+    <div
+      class="rule-btn-delete absolute top-0 text-md right-0 transition-all w-24px h-24px cursor-pointer rounded-bl-2 flex justify-center items-center color-white"
+      @click="handleDelete">
+      <EIcon name="icon--epic--delete-outline-rounded" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { FormItemRule } from './types'
+import { computed, inject } from 'vue'
+import { PageManager } from '@epic-designer/utils'
+import ENode from '../../components/node/index'
+import EIcon from '../../components/icon'
+import { typeOptions, triggerOptions, lenTypeOptions } from './data'
+const emit = defineEmits(['change', 'delete', 'update:rule'])
+const props = defineProps<{
+  rule: FormItemRule,
+}>()
+
+const modelRule = computed({
+  get() {
+    return props.rule
+  },
+  set(value) {
+    emit('update:rule', value)
+  }
+})
+
+const pageManager = inject('pageManager', {}) as PageManager
+
+const methodOptions = computed(() => {
+  return Object.entries(pageManager.funcs.value)
+    .filter(([key, value]) => typeof value === 'function')
+    .map(([label]) => ({ label, value: label }))
+})
+
+const ruleItemSchemas = [
+  {
+    type: 'select',
+    label: '校验时机',
+    model: 'trigger',
+    componentProps: { options: triggerOptions, placeholder: '校验时机', multiple: true, mode: 'multiple' }
+  },
+  {
+    type: 'switch',
+    label: '自定义规则',
+    model: 'isValidator'
+  },
+  {
+    type: 'select',
+    label: '校验函数',
+    model: 'validator',
+    show() { return Boolean(modelRule.value.isValidator) },
+    componentProps: { options: methodOptions.value, placeholder: '校验函数' }
+  },
+  {
+    type: 'select',
+    label: '类型',
+    model: 'type',
+    show() { return !modelRule.value.isValidator },
+    componentProps: { options: typeOptions, placeholder: '类型' }
+  },
+  {
+    type: 'input',
+    label: '正则校验',
+    model: 'pattern',
+    show() { return !modelRule.value.isValidator },
+    componentProps: { placeholder: '正则校验' }
+  },
+  {
+    type: 'number',
+    label: '字段长度',
+    model: 'len',
+    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
+    componentProps: { min: 0, placeholder: '字段长度' }
+  },
+  {
+    type: 'number',
+    label: '最小长度',
+    model: 'min',
+    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
+    componentProps: { min: 0, placeholder: '最小长度' }
+  },
+  {
+    type: 'number',
+    label: '最大长度',
+    model: 'max',
+    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
+    componentProps: { min: 0, placeholder: '最大长度' }
+  },
+  {
+    type: 'input',
+    label: '校验信息',
+    model: 'message',
+    componentProps: { placeholder: '校验信息' }
+  }
+]
+
+/**
+ * 更新校验规则
+ */
+function handleUpdate() {
+  const v = modelRule.value
+  if (v.isValidator) {
+    delete v.type
+    delete v.pattern
+    delete v.len
+    delete v.min
+    delete v.max
+  } else {
+    delete v.validator
+  }
+  emit('change', v)
+}
+
+/**
+ * 删除校验规则
+ */
+function handleDelete() {
+  emit('delete')
+}
+
+</script>

package/packages/core/extensions/ERuleEditor/data.ts

@@ -0,0 +1,24 @@
+export const typeOptions = [
+  { label: "string", value: "string" },
+  { label: "number", value: "number" },
+  { label: "boolean", value: "boolean" },
+  { label: "method", value: "method" },
+  { label: "regexp", value: "regexp" },
+  { label: "integer", value: "integer" },
+  { label: "float", value: "float" },
+  { label: "array", value: "array" },
+  { label: "object", value: "object" },
+  // { label: 'enum', value: 'enum' },
+  { label: "date", value: "date" },
+  { label: "url", value: "url" },
+  { label: "hex", value: "hex" },
+  { label: "email", value: "email" },
+  { label: "any", value: "any" },
+];
+
+export const triggerOptions = [
+  { label: "change", value: "change" },
+  { label: "blur", value: "blur" },
+];
+
+export const lenTypeOptions = ["string", "number", "url", "array", "email"];

package/packages/core/extensions/ERuleEditor/index.less

@@ -0,0 +1,17 @@
+.rule-item-main {
+  background-color: var(--epic-view-color);
+  border-color: var(--epic-border-color);
+  &:hover{
+  border-color: var(--epic-primary-color);
+  }
+  .rule-btn-delete {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover > .rule-btn-delete {
+    opacity: 1;
+    pointer-events: all;
+    background-color: var(--epic-primary-color);
+  }
+}

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

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <div
+      class="rule-item-main m-t-2 p-2 rounded border border-solid transition-all relative"
+    >
+      <template v-for="(componentSchema, index) in requiredRuleSchemas" :key="index">
+        <div
+          v-if="componentSchema.show ? componentSchema.show() : true"
+          class="flex m-t-2 first:m-0"
+        >
+          <div class="epic-attr-label">
+            {{ componentSchema.label }}
+          </div>
+          <div class="flex-1">
+            <ENode
+              v-model="requiredRule[componentSchema.model]"
+              :componentSchema="{ ...componentSchema, noFormItem: true }"
+              @change="handleUpdate"
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+    <ERuleItem
+      v-for="(item, index) in rules"
+      :key="index"
+      v-model:rule="rules[index]"
+      @delete="handleDelete(index)"
+      @change="handleUpdate"
+    />
+    <Button class="m-t-2" @click="handleAdd"> 添加规则 </Button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { pluginManager, deepClone } from "@epic-designer/utils";
+import { ref, watchEffect, PropType } from "vue";
+import { FormItemRule } from "./types";
+import ERuleItem from "./ERuleItem.vue";
+import ENode from "../../components/node/index";
+import { triggerOptions, typeOptions } from "./data";
+import { useVModel } from "@vueuse/core";
+const Button = pluginManager.getComponent("button");
+const props = defineProps({
+  ruleType: {
+    type: String,
+    default: "string",
+  },
+  modelValue: {
+    type: Array as PropType<FormItemRule[] | undefined>,
+    default: undefined,
+  },
+});
+const emits = defineEmits(["update:modelValue"]);
+const innerValue = useVModel(props, "modelValue", emits);
+const requiredRule = ref<FormItemRule>({
+  required: false,
+  message: "必填项",
+  type: props.ruleType,
+  trigger: ["change"],
+});
+
+const requiredRuleSchemas = [
+  {
+    type: "switch",
+    label: "必填项",
+    model: "required",
+  },
+  {
+    type: "select",
+    label: "校验时机",
+    model: "trigger",
+    show() {
+      return Boolean(requiredRule.value.required);
+    },
+    componentProps: {
+      options: triggerOptions,
+      placeholder: "校验时机",
+      multiple: true,
+      mode: "multiple",
+    },
+  },
+  {
+    type: "select",
+    label: "类型",
+    model: "type",
+    show() {
+      return Boolean(requiredRule.value.required);
+    },
+    componentProps: { options: typeOptions, placeholder: "类型" },
+  },
+  {
+    type: "input",
+    label: "校验信息",
+    model: "message",
+    show() {
+      return Boolean(requiredRule.value.required);
+    },
+    componentProps: { placeholder: "校验信息" },
+  },
+];
+
+const rules = ref<FormItemRule[]>([]);
+
+watchEffect(() => {
+  if (!innerValue.value) return;
+  rules.value = [];
+  innerValue.value.forEach((item) => {
+    // 必填项单独存储
+    if (typeof item.required !== "undefined") {
+      requiredRule.value = item;
+    } else {
+      rules.value.push(item);
+    }
+  });
+});
+
+/**
+ * 新增检验规则
+ */
+function handleAdd() {
+  rules.value.push({
+    message: "",
+    type: props.ruleType,
+    trigger: ["change"],
+  });
+  handleUpdate();
+}
+
+/**
+ * 更新校验规则
+ */
+function handleUpdate() {
+  // 存在必填项时,合并其他规则
+  if (requiredRule.value.required) {
+    innerValue.value = deepClone([...rules.value, requiredRule.value]);
+    return;
+  }
+
+  // 存在其他规则
+  if (rules.value.length) {
+    innerValue.value = deepClone(rules.value);
+    return;
+  }
+
+  // 没有任何校验规则
+  innerValue.value = undefined;
+}
+
+/**
+ * 通过下标删除校验规则项
+ * @param index
+ */
+function handleDelete(index: number) {
+  rules.value.splice(index, 1);
+  handleUpdate();
+}
+</script>

package/packages/core/extensions/ERuleEditor/types.ts

@@ -0,0 +1,17 @@
+export interface RuleItem {
+  required?: boolean
+  type?: string
+  pattern?: RegExp | string
+  min?: number
+  max?: number
+  len?: number
+  enum?: Array<string | number | boolean | null | undefined>
+  whitespace?: boolean
+  validator?: string
+  isValidator?: boolean
+  message?: string | ((a?: string) => string)
+}
+export interface FormItemRule extends RuleItem {
+  trigger?: string | string[]
+  [model: string]: any
+}

package/packages/core/extensions/MonacoEditor/index.ts

@@ -0,0 +1,31 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component: async () => await import('./index.vue'),
+  defaultSchema: {
+    label: '代码编辑器',
+    type: 'monacoEditor',
+    field: 'monacoEditor',
+    icon: 'epic-icon-write',
+    input: true
+  },
+  config: {
+    attribute: [
+      {
+        label: '字段名',
+        type: 'input',
+        field: 'field'
+      },
+      {
+        label: '标题',
+        type: 'input',
+        field: 'label'
+      },
+      {
+        label: '默认值',
+        type: 'monacoEditor',
+        field: 'componentProps.defaultValue'
+      }
+    ]
+  },
+  bindModel: 'model-value'
+} as ComponentConfigModel