adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/components/menus/toolbar/tools/qrcode.vue

@@ -0,0 +1,293 @@
+<template>
+  <menus-button
+    :ico="content ? 'edit' : 'qrcode'"
+    :text="content ? t('tools.qrcode.edit') : t('tools.qrcode.text')"
+    huge
+    @menu-click="menuClick"
+  >
+    <modal
+      :visible="dialogVisible"
+      width="532px"
+      @confirm="setQrcode"
+      @close="dialogVisible = false"
+    >
+      <template #header>
+        <icon name="qrcode" />
+        {{ content ? t('tools.qrcode.edit') : t('tools.qrcode.text') }}
+      </template>
+      <div class="umo-qrcode-container">
+        <div class="umo-qrcode-toolbar">
+          <menus-button
+            style="width: 126px"
+            :text="t('tools.qrcode.level')"
+            :select-options="levels"
+            menu-type="select"
+            :select-value="config.ecl"
+            @menu-click="
+              (value) => {
+                config.ecl = value
+              }
+            "
+          />
+          <menus-button
+            menu-type="input"
+            :tooltip="t('tools.qrcode.paddingTip')"
+          >
+            <t-input-number
+              v-model="config.padding"
+              size="small"
+              theme="normal"
+              :max="10"
+              :min="0"
+              :allow-input-over-limit="false"
+              placeholder=""
+            >
+              <template #label>
+                <span v-text="t('tools.qrcode.padding')"></span>
+              </template>
+            </t-input-number>
+          </menus-button>
+          <menus-button menu-type="input" :tooltip="t('tools.qrcode.widthTip')">
+            <t-input-number
+              v-model="config.width"
+              size="small"
+              theme="normal"
+              :max="1024"
+              :min="64"
+              :allow-input-over-limit="false"
+              placeholder=""
+            >
+              <template #label>
+                <span v-text="t('tools.qrcode.width')"></span>
+              </template>
+            </t-input-number>
+          </menus-button>
+          <t-divider layout="vertical" />
+          <menus-toolbar-base-color
+            :text="t('tools.qrcode.color')"
+            :default-color="config.color"
+            modeless
+            @change="(value) => (config.color = value)"
+          />
+          <menus-toolbar-base-background-color
+            :text="t('tools.qrcode.bgColor')"
+            :default-color="config.background"
+            modeless
+            @change="(value) => (config.background = value)"
+          />
+        </div>
+        <div class="umo-qrcode-code">
+          <t-textarea
+            v-model="config.content"
+            maxlength="200"
+            show-limit-number
+            autofocus
+            autosize
+            :placeholder="t('tools.qrcode.placeholder')"
+          >
+          </t-textarea>
+          <div
+            v-if="renderError && config.content !== ''"
+            class="umo-barcode-error"
+            v-text="t('tools.qrcode.renderError')"
+          ></div>
+        </div>
+        <div class="umo-qrcode-render">
+          <div
+            class="umo-qrcode-title"
+            v-text="t('tools.qrcode.preview')"
+          ></div>
+          <div class="umo-qrcode-svg umo-scrollbar">
+            <div
+              v-if="!svgCode"
+              class="umo-qrcode-empty"
+              v-text="t('tools.qrcode.notEmpty')"
+            ></div>
+            <div v-else class="umo-svg-render" v-html="svgCode"></div>
+          </div>
+        </div>
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import { qrcode } from 'pure-svg-code'
+
+import { getSelectionNode } from '../../../../utils/selection'
+import { svgToDataURL } from '../../../../utils/file'
+import { shortId } from '../../../../utils/short-id'
+
+
+import { inject, watch } from 'vue';
+defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+})
+
+let dialogVisible = _ref(false)
+const editor = inject('editor')
+const container = inject('container')
+
+const menuClick = () => {
+  renderQrcode()
+  dialogVisible.value = true
+}
+
+const levels = [
+  { label: t('tools.qrcode.levelL'), value: 'L' },
+  { label: t('tools.qrcode.levelM'), value: 'M' },
+  { label: t('tools.qrcode.levelQ'), value: 'Q' },
+  { label: t('tools.qrcode.levelH'), value: 'H' },
+]
+const defaultConfig = {
+  content: '',
+  padding: 1,
+  width: 256,
+  height: 256,
+  color: '#000000',
+  background: '#ffffff',
+  ecl: 'M',
+}
+
+let config = _ref({ ...defaultConfig })
+let changed = _ref(false)
+
+let svgCode = _ref(null)
+let renderError = _ref(false)
+const renderQrcode = () => {
+  try {
+    svgCode.value = null
+    config.value.height = config.value.width
+    svgCode.value = qrcode(config.value)
+    renderError.value = false
+  } catch {
+    svgCode.value = null
+    renderError.value = true
+  }
+}
+watch(
+  () => dialogVisible.value,
+  (val) => {
+    if (val) {
+      config.value = __props.content ? JSON.parse(__props.content) : { ...defaultConfig }
+      setTimeout(() => {
+        changed.value = false
+      }, 200)
+    }
+  },
+  { immediate: true },
+)
+watch(
+  () => config.value,
+  () => {
+    if (dialogVisible.value) {
+      changed.value = true
+      renderQrcode()
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+// 创建或更新条形码
+const setQrcode = () => {
+  if (renderError.value || !svgCode.value) {
+    useMessage('error', {
+      attach: container,
+      content: t('tools.qrcode.renderError'),
+    })
+    return
+  }
+  if (config.value.content === '') {
+    useMessage('error', {
+      attach: container,
+      content: t('tools.qrcode.notEmpty'),
+    })
+    return
+  }
+  if (changed.value) {
+    const { width, height } = config.value
+    const src = svgToDataURL(svgCode.value)
+    editor.value
+      ?.chain()
+      .focus()
+      .setImage(
+        {
+          id: shortId(10),
+          type: 'qrcode',
+          src,
+          content: JSON.stringify(config.value),
+          width,
+          height,
+        },
+        !!__props.content,
+      )
+      .run()
+  }
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-qrcode-container {
+  padding: 2px;
+  .umo-qrcode-toolbar {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .umo-qrcode-code {
+    margin-bottom: 10px;
+    :deep(.umo-textarea__inner) {
+      height: 100%;
+      resize: none;
+    }
+    .umo-barcode-error {
+      font-size: 12px;
+      color: var(--umo-error-color);
+    }
+  }
+  .umo-qrcode-render {
+    border: solid 1px var(--td-border-level-2-color);
+    border-radius: var(--umo-radius);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    .umo-qrcode-title {
+      background-color: var(--umo-button-hover-background);
+      padding: 0 10px;
+      position: absolute;
+      font-size: 12px;
+      border-bottom-right-radius: var(--umo-radius);
+    }
+    .umo-qrcode-empty {
+      color: var(--umo-text-color-light);
+      font-size: 12px;
+      margin: 40px;
+    }
+    .umo-qrcode-svg {
+      box-sizing: border-box;
+      padding: 30px 10px;
+      min-height: 100px;
+      overflow: auto;
+      color: var(--umo-text-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      > .umo-svg-render {
+        border: solid 1px var(--umo-border-color-light);
+        :deep(svg) {
+          display: block;
+          width: 256px;
+          height: 256px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/tools/signature.vue

@@ -0,0 +1,208 @@
+<template>
+  <menus-button
+    ico="signature"
+    :text="t('tools.signature.text')"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      v-model:visible="dialogVisible"
+      width="642px"
+      @confirm="setSignature"
+      @close="dialogVisible = false"
+    >
+      <template #header>
+        <icon name="signature" />
+        {{ t('tools.signature.title') }}
+      </template>
+      <div class="umo-signature-toolbar">
+        <menus-button
+          ico="undo"
+          :text="t('base.undo')"
+          hide-text
+          @menu-click="signature?.undo()"
+        />
+        <menus-button
+          ico="clear-format"
+          :text="t('tools.signature.clear')"
+          hide-text
+          @menu-click="signature?.clear()"
+        />
+        <t-divider layout="vertical" />
+        <menus-button
+          :text="t('tools.signature.lineWidth')"
+          menu-type="dropdown"
+          hide-text
+          :select-options="lineWidthOptions"
+          @click="changeLineWidth"
+        >
+          <icon name="highlight" />
+        </menus-button>
+        <menus-toolbar-base-color
+          :text="t('tools.signature.lineColor')"
+          modeless
+          :default-color="options.color"
+          @change="changeLineColor"
+        />
+        <menus-button
+          :text="t('tools.signature.smooth')"
+          :menu-active="openSmooth"
+          hide-text
+          @menu-click="changeSmooth"
+        >
+          <icon name="highlight" />
+        </menus-button>
+        <t-divider layout="vertical" />
+        <menus-button
+          ico="image-reset"
+          :text="t('tools.signature.reset')"
+          hide-text
+          @menu-click="reuseOptions"
+        />
+      </div>
+      <div class="umo-signature-container" :data-tip="t('tools.signature.tip')">
+        <canvas ref="signatureRef" />
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import SmoothSignature from 'smooth-signature'
+
+import { shortId } from '../../../../utils/short-id'
+
+
+import { inject, watch, nextTick } from 'vue';
+const editor = inject('editor')
+const container = inject('container')
+
+let dialogVisible = _ref(false)
+let openSmooth = _ref(false)
+
+const lineWidthOptions = _ref([
+  { content: '2', value: 2 },
+  { content: '3', value: 3 },
+  { content: '4', value: 4 },
+  { content: '5', value: 5 },
+  { content: '6', value: 6 },
+  { content: '7', value: 7 },
+  { content: '8', value: 8 },
+])
+const options = _ref({
+  width: 600,
+  height: 200,
+  minWidth: 4,
+  maxWidth: 4,
+  color: '#000',
+  openSmooth: openSmooth.value,
+  scale: 2,
+})
+let signature = _ref(null)
+const signatureRef = _ref(null)
+
+const reuseOptions = () => {
+  signature.value.width = 600
+  signature.value.height = 200
+  signature.value.minWidth = 4
+  signature.value.maxWidth = 4
+  signature.value.color = '#000'
+  signature.value.openSmooth = false
+  openSmooth.value = false
+}
+
+const changeLineColor = (color) => {
+  signature.value.color = color
+}
+const changeLineWidth = ({ value }) => {
+  signature.value.minWidth = value
+  signature.value.maxWidth = value
+}
+const changeSmooth = () => {
+  openSmooth.value = !openSmooth.value
+  signature.value.openSmooth = openSmooth.value
+  signature.value.maxWidth = openSmooth.value ? signature.value.minWidth * 2 : signature.value.minWidth
+}
+
+const setSignature = async () => {
+  try {
+    const image = signature.value.getPNG()
+    editor.value
+      ?.chain()
+      .focus()
+      .setImage({
+        id: shortId(10),
+        type: 'signature',
+        src: image,
+        width: 120,
+        height: 40,
+        draggable: true,
+        nodeAlign: 'left',
+        previewType: null,
+      })
+      .run()
+    dialogVisible.value = false
+  } catch {
+    useMessage('error', {
+      attach: container,
+      content: t('tools.signature.notEmpty'),
+    })
+  }
+}
+
+watch(
+  () => dialogVisible.value,
+  async (val) => {
+    if (val) {
+      if (!signature.value) {
+        await nextTick()
+        signature.value = new SmoothSignature(signatureRef.value, options.value)
+      }
+    } else {
+      if (signature.value) {
+        signature.value.clear()
+      }
+      signature.value = null
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style lang="less" scoped>
+.umo-signature-toolbar {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+.umo-signature-container {
+  border: solid 1px var(--umo-primary-color);
+  box-sizing: border-box;
+  border-radius: var(--umo-radius);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  &::before {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    content: attr(data-tip);
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    color: var(--umo-text-color-light);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  canvas {
+    width: 600px;
+    height: 200px;
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/view/fullscreen.vue

@@ -0,0 +1,17 @@
+<template>
+  <menus-button
+    :ico="fullscreen ? 'full-screen-exit' : 'full-screen'"
+    :text="fullscreen ? t('fullscreen.disable') : t('fullscreen.title')"
+    shortcut="Ctrl+F11"
+    huge
+    :menu-active="fullscreen"
+    @menu-click="fullscreen = !fullscreen"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const fullscreen = inject('fullscreen')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/view/locale.vue

@@ -0,0 +1,40 @@
+<template>
+  <menus-button
+    :text="t('view.locale')"
+    ico="locale"
+    menu-type="dropdown"
+    huge
+    :select-options="themes"
+    @click="changeLocale"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject, computed } from 'vue';
+
+const setLocale = inject('setLocale')
+
+const { locale } = useI18n()
+
+const themes = computed(() => {
+  return [
+    {
+      content: '🇨🇳 简体中文',
+      value: 'zh-CN',
+      active: locale.value === 'zh-CN',
+    },
+    {
+      content: '🇱🇷 English',
+      value: 'en-US',
+      active: locale.value === 'en-US',
+    },
+  ]
+})
+
+const changeLocale = ({ value }) => {
+  if (value) {
+    setLocale(value, false)
+  }
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    ico="layout-page"
+    :text="t('layout.page')"
+    huge
+    :menu-active="page.layout === 'page'"
+    @menu-click="page.layout = 'page'"
+  />
+</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/view/preview.vue

@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    ico="preview"
+    :text="t('preview.title')"
+    huge
+    :menu-active="page.preview.enabled"
+    @menu-click="page.preview.enabled = !page.preview.enabled"
+  />
+</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/view/skin.vue

@@ -0,0 +1,43 @@
+<template>
+  <menus-button
+    :text="t('view.skin')"
+    ico="skin"
+    menu-type="dropdown"
+    huge
+    :select-options="skins"
+    :disabled="page.layout === 'web'"
+    @click="changeSkin"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject, computed } from 'vue';
+import { useStorage } from '@vueuse/core';
+
+const options = inject('options')
+const page = inject('page')
+const setSkin = inject('setSkin')
+
+const skins = computed(() => {
+  const skin = useStorage('umo-editor:skin', options.value.skin)
+  return [
+    {
+      content: t('view.skinDefault'),
+      value: 'default',
+      active: skin.value === 'default',
+    },
+    {
+      content: t('view.skinModern'),
+      value: 'modern',
+      active: skin.value === 'modern',
+    },
+  ]
+})
+
+const changeSkin = ({ value }) => {
+  if (value) {
+    setSkin(value)
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/view/theme.vue

@@ -0,0 +1,41 @@
+<template>
+  <menus-button
+    :text="t('view.theme')"
+    ico="theme"
+    menu-type="dropdown"
+    huge
+    :select-options="themes"
+    @click="changeTheme"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject, computed } from 'vue';
+import { useStorage } from '@vueuse/core';
+
+const options = inject('options')
+const setTheme = inject('setTheme')
+
+const themes = computed(() => {
+  const theme = useStorage('umo-editor:theme', options.value.theme)
+  return [
+    {
+      content: t('view.themeLight'),
+      value: 'light',
+      active: theme.value === 'light',
+    },
+    {
+      content: t('view.themeDark'),
+      value: 'dark',
+      active: theme.value === 'dark',
+    },
+  ]
+})
+
+const changeTheme = ({ value }) => {
+  if (value) {
+    setTheme(value)
+  }
+}
+</script>

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

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