update

src/components/LayoutSider/index.vue

@@ -17,16 +17,15 @@ const menuItemClick = (e) => {
 <template>
     <div class="w-full h-full box-border">
         <a-menu @menu-item-click="menuItemClick">
-            <template v-for="item in SystemStore.RoutesTemp" :key="item.name">
+            <template v-for="item in SystemStore.RoutesTemp.filter(v=>!v.meta.hidden)" :key="item.name">
                 <template v-if="item.children?.length > 0">
                     <a-sub-menu>
                         <template #icon>
                             <icon-apps></icon-apps>
                         </template>
                         <template #title>{{ item.title }}</template>
-                        <a-menu-item v-for="k in item.children" :key="`/${item.path}/${k.path}`">{{
-                                k.title
-                            }}
+                        <a-menu-item v-for="k in item.children.filter(v=>!v.meta.hidden)" :key="`/${item.path}/${k.path}`">
+                            {{ k.title }}
                         </a-menu-item>
                     </a-sub-menu>
                 </template>

src/pages/layout/index.vue

@@ -13,7 +13,9 @@ import LayoutSider from '../../components/LayoutSider/index.vue';
                 <LayoutSider></LayoutSider>
             </a-layout-sider>
             <a-layout-content>
+                <transition name="fade">
                     <router-view></router-view>
+                </transition>
             </a-layout-content>
         </a-layout>
     </a-layout>
@@ -23,4 +25,14 @@ import LayoutSider from '../../components/LayoutSider/index.vue';
 #layout-header {
     box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06);
 }
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
 </style>

src/pages/merchant/pages/task-center/index.vue

@@ -12,10 +12,20 @@ onMounted(() => {
 <template>
     <!-- 任务中心 -->
     <div id="Item-View">
+        <transition name="fade">
             <router-view></router-view>
+        </transition>
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
 
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

src/pages/merchant/pages/task-center/reward-mission.vue

@@ -4,6 +4,7 @@ import Filter from "../../../../components/Filter/index.vue";
 import TooltipTag from "../../../../components/TooltipTag/index.vue";
 import useTableQuery from "../../../../hooks/useTableQuery.js";
 import Api from "../../../../api/index.js";
+import {toPath} from "../../../../utils/index.js";
 
 const columns = [
     {
@@ -139,7 +140,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
 
         <div class="my-[20px] flex-grow flex flex-col">
             <div class="flex gap-[16px] mb-[20px]">
-                <a-button type="primary">
+                <a-button type="primary" @click="toPath('/home/task-center/new-task')">
                     <template #icon>
                         <icon-plus/>
                     </template>

src/pinia/SystemStore/mock.js

@@ -35,7 +35,8 @@ const mockRoutes = [
                 title: '新建任务',
                 icon: '',
                 meta: {
-                    name: '新建任务'
+                    name: '新建任务',
+                    hidden: true,
                 },
                 component: 'new-task',
             }