From e903c54a101255f198871ee30b070d76891afd6d Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 02:06:38 +0800
Subject: [PATCH] feat: enhance WechatModal component functionality

---
 src/components/WechatModal.vue | 158 ++++++++++++++++++++++++---------
 1 file changed, 118 insertions(+), 40 deletions(-)

diff --git a/src/components/WechatModal.vue b/src/components/WechatModal.vue
index befea41..67c989f 100644
--- a/src/components/WechatModal.vue
+++ b/src/components/WechatModal.vue
@@ -1,17 +1,25 @@
 <script setup>
-import { ref, watch, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted, computed } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { useTheme } from 'vuetify'
 
 const props = defineProps({
-  show: {
+  modelValue: {
     type: Boolean,
     required: true
   },
   qrCode: {
     type: String,
     required: true,
-    validator: value => value.startsWith('/') || value.startsWith('http')
+    validator: value => {
+      if (!value) return false
+      return (
+        value.startsWith('/') || 
+        value.startsWith('http') ||
+        value.startsWith('data:image') ||
+        value.startsWith('@/')
+      )
+    }
   },
   title: {
     type: String,
@@ -23,7 +31,8 @@ const props = defineProps({
   },
   duration: {
     type: Number,
-    default: 0 // 0表示不自动关闭
+    default: 0,
+    validator: value => value >= 0
   },
   closeOnClickOutside: {
     type: Boolean,
@@ -32,27 +41,48 @@ const props = defineProps({
   closeOnEsc: {
     type: Boolean,
     default: true
+  },
+  showCloseButton: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: 9999
   }
 })
 
-const emit = defineEmits(['update:show', 'closed', 'opened'])
+const emit = defineEmits([
+  'update:modelValue',
+  'closed',
+  'opened',
+  'qr-loaded',
+  'qr-error'
+])
 
 const theme = useTheme()
 const modalRef = ref(null)
+const qrLoaded = ref(false)
 let autoCloseTimer = null
 
+const computedStyles = computed(() => ({
+  zIndex: props.zIndex
+}))
+
 // 关闭模态框
 const closeModal = () => {
   clearTimeout(autoCloseTimer)
-  emit('update:show', false)
+  emit('update:modelValue', false)
   emit('closed')
 }
 
 // 点击外部关闭
 const handleClickOutside = (event) => {
-  if (props.closeOnClickOutside && 
-      modalRef.value && 
-      !modalRef.value.contains(event.target)) {
+  if (
+    props.closeOnClickOutside && 
+    modalRef.value && 
+    !modalRef.value.contains(event.target)
+  ) {
     closeModal()
   }
 }
@@ -73,19 +103,31 @@ const startAutoCloseTimer = () => {
   }
 }
 
+// 图片加载处理
+const handleImageLoad = () => {
+  qrLoaded.value = true
+  emit('qr-loaded')
+  startAutoCloseTimer()
+}
+
+const handleImageError = () => {
+  console.error('微信二维码加载失败')
+  emit('qr-error')
+}
+
 // 监听显示状态变化
-watch(() => props.show, (val) => {
+watch(() => props.modelValue, (val) => {
   if (val) {
-    startAutoCloseTimer()
+    qrLoaded.value = false
     emit('opened')
-    
-    // 禁止背景滚动
     document.body.style.overflow = 'hidden'
+    document.documentElement.style.paddingRight = 
+      window.innerWidth - document.documentElement.clientWidth + 'px'
   } else {
-    // 恢复背景滚动
     document.body.style.overflow = ''
+    document.documentElement.style.paddingRight = ''
   }
-})
+}, { immediate: true })
 
 // 注册事件监听
 useEventListener(document, 'mousedown', handleClickOutside)
@@ -95,15 +137,17 @@ useEventListener(document, 'keydown', handleKeydown)
 onUnmounted(() => {
   clearTimeout(autoCloseTimer)
   document.body.style.overflow = ''
+  document.documentElement.style.paddingRight = ''
 })
 </script>
 
 <template>
   <Transition name="wechat-modal">
     <div 
-      v-if="show"
+      v-if="modelValue"
       class="wechat-modal-mask"
       :class="{ 'dark-mode': theme.global.name.value === 'dark' }"
+      :style="computedStyles"
     >
       <div 
         ref="modalRef"
@@ -115,6 +159,7 @@ onUnmounted(() => {
         <div class="wechat-modal-header">
           <h3 class="modal-title">{{ title }}</h3>
           <button 
+            v-if="showCloseButton"
             class="modal-close-btn"
             @click="closeModal"
             aria-label="关闭微信二维码弹窗"
@@ -129,15 +174,20 @@ onUnmounted(() => {
               :src="qrCode" 
               alt="微信二维码"
               class="qr-code-image"
+              :class="{ 'loaded': qrLoaded }"
               loading="lazy"
-              @load="startAutoCloseTimer"
+              @load="handleImageLoad"
+              @error="handleImageError"
             >
+            <div v-if="!qrLoaded" class="qr-code-loader">
+              <div class="loader-spinner"></div>
+            </div>
           </div>
           <p class="qr-hint">{{ hint }}</p>
         </div>
 
         <div class="wechat-modal-footer">
-          <div class="scan-animation"></div>
+          <div class="scan-animation" v-if="qrLoaded"></div>
           <p class="footer-text">长按识别二维码</p>
         </div>
       </div>
@@ -148,7 +198,7 @@ onUnmounted(() => {
 <style scoped>
 .wechat-modal-mask {
   position: fixed;
-  z-index: 9999;
+  z-index: v-bind('zIndex');
   top: 0;
   left: 0;
   right: 0;
@@ -166,7 +216,7 @@ onUnmounted(() => {
 }
 
 .wechat-modal-container {
-  width: 320px;
+  width: min(320px, 90vw);
   background-color: var(--v-theme-surface);
   border-radius: 12px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
@@ -212,12 +262,15 @@ onUnmounted(() => {
 }
 
 .qr-code-wrapper {
+  position: relative;
   padding: 12px;
   background: white;
   border-radius: 8px;
   display: inline-block;
   margin-bottom: 16px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  min-width: 200px;
+  min-height: 200px;
 }
 
 .qr-code-image {
@@ -225,10 +278,40 @@ onUnmounted(() => {
   height: 200px;
   object-fit: contain;
   display: block;
+  transition: opacity 0.3s ease;
+  opacity: 0;
+  
+  &.loaded {
+    opacity: 1;
+  }
+}
+
+.qr-code-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(var(--v-theme-primary), 0.2);
+  border-top-color: var(--v-theme-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
 .qr-hint {
-  margin: 0;
+  margin: 12px 0 0;
   color: var(--text-secondary);
   font-size: 0.95rem;
   line-height: 1.5;
@@ -246,7 +329,7 @@ onUnmounted(() => {
   top: -30px;
   left: 50%;
   transform: translateX(-50%);
-  width: 220px;
+  width: calc(100% - 40px);
   height: 4px;
   background: linear-gradient(
     to bottom,
@@ -258,7 +341,7 @@ onUnmounted(() => {
 }
 
 .footer-text {
-  margin: 0;
+  margin: 8px 0 0;
   color: var(--v-theme-primary);
   font-size: 0.9rem;
   font-weight: 500;
@@ -270,11 +353,11 @@ onUnmounted(() => {
     opacity: 1;
   }
   80% {
-    top: 190px;
+    top: calc(100% - 30px);
     opacity: 0.8;
   }
   100% {
-    top: 190px;
+    top: calc(100% - 30px);
     opacity: 0;
   }
 }
@@ -295,20 +378,15 @@ onUnmounted(() => {
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
 }
 
-/* 响应式调整 */
-@media (max-width: 480px) {
-  .wechat-modal-container {
-    width: 90%;
-    max-width: 300px;
-  }
-  
-  .qr-code-image {
-    width: 180px;
-    height: 180px;
-  }
-  
-  .scan-animation {
-    width: 200px;
+/* 减少运动偏好设置 */
+@media (prefers-reduced-motion: reduce) {
+  .wechat-modal-container,
+  .wechat-modal-mask,
+  .qr-code-image,
+  .scan-animation,
+  .loader-spinner {
+    transition: none !important;
+    animation: none !important;
   }
 }
-</style>
+</style>
\ No newline at end of file