1. 优化 ChatFree 页面左侧会话列表展示逻辑

2. 渲染 Prompt 组件换行符

web/src/components/ChatPrompt.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chat-line chat-line-right">
     <div class="chat-item">
-      <div class="content">{{ content }}</div>
+      <div class="content" v-html="content"></div>
       <div class="triangle"></div>
     </div>
 
@@ -67,6 +67,7 @@ export default defineComponent({
       color var(--content-color);
       font-size: var(--content-font-size);
       border-radius: 5px;
+      line-height 1.5
     }
   }
 }

web/src/utils/libs.js

@@ -73,6 +73,7 @@ export function dateFormat(timestamp, format) {
     return timeDate;
 }
 
+// 判断数组中是否包含某个元素
 export function arrayContains(array, value, compare) {
     if (typeof compare !== 'function') {
         compare = function (v1, v2) {
@@ -86,3 +87,26 @@ export function arrayContains(array, value, compare) {
     }
     return false;
 }
+
+// 删除数组中指定的元素
+export function removeArrayItem(array, value, compare) {
+    if (typeof compare !== 'function') {
+        compare = function (v1, v2) {
+            return v1 === v2;
+        }
+    }
+    for (let i = 0; i < array.length; i++) {
+        if (compare(array[i], value)) {
+            array.splice(i, 1);
+            break;
+        }
+    }
+    return array;
+}
+
+// 渲染输入的换行符
+export function renderInputText(text) {
+    const replaceRegex = /(\n\r|\r\n|\r|\n)/g;
+    text = text || '';
+    return text.replace(replaceRegex, "<br/>");
+}

web/src/utils/storage.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-constant-condition */
-import {dateFormat} from "@/utils/libs";
+import {dateFormat, removeArrayItem} from "@/utils/libs";
 import Storage from 'good-storage'
 
 /**
@@ -69,32 +69,32 @@ export function getChatHistory(chatId) {
 }
 
 export function getChatList() {
-    return Storage.get(ChatListKey);
-}
-
-export function getChat(chatId) {
-    let chatList = Storage.get(ChatListKey);
-    if (!chatList) {
+    const list = Storage.get(ChatListKey);
+    if (list) {
+        if (typeof list.reverse !== 'function') {
+            Storage.remove(ChatListKey)
             return null;
         }
-
-    return chatList[chatId] ? chatList[chatId] : null;
+        return list.reverse();
+    }
 }
 
 export function setChat(chat) {
     let chatList = Storage.get(ChatListKey);
     if (!chatList) {
-        chatList = {};
+        chatList = [];
     }
 
-    chatList[chat.id] = chat;
+    chatList.push(chat);
     Storage.set(ChatListKey, chatList);
 }
 
-export function removeChat(chatId) {
-    const chatList = Storage.get(ChatListKey);
+export function removeChat(chat) {
+    let chatList = Storage.get(ChatListKey);
     if (chatList) {
-        delete chatList[chatId];
+        chatList = removeArrayItem(chatList, chat, function (v1, v2) {
+            return v1.id === v2.id
+        })
         Storage.set(ChatListKey, chatList);
     }
 }

web/src/views/ChatFree.vue

@@ -183,7 +183,7 @@ import {
   setLoginUser, removeChat, clearChatHistory
 } from "@/utils/storage";
 import {ElMessage, ElMessageBox} from "element-plus";
-import {arrayContains, isMobile, randString} from "@/utils/libs";
+import {arrayContains, isMobile, randString, removeArrayItem, renderInputText} from "@/utils/libs";
 import Clipboard from "clipboard";
 
 // 免费版 ChatGPT
@@ -469,7 +469,7 @@ export default defineComponent({
         type: "prompt",
         id: randString(32),
         icon: 'images/avatar/user.png',
-        content: this.inputValue
+        content: renderInputText(this.inputValue)
       };
       this.chatData.push(this.curPrompt);
 
@@ -537,6 +537,8 @@ export default defineComponent({
         clearChatHistory();
         this.chatData = [];
         this.chatList = [];
+        this.curChat = null;
+        this.newChat();
         ElMessage.success("当前角色会话已清空");
       }).catch(() => {
       })
@@ -600,7 +602,7 @@ export default defineComponent({
           return v1.id === v2.id;
         }
         if (!arrayContains(this.chatList, this.curChat, compare)) {
-          this.chatList[this.curChat.id] = this.curChat;
+          this.chatList.unshift(this.curChat);
         }
       }
     },
@@ -621,13 +623,16 @@ export default defineComponent({
         chat.edit = false;
         setChat(chat)
       } else if (this.curOpt === 'remove') {
-        delete this.chatList[chat.id];
+
+        this.chatList = removeArrayItem(this.chatList, chat, function (v1, v2) {
+          return v1.id === v2.id
+        });
         // 删除的会话是当前的聊天会话，则新建会话
         if (this.curChat.id === chat.id) {
           this.curChat = null;
           this.newChat();
         }
-        removeChat(chat.id);
+        removeChat(chat);
         chat.removing = false;
       }