Skip to content

phsl / admin

Go to a project
Commit 7cd6a5d9 by YunaiV
Options

【功能新增】AI：知识库文档上传：20%，UploadStep 基本搭建出来

parent b7d7b11d
Showing with 270 additions and 171 deletions
src/utils/index.ts
...@@ -117,6 +117,64 @@ export function toAnyString() { ...@@ -117,6 +117,64 @@ export function toAnyString() {
} }
/** /**
* 根据支持的文件类型生成 accept 属性值
*
* @param supportedFileTypes 支持的文件类型数组，如 ['PDF', 'DOC', 'DOCX']
* @returns 用于文件上传组件 accept 属性的字符串
*/
export const generateAcceptedFileTypes = (supportedFileTypes: string[]): string => {
const allowedExtensions = supportedFileTypes.map((ext) => ext.toLowerCase())
const mimeTypes: string[] = []
// 添加常见的 MIME 类型映射
if (allowedExtensions.includes('txt')) {
mimeTypes.push('text/plain')
}
if (allowedExtensions.includes('pdf')) {
mimeTypes.push('application/pdf')
}
if (allowedExtensions.includes('html') || allowedExtensions.includes('htm')) {
mimeTypes.push('text/html')
}
if (allowedExtensions.includes('csv')) {
mimeTypes.push('text/csv')
}
if (allowedExtensions.includes('xlsx') || allowedExtensions.includes('xls')) {
mimeTypes.push('application/vnd.ms-excel')
mimeTypes.push('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
}
if (allowedExtensions.includes('docx') || allowedExtensions.includes('doc')) {
mimeTypes.push('application/msword')
mimeTypes.push('application/vnd.openxmlformats-officedocument.wordprocessingml.document')
}
if (allowedExtensions.includes('pptx') || allowedExtensions.includes('ppt')) {
mimeTypes.push('application/vnd.ms-powerpoint')
mimeTypes.push('application/vnd.openxmlformats-officedocument.presentationml.presentation')
}
if (allowedExtensions.includes('xml')) {
mimeTypes.push('application/xml')
mimeTypes.push('text/xml')
}
if (allowedExtensions.includes('md') || allowedExtensions.includes('markdown')) {
mimeTypes.push('text/markdown')
}
if (allowedExtensions.includes('epub')) {
mimeTypes.push('application/epub+zip')
}
if (allowedExtensions.includes('eml')) {
mimeTypes.push('message/rfc822')
}
if (allowedExtensions.includes('msg')) {
mimeTypes.push('application/vnd.ms-outlook')
}
// 添加文件扩展名
const extensions = allowedExtensions.map((ext) => `.${ext}`)
return [...mimeTypes, ...extensions].join(',')
}
/**
* 首字母大写 * 首字母大写
*/ */
export function firstUpperCase(str: string) { export function firstUpperCase(str: string) {
......
src/views/ai/knowledge/document/create/UploadStep.vue
<template> <template>
<el-form ref="formRef" :model="modelData" :rules="rules" label-width="120px" class="mt-20px"> <el-form ref="formRef" :model="modelData" label-width="0" class="mt-20px">
<el-form-item label="文档名称" prop="name" class="mb-20px"> <el-form-item class="mb-20px">
<el-input v-model="modelData.name" clearable placeholder="请输入文档名称" /> <div class="w-full">
</el-form-item> <div class="w-full border-2 border-[#dcdfe6] rounded-md text-center hover:border-[#409eff]">
<el-form-item label="知识库" prop="knowledgeBaseId" class="mb-20px">
<el-select
class="!w-full"
v-model="modelData.knowledgeBaseId"
clearable
placeholder="请选择知识库"
>
<el-option
v-for="base in knowledgeBaseList"
:key="base.id"
:label="base.name"
:value="base.id"
/>
</el-select>
</el-form-item>
<el-form-item label="文档类型" prop="documentType" class="mb-20px">
<el-select
class="!w-full"
v-model="modelData.documentType"
clearable
placeholder="请选择文档类型"
>
<el-option label="PDF文档" value="pdf" />
<el-option label="Word文档" value="word" />
<el-option label="文本文件" value="text" />
<el-option label="网页链接" value="url" />
</el-select>
</el-form-item>
<el-form-item
label="文档内容"
prop="content"
class="mb-20px"
v-if="modelData.documentType === 'text'"
>
<el-input
v-model="modelData.content"
type="textarea"
:rows="6"
placeholder="请输入文档内容"
/>
</el-form-item>
<el-form-item
label="网页链接"
prop="url"
class="mb-20px"
v-if="modelData.documentType === 'url'"
>
<el-input v-model="modelData.url" clearable placeholder="请输入网页链接" />
</el-form-item>
<el-form-item
label="上传文件"
prop="file"
class="mb-20px"
v-if="['pdf', 'word'].includes(modelData.documentType)"
>
<el-upload <el-upload
ref="uploadRef"
class="upload-demo" class="upload-demo"
drag drag
action="#" :action="uploadUrl"
:auto-upload="false" :auto-upload="true"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:on-change="handleFileChange" :on-change="handleFileChange"
:limit="1" :on-remove="handleFileRemove"
:before-upload="beforeUpload"
:http-request="httpRequest"
:file-list="fileList"
:multiple="true"
:show-file-list="false"
:accept="acceptedFileTypes"
> >
<el-icon class="el-icon--upload"><upload-filled /></el-icon> <div class="flex flex-col items-center justify-center py-20px">
<div class="el-upload__text"> 拖拽文件到此处，或 <em>点击上传</em> </div> <el-icon class="text-[48px] text-[#c0c4cc] mb-10px"><upload-filled /></el-icon>
<template #tip> <div class="el-upload__text text-[16px] text-[#606266]"
<div class="el-upload__tip"> >拖拽文件至此，或者
{{ modelData.documentType === 'pdf' ? 'PDF文件' : 'Word文件(.docx, .doc)' }} <em class="text-[#409eff] not-italic cursor-pointer">选择文件</em></div
>
<div class="el-upload__tip mt-10px text-[#909399] text-[12px]">
已支持 {{ supportedFileTypes.join('、') }}，每个文件不超过 {{ maxFileSize }} MB。
</div>
</div> </div>
</template>
</el-upload> </el-upload>
</div>
<div
v-if="modelData.list && modelData.list.length > 0"
class="mt-15px grid grid-cols-1 gap-3"
>
<div
v-for="(file, index) in modelData.list"
:key="index"
class="flex justify-between items-center p-10px border-2 border-[#c0c4cc] rounded-md shadow-sm hover:border-[#409eff] transition-colors duration-300"
>
<div class="flex items-center">
<el-icon class="mr-8px text-[#909399]"><document /></el-icon>
<span class="text-[14px] text-[#606266] break-all">{{ file.name }}</span>
</div>
<el-button type="danger" link @click="removeFile(index)">
<el-icon><delete /></el-icon>
</el-button>
</div>
</div>
</div>
</el-form-item> </el-form-item>
<!-- 添加下一步按钮 --> <!-- 添加下一步按钮 -->
<el-form-item> <el-form-item>
<div class="flex justify-end"> <div class="flex justify-end w-full">
<el-button type="primary" @click="handleNextStep">下一步</el-button> <el-button type="primary" @click="handleNextStep" :disabled="!isAllUploaded">
下一步
</el-button>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PropType } from 'vue' import { PropType, ref, computed, inject, getCurrentInstance, onMounted } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue' import { UploadFilled, Document, Delete } from '@element-plus/icons-vue'
import { useMessage } from '@/hooks/web/useMessage'
import { useUpload } from '@/components/UploadFile/src/useUpload'
import { generateAcceptedFileTypes } from '@/utils'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
...@@ -98,128 +81,191 @@ const props = defineProps({ ...@@ -98,128 +81,191 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
// 表单引用 const formRef = ref() // 表单引用
const formRef = ref() const uploadRef = ref() // 上传组件引用
const parent = inject('parent', null) // 获取父组件实例
const { uploadUrl, httpRequest } = useUpload() // 使用上传组件的钩子
const message = useMessage() // 消息弹窗
const fileList = ref([]) // 文件列表
const uploadingCount = ref(0) // 上传中的文件数量
// 获取父组件实例 // 支持的文件类型和大小限制
const parent = inject('parent', null) const supportedFileTypes = [
'TXT',
'MARKDOWN',
'MDX',
'PDF',
'HTML',
'XLSX',
'XLS',
'DOC',
'DOCX',
'CSV',
'EML',
'MSG',
'PPTX',
'XML',
'EPUB',
'PPT',
'MD',
'HTM'
]
const allowedExtensions = supportedFileTypes.map((ext) => ext.toLowerCase()) // 小写的扩展名列表
const maxFileSize = 15 // 最大文件大小(MB)
// 表单数据 // 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型
const acceptedFileTypes = computed(() => generateAcceptedFileTypes(supportedFileTypes))
/** 表单数据 */
const modelData = computed({ const modelData = computed({
get: () => props.modelValue, get: () => {
return props.modelValue
},
set: (val) => emit('update:modelValue', val) set: (val) => emit('update:modelValue', val)
}) })
// 知识库列表 /** 确保 list 属性存在 */
interface KnowledgeBase { const ensureListExists = () => {
id: number if (!props.modelValue.list) {
name: string emit('update:modelValue', {
...props.modelValue,
list: []
})
}
} }
const knowledgeBaseList = ref<KnowledgeBase[]>([]) /** 是否所有文件都已上传完成 */
const isAllUploaded = computed(() => {
return modelData.value.list && modelData.value.list.length > 0 && uploadingCount.value === 0
})
// 表单校验规则 /**
const rules = { * 上传前检查文件类型和大小
name: [{ required: true, message: '请输入文档名称', trigger: 'blur' }], *
knowledgeBaseId: [{ required: true, message: '请选择知识库', trigger: 'change' }], * @param file 待上传的文件
documentType: [{ required: true, message: '请选择文档类型', trigger: 'change' }], * @returns 是否允许上传
content: [ */
{ const beforeUpload = (file) => {
required: true, // 1.1 检查文件扩展名
message: '请输入文档内容', const fileName = file.name.toLowerCase()
trigger: 'blur', const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1)
validator: (rule, value, callback) => { if (!allowedExtensions.includes(fileExtension)) {
if (modelData.value.documentType === 'text' && !value) { message.error('不支持的文件类型！')
callback(new Error('请输入文档内容')) return false
} else {
callback()
} }
// 1.2 检查文件大小
if (!(file.size / 1024 / 1024 < maxFileSize)) {
message.error(`文件大小不能超过 ${maxFileSize} MB！`)
return false
} }
}
], // 2. 增加上传中的文件计数
url: [ uploadingCount.value++
return true
}
/**
* 文件上传成功处理
*
* @param response 上传响应
* @param file 上传的文件
*/
const handleUploadSuccess = (response, file) => {
if (response && response.data) {
// 添加到文件列表
ensureListExists()
emit('update:modelValue', {
...props.modelValue,
list: [
...props.modelValue.list,
{ {
required: true, name: file.name,
message: '请输入网页链接', url: response.data
trigger: 'blur',
validator: (rule, value, callback) => {
if (modelData.value.documentType === 'url' && !value) {
callback(new Error('请输入网页链接'))
} else {
callback()
}
} }
} ]
], })
file: [
{
required: true,
message: '请上传文件',
trigger: 'change',
validator: (rule, value, callback) => {
if (['pdf', 'word'].includes(modelData.value.documentType) && !modelData.value.file) {
callback(new Error('请上传文件'))
} else { } else {
callback() message.error(`文件 ${file.name} 上传失败`)
} }
}
} // 减少上传中的文件计数
] uploadingCount.value = Math.max(0, uploadingCount.value - 1)
} }
// 文件上传处理 /**
const handleFileChange = (file) => { * 文件上传失败处理
modelData.value.file = file.raw *
* @param error 错误信息
* @param file 上传的文件
*/
const handleUploadError = (error, file) => {
message.error(`文件 ${file.name} 上传失败: ${error}`)
// 减少上传中的文件计数
uploadingCount.value = Math.max(0, uploadingCount.value - 1)
} }
// 下一步按钮处理 /**
const handleNextStep = () => { * 文件变更处理
// 获取父组件的goToNextStep方法 *
const parentEl = parent || getCurrentInstance()?.parent * @param file 变更的文件
if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') { */
parentEl.exposed.goToNextStep() const handleFileChange = (file) => {
if (file.status === 'success' || file.status === 'fail') {
uploadingCount.value = Math.max(0, uploadingCount.value - 1)
} }
} }
// 初始化数据 /**
const initData = async () => { * 文件移除处理
// 获取知识库列表 *
// knowledgeBaseList.value = await KnowledgeBaseApi.getKnowledgeBaseList() * @param file 被移除的文件
*/
// 模拟数据 const handleFileRemove = (file) => {
knowledgeBaseList.value = [ if (file.status === 'uploading') {
{ id: 1, name: '产品知识库' }, uploadingCount.value = Math.max(0, uploadingCount.value - 1)
{ id: 2, name: '技术文档库' }, }
{ id: 3, name: '客户服务知识库' }
]
} }
// 表单校验 /**
const validate = () => { * 从列表中移除文件
return new Promise((resolve, reject) => { *
formRef.value?.validate((valid) => { * @param index 要移除的文件索引
if (valid) { */
resolve(true) const removeFile = (index: number) => {
} else { // 从列表中移除文件
reject(new Error('请完善表单信息')) const newList = [...props.modelValue.list]
} newList.splice(index, 1)
}) // 更新表单数据
emit('update:modelValue', {
...props.modelValue,
list: newList
}) })
} }
// 对外暴露方法 /** 下一步按钮处理 */
defineExpose({ const handleNextStep = () => {
validate // 1.1 检查是否有文件上传
}) if (!modelData.value.list || modelData.value.list.length === 0) {
message.warning('请上传至少一个文件')
return
}
// 1.2 检查是否有文件正在上传
if (uploadingCount.value > 0) {
message.warning('请等待所有文件上传完成')
return
}
// 初始化 // 2. 获取父组件的goToNextStep方法
const parentEl = parent || getCurrentInstance()?.parent
if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') {
parentEl.exposed.goToNextStep()
}
}
/** 初始化 */
onMounted(() => { onMounted(() => {
initData() ensureListExists()
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.upload-demo {
width: 100%;
}
</style>
src/views/ai/knowledge/document/create/index.vue
...@@ -90,12 +90,7 @@ const steps = [{ title: '上传文档' }, { title: '文档分段' }, { title: ' ...@@ -90,12 +90,7 @@ const steps = [{ title: '上传文档' }, { title: '文档分段' }, { title: '
// 表单数据 // 表单数据
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
name: '', list: [], // 用于存储上传的文件列表
knowledgeBaseId: undefined,
documentType: undefined,
content: '',
file: null,
segments: [],
status: 0 // 0: 草稿, 1: 处理中, 2: 已完成 status: 0 // 0: 草稿, 1: 处理中, 2: 已完成
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment