[sub] JSON sub enhancement + minor changes

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>

4 files changed, 48 insertions, 21 deletions

diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 3fcfdfc1..0e2b3a63 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,9 +1,10 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-         :closable="true"
-         :class="themeSwitcher.currentTheme"
-         :footer="null"
-         width="300px">
+        :dialog-style="{ top: '20px' }"
+        :closable="true"
+        :class="themeSwitcher.currentTheme"
+        :footer="null"
+        width="300px">
     <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
         {{ i18n "pages.inbounds.clickOnQRcode" }}
     </a-tag>
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html
index fa89fada..f605b4fd 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -1,8 +1,9 @@
 {{define "inboundModal"}}
-<a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title" @ok="inModal.ok"
-         :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
-         :class="themeSwitcher.currentTheme"
-         :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
+<a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title"
+        :dialog-style="{ top: '20px' }" @ok="inModal.ok"
+        :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
+        :class="themeSwitcher.currentTheme"
+        :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/inbound"}}
 </a-modal>
 <script>
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index fe867214..157563c0 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -259,17 +259,13 @@
         </a-layout-content>
     </a-layout>
 
-    <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
-             :closable="true" @ok="() => versionModal.visible = false"
-             :class="themeSwitcher.currentTheme"
-             footer="">
+    <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
+        @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
         <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
-        message='{{ i18n "pages.index.xraySwitchClickDesk" }}'
-        show-icon
-        ></a-alert>
+            message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
         <template v-for="version, index in versionModal.versions">
-            <a-tag :color="index % 2 == 0 ? 'purple' : 'green'"
-                   style="margin-right: 10px" @click="switchV2rayVersion(version)">
+            <a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px"
+                @click="switchV2rayVersion(version)">
                 [[ version ]]
             </a-tag>
         </template>
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 507a93c7..aac10f2a 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -295,11 +295,30 @@
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.subPath"}}' desc='{{ i18n "pages.settings.subPathDesc"}}' v-model="allSetting.subJsonPath"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.subURI"}}' desc='{{ i18n "pages.settings.subURIDesc"}}' v-model="allSetting.subJsonURI" placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
                                 <setting-list-item type="switch" title='{{ i18n "pages.settings.fragment"}}' desc='{{ i18n "pages.settings.fragmentDesc"}}' v-model="fragment"></setting-list-item>
-                                <template v-if="fragment">
-                                    <setting-list-item type="text" title='length' v-model="fragmentLength" placeholder="100-200"></setting-list-item>
-                                    <setting-list-item type="text" title='Interval' v-model="fragmentInterval" placeholder="10-20"></setting-list-item>
-                                </template>
                             </a-list>
+                            <a-collapse v-if="fragment">
+                                <a-collapse-panel header='{{ i18n "pages.settings.fragment"}}'>
+                                    <a-list-item style="padding: 20px">
+                                        <a-row>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-list-item-meta title='Packets'/>
+                                            </a-col>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-select
+                                                    v-model="fragmentPackets"
+                                                    style="width: 100%"
+                                                    :dropdown-class-name="themeSwitcher.currentTheme">
+                                                    <a-select-option :value="p" :label="p" v-for="p in ['1-1', '1-3', 'tlshello']">
+                                                        [[ p ]]
+                                                    </a-select-option>
+                                                </a-select>
+                                            </a-col>
+                                        </a-row>
+                                    </a-list-item>
+                                    <setting-list-item type="text" title='Length' v-model="fragmentLength" placeholder="100-200"></setting-list-item>
+                                    <setting-list-item type="text" title='Interval' v-model="fragmentInterval" placeholder="10-20"></setting-list-item>
+                                </a-collapse-panel>
+                            </a-collapse>
                         </a-tab-pane>
                     </a-tabs>
                 </a-space>
@@ -483,6 +502,16 @@
                     this.allSetting.subJsonFragment = v ? JSON.stringify(this.defaultFragment) : "";
                 }
             },
+            fragmentPackets: {
+                get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.packets : ""; },
+                set: function(v) {
+                    if (v != ""){
+                        newFragment = JSON.parse(this.allSetting.subJsonFragment);
+                        newFragment.settings.fragment.packets = v;
+                        this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+                    }
+                }
+            },
             fragmentLength: {
                 get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.length : ""; },
                 set: function(v) {