feat: attachments manage function is ready

web/src/assets/css/chat-plus.css

@@ -213,6 +213,11 @@
   width: 0;
   height: 0;
 }
+#app .common-layout .el-main .right-box #container .input-box .input-container .select-file {
+  position: absolute;
+  right: 48px;
+  top: 20px;
+}
 #app .common-layout .el-main .right-box #container .input-box .input-container .send-btn {
   position: absolute;
   right: 12px;

web/src/assets/css/chat-plus.styl

@@ -279,6 +279,12 @@ $borderColor = #4676d0;
                 }
               }
 
+              .select-file {
+                position absolute;
+                right 48px;
+                top 20px;
+              }
+
               .send-btn {
                 position absolute;
                 right 12px;

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1703124384910') format('woff2'),
-       url('iconfont.woff?t=1703124384910') format('woff'),
-       url('iconfont.ttf?t=1703124384910') format('truetype');
+  src: url('iconfont.woff2?t=1705313263366') format('woff2'),
+       url('iconfont.woff?t=1705313263366') format('woff'),
+       url('iconfont.ttf?t=1705313263366') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xls:before {
+  content: "\e678";
+}
+
+.icon-file:before {
+  content: "\e62f";
+}
+
+.icon-doc:before {
+  content: "\e6c2";
+}
+
+.icon-pdf:before {
+  content: "\e6c3";
+}
+
+.icon-ppt:before {
+  content: "\e642";
+}
+
+.icon-txt:before {
+  content: "\e644";
+}
+
+.icon-sql:before {
+  content: "\e65b";
+}
+
+.icon-md:before {
+  content: "\e63a";
+}
+
 .icon-loading:before {
   content: "\e627";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,62 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "12600976",
+      "name": "xls",
+      "font_class": "xls",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "3750429",
+      "name": "file",
+      "font_class": "file",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "4318810",
+      "name": "doc",
+      "font_class": "doc",
+      "unicode": "e6c2",
+      "unicode_decimal": 59074
+    },
+    {
+      "icon_id": "4318811",
+      "name": "pdf",
+      "font_class": "pdf",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "4628503",
+      "name": "ppt",
+      "font_class": "ppt",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "6233095",
+      "name": "txt",
+      "font_class": "txt",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "12600910",
+      "name": "sql",
+      "font_class": "sql",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "31260974",
+      "name": "md",
+      "font_class": "md",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
     {
       "icon_id": "1278349",
       "name": "loading",

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">

web/src/views/ChatPlus.vue

@@ -187,6 +187,9 @@
                       :rows="2"
                       placeholder="按 Enter 键发送消息，使用 Ctrl + Enter 换行"
                   />
+                  <span class="select-file">
+                    <file-select v-if="isLogin" :user-id="loginUser.id" @selected="insertURL"/>
+                  </span>
                   <span class="send-btn">
                     <el-button @click="sendMessage">
                       <el-icon><Promotion/></el-icon>
@@ -290,6 +293,7 @@ import ConfigDialog from "@/components/ConfigDialog.vue";
 import {checkSession} from "@/action/session";
 import Welcome from "@/components/Welcome.vue";
 import ChatMidJourney from "@/components/ChatMidJourney.vue";
+import FileSelect from "@/components/FileSelect.vue";
 
 const title = ref('ChatGPT-智能助手');
 const models = ref([])
@@ -875,6 +879,11 @@ const notShow = () => {
   localStorage.setItem(showNoticeKey.value + loginUser.value.username, true)
   showDemoNotice.value = false
 }
+
+// 插入文件路径
+const insertURL = (url) => {
+  prompt.value += " " + url + " "
+}
 </script>
 
 <style scoped lang="stylus">