feat: optimize chat page data list style, support list style and chat style

web/src/views/ChatExport.vue

@@ -6,22 +6,14 @@
       </div>
 
       <div v-for="item in chatData" :key="item.id">
-        <chat-prompt
-            v-if="item.type==='prompt'"
-            :icon="item.icon"
-            :created-at="dateFormat(item['created_at'])"
-            :tokens="item['tokens']"
-            :model="item['model']"
-            :content="item.content"/>
-        <chat-reply v-else-if="item.type==='reply'"
-                    :data="item" :read-only="true"/>
+        <chat-prompt v-if="item.type==='prompt'" :data="item" list-style="list"/>
+        <chat-reply v-else-if="item.type==='reply'" :data="item" :read-only="true" list-style="list"/>
       </div>
     </div><!-- end chat box -->
   </div>
 </template>
 <script setup>
 
-import {dateFormat} from "@/utils/libs";
 import ChatReply from "@/components/ChatReply.vue";
 import ChatPrompt from "@/components/ChatPrompt.vue";
 import {nextTick, onMounted, ref} from "vue";
@@ -98,7 +90,7 @@ onMounted(() => {
   padding 0 20px
 
   .chat-box {
-    width 800px;
+    width 100%;
     // 变量定义
     --content-font-size: 16px;
     --content-color: #c1c1c1;
@@ -110,57 +102,13 @@ onMounted(() => {
       text-align center
     }
 
-
-    .chat-line-prompt {
+    .chat-line {
       font-size: 14px;
       display: flex;
-      align-items: flex-start;
+      align-items: center;
 
       .chat-line-inner {
-        .chat-icon {
-          margin-right: 0
-        }
-        .content {
-          padding-top: 0
-          font-size 16px;
-
-          p:first-child {
-            margin-top 0
-          }
-        }
-      }
-    }
-
-    .chat-line-reply {
-      padding-top: 1.5rem;
-
-      .chat-line-inner {
-        display flex
-
-        .bar-item {
-          background-color: #f7f7f8;
-          color: #888;
-          padding: 3px 5px;
-          margin-right: 10px;
-          border-radius: 5px;
-        }
-
-        .chat-icon {
-          margin-right: 20px
-
-          img {
-            width 30px
-            height 30px
-            border-radius: 10px;
-            padding: 1px
-          }
-        }
-
-        .chat-item {
-          img {
-            max-width 90%
-          }
-        }
+        max-width 800px
       }
     }
   }

web/src/views/ChatPlus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="common-layout">
+  <div class="chat-page">
     <el-container>
       <el-aside>
         <div class="chat-list">
@@ -99,6 +99,12 @@
                 </el-tag>
               </el-option>
             </el-select>
+
+            <span class="setting" @click="showChatSetting = true">
+                    <el-tooltip class="box-item" effect="dark" content="对话设置">
+                      <i class="iconfont icon-config"></i>
+                    </el-tooltip>
+                  </span>
           </div>
 
           <div>
@@ -109,13 +115,8 @@
                 </div>
                 <div v-for="item in chatData" :key="item.id" v-else>
                   <chat-prompt
-                      v-if="item.type==='prompt'"
-                      :icon="item.icon"
-                      :created-at="dateFormat(item['created_at'])"
-                      :tokens="item['tokens']"
-                      :model="getModelValue(modelID)"
-                      :content="item.content"/>
-                  <chat-reply v-else-if="item.type==='reply'" :data="item" @regen="reGenerate" :read-only="false"/>
+                      v-if="item.type==='prompt'" :data="item" :list-style="listStyle"/>
+                  <chat-reply v-else-if="item.type==='reply'" :data="item" @regen="reGenerate" :read-only="false" :list-style="listStyle"/>
                 </div>
               </div><!-- end chat box -->
 
@@ -187,21 +188,21 @@
         </p>
       </div>
     </el-dialog>
+
+    <ChatSetting :show="showChatSetting" @hide="showChatSetting = false"/>
   </div>
 
 
 </template>
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from 'vue'
+import {nextTick, onMounted, onUnmounted, ref, watch} from 'vue'
 import ChatPrompt from "@/components/ChatPrompt.vue";
 import ChatReply from "@/components/ChatReply.vue";
 import {Delete, Edit, More, Plus, Promotion, Search, Share, VideoPause} from '@element-plus/icons-vue'
 import 'highlight.js/styles/a11y-dark.css'
 import {
-  dateFormat,
   isMobile,
   processContent,
-  processPrompt,
   randString,
   removeArrayItem,
   UUID
@@ -217,6 +218,7 @@ import Welcome from "@/components/Welcome.vue";
 import {useSharedStore} from "@/store/sharedata";
 import FileSelect from "@/components/FileSelect.vue";
 import FileList from "@/components/FileList.vue";
+import ChatSetting from "@/components/ChatSetting.vue";
 
 const title = ref('ChatGPT-智能助手');
 const models = ref([])
@@ -243,6 +245,12 @@ const notice = ref("")
 const noticeKey = ref("SYSTEM_NOTICE")
 const store = useSharedStore();
 const row = ref(1)
+const showChatSetting = ref(false)
+const listStyle = ref(store.chatListStyle)
+watch(() => store.chatListStyle, (newValue) => {
+  listStyle.value = newValue
+});
+
 
 if (isMobile()) {
   router.replace("/mobile/chat")
@@ -757,6 +765,7 @@ const sendMessage = function () {
     id: randString(32),
     icon: loginUser.value.avatar,
     content: content,
+    model: getModelValue(modelID.value),
     created_at: new Date().getTime() / 1000,
   });
 

web/src/views/Home.vue

@@ -142,7 +142,7 @@ import {checkSession} from "@/action/session";
 import {removeUserToken} from "@/store/session";
 import LoginDialog from "@/components/LoginDialog.vue";
 import {useSharedStore} from "@/store/sharedata";
-import ConfigDialog from "@/components/ConfigDialog.vue";
+import ConfigDialog from "@/components/UserInfoDialog.vue";
 import {showMessageError} from "@/utils/dialog";
 
 const router = useRouter();

web/src/views/admin/ChatList.vue

@@ -153,7 +153,7 @@
         v-model="showChatItemDialog"
         title="对话详情"
     >
-      <div class="chat-box common-layout">
+      <div class="chat-box chat-page">
         <div v-for="item in messages" :key="item.id">
           <chat-prompt
               v-if="item.type==='prompt'"