Merge pull request #126 from AnsGoo/dev-lib

feat: 支持了异步加载配置数据

examples/package.json

@@ -28,11 +28,11 @@
     "vue": "^3.3.8",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.5",
-    "@open-data-v/base":"^0.0.2",
-    "@open-data-v/ui":"^0.0.2",
+    "@open-data-v/base":"workspace:*",
+    "@open-data-v/ui":"workspace:*",
     "@open-data-v/data":"^0.0.2",
     "@open-data-v/scripts":"^0.0.2",
-    "@open-data-v/designer":"^0.0.2"
+    "@open-data-v/designer":"workspace:*"
   },
   "devDependencies": {
     "@types/codemirror": "^5.60.13",

examples/src/api/pages/type.ts

@@ -12,6 +12,7 @@ export interface LayoutData {
   canvasStyle: CanvasStyleData
   isPublish?: boolean
   dataSlotters: Array<{ type: string; config: any }>
+  components?: Array<string>
 }
 
 export type SimpleLayoutData = Omit<LayoutData, 'canvasStyle' | 'canvasData'>

examples/src/index.ts

@@ -15,11 +15,13 @@ import store from '@/store'
 
 import App from './App.vue'
 import CodeEditor from './components/CodeEditor'
-import { useLoadComponent } from './load'
+import { useAsyncLoadComponent, useLoadComponent } from './load'
 
 const componentPlugin = useComponentPlugin({ codeEditorComponent: CodeEditor })
 const AsyncComponent = useLoadComponent()
 
+const RemoteComponent = useAsyncLoadComponent()
+
 const app = createApp(App)
 app.use(router)
 app.use(Directive)
@@ -28,6 +30,7 @@ app.use(AsyncComponent)
 // 注册状态管理器
 app.use(store)
 app.use(componentPlugin)
+app.use(RemoteComponent)
 
 // 注册路由模块
 

examples/src/load.ts

@@ -3,6 +3,8 @@ import { useCanvasState } from '@open-data-v/designer'
 import type { App } from 'vue'
 import { defineAsyncComponent } from 'vue'
 
+import components from '../../resources/components'
+
 const canvasState = useCanvasState()
 const useLoadComponent = () => {
   return {
@@ -15,17 +17,16 @@ const useLoadComponent = () => {
         const componentOptions = moduleFilesTs[key]?.default
 
         if (componentOptions) {
-          canvasState.loadComponent(
-            componentOptions.componentName,
-            componentOptions.config as BaseComponent
-          )
+          const { componentName, config, mainfest, component } = componentOptions
+          const name = mainfest ? mainfest.name : componentName
+          canvasState.loadComponent(name, config as BaseComponent, mainfest)
           // 注册异步组件
           const asyncComp = defineAsyncComponent({
-            loader: componentOptions.component,
+            loader: component,
             delay: 200,
             timeout: 3000
           })
-          app.component(componentOptions.componentName, asyncComp)
+          app.component(name, asyncComp)
         } else {
           console.error(`${key} is not a valid component`)
         }
@@ -34,4 +35,24 @@ const useLoadComponent = () => {
   }
 }
 
-export { useLoadComponent }
+const useAsyncLoadComponent = () => {
+  return {
+    install: (app: App) => {
+      // 注册Group组件
+      const keys = Object.keys(components)
+      keys.forEach((el) => {
+        const pkg = components[el]
+        const { mainfest, panel, component } = pkg
+        const asyncComp = defineAsyncComponent({
+          loader: component,
+          delay: 200,
+          timeout: 3000
+        })
+        canvasState.loadComponents(mainfest.name, mainfest, panel)
+        app.component(mainfest.name, asyncComp)
+      })
+    }
+  }
+}
+
+export { useAsyncLoadComponent, useLoadComponent }

examples/tailwind.config.js

@@ -5,7 +5,7 @@ module.exports = {
   mode: 'jit',
   content: [
     // '../packages/data/src/**/*.{vue,ts,tsx}',
-    // '../packages/designer/src/**/*.{vue,ts,tsx}',
+    '../packages/designer/src/**/*.{vue,ts,tsx}',
     // '../packages/scripts/src**/*.{vue,ts,tsx}',
     // '../packages/ui/src/**/*.{vue,ts,tsx}',
     './src/**/*.{vue,ts,tsx}',

examples/vite.config.ts

@@ -1,10 +1,10 @@
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { resolve } from 'path'
+import { visualizer } from 'rollup-plugin-visualizer'
 import type { ConfigEnv, ProxyOptions, UserConfigExport } from 'vite'
 import { loadEnv } from 'vite'
 import { viteMockServe } from 'vite-plugin-mock'
-import { visualizer } from 'rollup-plugin-visualizer'
 
 // https://vitejs.dev/config/
 export default ({ mode, command }: ConfigEnv): UserConfigExport => {

packages/base/src/component.ts

@@ -49,8 +49,8 @@ export class CustomComponent {
   defaultViewType: ContainerType = ContainerType.CARD
 
   // form表单中使用
-  _prop: MetaContainerItem[] = []
-  _style: MetaContainerItem[] = []
+  private _prop: MetaContainerItem[] = []
+  private _style: MetaContainerItem[] = []
   extraStyle: Record<string, string | number | boolean> = {}
   groupStyle?: GroupStyle
   positionStyle: DOMRectStyle = { left: 0, top: 0, width: 0, height: 0, rotate: 0 }
@@ -177,7 +177,6 @@ export class CustomComponent {
       }
       this._style = [common, ...this._style]
     }
-
     return this._style
   }
 
@@ -217,10 +216,22 @@ export class CustomComponent {
     }
     return this._styleValue
   }
-
   get exampleData(): any {
     return undefined
   }
+  private loadExampleData?: () => any
+
+  public setExampleData(loader: () => any) {
+    this.loadExampleData = loader
+  }
+
+  public getExampleData() {
+    if (this.exampleData) {
+      return this.exampleData
+    } else {
+      return this.loadExampleData ? this.loadExampleData() : undefined
+    }
+  }
 
   // 自定义样式编辑框数据处理
   styleToCss(_: Record<string, any>[]): Nullable<Record<string, any>> {
@@ -416,8 +427,8 @@ export class CustomComponent {
       }
     }
   }
-  loadDemoData() {
-    const exampleData = this.exampleData
+  async loadDemoData() {
+    const exampleData = await this.getExampleData()
     setTimeout(() => {
       if (this.callbackData) {
         this.callbackData({ status: 'SUCCESS', data: exampleData, afterData: exampleData }, 'DEMO')
@@ -430,6 +441,13 @@ export class CustomComponent {
   updateChild(index: number, child: CustomComponent) {
     this.subComponents[index] = child
   }
+
+  loadExtraProp(prop: Array<MetaContainerItem>) {
+    this._prop = prop
+  }
+  loadExtraStyle(style: Array<MetaContainerItem>) {
+    this._style = style
+  }
 }
 
 export type BaseComponent = { new (id?: string, name?: string, icon?: string): CustomComponent }

packages/base/src/components/RenderSlot.ts

@@ -6,7 +6,6 @@ export default defineComponent({
   },
   // @ts-ignore
   setup(props) {
-    console.log(props.slots)
     return () => [h('div', {}, props.slots)]
   }
 })

packages/base/src/index.ts

@@ -34,7 +34,7 @@ import type {
   Slotter,
   SwitchProps
 } from './type'
-import { buildModeValue, updateModeValue, uuid } from './utils'
+import { buildModeValue, isClass, updateModeValue, uuid } from './utils'
 
 export {
   buildModeValue,
@@ -48,6 +48,7 @@ export {
   eventBus,
   FormType,
   GlobalColorSwatches,
+  isClass,
   Logger,
   LogLevel,
   RenderSlot,

packages/base/src/utils.ts

@@ -1,4 +1,4 @@
-import { isUndefined } from 'lodash-es'
+import { isFunction, isUndefined } from 'lodash-es'
 
 import type { MetaContainerItem, MetaForm } from './type'
 
@@ -80,3 +80,7 @@ export const updateFormItemsValue = (
     }
   })
 }
+
+export const isClass = (varValue: any) => {
+  return isFunction(varValue) && !isUndefined(varValue.prototype)
+}

packages/designer/src/data/DemoData/Pane.vue

@@ -49,14 +49,15 @@ onMounted(async () => {
 
 const initData = async () => {
   const dataConfig = props.slotter.dataConfig
-  const exampleData = props.slotter.exampleData || {}
+  const exampleData = (await props.slotter.getExampleData()) || {}
   if (dataConfig && dataConfig.type === 'DEMO') {
     const acceptor = (resp) => {
       formData.data = JSON.stringify(resp.data, null, '\t')
     }
     const instance = dataConfig.dataInstance
     instance.debug(acceptor)
   } else {
+    formData.data = JSON.stringify(exampleData, null, '\t')
     const dataConfig = {
       type: 'DEMO',
       dataInstance: new props.handler({

packages/designer/src/editor/Editor.vue

@@ -63,8 +63,10 @@ import { useActionState, useCanvasState, useClipBoardState } from '../state'
 import type { ContextmenuItem, Location, Vector } from '../type'
 import {
   backgroundToCss,
+  buildDataHandler,
   createComponent,
   filterStyle,
+  getComponentInstance,
   getComponentShapeStyle,
   systemLogger,
   uuid
@@ -74,8 +76,6 @@ const actionState = useActionState()
 const clipBoardState = useClipBoardState()
 const canvasState = useCanvasState()
 
-const components = canvasState.components
-
 const getShapeStyle = (style) => {
   return filterStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
 }
@@ -149,11 +149,13 @@ const copyComponent = () => {
   }
 }
 
-const pasteComponent = (event: ClipboardEvent) => {
+const pasteComponent = async (event: ClipboardEvent) => {
   if (event.clipboardData) {
     const textData = event.clipboardData.getData('text')
     try {
-      const component: CustomComponent = createComponent(JSON.parse(textData))
+      const componentData = JSON.parse(textData)
+      await canvasState.loadComponetClazz(componentData.component)
+      const component: CustomComponent = createComponent(componentData)
       if (component) {
         component.changeStyle(['position', 'top'], component.positionStyle.top + 10)
         component.changeStyle(['position', 'left'], component.positionStyle.left + 10)
@@ -231,19 +233,25 @@ const handleDrop = async (e) => {
   e.preventDefault()
   e.stopPropagation()
   const componentName = e.dataTransfer.getData('componentName')
-  if (componentName) {
-    const component: CustomComponent = new components[componentName]()
-    if (component.dataMode === DataMode.UNIVERSAL) {
-      component.loadDemoData()
-    }
+  if (!componentName) {
+    return
+  }
+  await canvasState.loadComponetClazz(componentName)
+  const component: CustomComponent = getComponentInstance({ component: componentName })
+  if (!component) {
+    return
+  }
 
-    const editorRectInfo = document.querySelector('#editor')!.getBoundingClientRect()
-    const y = (e.pageY - editorRectInfo.top) / canvasState.scale
-    const x = (e.pageX - editorRectInfo.left) / canvasState.scale
-    component.changeStyle(['position', 'top'], y)
-    component.changeStyle(['position', 'left'], x)
-    canvasState.appendComponent(component)
+  if (component.dataMode === DataMode.UNIVERSAL) {
+    buildDataHandler(component)
   }
+
+  const editorRectInfo = document.querySelector('#editor')!.getBoundingClientRect()
+  const y = (e.pageY - editorRectInfo.top) / canvasState.scale
+  const x = (e.pageX - editorRectInfo.left) / canvasState.scale
+  component.changeStyle(['position', 'top'], y)
+  component.changeStyle(['position', 'left'], x)
+  canvasState.appendComponent(component)
 }
 
 const handleDragOver = (e) => {

packages/designer/src/modules/backItem/BackItem.vue

@@ -22,7 +22,7 @@
 import type { SelectOption } from '@open-data-v/ui'
 import { OColorPicker, OSelect } from '@open-data-v/ui'
 import { isNumber } from 'lodash-es'
-import { onMounted, ref } from 'vue'
+import { ref, watch } from 'vue'
 
 import { GlobalColorSwatches } from '../enum'
 import LinearGradient from '../linearGradient'
@@ -99,16 +99,20 @@ const changeBackgroundImage = () => {
   }
 }
 
-onMounted(() => {
-  if ('backgroundColor' in props.value) {
-    selectOption.value = 'backgroundColor'
-    backgroundColor.value = props.value
-  } else if ('angle' in props.value) {
-    selectOption.value = 'backgroundGradient'
-    backgroundGradient.value = props.value
-  } else if ('backgroundImage' in props.value) {
-    selectOption.value = 'backgroundImage'
-    backgroundImage.value = props.value
+watch(
+  () => props.value,
+  () => {
+    const backGroundValue = props.value || {}
+    if ('backgroundColor' in backGroundValue) {
+      selectOption.value = 'backgroundColor'
+      backgroundColor.value = backGroundValue
+    } else if ('angle' in backGroundValue) {
+      selectOption.value = 'backgroundGradient'
+      backgroundGradient.value = backGroundValue
+    } else if ('backgroundImage' in backGroundValue) {
+      selectOption.value = 'backgroundImage'
+      backgroundImage.value = backGroundValue
+    }
   }
-})
+)
 </script>