From c8e7aa11292205c6e9979cf4794f8b40380e0ad0 Mon Sep 17 00:00:00 2001
From: SeasonsChange <1204992313@qq.com>
Date: Sat, 23 Aug 2025 14:13:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor(chat):=20=E9=87=8D=E6=9E=84=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E6=B5=8B=E8=AF=95=E8=A7=86=E5=9B=BE=E5=92=8C=E6=9C=AA?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增单选、多选和表单字段组件，优化聊天主界面布局
移除QuestionRenderer测试视图及相关路由配置
清理ChatMain中未使用的DynamicSelect代码
添加LoadingAnimation加载动画组件
简化AIChatPage逻辑，移除SSE连接改用模拟数据
---
 .../src/components/Chat/AIChatPage.vue        | 293 ++++++++------
 .../src/components/Chat/ChatMain.vue          |  92 +----
 .../src/components/Chat/ChatTree.vue          | 383 ------------------
 .../src/components/{ => Chat}/FormField.vue   |   0
 .../{ => Chat}/LoadingAnimation.vue           |   0
 .../{ => Chat}/MultipleChoiceOptions.vue      |   0
 .../{ => Chat}/QuestionRenderer.vue           |   1 +
 .../{ => Chat}/SingleChoiceOptions.vue        |   0
 .../src/components/Chat/TreeNode.vue          | 355 ----------------
 .../src/components/QuestionRendererTest.vue   | 300 --------------
 prompto-lab-ui/src/router/index.ts            |   8 -
 .../src/views/QuestionRendererTestView.vue    |  11 -
 12 files changed, 179 insertions(+), 1264 deletions(-)
 delete mode 100644 prompto-lab-ui/src/components/Chat/ChatTree.vue
 rename prompto-lab-ui/src/components/{ => Chat}/FormField.vue (100%)
 rename prompto-lab-ui/src/components/{ => Chat}/LoadingAnimation.vue (100%)
 rename prompto-lab-ui/src/components/{ => Chat}/MultipleChoiceOptions.vue (100%)
 rename prompto-lab-ui/src/components/{ => Chat}/QuestionRenderer.vue (99%)
 rename prompto-lab-ui/src/components/{ => Chat}/SingleChoiceOptions.vue (100%)
 delete mode 100644 prompto-lab-ui/src/components/Chat/TreeNode.vue
 delete mode 100644 prompto-lab-ui/src/components/QuestionRendererTest.vue
 delete mode 100644 prompto-lab-ui/src/views/QuestionRendererTestView.vue

diff --git a/prompto-lab-ui/src/components/Chat/AIChatPage.vue b/prompto-lab-ui/src/components/Chat/AIChatPage.vue
index 0a0b8af..63308f2 100644
--- a/prompto-lab-ui/src/components/Chat/AIChatPage.vue
+++ b/prompto-lab-ui/src/components/Chat/AIChatPage.vue
@@ -36,21 +36,12 @@
 
     <!-- 中间问答主页面 -->
     <div class="main-content" :style="{ width: mainContentWidth + 'px' }">
-      <QuestionRenderer
-        :current-question="currentQuestion"
-        :is-loading="isLoading"
-        @send-message="handleSendMessage"
-        @submit-answer="handleSubmitAnswer"
-        @retry-question="handleRetryQuestion"
-      />
+      <QuestionRenderer :current-question="currentQuestion" :is-loading="isLoading" @send-message="handleSendMessage"
+        @submit-answer="handleSubmitAnswer" @retry-question="handleRetryQuestion" />
     </div>
 
     <!-- 可拖拽的分隔条 -->
-    <div
-      class="resizer"
-      @mousedown="startResize"
-      @touchstart="startResize"
-    >
+    <div class="resizer" @mousedown="startResize" @touchstart="startResize">
       <div class="resizer-line"></div>
       <div class="resizer-handle">
         <div class="resizer-dots">
@@ -63,20 +54,15 @@
 
     <!-- 右侧思维导图 -->
     <div class="right-sidebar" :style="{ width: rightSidebarWidth + 'px' }">
-      <MindMapTree
-        :conversation-tree="conversationTree"
-        :current-node-id="currentNodeId"
-        @node-selected="handleNodeSelected"
-        @branch-deleted="handleBranchDeleted"
-      />
+      <MindMapTree :conversation-tree="conversationTree" :current-node-id="currentNodeId"
+        @node-selected="handleNodeSelected" @branch-deleted="handleBranchDeleted" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import QuestionRenderer from '../QuestionRenderer.vue'
-import ChatTree from './ChatTree.vue'
+import QuestionRenderer from './QuestionRenderer.vue'
 import MindMapTree from './MindMapTree.vue'
 import { startConversation, sendMessage, sendUserMessage, connectSSE, closeSSE, processAnswer, connectUserInteractionSSE, retryQuestion, type MessageRequest, type MessageResponse, type ConversationSession, type UnifiedAnswerRequest, type FormAnswerItem, type RetryRequest } from '@/services/conversationApi'
 import { toast } from '@/utils/toast'
@@ -143,7 +129,7 @@ const ensureUniqueConnection = () => {
     eventSource.value = null
     isConnected.value = false
   }
-  
+
   // 清理定时器
   if (connectionTimeout.value) {
     clearTimeout(connectionTimeout.value)
@@ -158,12 +144,12 @@ const ensureUniqueConnection = () => {
 // 更新活跃时间
 const updateActivity = () => {
   lastActivityTime.value = Date.now()
-  
+
   // 重置活跃超时定时器
   if (activityTimeout.value) {
     clearTimeout(activityTimeout.value)
   }
-  
+
   activityTimeout.value = setTimeout(() => {
     console.log('SSE连接因不活跃超时，自动关闭')
     closeConnection()
@@ -182,7 +168,7 @@ const closeConnection = () => {
     eventSource.value = null
   }
   isConnected.value = false
-  
+
   if (connectionTimeout.value) {
     clearTimeout(connectionTimeout.value)
     connectionTimeout.value = null
@@ -202,10 +188,10 @@ const initializeSession = async () => {
   try {
     // 确保连接唯一性
     ensureUniqueConnection()
-    
+
     // 生成用户ID（如果没有的话）
     const userId = 'demo-user-' + Date.now() // 临时用户ID
-    
+
     // 建立SSE连接（不传sessionId，让后端创建新会话）
     eventSource.value = connectUserInteractionSSE(
       null, // sessionId为null，后端会创建新会话
@@ -216,7 +202,7 @@ const initializeSession = async () => {
 
     // 启动活跃监控
     updateActivity()
-    
+
     console.log('SSE连接已建立，等待后端返回会话信息...')
 
   } catch (error: any) {
@@ -235,7 +221,7 @@ const initializeSession = async () => {
 // 处理SSE消息
 const handleSSEMessage = (response: any) => {
   console.log('收到SSE消息:', response)
-  
+
   // 更新活跃时间
   updateActivity()
 
@@ -248,14 +234,14 @@ const handleSSEMessage = (response: any) => {
         userId: response.userId || 'demo-user-' + Date.now()
       }
       isConnected.value = true
-      
+
       console.log('会话已建立:', session.value)
-      
+
       // 后端总是会返回nodeId，新会话返回'1'，已存在会话返回实际的nodeId
       if (response.nodeId) {
         currentNodeId.value = response.nodeId
         console.log('会话节点ID:', response.nodeId)
-        
+
         // 如果是根节点，初始化根节点
         if (response.nodeId === '1') {
           const rootNode: ConversationNode = {
@@ -269,7 +255,7 @@ const handleSSEMessage = (response: any) => {
           conversationTree.value.set('1', rootNode)
         }
       }
-      
+
       // 如果有现有的qaTree，恢复对话树
       if (response.qaTree) {
         try {
@@ -280,7 +266,7 @@ const handleSSEMessage = (response: any) => {
           console.error('恢复对话树失败:', error)
         }
       }
-      
+
       toast.success({
         title: '会话已建立',
         message: response.isNewSession ? '已创建新会话' : '已连接到现有会话',
@@ -295,12 +281,12 @@ const handleSSEMessage = (response: any) => {
   if (response.question && response.question.type) {
     // 这是新的问题格式
     currentQuestion.value = response.question
-    
+
     // 更新当前节点ID为新创建的问题节点ID
     if (response.currentNodeId) {
       // 创建问题节点并添加到对话树
       const questionContent = `${response.question.question}${response.question.desc ? '\n' + response.question.desc : ''}`
-      
+
       const questionNode: ConversationNode = {
         id: response.currentNodeId,
         content: questionContent,
@@ -310,7 +296,7 @@ const handleSSEMessage = (response: any) => {
         children: [],
         isActive: true
       }
-      
+
       // 更新父节点的children数组
       if (response.parentNodeId) {
         const parentNode = conversationTree.value.get(response.parentNodeId)
@@ -325,26 +311,26 @@ const handleSSEMessage = (response: any) => {
           parentNode.children.push(response.currentNodeId)
         }
       }
-      
+
       // 添加新问题节点到对话树
       conversationTree.value.set(response.currentNodeId, questionNode)
       currentNodeId.value = response.currentNodeId
       console.log('更新当前节点ID为:', response.currentNodeId)
-      
+
       // 在聊天界面显示问题内容
       addAIMessage(response.currentNodeId, questionContent)
     }
-    
+
     // 记录父节点ID，用于后续构建树形关系图
     if (response.parentNodeId) {
       console.log('父节点ID:', response.parentNodeId)
     }
-    
+
     isLoading.value = false
     console.log('收到新格式问题:', response.question, '当前节点ID:', response.currentNodeId, '父节点ID:', response.parentNodeId)
     return
   }
-  
+
   const messageResponse = response as MessageResponse
   switch (messageResponse.type) {
     case 'AI_QUESTION':
@@ -391,11 +377,15 @@ const handleSSEMessage = (response: any) => {
   }
 }
 
+var retryCount = 1
 // 处理SSE错误
 const handleSSEError = (error: Event) => {
+
+  if (retryCount <= 0) return
+  retryCount--
   console.error('SSE连接错误:', error)
   isConnected.value = false
-  
+
   // 清理定时器
   if (activityTimeout.value) {
     clearTimeout(activityTimeout.value)
@@ -414,14 +404,14 @@ const handleSSEError = (error: Event) => {
       if (!isConnected.value && !isInitializing.value) {
         console.log('尝试重连到现有会话:', session.value?.sessionId)
         ensureUniqueConnection() // 确保连接唯一性
-        
+
         eventSource.value = connectUserInteractionSSE(
           session.value?.sessionId || null,
           session.value?.userId || 'demo-user-' + Date.now(),
           handleSSEMessage,
           handleSSEError
         )
-        
+
         // 重新启动活跃监控
         updateActivity()
       }
@@ -550,6 +540,16 @@ const updateContainerWidth = () => {
 
 // 生命周期
 onMounted(() => {
+  currentNodeId.value = '1'
+  const rootNode: ConversationNode = {
+    id: '1',
+    content: '您好！我是AI助手，有什么可以帮助您的吗？',
+    type: 'assistant',
+    timestamp: new Date(),
+    children: [],
+    isActive: true
+  }
+  conversationTree.value.set('1', rootNode)
   initializeSession()
   updateContainerWidth()
   window.addEventListener('resize', updateContainerWidth)
@@ -568,18 +568,6 @@ onUnmounted(() => {
 
 // 发送消息
 const handleSendMessage = async (content: string) => {
-  if (!session.value || !isConnected.value) {
-    toast.error({
-      title: '连接异常',
-      message: '请等待连接建立后再发送消息',
-      duration: 3000
-    })
-    return
-  }
-
-  // 更新活跃时间
-  updateActivity()
-
   // 重置当前问题状态，进入新的对话
   currentQuestion.value = null
 
@@ -615,50 +603,10 @@ const handleSendMessage = async (content: string) => {
 
   isLoading.value = true
 
-  try {
-    // 发送消息到后端，必须包含sessionId
-    const messageRequest: MessageRequest = {
-      sessionId: session.value.sessionId, // 必需的sessionId
-      content,
-      type: 'USER_TEXT'
-    }
-
-    await sendUserMessage(messageRequest, session.value.userId, nodeIdToSend)
-
-    // 消息发送成功，等待SSE返回AI回复
-    console.log('消息已发送，等待AI回复...')
-
-  } catch (error: any) {
-    console.error('发送消息失败:', error)
-    isLoading.value = false
-
-    // 检查是否是会话相关错误
-    if (error.message && (error.message.includes('sessionId') || error.message.includes('会话'))) {
-      toast.error({
-        title: '会话异常',
-        message: '会话已失效，请刷新页面重新建立连接',
-        duration: 5000
-      })
-      // 清理当前会话状态
-      session.value = null
-      closeConnection()
-    } else {
-      toast.error({
-        title: '发送失败',
-        message: error.message || '消息发送失败，请重试',
-        duration: 4000
-      })
-    }
-
-    // 发送失败时移除用户消息节点
-    conversationTree.value.delete(userNodeId)
-    if (currentNode) {
-      const index = currentNode.children.indexOf(userNodeId)
-      if (index > -1) {
-        currentNode.children.splice(index, 1)
-      }
-    }
-  }
+  // 添加模拟AI回复逻辑
+  setTimeout(() => {
+    generateMockAIResponse(content)
+  }, 500 + Math.random() * 500) // 0.5-1秒随机延迟
 }
 
 // 处理重试问题
@@ -719,7 +667,71 @@ const handleRetryQuestion = async (reason: string = '用户要求重新生成问
     }
   }
 }
+// 生成模拟AI回复
+const generateMockAIResponse = (userMessage: string) => {
+  const mockResponses = [
+
+    JSON.parse(`{
+  "question": "你的博客系统主要用途是什么？",
+  "type": "multi",
+  "parentId": "blog",
+  "options": [
+    {
+      "id": "personal",
+      "label" : "个人博客",
+      "description": "用于记录个人生活、思考和创作",
+      "weight": 8
+    },
+    {
+      "id": "tech",
+      "label": "技术博客",
+      "description": "分享技术文章、开发经验等",
+      "weight": 7
+    },
+    {
+      "id": "business",
+      "label": "企业博客",
+      "description" : "用于企业宣传、产品推广等",
+      "weight": 5
+    }
+  ],
+  "allowMultiple": false,
+  "allowOther": true
+}`),
+  ]
+
+  // 根据用户消息内容选择合适的回复
+  let response = mockResponses[Math.floor(Math.random() * mockResponses.length)]
+  console.log(response)
+  currentQuestion.value = response
+  // 创建AI回复节点
+  const aiNodeId = `ai_${Date.now()}`
+  const aiNode: ConversationNode = {
+    id: aiNodeId,
+    content: JSON.stringify(response),
+    type: 'assistant',
+    timestamp: new Date(),
+    parentId: currentNodeId.value,
+    children: [],
+    isActive: true
+  }
 
+  const currentNode = conversationTree.value.get(currentNodeId.value)
+  if (currentNode) {
+    currentNode.children.push(aiNodeId)
+  }
+
+  conversationTree.value.set(aiNodeId, aiNode)
+  currentNodeId.value = aiNodeId
+  isLoading.value = false
+
+  // 显示成功提示
+  toast.success({
+    title: '回复已生成',
+    message: 'AI助手已回复您的消息',
+    duration: 2000
+  })
+}
 // 处理答案提交
 const handleSubmitAnswer = async (answerData: any) => {
   if (!session.value || !currentQuestion.value) {
@@ -739,7 +751,7 @@ const handleSubmitAnswer = async (answerData: any) => {
   try {
     // 保存当前问题节点ID，用于后端验证
     const questionNodeId = currentNodeId.value
-    
+
     // 构建统一答案请求，必须包含sessionId和正确的nodeId
     const request: UnifiedAnswerRequest = {
       sessionId: session.value.sessionId, // 必需的sessionId
@@ -755,7 +767,7 @@ const handleSubmitAnswer = async (answerData: any) => {
     // 添加用户答案到对话树
     const userNodeId = `user_${Date.now()}`
     let answerContent = ''
-    
+
     // 根据问题类型格式化答案内容
     switch (currentQuestion.value.type) {
       case 'input':
@@ -860,10 +872,12 @@ const setNodeAndDescendantsInactive = (nodeId: string) => {
 const handleNodeSelected = (nodeId: string) => {
   const targetNode = conversationTree.value.get(nodeId)
   if (targetNode) {
+    // 首先将所有节点设为非活跃
     conversationTree.value.forEach(node => {
       node.isActive = false
     })
 
+    // 激活从根节点到目标节点的完整路径
     const activatePath = (currentNodeId: string) => {
       const node = conversationTree.value.get(currentNodeId)
       if (node) {
@@ -876,6 +890,12 @@ const handleNodeSelected = (nodeId: string) => {
 
     activatePath(nodeId)
     currentNodeId.value = nodeId
+
+    // 如果选中的是问题节点，恢复问题状态
+    if (targetNode.type === 'assistant' && targetNode.content.includes('问题')) {
+      // 尝试解析并恢复问题状态
+      // 这里需要根据实际的问题格式来实现
+    }
   }
 }
 
@@ -978,12 +998,16 @@ const handleBranchDeleted = (nodeId: string) => {
 }
 
 @keyframes float {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translate(0, 0) rotate(0deg);
   }
+
   33% {
     transform: translate(30px, -30px) rotate(120deg);
   }
+
   66% {
     transform: translate(-20px, 20px) rotate(240deg);
   }
@@ -1014,13 +1038,18 @@ const handleBranchDeleted = (nodeId: string) => {
 }
 
 @keyframes particle-float {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateY(0) rotate(0deg);
     opacity: 0;
   }
-  10%, 90% {
+
+  10%,
+  90% {
     opacity: 0.4;
   }
+
   50% {
     transform: translateY(-100px) rotate(180deg);
     opacity: 0.8;
@@ -1029,7 +1058,8 @@ const handleBranchDeleted = (nodeId: string) => {
 
 /* 左侧栏 - 恢复原始宽度 */
 .left-sidebar {
-  width: 250px; /* 恢复到原始的250px宽度 */
+  width: 250px;
+  /* 恢复到原始的250px宽度 */
   background: rgba(8, 8, 8, 0.9);
   backdrop-filter: blur(24px) saturate(180%);
   border-right: 1px solid rgba(212, 175, 55, 0.15);
@@ -1042,18 +1072,22 @@ const handleBranchDeleted = (nodeId: string) => {
 }
 
 .sidebar-content {
-  padding: 24px 20px; /* 恢复原始内边距 */
+  padding: 24px 20px;
+  /* 恢复原始内边距 */
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 24px; /* 恢复原始间距 */
+  gap: 24px;
+  /* 恢复原始间距 */
 }
 
 .sidebar-header {
   display: flex;
   align-items: center;
-  gap: 16px; /* 恢复原始间距 */
-  padding: 16px; /* 恢复原始内边距 */
+  gap: 16px;
+  /* 恢复原始间距 */
+  padding: 16px;
+  /* 恢复原始内边距 */
   background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(244, 208, 63, 0.04));
   border: 1px solid rgba(212, 175, 55, 0.2);
   border-radius: 12px;
@@ -1064,7 +1098,8 @@ const handleBranchDeleted = (nodeId: string) => {
 }
 
 .icon-wrapper {
-  width: 48px; /* 恢复到原始的48px */
+  width: 48px;
+  /* 恢复到原始的48px */
   height: 48px;
   background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
   border-radius: 12px;
@@ -1077,14 +1112,16 @@ const handleBranchDeleted = (nodeId: string) => {
 }
 
 .icon {
-  font-size: 22px; /* 恢复到原始的22px */
+  font-size: 22px;
+  /* 恢复到原始的22px */
   color: #1a1a1a;
   font-weight: 700;
 }
 
 .header-text h3 {
   margin: 0;
-  font-size: 18px; /* 恢复到原始的18px */
+  font-size: 18px;
+  /* 恢复到原始的18px */
   font-weight: 700;
   background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
   -webkit-background-clip: text;
@@ -1095,7 +1132,8 @@ const handleBranchDeleted = (nodeId: string) => {
 
 .header-text p {
   margin: 4px 0 0 0;
-  font-size: 12px; /* 恢复到原始的12px */
+  font-size: 12px;
+  /* 恢复到原始的12px */
   color: #888;
   font-weight: 500;
   letter-spacing: 0.5px;
@@ -1104,7 +1142,8 @@ const handleBranchDeleted = (nodeId: string) => {
 
 .placeholder-content {
   text-align: center;
-  padding: 32px 20px; /* 恢复原始内边距 */
+  padding: 32px 20px;
+  /* 恢复原始内边距 */
   background: rgba(15, 15, 15, 0.6);
   border: 1px solid rgba(212, 175, 55, 0.1);
   border-radius: 16px;
@@ -1113,20 +1152,23 @@ const handleBranchDeleted = (nodeId: string) => {
 }
 
 .placeholder-icon {
-  font-size: 32px; /* 恢复到原始的32px */
+  font-size: 32px;
+  /* 恢复到原始的32px */
   margin-bottom: 16px;
   opacity: 0.6;
 }
 
 .placeholder-content p {
   margin: 0 0 8px 0;
-  font-size: 16px; /* 恢复到原始的16px */
+  font-size: 16px;
+  /* 恢复到原始的16px */
   font-weight: 600;
   color: #e8e8e8;
 }
 
 .placeholder-content span {
-  font-size: 12px; /* 恢复到原始的12px */
+  font-size: 12px;
+  /* 恢复到原始的12px */
   color: #888;
   font-weight: 500;
 }
@@ -1135,8 +1177,10 @@ const handleBranchDeleted = (nodeId: string) => {
 .right-sidebar {
   background: rgba(8, 8, 8, 0.9);
   backdrop-filter: blur(24px) saturate(180%);
-  min-width: 600px; /* 从500px进一步增加到600px */
-  max-width: 1200px; /* 从900px增加到1200px */
+  min-width: 600px;
+  /* 从500px进一步增加到600px */
+  max-width: 1200px;
+  /* 从900px增加到1200px */
   flex-shrink: 0;
   border-left: 1px solid rgba(212, 175, 55, 0.15);
   position: relative;
@@ -1150,7 +1194,8 @@ const handleBranchDeleted = (nodeId: string) => {
 .main-content {
   display: flex;
   flex-direction: column;
-  min-width: 400px; /* 恢复到400px */
+  min-width: 400px;
+  /* 恢复到400px */
   background: rgba(10, 10, 10, 0.8);
   backdrop-filter: blur(20px);
   position: relative;
@@ -1160,7 +1205,8 @@ const handleBranchDeleted = (nodeId: string) => {
 /* 响应式设计调整 */
 @media (max-width: 1200px) {
   .left-sidebar {
-    width: 220px; /* 在较小屏幕上适当减少 */
+    width: 220px;
+    /* 在较小屏幕上适当减少 */
   }
 
   .right-sidebar {
@@ -1174,7 +1220,8 @@ const handleBranchDeleted = (nodeId: string) => {
 
 @media (max-width: 1024px) {
   .left-sidebar {
-    width: 200px; /* 更小的屏幕进一步调整 */
+    width: 200px;
+    /* 更小的屏幕进一步调整 */
   }
 
   .right-sidebar {
diff --git a/prompto-lab-ui/src/components/Chat/ChatMain.vue b/prompto-lab-ui/src/components/Chat/ChatMain.vue
index 0ad4033..2606b25 100644
--- a/prompto-lab-ui/src/components/Chat/ChatMain.vue
+++ b/prompto-lab-ui/src/components/Chat/ChatMain.vue
@@ -32,11 +32,11 @@
     </div>
 
     <div class="chat-messages" ref="messagesContainer">
-      <MessageItem v-for="message in messages" :key="message.id" :message="message"
+      <div class="chat-history">
+        <MessageItem v-for="message in messages" :key="message.id" :message="message"
         :is-streaming="isMessageStreaming(message.id)" />
-      <DynamicSelect :fieldConfig="fieldConfig" :modelValue="val" :isDark="true" @change="change"/>
-      <DynamicSelect :fieldConfig="fieldConfig2" :modelValue="val2" :isDark="true" @change="change"/>
-
+      </div>
+      
       <div class="chat-input">
         <div class="input-container">
           <div class="input-wrapper">
@@ -65,83 +65,6 @@
 import { ref, nextTick, watch } from 'vue'
 import DynamicSelect from './DynamicSelect.vue'
 import MessageItem from './MessageItem.vue'
-const fieldConfig = ref<any>({
-  "id": "question1",
-  "type": "radio",
-  "title": "您的年龄段是？",
-  "description": "请选择您的年龄段",
-  "options": [
-    { "value": "18-25", "label": "18-25岁", "weight": 1 },
-    { "value": "26-35", "label": "26-35岁", "weight": 2 },
-    { "value": "36-45", "label": "36-45岁", "weight": 3 }
-  ],
-  "allowOther": true,
-  "required": true,
-  "validation": {
-    "rules": [
-      { "type": "required", "message": "请选择一个选项" }
-    ]
-  }
-})
-const fieldConfig2 = ref<any>({
-  "id": "interests",
-  "type": "checkbox",
-  "title": "您对哪些技术领域感兴趣？",
-  "description": "请选择您感兴趣的技术领域（可多选）",
-  "options": [
-    {
-      "value": "frontend",
-      "label": "前端开发",
-      "description": "HTML、CSS、JavaScript、Vue、React等",
-      "weight": 5
-    },
-    {
-      "value": "backend",
-      "label": "后端开发",
-      "description": "Node.js、Python、Java、数据库等",
-      "weight": 4
-    },
-    {
-      "value": "mobile",
-      "label": "移动开发",
-      "description": "iOS、Android、React Native、Flutter等",
-      "weight": 3
-    },
-    {
-      "value": "ai",
-      "label": "人工智能",
-      "description": "机器学习、深度学习、自然语言处理等",
-      "weight": 5
-    },
-    {
-      "value": "devops",
-      "label": "DevOps",
-      "description": "CI/CD、Docker、Kubernetes、云服务等",
-      "weight": 2
-    }
-  ],
-  "allowOther": true,
-  "otherPlaceholder": "请输入其他感兴趣的技术领域...",
-  "required": true,
-  "validation": {
-    "rules": [
-      {
-        "type": "required",
-        "message": "请至少选择一个技术领域"
-      },
-      {
-        "type": "custom",
-        "message": "最多只能选择4个选项",
-        "validator": (value:[]) => Array.isArray(value) && value.length <= 4
-      }
-    ]
-  }
-})
-const change = (e)=>{
-  alert(e)
-}
-const val = ref('')
-const val2 = ref('')
 interface Message {
   id: string
   content: string
@@ -739,14 +662,15 @@ watch(() => props.messages.length, () => {
   font-weight: 500;
   font-style: italic;
 }
-
+.chat-history{
+  min-height: calc(100%-240px);
+}
 /* 输入区域 - 奢华设计 */
 .chat-input {
-  padding: 24px 32px 32px;
+  padding: 24px 32px 32px 24px;
   background: linear-gradient(135deg, rgba(8, 8, 8, 0.9), rgba(18, 18, 18, 0.9));
   backdrop-filter: blur(24px) saturate(180%);
   border-top: 1px solid rgba(212, 175, 55, 0.15);
-  position: relative;
   z-index: 2;
   box-shadow:
     0 -1px 0 rgba(212, 175, 55, 0.1),
diff --git a/prompto-lab-ui/src/components/Chat/ChatTree.vue b/prompto-lab-ui/src/components/Chat/ChatTree.vue
deleted file mode 100644
index 4eef6f6..0000000
--- a/prompto-lab-ui/src/components/Chat/ChatTree.vue
+++ /dev/null
@@ -1,383 +0,0 @@
-<template>
-  <div class="chat-tree">
-    <!-- 动态背景效果 -->
-    <div class="tree-background">
-      <div class="gradient-orb orb-1"></div>
-      <div class="gradient-orb orb-2"></div>
-      <div class="floating-particles">
-        <div class="particle" v-for="i in 8" :key="i"></div>
-      </div>
-    </div>
-    
-    <div class="tree-header">
-      <div class="header-icon">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <polyline points="3.27,6.96 12,12.01 20.73,6.96" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <line x1="12" y1="22.08" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-      <h3 class="tree-title">对话树</h3>
-      <div class="tree-status">
-        <span class="status-indicator"></span>
-        <span class="status-text">活跃</span>
-      </div>
-    </div>
-    
-    <div class="tree-container">
-      <TreeNode 
-        v-if="rootNode"
-        :node="rootNode"
-        :conversation-tree="conversationTree"
-        :current-node-id="currentNodeId"
-        :level="0"
-        @node-selected="$emit('nodeSelected', $event)"
-        @branch-deleted="$emit('branchDeleted', $event)"
-      />
-      
-      <!-- 空状态 -->
-      <div v-if="!rootNode" class="empty-state">
-        <div class="empty-icon">
-          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-            <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            <line x1="9" y1="9" x2="9.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            <line x1="15" y1="9" x2="15.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-        </div>
-        <p class="empty-text">暂无对话记录</p>
-        <p class="empty-hint">开始新的对话来构建对话树</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import TreeNode from './TreeNode.vue'
-
-interface ConversationNode {
-  id: string
-  content: string
-  type: 'user' | 'assistant'
-  timestamp: Date
-  parentId?: string
-  children: string[]
-  isActive: boolean
-}
-
-interface Props {
-  conversationTree: Map<string, ConversationNode>
-  currentNodeId: string
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  nodeSelected: [nodeId: string]
-  branchDeleted: [nodeId: string]
-}>()
-
-const rootNode = computed(() => {
-  // 动态查找根节点（没有parentId的节点）
-  for (const [id, node] of props.conversationTree) {
-    if (!node.parentId) {
-      return node
-    }
-  }
-  return null
-})
-</script>
-
-<style scoped>
-.chat-tree {
-  height: 100%;
-  padding: 24px;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-  border-left: 1px solid rgba(212, 175, 55, 0.2);
-  position: relative;
-  overflow: hidden;
-}
-
-/* 动态背景 */
-.tree-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-  overflow: hidden;
-}
-
-.gradient-orb {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(40px);
-  opacity: 0.2;
-  animation: float 15s ease-in-out infinite;
-}
-
-.orb-1 {
-  width: 200px;
-  height: 200px;
-  background: linear-gradient(45deg, #d4af37, #ffd700);
-  top: 20%;
-  left: 10%;
-  animation-delay: 0s;
-}
-
-.orb-2 {
-  width: 150px;
-  height: 150px;
-  background: linear-gradient(45deg, #c0c0c0, #ffffff);
-  bottom: 30%;
-  right: 15%;
-  animation-delay: -7s;
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-  33% {
-    transform: translate(20px, -20px) rotate(120deg);
-  }
-  66% {
-    transform: translate(-15px, 15px) rotate(240deg);
-  }
-}
-
-.floating-particles {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.particle {
-  position: absolute;
-  background: linear-gradient(45deg, #d4af37, #ffd700);
-  border-radius: 50%;
-  opacity: 0.4;
-  animation: particle-float 8s ease-in-out infinite;
-  width: 3px;
-  height: 3px;
-}
-
-.particle:nth-child(odd) {
-  animation-duration: 6s;
-}
-
-.particle:nth-child(3n) {
-  animation-duration: 10s;
-}
-
-@keyframes particle-float {
-  0%, 100% {
-    transform: translateY(0) rotate(0deg);
-    opacity: 0;
-  }
-  10%, 90% {
-    opacity: 0.4;
-  }
-  50% {
-    transform: translateY(-60px) rotate(180deg);
-    opacity: 0.8;
-  }
-}
-
-/* 头部样式 */
-.tree-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 32px;
-  padding: 20px 24px;
-  background: rgba(15, 15, 15, 0.8);
-  border-radius: 16px;
-  border: 1px solid rgba(212, 175, 55, 0.2);
-  backdrop-filter: blur(20px);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  position: relative;
-  z-index: 2;
-}
-
-.header-icon {
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(135deg, #d4af37, #f4d03f);
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #1a1a1a;
-  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
-  transition: all 0.3s ease;
-}
-
-.header-icon:hover {
-  transform: scale(1.05);
-  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.4);
-}
-
-.tree-title {
-  flex: 1;
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
-  background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
-}
-
-.tree-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: rgba(212, 175, 55, 0.1);
-  border: 1px solid rgba(212, 175, 55, 0.3);
-  border-radius: 20px;
-  backdrop-filter: blur(10px);
-}
-
-.status-indicator {
-  width: 8px;
-  height: 8px;
-  background: #28a745;
-  border-radius: 50%;
-  animation: pulse 2s ease-in-out infinite;
-  box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.7;
-    transform: scale(1.2);
-  }
-}
-
-.status-text {
-  font-size: 12px;
-  color: #d4af37;
-  font-weight: 600;
-}
-
-/* 容器样式 */
-.tree-container {
-  max-height: calc(100vh - 200px);
-  overflow-y: auto;
-  padding: 20px;
-  background: rgba(15, 15, 15, 0.6);
-  border-radius: 16px;
-  border: 1px solid rgba(212, 175, 55, 0.1);
-  backdrop-filter: blur(20px);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  position: relative;
-  z-index: 2;
-}
-
-/* 空状态 */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  text-align: center;
-}
-
-.empty-icon {
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(244, 208, 63, 0.05));
-  border: 2px solid rgba(212, 175, 55, 0.2);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #d4af37;
-  margin-bottom: 24px;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.1);
-}
-
-.empty-text {
-  font-size: 18px;
-  font-weight: 600;
-  color: #e8e8e8;
-  margin: 0 0 8px 0;
-}
-
-.empty-hint {
-  font-size: 14px;
-  color: #888;
-  margin: 0;
-  font-weight: 400;
-}
-
-/* 滚动条样式 */
-.tree-container::-webkit-scrollbar {
-  width: 8px;
-}
-
-.tree-container::-webkit-scrollbar-track {
-  background: rgba(15, 15, 15, 0.3);
-  border-radius: 4px;
-}
-
-.tree-container::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(244, 208, 63, 0.4));
-  border-radius: 4px;
-  border: 1px solid rgba(212, 175, 55, 0.2);
-}
-
-.tree-container::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.8), rgba(244, 208, 63, 0.6));
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .chat-tree {
-    padding: 16px;
-  }
-  
-  .tree-header {
-    padding: 16px 20px;
-    margin-bottom: 24px;
-  }
-  
-  .header-icon {
-    width: 40px;
-    height: 40px;
-  }
-  
-  .tree-title {
-    font-size: 18px;
-  }
-  
-  .tree-container {
-    padding: 16px;
-    max-height: calc(100vh - 180px);
-  }
-  
-  .empty-state {
-    padding: 40px 20px;
-  }
-  
-  .empty-icon {
-    width: 60px;
-    height: 60px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/components/FormField.vue b/prompto-lab-ui/src/components/Chat/FormField.vue
similarity index 100%
rename from prompto-lab-ui/src/components/FormField.vue
rename to prompto-lab-ui/src/components/Chat/FormField.vue
diff --git a/prompto-lab-ui/src/components/LoadingAnimation.vue b/prompto-lab-ui/src/components/Chat/LoadingAnimation.vue
similarity index 100%
rename from prompto-lab-ui/src/components/LoadingAnimation.vue
rename to prompto-lab-ui/src/components/Chat/LoadingAnimation.vue
diff --git a/prompto-lab-ui/src/components/MultipleChoiceOptions.vue b/prompto-lab-ui/src/components/Chat/MultipleChoiceOptions.vue
similarity index 100%
rename from prompto-lab-ui/src/components/MultipleChoiceOptions.vue
rename to prompto-lab-ui/src/components/Chat/MultipleChoiceOptions.vue
diff --git a/prompto-lab-ui/src/components/QuestionRenderer.vue b/prompto-lab-ui/src/components/Chat/QuestionRenderer.vue
similarity index 99%
rename from prompto-lab-ui/src/components/QuestionRenderer.vue
rename to prompto-lab-ui/src/components/Chat/QuestionRenderer.vue
index a0547cb..62a8f07 100644
--- a/prompto-lab-ui/src/components/QuestionRenderer.vue
+++ b/prompto-lab-ui/src/components/Chat/QuestionRenderer.vue
@@ -343,6 +343,7 @@ const loadingType = computed(() => {
 // 监听问题变化，重置答案
 watch(() => props.currentQuestion, (newQuestion, oldQuestion) => {
   if (newQuestion && newQuestion !== oldQuestion) {
+    console.log(props.currentQuestion)
     resetAnswers()
   }
 }, { deep: true })
diff --git a/prompto-lab-ui/src/components/SingleChoiceOptions.vue b/prompto-lab-ui/src/components/Chat/SingleChoiceOptions.vue
similarity index 100%
rename from prompto-lab-ui/src/components/SingleChoiceOptions.vue
rename to prompto-lab-ui/src/components/Chat/SingleChoiceOptions.vue
diff --git a/prompto-lab-ui/src/components/Chat/TreeNode.vue b/prompto-lab-ui/src/components/Chat/TreeNode.vue
deleted file mode 100644
index cd0035a..0000000
--- a/prompto-lab-ui/src/components/Chat/TreeNode.vue
+++ /dev/null
@@ -1,355 +0,0 @@
-<template>
-  <div class="tree-node-container">
-    <div 
-      class="tree-node"
-      :class="{ 
-        active: node.id === currentNodeId,
-        inactive: !node.isActive,
-        user: node.type === 'user',
-        assistant: node.type === 'assistant'
-      }"
-      :style="{ marginLeft: level * 24 + 'px' }"
-      @click="selectNode"
-    >
-      <div class="node-content">
-        <div class="node-info">
-          <div class="node-type-wrapper">
-            <span class="node-type">{{ node.type === 'user' ? '👤' : '🤖' }}</span>
-          </div>
-          <span class="node-text">{{ truncatedText }}</span>
-        </div>
-        <div class="node-actions" v-if="node.parentId">
-          <button 
-            @click.stop="deleteNode" 
-            class="btn-delete"
-            :title="`删除此分支`"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-              <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </button>
-        </div>
-      </div>
-      
-      <!-- 分支指示器 -->
-      <div v-if="node.children.length > 1" class="branch-indicator">
-        <div class="branch-badge">
-          <span class="branch-count">{{ node.children.length }}</span>
-          <span class="branch-text">个分支</span>
-        </div>
-      </div>
-    </div>
-    
-    <!-- 递归渲染子节点 -->
-    <div v-if="node.children.length > 0" class="children">
-      <TreeNode 
-        v-for="childId in node.children"
-        :key="childId"
-        :node="conversationTree.get(childId)!"
-        :conversation-tree="conversationTree"
-        :current-node-id="currentNodeId"
-        :level="level + 1"
-        @node-selected="$emit('nodeSelected', $event)"
-        @branch-deleted="$emit('branchDeleted', $event)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface ConversationNode {
-  id: string
-  content: string
-  type: 'user' | 'assistant'
-  timestamp: Date
-  parentId?: string
-  children: string[]
-  isActive: boolean
-}
-
-interface Props {
-  node: ConversationNode
-  conversationTree: Map<string, ConversationNode>
-  currentNodeId: string
-  level: number
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  nodeSelected: [nodeId: string]
-  branchDeleted: [nodeId: string]
-}>()
-
-const truncatedText = computed(() => {
-  const maxLength = 35
-  return props.node.content.length > maxLength 
-    ? props.node.content.substring(0, maxLength) + '...'
-    : props.node.content
-})
-
-const selectNode = () => {
-  emit('nodeSelected', props.node.id)
-}
-
-const deleteNode = () => {
-  if (confirm(`确定要删除这个分支吗？这将删除该节点及其所有后续对话。`)) {
-    emit('branchDeleted', props.node.id)
-  }
-}
-</script>
-
-<style scoped>
-.tree-node-container {
-  margin-bottom: 8px;
-}
-
-.tree-node {
-  padding: 16px 20px;
-  background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(30, 30, 30, 0.8));
-  border-radius: 12px;
-  border: 1px solid rgba(212, 175, 55, 0.2);
-  cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  backdrop-filter: blur(10px);
-  box-shadow: 
-    0 4px 16px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  overflow: hidden;
-}
-
-.tree-node::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  pointer-events: none;
-}
-
-.tree-node:hover {
-  border-color: rgba(212, 175, 55, 0.4);
-  transform: translateY(-2px);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.4),
-    0 0 20px rgba(212, 175, 55, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.tree-node:hover::before {
-  opacity: 1;
-}
-
-.tree-node.active {
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(244, 208, 63, 0.1));
-  border-color: #d4af37;
-  color: #ffffff;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.4),
-    0 0 24px rgba(212, 175, 55, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-
-.tree-node.active::before {
-  opacity: 1;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.05));
-}
-
-.tree-node.inactive {
-  opacity: 0.5;
-  background: linear-gradient(135deg, rgba(15, 15, 15, 0.8), rgba(25, 25, 25, 0.7));
-  border-color: rgba(212, 175, 55, 0.1);
-}
-
-.tree-node.user {
-  border-left: 4px solid #28a745;
-  box-shadow: 
-    0 4px 16px rgba(0, 0, 0, 0.3),
-    -4px 0 12px rgba(40, 167, 69, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-.tree-node.assistant {
-  border-left: 4px solid #d4af37;
-  box-shadow: 
-    0 4px 16px rgba(0, 0, 0, 0.3),
-    -4px 0 12px rgba(212, 175, 55, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-.node-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-}
-
-.node-info {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  gap: 16px;
-}
-
-.node-type-wrapper {
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(135deg, #d4af37, #f4d03f);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
-  transition: all 0.3s ease;
-}
-
-.tree-node:hover .node-type-wrapper {
-  transform: scale(1.1);
-  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
-}
-
-.node-type {
-  font-size: 16px;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-}
-
-.node-text {
-  font-size: 14px;
-  line-height: 1.5;
-  flex: 1;
-  color: #e8e8e8;
-  font-weight: 500;
-  font-family: 'Inter', 'SF Pro Display', sans-serif;
-  transition: all 0.3s ease;
-}
-
-.tree-node:hover .node-text {
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.tree-node.active .node-text {
-  color: #ffffff;
-  font-weight: 600;
-  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
-}
-
-.node-actions {
-  display: flex;
-  gap: 8px;
-  opacity: 0;
-  transition: all 0.3s ease;
-  transform: translateX(10px);
-}
-
-.tree-node:hover .node-actions {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.btn-delete {
-  padding: 8px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(200, 35, 51, 0.9));
-  color: #ffffff;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
-  backdrop-filter: blur(10px);
-}
-
-.btn-delete:hover {
-  background: linear-gradient(135deg, rgba(220, 53, 69, 1), rgba(200, 35, 51, 1));
-  transform: scale(1.1);
-  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5);
-}
-
-.branch-indicator {
-  margin-top: 12px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.branch-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(244, 208, 63, 0.1));
-  border: 1px solid rgba(212, 175, 55, 0.3);
-  border-radius: 20px;
-  padding: 6px 12px;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
-}
-
-.branch-count {
-  font-size: 12px;
-  font-weight: 700;
-  color: #d4af37;
-  text-shadow: 0 0 4px rgba(212, 175, 55, 0.5);
-}
-
-.branch-text {
-  font-size: 11px;
-  color: #b8b8b8;
-  font-weight: 500;
-}
-
-.children {
-  margin-left: 20px;
-  border-left: 2px solid rgba(212, 175, 55, 0.2);
-  padding-left: 16px;
-  position: relative;
-}
-
-.children::before {
-  content: '';
-  position: absolute;
-  left: -1px;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: linear-gradient(180deg, rgba(212, 175, 55, 0.4), transparent);
-  border-radius: 2px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .tree-node {
-    padding: 12px 16px;
-  }
-  
-  .node-info {
-    gap: 12px;
-  }
-  
-  .node-type-wrapper {
-    width: 28px;
-    height: 28px;
-  }
-  
-  .node-type {
-    font-size: 14px;
-  }
-  
-  .node-text {
-    font-size: 13px;
-  }
-  
-  .children {
-    margin-left: 16px;
-    padding-left: 12px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/components/QuestionRendererTest.vue b/prompto-lab-ui/src/components/QuestionRendererTest.vue
deleted file mode 100644
index 6b8c510..0000000
--- a/prompto-lab-ui/src/components/QuestionRendererTest.vue
+++ /dev/null
@@ -1,300 +0,0 @@
-<template>
-  <div class="test-container">
-    <div class="test-header">
-      <h1>QuestionRenderer 组件测试</h1>
-      <div class="test-controls">
-        <button 
-          v-for="(test, index) in testCases" 
-          :key="index"
-          @click="setCurrentTest(index)"
-          :class="{ active: currentTestIndex === index }"
-          class="test-btn"
-        >
-          {{ test.name }}
-        </button>
-        <button @click="resetToInitial" class="test-btn reset-btn">
-          重置到初始状态
-        </button>
-      </div>
-    </div>
-    
-    <div class="test-content">
-      <QuestionRenderer
-        :current-question="currentQuestion"
-        :is-loading="isLoading"
-        @send-message="handleSendMessage"
-        @submit-answer="handleSubmitAnswer"
-      />
-    </div>
-    
-    <div class="test-info">
-      <h3>当前测试数据：</h3>
-      <pre>{{ JSON.stringify(currentQuestion, null, 2) }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import QuestionRenderer from './QuestionRenderer.vue'
-
-// 测试用例数据
-const testCases = [
-  {
-    name: '输入题',
-    data: {
-      questionId: 'input_001',
-      type: 'input',
-      question: '请描述一下你的职业背景和主要技能？',
-      desc: '请详细描述你的工作经历、专业技能以及你认为最有价值的能力。这将帮助我们更好地了解你的背景。',
-      answer: ''
-    }
-  },
-  {
-    name: '单选题',
-    data: {
-      questionId: 'single_001',
-      type: 'single',
-      question: '你最感兴趣的技术领域是什么？',
-      desc: '请从以下选项中选择一个你最感兴趣或最擅长的技术领域。',
-      options: [
-        { id: 'frontend', label: '前端开发' },
-        { id: 'backend', label: '后端开发' },
-        { id: 'mobile', label: '移动开发' },
-        { id: 'ai', label: '人工智能' },
-        { id: 'devops', label: 'DevOps运维' },
-        { id: 'data', label: '数据科学' }
-      ],
-      answer: []
-    }
-  },
-  {
-    name: '多选题',
-    data: {
-      questionId: 'multi_001',
-      type: 'multi',
-      question: '你熟悉哪些编程语言？',
-      desc: '请选择所有你熟悉或使用过的编程语言。可以选择多个选项。',
-      options: [
-        { id: 'javascript', label: 'JavaScript' },
-        { id: 'typescript', label: 'TypeScript' },
-        { id: 'python', label: 'Python' },
-        { id: 'java', label: 'Java' },
-        { id: 'csharp', label: 'C#' },
-        { id: 'go', label: 'Go' },
-        { id: 'rust', label: 'Rust' },
-        { id: 'php', label: 'PHP' }
-      ],
-      answer: []
-    }
-  },
-  {
-    name: '表单题',
-    data: {
-      questionId: 'form_001',
-      type: 'form',
-      question: '个人信息调查表',
-      desc: '请填写以下个人信息，这将帮助我们为你提供更个性化的服务。',
-      fields: [
-        {
-          id: 'name',
-          question: '姓名',
-          type: 'input',
-          desc: '请输入你的真实姓名'
-        },
-        {
-          id: 'experience',
-          question: '工作经验',
-          type: 'single',
-          desc: '请选择你的工作经验年限',
-          options: [
-            { id: '0-1', label: '0-1年' },
-            { id: '1-3', label: '1-3年' },
-            { id: '3-5', label: '3-5年' },
-            { id: '5-10', label: '5-10年' },
-            { id: '10+', label: '10年以上' }
-          ]
-        },
-        {
-          id: 'skills',
-          question: '核心技能',
-          type: 'multi',
-          desc: '请选择你的核心技能（可多选）',
-          options: [
-            { id: 'vue', label: 'Vue.js' },
-            { id: 'react', label: 'React' },
-            { id: 'angular', label: 'Angular' },
-            { id: 'nodejs', label: 'Node.js' },
-            { id: 'spring', label: 'Spring Boot' },
-            { id: 'docker', label: 'Docker' }
-          ]
-        },
-        {
-          id: 'introduction',
-          question: '自我介绍',
-          type: 'input',
-          desc: '请简单介绍一下自己'
-        }
-      ],
-      answer: []
-    }
-  }
-]
-
-const currentTestIndex = ref(-1) // -1 表示初始状态
-const isLoading = ref(false)
-
-const currentQuestion = computed(() => {
-  if (currentTestIndex.value === -1) {
-    return null
-  }
-  return testCases[currentTestIndex.value]?.data || null
-})
-
-const setCurrentTest = (index: number) => {
-  currentTestIndex.value = index
-  isLoading.value = false
-}
-
-const resetToInitial = () => {
-  currentTestIndex.value = -1
-  isLoading.value = false
-}
-
-const handleSendMessage = (content: string) => {
-  console.log('发送消息:', content)
-  // 模拟加载状态
-  isLoading.value = true
-  setTimeout(() => {
-    isLoading.value = false
-    // 可以在这里设置一个测试问题
-    if (content.includes('介绍') || content.includes('自己')) {
-      setCurrentTest(0) // 显示输入题
-    } else if (content.includes('模型') || content.includes('使用')) {
-      setCurrentTest(1) // 显示单选题
-    }
-  }, 1500)
-}
-
-const handleSubmitAnswer = (answerData: any) => {
-  console.log('提交答案:', answerData)
-  // 模拟提交过程
-  isLoading.value = true
-  setTimeout(() => {
-    isLoading.value = false
-    alert(`答案已提交: ${JSON.stringify(answerData, null, 2)}`)
-    // 可以切换到下一个测试或重置
-    resetToInitial()
-  }, 1000)
-}
-</script>
-
-<style scoped>
-.test-container {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
-}
-
-.test-header {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.test-header h1 {
-  color: white;
-  font-size: 2.5rem;
-  margin-bottom: 20px;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.test-controls {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.test-btn {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 25px;
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.test-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-}
-
-.test-btn.active {
-  background: rgba(255, 255, 255, 0.9);
-  color: #667eea;
-  font-weight: 600;
-}
-
-.reset-btn {
-  background: rgba(255, 107, 107, 0.3) !important;
-  border-color: rgba(255, 107, 107, 0.5) !important;
-}
-
-.reset-btn:hover {
-  background: rgba(255, 107, 107, 0.5) !important;
-}
-
-.test-content {
-  margin-bottom: 30px;
-}
-
-.test-info {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border-radius: 15px;
-  padding: 20px;
-  margin-top: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.test-info h3 {
-  color: white;
-  margin-bottom: 15px;
-  font-size: 1.2rem;
-}
-
-.test-info pre {
-  background: rgba(0, 0, 0, 0.3);
-  color: #e2e8f0;
-  padding: 15px;
-  border-radius: 8px;
-  overflow-x: auto;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-@media (max-width: 768px) {
-  .test-container {
-    padding: 10px;
-  }
-  
-  .test-header h1 {
-    font-size: 2rem;
-  }
-  
-  .test-controls {
-    gap: 8px;
-  }
-  
-  .test-btn {
-    padding: 8px 16px;
-    font-size: 0.9rem;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/router/index.ts b/prompto-lab-ui/src/router/index.ts
index 7ab9c22..439feeb 100644
--- a/prompto-lab-ui/src/router/index.ts
+++ b/prompto-lab-ui/src/router/index.ts
@@ -41,14 +41,6 @@ const router = createRouter({
         title: 'API配置 - AI诗人'
       }
     },
-    {
-      path: '/test/question-renderer',
-      name: 'question-renderer-test',
-      component: () => import('../views/QuestionRendererTestView.vue'),
-      meta: {
-        title: 'QuestionRenderer测试 - PromptoLab'
-      }
-    }
   ]
 })
 
diff --git a/prompto-lab-ui/src/views/QuestionRendererTestView.vue b/prompto-lab-ui/src/views/QuestionRendererTestView.vue
deleted file mode 100644
index 22fb206..0000000
--- a/prompto-lab-ui/src/views/QuestionRendererTestView.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <QuestionRendererTest />
-</template>
-
-<script setup lang="ts">
-import QuestionRendererTest from '@/components/QuestionRendererTest.vue'
-</script>
-
-<style scoped>
-/* 这个页面不需要额外样式，所有样式都在组件内部 */
-</style>
\ No newline at end of file