|
|
@@ -0,0 +1,151 @@
|
|
|
+<template>
|
|
|
+ <div class="upload-container">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="title">
|
|
|
+ <div>选择数据源</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据源选择 -->
|
|
|
+ <div class="resource-btn" >导入已有文本</div>
|
|
|
+
|
|
|
+ <!-- 上传文件区域 -->
|
|
|
+ <el-form>
|
|
|
+ <div class="upload-section">
|
|
|
+ <div class="upload-label">上传文本文件</div>
|
|
|
+ <el-upload
|
|
|
+ class="upload-area"
|
|
|
+ action="#"
|
|
|
+ :file-list="fileList"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ list-type="text"
|
|
|
+ drag
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">拖拽文件至此，或者 <em>选择文件</em></div>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ 已支持 TXT、MARKDOWN、PDF、HTML、XLSX、XLS、DOCX、CSV、EML、MSG、PPTX、PPT、XML、EPUB，每个文件不超过 15MB。
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 下一步按钮 -->
|
|
|
+ <div class="next-button">
|
|
|
+ <el-button type="primary" :disabled="!fileList.length">下一步</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 知识库创建 -->
|
|
|
+ <div class="create-knowledge">
|
|
|
+ <el-link type="primary" underline>创建一个空知识库</el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const fileList = ref([])
|
|
|
+
|
|
|
+const handleRemove = (file, fileList) => {
|
|
|
+ console.log(file, fileList)
|
|
|
+}
|
|
|
+
|
|
|
+const beforeUpload = (file) => {
|
|
|
+ fileList.value.push(file)
|
|
|
+ return false
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.upload-container {
|
|
|
+ width: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.resource-btn {
|
|
|
+ margin-top: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 150px;
|
|
|
+ border: 1.5px solid #528bff;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #101828;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-section {
|
|
|
+ margin: 20px 0;
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-label {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-area {
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ padding: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-upload__text em {
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.el-upload__tip {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.next-button {
|
|
|
+ text-align: left;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.create-knowledge {
|
|
|
+ text-align: left;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.source-radio-group {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.el-radio-button {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-radio-button .el-icon {
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+</style>
|
cherishsince