Add D3.js dependency and implement pending upload state management
- Added D3.js as a dependency in `package.json` and `package-lock.json` for data visualization capabilities. - Introduced a new `pendingUpload.js` store to manage files and simulation requirements before initiating the simulation process. - Updated `Home.vue` to store pending uploads and navigate to the `Process` page immediately, deferring API calls for improved user experience. - Enhanced `Process.vue` to handle new project initialization and display project status effectively, including progress tracking for ontology generation and graph building.
This commit is contained in:
33
frontend/src/store/pendingUpload.js
Normal file
33
frontend/src/store/pendingUpload.js
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 临时存储待上传的文件和需求
|
||||
* 用于首页点击启动引擎后立即跳转,在Process页面再进行API调用
|
||||
*/
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
files: [],
|
||||
simulationRequirement: '',
|
||||
isPending: false
|
||||
})
|
||||
|
||||
export function setPendingUpload(files, requirement) {
|
||||
state.files = files
|
||||
state.simulationRequirement = requirement
|
||||
state.isPending = true
|
||||
}
|
||||
|
||||
export function getPendingUpload() {
|
||||
return {
|
||||
files: state.files,
|
||||
simulationRequirement: state.simulationRequirement,
|
||||
isPending: state.isPending
|
||||
}
|
||||
}
|
||||
|
||||
export function clearPendingUpload() {
|
||||
state.files = []
|
||||
state.simulationRequirement = ''
|
||||
state.isPending = false
|
||||
}
|
||||
|
||||
export default state
|
||||
@@ -206,7 +206,6 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { generateOntology } from '../api/graph'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -285,31 +284,20 @@ const scrollToBottom = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 开始模拟
|
||||
const startSimulation = async () => {
|
||||
// 开始模拟 - 立即跳转,API调用在Process页面进行
|
||||
const startSimulation = () => {
|
||||
if (!canSubmit.value || loading.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const formDataObj = new FormData()
|
||||
files.value.forEach(file => {
|
||||
formDataObj.append('files', file)
|
||||
// 存储待上传的数据
|
||||
import('../store/pendingUpload.js').then(({ setPendingUpload }) => {
|
||||
setPendingUpload(files.value, formData.value.simulationRequirement)
|
||||
|
||||
// 立即跳转到Process页面(使用特殊标识表示新建项目)
|
||||
router.push({
|
||||
name: 'Process',
|
||||
params: { projectId: 'new' }
|
||||
})
|
||||
formDataObj.append('simulation_requirement', formData.value.simulationRequirement)
|
||||
|
||||
const response = await generateOntology(formDataObj)
|
||||
|
||||
if (response.success) {
|
||||
router.push({
|
||||
name: 'Process',
|
||||
params: { projectId: response.data.project_id }
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Start simulation error:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user