kcp: noise, header-custom, sudoku

3 files changed, 94 insertions, 66 deletions

diff --git a/web/html/form/outbound.html b/web/html/form/outbound.html
index c350d70f..81b488c7 100644
--- a/web/html/form/outbound.html
+++ b/web/html/form/outbound.html
@@ -972,22 +972,11 @@
                     :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"
                   ></a-icon>
                 </a-divider>
-                <a-form-item label="Rand">
-                  <a-input-number
-                    v-model.number="c.rand"
-                    :min="0"
-                  ></a-input-number>
-                </a-form-item>
-                <a-form-item label="Rand Range">
-                  <a-input
-                    v-model.trim="c.randRange"
-                    placeholder="0-255"
-                  ></a-input>
-                </a-form-item>
                 <a-form-item label="Type">
                   <a-select
                     v-model="c.type"
                     :dropdown-class-name="themeSwitcher.currentTheme"
+                    @change="t => { if(t === 'array') c.packet = []; else c.packet = ''; }"
                   >
                     <a-select-option value="array">Array</a-select-option>
                     <a-select-option value="str">String</a-select-option>
@@ -995,7 +984,21 @@
                     <a-select-option value="base64">Base64</a-select-option>
                   </a-select>
                 </a-form-item>
-                <a-form-item label="Packet">
+                <template v-if="c.type === 'array'">
+                  <a-form-item label="Rand">
+                    <a-input-number
+                      v-model.number="c.rand"
+                      :min="0"
+                    ></a-input-number>
+                  </a-form-item>
+                  <a-form-item label="Rand Range">
+                    <a-input
+                      v-model.trim="c.randRange"
+                      placeholder="0-255"
+                    ></a-input>
+                  </a-form-item>
+                </template>
+                <a-form-item label="Packet" v-else>
                   <a-input v-model.trim="c.packet" placeholder="binary data" />
                 </a-form-item>
               </template>
@@ -1017,22 +1020,11 @@
                     :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"
                   ></a-icon>
                 </a-divider>
-                <a-form-item label="Rand">
-                  <a-input-number
-                    v-model.number="s.rand"
-                    :min="0"
-                  ></a-input-number>
-                </a-form-item>
-                <a-form-item label="Rand Range">
-                  <a-input
-                    v-model.trim="s.randRange"
-                    placeholder="0-255"
-                  ></a-input>
-                </a-form-item>
                 <a-form-item label="Type">
                   <a-select
                     v-model="s.type"
                     :dropdown-class-name="themeSwitcher.currentTheme"
+                    @change="t => { if(t === 'array') s.packet = []; else s.packet = ''; }"
                   >
                     <a-select-option value="array">Array</a-select-option>
                     <a-select-option value="str">String</a-select-option>
@@ -1040,7 +1032,21 @@
                     <a-select-option value="base64">Base64</a-select-option>
                   </a-select>
                 </a-form-item>
-                <a-form-item label="Packet">
+                <template v-if="s.type === 'array'">
+                  <a-form-item label="Rand">
+                    <a-input-number
+                      v-model.number="s.rand"
+                      :min="0"
+                    ></a-input-number>
+                  </a-form-item>
+                  <a-form-item label="Rand Range">
+                    <a-input
+                      v-model.trim="s.randRange"
+                      placeholder="0-255"
+                    ></a-input>
+                  </a-form-item>
+                </template>
+                <a-form-item label="Packet" v-else>
                   <a-input v-model.trim="s.packet" placeholder="binary data" />
                 </a-form-item>
               </template>
@@ -1080,7 +1086,7 @@
                   type="plus"
                   type="primary"
                   size="small"
-                  @click="mask.settings.noise.push({rand: '1-8192', randRange: '0-255', type: 'array', packet: '', delay: ''})"
+                  @click="mask.settings.noise.push({rand: 0, randRange: '0-255', type: 'array', packet: [], delay: ''})"
                 />
               </a-form-item>
               <template v-for="(n, index) in mask.settings.noise" :key="index">
@@ -1092,22 +1098,11 @@
                     :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"
                   ></a-icon>
                 </a-divider>
-                <a-form-item label="Rand">
-                  <a-input-number
-                    v-model.number="n.rand"
-                    :min="0"
-                  ></a-input-number>
-                </a-form-item>
-                <a-form-item label="Rand Range">
-                  <a-input
-                    v-model.trim="n.randRange"
-                    placeholder="0-255"
-                  ></a-input>
-                </a-form-item>
                 <a-form-item label="Type">
                   <a-select
                     v-model="n.type"
                     :dropdown-class-name="themeSwitcher.currentTheme"
+                    @change="t => { if(t === 'array') n.packet = []; else n.packet = ''; }"
                   >
                     <a-select-option value="array">Array</a-select-option>
                     <a-select-option value="str">String</a-select-option>
@@ -1115,7 +1110,18 @@
                     <a-select-option value="base64">Base64</a-select-option>
                   </a-select>
                 </a-form-item>
-                <a-form-item label="Packet">
+                <template v-if="n.type === 'array'">
+                  <a-form-item label="Rand">
+                    <a-input v-model.trim="n.rand" placeholder="0 or 1-8192" />
+                  </a-form-item>
+                  <a-form-item label="Rand Range">
+                    <a-input
+                      v-model.trim="n.randRange"
+                      placeholder="0-255"
+                    ></a-input>
+                  </a-form-item>
+                </template>
+                <a-form-item label="Packet" v-else>
                   <a-input v-model.trim="n.packet" placeholder="binary data" />
                 </a-form-item>
                 <a-form-item label="Delay">
diff --git a/web/html/form/stream/stream_finalmask.html b/web/html/form/stream/stream_finalmask.html
index 64bf2c06..f0ec87cf 100644
--- a/web/html/form/stream/stream_finalmask.html
+++ b/web/html/form/stream/stream_finalmask.html
@@ -116,16 +116,11 @@
               :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"
             ></a-icon>
           </a-divider>
-          <a-form-item label="Rand">
-            <a-input-number v-model.number="c.rand" />
-          </a-form-item>
-          <a-form-item label="Rand Range">
-            <a-input v-model.trim="c.randRange" placeholder="0-255" />
-          </a-form-item>
           <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
             <a-select
               v-model="c.type"
               :dropdown-class-name="themeSwitcher.currentTheme"
+              @change="t => { if(t === 'base64') c.packet = RandomUtil.randomBase64(); else if(t === 'array') c.packet = []; else c.packet = ''; }"
             >
               <a-select-option value="array">Array</a-select-option>
               <a-select-option value="str">String</a-select-option>
@@ -133,8 +128,20 @@
               <a-select-option value="base64">Base64</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="Packet">
-            <a-input v-model.trim="c.packet" placeholder="binary data" />
+          <template v-if="c.type === 'array'">
+            <a-form-item label="Rand">
+              <a-input-number v-model.number="c.rand" />
+            </a-form-item>
+            <a-form-item label="Rand Range">
+              <a-input v-model.trim="c.randRange" placeholder="0-255" />
+            </a-form-item>
+          </template>
+          <a-form-item v-else label="Packet">
+            <a-input-group compact v-if="c.type === 'base64'">
+              <a-input v-model.trim="c.packet" placeholder="binary data" :style="{ width: 'calc(100% - 32px)' }" />
+              <a-button icon="reload" @click="c.packet = RandomUtil.randomBase64()" />
+            </a-input-group>
+            <a-input v-else v-model.trim="c.packet" placeholder="binary data" />
           </a-form-item>
         </template>
         <a-divider :style="{ margin: '0' }"></a-divider>
@@ -155,16 +162,11 @@
               :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"
             ></a-icon>
           </a-divider>
-          <a-form-item label="Rand">
-            <a-input-number v-model.number="s.rand" />
-          </a-form-item>
-          <a-form-item label="Rand Range">
-            <a-input v-model.trim="s.randRange" placeholder="0-255" />
-          </a-form-item>
           <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
             <a-select
               v-model="s.type"
               :dropdown-class-name="themeSwitcher.currentTheme"
+              @change="t => { if(t === 'base64') s.packet = RandomUtil.randomBase64(); else if(t === 'array') s.packet = []; else s.packet = ''; }"
             >
               <a-select-option value="array">Array</a-select-option>
               <a-select-option value="str">String</a-select-option>
@@ -172,8 +174,20 @@
               <a-select-option value="base64">Base64</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="Packet">
-            <a-input v-model.trim="s.packet" placeholder="binary data" />
+          <template v-if="s.type === 'array'">
+            <a-form-item label="Rand">
+              <a-input-number v-model.number="s.rand" />
+            </a-form-item>
+            <a-form-item label="Rand Range">
+              <a-input v-model.trim="s.randRange" placeholder="0-255" />
+            </a-form-item>
+          </template>
+          <a-form-item v-else label="Packet">
+            <a-input-group compact v-if="s.type === 'base64'">
+              <a-input v-model.trim="s.packet" placeholder="binary data" :style="{ width: 'calc(100% - 32px)' }" />
+              <a-button icon="reload" @click="s.packet = RandomUtil.randomBase64()" />
+            </a-input-group>
+            <a-input v-else v-model.trim="s.packet" placeholder="binary data" />
           </a-form-item>
         </template>
       </template>
@@ -186,7 +200,7 @@
             type="plus"
             type="primary"
             size="small"
-            @click="mask.settings.noise.push({rand: '1-8192', randRange: '0-255', type: 'array', packet: '', delay: ''})"
+            @click="mask.settings.noise.push({rand: '1-8192', randRange: '0-255', type: 'array', packet: [], delay: '10-20'})"
           />
         </a-form-item>
         <template v-for="(n, index) in mask.settings.noise" :key="index">
@@ -198,16 +212,11 @@
               :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"
             ></a-icon>
           </a-divider>
-          <a-form-item label="Rand">
-            <a-input v-model.trim="n.rand" placeholder="1-8192" />
-          </a-form-item>
-          <a-form-item label="Rand Range">
-            <a-input v-model.trim="n.randRange" placeholder="0-255" />
-          </a-form-item>
           <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
             <a-select
               v-model="n.type"
               :dropdown-class-name="themeSwitcher.currentTheme"
+              @change="t => { if(t === 'base64') n.packet = RandomUtil.randomBase64(); else if(t === 'array') n.packet = []; else n.packet = ''; }"
             >
               <a-select-option value="array">Array</a-select-option>
               <a-select-option value="str">String</a-select-option>
@@ -215,8 +224,20 @@
               <a-select-option value="base64">Base64</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="Packet">
-            <a-input v-model.trim="n.packet" placeholder="binary data" />
+          <template v-if="n.type === 'array'">
+            <a-form-item label="Rand">
+              <a-input v-model.trim="n.rand" placeholder="0 or 1-8192" />
+            </a-form-item>
+            <a-form-item label="Rand Range">
+              <a-input v-model.trim="n.randRange" placeholder="0-255" />
+            </a-form-item>
+          </template>
+          <a-form-item v-else label="Packet">
+            <a-input-group compact v-if="n.type === 'base64'">
+              <a-input v-model.trim="n.packet" placeholder="binary data" :style="{ width: 'calc(100% - 32px)' }" />
+              <a-button icon="reload" @click="n.packet = RandomUtil.randomBase64()" />
+            </a-input-group>
+            <a-input v-else v-model.trim="n.packet" placeholder="binary data" />
           </a-form-item>
           <a-form-item label="Delay">
             <a-input v-model.trim="n.delay" placeholder="10-20" />
diff --git a/web/html/xray.html b/web/html/xray.html
index a4d17459..61c40c80 100644
--- a/web/html/xray.html
+++ b/web/html/xray.html
@@ -1077,7 +1077,8 @@
             return;
           }
           if (!msg.obj) return;
-          const { geoip = [], geosite = [] } = msg.obj;
+          const geoip = msg.obj.geoip ?? [];
+          const geosite = msg.obj.geosite ?? [];
           const geoSuffix = this.customGeoAliasLabelSuffix || '';
           geoip.forEach((x) => {
             this.settingsData.IPsOptions.push({