web/frpc: support more info (#3334)

web/frpc/.eslintrc.cjs

@@ -1,30 +1,30 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
   extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript",
-    "@vue/eslint-config-prettier",
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier',
   ],
   parserOptions: {
-    ecmaVersion: "latest",
+    ecmaVersion: 'latest',
   },
   rules: {
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
       {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
       },
     ],
-    "vue/multi-word-component-names": [
-      "error",
+    'vue/multi-word-component-names': [
+      'error',
       {
-        ignores: ["Overview"],
+        ignores: ['Overview'],
       },
     ],
   },
-};
+}

web/frpc/.prettierrc.json

@@ -1 +1,5 @@
-{}
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

web/frpc/src/App.vue

@@ -48,18 +48,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { useDark, useToggle } from "@vueuse/core";
+import { ref } from 'vue'
+import { useDark, useToggle } from '@vueuse/core'
 
-const isDark = useDark();
-const darkmodeSwitch = ref(isDark);
-const toggleDark = useToggle(isDark);
+const isDark = useDark()
+const darkmodeSwitch = ref(isDark)
+const toggleDark = useToggle(isDark)
 
 const handleSelect = (key: string) => {
-  if (key == "") {
-    window.open("https://github.com/fatedier/frp");
+  if (key == '') {
+    window.open('https://github.com/fatedier/frp')
   }
-};
+}
 </script>
 
 <style>

web/frpc/src/components/ClientConfigure.vue

@@ -14,85 +14,85 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
-let textarea = ref("");
+let textarea = ref('')
 
 const fetchData = () => {
-  fetch("/api/config", { credentials: "include" })
+  fetch('/api/config', { credentials: 'include' })
     .then((res) => {
-      return res.text();
+      return res.text()
     })
     .then((text) => {
-      textarea.value = text;
+      textarea.value = text
     })
     .catch(() => {
       ElMessage({
         showClose: true,
-        message: "Get configure content from frpc failed!",
-        type: "warning",
-      });
-    });
-};
+        message: 'Get configure content from frpc failed!',
+        type: 'warning',
+      })
+    })
+}
 
 const uploadConfig = () => {
   ElMessageBox.confirm(
-    "This operation will upload your frpc configure file content and hot reload it, do you want to continue?",
-    "Notice",
+    'This operation will upload your frpc configure file content and hot reload it, do you want to continue?',
+    'Notice',
     {
-      confirmButtonText: "Yes",
-      cancelButtonText: "No",
-      type: "warning",
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No',
+      type: 'warning',
     }
   )
     .then(() => {
-      if (textarea.value == "") {
+      if (textarea.value == '') {
         ElMessage({
-          message: "Configure content can not be empty!",
-          type: "warning",
-        });
-        return;
+          message: 'Configure content can not be empty!',
+          type: 'warning',
+        })
+        return
       }
 
-      fetch("/api/config", {
-        credentials: "include",
-        method: "PUT",
+      fetch('/api/config', {
+        credentials: 'include',
+        method: 'PUT',
         body: textarea.value,
       })
         .then(() => {
-          fetch("/api/reload", { credentials: "include" })
+          fetch('/api/reload', { credentials: 'include' })
             .then(() => {
               ElMessage({
-                type: "success",
-                message: "Success",
-              });
+                type: 'success',
+                message: 'Success',
+              })
             })
             .catch((err) => {
               ElMessage({
                 showClose: true,
-                message: "Reload frpc configure file error, " + err,
-                type: "warning",
-              });
-            });
+                message: 'Reload frpc configure file error, ' + err,
+                type: 'warning',
+              })
+            })
         })
         .catch(() => {
           ElMessage({
             showClose: true,
-            message: "Put config to frpc and hot reload failed!",
-            type: "warning",
-          });
-        });
+            message: 'Put config to frpc and hot reload failed!',
+            type: 'warning',
+          })
+        })
     })
     .catch(() => {
       ElMessage({
-        message: "Canceled",
-        type: "info",
-      });
-    });
-};
+        message: 'Canceled',
+        type: 'info',
+      })
+    })
+}
 
-fetchData();
+fetchData()
 </script>
 
 <style>

web/frpc/src/components/Overview.vue

@@ -9,30 +9,39 @@
             style="width: 100%"
             :default-sort="{ prop: 'type', order: 'ascending' }"
           >
-            <el-table-column prop="name" label="name"></el-table-column>
+            <el-table-column
+              prop="name"
+              label="name"
+              sortable
+            ></el-table-column>
             <el-table-column
               prop="type"
               label="type"
               width="150"
+              sortable
             ></el-table-column>
             <el-table-column
               prop="local_addr"
               label="local address"
               width="200"
+              sortable
             ></el-table-column>
             <el-table-column
               prop="plugin"
               label="plugin"
               width="200"
+              sortable
             ></el-table-column>
             <el-table-column
               prop="remote_addr"
               label="remote address"
+              sortable
             ></el-table-column>
             <el-table-column
               prop="status"
               label="status"
               width="150"
+              sortable
             ></el-table-column>
             <el-table-column prop="err" label="info"></el-table-column>
           </el-table>
@@ -43,49 +52,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { ElMessage } from "element-plus";
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
 
-let status = ref<any[]>([]);
+let status = ref<any[]>([])
 
 const fetchData = () => {
-  fetch("/api/status", { credentials: "include" })
+  fetch('/api/status', { credentials: 'include' })
     .then((res) => {
-      return res.json();
+      return res.json()
     })
     .then((json) => {
-      status.value = new Array();
-      for (let s of json.tcp) {
-        status.value.push(s);
-      }
-      for (let s of json.udp) {
-        status.value.push(s);
-      }
-      for (let s of json.http) {
-        status.value.push(s);
-      }
-      for (let s of json.https) {
-        status.value.push(s);
-      }
-      for (let s of json.stcp) {
-        status.value.push(s);
-      }
-      for (let s of json.sudp) {
-        status.value.push(s);
-      }
-      for (let s of json.xtcp) {
-        status.value.push(s);
+      status.value = new Array()
+      for (let key in json) {
+        for (let ps of json[key]) {
+          console.log(ps)
+          status.value.push(ps)
+        }
       }
     })
-    .catch(() => {
+    .catch((err) => {
       ElMessage({
         showClose: true,
-        message: "Get status info from frpc failed!",
-        type: "warning",
-      });
-    });
-};
-fetchData();
+        message: 'Get status info from frpc failed!' + err,
+        type: 'warning',
+      })
+    })
+}
+fetchData()
 </script>
 
 <style></style>

web/frpc/src/main.ts

@@ -1,13 +1,13 @@
-import { createApp } from "vue";
-import "element-plus/dist/index.css";
-import "element-plus/theme-chalk/dark/css-vars.css";
-import App from "./App.vue";
-import router from "./router";
+import { createApp } from 'vue'
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import App from './App.vue'
+import router from './router'
 
-import "./assets/dark.css";
+import './assets/dark.css'
 
-const app = createApp(App);
+const app = createApp(App)
 
-app.use(router);
+app.use(router)
 
-app.mount("#app");
+app.mount('#app')

web/frpc/src/router/index.ts

@@ -1,21 +1,21 @@
-import { createRouter, createWebHashHistory } from "vue-router";
-import Overview from "../components/Overview.vue";
-import ClientConfigure from "../components/ClientConfigure.vue";
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Overview from '../components/Overview.vue'
+import ClientConfigure from '../components/ClientConfigure.vue'
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
-      path: "/",
-      name: "Overview",
+      path: '/',
+      name: 'Overview',
       component: Overview,
     },
     {
-      path: "/configure",
-      name: "ClientConfigure",
+      path: '/configure',
+      name: 'ClientConfigure',
       component: ClientConfigure,
     },
   ],
-});
+})
 
-export default router;
+export default router

web/frpc/vite.config.ts

@@ -1,14 +1,14 @@
-import { fileURLToPath, URL } from "node:url";
+import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import AutoImport from "unplugin-auto-import/vite";
-import Components from "unplugin-vue-components/vite";
-import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "",
+  base: '',
   plugins: [
     vue(),
     AutoImport({
@@ -20,10 +20,10 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
   build: {
-    assetsDir: "",
+    assetsDir: '',
   },
-});
+})