reactor：【AI 大模型】chat/message 简化成 unocss

Author: YunaiV

src/views/ai/chat/index/components/message/MessageList.vue

@@ -10,15 +10,30 @@
           <div>
             <el-text class="text-left leading-30px">{{ formatDate(item.createTime) }}</el-text>
           </div>
-          <div class="relative flex flex-col break-words bg-[var(--el-fill-color-light)] shadow-[0_0_0_1px_var(--el-border-color-light)] rounded-10px pt-10px px-10px pb-5px" ref="markdownViewRef">
-            <MarkdownView class="text-[var(--el-text-color-primary)] text-[0.95rem]" :content="item.content" />
+          <div
+            class="relative flex flex-col break-words bg-[var(--el-fill-color-light)] shadow-[0_0_0_1px_var(--el-border-color-light)] rounded-10px pt-10px px-10px pb-5px"
+            ref="markdownViewRef"
+          >
+            <MarkdownView
+              class="text-[var(--el-text-color-primary)] text-[0.95rem]"
+              :content="item.content"
+            />
             <MessageKnowledge v-if="item.segments" :segments="item.segments" />
           </div>
           <div class="flex flex-row mt-8px">
-            <el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="copyContent(item.content)">
+            <el-button
+              class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
+              link
+              @click="copyContent(item.content)"
+            >
               <img class="h-20px" src="@/assets/ai/copy.svg" />
             </el-button>
-            <el-button v-if="item.id > 0" class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onDelete(item.id)">
+            <el-button
+              v-if="item.id > 0"
+              class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
+              link
+              @click="onDelete(item.id)"
+            >
               <img class="h-17px" src="@/assets/ai/delete.svg" />
             </el-button>
           </div>
@@ -34,19 +49,38 @@
             <el-text class="text-left leading-30px">{{ formatDate(item.createTime) }}</el-text>
           </div>
           <div class="flex flex-row-reverse">
-            <div class="text-[0.95rem] text-[var(--el-color-white)] inline bg-[var(--el-color-primary)] shadow-[0_0_0_1px_var(--el-color-primary)] rounded-10px p-10px w-auto break-words whitespace-pre-wrap">{{ item.content }}</div>
+            <div
+              class="text-[0.95rem] text-[var(--el-color-white)] inline bg-[var(--el-color-primary)] shadow-[0_0_0_1px_var(--el-color-primary)] rounded-10px p-10px w-auto break-words whitespace-pre-wrap"
+              >{{ item.content }}</div
+            >
           </div>
           <div class="flex flex-row-reverse mt-8px">
-            <el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="copyContent(item.content)">
+            <el-button
+              class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
+              link
+              @click="copyContent(item.content)"
+            >
               <img class="h-20px" src="@/assets/ai/copy.svg" />
             </el-button>
-            <el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onDelete(item.id)">
+            <el-button
+              class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
+              link
+              @click="onDelete(item.id)"
+            >
               <img class="h-17px mr-12px" src="@/assets/ai/delete.svg" />
             </el-button>
-            <el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onRefresh(item)">
+            <el-button
+              class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
+              link
+              @click="onRefresh(item)"
+            >
               <el-icon size="17"><RefreshRight /></el-icon>
             </el-button>
-            <el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onEdit(item)">
+            <el-button
+              class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
+              link
+              @click="onEdit(item)"
+            >
               <el-icon size="17"><Edit /></el-icon>
             </el-button>
           </div>
@@ -171,5 +205,3 @@ onMounted(async () => {
   messageContainer.value.addEventListener('scroll', handleScroll)
 })
 </script>
-
-

src/views/ai/chat/index/components/message/MessageNewConversation.vue

@@ -17,4 +17,3 @@ const handlerNewChat = () => {
   emits('onNewConversation')
 }
 </script>
-

src/views/ai/chat/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container class="ai-layout">
+  <el-container class="absolute flex-1 top-0 left-0 h-full w-full">
     <!-- 左侧：对话列表 -->
     <ConversationList
       :active-id="activeConversationId"
@@ -67,18 +67,21 @@
       </el-main>
 
       <!-- 底部 -->
-      <el-footer class="footer-container">
-        <form class="prompt-from">
+      <el-footer class="flex flex-col !h-auto !p-0">
+        <form
+          class="mt-10px mx-20px mb-20px py-9px px-10px flex flex-col h-auto rounded-10px"
+          style="border: 1px solid var(--el-border-color)"
+        >
           <textarea
-            class="prompt-input"
+            class="h-80px border-none box-border resize-none py-0 px-2px overflow-auto focus:outline-none"
             v-model="prompt"
             @keydown="handleSendByKeydown"
             @input="handlePromptInput"
             @compositionstart="onCompositionstart"
             @compositionend="onCompositionend"
             placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
           ></textarea>
-          <div class="prompt-btns">
+          <div class="flex justify-between pb-0 pt-5px">
             <div>
               <el-switch v-model="enableContext" />
               <span class="ml-5px text-14px text-#8f8f8f">上下文</span>
@@ -576,15 +579,6 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-.ai-layout {
-  position: absolute;
-  flex: 1;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
 .conversation-container {
   position: relative;
   display: flex;
@@ -735,44 +729,4 @@ onMounted(async () => {
     margin: 0;
   }
 }
-
-// 底部
-.footer-container {
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  margin: 0;
-  padding: 0;
-
-  .prompt-from {
-    display: flex;
-    flex-direction: column;
-    height: auto;
-    border: 1px solid var(--el-border-color);
-    border-radius: 10px;
-    margin: 10px 20px 20px 20px;
-    padding: 9px 10px;
-  }
-
-  .prompt-input {
-    height: 80px;
-    //box-shadow: none;
-    border: none;
-    box-sizing: border-box;
-    resize: none;
-    padding: 0 2px;
-    overflow: auto;
-  }
-
-  .prompt-input:focus {
-    outline: none;
-  }
-
-  .prompt-btns {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 0;
-    padding-top: 5px;
-  }
-}
 </style>