adtec-core-package 3.0.0 → 3.0.2

package/src/components/editor-main/src/components/toolbar/ribbon.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="umo-ribbon-menu">
+    <div v-if="menus.length > 1" class="umo-ribbon-tabs">
+      <div
+        v-for="item in menus"
+        :key="item.value"
+        class="umo-ribbon-tabs-item"
+        :class="{ active: currentMenu === item.value }"
+        @click="changeMenu(item.value)"
+      >
+        {{ item.label }}
+      </div>
+    </div>
+    <toolbar-scrollable ref="scrollableRef" class="umo-scrollable-container">
+      <div class="umo-ribbon-container">
+        <template v-if="currentMenu === 'base'">
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-base-undo />
+              <menus-toolbar-base-redo />
+            </div>
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-base-format-painter />
+              <menus-toolbar-base-clear-format />
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-base-font-family />
+              <menus-toolbar-base-font-size />
+              <menus-toolbar-base-word-wrap />
+            </div>
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-base-bold />
+              <menus-toolbar-base-italic />
+              <menus-toolbar-base-underline />
+              <menus-toolbar-base-strike />
+              <menus-toolbar-base-subscript />
+              <menus-toolbar-base-superscript />
+              <menus-toolbar-base-color />
+              <menus-toolbar-base-background-color />
+              <menus-toolbar-base-highlight v-if="!disableMenu('highlight')" />
+              <menus-toolbar-base-letter-spacing />
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-base-ordered-list />
+              <menus-toolbar-base-bullet-list />
+              <menus-toolbar-base-task-list v-if="!disableMenu('task-list')" />
+              <menus-toolbar-base-indent />
+              <menus-toolbar-base-outdent />
+              <menus-toolbar-base-line-height
+                v-if="!disableMenu('line-height')"
+              />
+              <menus-toolbar-base-margin v-if="!disableMenu('margin')" />
+            </div>
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-base-align-left />
+              <menus-toolbar-base-align-center />
+              <menus-toolbar-base-align-right />
+              <menus-toolbar-base-align-justify />
+              <menus-toolbar-base-align-distributed />
+              <menus-toolbar-base-code v-if="!disableMenu('code')" />
+              <menus-toolbar-base-quote v-if="!disableMenu('quote')" />
+              <menus-toolbar-base-select-all
+                v-if="!disableMenu('select-all')"
+              />
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-base-heading />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-base-markdown v-if="!disableMenu('markdown')" />
+            <menus-toolbar-base-search-replace />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-base-print v-if="!disableMenu('print')" />
+          </div>
+          <div class="virtual-group is-slot">
+            <slot name="toolbar_base" toolbar-mode="ribbon" />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'insert'">
+          <div class="umo-virtual-group">
+            <menus-toolbar-insert-link v-if="!disableMenu('link')" />
+            <menus-toolbar-insert-image v-if="!disableMenu('image')" />
+            <menus-toolbar-insert-video v-if="!disableMenu('video')" />
+            <menus-toolbar-insert-audio v-if="!disableMenu('audio')" />
+            <menus-toolbar-insert-file v-if="!disableMenu('file')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-insert-text-box v-if="!disableMenu('text-box')" />
+            <menus-toolbar-insert-details v-if="!disableMenu('details')" />
+            <menus-toolbar-insert-code-block
+              v-if="!disableMenu('code-block')"
+            />
+            <menus-toolbar-insert-symbol v-if="!disableMenu('symbol')" />
+            <menus-toolbar-insert-chinese-date
+              v-if="!disableMenu('chinese-date')"
+            />
+            <menus-toolbar-insert-emoji v-if="!disableMenu('emoji')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-insert-tag v-if="!disableMenu('tag')" />
+            <menus-toolbar-insert-columns v-if="!disableMenu('columns')" />
+            <menus-toolbar-insert-callout v-if="!disableMenu('callout')" />
+            <menus-toolbar-insert-mention v-if="!disableMenu('mention')" />
+            <menus-toolbar-insert-option-box
+              v-if="!disableMenu('option-box')"
+            />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-insert-hard-break
+              v-if="!disableMenu('hard-break')"
+            />
+            <menus-toolbar-insert-hr v-if="!disableMenu('hr')" />
+            <menus-toolbar-insert-bookmark v-if="!disableMenu('bookmark')" />
+            <menus-toolbar-insert-footnote v-if="!disableMenu('footnote')" />
+            <menus-toolbar-insert-toc v-if="!disableMenu('toc')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-insert-template v-if="!disableMenu('template')" />
+            <menus-toolbar-insert-web-page v-if="!disableMenu('web-page')" />
+          </div>
+          <div class="virtual-group is-slot">
+            <slot name="toolbar_insert" toolbar-mode="ribbon" />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'table'">
+          <div class="umo-virtual-group">
+            <menus-toolbar-table-insert />
+            <menus-toolbar-table-fix />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-table-cells-align />
+            <menus-toolbar-table-cells-background />
+            <!-- <menus-toolbar-table-border-color /> -->
+          </div>
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-add-row-before />
+              <menus-toolbar-table-add-row-after />
+              <menus-toolbar-table-delete-row />
+            </div>
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-add-column-before />
+              <menus-toolbar-table-add-column-after />
+              <menus-toolbar-table-delete-column />
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-merge-cells />
+            </div>
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-split-cell />
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-toggle-header-row />
+              <menus-toolbar-table-toggle-header-column />
+            </div>
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-toggle-header-cell />
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-next-cell />
+            </div>
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-table-previous-cell />
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-table-delete />
+          </div>
+          <div class="virtual-group is-slot">
+            <slot name="toolbar_table" toolbar-mode="ribbon" />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'tools'">
+          <div class="umo-virtual-group">
+            <menus-toolbar-tools-qrcode v-if="!disableMenu('qrcode')" />
+            <menus-toolbar-tools-barcode v-if="!disableMenu('barcode')" />
+            <menus-toolbar-tools-signature v-if="!disableMenu('signature')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-tools-math v-if="!disableMenu('math')" />
+            <menus-toolbar-tools-diagrams v-if="!disableMenu('diagrams')" />
+            <menus-toolbar-tools-echarts v-if="!disableMenu('echarts')" />
+            <!-- <menus-toolbar-tools-mind-map v-if="!disableMenu('mind-map')" /> -->
+            <menus-toolbar-tools-mermaid v-if="!disableMenu('mermaid')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-tools-chinese-case
+              v-if="!disableMenu('chinese-case')"
+            />
+          </div>
+          <div class="umo-virtual-group is-slot">
+            <slot name="toolbar_tools" toolbar-mode="ribbon" />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'page'">
+          <div class="umo-virtual-group">
+            <div class="umo-virtual-group-row">
+              <menus-toolbar-page-margin />
+              <div>
+                <div class="umo-virtual-group-row">
+                  <menus-toolbar-page-size v-if="page.layout === 'page'" />
+                </div>
+                <div class="umo-virtual-group-row">
+                  <menus-toolbar-page-orientation
+                    v-if="page.layout === 'page'"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-page-break />
+            <menus-toolbar-page-break-marks />
+            <menus-toolbar-page-line-number />
+            <menus-toolbar-page-watermark v-if="!disableMenu('watermark')" />
+            <menus-toolbar-page-background v-if="!disableMenu('background')" />
+          </div>
+          <div class="virtual-group is-slot">
+            <slot name="toolbar_page" toolbar-mode="ribbon" />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'view'">
+          <div class="umo-virtual-group">
+            <menus-toolbar-view-toc v-if="!disableMenu('toc')" />
+            <menus-toolbar-view-fullscreen v-if="!disableMenu('fullscreen')" />
+            <menus-toolbar-view-preview v-if="!disableMenu('preview')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-view-page v-if="!disableMenu('layout-page')" />
+            <menus-toolbar-view-web v-if="!disableMenu('layout-web')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-view-zoom v-if="!disableMenu('zoom')" />
+            <menus-toolbar-view-zoom-original
+              v-if="!disableMenu('zoom-original')"
+            />
+            <menus-toolbar-view-zoom-auto v-if="!disableMenu('zoom-auto')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-view-skin v-if="!disableMenu('skin')" />
+            <menus-toolbar-view-theme v-if="!disableMenu('theme')" />
+            <menus-toolbar-view-locale v-if="!disableMenu('locale')" />
+          </div>
+          <div class="virtual-group is-slot">
+            <slot name="toolbar_view" toolbar-mode="ribbon" />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'export'">
+          <div class="umo-virtual-group">
+            <menus-toolbar-export-image v-if="!disableMenu('export-image')" />
+            <menus-toolbar-export-pdf v-if="!disableMenu('export-pdf')" />
+            <menus-toolbar-export-text v-if="!disableMenu('export-text')" />
+          </div>
+          <div class="umo-virtual-group">
+            <menus-toolbar-export-share v-if="!disableMenu('share')" />
+            <menus-toolbar-export-embed v-if="!disableMenu('embed')" />
+          </div>
+          <div class="virtual-group is-slot">
+            <slot name="toolbar_export" toolbar-mode="ribbon" />
+          </div>
+        </template>
+      </div>
+    </toolbar-scrollable>
+  </div>
+</template>
+
+<script setup>import { ref as _ref } from 'vue';
+
+
+import { inject, nextTick } from 'vue';
+const props = defineProps({
+  menus: {
+    type: Array,
+    default: () => [],
+  },
+  currentMenu: {
+    type: String,
+    default: '',
+  },
+})
+const emits = defineEmits(['menu-change'])
+
+const options = inject('options')
+const page = inject('page')
+const disableMenu = (name) => {
+  return options.value.disableExtensions.includes(name)
+}
+
+const scrollableRef = _ref(null)
+const changeMenu = async (menu) => {
+  emits('menu-change', menu)
+  await nextTick()
+  if (scrollableRef.value) {
+    scrollableRef.value.update()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.umo-ribbon-menu {
+  width: 100%;
+}
+.umo-ribbon-tabs {
+  padding: 10px 10px 0;
+  display: flex;
+  &-item {
+    font-size: var(--umo-font-size-small);
+    margin-right: 25px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    &:hover {
+      font-weight: 600;
+      &::after {
+        display: block;
+        content: '';
+        height: 3px;
+        width: 100%;
+        margin-top: 5px;
+        background-color: var(--umo-border-color);
+      }
+    }
+    &.active {
+      color: var(--umo-primary-color);
+      font-weight: 600;
+      &::after {
+        display: block;
+        content: '';
+        height: 3px;
+        width: 100%;
+        margin-top: 5px;
+        background-color: var(--umo-primary-color);
+        transition: width 0.3s;
+      }
+      &:hover::after {
+        width: 120%;
+      }
+    }
+    @media screen and (max-width: 640px) {
+      margin-right: 10px;
+    }
+  }
+}
+.umo-scrollable-container {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.umo-ribbon-container {
+  display: flex;
+  height: 56px;
+  flex-shrink: 0;
+  .umo-virtual-group {
+    padding: 0 20px;
+    border-left: solid 1px var(--umo-border-color-light);
+    flex-shrink: 0;
+    &:empty {
+      display: none;
+    }
+    &:first-child {
+      padding-left: 0;
+    }
+    &:first-child,
+    &.is-slot:empty {
+      border-left: none;
+    }
+    &-row {
+      display: flex;
+      align-items: center;
+      :deep(> *:not(:last-child)) {
+        margin-right: 5px;
+      }
+      &:not(:last-child) {
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.umo-skin-modern .umo-ribbon-tabs {
+  padding: 14px 15px 0 !important;
+}
+</style>

package/src/components/editor-main/src/components/toolbar/scrollable.vue

@@ -0,0 +1,205 @@
+<template>
+  <div ref="wraperRef" class="umo-scrollable-container">
+    <div
+      v-if="!hidePrev"
+      class="umo-scrollable-control scrollable-left"
+      @click="scrollLeft"
+    >
+      <icon name="arrow-down" />
+    </div>
+    <div
+      ref="contentRef"
+      class="umo-scrollable-content"
+      @scroll.passive="checkScrollPosition"
+      @wheel.passive="wheelScroll"
+    >
+      <slot />
+    </div>
+    <div
+      v-if="!hideNext"
+      class="umo-scrollable-control scrollable-right"
+      @click="scrollRight"
+    >
+      <icon name="arrow-down" />
+    </div>
+  </div>
+</template>
+
+<script setup>import { ref as _ref } from 'vue';
+
+
+import { ref } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+const wraperRef = ref(null)
+const contentRef = _ref(null)
+let hidePrev = _ref(true)
+let hideNext = _ref(true)
+
+const checkScrollPosition = () => {
+  const { scrollLeft = 0, scrollWidth = 0, clientWidth = 0 } = contentRef.value || {}
+  hidePrev.value = scrollLeft === 0
+  hideNext.value = scrollLeft + clientWidth + 20 >= scrollWidth
+}
+
+const scrollLeft = () => {
+  contentRef.value.scrollLeft -= contentRef.value.offsetWidth - 10 || 100
+}
+
+const scrollRight = () => {
+  contentRef.value.scrollLeft += contentRef.value.offsetWidth - 10 || 100
+}
+
+// 监听父元素大小变化
+useResizeObserver(wraperRef, () => {
+  checkScrollPosition()
+})
+
+// 支持鼠标滚轮滚动
+const wheelScroll = (e) => {
+  e.deltaY < 0 ? scrollLeft() : scrollRight()
+}
+
+// 更新
+const update = () => {
+  if (contentRef.value) {
+    contentRef.value.scrollLeft = 0
+  }
+  hideNext.value = true
+  checkScrollPosition()
+}
+
+defineExpose({
+  update,
+})
+</script>
+
+<style lang="less" scoped>
+.umo-scrollable-container {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  .umo-scrollable-control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: solid 1px var(--umo-border-color);
+    border-radius: var(--umo-radius);
+    cursor: pointer;
+    color: var(--umo-text-color-light);
+    overflow: visible;
+    background-color: var(--umo-button-hover-background);
+    z-index: 10;
+    font-size: 20px;
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: calc(100% - 20px);
+    outline: solid 10px var(--umo-color-white);
+    &:hover {
+      border-color: var(--umo-primary-color);
+      background-color: var(--umo-primary-color);
+      color: var(--umo-color-white);
+    }
+    &.scrollable-left {
+      left: 10px;
+      :deep(.umo-icon) {
+        transform: rotate(90deg);
+      }
+      &::before {
+        display: block;
+        content: '';
+        background: linear-gradient(
+          to left,
+          transparent,
+          var(--umo-color-white)
+        );
+        position: absolute;
+        left: 30px;
+        top: 0;
+        bottom: 0;
+        width: 30px;
+        pointer-events: none;
+      }
+    }
+    &.scrollable-right {
+      right: 10px;
+      :deep(.umo-icon) {
+        transform: rotate(-90deg);
+      }
+      &::before {
+        display: block;
+        content: '';
+        background: linear-gradient(
+          to right,
+          transparent,
+          var(--umo-color-white)
+        );
+        position: absolute;
+        right: 30px;
+        top: 0;
+        bottom: 0;
+        width: 30px;
+        pointer-events: none;
+      }
+    }
+  }
+  .umo-scrollable-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    flex: 1;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.umo-skin-modern {
+  &.toolbar-ribbon {
+    .umo-scrollable-container {
+      padding: 10px 15px 2px 15px !important;
+    }
+    .umo-scrollable-control {
+      height: calc(100% - 32px) !important;
+      margin-top: 4px;
+    }
+  }
+  &.toolbar-classic {
+    .umo-scrollable-container {
+      padding: 15px 15px 2px 15px !important;
+    }
+    .umo-scrollable-control {
+      height: calc(100% - 38px) !important;
+      margin-top: 6px;
+    }
+  }
+  .umo-scrollable-content {
+    border-radius: 6px;
+    background-color: var(--umo-color-white);
+    padding: 10px 0 10px 10px;
+    box-shadow:
+      0 0 0 1px hsla(0, 0%, 5%, 0.04),
+      0 2px 5px hsla(0, 0%, 5%, 0.06);
+    &:hover {
+      box-shadow:
+        0 0 0 1px hsla(0, 0%, 5%, 0.06),
+        0 2px 5px hsla(0, 0%, 5%, 0.1);
+    }
+  }
+  .umo-scrollable-control {
+    border-radius: 5px !important;
+    &.scrollable-left {
+      left: 25px !important;
+    }
+    &.scrollable-right {
+      right: 25px !important;
+    }
+  }
+}
+[theme-mode='dark'] .umo-skin-modern .umo-scrollable-content {
+  outline: solid 1px var(--umo-border-color-light);
+}
+</style>

package/src/components/editor-main/src/components/tooltip.vue

@@ -0,0 +1,23 @@
+<template>
+  <t-tooltip
+    :content="content"
+    theme="light"
+    placement="top"
+    :attach="container"
+    :show-arrow="false"
+    destroy-on-close
+  >
+    <slot />
+  </t-tooltip>
+</template>
+
+<script setup>import { inject } from 'vue';
+
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+})
+const container = inject('container')
+</script>

package/src/components/editor-main/src/composables/copy.js

@@ -0,0 +1,24 @@
+import { t } from './i18n.js';
+export function useCopy(source, successMessage, container) {
+  const { copy, copied, isSupported } = useClipboard({ legacy: true, source })
+  if (!isSupported.value) {
+    useMessage('error', {
+      attach: container,
+      content: t('copy.notSupported'),
+    })
+    return false
+  }
+  copy()
+  if (copied.value) {
+    useMessage('success', {
+      attach: container,
+      content: successMessage,
+    })
+    return true
+  }
+  useMessage('error', {
+    attach: container,
+    content: t('copy.copyFailed'),
+  })
+  return false
+}

package/src/components/editor-main/src/composables/dialog.js

@@ -0,0 +1,25 @@
+import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next'
+
+import { t } from './i18n.js'
+
+export function useAlert(params) {
+  return DialogPlugin.alert({
+    placement: 'center',
+    ...params,
+  })
+}
+export function useConfirm(params) {
+  return DialogPlugin.confirm({
+    placement: 'center',
+    preventScrollThrough: false,
+    cancelBtn: t('dialog.cancel'),
+    ...params,
+  })
+}
+export function useMessage(type, params) {
+  const messageOptions =
+    typeof params === 'string' ? { content: params } : params
+  return MessagePlugin[type]?.(messageOptions)
+}
+
+export { DialogPlugin, MessagePlugin }

package/src/components/editor-main/src/composables/hotkeys.js

@@ -0,0 +1,14 @@
+import hotkeys from 'hotkeys-js'
+
+export function useHotkeys(keys, onTrigger) {
+  hotkeys.filter = () => true
+  hotkeys(keys, (e) => {
+    e.preventDefault()
+    onTrigger()
+    return false
+  })
+}
+
+export function removeAllHotkeys() {
+  hotkeys.unbind()
+}