feat: new UI for chat file manager is ready

web/src/components/ChatPrompt.vue

@@ -6,6 +6,25 @@
       </div>
 
       <div class="chat-item">
+        <div v-if="files.length > 0" class="file-list-box">
+          <div v-for="file in files">
+            <div class="image" v-if="isImage(file.ext)">
+              <el-image :src="file.url" fit="cover"/>
+            </div>
+            <div class="item" v-else>
+              <div class="icon">
+                <el-image :src="GetFileIcon(file.ext)" fit="cover"  />
+              </div>
+              <div class="body">
+                <div class="title">{{file.name}}</div>
+                <div class="info">
+                  <span>{{GetFileType(file.ext)}}</span>
+                  <span>{{FormatFileSize(file.size)}}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="content" v-html="content"></div>
         <div class="bar" v-if="createdAt">
           <span class="bar-item"><el-icon><Clock/></el-icon> {{ createdAt }}</span>
@@ -17,50 +36,87 @@
   </div>
 </template>
 
-<script>
-import {defineComponent} from "vue"
+<script setup>
+import {onMounted, ref} from "vue"
 import {Clock} from "@element-plus/icons-vue";
 import {httpPost} from "@/utils/http";
+import hl from "highlight.js";
+import {isImage, processPrompt, substr} from "@/utils/libs";
+import {FormatFileSize, GetFileIcon, GetFileType} from "@/store/system";
 
-export default defineComponent({
-  name: 'ChatPrompt',
-  components: {Clock},
-  methods: {},
-  props: {
-    content: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: 'images/user-icon.png',
-    },
-    createdAt: {
-      type: String,
-      default: '',
-    },
-    tokens: {
-      type: Number,
-      default: 0,
-    },
-    model: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      finalTokens: this.tokens
+const mathjaxPlugin = require('markdown-it-mathjax3')
+const md = require('markdown-it')({
+  breaks: true,
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (str, lang) {
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
+    // 显示复制代码按钮
+    const copyBtn = `<span class="copy-code-btn" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
+<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(/<\/textarea>/g, '&lt;/textarea>')}</textarea>`
+    if (lang && hl.getLanguage(lang)) {
+      const langHtml = `<span class="lang-name">${lang}</span>`
+      // 处理代码高亮
+      const preCode = hl.highlight(lang, str, true).value
+      // 将代码包裹在 pre 中
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
     }
+
+    // 处理代码高亮
+    const preCode = md.utils.escapeHtml(str)
+    // 将代码包裹在 pre 中
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
+  }
+});
+md.use(mathjaxPlugin)
+const props = defineProps({
+  content: {
+    type: String,
+    default: '',
   },
-  mounted() {
-    if (!this.finalTokens) {
-      httpPost("/api/chat/tokens", {text: this.content, model: this.model}).then(res => {
-        this.finalTokens = res.data;
-      }).catch(() => {
-      })
+  icon: {
+    type: String,
+    default: 'images/user-icon.png',
+  },
+  createdAt: {
+    type: String,
+    default: '',
+  },
+  tokens: {
+    type: Number,
+    default: 0,
+  },
+  model: {
+    type: String,
+    default: '',
+  },
+})
+const finalTokens = ref(props.tokens)
+const content =ref(processPrompt(props.content))
+const files = ref([])
+
+onMounted(() => {
+  if (!finalTokens.value) {
+    httpPost("/api/chat/tokens", {text: props.content, model: props.model}).then(res => {
+      finalTokens.value = res.data;
+    }).catch(() => {
+    })
+  }
+
+  const linkRegex = /(https?:\/\/\S+)/g;
+  const links = props.content.match(linkRegex);
+  if (links) {
+    httpPost("/api/upload/list", {urls: links}).then(res => {
+      files.value = res.data
+    }).catch(() => {
+    })
+
+    for (let link of links) {
+      content.value = content.value.replace(link,"")
     }
   }
+  content.value = md.render(content.value.trim())
 })
 </script>
 
@@ -92,10 +148,58 @@ export default defineComponent({
 
     .chat-item {
       width 100%
-      position: relative;
       padding: 0 5px 0 0;
       overflow: hidden;
 
+      .file-list-box {
+        display flex
+        flex-flow column
+        .image {
+          display flex
+          flex-flow row
+          margin-right 10px
+          position relative
+
+          .el-image {
+            border 1px solid #e3e3e3
+            border-radius 10px
+            margin-bottom 10px
+          }
+        }
+        .item {
+          display flex
+          flex-flow row
+          border-radius 10px
+          background-color #ffffff
+          border 1px solid #e3e3e3
+          padding 6px
+          margin-bottom 10px
+
+          .icon {
+            .el-image {
+              width 40px
+              height 40px
+            }
+          }
+          .body {
+            margin-left 8px
+            font-size 14px
+            .title {
+              font-weight bold
+              line-height 24px
+              color #0D0D0D
+            }
+            .info {
+              color #B4B4B4
+
+              span {
+                margin-right 10px
+              }
+            }
+          }
+        }
+      }
+
       .content {
         word-break break-word;
         padding: 6px 10px;
@@ -149,4 +253,4 @@ export default defineComponent({
 
 
 }
-</style>
+</style>

web/src/components/FileList.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-container class="chat-file-list">
+    <div v-for="file in fileList">
+      <div class="image" v-if="isImage(file.ext)">
+        <el-image :src="file.url" fit="cover"/>
+        <div class="action">
+          <el-icon @click="removeFile(file)"><CircleCloseFilled /></el-icon>
+        </div>
+      </div>
+      <div class="item" v-else>
+        <div class="icon">
+          <el-image :src="GetFileIcon(file.ext)" fit="cover"  />
+        </div>
+        <div class="body">
+          <div class="title">{{substr(file.name, 30)}}</div>
+          <div class="info">
+            <span>{{GetFileType(file.ext)}}</span>
+            <span>{{FormatFileSize(file.size)}}</span>
+          </div>
+        </div>
+        <div class="action">
+          <el-icon @click="removeFile(file)"><CircleCloseFilled /></el-icon>
+        </div>
+      </div>
+    </div>
+  </el-container>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {CircleCloseFilled} from "@element-plus/icons-vue";
+import {isImage, removeArrayItem, substr} from "@/utils/libs";
+import {FormatFileSize, GetFileIcon, GetFileType} from "@/store/system";
+
+const props = defineProps({
+  files: {
+    type: Array,
+    default:[],
+  }
+})
+const emits = defineEmits(['removeFile']);
+const fileList = ref(props.files)
+
+
+const removeFile = (file) => {
+  fileList.value = removeArrayItem(fileList.value, file, (v1,v2) => v1.url===v2.url)
+  emits('removeFile', file)
+}
+
+</script>
+
+<style scoped lang="stylus">
+
+.chat-file-list {
+  display flex
+  flex-flow row
+  .image {
+    display flex
+    flex-flow row
+    margin-right 10px
+    position relative
+
+    .el-image {
+      height 56px
+      width 56px
+      border 1px solid #e3e3e3
+      border-radius 10px
+    }
+  }
+  .item {
+    position relative
+    display flex
+    flex-flow row
+    border-radius 10px
+    background-color #ffffff
+    border 1px solid #e3e3e3
+    padding 6px
+    margin-right 10px
+
+    .icon {
+      .el-image {
+        width 40px
+        height 40px
+      }
+    }
+    .body {
+      margin-left 5px
+      font-size 14px
+      .title {
+        font-weight bold
+        line-height 24px
+        color #0D0D0D
+      }
+      .info {
+        color #B4B4B4
+
+        span {
+          margin-right 10px
+        }
+      }
+    }
+  }
+
+  .action {
+    position absolute
+    top -8px
+    right -8px
+    color #da0d54
+    cursor pointer
+    font-size 20px
+  }
+}
+
+</style>

web/src/components/FileSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container class="file-list-box">
+  <el-container class="file-select-box">
     <a class="file-upload-img" @click="fetchFiles">
       <i class="iconfont icon-attachment-st"></i>
     </a>
@@ -34,8 +34,8 @@
                   effect="dark"
                   :content="file.name"
                   placement="top">
-                <el-image :src="file.url" fit="cover" v-if="isImage(file.ext)" @click="insertURL(file.url)"/>
-                <el-image :src="getFileIcon(file.ext)" fit="cover" v-else @click="insertURL(file.url)"/>
+                <el-image :src="file.url" fit="cover" v-if="isImage(file.ext)" @click="insertURL(file)"/>
+                <el-image :src="GetFileIcon(file.ext)" fit="cover" v-else @click="insertURL(file)"/>
               </el-tooltip>
 
               <div class="opt">
@@ -55,6 +55,7 @@ import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
 import {Delete, Plus} from "@element-plus/icons-vue";
 import {isImage, removeArrayItem} from "@/utils/libs";
+import {GetFileIcon} from "@/store/system";
 
 const props = defineProps({
   userId: Number,
@@ -65,30 +66,12 @@ const fileList = ref([])
 
 const fetchFiles = () => {
   show.value = true
-  httpGet("/api/upload/list").then(res => {
+  httpPost("/api/upload/list").then(res => {
     fileList.value = res.data
   }).catch(() => {
   })
 }
 
-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();
@@ -113,19 +96,19 @@ const removeFile = (file) => {
   })
 }
 
-const insertURL = (url) => {
+const insertURL = (file) => {
   show.value = false
   // 如果是相对路径，处理成绝对路径
-  if (url.indexOf("http") === -1) {
-    url = location.protocol + "//" + location.host + url
+  if (file.url.indexOf("http") === -1) {
+    file.url = location.protocol + "//" + location.host + file.url
   }
-  emits('selected', url)
+  emits('selected', file)
 }
 </script>
 
 <style lang="stylus">
 
-.file-list-box {
+.file-select-box {
   .file-upload-img {
     .iconfont {
       font-size: 24px;