✨ 内置HTTP内网穿透

resource/l10n/en-US.toml

@@ -648,3 +648,6 @@ other = "Disable Switch Template in Frontend"
 
 [ServersOnWorldMap]
 other = "Servers On World Map"
+
+[NAT]
+other = "NAT"

resource/l10n/es-ES.toml

@@ -647,4 +647,7 @@ other = "Temperatura"
 other = "Deshabilitar Cambio de Plantilla en Frontend"
 
 [ServersOnWorldMap]
-other = "Servidores en el mapa mundial"
+other = "Servidores en el mapa mundial"
+
+[NAT]
+other = "NAT"

resource/l10n/zh-CN.toml

@@ -648,3 +648,6 @@ other = "禁止前台切换模板"
 
 [ServersOnWorldMap]
 other = "服务器世界分布图"
+
+[NAT]
+other = "内网穿透"

resource/l10n/zh-TW.toml

@@ -648,3 +648,6 @@ other = "禁止前台切換主題"
 
 [ServersOnWorldMap]
 other = "伺服器世界分布圖"
+
+[NAT]
+other = "NAT"

resource/static/main.js

@@ -91,6 +91,7 @@ function showFormModal(modelSelector, formID, URL, getData) {
                 item.name.endsWith("_id") ||
                 item.name === "id" ||
                 item.name === "ID" ||
+                item.name === "ServerID" ||
                 item.name === "RequestType" ||
                 item.name === "RequestMethod" ||
                 item.name === "TriggerMode" ||
@@ -255,6 +256,28 @@ function addOrEditNotification(notification) {
   );
 }
 
+function addOrEditNAT(nat) {
+  const modal = $(".nat.modal");
+  modal.children(".header").text((nat ? LANG.Edit : LANG.Add));
+  modal
+    .find(".nezha-primary-btn.button")
+    .html(
+      nat
+        ? LANG.Edit + '<i class="edit icon"></i>'
+        : LANG.Add + '<i class="add icon"></i>'
+    );
+  modal.find("input[name=ID]").val(nat ? nat.ID : null);
+  modal.find("input[name=ServerID]").val(nat ? nat.ServerID : null);
+  modal.find("input[name=Name]").val(nat ? nat.Name : null);
+  modal.find("input[name=Host]").val(nat ? nat.Host : null);
+  modal.find("input[name=Domain]").val(nat ? nat.Domain : null);
+  showFormModal(
+    ".nat.modal",
+    "#natForm",
+    "/api/nat"
+  );
+}
+
 function connectToServer(id) {
   post('/terminal', { Host: window.location.host, Protocol: window.location.protocol, ID: id })
 }

resource/template/common/footer.html

@@ -10,7 +10,7 @@
 <script src="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.js"></script>
 <script src="/static/semantic-ui-alerts.min.js"></script>
 <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
-<script src="/static/main.js?v20240330"></script>
+<script src="/static/main.js?v20240714"></script>
 <script>
     (function () {
         updateLang({{.LANG }});

resource/template/common/menu.html

@@ -9,6 +9,7 @@
         <a class='item{{if eq .MatchedPath "/monitor"}} active{{end}}' href="/monitor"><i class="rss icon"></i>{{tr "Services"}}</a>
         <a class='item{{if eq .MatchedPath "/cron"}} active{{end}}' href="/cron"><i class="clock icon"></i>{{tr "Task"}}</a>
         <a class='item{{if eq .MatchedPath "/notification"}} active{{end}}' href="/notification"><i class="bell icon"></i>{{tr "Notification"}}</a>
+        <a class='item{{if eq .MatchedPath "/nat"}} active{{end}}' href="/nat"><i class="exchange icon"></i>{{tr "NAT"}}</a>
         <a class='item{{if eq .MatchedPath "/setting"}} active{{end}}' href="/setting">
             <i class="settings icon"></i>{{tr "Settings"}}
         </a>

resource/template/component/nat.html

@@ -0,0 +1,31 @@
+{{define "component/nat"}}
+<div class="ui tiny nat modal transition hidden">
+    <div class="header">Add</div>
+    <div class="content">
+        <form id="natForm" class="ui form">
+            <input type="hidden" name="ID">
+            <div class="field">
+                <label>{{tr "Name"}}</label>
+                <input type="text" name="Name">
+            </div>
+            <div class="field">
+                <label>Agent ID</label>
+                <input type="number" name="ServerID" placeholder="1">
+            </div>
+            <div class="field">
+                <label>内网服务</label>
+                <input type="text" name="Host" placeholder="192.168.1.1:80(带端口)">
+            </div>
+            <div class="field">
+                <label>绑定域名</label>
+                <input type="text" name="Domain" placeholder="router.app.yourdomain.com">
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <div class="ui negative button">{{tr "Cancel"}}</div>
+        <button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
+        </button>
+    </div>
+</div>
+{{end}}

resource/template/dashboard-default/nat.html

@@ -0,0 +1,54 @@
+{{define "dashboard-default/nat"}}
+{{template "common/header" .}}
+{{template "common/menu" .}}
+<div class="nb-container">
+    <div class="ui container">
+        <div class="ui grid">
+            <div class="right floated right aligned twelve wide column">
+                <button class="ui right labeled nezha-primary-btn icon button" onclick="addOrEditNAT()"><i
+                        class="add icon"></i> Add
+                </button>
+            </div>
+        </div>
+        <table class="ui very basic table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>{{tr "Name"}}</th>
+                    <th>Agent ID</th>
+                    <th>内网服务</th>
+                    <th>绑定域名</th>
+                    <th>{{tr "Administration"}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{range $item := .NAT}}
+                <tr>
+                    <td>{{$item.ID}}</td>
+                    <td>{{$item.Name}}</td>
+                    <td>{{$item.ServerID}}</td>
+                    <td>{{$item.Host}}</td>
+                    <td>{{$item.Domain}}</td>
+                    <td>
+                        <div class="ui mini icon buttons">
+                            <button class="ui button" onclick="addOrEditNAT({{$item}})">
+                                <i class="edit icon"></i>
+                            </button>
+                            <button class="ui button"
+                                onclick="showConfirm('确定删除NAT隧道？','确认删除',deleteRequest,'/api/nat/'+{{$item.ID}})">
+                                <i class="trash alternate outline icon"></i>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                {{end}}
+            </tbody>
+        </table>
+    </div>
+</div>
+{{template "component/nat"}}
+{{template "common/footer" .}}
+<script>
+    $('.checkbox').checkbox()
+</script>
+{{end}}