fix:文件上传页面数据显示显示优化

smsb-plus-ui/src/views/smsb/minioData/index.vue

@@ -3,43 +3,51 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
       :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover" :style="{ height: '70px' }">
-          <el-row :gutter="20" align="middle">
+        <el-card shadow="hover" class="statistic-card">
+          <el-row :gutter="20" justify="space-between">
             <!-- 内容总数 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="totalNum">
-                <template #title>
-                  <div style="display: inline-flex; align-items: center">文件总数</div>
+            <el-col :span="6">
+              <el-statistic :value="totalNum" class="statistic-item">
+                <template #prefix>
+                  <div class="statistic-icon total-icon">
+                    <el-icon><Collection /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
             <!-- 图片总数 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="imageNum">
-                <template #title>
-                  <div style="display: inline-flex; align-items: center">图片总数</div>
+            <el-col :span="6">
+              <el-statistic :value="imageNum" class="statistic-item">
+                <template #prefix>
+                  <div class="statistic-icon image-icon">
+                    <el-icon><PictureFilled /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
             <!-- 视频总数 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="videoNum">
-                <template #title>
-                  <div style="display: inline-flex; align-items: center">视频总数</div>
+            <el-col :span="6">
+              <el-statistic :value="videoNum" class="statistic-item">
+                <template #prefix>
+                  <div class="statistic-icon video-icon">
+                    <el-icon><VideoPlay /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
             <!-- 其它文件 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="otherNum">
-                <template #title>
-                  <div style="display: inline-flex; align-items: center">其它</div>
+            <el-col :span="6">
+              <el-statistic :value="otherNum" class="statistic-item">
+                <template #prefix>
+                  <div class="statistic-icon other-icon">
+                    <el-icon><Files /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
           </el-row>
         </el-card>
-        <el-card shadow="hover" :style="{ marginTop: '10px', height: '80px' }">
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '70px' }">
           <div class="form-wrapper">
             <div class="form-container">
               <el-form ref="queryFormRef" :model="queryParams" style="margin-top: 10px" :inline="true" label-width="0px">
@@ -166,12 +174,12 @@
     <el-dialog :title="dialog.title" v-model="dialog.visible" append-to-body
       :style="{ maxWidth: '90vw', maxHeight: '90vh' }">
       <el-row :gutter="20" style="display: flex">
-        <el-col :span="10" style="height: 100%; overflow: auto; border-right: 1px solid #eee; padding-right: 10px">
+        <el-col :span="7" style="height: 100%; overflow: auto; border-right: 1px solid #eee; padding-right: 10px">
           <el-tree ref="sourceTreeRef" :data="sourceTreeOptions" :model="form.sourceTreeIds" show-checkbox node-key="id"
             :props="{ value: 'id', label: 'name', children: 'children' }" :check-strictly="true"
             :default-expand-all="true" @check="handleTreeCheck" style="height: 100%"></el-tree>
         </el-col>
-        <el-col :span="14"
+        <el-col :span="17"
           style="height: 100%; display: flex; flex-direction: column; overflow: auto; padding-left: 10px">
           <el-form ref="minioDataFormRef" :model="form" :rules="rules" label-width="80px"
             style="flex: 1 1 auto; height: 100%; display: flex; flex-direction: column">
@@ -181,11 +189,9 @@
                   :value="parseInt(dict.value)"></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label=""
-              style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start">
+            <el-form-item label="" style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start">
               <!-- 原始上传组件保留，供参考：
-              <smsb-file-upload v-model="form.ossId" />
-              -->
+              <smsb-file-upload v-model="form.ossId" />-->
               <!-- 替换为新版上传组件 SmsbFileUploader -->
               <SmsbFileUploader ref="fileUploaderRef" v-model="form.ossId" />
             </el-form-item>
@@ -466,7 +472,7 @@ const handleSelectionChange = (selection: MinioDataVO[]) => {
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = '添加文件资源';
+  dialog.title = '文件上传';
   form.value.sourceTreeIds = null;
 };
 
@@ -611,4 +617,88 @@ onMounted(() => {
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
 }
+.statistic-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #ebeef5; /* 添加边框 */
+  height: 100px;
+}
+
+.statistic-item {
+  text-align: center;
+  padding: 15px 0;
+}
+
+.statistic-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.statistic-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  color: white;
+  font-size: 18px;
+}
+
+.total-icon {
+  background: linear-gradient(135deg, #409eff, #2282ff);
+  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
+}
+
+.image-icon {
+  background: linear-gradient(135deg, #67c23a, #48ab1f);
+  box-shadow: 0 4px 8px rgba(103, 194, 58, 0.3);
+}
+
+.video-icon {
+  background: linear-gradient(135deg, #e6a23c, #d48c1f);
+  box-shadow: 0 4px 8px rgba(230, 162, 60, 0.3);
+}
+
+.other-icon {
+  background: linear-gradient(135deg, #909399, #73767a);
+  box-shadow: 0 4px 8px rgba(144, 147, 153, 0.3);
+}
+
+:deep(.statistic-item .el-statistic__content) {
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 5px;
+  color: #303133;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  :deep(.el-col) {
+    flex: 0 0 50%;
+    max-width: 50%;
+    margin-bottom: 10px;
+  }
+
+  :deep(.el-row) {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 768px) {
+  :deep(.el-col) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .statistic-card {
+    padding: 10px 0;
+  }
+}
 </style>