frontend-vue

DataFlow WebUI Frontend (Vue 3 + Vite)

⚠ CHANGE POLICY: Before creating any new page, route, or nav item, check webui-change-policy.mdc. Only operator rendering fixes and missing param editors are allowed. New dashboard pages, analytics views, and feature-level UI are prohibited unless the user explicitly overrides.

Tech Stack

• Vue 3 + Vite
• Vue Router (hash history: createWebHashHistory)
• Pinia (setup-store style)
• Vue Flow (@vue-flow/core) for pipeline DAG editor
• VueFluent3 (@creatorsn/vfluent3) for UI components
• Axios for API calls (auto-generated from OpenAPI)

Two Component Styles (both are used)

Area	Style
mainFlow/nodes/, new components	<script setup> + defineProps / defineEmits
mainFlow/pipeline/, panels, views	Options API: export default { props, data, computed, methods }

Do NOT convert existing components between styles. Match the style of the file you're editing.

Router — Adding a New Manage Page

1. Add route in frontend/src/router/Manage/index.js:

{
    path: 'my-page',
    component: () => AsyncLoad(() => import('@/views/manage/myPage/index.vue')),
    meta: { title: 'Dataflow-MyPage' }
}

1. Add nav item in frontend/src/views/manage/index.vue (navList array):

{
    key: 4,
    name: () => this.local('My Page'),
    icon: 'ViewDashboard',
    route: '/m/my-page'
}

1. Create frontend/src/views/manage/myPage/index.vue

Note: Lazy loading uses AsyncLoad wrapper (not raw import()), defined in router/tools.js.

Vue Flow Pipeline Editor

The pipeline canvas is components/manage/mainFlow/index.vue. Key architecture:

Node Types (registered via slots)

<VueFlow v-model:nodes="thisNodes" v-model:edges="thisEdges">
    <template #node-base-node="nodeProps">
        <baseNode v-bind="nodeProps" />
    </template>
    <template #node-operator-node="nodeProps">
        <operatorNode v-bind="nodeProps" @update-node-data="updateNodeData" />
    </template>
    <template #node-database-node="nodeProps">
        <databaseNode v-bind="nodeProps" />
    </template>
</VueFlow>