+ 
+
+ )
+ },
+ preview: () => (
+
+
+ ),
+ props: {
+ url: createEditorInputProp({ label: '地址' })
+ }
+} as VisualEditorComponent
diff --git a/src/packages/base-widgets/index.ts b/src/packages/base-widgets/index.ts
new file mode 100644
index 0000000..5b84961
--- /dev/null
+++ b/src/packages/base-widgets/index.ts
@@ -0,0 +1,11 @@
+const modules = import.meta.globEager('./*/index.tsx')
+
+const components = {}
+
+Object.keys(modules).forEach((key: string) => {
+ const name = key.replace(/\.\/(.*)\/index\.(tsx|vue)/, '$1')
+ components[name] = modules[key]?.default || modules[key]
+})
+
+console.log(components, 'base-widgets')
+export default components
diff --git a/src/packages/base-widgets/input/createFieldProps.ts b/src/packages/base-widgets/input/createFieldProps.ts
new file mode 100644
index 0000000..0a6b687
--- /dev/null
+++ b/src/packages/base-widgets/input/createFieldProps.ts
@@ -0,0 +1,141 @@
+import {
+ createEditorInputProp,
+ createEditorSelectProp,
+ createEditorSwitchProp
+} from '@/visual-editor/visual-editor.props'
+
+/**
+ * @name: createFieldProps
+ * @author: 卜启缘
+ * @date: 2021/5/4 13:57
+ * @description：createFieldProps
+ * @update: 2021/5/4 13:57
+ */
+export const createFieldProps = () => ({
+ modelValue: createEditorInputProp({
+ label: '默认值',
+ defaultValue: ''
+ }),
+ name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'input' }),
+ label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '输入框' }),
+ type: createEditorSelectProp({
+ label: '输入框类型',
+ options: [
+ { label: '文本', val: 'text' },
+ { label: '数字', val: 'number' },
+ { label: '文本域', val: 'textarea' },
+ { label: '密码', val: 'password' },
+ { label: '电话', val: 'tel' },
+ { label: '小数点', val: 'digit' }
+ ],
+ defaultValue: 'text'
+ }),
+ placeholder: createEditorInputProp({ label: '占位提示文字', defaultValue: '请输入' }),
+ colon: createEditorSwitchProp({ label: '是否在 label 后面添加冒号' }),
+ disabled: createEditorSwitchProp({ label: '是否禁用输入框' }),
+ error: createEditorSwitchProp({ label: '是否将输入内容标红' }),
+ 'error-message': createEditorInputProp({ label: '底部错误提示文案' }),
+ 'error-message-align': createEditorSelectProp({
+ label: '错误提示文案对齐方式',
+ options: [
+ {
+ label: '左对齐',
+ val: 'left'
+ },
+ {
+ label: '居中',
+ val: 'center'
+ },
+ {
+ label: '右对齐',
+ val: 'right'
+ }
+ ],
+ defaultValue: 'left'
+ }),
+ readonly: createEditorSwitchProp({ label: '是否为只读状态' }),
+ required: createEditorSwitchProp({ label: '是否显示表单必填星号' }),
+ 'right-icon': createEditorInputProp({ label: '右侧图标名称或图片链接' }),
+ rules: createEditorInputProp({ label: '表单校验规则' }),
+ 'left-icon': createEditorInputProp({ label: '左侧图标名称或图片链接' }),
+ 'arrow-direction': createEditorInputProp({
+ label: '箭头方向',
+ defaultValue: '',
+ tips: '箭头方向，可选值为 left up down'
+ }),
+ autosize: createEditorSwitchProp({
+ label: '自适应内容高度',
+ defaultValue: false,
+ tips:
+ '是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px'
+ }),
+ border: createEditorSwitchProp({ label: '是否显示内边框', defaultValue: true }),
+ center: createEditorSwitchProp({ label: '内容垂直居中' }),
+ 'clear-icon': createEditorInputProp({
+ label: '清除图标',
+ tips: '清除图标名称或图片链接'
+ }),
+ 'clear-trigger': createEditorSelectProp({
+ label: '清除图标显示时机',
+ options: [
+ { label: '输入框不为空时展示', val: 'always' },
+ { label: '输入框聚焦且不为空时展示', val: 'focus' }
+ ],
+ defaultValue: 'always',
+ tips: '显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示'
+ }),
+ clearable: createEditorSwitchProp({
+ label: '是否启用清除图标',
+ defaultValue: false,
+ tips: '是否启用清除图标，点击清除图标后会清空输入框'
+ }),
+ clickable: createEditorSwitchProp({ label: '是否开启点击反馈' }),
+ 'format-trigger': createEditorInputProp({ label: '格式化函数触发的时机' }),
+ formatter: createEditorInputProp({ label: '输入内容格式化函数' }),
+ 'icon-prefix': createEditorInputProp({
+ label: '图标类名前缀',
+ tips: '图标类名前缀，同 Icon 组件的 class-prefix 属性'
+ }),
+ 'input-align': createEditorSelectProp({
+ label: '输入框对齐方式',
+ options: [
+ {
+ label: '左对齐',
+ val: 'left'
+ },
+ {
+ label: '居中',
+ val: 'center'
+ },
+ {
+ label: '右对齐',
+ val: 'right'
+ }
+ ],
+ defaultValue: 'left'
+ }),
+ 'label-align': createEditorSelectProp({
+ label: '左侧文本对齐方式',
+ options: [
+ {
+ label: '左对齐',
+ val: 'left'
+ },
+ {
+ label: '居中',
+ val: 'center'
+ },
+ {
+ label: '右对齐',
+ val: 'right'
+ }
+ ],
+ defaultValue: 'left'
+ }),
+ 'label-width': createEditorInputProp({ label: '左侧文本宽度' }),
+ maxlength: createEditorInputProp({ label: '输入的最大字符数' }),
+ 'show-word-limit': createEditorSwitchProp({
+ label: '是否显示字数统计',
+ tips: '需要设置 maxlength 属性'
+ })
+})
diff --git a/src/packages/base-widgets/input/index.tsx b/src/packages/base-widgets/input/index.tsx
new file mode 100644
index 0000000..1b2cb18
--- /dev/null
+++ b/src/packages/base-widgets/input/index.tsx
@@ -0,0 +1,36 @@
+import { Field } from 'vant'
+import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
+import { createFieldProps } from './createFieldProps'
+import { useGlobalProperties } from '@/hooks/useGlobalProperties'
+
+export default {
+ key: 'input',
+ moduleName: 'baseWidgets',
+ label: '表单项类型 - 输入框',
+ preview: () => (
+
+
+
+
+
+ )
+ }
+})
diff --git a/src/packages/base-widgets/picker/createFieldProps.ts b/src/packages/base-widgets/picker/createFieldProps.ts
new file mode 100644
index 0000000..774c84c
--- /dev/null
+++ b/src/packages/base-widgets/picker/createFieldProps.ts
@@ -0,0 +1,39 @@
+import {
+ createEditorInputProp,
+ createEditorSelectProp,
+ createEditorSwitchProp
+} from '@/visual-editor/visual-editor.props'
+
+/**
+ * @name: createFieldProps
+ * @author: 卜启缘
+ * @date: 2021/5/4 13:57
+ * @description：createFieldProps
+ * @update: 2021/5/4 13:57
+ */
+export const createFieldProps = () => ({
+ colon: createEditorSwitchProp({ label: '是否在 label 后面添加冒号' }),
+ 'error-message': createEditorInputProp({ label: '底部错误提示文案' }),
+ 'error-message-align': createEditorSelectProp({
+ label: '错误提示文案对齐方式',
+ options: [
+ {
+ label: '左对齐',
+ val: 'left'
+ },
+ {
+ label: '居中',
+ val: 'center'
+ },
+ {
+ label: '右对齐',
+ val: 'right'
+ }
+ ],
+ defaultValue: 'left'
+ }),
+ border: createEditorSwitchProp({ label: '是否显示内边框', defaultValue: true }),
+ readonly: createEditorSwitchProp({ label: '是否为只读状态' }),
+ required: createEditorSwitchProp({ label: '是否显示表单必填星号' }),
+ rules: createEditorInputProp({ label: '表单校验规则' })
+})
diff --git a/src/packages/base-widgets/picker/index.tsx b/src/packages/base-widgets/picker/index.tsx
new file mode 100644
index 0000000..e189862
--- /dev/null
+++ b/src/packages/base-widgets/picker/index.tsx
@@ -0,0 +1,113 @@
+import { Field, Popup, Picker } from 'vant'
+import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
+import { createFieldProps } from './createFieldProps'
+import { useGlobalProperties } from '@/hooks/useGlobalProperties'
+import { createEditorInputProp, createEditorTableProp } from '@/visual-editor/visual-editor.props'
+import { reactive } from 'vue'
+
+export default {
+ key: 'picker',
+ moduleName: 'baseWidgets',
+ label: '表单项类型 - 选择器',
+ preview: () =>
+
+
+ ~
+
+
+
+
+
+
+
+
+
diff --git a/src/visual-editor/components/header/comp-render.tsx b/src/visual-editor/components/header/comp-render.tsx
new file mode 100644
index 0000000..289b7d2
--- /dev/null
+++ b/src/visual-editor/components/header/comp-render.tsx
@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+ name: 'CompRender',
+ props: {
+ element: {
+ type: Object,
+ default: () => ({})
+ },
+ config: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ setup(props) {
+ return () => {
+ const component = props.config.componentMap[props.element.componentKey]
+ return component.render({
+ size: {},
+ props: props.element.props || {},
+ model: {},
+ block: props.element,
+ custom: {}
+ })
+ }
+ }
+})
diff --git a/src/visual-editor/components/header/index.vue b/src/visual-editor/components/header/index.vue
new file mode 100644
index 0000000..f608bc3
--- /dev/null
+++ b/src/visual-editor/components/header/index.vue
@@ -0,0 +1,67 @@
+
+
+
+ H5低代码
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/visual-editor/components/left-aside/components/base-widgets/index.module.scss b/src/visual-editor/components/left-aside/components/base-widgets/index.module.scss
new file mode 100644
index 0000000..c0fde73
--- /dev/null
+++ b/src/visual-editor/components/left-aside/components/base-widgets/index.module.scss
@@ -0,0 +1,43 @@
+.list-group {
+
+}
+.list-group-item {
+ position: relative;
+ width: calc(100% - 20px);
+ margin-left: 10px;
+ border: solid 3px #ebeef5;
+ margin-top: 20px;
+ min-height: 120px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 5px;
+ box-sizing: border-box;
+ &:hover {
+ border-color: #409EFF;
+ cursor: move;
+ }
+ &:last-of-type {
+ margin-bottom: 20px;
+ }
+ &::before {
+ content: attr(data-label);
+ position: absolute;
+ top: -3px;
+ left: -3px;
+ background-color: #409EFF;
+ color: white;
+ padding: 4px 8px;
+ font-size: 12px;
+ z-index: 1;
+ }
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 2;
+ }
+}
diff --git a/src/visual-editor/components/left-aside/components/base-widgets/index.tsx b/src/visual-editor/components/left-aside/components/base-widgets/index.tsx
new file mode 100644
index 0000000..4a5db8a
--- /dev/null
+++ b/src/visual-editor/components/left-aside/components/base-widgets/index.tsx
@@ -0,0 +1,45 @@
+import { defineComponent } from 'vue'
+import { cloneDeep } from 'lodash'
+import { visualConfig } from '@/visual.config'
+import Draggable from 'vuedraggable'
+import styles from './index.module.scss'
+import { createNewBlock } from '@/visual-editor/visual-editor.utils'
+
+export default defineComponent({
+ name: 'BaseWidgets',
+ setup() {
+ const log = (evt) => {
+ window.console.log(evt)
+ }
+ // 克隆组件
+ const cloneDog = (comp) => {
+ console.log('当前拖拽的组件：', comp)
+ const newComp = cloneDeep(comp)
+ newComp._vid = Date.now()
+ return createNewBlock({ left: 0, top: 0, component: newComp })
+ }
+
+ return () => (
+ <>
+
+ {element.preview()}
+
+ )
+ }}
+
+ {element.preview()}
+
+ )
+ }}
+
+
+ {{ tabItem.label }}
+
+
+
+ {props.title && (
+
+ )
+ }
+ }
+})
diff --git a/src/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-edit.service.tsx b/src/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-edit.service.tsx
new file mode 100644
index 0000000..98e36ce
--- /dev/null
+++ b/src/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-edit.service.tsx
@@ -0,0 +1,132 @@
+import { VisualEditorProps } from '../../../../visual-editor.props'
+import { defineComponent, getCurrentInstance, onMounted, PropType, reactive, createApp } from 'vue'
+import { defer } from '../../../../utils/defer'
+import { ElButton, ElDialog, ElTable, ElTableColumn, ElInput } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+export interface TablePropEditorServiceOption {
+ data: any[]
+ config: VisualEditorProps
+ onConfirm: (val: any[]) => void
+}
+
+const ServiceComponent = defineComponent({
+ props: {
+ option: { type: Object as PropType
+ {props.title}
+
+ )}
+
+
+
+
+ {{
+ default: ({ row }: { row: any }) =>
+ ))}
+
+ {{
+ default: ({ $index }: { $index: number }) => (
+ handler.onDelete($index) } as any)}
+ >
+ 删除
+
+ )
+ }}
+
+
+
+ ),
+ footer: () => (
+ <>
+
+ 添加
+ 重置
+
+
+ {(!model.value || model.value.length == 0) && (
+ 添加
+ )}
+ {(model.value || []).map((item) => (
+ {item[props.propConfig.table!.showKey]}
+ ))}
+
+ )
+ }
+})
diff --git a/src/visual-editor/components/right-attribute-panel/index.common.scss b/src/visual-editor/components/right-attribute-panel/index.common.scss
new file mode 100644
index 0000000..75ec979
--- /dev/null
+++ b/src/visual-editor/components/right-attribute-panel/index.common.scss
@@ -0,0 +1,17 @@
+/**
+* @name: index.common
+* @author: 卜启缘
+* @date: 2021/5/3 16:05
+* @description：index.common
+* @update: 2021/5/3 16:05
+*/
+body {
+ .el-form-item__label {
+ font-size: 12px;
+ }
+ .el-form-item--mini .el-form-item__content {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+}
diff --git a/src/visual-editor/components/right-attribute-panel/index.module.scss b/src/visual-editor/components/right-attribute-panel/index.module.scss
new file mode 100644
index 0000000..b6f4123
--- /dev/null
+++ b/src/visual-editor/components/right-attribute-panel/index.module.scss
@@ -0,0 +1,61 @@
+/**
+* @name: index.module
+* @author: 卜启缘
+* @date: 2021/4/28 17:03
+* @description：index.module
+* @update: 2021/4/28 17:03
+*/
+$boxShadow: -2px 0 4px 0 rgb(0 0 0 / 10%);
+
+.drawer {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 320px;
+ background-color: white;
+ transform: translateX(100%);
+ transition: transform 0.5s ease-in-out;
+ box-shadow: $boxShadow;
+ z-index: 20;
+ &.is-open {
+ transform: translateX(0);
+ /*.floating-action-btn {
+ transform: translateX(0);
+ }*/
+ }
+ /*&:hover {
+ .floating-action-btn {
+ transform: translateX(-20px);
+ }
+ }*/
+}
+
+.drawer.is-open {
+ transform: translateX(0);
+}
+
+.floating-action-btn {
+ position: absolute;
+ width: 20px;
+ height: 80px;
+ background: #fff;
+ box-shadow: $boxShadow;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform: translateX(-20px);
+ transition: transform 0.5s ease-in-out;
+ left: 0;
+ top: 50%;
+ cursor: pointer;
+}
+
+.attrs {
+ position: absolute;
+ padding: 12px;
+ width: 100%;
+ height: 100%;
+ background-color: white;
+ overflow: auto;
+}
diff --git a/src/visual-editor/components/right-attribute-panel/index.tsx b/src/visual-editor/components/right-attribute-panel/index.tsx
new file mode 100644
index 0000000..4b6f2f1
--- /dev/null
+++ b/src/visual-editor/components/right-attribute-panel/index.tsx
@@ -0,0 +1,177 @@
+/**
+ * @name: RightAttributePanel
+ * @author: 卜启缘
+ * @date: 2021/4/28 16:59
+ * @description：属性编辑器
+ * @update: 2021/4/28 16:59
+ */
+import { defineComponent, PropType, reactive } from 'vue'
+import styles from './index.module.scss'
+import './index.common.scss'
+import {
+ ElColorPicker,
+ ElForm,
+ ElFormItem,
+ ElInput,
+ ElInputNumber,
+ ElOption,
+ ElSelect,
+ ElSwitch,
+ ElTabPane,
+ ElTabs,
+ ElPopover
+} from 'element-plus'
+import { VisualEditorProps, VisualEditorPropsType } from '@/visual-editor/visual-editor.props'
+import { TablePropEditor } from '@/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-editor'
+import {
+ VisualEditorBlockData,
+ VisualEditorConfig,
+ VisualEditorModelValue
+} from '@/visual-editor/visual-editor.utils'
+import MonacoEditor from './MonacoEditor'
+import { useVModel } from '@vueuse/core'
+import { useDotProp } from '@/visual-editor/utils/useDotProp'
+
+export default defineComponent({
+ name: 'RightAttributePanel',
+ props: {
+ block: { type: Object as PropType
+
+
+ )
+ }
+ }
+})
diff --git a/src/visual-editor/components/simulator-editor/comp-render.tsx b/src/visual-editor/components/simulator-editor/comp-render.tsx
new file mode 100644
index 0000000..bc172d2
--- /dev/null
+++ b/src/visual-editor/components/simulator-editor/comp-render.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, PropType } from 'vue'
+import { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils'
+
+export default defineComponent({
+ name: 'CompRender',
+ props: {
+ element: {
+ type: Object as PropType (state.isOpen = !state.isOpen)}>
+
+
+
+
+
+
+ {content}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {state.option.editType === DialogServiceEditType.textarea ? (
+
+ ),
+ footer: () => (
+
+ 取消
+ 确定
+
+ )
+ }}
+
+ {state.option.content()}
+
+ )
+ }
+})
+
+export const DropdownOption = defineComponent({
+ props: {
+ label: { type: String },
+ icon: { type: String }
+ },
+ emits: ['click'],
+ setup(props, ctx) {
+ const { onClick: dropdownClickHandler } = DropdownServiceProvider.inject()
+
+ const handler = {
+ onClick: (e: MouseEvent) => {
+ ctx.emit('click', e)
+ dropdownClickHandler()
+ }
+ }
+
+ return () => (
+
+
+ {props.label}
+
+ )
+ }
+})
+
+export const $$dropdown = (() => {
+ let ins: any
+ return (option: DropdownServiceOption) => {
+ if (!ins) {
+ const el = document.createElement('div')
+ document.body.appendChild(el)
+ const app = createApp(ServiceComponent, { option })
+ ins = app.mount(el)
+ }
+ ins.service(option)
+ }
+})()
diff --git a/src/visual-editor/utils/dropdown-sservice.scss b/src/visual-editor/utils/dropdown-sservice.scss
new file mode 100644
index 0000000..647553e
--- /dev/null
+++ b/src/visual-editor/utils/dropdown-sservice.scss
@@ -0,0 +1,29 @@
+.dropdown-service {
+ position: fixed;
+ padding: 8px 0;
+ z-index: 99;
+ box-shadow: 0 2px 5px 1px #ddd;
+ background-color: white;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 200ms linear;
+
+ .dropdown-option {
+ padding: 5px 12px;
+ font-size: 14px;
+
+ & > i {
+ margin-right: 4px;
+ }
+
+ &:hover {
+ background-color: #efefef;
+ cursor: pointer;
+ }
+ }
+
+ &.dropdown-service-show {
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
\ No newline at end of file
diff --git a/src/visual-editor/utils/useDotProp.ts b/src/visual-editor/utils/useDotProp.ts
new file mode 100644
index 0000000..5729457
--- /dev/null
+++ b/src/visual-editor/utils/useDotProp.ts
@@ -0,0 +1,18 @@
+/**
+ * @name: useDotProp
+ * @author: 卜启缘
+ * @date: 2021/5/2 19:54
+ * @description：useDotProp
+ * @update: 2021/5/2 19:54
+ */
+export const useDotProp = (originObj, propName) => {
+ const props: string[] = propName.split('.')
+ const isDotProp = props.length > 1
+ const prop = props.pop()!
+ const propObj = props.reduce((prev, curr) => (prev[curr] ??= {}), originObj)
+ return {
+ prop,
+ propObj,
+ isDotProp
+ }
+}
diff --git a/src/visual-editor/utils/useModel.tsx b/src/visual-editor/utils/useModel.tsx
new file mode 100644
index 0000000..ea83102
--- /dev/null
+++ b/src/visual-editor/utils/useModel.tsx
@@ -0,0 +1,42 @@
+import { ref, watch, defineComponent } from 'vue'
+
+export function useModel
+ 自定义的输入框
+
+
+ )
+ }
+})
diff --git a/src/visual-editor/visual-editor.props.tsx b/src/visual-editor/visual-editor.props.tsx
new file mode 100644
index 0000000..188288d
--- /dev/null
+++ b/src/visual-editor/visual-editor.props.tsx
@@ -0,0 +1,148 @@
+export enum VisualEditorPropsType {
+ input = 'input',
+ inputNumber = 'InputNumber',
+ color = 'color',
+ select = 'select',
+ table = 'table',
+ switch = 'switch'
+}
+
+export type VisualEditorProps = {
+ type: VisualEditorPropsType
+ label: string
+ tips?: string
+ defaultValue?: any
+} & {
+ options?: VisualEditorSelectOptions
+} & {
+ table?: VisualEditorTableOption
+}
+
+/*---------------------------------------switch-------------------------------------------*/
+interface EditorSwitchProp {
+ label: string
+ defaultValue?: boolean
+ tips?: string
+}
+
+export function createEditorSwitchProp({
+ label,
+ defaultValue,
+ tips
+}: EditorSwitchProp): VisualEditorProps {
+ return {
+ type: VisualEditorPropsType.switch,
+ label,
+ tips,
+ defaultValue
+ }
+}
+
+/*---------------------------------------input-------------------------------------------*/
+
+interface EditorInputProp {
+ label: string
+ defaultValue?: any
+ tips?: string
+}
+
+export function createEditorInputProp({
+ label,
+ defaultValue,
+ tips
+}: EditorInputProp): VisualEditorProps {
+ return {
+ type: VisualEditorPropsType.input,
+ label,
+ tips,
+ defaultValue
+ }
+}
+/*---------------------------------------InputNumber -------------------------------------------*/
+
+interface EditorInputNumberProp {
+ label: string
+ defaultValue?: any
+ tips?: string
+}
+
+export function createEditorInputNumberProp({
+ label,
+ defaultValue,
+ tips
+}: EditorInputNumberProp): VisualEditorProps {
+ return {
+ type: VisualEditorPropsType.inputNumber,
+ label,
+ tips,
+ defaultValue
+ }
+}
+
+/*---------------------------------------color-------------------------------------------*/
+
+export function createEditorColorProp(label: string, defaultValue?: string): VisualEditorProps {
+ return {
+ type: VisualEditorPropsType.color,
+ label,
+ defaultValue
+ }
+}
+
+/*---------------------------------------select-------------------------------------------*/
+
+export type VisualEditorSelectOptions = {
+ label: string
+ val: string | number | boolean | object
+}[]
+
+interface EditorSelectProp {
+ label: string
+ options: VisualEditorSelectOptions
+ defaultValue?: any
+ tips?: string
+}
+
+export function createEditorSelectProp({
+ label,
+ options,
+ defaultValue,
+ tips
+}: EditorSelectProp): VisualEditorProps {
+ return {
+ type: VisualEditorPropsType.select,
+ label,
+ defaultValue,
+ tips,
+ options
+ }
+}
+
+/*---------------------------------------table-------------------------------------------*/
+
+export type VisualEditorTableOption = {
+ options: {
+ label: string // 列显示文本
+ field: string // 列绑定的字段
+ }[]
+ showKey: string
+}
+
+interface EditorTableProp {
+ label: string
+ option: VisualEditorTableOption
+ defaultValue?: { label: string; value: string }[]
+}
+
+export function createEditorTableProp({
+ label,
+ option,
+ defaultValue
+}: EditorTableProp): VisualEditorProps {
+ return {
+ type: VisualEditorPropsType.table,
+ label,
+ table: option,
+ defaultValue
+ }
+}
diff --git a/src/visual-editor/visual-editor.utils.ts b/src/visual-editor/visual-editor.utils.ts
new file mode 100644
index 0000000..2b4dbc4
--- /dev/null
+++ b/src/visual-editor/visual-editor.utils.ts
@@ -0,0 +1,160 @@
+import { VisualEditorProps } from './visual-editor.props'
+import { inject, provide } from 'vue'
+import { useDotProp } from '@/visual-editor/utils/useDotProp'
+
+export interface VisualEditorBlockData {
+ _vid: string // 组件id 时间戳
+ moduleName: keyof ComponentModules // 组件所属的模块（基础组件、容器组件）
+ componentKey: string // 映射 VisualEditorConfig 中 componentMap 的 component对象
+ label: string // 组件标签名称
+ top: number // 组件的top定位
+ left: number // 组件的left定位
+ adjustPosition: boolean // 是否需要调整位置
+ focus: boolean // 当前是否为选中状态
+ zIndex: number // z-index值
+ width: number // 组件宽度
+ height: number // 组件高度
+ hasResize: boolean // 是否调整过宽度或者高度
+ props: Record