From bea19a263db88fef44b4356082b199fbfcc39a25 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Sun, 6 Apr 2025 16:40:33 +0700
Subject: Code refactoring (#2865)

* refactor: use vue inline styles in entire application

* refactor: setting row in dashboard page

* refactor: use blob for download file in text modal

* refactor: move all html templates in `web/html` folder

* refactor: `DeviceUtils` -> `MediaQueryMixin`
The transition to mixins has been made, as they can update themselves.

* chore: pretty right buttons in `outbounds` tab in xray settings

* refactor: add translations for system status

* refactor: adjust gutter spacing in setting list item

* refactor: use native `a-input-password` for password field

* chore: return old system status
with new translations

* chore: add missing translation
---
 web/html/form/stream/external_proxy.html     | 29 +++++++++++
 web/html/form/stream/stream_grpc.html        | 13 +++++
 web/html/form/stream/stream_httpupgrade.html | 26 ++++++++++
 web/html/form/stream/stream_kcp.html         | 48 +++++++++++++++++++
 web/html/form/stream/stream_settings.html    | 51 ++++++++++++++++++++
 web/html/form/stream/stream_sockopt.html     | 66 +++++++++++++++++++++++++
 web/html/form/stream/stream_tcp.html         | 72 ++++++++++++++++++++++++++++
 web/html/form/stream/stream_ws.html          | 29 +++++++++++
 web/html/form/stream/stream_xhttp.html       | 46 ++++++++++++++++++
 9 files changed, 380 insertions(+)
 create mode 100644 web/html/form/stream/external_proxy.html
 create mode 100644 web/html/form/stream/stream_grpc.html
 create mode 100644 web/html/form/stream/stream_httpupgrade.html
 create mode 100644 web/html/form/stream/stream_kcp.html
 create mode 100644 web/html/form/stream/stream_settings.html
 create mode 100644 web/html/form/stream/stream_sockopt.html
 create mode 100644 web/html/form/stream/stream_tcp.html
 create mode 100644 web/html/form/stream/stream_ws.html
 create mode 100644 web/html/form/stream/stream_xhttp.html

(limited to 'web/html/form/stream')

diff --git a/web/html/form/stream/external_proxy.html b/web/html/form/stream/external_proxy.html
new file mode 100644
index 00000000..7ef768fb
--- /dev/null
+++ b/web/html/form/stream/external_proxy.html
@@ -0,0 +1,29 @@
+{{define "form/externalProxy"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-divider :style="{ margin: '5px 0 0' }"></a-divider>
+  <a-form-item label="External Proxy">
+    <a-switch v-model="externalProxy"></a-switch>
+    <a-button icon="plus" v-if="externalProxy" type="primary" :style="{ marginLeft: '10px' }" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})"></a-button>
+  </a-form-item>
+  <a-input-group :style="{ margin: '8px 0' }" compact v-for="(row, index) in inbound.stream.externalProxy">
+    <template>
+      <a-tooltip title="Force TLS">
+        <a-select v-model="row.forceTls" :style="{ width: '20%', margin: '0px' }" :dropdown-class-name="themeSwitcher.currentTheme">
+          <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
+          <a-select-option value="none">{{ i18n "none" }}</a-select-option>
+          <a-select-option value="tls">TLS</a-select-option>
+        </a-select>
+      </a-tooltip>
+    </template>
+    <a-input :style="{ width: '35%' }" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
+    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
+      <a-input-number :style="{ width: '15%' }" v-model.number="row.port" min="1" max="65531"></a-input-number>
+    </a-tooltip>
+    <a-input :style="{ width: '50%', top: '0' }" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'>
+      <template slot="addonAfter">
+        <a-button icon="minus" size="small" @click="inbound.stream.externalProxy.splice(index, 1)"></a-button>
+      </template>
+    </a-input>
+  </a-input-group>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_grpc.html b/web/html/form/stream/stream_grpc.html
new file mode 100644
index 00000000..e74a3c3f
--- /dev/null
+++ b/web/html/form/stream/stream_grpc.html
@@ -0,0 +1,13 @@
+{{define "form/streamGRPC"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="Service Name">
+        <a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
+    </a-form-item>
+    <a-form-item label="Authority">
+        <a-input v-model.trim="inbound.stream.grpc.authority"></a-input>
+    </a-form-item>
+    <a-form-item label="Multi Mode">
+        <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
+    </a-form-item>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_httpupgrade.html b/web/html/form/stream/stream_httpupgrade.html
new file mode 100644
index 00000000..aa433389
--- /dev/null
+++ b/web/html/form/stream/stream_httpupgrade.html
@@ -0,0 +1,26 @@
+{{define "form/streamHTTPUpgrade"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form-item label="Proxy Protocol">
+    <a-switch v-model="inbound.stream.httpupgrade.acceptProxyProtocol"></a-switch>
+  </a-form-item>
+  <a-form-item label='{{ i18n "host" }}'>
+    <a-input v-model.trim="inbound.stream.httpupgrade.host"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "path" }}'>
+    <a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.httpupgrade.addHeader('', '')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
+      <a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
+      </a-input>
+      <a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.httpupgrade.removeHeader(index)"></a-button>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_kcp.html b/web/html/form/stream/stream_kcp.html
new file mode 100644
index 00000000..50794574
--- /dev/null
+++ b/web/html/form/stream/stream_kcp.html
@@ -0,0 +1,48 @@
+{{define "form/streamKCP"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "camouflage" }}'>
+        <a-select v-model="inbound.stream.kcp.type" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="none">None</a-select-option>
+            <a-select-option value="srtp">SRTP</a-select-option>
+            <a-select-option value="utp">uTP</a-select-option>
+            <a-select-option value="wechat-video">WeChat</a-select-option>
+            <a-select-option value="dtls">DTLS 1.2</a-select-option>
+            <a-select-option value="wireguard">WireGuard</a-select-option>
+            <a-select-option value="dns">DNS</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                {{ i18n "password" }}
+                <a-icon @click="inbound.stream.kcp.seed = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.stream.kcp.seed"></a-input>
+    </a-form-item>
+    <a-form-item label='MTU'>
+        <a-input-number v-model.number="inbound.stream.kcp.mtu" :min="576" :max="1460"></a-input-number>
+    </a-form-item>
+    <a-form-item label='TTI (ms)'>
+        <a-input-number v-model.number="inbound.stream.kcp.tti" :min="10" :max="100"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Uplink (MB/s)'>
+        <a-input-number v-model.number="inbound.stream.kcp.upCap" :min="0"></a-input-number>
+    </a-form-item> 
+    <a-form-item label='Downlink (MB/s)'>
+        <a-input-number v-model.number="inbound.stream.kcp.downCap" :min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Congestion'>
+        <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
+    </a-form-item>
+    <a-form-item label='Read Buffer (MB)'>
+        <a-input-number v-model.number="inbound.stream.kcp.readBuffer" :min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Write Buffer (MB)'>
+        <a-input-number v-model.number="inbound.stream.kcp.writeBuffer" :min="0"></a-input-number>
+    </a-form-item>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_settings.html b/web/html/form/stream/stream_settings.html
new file mode 100644
index 00000000..f6b17cc6
--- /dev/null
+++ b/web/html/form/stream/stream_settings.html
@@ -0,0 +1,51 @@
+{{define "form/streamSettings"}}
+<!-- select stream network -->
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "transmission" }}'>
+        <a-select v-model="inbound.stream.network" :style="{ width: '75%' }" @change="streamNetworkChange"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="tcp">TCP (RAW)</a-select-option>
+            <a-select-option value="kcp">mKCP</a-select-option>
+            <a-select-option value="ws">WebSocket</a-select-option>
+            <a-select-option value="grpc">gRPC</a-select-option>
+            <a-select-option value="httpupgrade">HTTPUpgrade</a-select-option>
+            <a-select-option value="xhttp">XHTTP</a-select-option>
+        </a-select>
+    </a-form-item>
+</a-form>
+
+<!-- tcp -->
+<template v-if="inbound.stream.network === 'tcp'">
+    {{template "form/streamTCP"}}
+</template>
+
+<!-- kcp -->
+<template v-if="inbound.stream.network === 'kcp'">
+    {{template "form/streamKCP"}}
+</template>
+
+<!-- ws -->
+<template v-if="inbound.stream.network === 'ws'">
+    {{template "form/streamWS"}}
+</template>
+
+<!-- grpc -->
+<template v-if="inbound.stream.network === 'grpc'">
+    {{template "form/streamGRPC"}}
+</template>
+
+<!-- httpupgrade -->
+<template v-if="inbound.stream.network === 'httpupgrade'">
+    {{template "form/streamHTTPUpgrade"}}
+</template>
+
+<!-- xhttp -->
+<template v-if="inbound.stream.network === 'xhttp'">
+    {{template "form/streamXHTTP"}}
+</template>
+
+<!-- sockopt -->
+<template>
+    {{template "form/streamSockopt"}}
+</template>
+{{end}}
diff --git a/web/html/form/stream/stream_sockopt.html b/web/html/form/stream/stream_sockopt.html
new file mode 100644
index 00000000..4480594a
--- /dev/null
+++ b/web/html/form/stream/stream_sockopt.html
@@ -0,0 +1,66 @@
+{{define "form/streamSockopt"}}
+<a-divider :style="{ margin: '5px 0 0' }"></a-divider>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="Sockopt">
+        <a-switch v-model="inbound.stream.sockoptSwitch"></a-switch>
+    </a-form-item>
+    <template v-if="inbound.stream.sockoptSwitch">
+        <a-form-item label="Route Mark">
+            <a-input-number v-model.number="inbound.stream.sockopt.mark" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="TCP Keep Alive Interval">
+            <a-input-number v-model.number="inbound.stream.sockopt.tcpKeepAliveInterval" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="TCP Keep Alive Idle">
+            <a-input-number v-model.number="inbound.stream.sockopt.tcpKeepAliveIdle" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="TCP Max Seg">
+            <a-input-number v-model.number="inbound.stream.sockopt.tcpMaxSeg" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="TCP User Timeout">
+            <a-input-number v-model.number="inbound.stream.sockopt.tcpUserTimeout" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="TCP Window Clamp">
+            <a-input-number v-model.number="inbound.stream.sockopt.tcpWindowClamp" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="Proxy Protocol">
+            <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
+        </a-form-item>
+        <a-form-item label="TCP Fast Open">
+            <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
+        </a-form-item>
+        <a-form-item label="Multipath TCP">
+            <a-switch v-model.trim="inbound.stream.sockopt.tcpMptcp"></a-switch>
+        </a-form-item>
+        <a-form-item label="Penetrate">
+            <a-switch v-model.trim="inbound.stream.sockopt.penetrate"></a-switch>
+        </a-form-item>
+        <a-form-item label="V6 Only">
+            <a-switch v-model.trim="inbound.stream.sockopt.V6Only"></a-switch>
+        </a-form-item>
+        <a-form-item label='Domain Strategy'>
+            <a-select v-model="inbound.stream.sockopt.domainStrategy" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
+              <a-select-option v-for="key in DOMAIN_STRATEGY_OPTION" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='TCP Congestion'>
+            <a-select v-model="inbound.stream.sockopt.tcpcongestion" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
+              <a-select-option v-for="key in TCP_CONGESTION_OPTION" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="TProxy">
+            <a-select v-model="inbound.stream.sockopt.tproxy" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="off">Off</a-select-option>
+                <a-select-option value="redirect">Redirect</a-select-option>
+                <a-select-option value="tproxy">TProxy</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="Dialer Proxy">
+            <a-input v-model="inbound.stream.sockopt.dialerProxy"></a-input>
+        </a-form-item>
+        <a-form-item label="Interface Name">
+            <a-input v-model="inbound.stream.sockopt.interfaceName"></a-input>
+        </a-form-item>
+    </template>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_tcp.html b/web/html/form/stream/stream_tcp.html
new file mode 100644
index 00000000..3024ef77
--- /dev/null
+++ b/web/html/form/stream/stream_tcp.html
@@ -0,0 +1,72 @@
+{{define "form/streamTCP"}}
+<!-- tcp type -->
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form-item label="Proxy Protocol" v-if="inbound.canEnableTls()">
+    <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
+  </a-form-item>
+  <a-form-item label='HTTP {{ i18n "camouflage" }}'>
+    <a-switch :checked="inbound.stream.tcp.type === 'http'" @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'"></a-switch>
+  </a-form-item>
+</a-form>
+
+<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <!-- tcp request -->
+  <a-divider :style="{ margin: '0' }">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
+  </a-form-item>
+  <a-form-item>
+    <template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
+      <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addPath('/')"></a-button>
+    </template>
+    <template v-for="(path, index) in inbound.stream.tcp.request.path">
+      <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
+        <a-button icon="minus" size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)" v-if="inbound.stream.tcp.request.path.length>1"></a-button>
+      </a-input>
+    </template>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
+      <a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
+      </a-input>
+      <a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.tcp.request.removeHeader(index)"></a-button>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
+
+  <!-- tcp response -->
+  <a-divider :style="{ margin: '0' }">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
+      <a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
+      </a-input>
+      <a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <template slot="addonAfter">
+          <a-button icon="minus" size="small" @click="inbound.stream.tcp.response.removeHeader(index)"></a-button>
+        </template>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_ws.html b/web/html/form/stream/stream_ws.html
new file mode 100644
index 00000000..4c71a516
--- /dev/null
+++ b/web/html/form/stream/stream_ws.html
@@ -0,0 +1,29 @@
+{{define "form/streamWS"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form-item label="Proxy Protocol">
+    <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
+  </a-form-item>
+  <a-form-item label='{{ i18n "host" }}'>
+    <a-input v-model.trim="inbound.stream.ws.host"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "path" }}'>
+    <a-input v-model.trim="inbound.stream.ws.path"></a-input>
+  </a-form-item>
+  <a-form-item label='Heartbeat Period'>
+    <a-input-number v-model.number="inbound.stream.ws.heartbeatPeriod" :min="0"></a-input-number>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.ws.addHeader('', '')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
+      <a-input :style="{ width: '50%' }" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
+      </a-input>
+      <a-input :style="{ width: '50%' }" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.ws.removeHeader(index)"></a-button>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_xhttp.html b/web/html/form/stream/stream_xhttp.html
new file mode 100644
index 00000000..4b3052b6
--- /dev/null
+++ b/web/html/form/stream/stream_xhttp.html
@@ -0,0 +1,46 @@
+{{define "form/streamXHTTP"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "host" }}'>
+        <a-input v-model.trim="inbound.stream.xhttp.host"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "path" }}'>
+        <a-input v-model.trim="inbound.stream.xhttp.path"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+        <a-button icon="plus" size="small" @click="inbound.stream.xhttp.addHeader('', '')"></a-button>
+    </a-form-item>
+    <a-form-item :wrapper-col="{span:24}">
+        <a-input-group compact v-for="(header, index) in inbound.stream.xhttp.headers">
+            <a-input :style="{ width: '50%' }" v-model.trim="header.name"
+                placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+                <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
+            </a-input>
+            <a-input :style="{ width: '50%' }" v-model.trim="header.value"
+                placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+                <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.xhttp.removeHeader(index)"></a-button>
+            </a-input>
+        </a-input-group>
+    </a-form-item>
+    <a-form-item label='Mode'>
+        <a-select v-model="inbound.stream.xhttp.mode" :style="{ width: '50%' }"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="key in MODE_OPTION" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item label="Max Buffered Upload" v-if="inbound.stream.xhttp.mode === 'packet-up'">
+        <a-input-number v-model.number="inbound.stream.xhttp.scMaxBufferedPosts"></a-input-number>
+    </a-form-item>
+    <a-form-item label="Max Upload Size (Byte)" v-if="inbound.stream.xhttp.mode === 'packet-up'">
+        <a-input v-model.trim="inbound.stream.xhttp.scMaxEachPostBytes"></a-input>
+    </a-form-item>
+    <a-form-item label="Stream-Up Server" v-if="inbound.stream.xhttp.mode === 'stream-up'">
+        <a-input v-model.trim="inbound.stream.xhttp.scStreamUpServerSecs"></a-input>
+    </a-form-item>
+    <a-form-item label="Padding Bytes">
+        <a-input v-model.trim="inbound.stream.xhttp.xPaddingBytes"></a-input>
+    </a-form-item>
+    <a-form-item label="No SSE Header">
+        <a-switch v-model="inbound.stream.xhttp.noSSEHeader"></a-switch>
+    </a-form-item>
+</a-form>
+{{end}}
\ No newline at end of file
-- 
cgit v1.2.3