epic-designer-gold 0.0.4 → 0.0.5

package/packages/core/extensions/EActionEditor/src/EActionModal.vue

@@ -1,258 +0,0 @@
-<template>
-  <Modal
-    v-model="visible"
-    class="w-1200px"
-    width="1200px"
-    @close="handleClose"
-    @ok="handleSave"
-    title="动作配置"
-  >
-    <div class="rounded epic-modal-action-main">
-      <div class="epic-modal-left-panel h-full flex flex-col">
-        <!-- 动作所属对象 start -->
-        <div class="flex flex-1 h-0 flex-col">
-          <div
-            class="fun-btn"
-            :class="{ checked: state.actionItem.type === 'custom' }"
-            @click="toggleMethod('custom')"
-          >
-            自定义函数
-          </div>
-          <div
-            class="fun-btn"
-            :class="{ checked: state.actionItem.type === 'public' }"
-            @click="toggleMethod('public')"
-          >
-            公共函数
-          </div>
-          组件
-          <div class="flex-1 h-0">
-            <ETree
-              v-model:selectedKeys="selectedKeys"
-              :options="pageSchema.schemas"
-              @nodeClick="handleNodeClick"
-            />
-          </div>
-        </div>
-        <!-- 动作选择 start -->
-        <div class="epic-action-select h-30/100 flex flex-col">
-          <div class="mb-2">动作选择</div>
-          <div class="flex-1 overflow-auto pr-8px">
-            <div
-              v-for="item in methodOptions"
-              :class="{ checked: item.value === state.actionItem.methodName }"
-              @click="handleCheckedMethod(item.value)"
-              :key="item.value"
-              class="epic-action-item"
-            >
-              <span>{{ item.label }}</span>
-            </div>
-            <div
-              v-show="!methodOptions?.length"
-              class="text-center pt-42px text-gray-400"
-            >
-              当前组件暂无动作
-            </div>
-          </div>
-        </div>
-        <!-- 动作所属对象 end -->
-        <!-- 动作选择 end -->
-      </div>
-      <!-- 动作配置 start -->
-      <div class="epic-modal-right-panel">
-        <EScriptEdit v-if="state.actionItem.type === 'custom'" />
-        <div
-          v-else-if="actionArgsConfigs.length === 0"
-          class="text-center pt-42px text-gray-400"
-        >
-          暂无配置
-        </div>
-        <EArgsEditor
-          v-else
-          v-model="state.actionItem.args"
-          :actionArgsConfigs="actionArgsConfigs"
-        />
-      </div>
-      <!-- 动作配置 end -->
-    </div>
-  </Modal>
-</template>
-<script lang="ts" setup>
-import {
-  pluginManager,
-  PageManager,
-  deepClone,
-  findSchemaById,
-  getUUID,
-} from "@epic-designer/utils";
-import { ref, inject, toRaw, reactive, computed, nextTick } from "vue";
-import ETree from "../../../components/tree";
-import { ComponentSchema, PageSchema, FormDataModel } from "../../../types/epic-designer";
-import EScriptEdit from "./EScriptEdit.vue";
-import EArgsEditor from "./EArgsEditor.vue";
-
-const Modal = pluginManager.getComponent("modal");
-const isAdd = ref(true);
-const pageSchema = inject("pageSchema") as PageSchema;
-const pageManager = inject("pageManager", {}) as PageManager;
-const visible = ref(false);
-const selectedKeys = ref<string[]>([]);
-const componentSchema = ref<ComponentSchema | null>(null);
-
-const emit = defineEmits(["add", "edit"]);
-
-const methodOptions = computed(() => {
-  // 组件动作列表
-  if (state.actionItem.type === "component") {
-    if (componentSchema.value) {
-      return pluginManager
-        .getComponentConfings()
-        [componentSchema.value.type].config.action?.map((item) => ({
-          label: item.describe,
-          value: item.type,
-        }));
-    }
-    return [];
-  }
-
-  // 自定义函数列表
-  if (state.actionItem.type === "custom") {
-    return Object.entries(pageManager.funcs.value)
-      .filter(([_key, value]) => typeof value === "function")
-      .map(([label]) => ({ label, value: label }));
-  }
-
-  // 公共函数列表
-  if (state.actionItem.type === "public") {
-    return Object.entries(pluginManager.publicMethods).map(([label]) => ({
-      label,
-      value: label,
-    }));
-  }
-
-  return [];
-});
-
-const actionArgsConfigs = computed(() => {
-  if (state.actionItem.type === "component") {
-    if (componentSchema.value) {
-      const action = pluginManager.getComponentConfings()[componentSchema.value.type]
-        .config.action;
-      const actionItem = action?.find(
-        (item) => item.type === state.actionItem.methodName
-      );
-
-      if (actionItem?.argsConfigs) {
-        const index = actionItem.argsConfigs.findIndex(
-          (item) => item.label === "设置数据"
-        );
-        index !== -1 &&
-          (actionItem.argsConfigs[index] = {
-            ...componentSchema.value,
-            label: "设置数据",
-            field: "0",
-            id: getUUID(),
-          } as ComponentSchema);
-      }
-
-      return actionItem?.argsConfigs ?? [];
-    }
-  }
-  return [];
-});
-
-const state = reactive({
-  actionItem: {
-    type: "custom",
-    methodName: "test",
-    componentId: null,
-  } as FormDataModel,
-  cacheData: {},
-});
-
-function handleOpen() {
-  visible.value = true;
-  isAdd.value = true;
-  state.actionItem.type = "custom";
-  state.actionItem.componentId = null;
-  if (methodOptions.value?.length) {
-    handleCheckedMethod(methodOptions.value[0].value);
-  }
-}
-function handleOpenEdit(action: any) {
-  visible.value = true;
-  isAdd.value = false;
-  componentSchema.value = null;
-
-  if (action.componentId) {
-    const schema = findSchemaById(pageSchema.schemas, action.componentId);
-
-    componentSchema.value = schema;
-    selectedKeys.value = [action.componentId];
-  }
-
-  nextTick(() => {
-    state.actionItem.componentId = action.componentId;
-    state.actionItem.methodName = action.methodName;
-    state.actionItem.type = action.type;
-    state.actionItem.args = action.args;
-  });
-}
-function handleSave() {
-  if (!state.actionItem.methodName) {
-    alert("请先选择动作方法");
-    return;
-  }
-  emit(isAdd.value ? "add" : "edit", deepClone(toRaw(state.actionItem)));
-  handleClose();
-}
-
-function handleClose() {
-  visible.value = false;
-  selectedKeys.value = [];
-  // 清空缓存数据
-  state.cacheData = {};
-}
-
-function toggleMethod(type: string) {
-  state.actionItem.componentId = null;
-  state.actionItem.type = type;
-  componentSchema.value = null;
-  state.actionItem.methodName = null;
-
-  selectedKeys.value = [];
-  if (methodOptions.value?.length) {
-    handleCheckedMethod(methodOptions.value[0].value);
-  }
-}
-function handleNodeClick(e: any) {
-  if (state.actionItem.args) {
-    // 存在参数配置，缓存参数配置数据
-    state.cacheData[state.actionItem.componentId + state.actionItem.methodName] =
-      state.actionItem.args;
-  }
-
-  state.actionItem.componentId = e.id;
-  state.actionItem.type = "component";
-  state.actionItem.methodName = null;
-  componentSchema.value = e.componentSchema;
-
-  if (methodOptions.value?.length) {
-    handleCheckedMethod(methodOptions.value[0].value);
-  }
-}
-
-function handleCheckedMethod(value: string) {
-  // activeTab.value = '脚本编辑'
-  state.actionItem.methodName = value;
-
-  // 获取缓存参数配置
-  state.actionItem.args =
-    state.cacheData[state.actionItem.componentId + state.actionItem.methodName];
-}
-
-defineExpose({
-  handleOpen,
-  handleOpenEdit,
-});
-</script>

package/packages/core/extensions/EActionEditor/src/EArgsEditor.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="epic-attribute-view">
-    <div v-for="item in props.actionArgsConfigs" :key="item.field + item.type">
-      <div v-show="isShow(item)" class="epic-attr-item" :class="item.layout">
-        <div class="epic-attr-label" :title="item.label">
-          {{ item.label }}
-        </div>
-        <div class="epic-attr-input">
-          <ENode
-            :componentSchema="{ ...item, componentProps: { ...item.componentProps, input: false, field: undefined, hidden: false }, show: true, noFormItem: true }"
-            :model-value="valueRef[item.field!]" @update:model-value="handleSetValue($event, item.field!)" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import ENode from '../../../components/node'
-import { ComponentSchema } from '../../../types/epic-designer'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  modelValue: string | null | undefined,
-  actionArgsConfigs: ComponentSchema[]
-}>()
-const emits = defineEmits(['update:modelValue'])
-
-const valueRef = computed<any>(() => {
-  if (props.modelValue) {
-    return JSON.parse(props.modelValue)
-  }
-  return []
-})
-
-
-function isShow(item: ComponentSchema) {
-  // show属性为boolean类型则直接返回
-  if (typeof item.show === 'boolean') {
-    return item.show
-  }
-
-  // show属性为function类型则执行
-  if (typeof item.show === 'function') {
-    return item.show?.({ values: valueRef.value! })
-  }
-  return true
-}
-
-/**
- * 设置属性值
- */
-function handleSetValue(value: any, field: string) {
-  const values = [
-    ...JSON.parse(props.modelValue ?? '[]')
-  ]
-  values[field] = value
-  emits('update:modelValue', JSON.stringify(values))
-  // 将修改过的组件属性推入撤销操作的栈中
-}
-
-</script>

package/packages/core/extensions/EActionEditor/src/EScriptEdit.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="h-full flex flex-col">
-    <div class="pb-2">
-      自定义函数编辑
-    </div>
-    <MonacoEditor ref="monacoEditorRef" autoToggleTheme v-model="pageSchema.script" class="epic-editor flex-1" :config="MonacoEditorConfig"
-      language="javascript" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { pluginManager } from '@epic-designer/utils'
-import { ref, inject } from 'vue'
-import { PageSchema } from '../../../types/epic-designer'
-const MonacoEditor = pluginManager.getComponent('monacoEditor')
-const MonacoEditorConfig = {
-  theme: 'vs-light',
-  selectOnLineNumbers: true,
-  minimap: {
-    enabled: false
-  }
-}
-const monacoEditorRef = ref<any>(null)
-const pageSchema = inject('pageSchema') as PageSchema
-
-
-</script>

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

@@ -1,24 +0,0 @@
-
-.EColEditor-item {
-  display: flex;
-  align-items: center;
-  padding-top: 6px;
-
-  .epic-del-btn {
-      width: 50px;
-      height: 100%;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-          color: #f22;
-      }
-  }
-
-}
-
-.add-btn {
-  cursor: pointer;
-  margin-top: 6px;
-  color: var(--epic-primary-color);
-}

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

@@ -1,65 +0,0 @@
-<template>
-  <div>
-    <div v-for="(item, index) in colList" :key="index" class="EColEditor-item">
-      <Number v-model:value="item.componentProps.span" v-model="item.componentProps.span" style="width:100%" :min="1"
-        :max="24" />
-      <div v-if="colList.length > 1" class="epic-del-btn">
-        <span @click="handleDelete(index)">
-          <EIcon name="icon-shanchu1" />
-        </span>
-
-      </div>
-    </div>
-    <div class="add-btn" @click="handleAdd">
-      添加
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { pluginManager, getUUID } from '@epic-designer/utils'
-import { ComponentSchema } from '../../types/epic-designer'
-import { computed, PropType } from 'vue'
-import EIcon from '../../components/icon'
-
-const Number = pluginManager.getComponent('number')
-const props = defineProps({
-  modelValue: {
-    type: Array as PropType<ComponentSchema[]>,
-    default: () => []
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-const colList = computed({
-  get() {
-    return props.modelValue
-  },
-  set(e) {
-    emit('update:modelValue', e)
-  }
-})
-
-/**
- * 新增栅格Col
- */
-function handleAdd() {
-  const colItem = {
-    type: 'col',
-    children: [],
-    componentProps: {
-      span: 12
-    },
-    id: getUUID()
-  }
-  colList.value.push(colItem)
-}
-
-/**
- * 删除栅格Col
- * @param index
- */
-function handleDelete(index: number) {
-  colList.value = colList.value.filter((item, i) => index !== i)
-}
-
-</script>

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

@@ -1,170 +0,0 @@
-.e-data-source {
-    position: relative;
-}
-
-.el-drawer__header {
-    margin-bottom: 0 !important;
-}
-
-button {
-    position: relative;
-}
-
-.icon-numbers {
-    position: absolute;
-    right: -8px;
-    top: -8px;
-    min-width: 18px;
-    min-height: 18px;
-    background-color: #3e8bf2;
-    color: #fff;
-    padding: 4px;
-    font-size: 12px;
-    border-radius: 50%;
-}
-
-.drawer-content {
-    border: 1px solid #ccc;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    display: flex;
-
-    &-left {
-        width: 45%;
-        height: 100%;
-        border-right: 1px solid #ccc;
-        padding: 16px 12px;
-
-        button {
-            width: 100%;
-            height: 36px;
-            margin-bottom: 12px;
-        }
-
-        >div {
-            height: calc(100% - 48px);
-            overflow: auto;
-        }
-
-        .source-item {
-            &.active {
-                background: #ecf5ff;
-            }
-
-            display: flex;
-            align-items: center;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            height: 38px;
-            // padding: 0 12px;
-            justify-content: space-between;
-            margin-bottom: 8px;
-            width: 100%;
-            cursor: pointer;
-
-            &:hover {
-                background: #ecf5ff;
-                width: 100%;
-            }
-
-            &-title {
-                display: flex;
-                align-items: center;
-                font-size: 14px;
-                height: 100%;
-                margin-left: 12px;
-                width: calc(100% - 40px);
-                user-select: none;
-
-                >div:first-child {
-                    color: #6ac33e;
-                    margin-right: 8px;
-                    font-weight: bold;
-                }
-
-                >div:last-child {}
-            }
-
-            &-icon {
-                width: 40px;
-                height: 40px;
-                // padding-right: 12px;
-                padding: 12px;
-                color: rgb(250, 16, 16);
-            }
-
-        }
-    }
-
-    &-right {
-        width: 55%;
-        height: 100%;
-
-        .content-right-btn {
-            height: 60px;
-            // border-bottom: 1px solid #ccc;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 16px;
-        }
-
-        .content {
-            height: calc(100% - 60px);
-
-            &-empty {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                height: 100%;
-                color: #666;
-            }
-
-            &-form {
-                padding: 16px;
-            }
-        }
-    }
-}
-
-.form-flex {
-    display: flex;
-    justify-content: space-between;
-}
-
-.form-item {
-    &-title {
-        font-size: 14px;
-        color: #606266;
-        display: inline-block;
-        height: auto;
-        line-height: 22px;
-        margin-bottom: 8px;
-        text-align: left;
-        vertical-align: middle;
-    }
-
-    &-content {
-        .content-item {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 8px;
-
-            .icon-bg {
-                background-color: red;
-                border-radius: 50%;
-                padding: 4px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-
-            }
-        }
-
-    }
-}