✨feat: Add video play icon and update styles

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

@@ -1,7 +1,7 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-                :leave-active-class="proxy?.animate.searchAnimate.leave">
+      :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">
@@ -52,19 +52,18 @@
             <el-form-item label="分类" prop="tag">
               <el-select v-model="queryParams.tag" style="width: 150px" placeholder="请选择分类" clearable>
                 <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label"
-                           :value="dict.value" />
+                  :value="dict.value" />
               </el-select>
             </el-form-item>
             <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 />
+                :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择归属目录"
+                check-strictly @change="handleQuery" style="width: 200px" clearable />
             </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"
-                              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
+                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -108,10 +107,11 @@
             </div>
             <div v-else-if="scope.row.type === 2">
               <!-- 视频类型 -->
-              <!--
-                            <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" @click="viewVideo(scope.row.url)" />
-              -->
-              <el-icon class="VideoPlay" @click="viewVideo(scope.row.screenshot)"></el-icon>
+              <!-- <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" -->
+              <!-- @click="viewVideo(scope.row.url)" /> -->
+              <el-icon class="VideoPlay" @click="viewVideo(scope.row.screenshot)" size="40" style="cursor: pointer">
+                <VideoPlay />
+              </el-icon>
             </div>
           </template>
         </el-table-column>
@@ -138,40 +138,40 @@
                         </el-tooltip>-->
             <el-tooltip content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-                         v-hasPermi="['source:minioData:remove']"></el-button>
+                v-hasPermi="['source:minioData:remove']"></el-button>
             </el-tooltip>
             <el-tooltip content="引用情况" placement="top">
               <el-button link type="primary" icon="List" @click="handleUse(scope.row)"
-                         v-hasPermi="['source:minioData:edit']"></el-button>
+                v-hasPermi="['source:minioData:edit']"></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                  v-model:limit="queryParams.pageSize" @pagination="getList" />
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改文件资源对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" append-to-body
-               :style="{ maxWidth: '90vw', maxHeight: '90vh' }">
+      :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-tree ref="sourceTreeRef" :data="sourceTreeOptions" show-checkbox node-key="id"
-                   :props="{ value: 'id', label: 'name', children: 'children' }" :check-strictly="true"
-                   :default-expand-all="false" @check="handleTreeCheck" style="height: 100%"></el-tree>
+            :props="{ value: 'id', label: 'name', children: 'children' }" :check-strictly="true"
+            :default-expand-all="false" @check="handleTreeCheck" style="height: 100%"></el-tree>
         </el-col>
         <el-col :span="14"
-                style="height: 100%; display: flex; flex-direction: column; overflow: auto; padding-left: 10px">
+          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">
+            style="flex: 1 1 auto; height: 100%; display: flex; flex-direction: column">
             <el-form-item label="分类" prop="tag">
               <el-select v-model="form.tag" placeholder="请选择分类">
                 <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label"
-                           :value="parseInt(dict.value)"></el-option>
+                  :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">
+              style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start">
               <!-- 原始上传组件保留，供参考：
               <smsb-file-upload v-model="form.ossId" />
               -->
@@ -213,7 +213,7 @@
           <el-table-column label="创建时间" align="left" prop="createTime" width="160" />
         </el-table>
         <pagination v-show="transTotal > 0" :total="transTotal" v-model:page="transQueryParams.pageNum"
-                    v-model:limit="transQueryParams.pageSize" @pagination="getTransList" />
+          v-model:limit="transQueryParams.pageSize" @pagination="getTransList" />
       </el-card>
     </el-dialog>
 
@@ -224,7 +224,7 @@
 
     <!-- 引用情况弹窗 -->
     <el-dialog :title="useDialog.title" v-model="useDialog.visible" width="1000px" append-to-body
-               :style="{ height: '850px' }">
+      :style="{ height: '850px' }">
       <el-card shadow="never">
         <el-table v-loading="loading" :data="itemRecordList">
           <el-table-column label="名称" align="left" prop="itemName" />
@@ -243,7 +243,7 @@
           <el-table-column label="创建时间" align="left" prop="createTime" width="150" />
         </el-table>
         <pagination v-show="itemTotal > 0" :total="itemTotal" v-model:page="dialogQueryParams.pageNum"
-                    v-model:limit="dialogQueryParams.pageSize" @pagination="getItemListByFileId" />
+          v-model:limit="dialogQueryParams.pageSize" @pagination="getItemListByFileId" />
       </el-card>
     </el-dialog>
   </div>