From f1c42c78bc209b04a4df4bd6837b737e89caf2c9 Mon Sep 17 00:00:00 2001
From: inkbox <panxiaoyu@xiyoumail.com>
Date: Fri, 22 Dec 2023 05:49:37 +0000
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=88=E4=BD=BF=E7=94=A8=E5=9B=BE?=
 =?UTF-8?q?=E5=BA=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/album/InkImg.vue             |   6 +-
 src/components/album/image/image-viewer.vue | 331 ++++++++++++++++++++
 src/components/album/image/main.vue         | 248 +++++++++++++++
 src/{components/album => router}/cover.vue  |   2 +-
 src/{components/album => router}/images.vue |   3 +-
 src/router/index.js                         |   4 +-
 6 files changed, 588 insertions(+), 6 deletions(-)
 create mode 100644 src/components/album/image/image-viewer.vue
 create mode 100644 src/components/album/image/main.vue
 rename src/{components/album => router}/cover.vue (98%)
 rename src/{components/album => router}/images.vue (97%)

diff --git a/src/components/album/InkImg.vue b/src/components/album/InkImg.vue
index b879f41a..f07f1f99 100644
--- a/src/components/album/InkImg.vue
+++ b/src/components/album/InkImg.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="img-container">
-    <el-image
+    <InkElImage
       :style="imgStyle"
       :src="src | cdnSrc"
       :preview-src-list="srcList"
@@ -15,12 +15,14 @@
       <div slot="error">
         <i class="el-icon-picture-outline"></i>
       </div>
-    </el-image>
+    </InkElImage>
   </div>
 </template>
 <script>
+import InkElImage from './image/main';
 export default {
   name: "InkImg",
+  components:{InkElImage},
   props: {
     src: String,
     imgStyle: Object,
diff --git a/src/components/album/image/image-viewer.vue b/src/components/album/image/image-viewer.vue
new file mode 100644
index 00000000..b539dd93
--- /dev/null
+++ b/src/components/album/image/image-viewer.vue
@@ -0,0 +1,331 @@
+<template>
+    <transition name="viewer-fade">
+      <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': viewerZIndex }">
+        <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
+        <!-- CLOSE -->
+        <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
+          <i class="el-icon-close"></i>
+        </span>
+        <!-- ARROW -->
+        <template v-if="!isSingle">
+          <span
+            class="el-image-viewer__btn el-image-viewer__prev"
+            :class="{ 'is-disabled': !infinite && isFirst }"
+            @click="prev">
+            <i class="el-icon-arrow-left"/>
+          </span>
+          <span
+            class="el-image-viewer__btn el-image-viewer__next"
+            :class="{ 'is-disabled': !infinite && isLast }"
+            @click="next">
+            <i class="el-icon-arrow-right"/>
+          </span>
+        </template>
+        <!-- ACTIONS -->
+        <div class="el-image-viewer__btn el-image-viewer__actions">
+          <div class="el-image-viewer__actions__inner">
+            <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+            <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+            <i class="el-image-viewer__actions__divider"></i>
+            <i :class="mode.icon" @click="toggleMode"></i>
+            <i class="el-image-viewer__actions__divider"></i>
+            <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
+            <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
+          </div>
+        </div>
+        <!-- CANVAS -->
+        <div class="el-image-viewer__canvas">
+          <img
+            v-for="(url, i) in urlList"
+            v-if="i === index"
+            ref="img"
+            v-bind="$attrs"
+            class="el-image-viewer__img"
+            :key="url"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown">
+        </div>
+      </div>
+    </transition>
+  </template>
+  
+  <script>
+  import { on, off } from 'element-ui/src/utils/dom';
+  import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+  import { PopupManager } from 'element-ui/src/utils/popup';
+  
+  const Mode = {
+    CONTAIN: {
+      name: 'contain',
+      icon: 'el-icon-full-screen'
+    },
+    ORIGINAL: {
+      name: 'original',
+      icon: 'el-icon-c-scale-to-original'
+    }
+  };
+  
+  const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+  
+  export default {
+
+  
+    props: {
+      urlList: {
+        type: Array,
+        default: () => []
+      },
+      zIndex: {
+        type: Number,
+        default: 2000
+      },
+      onSwitch: {
+        type: Function,
+        default: () => {}
+      },
+      onClose: {
+        type: Function,
+        default: () => {}
+      },
+      initialIndex: {
+        type: Number,
+        default: 0
+      },
+      appendToBody: {
+        type: Boolean,
+        default: true
+      },
+      maskClosable: {
+        type: Boolean,
+        default: true
+      }
+    },
+  
+    data() {
+      return {
+        index: this.initialIndex,
+        isShow: false,
+        infinite: true,
+        loading: false,
+        mode: Mode.CONTAIN,
+        transform: {
+          scale: 1,
+          deg: 0,
+          offsetX: 0,
+          offsetY: 0,
+          enableTransition: false
+        }
+      };
+    },
+    computed: {
+      isSingle() {
+        return this.urlList.length <= 1;
+      },
+      isFirst() {
+        return this.index === 0;
+      },
+      isLast() {
+        return this.index === this.urlList.length - 1;
+      },
+      currentImg() {
+        return this.urlList[this.index];
+      },
+      imgStyle() {
+        const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+        const style = {
+          transform: `scale(${scale}) rotate(${deg}deg)`,
+          transition: enableTransition ? 'transform .3s' : '',
+          'margin-left': `${offsetX}px`,
+          'margin-top': `${offsetY}px`
+        };
+        if (this.mode === Mode.CONTAIN) {
+          style.maxWidth = style.maxHeight = '100%';
+        }
+        return style;
+      },
+      viewerZIndex() {
+        const nextZIndex = PopupManager.nextZIndex();
+        return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
+      }
+    },
+    watch: {
+      index: {
+        handler: function(val) {
+          this.reset();
+          this.onSwitch(val);
+        }
+      },
+      currentImg(val) {
+        this.$nextTick(_ => {
+          const $img = this.$refs.img[0];
+          if (!$img.complete) {
+            this.loading = true;
+          }
+        });
+      }
+    },
+    methods: {
+      hide() {
+        this.deviceSupportUninstall();
+        this.onClose();
+      },
+      deviceSupportInstall() {
+        this._keyDownHandler = e => {
+          e.stopPropagation();
+          const keyCode = e.keyCode;
+          switch (keyCode) {
+            // ESC
+            case 27:
+              this.hide();
+              break;
+            // SPACE
+            case 32:
+              this.toggleMode();
+              break;
+            // LEFT_ARROW
+            case 37:
+              this.prev();
+              break;
+            // UP_ARROW
+            case 38:
+              this.handleActions('zoomIn');
+              break;
+            // RIGHT_ARROW
+            case 39:
+              this.next();
+              break;
+            // DOWN_ARROW
+            case 40:
+              this.handleActions('zoomOut');
+              break;
+          }
+        };
+        this._mouseWheelHandler = rafThrottle(e => {
+          const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+          if (delta > 0) {
+            this.handleActions('zoomIn', {
+              zoomRate: 0.015,
+              enableTransition: false
+            });
+          } else {
+            this.handleActions('zoomOut', {
+              zoomRate: 0.015,
+              enableTransition: false
+            });
+          }
+        });
+        on(document, 'keydown', this._keyDownHandler);
+        on(document, mousewheelEventName, this._mouseWheelHandler);
+      },
+      deviceSupportUninstall() {
+        off(document, 'keydown', this._keyDownHandler);
+        off(document, mousewheelEventName, this._mouseWheelHandler);
+        this._keyDownHandler = null;
+        this._mouseWheelHandler = null;
+      },
+      handleImgLoad(e) {
+        this.loading = false;
+      },
+      handleImgError(e) {
+        this.loading = false;
+        e.target.alt = '加载失败';
+      },
+      handleMouseDown(e) {
+        if (this.loading || e.button !== 0) return;
+  
+        const { offsetX, offsetY } = this.transform;
+        const startX = e.pageX;
+        const startY = e.pageY;
+        this._dragHandler = rafThrottle(ev => {
+          this.transform.offsetX = offsetX + ev.pageX - startX;
+          this.transform.offsetY = offsetY + ev.pageY - startY;
+        });
+        on(document, 'mousemove', this._dragHandler);
+        on(document, 'mouseup', ev => {
+          off(document, 'mousemove', this._dragHandler);
+        });
+  
+        e.preventDefault();
+      },
+      handleMaskClick() {
+        if (this.maskClosable) {
+          this.hide();
+        }
+      },
+      reset() {
+        this.transform = {
+          scale: 1,
+          deg: 0,
+          offsetX: 0,
+          offsetY: 0,
+          enableTransition: false
+        };
+      },
+      toggleMode() {
+        if (this.loading) return;
+  
+        const modeNames = Object.keys(Mode);
+        const modeValues = Object.values(Mode);
+        const index = modeValues.indexOf(this.mode);
+        const nextIndex = (index + 1) % modeNames.length;
+        this.mode = Mode[modeNames[nextIndex]];
+        this.reset();
+      },
+      prev() {
+        if (this.isFirst && !this.infinite) return;
+        const len = this.urlList.length;
+        this.index = (this.index - 1 + len) % len;
+      },
+      next() {
+        if (this.isLast && !this.infinite) return;
+        const len = this.urlList.length;
+        this.index = (this.index + 1) % len;
+      },
+      handleActions(action, options = {}) {
+        if (this.loading) return;
+        const { zoomRate, rotateDeg, enableTransition } = {
+          zoomRate: 0.2,
+          rotateDeg: 90,
+          enableTransition: true,
+          ...options
+        };
+        const { transform } = this;
+        switch (action) {
+          case 'zoomOut':
+            if (transform.scale > 0.2) {
+              transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+            }
+            break;
+          case 'zoomIn':
+            transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+            break;
+          case 'clocelise':
+            transform.deg += rotateDeg;
+            break;
+          case 'anticlocelise':
+            transform.deg -= rotateDeg;
+            break;
+        }
+        transform.enableTransition = enableTransition;
+      }
+    },
+    mounted() {
+      this.deviceSupportInstall();
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el);
+      }
+      // add tabindex then wrapper can be focusable via Javascript
+      // focus wrapper so arrow key can't cause inner scroll behavior underneath
+      this.$refs['el-image-viewer__wrapper'].focus();
+    },
+    destroyed() {
+      // if appendToBody is true, remove DOM node after destroy
+      if (this.appendToBody && this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
+      }
+    }
+  };
+  </script>
\ No newline at end of file
diff --git a/src/components/album/image/main.vue b/src/components/album/image/main.vue
new file mode 100644
index 00000000..fd7b8644
--- /dev/null
+++ b/src/components/album/image/main.vue
@@ -0,0 +1,248 @@
+<template>
+    <div class="el-image">
+      <slot v-if="loading" name="placeholder">
+        <div class="el-image__placeholder"></div>
+      </slot>
+      <slot v-else-if="error" name="error">
+        <div class="el-image__error">{{ t('el.image.error') }}</div>
+      </slot>
+      <img
+        v-else
+        class="el-image__inner"
+        v-bind="$attrs"
+        v-on="$listeners"
+        @click="clickHandler"
+        :src="src"
+        :style="imageStyle"
+        :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
+      <template v-if="preview">
+        <image-viewer v-bind="$attrs" :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+      </template>
+    </div>
+  </template>
+  
+  <script>
+    import ImageViewer from './image-viewer';
+    import Locale from 'element-ui/src/mixins/locale';
+    import { on, off, getScrollContainer, isInContainer } from 'element-ui/src/utils/dom';
+    import { isString, isHtmlElement } from 'element-ui/src/utils/types';
+    import throttle from 'throttle-debounce/throttle';
+  
+    const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
+  
+    const ObjectFit = {
+      NONE: 'none',
+      CONTAIN: 'contain',
+      COVER: 'cover',
+      FILL: 'fill',
+      SCALE_DOWN: 'scale-down'
+    };
+  
+    let prevOverflow = '';
+  
+    export default {
+  
+      mixins: [Locale],
+      inheritAttrs: false,
+  
+      components: {
+        ImageViewer
+      },
+  
+      props: {
+        src: String,
+        fit: String,
+        lazy: Boolean,
+        scrollContainer: {},
+        previewSrcList: {
+          type: Array,
+          default: () => []
+        },
+        zIndex: {
+          type: Number,
+          default: 2000
+        },
+        initialIndex: Number
+      },
+  
+      data() {
+        return {
+          loading: true,
+          error: false,
+          show: !this.lazy,
+          imageWidth: 0,
+          imageHeight: 0,
+          showViewer: false
+        };
+      },
+  
+      computed: {
+        imageStyle() {
+          const { fit } = this;
+          if (!this.$isServer && fit) {
+            return isSupportObjectFit()
+              ? { 'object-fit': fit }
+              : this.getImageStyle(fit);
+          }
+          return {};
+        },
+        alignCenter() {
+          return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
+        },
+        preview() {
+          const { previewSrcList } = this;
+          return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+        },
+        imageIndex() {
+          let previewIndex = 0;
+          const initialIndex = this.initialIndex;
+          if (initialIndex >= 0) {
+            previewIndex = initialIndex;
+            return previewIndex;
+          }
+          const srcIndex = this.previewSrcList.indexOf(this.src);
+          if (srcIndex >= 0) {
+            previewIndex = srcIndex;
+            return previewIndex;
+          }
+          return previewIndex;
+        }
+      },
+  
+      watch: {
+        src(val) {
+          this.show && this.loadImage();
+        },
+        show(val) {
+          val && this.loadImage();
+        }
+      },
+  
+      mounted() {
+        if (this.lazy) {
+          this.addLazyLoadListener();
+        } else {
+          this.loadImage();
+        }
+      },
+  
+      beforeDestroy() {
+        this.lazy && this.removeLazyLoadListener();
+      },
+  
+      methods: {
+        loadImage() {
+          if (this.$isServer) return;
+  
+          // reset status
+          this.loading = true;
+          this.error = false;
+  
+          const img = new Image();
+          img.onload = e => this.handleLoad(e, img);
+          img.onerror = this.handleError.bind(this);
+  
+          // bind html attrs
+          // so it can behave consistently
+          Object.keys(this.$attrs)
+            .forEach((key) => {
+              const value = this.$attrs[key];
+              img.setAttribute(key, value);
+            });
+          img.src = this.src;
+        },
+        handleLoad(e, img) {
+          this.imageWidth = img.width;
+          this.imageHeight = img.height;
+          this.loading = false;
+          this.error = false;
+        },
+        handleError(e) {
+          this.loading = false;
+          this.error = true;
+          this.$emit('error', e);
+        },
+        handleLazyLoad() {
+          if (isInContainer(this.$el, this._scrollContainer)) {
+            this.show = true;
+            this.removeLazyLoadListener();
+          }
+        },
+        addLazyLoadListener() {
+          if (this.$isServer) return;
+  
+          const { scrollContainer } = this;
+          let _scrollContainer = null;
+  
+          if (isHtmlElement(scrollContainer)) {
+            _scrollContainer = scrollContainer;
+          } else if (isString(scrollContainer)) {
+            _scrollContainer = document.querySelector(scrollContainer);
+          } else {
+            _scrollContainer = getScrollContainer(this.$el);
+          }
+  
+          if (_scrollContainer) {
+            this._scrollContainer = _scrollContainer;
+            this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
+            on(_scrollContainer, 'scroll', this._lazyLoadHandler);
+            this.handleLazyLoad();
+          }
+        },
+        removeLazyLoadListener() {
+          const { _scrollContainer, _lazyLoadHandler } = this;
+  
+          if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
+  
+          off(_scrollContainer, 'scroll', _lazyLoadHandler);
+          this._scrollContainer = null;
+          this._lazyLoadHandler = null;
+        },
+        /**
+         * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
+         */
+        getImageStyle(fit) {
+          const { imageWidth, imageHeight } = this;
+          const {
+            clientWidth: containerWidth,
+            clientHeight: containerHeight
+          } = this.$el;
+  
+          if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
+  
+          const imageAspectRatio = imageWidth / imageHeight;
+          const containerAspectRatio = containerWidth / containerHeight;
+  
+          if (fit === ObjectFit.SCALE_DOWN) {
+            const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+            fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+          }
+  
+          switch (fit) {
+            case ObjectFit.NONE:
+              return { width: 'auto', height: 'auto' };
+            case ObjectFit.CONTAIN:
+              return (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };
+            case ObjectFit.COVER:
+              return (imageAspectRatio < containerAspectRatio) ? { height: 'auto' } : { width: 'auto' };
+            default:
+              return {};
+          }
+        },
+        clickHandler() {
+          // don't show viewer when preview is false
+          if (!this.preview) {
+            return;
+          }
+          // prevent body scroll
+          prevOverflow = document.body.style.overflow;
+          document.body.style.overflow = 'hidden';
+          this.showViewer = true;
+        },
+        closeViewer() {
+          document.body.style.overflow = prevOverflow;
+          this.showViewer = false;
+        }
+      }
+    };
+  </script>
\ No newline at end of file
diff --git a/src/components/album/cover.vue b/src/router/cover.vue
similarity index 98%
rename from src/components/album/cover.vue
rename to src/router/cover.vue
index a1824e7c..695e46f3 100644
--- a/src/components/album/cover.vue
+++ b/src/router/cover.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 <script>
-import InkImg from "./InkImg";
+import InkImg from "@/components/album/InkImg";
 
 
 import axios from "axios";
diff --git a/src/components/album/images.vue b/src/router/images.vue
similarity index 97%
rename from src/components/album/images.vue
rename to src/router/images.vue
index 4243da47..bba6a7b1 100644
--- a/src/components/album/images.vue
+++ b/src/router/images.vue
@@ -48,7 +48,7 @@
   </div>
 </template>
 <script>
-import InkImg from "./InkImg";
+import InkImg from "@/components/album/InkImg";
 
 import axios from "axios";
 
@@ -84,6 +84,7 @@ export default {
     srcList() {
       return this.covers.map(
         (r) =>
+         r.download_url.indexOf('@1e_1c.webp')!=-1?r.download_url.replace('@1e_1c.webp','') : 
           // `https://gitraw.inkroom.cn/${process.env.AUTHOR}/${process.env.REPO}/${process.env.BRANCH}/${encodeURI(r.path)}`
           `${location.protocol}//image.inkroom.cn/raw/${encodeURI(r.path)}`
       );
diff --git a/src/router/index.js b/src/router/index.js
index fdf1d03c..4c11cbc1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-import Album from '@/components/album/cover'
-import Images from '@/components/album/images';
+import Album from './cover'
+import Images from './images';
 Vue.use(VueRouter)
 
 const routes = [