feat:增加接口调用

src/components/Library/LibraryFileDialog.vue

@@ -1,26 +1,65 @@
 <template>
   <el-dialog v-model="libraryStore.fileDialogVisible"
-             title="新增资料" center destroy-on-close>
-    <el-form ref="ruleFormRef" :model="libraryStore.currentFile"
-             :rules="rules" label-width="auto">
-      <el-form-item label="学科" prop="subject">
-        <el-select v-model="libraryStore.currentFile.subject"
-                   multiple filterable allow-create
-                   placeholder="请输入或选择学科名称" style="width: 240px">
-          <el-option v-for="(item, index) in subjectOptions"
-                     :key="index" :label="item" :value="item"/>
-        </el-select>
-      </el-form-item>
+             title="新增资料" width="80%" center destroy-on-close>
+    <el-splitter>
+      <el-splitter-panel>
+        <el-form ref="ruleFormRef" :model="libraryStore.currentFile"
+                 :rules="rules" label-width="auto">
+          <el-form-item label="学科" prop="subject">
+            <el-select v-model="libraryStore.currentFile.subject"
+                       multiple filterable allow-create
+                       placeholder="请输入或选择学科名称" style="width: 240px">
+              <el-option v-for="(item, index) in subjectOptions"
+                         :key="index" :label="item" :value="item"/>
+            </el-select>
+          </el-form-item>
 
-      <el-form-item label="模块" prop="module">
-        <el-select v-model="libraryStore.currentFile.module"
-                   multiple filterable allow-create
-                   placeholder="请输入或选择模块名称" style="width: 240px">
-          <el-option v-for="(item, index) in subjectOptions"
-                     :key="index" :label="item" :value="item"/>
-        </el-select>
-      </el-form-item>
-    </el-form>
+          <el-form-item label="模块" prop="module">
+            <el-select v-model="libraryStore.currentFile.module"
+                       multiple filterable allow-create
+                       placeholder="请输入或选择模块名称" style="width: 240px">
+              <el-option v-for="(item, index) in subjectOptions"
+                         :key="index" :label="item" :value="item"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="文件">
+            <el-upload class="upload-demo"
+                       drag
+                       :http-request="upload">
+              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+              <div class="el-upload__text">
+                Drop file here or <em>click to upload</em>
+              </div>
+              <template #tip>
+                <div class="el-upload__tip">
+                  jpg/png files with a size less than 500kb
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </el-splitter-panel>
+      <el-splitter-panel>
+        <el-input
+            v-model="fileContent"
+            style="width: 100%;padding: 10px;"
+            :rows="20"
+            type="textarea"
+            placeholder="Please input"
+        />
+      </el-splitter-panel>
+      <el-splitter-panel>
+        <el-button type="primary" @click="generate">生成题库</el-button>
+        <el-input
+            v-model="questionContent"
+            style="width: 100%;padding: 10px;"
+            :rows="20"
+            type="textarea"
+            placeholder="Please input"
+        />
+      </el-splitter-panel>
+    </el-splitter>
 
     <template #footer>
       <el-button @click="libraryStore.fileDialogVisible = false">取消</el-button>
@@ -32,7 +71,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useLibraryStore } from '@/stores/library.ts'
-import type { FormInstance } from 'element-plus'
+import { ElMessage, type FormInstance, type UploadRequestOptions } from 'element-plus'
+import { UploadFilled } from '@element-plus/icons-vue'
+import axios from 'axios'
 
 const libraryStore = useLibraryStore()
 
@@ -40,6 +81,9 @@ const ruleFormRef = ref<FormInstance>()
 
 const subjectOptions = ['中医学', '公务员']
 
+const fileContent = ref<string>()
+const questionContent = ref<string>()
+
 const rules = {
   subject: [
     { required: true, message: '请输入学科名称', trigger: 'blur' }
@@ -49,6 +93,65 @@ const rules = {
   ]
 }
 
+const upload = async (options: UploadRequestOptions) => {
+  const { file } = options
+
+  const formData = new FormData()
+  formData.append('file', file)
+
+  try {
+    const res = await axios.post('http://127.0.0.1:8000/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    ElMessage.success('上传成功')
+    fileContent.value = res.data.text
+  } catch (err) {
+    ElMessage.error('上传失败')
+    console.error(err)
+  }
+}
+
+const generate = async () => {
+  if (!fileContent.value) {
+    ElMessage.error('请先上传资料')
+    return
+  }
+
+  questionContent.value = ''
+
+  try {
+    const response = await fetch('http://127.0.0.1:8000/generate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        message: fileContent.value
+      })
+    })
+
+    if (!response.body) {
+      throw new Error('未获取到响应流')
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder('utf-8')
+
+    while (true) {
+      const { value, done } = await reader.read()
+      if (done) break
+      questionContent.value += decoder.decode(value, { stream: true })
+    }
+
+    ElMessage.success('生成完成')
+  } catch (err) {
+    ElMessage.error('生成失败')
+    console.error(err)
+  }
+}
+
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid, fields) => {