zhui-plus 1.0.0 → 1.0.10

package/packages/components/fileViewer/src/ofd/OfdViewer.vue

@@ -0,0 +1,211 @@
+<template>
+  <div
+    ref="canvasContentRef"
+    class="vlo-canvas-content vlo-canvas-content-min"
+  >
+    <div
+      v-if="loading"
+      class="vlo-loading-container"
+    >
+      <svg
+        id="vlo-load"
+        x="0px"
+        y="0px"
+        viewBox="0 0 150 150"
+      >
+        <circle
+          id="vlo-loading-inner"
+          cx="75"
+          cy="75"
+          r="60"
+        />
+      </svg>
+    </div>
+    <div
+      v-if="loadingError"
+      class="vlo-loading-failed-container"
+    >
+      <a
+        :href="props.url"
+        target="_blank"
+      >
+        <div>OFD渲染失败，点击下载查看</div>
+      </a>
+    </div>
+    <div
+      ref="ofdContentRef"
+      class="vlo-ofd-content"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  onMounted, ref, watch, onUnmounted,
+  nextTick,
+} from 'vue';
+import LiteOfd from '../liteofd/liteOfd';
+
+const props = defineProps({
+  url: {
+    type: String,
+    default: '',
+  },
+})
+const emit = defineEmits<{(e: 'handleEditorCreate'):void}>()
+const canvasContentRef = ref<HTMLElement>(null!)
+const ofdContentRef = ref<HTMLElement>(null!)
+const loading = ref(true)
+const loadingError = ref(false)
+let liteOfd: LiteOfd = null!
+
+const loadOfd = () => {
+  if (props.url) {
+    loading.value = true
+    loadingError.value = false
+
+    fetch(props.url, {
+      method: 'get',
+    }).then((res) => {
+      if (res.status !== 200) {
+        return res.json()
+      }
+      return res.arrayBuffer()
+    }).then((buffer) => {
+      loading.value = false
+      liteOfd = new LiteOfd()
+      liteOfd.parse(buffer).then((data: any) => {
+        const container = document.createElement('div');
+        container.style.display = 'flex'
+        container.style.flexDirection = 'column'
+        container.style.gap = '32px'
+        const ofdDiv = liteOfd.render(container, 'background-color: white; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);');
+        (ofdContentRef.value as any).appendChild(ofdDiv)
+        nextTick(() => {
+          caculateScaleAndRerender()
+        })
+      })
+    })
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', onWindowResized)
+  loadOfd()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onWindowResized)
+})
+
+watch(() => props.url, () => {
+  loadOfd()
+})
+
+function onWindowResized() {
+  caculateScaleAndRerender()
+}
+
+const caculateScaleAndRerender = () => {
+  const canvasWidth = canvasContentRef.value.clientWidth
+  const pageWidth = ofdContentRef.value.getElementsByClassName('page-container')[0].clientWidth
+  liteOfd.zoom(canvasWidth / pageWidth)
+}
+
+</script>
+<style lang="scss">
+.vlo-canvas-content {
+  --scale-factor: 1;
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding-top: 12px;
+  :deep(.ofd-page) {
+    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
+    margin-bottom: 20px;
+  }
+  .vlo-loading-container{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    right: -10px;
+    background: rgba(255, 255, 255, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9;
+    .text {
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 20px;
+      letter-spacing: 0em;
+
+      color: #758296;
+    }
+  }
+  .vlo-loading-failed-container {
+    margin-bottom: 20px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid #dee0e3;
+    box-sizing: border-box;
+    border-radius: 8px;
+    width: 320px;
+    height: 66px;
+    & a {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      text-decoration: none;
+      & div {
+        font-size: 16px;
+        font-weight: 400;
+        color: #1f2329;
+      }
+    }
+    &:hover {
+      border-color: #0070FF;
+    }
+  }
+  #vlo-load {
+    width: 75px;
+    animation: vlo-loading 3s linear infinite;
+    #vlo-loading-inner {
+      stroke: {
+        dashoffset: 0;
+        dasharray: 300;
+        width: 10;
+        miterlimit: 10;
+        linecap: round;
+      }
+      animation: vlo-loading-circle 2s linear infinite;
+      stroke: #758296;
+      fill: transparent;
+    }
+  }
+  @keyframes vlo-loading {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes vlo-loading-circle {
+    0% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: -600;
+    }
+  }
+}
+.vlo-canvas-content-min {
+  min-height: 194px;
+}
+.vlo-ofd-content {
+  display: flex;
+}
+</style>

package/packages/components/fileViewer/src/ofd/PageIndicator.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="vlo-indicator">
+    <input
+      v-model="inputValue"
+      class="vlo-input"
+      @focus="onInputFocused"
+      @blur="onInputBlured"
+      @input="onInputInput"
+      @keydown.enter="onInputEnter"
+    >
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  current: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 1,
+  },
+})
+const emits = defineEmits(['change'])
+const inputValue = ref(`${props.current + 1}/${props.total}`)
+watch(() => props.current, () => {
+  inputValue.value = `${props.current + 1}/${props.total}`
+})
+watch(() => props.total, () => {
+  inputValue.value = `${props.current + 1}/${props.total}`
+})
+const onInputFocused = () => {
+  inputValue.value = `${props.current + 1}`
+}
+const onInputBlured = () => {
+  if (inputValue.value) {
+    let page = parseInt(inputValue.value, 10)
+    if (page >= props.total - 1) {
+      page = props.total - 1
+    } else if (page === 0) {
+      page = 0
+    } else {
+      page -= 1
+    }
+    if (page === props.current) {
+      inputValue.value = `${props.current + 1}/${props.total}`
+    } else {
+      emits('change', page)
+    }
+  } else {
+    inputValue.value = `${props.current + 1}/${props.total}`
+  }
+}
+const onInputInput = () => {
+  inputValue.value = inputValue.value.replace(/[^\d]/g, '')
+}
+const onInputEnter = (event: Event) => {
+  (event.target as HTMLInputElement).blur()
+}
+</script>
+<style lang="scss">
+.vlo-indicator {
+  margin: 0 5px;
+  width: 80px;
+  height: 24px;
+  position: relative;
+  .vlo-input {
+    box-sizing: border-box;
+    border-radius: 2px;
+    border: 1px solid rgba(220, 223, 230, 0.5);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    line-height: 24px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: normal;
+    letter-spacing: 0em;
+    color: #282B31;
+    outline: none;
+    &:focus {
+      border: 1px solid #0070FF;
+    }
+  }
+}
+</style>

package/packages/components/fileViewer/src/ofd/RatioIndicator.vue

@@ -0,0 +1,271 @@
+<template>
+  <div
+    @click="hideFloatMenu"
+    class="vlo-indicator"
+  >
+    <div
+      class="vlo-text"
+      :class="floatMenuVisible ? 'text-active' : ''"
+      @click="floatMenuVisible = !floatMenuVisible"
+    >
+      {{ ratio }}%
+    </div>
+    <div
+      v-if="floatMenuVisible"
+      class="vlo-float-menu"
+    >
+      <div
+        v-for="(item, index) in defaultRatios"
+        :key="index"
+        class="vlo-menu-item"
+        @click="selectRatio(item)"
+      >
+        {{ item }}%
+        <svg
+          v-if="ratio === item" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12" height="12" viewBox="0 0 12 12"><defs><clipPath id="master_svg0_11491_34230"><rect x="0" y="0" width="12" height="12" rx="0"/></clipPath></defs><g style="mix-blend-mode:passthrough" clip-path="url(#master_svg0_11491_34230)"><g style="mix-blend-mode:passthrough"><path d="M10.35355,2.646446C10.5488,2.841709,10.5488,3.15829,10.35355,3.353555C10.35355,3.353555,4.85355,8.85355,4.85355,8.85355C4.65829,9.0488,4.34171,9.0488,4.14645,8.85355C4.14645,8.85355,1.646446,6.35355,1.646446,6.35355C1.4511845,6.15829,1.4511845,5.84171,1.646446,5.64645C1.841709,5.45118,2.15829,5.45118,2.353555,5.64645C2.353555,5.64645,4.5,7.7929,4.5,7.7929C4.5,7.7929,9.64645,2.646446,9.64645,2.646446C9.8417,2.4511845,10.1583,2.4511845,10.35355,2.646446C10.35355,2.646446,10.35355,2.646446,10.35355,2.646446Z" fill-rule="evenodd" fill="#000000" fill-opacity="1"/></g></g></svg>
+      </div>
+      <div class="vlo-custom-menu-item">
+        <div class="vlo-customer-text">
+          自定义
+        </div>
+        <div class="vlo-customer-box">
+          <input
+            v-model="customRatio"
+            class="vlo-input"
+            @blur="onInputBlured"
+            @input="onInputInput"
+            @keydown.enter="onInputEnter"
+          >
+          <div class="vlo-vline" />
+          <div class="vlo-arrow-box">
+            <button
+              class="vlo-arrow"
+              :disabled="ratio >= 400"
+              @click="clickArrowUp"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12" height="12" viewBox="0 0 12 12"><defs><clipPath id="master_svg0_11491_34372"><rect x="0" y="0" width="12" height="12" rx="0"/></clipPath></defs><g style="mix-blend-mode:passthrough" clip-path="url(#master_svg0_11491_34372)"><g style="mix-blend-mode:passthrough"><path d="M5.64645,4.146446C5.84171,3.9511845,6.15829,3.9511845,6.35356,4.146446C6.35356,4.146446,9.35355,7.14645,9.35355,7.14645C9.5488,7.34171,9.5488,7.65829,9.35355,7.85356C9.1583,8.04881,8.8417,8.04881,8.64645,7.85356C8.64645,7.85356,6,5.20711,6,5.20711C6,5.20711,3.353555,7.85356,3.353555,7.85356C3.15829,8.04881,2.841709,8.04881,2.646446,7.85356C2.4511845,7.65829,2.4511845,7.34171,2.646446,7.14645C2.646446,7.14645,5.64645,4.146446,5.64645,4.146446C5.64645,4.146446,5.64645,4.146446,5.64645,4.146446Z" fill-rule="evenodd" fill="#666666" fill-opacity="1"/></g></g></svg>
+            </button>
+            <div class="vlo-line" />
+            <button
+              class="vlo-arrow"
+              :disabled="ratio <= 5"
+              @click="clickArrowDown"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12" height="12" viewBox="0 0 12 12"><defs><clipPath id="master_svg0_11491_34391"><rect x="0" y="12" width="12" height="12" rx="0"/></clipPath></defs><g style="mix-blend-mode:passthrough" transform="matrix(1,0,0,-1,0,24)" clip-path="url(#master_svg0_11491_34391)"><g style="mix-blend-mode:passthrough"><path d="M5.64645,16.146446C5.84171,15.9511845,6.15829,15.9511845,6.35356,16.146446C6.35356,16.146446,9.35355,19.14645,9.35355,19.14645C9.5488,19.34171,9.5488,19.65829,9.35355,19.85355C9.1583,20.04881,8.8417,20.04881,8.64645,19.85355C8.64645,19.85355,6,17.20711,6,17.20711C6,17.20711,3.353555,19.85355,3.353555,19.85355C3.15829,20.04881,2.841709,20.04881,2.646447,19.85355C2.4511844,19.65829,2.4511844,19.34171,2.646447,19.14645C2.646447,19.14645,5.64645,16.146446,5.64645,16.146446C5.64645,16.146446,5.64645,16.146446,5.64645,16.146446Z" fill-rule="evenodd" fill="#666666" fill-opacity="1"/></g></g></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  ratio: {
+    type: Number,
+    default: 100,
+  },
+})
+const emits = defineEmits(['change'])
+const floatMenuVisible = ref(false)
+const customRatio = ref('100%')
+const defaultRatios = [50, 75, 100, 125, 150, 200]
+
+customRatio.value = `${props.ratio}%`
+watch(() => props.ratio, () => {
+  customRatio.value = `${props.ratio}%`
+})
+
+const hideFloatMenu = () => {
+  floatMenuVisible.value = false
+}
+
+const selectRatio = (ratio: number) => {
+  emits('change', ratio)
+  floatMenuVisible.value = false
+}
+
+const onInputBlured = () => {
+  if (customRatio.value) {
+    let ratio = parseInt(customRatio.value, 10)
+    if (ratio > 400) {
+      ratio = 400
+    } else if (ratio < 5) {
+      ratio = 5
+    }
+    if (ratio === props.ratio) {
+      customRatio.value = `${props.ratio}%`
+    } else {
+      emits('change', ratio)
+    }
+  } else {
+    customRatio.value = `${props.ratio}%`
+  }
+}
+
+const onInputInput = () => {
+  customRatio.value = customRatio.value.replace(/[^\d]/g, '')
+}
+
+const onInputEnter = (event: Event) => {
+  (event.target as HTMLInputElement).blur()
+}
+
+const clickArrowUp = () => {
+  emits('change', Math.min(props.ratio + 1, 400))
+}
+
+const clickArrowDown = () => {
+  emits('change', Math.max(props.ratio - 1, 10))
+}
+</script>
+<style lang="scss">
+.vlo-indicator {
+  position: relative;
+  width: 40px;
+  height: 24px;
+  .vlo-text {
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 24px;
+    text-align: center;
+    color: #3D3D3D;
+    user-select: none;
+    cursor: default;
+    &:hover {
+      border-radius: 4px;
+      background: rgba(0, 112, 255, 0.08);
+    }
+  }
+  .vlo-text-active {
+    border-radius: 4px;
+    background: rgba(0, 112, 255, 0.08);
+  }
+  .vlo-float-menu {
+    position: absolute;
+    right: -24px;
+    bottom: 34px;
+    display: flex;
+    flex-direction: column;
+    width: 140px;
+    padding-top: 6px;
+    border-radius: 4px;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    border: 1px solid #EBEBEB;
+    .vlo-menu-item {
+      height: 32px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 12px;
+      font-weight: normal;
+      line-height: 16px;
+      letter-spacing: 0em;
+      /* 黑色 */
+      color: #282B31;
+      padding-left: 32px;
+      position: relative;
+      cursor: pointer;
+      &:hover {
+        background: rgba(0, 112, 255, 0.04);
+      }
+      & svg {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 12px;
+        height: 12px;
+      }
+    }
+    .vlo-custom-menu-item {
+      border-top: 1px solid #EBEBEB;
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .vlo-customer-text {
+        margin-left: 32px;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 16px;
+        letter-spacing: 0em;
+        /* 黑色 */
+        color: #282B31;
+      }
+      .vlo-customer-box {
+        position: relative;
+        margin-left: 4px;
+        width: 56px;
+        height: 27px;
+        .vlo-input {
+          width: 100%;
+          height: 100%;
+          padding-left: 4px;
+          padding-right: 20px;
+          text-align: center;
+          line-height: 27px;
+          box-sizing: border-box;
+          border: 1px solid rgba(220, 223, 230, 0.5);
+          border-radius: 2px;
+          outline: none;
+          font-size: 12px;
+          font-weight: normal;
+          color: #282B31;
+          &:focus {
+            border: 1px solid #0070FF;
+          }
+        }
+        .vlo-vline {
+          position: absolute;
+          top: 0;
+          left: 40px;
+          bottom: 0;
+          width: 1px;
+          background: rgba(220, 223, 230, 0.5);
+        }
+        .vlo-arrow-box {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          width: 16px;
+          display: flex;
+          flex-direction: column;
+          .vlo-arrow {
+            height: 0;
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: none;
+            border: 0;
+            padding: 0;
+            & svg {
+              width: 12px;
+              height: 12px;
+            }
+            &:hover {
+              background: rgba(0, 112, 255, 0.04);
+            }
+            &:disabled {
+              opacity: 0.5;
+              &:hover {
+                background: none;
+              }
+            }
+          }
+          .vlo-line {
+            height: 1px;
+            background: rgba(220, 223, 230, 0.5);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/packages/components/fileViewer/src/ofd/ToolTip.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    ref="toolTipRef"
+    class="vlo-toolTip"
+  >
+    <slot />
+  </div>
+  <div
+    ref="contentRef"
+    class="vlo-content"
+    :style="contentStyle"
+  >
+    {{ data }}
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: String,
+    default: '',
+  },
+  contentShow: {
+    type: Boolean,
+    default: false,
+  },
+})
+const contentRef = ref<HTMLDivElement | null>(null)
+const toolTipRef = ref<HTMLDivElement | null>(null)
+const contentStyle = ref<any>('')
+
+onMounted(() => {
+  (toolTipRef.value as HTMLDivElement).addEventListener('mouseenter', getContentPosition);
+  (toolTipRef.value as HTMLDivElement).addEventListener('mousemove', getContentPosition);
+  (toolTipRef.value as HTMLDivElement).addEventListener('mouseleave', removeToolsLinstener);
+})
+
+const getContentPosition = (e: MouseEvent) => {
+  const rect = (toolTipRef.value as any).getBoundingClientRect()
+  const contentRect = (contentRef.value as any).getBoundingClientRect()
+  contentStyle.value = {
+    transform: `translateX(${rect.x - contentRect.width / 2 + rect.width / 2}px) translateY(${rect.y - rect.height - 10}px)`,
+    visibility: 'inherit',
+    opacity: '1',
+  }
+}
+
+const removeToolsLinstener = () => {
+  contentStyle.value = {
+    transition: 'none',
+    opacity: '0',
+  }
+}
+</script>
+
+<style lang='scss'>
+
+.vlo-toolTip{
+  position: relative;
+}
+.vlo-content{
+  visibility: hidden;
+  transition: visibility 0s linear 0.35s;
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  max-width: 244px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.62);
+  font-size: 12px;
+  color: #FFFFFF;
+  line-height: 18px;
+  padding: 6px 10px;
+  white-space: break-spaces;
+  z-index: 1000;
+}
+
+</style>