adtec-core-package 3.0.0 → 3.0.1

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

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

@@ -0,0 +1,27 @@
+<template>
+  <menus-button
+    ico="zoom-auto"
+    :text="t('view.zoomAuto')"
+    huge
+    shortcut="Ctrl+0"
+    :disabled="page.layout === 'web'"
+    @menu-click="autoWidth"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const page = inject('page')
+const container = inject('container')
+
+const autoWidth = () => {
+  const autoWidthBtn = document.querySelector(
+    `${container} .umo-auto-width-button`,
+  )
+  if (autoWidthBtn) {
+    autoWidthBtn.click()
+  }
+}
+</script>

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

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="zoom-1"
+    :text="t('view.zoomOriginal')"
+    huge
+    shortcut="Ctrl+1"
+    :menu-active="page.zoomLevel === 100"
+    :disabled="page.layout === 'web'"
+    @menu-click="page.zoomLevel = 100"
+  />
+</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/zoom.vue

@@ -0,0 +1,35 @@
+<template>
+  <menus-button
+    :text="t('view.zoom')"
+    ico="zoom"
+    menu-type="dropdown"
+    huge
+    :disabled="page.layout === 'web'"
+    :select-options="zooms"
+    @click="setZoomLevel"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const page = inject('page')
+
+const zooms = [
+  { content: '75%', value: 75 },
+  { content: '100%', value: 100 },
+  { content: '125%', value: 125 },
+  { content: '150%', value: 150 },
+  { content: '200%', value: 200 },
+  { content: '300%', value: 300 },
+  { content: '400%', value: 400 },
+  { content: '500%', value: 500 },
+]
+
+const setZoomLevel = ({ value }) => {
+  if (value) {
+    page.value.zoomLevel = value
+  }
+}
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <component
+    :is="
+      h(
+        Dialog,
+        { placement: 'center', attach: container, ...$attrs, ref: changeRef },
+        $slots,
+      )
+    "
+  />
+</template>
+
+<script setup>
+import { Dialog } from 'tdesign-vue-next'
+import { h } from 'vue'
+
+
+import { inject, getCurrentInstance } from 'vue';
+const container = inject('container', 'body')
+const vm = getCurrentInstance()
+const changeRef = (expose) => (vm.expose = expose)
+</script>

package/src/components/editor-main/src/components/page-options.vue

@@ -0,0 +1,392 @@
+<template>
+  <modal
+    :visible="visible"
+    width="450px"
+    @close="emits('close')"
+    @confirm="onConfirm"
+  >
+    <template #header>
+      <icon name="page-margin" />
+      {{ t('pageOptions.title') }}
+    </template>
+    <div class="umo-page-options-container">
+      <t-form label-align="left">
+        <t-form-item
+          v-if="page.layout === 'page'"
+          :label="t('page.orientation.text')"
+        >
+          <t-radio-group
+            v-model="pageOptions.orientation"
+            variant="default-filled"
+          >
+            <t-radio-button value="landscape">
+              <icon class="icon-rotate" name="page" />
+              {{ t('page.orientation.landscape') }}
+            </t-radio-button>
+            <t-radio-button value="portrait">
+              <icon name="page" />
+              {{ t('page.orientation.portrait') }}
+            </t-radio-button>
+          </t-radio-group>
+        </t-form-item>
+        <t-form-item v-if="page.layout === 'page'" :label="t('page.size.text')">
+          <t-select
+            :popup-props="{
+              overlayClassName: 'umo-page-size-select',
+              destroyOnClose: true,
+              attach: container,
+            }"
+            @change="selectPageSize"
+          >
+            <template #valueDisplay>
+              {{ l(pageOptions.size?.label) }}
+            </template>
+            <t-option
+              v-for="(item, index) in options.dicts?.pageSizes"
+              :key="index"
+              :value="index"
+              :title="`${l(item.label)} (${item.width}×${item.height}${t('page.size.cm')})`"
+            >
+              <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-option>
+          </t-select>
+        </t-form-item>
+        <t-form-item
+          v-if="page.layout === 'page'"
+          :label="t('pageOptions.size.text')"
+        >
+          <div class="umo-page-setting">
+            <div class="item">
+              <t-input-number
+                v-if="pageOptions?.size"
+                v-model="pageOptions.size.width"
+                class="umo-page-setting-number"
+                theme="normal"
+                align="center"
+                :min="10"
+                :label="t('pageOptions.size.width')"
+                :suffix="t('page.size.cm')"
+                placeholder=""
+                :allow-input-over-limit="false"
+                @blur="(val) => inputPageSize(Number(val), 'width')"
+              />
+            </div>
+            <div class="item">
+              <t-input-number
+                v-if="pageOptions?.size"
+                v-model="pageOptions.size.height"
+                class="umo-page-setting-number"
+                theme="normal"
+                align="center"
+                :min="10"
+                :label="t('pageOptions.size.height')"
+                :suffix="t('page.size.cm')"
+                placeholder=""
+                :allow-input-over-limit="false"
+                @blur="(val) => inputPageSize(Number(val), 'height')"
+              />
+            </div>
+          </div>
+        </t-form-item>
+        <t-form-item :label="t('pageOptions.margin.text')" name="name">
+          <div>
+            <div class="umo-page-margin-inbuilt">
+              <div
+                class="item"
+                :class="{ active: !pageOptions.margin?.layout }"
+                @click="selectPageMargin(options.page?.defaultMargin)"
+                v-text="t('pageOptions.margin.default')"
+              ></div>
+              <div
+                class="item narrow"
+                :class="{ active: pageOptions.margin?.layout === 'narrow' }"
+                @click="
+                  selectPageMargin({
+                    left: 1.27,
+                    right: 1.27,
+                    top: 1.27,
+                    bottom: 1.27,
+                    layout: 'narrow',
+                  })
+                "
+                v-text="t('pageOptions.margin.narrow')"
+              ></div>
+              <div
+                class="item moderate"
+                :class="{ active: pageOptions.margin?.layout === 'moderate' }"
+                @click="
+                  selectPageMargin({
+                    left: 1.91,
+                    right: 1.91,
+                    top: 2.54,
+                    bottom: 2.54,
+                    layout: 'moderate',
+                  })
+                "
+                v-text="t('pageOptions.margin.moderate')"
+              ></div>
+              <div
+                class="item wide"
+                :class="{ active: pageOptions.margin?.layout === 'wide' }"
+                @click="
+                  selectPageMargin({
+                    top: 2.54,
+                    bottom: 2.54,
+                    left: 5.08,
+                    right: 5.08,
+                    layout: 'wide',
+                  })
+                "
+                v-text="t('pageOptions.margin.wide')"
+              ></div>
+            </div>
+            <div class="umo-page-setting">
+              <div class="item">
+                <t-input-number
+                  v-if="pageOptions?.margin"
+                  v-model="pageOptions.margin.top"
+                  class="umo-page-setting-number"
+                  theme="normal"
+                  align="center"
+                  :min="0"
+                  :step="0.1"
+                  :label="t('pageOptions.margin.top')"
+                  :suffix="t('page.size.cm')"
+                  placeholder=""
+                  :allow-input-over-limit="false"
+                  @blur="(val) => inputPageMargin(Number(val), 'top')"
+                />
+              </div>
+              <div class="item">
+                <t-input-number
+                  v-if="pageOptions?.margin"
+                  v-model="pageOptions.margin.bottom"
+                  class="umo-page-setting-number"
+                  theme="normal"
+                  align="center"
+                  :min="0"
+                  :step="0.1"
+                  :label="t('pageOptions.margin.bottom')"
+                  :suffix="t('page.size.cm')"
+                  placeholder=""
+                  :allow-input-over-limit="false"
+                  @blur="(val) => inputPageMargin(Number(val), 'bottom')"
+                />
+              </div>
+              <div class="item">
+                <t-input-number
+                  v-if="pageOptions?.margin"
+                  v-model="pageOptions.margin.left"
+                  class="umo-page-setting-number"
+                  theme="normal"
+                  align="center"
+                  :min="0"
+                  :step="0.1"
+                  :label="t('pageOptions.margin.left')"
+                  :suffix="t('page.size.cm')"
+                  placeholder=""
+                  :allow-input-over-limit="false"
+                  @blur="(val) => inputPageMargin(Number(val), 'left')"
+                />
+              </div>
+              <div class="item">
+                <t-input-number
+                  v-if="pageOptions?.margin"
+                  v-model="pageOptions.margin.right"
+                  class="umo-page-setting-number"
+                  theme="normal"
+                  align="center"
+                  :min="0"
+                  :step="0.1"
+                  :label="t('pageOptions.margin.right')"
+                  :suffix="t('page.size.cm')"
+                  placeholder=""
+                  :allow-input-over-limit="false"
+                  @blur="(val) => inputPageMargin(Number(val), 'right')"
+                />
+              </div>
+            </div>
+          </div>
+        </t-form-item>
+      </t-form>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+import { t } from '../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, watch } from 'vue';
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+})
+const emits = defineEmits(['close'])
+
+const container = inject('container')
+const page = inject('page')
+const options = inject('options')
+
+let pageOptions = _ref({})
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      pageOptions.value = JSON.parse(JSON.stringify(page.value))
+    }
+  },
+  { immediate: true },
+)
+
+// 页面大小
+const selectPageSize = (value) => {
+  pageOptions.value.size = options.value?.dicts?.pageSizes[value]
+}
+const inputPageSize = (value, field) => {
+  pageOptions.value.size = {
+    width: 0,
+    height: 0,
+  }
+  if (!value || value < 10) {
+    Reflect.set(pageOptions.value.size, field, 10)
+    return
+  }
+  pageOptions.value.size.label = t('pageOptions.size.custom')
+}
+
+// 页边距
+const selectPageMargin = (margin) => {
+  pageOptions.value.margin = margin
+}
+const inputPageMargin = (value, field) => {
+  pageOptions.value.margin = {
+    right: 0,
+    left: 0,
+    bottom: 0,
+    top: 0,
+  }
+  if (!value || value < 0) {
+    Reflect.set(pageOptions.value.margin, field, 0)
+    return
+  }
+  pageOptions.value.margin.layout = 'custom'
+  selectPageMargin(pageOptions.value.margin)
+}
+
+const onConfirm = () => {
+  page.value = pageOptions.value
+  emits('close')
+}
+</script>
+
+<style lang="less" scoped>
+.umo-page-options-container {
+  width: 400px;
+  margin-top: 15px;
+  :deep(.umo-radio-button__label) {
+    display: flex;
+    align-items: center;
+    .umo-icon {
+      margin-right: 5px;
+      font-size: 20px;
+      &.icon-rotate {
+        transform: rotate(90deg) rotateY(180deg);
+      }
+    }
+  }
+}
+
+.umo-page-margin-inbuilt {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  .item {
+    width: 60px;
+    height: 80px;
+    border: solid 1px var(--umo-border-color);
+    border-radius: var(--umo-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--umo-button-hover-background);
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    font-size: 8px;
+    &::after {
+      position: absolute;
+      display: block;
+      content: ' ';
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border: solid 8px var(--umo-color-white);
+      border-left-width: 10px;
+      border-right-width: 10px;
+    }
+    &.narrow::after {
+      border-width: 5px;
+    }
+    &.moderate::after {
+      border-left-width: 6px;
+      border-right-width: 6px;
+    }
+    &.wide::after {
+      border-left-width: 13px;
+      border-right-width: 13px;
+    }
+    &:hover,
+    &.active {
+      border-color: var(--umo-primary-color);
+    }
+  }
+}
+.umo-page-setting {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  .item {
+    display: flex;
+    justify-content: space-between;
+    &:nth-child(2n + 1) {
+      margin-right: 10px;
+    }
+    &:first-child {
+      margin-bottom: 10px;
+    }
+  }
+  &-number {
+    width: 140px;
+    :deep(.umo-input__suffix) {
+      opacity: 0.4;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.umo-page-size-select {
+  .umo-select-option {
+    padding: 0 8px;
+    > span {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+    .desc {
+      font-size: 12px;
+      color: var(--umo-text-color-light);
+    }
+  }
+}
+</style>