feat: add image enlarge feature

package.json

@@ -72,6 +72,7 @@
     "vite": "^4.3.9",
     "vite-plugin-html-transformer": "^4.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vue-easy-lightbox": "^1.16.0",
     "vue-jest": "^3.0.7"
   }
 }

src/App.vue

@@ -32,6 +32,16 @@
   <teleport to="head">
     <title>{{ title }}</title>
   </teleport>
+
+  <VueEasyLightbox
+    :visible="lightBoxVisible"
+    :imgs="lightBoxImages"
+    :index="lightBoxIndex"
+    :moveDisabled="true"
+    :rotateDisabled="true"
+    :scrollDisabled="false"
+    @hide="onHideLightBox"
+  ></VueEasyLightbox>
 </template>
 
 <script lang="ts">
@@ -46,6 +56,7 @@ import {
 } from 'vue'
 import { useAppStore } from '@/stores/app'
 import { useCommonStore } from '@/stores/common'
+import { useLightBoxStore } from '@/stores/lightbox'
 import { useMetaStore } from '@/stores/meta'
 import { useSearchStore } from './stores/search'
 import HeaderMain from '@/components/Header/src/Header.vue'
@@ -55,6 +66,7 @@ import MobileMenu from '@/components/MobileMenu.vue'
 import Dia from '@/components/Dia.vue'
 import defaultCover from '@/assets/default-cover.jpg'
 import { useI18n } from 'vue-i18n'
+import VueEasyLightbox from 'vue-easy-lightbox'
 
 export default defineComponent({
   name: 'App',
@@ -63,10 +75,12 @@ export default defineComponent({
     Footer,
     Navigator,
     MobileMenu,
-    Dia
+    Dia,
+    VueEasyLightbox
   },
   setup() {
     const appStore = useAppStore()
+    const lightBoxStore = useLightBoxStore()
     const commonStore = useCommonStore()
     const metaStore = useMetaStore()
     const searchStore = useSearchStore()
@@ -128,6 +142,8 @@ export default defineComponent({
       }
     }
 
+    const onHideLightBox = () => lightBoxStore.hideLightBox()
+
     /** Adding copy listner */
     const initialCopyrightScript = () => {
       document.addEventListener('copy', copyEventHandler)
@@ -220,9 +236,13 @@ export default defineComponent({
           --main-gradient: ${appStore.themeConfig.theme.header_gradient_css};
         `
       }),
+      lightBoxVisible: computed(() => lightBoxStore.visible),
+      lightBoxIndex: computed(() => lightBoxStore.index),
+      lightBoxImages: computed(() => lightBoxStore.images),
       appWrapperClass,
       loadingBarClass,
       handleOpenModal,
+      onHideLightBox,
       t
     }
   }

src/components/PageContent.vue

@@ -92,6 +92,7 @@ import { useRoute } from 'vue-router'
 import PostStats from './Post/PostStats.vue'
 import { useAppStore } from '@/stores/app'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
+import useLightBox from '@/hooks/useLightBox'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -122,6 +123,7 @@ export default defineComponent({
     const title = toRefs(props).title
     const postStatsRef = ref<PostStatsExpose>()
     const { enabledCommentPlugin } = useCommentPlugin()
+    const { initializeLightBox } = useLightBox()
 
     watch(
       () => post.value.covers,
@@ -135,6 +137,7 @@ export default defineComponent({
       async value => {
         if (value) {
           await nextTick()
+          initializeLightBox()
           postStatsRef.value?.getCommentCount()
           postStatsRef.value?.getPostView()
         }

src/hooks/useLightBox.ts

@@ -0,0 +1,26 @@
+import { useLightBoxStore } from '@/stores/lightbox'
+
+export default function useLightBox() {
+  const lightBoxStore = useLightBoxStore()
+
+  const showImage = (ele: HTMLImageElement) => {
+    lightBoxStore.openImage(ele)
+  }
+
+  const initializeLightBox = () => {
+    const postHtmlEle = document.querySelector('.post-html')
+
+    if (!postHtmlEle) return
+
+    let imageNodes = postHtmlEle.querySelectorAll('img')
+    for (let i = 0; i < imageNodes.length; i++) {
+      console.log(imageNodes[i].src)
+      lightBoxStore.addImage(imageNodes[i].src)
+      imageNodes[i].addEventListener('click', function () {
+        showImage(this)
+      })
+    }
+  }
+
+  return { initializeLightBox }
+}

src/shims-vue.d.ts

@@ -4,3 +4,9 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' {
+  import VueEasyLightbox from 'vue-easy-lightbox'
+  export * from 'vue-easy-lightbox'
+  export default VueEasyLightbox
+}

src/stores/lightbox.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+
+interface State {
+  images: string[]
+  index: number
+  visible: boolean
+}
+
+export const useLightBoxStore = defineStore({
+  // id is the name of the store
+  // it is used in devtools and allows restoring state
+  id: 'lightBoxStore',
+  state: (): State => ({
+    images: [],
+    index: 0,
+    visible: false
+  }),
+  getters: {},
+  actions: {
+    addImage(image: string) {
+      this.images.push(image)
+    },
+    setImages(images: string[]): void {
+      this.images = images
+    },
+    openImage(imageEle: HTMLImageElement) {
+      this.index = this.images.indexOf(imageEle.src)
+      this.visible = true
+    },
+    hideLightBox() {
+      this.visible = false
+    }
+  }
+})

src/styles/components/article.scss

@@ -157,6 +157,9 @@
 
 .post-html {
   @apply bg-ob-deep-800 p-4 lg:p-14 rounded-2xl shadow-xl mb-8 lg:mb-0;
+  img {
+    @apply cursor-zoom-in hover:opacity-60 transition-all;
+  }
   h1,
   h2,
   h3,

src/views/Post.vue

@@ -188,6 +188,7 @@ import { useCommonStore } from '@/stores/common'
 import SvgIcon, { SvgTypes } from '@/components/SvgIcon/index.vue'
 import PostStats from '@/components/Post/PostStats.vue'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
+import useLightBox from '@/hooks/useLightBox'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -219,6 +220,7 @@ export default defineComponent({
     const loading = ref(true)
     const postStatsRef = ref<PostStatsExpose>()
     const { enabledCommentPlugin } = useCommentPlugin()
+    const { initializeLightBox } = useLightBox()
 
     const fetchData = async () => {
       loading.value = true
@@ -245,6 +247,7 @@ export default defineComponent({
         )
       }
       await nextTick()
+      initializeLightBox()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
       Prism.highlightAll()