From dcdbab351e2c11aeedd99b4c937347e914160488 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 25 Oct 2023 19:33:03 -0700
Subject: [PATCH] fix(image): fix preview image demo's bug

---
 packages/renderless/src/image-viewer/index.ts |   6 +-
 packages/renderless/src/image/index.ts        |   2 -
 packages/theme/src/image-viewer/index.less    | 194 +++++++++---------
 packages/vue/src/image-viewer/src/pc.vue      |   2 +-
 4 files changed, 102 insertions(+), 102 deletions(-)

diff --git a/packages/renderless/src/image-viewer/index.ts b/packages/renderless/src/image-viewer/index.ts
index e49240f14a..fb763453cd 100644
--- a/packages/renderless/src/image-viewer/index.ts
+++ b/packages/renderless/src/image-viewer/index.ts
@@ -467,10 +467,14 @@ export const getImageWidth =
       }
 
       state.imageList = vm.$refs.viewerItem
-    } else {
+    } else if (mode === 'mobile') {
       imageW = parent.$el.querySelector('.tiny-mobile-image-viewer__canvas').offsetWidth
 
       state.imageList = parent.$el.querySelectorAll('.tiny-mobile-image-viewer__item')
+    } else {
+      imageW = parent.$el.querySelector('.tiny-image-viewer__canvas').offsetWidth
+
+      state.imageList = parent.$el.querySelectorAll('.tiny-image-viewer__img')
     }
 
     state.imageItemWidth = imageW
diff --git a/packages/renderless/src/image/index.ts b/packages/renderless/src/image/index.ts
index 19256dc3f6..6d4cdd9045 100644
--- a/packages/renderless/src/image/index.ts
+++ b/packages/renderless/src/image/index.ts
@@ -45,7 +45,6 @@ export const loadImage =
   () => {
     state.loading = true
     state.error = false
-
     const img = new Image()
 
     img.onload = (event) => api.handleLoad(event, img)
@@ -67,7 +66,6 @@ export const handleLoad =
     state.imageWidth = img.width
     state.imageHeight = img.height
     state.loading = false
-
     emit('load', event)
   }
 
diff --git a/packages/theme/src/image-viewer/index.less b/packages/theme/src/image-viewer/index.less
index a34ecf55be..ec63de376c 100644
--- a/packages/theme/src/image-viewer/index.less
+++ b/packages/theme/src/image-viewer/index.less
@@ -15,122 +15,120 @@
 @import './vars.less';
 
 @image-viewer-prefix-cls: ~'@{css-prefix}image-viewer';
-@image-prefix-cls: ~'@{css-prefix}image';
 
-.@{image-prefix-cls} {
+.@{image-viewer-prefix-cls} {
   .component-css-vars-image-viewer();
-  .@{image-viewer-prefix-cls} {
-    &__wrapper {
-      background: var(--ti-image-viewer-mask-wrap-bg-color);
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-
-    &__btn {
-      position: absolute;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      opacity: var(--ti-image-viewer-btn-opacity);
-      box-sizing: border-box;
-      .user-select(none);
-
-      svg {
-        fill: var(--ti-image-viewer-text-color);
-      }
-    }
 
-    &__close {
-      top: var(--ti-image-viewer-close-top);
-      right: var(--ti-image-viewer-close-right);
-      width: var(--ti-image-viewer-close-width);
-      height: var(--ti-image-viewer-close-height);
-      font-size: var(--ti-image-viewer-close-font-size);
-      background-color: var(--ti-image-viewer-close-bg-color);
+  &__wrapper {
+    background: var(--ti-image-viewer-mask-wrap-bg-color);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 
-      &:hover {
-        cursor: pointer;
-        background-color: var(--ti-image-viewer-close-bg-color-hover);
-      }
+  &__btn {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    opacity: var(--ti-image-viewer-btn-opacity);
+    box-sizing: border-box;
+    .user-select(none);
+
+    svg {
+      fill: var(--ti-image-viewer-text-color);
     }
+  }
 
-    &__canvas {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  &__close {
+    top: var(--ti-image-viewer-close-top);
+    right: var(--ti-image-viewer-close-right);
+    width: var(--ti-image-viewer-close-width);
+    height: var(--ti-image-viewer-close-height);
+    font-size: var(--ti-image-viewer-close-font-size);
+    background-color: var(--ti-image-viewer-close-bg-color);
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--ti-image-viewer-close-bg-color-hover);
     }
+  }
 
-    &__actions {
-      left: 50%;
-      bottom: var(--ti-image-viewer-actions-bottom);
-      transform: translateX(-50%);
-      width: var(--ti-image-viewer-actions-width);
-      height: var(--ti-image-viewer-actions-height);
-      padding: 0 23px;
-      background-color: var(--ti-image-viewer-close-bg-color);
-      border-radius: var(--ti-image-viewer-actions-border-radius);
-    }
+  &__canvas {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-    &__actions-inner {
-      width: 100%;
-      height: 100%;
-      text-align: justify;
-      cursor: default;
-      font-size: var(--ti-image-viewer-actions-inner-font-size);
-      display: flex;
-      align-items: center;
-      justify-content: var(--ti-image-viewer-actions-inner-justify-content);
-
-      svg {
-        fill: var(--ti-image-viewer-actions-inner-text-color);
-        margin-right: 20px;
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
+  &__actions {
+    left: 50%;
+    bottom: var(--ti-image-viewer-actions-bottom);
+    transform: translateX(-50%);
+    width: var(--ti-image-viewer-actions-width);
+    height: var(--ti-image-viewer-actions-height);
+    padding: 0 23px;
+    background-color: var(--ti-image-viewer-close-bg-color);
+    border-radius: var(--ti-image-viewer-actions-border-radius);
+  }
 
-    &__next,
-    &__prev {
-      top: 50%;
-      width: var(--ti-image-viewer-next-width);
-      height: var(--ti-image-viewer-next-height);
-      font-size: var(--ti-image-viewer-next-font-size);
-      background-color: var(--ti-image-viewer-close-bg-color);
+  &__actions-inner {
+    width: 100%;
+    height: 100%;
+    text-align: justify;
+    cursor: default;
+    font-size: var(--ti-image-viewer-actions-inner-font-size);
+    display: flex;
+    align-items: center;
+    justify-content: var(--ti-image-viewer-actions-inner-justify-content);
+
+    svg {
+      fill: var(--ti-image-viewer-actions-inner-text-color);
+      margin-right: 20px;
 
       &:hover {
         cursor: pointer;
-        background-color: var(--ti-image-viewer-close-bg-color-hover);
       }
     }
+  }
 
-    &__prev {
-      transform: translateY(-50%);
-      left: 40px;
+  &__next,
+  &__prev {
+    top: 50%;
+    width: var(--ti-image-viewer-next-width);
+    height: var(--ti-image-viewer-next-height);
+    font-size: var(--ti-image-viewer-next-font-size);
+    background-color: var(--ti-image-viewer-close-bg-color);
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--ti-image-viewer-close-bg-color-hover);
     }
+  }
 
-    &__next {
-      transform: translateY(-50%);
-      right: 40px;
-      text-indent: 2px;
-    }
+  &__prev {
+    transform: translateY(-50%);
+    left: 40px;
+  }
 
-    &__mask {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      opacity: 0.5;
-      background: var(--ti-image-viewer-mask-bg-color);
-    }
+  &__next {
+    transform: translateY(-50%);
+    right: 40px;
+    text-indent: 2px;
+  }
+
+  &__mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+    background: var(--ti-image-viewer-mask-bg-color);
   }
 }
diff --git a/packages/vue/src/image-viewer/src/pc.vue b/packages/vue/src/image-viewer/src/pc.vue
index eef63a7d1b..912679868d 100644
--- a/packages/vue/src/image-viewer/src/pc.vue
+++ b/packages/vue/src/image-viewer/src/pc.vue
@@ -11,7 +11,7 @@
  -->
 <template>
   <transition name="viewer-fade">
-    <div class="tiny-image-viewer__wrapper" :style="{ 'z-index': state.zIndex }" @mousewheel.prevent>
+    <div class="tiny-image-viewer tiny-image-viewer__wrapper" :style="{ 'z-index': state.zIndex }" @mousewheel.prevent>
       <div class="tiny-image-viewer__mask"></div>
       <!-- CLOSE -->
       <span class="tiny-image-viewer__btn tiny-image-viewer__close" @click="hide">