epic-designer-gold 0.0.0 → 0.0.1

package/packages/core/components/designer/src/modules/attributeView/eventView.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="epic-event-view">
+    <div v-if="checkedNode">
+      <EActionEditor
+        :key="checkedNode.id"
+        :event-list="eventList"
+        :model-value="getValueByPath(checkedNode!,`on`)"
+        @update:model-value="handleSetValue($event, `on`)"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Designer, PageSchema } from '../../../../../types/epic-designer'
+import { pluginManager, getValueByPath, setValueByPath,type Revoke } from '@epic-designer/utils'
+import { inject, computed } from 'vue'
+const pageSchema = inject('pageSchema') as PageSchema
+const designer = inject('designer') as Designer
+const revoke = inject('revoke') as Revoke
+const EActionEditor = pluginManager.getComponent('EActionEditor')
+
+const componentConfings = pluginManager.getComponentConfings()
+const checkedNode = computed(() => {
+  return designer.state.checkedNode
+})
+
+const eventList = computed(() => {
+  const eventList: any = [{
+    title: '生命周期',
+    events: [
+      {
+        type: 'vnodeBeforeMount',
+        describe: 'beforeMount'
+      },
+      {
+        type: 'vnodeMounted',
+        describe: 'mounted'
+      },
+      {
+        type: 'vnodeBeforeUpdate',
+        describe: 'beforeUpdate'
+      },
+      {
+        type: 'vnodeUpdated',
+        describe: 'updated'
+      },
+      {
+        type: 'vnodeBeforeUnmount',
+        describe: 'beforeUnmount'
+      },
+      {
+        type: 'vnodeUnmounted',
+        describe: 'unmounted'
+      },
+      {
+        type: 'vnodeErrorCaptured',
+        describe: 'errorCaptured'
+      }
+    ]
+  }]
+  const events = componentConfings[designer.state.checkedNode?.type ?? '']?.config.event ?? []
+  eventList.unshift({
+    title: '组件事件',
+    events
+  })
+  return eventList
+})
+
+/**
+ * 设置属性值
+ */
+function handleSetValue (value: any, field: string) {
+  setValueByPath( checkedNode.value!, field,value)
+  // 将修改过的组件属性推入撤销操作的栈中
+  revoke.push(pageSchema.schemas, '编辑组件属性')
+}
+</script>

package/packages/core/components/designer/src/modules/attributeView/index.less

@@ -0,0 +1,36 @@
+// 属性编辑
+.epic-attribute-view,
+.epic-style-view {
+  padding: 16px;
+  .epic-attr-item {
+    display: flex;
+    // align-items  : center;
+    margin-bottom: 12px;
+
+    &.vertical {
+      display: block;
+    }
+
+    // &:hover{
+    //   background-color: var(--epic-primary-color);
+    // }
+    .epic-attr-label {
+      width: 80px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--epic-text-sm);
+      line-height: 32px;
+    }
+
+    .epic-attr-input {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.epic-designer-main .el-collapse .el-collapse-item__header {
+  box-sizing: border-box;
+}

package/packages/core/components/designer/src/modules/attributeView/styleView.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="epic-style-view" :key="checkedNode?.id">
+    <div v-for="item in componentStyles" :key="item.field">
+      <div v-if="isShow(item)" class="epic-attr-item" :class="item.layout">
+        <div v-if="item.label" class="epic-attr-label" :title="item.label">
+          {{ item.label }}
+        </div>
+        <div class="epic-attr-input">
+          <ENode
+            :componentSchema="{
+              ...item,
+              componentProps: {
+                ...item.componentProps,
+                ...(item.field === 'componentProps.defaultValue'
+                  ? checkedNode?.componentProps
+                  : {}),
+                input: false,
+                field: undefined,
+                hidden: false,
+              },
+              show: true,
+              noFormItem: true,
+            }"
+            :model-value="getValueByPath(item.editData ?? checkedNode!,item.field!)"
+            @update:model-value="handleSetValue($event, item.field!, item, item.editData)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import ENode from '../../../../node/index'
+import { Designer, ComponentSchema, PageSchema } from '../../../../../types/epic-designer'
+import { type Revoke, getValueByPath, setValueByPath } from '@epic-designer/utils'
+
+import { inject, computed, nextTick } from 'vue'
+const designer = inject('designer') as Designer
+const pageSchema = inject('pageSchema') as PageSchema
+const revoke = inject('revoke') as Revoke
+
+const componentStyles: ComponentSchema[] = [
+  {
+    label: '宽度',
+    type: 'EInputSize',
+    field: 'componentProps.style.width'
+  },
+  {
+    label: '高度',
+    type: 'EInputSize',
+    field: 'componentProps.style.height'
+  },
+  {
+    label: '内边距',
+    type: 'EInputSize',
+    field: 'componentProps.style.padding'
+  },
+  {
+    label: '外边距',
+    type: 'EInputSize',
+    field: 'componentProps.style.margin'
+  },
+  {
+    label: '背景色',
+    type: 'color-picker',
+    field: 'componentProps.style.backgroundColor',
+    componentProps: {
+      type: 'color',
+      style: {
+        // width: '60px'
+      }
+    }
+  },
+  {
+    label: '字体颜色',
+    type: 'color-picker',
+    field: 'componentProps.style.color',
+    componentProps: {
+      type: 'color',
+      style: {
+      }
+    }
+  }
+]
+
+const checkedNode = computed(() => {
+  return designer.state.checkedNode
+})
+
+function isShow(item: ComponentSchema) {
+  // show属性为boolean类型则直接返回
+  if (typeof item.show === 'boolean') {
+    return item.show
+  }
+  return item.show?.({ values: checkedNode.value! }) ?? true
+}
+
+
+/**
+ * 设置属性值
+ */
+function handleSetValue(value: any, field: string, item: ComponentSchema, editData = checkedNode.value) {
+  if (typeof item.onChange === 'function') {
+    item.onChange({ value, values: editData!, componentStyles })
+  }
+  // 判断是否同步修改属性值
+  if (item.changeSync) {
+    setValueByPath(editData!, field, value)
+  } else {
+    nextTick(() => {
+      setValueByPath(editData!, field, value)
+    })
+  }
+  // 将修改过的组件属性推入撤销操作的栈中
+  revoke.push(pageSchema.schemas, '编辑组件属性')
+}
+</script>

package/packages/core/components/designer/src/modules/componentView/index.less

@@ -0,0 +1,61 @@
+// 组件选择面板
+.epic-component-view {
+  height: 100%;
+
+  .epic-componet-item {
+    cursor: pointer;
+    border: 1px solid var(--epic-border-color);
+    padding: 8px 10px;
+    border-radius: 4px;
+
+    .iconfont {
+      margin-right: 5px;
+      font-size: 16px;
+      color: var(--epic-text-secondary);
+    }
+
+    &:hover {
+      border-color: var(--epic-primary-color);
+      color: var(--epic-primary-color);
+      background-color: var(--epic-compoent-hover-color);
+
+      .iconfont {
+        color: var(--epic-primary-color);
+      }
+    }
+  }
+
+  .epic-tabs-box {
+    width: 62px;
+    height: 100%;
+    background: var(--epic-compoent-tabs-color);
+    padding: 12px 6px;
+    box-sizing: border-box;
+
+    .epic-tab {
+      height: 28px;
+      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;
+
+      &.checked {
+        color: var(--epic-primary-color);
+        background-color: var(--epic-primary-hover-color);
+      }
+    }
+  }
+
+  .epic-search-box {
+    border-bottom: 1px solid var(--epic-border-color);
+
+    // element 搜素框样式
+    // .el-input__wrapper {
+    //   background-color: #f7f7f7;
+    // }
+  }
+}

package/packages/core/components/designer/src/modules/componentView/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="epic-component-view flex flex-col">
+    <!-- 搜素框 start -->
+    <div class="epic-search-box px-10px py-6px">
+      <Input placeholder="搜索组件" v-model="keyword" clearable allowClear v-model:value="keyword">
+        <template #prefix>
+          <EIcon class="text-$epic-text-helper" name="icon--epic--search-rounded" />
+        </template>
+      </Input>
+    </div>
+    <!-- 搜素框 end -->
+    <div class="flex flex-1 overflow-auto">
+      <!-- 分类选项 start  -->
+      <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>
+      <!-- 分类选项 end  -->
+
+      <div class="h-full flex-1 overflow-auto py-2 box-border">
+        <draggable
+          v-model="getSourceSchemaList"
+          v-bind="{
+            group: { name: 'edit-draggable', pull: 'clone', put: false },
+            sort: false,
+            animation: 180,
+            ghostClass: 'moving',
+          }"
+          :clone="generateNewSchema"
+          item-key="id"
+          class="grid grid-cols-[auto_auto] px-10px gap-2"
+        >
+          <template #item="{ element }">
+            <div class="epic-componet-item flex items-center truncate" @click="handleClick(element)">
+              <EIcon :name="pluginManager.getComponentConfingByType(element.type).icon ?? ''" />
+              <div class="epic-componet-label flex-1 w-0 truncate">{{ element.label }}</div>
+            </div>
+          </template>
+        </draggable>
+        <div v-show="!getSourceSchemaList.length" class="text-center pt-42px text-gray-400">没有查询到的组件</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import draggable from "vuedraggable";
+import { ref, computed, inject } from "vue";
+import { generateNewSchema, findSchemaInfoById, pluginManager, Revoke } from "@epic-designer/utils";
+import { ComponentSchema, PageSchema, Designer } from "../../../../../types/epic-designer";
+import { DesignerProps } from "../../types";
+
+import EIcon from "../../../../icon";
+const Input = pluginManager.getComponent("input");
+const pageSchema = inject("pageSchema") as PageSchema;
+const designer = inject("designer") as Designer;
+const revoke = inject("revoke") as Revoke;
+const designerProps = inject("designerProps") as Ref<DesignerProps>;
+const sourceSchema = pluginManager.getComponentSchemaGroups();
+const keyword = ref("");
+const allSchema = {
+  title: "全部",
+  list: [],
+};
+const activeItem = ref(allSchema);
+
+/**
+ * 计算组件分类列表
+ */
+const getSchemaTypeList = computed(() => {
+  return [allSchema, ...sourceSchema.value];
+});
+
+/**
+ * 计算当前需要展示的组件列表
+ */
+const getSourceSchemaList = computed(() => {
+  let sourceSchemaList: ComponentSchema[] = activeItem.value.list;
+  if (activeItem.value.title === "全部") {
+    const sourceSchemaAllList = sourceSchema.value.map((item) => {
+      return item.list;
+    });
+    sourceSchemaList = ([] as ComponentSchema[]).concat(...sourceSchemaAllList);
+  }
+  return sourceSchemaList.filter(
+    (item) => item.label?.includes(keyword.value) && (!designerProps.value.formMode || item.type !== "form")
+  );
+});
+
+function handelChecked(item) {
+  activeItem.value = item;
+}
+
+/**
+ * 点击添加节点
+ * @param e
+ */
+function handleClick(schema: ComponentSchema) {
+  const data = findSchemaInfoById(pageSchema.schemas, designer.state.checkedNode?.id ?? "root");
+  if (!data) {
+    return false;
+  }
+  let { list, schema: checkedSchema, index } = data;
+
+  // 如果选中元素存在children字段，则添加到children中
+  if (
+    checkedSchema.children &&
+    !pluginManager.getComponentConfingByType(checkedSchema.type)?.editConstraints?.childImmovable
+  ) {
+    list = checkedSchema.children;
+    index = checkedSchema.children.length - 1;
+  }
+
+  const newSchema = generateNewSchema(schema);
+
+  list.splice(index + 1, 0, newSchema);
+  designer.setCheckedNode(newSchema);
+  revoke.push(pageSchema.schemas, "插入组件");
+}
+</script>

package/packages/core/components/designer/src/modules/editContainer/editNodeItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <draggable
+    v-model="modelSchemas"
+    item-key="id"
+    :component-data="{
+      type: 'transition-group',
+    }"
+    class="epic-draggable-range"
+    v-bind="{
+      animation: 200,
+      group: 'edit-draggable',
+      handle: '.draggable-item',
+      ghostClass: 'moveing',
+    }"
+    @start="handleSelect($event.oldIndex)"
+    @end="handleEnd()"
+    @add="
+      handleSelect($event.newIndex);
+      handleAdd();
+    "
+  >
+    <template #item="{ element, index }">
+      <div class="widget-box" :class="isDraggable(element)" :key="index">
+        <ENodeItem :schema="element" />
+      </div>
+    </template>
+  </draggable>
+</template>
+<script lang="ts" setup>
+import draggable from "vuedraggable";
+import { computed, inject } from "vue";
+import { Revoke, pluginManager } from "@epic-designer/utils";
+import { ComponentSchema, PageSchema, Designer } from "../../../../../types/epic-designer";
+import ENodeItem from "./nodeItem.vue";
+
+const designer = inject("designer") as Designer;
+const pageSchema = inject("pageSchema") as PageSchema;
+const revoke = inject("revoke") as Revoke;
+defineOptions({
+  name: "EditNodeItem",
+});
+const props = defineProps<{
+  schemas: ComponentSchema[];
+}>();
+
+const emit = defineEmits(["update:schemas"]);
+const modelSchemas = computed({
+  get() {
+    // 判断props.schemas是否存在值
+    return props.schemas;
+  },
+  set(e) {
+    emit("update:schemas", e);
+  },
+});
+
+/**
+ * 选中点击节点元素
+ * @param index
+ */
+function handleSelect(index: number) {
+  designer.setCheckedNode(modelSchemas.value![index]);
+  designer.setDisableHover(true);
+}
+
+function handleEnd() {
+  designer.setDisableHover();
+  revoke.push(pageSchema.schemas, "拖拽组件");
+}
+
+function handleAdd() {
+  revoke.push(pageSchema.schemas, "插入组件");
+}
+
+function isDraggable(schema: ComponentSchema) {
+  // 判断当前节点类型是否允许拖拽
+  if (
+    schema.id === pageSchema.schemas[0]?.id ||
+    pluginManager.getComponentConfingByType(schema.type)?.editConstraints?.immovable
+  ) {
+    // 禁止拖拽
+    return "unmover-item";
+  }
+
+  return "draggable-item";
+}
+</script>