adtec-core-package 3.0.0 → 3.0.2

package/src/components/editor-main/src/components/picker/color.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="umo-color-picker-container">
+    <div class="umo-color-picker-default-button">
+      <t-button
+        theme="default"
+        variant="outline"
+        size="small"
+        block
+        @click="selectColor(color)"
+        v-text="t('colorPicker.default')"
+      >
+      </t-button>
+    </div>
+    <div class="umo-color-picker-group">
+      <div
+        v-for="(item, index) in options.dicts?.colors"
+        :key="index"
+        class="umo-color-picker-item"
+        :style="{ backgroundColor: item }"
+        @click="selectColor(item)"
+      ></div>
+    </div>
+    <div
+      class="umo-color-picker-group-title"
+      v-text="t('colorPicker.standard')"
+    ></div>
+    <div class="umo-color-picker-group">
+      <div
+        v-for="(item, index) in standardColors"
+        :key="index"
+        class="umo-color-picker-item"
+        :style="{ backgroundColor: item }"
+        @click="selectColor(item)"
+      ></div>
+    </div>
+    <div
+      v-if="$recent.colors.length > 0"
+      class="umo-color-picker-group-title"
+      v-text="t('colorPicker.recent')"
+    ></div>
+    <div v-if="$recent.colors.length > 0" class="umo-color-picker-group">
+      <div
+        v-for="(item, index) in $recent.colors"
+        :key="index"
+        class="umo-color-picker-item"
+        :style="{ backgroundColor: item }"
+        @click="selectColor(item)"
+      ></div>
+    </div>
+    <div class="umo-color-picker-divider"></div>
+    <t-popup
+      :attach="container"
+      trigger="click"
+      placement="right-bottom"
+      @visible-change="(visible) => (moreColorPicker = visible)"
+    >
+      <div class="umo-color-picker-more" :class="{ active: moreColorPicker }">
+        <div class="umo-color-picker-more-menu">
+          <icon name="palette-color" />
+          <span v-text="t('colorPicker.more')"></span>
+        </div>
+        <div class="umo-color-picker-more-arrow">
+          <icon name="arrow-down" />
+        </div>
+      </div>
+      <template #content>
+        <t-color-picker-panel
+          v-model="color"
+          size="small"
+          :color-modes="['monochrome']"
+          :swatch-colors="[]"
+          enable-alpha
+          @change="colorChange"
+        />
+      </template>
+    </t-popup>
+  </div>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+
+import { useState } from '../../composables/state.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, watch } from 'vue';
+const props = defineProps({
+  defaultColor: {
+    type: String,
+    default: '#000',
+  },
+})
+const emits = defineEmits(['change'])
+
+const container = inject('container')
+const editor = inject('editor')
+const options = inject('options')
+const $recent = useState('recent', options)
+// prettier-ignore
+const standardColors = ['#B12318', '#EB3323', '#F6C143', '#FFFE55', '#A0CD63', '#4FAD5B', '#4CAFEA', '#2D70BA', '#06215C', '#68389B']
+
+const color = _ref(props.defaultColor)
+
+// 更多颜色
+const moreColorPicker = _ref(false)
+const colorChange = (color, ctx) => {
+  if (ctx && ctx.trigger !== 'palette-saturation-brightness') {
+    return
+  }
+  $recent.value.colors.forEach((item, index) => {
+    if (item === color) {
+      $recent.value.colors.splice(index, 1)
+    }
+  })
+  $recent.value.colors.unshift(color)
+  if ($recent.value.colors.length > 10) {
+    $recent.value.colors.splice(10, 1)
+  }
+  emits('change', color)
+}
+watch(
+  () => moreColorPicker.value,
+  (visible) => {
+    if (visible) {
+      editor.value?.commands.focus(undefined, { scrollIntoView: false })
+    }
+  },
+)
+
+// 选择颜色
+const selectColor = (color) => {
+  colorChange(color)
+  emits('change', color)
+}
+</script>
+
+<style lang="less" scoped>
+.umo-color-picker {
+  &-container {
+    width: 236px;
+  }
+  &-default-button {
+    .umo-button {
+      height: 28px;
+    }
+  }
+  &-group {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 8px 0;
+    gap: 4px;
+    &-title {
+      color: var(--umo-text-color-light);
+      font-size: 12px;
+      margin: 5px 0 2px;
+    }
+  }
+  &-item {
+    width: 20px;
+    height: 20px;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2px;
+    flex-basis: 20px;
+    box-sizing: border-box;
+    transition: all 0.2s;
+    cursor: pointer;
+    border-radius: 3px;
+    &:hover {
+      transform: scale(1.1);
+      border-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+  &-divider {
+    height: 1px;
+    background-color: var(--umo-border-color-light);
+    margin: 10px 0;
+  }
+  &-more {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    cursor: pointer;
+    &:hover,
+    &.active {
+      background-color: var(--td-bg-color-container-hover);
+      border-radius: var(--umo-radius);
+    }
+    &-menu {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: var(--umo-text-color-light);
+      cursor: pointer;
+      .umo-icon {
+        margin-right: 5px;
+        font-size: 18px;
+      }
+    }
+    &-arrow {
+      .umo-icon {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/statusbar/about.vue

@@ -0,0 +1,37 @@
+<template>
+  <modal
+    :visible="visible"
+    width="300px"
+    :footer="false"
+    @close="emits('close')"
+  >
+    <template #header>
+      {{ t('about.title') }}
+    </template>
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        line-height: 2;
+        padding: 30px 0;
+      "
+    >
+      <p>{{ t('about.version') }}: v{{ version }}</p>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+
+import { version } from '../../utils/copyright'
+
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['close'])
+</script>

package/src/components/editor-main/src/components/statusbar/countdown.vue

@@ -0,0 +1,273 @@
+<template>
+  <t-popup
+    :visible="visible"
+    :attach="container"
+    :z-index="2000"
+    trigger="click"
+    placement="top-left"
+    :popper-options="popperOptions"
+  >
+    <slot />
+    <template #content>
+      <div class="umo-preview-countdown">
+        <div class="umo-preview-countdown-title">
+          <icon name="time" /> {{ t('preview.countdown.title') }}
+        </div>
+        <t-form label-align="left" label-width="75px" @submit="startCountdown">
+          <t-form-item
+            :label="t('preview.countdown.select')"
+            name="quickSelect"
+          >
+            <t-select
+              v-model="selectValue"
+              :options="options"
+              :placeholder="t('preview.countdown.selectTip')"
+              :popup-props="{ attach: container, zIndex: 2000 }"
+              @change="countdownSelect"
+            />
+          </t-form-item>
+          <t-form-item :label="t('preview.countdown.custom')" name="custom">
+            <div class="umo-preview-countdown-input" size="small">
+              <t-input-number
+                v-model="hours"
+                theme="normal"
+                align="center"
+                :decimal-places="0"
+                :placeholder="t('preview.countdown.hours')"
+                :min="0"
+                :max="60"
+                :step="1"
+                :disabled="selectValue !== null"
+              />
+              <t-input-number
+                v-model="minutes"
+                theme="normal"
+                align="center"
+                :decimal-places="0"
+                :placeholder="t('preview.countdown.minutes')"
+                :min="0"
+                :max="60"
+                :step="1"
+                :disabled="selectValue !== null"
+              />
+              <t-input-number
+                v-model="seconds"
+                theme="normal"
+                align="center"
+                :decimal-places="0"
+                :placeholder="t('preview.countdown.seconds')"
+                :min="0"
+                :max="60"
+                :step="1"
+                :disabled="selectValue !== null"
+              />
+            </div>
+          </t-form-item>
+          <t-form-item
+            :label="t('preview.countdown.whenEnd')"
+            name="endOptions"
+          >
+            <t-radio-group v-model="whenEnd" default-value="showEndMessage">
+              <t-radio value="showEndMessage">
+                {{ t('preview.countdown.showEndMessage') }}</t-radio
+              >
+              <t-radio value="exitPreview">
+                {{ t('preview.countdown.exitPreview') }}
+              </t-radio>
+            </t-radio-group>
+            <div></div>
+          </t-form-item>
+          <t-form-item>
+            <t-space size="small">
+              <t-button theme="primary" type="submit">
+                <icon name="time" /> {{ t('preview.countdown.start') }}
+              </t-button>
+              <t-button theme="default" variant="base" @click="cancelCountdown">
+                {{ t('preview.countdown.cancel') }}
+              </t-button>
+            </t-space>
+          </t-form-item>
+        </t-form>
+      </div>
+    </template>
+  </t-popup>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, watch, onBeforeUnmount } from 'vue';
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    require: true,
+  },
+})
+
+const emits = defineEmits(['countdown-change', 'exit-preivew', 'close'])
+
+const container = inject('container')
+
+const popperOptions = {
+  modifiers: [
+    {
+      name: 'offset',
+      options: {
+        offset: [-10, 10],
+      },
+    },
+  ],
+}
+const selectValue = _ref(null)
+let hours = _ref(null)
+let minutes = _ref(null)
+let seconds = _ref(null)
+const whenEnd = _ref('showEndMessage')
+
+const options = [
+  { label: t('preview.countdown.1hour'), value: 60 },
+  { label: t('preview.countdown.45minutes'), value: 45 },
+  { label: t('preview.countdown.30minutes'), value: 30 },
+  { label: t('preview.countdown.15minutes'), value: 15 },
+  { label: t('preview.countdown.10minutes'), value: 10 },
+  { label: t('preview.countdown.5minutes'), value: 5 },
+  { label: t('preview.countdown.custom'), value: null },
+]
+
+const countdownSelect = (value) => {
+  minutes.value = value
+}
+
+let countdownInfo = _ref('')
+let messageBox = null
+let countdownInterval = null
+const resetCountdown = () => {
+  hours.value = null
+  minutes.value = null
+  seconds.value = null
+  countdownInfo.value = ''
+}
+const startCountdown = async () => {
+  if (messageBox) {
+    messageBox.close()
+  }
+  if (countdownInterval !== null) {
+    clearInterval(countdownInterval)
+  }
+  const totalSeconds =
+    (hours.value || 0) * 3600 + (minutes.value || 0) * 60 + (seconds.value || 0)
+
+  if (totalSeconds <= 0) {
+    messageBox = await useMessage('error', {
+      attach: container,
+      content: t('preview.countdown.error'),
+    })
+    return
+  }
+
+  let remainingTime = totalSeconds
+
+  countdownInterval = setInterval(async () => {
+    if (remainingTime <= 0) {
+      if (messageBox) {
+        messageBox.close()
+      }
+      resetCountdown()
+      if (countdownInterval !== null) {
+        clearInterval(countdownInterval)
+      }
+      if (whenEnd.value === 'showEndMessage') {
+        countdownInfo.value = ''
+        messageBox = await useMessage('error', {
+          attach: container,
+          content: t('preview.countdown.endCountdown'),
+          duration: 5000,
+          closeBtn: true,
+        })
+      }
+      if (whenEnd.value === 'exitPreview') {
+        emits('exit-preivew')
+      }
+      return
+    }
+    remainingTime--
+    countdownInfo.value = `${t('preview.countdown.remaining')}: ${String(Math.floor(remainingTime / 3600)).padStart(2, '0')}:${String(Math.floor((remainingTime % 3600) / 60)).padStart(2, '0')}:${String(remainingTime % 60).padStart(2, '0')}`
+  }, 1000)
+
+  emits('close')
+}
+
+const cancelCountdown = () => {
+  if (countdownInterval) {
+    clearInterval(countdownInterval)
+  }
+  resetCountdown()
+  emits('close')
+}
+
+watch(
+  () => countdownInfo.value,
+  (value) => {
+    emits('countdown-change', value)
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  if (countdownInterval !== null) {
+    clearInterval(countdownInterval)
+  }
+  if (messageBox) {
+    messageBox.close()
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.umo-preview-countdown {
+  padding: 25px;
+  width: 320px;
+  cursor: default;
+  &-title {
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    :deep(.umo-icon) {
+      font-size: 24px;
+      margin: -2px 6px 0 0;
+    }
+  }
+  :deep(.umo-form) {
+    &__item {
+      &:not(:last-child) {
+        margin-bottom: 15px;
+      }
+      .umo-radio-group {
+        margin-top: 5px;
+      }
+      .umo-button__text {
+        display: flex;
+        align-items: center;
+        .umo-icon {
+          font-size: 16px;
+          margin-right: 5px;
+        }
+      }
+    }
+    &__controls {
+      margin-top: 10px;
+    }
+  }
+  &-input {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+    :deep(.umo-input-number) {
+      width: 78px !important;
+    }
+  }
+}
+</style>