fix: simplify chat empty state

web/apps/web-ele/src/components/ChatBox/index.vue

@@ -11,12 +11,11 @@ import type { Attachment, ChatMessage, VoiceMessage } from './types';
  */
 import { computed, nextTick, ref, watch } from 'vue';
 
-import { ChevronDown, ChevronUp, Trash2 } from '@vben/icons';
+import { Bot, ChevronDown, ChevronUp, Trash2 } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 
 import { ElScrollbar } from 'element-plus';
 
-import AiWorkingAnimation from '#/components/ai-loading/AiWorkingAnimation.vue';
 import { getFileUrl } from '#/composables/useFileUrl';
 
 import InputArea from './InputArea.vue';
@@ -246,16 +245,17 @@ defineExpose({
     <!-- 内容区域（欢迎页或消息列表） -->
     <div v-if="messages.length === 0" class="chatbox-content">
       <div class="chatbox-center">
-        <!-- AI 工作动画 -->
+        <div class="chatbox-welcome">
-        <AiWorkingAnimation
+          <div class="welcome-icon">
-          :title="welcomeConfig?.title || ''"
+            <Bot class="size-8" />
-          :subtitle="welcomeConfig?.description || emptyText || '开始对话吧'"
+          </div>
-          :show-progress="false"
+          <h3 v-if="welcomeConfig?.title" class="welcome-title">
-          :show-steps="false"
+            {{ welcomeConfig.title }}
-          :show-background="false"
+          </h3>
-          class="h-full min-h-[400px] flex-1"
+          <p class="welcome-desc">
-        >
+            {{ welcomeConfig?.description || emptyText || '开始对话吧' }}
-          <!-- 建议问题 -->
+          </p>
+
           <div
             v-if="welcomeConfig?.suggestions?.length"
             class="welcome-suggestions"
@@ -287,7 +287,7 @@ defineExpose({
               />
             </button>
           </div>
-        </AiWorkingAnimation>
+        </div>
       </div>
     </div>
 

web/apps/web-ele/src/components/ai-loading/AiWorkingAnimation.vue

@@ -122,7 +122,7 @@ onUnmounted(() => {
     </div>
 
     <!-- 飘过的代码行 - 左侧 -->
-    <div class="flying-code left-side">
+    <div v-if="showBackground" class="flying-code left-side">
       <div class="code-row" style="--i: 0">
         const handleSubmit = async () => {
       </div>
@@ -138,7 +138,7 @@ onUnmounted(() => {
     </div>
 
     <!-- 飘过的代码行 - 右侧 -->
-    <div class="flying-code right-side">
+    <div v-if="showBackground" class="flying-code right-side">
       <div class="code-row" style="--i: 0">function createApp(config) {</div>
       <div class="code-row" style="--i: 1">const state = reactive({});</div>
       <div class="code-row" style="--i: 2">watch(() => props.value, cb);</div>
@@ -152,7 +152,7 @@ onUnmounted(() => {
     </div>
 
     <!-- 数据粒子流 -->
-    <div class="particles">
+    <div v-if="showBackground" class="particles">
       <span
         v-for="p in particles"
         :key="p.id"
@@ -178,7 +178,7 @@ onUnmounted(() => {
       <!-- 机器人工作台 -->
       <div class="workstation">
         <!-- 思考气泡 -->
-        <div class="thought-bubble">
+        <div v-if="showBackground" class="thought-bubble">
           <span class="thought-text">{{ thoughts[currentThought] }}</span>
           <div class="bubble-dots"><span></span><span></span><span></span></div>
         </div>
@@ -284,7 +284,7 @@ onUnmounted(() => {
         <!-- 桌子 -->
         <div class="desk">
           <!-- 小显示器在桌上 -->
-          <div class="mini-monitor">
+          <div v-if="showBackground" class="mini-monitor">
             <div class="monitor-frame">
               <div class="mini-screen">
                 <div class="py-code">
@@ -340,7 +340,7 @@ onUnmounted(() => {
       </div>
 
       <!-- 飘浮代码片段 -->
-      <div class="floating">
+      <div v-if="showBackground" class="floating">
         <span class="code-snippet" style="--x: 8%; --y: 15%; --d: 0s">const app =</span>
         <span class="code-snippet" style="--x: 78%; --y: 20%; --d: 0.8s">async () =></span>
         <span class="code-snippet" style="--x: 5%; --y: 75%; --d: 1.6s">return data</span>