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/sniffing.html

@@ -0,0 +1,29 @@
+{{define "form/sniffing"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form-item>
+    <span slot="label">
+      {{ i18n "enabled" }}
+        <a-tooltip>
+            <template slot="title">
+                <span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
+            </template>
+            <a-icon type="question-circle"></a-icon>
+        </a-tooltip>
+    </span>
+    <a-switch v-model="inbound.sniffing.enabled"></a-switch>
+  </a-form-item>
+  <template v-if="inbound.sniffing.enabled">
+    <a-form-item :wrapper-col="{span:24}">
+      <a-checkbox-group v-model="inbound.sniffing.destOverride">
+        <a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
+      </a-checkbox-group>
+    </a-form-item>
+    <a-form-item label='Metadata Only'>
+      <a-switch v-model="inbound.sniffing.metadataOnly"></a-switch>
+    </a-form-item>
+    <a-form-item label='Route Only'>
+      <a-switch v-model="inbound.sniffing.routeOnly"></a-switch>
+    </a-form-item>
+  </template>
+</a-form>
+{{end}}