diff --git a/prompto-lab-ui/src/components/AIChatPage.vue b/prompto-lab-ui/src/components/AIChatPage.vue
new file mode 100644
index 0000000..f036f3d
--- /dev/null
+++ b/prompto-lab-ui/src/components/AIChatPage.vue
@@ -0,0 +1,847 @@
+<template>
+  <div class="ai-chat-page">
+    <!-- 动态背景效果 -->
+    <div class="dynamic-background">
+      <div class="gradient-orb orb-1"></div>
+      <div class="gradient-orb orb-2"></div>
+      <div class="gradient-orb orb-3"></div>
+      <div class="floating-particles">
+        <div class="particle" v-for="i in 15" :key="i"></div>
+      </div>
+    </div>
+    
+    <!-- 左侧栏 -->
+    <div class="left-sidebar">
+      <div class="sidebar-content">
+        <div class="sidebar-header">
+          <div class="header-icon">
+            <div class="icon-wrapper">
+              <span class="icon">◈</span>
+            </div>
+          </div>
+          <div class="header-text">
+            <h3>AI助手</h3>
+            <p>智能对话引导</p>
+          </div>
+        </div>
+        <div class="sidebar-placeholder">
+          <div class="placeholder-content">
+            <div class="placeholder-icon">⚡</div>
+            <p>功能面板</p>
+            <span>即将推出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 中间对话主页面 -->
+    <div class="main-content" :style="{ width: mainContentWidth + 'px' }">
+      <ChatMain 
+        :messages="currentBranchMessages"
+        :is-loading="isLoading"
+        @send-message="handleSendMessage"
+      />
+    </div>
+    
+    <!-- 可拖拽的分隔条 -->
+    <div 
+      class="resizer"
+      @mousedown="startResize"
+      @touchstart="startResize"
+    >
+      <div class="resizer-line"></div>
+      <div class="resizer-handle">
+        <div class="resizer-dots">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 右侧思维导图 -->
+    <div class="right-sidebar" :style="{ width: rightSidebarWidth + 'px' }">
+      <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 ChatMain from './ChatMain.vue'
+import MindMapTree from './MindMapTree.vue'
+
+interface Message {
+  id: string
+  content: string
+  type: 'user' | 'assistant'
+  timestamp: Date
+}
+
+interface ConversationNode {
+  id: string
+  content: string
+  type: 'user' | 'assistant'
+  timestamp: Date
+  parentId?: string
+  children: string[]
+  isActive: boolean
+}
+
+// 布局相关的响应式变量
+const containerWidth = ref(1500) // 容器总宽度
+const leftSidebarWidth = 250 // 左侧栏恢复到原始宽度 250px
+const rightSidebarWidth = ref(600) // 右侧栏进一步增加到600px
+const minRightSidebarWidth = 500 // 右侧栏最小宽度增加到500px
+const maxRightSidebarWidth = 1000 // 右侧栏最大宽度增加到1000px
+const resizerWidth = 6 // 分隔条宽度
+// 计算中间内容区域宽度
+const mainContentWidth = computed(() => {
+  return containerWidth.value - leftSidebarWidth - rightSidebarWidth.value - resizerWidth
+})
+
+// 拖拽相关变量
+const isResizing = ref(false)
+const startX = ref(0)
+const startRightWidth = ref(0)
+
+// 对话树存储所有节点
+const conversationTree = ref<Map<string, ConversationNode>>(new Map())
+const currentNodeId = ref<string>('')
+const isLoading = ref(false)
+
+// 初始化根节点
+const initializeTree = () => {
+  const rootNode: ConversationNode = {
+    id: 'root',
+    content: '您好！我是AI助手，有什么可以帮助您的吗？',
+    type: 'assistant',
+    timestamp: new Date(),
+    children: [],
+    isActive: true
+  }
+  
+  conversationTree.value.set('root', rootNode)
+  currentNodeId.value = 'root'
+}
+
+// 计算当前分支的消息列表
+const currentBranchMessages = computed(() => {
+  const messages: Message[] = []
+  const visited = new Set<string>()
+  
+  const buildPath = (nodeId: string): string[] => {
+    const path: string[] = []
+    let current = nodeId
+    
+    while (current && !visited.has(current)) {
+      visited.add(current)
+      path.unshift(current)
+      const node = conversationTree.value.get(current)
+      current = node?.parentId || ''
+    }
+    
+    return path
+  }
+  
+  const path = buildPath(currentNodeId.value)
+  
+  path.forEach(nodeId => {
+    const node = conversationTree.value.get(nodeId)
+    if (node) {
+      messages.push({
+        id: node.id,
+        content: node.content,
+        type: node.type,
+        timestamp: node.timestamp
+      })
+    }
+  })
+  
+  return messages
+})
+
+// 拖拽开始
+const startResize = (event: MouseEvent | TouchEvent) => {
+  isResizing.value = true
+  
+  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX
+  startX.value = clientX
+  startRightWidth.value = rightSidebarWidth.value
+  
+  document.addEventListener('mousemove', handleResize)
+  document.addEventListener('mouseup', stopResize)
+  document.addEventListener('touchmove', handleResize)
+  document.addEventListener('touchend', stopResize)
+  
+  // 防止文本选择
+  document.body.style.userSelect = 'none'
+  document.body.style.cursor = 'col-resize'
+  
+  event.preventDefault()
+}
+
+// 拖拽过程中
+const handleResize = (event: MouseEvent | TouchEvent) => {
+  if (!isResizing.value) return
+  
+  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX
+  const deltaX = startX.value - clientX // 注意方向：向左拖拽为正值
+  const newWidth = startRightWidth.value + deltaX
+  
+  // 限制在最小和最大宽度之间
+  rightSidebarWidth.value = Math.max(
+    minRightSidebarWidth,
+    Math.min(maxRightSidebarWidth, newWidth)
+  )
+  
+  event.preventDefault()
+}
+
+// 拖拽结束
+const stopResize = () => {
+  isResizing.value = false
+  
+  document.removeEventListener('mousemove', handleResize)
+  document.removeEventListener('mouseup', stopResize)
+  document.removeEventListener('touchmove', handleResize)
+  document.removeEventListener('touchend', stopResize)
+  
+  document.body.style.userSelect = ''
+  document.body.style.cursor = ''
+}
+
+// 更新容器宽度
+const updateContainerWidth = () => {
+  containerWidth.value = window.innerWidth
+}
+
+// 生命周期
+onMounted(() => {
+  initializeTree()
+  updateContainerWidth()
+  window.addEventListener('resize', updateContainerWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainerWidth)
+  stopResize() // 确保清理事件监听器
+})
+
+// 其他现有方法保持不变
+const handleSendMessage = async (content: string) => {
+  const userNodeId = `user_${Date.now()}`
+  const userNode: ConversationNode = {
+    id: userNodeId,
+    content,
+    type: 'user',
+    timestamp: new Date(),
+    parentId: currentNodeId.value,
+    children: [],
+    isActive: true
+  }
+  
+  const currentNode = conversationTree.value.get(currentNodeId.value)
+  if (currentNode) {
+    currentNode.children.forEach(childId => {
+      const childNode = conversationTree.value.get(childId)
+      if (childNode) {
+        setNodeAndDescendantsInactive(childId)
+      }
+    })
+    
+    currentNode.children.push(userNodeId)
+  }
+  
+  conversationTree.value.set(userNodeId, userNode)
+  currentNodeId.value = userNodeId
+  
+  isLoading.value = true
+  
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000))
+    
+    const aiNodeId = `ai_${Date.now()}`
+    const aiNode: ConversationNode = {
+      id: aiNodeId,
+      content: generateAIResponse(content),
+      type: 'assistant',
+      timestamp: new Date(),
+      parentId: userNodeId,
+      children: [],
+      isActive: true
+    }
+    
+    userNode.children.push(aiNodeId)
+    conversationTree.value.set(aiNodeId, aiNode)
+    currentNodeId.value = aiNodeId
+  } catch (error) {
+    console.error('发送消息失败:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const setNodeAndDescendantsInactive = (nodeId: string) => {
+  const node = conversationTree.value.get(nodeId)
+  if (node) {
+    node.isActive = false
+    node.children.forEach(childId => {
+      setNodeAndDescendantsInactive(childId)
+    })
+  }
+}
+
+const generateAIResponse = (userInput: string): string => {
+  const responses = [
+    `关于"${userInput}"，这是一个很有趣的问题。让我为您详细解答...`,
+    `我理解您询问的是"${userInput}"。根据我的知识，我可以告诉您...`,
+    `"${userInput}"确实是一个值得探讨的话题。从多个角度来看...`,
+    `感谢您的问题"${userInput}"。我建议我们可以从以下几个方面来分析...`
+  ]
+  
+  return responses[Math.floor(Math.random() * responses.length)]
+}
+
+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) {
+        node.isActive = true
+        if (node.parentId) {
+          activatePath(node.parentId)
+        }
+      }
+    }
+    
+    activatePath(nodeId)
+    currentNodeId.value = nodeId
+  }
+}
+
+const handleBranchDeleted = (nodeId: string) => {
+  const deleteNodeAndDescendants = (id: string) => {
+    const node = conversationTree.value.get(id)
+    if (node) {
+      node.children.forEach(childId => {
+        deleteNodeAndDescendants(childId)
+      })
+      
+      if (node.parentId) {
+        const parentNode = conversationTree.value.get(node.parentId)
+        if (parentNode) {
+          parentNode.children = parentNode.children.filter(childId => childId !== id)
+        }
+      }
+      
+      conversationTree.value.delete(id)
+    }
+  }
+  
+  deleteNodeAndDescendants(nodeId)
+  
+  if (!conversationTree.value.has(currentNodeId.value)) {
+    let newCurrentId = 'root'
+    conversationTree.value.forEach((node, id) => {
+      if (node.isActive && id !== 'root') {
+        newCurrentId = id
+      }
+    })
+    currentNodeId.value = newCurrentId
+  }
+}
+</script>
+
+<style scoped>
+/* 主容器 - 黑金风格 */
+.ai-chat-page {
+  display: flex;
+  height: 100vh;
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  color: #e8e8e8;
+  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow: hidden;
+  position: relative;
+}
+
+/* 动态背景效果 */
+.dynamic-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(60px);
+  opacity: 0.2;
+  animation: float 20s ease-in-out infinite;
+}
+
+.orb-1 {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(45deg, #d4af37, #ffd700);
+  top: 20%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.orb-2 {
+  width: 200px;
+  height: 200px;
+  background: linear-gradient(45deg, #c0c0c0, #ffffff);
+  top: 60%;
+  right: 15%;
+  animation-delay: -10s;
+}
+
+.orb-3 {
+  width: 150px;
+  height: 150px;
+  background: linear-gradient(45deg, #d4af37, #b8860b);
+  bottom: 30%;
+  left: 60%;
+  animation-delay: -5s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  33% {
+    transform: translate(30px, -30px) rotate(120deg);
+  }
+  66% {
+    transform: translate(-20px, 20px) 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: 2px;
+  height: 2px;
+}
+
+.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(-100px) rotate(180deg);
+    opacity: 0.8;
+  }
+}
+
+/* 左侧栏 - 恢复原始宽度 */
+.left-sidebar {
+  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);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+  box-shadow: 
+    inset -1px 0 0 rgba(212, 175, 55, 0.1),
+    0 0 32px rgba(0, 0, 0, 0.3);
+}
+
+.sidebar-content {
+  padding: 24px 20px; /* 恢复原始内边距 */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* 恢复原始间距 */
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  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;
+  backdrop-filter: blur(10px);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.icon-wrapper {
+  width: 48px; /* 恢复到原始的48px */
+  height: 48px;
+  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 
+    0 8px 24px rgba(212, 175, 55, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.icon {
+  font-size: 22px; /* 恢复到原始的22px */
+  color: #1a1a1a;
+  font-weight: 700;
+}
+
+.header-text h3 {
+  margin: 0;
+  font-size: 18px; /* 恢复到原始的18px */
+  font-weight: 700;
+  background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.2;
+}
+
+.header-text p {
+  margin: 4px 0 0 0;
+  font-size: 12px; /* 恢复到原始的12px */
+  color: #888;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.placeholder-content {
+  text-align: center;
+  padding: 32px 20px; /* 恢复原始内边距 */
+  background: rgba(15, 15, 15, 0.6);
+  border: 1px solid rgba(212, 175, 55, 0.1);
+  border-radius: 16px;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.placeholder-icon {
+  font-size: 32px; /* 恢复到原始的32px */
+  margin-bottom: 16px;
+  opacity: 0.6;
+}
+
+.placeholder-content p {
+  margin: 0 0 8px 0;
+  font-size: 16px; /* 恢复到原始的16px */
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.placeholder-content span {
+  font-size: 12px; /* 恢复到原始的12px */
+  color: #888;
+  font-weight: 500;
+}
+
+/* 右侧栏 - 进一步增加宽度 */
+.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 */
+  flex-shrink: 0;
+  border-left: 1px solid rgba(212, 175, 55, 0.15);
+  position: relative;
+  z-index: 2;
+  box-shadow: 
+    inset 1px 0 0 rgba(212, 175, 55, 0.1),
+    0 0 32px rgba(0, 0, 0, 0.3);
+}
+
+/* 主内容区域 - 恢复合适的最小宽度 */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 400px; /* 恢复到400px */
+  background: rgba(10, 10, 10, 0.8);
+  backdrop-filter: blur(20px);
+  position: relative;
+  z-index: 2;
+}
+
+/* 响应式设计调整 */
+@media (max-width: 1200px) {
+  .left-sidebar {
+    width: 220px; /* 在较小屏幕上适当减少 */
+  }
+  
+  .right-sidebar {
+    min-width: 450px;
+  }
+  
+  .main-content {
+    min-width: 350px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .left-sidebar {
+    width: 200px; /* 更小的屏幕进一步调整 */
+  }
+  
+  .right-sidebar {
+    min-width: 400px;
+  }
+}
+
+.sidebar-placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-content {
+  text-align: center;
+  padding: 32px 20px;
+  background: rgba(15, 15, 15, 0.6);
+  border: 1px solid rgba(212, 175, 55, 0.1);
+  border-radius: 16px;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.placeholder-content:hover {
+  border-color: rgba(212, 175, 55, 0.3);
+  background: rgba(15, 15, 15, 0.8);
+}
+
+.placeholder-icon {
+  font-size: 32px;
+  margin-bottom: 16px;
+  opacity: 0.6;
+}
+
+.placeholder-content p {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.placeholder-content span {
+  font-size: 12px;
+  color: #888;
+  font-weight: 500;
+}
+
+/* 主内容区域 */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 400px;
+  background: rgba(10, 10, 10, 0.8);
+  backdrop-filter: blur(20px);
+  position: relative;
+  z-index: 2;
+}
+
+/* 分隔条 - 精致设计 */
+.resizer {
+  width: 6px;
+  background: linear-gradient(180deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.1));
+  cursor: col-resize;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  z-index: 3;
+  border-left: 1px solid rgba(212, 175, 55, 0.2);
+  border-right: 1px solid rgba(212, 175, 55, 0.2);
+}
+
+.resizer:hover {
+  background: linear-gradient(180deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.6), rgba(212, 175, 55, 0.3));
+  box-shadow: 
+    0 0 20px rgba(212, 175, 55, 0.4),
+    inset 0 0 20px rgba(212, 175, 55, 0.2);
+  border-color: rgba(212, 175, 55, 0.5);
+}
+
+.resizer-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.6), transparent);
+  transform: translateX(-50%);
+}
+
+.resizer:hover .resizer-line {
+  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.8), transparent);
+  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
+}
+
+.resizer-handle {
+  width: 24px;
+  height: 48px;
+  background: linear-gradient(135deg, rgba(15, 15, 15, 0.9), rgba(25, 25, 25, 0.9));
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  box-shadow: 
+    0 4px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.resizer:hover .resizer-handle {
+  opacity: 1;
+  transform: scale(1.05);
+  border-color: rgba(212, 175, 55, 0.6);
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.4),
+    0 0 20px rgba(212, 175, 55, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.resizer-dots {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.resizer-dots span {
+  width: 4px;
+  height: 4px;
+  background: linear-gradient(45deg, #d4af37, #f4d03f);
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(212, 175, 55, 0.6);
+  transition: all 0.3s ease;
+}
+
+.resizer:hover .resizer-dots span {
+  background: linear-gradient(45deg, #ffffff, #d4af37);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+  transform: scale(1.2);
+}
+
+/* 右侧栏 */
+.right-sidebar {
+  background: rgba(8, 8, 8, 0.9);
+  backdrop-filter: blur(24px) saturate(180%);
+  min-width: 300px;
+  max-width: 600px;
+  flex-shrink: 0;
+  border-left: 1px solid rgba(212, 175, 55, 0.15);
+  position: relative;
+  z-index: 2;
+  box-shadow: 
+    inset 1px 0 0 rgba(212, 175, 55, 0.1),
+    0 0 32px rgba(0, 0, 0, 0.3);
+}
+
+/* 拖拽时的全局样式 */
+body.resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .left-sidebar {
+    width: 200px;
+  }
+  
+  .sidebar-content {
+    padding: 24px 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .ai-chat-page {
+    flex-direction: column;
+  }
+  
+  .left-sidebar,
+  .right-sidebar {
+    width: 100% !important;
+    height: 200px;
+  }
+  
+  .main-content {
+    width: 100% !important;
+    flex: 1;
+    min-height: 400px;
+  }
+  
+  .resizer {
+    display: none;
+  }
+  
+  .dynamic-background {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .sidebar-content {
+    padding: 16px 12px;
+    gap: 20px;
+  }
+  
+  .sidebar-header {
+    padding: 16px;
+    gap: 12px;
+  }
+  
+  .icon-wrapper {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .icon {
+    font-size: 20px;
+  }
+}
+</style>
diff --git a/prompto-lab-ui/src/components/ApiInfoConfig.vue b/prompto-lab-ui/src/components/ApiInfoConfig.vue
index ad5f102..eef8df0 100644
--- a/prompto-lab-ui/src/components/ApiInfoConfig.vue
+++ b/prompto-lab-ui/src/components/ApiInfoConfig.vue
@@ -119,8 +119,8 @@
               <div class="model-identity">
                 <div
                   class="model-avatar"
-                  :title="'点击复制图标'"
-                  @click="copyToClipboard(getModelIcon(model.provider || 'other'))"
+                  :title="'点击复制模型名: ' + model.modelName"
+                  @click="copyToClipboard(model.modelName)"
                 >
                   <img :src="getProviderIcon(model.provider || 'other')" alt="provider icon" class="provider-icon" />
                 </div>
diff --git a/prompto-lab-ui/src/components/ChatMain.vue b/prompto-lab-ui/src/components/ChatMain.vue
new file mode 100644
index 0000000..70cbc2c
--- /dev/null
+++ b/prompto-lab-ui/src/components/ChatMain.vue
@@ -0,0 +1,850 @@
+<template>
+  <div class="chat-main">
+    <!-- 动态背景粒子 -->
+    <div class="chat-background">
+      <div class="background-particles">
+        <div class="bg-particle" v-for="i in 8" :key="i"></div>
+      </div>
+    </div>
+    
+    <div class="chat-header">
+      <div class="header-content">
+        <div class="header-icon">
+          <div class="icon-glow"></div>
+          <span class="icon">🤖</span>
+        </div>
+        <div class="header-text">
+          <h2>AI 对话助手</h2>
+          <div class="status-indicator">
+            <div class="status-dot"></div>
+            <span>智能分析中</span>
+          </div>
+        </div>
+      </div>
+      <div class="header-actions">
+        <button class="action-btn" title="设置">
+          <span>⚙</span>
+        </button>
+        <button class="action-btn" title="历史">
+          <span>📋</span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="chat-messages" ref="messagesContainer">
+      <div 
+        v-for="message in messages" 
+        :key="message.id"
+        class="message"
+        :class="message.type"
+      >
+        <div class="message-avatar">
+          <div class="avatar-wrapper" :class="message.type">
+            <div class="avatar-glow"></div>
+            <span class="avatar-icon">
+              {{ message.type === 'user' ? '👤' : '🤖' }}
+            </span>
+          </div>
+        </div>
+        <div class="message-content">
+          <div class="message-bubble" :class="message.type">
+            <div class="bubble-glow"></div>
+            <div class="message-text">{{ message.content }}</div>
+            <div class="message-time">{{ formatTime(message.timestamp) }}</div>
+          </div>
+        </div>
+      </div>
+      
+      <div v-if="isLoading" class="message assistant">
+        <div class="message-avatar">
+          <div class="avatar-wrapper assistant">
+            <div class="avatar-glow"></div>
+            <span class="avatar-icon">🤖</span>
+          </div>
+        </div>
+        <div class="message-content">
+          <div class="message-bubble assistant">
+            <div class="bubble-glow"></div>
+            <div class="typing-indicator">
+              <div class="typing-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+              <div class="typing-text">AI正在思考...</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="chat-input">
+      <div class="input-container">
+        <div class="input-wrapper">
+          <div class="input-glow"></div>
+          <textarea 
+            v-model="inputMessage"
+            @keydown="handleKeydown"
+            placeholder="输入您的问题，让AI为您解答..."
+            rows="1"
+            ref="textareaRef"
+            class="message-input"
+          ></textarea>
+          <div class="input-actions">
+            <button class="attachment-btn" title="附件">
+              <span>📎</span>
+            </button>
+            <button 
+              @click="sendMessage"
+              :disabled="!inputMessage.trim() || isLoading"
+              class="send-button"
+              :class="{ active: inputMessage.trim() && !isLoading }"
+            >
+              <div class="btn-glow"></div>
+              <span class="btn-icon">⚡</span>
+              <span class="btn-text">发送</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue'
+
+interface Message {
+  id: string
+  content: string
+  type: 'user' | 'assistant'
+  timestamp: Date
+}
+
+interface Props {
+  messages: Message[]
+  isLoading?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  sendMessage: [content: string]
+}>()
+
+const inputMessage = ref('')
+const messagesContainer = ref<HTMLElement>()
+const textareaRef = ref<HTMLTextAreaElement>()
+
+const sendMessage = () => {
+  if (!inputMessage.value.trim() || props.isLoading) return
+  
+  emit('sendMessage', inputMessage.value.trim())
+  inputMessage.value = ''
+  
+  // 重置textarea高度
+  if (textareaRef.value) {
+    textareaRef.value.style.height = 'auto'
+  }
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    sendMessage()
+  }
+  
+  // 自动调整textarea高度
+  nextTick(() => {
+    if (textareaRef.value) {
+      textareaRef.value.style.height = 'auto'
+      textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
+    }
+  })
+}
+
+const formatTime = (timestamp: Date) => {
+  return timestamp.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 自动滚动到底部
+watch(() => props.messages.length, () => {
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+    }
+  })
+})
+</script>
+
+<style scoped>
+/* 主容器 - 黑金风格 */
+.chat-main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
+  backdrop-filter: blur(20px);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 动态背景 */
+.chat-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.background-particles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.bg-particle {
+  position: absolute;
+  background: linear-gradient(45deg, #d4af37, #ffd700);
+  border-radius: 50%;
+  opacity: 0.1;
+  animation: bg-float 12s ease-in-out infinite;
+}
+
+.bg-particle:nth-child(1) { width: 4px; height: 4px; top: 20%; left: 10%; animation-delay: 0s; }
+.bg-particle:nth-child(2) { width: 6px; height: 6px; top: 60%; left: 20%; animation-delay: -2s; }
+.bg-particle:nth-child(3) { width: 3px; height: 3px; top: 40%; right: 15%; animation-delay: -4s; }
+.bg-particle:nth-child(4) { width: 5px; height: 5px; bottom: 30%; left: 30%; animation-delay: -6s; }
+.bg-particle:nth-child(5) { width: 4px; height: 4px; top: 80%; right: 25%; animation-delay: -8s; }
+.bg-particle:nth-child(6) { width: 7px; height: 7px; top: 10%; right: 40%; animation-delay: -10s; }
+.bg-particle:nth-child(7) { width: 3px; height: 3px; bottom: 60%; right: 10%; animation-delay: -12s; }
+.bg-particle:nth-child(8) { width: 5px; height: 5px; bottom: 20%; left: 60%; animation-delay: -14s; }
+
+@keyframes bg-float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 0.1;
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+    opacity: 0.3;
+  }
+}
+
+/* 聊天头部 - 奢华设计 */
+.chat-header {
+  padding: 24px 32px;
+  background: linear-gradient(135deg, rgba(8, 8, 8, 0.9), rgba(18, 18, 18, 0.9));
+  backdrop-filter: blur(24px) saturate(180%);
+  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 
+    0 1px 0 rgba(212, 175, 55, 0.1),
+    0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.header-icon {
+  width: 56px;
+  height: 56px;
+  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-shadow: 
+    0 8px 24px rgba(212, 175, 55, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.icon-glow {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, #d4af37, transparent, #f4d03f);
+  border-radius: 18px;
+  opacity: 0.6;
+  animation: icon-pulse 3s ease-in-out infinite;
+}
+
+@keyframes icon-pulse {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.05); }
+}
+
+.icon {
+  font-size: 28px;
+  z-index: 2;
+  position: relative;
+}
+
+.header-text h2 {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  border-radius: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+  animation: status-pulse 2s ease-in-out infinite;
+}
+
+@keyframes status-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.status-indicator span {
+  font-size: 12px;
+  color: #22c55e;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-btn {
+  width: 44px;
+  height: 44px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  font-size: 18px;
+}
+
+.action-btn:hover {
+  border-color: rgba(212, 175, 55, 0.5);
+  background: rgba(212, 175, 55, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
+}
+
+/* 消息区域 */
+.chat-messages {
+  flex: 1;
+  padding: 32px;
+  overflow-y: auto;
+  position: relative;
+  z-index: 2;
+  scroll-behavior: smooth;
+}
+
+.message {
+  margin-bottom: 32px;
+  display: flex;
+  gap: 16px;
+  animation: message-appear 0.5s ease-out;
+}
+
+@keyframes message-appear {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message.user {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  flex-shrink: 0;
+}
+
+.avatar-wrapper {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.avatar-wrapper.user {
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
+}
+
+.avatar-wrapper.assistant {
+  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
+}
+
+.avatar-glow {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 50%;
+  opacity: 0.6;
+  animation: avatar-glow 3s ease-in-out infinite;
+}
+
+.avatar-wrapper.user .avatar-glow {
+  background: linear-gradient(45deg, #22c55e, transparent, #16a34a);
+}
+
+.avatar-wrapper.assistant .avatar-glow {
+  background: linear-gradient(45deg, #3b82f6, transparent, #1d4ed8);
+}
+
+@keyframes avatar-glow {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.1); }
+}
+
+.avatar-icon {
+  font-size: 20px;
+  z-index: 2;
+  position: relative;
+}
+
+.message-content {
+  flex: 1;
+  max-width: 70%;
+}
+
+.message-bubble {
+  padding: 20px 24px;
+  border-radius: 20px;
+  position: relative;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+}
+
+.message-bubble.user {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
+  border-color: rgba(34, 197, 94, 0.3);
+  margin-left: auto;
+}
+
+.message-bubble.assistant {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.1));
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.bubble-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 20px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.message-bubble.user .bubble-glow {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
+}
+
+.message-bubble.assistant .bubble-glow {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
+}
+
+.message-bubble:hover .bubble-glow {
+  opacity: 1;
+}
+
+.message-text {
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  color: #e8e8e8;
+  font-size: 15px;
+  font-weight: 400;
+  position: relative;
+  z-index: 2;
+}
+
+.message-time {
+  font-size: 11px;
+  opacity: 0.6;
+  margin-top: 8px;
+  color: #a0a0a0;
+  font-weight: 500;
+  position: relative;
+  z-index: 2;
+}
+
+/* 打字指示器 */
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+  z-index: 2;
+}
+
+.typing-dots {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.typing-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, #3b82f6, #1d4ed8);
+  animation: typing-bounce 1.4s infinite ease-in-out;
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
+}
+
+.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+.typing-dots span:nth-child(3) { animation-delay: 0s; }
+
+@keyframes typing-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+.typing-text {
+  font-size: 14px;
+  color: #a0a0a0;
+  font-weight: 500;
+  font-style: italic;
+}
+
+/* 输入区域 - 奢华设计 */
+.chat-input {
+  padding: 24px 32px 32px;
+  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),
+    0 -8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.input-container {
+  max-width: 100%;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  background: linear-gradient(135deg, rgba(15, 15, 15, 0.9), rgba(25, 25, 25, 0.9));
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 20px;
+  padding: 16px 20px;
+  position: relative;
+  backdrop-filter: blur(20px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.input-wrapper:focus-within {
+  border-color: rgba(212, 175, 55, 0.5);
+  box-shadow: 
+    0 12px 40px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(212, 175, 55, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.input-glow {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: linear-gradient(45deg, rgba(212, 175, 55, 0.3), transparent, rgba(212, 175, 55, 0.3));
+  border-radius: 20px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.input-wrapper:focus-within .input-glow {
+  opacity: 1;
+}
+
+.message-input {
+  flex: 1;
+  min-height: 24px;
+  max-height: 120px;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #e8e8e8;
+  font-weight: 400;
+  overflow-y: auto;
+}
+
+.message-input::placeholder {
+  color: #666;
+  font-weight: 400;
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.attachment-btn {
+  width: 40px;
+  height: 40px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 16px;
+  backdrop-filter: blur(10px);
+}
+
+.attachment-btn:hover {
+  border-color: rgba(212, 175, 55, 0.4);
+  background: rgba(212, 175, 55, 0.1);
+  transform: scale(1.05);
+}
+
+.send-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 12px;
+  color: #888;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.send-button.active {
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+  border-color: #d4af37;
+  color: #1a1a1a;
+  box-shadow: 
+    0 8px 24px rgba(212, 175, 55, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.send-button.active:hover {
+  transform: translateY(-2px);
+  box-shadow: 
+    0 12px 32px rgba(212, 175, 55, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.send-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.btn-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, rgba(212, 175, 55, 0.2), transparent, rgba(212, 175, 55, 0.2));
+  border-radius: 12px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.send-button.active .btn-glow {
+  opacity: 1;
+  animation: btn-shimmer 2s ease-in-out infinite;
+}
+
+@keyframes btn-shimmer {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+.btn-icon {
+  font-size: 16px;
+  position: relative;
+  z-index: 2;
+}
+
+.btn-text {
+  position: relative;
+  z-index: 2;
+}
+
+/* 滚动条样式 */
+.chat-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: rgba(15, 15, 15, 0.3);
+  border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.6));
+  border-radius: 3px;
+  transition: all 0.3s ease;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(212, 175, 55, 0.6), rgba(212, 175, 55, 0.8));
+}
+
+.message-input::-webkit-scrollbar {
+  width: 4px;
+}
+
+.message-input::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.message-input::-webkit-scrollbar-thumb {
+  background: rgba(212, 175, 55, 0.3);
+  border-radius: 2px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .chat-header {
+    padding: 16px 20px;
+  }
+  
+  .header-content {
+    gap: 12px;
+  }
+  
+  .header-icon {
+    width: 48px;
+    height: 48px;
+  }
+  
+  .icon {
+    font-size: 24px;
+  }
+  
+  .header-text h2 {
+    font-size: 20px;
+  }
+  
+  .chat-messages {
+    padding: 20px;
+  }
+  
+  .message {
+    margin-bottom: 24px;
+  }
+  
+  .message-content {
+    max-width: 85%;
+  }
+  
+  .chat-input {
+    padding: 16px 20px 20px;
+  }
+  
+  .input-wrapper {
+    padding: 12px 16px;
+  }
+  
+  .chat-background {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-actions {
+    display: none;
+  }
+  
+  .avatar-wrapper {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .avatar-icon {
+    font-size: 16px;
+  }
+  
+  .message-bubble {
+    padding: 16px 20px;
+  }
+  
+  .message-content {
+    max-width: 90%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/components/ChatTree.vue b/prompto-lab-ui/src/components/ChatTree.vue
new file mode 100644
index 0000000..e634c9f
--- /dev/null
+++ b/prompto-lab-ui/src/components/ChatTree.vue
@@ -0,0 +1,377 @@
+<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(() => {
+  return props.conversationTree.get('root')
+})
+</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/MindMapTree.vue b/prompto-lab-ui/src/components/MindMapTree.vue
new file mode 100644
index 0000000..fb3f5a8
--- /dev/null
+++ b/prompto-lab-ui/src/components/MindMapTree.vue
@@ -0,0 +1,643 @@
+<template>
+  <div class="mind-map-container">
+    <h3>对话思维导图</h3>
+    <div class="mind-map" ref="mindMapRef">
+      <svg 
+        :width="svgWidth" 
+        :height="svgHeight"
+        class="mind-map-svg"
+      >
+        <!-- 连接线 -->
+        <g class="connections">
+          <path 
+            v-for="connection in connections"
+            :key="connection.id"
+            :d="connection.path"
+            class="connection-line"
+            :class="{ active: connection.isActive }"
+          />
+        </g>
+        
+        <!-- 节点 -->
+        <g class="nodes">
+          <g 
+            v-for="node in layoutNodes"
+            :key="node.id"
+            :transform="`translate(${node.x}, ${node.y})`"
+            class="node-group"
+            :class="{ 
+              active: node.id === currentNodeId,
+              inactive: !node.isActive,
+              'has-branches': node.children.length > 1
+            }"
+            @click="selectNode(node.id)"
+          >
+            <!-- 节点背景 -->
+            <rect 
+              :width="node.width"
+              :height="node.height"
+              :rx="8"
+              :ry="8"
+              class="node-bg"
+              :class="node.type"
+            />
+            
+            <!-- 悬停效果背景 -->
+            <rect 
+              :width="node.width + 4"
+              :height="node.height + 4"
+              :x="-2"
+              :y="-2"
+              :rx="10"
+              :ry="10"
+              class="hover-bg"
+            />
+            
+            <!-- 节点图标 -->
+            <text 
+              :x="12"
+              :y="20"
+              class="node-icon"
+            >
+              {{ node.type === 'user' ? '👤' : '🤖' }}
+            </text>
+            
+            <!-- 节点文本 -->
+            <text 
+              :x="35"
+              :y="16"
+              class="node-text"
+            >
+              {{ node.truncatedText }}
+            </text>
+            
+            <!-- 分支数量指示器 -->
+            <circle 
+              v-if="node.children.length > 1"
+              :cx="node.width - 15"
+              :cy="15"
+              r="10"
+              class="branch-indicator"
+            />
+            <text 
+              v-if="node.children.length > 1"
+              :x="node.width - 15"
+              :y="19"
+              class="branch-count"
+              text-anchor="middle"
+            >
+              {{ node.children.length }}
+            </text>
+            
+            <!-- 删除按钮 -->
+            <g 
+              v-if="node.id !== 'root'"
+              class="delete-btn"
+              :transform="`translate(${node.width - 25}, 5)`"
+              @click.stop="deleteNode(node.id)"
+            >
+              <circle r="8" class="delete-bg" />
+              <text x="0" y="3" text-anchor="middle" class="delete-icon">×</text>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+
+interface ConversationNode {
+  id: string
+  content: string
+  type: 'user' | 'assistant'
+  timestamp: Date
+  parentId?: string
+  children: string[]
+  isActive: boolean
+}
+
+interface LayoutNode extends ConversationNode {
+  x: number
+  y: number
+  width: number
+  height: number
+  level: number
+  truncatedText: string
+}
+
+interface Connection {
+  id: string
+  path: 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 mindMapRef = ref<HTMLElement>()
+const svgWidth = ref(800)
+const svgHeight = ref(600)
+const containerWidth = ref(0) // 新增：容器宽度
+
+// 监听容器尺寸变化
+const updateContainerSize = () => {
+  if (mindMapRef.value) {
+    const rect = mindMapRef.value.getBoundingClientRect()
+    const newWidth = rect.width
+    const newHeight = rect.height
+    
+    // 只有当尺寸真正发生变化时才更新
+    if (Math.abs(containerWidth.value - newWidth) > 5) {
+      containerWidth.value = newWidth
+      // 立即更新SVG宽度，确保响应性
+      svgWidth.value = Math.max(newWidth - 48, 600)
+    }
+    
+    if (Math.abs(svgHeight.value - (newHeight - 100)) > 5) {
+      svgHeight.value = Math.max(newHeight - 100, 400)
+    }
+  }
+}
+
+// 使用ResizeObserver监听容器尺寸变化
+let resizeObserver: ResizeObserver | null = null
+
+// 节点布局计算 - 优化布局以适应更宽的容器
+const layoutNodes = computed(() => {
+  const nodes: LayoutNode[] = []
+  const nodeWidth = 200 // 增加节点宽度
+  const nodeHeight = 45 // 稍微增加节点高度
+  const levelGap = Math.max(250, containerWidth.value / 6) // 动态调整层级间距
+  const siblingGap = 70 // 增加兄弟节点间距
+  
+  // 计算每个节点的位置
+  const calculateLayout = (nodeId: string, level: number, siblingIndex: number, parentX?: number, parentY?: number) => {
+    const node = props.conversationTree.get(nodeId)
+    if (!node) return
+    
+    const truncatedText = node.content.length > 25 
+      ? node.content.substring(0, 25) + '...'
+      : node.content
+    
+    let x: number
+    let y: number
+    
+    if (level === 0) {
+      // 根节点居中
+      x = svgWidth.value / 2 - nodeWidth / 2
+      y = 60
+    } else {
+      // 子节点布局
+      const totalSiblings = node.parentId ? 
+        (props.conversationTree.get(node.parentId)?.children.length || 1) : 1
+      
+      x = (parentX || 0) + levelGap
+      
+      // 垂直分布子节点
+      const startY = (parentY || 0) - ((totalSiblings - 1) * siblingGap) / 2
+      y = startY + siblingIndex * siblingGap
+    }
+    
+    const layoutNode: LayoutNode = {
+      ...node,
+      x,
+      y,
+      width: nodeWidth,
+      height: nodeHeight,
+      level,
+      truncatedText
+    }
+    
+    nodes.push(layoutNode)
+    
+    // 递归处理子节点
+    node.children.forEach((childId, index) => {
+      calculateLayout(childId, level + 1, index, x, y + nodeHeight / 2)
+    })
+  }
+  
+  const rootNode = props.conversationTree.get('root')
+  if (rootNode) {
+    calculateLayout('root', 0, 0)
+  }
+  
+  return nodes
+})
+
+// 连接线计算
+const connections = computed(() => {
+  const conns: Connection[] = []
+  
+  layoutNodes.value.forEach(node => {
+    if (node.parentId) {
+      const parent = layoutNodes.value.find(n => n.id === node.parentId)
+      if (parent) {
+        const startX = parent.x + parent.width
+        const startY = parent.y + parent.height / 2
+        const endX = node.x
+        const endY = node.y + node.height / 2
+        
+        // 创建贝塞尔曲线路径
+        const controlX1 = startX + (endX - startX) / 3
+        const controlY1 = startY
+        const controlX2 = startX + (endX - startX) * 2 / 3
+        const controlY2 = endY
+        
+        const path = `M ${startX} ${startY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${endX} ${endY}`
+        
+        conns.push({
+          id: `${parent.id}-${node.id}`,
+          path,
+          isActive: node.isActive && parent.isActive
+        })
+      }
+    }
+  })
+  
+  return conns
+})
+
+// 自动调整SVG尺寸 - 响应布局变化
+watch([layoutNodes, containerWidth], () => {
+  if (layoutNodes.value.length > 0) {
+    const maxX = Math.max(...layoutNodes.value.map(n => n.x + n.width))
+    const maxY = Math.max(...layoutNodes.value.map(n => n.y + n.height))
+    
+    svgWidth.value = Math.max(containerWidth.value - 48, maxX + 100)
+    svgHeight.value = Math.max(600, maxY + 100)
+  }
+}, { immediate: true })
+
+const selectNode = (nodeId: string) => {
+  emit('nodeSelected', nodeId)
+}
+
+const deleteNode = (nodeId: string) => {
+  if (confirm('确定要删除这个分支吗？这将删除该节点及其所有后续对话。')) {
+    emit('branchDeleted', nodeId)
+  }
+}
+
+onMounted(() => {
+  // 初始化尺寸
+  nextTick(() => {
+    updateContainerSize()
+  })
+  
+  // 使用ResizeObserver监听容器尺寸变化
+  if (mindMapRef.value) {
+    resizeObserver = new ResizeObserver((entries) => {
+      // 使用 requestAnimationFrame 确保在下一帧更新
+      requestAnimationFrame(() => {
+        updateContainerSize()
+      })
+    })
+    resizeObserver.observe(mindMapRef.value)
+  }
+  
+  // 监听窗口尺寸变化作为备用
+  window.addEventListener('resize', () => {
+    requestAnimationFrame(updateContainerSize)
+  })
+})
+
+// 添加强制更新方法
+const forceUpdateSize = () => {
+  nextTick(() => {
+    updateContainerSize()
+  })
+}
+
+// 监听父组件传入的数据变化，触发尺寸更新
+watch(() => props.conversationTree.size, () => {
+  nextTick(() => {
+    forceUpdateSize()
+  })
+}, { flush: 'post' })
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+  window.removeEventListener('resize', updateContainerSize)
+})
+</script>
+
+<style scoped>
+/* 主容器 - 优化以支持更大宽度 */
+.mind-map-container {
+  height: 100%;
+  padding: 20px;
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  border-left: 1px solid rgba(212, 175, 55, 0.2);
+  overflow: hidden;
+  position: relative;
+  min-width: 1200px;
+  width: 100%; /* 确保占满父容器 */
+}
+
+.mind-map {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+  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.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  position: relative;
+  z-index: 2;
+}
+
+.mind-map-svg {
+  display: block;
+  min-width: 100%; /* 确保SVG至少占满容器宽度 */
+  transition: width 0.3s ease, height 0.3s ease; /* 添加平滑过渡 */
+  background: 
+    radial-gradient(circle, rgba(212, 175, 55, 0.1) 1px, transparent 1px),
+    linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
+  background-size: 30px 30px, 100% 100%;
+}
+
+/* 添加动态背景效果 */
+.mind-map-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
+    radial-gradient(circle at 80% 70%, rgba(244, 208, 63, 0.03) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.mind-map-container h3 {
+  margin: 0 0 24px 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;
+  position: relative;
+  z-index: 2;
+  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
+}
+
+.mind-map {
+  width: 100%;
+  height: calc(100% - 70px);
+  overflow: auto;
+  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.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  position: relative;
+  z-index: 2;
+}
+
+.mind-map-svg {
+  display: block;
+  background: 
+    radial-gradient(circle, rgba(212, 175, 55, 0.1) 1px, transparent 1px),
+    linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
+  background-size: 30px 30px, 100% 100%;
+}
+/* 连接线样式 - 黄金主题 */
+.connection-line {
+  fill: none;
+  stroke: rgba(212, 175, 55, 0.4);
+  stroke-width: 2;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.3));
+}
+
+.connection-line.active {
+  stroke: #d4af37;
+  stroke-width: 3;
+  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
+  }
+  50% {
+    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.9));
+  }
+}
+
+/* 节点样式 - 奢华设计 */
+.node-group {
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.node-group.inactive {
+  opacity: 0.4;
+}
+
+/* 悬停效果背景 */
+.hover-bg {
+  fill: rgba(212, 175, 55, 0.08);
+  stroke: rgba(212, 175, 55, 0.3);
+  stroke-width: 2;
+  opacity: 0;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.4));
+}
+
+.node-group:hover .hover-bg {
+  opacity: 1;
+  stroke-width: 3;
+}
+
+.node-bg {
+  fill: rgba(20, 20, 20, 0.9);
+  stroke: rgba(212, 175, 55, 0.3);
+  stroke-width: 2;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
+}
+
+.node-bg.user {
+  fill: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
+  stroke: rgba(40, 167, 69, 0.6);
+  filter: drop-shadow(0 0 8px rgba(40, 167, 69, 0.3));
+}
+
+.node-bg.assistant {
+  fill: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
+  stroke: rgba(212, 175, 55, 0.6);
+  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3));
+}
+
+.node-group.active .node-bg {
+  fill: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(244, 208, 63, 0.1));
+  stroke: #d4af37;
+  stroke-width: 3;
+  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
+}
+
+.node-group.active .node-text {
+  fill: #ffffff;
+  font-weight: 700;
+  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
+}
+
+.node-group.has-branches .node-bg {
+  stroke-width: 3;
+  stroke-dasharray: 8,4;
+  animation: dash-flow 3s linear infinite;
+}
+
+@keyframes dash-flow {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 24;
+  }
+}
+
+/* 悬停时增强节点效果 */
+.node-group:hover .node-bg {
+  stroke-width: 3;
+  stroke: #d4af37;
+  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.5));
+  transform: scale(1.02);
+}
+
+.node-icon {
+  font-size: 16px;
+  fill: #d4af37;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
+}
+
+.node-group:hover .node-icon {
+  font-size: 18px;
+  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8));
+}
+
+.node-text {
+  font-size: 13px;
+  fill: #e8e8e8;
+  font-family: 'Inter', 'SF Pro Display', sans-serif;
+  font-weight: 500;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.node-group:hover .node-text {
+  font-weight: 600;
+  fill: #ffffff;
+  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
+}
+
+/* 分支指示器 - 黄金主题 */
+.branch-indicator {
+  fill: linear-gradient(135deg, #d4af37, #f4d03f);
+  stroke: #b8860b;
+  stroke-width: 2;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
+}
+
+.node-group:hover .branch-indicator {
+  fill: #ffd700;
+  stroke-width: 3;
+  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
+  transform: scale(1.1);
+}
+
+.branch-count {
+  font-size: 11px;
+  fill: #1a1a1a;
+  font-weight: 700;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+}
+
+/* 删除按钮 - 精致设计 */
+.delete-btn {
+  opacity: 0;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.node-group:hover .delete-btn {
+  opacity: 1;
+}
+
+.delete-bg {
+  fill: linear-gradient(135deg, #dc3545, #c82333);
+  stroke: #a71e2a;
+  stroke-width: 2;
+  transition: all 0.3s ease;
+  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.4));
+}
+
+.delete-icon {
+  font-size: 14px;
+  fill: #ffffff;
+  font-weight: 700;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+}
+
+.delete-btn:hover .delete-bg {
+  fill: #c82333;
+  transform: scale(1.15);
+  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.7));
+}
+
+/* 滚动条样式 - 黄金主题 */
+.mind-map::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.mind-map::-webkit-scrollbar-track {
+  background: rgba(15, 15, 15, 0.5);
+  border-radius: 8px;
+  border: 1px solid rgba(212, 175, 55, 0.1);
+}
+
+.mind-map::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(244, 208, 63, 0.4));
+  border-radius: 8px;
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.mind-map::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.8), rgba(244, 208, 63, 0.6));
+  box-shadow: 
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 0 8px rgba(212, 175, 55, 0.4);
+}
+
+/* 滚动条角落 */
+.mind-map::-webkit-scrollbar-corner {
+  background: rgba(15, 15, 15, 0.5);
+}
+</style>
diff --git a/prompto-lab-ui/src/components/TreeNode.vue b/prompto-lab-ui/src/components/TreeNode.vue
new file mode 100644
index 0000000..b19f614
--- /dev/null
+++ b/prompto-lab-ui/src/components/TreeNode.vue
@@ -0,0 +1,355 @@
+<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.id !== 'root'">
+          <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/router/index.ts b/prompto-lab-ui/src/router/index.ts
index f8ec092..8f181e9 100644
--- a/prompto-lab-ui/src/router/index.ts
+++ b/prompto-lab-ui/src/router/index.ts
@@ -17,6 +17,14 @@ const router = createRouter({
         title: '登录注册 - AI诗人'
       }
     },
+    {
+      path: '/prompt-builder',
+      name: 'prompt-builder',
+      component: () => import('../views/PromptBuilderView.vue'),
+      meta: {
+        title: 'AI构建器 - PromptoLab'
+      }
+    },
     {
       path: '/settings',
       name: 'settings',
diff --git a/prompto-lab-ui/src/views/PromptBuilderView.vue b/prompto-lab-ui/src/views/PromptBuilderView.vue
new file mode 100644
index 0000000..f4d172a
--- /dev/null
+++ b/prompto-lab-ui/src/views/PromptBuilderView.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="prompt-builder-view">
+    <!-- 动态背景 -->
+    <div class="background-container">
+      <div class="gradient-orb orb-1"></div>
+      <div class="gradient-orb orb-2"></div>
+      <div class="gradient-orb orb-3"></div>
+      <div class="floating-particles">
+        <div class="particle" v-for="i in 8" :key="i" :style="getParticleStyle(i)"></div>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="builder-container">
+      <!-- AI聊天页面组件 -->
+      <AIChatPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import AIChatPage from '@/components/AIChatPage.vue'
+
+// 粒子动画样式
+const getParticleStyle = (index: number) => {
+  const delay = index * 0.5
+  const duration = 3 + Math.random() * 2
+  return {
+    animationDelay: `${delay}s`,
+    animationDuration: `${duration}s`
+  }
+}
+</script>
+
+<style scoped>
+.prompt-builder-view {
+  height: 100vh;
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  color: #e8e8e8;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 动态背景 */
+.background-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.gradient-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  opacity: 0.6;
+  animation: float 6s ease-in-out infinite;
+}
+
+.orb-1 {
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, #d4af37 0%, transparent 70%);
+  top: 10%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.orb-2 {
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, #f4d03f 0%, transparent 70%);
+  top: 60%;
+  right: 20%;
+  animation-delay: 2s;
+}
+
+.orb-3 {
+  width: 250px;
+  height: 250px;
+  background: radial-gradient(circle, #b8860b 0%, transparent 70%);
+  bottom: 20%;
+  left: 30%;
+  animation-delay: 4s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  33% { transform: translateY(-20px) rotate(120deg); }
+  66% { transform: translateY(10px) rotate(240deg); }
+}
+
+.floating-particles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.particle {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: linear-gradient(45deg, #d4af37, #f4d03f);
+  border-radius: 50%;
+  animation: particle-float 4s linear infinite;
+}
+
+.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
+.particle:nth-child(2) { left: 20%; animation-delay: 0.5s; }
+.particle:nth-child(3) { left: 30%; animation-delay: 1s; }
+.particle:nth-child(4) { left: 40%; animation-delay: 1.5s; }
+.particle:nth-child(5) { left: 50%; animation-delay: 2s; }
+.particle:nth-child(6) { left: 60%; animation-delay: 2.5s; }
+.particle:nth-child(7) { left: 70%; animation-delay: 3s; }
+.particle:nth-child(8) { left: 80%; animation-delay: 3.5s; }
+
+@keyframes particle-float {
+  0% {
+    transform: translateY(100vh) scale(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100px) scale(1);
+    opacity: 0;
+  }
+}
+
+/* 主要布局 */
+.builder-container {
+  height: 100vh;
+  position: relative;
+  z-index: 2;
+}
+</style>
\ No newline at end of file