web/frpc: redesign frpc dashboard with sidebar nav, proxy/visitor list and detail views (#5237)

web/frpc/src/router/index.ts

@@ -1,23 +1,26 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import Overview from '../views/Overview.vue'
 import ClientConfigure from '../views/ClientConfigure.vue'
 import ProxyEdit from '../views/ProxyEdit.vue'
 import VisitorEdit from '../views/VisitorEdit.vue'
-import { listStoreProxies } from '../api/frpc'
+import { useProxyStore } from '../stores/proxy'
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
       path: '/',
-      name: 'Overview',
-      component: Overview,
+      redirect: '/proxies',
     },
     {
-      path: '/configure',
-      name: 'ClientConfigure',
-      component: ClientConfigure,
+      path: '/proxies',
+      name: 'ProxyList',
+      component: () => import('../views/ProxyList.vue'),
+    },
+    {
+      path: '/proxies/detail/:name',
+      name: 'ProxyDetail',
+      component: () => import('../views/ProxyDetail.vue'),
     },
     {
       path: '/proxies/create',
@@ -31,6 +34,16 @@ const router = createRouter({
       component: ProxyEdit,
       meta: { requiresStore: true },
     },
+    {
+      path: '/visitors',
+      name: 'VisitorList',
+      component: () => import('../views/VisitorList.vue'),
+    },
+    {
+      path: '/visitors/detail/:name',
+      name: 'VisitorDetail',
+      component: () => import('../views/VisitorDetail.vue'),
+    },
     {
       path: '/visitors/create',
       name: 'VisitorCreate',
@@ -43,27 +56,21 @@ const router = createRouter({
       component: VisitorEdit,
       meta: { requiresStore: true },
     },
+    {
+      path: '/config',
+      name: 'ClientConfigure',
+      component: ClientConfigure,
+    },
   ],
 })
 
-const isStoreEnabled = async () => {
-  try {
-    await listStoreProxies()
-    return true
-  } catch (err: any) {
-    if (err?.status === 404) {
-      return false
-    }
-    return true
-  }
-}
-
 router.beforeEach(async (to) => {
   if (!to.matched.some((record) => record.meta.requiresStore)) {
     return true
   }
 
-  const enabled = await isStoreEnabled()
+  const proxyStore = useProxyStore()
+  const enabled = await proxyStore.checkStoreEnabled()
   if (enabled) {
     return true
   }
@@ -71,7 +78,7 @@ router.beforeEach(async (to) => {
   ElMessage.warning(
     'Store is disabled. Enable Store in frpc config to create or edit store entries.',
   )
-  return { name: 'Overview' }
+  return { name: 'ProxyList' }
 })
 
 export default router