@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/page-designer/index.js

@@ -0,0 +1,38 @@
+import PageDesigner from './PageDesigner'
+import { WidgetTree, WidgetItem } from './widget-tree'
+import { WidgetLibrary, WidgetLibraryBase } from './widget-library'
+import { TemplateLibrary } from './template-library'
+import { SettingPanel, SettingProperty, SettingStyle, SettingAdvance } from './setting-panel'
+import { PageVariablePanel, JsonEditor } from './page-variable-panel'
+import { WidgetPreview, WidgetPreviewItem, WidgetPreviewContainer, WidgetPreviewPlaceholder, WidgetPreviewMixin, WidgetWrapper, HoverOverlay, SelectedOverlay } from './widget-preview'
+// 用设计器 widget-preview 渲染页面配置的预览组件（T09 从 ai-chat-page 迁入，epx-ai-chat-page 按全局名使用）
+import PageConfigPreview from './PageConfigPreview.vue'
+
+PageDesigner.install = function install (Vue) {
+  Vue.component(PageDesigner.name, PageDesigner)
+  Vue.component(WidgetTree.name, WidgetTree)
+  Vue.component(WidgetItem.name, WidgetItem)
+  Vue.component(WidgetLibrary.name, WidgetLibrary)
+  Vue.component(WidgetLibraryBase.name, WidgetLibraryBase)
+  Vue.component(TemplateLibrary.name, TemplateLibrary)
+  Vue.component(SettingPanel.name, SettingPanel)
+  Vue.component(SettingProperty.name, SettingProperty)
+  Vue.component(SettingStyle.name, SettingStyle)
+  Vue.component(SettingAdvance.name, SettingAdvance)
+  Vue.component(PageVariablePanel.name, PageVariablePanel)
+  Vue.component(JsonEditor.name, JsonEditor)
+  Vue.component(WidgetPreview.name, WidgetPreview)
+  Vue.component(WidgetPreviewItem.name, WidgetPreviewItem)
+  Vue.component(WidgetPreviewContainer.name, WidgetPreviewContainer)
+  Vue.component(WidgetPreviewPlaceholder.name, WidgetPreviewPlaceholder)
+  Vue.component(WidgetWrapper.name, WidgetWrapper)
+  Vue.component(HoverOverlay.name, HoverOverlay)
+  Vue.component(SelectedOverlay.name, SelectedOverlay)
+  Vue.component(PageConfigPreview.name, PageConfigPreview)
+}
+
+export default PageDesigner
+
+export {
+  WidgetPreviewMixin
+}

package/src/page-designer/mixins/dragSourceMixin.js

@@ -0,0 +1,113 @@
+/**
+ * 拖拽源通用 Mixin
+ * 用于组件库、模板库等拖拽源组件
+ */
+
+export default {
+  data () {
+    return {
+      isDragging: false
+    }
+  },
+  methods: {
+    /**
+     * 统一的拖拽开始方法
+     * @param {DragEvent} e - 拖拽事件
+     * @param {Object} item - 拖拽的数据项（组件或模板）
+     * @param {string} type - 拖拽类型：'widget' | 'template'
+     */
+    onDragStart (e, item, type = 'widget') {
+      this.isDragging = true
+      let payload, title, icon, prefix, source
+
+      if (type === 'template') {
+        // 模板拖拽处理
+        // 模板数据结构：{ data: { CONTENT, NAME, ... }, title: '...' }
+        const templateData = item.data || item
+        const content = templateData.CONTENT ? JSON.parse(templateData.CONTENT) : {}
+        const { items = [], itemConfigs = {}, JS: templateJs } = content
+        // 格式化组件 ID
+        const formatConfig = (arr) => {
+          arr.forEach(comp => {
+            const oldId = comp.id
+            const newId = comp.contentType + '_' + this.$util.genId()
+            if (itemConfigs[oldId]) {
+              itemConfigs[newId] = itemConfigs[oldId]
+              delete itemConfigs[oldId]
+            }
+            comp.id = newId
+            if (comp.items) formatConfig(comp.items)
+          })
+        }
+        formatConfig(items)
+
+        payload = {
+          items,
+          itemConfigs,
+          templateJs,
+          title: item.title || templateData.NAME
+        }
+        title = item.title || templateData.NAME || ''
+        icon = 'epx-icon-moban'
+        prefix = 'page-designer-template:'
+        source = 'template'
+      } else {
+        // 组件拖拽处理
+        const widgetInfo = this.designer.getWidgetByType(item.code) || {}
+        payload = {
+          code: item.code,
+          title: item.title || widgetInfo.TITLE,
+          custom: widgetInfo.COMPONENT_SOURCE === 'custom'
+        }
+        title = item.title || widgetInfo.TITLE || ''
+        icon = widgetInfo.ICON || ''
+        prefix = 'page-designer-widget:'
+        source = 'library'
+      }
+
+      // 设置拖拽数据
+      const dataString = prefix + JSON.stringify(payload)
+      e.dataTransfer.setData('text/plain', dataString)
+      e.dataTransfer.effectAllowed = 'copy'
+
+      // 设置自定义拖拽图像（空元素），避免浏览器默认拖拽行为干扰
+      const emptyEl = document.createElement('div')
+      emptyEl.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none'
+      document.body.appendChild(emptyEl)
+      e.dataTransfer.setDragImage(emptyEl, 0, 0)
+      setTimeout(() => {
+        if (emptyEl.parentNode) emptyEl.parentNode.removeChild(emptyEl)
+      }, 0)
+
+      // 使用 designer 的统一拖拽状态管理
+      if (this.designer && this.designer.startDrag) {
+        this.designer.startDrag({
+          source: source,
+          data: item,
+          title: title,
+          icon: icon,
+          x: e.clientX,
+          y: e.clientY,
+          isNative: true
+        })
+      }
+
+      // 延迟关闭面板，确保拖拽数据已经设置
+      setTimeout(() => {
+        this.$emit('close')
+      }, 50)
+    },
+
+    /**
+     * 统一的拖拽结束方法
+     */
+    onDragEnd () {
+      this.isDragging = false
+
+      // 通知 designer 清理大纲占位状态（不影响全局拖拽悬浮窗）
+      if (this.designer && this.designer.vueInstance) {
+        this.designer.emitEvent('library-drag-end')
+      }
+    }
+  }
+}

package/src/page-designer/page-variable-panel/JsonEditor.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="container">
+    <textarea class="editor" ref="textarea" name="" id="" cols="100" rows="3" v-model="content" :placeholder="placeholder"></textarea>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-unused-expressions */
+export default {
+  name: 'epx-page-variable-panel-json-editor',
+  props: {
+    modelValue: String,
+    placeholder: String
+  },
+  data () {
+    return {
+      content: ''
+    }
+  },
+  watch: {
+    modelValue: {
+      handler (v) {
+        let str = ''
+        if (v) {
+          str = v
+        }
+        if (this.content !== str) {
+          this.content = str
+          if (this.editor) this.editor.setValue(this.content)
+        }
+      },
+      immediate: true
+    },
+    content (v) {
+      this.$emit('update:modelValue', v)
+    }
+  },
+  methods: {
+    editorInit () {
+      require.ensure([], () => {
+        const CodeMirror = require('codemirror')
+        globalThis.codemirror = CodeMirror
+        require('codemirror/lib/codemirror.css')
+        require('./jsonlint.js')
+        require('codemirror/addon/lint/javascript-lint.js')
+        require('codemirror/addon/lint/json-lint.js')
+        require('codemirror/addon/lint/lint.js')
+        require('codemirror/addon/lint/lint.css')
+        require('codemirror/addon/edit/matchbrackets.js')
+        require('codemirror/addon/edit/closebrackets.js')
+        require('codemirror/addon/fold/foldgutter.js')
+        require('codemirror/addon/fold/foldgutter.css')
+        require('codemirror/addon/fold/foldcode.js')
+        require('codemirror/addon/fold/brace-fold.js')
+        require('codemirror/addon/display/placeholder.js')
+        require('codemirror/mode/javascript/javascript.js')
+        require('@epxing/theme/src/idea.css')
+
+        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+          theme: 'idea',
+          mode: 'application/json',
+          foldGutter: true,
+          gutters: ['CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
+          lint: false,
+          showCursorWhenSelecting: true,
+          matchBrackets: {
+            afterCursor: false
+          },
+          autoCloseBrackets: true,
+          inputStyle: 'contenteditable',
+          hintOptions: { completeSingle: false, closeOnUnfocus: false }
+        })
+        this.editor.on('blur', (editor) => {
+          this.editor.setOption('lint', true)
+          this.content = editor.getValue()
+        })
+        if (this.content) {
+          this.editor.setValue(this.content)
+        }
+      }, (err) => {
+        console.error(err)
+      }, 'codemirror')
+    }
+  },
+  mounted () {
+    this.editorInit()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 84px;
+
+    :deep(.CodeMirror) {
+      height: 100%;
+    }
+    :deep(.CodeMirror-placeholder) {
+      color: #999;
+    }
+
+}
+</style>
+<style>
+.CodeMirror-hints {
+  z-index: 3000
+}
+</style>