From 4f434df0713453f06a5823b28992937db122e8bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E6=B2=AB=E8=8A=B1=E7=81=ABzzz=F0=9F=8C=99?=
 <xmcn@1l1.icu>
Date: Fri, 11 Oct 2024 21:44:47 +0800
Subject: [PATCH] =?UTF-8?q?[*]=20=E6=B7=BB=E5=8A=A0=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=EF=BC=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/SignView.vue            |   6 +-
 src/views/proxies/AddView.vue     | 258 ++++++++++++++++--------------
 src/views/proxies/ConfigView.vue  |  37 +++--
 src/views/proxies/ProxiesView.vue |   3 +
 4 files changed, 164 insertions(+), 140 deletions(-)

diff --git a/src/views/SignView.vue b/src/views/SignView.vue
index 6da908e..b49eae2 100644
--- a/src/views/SignView.vue
+++ b/src/views/SignView.vue
@@ -28,9 +28,9 @@
           </p>
           <n-skeleton text :repeat="1" style="width: 10%" v-else />
           <br />
-          <n-gi v-if="status">
-            <img style="width: 100%" src="https://api.imlazy.ink/img" />
-          </n-gi>
+          <n-grid-item v-show="status">
+            <n-image width="100%" src="https://api.imlazy.ink/img" />
+          </n-grid-item>
         </n-card>
       </n-grid-item>
     </n-grid>
diff --git a/src/views/proxies/AddView.vue b/src/views/proxies/AddView.vue
index 20591eb..8882f86 100644
--- a/src/views/proxies/AddView.vue
+++ b/src/views/proxies/AddView.vue
@@ -3,131 +3,133 @@
     <i class="twa twa-writing-hand-light-skin-tone"></i>
     <n-text type="primary"> 添加隧道</n-text>
   </n-h1>
-  <n-form :ref="formRef" :model="proxyInfo" :rules="rules" label-width="auto" size="large">
-    <n-space vertical>
-      <n-form-item label="选择服务器" path="node">
-        <n-select v-model:value="proxyInfo.nodeId" :options="serverList" size="medium" />
-      </n-form-item>
-    </n-space>
-    <div>
-      <n-tag class="tip-tag" style="transform: translateY(-0.3rem)" type="info">
-        <span v-if="serverValue[proxyInfo.nodeId].attribute.china">一级认证</span>
-        <span v-else>二级认证</span>
-<!--        <span v-else>其他认证</span>-->
-      </n-tag>
-      <n-tag
-        class="tip-tag"
-        :type="serverValue[proxyInfo.nodeId].attribute.allowBigTraffic ? 'success' : 'error'"
-      >
-        <span>大流量</span>
-        <template #icon>
-          <n-icon
-            v-if="serverValue[proxyInfo.nodeId].attribute.allowBigTraffic"
-            :component="CheckmarkCircle"
-          />
-          <n-icon v-else :component="CloseCircle" />
-        </template>
-      </n-tag>
-      <n-tag
-        class="tip-tag"
-        :type="serverValue[proxyInfo.nodeId].attribute.allowUdp ? 'success' : 'error'"
-      >
-        <span>UDP</span>
-        <template #icon>
-          <n-icon
-            v-if="serverValue[proxyInfo.nodeId].attribute.allowUdp"
-            :component="CheckmarkCircle"
-          />
-          <n-icon v-else :component="CloseCircle" />
-        </template>
-      </n-tag>
-      <n-tag
-        class="tip-tag"
-        :type="serverValue[proxyInfo.nodeId].attribute.allowWebsite ? 'success' : 'error'"
-      >
-        <span>建站</span>
-        <template #icon>
-          <n-icon
-            v-if="serverValue[proxyInfo.nodeId].attribute.allowWebsite"
-            :component="CheckmarkCircle"
-          />
-          <n-icon v-else :component="CloseCircle" />
-        </template>
-      </n-tag>
-    </div>
-    <div id="item">
-      <p>服务器信息</p>
-      <p>服务器名：{{ serverValue[proxyInfo.nodeId].name }}</p>
-      <p>服务器介绍：{{ serverValue[proxyInfo.nodeId].description }}</p>
-      <p>服务器IP：{{ serverValue[proxyInfo.nodeId].ip }}</p>
-      <p>服务器域名：{{ serverValue[proxyInfo.nodeId].hostname }}</p>
-    </div>
-    <br />
-    <n-grid x-gap="12" cols="2" item-responsive>
-      <n-grid-item span="0:2 1000:1" id="item">
-        <n-form-item label="隧道名" path="proxyName">
-          <n-input v-model:value="proxyInfo.proxyName" placeholder="隧道名" />
+  <n-spin :show="loading">
+    <n-form :ref="formRef" :model="proxyInfo" :rules="rules" label-width="auto" size="large">
+      <n-space vertical>
+        <n-form-item label="选择服务器" path="node">
+          <n-select v-model:value="proxyInfo.nodeId" :options="serverList" size="medium" />
         </n-form-item>
-      </n-grid-item>
-      <n-grid-item span="0:2 1000:1" id="item">
-        <n-form-item label="穿透协议" path="proxyType">
-          <n-scrollbar x-scrollable>
-            <n-radio-group
-              v-model:value="proxyInfo.proxyType"
-              @update:value="proxyTypeSelectChangeHandle"
-            >
-              <n-radio-button value="tcp">TCP</n-radio-button>
-              <n-radio-button value="udp">UDP</n-radio-button>
-              <n-radio-button value="http">HTTP</n-radio-button>
-              <n-radio-button value="https">HTTPS</n-radio-button>
-              <n-radio-button value="xtcp">XTCP</n-radio-button>
-              <n-radio-button value="stcp">STCP</n-radio-button>
-            </n-radio-group>
-          </n-scrollbar>
-        </n-form-item>
-      </n-grid-item>
-      <n-grid-item span="0:2 1000:1" id="item">
-        <n-form-item label="内网IP" path="localIp">
-          <n-input v-model:value="proxyInfo.localIp" placeholder="内网IP, 例如127.0.0.1" />
-        </n-form-item>
-      </n-grid-item>
-      <n-grid-item span="0:2 1000:1" id="item">
-        <n-form-item label="内网端口" path="localPort">
-          <n-input
-            v-model:value="proxyInfo.localPort"
-            placeholder="内网端口, HTTP:80 HTTPS:443 MC:25565/19132 泰拉瑞亚:7777"
-          />
-        </n-form-item>
-      </n-grid-item>
-      <n-grid-item span="0:2 1000:1" id="item">
-        <n-form-item label="远程端口" path="remotePort">
-          <n-input
-            v-model:value="proxyInfo.remotePort"
-            placeholder="映射到远程服务器上的端口"
-            style="margin-right: 10px"
-          />
-          <n-button @click="randomPort"> 随机端口 </n-button>
-        </n-form-item>
-      </n-grid-item>
-      <n-grid-item span="0:2 1000:1" id="item">
-        <n-form-item label="自定义域名" path="domain" v-show="showDomainInput">
-          <n-input
-            v-model:value="proxyInfo.domain"
-            placeholder="HTTPS/HTTP需要填写, 其他协议不需要填写"
-          />
-        </n-form-item>
-        <n-form-item label="访问密钥" path="secretKey" v-show="showSecretKeyInput">
-          <n-input
-            v-model:value="proxyInfo.secretKey"
-            placeholder="XTCP / STCP 需要填写, 其他协议不需要填写"
-          />
-        </n-form-item>
-      </n-grid-item>
-    </n-grid>
-    <div style="display: flex; justify-content: flex-end">
-      <n-button round type="primary" @click="addProxy"> 创建</n-button>
-    </div>
-  </n-form>
+      </n-space>
+      <div>
+        <n-tag class="tip-tag" style="transform: translateY(-0.3rem)" type="info">
+          <span v-if="serverValue[proxyInfo.nodeId].attribute.china">一级认证</span>
+          <span v-else>二级认证</span>
+          <!--        <span v-else>其他认证</span>-->
+        </n-tag>
+        <n-tag
+          class="tip-tag"
+          :type="serverValue[proxyInfo.nodeId].attribute.allowBigTraffic ? 'success' : 'error'"
+        >
+          <span>大流量</span>
+          <template #icon>
+            <n-icon
+              v-if="serverValue[proxyInfo.nodeId].attribute.allowBigTraffic"
+              :component="CheckmarkCircle"
+            />
+            <n-icon v-else :component="CloseCircle" />
+          </template>
+        </n-tag>
+        <n-tag
+          class="tip-tag"
+          :type="serverValue[proxyInfo.nodeId].attribute.allowUdp ? 'success' : 'error'"
+        >
+          <span>UDP</span>
+          <template #icon>
+            <n-icon
+              v-if="serverValue[proxyInfo.nodeId].attribute.allowUdp"
+              :component="CheckmarkCircle"
+            />
+            <n-icon v-else :component="CloseCircle" />
+          </template>
+        </n-tag>
+        <n-tag
+          class="tip-tag"
+          :type="serverValue[proxyInfo.nodeId].attribute.allowWebsite ? 'success' : 'error'"
+        >
+          <span>建站</span>
+          <template #icon>
+            <n-icon
+              v-if="serverValue[proxyInfo.nodeId].attribute.allowWebsite"
+              :component="CheckmarkCircle"
+            />
+            <n-icon v-else :component="CloseCircle" />
+          </template>
+        </n-tag>
+      </div>
+      <div id="item">
+        <p>服务器信息</p>
+        <p>服务器名：{{ serverValue[proxyInfo.nodeId].name }}</p>
+        <p>服务器介绍：{{ serverValue[proxyInfo.nodeId].description }}</p>
+        <p>服务器IP：{{ serverValue[proxyInfo.nodeId].ip }}</p>
+        <p>服务器域名：{{ serverValue[proxyInfo.nodeId].hostname }}</p>
+      </div>
+      <br />
+      <n-grid x-gap="12" cols="2" item-responsive>
+        <n-grid-item span="0:2 1000:1" id="item">
+          <n-form-item label="隧道名" path="proxyName">
+            <n-input v-model:value="proxyInfo.proxyName" placeholder="隧道名" />
+          </n-form-item>
+        </n-grid-item>
+        <n-grid-item span="0:2 1000:1" id="item">
+          <n-form-item label="穿透协议" path="proxyType">
+            <n-scrollbar x-scrollable>
+              <n-radio-group
+                v-model:value="proxyInfo.proxyType"
+                @update:value="proxyTypeSelectChangeHandle"
+              >
+                <n-radio-button value="tcp">TCP</n-radio-button>
+                <n-radio-button value="udp">UDP</n-radio-button>
+                <n-radio-button value="http">HTTP</n-radio-button>
+                <n-radio-button value="https">HTTPS</n-radio-button>
+                <n-radio-button value="xtcp">XTCP</n-radio-button>
+                <n-radio-button value="stcp">STCP</n-radio-button>
+              </n-radio-group>
+            </n-scrollbar>
+          </n-form-item>
+        </n-grid-item>
+        <n-grid-item span="0:2 1000:1" id="item">
+          <n-form-item label="内网IP" path="localIp">
+            <n-input v-model:value="proxyInfo.localIp" placeholder="内网IP, 例如127.0.0.1" />
+          </n-form-item>
+        </n-grid-item>
+        <n-grid-item span="0:2 1000:1" id="item">
+          <n-form-item label="内网端口" path="localPort">
+            <n-input
+              v-model:value="proxyInfo.localPort"
+              placeholder="内网端口, HTTP:80 HTTPS:443 MC:25565/19132 泰拉瑞亚:7777"
+            />
+          </n-form-item>
+        </n-grid-item>
+        <n-grid-item span="0:2 1000:1" id="item">
+          <n-form-item label="远程端口" path="remotePort">
+            <n-input
+              v-model:value="proxyInfo.remotePort"
+              placeholder="映射到远程服务器上的端口"
+              style="margin-right: 10px"
+            />
+            <n-button @click="randomPort"> 随机端口 </n-button>
+          </n-form-item>
+        </n-grid-item>
+        <n-grid-item span="0:2 1000:1" id="item">
+          <n-form-item label="自定义域名" path="domain" v-show="showDomainInput">
+            <n-input
+              v-model:value="proxyInfo.domain"
+              placeholder="HTTPS/HTTP需要填写, 其他协议不需要填写"
+            />
+          </n-form-item>
+          <n-form-item label="访问密钥" path="secretKey" v-show="showSecretKeyInput">
+            <n-input
+              v-model:value="proxyInfo.secretKey"
+              placeholder="XTCP / STCP 需要填写, 其他协议不需要填写"
+            />
+          </n-form-item>
+        </n-grid-item>
+      </n-grid>
+      <div style="display: flex; justify-content: flex-end">
+        <n-button round type="primary" @click="addProxy"> 创建</n-button>
+      </div>
+    </n-form>
+  </n-spin>
 </template>
 <style>
 n-input {
@@ -143,6 +145,8 @@ import api from '@/api'
 import logger from '@/utils/logger'
 import { CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
 
+const loading = ref(true)
+
 localStorage.setItem('ViewPage', 'add_proxy')
 // 选择框数据
 const serverList = ref([])
@@ -312,6 +316,7 @@ async function addProxy() {
     domain: proxyInfo.value.domain,
     secretKey: proxyInfo.value.secretKey
   }
+  loading.value = false
   let rs
   try {
     rs = await api.v2.proxy.root.post(
@@ -331,6 +336,7 @@ async function addProxy() {
     logger.error(e)
     sendErrorMessage(e)
     sendErrorDialog('添加失败，再试一次吧~')
+    loading.value = false
   }
   if (!rs) return
   if (rs.status === 200) {
@@ -338,15 +344,18 @@ async function addProxy() {
   } else {
     sendErrorMessage(rs.message)
   }
+  loading.value = false
 }
 
 onMounted(async () => {
+  loading.value = true
   let rs
   try {
     rs = await api.v2.node.all()
   } catch (e) {
     logger.error(e)
     sendErrorMessage('请求节点列表失败: ' + e)
+    loading.value = false
   }
   if (!rs) return
   let i = 0
@@ -385,6 +394,7 @@ onMounted(async () => {
     }
     i = i + 1
   })
+  loading.value = false
 })
 </script>
 
diff --git a/src/views/proxies/ConfigView.vue b/src/views/proxies/ConfigView.vue
index 5fa6e09..7006411 100644
--- a/src/views/proxies/ConfigView.vue
+++ b/src/views/proxies/ConfigView.vue
@@ -1,7 +1,7 @@
 <template>
   <n-h1 prefix="bar" style="margin-top: 30px">
     <i class="twa twa-bookmark-tabs"></i>
-    <n-text type="primary"> 配置文件 </n-text>
+    <n-text type="primary"> 配置文件</n-text>
   </n-h1>
   <n-grid cols="1" y-gap="1" item-responsive>
     <n-grid-item span="1">
@@ -18,24 +18,30 @@
         >
           复制
         </n-button>
-        <n-code
-          :code="code"
-          language="ini"
-          show-line-numbers
-          style="overflow: auto; margin-top: 30px; width: 100%"
-        ></n-code>
+        <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>
 
     <n-grid-item span="1">
-      <n-card title="建站必看">
-        <p>由于我们在新的配置文件生成机制中加入了：</p>
-        <n-code code="proxy_protocol_version = v2" language="ini"></n-code>
-        <p>导致网站如果不正确配置 Nginx 就无法正常访问（不需要请删去）</p>
+      <n-card title="获取用户真实 IP">
+        <p>您可以通过 HAProxy Protocol 来获取用户真实 IP</p>
+        <p>在配置文件中加入：</p>
+        <n-scrollbar x-scrollable>
+          <n-code code="proxy_protocol_version = v2" language="ini"></n-code>
+        </n-scrollbar>
+        <p>打开后端的 HAProxy Protocol 支持即可</p>
         <n-divider />
-        <p>请根据下面的教程正确配置：</p>
-        <p></p>
+        <n-h4>网站配置示例</n-h4>
         <p>
           1. 打开网站的配置文件（针对 Nginx 的网站，其他形式的网站请自行百度），在
           <n-code code="listen 80" language="nginx" word-wrap></n-code> 与
@@ -67,6 +73,8 @@ import { sendSuccessMessage, sendErrorMessage } from '@/utils/message'
 import api from '@/api'
 import logger from '@/utils/logger'
 
+const loading = ref(true)
+
 const node = ref('')
 // 选择框数据
 const serverList = ref([])
@@ -112,12 +120,14 @@ onMounted(async () => {
 })
 
 async function updateValue(value) {
+  loading.value = true
   let rs
   try {
     rs = await api.v2.proxy.config(userData.getters.get_username, null, value)
   } catch (e) {
     logger.error(e)
     sendErrorMessage('请求获取隧道配置文件失败: ' + e)
+    loading.value = false
   }
   if (!rs) return
   if (rs.status === 200) {
@@ -127,5 +137,6 @@ async function updateValue(value) {
     sendErrorMessage(rs.message)
     code.value = '该节点下没有任何隧道捏~'
   }
+  loading.value = false
 }
 </script>
diff --git a/src/views/proxies/ProxiesView.vue b/src/views/proxies/ProxiesView.vue
index 9200fcb..6c788e6 100644
--- a/src/views/proxies/ProxiesView.vue
+++ b/src/views/proxies/ProxiesView.vue
@@ -602,11 +602,13 @@ function deleteProxy(id) {
     positiveText: '确定',
     negativeText: '取消',
     onPositiveClick: async () => {
+      loading.value = true
       let rs
       try {
         rs = await api.v2.proxy.root.delete(userData.getters.get_username, proxiesList.value[id].id)
       } catch (e) {
         sendErrorMessage('请求删除隧道失败: ' + e)
+        loading.value = false
       }
       if (!rs) return
       if (rs.status === 200) {
@@ -615,6 +617,7 @@ function deleteProxy(id) {
       } else {
         sendErrorMessage(rs.message)
       }
+      loading.value = false
     },
     onNegativeClick: () => {
       sendSuccessMessage('你取消了操作！')