Skip to content

Commit b7d7b11

Browse files
YunaiVYunaiV
committed
【功能新增】AI：知识库文档上传：10% 搭建整体页面结构
1 parent 9409159 commit b7d7b11

File tree

7 files changed

+929
-8
lines changed

7 files changed

+929
-8
lines changed

‎src/router/modules/remaining.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -630,6 +630,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
630630
icon: 'ep:document',
631631
noCache: false
632632
}
633+
},
634+
{
635+
path: 'console/knowledge/document/create',
636+
component: () => import('@/views/ai/knowledge/document/create/index.vue'),
637+
name: 'AiKnowledgeDocumentCreate',
638+
meta: {
639+
title: '创建文档',
640+
icon: 'ep:plus',
641+
noCache: true,
642+
hidden: true,
643+
activeMenu: '/ai/console/knowledge/document'
644+
}
633645
}
634646
]
635647
},

‎src/views/ai/knowledge/document/create/ProcessStep.vue

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<template>
2+
<div class="process-complete">
3+
<div class="mb-20px">
4+
<el-alert
5+
title="处理说明"
6+
type="info"
7+
description="系统将对文档进行处理，包括文本提取、向量化等操作，处理完成后文档将被添加到知识库中。"
8+
show-icon
9+
:closable="false"
10+
/>
11+
</div>
12+
13+
<div class="mb-20px">
14+
<el-card class="box-card">
15+
<template #header>
16+
<div class="card-header">
17+
<span class="text-16px font-bold">文档信息</span>
18+
</div>
19+
</template>
20+
<div class="document-info">
21+
<div class="info-item">
22+
<span class="label">文档名称：</span>
23+
<span class="value">{{ modelData.name }}</span>
24+
</div>
25+
<div class="info-item">
26+
<span class="label">知识库：</span>
27+
<span class="value">{{ getKnowledgeBaseName(modelData.knowledgeBaseId) }}</span>
28+
</div>
29+
<div class="info-item">
30+
<span class="label">文档类型：</span>
31+
<span class="value">{{ getDocumentTypeName(modelData.documentType) }}</span>
32+
</div>
33+
<div class="info-item">
34+
<span class="label">段落数量：</span>
35+
<span class="value">{{ modelData.segments.length }}</span>
36+
</div>
37+
</div>
38+
</el-card>
39+
</div>
40+
41+
<div class="mb-20px">
42+
<el-card class="box-card">
43+
<template #header>
44+
<div class="card-header">
45+
<span class="text-16px font-bold">处理选项</span>
46+
</div>
47+
</template>
48+
<div class="process-options">
49+
<el-form :model="processOptions" label-width="120px">
50+
<el-form-item label="处理模式">
51+
<el-radio-group v-model="processOptions.mode">
52+
<el-radio :label="1">标准处理</el-radio>
53+
<el-radio :label="2">高级处理</el-radio>
54+
</el-radio-group>
55+
</el-form-item>
56+
<el-form-item label="向量模型" v-if="processOptions.mode === 2">
57+
<el-select v-model="processOptions.vectorModel" placeholder="请选择向量模型">
58+
<el-option label="文本嵌入模型-基础版" value="text-embedding-basic" />
59+
<el-option label="文本嵌入模型-高级版" value="text-embedding-advanced" />
60+
<el-option label="多模态嵌入模型" value="multimodal-embedding" />
61+
</el-select>
62+
</el-form-item>
63+
<el-form-item label="处理优先级" v-if="processOptions.mode === 2">
64+
<el-select v-model="processOptions.priority" placeholder="请选择处理优先级">
65+
<el-option label="低" value="low" />
66+
<el-option label="中" value="medium" />
67+
<el-option label="高" value="high" />
68+
</el-select>
69+
</el-form-item>
70+
</el-form>
71+
</div>
72+
</el-card>
73+
</div>
74+
75+
<div class="mb-20px">
76+
<el-card class="box-card">
77+
<template #header>
78+
<div class="card-header">
79+
<span class="text-16px font-bold">处理状态</span>
80+
</div>
81+
</template>
82+
<div class="process-status">
83+
<div v-if="!isProcessing && !isProcessed">
84+
<el-empty description="尚未开始处理" />
85+
<div class="flex justify-center mt-20px">
86+
<el-button type="primary" @click="handleStartProcess">开始处理</el-button>
87+
</div>
88+
</div>
89+
<div v-else-if="isProcessing">
90+
<div class="flex flex-col items-center">
91+
<el-progress type="circle" :percentage="processPercentage" />
92+
<div class="mt-10px">{{ processStatus }}</div>
93+
</div>
94+
</div>
95+
<div v-else>
96+
<div class="flex items-center justify-center">
97+
<el-result icon="success" title="处理完成" sub-title="文档已成功处理并添加到知识库中">
98+
<template #extra>
99+
<el-button type="primary" @click="handleViewDocument">查看文档</el-button>
100+
</template>
101+
</el-result>
102+
</div>
103+
</div>
104+
</div>
105+
</el-card>
106+
</div>
107+
</div>
108+
</template>
109+
110+
<script lang="ts" setup>
111+
import { PropType } from 'vue'
112+
113+
const props = defineProps({
114+
modelValue: {
115+
type: Object as PropType<any>,
116+
required: true
117+
}
118+
})
119+
120+
const emit = defineEmits(['update:modelValue'])
121+
122+
// 表单数据
123+
const modelData = computed({
124+
get: () => props.modelValue,
125+
set: (val) => emit('update:modelValue', val)
126+
})
127+
128+
// 处理选项
129+
const processOptions = ref({
130+
mode: 1, // 1: 标准处理, 2: 高级处理
131+
vectorModel: 'text-embedding-basic',
132+
priority: 'medium'
133+
})
134+
135+
// 处理状态
136+
const isProcessing = ref(false)
137+
const isProcessed = ref(false)
138+
const processPercentage = ref(0)
139+
const processStatus = ref('正在准备处理...')
140+
141+
// 知识库列表（模拟数据）
142+
const knowledgeBaseList = [
143+
{ id: 1, name: '产品知识库' },
144+
{ id: 2, name: '技术文档库' },
145+
{ id: 3, name: '客户服务知识库' }
146+
]
147+
148+
// 获取知识库名称
149+
const getKnowledgeBaseName = (id) => {
150+
const base = knowledgeBaseList.find((item) => item.id === id)
151+
return base ? base.name : '未知知识库'
152+
}
153+
154+
// 获取文档类型名称
155+
const getDocumentTypeName = (type) => {
156+
const typeMap = {
157+
pdf: 'PDF文档',
158+
word: 'Word文档',
159+
text: '文本文件',
160+
url: '网页链接'
161+
}
162+
return typeMap[type] || '未知类型'
163+
}
164+
165+
// 开始处理
166+
const handleStartProcess = () => {
167+
isProcessing.value = true
168+
processPercentage.value = 0
169+
processStatus.value = '正在准备处理...'
170+
171+
// 模拟处理过程
172+
const timer = setInterval(() => {
173+
processPercentage.value += 10
174+
175+
if (processPercentage.value < 30) {
176+
processStatus.value = '正在提取文本内容...'
177+
} else if (processPercentage.value < 60) {
178+
processStatus.value = '正在进行向量化处理...'
179+
} else if (processPercentage.value < 90) {
180+
processStatus.value = '正在写入知识库...'
181+
} else {
182+
processStatus.value = '处理完成，正在整理结果...'
183+
}
184+
185+
if (processPercentage.value >= 100) {
186+
clearInterval(timer)
187+
isProcessing.value = false
188+
isProcessed.value = true
189+
modelData.value.status = 2 // 已完成
190+
}
191+
}, 500)
192+
}
193+
194+
// 查看文档
195+
const handleViewDocument = () => {
196+
// 跳转到文档详情页
197+
console.log('查看文档:', modelData.value.id)
198+
}
199+
200+
// 表单校验
201+
const validate = () => {
202+
return new Promise((resolve, reject) => {
203+
if (modelData.value.status === 2) {
204+
resolve(true)
205+
} else {
206+
reject(new Error('请先完成文档处理'))
207+
}
208+
})
209+
}
210+
211+
// 对外暴露方法
212+
defineExpose({
213+
validate
214+
})
215+
</script>
216+
217+
<style lang="scss" scoped>
218+
.process-complete {
219+
.document-info {
220+
.info-item {
221+
margin-bottom: 10px;
222+
display: flex;
223+
224+
.label {
225+
width: 100px;
226+
color: #606266;
227+
}
228+
229+
.value {
230+
font-weight: bold;
231+
}
232+
}
233+
}
234+
}
235+
</style>

0 commit comments

Comments
 (0)