云文件管理系统上传组件优化

web-vue/src/views/files/index.vue

@@ -821,22 +821,22 @@ const getFileIconColor = (file) => {
 
 .grid-view {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 24px;
-  padding: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  padding: 16px;
   align-content: start;
 }
 
 .file-card {
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 16px;
   border: 1px solid #e4e7ed;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s;
   background: #fff;
-  min-height: 180px;
+  min-height: 140px;
 }
 
 .file-card:hover {
@@ -876,17 +876,23 @@ const getFileIconColor = (file) => {
 
 .file-card-actions {
   display: flex;
-  flex-wrap: nowrap;
-  gap: 6px;
+  gap: 4px;
   justify-content: center;
+  overflow: hidden;
 }
 
 .file-card-actions .el-button {
   font-size: 12px;
+  padding: 4px 8px;
+  min-width: 0;
+}
+
+.file-card-actions .el-button + .el-button {
+  margin-left: 0;
 }
 
 .file-card-actions .el-button span {
-  margin-left: 2px;
+  display: inline;
 }
 
 .pagination-wrapper {