adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,173 @@
+<template>
+  <menus-button
+    ico="web-page"
+    :text="t('insert.web.text')"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      :visible="dialogVisible"
+      width="480px"
+      :confirm-btn="t('insert.web.insert')"
+      @confirm="insertWebPage"
+      @close="dialogVisible = false"
+    >
+      <template #header>
+        <icon name="web-page" />
+        {{ t('insert.web.title') }}
+      </template>
+      <div class="umo-web-page-container">
+        <div class="umo-web-page-tip" v-text="t('insert.web.tip')"></div>
+        <t-form :data="formData" label-align="top">
+          <t-form-item :label="t('insert.web.type')" name="type">
+            <t-select v-model="formData.type">
+              <t-option
+                v-for="(item, index) in webPages"
+                :key="index"
+                :label="item.label"
+                :value="index"
+              >
+                <span
+                  class="umo-web-page-option-icon"
+                  v-html="item.icon"
+                ></span>
+                {{ item.label }}
+              </t-option>
+              <template #prefixIcon>
+                <span
+                  class="umo-web-page-select-icon"
+                  v-html="webPages[formData.type]?.icon"
+                ></span>
+              </template>
+            </t-select>
+          </t-form-item>
+          <t-form-item :label="t('insert.web.url')" name="url">
+            <t-input
+              v-model.trim="formData.url"
+              :status="formData.error ? 'error' : 'default'"
+              type="url"
+              clearable
+              :placeholder="t('insert.web.placeholder')"
+            />
+          </t-form-item>
+        </t-form>
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, onMounted, watch } from 'vue';
+const props = defineProps({
+  pageType: {
+    type: Number,
+    default: 0,
+  },
+  pageUrl: {
+    type: String,
+    default: '',
+  },
+})
+const editor = inject('editor')
+const options = inject('options')
+
+let dialogVisible = _ref(false)
+
+const webPages = _ref([
+  {
+    label: t('insert.web.text'),
+    icon: '<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="40" height="32" rx="3" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M4 11a3 3 0 0 1 3-3h34a3 3 0 0 1 3 3v9H4v-9z" stroke="currentColor" stroke-width="4"/><circle r="2" transform="matrix(0 -1 -1 0 10 14)" fill="currentColor"/><circle r="2" transform="matrix(0 -1 -1 0 16 14)" fill="currentColor"/></svg>',
+    validate: (url) => url.startsWith('http://') || url.startsWith('https://'),
+  },
+])
+const formData = _ref({
+  type: '',
+  url: '',
+  error: false,
+})
+
+onMounted(() => {
+  if (options.value.webPages.length > 0) {
+    options.value.webPages.forEach((item) => {
+      item.label = l(item.label)
+      webPages.value.push(item)
+    })
+  }
+})
+
+const insertWebPage = () => {
+  const { validate, transformURL } = webPages.value[formData.value.type]
+  if (!editor.value) {
+    return
+  }
+  if (validate && !validate(formData.value.url)) {
+    formData.value.error = true
+    return
+  }
+  editor.value
+    .chain()
+    .focus()
+    .setParagraph()
+    .setIframe({
+      type: formData.value.type,
+      src: transformURL ? transformURL(formData.value.url) : formData.value.url,
+    })
+    .run()
+  formData.value.error = false
+  dialogVisible.value = false
+}
+watch(
+  () => dialogVisible.value,
+  (visible) => {
+    if (visible) {
+      formData.value.type = props.pageType
+      formData.value.url = props.pageUrl
+      formData.value.error = false
+    } else {
+      formData.value.type = ''
+      formData.value.url = ''
+      formData.value.error = false
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.umo-web-page {
+  &-container {
+    padding: 2px;
+    :deep(.umo-form) {
+      &__item {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  &-tip {
+    color: var(--umo-text-color-light);
+    margin-bottom: 10px;
+  }
+  &-select-icon {
+    display: inline-flex;
+    align-items: center;
+    :deep(svg) {
+      width: 18px;
+      height: 18px;
+      display: block;
+    }
+  }
+  &-option-icon {
+    display: inline-flex;
+    align-items: center;
+    transform: translateY(3px);
+    :deep(svg) {
+      width: 16px;
+      height: 16px;
+      display: block;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+  <menus-button
+    ico="page-background"
+    :text="t('page.bg.text')"
+    huge
+    menu-type="popup"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-background-container">
+        <div
+          v-for="(item, index) in backgrounds"
+          :key="index"
+          class="umo-background-item"
+          :class="{ active: page.background === item.value }"
+          :style="{ backgroundColor: item.value }"
+          @click="backgroundChange(item.value || '')"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+      <t-popup
+        :attach="container"
+        trigger="click"
+        placement="right-bottom"
+        @visible-change="(visible) => (moreColorPicker = visible)"
+      >
+        <div class="umo-background-more" :class="{ active: moreColorPicker }">
+          <div class="umo-background-more-menu">
+            <icon name="palette-color" />
+            <span v-text="t('page.bg.custom')"></span>
+          </div>
+          <div class="umo-background-more-arrow">
+            <icon name="arrow-down" />
+          </div>
+        </div>
+        <template #content>
+          <t-color-picker-panel
+            size="small"
+            :color-modes="['monochrome']"
+            :swatch-colors="[]"
+            enable-alpha
+            @change="backgroundChange"
+          />
+        </template>
+      </t-popup>
+    </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 container = inject('container')
+const page = inject('page')
+const options = inject('options')
+const backgrounds = [
+  { label: t('page.bg.default'), value: options.value.page.defaultBackground },
+  { label: t('page.bg.color1'), value: 'rgb(233, 246, 227)' },
+  { label: t('page.bg.color2'), value: 'rgb(252, 242, 224)' },
+  { label: t('page.bg.color3'), value: 'rgb(237, 244, 255)' },
+  { label: t('page.bg.color4'), value: 'rgb(153, 205, 250)' },
+  { label: t('page.bg.color5'), value: 'rgb(145, 145, 145)' },
+]
+
+// 更多颜色
+const moreColorPicker = _ref(false)
+const backgroundChange = (color) => {
+  page.value.background = color
+}
+</script>
+
+<style lang="less" scoped>
+.umo-background-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 234px;
+  justify-content: space-between;
+  gap: 9px;
+  user-select: none;
+  .umo-background-item {
+    width: 70px;
+    height: 90px;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    border-radius: var(--umo-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: var(--umo-text-color-light);
+    text-align: center;
+    cursor: pointer;
+    white-space: pre;
+    line-height: 1.5;
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: scale(1.02);
+    }
+    &.active {
+      color: var(--umo-primary-color);
+      border-color: var(--umo-primary-color);
+    }
+  }
+}
+.umo-background-more {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+  &:hover,
+  &.active {
+    background-color: var(--td-bg-color-container-hover);
+    border-radius: var(--umo-radius);
+  }
+  &-menu {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    cursor: pointer;
+    .umo-icon {
+      margin-right: 5px;
+      font-size: 16px;
+    }
+  }
+  &-arrow {
+    .umo-icon {
+      transform: rotate(-90deg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,26 @@
+<template>
+  <menus-button
+    ico="break-marks"
+    :text="t('page.breakMarks')"
+    huge
+    :menu-active="page.showBreakMarks"
+    @menu-click="toggleInvisibleCharacters"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const page = inject('page')
+
+const toggleInvisibleCharacters = () => {
+  page.value.showBreakMarks = !page.value.showBreakMarks
+  if (page.value.showBreakMarks) {
+    editor.value.commands.showInvisibleCharacters()
+  } else {
+    editor.value.commands.hideInvisibleCharacters()
+  }
+}
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="page-break"
+    :text="t('page.break')"
+    shortcut="Ctrl+Enter"
+    huge
+    @menu-click="setPageBreak"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+
+const setPageBreak = () => {
+  editor.value?.chain().focus().setPageBreak().run()
+}
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="page-footer"
+    :text="page.footer ? t('page.footer.hide') : t('page.footer.show')"
+    huge
+    @menu-click="page.footer = !page.footer"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const page = inject('page')
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="page-header"
+    :text="page.header ? t('page.header.hide') : t('page.header.show')"
+    huge
+    @menu-click="page.header = !page.header"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const page = inject('page')
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    ico="line-number"
+    :text="t('page.lineNumber')"
+    :menu-active="page.showLineNumber"
+    huge
+    @menu-click="page.showLineNumber = !page.showLineNumber"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const page = inject('page')
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <menus-button
+    ico="page-margin"
+    :text="t('page.margin')"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <page-options :visible="dialogVisible" @close="dialogVisible = false" />
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+const dialogVisible = _ref(false)
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <menus-button
+    ico="page-orientation"
+    :text="t('page.orientation.text')"
+    menu-type="dropdown"
+    overlay-class-name="umo-page-orientation-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="(item, index) in orientations"
+          :key="index"
+          :value="item.value"
+          :active="page.orientation === item.value"
+          @click="page.orientation = item.value"
+        >
+          <div
+            class="icon-orientation"
+            :class="{ rotate: item.value === 'landscape' }"
+          >
+            <icon name="page" />
+          </div>
+          <div class="label">{{ item.label }}</div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const page = inject('page')
+
+const orientations = [
+  { label: t('page.orientation.landscape'), value: 'landscape' },
+  { label: t('page.orientation.portrait'), value: 'portrait' },
+]
+</script>
+
+<style lang="less">
+.umo-page-orientation-dropdown {
+  .umo-dropdown__item {
+    max-width: unset !important;
+    &-text {
+      display: flex;
+      padding: 5px 8px;
+      .icon-orientation {
+        font-size: 20px;
+        margin-right: 5px;
+        &.rotate {
+          transform: rotate(90deg) rotateY(180deg) translate(0, 3px);
+        }
+      }
+      .label {
+        font-size: 14px;
+        color: var(--umo-text-color);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <menus-button
+    ico="page-size"
+    :text="t('page.size.text')"
+    menu-type="dropdown"
+    overlay-class-name="umo-page-size-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="(item, index) in options.dicts?.pageSizes"
+          :key="index"
+          :value="index"
+          :active="page.size?.width === item.width"
+          :divider="
+            options.dicts?.pageSizes &&
+            options.dicts.pageSizes.length - 1 === index
+          "
+          :min-column-width="150"
+          @click="page.size = item"
+        >
+          <div class="label" v-text="l(item.label)"></div>
+          <div class="desc">
+            {{ item.width + t('page.size.cm') }} ×
+            {{ item.height + t('page.size.cm') }}
+          </div>
+        </t-dropdown-item>
+        <t-dropdown-item @click="dialogVisible = true">
+          <div class="label" v-text="t('page.size.custom')"></div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+    <page-options :visible="dialogVisible" @close="dialogVisible = false" />
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const page = inject('page')
+const options = inject('options')
+const dialogVisible = _ref(false)
+</script>
+
+<style lang="less">
+.umo-page-size-dropdown {
+  .umo-dropdown__item {
+    max-width: unset !important;
+    &-text {
+      padding: 3px;
+      .label {
+        font-size: 14px;
+        color: var(--umo-text-color);
+      }
+      .desc {
+        color: var(--umo-text-color-light);
+        margin-top: -3px;
+        text-transform: uppercase;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>