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

1 files changed, 29 insertions, 0 deletions

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}}