[+] Add proxy-level frp client config tab

LoCyan-Team · Jan 8, 2025 · 7bfcd0f · 7bfcd0f
1 parent f50b88b
commit 7bfcd0f
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 22 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -14,34 +14,50 @@ declare module 'vue' {
     NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
+    NCode: typeof import('naive-ui')['NCode']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NEl: typeof import('naive-ui')['NEl']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NH1: typeof import('naive-ui')['NH1']
     NH2: typeof import('naive-ui')['NH2']
+    NH3: typeof import('naive-ui')['NH3']
+    NH4: typeof import('naive-ui')['NH4']
     NH5: typeof import('naive-ui')['NH5']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
     NMenu: typeof import('naive-ui')['NMenu']
     NModal: typeof import('naive-ui')['NModal']
     NNumberAnimation: typeof import('naive-ui')['NNumberAnimation']
     NP: typeof import('naive-ui')['NP']
+    NRadioButton: typeof import('naive-ui')['NRadioButton']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NStep: typeof import('naive-ui')['NStep']
     NSteps: typeof import('naive-ui')['NSteps']
+    NTab: typeof import('naive-ui')['NTab']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
+    NThing: typeof import('naive-ui')['NThing']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheDialog: typeof import('./src/components/TheDialog.vue')['default']

diff --git a/src/main.js b/src/main.js
@@ -2,9 +2,6 @@ import { createApp } from 'vue'
 import '@/assets/style.css'
 import '@/assets/twemoji-amazing.css'
 import App from './App.vue'
-import message from '@components/TheMessage.vue'
-import loadingbar from '@components/LoadingBar.vue'
-import ndialog from '@components/TheDialog.vue'
 import router from '@router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
@@ -32,9 +29,6 @@ document.head.appendChild(meta)
 
 app.use(Clipboard)
 app.use(VueAxios, axios)
-app.component('message', message)
-app.component('loadingbar', loadingbar)
-app.component('ndialog', ndialog)
 
 userDataLocal()
 app.mount('#app')
diff --git a/src/views/proxies/ConfigView.vue b/src/views/proxies/ConfigView.vue
@@ -5,8 +5,33 @@
   </n-h1>
   <n-grid cols="1" y-gap="1" item-responsive>
     <n-grid-item span="1">
-      <n-card title="节点">
-        <n-select v-model:value="node" :options="serverList" @update:value="updateValue" />
+      <n-card title="隧道配置">
+        <n-spin :show="loading">
+          <n-tabs type="line" size="large" :tabs-padding="20" @update:value="tabUpdateHandler">
+            <n-tab-pane name="node" tab="按节点">
+              <n-select
+                v-model:value="node"
+                :options="serverList"
+                @update:value="updateValue(node, null)"
+              />
+            </n-tab-pane>
+            <n-tab-pane name="proxy" tab="按隧道">
+              <n-select
+                v-model:value="proxy"
+                :options="proxyList"
+                @update:value="updateValue(null, proxy)"
+              />
+            </n-tab-pane>
+          </n-tabs>
+          <n-scrollbar x-scrollable>
+            <n-code
+              :code="code"
+              language="ini"
+              show-line-numbers
+              style="margin-top: 30px; width: 100%"
+            />
+          </n-scrollbar>
+        </n-spin>
         <n-button
           strong
           secondary
@@ -18,16 +43,6 @@
         >
           复制
         </n-button>
-        <n-spin :show="loading">
-          <n-scrollbar x-scrollable>
-            <n-code
-              :code="code"
-              language="ini"
-              show-line-numbers
-              style="margin-top: 30px; width: 100%"
-            />
-          </n-scrollbar>
-        </n-spin>
       </n-card>
       <br />
     </n-grid-item>
@@ -77,9 +92,11 @@ const message = new Message()
 
 const loading = ref(true)
 
-const node = ref('')
+const node = ref(null)
+const proxy = ref(null)
 // 选择框数据
 const serverList = ref([])
+const proxyList = ref([])
 const code = ref('')
 
 // const rs = get('https://api.locyanfrp.cn/Proxies/GetServerList')
@@ -121,7 +138,7 @@ onMounted(async () => {
   list.forEach((s) => {
     if (i === 0) {
       node.value = s.id
-      updateValue(s.id)
+      updateValue(s.id, null)
     }
     serverList.value[i] = {
       label: s.name,
@@ -131,11 +148,55 @@ onMounted(async () => {
   })
 })
 
-async function updateValue(value) {
+onMounted(async () => {
+  let rs
+  try {
+    rs = await api.v2.proxy.all(userData.getters.get_user_id)
+  } catch (e) {
+    logger.error(e)
+    message.error('请求隧道列表失败: ' + e)
+  }
+  if (!rs) return
+  let i = 0
+  const list = rs.data.list
+  list.sort((a, b) => {
+    if (a.name < b.name) {
+      return -1
+    }
+    if (a.name > b.name) {
+      return 1
+    }
+    return 0
+  })
+  list.forEach((s) => {
+    if (i === 0) {
+      proxy.value = s.id
+      updateValue(null, s.id)
+    }
+    proxyList.value[i] = {
+      label: s.proxy_name,
+      value: s.id
+    }
+    i = i + 1
+  })
+})
+
+async function tabUpdateHandler(value) {
+  switch (value) {
+    case 'node':
+      await updateValue(node.value, null)
+      break
+    case 'proxy':
+      await updateValue(null, proxy.value)
+      break
+  }
+}
+
+async function updateValue(nodeId, proxyId) {
   loading.value = true
   let rs
   try {
-    rs = await api.v2.proxy.config(userData.getters.get_user_id, null, value)
+    rs = await api.v2.proxy.config(userData.getters.get_user_id, proxyId, nodeId)
   } catch (e) {
     logger.error(e)
     message.error('请求获取隧道配置文件失败: ' + e)