[Feature] Optimize router & metadata Menu (#64)

paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx

@@ -15,26 +15,38 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License. */
 
+import { RouterLink } from "vue-router"
+
 export default defineComponent({
   name: 'MenuBar',
   setup() {
     const { t } = useLocaleHooks()
 
+    const renderLabel = (label: string, link: string) => {
+      return h(
+        RouterLink,
+        {
+          to: {name: link}
+        },
+        { default: () => label }
+      )
+    }
+
     const menuOptions = computed(() => ([
       {
-        label: t('layout.playground'),
+        label: () => renderLabel(t('layout.playground'), 'playground'),
         key: 'playground',
       },
       {
-        label: t('layout.metadata'),
+        label: () => renderLabel(t('layout.metadata'), 'metadata'),
         key: 'metadata',
       },
       {
-        label: t('layout.cdc_ingestion'),
+        label: () => renderLabel(t('layout.cdc_ingestion'), 'cdc_ingestion'),
         key: 'cdc_ingestion',
       },
       {
-        label: t('layout.system'),
+        label: () => renderLabel(t('layout.system'), 'system'),
         key: 'system',
       },
     ]))

paimon-web-ui-new/src/locales/en/modules/login.ts

@@ -23,4 +23,4 @@ export default {
   password_tips: 'Please input password',
   light: 'Light',
   dark: 'Dark'
-}
+}

paimon-web-ui-new/src/router/modules/cdc_ingestion.ts

@@ -0,0 +1,23 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export default {
+  path: '/cdc_ingestion',
+  name: 'cdc_ingestion',
+  meta: { title: 'CDC Ingestion' },
+  component: () => import('@/layouts/content'),
+}

paimon-web-ui-new/src/router/modules/metadata.ts

@@ -0,0 +1,24 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export default {
+  path: '/metadata',
+  name: 'metadata',
+  meta: { title: 'Metadata' },
+  component: () => import('@/views/metadata')
+}
+

paimon-web-ui-new/src/router/modules/playground.ts

@@ -15,35 +15,24 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License. */
 
-export default [
-  {
-    path: '/',
-    name: 'homepage',
-    meta: { title: '首页' },
-    redirect: { name: 'playground' },
-    component: () => import('@/layouts/content'),
-    children: [
-      {
-        path: '/playground',
-        name: 'playground',
-        meta: { title: '查询控制台' },
-        redirect: { name: 'playground-query' },
-        component: () => import('@/views/playground'),
-        children: [
-          {
-            path: '/playground/query',
-            name: 'playground-query',
-            meta: { title: '查询' },
-            component: () => import('@/views/playground/components/query')
-          },
-          {
-            path: '/playground/workbench',
-            name: 'playground-workbench',
-            meta: { title: '工作台' },
-            component: () => import('@/views/playground/components/workbench')
-          },
-        ]
-      },
-    ]
-  }
-]
+export default {
+  path: '/playground',
+  name: 'playground',
+  meta: { title: 'Playground' },
+  redirect: { name: 'playground-query' },
+  component: () => import('@/views/playground'),
+  children: [
+    {
+      path: '/playground/query',
+      name: 'playground-query',
+      meta: { title: 'Query' },
+      component: () => import('@/views/playground/components/query')
+    },
+    {
+      path: '/playground/workbench',
+      name: 'playground-workbench',
+      meta: { title: 'Workbench' },
+      component: () => import('@/views/playground/components/workbench')
+    },
+  ]
+}

paimon-web-ui-new/src/router/modules/system.ts

@@ -0,0 +1,23 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export default {
+  path: '/system',
+  name: 'system',
+  meta: { title: 'System' },
+  component: () => import('@/layouts/content'),
+}

paimon-web-ui-new/src/router/routes.ts

@@ -17,14 +17,26 @@ under the License. */
 
 import type { RouteRecordRaw } from 'vue-router'
 import playground_routes from './modules/playground'
+import metadata_routes from './modules/metadata'
+import cdc_ingestion_routes from './modules/cdc_ingestion'
+import system from './modules/system'
 
 /**
  * Basic page
  */
-const basePage: RouteRecordRaw[] = [
-  ...playground_routes,
-]
-
+const basePage: RouteRecordRaw = {
+  path: '/',
+  name: 'homepage',
+  meta: { title: 'Home' },
+  redirect: { name: 'playground' },
+  component: () => import('@/layouts/content'),
+  children: [
+    playground_routes,
+    metadata_routes,
+    cdc_ingestion_routes,
+    system,
+  ]
+}
 /**
  * Login page
  */
@@ -37,6 +49,6 @@ const loginPage: RouteRecordRaw[] = [
 ]
 
 
-const routes: RouteRecordRaw[] = [...basePage, ...loginPage]
+const routes: RouteRecordRaw[] = [basePage, ...loginPage]
 
 export default routes

paimon-web-ui-new/src/themes/modules/dark.ts

@@ -70,4 +70,4 @@ const dark: GlobalThemeOverrides = {
   }
 }
 
-export default dark
+export default dark

paimon-web-ui-new/src/themes/modules/light.ts

@@ -37,4 +37,4 @@ const light: GlobalThemeOverrides = {
   }
 }
 
-export default light
+export default light

paimon-web-ui-new/src/views/login/index.module.scss

@@ -28,4 +28,4 @@ under the License. */
 .logo {
   height: 80px;
   width: 80px;
-}
+}

paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss

@@ -0,0 +1,33 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+.container {
+  width: 100%;
+  height: 100%;
+
+  .card {
+    height: 100%;
+
+    .search {
+      display: flex;
+    }
+
+    .icon {
+      display: flex;
+    }
+  }
+}