修复漏洞，重构初始化功能，优化媒体库 (#1024)

* 媒体库增加 普通上传、压缩上传按钮，方便媒体库直接上传图片

* 增加数据类型切换后的的校验，避免使用错误的查询条件和字典条件。

* refactor: 重构初始化逻辑

* 媒体库功能丰富

* 修复注入漏洞和路径穿越

* 修复自动化接口获取数据库表失败后未能终止的bug

* 微调媒体库样式

Co-authored-by: bypanghu <bypanghu@163.com>
Co-authored-by: tesun <36953434+tesun@users.noreply.github.com>
Co-authored-by: pnck <hio131@gmail.com>
Co-authored-by: task <121913992@qq.com>

web/src/components/chooseImg/index.vue

@@ -1,56 +1,97 @@
 <template>
-  <el-drawer v-model="drawer" title="媒体库">
+  <el-drawer v-model="drawer" title="媒体库" size="650px">
     <div class="gva-btn-list">
       <upload-common
-          v-model:imageCommon="imageCommon"
-          class="upload-btn-media-library"
-          @on-success="open"
+        v-model:imageCommon="imageCommon"
+        class="upload-btn-media-library"
+        @on-success="open"
       />
       <upload-image
-          v-model:imageUrl="imageUrl"
-          :file-size="512"
-          :max-w-h="1080"
-          class="upload-btn-media-library"
-          @on-success="open"
+        v-model:imageUrl="imageUrl"
+        :file-size="512"
+        :max-w-h="1080"
+        class="upload-btn-media-library"
+        @on-success="open"
       />
+      <el-form ref="searchForm" :inline="true" :model="search">
+        <el-form-item label="">
+          <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary" icon="search" @click="open">查询</el-button>
+        </el-form-item>
+      </el-form>
     </div>
     <div class="media">
-      <el-image
-        v-for="(item,key) in picList"
-        :key="key"
-        class="header-img-box-list"
-        :src="(item.url && item.url.slice(0, 4) !== 'http')?path+item.url:item.url"
-        @click="chooseImg(item.url,target,targetKey)"
-      >
-        <template #error>
-          <div class="header-img-box-list">
-            <el-icon><picture /></el-icon>
-          </div>
-        </template>
-      </el-image>
+      <div v-for="(item,key) in picList" :key="key" class="media-box">
+        <div class="header-img-box-list">
+          <el-image
+            :key="key"
+            :src="(item.url && item.url.slice(0, 4) !== 'http')?path+item.url:item.url"
+            @click="chooseImg(item.url,target,targetKey)"
+          >
+            <template #error>
+              <div class="header-img-box-list">
+                <el-icon>
+                  <picture />
+                </el-icon>
+              </div>
+            </template>
+          </el-image>
+        </div>
+        <div class="img-title" @click="editFileNameFunc(item)">{{ item.name }}</div>
+      </div>
     </div>
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      :style="{'justify-content':'center'}"
+      layout="total, prev, pager, next, jumper"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
   </el-drawer>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { getFileList } from '@/api/fileUploadAndDownload'
+import { getFileList, editFileName } from '@/api/fileUploadAndDownload'
 import UploadImage from '@/components/upload/image.vue'
 import UploadCommon from '@/components/upload/common.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const imageUrl = ref('')
 const imageCommon = ref('')
 
+const search = ref({})
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(20)
+const keyword = ref('')
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  open()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  open()
+}
+
 const emit = defineEmits(['enterImg'])
 defineProps({
   target: {
     type: Object,
-    default: null
+    default: null,
   },
   targetKey: {
     type: String,
-    default: ''
-  }
+    default: '',
+  },
 })
 
 const drawer = ref(false)
@@ -66,30 +107,89 @@ const chooseImg = (url, target, targetKey) => {
 }
 
 const open = async() => {
-  const res = await getFileList({ page: 1, pageSize: 9999 })
-  picList.value = res.data.list
-  drawer.value = true
+  const res = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
+  if (res.code === 0) {
+    picList.value = res.data.list
+    total.value = res.data.total
+    page.value = res.data.page
+    pageSize.value = res.data.pageSize
+    drawer.value = true
+  }
+}
+
+/**
+ * 编辑文件名或者备注
+ * @param row
+ * @returns {Promise<void>}
+ */
+const editFileNameFunc = async(row) => {
+  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputErrorMessage: '不能为空'
+  }).then(async({ value }) => {
+    row.name = value
+    // console.log(row)
+    const res = await editFileName(row)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '编辑成功!',
+      })
+      open()
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消修改'
+    })
+  })
 }
 
 defineExpose({ open })
 </script>
 
 <style lang="scss">
-.upload-btn-media-library{margin-left: 20px;}
-.media{
-  display:flex;
-  flex-wrap:wrap;
-  .header-img-box-list {
-    margin-top: 20px;
+.upload-btn-media-library {
+  margin-left: 20px;
+}
+
+.media {
+  display: flex;
+  flex-wrap: wrap;
+
+  .media-box {
     width: 120px;
     margin-left: 20px;
-    height: 120px;
-    border: 1px dashed #ccc;
-    border-radius: 20px;
-    text-align: center;
-    line-height: 180px;
-    cursor: pointer;
-}
+
+    .img-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .header-img-box-list {
+      width: 120px;
+      height: 120px;
+      border: 1px dashed #ccc;
+      border-radius: 8px;
+      text-align: center;
+      line-height: 120px;
+      cursor: pointer;
+      overflow: hidden;
+      .el-image__inner {
+        max-width: 120px;
+        max-height: 120px;
+        vertical-align: middle;
+        width: unset;
+        height: unset;
+      }
+    }
+  }
 }
 
 </style>