feat: 5-issue fix — OCR image parse bug + Vue frontend feature parity + streaming UX
Fix 1 (CRITICAL): file_parser.py suffix normalization ".jpg", api_server.py Path.suffix Fix 2: Sidebar version history download, ProcessSection replaces old components Fix 3: OCR content/position layer structured logging in agent/nodes.py Fix 4: collapsible process sections with per-section stream routing + auto-fold Fix 5: agent_complete total_duration_ms, SummaryCard duration display - backend/file_parser.py: normalize suffix to always include leading dot - api_server.py: step_index in node_start, total_duration_ms in agent_complete - agent/nodes.py: _log_ocr_layers() for [内容层]/[位置层]/[合并] logging - frontend: ProcessSection.vue (NEW), chat.ts sections model, Sidebar versions - CLAUDE.md: updated component list and v6 changelog
This commit is contained in:
@@ -5,8 +5,7 @@ import { useSessionStore } from './stores/session'
|
||||
import { api } from './api/client'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import ChatMessages from './components/ChatMessages.vue'
|
||||
import StreamingMessage from './components/StreamingMessage.vue'
|
||||
import NodeProgress from './components/NodeProgress.vue'
|
||||
import ProcessSection from './components/ProcessSection.vue'
|
||||
import SummaryCard from './components/SummaryCard.vue'
|
||||
import UnifiedInput from './components/UnifiedInput.vue'
|
||||
|
||||
@@ -55,7 +54,7 @@ async function handleSend(text: string, files: File[]) {
|
||||
try {
|
||||
await api.chat(session.currentId, text, remoteIds, {
|
||||
onNodeStart(data) {
|
||||
chat.addNode(data)
|
||||
chat.addNode({ node: data.node, label: data.label, step_index: data.step_index })
|
||||
},
|
||||
onNodeComplete(data) {
|
||||
chat.completeNode(data)
|
||||
@@ -72,6 +71,7 @@ async function handleSend(text: string, files: File[]) {
|
||||
error_msg: data.error_msg,
|
||||
natural_explanation: data.natural_explanation,
|
||||
retry_count: data.retry_count,
|
||||
total_duration_ms: data.total_duration_ms,
|
||||
ocr_extraction_result: data.ocr_extraction_result,
|
||||
})
|
||||
|
||||
@@ -119,8 +119,7 @@ async function handleSend(text: string, files: File[]) {
|
||||
<main class="main-area">
|
||||
<div class="chat-container" ref="chatContainer">
|
||||
<ChatMessages />
|
||||
<StreamingMessage />
|
||||
<NodeProgress />
|
||||
<ProcessSection />
|
||||
<SummaryCard />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -28,11 +28,12 @@ export interface AgentCompleteData {
|
||||
error_msg: string
|
||||
natural_explanation: string
|
||||
retry_count: number
|
||||
total_duration_ms: number
|
||||
ocr_extraction_result: any
|
||||
}
|
||||
|
||||
export interface SSECallbacks {
|
||||
onNodeStart?: (data: { node: string; label: string }) => void
|
||||
onNodeStart?: (data: { node: string; label: string; step_index: number }) => void
|
||||
onNodeComplete?: (data: { node: string; label: string; detail: string }) => void
|
||||
onStreamToken?: (data: { text: string; type: string }) => void
|
||||
onAgentComplete?: (data: AgentCompleteData) => void
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
<script setup lang="ts">
|
||||
import { useChatStore, type ProcessSection } from '../stores/chat'
|
||||
|
||||
const chat = useChatStore()
|
||||
|
||||
function sectionClass(s: ProcessSection): string {
|
||||
if (s.status === 'running') return 'section-running'
|
||||
if (s.content) return 'section-done'
|
||||
return 'section-internal'
|
||||
}
|
||||
|
||||
function isXmlLike(text: string): boolean {
|
||||
return text.includes('<?xml') || text.includes('<jasperReport')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="chat.streaming && chat.sections.length > 0" class="process-sections">
|
||||
<div class="sections-header">
|
||||
<span class="pulse-dot"></span>
|
||||
处理中 · {{ chat.formatDuration(chat.totalDurationMs) }}
|
||||
</div>
|
||||
|
||||
<details
|
||||
v-for="s in chat.sections"
|
||||
:key="s.node"
|
||||
:open="s.expanded"
|
||||
class="process-section"
|
||||
:class="sectionClass(s)"
|
||||
@toggle="(e: Event) => { const d = e.target as HTMLDetailsElement; s.expanded = d.open }"
|
||||
>
|
||||
<summary class="section-summary">
|
||||
<span class="step-badge">{{ s.stepIndex }}</span>
|
||||
<span class="step-label">{{ s.label }}</span>
|
||||
<span v-if="s.status === 'running'" class="step-spinner">...</span>
|
||||
<span v-else class="step-check">OK</span>
|
||||
<span class="step-duration" v-if="s.durationMs > 0">
|
||||
{{ chat.formatDuration(s.durationMs) }}
|
||||
</span>
|
||||
<span class="step-detail-short" v-if="s.status === 'done' && s.detail">
|
||||
{{ s.detail }}
|
||||
</span>
|
||||
</summary>
|
||||
<div class="section-content" v-if="s.content">
|
||||
<pre v-if="isXmlLike(s.content)" class="xml-content">{{ s.content }}</pre>
|
||||
<div v-else class="text-content">{{ s.content }}</div>
|
||||
</div>
|
||||
<div v-else-if="s.status === 'running'" class="section-waiting">
|
||||
等待生成...
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.process-sections {
|
||||
margin: 0 24px 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sections-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #89b4fa;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #89b4fa;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.process-section {
|
||||
margin-bottom: 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #313244;
|
||||
background: #181825;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.process-section.section-running {
|
||||
border-color: #45475a;
|
||||
background: #1e1e2e;
|
||||
}
|
||||
|
||||
.process-section.section-internal {
|
||||
opacity: 0.65;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.section-summary {
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.section-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step-badge {
|
||||
background: #313244;
|
||||
color: #6c7086;
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-running .step-badge {
|
||||
background: #45475a;
|
||||
color: #cba6f7;
|
||||
}
|
||||
|
||||
.section-done .step-badge {
|
||||
background: #313244;
|
||||
color: #a6e3a1;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
color: #cdd6f4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.section-internal .step-label {
|
||||
color: #6c7086;
|
||||
}
|
||||
|
||||
.step-spinner {
|
||||
color: #f9e2af;
|
||||
font-weight: bold;
|
||||
animation: pulse-text 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-text {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.step-check {
|
||||
color: #a6e3a1;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.step-duration {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: #6c7086;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.step-detail-short {
|
||||
font-size: 11px;
|
||||
color: #6c7086;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
.xml-content {
|
||||
background: #11111b;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
color: #a6e3a1;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
color: #bac2de;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.section-waiting {
|
||||
padding: 8px 10px 12px;
|
||||
font-size: 12px;
|
||||
color: #6c7086;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
@@ -63,15 +63,29 @@ async function handleDelete() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section" v-if="session.currentJrxml">
|
||||
<div class="sidebar-section" v-if="session.currentJrxml || session.versions.length > 0">
|
||||
<div class="section-title">下载</div>
|
||||
<a
|
||||
v-if="session.currentJrxml"
|
||||
:href="`/api/sessions/${session.currentId}/download/latest`"
|
||||
class="btn-download"
|
||||
download
|
||||
>
|
||||
下载最新 JRXML
|
||||
</a>
|
||||
<div v-if="session.versions.length > 1" class="version-list">
|
||||
<div class="version-list-title">历史版本</div>
|
||||
<a
|
||||
v-for="(v, i) in session.versions"
|
||||
:key="i"
|
||||
:href="`/api/sessions/${session.currentId}/download/${i}`"
|
||||
class="version-item"
|
||||
download
|
||||
>
|
||||
<span class="version-label">{{ v.label || `版本 ${i + 1}` }}</span>
|
||||
<span class="version-time">{{ v.ts?.slice(0, 16)?.replace('T', ' ') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
@@ -205,6 +219,45 @@ async function handleDelete() {
|
||||
background: #313244;
|
||||
}
|
||||
|
||||
.version-list {
|
||||
padding: 4px 16px 8px;
|
||||
}
|
||||
|
||||
.version-list-title {
|
||||
font-size: 11px;
|
||||
color: #6c7086;
|
||||
margin-bottom: 4px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #313244;
|
||||
}
|
||||
|
||||
.version-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
color: #a6adc8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.version-item:hover {
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
.version-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.version-time {
|
||||
font-size: 11px;
|
||||
color: #6c7086;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
padding: 12px 16px;
|
||||
|
||||
@@ -21,13 +21,21 @@ function downloadLatest() {
|
||||
<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>
|
||||
<div class="card-text">
|
||||
生成 {{ chat.summary.jrxml_length }} 字符
|
||||
<span v-if="chat.lastDurationMs > 0" class="card-duration">
|
||||
· {{ chat.formatDuration(chat.lastDurationMs) }}
|
||||
</span>
|
||||
</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 }} 次重试后仍失败
|
||||
<span v-if="chat.lastDurationMs > 0" class="card-duration">
|
||||
· {{ chat.formatDuration(chat.lastDurationMs) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-text">{{ chat.summary.error_msg }}</div>
|
||||
<div v-if="chat.summary.natural_explanation" class="card-reason">
|
||||
@@ -79,6 +87,11 @@ function downloadLatest() {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-duration {
|
||||
color: #6c7086;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-reason {
|
||||
font-size: 12px;
|
||||
color: #a6adc8;
|
||||
|
||||
+103
-7
@@ -1,7 +1,7 @@
|
||||
/** Pinia store — chat messages + streaming state. */
|
||||
/** Pinia store — chat messages + streaming state with per-section tracking. */
|
||||
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
export interface Message {
|
||||
id: string
|
||||
@@ -18,6 +18,18 @@ export interface NodeProgress {
|
||||
status: 'running' | 'done'
|
||||
}
|
||||
|
||||
export interface ProcessSection {
|
||||
node: string
|
||||
label: string
|
||||
stepIndex: number
|
||||
detail: string
|
||||
content: string
|
||||
status: 'running' | 'done'
|
||||
expanded: boolean
|
||||
durationMs: number
|
||||
startTime: number
|
||||
}
|
||||
|
||||
export interface AgentSummary {
|
||||
intent: string
|
||||
status: string
|
||||
@@ -27,18 +39,45 @@ export interface AgentSummary {
|
||||
retry_count: number
|
||||
}
|
||||
|
||||
export interface UploadedFile {
|
||||
file_id: string
|
||||
filename: string
|
||||
content_type: string
|
||||
size: number
|
||||
preview?: string
|
||||
}
|
||||
|
||||
export const useChatStore = defineStore('chat', () => {
|
||||
const messages = ref<Message[]>([])
|
||||
const streaming = ref(false)
|
||||
const lastDurationMs = ref(0)
|
||||
const streamText = ref('')
|
||||
const nodes = ref<NodeProgress[]>([])
|
||||
const sections = ref<ProcessSection[]>([])
|
||||
const error = ref<string>('')
|
||||
const ocrResult = ref<any>(null)
|
||||
const uploadedFiles = ref<UploadedFile[]>([])
|
||||
const summary = ref<AgentSummary>({
|
||||
intent: '', status: '', jrxml_length: 0,
|
||||
error_msg: '', natural_explanation: '', retry_count: 0,
|
||||
})
|
||||
|
||||
const totalDurationMs = computed(() => {
|
||||
if (sections.value.length === 0) return 0
|
||||
const last = sections.value[sections.value.length - 1]
|
||||
return last.status === 'done'
|
||||
? last.startTime + last.durationMs - sections.value[0].startTime
|
||||
: Date.now() - sections.value[0].startTime
|
||||
})
|
||||
|
||||
function formatDuration(ms: number): string {
|
||||
if (ms < 1000) return `${ms}ms`
|
||||
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
|
||||
const m = Math.floor(ms / 60000)
|
||||
const s = Math.round((ms % 60000) / 1000)
|
||||
return `${m}m${s}s`
|
||||
}
|
||||
|
||||
function addMessage(msg: Omit<Message, 'id' | 'timestamp'>) {
|
||||
messages.value.push({
|
||||
...msg,
|
||||
@@ -49,8 +88,10 @@ export const useChatStore = defineStore('chat', () => {
|
||||
|
||||
function startStreaming() {
|
||||
streaming.value = true
|
||||
lastDurationMs.value = 0
|
||||
streamText.value = ''
|
||||
nodes.value = []
|
||||
sections.value = []
|
||||
error.value = ''
|
||||
summary.value = {
|
||||
intent: '', status: '', jrxml_length: 0,
|
||||
@@ -60,10 +101,31 @@ export const useChatStore = defineStore('chat', () => {
|
||||
|
||||
function appendStreamToken(text: string) {
|
||||
streamText.value += text
|
||||
const active = sections.value.find(s => s.status === 'running')
|
||||
if (active) {
|
||||
active.content += text
|
||||
}
|
||||
}
|
||||
|
||||
function addNode(node: { node: string; label: string }) {
|
||||
nodes.value.push({ ...node, status: 'running' })
|
||||
function addNode(node: { node: string; label: string; step_index?: number }) {
|
||||
nodes.value.push({ node: node.node, label: node.label, status: 'running' })
|
||||
const prev = sections.value.find(s => s.status === 'running')
|
||||
if (prev) {
|
||||
prev.status = 'done'
|
||||
prev.durationMs = Date.now() - prev.startTime
|
||||
prev.expanded = false
|
||||
}
|
||||
sections.value.push({
|
||||
node: node.node,
|
||||
label: node.label,
|
||||
stepIndex: node.step_index || sections.value.length + 1,
|
||||
detail: '',
|
||||
content: '',
|
||||
status: 'running',
|
||||
expanded: true,
|
||||
durationMs: 0,
|
||||
startTime: Date.now(),
|
||||
})
|
||||
}
|
||||
|
||||
function completeNode(node: { node: string; label: string; detail: string }) {
|
||||
@@ -72,16 +134,30 @@ export const useChatStore = defineStore('chat', () => {
|
||||
existing.status = 'done'
|
||||
existing.detail = node.detail
|
||||
}
|
||||
const sec = sections.value.find(s => s.node === node.node && s.status === 'running')
|
||||
if (sec) {
|
||||
sec.detail = node.detail
|
||||
sec.status = 'done'
|
||||
sec.durationMs = Date.now() - sec.startTime
|
||||
}
|
||||
}
|
||||
|
||||
function finishStreaming(data?: {
|
||||
intent?: string; status?: string; jrxml_length?: number
|
||||
error_msg?: string; natural_explanation?: string; retry_count?: number
|
||||
ocr_extraction_result?: any
|
||||
total_duration_ms?: number; ocr_extraction_result?: any
|
||||
}) {
|
||||
streaming.value = false
|
||||
nodes.value.forEach(n => { n.status = 'done' })
|
||||
sections.value.forEach(s => {
|
||||
if (s.status === 'running') {
|
||||
s.status = 'done'
|
||||
s.durationMs = Date.now() - s.startTime
|
||||
}
|
||||
s.expanded = false
|
||||
})
|
||||
if (data) {
|
||||
lastDurationMs.value = data.total_duration_ms || 0
|
||||
summary.value = {
|
||||
intent: data.intent || '',
|
||||
status: data.status || '',
|
||||
@@ -99,15 +175,33 @@ export const useChatStore = defineStore('chat', () => {
|
||||
function setError(err: string) {
|
||||
error.value = err
|
||||
streaming.value = false
|
||||
sections.value.forEach(s => { s.status = 'done'; s.expanded = false })
|
||||
}
|
||||
|
||||
function toggleSection(node: string) {
|
||||
const sec = sections.value.find(s => s.node === node)
|
||||
if (sec) {
|
||||
sec.expanded = !sec.expanded
|
||||
}
|
||||
}
|
||||
|
||||
function addUploadedFile(file: UploadedFile) {
|
||||
uploadedFiles.value.push(file)
|
||||
}
|
||||
|
||||
function removeUploadedFile(fileId: string) {
|
||||
uploadedFiles.value = uploadedFiles.value.filter(f => f.file_id !== fileId)
|
||||
}
|
||||
|
||||
function reset() {
|
||||
messages.value = []
|
||||
streamText.value = ''
|
||||
nodes.value = []
|
||||
sections.value = []
|
||||
error.value = ''
|
||||
streaming.value = false
|
||||
ocrResult.value = null
|
||||
uploadedFiles.value = []
|
||||
summary.value = {
|
||||
intent: '', status: '', jrxml_length: 0,
|
||||
error_msg: '', natural_explanation: '', retry_count: 0,
|
||||
@@ -115,8 +209,10 @@ export const useChatStore = defineStore('chat', () => {
|
||||
}
|
||||
|
||||
return {
|
||||
messages, streaming, streamText, nodes, error, ocrResult, summary,
|
||||
messages, streaming, lastDurationMs, streamText, nodes, sections, error, ocrResult,
|
||||
uploadedFiles, summary, totalDurationMs,
|
||||
addMessage, startStreaming, appendStreamToken, addNode, completeNode,
|
||||
finishStreaming, setError, reset,
|
||||
finishStreaming, setError, toggleSection, reset, formatDuration,
|
||||
addUploadedFile, removeUploadedFile,
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user