【增加】AI Chat 应道页面

src/views/ai/chat/ChatEmpty.vue

+
+<template>
+  <div class="chat-empty">
+
+    <!--  title  -->
+    <div class="center-container">
+      <div class="title">芋艿 AI</div>
+      <div class="role-list">
+        <div class="role-item" v-for="prompt in promptList" :key="prompt.prompt" @click="handlerPromptClick(prompt)">
+          {{prompt.prompt}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+
+const router = useRouter()
+const promptList = ref<any[]>() // 角色列表
+promptList.value = [
+  {
+    "prompt": "今天天气怎么样?",
+  },
+  {
+    "prompt": "写一首好听的诗歌?",
+  }
+]
+
+const emits = defineEmits(['onPrompt'])
+
+const handlerPromptClick = async ({ prompt }) => {
+  emits('onPrompt', prompt)
+}
+
+onMounted(async () => {
+})
+</script>
+<style scoped lang="scss">
+.chat-empty {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  .center-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .title {
+      font-size: 28px;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    .role-list {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      width: 460px;
+      margin-top: 20px;
+
+      .role-item {
+        display: flex;
+        justify-content: center;
+        width: 180px;
+        line-height: 50px;
+        border: 1px solid #e4e4e4;
+        border-radius: 10px;
+        margin: 10px;
+        cursor: pointer;
+      }
+
+      .role-item:hover {
+        background-color: rgba(243, 243, 243, 0.73);
+      }
+    }
+  }
+}
+</style>

src/views/ai/chat/index.vue

@@ -31,12 +31,15 @@
         </div>
       </el-header>
 
-      <!--  main    -->
+      <!-- main -->
       <el-main class="main-container">
         <div class="message-container" >
-          <Message ref="messageRef" :list="list" @onDeleteSuccess="handlerMessageDelete" />
+          <Message v-if="list.length > 0" ref="messageRef" :list="list" @on-delete-success="handlerMessageDelete" />
+          <ChatEmpty  v-if="list.length === 0" @on-prompt="onSend"/>
         </div>
       </el-main>
+
+      <!-- 底部 -->
       <el-footer class="footer-container">
         <form @submit.prevent="onSend" class="prompt-from">
           <textarea
@@ -84,10 +87,12 @@
 <script setup lang="ts">
 import Conversation from './Conversation.vue'
 import Message from './Message.vue'
+import ChatEmpty from './ChatEmpty.vue'
 import {ChatMessageApi, ChatMessageVO} from '@/api/ai/chat/message'
 import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation'
 import {useClipboard} from '@vueuse/core'
 import ChatConversationUpdateForm from "@/views/ai/chat/components/ChatConversationUpdateForm.vue";
+import {send} from "vite";
 
 const route = useRoute() // 路由
 const message = useMessage() // 消息弹窗
@@ -153,7 +158,7 @@ const onPromptInput = (event) => {
 /**
  * 发送消息
  */
-const onSend = async () => {
+const onSend = async (val?: string) => {
   // 判断用户是否在输入
   if (isComposing.value) {
     return
@@ -162,7 +167,7 @@ const onSend = async () => {
   if (conversationInProgress.value) {
     return
   }
-  const content = prompt.value?.trim() + ''
+  const content = (val ? val : prompt.value?.trim()) as string
   if (content.length < 2) {
     ElMessage({
       message: '请输入内容!',