adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/components/menus/toolbar/insert/option-box.vue

@@ -0,0 +1,324 @@
+<template>
+  <menus-button
+    ico="checkbox"
+    :text="t('insert.option.text')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-insert-option-box">
+        <div class="umo-option-box-title">{{ t('insert.option.tip') }}</div>
+        <t-select v-model="target" size="small" @change="initCalData">
+          <t-option
+            key="checkbox"
+            :label="t('insert.option.checkbox')"
+            value="checkbox"
+          />
+          <t-option
+            key="radio"
+            :label="t('insert.option.radio')"
+            value="radio"
+          />
+        </t-select>
+        <div class="umo-virtual-group"></div>
+        <div class="umo-option-box-title">{{ t('insert.option.content') }}</div>
+        <div class="umo-option-box-container">
+          <div class="umo-option-box-container-center">
+            <t-button
+              variant="text"
+              theme="primary"
+              size="small"
+              @click="addOption"
+            >
+              <icon class="umo-option-box-button-svg-icon" name="block-add" />
+              {{ t('insert.option.add') }}
+            </t-button>
+            <t-checkbox
+              v-if="target === 'checkbox'"
+              v-model="showCheckAll"
+              class="umo-option-box-button-check-all"
+              size="small"
+              ><span style="font-size: 12px">{{
+                t('insert.option.checkall')
+              }}</span></t-checkbox
+            >
+          </div>
+          <div class="umo-option-box-container-bottom">
+            <div
+              v-for="(box, index) in items"
+              :key="box.key"
+              class="umo-option-box-container-bottom-item"
+            >
+              <t-checkbox v-if="target === 'checkbox'" v-model="box.checked" />
+              <t-radio
+                v-if="target === 'radio'"
+                :checked="box.checked"
+                @click="radioChange(box, index)"
+              />
+              <t-input
+                v-model="box.label"
+                class="umo-option-box-container-input"
+                size="small"
+                :maxlength="30"
+              />
+              <t-button
+                shape="square"
+                variant="text"
+                size="small"
+                class="umo-option-box-container-delete"
+                @click="deleteItem(box)"
+              >
+                <icon class="umo-option-box-svg-icon" name="close" />
+              </t-button>
+            </div>
+          </div>
+        </div>
+        <div class="umo-option-box-container-button">
+          <t-button
+            variant="outline"
+            size="small"
+            @click="togglePopup(false)"
+            >{{ t('insert.option.cancel') }}</t-button
+          >
+          <t-button theme="primary" size="small" @click="confirm">{{
+            t('insert.option.confirm')
+          }}</t-button>
+        </div>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import { shortId } from '../../../../utils/short-id'
+
+import { inject, nextTick, watch } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const container = inject('container')
+const editor = inject('editor')
+import { getSelectionNode } from '../../../../utils/selection'
+
+const props = defineProps({
+  edit: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+let items = _ref([])
+let target = _ref('checkbox')
+let showCheckAll = _ref(false)
+
+// 初始化界面上的数据值
+const initData = () => {
+  items.value = []
+  target.value = 'checkbox'
+  showCheckAll.value = false
+}
+
+// 初始化计算值
+const initCalData = () => {
+  for (let i = items.value.length - 1; i >= 0; i--) {
+    if (!items.value[i].label && items.value[i].label === '') {
+      items.value.splice(i, 1)
+      continue
+    }
+    if (target.value === 'radio') {
+      if (items.value[i].checked) {
+        for (let j = 0; j < items.value.length; j++) {
+          if (j !== i) {
+            items.value[j].checked = false
+          }
+        }
+      }
+    }
+    if (!items.value[i].key) {
+      items.value[i].key = shortId()
+    }
+  }
+}
+
+const initDefaultItems = () => {
+  if (items.value?.length > 0) {
+    return
+  }
+  items.value.push(
+    { label: t('insert.option.text1'), key: shortId(), checked: false },
+    { label: t('insert.option.text2'), key: shortId(), checked: false },
+  )
+}
+
+const radioChange = (box, i) => {
+  if (items.value[i].checked) {
+    items.value[i].checked = false
+    return
+  }
+  for (const item of items.value) {
+    if (item.checked) {
+      item.checked = false
+    }
+  }
+  items.value[i].checked = true
+}
+const addOption = async () => {
+  const newOption = {
+    label: '',
+    key: shortId(),
+    checked: false,
+  }
+  items.value.push(newOption)
+  // 添加时，自动定位到末尾
+  await nextTick()
+  const el = document.querySelector(
+    `${container} .umo-option-box-container-bottom`,
+  )
+  if (el) {
+    el.scrollTop = el.scrollHeight
+  }
+}
+const deleteItem = (item) => {
+  for (let i = items.value.length - 1; i >= 0; i--) {
+    if (items.value[i].key === item.key) {
+      items.value.splice(i, 1)
+      break
+    }
+  }
+}
+
+const confirm = () => {
+  const noEmptyData = items.value.filter(
+    (item) => item.label && item.label.trim()?.length > 0,
+  )
+  if (noEmptyData?.length === 0) {
+    return
+  }
+  let _checkAll = false
+
+  const optionConfig = editor.value ? getSelectionNode(editor.value) : null
+  if (optionConfig?.type?.name === 'option-box' && optionConfig?.attrs) {
+    _checkAll = optionConfig?.attrs?.checked || false
+  }
+  const _optionData = {
+    dataType: 'optionBox',
+    target: target.value === 'checkbox' ? 'checkbox' : 'radio',
+    items: JSON.parse(JSON.stringify(noEmptyData)),
+    checked: _checkAll,
+    checkAll: showCheckAll.value === true ? true : false,
+  }
+
+  if (props.edit) {
+    editor.value?.commands?.updateOptionBox(_optionData)
+    editor.value?.commands?.focus()
+  } else {
+    editor.value?.chain().insertOptionBox(_optionData).focus().run()
+  }
+  togglePopup(false)
+}
+
+watch(
+  () => popupVisible.value,
+  (visible) => {
+    if (visible) {
+      // 打开时：计算并初始化数据
+      initCalData()
+      if (props?.edit) {
+        const node = editor.value ? getSelectionNode(editor.value) : null
+        const attrs = node?.attrs || {}
+        if (node?.type?.name === 'optionBox') {
+          items.value = JSON.parse(JSON.stringify(attrs?.items || []))
+          target.value = attrs?.target || 'checkbox'
+          showCheckAll.value = attrs?.checkAll || false
+          console.log(items.value)
+          initCalData()
+        }
+      }
+      if (items.value?.length === 0) {
+        initDefaultItems()
+      }
+    } else {
+      // 关闭时：重置组件状态
+      initData()
+    }
+  },
+  { immediate: true, deep: true },
+)
+</script>
+
+<style lang="less" scoped>
+@import '../../../../assets/styles/_mixins.less';
+
+.umo-insert-option-box {
+  user-select: none;
+  & .umo-virtual-group {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    flex-shrink: 0;
+  }
+  & .umo-option-box-title {
+    margin: -5px 0 5px;
+  }
+
+  & .umo-option-box-container {
+    padding: 6px 10px;
+    width: 220px;
+    height: 260px;
+    border: solid 1px var(--td-border-level-2-color);
+    border-radius: 4px;
+
+    & .umo-option-box-button-svg-icon {
+      margin-top: 2px;
+      margin-left: -10px;
+      font-size: 16px;
+    }
+
+    & .umo-option-box-svg-icon {
+      font-size: 16px;
+      color: var(--umo-text-color-light);
+    }
+
+    &-center {
+      height: 25px;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &-bottom {
+      .umo-scrollbar();
+      height: 230px;
+      overflow: auto;
+
+      &-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 6px 0;
+        :deep(.umo-radio) {
+          display: flex;
+          &__label {
+            margin-left: 3px;
+          }
+        }
+      }
+    }
+
+    &-input {
+      width: 160px;
+    }
+
+    &-delete {
+      padding-left: 0px;
+    }
+    &-button {
+      display: flex;
+      gap: 8px;
+      margin-top: 10px;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/insert/symbol.vue

@@ -0,0 +1,88 @@
+<template>
+  <menus-button
+    ico="symbol"
+    :text="t('insert.symbol')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-symbols-container umo-scrollbar">
+        <template v-for="(group, index) in options.dicts?.symbols" :key="index">
+          <div class="umo-symbols-group-title" v-text="l(group.label)"></div>
+          <div class="umo-symbols-group-container">
+            <div
+              v-for="(item, i) in group.items.split('')"
+              :key="i"
+              class="umo-symbols-group-item"
+              @click="selectSymbol(item)"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+const options = inject('options')
+
+const selectSymbol = (char) => {
+  editor.value?.chain().focus().insertContent(char).run()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-symbols-container {
+  width: 336px;
+  max-height: var(--umo-popup-max-height);
+  min-height: 300px;
+  overflow: auto;
+  margin: calc(var(--umo-popup-content-padding) * -1);
+  padding: calc(var(--umo-popup-content-padding) - 2px);
+}
+
+.umo-symbols-group {
+  &-title {
+    color: var(--umo-text-color-light);
+    font-size: 12px;
+    margin: 5px 0 2px 4px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    gap: 2px;
+  }
+  &-item {
+    flex-basis: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    line-height: 1em;
+    margin-bottom: 2px;
+    border-radius: var(--umo-radius);
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 14px;
+    color: var(--umo-text-color);
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/insert/tag.vue

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="tag"
+    :text="t('insert.tag')"
+    huge
+    @menu-click="editor?.chain().focus().insertTag().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/insert/template.vue

@@ -0,0 +1,76 @@
+<template>
+  <menus-button
+    v-if="options.templates && options.templates.length"
+    ico="template"
+    :text="t('insert.template')"
+    menu-type="dropdown"
+    huge
+    overlay-class-name="umo-templates-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="item in options.templates"
+          :key="item.value"
+          :value="item.value"
+          :divider="item.divider"
+          :class="{
+            'has-description': item.description && item.description !== '',
+          }"
+          @click="setTemplate(item)"
+        >
+          <div class="umo-templates-dropdown-title">{{ item.title }}</div>
+          <div
+            v-if="item.description && item.description !== ''"
+            class="umo-templates-dropdown-description"
+          >
+            {{ item.description }}
+          </div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const options = inject('options')
+
+const setTemplate = ({ content }) => {
+  if (!content || !editor.value) {
+    return
+  }
+  editor.value.commands.insertContent(content)
+}
+</script>
+
+<style lang="less">
+.umo-templates-dropdown {
+  .umo-dropdown__item-text {
+    padding: 5px 5px;
+    min-width: 200px;
+    max-width: 320px;
+  }
+  &-title {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+  &-description {
+    color: var(--umo-text-color-light);
+    white-space: normal;
+    line-height: 1.4;
+    margin-top: 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    font-size: 12px;
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/insert/text-box.vue

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="text-box"
+    :text="t('insert.textBox')"
+    huge
+    @menu-click="editor?.chain().focus().setTextBox({}).run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/insert/toc.vue

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="toc"
+    :text="t('insert.toc')"
+    huge
+    @menu-click="editor?.chain().focus().addTableOfContents().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/insert/video.vue

@@ -0,0 +1,23 @@
+<template>
+  <menus-button
+    ico="video"
+    :text="t('insert.video')"
+    huge
+    @menu-click="
+      editor
+        ?.chain()
+        .focus()
+        .selectFiles('video', container, uploadFileMap)
+        .run()
+    "
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const container = inject('container')
+const editor = inject('editor')
+const uploadFileMap = inject('uploadFileMap')
+</script>