adtec-core-package 3.0.0 → 3.0.2

package/src/components/editor-main/src/components/menus/toolbar/page/watermark.vue

@@ -0,0 +1,200 @@
+<template>
+  <menus-button
+    ico="watermark"
+    :text="t('page.watermark.text')"
+    huge
+    menu-type="popup"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-watermark-container">
+        <div class="umo-watermark-toolbar">
+          <menus-button
+            style="width: 140px"
+            :tooltip="t('page.watermark.fontFamily')"
+            menu-type="select"
+            :select-options="fonts"
+            :select-value="page.watermark?.fontFamily"
+            @menu-click="
+              (value) => {
+                updateWatermark({ fontFamily: value })
+              }
+            "
+          ></menus-button>
+          <menus-button
+            menu-type="input"
+            :tooltip="t('page.watermark.fontSize')"
+          >
+            <t-input-number
+              v-if="page.watermark"
+              :value="page.watermark.fontSize"
+              style="width: 60px"
+              size="small"
+              theme="column"
+              align="center"
+              :max="96"
+              :min="12"
+              :allow-input-over-limit="false"
+              placeholder=""
+              @change="
+                (newFontSize) => updateWatermark({ fontSize: newFontSize })
+              "
+            >
+            </t-input-number>
+          </menus-button>
+          <menus-toolbar-base-color
+            v-if="page.watermark"
+            :text="t('page.watermark.fontColor')"
+            :default-color="page.watermark?.fontColor"
+            modeless
+            @change="
+              (value) => {
+                updateWatermark({ fontColor: value })
+              }
+            "
+          />
+          <menus-toolbar-base-bold
+            v-if="page.watermark"
+            :menu-active="page.watermark.fontWeight === 'bold'"
+            @menu-click-through="
+              updateWatermark({
+                fontWeight:
+                  page.watermark.fontWeight === 'bold' ? 'normal' : 'bold',
+              })
+            "
+          />
+        </div>
+        <t-input
+          v-if="page.watermark"
+          :value="page.watermark.text"
+          maxlength="30"
+          clearable
+          :placeholder="t('page.watermark.content')"
+          @change="(newText) => updateWatermark({ text: newText })"
+        />
+        <div
+          class="umo-watermark-type-title"
+          v-text="t('page.watermark.type')"
+        ></div>
+        <div class="umo-watermark-type">
+          <div
+            v-if="page.watermark"
+            class="item compact"
+            :class="{ active: page.watermark.type === 'compact' }"
+            @click="updateWatermark({ type: 'compact' })"
+          >
+            <div class="bg"></div>
+            <span v-text="t('page.watermark.compact')"></span>
+          </div>
+          <div
+            v-if="page.watermark"
+            class="item spacious"
+            :class="{ active: page.watermark.type === 'spacious' }"
+            @click="updateWatermark({ type: 'spacious' })"
+          >
+            <div class="bg"></div>
+            <span v-text="t('page.watermark.spacious')"></span>
+          </div>
+        </div>
+        <t-button
+          v-if="page.watermark?.text"
+          class="umo-clear-button"
+          block
+          variant="outline"
+          @click="clearWatermark"
+          v-text="t('page.watermark.clear')"
+        ></t-button>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const { popupVisible, togglePopup } = usePopup()
+
+const page = inject('page')
+const options = inject('options')
+
+const fonts = options.value.dicts?.fonts.map((item) => {
+  return {
+    label: l(item.label),
+    value: item.value || '',
+  }
+})
+// 公共方法：更新水印属性（生成新对象，改变引用）
+const updateWatermark = (props) => {
+  if (!page.value.watermark) return
+  // 生成新对象，确保引用改变
+  page.value.watermark = { ...page.value.watermark, ...props }
+}
+const clearWatermark = () => {
+  updateWatermark({ text: '' })
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-watermark-container {
+  width: 320px;
+  .umo-watermark-toolbar {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .umo-watermark-type {
+    display: flex;
+    &-title {
+      color: var(--umo-text-color-light);
+      margin: 10px 0;
+      font-size: 12px;
+    }
+    .item {
+      cursor: pointer;
+      &:first-child {
+        margin-right: 10px;
+      }
+      .bg {
+        width: 70px;
+        height: 90px;
+        border: solid 1px var(--umo-border-color);
+        position: relative;
+        border-radius: var(--umo-radius);
+        background-size: cover;
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+      span {
+        display: block;
+        background-color: rgba(0, 0, 0, 0.05);
+        border-radius: 12px;
+        padding: 0 10px;
+        text-align: center;
+        margin-top: 8px;
+        font-size: 12px;
+      }
+      &:hover,
+      &.active {
+        .bg {
+          border-color: var(--umo-primary-color);
+        }
+        span {
+          color: var(--umo-primary-color);
+        }
+      }
+      &.compact .bg {
+        background-image: url('../../../../assets/images/watermark-compact.png');
+      }
+      &.spacious .bg {
+        background-image: url('../../../../assets/images/watermark-spacious.png');
+      }
+    }
+  }
+  .umo-clear-button {
+    margin-top: 20px;
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/table/add-column-after.vue

@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="table-add-column-after"
+    :text="t('table.addColumnAfter')"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addColumnAfter()"
+    @menu-click="editor?.chain().focus().addColumnAfter().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useState } from '../../../../composables/state.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const options = inject('options')
+const $toolbar = useState('toolbar', options)
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/add-column-before.vue

@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="table-add-column-before"
+    :text="t('table.addColumnBefore')"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addColumnBefore()"
+    @menu-click="editor?.chain().focus().addColumnBefore().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useState } from '../../../../composables/state.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const options = inject('options')
+const $toolbar = useState('toolbar', options)
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/add-row-after.vue

@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="table-add-row-after"
+    :text="t('table.addRowAfter')"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addRowAfter()"
+    @menu-click="editor?.chain().focus().addRowAfter().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useState } from '../../../../composables/state.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const options = inject('options')
+const $toolbar = useState('toolbar', options)
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/add-row-before.vue

@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="table-add-row-before"
+    :text="t('table.addRowBefore')"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addRowBefore()"
+    @menu-click="editor?.chain().focus().addRowBefore().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useState } from '../../../../composables/state.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const options = inject('options')
+const $toolbar = useState('toolbar', options)
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/border-color.vue

@@ -0,0 +1,35 @@
+<template>
+  <menus-button
+    ico="table"
+    :text="t('table.borderColor')"
+    menu-type="popup"
+    huge
+    :disabled="!editor?.can().setCellAttribute('borderColor', '')"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <picker-color default-color="" @change="colorBorderChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const emits = defineEmits(['change'])
+
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+const colorBorderChange = (color) => {
+  popupVisible.value = false
+  const borderColor = color === '' ? null : color
+  editor.value
+    ?.chain()
+    .focus()
+    .setCellAttribute('borderColor', borderColor)
+    .run()
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/cells-align.vue

@@ -0,0 +1,41 @@
+<template>
+  <menus-button
+    ico="table-cells-align"
+    :text="t('table.cellAlign.text')"
+    :tooltip="t('table.cellAlign.tip')"
+    menu-type="dropdown"
+    huge
+    :select-options="alignments"
+    :disabled="!editor?.can().setCellAttribute('align', '')"
+    @click="setCellsAlign"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+
+const alignments = [
+  { content: t('table.cellAlign.lt'), value: 'left-top' },
+  { content: t('table.cellAlign.ct'), value: 'center-top' },
+  { content: t('table.cellAlign.rt'), value: 'right-top' },
+  { content: t('table.cellAlign.jt'), value: 'justify-top', divider: true },
+  { content: t('table.cellAlign.lm'), value: 'left-middle' },
+  { content: t('table.cellAlign.cm'), value: 'center-middle' },
+  { content: t('table.cellAlign.rm'), value: 'right-middle' },
+  { content: t('table.cellAlign.jm'), value: 'justify-middle', divider: true },
+  { content: t('table.cellAlign.lb'), value: 'left-bottom' },
+  { content: t('table.cellAlign.cb'), value: 'center-bottom' },
+  { content: t('table.cellAlign.rb'), value: 'right-bottom' },
+  { content: t('table.cellAlign.jb'), value: 'justify-bottom' },
+]
+
+const setCellsAlign = ({ value }) => {
+  if (!value) {
+    return
+  }
+  editor.value?.chain().focus().setCellAttribute('align', value).run()
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/cells-background.vue

@@ -0,0 +1,32 @@
+<template>
+  <menus-button
+    ico="table-cells-background"
+    :text="t('table.cellBgColor.text')"
+    :tooltip="t('table.cellBgColor.tip')"
+    menu-type="popup"
+    huge
+    :disabled="!editor?.can().setCellAttribute('background', '')"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <picker-color default-color="" @change="colorChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const emits = defineEmits(['change'])
+
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+const colorChange = (color) => {
+  popupVisible.value = false
+  const background = color === '' ? null : color
+  editor.value?.chain().focus().setCellAttribute('background', background).run()
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/delete-column.vue

@@ -0,0 +1,44 @@
+<template>
+  <menus-button
+    ico="table-delete-column"
+    :text="t('table.deleteColumn.text')"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().deleteColumn()"
+    @menu-click="deleteColumn"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useConfirm } from '../../../../composables/dialog.js';
+
+import { useState } from '../../../../composables/state.js';
+import { inject } from 'vue';
+
+const container = inject('container')
+const editor = inject('editor')
+const options = inject('options')
+const $toolbar = useState('toolbar', options)
+
+const deleteColumn = () => {
+  const dialog = useConfirm({
+    attach: container,
+    theme: 'danger',
+    header: t('table.deleteColumn.title'),
+    body: t('table.deleteColumn.message'),
+    confirmBtn: {
+      theme: 'danger',
+      content: t('table.deleteColumn.delete'),
+    },
+    onConfirm() {
+      editor.value?.chain().focus().deleteColumn().run()
+      useMessage('success', {
+        attach: container,
+        content: t('table.deleteColumn.success'),
+      })
+      dialog.destroy()
+    },
+  })
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/delete-row.vue

@@ -0,0 +1,44 @@
+<template>
+  <menus-button
+    ico="table-delete-row"
+    :text="t('table.deleteRow.text')"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().deleteRow()"
+    @menu-click="deleteRow"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useConfirm } from '../../../../composables/dialog.js';
+
+import { useState } from '../../../../composables/state.js';
+import { inject } from 'vue';
+
+const container = inject('container')
+const editor = inject('editor')
+const options = inject('options')
+const $toolbar = useState('toolbar', options)
+
+const deleteRow = () => {
+  const dialog = useConfirm({
+    attach: container,
+    theme: 'danger',
+    header: t('table.deleteRow.title'),
+    body: t('table.deleteRow.message'),
+    confirmBtn: {
+      theme: 'danger',
+      content: t('table.deleteRow.delete'),
+    },
+    onConfirm() {
+      editor.value?.chain().focus().deleteRow().run()
+      useMessage('success', {
+        attach: container,
+        content: t('table.deleteRow.success'),
+      })
+      dialog.destroy()
+    },
+  })
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/delete.vue

@@ -0,0 +1,40 @@
+<template>
+  <menus-button
+    ico="table-delete"
+    :text="t('table.delete.text')"
+    huge
+    :disabled="!editor?.can().deleteTable()"
+    @menu-click="deleteTable"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useConfirm } from '../../../../composables/dialog.js';
+import { inject } from 'vue';
+
+const container = inject('container')
+const editor = inject('editor')
+
+const deleteTable = () => {
+  const dialog = useConfirm({
+    attach: container,
+    theme: 'danger',
+    header: t('table.delete.title'),
+    body: t('table.delete.message'),
+    confirmBtn: {
+      theme: 'danger',
+      content: t('table.delete.delete'),
+    },
+    onConfirm() {
+      editor.value?.chain().focus().deleteTable().run()
+      useMessage('success', {
+        attach: container,
+        content: t('table.delete.success'),
+      })
+      dialog.destroy()
+    },
+  })
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/table/fix.vue

@@ -0,0 +1,17 @@
+<template>
+  <menus-button
+    ico="table-fix"
+    :text="t('table.fix.text')"
+    :tooltip="t('table.fix.tip')"
+    huge
+    :disabled="!editor?.isActive('table')"
+    @menu-click="editor?.chain().focus().fixTables().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/table/insert.vue

@@ -0,0 +1,137 @@
+<template>
+  <menus-button
+    ico="table"
+    :text="t('table.insert.text')"
+    :tooltip="t('table.insert.tip')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-table-grid" @mouseleave="resetTable">
+        <div v-for="(row, rowIndex) in table" :key="rowIndex" class="row">
+          <div
+            v-for="(cell, colIndex) in row"
+            :key="colIndex"
+            class="cell"
+            :class="{ selected: isSelected(rowIndex, colIndex) }"
+            @mouseover="selectCell(rowIndex, colIndex)"
+            @click="insertTable"
+          ></div>
+        </div>
+      </div>
+      <div class="umo-table-custom">
+        <div
+          class="umo-table-custom-title"
+          v-text="t('table.insert.property')"
+        ></div>
+        <t-input-number
+          v-model="selected.rows"
+          theme="column"
+          align="right"
+          :max="1000"
+          :min="0"
+          :label="t('table.insert.rows')"
+        />
+        <t-input-number
+          v-model="selected.cols"
+          theme="column"
+          align="right"
+          :max="30"
+          :min="0"
+          :label="t('table.insert.cols')"
+        />
+        <t-checkbox v-model="withHeaderRow">
+          {{ t('table.insert.withHeader') }}
+        </t-checkbox>
+        <t-button
+          class="umo-insert-button"
+          block
+          theme="primary"
+          variant="base"
+          @click="insertTable"
+          v-text="t('table.insert.create')"
+        >
+        </t-button>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+const table = Array.from({ length: 8 }, () =>
+  Array.from({ length: 10 }, () => ''),
+)
+const selected = _ref({ rows: 0, cols: 0 })
+const withHeaderRow = _ref(true)
+
+const isSelected = (rows, cols) => {
+  return (
+    selected.value.rows &&
+    selected.value.rows > rows &&
+    selected.value.cols &&
+    selected.value.cols > cols
+  )
+}
+const selectCell = (rows, cols) => {
+  selected.value.rows = rows + 1
+  selected.value.cols = cols + 1
+}
+const resetTable = () => {
+  selected.value.rows = 0
+  selected.value.cols = 0
+}
+const insertTable = () => {
+  const { rows, cols } = selected.value
+  if (rows === 0 || rows > 1000 || cols === 0 || cols > 30) {
+    return
+  }
+  editor.value?.chain().focus().insertTable({ rows, cols, withHeaderRow: withHeaderRow.value }).run()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-table-grid {
+  .row {
+    display: flex;
+    gap: 4px;
+  }
+  .cell {
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--umo-border-color);
+    cursor: pointer;
+    margin-bottom: 4px;
+    &.selected {
+      border-color: var(--umo-primary-color);
+      background-color: rgba(0, 0, 0, 0.03);
+    }
+  }
+}
+
+.umo-table-custom {
+  :deep(.umo-input-number) {
+    width: 196px;
+    display: block;
+    margin-bottom: 8px;
+  }
+  &-title {
+    color: var(--umo-text-color-light);
+    font-size: 12px;
+    margin: 8px 0 2px;
+  }
+  .umo-insert-button {
+    margin-top: 5px;
+  }
+}
+</style>