style：页面数据统计显示优化

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

@@ -3,29 +3,53 @@
     <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="8" class="statistic-col">
-              <el-statistic :value="totalNum">
+            <el-col :span="8">
+              <el-statistic :value="totalNum" class="statistic-item">
                 <template #title>
-                  <div class="stat-title">节目总数</div>
+                  <div class="statistic-title">
+                    <el-icon><Collection /></el-icon>
+                    <span>节目总数</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon total-icon">
+                    <el-icon><Monitor /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
             <!-- 轮播总数 -->
-            <el-col :span="8" class="statistic-col">
-              <el-statistic :value="lbNum">
+            <el-col :span="8">
+              <el-statistic :value="lbNum" class="statistic-item">
                 <template #title>
-                  <div class="stat-title">轮播总数</div>
+                  <div class="statistic-title">
+                    <el-icon><RefreshRight /></el-icon>
+                    <span>轮播总数</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon carousel-icon">
+                    <el-icon><Refresh /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
             <!-- 分屏总数 -->
-            <el-col :span="8" class="statistic-col">
-              <el-statistic :value="jmNum">
+            <el-col :span="8">
+              <el-statistic :value="jmNum" class="statistic-item">
                 <template #title>
-                  <div class="stat-title">分屏总数</div>
+                  <div class="statistic-title">
+                    <el-icon><Grid /></el-icon>
+                    <span>分屏总数</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon split-icon">
+                    <el-icon><Menu /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
@@ -160,6 +184,12 @@
                     <VideoPlay />
                   </el-icon>
                 </div>
+                <div v-else-if="scope.row.type === 4">
+                  <!-- PPT类型 -->
+                  <el-icon :size="40" @click="downloadFile(scope.row.fileUrl)" style="cursor: pointer;">
+                    <Document />
+                  </el-icon>
+                </div>
               </template>
             </el-table-column>
           </el-table>
@@ -563,7 +593,22 @@ const getFileList = async () => {
     dialogLoading.value = false;
   }
 };
-
+const downloadFile = (fileUrl) => {
+  if (fileUrl) {
+    // 创建一个隐藏的a标签来触发下载
+    const link = document.createElement('a');
+    link.href = fileUrl;
+    link.download = ''; // 浏览器会自动使用URL中的文件名
+    link.target = '_blank';
+    link.style.display = 'none';
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } else {
+    proxy?.$modal.msgError('文件地址不存在，无法下载');
+  }
+};
 /** 多选框选中文件数据 */
 // selection-change 只做新增
 const handleSelectionFile = (selection: MinioDataVO[]) => {
@@ -666,7 +711,7 @@ const handleUpdate = async (row?: ItemVO) => {
       Object.assign(form.value, res.data);
       itemName.value = res.data.itemName || '';
       dialog.visible = true;
-      dialog.title = '修改节目管理';
+      dialog.title = '修改轮播组';
       // 资源ID列表字段，改为fileIdList
       /*const fileIds = Array.isArray(res.data.fileIdList) ? res.data.fileIdList : [];
       if (fileIds.length > 0) {
@@ -855,31 +900,96 @@ onActivated(() => {
   text-align: center;
   font-weight: bold;
 }
+.statistic-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebeef5;
+  padding: 15px 0;
+  height: 120px;
+}
 
-.stat-title {
-  display: inline-flex;
-  align-items: center;
+.statistic-item {
+  text-align: center;
+  padding: 10px 0;
 }
 
-.statistic-col {
+.statistic-title {
   display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.statistic-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
   align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  color: white;
+  font-size: 18px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
 }
 
-.edit-history-param {
-  line-height: 1.8;
-  font-size: 14px;
-  word-break: break-all;
+.total-icon {
+  background: linear-gradient(135deg, #409eff, #2282ff);
 }
 
-.edit-history-user {
-  font-size: 18px;
-  color: #222;
+.carousel-icon {
+  background: linear-gradient(135deg, #e6a23c, #d48c1f);
 }
 
-.edit-history-time {
-  font-size: 14px;
-  color: #999;
+.split-icon {
+  background: linear-gradient(135deg, #67c23a, #48ab1f);
+}
+
+:deep(.statistic-item .el-statistic__content) {
+  font-size: 24px;
+  font-weight: 700;
+  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;
+  }
+
+  .statistic-card {
+    padding: 10px 0;
+  }
+}
+
+@media (max-width: 768px) {
+  :deep(.el-col) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .statistic-title {
+    font-size: 13px;
+  }
+
+  .statistic-icon {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+
+  :deep(.statistic-item .el-statistic__content) {
+    font-size: 20px;
+  }
 }
 </style>

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

@@ -4,38 +4,21 @@
       :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="60">
-            <!-- <el-form-item label="节目ID" prop="programId">
-              <el-input v-model="queryParams.programId" placeholder="请输入节目ID" clearable @keyup.enter="handleQuery" />
-            </el-form-item> -->
-            <el-form-item label="名称" prop="name">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70">
+
+            <el-form-item label="节目名称" prop="name">
               <el-input v-model="queryParams.name" placeholder="请输入节目名称" clearable @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="分辨率" prop="resolutionRatio">
               <el-input v-model="queryParams.resolutionRatio" placeholder="请输入分辨率" clearable
                         @keyup.enter="handleQuery"/>
             </el-form-item>
-            <!-- <el-form-item label="图片地址" prop="imgUrl">
-              <el-input v-model="queryParams.imgUrl" placeholder="请输入图片地址" clearable @keyup.enter="handleQuery" />
-            </el-form-item> -->
-            <!-- <el-form-item label="节目时长" prop="duration">
-              <el-input v-model="queryParams.duration" placeholder="请输入节目时长" clearable @keyup.enter="handleQuery" />
-            </el-form-item> -->
-            <!--            <el-form-item label="所属个人" prop="user">
-                          <el-input v-model="queryParams.user" placeholder="请输入所属个人" clearable @keyup.enter="handleQuery" />
-                        </el-form-item>-->
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
               <el-button type="primary" plain icon="Plus" @click="handleAdd"
                          v-hasPermi="['smsb:itemProgram:add']">新增分屏组
               </el-button>
-<!--              <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
-                         v-hasPermi="['smsb:itemProgram:edit']">修改
-              </el-button>
-              <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-                         v-hasPermi="['smsb:itemProgram:remove']">删除
-              </el-button>-->
             </el-form-item>
           </el-form>
         </el-card>
@@ -43,37 +26,13 @@
     </transition>
 
     <el-card shadow="never">
-      <!--      <template #header>
-              <el-row :gutter="10" class="mb8">
-                <el-col :span="1.5">
-                  <el-button type="primary" plain icon="Plus" @click="handleAdd"
-                    v-hasPermi="['smsb:itemProgram:add']">新增</el-button>
-                </el-col>
-                <el-col :span="1.5">
-                  <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
-                    v-hasPermi="['smsb:itemProgram:edit']">修改</el-button>
-                </el-col>
-                <el-col :span="1.5">
-                  <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-                    v-hasPermi="['smsb:itemProgram:remove']">删除</el-button>
-                </el-col>
-                <el-col :span="1.5">
-                  <el-button type="warning" plain icon="Download" @click="handleExport"
-                    v-hasPermi="['smsb:itemProgram:export']">导出</el-button>
-                </el-col>
-                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-              </el-row>
-            </template>-->
       <div class="table-content">
         <el-table v-loading="loading" :data="itemProgramList" @selection-change="handleSelectionChange">
           <el-table-column label="" width="10" align="center"/>
           <el-table-column label="ID" align="left" prop="id" width="180"/>
           <el-table-column label="节目名称" align="left" prop="name" :show-overflow-tooltip="true"/>
           <el-table-column label="分辨率" align="center" prop="resolutionRatio" width="150"/>
-          <!-- <el-table-column label="图片地址" align="center" prop="imgUrl" /> -->
-          <!-- <el-table-column label="状态" align="center" prop="status" /> -->
-          <!-- <el-table-column label="节目时长" align="center" prop="duration" /> -->
-          <el-table-column label="创建用户" align="left" width="150">
+          <el-table-column label="创建用户" align="left" width="150" :show-overflow-tooltip="true">
             <template #default="scope">
               <span>{{ userNickNameMap[scope.row.user] || scope.row.user || '-' }}</span>
             </template>
@@ -102,22 +61,19 @@
     </el-card>
     <!-- 添加或修改节目信息对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="itemProgramFormRef" :model="form" :rules="rules" label-width="65px">
-        <el-form-item label="名称" prop="name">
+      <el-form ref="itemProgramFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="节目名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入分屏组名称" />
         </el-form-item>
         <el-form-item label="分辨率" prop="resolutionRatio">
           <el-select v-model="form.resolutionRatio" placeholder="请选择分辨率或自定义" filterable allow-create
             :reserve-keyword="true">
             <el-option label="1920x1080" value="1920x1080" />
-            <el-option label="1280x720" value="1280x720" />
+            <el-option label="1080x1920" value="1080x1920" />
             <el-option label="3840x2160" value="3840x2160" />
-            <el-option label="1024x768" value="1024x768" />
+            <el-option label="2160x3840" value="2160x3840" />
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="图片地址" prop="imgUrl">
-          <el-input v-model="form.imgUrl" placeholder="请输入图片地址（可选）" />
-        </el-form-item> -->
       </el-form>
       <template #footer>
         <div class="dialog-footer">

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

@@ -47,7 +47,7 @@
             </el-col>
           </el-row>
         </el-card>
-        <el-card shadow="hover" :style="{ marginTop: '10px', height: '70px' }">
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '75px' }">
           <div class="form-wrapper">
             <div class="form-container">
               <el-form ref="queryFormRef" :model="queryParams" style="margin-top: 10px" :inline="true" label-width="0px">
@@ -69,7 +69,7 @@
                 <el-form-item label="" prop="treeId">
                   <el-tree-select v-model="queryParams.treeId" :data="sourceTreeOptions"
                     :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择归属目录"
-                    check-strictly @change="handleQuery" style="width: 200px" clearable />
+                    check-strictly @change="handleQuery" style="width: 200px" clearable :default-expand-all="true"/>
                 </el-form-item>
                 <el-form-item label="" style="width: 250px">
                   <el-date-picker v-model="dateRangeCreateTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
@@ -629,16 +629,6 @@ onMounted(() => {
   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;

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

@@ -3,8 +3,8 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]" :style="{ marginTop: '10px', height: '60px' }">
         <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="名称" prop="name">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
+            <el-form-item label="目录名称" prop="name">
               <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item>
@@ -40,23 +40,23 @@
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
-        <el-table-column label="名称" prop="name" />
+        <el-table-column label="目录名称" prop="name" />
         <el-table-column label="顺序" align="center" prop="orderNo" />
         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
           <template #default="scope">
             <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['source:sourceTree:edit']" />
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['source:sourceTree:edit']" >修改</el-button>
             </el-tooltip>
             <el-tooltip content="新增" placement="top">
-              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['source:sourceTree:add']" />
+              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['source:sourceTree:add']" >新增</el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['source:sourceTree:remove']" />
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['source:sourceTree:remove']" >删除</el-button>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -214,7 +214,7 @@ const handleAdd = (row?: SourceTreeVO) => {
     form.value.parentId = 0;
   }
   dialog.visible = true;
-  dialog.title = '添加文件目录';
+  dialog.title = '新增';
 };
 
 /** 展开/折叠操作 */
@@ -241,7 +241,7 @@ const handleUpdate = async (row: SourceTreeVO) => {
   const res = await getSourceTree(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = '修改文件目录';
+  dialog.title = '修改';
 };
 
 /** 提交按钮 */