feat(pages): improve the routing of the connections related pages

emqx · Feb 6, 2025 · 8d4f2c5 · 8d4f2c5
1 parent 4de2230
commit 8d4f2c5
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 44 deletions.
diff --git a/apps/desktop/src/main/config/menu.ts b/apps/desktop/src/main/config/menu.ts
@@ -72,7 +72,6 @@ function getMenuTemplate(win: BrowserWindow, lang?: Lang) {
           label: labels.newConnection,
           accelerator: 'CmdOrCtrl+N',
           click: () => {
-            // TODO: implement new connection
             win.webContents.send('menu-clicked', 'newConnection')
           },
         },

diff --git a/apps/desktop/src/renderer/src/pages/connections.vue b/apps/desktop/src/renderer/src/pages/connections.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { connections } = useMockData()
+</script>
+
+<template>
+  <CommonSplitView class="connections-container" min-size="180px" max-size="400px">
+    <template #panel-1>
+      <div class="connections-list h-full shadow shadow-shadow-leftlist">
+        <ConnectionsListView :data="connections" />
+      </div>
+    </template>
+    <template #panel-2>
+      <div class="connection-detail h-full">
+        <RouterView />
+      </div>
+    </template>
+  </CommonSplitView>
+</template>
diff --git a/apps/desktop/src/renderer/src/pages/connections/[id].edit.vue b/apps/desktop/src/renderer/src/pages/connections/[id].edit.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    TODO: Edit Connection
+  </div>
+</template>
diff --git a/apps/desktop/src/renderer/src/pages/connections/[id].vue b/apps/desktop/src/renderer/src/pages/connections/[id].vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-// const route = useRoute()
-// const id = computed(() => route.name === '/connections/[id]' && route.params.id)
+const route = useRoute()
+const router = useRouter()
+const id = computed(() => (route.name === '/connections/[id]' && route.params.id).toString())
 </script>
 
 <template>
   TODO: Connection Details View
+  <ElButton @click="router.push({ name: '/connections/[id].edit', params: { id } })">
+    Edit {{ `/connections/${id}/edit` }}
+  </ElButton>
   <!-- <ConnectionsDetailsView
     :connection="{
       name: 'test',

diff --git a/apps/desktop/src/renderer/src/pages/connections/create.vue b/apps/desktop/src/renderer/src/pages/connections/create.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    TODO: Create New Connection
+  </div>
+</template>
diff --git a/apps/desktop/src/renderer/src/pages/connections/index.vue b/apps/desktop/src/renderer/src/pages/connections/index.vue
@@ -1,19 +1,3 @@
-<script lang="ts" setup>
-const { connections } = useMockData()
-</script>
-
 <template>
-  <CommonSplitView class="connections-container" min-size="180px" max-size="400px">
-    <template #panel-1>
-      <div class="connections-list h-full shadow shadow-shadow-leftlist">
-        <ConnectionsListView :data="connections" />
-      </div>
-    </template>
-    <template #panel-2>
-      <div class="connection-detail h-full">
-        <RouterView v-if="connections.length" />
-        <CommonEmptyView v-else />
-      </div>
-    </template>
-  </CommonSplitView>
+  <CommonEmptyView />
 </template>
diff --git a/apps/desktop/src/renderer/src/plugins/electronMenu.ts b/apps/desktop/src/renderer/src/plugins/electronMenu.ts
@@ -20,7 +20,7 @@ export function createElectronMenuPlugin() {
             window.api.installCLI()
             break
           case 'newConnection':
-            router.push('/connections/0?oper=new')
+            router.push('/connections/create')
             break
           case 'newWindow':
             // TODO: implement new window

diff --git a/apps/desktop/typed-router.d.ts b/apps/desktop/typed-router.d.ts
@@ -19,8 +19,11 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
+    '/connections': RouteRecordInfo<'/connections', '/connections', Record<never, never>, Record<never, never>>,
     '/connections/': RouteRecordInfo<'/connections/', '/connections', Record<never, never>, Record<never, never>>,
     '/connections/[id]': RouteRecordInfo<'/connections/[id]', '/connections/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/connections/[id].edit': RouteRecordInfo<'/connections/[id].edit', '/connections/:id/edit', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/connections/create': RouteRecordInfo<'/connections/create', '/connections/create', Record<never, never>, Record<never, never>>,
     '/help': RouteRecordInfo<'/help', '/help', Record<never, never>, Record<never, never>>,
     '/log': RouteRecordInfo<'/log', '/log', Record<never, never>, Record<never, never>>,
     '/script': RouteRecordInfo<'/script', '/script', Record<never, never>, Record<never, never>>,

diff --git a/apps/web/src/pages/connections.vue b/apps/web/src/pages/connections.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { connections } = useMockData()
+</script>
+
+<template>
+  <CommonSplitView class="connections-container" min-size="180px" max-size="400px">
+    <template #panel-1>
+      <div class="connections-list h-full shadow shadow-shadow-leftlist">
+        <ConnectionsListView :data="connections" />
+      </div>
+    </template>
+    <template #panel-2>
+      <div class="connection-detail h-full">
+        <RouterView />
+      </div>
+    </template>
+  </CommonSplitView>
+</template>
diff --git a/apps/web/src/pages/connections/[id].edit.vue b/apps/web/src/pages/connections/[id].edit.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    TODO: Edit Connection
+  </div>
+</template>
diff --git a/apps/web/src/pages/connections/[id].vue b/apps/web/src/pages/connections/[id].vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-// const route = useRoute()
-// const id = computed(() => route.name === '/connections/[id]' && route.params.id)
+const route = useRoute()
+const router = useRouter()
+const id = computed(() => (route.name === '/connections/[id]' && route.params.id).toString())
 </script>
 
 <template>
   TODO: Connection Details View
+  <ElButton @click="router.push({ name: '/connections/[id].edit', params: { id } })">
+    Edit {{ `/connections/${id}/edit` }}
+  </ElButton>
   <!-- <ConnectionsDetailsView
     :connection="{
       name: 'test',

diff --git a/apps/web/src/pages/connections/create.vue b/apps/web/src/pages/connections/create.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    TODO: Create New Connection
+  </div>
+</template>
diff --git a/apps/web/src/pages/connections/index.vue b/apps/web/src/pages/connections/index.vue
@@ -1,19 +1,3 @@
-<script lang="ts" setup>
-const { connections } = useMockData()
-</script>
-
 <template>
-  <CommonSplitView class="connections-container" min-size="180px" max-size="400px">
-    <template #panel-1>
-      <div class="connections-list h-full shadow shadow-shadow-leftlist">
-        <ConnectionsListView :data="connections" />
-      </div>
-    </template>
-    <template #panel-2>
-      <div class="connection-detail h-full">
-        <RouterView v-if="connections.length" />
-        <CommonEmptyView v-else />
-      </div>
-    </template>
-  </CommonSplitView>
+  <CommonEmptyView />
 </template>
diff --git a/apps/web/typed-router.d.ts b/apps/web/typed-router.d.ts
@@ -19,8 +19,11 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
+    '/connections': RouteRecordInfo<'/connections', '/connections', Record<never, never>, Record<never, never>>,
     '/connections/': RouteRecordInfo<'/connections/', '/connections', Record<never, never>, Record<never, never>>,
     '/connections/[id]': RouteRecordInfo<'/connections/[id]', '/connections/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/connections/[id].edit': RouteRecordInfo<'/connections/[id].edit', '/connections/:id/edit', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/connections/create': RouteRecordInfo<'/connections/create', '/connections/create', Record<never, never>, Record<never, never>>,
     '/help': RouteRecordInfo<'/help', '/help', Record<never, never>, Record<never, never>>,
     '/log': RouteRecordInfo<'/log', '/log', Record<never, never>, Record<never, never>>,
     '/script': RouteRecordInfo<'/script', '/script', Record<never, never>, Record<never, never>>,

diff --git a/packages/ui/src/components/common/LeftMenu.vue b/packages/ui/src/components/common/LeftMenu.vue
@@ -12,6 +12,7 @@ const { leftBarLogo } = useLinks()
 interface MenuItem {
   icon: any
   path: string
+  activeMatchRoutes?: string[]
 }
 
 interface Menus {
@@ -24,10 +25,11 @@ const menus = reactive<Menus>({
     connections: {
       icon: IconConnections,
       path: '/connections',
+      activeMatchRoutes: ['/connections', '/connections/', '/connections/[id]', '/connections/[id].edit'],
     },
     new: {
       icon: IconNew,
-      path: '/new',
+      path: '/connections/create',
     },
     script: {
       icon: IconScript,
@@ -66,11 +68,11 @@ const menus = reactive<Menus>({
       class="flex flex-col"
     >
       <RouterLink
-        v-for="{ path, icon } in menuGroup"
+        v-for="{ path, icon, activeMatchRoutes } in menuGroup"
         :key="path"
         :to="path"
-        :class="$style.item"
-        :active-class="$style['item-active']"
+        :class="[$style.item, { [$style['item-active']]: activeMatchRoutes?.includes($route.name as string) }]"
+        :exact-active-class="$style['item-active']"
       >
         <component :is="icon" class="text-xl" />
       </RouterLink>