epic-designer-gold 0.0.49 → 1.0.1

package/packages/core/components/tree/src/index.less

@@ -0,0 +1,117 @@
+.epic-tree {
+  .epic-tree-main {
+    padding-right: 10px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  a {
+    color: var(--epic-text-main);
+    display: flex;
+
+    &:hover {
+      color: var(--epic-text-main);
+    }
+
+    .text {
+      display: inline-block;
+      width: 100%;
+
+      &.hover {
+        background-color: var(--epic-widget-hover-color);
+      }
+
+      &.checked {
+        background: var(--epic-primary-hover-color);
+        color: var(--epic-primary-color);
+      }
+
+      .epic-text-padding {
+        padding: 0 6px;
+        white-space: nowrap;
+        color: var(--epic-text-main);
+
+        &.hidden {
+          color: var(--epic-text-helper);
+        }
+      }
+    }
+  }
+
+  .epic-node-type-text {
+    font-size: var(--epic-text-sm);
+    color: var(--epic-text-disabled);
+    margin-left: 6px;
+  }
+
+  .epic-tree-node {
+    &.level-1 {
+      padding-left: 10px;
+    }
+
+    padding-left: 16px;
+    min-height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+
+    .icon-expanded {
+      position: absolute;
+      left: 8px;
+      transition: transform 0.3s;
+      color: var(--epic-border-color);
+      font-size: var(--epic-text-sm);
+
+      &.expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .epic-tree-sublist {
+    height: 0;
+    overflow: hidden;
+
+    &.expanded {
+      height: auto;
+    }
+
+    .epic-tree-node {
+      position: relative;
+
+      &::after,
+      &::before {
+        content: "";
+        position: absolute;
+        background: var(--epic-border-color);
+        z-index: 99;
+      }
+
+      &::after {
+        width: 1px;
+        height: 100%;
+        left: 4px;
+        top: 0;
+      }
+
+      &::before {
+        width: 8px;
+        height: 1px;
+        left: 4px;
+        top: 13px;
+      }
+
+      &.expanded::before {
+        display: none;
+      }
+
+      &:last-child {
+        &::after {
+          height: 13px;
+        }
+      }
+    }
+  }
+}

package/packages/core/components/tree/src/tree.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="epic-tree h-full flex flex-col">
+    <!-- 搜素框 start -->
+    <div class="epic-search-box px-10px py-6px">
+      <Input placeholder="搜索节点" clearable allowClear v-model="keyword" v-model:value="keyword">
+      <template #prefix>
+        <EIcon name="icon--epic--search-rounded" />
+      </template>
+      </Input>
+    </div>
+    <!-- 搜素框 end -->
+    <div class="epic-tree-main flex-1 overflow-auto h-0">
+      <ul>
+        <ETreeNodes v-model:schemas="getTreeData" />
+      </ul>
+      <div v-show="!getTreeData.length" class="text-center pt-42px text-gray-400">没有查询到的数据</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ComponentSchema } from '../../../types/epic-designer'
+import type { PropType } from 'vue'
+import { ref, provide, computed, useSlots } from 'vue'
+import ETreeNodes from './treeNodes.vue'
+import EIcon from '../../icon'
+import { pluginManager } from '@epic-designer/utils'
+
+defineOptions({
+  name: 'ETree'
+})
+const slots = useSlots()
+provide('slots', slots)
+
+const Input = pluginManager.getComponent('input')
+
+const keyword = ref("")
+const expandedKeys = ref([])
+const props = defineProps({
+  options: {
+    type: Array as PropType<ComponentSchema[]>,
+    default: () => []
+  },
+  hoverKey: {
+    type: String,
+    default: ''
+  },
+  selectedKeys: {
+    type: Array,
+    default: () => []
+  },
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+})
+
+const emits = defineEmits(['update:selectedKeys', 'nodeClick'])
+const selectedKeysComputed = computed({
+  get() {
+    return props.selectedKeys
+  },
+  set(value) {
+    emits('update:selectedKeys', value)
+  }
+})
+
+
+const getTreeData = computed({
+  get() {
+    return filterTreeByLabel(props.options, keyword.value)
+  },
+  set(e) {
+    console.log(e)
+  }
+})
+
+/**
+ * 通过label 过滤节点
+ * @param tree 节点树
+ * @param labelToFilter 过滤关键字
+ */
+function filterTreeByLabel(tree, labelToFilter) {
+  const filteredTree: ComponentSchema[] = [];
+
+  tree.forEach((item: ComponentSchema) => {
+    if (item.label?.includes(labelToFilter)) {
+      filteredTree.push(item);
+    } else if (item.children) {
+      const filteredChildren = filterTreeByLabel(item.children, labelToFilter);
+      if (filteredChildren.length > 0) {
+        // Clone the item and replace its children
+        const clonedItem = { ...item };
+        clonedItem.children = filteredChildren;
+        filteredTree.push(clonedItem);
+      }
+    }
+  });
+
+  return filteredTree;
+}
+
+
+function handleSelect(id: string, componentSchema: ComponentSchema) {
+  selectedKeysComputed.value = [id]
+  emits('nodeClick', { id, componentSchema })
+}
+
+provide('expandedKeys', expandedKeys)
+provide('selectedKeys', selectedKeysComputed)
+provide('treeProps', props)
+provide('handleSelect', handleSelect)
+
+</script>

package/packages/core/components/tree/src/treeNodeItem.vue

@@ -0,0 +1,120 @@
+<template>
+  <li
+    class="epic-tree-node"
+    :class="{
+      expanded: props.schema.children?.length,
+      'level-1': props.schema.id === pageSchema.schemas[0]?.id,
+    }"
+  >
+    <a>
+      <span
+        v-if="
+          props.schema.children?.length && props.schema.id !== pageSchema.schemas[0]?.id
+        "
+        class="icon-expanded"
+        :class="{ expanded }"
+        @click="handleExpanded"
+      >
+        <EIcon name="icon--epic--caret-right-outlined" />
+      </span>
+      <TreeNodeText />
+    </a>
+    <ETreeNodes
+      v-if="props.schema.children?.length"
+      class="epic-tree-sublist"
+      :class="{ expanded }"
+      v-model:schemas="props.schema.children"
+      :parentSchema="props.schema"
+    />
+  </li>
+</template>
+<script lang="ts" setup>
+import { ComponentSchema, PageSchema } from "../../../types/epic-designer";
+import EIcon from "../../icon";
+import { inject, computed, Ref, h, defineComponent, Slots } from "vue";
+import { pluginManager } from "@epic-designer/utils";
+import ETreeNodes from "./treeNodes.vue";
+defineOptions({
+  name: "ETreeNodeItem",
+});
+
+const props = defineProps<{
+  schema: ComponentSchema;
+}>();
+
+const slots = inject("slots", {}) as Slots;
+const pageSchema = inject("pageSchema", {}) as PageSchema;
+
+const expandedKeys = inject("expandedKeys") as Ref<string[]>;
+const treeProps = inject("treeProps") as any;
+const selectedKeys = inject("selectedKeys") as Ref<string[]>;
+
+const handleSelect = inject("handleSelect") as (
+  id: string,
+  componentSchema: ComponentSchema
+) => {};
+
+const expanded = computed(() => {
+  return expandedKeys.value.includes(props.schema.id ?? "");
+});
+
+const TreeNodeText = defineComponent({
+  setup() {
+    return () =>
+      h(
+        "span",
+        {
+          class: {
+            text: true,
+            hover: treeProps.hoverKey === props.schema.id,
+            checked: selectedKeys.value.includes(props.schema.id!),
+          },
+          onClick: () => handleSelect(props.schema.id!, props.schema),
+        },
+        slots["tree-node"]?.(props) ??
+          h(
+            "span",
+            { class: "epic-text-padding flex" },
+            {
+              default: () => [
+                h(
+                  "span",
+                  { class: "max-w-full truncate" },
+                  props.schema.label ??
+                    pluginManager.getComponentConfingByType(props.schema.type)
+                      ?.defaultSchema.label
+                ),
+                h(
+                  "span",
+                  { class: "epic-node-type-text flex-1 w-0 truncate" },
+                  props.schema.id
+                ),
+              ],
+            }
+          )
+      );
+  },
+});
+
+function handleExpanded() {
+  const id = props.schema.id;
+  if (!id) {
+    return false;
+  }
+
+  if (expandedKeys.value.includes(id)) {
+    expandedKeys.value = expandedKeys.value.filter((item) => item !== id);
+  } else {
+    expandedKeys.value.push(id);
+  }
+}
+
+function init() {
+  const id = props.schema.id;
+  if (!id || !props.schema.children?.length) {
+    return false;
+  }
+  expandedKeys.value.push(id);
+}
+init();
+</script>

package/packages/core/components/tree/src/treeNodes.vue

@@ -0,0 +1,70 @@
+<template>
+  <draggable v-if="!pluginManager.getComponentConfingByType(props.parentSchema?.type || '')?.editConstraints?.childImmovable"
+    v-model="modelSchemas" item-key="id" :component-data="{
+    }" class="epic-draggable-range" v-bind="{
+      animation: 200,
+      tag: 'ul',
+      group: 'tree-draggable',
+      ghostClass: 'moveing',
+      draggable: '.draggable-item',
+      disabled: !treeProps.draggable || modelSchemas[0]?.id === pageSchema.schemas[0]?.id
+    }" @start="handleSelect($event.oldIndex)">
+    <template #item="{ element, index }">
+      <ETreeNodeItem :class="isDraggable(element)" :key="element.id" :schema="element" />
+    </template>
+  </draggable>
+
+  <ul v-else>
+    <ETreeNodeItem v-for="( element ) in modelSchemas" :key="element.id" :schema="element" />
+  </ul>
+</template>
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import { ComponentSchema, Designer, PageSchema } from '../../../types/epic-designer'
+import ETreeNodeItem from './treeNodeItem.vue'
+import draggable from 'vuedraggable'
+import { pluginManager } from '@epic-designer/utils'
+
+defineOptions({
+  name: 'ETreeNodes'
+})
+
+const designer = inject('designer') as Designer
+const pageSchema = inject('pageSchema') as PageSchema
+const treeProps = inject('treeProps') as any
+
+const props = defineProps<{
+  schemas: ComponentSchema[],
+  parentSchema?: 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.setDisableHover(true)
+  designer.setCheckedNode(modelSchemas.value![index])
+}
+
+function isDraggable(schema: ComponentSchema) {
+  // 判断当前节点类型是否允许拖拽
+  if (schema.id === pageSchema.schemas[0]?.id || pluginManager.getComponentConfingByType(schema.type)?.editConstraints?.immovable) {
+    // 禁止拖拽
+    return 'unmover-item'
+  }
+
+  return 'draggable-item'
+}
+
+</script>

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

@@ -0,0 +1,177 @@
+.epic-event-item {
+  .epic-event-info {
+    display: flex;
+    background-color: var(--epic-event-item-color);
+    padding: 0 12px;
+    justify-content: space-between;
+    align-items: center;
+    height: 36px;
+    border: 1px solid var(--epic-border-color);
+    color: var(--epic-text-main);
+    margin: 0px -1px -1px 0px;
+  }
+
+  .epic-event-btn>span {
+    cursor: pointer;
+  }
+
+  .epic-action-editor-main {
+    .epic-editor-item {
+      margin: 8px 0px;
+      border: 1px solid var(--epic-border-color);
+      color: var(--epic-text-main);
+      padding: 8px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+
+  }
+}
+
+.epic-modal-action-main {
+  display: flex;
+  height: 100%;
+}
+
+.epic-modal-left-panel,
+.epic-script-left-panel {
+  width: 240px;
+  border: 1px solid var(--epic-border-color);
+  overflow: auto;
+  padding: 8px;
+  box-sizing: border-box;
+
+  .fun-btn {
+    border: 1px solid var(--epic-border-color);
+    padding: 8px 12px;
+    border-radius: 3px;
+    cursor: pointer;
+    margin-bottom: 6px;
+
+    &.checked {
+      background-color: var(--epic-primary-hover-color);
+      border-color: var(--epic-primary-color);
+      color: var(--epic-primary-color);
+    }
+  }
+}
+
+.epic-modal-right-panel,
+.epic-script-right-panel {
+  flex: 1;
+  border: 1px solid var(--epic-border-color);
+  margin-left: 8px;
+  padding: 8px;
+
+  .action-select {
+    margin-right: 8px;
+    min-width: 175px;
+  }
+}
+
+.epic-script-edit {
+  display: flex;
+
+  .epic-script-left-panel {
+    .epic-tree-select {
+      height: 240px;
+      overflow: auto;
+    }
+
+    .tree-node-item,
+    .epic-action-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 8px;
+
+      .action {
+        opacity: 0;
+        pointer-events: none;
+        color: var(--epic-primary-color);
+      }
+
+      &:hover .action {
+        opacity: 1;
+        pointer-events: all;
+      }
+    }
+
+
+  }
+
+  .epic-script-right-panel {
+    // width: 240px;
+    // flex: none;
+  }
+}
+
+.epic-action-select {
+  border-top: 1px solid var(--epic-border-color);
+  margin-top: 12px;
+  padding: 8px;
+  padding-right: 0;
+  overflow: auto;
+
+  .epic-action-item {
+    height: 32px;
+    line-height: 32px;
+    padding-left: 12px;
+    border-radius: 3px;
+    cursor: pointer;
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: var(--epic-primary-hover-color);
+      color: var(--epic-primary-color);
+    }
+
+    &.checked {
+      background-color: var(--epic-primary-hover-color);
+      border-color: var(--epic-primary-color);
+      color: var(--epic-primary-color);
+    }
+  }
+}
+
+.epic-editor-item {
+  display: flex;
+  align-items: center;
+  padding-top: 6px;
+
+  .epic-action-box {
+    display: flex;
+    align-items: center;
+
+
+    .epic-del-btn {
+      width: 30px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        color: #f22;
+      }
+    }
+
+    .epic-edit-btn {
+      width: 30px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--epic-primary-color);
+      }
+    }
+  }
+}
+
+.add-btn {
+  cursor: pointer;
+  margin-top: 6px;
+  color: var(--epic-primary-color);
+}