添加了手动输入服务地址功能，然后键盘J键弹出，优化了图片显示

xiaoqiu
src/renderer/src/views/index.vue
--- a/src/renderer/src/views/index.vue
查看文件 @c91ef19
+++ b/src/renderer/src/views/index.vue
查看文件 @c91ef19
@@ -5,23 +5,28 @@
     @click="handleOther"
   >
     <!-- 相册展开大小 容器 -->
-    <div id="dragBox">
+    <div id="dragBox" ref="dragBoxDom">
+      <!-- 每一层容器 -->
       <div
         v-for="(item, index) in spanBoxList"
         :key="index"
         class="spinBox"
         :id="`spinBox${index + 1}`"
       >
+        <!-- 每层的图片 -->
         <img
           v-for="(childen, number) in item"
           :src="childen"
+          alt="图片"
           @click.stop="handleClick($event, childen)"
         />
       </div>
-      <div v-show="closeImg" class="fixed-img" :style="{ opacity: fixedOpacity }">
-        <img :src="fixedImg" />
     </div>
   </div>
+
+  <!-- 放大居中图片 -->
+  <div v-show="closeImg" class="fixed-img-box" :style="{ opacity: fixedOpacity }">
+    <img :src="fixedImg" class="fixed-img" />
   </div>
   <!-- 翻页按钮 -->
@@ -44,12 +49,11 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getSignatureList, getUseBg } from '@/api/signature'
 let imgList = import.meta.glob('../assets/img/*.*', { eager: true })
 let imgArr = Object.values(imgList).map((item) => item.default)
-let spanBoxList = ref([])
-let aEls = ref([])
+let spanBoxList = ref([]) // 图片列表
+let aEls = ref([]) // 图片元素
 let radius = ref(760)
 let bgImgUrl = ref('')
-const closeImg = ref(false) // 是否关闭中间图片
-let outDom = ref(null)
+let dragBoxDom = ref(null) // 相册容器
 let startX = ref(0)
 let startY = ref(0)
 let endX = ref(0)
@@ -58,6 +62,7 @@ let tX = ref(0)
 let tY = ref(30)
 let desX = ref(0)
 let desY = ref(0)
+const closeImg = ref(false) // 是否显示中间图片
 const queryParams = ref({
   pageNum: 1,
   pageSize: 60
@@ -65,6 +70,8 @@ const queryParams = ref({
 const server_base = localStorage.getItem('crgx_server')
 const fixedImg = ref('')
 const fixedOpacity = ref(0)
+
+// 随机分布加载图片列表。仅测试使用，后端图片不够情况使用
 function randomGroupWithRepeats(arr, groupCount, groupSize) {
   // 参数校验
   if (!Array.isArray(arr) || arr.length === 0) {
@@ -110,7 +117,7 @@ function init(delayTime) {
     }
   }
 }
-// 获取图片
+// 获取图片元素
 function getSpinBoxDom() {
   for (let i = 0; i < spanBoxList.value.length; i++) {
     let spinDom = document.getElementById(`spinBox${i + 1}`)
@@ -190,27 +197,28 @@ const openServer = () => {
 }
 onMounted(async () => {
+  // 判断是否需要填写服务器地址，本地没有则弹出，手动填写按下字母J
   if (!localStorage.getItem('crgx_server')) {
     return openServer(true)
   }
-
-  const signRes = await getSignatureList()
-  const bgRes = await getUseBg()
+  getImgList()
+  const bgRes = await getUseBg() // 获取背景图片
   bgImgUrl.value = server_base + bgRes.data.path
-  const imgList = signRes.rows?.map((item) => {
-    return `${server_base}${item.path}`
-  })
-  spanBoxList.value = randomGroupWithRepeats(imgList, 3, 20)
   let spinDom1 = document.getElementById('spinBox1')
   getSpinBoxDom()
-  //相册容器
-  outDom.value = document.getElementById('dragBox')
   // 开始旋转动画
-  setTimeout(() => {
+  let timer = setTimeout(() => {
     init()
+    clearTimeout(timer)
   }, 100)
   //鼠标滚动事件
   document.addEventListener('mousewheel', handleMouseWheel)
+  // 监听键盘按下事件
+  document.addEventListener('keydown', (e) => {
+    if (e.key == 'j') {
+      openServer()
+    }
+  })
   //暂停开始旋转
   function playSpin(yes) {
     spinDom1.style.animationPlayState = yes ? 'running' : 'paused'
@@ -219,7 +227,7 @@ onMounted(async () => {
   //鼠标移动事件
   document.onpointerdown = function (e) {
     //清除惯性定时器
-    clearInterval(outDom.value.timer)
+    clearInterval(dragBoxDom.value.timer)
     e = e || ewindow.event
     //鼠标点击位置
     ;(startX.value = e.clientX), (startY.value = e.clientY)
@@ -234,22 +242,22 @@ onMounted(async () => {
       desY.value = endY.value - startY.value
       tX.value += desX.value * 0.1
       tY.value += desY.value * 0.1
-      changeRotate(outDom.value)
+      changeRotate(dragBoxDom.value)
       startX.value = endX.value
       startY.value = endY.value
     }
     //鼠标离开时 开始自动旋转
     this.onpointerup = function (e) {
       //惯性旋转
-      outDom.value.timer = setInterval(function () {
+      dragBoxDom.value.timer = setInterval(function () {
         desX.value *= 0.95
         desY.value *= 0.95
         tX.value += desX.value * 0.1
         tY.value += desY.value * 0.1
-        changeRotate(outDom.value)
+        changeRotate(dragBoxDom.value)
         playSpin(false)
         if (Math.abs(desX.value) < 0.5 && Math.abs(desY.value) < 0.5) {
-          clearInterval(outDom.value.timer)
+          clearInterval(dragBoxDom.value.timer)
           playSpin(true)
         }
       })
@@ -259,8 +267,14 @@ onMounted(async () => {
   }
 })
+// 销毁时候取消监听
 onUnmounted(() => {
   document.removeEventListener('mousewheel', handleMouseWheel)
+  document.removeEventListener('keydown', (e) => {
+    if (e.key == 'j') {
+      openServer()
+    }
+  })
 })
 </script>
@@ -298,39 +312,16 @@ onUnmounted(() => {
   transform: rotateX(-10deg);
 }
-.fixed-img {
-  position: fixed;
-  top: 0;
-  background-color: #fff;
-  width: 180px;
-  height: 240px;
-  opacity: 0;
-  transform: scale(3) rotateY(180deg);
-  transition: all 0.5s ease-in-out;
-  img {
-    transform: rotateY(180deg);
-  }
-}
-
 #dragBox {
   transform: rotateX(-30deg);
 }
-
 .spinBox {
-  width: 180px;
-  height: 240px;
+  width: 190px;
+  height: 254px;
   animation: spin 100s infinite linear;
 }
-@for $i from 2 through 7 {
-  $top-value: if($i % 2 == 0, 120% * math.div($i, 2), -120% * math.div($i - 1, 2));
-
-  #spinBox#{$i} {
-    position: absolute;
-    top: $top-value;
-  }
-}
-
+// 每层图片样式
 #dragBox img {
   transform-style: preserve-3d;
   position: absolute;
@@ -339,16 +330,50 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   background: #fff;
-  box-shadow: 0 0 8px #fff;
+  border-radius: 10px;
+  box-shadow:
+    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
+    0 0 0 2px rgb(190, 190, 190),
+    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
+  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   object-fit: contain;
+
   /*倒影 */
   --webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
 }
-#dragBox img:hover {
-  box-shadow: 0 0 15px #fff;
+// 中间显示图片样式
+.fixed-img-box {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  background-color: #fff;
+  max-width: 220px;
+  height: auto;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(3) rotateY(180deg);
+  transition: all 0.5s ease-in-out;
+  img {
+    transform: rotateY(180deg);
+    width: 100%;
+    object-fit: contain;
+  }
+}
+
+// 动态计算每一层的位置 每层间隔自身120%
+@for $i from 2 through 7 {
+  $top-value: if($i % 2 == 0, 120% * math.div($i, 2), -120% * math.div($i - 1, 2));
+
+  #spinBox#{$i} {
+    position: absolute;
+    top: $top-value;
+  }
 }
+// #dragBox img:hover {
+//   box-shadow: 0 0 15px #fff;
+// }
+
 /*自动旋转 */
 @keyframes spin {
   from {
@@ -360,6 +385,7 @@ onUnmounted(() => {
   }
 }
+// 上下页按钮
 .slick-prev-button,
 .slick-next-button {
   position: absolute;