adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,77 @@
+import { Extension, mergeAttributes, Node } from '@tiptap/core'
+
+import { columnsKeymap } from './keymap'
+import { gridResizingPlugin } from './resize'
+
+const Column = Node.create({
+  name: 'column',
+  group: 'block',
+  content: 'block+',
+  addAttributes() {
+    return {
+      colWidth: {
+        default: 200,
+        parseHTML: (element) => {
+          const width = element.style.width.replace('px', '')
+          return Number(width) || 200
+        },
+        renderHTML: (attributes) => {
+          const style = attributes.colWidth
+            ? `width: ${attributes.colWidth}px;`
+            : ''
+          return { style }
+        },
+      },
+    }
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'div.umo-node-column',
+      },
+    ]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(HTMLAttributes, { class: 'umo-node-column' }),
+      0,
+    ]
+  },
+})
+
+const ColumnContainer = Node.create({
+  name: 'columnContainer',
+  group: 'block',
+  content: 'column+',
+  parseHTML() {
+    return [
+      {
+        tag: 'div.umo-node-column-container',
+      },
+    ]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(HTMLAttributes, {
+        class: 'umo-node-column-container',
+      }),
+      0,
+    ]
+  },
+})
+
+export default Extension.create({
+  name: 'columns',
+  addExtensions() {
+    return [Column, ColumnContainer]
+  },
+  addCommands() {},
+  addProseMirrorPlugins() {
+    return [
+      gridResizingPlugin({ handleWidth: 2, columnMinWidth: 50 }),
+      columnsKeymap,
+    ]
+  },
+})

package/src/components/editor-main/src/extensions/columns/keymap.js

@@ -0,0 +1,62 @@
+import {
+  chainCommands,
+  createParagraphNear,
+  newlineInCode,
+  splitBlock,
+} from '@tiptap/pm/commands'
+import { keymap } from '@tiptap/pm/keymap'
+import { TextSelection } from '@tiptap/pm/state'
+import { canSplit, liftTarget } from '@tiptap/pm/transform'
+
+const findParentColumn = ($pos) => {
+  for (let { depth } = $pos; depth > 0; depth--) {
+    const node = $pos.node(depth)
+    if (node.type.name === 'column') {
+      return { node, depth }
+    }
+  }
+  return null
+}
+
+export const liftEmptyBlock = (state, dispatch) => {
+  const { $cursor } = state.selection
+  if (!$cursor || $cursor.parent.content.size) return false
+  if ('column' === $cursor.node($cursor.depth - 1).type.name) return false
+  if ($cursor.depth > 1 && $cursor.after() !== $cursor.end(-1)) {
+    const before = $cursor.before()
+    if (canSplit(state.doc, before)) {
+      if (dispatch) dispatch(state.tr.split(before).scrollIntoView())
+      return true
+    }
+  }
+  const range = $cursor.blockRange(),
+    target = range && liftTarget(range)
+  if (target === null) return false
+  if (dispatch) dispatch(state.tr.lift(range, target).scrollIntoView())
+  return true
+}
+
+export const columnsKeymap = keymap({
+  Enter: chainCommands(
+    newlineInCode,
+    createParagraphNear,
+    liftEmptyBlock,
+    splitBlock,
+  ),
+  'Mod-a': (state, dispatch, view) => {
+    const { selection } = state
+    const { $from } = selection
+    const found = findParentColumn($from)
+    if (found) {
+      const { depth } = found
+      const start = $from.start(depth)
+      const end = $from.end(depth)
+      const tr = state.tr.setSelection(
+        TextSelection.create(state.doc, start, end),
+      )
+      if (dispatch) dispatch(tr)
+      return true
+    }
+    return false
+  },
+})

package/src/components/editor-main/src/extensions/columns/resize.js

@@ -0,0 +1,60 @@
+import { Plugin } from '@tiptap/pm/state'
+
+import {
+  handleGridDecorations,
+  handleMouseDown,
+  handleMouseLeave,
+  handleMouseMove,
+  handleMouseUp,
+} from './dom'
+import { GridResizeState, gridResizingPluginKey } from './state'
+
+export const gridResizingPlugin = (options) => {
+  const handleWidth = options?.handleWidth ?? 2
+  const columnMinWidth = options?.columnMinWidth ?? 50
+
+  return new Plugin({
+    key: gridResizingPluginKey,
+
+    state: {
+      init: () => new GridResizeState(-1, false),
+      apply: (tr, prev) => {
+        return prev.apply(tr)
+      },
+    },
+
+    props: {
+      attributes: (state) => {
+        const pluginState = gridResizingPluginKey.getState(state)
+        if (pluginState && pluginState.activeHandle > -1) {
+          return { class: 'umo-node-column-resize-cursor' }
+        }
+        return {}
+      },
+
+      // The main event handlers
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          return handleMouseMove(view, event, handleWidth)
+        },
+        mouseleave: (view) => {
+          return handleMouseLeave(view)
+        },
+        mousedown: (view, event) => {
+          return handleMouseDown(view, event, columnMinWidth)
+        },
+        mouseup: (view, event) => {
+          return handleMouseUp(view, event)
+        },
+      },
+
+      decorations: (state) => {
+        const pluginState = gridResizingPluginKey.getState(state)
+        if (!pluginState) return null
+        if (pluginState.activeHandle === -1) return null
+
+        return handleGridDecorations(state, pluginState.activeHandle)
+      },
+    },
+  })
+}

package/src/components/editor-main/src/extensions/columns/schema.js

@@ -0,0 +1,47 @@
+export const columnNodes = () => {
+  return {
+    column: {
+      group: 'block',
+      content: 'block+',
+      attrs: {
+        colWidth: { default: 200 },
+      },
+      parseDOM: [
+        {
+          tag: 'div.umo-node-column',
+          getAttrs(dom) {
+            if (!(dom instanceof HTMLElement)) return false
+            const width = dom.style.width.replace('px', '') || 200
+            return {
+              colWidth: width,
+            }
+          },
+        },
+      ],
+      toDOM(node) {
+        const { colWidth } = node.attrs
+        const style = colWidth ? `width: ${colWidth}px;` : ''
+        return [
+          'div',
+          {
+            class: 'umo-node-column',
+            style,
+          },
+          0,
+        ]
+      },
+    },
+    columnContainer: {
+      group: 'block',
+      content: 'column+',
+      parseDOM: [
+        {
+          tag: 'div.umo-node-column-container',
+        },
+      ],
+      toDOM() {
+        return ['div', { class: 'umo-node-column-container' }, 0]
+      },
+    },
+  }
+}

package/src/components/editor-main/src/extensions/columns/state.js

@@ -0,0 +1,26 @@
+import { PluginKey } from '@tiptap/pm/state'
+
+export const gridResizingPluginKey = new PluginKey('gridResizingPlugin')
+
+export class GridResizeState {
+  constructor(activeHandle, dragging) {
+    this.activeHandle = activeHandle
+    this.dragging = dragging
+  }
+
+  apply(tr) {
+    const action = tr.getMeta(gridResizingPluginKey)
+    if (!action) return this
+
+    if (typeof action.setHandle === 'number') {
+      return new GridResizeState(action.setHandle, false)
+    }
+    if (action.setDragging !== undefined) {
+      return new GridResizeState(this.activeHandle, action.setDragging)
+    }
+    if (this.activeHandle > -1 && tr.docChanged) {
+      // remap when doc changes
+    }
+    return this
+  }
+}

package/src/components/editor-main/src/extensions/columns/utils.js

@@ -0,0 +1,55 @@
+export const findBoundaryPosition = (view, event, handleWidth) => {
+  const gridDOM = event
+    .composedPath()
+    .find((el) => el.classList?.contains('umo-node-column-container'))
+  if (!gridDOM) return -1
+
+  const children = Array.from(gridDOM.children).filter((el) =>
+    el.classList.contains('umo-node-column'),
+  )
+  for (let i = 0; i < children.length; i++) {
+    const colEl = children[i]
+    const rect = colEl.getBoundingClientRect()
+    if (
+      event.clientX >= rect.right - handleWidth - 2 &&
+      event.clientX <= rect.right + 10 + handleWidth
+    ) {
+      const pos = view.posAtDOM(colEl, 0)
+      if (pos !== null) {
+        return pos
+      }
+    }
+  }
+
+  return -1
+}
+
+export const draggedWidth = (dragging, event, minWidth) => {
+  const offset = event.clientX - dragging.startX
+  return Math.max(minWidth, dragging.startWidth + offset)
+}
+
+export const updateColumnNodeWidth = (view, pos, attrs, width) => {
+  view.dispatch(
+    view.state.tr.setNodeMarkup(pos, undefined, {
+      ...attrs,
+      colWidth: width - 12 * 2,
+    }),
+  )
+}
+
+export const getColumnInfoAtPos = (view, boundaryPos) => {
+  const $pos = view.state.doc.resolve(boundaryPos)
+  const node = $pos.parent
+  if (!node || node.type.name !== 'column') return null
+
+  const dom = view.domAtPos($pos.pos)
+  if (!dom.node) return null
+
+  const columnEl =
+    dom.node instanceof HTMLElement ? dom.node : dom.node.childNodes[dom.offset]
+
+  const domWidth = columnEl.offsetWidth
+
+  return { $pos, node, columnEl, domWidth }
+}

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

@@ -0,0 +1,55 @@
+import { t } from '../../composables/i18n.js';
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'datetime',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  selectable: false,
+
+  addAttributes() {
+    return {
+      type: { default: 'datetime' },
+      date: { default: null },
+      text: { default: `[${t('insert.date')}]` },
+      format: { default: null },
+      withTime: { default: false },
+      capitalize: { default: false },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[data-type="datetime"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'span',
+      mergeAttributes(HTMLAttributes, { 'data-type': 'datetime' }),
+      HTMLAttributes.text,
+    ]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+
+  addCommands() {
+    return {
+      insertDatetime:
+        (options) =>
+        ({ chain }) => {
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs: options,
+            })
+            .run()
+        },
+    }
+  },
+})

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

@@ -0,0 +1,116 @@
+<template>
+  <node-view-wrapper as="span" class="umo-node-datetime">
+    <t-popup
+      v-model="popupVisible"
+      :attach="`${container} .umo-zoomable-container`"
+      trigger="click"
+      placement="bottom-start"
+      :disabled="
+        page.preview?.enabled ||
+        options.document?.readOnly ||
+        !editor?.isEditable
+      "
+    >
+      <span class="umo-node-datetime-text">
+        <icon name="date" class="umo-node-datetime-icon" />
+        <span>{{ attrs.text }}</span>
+      </span>
+      <template #content>
+        <t-date-picker-panel
+          :value="attrs.date"
+          :format="
+            attrs.format || `YYYY-MM-DD${attrs.withTime ? ' HH:mm:ss' : ''}`
+          "
+          :enable-time-picker="attrs.withTime"
+          :mode="attrs.format === 'YYYY年M月' ? 'month' : 'date'"
+          need-confirm
+          @change="datetimeChange"
+        />
+      </template>
+    </t-popup>
+  </node-view-wrapper>
+</template>
+
+<script setup>import { computed as _computed, ref as _ref } from 'vue';
+
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+import { inject } from 'vue';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes } = props
+const container = inject('container')
+const options = inject('options')
+const page = inject('page')
+let popupVisible = _ref(false)
+
+const formatDateToChinese = (dateStr) => {
+  const replaceDigits = (num) => {
+    const digits = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+    return num
+      .toString()
+      .split('')
+      .map((n) => digits[Number(n)])
+      .join('')
+  }
+
+  return dateStr.replace(/\d+/g, (match) => {
+    if (match.length === 4) {
+      // 年份
+      return replaceDigits(match)
+    }
+    if (match.length === 1) {
+      // 月份或日期
+      return replaceDigits(match)
+    }
+    if (match.length === 2) {
+      const num1 = match.charAt(0)
+      const num2 = match.charAt(1)
+      if (num1 === '0') {
+        return `${replaceDigits(num1)}十`
+      }
+      if (num1 === '1') {
+        return `十${replaceDigits(num2)}`
+      }
+      if (num2 === '0') {
+        return `${replaceDigits(num1)}十`
+      }
+      return `${replaceDigits(num1)}十${replaceDigits(num2)}`
+    }
+    return match // 其他情况不处理
+  })
+}
+
+const datetimeChange = (value) => {
+  let selectDate = value
+  if (selectDate && attrs.value?.capitalize) {
+    selectDate = formatDateToChinese(value)
+  }
+  updateAttributes({ date: selectDate, text: selectDate })
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less">
+.umo-node-datetime {
+  margin: 0 0.2em;
+  background-color: transparent !important;
+  vertical-align: middle;
+  &-text {
+    box-decoration-break: clone;
+    margin: 0 0.2em;
+    border-radius: 0.2em;
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+  &-icon {
+    color: #ccc;
+    margin-right: 0.3em;
+  }
+  &:hover {
+    color: var(--umo-primary-color);
+  }
+}
+</style>

package/src/components/editor-main/src/extensions/echarts/cal-service.js

@@ -0,0 +1,142 @@
+/*
+此服务主要作用echarts相关的一些公共处理方法 主要用于基础模式
+*/
+
+// 基础模式下，对界面数据进行加工处理，根据第一列为空时不作为有效数据
+export function calbaseConfigData(data) {
+  if (!data) {
+    return data
+  }
+  data = JSON.parse(JSON.stringify(data))
+  for (let i = data.length - 1; i >= 0; i--) {
+    if (i === 0) {
+      continue
+    }
+    if (!data[i].A || data[i].A === '') {
+      data.splice(i, 1)
+    }
+  }
+  return data
+}
+// 计算配置 根据手工设置的配置信息和数据进行 Options 生成，此方法会逐步扩充
+export function calbaseConfigOptions(data, config, options) {
+  // 声明的最终返回的options
+  let resOption = {}
+  if (!data || !config) {
+    return resOption
+  }
+  // 1.0 标题 title
+  if (config.titleText && config.titleText !== '') {
+    resOption.title = {}
+    resOption.title.text = config.titleText
+    resOption.title.left = config.titleleft || 'center' // 标题位置
+  }
+  // 2.0 图例位置 legend
+  let colNameList = []
+  function calbaseConfigOptionsInlegend() {
+    resOption.legend = {}
+    // 图例显示隐藏
+    resOption.legend.show = config.legend ? true : false
+    // 图例纵向位置
+    resOption.legend[config.legendlocation] = 10
+    // 图例横向位置
+    resOption.legend.left = config.legendleft
+    // 图例布局
+    resOption.legend.orient = config.legendorient
+    resOption.legend.data = []
+    // 目前只支持 26 个图例，图例名称为空时，不展示
+    const alphabet = Array.from({ length: 26 }, (_, i) =>
+      String.fromCharCode(i + 65),
+    )
+    colNameList = []
+    for (let i = 1; i < alphabet.length; i++) {
+      const curColName = alphabet[i]
+      if (!data[0][curColName] || data[0][curColName] === '') {
+        continue
+      }
+      resOption.legend.data.push(data[0][curColName])
+      colNameList.push(curColName) // 有那些列需要展示到系列中
+      if (config.seriesType === 'pie' && colNameList.length === 1) {
+        break
+        // 饼图只需要显示一个图例
+      }
+    }
+  }
+  calbaseConfigOptionsInlegend()
+
+  // 3.0 图例 yAxis xAxis series处理
+  function calbaseConfigOptionsInType() {
+    // y轴
+    if (config.seriesType === 'bar' || config.seriesType === 'line') {
+      resOption.yAxis = {
+        type: 'value',
+      }
+      resOption.xAxis = {}
+      resOption.xAxis.type = 'category'
+      resOption.xAxis.data = []
+
+      for (let i = 1; i < data.length; i++) {
+        resOption.xAxis.data.push(data[i]['A'])
+      }
+    }
+
+    resOption.series = []
+
+    for (let i = 0; i < colNameList.length; i++) {
+      const seriesdata = []
+      // 从第二行开始
+      for (let j = 1; j < data.length; j++) {
+        let _value = data[j][colNameList[i]]
+        if (isNaN(Number(_value))) {
+          _value = 0
+        } else _value = Number(_value)
+        if (config.seriesType === 'pie') {
+          seriesdata.push({ value: _value, name: data[j]['A'] })
+        } else {
+          seriesdata.push(_value)
+        }
+      }
+      resOption.series.push({
+        name: resOption.legend.data[i],
+        type: config.seriesType,
+        data: seriesdata,
+      })
+      // 平滑折线
+      if (
+        config.smooth &&
+        resOption.series[resOption.series.length - 1].type === 'line'
+      ) {
+        resOption.series[resOption.series.length - 1].smooth = true
+      }
+    }
+    if (config.seriesType === 'pie' && resOption.legend.data !== null) {
+      delete resOption.legend.data
+    }
+  }
+
+  calbaseConfigOptionsInType()
+
+  // 4.0 grid 属性设置
+  resOption.grid = {
+    left: '3%',
+    right: '4%',
+    top: 30,
+    bottom: 30,
+    containLabel: true,
+  }
+  if (resOption?.legend?.show) {
+    if (resOption?.legend?.bottom) {
+      resOption.grid.bottom = 60
+    } else {
+      resOption.grid.top = 60
+    }
+  }
+
+  // 9.0 自定义扩展，可以在外部自定义实现展示效果，扩展个性化样式
+  const newOptions = options.echarts?.onCustomSettings?.(data, config)
+  if (newOptions !== null && typeof newOptions === 'object') {
+    resOption = newOptions
+  }
+  // 10.0 返回值 必须JSON.parse(JSON.stringify( 一下，个别情况下echart不展示问题
+  return JSON.parse(JSON.stringify(resOption))
+}