feat: 前后端分离架构 — FastAPI SSE后端 + Vue 3前端

将单体 Streamlit 应用拆分为三层架构：
- api_server.py: FastAPI SSE 流式后端 (端口 8000)
- frontend/: Vue 3 + Vite + Pinia 聊天前端 (端口 5173)
- agent/graph.py: 新增 node_start 回调支持
- 更新启动脚本为三服务模式

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/ChatMessages.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { useChatStore, type Message } from '../stores/chat'
+import { formatTime } from '../utils/format'
+
+const chat = useChatStore()
+
+function renderContent(msg: Message): { text: string; isXml: boolean } {
+  if (msg.type === 'jrxml') {
+    return { text: msg.content, isXml: true }
+  }
+  return { text: msg.content, isXml: false }
+}
+</script>
+
+<template>
+  <div class="chat-messages" ref="scrollRef">
+    <div v-if="chat.messages.length === 0 && !chat.streaming" class="empty-state">
+      <div class="empty-icon">📋</div>
+      <p>开始对话 — 描述您需要的报表</p>
+    </div>
+
+    <div
+      v-for="msg in chat.messages"
+      :key="msg.id"
+      class="message"
+      :class="`msg-${msg.role}`"
+    >
+      <div class="msg-header">
+        <span class="msg-role">{{ msg.role === 'user' ? '您' : 'AI' }}</span>
+        <span class="msg-time">{{ formatTime(msg.timestamp) }}</span>
+      </div>
+      <div class="msg-body">
+        <template v-if="renderContent(msg).isXml">
+          <pre class="code-block">{{ renderContent(msg).text }}</pre>
+        </template>
+        <template v-else>
+          <div class="markdown-body" v-text="renderContent(msg).text"></div>
+        </template>
+      </div>
+      <div v-if="msg.type === 'error'" class="msg-tag error-tag">错误</div>
+      <div v-if="msg.type === 'success'" class="msg-tag success-tag">成功</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6c7086;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+}
+
+.empty-state p {
+  font-size: 14px;
+}
+
+.message {
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  max-width: 85%;
+}
+
+.msg-user {
+  margin-left: auto;
+  background: #313244;
+}
+
+.msg-assistant {
+  margin-right: auto;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+}
+
+.msg-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.msg-role {
+  font-size: 12px;
+  font-weight: 600;
+  color: #cba6f7;
+}
+
+.msg-time {
+  font-size: 11px;
+  color: #6c7086;
+}
+
+.msg-body {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #cdd6f4;
+  word-break: break-word;
+}
+
+.code-block {
+  background: #11111b;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  overflow-x: auto;
+  white-space: pre;
+  color: #a6e3a1;
+}
+
+.markdown-body {
+  white-space: pre-wrap;
+}
+
+.msg-tag {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.error-tag {
+  background: #f38ba8;
+  color: #1e1e2e;
+}
+
+.success-tag {
+  background: #a6e3a1;
+  color: #1e1e2e;
+}
+</style>

frontend/src/components/NodeProgress.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useChatStore } from '../stores/chat'
+import { computed } from 'vue'
+
+const chat = useChatStore()
+
+const visibleNodes = computed(() =>
+  chat.nodes.filter(n => n.node !== 'load_session'
+    && n.node !== 'process_input'
+    && n.node !== 'manage_context'
+    && n.node !== 'save_state_snapshot'
+    && n.node !== 'save_session')
+)
+
+const currentLabel = computed(() => {
+  const running = visibleNodes.value.find(n => n.status === 'running')
+  return running ? running.label : null
+})
+</script>
+
+<template>
+  <div v-if="chat.streaming && visibleNodes.length > 0" class="node-progress">
+    <div class="progress-label">
+      {{ currentLabel || '处理中...' }}
+    </div>
+    <div class="progress-dots">
+      <span
+        v-for="n in visibleNodes"
+        :key="n.node"
+        class="dot"
+        :class="{ done: n.status === 'done', active: n.status === 'running' }"
+      ></span>
+    </div>
+    <div class="progress-detail" v-if="visibleNodes[visibleNodes.length - 1]?.detail">
+      {{ visibleNodes[visibleNodes.length - 1].detail }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.node-progress {
+  padding: 8px 16px;
+  margin: 0 24px 8px;
+  background: #181825;
+  border-radius: 8px;
+  border: 1px solid #313244;
+}
+
+.progress-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #89b4fa;
+  margin-bottom: 4px;
+}
+
+.progress-dots {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #45475a;
+}
+
+.dot.active {
+  background: #f9e2af;
+  animation: pulse 1s infinite;
+}
+
+.dot.done {
+  background: #a6e3a1;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.progress-detail {
+  font-size: 11px;
+  color: #6c7086;
+}
+</style>

frontend/src/components/Sidebar.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useSessionStore } from '../stores/session'
+import { useChatStore } from '../stores/chat'
+
+const session = useSessionStore()
+const chat = useChatStore()
+
+onMounted(() => {
+  session.loadSessions()
+})
+
+async function handleNew() {
+  const sid = await session.createSession()
+  await session.switchSession(sid)
+  chat.reset()
+}
+
+async function handleSwitch(sid: string) {
+  await session.switchSession(sid)
+  chat.reset()
+}
+
+async function handleDelete() {
+  if (!session.currentId) return
+  if (!confirm('确定要删除当前会话吗？')) return
+  await session.deleteCurrent()
+  chat.reset()
+}
+</script>
+
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <h2>JRXML Agent</h2>
+    </div>
+
+    <div class="sidebar-section">
+      <div class="section-title">
+        <span>会话列表</span>
+        <button class="btn-icon" @click="handleNew" title="新建会话">+</button>
+      </div>
+
+      <div class="session-list">
+        <div
+          v-for="s in session.sortedSessions"
+          :key="s.session_id"
+          class="session-item"
+          :class="{ active: s.session_id === session.currentId }"
+          @click="handleSwitch(s.session_id)"
+        >
+          <span class="session-name">{{ s.session_name }}</span>
+          <span class="session-time">{{ s.updated_at?.slice(0, 10) }}</span>
+        </div>
+      </div>
+
+      <button
+        v-if="session.currentId"
+        class="btn-delete"
+        @click="handleDelete"
+      >
+        删除当前会话
+      </button>
+    </div>
+
+    <div class="sidebar-section" v-if="session.currentJrxml">
+      <div class="section-title">下载</div>
+      <a
+        :href="`/api/sessions/${session.currentId}/download/latest`"
+        class="btn-download"
+        download
+      >
+        下载最新 JRXML
+      </a>
+    </div>
+
+    <div class="sidebar-footer">
+      <span>v5.0</span>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  width: 260px;
+  height: 100vh;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #313244;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 20px 16px 12px;
+  border-bottom: 1px solid #313244;
+}
+
+.sidebar-header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #cba6f7;
+}
+
+.sidebar-section {
+  padding: 12px 0;
+  border-bottom: 1px solid #313244;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #a6adc8;
+  letter-spacing: 0.5px;
+}
+
+.btn-icon {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: #313244;
+  color: #cdd6f4;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.btn-icon:hover {
+  background: #45475a;
+}
+
+.session-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.session-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  transition: background 0.15s;
+}
+
+.session-item:hover {
+  background: #313244;
+}
+
+.session-item.active {
+  background: #45475a;
+  border-left: 3px solid #cba6f7;
+  padding-left: 13px;
+}
+
+.session-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 150px;
+}
+
+.session-time {
+  font-size: 11px;
+  color: #6c7086;
+  flex-shrink: 0;
+}
+
+.btn-delete {
+  display: block;
+  width: calc(100% - 32px);
+  margin: 8px 16px 0;
+  padding: 6px 12px;
+  border: 1px solid #f38ba8;
+  background: transparent;
+  color: #f38ba8;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.btn-delete:hover {
+  background: #f38ba8;
+  color: #1e1e2e;
+}
+
+.btn-download {
+  display: block;
+  padding: 8px 16px;
+  color: #a6e3a1;
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.btn-download:hover {
+  background: #313244;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding: 12px 16px;
+  font-size: 11px;
+  color: #6c7086;
+  border-top: 1px solid #313244;
+}
+</style>

frontend/src/components/StreamingMessage.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useChatStore } from '../stores/chat'
+
+const chat = useChatStore()
+</script>
+
+<template>
+  <div v-if="chat.streaming" class="streaming-message">
+    <div class="stream-header">
+      <span class="stream-label">AI 正在生成...</span>
+    </div>
+    <pre class="stream-code" v-if="chat.streamText">{{ chat.streamText }}</pre>
+    <div v-else class="stream-waiting">
+      <span class="dot-pulse"></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.streaming-message {
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: #1e1e2e;
+  border: 1px solid #45475a;
+  max-width: 85%;
+}
+
+.stream-header {
+  margin-bottom: 8px;
+}
+
+.stream-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #f9e2af;
+}
+
+.stream-code {
+  background: #11111b;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  color: #a6e3a1;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.stream-waiting {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.dot-pulse::after {
+  content: '...';
+  animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+  0%, 20% { content: '.'; }
+  40% { content: '..'; }
+  60%, 100% { content: '...'; }
+}
+</style>

frontend/src/components/SummaryCard.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSessionStore } from '../stores/session'
+import { useChatStore } from '../stores/chat'
+
+const session = useSessionStore()
+const chat = useChatStore()
+
+const visible = computed(() =>
+  !chat.streaming && chat.summary.status !== ''
+)
+
+function downloadLatest() {
+  if (session.currentId) {
+    window.open(`/api/sessions/${session.currentId}/download/latest`, '_blank')
+  }
+}
+</script>
+
+<template>
+  <div v-if="visible" class="summary-card">
+    <div v-if="chat.summary.status === 'pass'" class="card card-success">
+      <div class="card-title">JRXML 生成成功</div>
+      <div class="card-text">生成 {{ chat.summary.jrxml_length }} 字符</div>
+      <button class="card-btn" @click="downloadLatest">下载 JRXML</button>
+    </div>
+
+    <div v-else class="card card-error">
+      <div class="card-title">
+        经过 {{ chat.summary.retry_count }} 次重试后仍失败
+      </div>
+      <div class="card-text">{{ chat.summary.error_msg }}</div>
+      <div v-if="chat.summary.natural_explanation" class="card-reason">
+        {{ chat.summary.natural_explanation }}
+      </div>
+      <div class="card-hint">请继续描述修改需求，系统会自动加载失败上下文。</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.summary-card {
+  margin: 12px 24px;
+}
+
+.card {
+  padding: 12px 16px;
+  border-radius: 10px;
+  border: 1px solid;
+}
+
+.card-success {
+  background: #1e1e2e;
+  border-color: #a6e3a1;
+}
+
+.card-error {
+  background: #1e1e2e;
+  border-color: #f38ba8;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.card-success .card-title {
+  color: #a6e3a1;
+}
+
+.card-error .card-title {
+  color: #f38ba8;
+}
+
+.card-text {
+  font-size: 13px;
+  color: #cdd6f4;
+  margin-bottom: 4px;
+}
+
+.card-reason {
+  font-size: 12px;
+  color: #a6adc8;
+  margin-bottom: 4px;
+}
+
+.card-hint {
+  font-size: 11px;
+  color: #6c7086;
+  margin-top: 8px;
+}
+
+.card-btn {
+  margin-top: 8px;
+  padding: 6px 16px;
+  background: #a6e3a1;
+  color: #1e1e2e;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.card-btn:hover {
+  background: #94e2d5;
+}
+</style>

frontend/src/components/UnifiedInput.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { fileIcon } from '../utils/format'
+
+const props = defineProps<{
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  send: [text: string, files: File[]]
+}>()
+
+const text = ref('')
+const attachedFiles = ref<{ id: string; name: string; file: File }[]>([])
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const canSend = computed(() =>
+  !props.disabled && (text.value.trim() || attachedFiles.value.length > 0)
+)
+
+function triggerFileInput() {
+  fileInputRef.value?.click()
+}
+
+function handleFileSelect(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files) {
+    for (const f of input.files) {
+      attachedFiles.value.push({ id: crypto.randomUUID(), name: f.name, file: f })
+    }
+  }
+  input.value = ''
+}
+
+function removeFile(id: string) {
+  attachedFiles.value = attachedFiles.value.filter(f => f.id !== id)
+}
+
+function handleSend() {
+  if (!canSend.value) return
+  emit('send', text.value, attachedFiles.value.map(f => f.file))
+  text.value = ''
+  attachedFiles.value = []
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSend()
+  }
+}
+
+// Auto-resize textarea
+function autoResize() {
+  const el = textareaRef.value
+  if (el) {
+    el.style.height = 'auto'
+    el.style.height = Math.min(el.scrollHeight, 120) + 'px'
+  }
+}
+
+// Drag & drop
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  if (e.dataTransfer?.files) {
+    for (const f of e.dataTransfer.files) {
+      attachedFiles.value.push({ id: crypto.randomUUID(), name: f.name, file: f })
+    }
+  }
+}
+
+function handleDragover(e: DragEvent) {
+  e.preventDefault()
+  if (e.dataTransfer) {
+    e.dataTransfer.dropEffect = 'copy'
+  }
+}
+
+// Paste support
+function handlePaste(e: ClipboardEvent) {
+  const items = e.clipboardData?.items
+  if (!items) return
+  for (const item of items) {
+    if (item.kind === 'file') {
+      const f = item.getAsFile()
+      if (f) {
+        e.preventDefault()
+        attachedFiles.value.push({ id: crypto.randomUUID(), name: f.name || 'clipboard.png', file: f })
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="unified-input" @drop="handleDrop" @dragover="handleDragover">
+    <!-- File chips -->
+    <div v-if="attachedFiles.length > 0" class="file-chips">
+      <div v-for="f in attachedFiles" :key="f.id" class="chip">
+        <span class="chip-icon">{{ fileIcon(f.name) }}</span>
+        <span class="chip-name">{{ f.name }}</span>
+        <button class="chip-remove" @click="removeFile(f.id)">&times;</button>
+      </div>
+    </div>
+
+    <!-- Input row -->
+    <div class="input-row">
+      <button class="attach-btn" @click="triggerFileInput" title="附加文件">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
+        </svg>
+      </button>
+
+      <textarea
+        ref="textareaRef"
+        v-model="text"
+        class="text-input"
+        placeholder="描述您的报表需求... (Enter 发送, Shift+Enter 换行)"
+        :disabled="disabled"
+        @keydown="handleKeydown"
+        @input="autoResize"
+        @paste="handlePaste"
+        rows="1"
+      ></textarea>
+
+      <button
+        class="send-btn"
+        :disabled="!canSend"
+        @click="handleSend"
+        title="发送"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+        </svg>
+      </button>
+    </div>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      accept="image/*,.pdf,.docx,.doc,.xlsx,.xls,.txt,.csv"
+      style="display:none"
+      @change="handleFileSelect"
+    />
+  </div>
+</template>
+
+<style scoped>
+.unified-input {
+  border: 1px solid #45475a;
+  border-radius: 12px;
+  background: #1e1e2e;
+  margin: 0 24px 16px;
+  padding: 8px 12px;
+  transition: border-color 0.2s;
+}
+
+.unified-input:focus-within {
+  border-color: #cba6f7;
+}
+
+.file-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #313244;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.chip-icon {
+  font-size: 14px;
+}
+
+.chip-name {
+  color: #cdd6f4;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip-remove {
+  background: none;
+  border: none;
+  color: #6c7086;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0;
+  line-height: 1;
+}
+
+.chip-remove:hover {
+  color: #f38ba8;
+}
+
+.input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.attach-btn {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: #313244;
+  color: #a6adc8;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.attach-btn:hover {
+  background: #45475a;
+  color: #cdd6f4;
+}
+
+.text-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #cdd6f4;
+  font-size: 14px;
+  font-family: inherit;
+  resize: none;
+  outline: none;
+  line-height: 1.5;
+  padding: 8px 0;
+  min-height: 36px;
+  max-height: 120px;
+}
+
+.text-input::placeholder {
+  color: #6c7086;
+}
+
+.send-btn {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: #cba6f7;
+  color: #1e1e2e;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.send-btn:hover:not(:disabled) {
+  background: #b4befe;
+}
+
+.send-btn:disabled {
+  background: #45475a;
+  color: #6c7086;
+  cursor: not-allowed;
+}
+</style>