feature: dash

src/App.vue

@@ -64,7 +64,6 @@ body {
     }
     .right {
       flex-grow: 1;
-      padding: 20px;
       flex-shrink: 0;
       box-sizing: border-box;
     }

src/components/block.vue

@@ -14,6 +14,9 @@ const props = defineProps({
 </script>
 
 <style lang="less" scoped>
+div {
+  padding: 20px;
+}
 h3 {
   font-size: 24px;
   padding-bottom: 20px;

src/components/navBar.vue

@@ -4,6 +4,9 @@
       <h1>Ludash</h1>
     </div>
     <div class="menu">
+      <RouterLink to="/admin">admin</RouterLink>
+      <RouterLink to="/bi">bi</RouterLink>
+      <RouterLink to="/dashboard">dashboard</RouterLink>
       <RouterLink to="/flow">Flow</RouterLink>
       <RouterLink to="/install">安装</RouterLink>
       <RouterLink to="/sdk">SDK</RouterLink>

src/router/index.js

@@ -1,6 +1,13 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import { defineComponent } from "vue";
 
+const DynamicComponent = defineComponent({
+  name: "DynamicComponent",
+  render() {
+    return <router-view></router-view>;
+  },
+});
+
 /**
  * @type {import("vue-router").RouteRecordRaw[]}
  */
@@ -15,12 +22,7 @@ const routes = [
   {
     path: "/install",
     name: "install",
-    component: defineComponent({
-      name: "DynamicComponent",
-      render() {
-        return <router-view></router-view>;
-      },
-    }),
+    component: DynamicComponent,
     children: [
       {
         path: "",
@@ -33,30 +35,35 @@ const routes = [
   {
     path: "/flow",
     name: "flow",
-    component: defineComponent({
-      name: "DynamicComponent",
-      render() {
-        return <router-view></router-view>;
+    component: DynamicComponent,
+    children: [
+      {
+        path: "",
+        name: "flowIndex",
+        component: () =>
+          import(/* webpackChunkName: "flow" */ "../views/svg/index.vue"),
       },
-    }),
+    ],
+  },
+  {
+    path: "/dashboard",
+    name: "dashboard",
+    component: DynamicComponent,
     children: [
       {
         path: "",
-        name: "svg",
+        name: "dashboardIndex",
         component: () =>
-          import(/* webpackChunkName: "svg" */ "../views/svg/index.vue"),
+          import(
+            /* webpackChunkName: "dashboard" */ "../views/dashboard/index.vue"
+          ),
       },
     ],
   },
   {
     path: "/sdk",
     name: "sdk",
-    component: defineComponent({
-      name: "DynamicComponent",
-      render() {
-        return <router-view></router-view>;
-      },
-    }),
+    component: DynamicComponent,
     children: [
       {
         path: "queue",

src/views/dashboard/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>this is dashboard</div>
+</template>

src/views/svg/index.vue

@@ -32,6 +32,12 @@
   </div>
 </template>
 
+<script>
+export default {
+  name: "Flow",
+};
+</script>
+
 <script setup>
 import { reactive, ref, onBeforeUnmount, onMounted, computed } from "vue";
 import SvgRect from "./components/svgRect.vue";