From f788990705dc011b9105b0652124eeca652053f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=98=89=E4=BC=9F?= <8473136@qq.com>
Date: Wed, 25 Sep 2024 10:21:29 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E5=90=AF=E5=8A=A8=E6=8A=A5=E9=94=99?=
 =?UTF-8?q?=E5=92=8C=E6=94=AF=E6=8C=81=20http=20Basic=E3=80=81=E5=AD=90?=
 =?UTF-8?q?=E5=9F=9F=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 electron/api/frpc.ts       |  20 +++++-
 src/views/config/index.vue |   1 +
 src/views/proxy/index.vue  | 133 +++++++++++++++++++++++++++++--------
 types/global.d.ts          |   6 +-
 4 files changed, 130 insertions(+), 30 deletions(-)

diff --git a/electron/api/frpc.ts b/electron/api/frpc.ts
index be3452c..740b63c 100644
--- a/electron/api/frpc.ts
+++ b/electron/api/frpc.ts
@@ -35,8 +35,8 @@ const getFrpcVersionWorkerPath = (
 
 const isRangePort = (m: Proxy) => {
   return (
-    (m.localPort.indexOf("-") !== -1 || m.localPort.indexOf(",") !== -1) &&
-    (m.type === "tcp" || m.type === "udp")
+    (m.type === "tcp" || m.type === "udp") &&
+    (m.localPort.indexOf("-") !== -1 || m.localPort.indexOf(",") !== -1)
   );
 };
 
@@ -82,7 +82,14 @@ remotePort = ${m.remotePort}
 localIP = "${m.localIp}"
 localPort = ${m.localPort}
 customDomains=[${m.customDomains.map(m => `"${m}"`)}]
+subdomain="${m.subdomain}"
 `;
+        if (m.basicAuth) {
+          toml += `
+httpUser = "${m.httpUser}"
+httpPassword = "${m.httpPassword}"
+`;
+        }
         break;
       case "stcp":
         if (m.stcpModel === "visitors") {
@@ -204,7 +211,7 @@ export const genIniConfig = (config: FrpConfig, proxys: Proxy[]) => {
   const proxyIni = proxys.map(m => {
     const rangePort = isRangePort(m);
     let ini = `
-[${rangePort ? 'range:' : ''}${m.name}]
+[${rangePort ? "range:" : ""}${m.name}]
 type = "${m.type}"
 `;
     switch (m.type) {
@@ -222,7 +229,14 @@ remote_port = ${m.remotePort}
 local_ip = "${m.localIp}"
 local_port = ${m.localPort}
 custom_domains=[${m.customDomains.map(m => `"${m}"`)}]
+subdomain="${m.subdomain}"
 `;
+        if (m.basicAuth) {
+          ini += `
+httpUser = "${m.httpUser}"
+httpPassword = "${m.httpPassword}"
+`;
+        }
         break;
       case "stcp":
         if (m.stcpModel === "visitors") {
diff --git a/src/views/config/index.vue b/src/views/config/index.vue
index 2502bec..61e00ed 100644
--- a/src/views/config/index.vue
+++ b/src/views/config/index.vue
@@ -537,6 +537,7 @@ onUnmounted(() => {
                   placeholder="token"
                   type="password"
                   v-model="formData.authToken"
+                  :show-password="true"
                 />
               </el-form-item>
             </el-col>
diff --git a/src/views/proxy/index.vue b/src/views/proxy/index.vue
index 0519298..7af4daa 100644
--- a/src/views/proxy/index.vue
+++ b/src/views/proxy/index.vue
@@ -57,7 +57,11 @@ const defaultForm = ref<Proxy>({
   secretKey: "",
   bindAddr: "",
   bindPort: null,
-  status: true
+  status: true,
+  subdomain: "",
+  basicAuth: false,
+  httpUser: "",
+  httpPassword: ""
 });
 
 /**
@@ -133,7 +137,12 @@ const editFormRules = reactive<FormRules>({
       trigger: "blur"
     }
   ],
-  bindPort: [{ required: true, message: "请输入绑定的端口", trigger: "blur" }]
+  bindPort: [{ required: true, message: "请输入绑定的端口", trigger: "blur" }],
+  basicAuth: [
+    { required: true, message: "请选择是否开启HTTP基本认证", trigger: "blur" }
+  ],
+  httpUser: [{ required: true, message: "请输入认证用户名", trigger: "blur" }],
+  httpPassword: [{ required: true, message: "请输入认证密码", trigger: "blur" }]
 });
 
 /**
@@ -192,6 +201,9 @@ const handleGetPortCount = (portString: string) => {
 };
 
 const handleRangePort = () => {
+  if (isHttp || isHttps) {
+    return false;
+  }
   if (editForm.value.localPort.indexOf("-") !== -1) {
     return true;
   }
@@ -631,13 +643,20 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <el-dialog
-      v-model="edit.visible"
+    <el-drawer
       :title="edit.title"
-      class="sm:w-[500px] md:w-[600px] lg:w-[800px]"
-      top="5%"
+      v-model="edit.visible"
+      direction="rtl"
+      size="60%"
       @close="editForm = defaultForm"
     >
+      <!--    <el-dialog-->
+      <!--      v-model="edit.visible"-->
+      <!--      :title="edit.title"-->
+      <!--      class="sm:w-[500px] md:w-[600px] lg:w-[800px]"-->
+      <!--      top="5%"-->
+      <!--      @close="editForm = defaultForm"-->
+      <!--    >-->
       <el-form
         v-loading="loading.form"
         label-position="top"
@@ -693,7 +712,7 @@ onUnmounted(() => {
                           </template>
                         </el-popover>
                       </div>
-                      共享密钥：
+                       共享密钥：
                     </div>
                   </div>
                 </template>
@@ -701,6 +720,7 @@ onUnmounted(() => {
                   type="password"
                   v-model="editForm.secretKey"
                   placeholder="密钥"
+                  :show-password="true"
                 />
               </el-form-item>
             </el-col>
@@ -762,7 +782,6 @@ onUnmounted(() => {
               </el-form-item>
             </el-col>
           </template>
-          <template v-if="isHttp || isHttps"></template>
           <template v-if="isTcp || isUdp">
             <el-col :span="8">
               <el-form-item label="外网端口：" prop="remotePort">
@@ -781,6 +800,44 @@ onUnmounted(() => {
               </el-form-item>
             </el-col>
           </template>
+          <template v-if="isHttp || isHttps">
+            <el-col :span="12">
+              <el-form-item label="子域名：" prop="remotePort">
+                <template #label>
+                  <div class="inline-block">
+                    <div class="flex items-center">
+                      <div class="mr-1">
+                        <el-popover
+                          placement="top"
+                          trigger="hover"
+                          :width="180"
+                        >
+                          <template #default>
+                            对应参数：<span class="font-black text-[#5A3DAA]"
+                              >subdomain</span
+                            >
+                          </template>
+                          <template #reference>
+                            <IconifyIconOffline
+                              class="text-base"
+                              color="#5A3DAA"
+                              icon="info"
+                            />
+                          </template>
+                        </el-popover>
+                      </div>
+                      子域名：
+                    </div>
+                  </div>
+                </template>
+                <el-input
+                  class="w-full"
+                  placeholder="subdomain"
+                  v-model="editForm.subdomain"
+                />
+              </el-form-item>
+            </el-col>
+          </template>
           <template v-if="isHttp || isHttps">
             <el-col :span="24">
               <el-form-item
@@ -824,23 +881,6 @@ onUnmounted(() => {
                       自定义域名：
                     </div>
                   </div>
-                  <!--                  <el-popover-->
-                  <!--                      placement="top"-->
-                  <!--                      trigger="hover"-->
-                  <!--                  >-->
-                  <!--                    <template #default>-->
-                  <!--                      对应参数：<span class="font-black text-[#5A3DAA]">customDomains</span>-->
-                  <!--                    </template>-->
-                  <!--                    <template #reference>-->
-                  <!--                      <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>-->
-                  <!--                    </template>-->
-                  <!--                  </el-popover>-->
-                  <!--                  <div class="flex items-center inin">-->
-                  <!--                    <div class="h-full flex items-center mr-1">-->
-                  <!--                      -->
-                  <!--                    </div>-->
-                  <!--                    <div>自定义域名：</div>-->
-                  <!--                  </div>-->
                 </template>
                 <el-input
                   class="domain-input"
@@ -866,6 +906,38 @@ onUnmounted(() => {
               </el-form-item>
             </el-col>
           </template>
+          <template v-if="isHttp || isHttps">
+            <el-col :span="24">
+              <el-form-item label="HTTP基本认证：" prop="basicAuth">
+                <el-switch
+                  active-text="开"
+                  inline-prompt
+                  inactive-text="关"
+                  v-model="editForm.basicAuth"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" v-if="editForm.basicAuth">
+              <el-form-item label="认证用户名：" prop="httpUser">
+                <el-input
+                  class="w-full"
+                  placeholder="httpUser"
+                  v-model="editForm.httpUser"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" v-if="editForm.basicAuth">
+              <el-form-item label="认证密码：" prop="httpPassword">
+                <el-input
+                  type="password"
+                  class="w-full"
+                  placeholder="httpPassword"
+                  v-model="editForm.httpPassword"
+                  :show-password="true"
+                />
+              </el-form-item>
+            </el-col>
+          </template>
           <template v-if="isStcpVisitors">
             <el-col :span="12">
               <el-form-item label="被访问者代理名称：" prop="serverName">
@@ -982,7 +1054,8 @@ onUnmounted(() => {
           </el-col>
         </el-row>
       </el-form>
-    </el-dialog>
+    </el-drawer>
+    <!--    </el-dialog>-->
 
     <el-dialog v-model="listPortsVisible" title="内网端口" width="600" top="5%">
       <el-table
@@ -1055,4 +1128,12 @@ onUnmounted(() => {
   margin-left: 10px;
   cursor: pointer;
 }
+
+:deep(.el-drawer__header) {
+  margin-bottom: 10px;
+}
+
+:deep(.el-drawer__body) {
+  //padding-top: 0;
+}
 </style>
diff --git a/types/global.d.ts b/types/global.d.ts
index 61d65f0..d9ea7da 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -26,7 +26,11 @@ declare global {
         secretKey: string;
         bindAddr: string;
         bindPort: number;
-        status: boolean
+        status: boolean;
+        subdomain: string;
+        basicAuth: boolean;
+        httpUser: string;
+        httpPassword: string;
     };
 
     /**