Sfoglia il codice sorgente

feat(router): 添加创建工作流页面路由配置

新增 `/workflow-add` 路由,用于支持从搜索平台进入创建工作流页面。
同时更新了 Home 页面和 SearchPlatform 页面中“创建工作流”按钮的点击事件,
使其能够正确跳转至新增的路由页面。

此外,调整了 Breadcrumb 组件的内边距样式,并移除了 App.vue 中 header-content 的多余 padding 设置。
zhangningning 1 settimana fa
parent
commit
e857ecc518

+ 1 - 0
src/App.vue

@@ -130,6 +130,7 @@ const handleLogout = () => {
   left: 0;
   right: 0;
   z-index: 1000;
+  padding: 0;
   
   .header-content {
     max-width: 1520px;

+ 1 - 1
src/components/Breadcrumb.vue

@@ -67,6 +67,6 @@ const breadcrumbItems = computed(() => {
 
 <style scoped>
 .app-breadcrumb {
-  padding: 10px 0;
+  padding: 20px 0 10px;
 }
 </style>

+ 10 - 1
src/pages/Home.vue

@@ -54,7 +54,7 @@
             {{$t('common.shousuo')}}
           </button>
         </div>
-        <button class="create-btn gradient">
+        <button class="create-btn gradient" @click.stop.prevent="goWorkflowAdd">
           <img :src="addIcon" alt="" class="icon-add">
           {{$t('common.chuangjiangongzuoliu')}}
         </button>
@@ -148,6 +148,15 @@ const goSearchPlatform = () => {
   })
 };
 
+const goWorkflowAdd = () => {
+  //增加参数名称
+  router.push({
+    path: `workflow-add`,
+    query: {
+    }
+  })
+};
+
 </script>
 
 <style lang="scss">

+ 19 - 9
src/pages/SearchPlatform.vue

@@ -4,6 +4,7 @@
       {{currentPath}}
       <Breadcrumb />
       <h1 @click="goWorkflowDetail">{{activePlatform}}</h1>
+      <h1 @click="goWorkflowAdd">创建工作流</h1>
     </div>
     <router-view />
   </div>
@@ -13,6 +14,7 @@
   import { useRouter, useRoute } from 'vue-router'
   const router = useRouter()
   const route = useRoute()
+  console.log(router,route)
   import { ref, computed } from 'vue'
   //获取参数
   const query = router.currentRoute.value.query
@@ -23,15 +25,23 @@
     return route.matched.length > 1
   })
   const goWorkflowDetail = () => {
-  //增加参数名称
-  router.push({
-    path: `/search-platform/workflow-detail`,
-    query: {
-      id:2,
-      metaTitle: 'WorkflowDetail'
-    }
-  })
-};
+    //增加参数名称
+    router.push({
+      path: `/search-platform/workflow-detail`,
+      query: {
+        id:2,
+        metaTitle: 'WorkflowDetail'
+      }
+    })
+  };
+  const goWorkflowAdd = () => {
+    //增加参数名称
+    router.push({
+      path: `/search-platform/workflow-add`,
+      query: {
+      }
+    })
+  };
 </script>
 
 <style scoped lang="scss">

+ 13 - 0
src/pages/WorkflowAdd.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="workflow-add container-height">
+    <div>
+      <Breadcrumb />
+      <h1>创建新的工作流</h1>
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+</script>

+ 12 - 6
src/router/index.js

@@ -38,15 +38,21 @@ const routes = [
         name: 'WorkflowDetail',
         component: () => import('@/pages/WorkflowDetail.vue'),
         meta: { title: '' }
+      },
+      {
+        path: 'workflow-add',
+        name: 'WorkflowAdd',
+        component: () => import('@/pages/WorkflowAdd.vue'),
+        meta: { title: 'common.chuangjiangongzuoliu' }
       }
     ]
   },
-  // {
-  //   path: '/workflow-detail',
-  //   name: 'WorkflowDetail',
-  //   component: () => import('@/pages/WorkflowDetail.vue'),
-  //   meta: { title: '' }
-  // },
+  {
+    path: '/workflow-add',
+    name: 'WorkflowAddHome',
+    component: () => import('@/pages/WorkflowAdd.vue'),
+    meta: { title: 'common.chuangjiangongzuoliu' }
+  },
   {
     path: '/course/:id',
     name: 'CourseDetail',