From 8765ccd3aa342e850ccda12d9827b490090c4cbd Mon Sep 17 00:00:00 2001
From: geniusay <969025903@qq.com>
Date: Wed, 20 Aug 2025 23:54:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E6=B8=B2=E6=9F=93=E5=92=8C?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E6=B8=B2=E6=9F=93=E6=B5=8B=E8=AF=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 prompto-lab-ui/src/components/AIChatPage.vue  |  105 +-
 prompto-lab-ui/src/components/FormField.vue   |  239 +++
 .../src/components/LoadingAnimation.vue       |  352 +++++
 .../src/components/MultipleChoiceOptions.vue  |  205 +++
 .../src/components/QuestionRenderer.vue       | 1390 +++++++++++++++++
 .../src/components/QuestionRendererTest.vue   |  300 ++++
 .../src/components/SingleChoiceOptions.vue    |  186 +++
 prompto-lab-ui/src/router/index.ts            |    8 +
 .../src/views/QuestionRendererTestView.vue    |   11 +
 9 files changed, 2792 insertions(+), 4 deletions(-)
 create mode 100644 prompto-lab-ui/src/components/FormField.vue
 create mode 100644 prompto-lab-ui/src/components/LoadingAnimation.vue
 create mode 100644 prompto-lab-ui/src/components/MultipleChoiceOptions.vue
 create mode 100644 prompto-lab-ui/src/components/QuestionRenderer.vue
 create mode 100644 prompto-lab-ui/src/components/QuestionRendererTest.vue
 create mode 100644 prompto-lab-ui/src/components/SingleChoiceOptions.vue
 create mode 100644 prompto-lab-ui/src/views/QuestionRendererTestView.vue

diff --git a/prompto-lab-ui/src/components/AIChatPage.vue b/prompto-lab-ui/src/components/AIChatPage.vue
index 6275380..f04fb59 100644
--- a/prompto-lab-ui/src/components/AIChatPage.vue
+++ b/prompto-lab-ui/src/components/AIChatPage.vue
@@ -34,12 +34,13 @@
       </div>
     </div>
     
-    <!-- 中间对话主页面 -->
+    <!-- 中间问答主页面 -->
     <div class="main-content" :style="{ width: mainContentWidth + 'px' }">
-      <ChatMain 
-        :messages="currentBranchMessages"
+      <QuestionRenderer 
+        :current-question="currentQuestion"
         :is-loading="isLoading"
         @send-message="handleSendMessage"
+        @submit-answer="handleSubmitAnswer"
       />
     </div>
     
@@ -73,7 +74,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import ChatMain from './ChatMain.vue'
+import QuestionRenderer from './QuestionRenderer.vue'
 import ChatTree from './ChatTree.vue'
 import MindMapTree from './MindMapTree.vue'
 import { startConversation, sendMessage, connectSSE, closeSSE, type MessageRequest, type MessageResponse, type ConversationSession } from '@/services/conversationApi'
@@ -124,6 +125,9 @@ const conversationTree = ref<Map<string, ConversationNode>>(new Map())
 const currentNodeId = ref<string>('')
 const isLoading = ref(false)
 
+// 问题状态管理
+const currentQuestion = ref<any>(null)
+
 // 初始化会话
 const initializeSession = async () => {
   if (isInitializing.value) return
@@ -182,6 +186,20 @@ const handleSSEMessage = (response: MessageResponse) => {
   // 根据消息类型处理
   switch (response.type) {
     case 'AI_QUESTION':
+      // 尝试解析问题内容为问题对象
+      try {
+        const questionData = JSON.parse(response.content)
+        if (questionData.type && ['input', 'single', 'multi', 'form'].includes(questionData.type)) {
+          currentQuestion.value = questionData
+          isLoading.value = false
+          break
+        }
+      } catch (e) {
+        console.log('非JSON格式的问题，作为普通消息处理')
+      }
+      // 如果不是问题格式，作为普通消息处理
+      addAIMessage(response.nodeId, response.content)
+      break
     case 'AI_ANSWER':  // 添加对AI_ANSWER类型的处理
       addAIMessage(response.nodeId, response.content)
       break
@@ -376,6 +394,9 @@ const handleSendMessage = async (content: string) => {
     return
   }
   
+  // 重置当前问题状态，进入新的对话
+  currentQuestion.value = null
+  
   const userNodeId = `user_${Date.now()}`
   const userNode: ConversationNode = {
     id: userNodeId,
@@ -439,6 +460,82 @@ const handleSendMessage = async (content: string) => {
   }
 }
 
+// 处理答案提交
+const handleSubmitAnswer = async (answerData: any) => {
+  if (!session.value || !isConnected.value || !currentQuestion.value) {
+    toast.error({
+      title: '提交失败',
+      message: '会话状态异常，请重新开始',
+      duration: 3000
+    })
+    return
+  }
+  
+  isLoading.value = true
+  
+  try {
+    // 构建答案消息
+    let answerContent = ''
+    
+    switch (currentQuestion.value.type) {
+      case 'input':
+        answerContent = `回答：${answerData}`
+        break
+      case 'single':
+        const selectedOption = currentQuestion.value.options.find((opt: any) => opt.id === answerData[0])
+        answerContent = `选择：${selectedOption ? selectedOption.label : answerData[0]}`
+        break
+      case 'multi':
+        const selectedOptions = currentQuestion.value.options.filter((opt: any) => answerData.includes(opt.id))
+        answerContent = `选择：${selectedOptions.map((opt: any) => opt.label).join('、')}`
+        break
+      case 'form':
+        const formAnswers = answerData.map((item: any) => {
+          const field = currentQuestion.value.fields.find((f: any) => f.id === item.id)
+          if (field) {
+            if (field.type === 'input') {
+              return `${field.question}：${item.value[0]}`
+            } else {
+              const selectedOpts = field.options?.filter((opt: any) => item.value.includes(opt.id))
+              return `${field.question}：${selectedOpts?.map((opt: any) => opt.label).join('、') || item.value.join('、')}`
+            }
+          }
+          return `${item.id}：${item.value.join('、')}`
+        })
+        answerContent = `表单回答：\n${formAnswers.join('\n')}`
+        break
+    }
+    
+    // 发送答案到后端
+    const messageRequest: MessageRequest = {
+      sessionId: session.value.sessionId,
+      content: answerContent,
+      type: 'USER_ANSWER'
+    }
+    
+    await sendMessage(messageRequest)
+    
+    // 清除当前问题状态
+    currentQuestion.value = null
+    
+    toast.success({
+      title: '提交成功',
+      message: '答案已提交，等待AI回复',
+      duration: 2000
+    })
+    
+  } catch (error: any) {
+    console.error('提交答案失败:', error)
+    isLoading.value = false
+    
+    toast.error({
+      title: '提交失败',
+      message: error.message || '答案提交失败，请重试',
+      duration: 4000
+    })
+  }
+}
+
 const setNodeAndDescendantsInactive = (nodeId: string) => {
   const node = conversationTree.value.get(nodeId)
   if (node) {
diff --git a/prompto-lab-ui/src/components/FormField.vue b/prompto-lab-ui/src/components/FormField.vue
new file mode 100644
index 0000000..18ba248
--- /dev/null
+++ b/prompto-lab-ui/src/components/FormField.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="form-field">
+    <div class="field-header">
+      <label class="field-label">
+        {{ field.question }}
+        <span v-if="required" class="required-mark">*</span>
+      </label>
+      <p v-if="field.desc" class="field-desc">{{ field.desc }}</p>
+    </div>
+
+    <!-- 输入框字段 -->
+    <div v-if="field.type === 'input'" class="field-input">
+      <div class="field-input-wrapper">
+        <input 
+          :value="inputValue"
+          @input="updateInputValue"
+          :placeholder="`请输入${field.question}...`"
+          class="field-input-control"
+          :disabled="disabled"
+        />
+        <div class="input-focus-line"></div>
+      </div>
+    </div>
+
+    <!-- 单选字段 -->
+    <div v-else-if="field.type === 'single'" class="field-single">
+      <SingleChoiceOptions
+        :options="field.options || []"
+        :selected-value="singleValue"
+        @update:selected-value="updateSingleValue"
+        :disabled="disabled"
+        size="small"
+      />
+    </div>
+
+    <!-- 多选字段 -->
+    <div v-else-if="field.type === 'multi'" class="field-multi">
+      <MultipleChoiceOptions
+        :options="field.options || []"
+        :selected-values="multipleValues"
+        @update:selected-values="updateMultipleValues"
+        :disabled="disabled"
+        size="small"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import SingleChoiceOptions from './SingleChoiceOptions.vue'
+import MultipleChoiceOptions from './MultipleChoiceOptions.vue'
+
+interface Option {
+  id: string
+  label: string
+}
+
+interface FormFieldData {
+  id: string
+  question: string
+  type: 'input' | 'single' | 'multi'
+  options?: Option[]
+  desc?: string
+}
+
+interface Props {
+  field: FormFieldData
+  value?: any
+  disabled?: boolean
+  required?: boolean
+}
+
+interface Emits {
+  'update:value': [value: any]
+  'change': [fieldId: string, value: any]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  required: false
+})
+
+const emit = defineEmits<Emits>()
+
+// 计算属性用于处理不同类型的值
+const inputValue = computed(() => {
+  if (props.field.type === 'input') {
+    return props.value || ''
+  }
+  return ''
+})
+
+const singleValue = computed(() => {
+  if (props.field.type === 'single') {
+    return props.value || ''
+  }
+  return ''
+})
+
+const multipleValues = computed(() => {
+  if (props.field.type === 'multi') {
+    return Array.isArray(props.value) ? props.value : []
+  }
+  return []
+})
+
+// 更新方法
+const updateInputValue = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const newValue = target.value
+  emit('update:value', newValue)
+  emit('change', props.field.id, newValue)
+}
+
+const updateSingleValue = (value: string) => {
+  emit('update:value', value)
+  emit('change', props.field.id, value)
+}
+
+const updateMultipleValues = (values: string[]) => {
+  emit('update:value', values)
+  emit('change', props.field.id, values)
+}
+</script>
+
+<style scoped>
+.form-field {
+  margin-bottom: 24px;
+}
+
+.field-header {
+  margin-bottom: 16px;
+}
+
+.field-label {
+  display: block;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #e8e8e8;
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.required-mark {
+  color: #e53e3e;
+  margin-left: 4px;
+}
+
+.field-desc {
+  font-size: 0.9rem;
+  color: #a0a0a0;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.field-input {
+  width: 100%;
+}
+
+.field-input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.field-input-control {
+  width: 100%;
+  padding: 14px 16px;
+  border: 2px solid rgba(102, 126, 234, 0.1);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  font-size: 1rem;
+  color: #2d3748;
+  transition: all 0.3s ease;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.field-input-control:focus {
+  border-color: #667eea;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.field-input-control:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: rgba(247, 250, 252, 0.8);
+}
+
+.field-input-control::placeholder {
+  color: #a0aec0;
+}
+
+.input-focus-line {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+  border-radius: 1px;
+}
+
+.field-input-control:focus + .input-focus-line {
+  width: 100%;
+}
+
+.field-single,
+.field-multi {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .form-field {
+    margin-bottom: 20px;
+  }
+  
+  .field-label {
+    font-size: 1rem;
+  }
+  
+  .field-desc {
+    font-size: 0.85rem;
+  }
+  
+  .field-input-control {
+    padding: 12px 14px;
+    font-size: 0.95rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/components/LoadingAnimation.vue b/prompto-lab-ui/src/components/LoadingAnimation.vue
new file mode 100644
index 0000000..0f0700e
--- /dev/null
+++ b/prompto-lab-ui/src/components/LoadingAnimation.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="loading-animation">
+    <div class="loading-container">
+      <!-- 动态图标 -->
+      <div class="loading-icon">
+        <div class="icon-wrapper">
+          <span class="main-icon">{{ currentStep.icon }}</span>
+          <div class="icon-pulse"></div>
+        </div>
+      </div>
+      
+      <!-- 动态文字 -->
+      <div class="loading-text">
+        <h3 class="loading-title">{{ currentStep.title }}</h3>
+        <p class="loading-subtitle">{{ currentStep.subtitle }}</p>
+      </div>
+      
+      <!-- 进度条 -->
+      <div class="progress-container">
+        <div class="progress-bar">
+          <div 
+            class="progress-fill" 
+            :style="{ width: `${progress}%` }"
+          ></div>
+          <div class="progress-glow"></div>
+        </div>
+        <div class="progress-text">{{ Math.round(progress) }}%</div>
+      </div>
+      
+      <!-- 装饰性粒子 -->
+      <div class="loading-particles">
+        <div 
+          v-for="i in 8" 
+          :key="i"
+          class="particle"
+          :style="{
+            '--delay': `${i * 0.2}s`,
+            '--angle': `${i * 45}deg`
+          }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+
+interface LoadingStep {
+  icon: string
+  title: string
+  subtitle: string
+  duration: number
+}
+
+interface Props {
+  type?: 'thinking' | 'processing' | 'analyzing' | 'generating'
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'thinking',
+  duration: 3000
+})
+
+// 不同类型的加载步骤
+const loadingSteps: Record<string, LoadingStep[]> = {
+  thinking: [
+    { icon: '🤔', title: '正在思考中...', subtitle: 'AI正在理解您的问题', duration: 1000 },
+    { icon: '💭', title: '分析问题', subtitle: '深度解析问题内容', duration: 1000 },
+    { icon: '✨', title: '准备回答', subtitle: '整理思路，准备最佳答案', duration: 1000 }
+  ],
+  processing: [
+    { icon: '⚡', title: '处理中...', subtitle: '正在处理您的请求', duration: 1000 },
+    { icon: '🔄', title: '数据分析', subtitle: '分析和整理相关信息', duration: 1000 },
+    { icon: '🎯', title: '生成结果', subtitle: '准备个性化回答', duration: 1000 }
+  ],
+  analyzing: [
+    { icon: '🔍', title: '正在分析...', subtitle: '深度分析您的回答', duration: 1000 },
+    { icon: '📊', title: '数据处理', subtitle: '处理和验证信息', duration: 1000 },
+    { icon: '🎨', title: '优化结果', subtitle: '为您定制最佳体验', duration: 1000 }
+  ],
+  generating: [
+    { icon: '🚀', title: '生成中...', subtitle: 'AI正在为您生成内容', duration: 1000 },
+    { icon: '🎭', title: '创意构思', subtitle: '发挥创意，打造独特内容', duration: 1000 },
+    { icon: '🌟', title: '完善细节', subtitle: '精雕细琢，追求完美', duration: 1000 }
+  ]
+}
+
+const currentStepIndex = ref(0)
+const progress = ref(0)
+const startTime = ref(0)
+const animationFrame = ref<number>()
+
+const currentSteps = computed(() => loadingSteps[props.type] || loadingSteps.thinking)
+const currentStep = computed(() => currentSteps.value[currentStepIndex.value] || currentSteps.value[0])
+
+const updateProgress = () => {
+  const elapsed = Date.now() - startTime.value
+  const totalDuration = props.duration
+  const newProgress = Math.min((elapsed / totalDuration) * 100, 100)
+  
+  progress.value = newProgress
+  
+  // 根据进度切换步骤
+  const stepProgress = newProgress / 100 * currentSteps.value.length
+  const newStepIndex = Math.min(Math.floor(stepProgress), currentSteps.value.length - 1)
+  
+  if (newStepIndex !== currentStepIndex.value) {
+    currentStepIndex.value = newStepIndex
+  }
+  
+  if (newProgress < 100) {
+    animationFrame.value = requestAnimationFrame(updateProgress)
+  }
+}
+
+const startAnimation = () => {
+  startTime.value = Date.now()
+  progress.value = 0
+  currentStepIndex.value = 0
+  updateProgress()
+}
+
+const stopAnimation = () => {
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value)
+  }
+}
+
+onMounted(() => {
+  startAnimation()
+})
+
+onUnmounted(() => {
+  stopAnimation()
+})
+
+// 暴露方法供父组件调用
+defineExpose({
+  restart: startAnimation,
+  stop: stopAnimation
+})
+</script>
+
+<style scoped>
+.loading-animation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.loading-container {
+  position: relative;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  padding: 40px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  overflow: hidden;
+}
+
+.loading-icon {
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.icon-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.main-icon {
+  font-size: 3rem;
+  display: block;
+  animation: iconBounce 2s ease-in-out infinite;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+}
+
+.icon-pulse {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+  border: 2px solid #667eea;
+  border-radius: 50%;
+  animation: iconPulse 2s ease-in-out infinite;
+  opacity: 0.6;
+}
+
+.loading-text {
+  margin-bottom: 32px;
+}
+
+.loading-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 8px;
+  animation: textSlideIn 0.6s ease-out;
+}
+
+.loading-subtitle {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+  animation: textSlideIn 0.6s ease-out 0.2s both;
+}
+
+.progress-container {
+  margin-bottom: 20px;
+}
+
+.progress-bar {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.progress-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: progressGlow 2s ease-in-out infinite;
+}
+
+.progress-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #667eea;
+}
+
+.loading-particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.particle {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: #667eea;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0 0;
+  animation: particleFloat 3s ease-in-out infinite;
+  animation-delay: var(--delay);
+  opacity: 0.6;
+}
+
+.particle:nth-child(even) {
+  background: #764ba2;
+}
+
+/* 动画定义 */
+@keyframes iconBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes iconPulse {
+  0%, 100% { 
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.6;
+  }
+  50% { 
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.3;
+  }
+}
+
+@keyframes textSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes progressGlow {
+  0%, 100% { transform: translateX(-100%); }
+  50% { transform: translateX(100%); }
+}
+
+@keyframes particleFloat {
+  0%, 100% {
+    transform: rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle)));
+    opacity: 0;
+  }
+  50% {
+    transform: rotate(var(--angle)) translateX(60px) rotate(calc(-1 * var(--angle)));
+    opacity: 0.6;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .loading-container {
+    padding: 30px 20px;
+    margin: 20px;
+  }
+  
+  .main-icon {
+    font-size: 2.5rem;
+  }
+  
+  .loading-title {
+    font-size: 1.3rem;
+  }
+  
+  .loading-subtitle {
+    font-size: 0.9rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/components/MultipleChoiceOptions.vue b/prompto-lab-ui/src/components/MultipleChoiceOptions.vue
new file mode 100644
index 0000000..3267fdf
--- /dev/null
+++ b/prompto-lab-ui/src/components/MultipleChoiceOptions.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="multiple-choice-options">
+    <div class="options-container">
+      <div 
+        v-for="option in options" 
+        :key="option.id"
+        @click="toggleOption(option.id)"
+        class="option-item"
+        :class="{ 
+          selected: selectedValues.includes(option.id),
+          disabled: disabled
+        }"
+      >
+        <div class="option-checkbox" :class="{ small: size === 'small' }">
+          <div class="checkbox-check">✓</div>
+          <div class="checkbox-ripple"></div>
+        </div>
+        <div class="option-content">
+          <span class="option-label">{{ option.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Option {
+  id: string
+  label: string
+}
+
+interface Props {
+  options: Option[]
+  selectedValues?: string[]
+  disabled?: boolean
+  size?: 'normal' | 'small'
+  maxSelections?: number
+}
+
+interface Emits {
+  'update:selectedValues': [values: string[]]
+  'change': [values: string[]]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedValues: () => [],
+  disabled: false,
+  size: 'normal'
+})
+
+const emit = defineEmits<Emits>()
+
+const toggleOption = (optionId: string) => {
+  if (props.disabled) return
+  
+  const currentValues = [...props.selectedValues]
+  const index = currentValues.indexOf(optionId)
+  
+  if (index > -1) {
+    // 取消选择
+    currentValues.splice(index, 1)
+  } else {
+    // 添加选择
+    if (props.maxSelections && currentValues.length >= props.maxSelections) {
+      return // 达到最大选择数量
+    }
+    currentValues.push(optionId)
+  }
+  
+  emit('update:selectedValues', currentValues)
+  emit('change', currentValues)
+}
+</script>
+
+<style scoped>
+.multiple-choice-options {
+  width: 100%;
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 24px;
+  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: 16px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(20px);
+}
+
+.option-item:hover:not(.disabled) {
+  border-color: rgba(212, 175, 55, 0.4);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(244, 208, 63, 0.05));
+  transform: translateX(4px);
+}
+
+.option-item.selected {
+  border-color: rgba(212, 175, 55, 0.6);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(244, 208, 63, 0.1));
+  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
+}
+
+.option-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.option-checkbox {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(212, 175, 55, 0.4);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.option-checkbox.small {
+  width: 16px;
+  height: 16px;
+}
+
+.option-item.selected .option-checkbox {
+  border-color: #d4af37;
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+}
+
+.checkbox-check {
+  font-size: 12px;
+  color: #1a1a1a;
+  font-weight: 700;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.option-checkbox.small .checkbox-check {
+  font-size: 10px;
+}
+
+.option-item.selected .checkbox-check {
+  opacity: 1;
+}
+
+.checkbox-ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(102, 126, 234, 0.1);
+  opacity: 0;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.option-item:active:not(.disabled) .checkbox-ripple {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.option-content {
+  flex: 1;
+}
+
+.option-label {
+  font-size: 16px;
+  color: #e8e8e8;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.option-item.selected .option-label {
+  color: #667eea;
+  font-weight: 600;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .option-item {
+    padding: 14px 16px;
+  }
+  
+  .option-checkbox {
+    width: 18px;
+    height: 18px;
+    margin-right: 14px;
+  }
+  
+  .option-label {
+    font-size: 0.95rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/components/QuestionRenderer.vue b/prompto-lab-ui/src/components/QuestionRenderer.vue
new file mode 100644
index 0000000..4c3421a
--- /dev/null
+++ b/prompto-lab-ui/src/components/QuestionRenderer.vue
@@ -0,0 +1,1390 @@
+<template>
+  <div class="question-renderer">
+    <!-- 动态背景粒子 -->
+    <div class="question-background">
+      <div class="background-particles">
+        <div class="bg-particle" v-for="i in 12" :key="i"></div>
+      </div>
+    </div>
+
+    <!-- 初始状态：大输入框和快捷按钮 -->
+    <div v-if="!currentQuestion" class="initial-state">
+      <div class="welcome-section">
+        <div class="welcome-icon">
+          <div class="icon-glow"></div>
+          <span class="icon">✨</span>
+        </div>
+        <h2 class="welcome-title">开始您的AI问答之旅</h2>
+        <p class="welcome-subtitle">请输入您的问题，或选择下方快捷选项开始</p>
+      </div>
+
+      <div class="main-input-section">
+        <div class="input-container">
+          <div class="input-wrapper">
+            <div class="input-glow"></div>
+            <textarea 
+              v-model="mainInput"
+              @keydown="handleMainInputKeydown"
+              placeholder="请输入您想了解的问题或需求..."
+              class="main-input"
+              rows="3"
+              ref="mainInputRef"
+            ></textarea>
+            <button 
+              @click="submitMainInput"
+              :disabled="!mainInput.trim() || isLoading"
+              class="main-submit-btn"
+              :class="{ active: mainInput.trim() && !isLoading }"
+            >
+              <div class="btn-glow"></div>
+              <span class="btn-icon">🚀</span>
+              <span class="btn-text">开始问答</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="quick-actions">
+        <div class="action-group">
+          <button 
+            @click="toggleQuickInput('introduce')"
+            class="quick-btn"
+            :class="{ expanded: expandedAction === 'introduce' }"
+          >
+            <span class="btn-icon">👋</span>
+            <span class="btn-text">介绍自己</span>
+          </button>
+          
+          <div v-if="expandedAction === 'introduce'" class="quick-input-container">
+            <div class="quick-input-wrapper">
+              <input 
+                v-model="quickInputs.introduce"
+                @keydown.enter="submitQuickInput('introduce')"
+                placeholder="请简单介绍一下您自己..."
+                class="quick-input"
+                ref="introduceInputRef"
+              />
+              <button 
+                @click="submitQuickInput('introduce')"
+                :disabled="!quickInputs.introduce.trim()"
+                class="quick-submit-btn"
+              >
+                <span>确认</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="action-group">
+          <button 
+            @click="toggleQuickInput('model')"
+            class="quick-btn"
+            :class="{ expanded: expandedAction === 'model' }"
+          >
+            <span class="btn-icon">🤖</span>
+            <span class="btn-text">使用模型</span>
+          </button>
+          
+          <div v-if="expandedAction === 'model'" class="quick-input-container">
+            <div class="quick-input-wrapper">
+              <input 
+                v-model="quickInputs.model"
+                @keydown.enter="submitQuickInput('model')"
+                placeholder="请描述您想使用的AI模型或功能..."
+                class="quick-input"
+                ref="modelInputRef"
+              />
+              <button 
+                @click="submitQuickInput('model')"
+                :disabled="!quickInputs.model.trim()"
+                class="quick-submit-btn"
+              >
+                <span>确认</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 问答状态：根据问题类型渲染不同界面 -->
+    <div v-else class="question-state">
+      <!-- 问题标题和描述 -->
+      <div class="question-header">
+        <div class="question-title">
+          <div class="title-icon">
+            <span>{{ getQuestionIcon(currentQuestion.type) }}</span>
+          </div>
+          <h3>{{ currentQuestion.question }}</h3>
+        </div>
+        <p v-if="currentQuestion.desc" class="question-desc">{{ currentQuestion.desc }}</p>
+      </div>
+
+      <!-- 输入框问题 -->
+      <div v-if="currentQuestion.type === 'input'" class="input-question">
+        <div class="answer-input-container">
+          <div class="answer-input-wrapper">
+            <div class="input-glow"></div>
+            <textarea 
+              v-model="answers.input"
+              @keydown="handleAnswerKeydown"
+              placeholder="请输入您的答案..."
+              class="answer-input"
+              rows="4"
+            ></textarea>
+          </div>
+        </div>
+      </div>
+
+      <!-- 单选问题 -->
+      <div v-else-if="currentQuestion.type === 'single'" class="single-choice-question">
+        <SingleChoiceOptions
+          :options="currentQuestion.options"
+          v-model:selected-value="answers.single"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <!-- 多选问题 -->
+      <div v-else-if="currentQuestion.type === 'multi'" class="multiple-choice-question">
+        <MultipleChoiceOptions
+          :options="currentQuestion.options"
+          v-model:selected-values="answers.multiple"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <!-- 表单问题 -->
+      <div v-else-if="currentQuestion.type === 'form'" class="form-question">
+        <div class="form-fields">
+          <FormField
+            v-for="field in currentQuestion.fields"
+            :key="field.id"
+            :field="field"
+            v-model:value="answers.form[field.id]"
+            :disabled="isLoading"
+            :required="true"
+            @change="handleFormFieldChange"
+          />
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
+      <div class="question-actions">
+        <button 
+          @click="submitAnswer"
+          :disabled="!isAnswerValid() || isLoading"
+          class="submit-answer-btn"
+          :class="{ active: isAnswerValid() && !isLoading }"
+        >
+          <div class="btn-glow"></div>
+          <span class="btn-icon">📝</span>
+          <span class="btn-text">提交答案</span>
+        </button>
+        
+        <button 
+          @click="resetQuestion"
+          class="reset-btn"
+        >
+          <span class="btn-icon">🔄</span>
+          <span class="btn-text">重新开始</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <LoadingAnimation 
+      v-if="isLoading" 
+      :type="loadingType"
+      :duration="3000"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick, computed, watch } from 'vue'
+import LoadingAnimation from './LoadingAnimation.vue'
+import SingleChoiceOptions from './SingleChoiceOptions.vue'
+import MultipleChoiceOptions from './MultipleChoiceOptions.vue'
+import FormField from './FormField.vue'
+
+// 定义问题类型接口
+interface Option {
+  id: string
+  label: string
+}
+
+interface FormFieldData {
+  id: string
+  question: string
+  type: 'input' | 'single' | 'multi'
+  options?: Option[]
+  desc?: string
+  weight?: string
+}
+
+interface BaseQuestion {
+  type: 'input' | 'single' | 'multi' | 'form'
+  question: string
+  desc?: string
+  questionId?: string
+}
+
+interface InputQuestion extends BaseQuestion {
+  type: 'input'
+  answer?: string
+}
+
+interface SingleChoiceQuestion extends BaseQuestion {
+  type: 'single'
+  options: Option[]
+  answer?: string[]
+}
+
+interface MultipleChoiceQuestion extends BaseQuestion {
+  type: 'multi'
+  options: Option[]
+  answer?: string[]
+}
+
+interface FormQuestion extends BaseQuestion {
+  type: 'form'
+  fields: FormFieldData[]
+  answer?: Array<{ id: string; value: string[] }>
+}
+
+type Question = InputQuestion | SingleChoiceQuestion | MultipleChoiceQuestion | FormQuestion
+
+interface Props {
+  currentQuestion?: Question | null
+  isLoading?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  sendMessage: [content: string]
+  submitAnswer: [answer: any]
+}>()
+
+// 响应式数据
+const mainInput = ref('')
+const expandedAction = ref<string | null>(null)
+const quickInputs = reactive({
+  introduce: '',
+  model: ''
+})
+
+// 答案数据
+const answers = reactive({
+  input: '',
+  single: '',
+  multiple: [] as string[],
+  form: {} as Record<string, any>
+})
+
+// 引用
+const mainInputRef = ref<HTMLTextAreaElement>()
+const introduceInputRef = ref<HTMLInputElement>()
+const modelInputRef = ref<HTMLInputElement>()
+
+// 计算属性
+const loadingType = computed(() => {
+  if (!props.currentQuestion) {
+    return 'thinking'
+  }
+  
+  switch (props.currentQuestion.type) {
+    case 'input':
+      return 'analyzing'
+    case 'single':
+    case 'multi':
+      return 'processing'
+    case 'form':
+      return 'generating'
+    default:
+      return 'thinking'
+  }
+})
+
+// 监听问题变化，重置答案
+watch(() => props.currentQuestion, (newQuestion, oldQuestion) => {
+  if (newQuestion && newQuestion !== oldQuestion) {
+    resetAnswers()
+  }
+}, { deep: true })
+
+// 方法
+const resetAnswers = () => {
+  answers.input = ''
+  answers.single = ''
+  answers.multiple = []
+  answers.form = {}
+}
+
+const handleMainInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    submitMainInput()
+  }
+}
+
+const submitMainInput = () => {
+  if (!mainInput.value.trim() || props.isLoading) return
+  
+  emit('sendMessage', mainInput.value.trim())
+  mainInput.value = ''
+}
+
+const toggleQuickInput = (action: string) => {
+  if (expandedAction.value === action) {
+    expandedAction.value = null
+  } else {
+    expandedAction.value = action
+    nextTick(() => {
+      if (action === 'introduce' && introduceInputRef.value) {
+        introduceInputRef.value.focus()
+      } else if (action === 'model' && modelInputRef.value) {
+        modelInputRef.value.focus()
+      }
+    })
+  }
+}
+
+const submitQuickInput = (action: string) => {
+  const content = quickInputs[action as keyof typeof quickInputs]
+  if (!content.trim()) return
+  
+  const prefix = action === 'introduce' ? '自我介绍：' : '使用模型：'
+  emit('sendMessage', prefix + content.trim())
+  
+  quickInputs[action as keyof typeof quickInputs] = ''
+  expandedAction.value = null
+}
+
+const getQuestionIcon = (type: string) => {
+  const icons = {
+    input: '✏️',
+    single: '🔘',
+    multi: '☑️',
+    form: '📋'
+  }
+  return icons[type as keyof typeof icons] || '❓'
+}
+
+const handleFormFieldChange = (fieldId: string, value: any) => {
+  // 表单字段变化处理，已通过v-model自动处理
+  console.log(`Field ${fieldId} changed to:`, value)
+}
+
+const handleAnswerKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && event.ctrlKey) {
+    event.preventDefault()
+    submitAnswer()
+  }
+}
+
+const isAnswerValid = () => {
+  if (!props.currentQuestion) return false
+  
+  switch (props.currentQuestion.type) {
+    case 'input':
+      return answers.input.trim().length > 0
+    case 'single':
+      return answers.single.length > 0
+    case 'multi':
+      return answers.multiple.length > 0
+    case 'form':
+      return props.currentQuestion.fields.every(field => {
+        const answer = answers.form[field.id]
+        if (field.type === 'input') {
+          return answer && answer.trim().length > 0
+        } else if (field.type === 'single') {
+          return answer && answer.length > 0
+        } else if (field.type === 'multi') {
+          return answer && Array.isArray(answer) && answer.length > 0
+        }
+        return false
+      })
+    default:
+      return false
+  }
+}
+
+const submitAnswer = () => {
+  if (!isAnswerValid() || props.isLoading) return
+  
+  let answerData: any
+  
+  switch (props.currentQuestion!.type) {
+    case 'input':
+      answerData = answers.input.trim()
+      break
+    case 'single':
+      answerData = [answers.single]
+      break
+    case 'multi':
+      answerData = [...answers.multiple]
+      break
+    case 'form':
+      answerData = props.currentQuestion!.fields.map(field => ({
+        id: field.id,
+        value: field.type === 'input' 
+          ? [answers.form[field.id]] 
+          : field.type === 'single'
+          ? [answers.form[field.id]]
+          : answers.form[field.id] || []
+      }))
+      break
+  }
+  
+  emit('submitAnswer', answerData)
+}
+
+const resetQuestion = () => {
+  // 重置所有答案
+  answers.input = ''
+  answers.single = ''
+  answers.multiple = []
+  answers.form = {}
+  
+  // 发送重置信号
+  emit('sendMessage', '重新开始')
+}
+</script>
+
+<style scoped>
+/* 主容器 */
+.question-renderer {
+  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;
+}
+
+/* 动态背景 */
+.question-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 15s ease-in-out infinite;
+}
+
+.bg-particle:nth-child(1) { width: 4px; height: 4px; top: 10%; left: 10%; animation-delay: 0s; }
+.bg-particle:nth-child(2) { width: 6px; height: 6px; top: 20%; left: 80%; animation-delay: -2s; }
+.bg-particle:nth-child(3) { width: 3px; height: 3px; top: 70%; 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: 50%; right: 25%; animation-delay: -8s; }
+.bg-particle:nth-child(6) { width: 7px; height: 7px; top: 30%; right: 60%; 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; }
+.bg-particle:nth-child(9) { width: 4px; height: 4px; top: 80%; left: 20%; animation-delay: -16s; }
+.bg-particle:nth-child(10) { width: 6px; height: 6px; top: 40%; left: 70%; animation-delay: -18s; }
+.bg-particle:nth-child(11) { width: 3px; height: 3px; bottom: 80%; right: 40%; animation-delay: -20s; }
+.bg-particle:nth-child(12) { width: 5px; height: 5px; top: 60%; left: 50%; animation-delay: -22s; }
+
+@keyframes bg-float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 0.1;
+  }
+  50% {
+    transform: translateY(-30px) rotate(180deg);
+    opacity: 0.3;
+  }
+}
+
+/* 初始状态样式 */
+.initial-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+  position: relative;
+  z-index: 2;
+  gap: 48px;
+}
+
+.welcome-section {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.welcome-icon {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 24px;
+  position: relative;
+  box-shadow: 
+    0 12px 32px rgba(212, 175, 55, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.icon-glow {
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  background: linear-gradient(45deg, #d4af37, transparent, #f4d03f);
+  border-radius: 50%;
+  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: 36px;
+  z-index: 2;
+  position: relative;
+}
+
+.welcome-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0 0 16px 0;
+  background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.welcome-subtitle {
+  font-size: 16px;
+  color: #a0a0a0;
+  margin: 0;
+  font-weight: 400;
+}
+
+/* 主输入区域 */
+.main-input-section {
+  width: 100%;
+  max-width: 800px;
+}
+
+.input-container {
+  width: 100%;
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  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: 24px;
+  padding: 32px;
+  position: relative;
+  backdrop-filter: blur(20px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 
+    0 12px 40px 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 16px 48px 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: 24px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.input-wrapper:focus-within .input-glow {
+  opacity: 1;
+}
+
+.main-input {
+  width: 100%;
+  min-height: 120px;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 18px;
+  line-height: 1.6;
+  color: #e8e8e8;
+  font-weight: 400;
+}
+
+.main-input::placeholder {
+  color: #666;
+  font-weight: 400;
+}
+
+.main-submit-btn {
+  align-self: flex-end;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 32px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 16px;
+  color: #888;
+  font-size: 16px;
+  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);
+}
+
+.main-submit-btn.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);
+}
+
+.main-submit-btn.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);
+}
+
+/* 快捷操作区域 */
+.quick-actions {
+  display: flex;
+  gap: 24px;
+  width: 100%;
+  max-width: 600px;
+}
+
+.action-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.quick-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px 24px;
+  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: 16px;
+  color: #e8e8e8;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.quick-btn:hover {
+  border-color: rgba(212, 175, 55, 0.4);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(244, 208, 63, 0.05));
+  transform: translateY(-2px);
+  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.2);
+}
+
+.quick-btn.expanded {
+  border-color: rgba(212, 175, 55, 0.5);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(244, 208, 63, 0.1));
+}
+
+.quick-input-container {
+  animation: expand-down 0.3s ease-out;
+}
+
+@keyframes expand-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.quick-input-wrapper {
+  display: flex;
+  gap: 12px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  border-radius: 12px;
+  padding: 16px;
+  backdrop-filter: blur(10px);
+}
+
+.quick-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #e8e8e8;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.quick-input::placeholder {
+  color: #666;
+}
+
+.quick-submit-btn {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+  border: none;
+  border-radius: 8px;
+  color: #1a1a1a;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.quick-submit-btn:hover {
+  transform: scale(1.05);
+}
+
+.quick-submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* 问答状态样式 */
+.question-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 40px;
+  position: relative;
+  z-index: 2;
+  gap: 32px;
+  overflow-y: auto;
+}
+
+.question-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.question-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.title-icon {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
+}
+
+.question-title h3 {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+  color: #e8e8e8;
+}
+
+.question-desc {
+  font-size: 16px;
+  color: #a0a0a0;
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 输入框问题样式 */
+.input-question {
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.answer-input-container {
+  width: 100%;
+}
+
+.answer-input-wrapper {
+  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: 24px;
+  position: relative;
+  backdrop-filter: blur(20px);
+  transition: all 0.3s ease;
+}
+
+.answer-input-wrapper:focus-within {
+  border-color: rgba(212, 175, 55, 0.5);
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3);
+}
+
+.answer-input {
+  width: 100%;
+  min-height: 120px;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #e8e8e8;
+  font-weight: 400;
+}
+
+.answer-input::placeholder {
+  color: #666;
+}
+
+/* 选择题样式 */
+.single-choice-question,
+.multiple-choice-question {
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 24px;
+  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: 16px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(20px);
+}
+
+.option-item:hover {
+  border-color: rgba(212, 175, 55, 0.4);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(244, 208, 63, 0.05));
+  transform: translateX(4px);
+}
+
+.option-item.selected {
+  border-color: rgba(212, 175, 55, 0.6);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(244, 208, 63, 0.1));
+  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
+}
+
+.option-radio {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(212, 175, 55, 0.4);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.option-item.selected .option-radio {
+  border-color: #d4af37;
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+}
+
+.radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.option-item.selected .radio-dot {
+  opacity: 1;
+}
+
+.option-checkbox {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(212, 175, 55, 0.4);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.option-item.selected .option-checkbox {
+  border-color: #d4af37;
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+}
+
+.checkbox-check {
+  font-size: 12px;
+  color: #1a1a1a;
+  font-weight: 700;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.option-item.selected .checkbox-check {
+  opacity: 1;
+}
+
+.option-content {
+  flex: 1;
+}
+
+.option-label {
+  font-size: 16px;
+  color: #e8e8e8;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+/* 表单问题样式 */
+.form-question {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.form-fields {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+}
+
+/* 根据字段数量调整布局 */
+.form-fields:has(.form-field:nth-child(1):nth-last-child(1)) {
+  grid-template-columns: 1fr;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.form-fields:has(.form-field:nth-child(2):nth-last-child(1)) {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.form-fields:has(.form-field:nth-child(3):nth-last-child(1)) {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.form-fields:has(.form-field:nth-child(4):nth-last-child(1)) {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.form-fields:has(.form-field:nth-child(5):nth-last-child(1)) {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* 响应式调整 */
+@media (max-width: 1024px) {
+  .form-fields {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+  
+  .form-fields:has(.form-field:nth-child(3):nth-last-child(1)),
+  .form-fields:has(.form-field:nth-child(4):nth-last-child(1)),
+  .form-fields:has(.form-field:nth-child(5):nth-last-child(1)) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .form-fields {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
+.form-field {
+  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: 20px;
+  backdrop-filter: blur(20px);
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.field-header {
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+
+.field-label {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: #e8e8e8;
+  margin-bottom: 6px;
+  line-height: 1.3;
+}
+
+.field-desc {
+  font-size: 13px;
+  color: #a0a0a0;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.field-input-wrapper {
+  background: rgba(10, 10, 10, 0.5);
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  border-radius: 12px;
+  padding: 16px;
+  transition: all 0.3s ease;
+}
+
+.field-input-wrapper:focus-within {
+  border-color: rgba(212, 175, 55, 0.5);
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3);
+}
+
+.field-input-control {
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #e8e8e8;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.field-input-control::placeholder {
+  color: #666;
+}
+
+.field-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.field-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: rgba(10, 10, 10, 0.5);
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.field-option:hover {
+  border-color: rgba(212, 175, 55, 0.4);
+  background: rgba(212, 175, 55, 0.05);
+}
+
+.field-option.selected {
+  border-color: rgba(212, 175, 55, 0.6);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+.option-radio.small {
+  width: 16px;
+  height: 16px;
+}
+
+.option-radio.small .radio-dot {
+  width: 6px;
+  height: 6px;
+}
+
+.option-checkbox.small {
+  width: 16px;
+  height: 16px;
+}
+
+.option-checkbox.small .checkbox-check {
+  font-size: 10px;
+}
+
+/* 操作按钮 */
+.question-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.submit-answer-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 32px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 16px;
+  color: #888;
+  font-size: 16px;
+  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);
+}
+
+.submit-answer-btn.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);
+}
+
+.submit-answer-btn.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);
+}
+
+.reset-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  color: #a0a0a0;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.reset-btn:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #e8e8e8;
+  transform: translateY(-1px);
+}
+
+.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: 16px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.submit-answer-btn.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;
+}
+
+/* 加载状态已移至LoadingAnimation组件 */
+
+/* 滚动条样式 */
+.question-state::-webkit-scrollbar {
+  width: 6px;
+}
+
+.question-state::-webkit-scrollbar-track {
+  background: rgba(15, 15, 15, 0.3);
+  border-radius: 3px;
+}
+
+.question-state::-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;
+}
+
+.question-state::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(212, 175, 55, 0.6), rgba(212, 175, 55, 0.8));
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .initial-state {
+    padding: 24px;
+    gap: 32px;
+  }
+  
+  .welcome-icon {
+    width: 64px;
+    height: 64px;
+  }
+  
+  .icon {
+    font-size: 28px;
+  }
+  
+  .welcome-title {
+    font-size: 24px;
+  }
+  
+  .input-wrapper {
+    padding: 24px;
+  }
+  
+  .main-input {
+    font-size: 16px;
+    min-height: 100px;
+  }
+  
+  .quick-actions {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .question-state {
+    padding: 24px;
+    gap: 24px;
+  }
+  
+  .question-title {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .title-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+  
+  .question-title h3 {
+    font-size: 20px;
+  }
+  
+  .form-fields {
+    gap: 24px;
+  }
+  
+  .form-field {
+    padding: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .initial-state {
+    padding: 16px;
+  }
+  
+  .input-wrapper {
+    padding: 20px;
+  }
+  
+  .main-submit-btn {
+    padding: 12px 24px;
+    font-size: 14px;
+  }
+  
+  .quick-btn {
+    padding: 16px 20px;
+    font-size: 14px;
+  }
+  
+  .question-state {
+    padding: 16px;
+  }
+  
+  .option-item {
+    padding: 16px 20px;
+  }
+  
+  .form-field {
+    padding: 16px;
+  }
+  
+  .question-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .submit-answer-btn,
+  .reset-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</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
new file mode 100644
index 0000000..6b8c510
--- /dev/null
+++ b/prompto-lab-ui/src/components/QuestionRendererTest.vue
@@ -0,0 +1,300 @@
+<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/components/SingleChoiceOptions.vue b/prompto-lab-ui/src/components/SingleChoiceOptions.vue
new file mode 100644
index 0000000..f2e0a9d
--- /dev/null
+++ b/prompto-lab-ui/src/components/SingleChoiceOptions.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="single-choice-options">
+    <div class="options-container">
+      <div 
+        v-for="option in options" 
+        :key="option.id"
+        @click="selectOption(option.id)"
+        class="option-item"
+        :class="{ 
+          selected: selectedValue === option.id,
+          disabled: disabled
+        }"
+      >
+        <div class="option-radio" :class="{ small: size === 'small' }">
+          <div class="radio-dot"></div>
+          <div class="radio-ripple"></div>
+        </div>
+        <div class="option-content">
+          <span class="option-label">{{ option.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Option {
+  id: string
+  label: string
+}
+
+interface Props {
+  options: Option[]
+  selectedValue?: string
+  disabled?: boolean
+  size?: 'normal' | 'small'
+}
+
+interface Emits {
+  'update:selectedValue': [value: string]
+  'change': [value: string]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'normal'
+})
+
+const emit = defineEmits<Emits>()
+
+const selectOption = (optionId: string) => {
+  if (props.disabled) return
+  
+  emit('update:selectedValue', optionId)
+  emit('change', optionId)
+}
+</script>
+
+<style scoped>
+.single-choice-options {
+  width: 100%;
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 24px;
+  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: 16px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(20px);
+}
+
+.option-item:hover:not(.disabled) {
+  border-color: rgba(212, 175, 55, 0.4);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(244, 208, 63, 0.05));
+  transform: translateX(4px);
+}
+
+.option-item.selected {
+  border-color: rgba(212, 175, 55, 0.6);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(244, 208, 63, 0.1));
+  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
+}
+
+.option-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.option-radio {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(212, 175, 55, 0.4);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.option-radio.small {
+  width: 16px;
+  height: 16px;
+}
+
+.option-item.selected .option-radio {
+  border-color: #d4af37;
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+}
+
+.radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.option-item.selected .radio-dot {
+  opacity: 1;
+}
+
+.radio-ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(102, 126, 234, 0.1);
+  opacity: 0;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.option-item:active:not(.disabled) .radio-ripple {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.option-content {
+  flex: 1;
+}
+
+.option-label {
+  font-size: 16px;
+  color: #e8e8e8;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.option-item.selected .option-label {
+  color: #667eea;
+  font-weight: 600;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .option-item {
+    padding: 14px 16px;
+  }
+  
+  .option-radio {
+    width: 18px;
+    height: 18px;
+    margin-right: 14px;
+  }
+  
+  .option-label {
+    font-size: 0.95rem;
+  }
+}
+</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 8f181e9..7ab9c22 100644
--- a/prompto-lab-ui/src/router/index.ts
+++ b/prompto-lab-ui/src/router/index.ts
@@ -40,6 +40,14 @@ const router = createRouter({
       meta: {
         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
new file mode 100644
index 0000000..22fb206
--- /dev/null
+++ b/prompto-lab-ui/src/views/QuestionRendererTestView.vue
@@ -0,0 +1,11 @@
+<template>
+  <QuestionRendererTest />
+</template>
+
+<script setup lang="ts">
+import QuestionRendererTest from '@/components/QuestionRendererTest.vue'
+</script>
+
+<style scoped>
+/* 这个页面不需要额外样式，所有样式都在组件内部 */
+</style>
\ No newline at end of file