paas-component-library 1.0.36 → 1.0.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "paas-component-library",
   "private": false,
-  "version": "1.0.36",
+  "version": "1.0.38",
   "type": "module",
   "files": [
     "dist",

package/src/components/PaasUpload/index.vue

@@ -6,12 +6,13 @@
       <a-button :loading="isLoading" :disabled="see" ref="uploadButton" v-show="false">
       </a-button>
     </a-upload>
-    <a-button :loading="isLoading" :disabled="see" type="primary" v-bind="$attrs" @click="$refs.uploadButton.$el.click()">
+    <a-button :loading="isLoading" :disabled="see" type="primary" v-bind="$attrs" v-if="closeButton"
+      @click="$refs.uploadButton.$el.click()">
       <paas-icon v-if="icon" :icon="icon" />
-        <span v-if="label">{{ label }}</span>
+      <span v-if="label">{{ label }}</span>
     </a-button>
     <!-- 文件统计信息 -->
-    <div v-if="datas.length > 0 && showHis" class="file-stats">
+    <div v-if="datas.length > 0 && showHis" :style="fileStatsStyle">
       共 {{ datas.length }} 个文件
       <span v-if="paginatedDatas.length < datas.length">
         ，当前显示 {{ paginatedDatas.length }} 个
@@ -19,32 +20,34 @@
     </div>
 
     <!-- 使用卡片式布局展示已上传的文件 -->
-    <div v-if="datas.length > 0 && showHis" class="file-list-container">
-      <div v-for="(file, index) in paginatedDatas" :key="file.newName || index" class="file-card">
-        <div class="file-icon">
+    <div v-if="datas.length > 0 && showHis" :style="fileListContainerStyle">
+      <div v-for="(file, index) in paginatedDatas" :key="file.newName || index" :style="fileCardStyle"
+        @mouseenter="$event.currentTarget.style.borderColor = '#40a9ff'; $event.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.15)'; $event.currentTarget.style.backgroundColor = '#fff'"
+        @mouseleave="$event.currentTarget.style.borderColor = '#d9d9d9'; $event.currentTarget.style.boxShadow = 'none'; $event.currentTarget.style.backgroundColor = '#fafafa'">
+        <div :style="fileIconStyle">
           <FileOutlined v-if="!isImage(file.originalName)" />
           <PictureOutlined v-else />
         </div>
-        <div class="file-info">
-          <div class="file-name" :title="file.originalName">{{ file.originalName }}</div>
-          <div class="file-size" v-if="file.size">{{ formatFileSize(file.size) }}</div>
+        <div :style="fileInfoStyle">
+          <div :style="fileNameStyle" :title="file.originalName">{{ file.originalName }}</div>
+          <div :style="fileSizeStyle" v-if="file.size">{{ formatFileSize(file.size) }}</div>
         </div>
-        <div class="file-actions">
+        <div :style="fileActionsStyle">
           <a-tooltip title="查看">
-            <EyeOutlined @click="previewFile(file)" class="action-icon" />
+            <EyeOutlined @click="previewFile(file)" :style="actionIconStyle" @mouseenter="$event.currentTarget.style.color = '#1890ff'" @mouseleave="$event.currentTarget.style.color = '#595959'" />
           </a-tooltip>
           <a-tooltip title="下载">
-            <DownloadOutlined @click="download(file)" v-show="!see" class="action-icon" />
+            <DownloadOutlined @click="download(file)" v-show="!see" :style="actionIconStyle" @mouseenter="$event.currentTarget.style.color = '#1890ff'" @mouseleave="$event.currentTarget.style.color = '#595959'" />
           </a-tooltip>
           <a-tooltip title="删除">
-            <DeleteOutlined @click="deleteFile(file)" v-show="!see" class="action-icon delete-icon" />
+            <DeleteOutlined @click="deleteFile(file)" v-show="!see" :style="actionIconStyle" @mouseenter="$event.currentTarget.style.color = '#ff4d4f'" @mouseleave="$event.currentTarget.style.color = '#595959'" />
           </a-tooltip>
         </div>
       </div>
     </div>
 
     <!-- 分页控件 -->
-    <div v-if="datas.length > pageSize && showHis" class="pagination-container">
+    <div v-if="datas.length > pageSize && showHis" :style="paginationContainerStyle">
       <a-pagination v-model:current="currentPage" :page-size="pageSize" :total="datas.length" size="small"
         show-less-items />
     </div>
@@ -76,6 +79,7 @@ export default {
     DeleteOutlined
   },
   inheritAttrs: false, // 禁用自动继承，手动控制透传
+  expose: ['openUpload'], // 暴露openUpload方法供外部调用
   inject: {
     labelWidth: {
       from: 'labelWidth',
@@ -87,6 +91,10 @@ export default {
     }
   },
   props: {
+    closeButton: {
+      type: Boolean,
+      default: false,
+    },
     icon: {
       type: String,
       default: "",
@@ -179,53 +187,137 @@ export default {
       fileList: [],
       isLoading: false,
       currentPage: 1,
-      pageSize: 10, // 每页显示10个文件
-      previewVisible: false, // 图片预览模态框可见性
-      previewImage: '', // 预览图片的URL
-      previewTitle: '', // 预览标题
-      isUploading: false // 防止重复上传的标志
+      pageSize: 10,
+      previewVisible: false,
+      previewImage: '',
+      previewTitle: '',
+      isUploading: false,
+      windowWidth: window.innerWidth
     };
   },
   computed: {
     see() {
       return this.$store.forms.see;
     },
-    // 计算当前页要显示的文件
     paginatedDatas() {
       const startIndex = (this.currentPage - 1) * this.pageSize;
       const endIndex = startIndex + this.pageSize;
       return this.datas.slice(startIndex, endIndex);
     },
-    // 根据isOpen属性和multiple属性决定使用哪个上传URL
     currentUploadUrl() {
       let baseUrl = this.isOpen ? this.openUploadUrl : this.uploadUrl;
-      // 如果是多文件上传，在URL末尾添加"s"
       if (this.multiple) {
-        // 检查URL是否已经以"s"结尾
         if (!baseUrl.endsWith('s')) {
-          // 如果URL包含"."，在点之前添加"s"
           if (baseUrl.includes('.')) {
             const lastDotIndex = baseUrl.lastIndexOf('.');
             baseUrl = baseUrl.substring(0, lastDotIndex) + 's' + baseUrl.substring(lastDotIndex);
           } else {
-            // 否则直接在末尾添加"s"
             baseUrl = baseUrl + 's';
           }
         }
       }
       return baseUrl;
     },
-    // 根据isOpen属性决定使用哪个预览URL
     currentShowUrl() {
       return this.isOpen ? this.openShowUrl : this.showUrl;
     },
-    // 根据isOpen属性决定使用哪个下载URL
     currentDownloadUrl() {
       return this.isOpen ? this.openDownloadUrl : this.downloadUrl;
     },
-    // 根据isOpen属性决定使用哪个删除URL
     currentDeleteUrl() {
       return this.isOpen ? this.openDeleteUrl : this.deleteUrl;
+    },
+    isMobile() {
+      return this.windowWidth <= 768;
+    },
+    fileListContainerStyle() {
+      return {
+        marginTop: '8px',
+        maxWidth: '100%'
+      };
+    },
+    fileCardStyle() {
+      const baseStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        padding: this.isMobile ? '8px' : '8px 12px',
+        border: '1px solid #d9d9d9',
+        borderRadius: '6px',
+        marginBottom: '8px',
+        transition: 'all 0.3s',
+        backgroundColor: '#fafafa',
+        boxSizing: 'border-box',
+        flexWrap: 'nowrap'
+      };
+      return baseStyle;
+    },
+    fileIconStyle() {
+      return {
+        fontSize: '24px',
+        color: '#1890ff',
+        marginRight: '12px',
+        flexShrink: 0,
+        width: '24px',
+        height: '24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      };
+    },
+    fileInfoStyle() {
+      return {
+        flex: 1,
+        minWidth: 0,
+        paddingRight: '8px'
+      };
+    },
+    fileNameStyle() {
+      return {
+        fontSize: this.isMobile ? '13px' : '14px',
+        color: '#262626',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        marginBottom: '2px'
+      };
+    },
+    fileSizeStyle() {
+      return {
+        fontSize: '12px',
+        color: '#8c8c8c',
+        marginTop: '0'
+      };
+    },
+    fileActionsStyle() {
+      return {
+        display: 'flex',
+        gap: this.isMobile ? '8px' : '12px',
+        flexShrink: 0,
+        alignItems: 'center'
+      };
+    },
+    actionIconStyle() {
+      return {
+        fontSize: this.isMobile ? '14px' : '16px',
+        color: '#595959',
+        cursor: 'pointer',
+        transition: 'color 0.3s',
+        padding: this.isMobile ? '2px' : '4px'
+      };
+    },
+    fileStatsStyle() {
+      return {
+        marginTop: '8px',
+        fontSize: '12px',
+        color: '#8c8c8c'
+      };
+    },
+    paginationContainerStyle() {
+      return {
+        marginTop: '12px',
+        display: 'flex',
+        justifyContent: 'flex-end'
+      };
     }
   },
   watch: {
@@ -235,7 +327,6 @@ export default {
       },
       immediate: true
     },
-    // 当文件列表发生变化时，重置到第一页
     datas: {
       handler() {
         this.currentPage = 1;
@@ -243,7 +334,19 @@ export default {
       deep: true
     }
   },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  },
   methods: {
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+    },
+    openUpload() {
+      this.$refs.uploadButton.$el.click();
+    },
     pushFile(newValue) {
       if (!newValue) {
         this.datas = [];
@@ -474,123 +577,4 @@ export default {
     }
   },
 };
-</script>
-
-<style scoped>
-.file-list-container {
-  margin-top: 8px;
-  max-width: 100%;
-}
-
-.file-card {
-  display: flex !important;
-  align-items: center !important;
-  padding: 8px 12px;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  margin-bottom: 8px;
-  transition: all 0.3s;
-  background-color: #fafafa;
-  box-sizing: border-box;
-  flex-wrap: nowrap !important;
-}
-
-.file-card > div {
-  display: inline-block !important;
-  vertical-align: middle !important;
-}
-
-.file-card:hover {
-  border-color: #40a9ff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  background-color: #fff;
-}
-
-.file-icon {
-  font-size: 24px;
-  color: #1890ff;
-  margin-right: 12px;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.file-info {
-  flex: 1;
-  min-width: 0;
-  padding-right: 8px;
-}
-
-.file-name {
-  font-size: 14px;
-  color: #262626;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 2px;
-}
-
-.file-size {
-  font-size: 12px;
-  color: #8c8c8c;
-  margin-top: 0;
-}
-
-.file-actions {
-  display: flex;
-  gap: 12px;
-  flex-shrink: 0;
-  align-items: center;
-}
-
-.action-icon {
-  font-size: 16px;
-  color: #595959;
-  cursor: pointer;
-  transition: color 0.3s;
-  padding: 4px;
-}
-
-.action-icon:hover {
-  color: #1890ff;
-}
-
-.delete-icon:hover {
-  color: #ff4d4f;
-}
-
-.file-stats {
-  margin-top: 8px;
-  font-size: 12px;
-  color: #8c8c8c;
-}
-
-.pagination-container {
-  margin-top: 12px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .file-card {
-    padding: 8px;
-  }
-  
-  .file-name {
-    font-size: 13px;
-  }
-  
-  .file-actions {
-    gap: 8px;
-  }
-  
-  .action-icon {
-    font-size: 14px;
-    padding: 2px;
-  }
-}
-</style>
+</script>