form-designer-xinyi 1.0.0

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

@@ -0,0 +1,248 @@
+<template>
+    <!-- 工具条 start  -->
+    <div class="epic-edit-toolbar flex items-center justify-between px-4">
+        <div class="flex-1 h-full flex items-center">
+            <div :title="item.title" class="epic-action-item h-90% px-10px flex items-center cursor-pointer"
+                v-for="(item, index) in actionOptions" :class="{ disabled: item.disabled }" :key="index"
+                @click="item.on">
+                <EIcon :name="item.icon"></EIcon>
+            </div>
+        </div>
+
+        <input type="file" ref="fileRef" accept=".json,.txt" v-show="false" @change="handleFileSelected">
+
+        <div class="flex-1 h-full flex items-center justify-center">
+            <div :title="item.title" class="epic-device-item h-90% px-10px flex items-center cursor-pointer"
+                :class="{ checked: item.key === checkedKey }" v-for="item in deviceOptions" :key="item.key"
+                @click="handleSetCanvas(item.key)">
+                <EIcon :name="item.icon"></EIcon>
+            </div>
+        </div>
+        <div class="flex-1 h-full flex items-center justify-end">
+
+            <!-- 缩放操作 start  -->
+            <div v-if="!disabledZoom" class="flex items-center ml-12px">
+                <div class="pr-8px w-82px cursor-pointer">
+                    <Select v-model:value="canvasScaleComuted" v-model="canvasScaleComuted"
+                        :options="canvasScaleOptions" size="small"></Select>
+                </div>
+                <div class="w-90px cursor-pointer">
+                    <Slider :min="0.6" :max="1.4" :step="0.01" :tooltip="false" v-model:value="canvasScale"
+                        v-model="canvasScale" />
+                </div>
+            </div>
+            <!-- 缩放操作 end  -->
+        </div>
+    </div>
+    <EPreviewJson ref="previewJson" />
+    <!-- 工具条 end  -->
+</template>
+<script lang="ts" setup>
+import { useShareStore, pluginManager, revoke, deepCompareAndModify, convertKFormData } from '@epic-designer/utils'
+import type { PageSchema, Designer } from '../../../../../types/epic-designer'
+import { computed, inject, ref } from 'vue'
+import EIcon from '../../../../icon'
+import EPreviewJson from './previewJson.vue'
+
+const Slider = pluginManager.getComponent('slider')
+const Select = pluginManager.getComponent('select')
+
+const { canvasScale, disabledZoom } = useShareStore()
+const checkedKey = ref('pc')
+const pageSchema = inject('pageSchema') as PageSchema
+const designer = inject('designer') as Designer
+const previewJson = ref<InstanceType<typeof EPreviewJson> | null>(null)
+
+const deviceOptions = [
+    {
+        icon: 'icon-a-diannaotoubu',
+        title: 'pc',
+        key: 'pc'
+    },
+    {
+        icon: 'icon-a-pingbantoubu',
+        title: '平板',
+        key: 'pad'
+    },
+    {
+        icon: 'icon-a-shoujitoubu',
+        title: '手机',
+        key: 'mobile'
+    },
+]
+
+const recordList = revoke.recordList
+const undoList = revoke.undoList
+
+
+
+const actionOptions = computed(() => {
+    return [
+        {
+            icon: 'icon-daima1',
+            title: '查看数据',
+            on: () => handlePreview()
+        },
+        {
+            icon: 'icon-shangchuan1',
+            title: '导入数据',
+            on: handleOpenFileSelector
+        },
+        {
+            icon: 'icon-shanchu1',
+            title: '清空',
+            on: handleReset
+        },
+        {
+            icon: 'icon-chexiao2x',
+            title: '撤销',
+            on: handleUndo,
+            disabled: !recordList.value.length
+        },
+        {
+            icon: 'icon-fanhui2x',
+            title: '重做',
+            on: handleRedo,
+            disabled: !undoList.value.length
+        },
+
+    ]
+})
+
+const fileRef = ref<HTMLInputElement | null>(null)
+const canvasScaleComuted = computed({
+    get() {
+        return `${(canvasScale.value * 100).toFixed(0)}%`
+    },
+    set(value) {
+        canvasScale.value = Number(value)
+    }
+})
+
+const canvasScaleOptions = [
+    {
+        label: "60%",
+        value: "0.6",
+    },
+    {
+        label: "80%",
+        value: "0.8",
+    },
+    {
+        label: "100%",
+        value: "1.0",
+    },
+    {
+        label: "120%",
+        value: "1.2",
+    },
+    {
+        label: "140%",
+        value: "1.4",
+    },
+]
+
+/**
+ * 撤销操作
+ */
+function handleUndo() {
+    const componentSchema = revoke.undo()
+    if (!componentSchema) return
+    deepCompareAndModify(pageSchema.schemas, componentSchema)
+    designer.setCheckedNode(pageSchema.schemas[0])
+}
+
+/**
+ * 重做操作
+ */
+function handleRedo() {
+    const componentSchema = revoke.redo()
+    if (!componentSchema) return
+    deepCompareAndModify(pageSchema.schemas, componentSchema)
+    designer.setCheckedNode(pageSchema.schemas[0])
+}
+
+
+/**
+ * 重置页面数据
+ */
+function handleReset() {
+    designer.reset()
+}
+
+// 预览数据
+function handlePreview() {
+    previewJson.value!.handleOpen()
+}
+
+
+/**
+ * 打开文件选择器
+ */
+function handleOpenFileSelector() {
+    fileRef.value?.click()
+}
+
+// 选择文件
+function handleFileSelected(e) {
+    const file = e.target.files?.[0]
+    if (!file) return
+    e.target.value = null
+
+    // 通过json文件导入
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = (res) => {
+        handleImporttData(res.target?.result as string);
+
+    };
+}
+
+/**
+ * 导入数据
+ */
+function handleImporttData(content?: string) {
+    // 导入JSON
+    try {
+
+        let schema = JSON.parse(content ?? '')
+        if (!schema.schemas) {
+            schema = convertKFormData(schema)
+        }
+
+        // 调用 deepCompareAndModify 函数比较 pageSchema 和传入的 schema，进行修改
+        deepCompareAndModify(pageSchema, schema)
+
+
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+/**
+ * 设置画布宽高
+ * @param type 
+ */
+function handleSetCanvas(type: string) {
+    designer.handleToggleDeviceMode(type)
+    checkedKey.value = type
+    const canvasConfigs = {
+        pc: {
+
+        },
+        pad: {
+            width: '800px',
+            mode:type
+        },
+        mobile: {
+            width: '420px',
+            mode:type
+        },
+    }
+    
+    pageSchema.canvas = canvasConfigs[type]
+}
+
+
+
+</script>

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

@@ -0,0 +1,16 @@
+// 头部
+.epic-header-container {
+  border: 1px solid var(--epic-border-color);
+  border-bottom: 0;
+}
+
+.epic-header,
+.epic-header a {
+  height: 42px;
+  background-color: var(--epic-header-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  color: var(--epic-text-main);
+}

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

@@ -0,0 +1,60 @@
+<template>
+  <header class="epic-header relative">
+    <div class="epic-header-item flex-1 items-center flex">
+      <slot name="prefix">
+        <a class="decoration-none items-center flex" href="https://github.com/Kchengz/epic-designer" target="_blank">
+          <img src="../../../../../static/logo.png" class="w-18px h-18px" alt="" srcset="">
+          <span class="ml-3">EpicDesigner</span>
+        </a>
+      </slot>
+    </div>
+
+    <div class="epic-header-item flex-1 flex justify-center text-12px">
+      <slot name="title">
+        {{ designerProps.title }}
+      </slot>
+    </div>
+    <div class="epic-header-item flex-1 flex justify-end items-center">
+      <slot name="right-prefix"></slot>
+      <slot name="right-action">
+        <div>
+          <Button size="small" @click="handlePreview">
+            <EIcon name="icon-yulan" style="margin-right:6px" />
+            预览
+          </Button>
+        </div>
+        <div class="ml-2">
+          <Button size="small" @click="handleSave">
+            <EIcon name="icon-baocun" style="margin-right:6px" />
+            保存
+          </Button>
+        </div>
+      </slot>
+      <slot name="right-suffix"></slot>
+    </div>
+  </header>
+</template>
+<script lang="ts" setup>
+import { inject, type Ref } from 'vue'
+import { pluginManager } from '@epic-designer/utils'
+import EIcon from '../../../../icon'
+import { DesignerProps } from '../../types'
+const emits = defineEmits(['save', 'reset', 'preview'])
+const Button = pluginManager.getComponent('button')
+const designerProps = inject('designerProps') as Ref<DesignerProps>
+
+/**
+ * 预览
+ */
+function handlePreview() {
+  emits('preview')
+}
+
+/**
+ * 触发保存操作
+ */
+function handleSave() {
+  emits('save')
+}
+
+</script>

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

@@ -0,0 +1,7 @@
+.epic-outline {
+    overflow: auto;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  
+  

package/packages/core/components/designer/src/modules/outline/outline.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="epic-outline">
+    <ETree :options="pageSchema.schemas" draggable :selected-keys="selectedKeys" :hover-key="designer.state.hoverNode?.id"
+      @nodeClick="handleNodeClick">
+      <template #tree-node="{ schema }">
+        <div class="epic-text-padding" @mouseenter.stop="designer.setHoverNode(schema)"
+          @mouseleave.stop="designer.setHoverNode(null)">
+          {{ schema.label ??
+            pluginManager.getComponentConfingByType(schema.type)?.defaultSchema.label }}
+            <span class="epic-node-type-text">
+            {{ schema.type }}
+          </span>
+        </div>
+      </template>
+    </ETree>
+  </div>
+</template>
+<script lang="ts" setup>
+import ETree from '../../../../tree'
+import { inject, computed } from 'vue'
+import { PageSchema, Designer } from '../../../../../types/epic-designer'
+import { pluginManager } from '@epic-designer/utils'
+
+const designer = inject('designer') as Designer
+const pageSchema = inject('pageSchema') as PageSchema
+
+
+// 计算选中节点值
+const selectedKeys = computed(() => {
+  const id = designer.state.checkedNode?.id
+  return id ? [id] : []
+})
+
+// 设置选中节点
+function handleNodeClick(e: any) {
+  designer.setCheckedNode(e.componentSchema)
+}
+
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <Modal v-model="visible" title="预览" class="w-900px" width="900px" @close="handleClose" @ok="handleOk" okText="输出结果">
+    <div class="min-w-750px rounded">
+      <EBuilder :key="EBuilderKey" ref="kb" :page-schema="pageSchema" />
+
+      <!-- 输出结果 start -->
+      <Modal v-model="dataVisible" title="表单数据" class="w-860px" width="860px" @close="handleCloseData" @ok="handleCloseData">
+        <div class="h-full rounded">
+          <MonacoEditor ref="monacoEditorRef" autoToggleTheme class="h-full editor" :model-value="formValues" />
+        </div>
+      </Modal>
+      <!-- 输出结果 end -->
+    </div>
+  </Modal>
+</template>
+<script lang="ts" setup>
+import EBuilder from '../../../../builder'
+import { pluginManager, getUUID } from '@epic-designer/utils'
+import { ref, inject, nextTick } from 'vue'
+import { PageSchema } from '../../../../../types/epic-designer'
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+const Modal = pluginManager.getComponent('modal')
+const monacoEditorRef = ref<any>(null)
+
+
+const visible = ref(false)
+const dataVisible = ref(false)
+const formValues = ref({})
+
+const pageSchema = inject('pageSchema') as PageSchema
+const kb = ref<any>(null)
+const EBuilderKey = ref('')
+
+function handleCloseData() {
+  dataVisible.value = false
+}
+
+function handleClose() {
+  visible.value = false
+}
+
+
+
+function handleOpen() {
+  visible.value = true
+  // 通过修改key重新渲染组件
+  EBuilderKey.value = getUUID()
+}
+
+async function handleOk() {
+  try {
+    const values = await kb.value.validate()
+    console.log('表单结果为：', values)
+    formValues.value = JSON.stringify(values, null, 2)
+    nextTick(() => {
+      monacoEditorRef.value?.setValue(formValues.value)
+    })
+    dataVisible.value = true
+  } catch (err) {
+    if (typeof err === 'string') {
+      alert(err + '\r\n请添加表单组件后再尝试！')
+    }
+    console.error(err)
+  }
+
+}
+
+defineExpose({
+  handleOpen
+})
+</script>

package/packages/core/components/designer/src/modules/rightSidebar/breadcrumb.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="epic-breadcrumb pl-4 py-2 truncate">
+    <span v-for="(item, index) in designer.state.matched" :key="index">
+      <span v-if="index > (designer.state.matched.length - 4)">
+        <span v-if="designer.state.matched.length > 3 && index === (designer.state.matched.length - 3)">...</span>
+        <EIcon v-if="index !== 0" class="m-1" name="icon-zhankai" />
+        <span class="node-item cursor-pointer" @click="handleSelect(item)" @mouseenter.stop="designer.setHoverNode(item)"
+          @mouseleave.stop="designer.setHoverNode(null)">
+          {{ item.label ?? pluginManager.getComponentConfingByType(item.type)?.defaultSchema.label }}
+        </span>
+      </span>
+
+    </span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { Designer, ComponentSchema } from '../../../../../types/epic-designer'
+import EIcon from '../../../../icon'
+import { pluginManager } from '@epic-designer/utils'
+const designer = inject('designer') as Designer
+/**
+ * 选中点击节点元素
+ * @param schema
+ */
+function handleSelect(schema: ComponentSchema) {
+  designer.setCheckedNode(schema)
+}
+
+</script>

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

@@ -0,0 +1,75 @@
+.epic-right-sidebar-container {
+  background-color: var(--epic-view-color);
+}
+
+.epic-right-sidebar-hide-btn {
+  background-color: var(--epic-view-color);
+  color: var(--epic-text-helper);
+  // box-shadow: 2px 5px 6px 3px #ffffff36;
+  box-shadow: var(--epic-shadow-color) 0px 1px 4px;
+}
+
+.epic-right-sidebar {
+  background-color: var(--epic-view-color);
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition: width 0.3s;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--epic-border-color);
+  border-right: 1px solid var(--epic-border-color);
+  &.hide {
+    width: 0;
+    border: 0;
+  }
+
+  .epic-breadcrumb {
+    border-bottom: 1px solid var(--epic-border-color);
+    color: var(--epic-text-main);
+    .iconfont {
+      color: var(--epic-text-secondary);
+      font-size: var(--epic-text-sm);
+    }
+  }
+
+  .epic-actions-container {
+    display: flex;
+    // border : 1px solid #f89;
+
+    .epic-action-item {
+      padding: 8px 8px;
+      flex: 1;
+      text-align: center;
+      border-bottom: 1px solid var(--epic-border-color);
+      cursor: pointer;
+      &::after {
+        content: "";
+        width: 0%;
+        left: 50%;
+      }
+
+      &.checked {
+        color: var(--epic-primary-color);
+        position: relative;
+        transition: 0.3s all;
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background-color: var(--epic-primary-color);
+          transition: 0.3s all;
+        }
+      }
+    }
+  }
+
+  .epic-sidebar-content {
+    flex: 1;
+    overflow: auto;
+  }
+}

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

@@ -0,0 +1,58 @@
+<template>
+  <div v-if="sidebarComponent" class="epic-right-sidebar-container relative">
+    <!-- 折叠按钮 start -->
+    <div
+      class="epic-right-sidebar-hide-btn absolute left--18px top-80px cursor-pointer rounded-full flex justify-center items-center w-28px h-28px z-9"
+      @click="handleHideRight">
+      <EIcon prefix="" class="iconfont transition-all" :class="{ 'rotate-180': hideRightMain }"
+        name="epic-icon-zhankai" />
+    </div>
+    <div class="w-10px"></div>
+    <!-- 折叠按钮 end -->
+
+    <div class="epic-right-sidebar w-280px" :class="{ hide: hideRightMain }">
+      <div class="w-280px">
+        <EBreadcrumb />
+        <ul class="epic-actions-container">
+          <li v-for="(item, index) in rightSidebars" :key="index" class="epic-action-item" :title="item.title"
+            :class="{ checked: actionBarCheckedIndex === index }" @click="handleClick(item, index)">
+            {{ item.title }}
+          </li>
+        </ul>
+        <div class="epic-sidebar-content">
+          <component :is="sidebarComponent" />
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, shallowRef } from 'vue'
+import { pluginManager } from '@epic-designer/utils'
+import { RightSidebarModel } from '@epic-designer/utils'
+import EBreadcrumb from './breadcrumb.vue'
+import EIcon from "../../../../icon";
+
+const hideRightMain = ref(false)
+
+const rightSidebars = computed(() => {
+  return pluginManager.viewsContainers.rightSidebars.value.filter(item => item.visible)
+})
+
+const actionBarCheckedIndex = ref<number | null>(0)
+const sidebarComponent = shallowRef<any>(null)
+sidebarComponent.value = rightSidebars.value[0]?.component
+
+function handleHideRight() {
+  hideRightMain.value = !hideRightMain.value
+}
+
+function handleClick(item: RightSidebarModel, index: number) {
+  if (actionBarCheckedIndex.value === index) {
+    return false
+  }
+  sidebarComponent.value = item.component
+  actionBarCheckedIndex.value = index
+}
+</script>

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

@@ -0,0 +1,7 @@
+.epic-sound-code {
+  height: 100%;
+}
+
+.epic-editor {
+  height: 100%;
+}

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

@@ -0,0 +1,34 @@
+<template>
+  <div class="epic-sound-code">
+    <MonacoEditor ref="monacoEditorRef" autoToggleTheme class="epic-editor" :model-value="initModelValue"
+      lineNumbers="off" @update:model-value="setSchemas" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { inject, ref, toRaw, watch } from 'vue'
+import { pluginManager, deepEqual, deepCompareAndModify } from '@epic-designer/utils'
+import { Designer } from '../../../../../types/epic-designer'
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+const monacoEditorRef = ref<any>(null)
+const designer = inject('designer') as Designer
+let oldVal: any = {}
+watch(() => designer.state.checkedNode, (newVal: any) => {
+  if (!deepEqual(oldVal, toRaw(newVal))) {
+    monacoEditorRef.value?.setValue(JSON.stringify(newVal, null, 2))
+  }
+}, {
+  deep: true
+})
+
+const initModelValue = JSON.stringify(designer.state.checkedNode, null, 2)
+
+function setSchemas(e: string) {
+  try {
+    if (!designer.state.checkedNode) { return false }
+    oldVal = JSON.parse(e)
+    deepCompareAndModify(designer.state.checkedNode, oldVal)
+  } catch (error) {
+    console.warn("[epic-desinger：源码]异常：", error);
+  }
+}
+</script>

package/packages/core/components/designer/src/types.ts

@@ -0,0 +1,9 @@
+import { PageSchema } from "../../../types/epic-designer";
+
+export interface DesignerProps {
+  disabledZoom?: boolean;
+  hiddenHeader?: boolean;
+  lockDefaultSchemaEdit?: boolean;
+  title?: string;
+  defaultSchema?: PageSchema;
+}

package/packages/core/components/icon/index.ts

@@ -0,0 +1,2 @@
+import EIcon from './src/icon.vue'
+export default EIcon

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

@@ -0,0 +1,15 @@
+<template>
+  <span class="iconfont" :class="props.prefix + props.name" />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: 'EIcon'
+})
+const props = withDefaults(defineProps<{
+  name: string;
+  prefix?: string;
+}>(), {
+  prefix: 'epic-'
+})
+
+</script>

package/packages/core/components/node/index.ts

@@ -0,0 +1,2 @@
+import ENode from './src/node.vue'
+export default ENode