✨(component): layer.photos 新增缩略图thumb选项

package/document-layer/src/document/zh-CN/demo.md

@@ -286,6 +286,7 @@ const openRight = function() {
    <button @click="signleImg">图片查看</button>
    <button @click="signleImg2">图片标题</button>
    <button @click="groupImg">图片分组</button>
+   <button @click="groupImg2">带缩略图</button>
 </template>
 
 <script>
@@ -307,6 +308,22 @@ const groupImg = function() {
     ]
   })
 }
+const groupImg2 = function() {
+  layer.photos({
+    imgList:[
+      { 
+        src:'http://www.pearadmin.com/assets/images/un8.svg', 
+        alt:'图片1',
+        thumb:'http://www.pearadmin.com/assets/images/un8.svg'
+      },
+      { 
+        src:'http://www.pearadmin.com/assets/images/un32.svg', 
+        alt:'图片2',
+        thumb:'http://www.pearadmin.com/assets/images/un32.svg'
+      }
+    ]
+  })
+}
 </script>
 :::
 

package/document-layer/src/document/zh-CN/help.md

@@ -24,7 +24,7 @@
 | shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
 | shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
 | isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
-| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
+| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选',thumb:'缩略图可选'}] | - | - |
 | startIndex | 图片初始浏览索引 | number | 0 | - |
 | full | 最大化回调 | function | - | - |
 | min | 最小化回调 | function | -  | - |

package/layer/src/component/Photos.vue

@@ -16,11 +16,16 @@
       </span>
       <div
         class="layui-layer-imgbar"
-        style="display: block"
         v-if="imgList.length > 1 || imgList[index].alt"
         :style="{ opacity: showLayerImgBar ? 1 : 0 }"
       >
-        <span class="layui-layer-imgtit">
+        <div class="thumb-row" v-if="ifSetThumb">
+          <div class="thumb-box" v-for="(item,i) in imgList" :key="'thumb-box'+i" @click="index=i">
+            <img :src="item.thumb" />
+          </div>
+          <div class="thumb-box-border" :style="{left:`calc(calc( calc(100% - ${100*imgList.length}px) / 2) + ${index*100}px)`}"></div>
+        </div>
+        <span class="layui-layer-imgtit" v-else>
           <span v-if="imgList[index].alt">{{ imgList[index].alt }}</span>
           <em v-if="imgList.length > 1"
             >{{ index + 1 }} / {{ imgList.length }}</em
@@ -36,10 +41,10 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { watch, ref, onMounted, nextTick } from "vue";
+import { watch, ref, onMounted, nextTick, computed } from "vue";
 
 export interface LayPhotoProps {
-  imgList: { src: string; alt: string }[];
+  imgList: { src: string; alt: string,thumb:string }[];
   startIndex: number;
 }
 const emit = defineEmits(["resetCalculationPohtosArea"]);
@@ -70,4 +75,14 @@ onMounted(() => {
     showLayerImgBar.value = true;
   });
 });
+
+const ifSetThumb=computed(()=>{
+  let res=false;
+  props.imgList.forEach(e=>{
+    if(e.thumb){
+      res=true;
+    }
+  });
+  return res;
+})
 </script>

package/layer/src/component/index.vue

@@ -94,7 +94,7 @@ export interface LayModalProps {
   isMessage?: boolean;
   appContext?: any;
   startIndex?: number;
-  imgList?: { src: string; alt: string }[];
+  imgList?: { src: string; alt: string,thumb:string }[];
   min?: Function;
   full?: Function;
   restore?: Function;

package/layer/src/theme/index.css

@@ -1173,6 +1173,39 @@ html #layuicss-layer {
   padding-left: 10px;
   font-style: normal;
 }
+.layui-layer-imgbar{
+  display: flex;min-height: 40px;height: auto;flex-wrap: wrap;justify-content: center;
+}
+.layui-layer-imgbar .thumb-row{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-self: center;
+}
+.layui-layer-imgbar .thumb-box{
+  width:100px;
+  height:100px;
+  margin:0px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.layui-layer-imgbar .thumb-box-border{
+  position: absolute;
+  top: 0;
+  transition: all 0.2s ease-in-out;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #5fb878;
+  box-sizing: border-box;
+
+}
+.layui-layer-imgbar img{
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
 
 @-webkit-keyframes layer-bounceOut {
   100% {

package/layer/src/utils/index.ts

@@ -289,7 +289,7 @@ export async function calculatePhotosArea(
 
   function area(img: { width: number; height: number }) {
     var imgarea = [img.width, img.height];
-    var winarea = [window.innerWidth - 100, window.innerHeight - 100];
+    var winarea = [window.innerWidth - 250, window.innerHeight - 250];
     //如果 实际图片的宽或者高比 屏幕大（那么进行缩放）
     if (imgarea[0] > winarea[0] || imgarea[1] > winarea[1]) {
       let wh = [imgarea[0] / winarea[0], imgarea[1] / winarea[1]]; //取宽度缩放比例、高度缩放比例