adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/extensions/echarts/index.js

@@ -0,0 +1,115 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+// 组件扩展于 echarts，适配标准 echarts，也可以自定义属性进行转换
+export default Node.create({
+  name: 'echarts',
+  inline: false,
+  group: 'block',
+  atom: true,
+  addAttributes() {
+    return {
+      vnode: {
+        default: true,
+      },
+      id: {
+        // 图形唯一标识，若生成图片，这就是唯一标识
+        default: null,
+      },
+      name: {
+        // 名称
+        default: null,
+      },
+      width: {
+        default: null,
+      },
+      height: {
+        default: 300,
+      },
+      mode: {
+        // 图表设置时，默认打开的模式 0，表示直接使用 echarts 的 options，json: 源码模式，1: 可视化模式，可以通过配置创建图表
+        default: 1,
+      },
+      chartOptions: {
+        // 展示配置，echarts 的 options，mode==0 时使用
+        default: null,
+        // 当从 HTML 解析时，尝试将 chartOptions 从字符串解析回对象
+        parseHTML: (element) => {
+          const _data = element.hasAttribute('chart-options')
+            ? element.getAttribute('chart-options')
+            : null
+          return _data ? JSON.parse(_data) : null
+        },
+        renderHTML: (attributes) => ({
+          // 在渲染 HTML 时，确保 chartOptions 被序列化为字符串
+          'chart-options': attributes.chartOptions
+            ? JSON.stringify(attributes.chartOptions)
+            : null,
+        }),
+      },
+      chartConfig: {
+        // 基础配置，后续适配自定义的数据集合和配置信息 mode==1 时使用
+        default: null,
+        parseHTML: (element) => {
+          const _data = element.hasAttribute('chart-config')
+            ? element.getAttribute('chart-config')
+            : null
+          return _data ? JSON.parse(_data) : null
+        },
+        renderHTML: (attributes) => ({
+          'chart-config': attributes.chartConfig
+            ? JSON.stringify(attributes.chartConfig)
+            : null,
+        }),
+      },
+      src: '', // 图片地址路径，也记录图片唯一标识
+      describe: {
+        // 描述信息
+        default: null,
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'echarts' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['echarts', mergeAttributes(HTMLAttributes)]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      setEcharts:
+        (options) =>
+        ({ commands, editor }) => {
+          return commands.insertContentAt(editor.state.selection.anchor, {
+            type: this.name,
+            attrs: options,
+          })
+        },
+      // 新增更新命令
+      updateEcharts:
+        (options) =>
+        ({ commands, editor, tr }) => {
+          // 获取当前选中的节点
+          editor.commands.selectParentNode()
+          const { selection } = editor.state
+          tr.setSelection(selection)
+          const { doc } = tr
+          const { from, to } = selection
+          doc.nodesBetween(from, to, (node, pos) => {
+            if (node.type.name === this.name) {
+              // 更新选中节点的属性
+              commands.updateAttributes(this.name, options)
+              return false
+            }
+            return true
+          })
+          return true
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/echarts/node-view.vue

@@ -0,0 +1,220 @@
+<template>
+  <node-view-wrapper
+    :id="'chartNode-' + attrs.id"
+    ref="containerRef"
+    class="umo-node-view"
+    :style="nodeStyle"
+    @click.capture="editor?.commands.setNodeSelection(getPos())"
+  >
+    <div
+      class="umo-node-container umo-node-echarts umo-select-outline"
+      :class="{
+        'umo-hover-shadow': !options.document?.readOnly,
+      }"
+      :data-options="
+        options.document?.readOnly ? JSON.stringify(chartOption) : null
+      "
+    >
+      <drager
+        :selected="selected"
+        :rotatable="false"
+        :boundary="false"
+        :disabled="options.document?.readOnly"
+        :angle="0"
+        :width="Number(attrs.width)"
+        :height="Number(attrs.height)"
+        :max-width="maxWidth"
+        :min-height="200"
+        :z-index="10"
+        @resize="onResize"
+        @focus="selected = true"
+      >
+        <div :id="'chart-' + attrs.id" class="umo-node-echarts-body"></div>
+      </drager>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>import { computed as _computed, ref as _ref } from 'vue';
+
+// tiptap 组件
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+// 拖拽组件
+import Drager from 'es-drager'
+
+import {
+  calbaseConfigData,
+  calbaseConfigOptions,
+} from '../../extensions/echarts/cal-service'
+// 引入 echart 服务 用此方法初始化加载 cdn echart.js 脚本 否则
+import { loadResource } from '../../utils/load-resource'
+
+
+import { inject, ref, onMounted, nextTick, watch } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes, getPos } = props
+const options = inject('options')
+const editor = inject('editor')
+const containerRef = ref(null)
+let maxWidth = _ref(0)
+let selected = _ref(false)
+let chart = null
+let chartOption = _ref(null)
+
+// 加载数据
+onMounted(async () => {
+  await nextTick()
+  maxWidth.value = containerRef.value?.$el.offsetWidth
+  if (attrs.value.width === null) {
+    updateAttributes({ width: maxWidth.value })
+  }
+  await loadData()
+})
+
+// 初始化样式，需要在 margin 和 nodeAlign 里面增加 name 才可以
+const nodeStyle = _computed(() => {
+  const { nodeAlign, margin } = attrs.value
+  const marginTop =
+    margin?.top && margin?.top !== '' ? `${margin.top}px` : undefined
+  const marginBottom =
+    margin?.bottom && margin?.bottom !== '' ? `${margin.bottom}px` : undefined
+  return {
+    'justify-content': nodeAlign,
+    marginTop,
+    marginBottom,
+  }
+})
+const onResize = ({ width, height }) => {
+  updateAttributes({
+    width: Number(width.toFixed(2)),
+    height: Number(height.toFixed(2)),
+  })
+  if (chart !== null) {
+    chart.resize()
+  }
+}
+
+// onBeforeUnmount(() => {
+// })
+
+onClickOutside(containerRef, () => {
+  selected.value = false
+})
+// 数据加载
+const loadData = async () => {
+  await nextTick()
+  // 确保 loadData 在 echarts 加载完毕后调用
+  await loadResource(`${options.value.cdnUrl}/libs/echarts/echarts.min.js`)
+
+  // 等待 echarts 加载完成
+  const waitForECharts = () => {
+    return new Promise((resolve, reject) => {
+      let attempts = 0
+      const maxAttempts = 40 // 最多等待2秒
+      const checkECharts = () => {
+        if (typeof echarts !== 'undefined') {
+          resolve()
+        } else if (attempts < maxAttempts) {
+          // 如果 echarts 还没有加载完成，等待一段时间后再次检查
+          attempts++
+          setTimeout(checkECharts, 50)
+        } else {
+          resolve()
+          // reject(new Error('ECharts loading timeout'))
+        }
+      }
+      checkECharts()
+    })
+  }
+  // 等待 echarts 加载完成
+  await waitForECharts()
+  // 接下来的使用就跟之前一样，初始化图表，设置配置项
+  if (typeof echarts !== 'undefined') {
+    const { chartOptions, chartConfig, id, mode } = attrs.value
+    // 根据参数不同 实现效果不同
+    if (chart !== null) {
+      chart.dispose()
+      chart = null
+      chartOption.value = null
+    }
+    if (mode === 1) {
+      if (chartConfig !== null) {
+        const newData = calbaseConfigData(chartConfig.data)
+        const resOptions = calbaseConfigOptions(
+          newData,
+          chartConfig.config,
+          options.value,
+        )
+        if (resOptions !== null) {
+          chart = echarts.init(document.getElementById(`chart-${id}`))
+          chart.setOption(resOptions)
+          chartOption.value = resOptions
+        }
+      }
+    } else if (chartOptions !== null) {
+      chart = echarts.init(document.getElementById(`chart-${id}`))
+      chart.setOption(chartOptions)
+      chartOption.value = chartOptions
+    }
+  }
+}
+
+// 监听 attrs 变化并在变化时重新加载数据
+watch(
+  () => attrs.value,
+  async (newAttrs, oldAttrs) => {
+    // 避免初次挂载时重复调用 loadData
+    if (
+      newAttrs !== undefined &&
+      oldAttrs !== undefined &&
+      newAttrs !== oldAttrs
+    ) {
+      // 如果只有高度和宽度变化，则不走重新加载逻辑
+      let isLoad = false
+      onResize({
+        width: attrs.value.width,
+        height: attrs.value.height,
+      })
+      for (const attr1 in oldAttrs) {
+        if (attr1 === 'height' || attr1 === 'width' || attr1 === 'src') {
+          continue
+        }
+        if (oldAttrs[attr1] !== newAttrs[attr1]) {
+          isLoad = true
+          break
+        }
+      }
+      if (isLoad) {
+        await loadData() // 第二次及之后的调用 loadData，在属性变化时
+      }
+    }
+  },
+  { deep: true, immediate: false },
+)
+</script>
+
+<style lang="less">
+.umo-node-view {
+  .umo-node-echarts {
+    max-width: 100%;
+    position: relative;
+
+    .es-drager {
+      max-width: 100%;
+      max-height: 100%;
+      transform: translateX(0px) translateY(0px) rotate(0deg) !important;
+    }
+
+    .umo-node-echarts-body {
+      display: block;
+      min-height: 200px;
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      outline: solid 1px var(--umo-content-node-border);
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/extensions/file/index.js

@@ -0,0 +1,254 @@
+import { t } from '../../composables/i18n.js';
+import { useAlert } from '../../composables/dialog.js';
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import { shortId } from '../../utils/short-id'
+
+import NodeView from './node-view.vue'
+
+const mimeTypes = {
+  image: [
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/webp',
+    'image/svg+xml',
+    'image/apng',
+  ],
+  inlineImage: [
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/webp',
+    'image/svg+xml',
+    'image/apng',
+  ],
+  video: ['video/mp4', 'video/mpeg', 'video/webm', 'video/ogg'],
+  audio: [
+    'audio/mp3',
+    'audio/mpeg',
+    'audio/wav',
+    'audio/ogg',
+    'audio/aac',
+    'audio/flac',
+  ],
+}
+
+const getAccept = (type, accept) => {
+  if (type === 'file' && accept.length === 0) {
+    return ''
+  }
+  if (!type || !['image', 'video', 'audio', 'inlineImage'].includes(type)) {
+    return accept.toString()
+  }
+  let acceptArray = [...accept]
+  if (acceptArray.includes(`${type}/*`) || accept.length === 0) {
+    acceptArray = mimeTypes[type]
+  } else if (acceptArray.filter((item) => item.startsWith(type)).length > 0) {
+    acceptArray = accept.filter((item) => mimeTypes[type].includes(item))
+  } else {
+    acceptArray = ['notAllow']
+  }
+  return acceptArray.length === 0 ? '' : acceptArray.toString()
+}
+
+export default Node.create({
+  name: 'file',
+  group: 'block',
+  atom: true,
+  addAttributes() {
+    return {
+      vnode: {
+        default: true,
+      },
+      file: {
+        default: null,
+      },
+      id: {
+        default: null,
+      },
+      url: {
+        default: null,
+      },
+      name: {
+        default: null,
+      },
+      type: {
+        default: null,
+      },
+      size: {
+        default: null,
+      },
+      uploaded: {
+        default: false,
+      },
+      previewType: {
+        default: null,
+      },
+      width: {
+        default: null,
+      },
+      height: {
+        default: 200,
+      },
+      fitWidth: {
+        default: false,
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'file' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'file',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+    ]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      setFile:
+        (options) =>
+        ({ commands, editor }) => {
+          return commands.insertContentAt(editor.state.selection.anchor, {
+            type: this.name,
+            attrs: options,
+          })
+        },
+      insertFile:
+        ({ file, uploadFileMap, autoType, pos, dimensions }) =>
+        ({ editor, commands }) => {
+          const { type, name, size } = file
+          const { options } = editor.storage
+          const { maxSize } = options.file
+          if (maxSize !== 0 && size > maxSize) {
+            useMessage('error', {
+              attach: editor.storage.container,
+              content: t('file.limit', {
+                filename: file.name,
+                size: maxSize / 1024 / 1024,
+              }),
+            })
+            return false
+          }
+          const position = pos || editor.state.selection.anchor
+          let previewType = 'file'
+          // 图片
+          if (type.startsWith('image/') && mimeTypes.image.includes(type)) {
+            previewType = 'image'
+          }
+          // 视频
+          if (type.startsWith('video/') && mimeTypes.video.includes(type)) {
+            previewType = 'video'
+          }
+          // 音频
+          if (type.startsWith('audio/') && mimeTypes.audio.includes(type)) {
+            previewType = 'audio'
+          }
+          // 插入节点
+          const id = shortId(10)
+          uploadFileMap.set(id, file)
+
+          let nodeData = {
+            id,
+            [previewType === 'file' ? 'url' : 'src']: URL.createObjectURL(file),
+            name,
+            type: type || 'unknown', // Ensure type is never null
+            size,
+            previewType,
+          }
+
+          // 图片处理
+          if (previewType === 'image') {
+            const { width, height, inline } = dimensions
+            if (width && width > 0) {
+              nodeData = {
+                ...nodeData,
+                width,
+              }
+            }
+            // if (height && height > 0) {
+            //   nodeData = {
+            //     ...nodeData,
+            //     height,
+            //   }
+            // }
+            if (inline) {
+              previewType = 'inlineImage'
+              nodeData = {
+                ...nodeData,
+                inline: true,
+              }
+            }
+          }
+          return commands.insertContentAt(position, {
+            type: autoType ? previewType : 'file',
+            attrs: nodeData,
+          })
+        },
+      selectFiles:
+        (type, container = 'body', uploadFileMap, autoType = true) =>
+        ({ editor }) => {
+          const { options } = editor.storage
+          const accept = getAccept(type, options.file.allowedMimeTypes)
+          if ((!accept && accept !== '') || accept === 'notAllow') {
+            const dialog = useAlert({
+              attach: container,
+              theme: 'danger',
+              header: t('file.notAllow.title'),
+              body: t('file.notAllow.message'),
+              onConfirm() {
+                dialog.destroy()
+              },
+            })
+            return false
+          }
+          const { open, onChange } = useFileDialog({
+            accept,
+            reset: true,
+          })
+          // 打开文件对话框
+          open()
+          let bool = false
+          // 插入文件
+          onChange((fileList) => {
+            const files = Array.from(fileList)
+            for (const file of files) {
+              bool = editor
+                .chain()
+                .focus()
+                .insertFile({
+                  file,
+                  uploadFileMap,
+                  autoType,
+                  dimensions: { inline: type === 'inlineImage' ? true : false },
+                })
+                .run()
+            }
+          })
+          return bool
+        },
+    }
+  },
+})
+
+export const updateAttributesWithoutHistory = (editor, attrs, pos) => {
+  const { state, view } = editor
+
+  if (typeof pos !== 'number') return
+
+  const node = state.doc.nodeAt(pos)
+  if (!node) return
+
+  const tr = state.tr.setNodeMarkup(pos, undefined, {
+    ...node.attrs,
+    ...attrs,
+  })
+
+  tr.setMeta('addToHistory', false)
+  view.dispatch(tr)
+}