知识库-添加播放图标

src/assets/images/knowledge/play.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28.83" height="28.83" viewBox="0 0 28.83 28.83">
+  <title>bofang </title>
+  <g id="图层_2" data-name="图层 2">
+    <g id="图层_1-2" data-name="图层 1">
+      <g>
+        <path d="M14.42.5A13.92,13.92,0,1,0,28.33,14.42,13.91,13.91,0,0,0,14.42.5Z" style="opacity: 0.7000000000000001"/>
+        <path d="M14.42.5A13.92,13.92,0,1,0,28.33,14.42,13.91,13.91,0,0,0,14.42.5Z" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
+        <path d="M20,15.27,11.85,20a1,1,0,0,1-1.47-.85V9.73a1,1,0,0,1,1.47-.85L20,13.57a1,1,0,0,1,0,1.7Z" style="fill: #fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/layout/components/Navbar.vue

@@ -114,7 +114,7 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <div class="avatar-container right-menu-item hover-effect">
+      <div class="avatar-container right-menu-item">
         <div class="avatar-wrapper">
           <span class="user-nickname" v-if="userInfo.group">
             所属单位:{{ userInfo.group }}

src/views/knowledge/index.vue

@@ -5,23 +5,49 @@
       <el-col :span="6">
         <el-form @submit.native.prevent>
           <el-form-item prop="name">
-            <el-input v-model="queryRightParams.title" placeholder="输入内容过滤" clearable size="small"
+            <el-input
-              @keyup.enter.native="handleRightQuery">
+              v-model="queryRightParams.title"
-              <el-button slot="prepend" icon="el-icon-search" @click="handleRightQuery" />
+              placeholder="输入内容过滤"
-              <el-button slot="append" icon="el-icon-refresh-right" @click="resetRightQuery" />
+              clearable
+              size="small"
+              @keyup.enter.native="handleRightQuery"
+            >
+              <el-button
+                slot="prepend"
+                icon="el-icon-search"
+                @click="handleRightQuery"
+              />
+              <el-button
+                slot="append"
+                icon="el-icon-refresh-right"
+                @click="resetRightQuery"
+              />
             </el-input>
           </el-form-item>
         </el-form>
         <el-menu :default-active="defaultActive" @select="handleSelect">
           <!-- 自定义标签 -->
-          <el-menu-item v-for="(item, index) in cateList" :key="item.id" :index="item.id" class="custom-item">
+          <el-menu-item
+            v-for="(item, index) in cateList"
+            :key="item.id"
+            :index="item.id"
+            class="custom-item"
+          >
             <div class="left">
               <i :class="getBuiltInIcon(index) || 'el-icon-collection-tag'" />
               <span>{{ item.name }}</span>
             </div>
             <div class="right" v-if="item.type == 'user'">
-              <el-button type="text" icon="el-icon-edit" @click.stop="handleEditTag(item)" />
+              <el-button
-              <el-button type="text" icon="el-icon-delete" @click.stop="handleLeftDelete(item)" />
+                type="text"
+                icon="el-icon-edit"
+                @click.stop="handleEditTag(item)"
+              />
+              <el-button
+                type="text"
+                icon="el-icon-delete"
+                @click.stop="handleLeftDelete(item)"
+              />
             </div>
           </el-menu-item>
           <el-menu-item>
@@ -38,62 +64,140 @@
         <el-card shadow="never">
           <div slot="header" class="clearfix">
             <span>{{ queryRightParams.name }}</span>
-            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-upload2"
+            <el-button
-              @click="openUploadTypeDialog" v-if="!(cate_id == 0 && (is_mine == 0 || is_mine == 2))">
+              style="float: right; padding: 3px 0"
+              type="text"
+              icon="el-icon-upload2"
+              @click="openUploadTypeDialog"
+              v-if="!(cate_id == 0 && (is_mine == 0 || is_mine == 2))"
+            >
               上传
             </el-button>
           </div>
           <!-- 资源列表 -->
-          <el-table :data="list" height="calc(100vh - 280px)" :show-header="false">
+          <el-table
-            <el-table-column label="内容" prop="thumbnail_path" align="left" width="140">
+            :data="list"
+            height="calc(100vh - 280px)"
+            :show-header="false"
+          >
+            <el-table-column
+              label="内容"
+              prop="thumbnail_path"
+              align="left"
+              width="140"
+            >
               <template slot-scope="scope">
-                <el-image class="resource-thumb" fit="contain" :src="getFullFilePath(scope.row.thumbnail_path)"
+                <div class="image-container">
-                  @click="handlePlay(scope.row)">
+                  <el-image
-                  <div slot="error" class="image-slot" @click="handlePlay(scope.row)">
+                    class="resource-thumb"
+                    fit="contain"
+                    :src="getFullFilePath(scope.row.thumbnail_path)"
+                  >
+                    <div slot="error" class="image-slot">
                       <i :class="getFileIconClass(scope.row.file_type)" />
                     </div>
                   </el-image>
+                  <div class="play-overlay" @click="handlePlay(scope.row)">
+                    <img
+                      class="play-icon"
+                      src="@/assets/images/knowledge/play.svg"
+                      alt="播放"
+                    />
+                  </div>
+                </div>
               </template>
             </el-table-column>
-            <el-table-column label="标题" align="left" prop="title" :show-overflow-tooltip="true" />
+            <el-table-column
-            <el-table-column label="更新时间" align="left" prop="update_time" :show-overflow-tooltip="true">
+              label="标题"
+              align="left"
+              prop="title"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="更新时间"
+              align="left"
+              prop="update_time"
+              :show-overflow-tooltip="true"
+            >
               <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.update_time) }} 上传</span>
               </template>
             </el-table-column>
-            <el-table-column label="文件大小" align="center" prop="file_size" width="100">
+            <el-table-column
+              label="文件大小"
+              align="center"
+              prop="file_size"
+              width="100"
+            >
               <template slot-scope="scope">
                 <span>{{ formatfile_size(scope.row.file_size) }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
+            <el-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
+              width="120"
+            >
               <template slot-scope="scope">
-                <el-button type="text" icon="el-icon-share" @click="handleShare(scope.row)">
+                <el-button
+                  type="text"
+                  icon="el-icon-share"
+                  @click="handleShare(scope.row)"
+                >
                   <!-- 分享 -->
                 </el-button>
-                <el-button v-if="scope.row.is_mine == 1" type="text" icon="el-icon-edit"
+                <el-button
-                  @click="handleUpdateFileName(scope.row)">
+                  v-if="scope.row.is_mine == 1"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdateFileName(scope.row)"
+                >
                   <!-- 修改 -->
                 </el-button>
-                <el-button v-if="scope.row.is_mine == 1" type="text" icon="el-icon-delete"
+                <el-button
-                  @click="handleRightDelete(scope.row)">
+                  v-if="scope.row.is_mine == 1"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleRightDelete(scope.row)"
+                >
                   <!-- 删除 -->
                 </el-button>
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-          <pagination v-show="queryRightParams.total > 0" :total="queryRightParams.total"
+          <pagination
-            :page.sync="queryRightParams.page" :limit.sync="queryRightParams.pageSize" @pagination="getKnowledgeList" />
+            v-show="queryRightParams.total > 0"
+            :total="queryRightParams.total"
+            :page.sync="queryRightParams.page"
+            :limit.sync="queryRightParams.pageSize"
+            @pagination="getKnowledgeList"
+          />
         </el-card>
       </el-col>
     </el-row>
 
     <!-- 自定义标签弹窗 -->
-    <el-dialog title="自定义标签名称" :visible.sync="tagDialogVisible" width="17%" destroy-on-close>
+    <el-dialog
-      <el-form :model="tagForm" :rules="tagRules" ref="tagFormRef" label-width="80px">
+      title="自定义标签名称"
+      :visible.sync="tagDialogVisible"
+      width="17%"
+      destroy-on-close
+    >
+      <el-form
+        :model="tagForm"
+        :rules="tagRules"
+        ref="tagFormRef"
+        label-width="80px"
+      >
         <el-form-item label="标签名称" prop="name">
-          <el-input v-model="tagForm.name" placeholder="请输入最多8个字符" maxlength="8" show-word-limit />
+          <el-input
+            v-model="tagForm.name"
+            placeholder="请输入最多8个字符"
+            maxlength="8"
+            show-word-limit
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -103,10 +207,25 @@
     </el-dialog>
 
     <!-- 修改文件名弹窗 -->
-    <el-dialog title="修改" :visible.sync="fileNameDialogVisible" width="17%" destroy-on-close>
+    <el-dialog
-      <el-form :model="fileNameForm" :rules="fileNameRules" ref="fileNameFormRef" label-width="70px">
+      title="修改"
+      :visible.sync="fileNameDialogVisible"
+      width="17%"
+      destroy-on-close
+    >
+      <el-form
+        :model="fileNameForm"
+        :rules="fileNameRules"
+        ref="fileNameFormRef"
+        label-width="70px"
+      >
         <el-form-item label="标题" prop="title">
-          <el-input v-model="fileNameForm.title" placeholder="请输入标题" show-word-limit maxlength="8" />
+          <el-input
+            v-model="fileNameForm.title"
+            placeholder="请输入标题"
+            show-word-limit
+            maxlength="8"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -116,7 +235,12 @@
     </el-dialog>
 
     <!-- 选择上传类型弹窗 -->
-    <el-dialog title="请选择上传文件类型" :visible.sync="uploadTypeDialogVisible" width="18%" :show-footer="false">
+    <el-dialog
+      title="请选择上传文件类型"
+      :visible.sync="uploadTypeDialogVisible"
+      width="18%"
+      :show-footer="false"
+    >
       <div class="upload-type-box">
         <div class="type-item" @click="selectFileType('video')">
           <img src="@/assets/images/knowledge/mp4.svg" alt="视频文件" />
@@ -128,11 +252,22 @@
     </el-dialog>
 
     <!-- 隐藏的文件输入（用于触发上传） -->
-    <input ref="fileInput" type="file" :accept="uploadAccept" class="hidden-upload-input" @change="handleFileSelect" />
+    <input
+      ref="fileInput"
+      type="file"
+      :accept="uploadAccept"
+      class="hidden-upload-input"
+      @change="handleFileSelect"
+    />
 
     <!-- 上传进度弹窗 -->
-    <el-dialog title="文件上传中" :visible.sync="uploadProgressDialogVisible" width="400px" :close-on-click-modal="false"
+    <el-dialog
-      :show-footer="false">
+      title="文件上传中"
+      :visible.sync="uploadProgressDialogVisible"
+      width="400px"
+      :close-on-click-modal="false"
+      :show-footer="false"
+    >
       <div class="progress-box">
         <el-progress :percentage="uploadPercent" />
         <p style="margin-top: 15px">资源上传中，请稍候...</p>
@@ -140,7 +275,12 @@
     </el-dialog>
 
     <!-- 分享弹窗 - 选择联系人 -->
-    <CreateGroupDialog ref="createGroupDialogRef" title="选择人员" :min-select-count="1" @confirm="handleShareToContacts" />
+    <CreateGroupDialog
+      ref="createGroupDialogRef"
+      title="选择人员"
+      :min-select-count="1"
+      @confirm="handleShareToContacts"
+    />
   </div>
 </template>
 
@@ -427,7 +567,9 @@ export default {
     // 知识库右侧-预览
     handlePlay(row) {
       const videoTypes = ["mp4", "avi", "wmv", "mov"];
-      const fileType = row.file_name ? row.file_name.split(".").pop().toLowerCase() : "";
+      const fileType = row.file_name
+        ? row.file_name.split(".").pop().toLowerCase()
+        : "";
       if (videoTypes.includes(fileType)) {
         // 视频：新窗口铺满全屏播放
         const videoUrl = this.getFullFilePath(row.file_path);
@@ -816,6 +958,10 @@ export default {
   }
 }
 
+// 资源缩略图容器
+.image-container {
+  position: relative;
+  cursor: pointer;
   // 资源缩略图
   .resource-thumb {
     height: 62px;
@@ -826,6 +972,24 @@ export default {
     justify-content: center;
     font-size: 20px;
   }
+  // 播放按钮覆盖层
+  .play-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // 播放按钮图标
+    .play-icon {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+}
 
 .hidden-upload-input {
   display: none;