feat: attachments manage function is ready

web/src/components/FileSelect.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-container class="file-list-box">
+    <el-button class="file-upload-img" @click="fetchFiles">
+      <el-icon>
+        <PictureFilled/>
+      </el-icon>
+    </el-button>
+
+    <el-dialog
+        v-model="show"
+        :close-on-click-modal="true"
+        :show-close="true"
+        :width="800"
+        title="文件管理"
+    >
+
+      <div class="file-list">
+        <el-row :gutter="20">
+          <el-col :span="3">
+            <div class="grid-content">
+              <el-upload
+                  class="avatar-uploader"
+                  :auto-upload="true"
+                  :show-file-list="false"
+                  :http-request="afterRead"
+              >
+                <el-icon class="avatar-uploader-icon">
+                  <Plus/>
+                </el-icon>
+              </el-upload>
+            </div>
+          </el-col>
+          <el-col :span="3" v-for="file in fileList">
+            <div class="grid-content">
+              <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  :content="file.name"
+                  placement="top">
+                <el-image :src="file.url" fit="fill" v-if="isImage(file.ext)" @click="insertURL(file.url)"/>
+                <el-image :src="getFileIcon(file.ext)" fit="fill" v-else @click="insertURL(file.url)"/>
+              </el-tooltip>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {ElMessage} from "element-plus";
+import {httpGet, httpPost} from "@/utils/http";
+import {PictureFilled, Plus} from "@element-plus/icons-vue";
+
+const props = defineProps({
+  userId: String,
+});
+const emits = defineEmits(['selected']);
+const show = ref(false)
+const fileList = ref([])
+
+const fetchFiles = () => {
+  show.value = true
+  httpGet("/api/upload/list").then(res => {
+    fileList.value = res.data
+  }).catch(() => {
+  })
+}
+
+const isImage = (ext) => {
+  const expr = /\.(jpg|jpeg|png|gif|bmp|svg)$/i;
+  return expr.test(ext);
+}
+
+const getFileIcon = (ext) => {
+  const files = {
+    ".docx": "doc.png",
+    ".doc": "doc.png",
+    ".xls": "xls.png",
+    ".xlsx": "xls.png",
+    ".ppt": "ppt.png",
+    ".pptx": "ppt.png",
+    ".md": "md.png",
+    ".pdf": "pdf.png",
+    ".sql": "sql.png"
+  }
+  if (files[ext]) {
+    return '/images/ext/' + files[ext]
+  }
+
+  return '/images/ext/file.png'
+}
+
+const afterRead = (file) => {
+  const formData = new FormData();
+  formData.append('file', file.file, file.name);
+  // 执行上传操作
+  httpPost('/api/upload', formData).then((res) => {
+    fileList.value.unshift(res.data)
+    ElMessage.success({message: "上传成功", duration: 500})
+  }).catch((e) => {
+    ElMessage.error('图片上传失败:' + e.message)
+  })
+};
+
+const insertURL = (url) => {
+  show.value = false
+  emits('selected', url)
+}
+</script>
+
+<style lang="stylus">
+
+.file-list-box {
+  .file-upload-img {
+    padding: 8px 5px;
+    border-radius: 6px;
+    background: #19c37d;
+    color: #fff;
+    font-size: 20px;
+  }
+
+  .el-dialog {
+
+    .el-dialog__body {
+      //padding 0
+
+      .file-list {
+
+        .grid-content {
+          margin-bottom 10px
+
+          .avatar-uploader {
+            width 100%
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border 1px dashed #e1e1e1
+            border-radius 6px
+
+            .el-upload {
+              width 100%
+              height 80px
+            }
+          }
+
+          .el-image {
+            height 80px
+            border 1px solid #ffffff
+            border-radius 6px
+            cursor pointer
+
+            &:hover {
+              border 1px solid #20a0ff
+            }
+
+          }
+
+          .iconfont {
+            color #20a0ff
+            font-size 40px
+          }
+        }
+      }
+
+    }
+  }
+}
+</style>

web/src/components/UserProfile.vue

@@ -7,6 +7,7 @@
             :auto-upload="true"
             :show-file-list="false"
             :http-request="afterRead"
+            accept=".png,.jpg,.jpeg,.bmp"
         >
           <el-avatar v-if="user.avatar" :src="user.avatar" shape="circle" :size="100"/>
           <el-icon v-else class="avatar-uploader-icon">