@xilonglab/vue-main 1.2.7 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xilonglab/vue-main",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "xilong vue main",
   "main": "packages/index.js",
   "scripts": {

package/packages/button/XlAsyncButton.vue

@@ -55,13 +55,13 @@ defineExpose({ click })
 
 
 <template>
-    <el-button class="xl-button xl-async-button" ref="btnRef" :size="size" :type="type" :disabled="disabled" :loading="loading"
+    <xl-button class="xl-async-button" ref="btnRef" :size="size" :type="type" :disabled="disabled" :loading="loading"
         :icon="icon" @click="handleClick">
         <span v-if="!loading">
             {{ l }}
             <slot />
         </span>
-    </el-button>
+    </xl-button>
 </template>
 
 

package/packages/button/XlButton.vue

@@ -41,4 +41,190 @@ function handleClick(event) {
 </template>
 
 
-<style lang="less"></style>
+<style lang="less">
+.xl-button {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 5px;
+  font-weight: 500;
+  
+  // 默认按钮科技感样式
+  &.el-button--default {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border: 1px solid #dee2e6;
+    color: #495057;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    
+    &:hover {
+      background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+  
+  // 主要按钮科技感样式
+  &.el-button--primary {
+    background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
+    border: 1px solid #409eff;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #337ecc 0%, #2b6cb0 100%);
+      box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+    }
+  }
+  
+  // 成功按钮科技感样式
+  &.el-button--success {
+    background: linear-gradient(135deg, #67c23a 0%, #529b2e 100%);
+    border: 1px solid #67c23a;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #529b2e 0%, #4a7c59 100%);
+      box-shadow: 0 4px 16px rgba(103, 194, 58, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
+    }
+  }
+  
+  // 警告按钮科技感样式
+  &.el-button--warning {
+    background: linear-gradient(135deg, #e6a23c 0%, #d4941e 100%);
+    border: 1px solid #e6a23c;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #d4941e 0%, #b8860b 100%);
+      box-shadow: 0 4px 16px rgba(230, 162, 60, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
+    }
+  }
+  
+  // 危险按钮科技感样式
+  &.el-button--danger {
+    background: linear-gradient(135deg, #f56c6c 0%, #e53e3e 100%);
+    border: 1px solid #f56c6c;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+      box-shadow: 0 4px 16px rgba(245, 108, 108, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
+    }
+  }
+  
+  // 信息按钮科技感样式
+  &.el-button--info {
+    background: linear-gradient(135deg, #909399 0%, #73767a 100%);
+    border: 1px solid #909399;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #73767a 0%, #5a5c5e 100%);
+      box-shadow: 0 4px 16px rgba(144, 147, 153, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
+    }
+  }
+  
+  // 禁用状态
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+    
+    &:hover {
+      transform: none !important;
+      box-shadow: none !important;
+    }
+  }
+  
+  // 加载状态
+  &.is-loading {
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      animation: shimmer 1.5s infinite;
+    }
+  }
+  
+  // 发光效果（用于特殊场景）
+  &.xl-button--glow {
+    &::after {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      background: inherit;
+      border-radius: inherit;
+      filter: blur(4px);
+      opacity: 0.3;
+      z-index: -1;
+    }
+  }
+}
+
+// 闪烁动画
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .xl-button {
+    font-size: 14px;
+    padding: 8px 16px;
+  }
+}
+</style>

package/packages/dialog/XlDialog.vue

@@ -89,25 +89,59 @@ defineExpose({ show })
         border-radius: 7px 7px 0 0;
         padding: 14px 20px 10px;
         margin: 0!important;
-        background: transparent linear-gradient(90deg, #073052 0%, rgb(100, 100, 100) 100%) 0% 0% no-repeat padding-box !important;
+        background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #047857 100%) !important;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: 
+                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
+                linear-gradient(180deg, rgba(255,255,255,0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+            opacity: 0.3;
+            pointer-events: none;
+        }
 
         .el-dialog__headerbtn {
             top: 14px;
+            right: 16px;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 1px solid rgba(255,255,255,0.3);
+            background: rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+
+            &:hover {
+                background: rgba(255,255,255,0.2);
+                border-color: rgba(255,255,255,0.5);
+                transform: scale(1.05);
+            }
+
+            .el-dialog__close {
+                color: white !important;
+                font-size: 14px;
+                font-weight: bold;
+            }
         }
 
-        .el-dialog__title,
-        .el-dialog__close {
-            color: rgb(245, 245, 245) !important;
+        .el-dialog__title {
+            color: white !important;
+            font-weight: 500;
+            font-size: 16px;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
         }
-
-        .el-dialog__headerbtn {
-            top: 3px !important;
-        }
-
     }
 
     .el-dialog__body {
         padding: 10px 10px 5px 10px;
+        background-color: #f8f9fa !important;
     }
 }
 </style>

package/packages/dialog/XlImagePreviewDialog.vue

@@ -1,36 +1,504 @@
 <script setup>
 defineOptions({ name: "XlImagePreviewDialog" })
 
-import { ref } from 'vue'
-
+import { ref, computed, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import { 
+    ZoomIn, 
+    ZoomOut, 
+    Refresh, 
+    RefreshRight, 
+    FullScreen, 
+    Download, 
+    Loading, 
+    Picture 
+} from '@element-plus/icons-vue'
 
 const props = defineProps({
     url: {
         type: String,
         default: ''
+    },
+    title: {
+        type: String,
+        default: '图片预览'
+    },
+    showToolbar: {
+        type: Boolean,
+        default: true
+    },
+    allowDownload: {
+        type: Boolean,
+        default: true
+    },
+    allowFullscreen: {
+        type: Boolean,
+        default: true
     }
 })
 
+const emit = defineEmits(['close', 'download'])
+
 const visible = ref(false)
+const loading = ref(false)
+const error = ref(false)
+const scale = ref(1)
+const rotation = ref(0)
+const isFullscreen = ref(false)
+const imageLoaded = ref(false)
 
+// 计算样式
+const imageStyle = computed(() => ({
+    transform: `scale(${scale.value}) rotate(${rotation.value}deg)`,
+    transition: 'transform 0.3s ease'
+}))
 
-defineExpose({
-    show() {
-        visible.value = true
+// 计算缩放百分比
+const zoomPercentage = computed(() => {
+    const scaleValue = scale.value || 1
+    return Math.round(scaleValue * 100)
+})
+
+// 显示对话框
+const show = () => {
+    visible.value = true
+    resetImageState()
+}
+
+// 隐藏对话框
+const hide = () => {
+    visible.value = false
+    emit('close')
+}
+
+// 重置图片状态
+const resetImageState = () => {
+    scale.value = 1
+    rotation.value = 0
+    isFullscreen.value = false
+    imageLoaded.value = false
+    error.value = false
+}
+
+// 图片加载完成
+const onImageLoad = () => {
+    loading.value = false
+    imageLoaded.value = true
+    error.value = false
+}
+
+// 图片加载失败
+const onImageError = () => {
+    loading.value = false
+    error.value = true
+    ElMessage.error('图片加载失败')
+}
+
+// 图片开始加载
+const onImageLoadStart = () => {
+    loading.value = true
+    error.value = false
+}
+
+// 缩放功能
+const zoomIn = () => {
+    const currentScale = scale.value || 1
+    if (currentScale < 3) {
+        scale.value = Math.min(3, currentScale + 0.2)
     }
+}
+
+const zoomOut = () => {
+    const currentScale = scale.value || 1
+    if (currentScale > 0.2) {
+        scale.value = Math.max(0.2, currentScale - 0.2)
+    }
+}
+
+const resetZoom = () => {
+    scale.value = 1
+}
+
+// 旋转功能
+const rotate = () => {
+    rotation.value += 90
+}
+
+// 全屏切换
+const toggleFullscreen = () => {
+    isFullscreen.value = !isFullscreen.value
+}
+
+// 下载图片
+const downloadImage = () => {
+    if (!props.url) return
+    
+    const link = document.createElement('a')
+    link.href = props.url
+    link.download = `image_${Date.now()}.jpg`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    
+    emit('download', props.url)
+}
+
+// 键盘事件处理
+const handleKeydown = (event) => {
+    if (!visible.value) return
+    
+    switch (event.key) {
+        case 'Escape':
+            hide()
+            break
+        case '+':
+        case '=':
+            zoomIn()
+            break
+        case '-':
+            zoomOut()
+            break
+        case '0':
+            resetZoom()
+            break
+        case 'r':
+        case 'R':
+            rotate()
+            break
+        case 'f':
+        case 'F':
+            toggleFullscreen()
+            break
+    }
+}
+
+// 监听键盘事件
+const addKeyboardListener = () => {
+    document.addEventListener('keydown', handleKeydown)
+}
+
+const removeKeyboardListener = () => {
+    document.removeEventListener('keydown', handleKeydown)
+}
+
+// 监听对话框显示状态
+const watchVisible = () => {
+    if (visible.value) {
+        addKeyboardListener()
+    } else {
+        removeKeyboardListener()
+    }
+}
+
+// 鼠标滚轮缩放
+const handleWheel = (event) => {
+    if (!imageLoaded.value) return
+    
+    event.preventDefault()
+    const currentScale = scale.value || 1
+    const delta = event.deltaY > 0 ? -0.1 : 0.1
+    const newScale = Math.max(0.1, Math.min(3, currentScale + delta))
+    scale.value = newScale
+}
+
+// 暴露方法
+defineExpose({
+    show,
+    hide
 })
-</script>
 
+// 监听visible变化
+watchVisible()
+</script>
 
 <template>
-    <el-dialog class="xl-image-preview-dialog xl-dialog" v-model="visible" width="50%">
-        <el-image :src="url"></el-image>
+    <el-dialog 
+        class="xl-image-preview-dialog" 
+        v-model="visible" 
+        :width="isFullscreen ? '100%' : '80%'"
+        :fullscreen="isFullscreen"
+        :title="title"
+        :show-close="true"
+        :close-on-click-modal="true"
+        :close-on-press-escape="true"
+        @close="hide"
+        @opened="watchVisible"
+        @closed="removeKeyboardListener"
+    >
+        <template #header>
+            <div class="dialog-header">
+                <span class="dialog-title">{{ title }}</span>
+                <div class="header-actions" v-if="showToolbar">
+                    <el-tooltip content="放大 (Ctrl + +)" placement="bottom">
+                        <el-button 
+                            type="text" 
+                            :icon="ZoomIn" 
+                            @click="zoomIn"
+                            :disabled="!imageLoaded"
+                        />
+                    </el-tooltip>
+                    <el-tooltip content="缩小 (Ctrl + -)" placement="bottom">
+                        <el-button 
+                            type="text" 
+                            :icon="ZoomOut" 
+                            @click="zoomOut"
+                            :disabled="!imageLoaded"
+                        />
+                    </el-tooltip>
+                    <el-tooltip content="重置缩放 (Ctrl + 0)" placement="bottom">
+                        <el-button 
+                            type="text" 
+                            :icon="Refresh" 
+                            @click="resetZoom"
+                            :disabled="!imageLoaded"
+                        />
+                    </el-tooltip>
+                    <el-tooltip content="旋转 (R)" placement="bottom">
+                        <el-button 
+                            type="text" 
+                            :icon="RefreshRight" 
+                            @click="rotate"
+                            :disabled="!imageLoaded"
+                        />
+                    </el-tooltip>
+                    <el-tooltip content="全屏 (F)" placement="bottom" v-if="allowFullscreen">
+                        <el-button 
+                            type="text" 
+                            :icon="FullScreen" 
+                            @click="toggleFullscreen"
+                        />
+                    </el-tooltip>
+                    <el-tooltip content="下载图片" placement="bottom" v-if="allowDownload">
+                        <el-button 
+                            type="text" 
+                            :icon="Download" 
+                            @click="downloadImage"
+                            :disabled="!imageLoaded"
+                        />
+                    </el-tooltip>
+                </div>
+            </div>
+        </template>
+
+        <div class="image-container" :class="{ 'fullscreen': isFullscreen }">
+            <!-- 加载状态 -->
+            <div v-if="loading" class="loading-container">
+                <el-icon class="loading-icon"><Loading /></el-icon>
+                <p>图片加载中...</p>
+            </div>
+
+            <!-- 错误状态 -->
+            <div v-else-if="error" class="error-container">
+                <el-icon class="error-icon"><Picture /></el-icon>
+                <p>图片加载失败</p>
+                <el-button type="primary" @click="onImageLoadStart">重新加载</el-button>
+            </div>
+
+            <!-- 图片显示 -->
+            <div v-else class="image-wrapper" @wheel="handleWheel">
+                <el-image
+                    :src="url"
+                    :style="imageStyle"
+                    :fit="'contain'"
+                    :preview-src-list="[]"
+                    :initial-index="0"
+                    @load="onImageLoad"
+                    @error="onImageError"
+                    @loadstart="onImageLoadStart"
+                    class="preview-image"
+                />
+            </div>
+
+            <!-- 缩放信息 -->
+            <div v-if="imageLoaded && showToolbar" class="zoom-info">
+                {{ zoomPercentage }}%
+            </div>
+        </div>
+
+        <!-- 操作提示 -->
+        <div v-if="showToolbar" class="operation-tips">
+            <span>快捷键：+/- 缩放，0 重置，R 旋转，F 全屏，ESC 关闭</span>
+        </div>
     </el-dialog>
 </template>
-  
 
-  
-<style lang="less"></style>
+<style lang="less" scoped>
+.xl-image-preview-dialog {
+    .dialog-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        
+        .dialog-title {
+            font-size: 16px;
+            font-weight: 500;
+            color: #303133;
+        }
+        
+        .header-actions {
+            display: flex;
+            gap: 8px;
+            
+            .el-button {
+                padding: 4px 8px;
+                font-size: 16px;
+                
+                &:hover {
+                    background-color: #f5f7fa;
+                }
+            }
+        }
+    }
+
+    .image-container {
+        position: relative;
+        min-height: 400px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #f8f9fa;
+        border-radius: 8px;
+        overflow: hidden;
+        
+        &.fullscreen {
+            min-height: calc(100vh - 120px);
+        }
+    }
+
+    .loading-container,
+    .error-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 300px;
+        color: #909399;
+        
+        .loading-icon,
+        .error-icon {
+            font-size: 48px;
+            margin-bottom: 16px;
+        }
+        
+        p {
+            margin: 8px 0 16px;
+            font-size: 14px;
+        }
+    }
+
+    .image-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: grab;
+        
+        &:active {
+            cursor: grabbing;
+        }
+        
+        .preview-image {
+            max-width: 100%;
+            max-height: 100%;
+            border-radius: 4px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            transition: all 0.3s ease;
+            
+            &:hover {
+                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+            }
+        }
+    }
+
+    .zoom-info {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 4px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+    }
+
+    .operation-tips {
+        margin-top: 16px;
+        padding: 8px 16px;
+        background: #f0f9ff;
+        border: 1px solid #b3d8ff;
+        border-radius: 4px;
+        font-size: 12px;
+        color: #409eff;
+        text-align: center;
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .xl-image-preview-dialog {
+        .dialog-header {
+            flex-direction: column;
+            gap: 12px;
+            
+            .header-actions {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+        }
+        
+        .image-container {
+            min-height: 300px;
+        }
+        
+        .operation-tips {
+            font-size: 11px;
+            padding: 6px 12px;
+        }
+    }
+}
+
+// 动画效果
+.image-wrapper {
+    .preview-image {
+        animation: fadeIn 0.3s ease-in-out;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+// 滚动条样式
+.image-container::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.image-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.image-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+.image-container::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+</style>
   
   
   

package/packages/dialog/XlReviewDialog.vue

@@ -84,32 +84,66 @@ defineExpose({ show })
 <style lang="less">
 .xl-review-dialog {
     text-align: left;
-
     border-radius: 10px 10px 7px 7px !important;
     padding: 0;
 
     .el-dialog__header {
         border-radius: 7px 7px 0 0;
         padding: 14px 20px 10px;
-        background: transparent linear-gradient(90deg, #073052 0%, rgb(100, 100, 100) 100%) 0% 0% no-repeat padding-box !important;
+        margin: 0!important;
+        background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #047857 100%) !important;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: 
+                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
+                linear-gradient(180deg, rgba(255,255,255,0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+            opacity: 0.3;
+            pointer-events: none;
+        }
 
         .el-dialog__headerbtn {
             top: 14px;
+            right: 16px;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 1px solid rgba(255,255,255,0.3);
+            background: rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+
+            &:hover {
+                background: rgba(255,255,255,0.2);
+                border-color: rgba(255,255,255,0.5);
+                transform: scale(1.05);
+            }
+
+            .el-dialog__close {
+                color: white !important;
+                font-size: 14px;
+                font-weight: bold;
+            }
         }
 
-        .el-dialog__title,
-        .el-dialog__close {
-            color: rgb(245, 245, 245) !important;
-        }
-
-        .el-dialog__headerbtn {
-            top: 3px !important;
+        .el-dialog__title {
+            color: white !important;
+            font-weight: 500;
+            font-size: 16px;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
         }
-
     }
 
     .el-dialog__body {
         padding: 10px 10px 5px 10px;
+        background-color: #f8f9fa !important;
     }
 }
 </style>