caoxiaozhu/JARVIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add brain and chat workspace views

Browse Source 
Expand the frontend with brain, graph, and chat workspace updates so the
new backend orchestration and memory features have matching screens.
These changes also wire the new APIs into routing and add focused view
and routing tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-22 13:48:16 +08:00
parent d2447ee635
commit 7d80a6e2ec
21 changed files with 3095 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

366
frontend/src/pages/knowledge/index.vue
View File

@@ -15,8 +15,9 @@ import { useKnowledgeView } from '@/pages/knowledge/composables/useKnowledgeView
const {
documents,
currentFolderId,
isLoadingDocuments,
uploadError,
uploadSuccess,
highlightedDocumentId,
uploadInput,
showNewFolderDialog,
newFolderName,
@@ -29,6 +30,12 @@ const {
activeDocument,
activeDocumentContent,
isLoadingDocumentContent,
activeDocumentChunks,
isLoadingDocumentChunks,
chunkDrafts,
chunkEditing,
chunkSaving,
chunkEditError,
isRoot,
visibleFolders,
breadcrumbs,
@@ -47,9 +54,13 @@ const {
deleteFolder,
openDocument,
closeDocumentDialog,
startChunkEdit,
cancelChunkEdit,
saveChunkEdit,
getFileTypeColor,
formatFileSize,
formatDate,
getStatusLabel,
} = useKnowledgeView()
</script>
@@ -78,7 +89,7 @@ const {
ref="uploadInput"
type="file"
class="hidden-upload"
accept=".pdf,.md,.txt,.docx"
accept=".pdf,.md,.txt,.doc,.docx,.csv,.xlsx"
@change="handleUpload"
/>
@@ -108,10 +119,8 @@ const {
<div v-if="uploadError" class="upload-error">
{{ uploadError }}
</div>
<div v-if="isLoadingDocuments" class="loading-strip">
<Loader :size="14" class="spin" />
<span>正在同步当前目录...</span>
<div v-if="uploadSuccess" class="upload-success">
{{ uploadSuccess }}
</div>
<div class="explorer-grid">
@@ -158,6 +167,7 @@ const {
v-for="doc in documents"
:key="doc.id"
class="explorer-tile file-tile"
:class="{ 'upload-highlight': highlightedDocumentId === doc.id }"
@click="openDocument(doc)"
>
<div class="tile-frame"></div>
@@ -174,9 +184,17 @@ const {
</div>
<div class="tile-name">{{ doc.title }}</div>
<div class="tile-meta">{{ formatFileSize(doc.file_size) }} · {{ formatDate(doc.created_at) }}</div>
<div class="tile-status" :class="doc.is_indexed ? 'indexed' : 'pending'">
{{ doc.is_indexed ? 'INDEXED' : 'INDEXING...' }}
<div class="tile-status-row">
<div class="tile-status" :class="(doc.ingestion_status ?? (doc.is_indexed ? 'ready' : 'uploaded')).toLowerCase()">
{{ getStatusLabel(doc.ingestion_status, doc.is_indexed) }}
</div>
<Loader
v-if="['uploaded', 'parsing', 'indexing'].includes(doc.ingestion_status ?? (doc.is_indexed ? 'ready' : 'uploaded'))"
:size="12"
class="spin tile-inline-loader"
/>
</div>
<div v-if="doc.ingestion_error" class="tile-warning">{{ doc.ingestion_error }}</div>
</button>
</template>
@@ -294,15 +312,84 @@ const {
{{ activeDocument.file_type.toUpperCase() }}
</span>
<span>{{ formatFileSize(activeDocument.file_size) }}</span>
<span>{{ activeDocument.chunk_count }} chunks</span>
<span class="doc-chunk-count">{{ activeDocument.chunk_count }} 个知识切片</span>
<span class="doc-status-pill">{{ getStatusLabel(activeDocument.ingestion_status, activeDocument.is_indexed) }}</span>
</div>
<div v-if="activeDocument.ingestion_error" class="upload-error">
{{ activeDocument.ingestion_error }}
</div>
<div class="document-preview">
<div v-if="isLoadingDocumentContent" class="preview-loading">
<Loader :size="16" class="spin" />
<span>加载文档内容中...</span>
<div class="document-content-grid">
<div class="document-preview">
<div v-if="isLoadingDocumentContent" class="preview-loading">
<Loader :size="16" class="spin" />
<span>加载文档内容中...</span>
</div>
<pre v-else>{{ activeDocumentContent || '暂无可预览内容。' }}</pre>
</div>
<div class="chunk-panel">
<div class="chunk-panel-header">
<div>
<div class="chunk-panel-title">知识切片</div>
<div class="chunk-panel-subtitle">当前已加载 {{ activeDocumentChunks.length }} / {{ activeDocument.chunk_count }} 个切片</div>
</div>
<span class="chunk-count-badge">{{ activeDocumentChunks.length }}</span>
</div>
<div v-if="isLoadingDocumentChunks" class="chunk-loading-state">
<div class="chunk-loading-bar"></div>
<span>正在读取切片内容...</span>
</div>
<div v-else-if="activeDocumentChunks.length" class="chunk-list">
<div
v-for="chunk in activeDocumentChunks"
:key="chunk.id"
class="chunk-card"
:class="{ editing: chunkEditing[chunk.id] }"
>
<div class="chunk-card-header">
<div class="chunk-card-meta">
<span class="chunk-index">切片 #{{ chunk.chunk_index + 1 }}</span>
<span class="chunk-size">{{ chunk.content.length }} 字符</span>
<span v-if="chunk.metadata_" class="chunk-meta-raw">{{ chunk.metadata_ }}</span>
</div>
<button
v-if="!chunkEditing[chunk.id]"
class="btn"
@click="startChunkEdit(chunk)"
>
编辑
</button>
</div>
<pre v-if="!chunkEditing[chunk.id]" class="chunk-content">{{ chunk.content }}</pre>
<div v-else class="chunk-edit-form">
<textarea
v-model="chunkDrafts[chunk.id]"
class="chunk-textarea"
rows="7"
></textarea>
<div v-if="chunkEditError[chunk.id]" class="upload-error chunk-error">
{{ chunkEditError[chunk.id] }}
</div>
<div class="chunk-actions">
<button class="btn" :disabled="chunkSaving[chunk.id]" @click="cancelChunkEdit(chunk.id)">
取消
</button>
<button class="btn primary" :disabled="chunkSaving[chunk.id]" @click="saveChunkEdit(chunk.id)">
<Loader v-if="chunkSaving[chunk.id]" :size="12" class="spin" />
{{ chunkSaving[chunk.id] ? '保存中' : '保存' }}
</button>
</div>
</div>
</div>
</div>
<div v-else class="chunk-empty">暂无切片数据。</div>
</div>
<pre v-else>{{ activeDocumentContent || '暂无可预览内容。' }}</pre>
</div>
</div>
</div>
@@ -439,7 +526,7 @@ h1 {
}
.upload-error,
.loading-strip {
.upload-success {
display: inline-flex;
align-items: center;
gap: 8px;
@@ -455,10 +542,10 @@ h1 {
border: 1px solid rgba(255, 71, 87, 0.2);
}
.loading-strip {
color: var(--accent-cyan);
background: rgba(0, 245, 212, 0.06);
border: 1px solid var(--border-dim);
.upload-success {
color: var(--accent-green);
background: rgba(52, 211, 153, 0.08);
border: 1px solid rgba(52, 211, 153, 0.24);
}
.explorer-grid {
@@ -491,6 +578,11 @@ h1 {
transform: translateY(-2px);
}
.upload-highlight {
border-color: rgba(52, 211, 153, 0.8);
box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 0 28px rgba(52, 211, 153, 0.25);
}
.tile-frame {
position: absolute;
inset: 10px;
@@ -792,21 +884,68 @@ h1 {
line-height: 1.5;
}
.tile-status {
.tile-status-row {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
.tile-status {
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 0.12em;
}
.indexed {
.tile-inline-loader {
color: var(--accent-cyan);
}
.ready {
color: var(--accent-green);
}
.pending {
.uploaded,
.parsing,
.indexing {
color: var(--accent-amber);
}
.warning {
color: var(--accent-purple);
}
.failed {
color: var(--accent-red);
}
.tile-warning {
width: 100%;
color: var(--accent-red);
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.4;
word-break: break-word;
}
.doc-chunk-count {
color: var(--accent-cyan);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.08em;
}
.doc-status-pill {
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border-mid);
color: var(--accent-cyan);
background: rgba(0, 245, 212, 0.08);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.12em;
}
.empty-state {
grid-column: 1 / -1;
min-height: 440px;
@@ -1064,6 +1203,15 @@ h1 {
}
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.folder-tile:hover .folder-glyph,
.folder-tile:hover .empty-folder-chamber {
animation-duration: 2.3s;
@@ -1246,7 +1394,14 @@ h1 {
margin-bottom: 14px;
}
.document-preview {
.document-content-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 16px;
}
.document-preview,
.chunk-panel {
min-height: 360px;
max-height: 62vh;
overflow: auto;
@@ -1265,6 +1420,167 @@ h1 {
line-height: 1.7;
}
.chunk-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.chunk-panel-title {
color: var(--accent-cyan);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
}
.chunk-panel-subtitle {
margin-top: 4px;
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 10px;
}
.chunk-count-badge {
min-width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(0, 245, 212, 0.2);
background: rgba(0, 245, 212, 0.08);
color: var(--accent-cyan);
font-family: var(--font-display);
font-size: 12px;
}
.chunk-loading-state {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 0;
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 11px;
}
.chunk-loading-bar {
width: 100%;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(0, 245, 212, 0.15), rgba(124, 230, 255, 0.45), rgba(0, 245, 212, 0.15));
background-size: 200% 100%;
animation: shimmer 1.4s linear infinite;
}
.chunk-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.chunk-card {
border: 1px solid var(--border-dim);
border-radius: 12px;
background: rgba(8, 15, 24, 0.82);
padding: 12px;
}
.chunk-card.editing {
border-color: rgba(0, 245, 212, 0.4);
box-shadow: inset 0 0 0 1px rgba(0, 245, 212, 0.08);
}
.chunk-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.chunk-card-meta {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.chunk-index {
color: var(--accent-cyan);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.12em;
}
.chunk-size {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 10px;
}
.chunk-meta-raw {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.5;
word-break: break-word;
}
.chunk-content {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
}
.chunk-edit-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.chunk-textarea {
width: 100%;
min-height: 150px;
resize: vertical;
background: rgba(0, 9, 19, 0.9);
border: 1px solid var(--border-dim);
border-radius: 10px;
color: var(--text-primary);
padding: 12px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
box-sizing: border-box;
}
.chunk-textarea:focus {
border-color: var(--accent-cyan);
outline: none;
}
.chunk-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.chunk-error {
width: 100%;
}
.chunk-empty {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 11px;
}
.preview-loading {
display: flex;
align-items: center;
@@ -1332,5 +1648,9 @@ h1 {
display: flex;
justify-content: flex-start;
}
.document-content-grid {
grid-template-columns: 1fr;
}
}
</style>