更新数据库 SQL

web/src/components/ChatPrompt.vue

@@ -7,7 +7,7 @@
 
       <div class="chat-item">
         <div v-if="files.length > 0" class="file-list-box">
-          <div v-for="file in files">
+          <div v-for="file in files" :key="file.url">
             <div class="image" v-if="isImage(file.ext)">
               <el-image :src="file.url" fit="cover" />
             </div>
@@ -17,7 +17,9 @@
               </div>
               <div class="body">
                 <div class="title">
-                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold">{{ file.name }} </el-link>
+                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold"
+                    >{{ file.name }}
+                  </el-link>
                 </div>
                 <div class="info">
                   <span>{{ GetFileType(file.ext) }}</span>
@@ -46,7 +48,7 @@
 
       <div class="chat-item">
         <div v-if="files.length > 0" class="file-list-box">
-          <div v-for="file in files">
+          <div v-for="file in files" :key="file.url">
             <div class="image" v-if="isImage(file.ext)">
               <el-image :src="file.url" fit="cover" />
             </div>
@@ -56,7 +58,9 @@
               </div>
               <div class="body">
                 <div class="title">
-                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold">{{ file.name }} </el-link>
+                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold"
+                    >{{ file.name }}
+                  </el-link>
                 </div>
                 <div class="info">
                   <span>{{ GetFileType(file.ext) }}</span>
@@ -81,15 +85,15 @@
 </template>
 
 <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 { dateFormat, isImage, processPrompt } from "@/utils/libs";
-import { FormatFileSize, GetFileIcon, GetFileType } from "@/store/system";
-import emoji from "markdown-it-emoji";
-import mathjaxPlugin from "markdown-it-mathjax3";
-import MarkdownIt from "markdown-it";
+import { FormatFileSize, GetFileIcon, GetFileType } from '@/store/system'
+import { httpPost } from '@/utils/http'
+import { dateFormat, isImage, processPrompt } from '@/utils/libs'
+import { Clock } from '@element-plus/icons-vue'
+import hl from 'highlight.js'
+import MarkdownIt from 'markdown-it'
+import emoji from 'markdown-it-emoji'
+import mathjaxPlugin from 'markdown-it-mathjax3'
+import { onMounted, ref } from 'vue'
 
 const md = new MarkdownIt({
   breaks: true,
@@ -97,94 +101,94 @@ const md = new MarkdownIt({
   linkify: true,
   typographer: true,
   highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
+    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>`;
+      '&lt;/textarea>'
+    )}</textarea>`
     if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`;
+      const langHtml = `<span class="lang-name">${lang}</span>`
       // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value;
+      const preCode = hl.highlight(lang, str, true).value
       // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
     }
 
     // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str);
+    const preCode = md.utils.escapeHtml(str)
     // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
   },
-});
-md.use(mathjaxPlugin);
-md.use(emoji);
+})
+md.use(mathjaxPlugin)
+md.use(emoji)
 const props = defineProps({
   data: {
     type: Object,
     default: {
-      content: "",
-      created_at: "",
+      content: '',
+      created_at: '',
       tokens: 0,
-      model: "",
-      icon: "",
+      model: '',
+      icon: '',
     },
   },
   listStyle: {
     type: String,
-    default: "list",
+    default: 'list',
   },
-});
-const finalTokens = ref(props.data.tokens);
-const content = ref(processPrompt(props.data.content));
-const files = ref([]);
+})
+const finalTokens = ref(props.data.tokens)
+const content = ref(processPrompt(props.data.content))
+const files = ref([])
 
 onMounted(() => {
-  processFiles();
-});
+  processFiles()
+})
 
 const processFiles = () => {
   if (!props.data.content) {
-    return;
+    return
   }
 
   // 提取图片｜文件链接
-  const linkRegex = /(https?:\/\/\S+)/g;
-  const links = props.data.content.match(linkRegex);
-  const urlPrefix = `${window.location.protocol}//${window.location.host}`;
+  const linkRegex = /(https?:\/\/\S+)/g
+  const links = props.data.content.match(linkRegex)
+  const urlPrefix = `${window.location.protocol}//${window.location.host}`
   if (links) {
     // 把本地链接转换为相对路径
     const _links = links.map((link) => {
       if (link.startsWith(urlPrefix)) {
-        return link.replace(urlPrefix, "");
+        return link.replace(urlPrefix, '')
       }
-      return link;
-    });
+      return link
+    })
     // 合并数组并去重
-    const urls = [...new Set([...links, ..._links])];
-    httpPost("/api/upload/list", { urls: urls })
+    const urls = [...new Set([...links, ..._links])]
+    httpPost('/api/upload/list', { urls: urls })
       .then((res) => {
-        files.value = res.data.items;
+        files.value = res.data.items
 
         // for (let link of links) {
         //   if (isExternalImg(link, files.value)) {
         //     files.value.push({ url: link, ext: ".png" });
-        //   } 
+        //   }
         // }
       })
-      .catch(() => {});
+      .catch(() => {})
 
     // 替换图片｜文件链接
     for (let link of links) {
-      content.value = content.value.replace(link, "");
+      content.value = content.value.replace(link, '')
     }
   }
-  content.value = md.render(content.value.trim());
-};
+  content.value = md.render(content.value.trim())
+}
 const isExternalImg = (link, files) => {
-  return isImage(link) && !files.find((file) => file.url === link);
-};
+  return isImage(link) && !files.find((file) => file.url === link)
+}
 </script>
 
 <style lang="stylus">