From a8a1cf06b20c7adab94d138a326fa72787e72ddf Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Sat, 21 Jun 2025 17:12:23 +0000
Subject: [PATCH] refactor: new loading logic, icons for tabs

---
 web/html/inbounds.html               |  964 ++++-----
 web/html/index.html                  |   41 +-
 web/html/settings.html               |  126 +-
 web/html/settings/xray/advanced.html |    2 +-
 web/html/xray.html                   | 2712 +++++++++++++-------------
 5 files changed, 1979 insertions(+), 1866 deletions(-)

diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index 7b00ae5e..e1267190 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -148,9 +148,9 @@
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
-      <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+      <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
-          <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
             message='{{ i18n "secAlertTitle" }}'
             color="red"
             description='{{ i18n "secAlertSsl" }}'
@@ -158,499 +158,508 @@
           </a-alert>
         </transition>
         <transition name="list" appear>
-          <a-card size="small" :style="{ padding: '16px' }" hoverable>
-            <a-row>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`">
-                  <template #prefix>
-                    <a-icon type="swap"></a-icon>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                  <template #prefix>
-                    <a-icon type="pie-chart"></a-icon>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                  <template #prefix>
-                    <a-icon type="bars"></a-icon>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }">
-                  <template #prefix>
-                    <a-space direction="horizontal">
-                      <a-icon type="team"></a-icon>
-                      <div>
-                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                        <a-tag color="green">[[ total.clients ]]</a-tag>
-                        <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in total.deactive"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
-                        </a-popover>
-                        <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in total.depleted"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
-                        </a-popover>
-                        <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in total.expiring"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
-                        </a-popover>
-                        <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in onlineClients"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
-                        </a-popover>
-                      </div>
-                    </a-space>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-            </a-row>
-          </a-card>
-        </transition>
-        <transition name="list" appear>
-          <a-card hoverable>
-            <template #title>
-              <a-space direction="horizontal">
-                <a-button type="primary" icon="plus" @click="openAddInbound">
-                  <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
-                </a-button>
-                <a-dropdown :trigger="['click']">
-                  <a-button type="primary" icon="menu">
-                    <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template>
-                  </a-button>
-                  <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
-                    <a-menu-item key="import">
-                      <a-icon type="import"></a-icon>
-                      {{ i18n "pages.inbounds.importInbound" }}
-                    </a-menu-item>
-                    <a-menu-item key="export">
-                      <a-icon type="export"></a-icon>
-                      {{ i18n "pages.inbounds.export" }}
-                    </a-menu-item>
-                    <a-menu-item key="subs" v-if="subSettings.enable">
-                      <a-icon type="export"></a-icon>
-                      {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }}
-                    </a-menu-item>
-                    <a-menu-item key="resetInbounds">
-                      <a-icon type="reload"></a-icon>
-                      {{ i18n "pages.inbounds.resetAllTraffic" }}
-                    </a-menu-item>
-                    <a-menu-item key="resetClients">
-                      <a-icon type="file-done"></a-icon>
-                      {{ i18n "pages.inbounds.resetAllClientTraffics" }}
-                    </a-menu-item>
-                    <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }">
-                      <a-icon type="rest"></a-icon>
-                      {{ i18n "pages.inbounds.delDepletedClients" }}
-                    </a-menu-item>
-                  </a-menu>
-                </a-dropdown>
-              </a-space>
-            </template>
-            <template #extra>
-              <a-button-group>
-                <a-button icon="sync" @click="manualRefresh" :loading="refreshing"></a-button>
-                <a-popover placement="bottomRight" trigger="click" :overlay-class-name="themeSwitcher.currentTheme"> 
-                  <template #title>
-                    <div class="ant-custom-popover-title">
-                      <a-switch v-model="isRefreshEnabled" @change="toggleRefresh" size="small"></a-switch>
-                      <span>{{ i18n "pages.inbounds.autoRefresh" }}</span>
-                    </div>
-                  </template>
-                  <template #content>
-                    <a-space direction="vertical">
-                      <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span>
-                      <a-select v-model="refreshInterval"
-                          :disabled="!isRefreshEnabled"
-                          :style="{ width: '100%' }"
-                          @change="changeRefreshInterval"
-                          :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
-                      </a-select>
-                    </a-space>
-                  </template>
-                  <a-button icon="down"></a-button>
-                </a-popover>
-              </a-button-group>
-            </template>
-            <a-space direction="vertical">
-              <div :style="isMobile ? {} : { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }">
-                <a-switch v-model="enableFilter"
-                    :style="isMobile ? { marginBottom: '.5rem', display: 'flex' } : { marginRight: '.5rem' }"
-                    @change="toggleFilter">
-                  <a-icon slot="checkedChildren" type="search"></a-icon>
-                  <a-icon slot="unCheckedChildren" type="filter"></a-icon>
-                </a-switch>
-                <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus :style="{ maxWidth: '300px' }" :size="isMobile ? 'small' : ''"></a-input>
-                <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
-                  <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
-                  <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
-                  <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
-                  <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
-                  <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
-                </a-radio-group>
-              </div>
-              <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
-                  :data-source="searchedInbounds"
-                  :scroll="isMobile ? {} : { x: 1000 }"
-                  :pagination=pagination(searchedInbounds)
-                  :expand-icon-as-cell="false"
-                  :expand-row-by-click="false"
-                  :expand-icon-column-index="0"
-                  :indent-size="0"
-                  :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
-                  :style="{ marginTop: '10px' }"
-                  :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}`, emptyText: `{{ i18n "noData" }}` }'>
-                <template slot="action" slot-scope="text, dbInbound">
-                  <a-dropdown :trigger="['click']">
-                    <a-icon @click="e => e.preventDefault()" type="more" :style="{ fontSize: '20px', textDecoration: 'solid' }"></a-icon>
-                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
-                      <a-menu-item key="edit">
-                        <a-icon type="edit"></a-icon>
-                        {{ i18n "edit" }}
-                      </a-menu-item>
-                      <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
-                        <a-icon type="qrcode"></a-icon>
-                        {{ i18n "qrCode" }}
-                      </a-menu-item>
-                      <template v-if="dbInbound.isMultiUser()">
-                        <a-menu-item key="addClient">
-                          <a-icon type="user-add"></a-icon>
-                          {{ i18n "pages.client.add"}}
-                        </a-menu-item>
-                        <a-menu-item key="addBulkClient">
-                          <a-icon type="usergroup-add"></a-icon>
-                          {{ i18n "pages.client.bulk"}}
-                        </a-menu-item>
-                        <a-menu-item key="resetClients">
-                          <a-icon type="file-done"></a-icon>
-                          {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
+          <a-row v-if="!loadingStates.fetched">
+            <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+              <a-spin tip='{{ i18n "loading" }}'></a-spin>
+            </a-card>
+          </a-row>
+          <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+            <a-col>
+              <a-card size="small" :style="{ padding: '16px' }" hoverable>
+                <a-row>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`">
+                      <template #prefix>
+                        <a-icon type="swap"></a-icon>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                      <template #prefix>
+                        <a-icon type="pie-chart"></a-icon>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                      <template #prefix>
+                        <a-icon type="bars"></a-icon>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }">
+                      <template #prefix>
+                        <a-space direction="horizontal">
+                          <a-icon type="team"></a-icon>
+                          <div>
+                            <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                            <a-tag color="green">[[ total.clients ]]</a-tag>
+                            <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in total.deactive"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
+                            </a-popover>
+                            <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in total.depleted"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
+                            </a-popover>
+                            <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in total.expiring"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
+                            </a-popover>
+                            <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in onlineClients"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
+                            </a-popover>
+                          </div>
+                        </a-space>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                </a-row>
+              </a-card>
+            </a-col>
+            <a-col>
+              <a-card hoverable>
+                <template #title>
+                  <a-space direction="horizontal">
+                    <a-button type="primary" icon="plus" @click="openAddInbound">
+                      <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
+                    </a-button>
+                    <a-dropdown :trigger="['click']">
+                      <a-button type="primary" icon="menu">
+                        <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template>
+                      </a-button>
+                      <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
+                        <a-menu-item key="import">
+                          <a-icon type="import"></a-icon>
+                          {{ i18n "pages.inbounds.importInbound" }}
                         </a-menu-item>
                         <a-menu-item key="export">
                           <a-icon type="export"></a-icon>
-                          {{ i18n "pages.inbounds.export"}}
+                          {{ i18n "pages.inbounds.export" }}
                         </a-menu-item>
                         <a-menu-item key="subs" v-if="subSettings.enable">
                           <a-icon type="export"></a-icon>
-                          {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}
+                          {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }}
+                        </a-menu-item>
+                        <a-menu-item key="resetInbounds">
+                          <a-icon type="reload"></a-icon>
+                          {{ i18n "pages.inbounds.resetAllTraffic" }}
+                        </a-menu-item>
+                        <a-menu-item key="resetClients">
+                          <a-icon type="file-done"></a-icon>
+                          {{ i18n "pages.inbounds.resetAllClientTraffics" }}
                         </a-menu-item>
                         <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }">
                           <a-icon type="rest"></a-icon>
                           {{ i18n "pages.inbounds.delDepletedClients" }}
                         </a-menu-item>
-                      </template>
-                      <template v-else>
-                        <a-menu-item key="showInfo">
-                          <a-icon type="info-circle"></a-icon>
-                          {{ i18n "info"}}
-                        </a-menu-item>
-                      </template>
-                      <a-menu-item key="clipboard">
-                        <a-icon type="copy"></a-icon>
-                        {{ i18n "pages.inbounds.exportInbound" }}
-                      </a-menu-item>
-                      <a-menu-item key="resetTraffic">
-                        <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
-                      </a-menu-item>
-                      <a-menu-item key="clone">
-                        <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
-                      </a-menu-item>
-                      <a-menu-item key="delete">
-                        <span :style="{ color: '#FF4D4F' }">
-                          <a-icon type="delete"></a-icon> {{ i18n "delete"}}
-                        </span>
-                      </a-menu-item>
-                      <a-menu-item v-if="isMobile">
-                        <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
-                        {{ i18n "pages.inbounds.enable" }}
-                      </a-menu-item>
-                    </a-menu>
-                  </a-dropdown>
+                      </a-menu>
+                    </a-dropdown>
+                  </a-space>
                 </template>
-                <template slot="protocol" slot-scope="text, dbInbound">
-                  <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
-                  <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                    <a-tag :style="{ margin: '0' }" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
-                    <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
-                    <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
-                  </template>
+                <template #extra>
+                  <a-button-group>
+                    <a-button icon="sync" @click="manualRefresh" :loading="refreshing"></a-button>
+                    <a-popover placement="bottomRight" trigger="click" :overlay-class-name="themeSwitcher.currentTheme"> 
+                      <template #title>
+                        <div class="ant-custom-popover-title">
+                          <a-switch v-model="isRefreshEnabled" @change="toggleRefresh" size="small"></a-switch>
+                          <span>{{ i18n "pages.inbounds.autoRefresh" }}</span>
+                        </div>
+                      </template>
+                      <template #content>
+                        <a-space direction="vertical">
+                          <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span>
+                          <a-select v-model="refreshInterval"
+                              :disabled="!isRefreshEnabled"
+                              :style="{ width: '100%' }"
+                              @change="changeRefreshInterval"
+                              :dropdown-class-name="themeSwitcher.currentTheme">
+                            <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
+                          </a-select>
+                        </a-space>
+                      </template>
+                      <a-button icon="down"></a-button>
+                    </a-popover>
+                  </a-button-group>
                 </template>
-                <template slot="clients" slot-scope="text, dbInbound">
-                  <template v-if="clientCount[dbInbound.id]">
-                    <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
-                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
-                    </a-popover>
-                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
-                    </a-popover>
-                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
-                    </a-popover>
-                    <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
-                    </a-popover>
-                  </template>
-                </template>
-                <template slot="traffic" slot-scope="text, dbInbound">
-                  <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                    <template slot="content">
-                      <table cellpadding="2" width="100%">
-                        <tr>
-                          <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
-                          <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
-                        </tr>
-                        <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
-                          <td>{{ i18n "remained" }}</td>
-                          <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
-                        </tr>
-                      </table>
+                <a-space direction="vertical">
+                  <div :style="isMobile ? {} : { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }">
+                    <a-switch v-model="enableFilter"
+                        :style="isMobile ? { marginBottom: '.5rem', display: 'flex' } : { marginRight: '.5rem' }"
+                        @change="toggleFilter">
+                      <a-icon slot="checkedChildren" type="search"></a-icon>
+                      <a-icon slot="unCheckedChildren" type="filter"></a-icon>
+                    </a-switch>
+                    <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus :style="{ maxWidth: '300px' }" :size="isMobile ? 'small' : ''"></a-input>
+                    <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
+                      <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
+                      <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
+                      <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
+                      <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
+                      <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
+                    </a-radio-group>
+                  </div>
+                  <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
+                      :data-source="searchedInbounds"
+                      :scroll="isMobile ? {} : { x: 1000 }"
+                      :pagination=pagination(searchedInbounds)
+                      :expand-icon-as-cell="false"
+                      :expand-row-by-click="false"
+                      :expand-icon-column-index="0"
+                      :indent-size="0"
+                      :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
+                      :style="{ marginTop: '10px' }"
+                      :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}`, emptyText: `{{ i18n "noData" }}` }'>
+                    <template slot="action" slot-scope="text, dbInbound">
+                      <a-dropdown :trigger="['click']">
+                        <a-icon @click="e => e.preventDefault()" type="more" :style="{ fontSize: '20px', textDecoration: 'solid' }"></a-icon>
+                        <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
+                          <a-menu-item key="edit">
+                            <a-icon type="edit"></a-icon>
+                            {{ i18n "edit" }}
+                          </a-menu-item>
+                          <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
+                            <a-icon type="qrcode"></a-icon>
+                            {{ i18n "qrCode" }}
+                          </a-menu-item>
+                          <template v-if="dbInbound.isMultiUser()">
+                            <a-menu-item key="addClient">
+                              <a-icon type="user-add"></a-icon>
+                              {{ i18n "pages.client.add"}}
+                            </a-menu-item>
+                            <a-menu-item key="addBulkClient">
+                              <a-icon type="usergroup-add"></a-icon>
+                              {{ i18n "pages.client.bulk"}}
+                            </a-menu-item>
+                            <a-menu-item key="resetClients">
+                              <a-icon type="file-done"></a-icon>
+                              {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
+                            </a-menu-item>
+                            <a-menu-item key="export">
+                              <a-icon type="export"></a-icon>
+                              {{ i18n "pages.inbounds.export"}}
+                            </a-menu-item>
+                            <a-menu-item key="subs" v-if="subSettings.enable">
+                              <a-icon type="export"></a-icon>
+                              {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}
+                            </a-menu-item>
+                            <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }">
+                              <a-icon type="rest"></a-icon>
+                              {{ i18n "pages.inbounds.delDepletedClients" }}
+                            </a-menu-item>
+                          </template>
+                          <template v-else>
+                            <a-menu-item key="showInfo">
+                              <a-icon type="info-circle"></a-icon>
+                              {{ i18n "info"}}
+                            </a-menu-item>
+                          </template>
+                          <a-menu-item key="clipboard">
+                            <a-icon type="copy"></a-icon>
+                            {{ i18n "pages.inbounds.exportInbound" }}
+                          </a-menu-item>
+                          <a-menu-item key="resetTraffic">
+                            <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
+                          </a-menu-item>
+                          <a-menu-item key="clone">
+                            <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
+                          </a-menu-item>
+                          <a-menu-item key="delete">
+                            <span :style="{ color: '#FF4D4F' }">
+                              <a-icon type="delete"></a-icon> {{ i18n "delete"}}
+                            </span>
+                          </a-menu-item>
+                          <a-menu-item v-if="isMobile">
+                            <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
+                            {{ i18n "pages.inbounds.enable" }}
+                          </a-menu-item>
+                        </a-menu>
+                      </a-dropdown>
                     </template>
-                    <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
-                      [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
-                      <template v-if="dbInbound.total > 0">
-                          [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                    <template slot="protocol" slot-scope="text, dbInbound">
+                      <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
+                      <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+                        <a-tag :style="{ margin: '0' }" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
+                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
+                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
                       </template>
-                      <template v-else>
+                    </template>
+                    <template slot="clients" slot-scope="text, dbInbound">
+                      <template v-if="clientCount[dbInbound.id]">
+                        <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
+                        <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
+                        </a-popover>
+                        <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
+                        </a-popover>
+                        <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
+                        </a-popover>
+                        <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
+                        </a-popover>
+                      </template>
+                    </template>
+                    <template slot="traffic" slot-scope="text, dbInbound">
+                      <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                        <template slot="content">
+                          <table cellpadding="2" width="100%">
+                            <tr>
+                              <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
+                              <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
+                            </tr>
+                            <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
+                              <td>{{ i18n "remained" }}</td>
+                              <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                            </tr>
+                          </table>
+                        </template>
+                        <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                          [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                          <template v-if="dbInbound.total > 0">
+                              [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                          </template>
+                          <template v-else>
+                            <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                              <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                            </svg>
+                          </template>
+                        </a-tag>
+                      </a-popover>
+                    </template>
+                    <template slot="enable" slot-scope="text, dbInbound">
+                      <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
+                    </template>
+                    <template slot="expiryTime" slot-scope="text, dbInbound">
+                      <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
+                        <template slot="content" v-if="app.datepicker === 'gregorian'">
+                          [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                        </template>
+                        <template v-else slot="content">
+                          [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
+                        </template>
+                        <a-tag :style="{ minWidth: '50px' }" :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
+                          [[ remainedDays(dbInbound._expiryTime) ]]
+                        </a-tag>
+                      </a-popover>
+                      <a-tag v-else color="purple" class="infinite-tag">
                         <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
                           <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
                         </svg>
-                      </template>
-                    </a-tag>
-                  </a-popover>
-                </template>
-                <template slot="enable" slot-scope="text, dbInbound">
-                  <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
-                </template>
-                <template slot="expiryTime" slot-scope="text, dbInbound">
-                  <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
-                    <template slot="content" v-if="app.datepicker === 'gregorian'">
-                      [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                      </a-tag>
                     </template>
-                    <template v-else slot="content">
-                      [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
-                    </template>
-                    <a-tag :style="{ minWidth: '50px' }" :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
-                      [[ remainedDays(dbInbound._expiryTime) ]]
-                    </a-tag>
-                  </a-popover>
-                  <a-tag v-else color="purple" class="infinite-tag">
-                    <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                      <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-                    </svg>
-                  </a-tag>
-                </template>
-                <template slot="info" slot-scope="text, dbInbound">
-                  <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
-                    <template slot="content">
-                      <table cellpadding="2">
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.protocol" }}</td>
-                          <td>
-                            <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
-                            <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                              <a-tag :style="{ margin: '0' }" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
-                              <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
-                              <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
-                            </template>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.port" }}</td>
-                          <td><a-tag>[[ dbInbound.port ]]</a-tag></td>
-                        </tr>
-                        <tr v-if="clientCount[dbInbound.id]">
-                          <td>{{ i18n "clients" }}</td>
-                          <td>
-                            <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
-                            <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
-                            </a-popover>
-                            <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
-                            </a-popover>
-                            <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
-                            </a-popover>
-                            <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
-                            </a-popover>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.traffic" }}</td>
-                          <td>
-                            <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <table cellpadding="2" width="100%">
-                                  <tr>
-                                    <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
-                                    <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
-                                  </tr>
-                                  <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
-                                    <td>{{ i18n "remained" }}</td>
-                                    <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
-                                  </tr>
-                                </table>
-                              </template>
-                              <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
-                                  [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
-                                  <template v-if="dbInbound.total > 0">
-                                      [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                    <template slot="info" slot-scope="text, dbInbound">
+                      <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
+                        <template slot="content">
+                          <table cellpadding="2">
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.protocol" }}</td>
+                              <td>
+                                <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
+                                <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+                                  <a-tag :style="{ margin: '0' }" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
+                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
+                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
+                                </template>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.port" }}</td>
+                              <td><a-tag>[[ dbInbound.port ]]</a-tag></td>
+                            </tr>
+                            <tr v-if="clientCount[dbInbound.id]">
+                              <td>{{ i18n "clients" }}</td>
+                              <td>
+                                <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
+                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
                                   </template>
-                                <template v-else>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
+                                </a-popover>
+                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
+                                  </template>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
+                                </a-popover>
+                                <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
+                                  </template>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
+                                </a-popover>
+                                <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
+                                  </template>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
+                                </a-popover>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.traffic" }}</td>
+                              <td>
+                                <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <table cellpadding="2" width="100%">
+                                      <tr>
+                                        <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
+                                        <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
+                                      </tr>
+                                      <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
+                                        <td>{{ i18n "remained" }}</td>
+                                        <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                                      </tr>
+                                    </table>
+                                  </template>
+                                  <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                                      [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                                      <template v-if="dbInbound.total > 0">
+                                          [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                                      </template>
+                                    <template v-else>
+                                      <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                                        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                                      </svg>
+                                    </template>
+                                  </a-tag>
+                                </a-popover>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.expireDate" }}</td>
+                              <td>
+                                <a-tag :style="{ minWidth: '50px', textAlign: 'center' }" v-if="dbInbound.expiryTime > 0"
+                                  :color="dbInbound.isExpiry? 'red': 'blue'">
+                                  <template v-if="app.datepicker === 'gregorian'">
+                                    [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                                  </template>
+                                  <template v-else>
+                                    [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
+                                  </template>
+                                </a-tag>
+                                <a-tag v-else :style="{ textAlign: 'center' }" color="purple" class="infinite-tag">
                                   <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
                                     <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
                                   </svg>
-                                </template>
-                              </a-tag>
-                            </a-popover>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.expireDate" }}</td>
-                          <td>
-                            <a-tag :style="{ minWidth: '50px', textAlign: 'center' }" v-if="dbInbound.expiryTime > 0"
-                              :color="dbInbound.isExpiry? 'red': 'blue'">
-                              <template v-if="app.datepicker === 'gregorian'">
-                                [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
-                              </template>
-                              <template v-else>
-                                [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
-                              </template>
-                            </a-tag>
-                            <a-tag v-else :style="{ textAlign: 'center' }" color="purple" class="infinite-tag">
-                              <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                                <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-                              </svg>
-                            </a-tag>
-                          </td>
-                        </tr>
-                      </table>
+                                </a-tag>
+                              </td>
+                            </tr>
+                          </table>
+                        </template>
+                        <a-badge>
+                          <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
+                          <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
+                            <a-icon type="info"></a-icon>
+                          </a-button>
+                        </a-badge>
+                      </a-popover>
+                    </template>
+                    <template slot="expandedRowRender" slot-scope="record">
+                      <a-table
+                        :row-key="client => client.id"
+                        :columns="isMobile ? innerMobileColumns : innerColumns"
+                        :data-source="getInboundClients(record)"
+                        :pagination=pagination(getInboundClients(record))
+                        :style="{ margin: `-10px ${isMobile ? '2px' : '22px'} -11px` }">
+                        {{template "component/aClientTable"}}
+                      </a-table>
                     </template>
-                    <a-badge>
-                      <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
-                      <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
-                        <a-icon type="info"></a-icon>
-                      </a-button>
-                    </a-badge>
-                  </a-popover>
-                </template>
-                <template slot="expandedRowRender" slot-scope="record">
-                  <a-table
-                    :row-key="client => client.id"
-                    :columns="isMobile ? innerMobileColumns : innerColumns"
-                    :data-source="getInboundClients(record)"
-                    :pagination=pagination(getInboundClients(record))
-                    :style="{ margin: `-10px ${isMobile ? '2px' : '22px'} -11px` }">
-                    {{template "component/aClientTable"}}
                   </a-table>
-                </template>
-              </a-table>
-            </a-space>
-          </a-card>
+                </a-space>
+              </a-card> 
+            </a-col>
+          </a-row>
         </transition>
       </a-spin>
     </a-layout-content>
@@ -766,7 +775,10 @@
         data: {
             themeSwitcher,
             persianDatepicker,
-            spinning: false,
+            loadingStates: {
+              fetched: false,
+              spinning: false
+            },
             inbounds: [],
             dbInbounds: [],
             searchKey: '',
@@ -797,7 +809,7 @@
         },
         methods: {
             loading(spinning = true) {
-                this.spinning = spinning;
+                this.loadingStates.spinning = spinning;
             },
             getClientWithComment(email, inboundId) {
                 const dbInbound = this.dbInbounds.find(inbound => inbound.id === inboundId);
@@ -819,6 +831,7 @@
                 }
 
                 await this.getOnlineUsers();
+                
                 this.setInbounds(msg.obj);
                 setTimeout(() => {
                     this.refreshing = false;
@@ -870,6 +883,9 @@
                         this.clientCount[inbound.id] = this.getClientCounts(inbound, to_inbound);
                     }
                 }
+                if (!this.loadingStates.fetched) {
+                    this.loadingStates.fetched = true
+                }
                 if(this.enableFilter){
                     this.filterInbounds();
                 } else {
@@ -1541,9 +1557,9 @@
             },
             async manualRefresh() {
                 if (!this.refreshing) {
-                    this.spinning = true;
+                    this.loadingStates.spinning = true;
                     await this.getDBInbounds();
-                    this.spinning = false;
+                    this.loadingStates.spinning = false;
                 }
             },
             pagination(obj){
diff --git a/web/html/index.html b/web/html/index.html
index 61e3947f..db678cd6 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -4,15 +4,6 @@
     .ant-layout-content {
       margin: 24px 16px;
     }
-    .ant-card-hoverable {
-      margin-inline: 0.3rem;
-    }
-    .ant-alert-error {
-      margin-inline: 0.3rem;
-    }
-  }
-  .ant-col-sm-24 {
-    margin-top: 10px;
   }
   .ant-card-dark h2 {
     color: var(--dark-color-text-primary);
@@ -84,9 +75,9 @@
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
-      <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
+      <a-spin :spinning="loadingStates.spinning" :delay="200" :tip="loadingTip">
         <transition name="list" appear>
-          <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
             message='{{ i18n "secAlertTitle" }}'
             color="red"
             description='{{ i18n "secAlertSsl" }}'
@@ -95,15 +86,15 @@
         </transition>
         <transition name="list" appear>
           <template>
-            <a-row v-if="!status.isLoaded">
+            <a-row v-if="!loadingStates.fetched">
               <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
                 <a-spin tip='{{ i18n "loading" }}'></a-spin>
               </a-card>
             </a-row>
-            <a-row v-else>
-              <a-row>
+            <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+              <a-col>
                 <a-card hoverable>
-                  <a-row>
+                  <a-row :gutter="[0, isMobile ? 16 : 0]">
                     <a-col :sm="24" :md="12">
                       <a-row>
                         <a-col :span="12" :style="{ textAlign: 'center' }">
@@ -153,7 +144,7 @@
                     </a-col>
                   </a-row>
                 </a-card>
-              </a-row>
+              </a-col>
               <a-col :sm="24" :lg="12">
                 <a-card hoverable>
                   <template #title>
@@ -488,7 +479,7 @@
     }
 
     class Status {
-        constructor(data, isLoaded = false) {
+        constructor(data) {
             this.cpu = new CurTotal(0, 0);
             this.cpuCores = 0;
             this.logicalPro = 0;
@@ -512,7 +503,6 @@
               return;
             }
 
-            this.isLoaded = isLoaded;
             this.cpu = new CurTotal(data.cpu, 100);
             this.cpuCores = data.cpuCores;
             this.logicalPro = data.logicalPro;
@@ -632,32 +622,39 @@
         mixins: [MediaQueryMixin],
         data: {
             themeSwitcher,
+            loadingStates: {
+              fetched: false,
+              spinning: false
+            },
             status: new Status(),
             versionModal,
             logModal,
             backupModal,
-            spinning: false,
             loadingTip: '{{ i18n "loading"}}',
             showAlert: false,
             showIp: false
         },
         methods: {
             loading(spinning, tip = '{{ i18n "loading"}}') {
-                this.spinning = spinning;
+                this.loadingStates.spinning = spinning;
                 this.loadingTip = tip;
             },
             async getStatus() {
                 try {
                     const msg = await HttpUtil.post('/server/status');
                     if (msg.success) {
+                        if (!this.loadingStates.fetched) {
+                            this.loadingStates.fetched = true;
+                        }
+
                         this.setStatus(msg.obj, true);
                     }
                 } catch (e) {
                     console.error("Failed to get status:", e);
                 }
             },
-            setStatus(data, isLoaded = false) {
-              this.status = new Status(data, isLoaded);
+            setStatus(data) {
+                this.status = new Status(data);
             },
             async openSelectV2rayVersion() {
                 this.loading(true);
diff --git a/web/html/settings.html b/web/html/settings.html
index 18e0d6a8..840778f5 100644
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -65,9 +65,9 @@
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
-      <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+      <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
-          <a-alert type="error" v-if="confAlerts.length>0" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="confAlerts.length>0 && loadingStates.fetched" :style="{ marginBottom: '10px' }"
               message='{{ i18n "secAlertTitle" }}'
               color="red"
               show-icon closable>
@@ -77,46 +77,79 @@
             </template>
           </a-alert>
         </transition>
-        <a-space direction="vertical">
-          <a-card hoverable :style="{ marginBottom: '.5rem', overflowX: 'hidden' }">
-            <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
-              <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
-                <a-space direction="horizontal">
-                  <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
-                  <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
-                </a-space>
+        <transition name="list" appear>
+          <template>
+            <a-row v-if="!loadingStates.fetched">
+              <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+                <a-spin tip='{{ i18n "loading" }}'></a-spin>
+              </a-card>
+            </a-row>
+            <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+              <a-col>
+                <a-card hoverable>
+                  <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
+                    <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
+                      <a-space direction="horizontal">
+                        <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
+                        <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
+                      </a-space>
+                    </a-col>
+                    <a-col :xs="24" :sm="14">
+                      <template>
+                        <div>
+                          <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                          <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
+                            message='{{ i18n "pages.settings.infoDesc" }}'
+                            show-icon>
+                          </a-alert>
+                        </div>
+                      </template>
+                    </a-col>
+                  </a-row>
+                </a-card>
               </a-col>
-              <a-col :xs="24" :sm="14">
-                <template>
-                  <div>
-                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                    <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
-                      message='{{ i18n "pages.settings.infoDesc" }}'
-                      show-icon>
-                    </a-alert>
-                  </div>
-                </template>
+              <a-col>
+                <a-tabs default-active-key="1">
+                  <a-tab-pane key="1" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="setting"></a-icon>
+                      <span>{{ i18n "pages.settings.panelSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/general" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="2" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="safety"></a-icon>
+                      <span>{{ i18n "pages.settings.securitySettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/security" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="3" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="message"></a-icon>
+                      <span>{{ i18n "pages.settings.TGBotSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/telegram" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="4" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="cloud-server"></a-icon>
+                      <span>{{ i18n "pages.settings.subSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/subscription/general" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="5" v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="code"></a-icon>
+                      <span>{{ i18n "pages.settings.subSettings" }} (JSON)</span>
+                    </template>
+                    {{ template "settings/panel/subscription/json" . }}
+                  </a-tab-pane>
+                </a-tabs>
               </a-col>
             </a-row>
-          </a-card>
-          <a-tabs default-active-key="1">
-            <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/general" . }}
-            </a-tab-pane>
-            <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/security" . }}
-            </a-tab-pane>
-            <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/telegram" . }}
-            </a-tab-pane>
-            <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/subscription/general" . }}
-            </a-tab-pane>
-            <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/subscription/json" . }}
-            </a-tab-pane>
-          </a-tabs>
-        </a-space>
+          </template>
+        </transition>
       </a-spin>
     </a-layout-content>
   </a-layout>
@@ -132,10 +165,14 @@
 <script>
   const app = new Vue({
     delimiters: ['[[', ']]'],
+    mixins: [MediaQueryMixin],
     el: '#app',
     data: {
       themeSwitcher,
-      spinning: false,
+      loadingStates: {
+        fetched: false,
+        spinning: false
+      },
       oldAllSetting: new AllSetting(),
       allSetting: new AllSetting(),
       saveBtnDisable: true,
@@ -248,13 +285,16 @@
     },
     methods: {
       loading(spinning = true) {
-        this.spinning = spinning;
+        this.loadingStates.spinning = spinning;
       },
       async getAllSetting() {
-        this.loading(true);
         const msg = await HttpUtil.post("/panel/setting/all");
-        this.loading(false);
+
         if (msg.success) {
+          if (!this.loadingStates.fetched) {
+            this.loadingStates.fetched = true
+          }
+
           this.oldAllSetting = new AllSetting(msg.obj);
           this.allSetting = new AllSetting(msg.obj);
           app.changeRemarkSample();
diff --git a/web/html/settings/xray/advanced.html b/web/html/settings/xray/advanced.html
index b5f61b34..28e31871 100644
--- a/web/html/settings/xray/advanced.html
+++ b/web/html/settings/xray/advanced.html
@@ -1,5 +1,5 @@
 {{define "settings/xray/advanced"}}
-<a-space direction="vertical" size="small">
+<a-space direction="vertical" size="small" :style="{ marginTop: '20px' }">
     <a-list-item-meta title='{{ i18n "pages.xray.Template"}}'
         description='{{ i18n "pages.xray.TemplateDesc"}}'></a-list-item-meta>
     <a-radio-group v-model="advSettings" @change="changeCode" button-style="solid" :style="{ margin: '10px 0' }"
diff --git a/web/html/xray.html b/web/html/xray.html
index 8a60dafe..b6e40858 100644
--- a/web/html/xray.html
+++ b/web/html/xray.html
@@ -9,102 +9,148 @@
       margin: 24px 16px;
     }
   }
+
   @media (max-width: 768px) {
     .ant-tabs-nav .ant-tabs-tab {
       margin: 0;
       padding: 12px .5rem;
     }
+
     .ant-table-thead>tr>th,
     .ant-table-tbody>tr>td {
       padding: 10px 0px;
     }
   }
+
   .ant-tabs-bar {
     margin: 0;
   }
+
   .ant-list-item {
     display: block;
   }
+
   .ant-list-item>li {
     padding: 10px 20px !important;
   }
+
   .ant-collapse-content-box .ant-alert {
     margin-block-end: 12px;
-}
+  }
 </style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
 <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-<a-sidebar></a-sidebar>
-<a-layout id="content-layout">
+  <a-sidebar></a-sidebar>
+  <a-layout id="content-layout">
     <a-layout-content>
-    <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+      <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
-        <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
-            message='{{ i18n "secAlertTitle" }}'
-            color="red"
-            description='{{ i18n "secAlertSsl" }}'
-            show-icon closable>
-        </a-alert>
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }" message='{{ i18n "secAlertTitle" }}'
+            color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable>
+          </a-alert>
         </transition>
-        <a-space direction="vertical">
-        <a-card hoverable :style="{ marginBottom: '.5rem' }">
-            <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
-            <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
-                <a-space direction="horizontal">
-                <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ i18n "pages.xray.save" }}</a-button>
-                <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">{{ i18n "pages.xray.restart" }}</a-button>
-                <a-popover v-if="restartResult"
-                    :overlay-class-name="themeSwitcher.currentTheme">
-                    <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
-                    <template slot="content">
-                    <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span>
+        <transition name="list" appear>
+          <a-row v-if="!loadingStates.fetched">
+            <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+              <a-spin tip='{{ i18n "loading" }}'></a-spin>
+            </a-card>
+          </a-row>
+          <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+            <a-col>
+              <a-card hoverable>
+                <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
+                  <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
+                    <a-space direction="horizontal">
+                      <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">
+                        {{ i18n "pages.xray.save" }}
+                      </a-button>
+                      <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">
+                        {{ i18n "pages.xray.restart" }}
+                      </a-button>
+                      <a-popover v-if="restartResult" :overlay-class-name="themeSwitcher.currentTheme">
+                        <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
+                        <template slot="content">
+                          <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span>
+                        </template>
+                        <a-icon type="question-circle"></a-icon>
+                      </a-popover>
+                    </a-space>
+                  </a-col>
+                  <a-col :xs="24" :sm="14">
+                    <template>
+                      <div>
+                        <a-back-top :target="() => document.getElementById('content-layout')"
+                          visibility-height="200"></a-back-top>
+                        <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
+                          message='{{ i18n "pages.settings.infoDesc" }}' show-icon>
+                        </a-alert>
+                      </div>
                     </template>
-                    <a-icon type="question-circle"></a-icon>
-                </a-popover>
-                </a-space>
+                  </a-col>
+                </a-row>
+              </a-card>
             </a-col>
-            <a-col :xs="24" :sm="14">
-                <template>
-                <div>
-                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                    <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }" message='{{ i18n "pages.settings.infoDesc" }}' show-icon>
-                    </a-alert>
-                </div>
-                </template>
+            <a-col>
+              <a-tabs default-active-key="tpl-basic" @change="(activeKey) => { this.changePage(activeKey); }"
+                :class="themeSwitcher.currentTheme">
+                <a-tab-pane key="tpl-basic" :style="{ paddingTop: '20px' }">
+                  <template #tab>
+                    <a-icon type="setting"></a-icon>
+                    <span>{{ i18n "pages.xray.basicTemplate"}}</span>
+                  </template>
+                  {{ template "settings/xray/basics" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-routing" :style="{ paddingTop: '20px' }">
+                  <template #tab>
+                    <a-icon type="swap"></a-icon>
+                    <span>{{ i18n "pages.xray.Routings"}}</span>
+                  </template>
+                  {{ template "settings/xray/routing" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-outbound" force-render="true">
+                  <template #tab>
+                    <a-icon type="upload"></a-icon>
+                    <span>{{ i18n "pages.xray.Outbounds"}}</span>
+                  </template>
+                  {{ template "settings/xray/outbounds" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-reverse" :style="{ paddingTop: '20px' }" force-render="true">
+                  <template #tab>
+                    <a-icon type="import"></a-icon>
+                    <span>{{ i18n "pages.xray.outbound.reverse"}}</span>
+                  </template>
+                  {{ template "settings/xray/reverse" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-balancer" :style="{ paddingTop: '20px' }" force-render="true">
+                  <template #tab>
+                    <a-icon type="cluster"></a-icon>
+                    <span>{{ i18n "pages.xray.Balancers"}}</span>
+                  </template>
+                  {{ template "settings/xray/balancers" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-dns" :style="{ paddingTop: '20px' }" force-render="true">
+                  <template #tab>
+                    <a-icon type="database"></a-icon>
+                    <span>DNS</span>
+                  </template>
+                  {{ template "settings/xray/dns" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-advanced" force-render="true">
+                  <template #tab>
+                    <a-icon type="code"></a-icon>
+                    <span>{{ i18n "pages.xray.advancedTemplate"}}</span>
+                  </template>
+                  {{ template "settings/xray/advanced" . }}
+                </a-tab-pane>
+              </a-tabs>
             </a-col>
-            </a-row>
-        </a-card>
-        <a-tabs class="ant-card-dark-box-nohover" default-active-key="1"
-            @change="(activeKey) => { this.changePage(activeKey); }"
-            :class="themeSwitcher.currentTheme">
-            <a-tab-pane key="tpl-basic" tab='{{ i18n "pages.xray.basicTemplate"}}' :style="{ paddingTop: '20px' }">
-            {{ template "settings/xray/basics" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-routing" tab='{{ i18n "pages.xray.Routings"}}' :style="{ paddingTop: '20px' }">
-            {{ template "settings/xray/routing" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-outbound" tab='{{ i18n "pages.xray.Outbounds"}}' force-render="true">
-            {{ template "settings/xray/outbounds" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-reverse" tab='{{ i18n "pages.xray.outbound.reverse"}}' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/reverse" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-balancer" tab='{{ i18n "pages.xray.Balancers"}}' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/balancers" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-dns" tab='DNS' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/dns" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-advanced" tab='{{ i18n "pages.xray.advancedTemplate"}}' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/advanced" . }}
-            </a-tab-pane>
-        </a-tabs>
-        </a-space>
-    </a-spin>
+          </a-row>
+        </transition>
+      </a-spin>
     </a-layout-content>
-</a-layout>
+  </a-layout>
 </a-layout>
 {{template "page/body_scripts" .}}
 <script src="{{ .base_path }}assets/js/model/outbound.js?{{ .cur_ver }}"></script>
@@ -131,1282 +177,1296 @@
 {{template "modals/fakednsModal"}}
 {{template "modals/warpModal"}}
 <script>
-    const rulesColumns = [
-        { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.rules.source"}}', children: [
-            { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true },
-            { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true } ]},
-        { title: '{{ i18n "pages.inbounds.network"}}', children: [
-            { title: 'L4', dataIndex: 'network', align: 'center', width: 10 },
-            { title: '{{ i18n "protocol" }}', dataIndex: 'protocol', align: 'center', width: 15, ellipsis: true },
-            { title: 'Attrs', dataIndex: 'attrs', align: 'center', width: 10, ellipsis: true } ]}, 
-        { title: '{{ i18n "pages.xray.rules.dest"}}', children: [
-            { title: 'IP', dataIndex: 'ip', align: 'center', width: 20, ellipsis: true },
-            { title: '{{ i18n "pages.xray.outbound.domain" }}', dataIndex: 'domain', align: 'center', width: 20, ellipsis: true },
-            { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]},
-        { title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
-            { title: '{{ i18n "pages.xray.outbound.tag" }}', dataIndex: 'inboundTag', align: 'center', width: 15, ellipsis: true },
-            { title: '{{ i18n "pages.inbounds.client" }}', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
-        { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 17 },
-        { title: '{{ i18n "pages.xray.rules.balancer"}}', dataIndex: 'balancerTag', align: 'center', width: 15 },
-    ];
+  const rulesColumns = [
+    { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
+    {
+      title: '{{ i18n "pages.xray.rules.source"}}', children: [
+        { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true },
+        { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true }]
+    },
+    {
+      title: '{{ i18n "pages.inbounds.network"}}', children: [
+        { title: 'L4', dataIndex: 'network', align: 'center', width: 10 },
+        { title: '{{ i18n "protocol" }}', dataIndex: 'protocol', align: 'center', width: 15, ellipsis: true },
+        { title: 'Attrs', dataIndex: 'attrs', align: 'center', width: 10, ellipsis: true }]
+    },
+    {
+      title: '{{ i18n "pages.xray.rules.dest"}}', children: [
+        { title: 'IP', dataIndex: 'ip', align: 'center', width: 20, ellipsis: true },
+        { title: '{{ i18n "pages.xray.outbound.domain" }}', dataIndex: 'domain', align: 'center', width: 20, ellipsis: true },
+        { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]
+    },
+    {
+      title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
+        { title: '{{ i18n "pages.xray.outbound.tag" }}', dataIndex: 'inboundTag', align: 'center', width: 15, ellipsis: true },
+        { title: '{{ i18n "pages.inbounds.client" }}', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]
+    },
+    { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 17 },
+    { title: '{{ i18n "pages.xray.rules.balancer"}}', dataIndex: 'balancerTag', align: 'center', width: 15 },
+  ];
 
-    const rulesMobileColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.rules.inbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'inbound' } },
-        { title: '{{ i18n "pages.xray.rules.outbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'outbound' } },
-        { title: '{{ i18n "pages.xray.rules.info"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'info' } },
-    ];
+  const rulesMobileColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.rules.inbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'inbound' } },
+    { title: '{{ i18n "pages.xray.rules.outbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'outbound' } },
+    { title: '{{ i18n "pages.xray.rules.info"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'info' } },
+  ];
 
-    const outboundColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
-        { title: '{{ i18n "protocol"}}', align: 'center', width: 50, scopedSlots: { customRender: 'protocol' }  },
-        { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}', align: 'center', width: 50, scopedSlots: { customRender: 'traffic' } },
-    ];
+  const outboundColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
+    { title: '{{ i18n "protocol"}}', align: 'center', width: 50, scopedSlots: { customRender: 'protocol' } },
+    { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
+    { title: '{{ i18n "pages.inbounds.traffic" }}', align: 'center', width: 50, scopedSlots: { customRender: 'traffic' } },
+  ];
 
-    const reverseColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.outbound.type"}}', dataIndex: 'type', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.outbound.domain"}}', dataIndex: 'domain', align: 'center', width: 50 },
-    ];
+  const reverseColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.outbound.type"}}', dataIndex: 'type', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.outbound.domain"}}', dataIndex: 'domain', align: 'center', width: 50 },
+  ];
 
-    const balancerColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.balancer.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.balancer.balancerStrategy"}}', align: 'center', width: 50, scopedSlots: { customRender: 'strategy' }},
-        { title: '{{ i18n "pages.xray.balancer.balancerSelectors"}}', align: 'center', width: 100, scopedSlots: { customRender: 'selector' }},
-    ];
+  const balancerColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.balancer.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.balancer.balancerStrategy"}}', align: 'center', width: 50, scopedSlots: { customRender: 'strategy' } },
+    { title: '{{ i18n "pages.xray.balancer.balancerSelectors"}}', align: 'center', width: 100, scopedSlots: { customRender: 'selector' } },
+  ];
 
-    const dnsColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
-        { title: '{{ i18n "pages.xray.dns.domains"}}', align: 'center', width: 50, scopedSlots: { customRender: 'domain' } },
-        { title: '{{ i18n "pages.xray.dns.expectIPs"}}', align: 'center', width: 50, scopedSlots: { customRender: 'expectIPs' } },
-    ];
+  const dnsColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
+    { title: '{{ i18n "pages.xray.dns.domains"}}', align: 'center', width: 50, scopedSlots: { customRender: 'domain' } },
+    { title: '{{ i18n "pages.xray.dns.expectIPs"}}', align: 'center', width: 50, scopedSlots: { customRender: 'expectIPs' } },
+  ];
 
-    const fakednsColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.fakedns.ipPool"}}', dataIndex: 'ipPool', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.fakedns.poolSize"}}', dataIndex: 'poolSize', align: 'center', width: 50 },
-    ];
+  const fakednsColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.fakedns.ipPool"}}', dataIndex: 'ipPool', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.fakedns.poolSize"}}', dataIndex: 'poolSize', align: 'center', width: 50 },
+  ];
 
-    const app = new Vue({
-        delimiters: ['[[', ']]'],
-        mixins: [MediaQueryMixin],
-        el: '#app',
-        data: {
-            themeSwitcher,
-            isDarkTheme: themeSwitcher.isDarkTheme,
-            spinning: false,
-            oldXraySetting: '',
-            xraySetting: '',
-            inboundTags: [],
-            outboundsTraffic: [],
-            saveBtnDisable: true,
-            refreshing: false,
-            restartResult: '',
-            showAlert: false,
-            advSettings: 'xraySetting',
-            obsSettings: '',
-            cm: null,
-            cmOptions: {
-                lineNumbers: true,
-                mode: "application/json",
-                lint: true,
-                styleActiveLine: true,
-                matchBrackets: true,
-                theme: "xq",
-                autoCloseTags: true,
-                lineWrapping: true,
-                indentUnit: 2,
-                indentWithTabs: true,
-                smartIndent: true,
-                tabSize: 2,
-                lineWiseCopyCut: false,
-                foldGutter: true,
-                gutters: [
-                    "CodeMirror-lint-markers",
-                    "CodeMirror-linenumbers",
-                    "CodeMirror-foldgutter",
-                ],
-            },
-            ipv4Settings: {
-                tag: "IPv4",
-                protocol: "freedom",
-                settings: {
-                    domainStrategy: "UseIPv4"
-                }
-            },
-            directSettings: {
-                tag: "direct",
-                protocol: "freedom"
-            },
-            routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"],
-            log: {
-                loglevel: ["none", "debug", "info", "warning", "error"],
-                access: ["none", "./access.log"],
-                error: ["none", "./error.log"],
-                dnsLog: false,
-                maskAddress: ["quarter", "half", "full"],
-            },
-            settingsData: {
-                protocols: {
-                    bittorrent: ["bittorrent"],
-                },
-                IPsOptions: [
-                    { label: 'Private IPs', value: 'geoip:private' },
-                    { label: '🇮🇷 Iran', value: 'ext:geoip_IR.dat:ir' },
-                    { label: '🇨🇳 China', value: 'geoip:cn' },
-                    { label: '🇷🇺 Russia', value: 'ext:geoip_RU.dat:ru' },
-                    { label: '🇻🇳 Vietnam', value: 'geoip:vn' },
-                    { label: '🇪🇸 Spain', value: 'geoip:es' },
-                    { label: '🇮🇩 Indonesia', value: 'geoip:id' },
-                    { label: '🇺🇦 Ukraine', value: 'geoip:ua' },
-                    { label: '🇹🇷 Türkiye', value: 'geoip:tr' },
-                    { label: '🇧🇷 Brazil', value: 'geoip:br' },
-                ],
-                DomainsOptions: [
-                    { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
-                    { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
-                    { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
-                    { label: '🇨🇳 China', value: 'geosite:cn' },
-                    { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
-                    { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
-                    { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru$' },
-                    { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
-                    { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
-                    { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
-                ],
-                BlockDomainsOptions: [
-                    { label: 'Ads All', value: 'geosite:category-ads-all' },
-                    { label: 'Ads IR 🇮🇷', value: 'ext:geosite_IR.dat:category-ads-all' },
-                    { label: 'Ads RU 🇷🇺', value: 'ext:geosite_RU.dat:category-ads-all' },
-                    { label: 'Malware 🇮🇷', value: 'ext:geosite_IR.dat:malware' },
-                    { label: 'Phishing 🇮🇷', value: 'ext:geosite_IR.dat:phishing' },
-                    { label: 'Cryptominers 🇮🇷', value: 'ext:geosite_IR.dat:cryptominers' },
-                    { label: 'Adult +18', value: 'geosite:category-porn' },
-                    { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
-                    { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
-                    { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
-                    { label: '🇨🇳 China', value: 'geosite:cn' },
-                    { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
-                    { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
-                    { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru' },
-                    { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
-                    { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
-                    { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
-                ],
-                ServicesOptions: [
-                    { label: 'Apple', value: 'geosite:apple' },
-                    { label: 'Meta', value: 'geosite:meta' },
-                    { label: 'Google', value: 'geosite:google' },
-                    { label: 'OpenAI', value: 'geosite:openai' },
-                    { label: 'Spotify', value: 'geosite:spotify' },
-                    { label: 'Netflix', value: 'geosite:netflix' },
-                    { label: 'Reddit', value: 'geosite:reddit' },
-                    { label: 'Speedtest', value: 'geosite:speedtest' },
-                ]
-            },
-            defaultObservatory: {
-                subjectSelector: [],
-                probeURL: "http://www.google.com/gen_204",
-                probeInterval: "10m",
-                enableConcurrency: true
-            },
-            defaultBurstObservatory: {
-                subjectSelector: [],
-                pingConfig: {
-                    destination: "http://www.google.com/gen_204",
-                    interval: "30m",
-                    connectivity: "http://connectivitycheck.platform.hicloud.com/generate_204",
-                    timeout: "10s",
-                    sampling: 2
-                }
-            }
+  const app = new Vue({
+    delimiters: ['[[', ']]'],
+    mixins: [MediaQueryMixin],
+    el: '#app',
+    data: {
+      themeSwitcher,
+      isDarkTheme: themeSwitcher.isDarkTheme,
+      loadingStates: {
+        fetched: false,
+        spinning: false
+      },
+      oldXraySetting: '',
+      xraySetting: '',
+      inboundTags: [],
+      outboundsTraffic: [],
+      saveBtnDisable: true,
+      refreshing: false,
+      restartResult: '',
+      showAlert: false,
+      advSettings: 'xraySetting',
+      obsSettings: '',
+      cm: null,
+      cmOptions: {
+        lineNumbers: true,
+        mode: "application/json",
+        lint: true,
+        styleActiveLine: true,
+        matchBrackets: true,
+        theme: "xq",
+        autoCloseTags: true,
+        lineWrapping: true,
+        indentUnit: 2,
+        indentWithTabs: true,
+        smartIndent: true,
+        tabSize: 2,
+        lineWiseCopyCut: false,
+        foldGutter: true,
+        gutters: [
+          "CodeMirror-lint-markers",
+          "CodeMirror-linenumbers",
+          "CodeMirror-foldgutter",
+        ],
+      },
+      ipv4Settings: {
+        tag: "IPv4",
+        protocol: "freedom",
+        settings: {
+          domainStrategy: "UseIPv4"
+        }
+      },
+      directSettings: {
+        tag: "direct",
+        protocol: "freedom"
+      },
+      routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"],
+      log: {
+        loglevel: ["none", "debug", "info", "warning", "error"],
+        access: ["none", "./access.log"],
+        error: ["none", "./error.log"],
+        dnsLog: false,
+        maskAddress: ["quarter", "half", "full"],
+      },
+      settingsData: {
+        protocols: {
+          bittorrent: ["bittorrent"],
         },
-        methods: {
-            loading(spinning = true) {
-                this.spinning = spinning;
-            },
-            async getOutboundsTraffic() {
-                const msg = await HttpUtil.get("/panel/xray/getOutboundsTraffic");
-                if (msg.success) {
-                    this.outboundsTraffic = msg.obj;
-                }
-            },
-            async getXraySetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/xray/");
-                this.loading(false);
-                if (msg.success) {
-                    result = JSON.parse(msg.obj);
-                    xs = JSON.stringify(result.xraySetting, null, 2);
-                    this.oldXraySetting = xs;
-                    this.xraySetting = xs;
-                    this.inboundTags = result.inboundTags;
-                    this.saveBtnDisable = true;
-                }
-            },
-            async updateXraySetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/xray/update", {xraySetting : this.xraySetting});
-                this.loading(false);
-                if (msg.success) {
-                    await this.getXraySetting();
-                }
-            },
-            async restartXray() {
-                this.loading(true);
-                const msg = await HttpUtil.post("server/restartXrayService");
-                this.loading(false);
-                if (msg.success) {
-                    await PromiseUtil.sleep(500);
-                    await this.getXrayResult();
-                }
-                this.loading(false);
-            },
-            async getXrayResult() {
-                const msg = await HttpUtil.get("/panel/xray/getXrayResult");
-                if (msg.success) {
-                    this.restartResult=msg.obj;
-                    if(msg.obj.length > 1) Vue.prototype.$message.error(msg.obj);
-                }
-            },
-            async resetXrayConfigToDefault() {
-                this.loading(true);
-                const msg = await HttpUtil.get("/panel/setting/getDefaultJsonConfig");
-                this.loading(false);
-                if (msg.success) {
-                    this.templateSettings = JSON.parse(JSON.stringify(msg.obj, null, 2));
-                    this.saveBtnDisable = true;
-                }
-            },
-            changePage(pageKey) {
-                if(pageKey == 'tpl-advanced') this.changeCode();
-                if(pageKey == 'tpl-balancer') this.changeObsCode();
-            },
-            syncRulesWithOutbound(tag, setting) {
-                const newTemplateSettings = this.templateSettings;
-                const haveRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === tag);
-                const outboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.tag === tag);
-                if (!haveRules && outboundIndex > 0) {
-                    newTemplateSettings.outbounds.splice(outboundIndex);
-                }
-                if (haveRules && outboundIndex < 0) {
-                    newTemplateSettings.outbounds.push(setting);
-                }
-                this.templateSettings = newTemplateSettings;
-            },
-            templateRuleGetter(routeSettings) {
-                const { property, outboundTag } = routeSettings;
-                let result = [];
-                if (this.templateSettings != null) {
-                    this.templateSettings.routing.rules.forEach(
-                        (routingRule) => {
-                            if (
-                                routingRule.hasOwnProperty(property) &&
-                                routingRule.hasOwnProperty("outboundTag") &&
-                                routingRule.outboundTag === outboundTag
-                            ) {
-                                result.push(...routingRule[property]);
-                            }
-                        }
-                    );
-                }
-                return result;
-            },
-            templateRuleSetter(routeSettings) {
-                const { data, property, outboundTag } = routeSettings;
-                const oldTemplateSettings = this.templateSettings;
-                const newTemplateSettings = oldTemplateSettings;
-                currentProperty = this.templateRuleGetter({ outboundTag, property })
-                if (currentProperty.length == 0) {
-                    const propertyRule = {
-                        type: "field",
-                        outboundTag,
-                        [property]: data
-                    };
-                    newTemplateSettings.routing.rules.push(propertyRule);
-                }
-                else {
-                    const newRules = [];
-                    insertedOnce = false;
-                    newTemplateSettings.routing.rules.forEach(
-                        (routingRule) => {
-                            if (
-                                routingRule.hasOwnProperty(property) &&
-                                routingRule.hasOwnProperty("outboundTag") &&
-                                routingRule.outboundTag === outboundTag
-                            ) {
-                                if (!insertedOnce && data.length > 0) {
-                                    insertedOnce = true;
-                                    routingRule[property] = data;
-                                    newRules.push(routingRule);
-                                }
-                            }
-                            else {
-                                newRules.push(routingRule);
-                            }
-                        }
-                    );
-                    newTemplateSettings.routing.rules = newRules;
-                }
-                this.templateSettings = newTemplateSettings;
-            },
-            changeCode() {
-                if(this.cm != null) {
-                    this.cm.toTextArea();
-                }
-                textAreaObj = document.getElementById('xraySetting');
-                textAreaObj.value = this[this.advSettings];
-                this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
-                this.cm.on('change',editor => {
-                    value = editor.getValue();
-                    if (this.isJsonString(value)) {
-                        this[this.advSettings] = value;
-                    }
-                });
-            },
-            changeObsCode() {
-                if(this.cm != null) {
-                    this.cm.toTextArea();
-                }
-                if (this.obsSettings == ''){
-                    this.cm = null;
-                    return
-                }
-                textAreaObj = document.getElementById('obsSetting');
-                textAreaObj.value = this[this.obsSettings];
-                this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
-                this.cm.on('change',editor => {
-                    value = editor.getValue();
-                    if(this.isJsonString(value)){
-                        this[this.obsSettings] = value;
-                    }
-                });
-            },
-            isJsonString(str) {
-                try {
-                    JSON.parse(str);
-                } catch (e) {
-                    return false;
-                }
-                return true;
-            },
-            findOutboundTraffic(o) {
-                for (const otraffic of this.outboundsTraffic) {
-                    if (otraffic.tag == o.tag) {
-                        return SizeFormatter.sizeFormat(otraffic.up) + ' / ' + SizeFormatter.sizeFormat(otraffic.down);
-                    }
-                }
-                return SizeFormatter.sizeFormat(0) + ' / ' + SizeFormatter.sizeFormat(0);
-            },
-            findOutboundAddress(o) {
-                serverObj = null;
-                switch(o.protocol){
-                    case Protocols.VMess:
-                    case Protocols.VLESS:
-                        serverObj = o.settings.vnext;
-                        break;
-                    case Protocols.HTTP:
-                    case Protocols.Socks:
-                    case Protocols.Shadowsocks:
-                    case Protocols.Trojan:
-                        serverObj = o.settings.servers;
-                        break;
-                    case Protocols.DNS:
-                        return [o.settings?.address + ':' + o.settings?.port];
-                        case Protocols.Wireguard:
-                        return o.settings.peers.map(peer => peer.endpoint);
-                    default:
-                        return null;
-                }
-                return serverObj ? serverObj.map(obj => obj.address + ':' + obj.port) : null;
-            },
-            addOutbound(){
-                outModal.show({
-                    title: '{{ i18n "pages.xray.outbound.addOutbound"}}',
-                    okText: '{{ i18n "pages.xray.outbound.addOutbound" }}',
-                    confirm: (outbound) => {
-                        outModal.loading();
-                        if(outbound.tag.length > 0){
-                            this.templateSettings.outbounds.push(outbound);
-                            this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
-                        }
-                        outModal.close();
-                    },
-                    isEdit: false,
-                    tags: this.templateSettings.outbounds.map(obj => obj.tag)
-                });
-            },
-            editOutbound(index){
-                outModal.show({
-                    title: '{{ i18n "pages.xray.outbound.editOutbound"}} ' + (index+1),
-                    outbound: app.templateSettings.outbounds[index],
-                    confirm: (outbound) => {
-                        outModal.loading();
-                        this.templateSettings.outbounds[index] = outbound;
-                        this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
-                        outModal.close();
-                    },
-                    isEdit: true,
-                    tags: this.outboundData.filter((o) => o.key != index ).map(obj => obj.tag)
-                });
-            },
-            deleteOutbound(index){
-                outbounds = this.templateSettings.outbounds;
-                outbounds.splice(index,1);
-                this.outboundSettings = JSON.stringify(outbounds);
-            },
-            setFirstOutbound(index){
-                outbounds = this.templateSettings.outbounds;
-                outbounds.splice(0, 0, outbounds.splice(index, 1)[0]);
-                this.outboundSettings = JSON.stringify(outbounds);
-            },
-            addReverse(){
-                reverseModal.show({
-                    title: '{{ i18n "pages.xray.outbound.addReverse"}}',
-                    okText: '{{ i18n "pages.xray.outbound.addReverse" }}',
-                    confirm: (reverse, rules) => {
-                        reverseModal.loading();
-                        if(reverse.tag.length > 0){
-                            newTemplateSettings = this.templateSettings;
-                            if(newTemplateSettings.reverse == undefined) newTemplateSettings.reverse = {};
-                            if(newTemplateSettings.reverse[reverse.type+'s']  == undefined) newTemplateSettings.reverse[reverse.type+'s'] = [];
-                            newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
-                            this.templateSettings = newTemplateSettings;
+        IPsOptions: [
+          { label: 'Private IPs', value: 'geoip:private' },
+          { label: '🇮🇷 Iran', value: 'ext:geoip_IR.dat:ir' },
+          { label: '🇨🇳 China', value: 'geoip:cn' },
+          { label: '🇷🇺 Russia', value: 'ext:geoip_RU.dat:ru' },
+          { label: '🇻🇳 Vietnam', value: 'geoip:vn' },
+          { label: '🇪🇸 Spain', value: 'geoip:es' },
+          { label: '🇮🇩 Indonesia', value: 'geoip:id' },
+          { label: '🇺🇦 Ukraine', value: 'geoip:ua' },
+          { label: '🇹🇷 Türkiye', value: 'geoip:tr' },
+          { label: '🇧🇷 Brazil', value: 'geoip:br' },
+        ],
+        DomainsOptions: [
+          { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
+          { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
+          { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
+          { label: '🇨🇳 China', value: 'geosite:cn' },
+          { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
+          { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
+          { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru$' },
+          { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
+          { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
+          { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
+        ],
+        BlockDomainsOptions: [
+          { label: 'Ads All', value: 'geosite:category-ads-all' },
+          { label: 'Ads IR 🇮🇷', value: 'ext:geosite_IR.dat:category-ads-all' },
+          { label: 'Ads RU 🇷🇺', value: 'ext:geosite_RU.dat:category-ads-all' },
+          { label: 'Malware 🇮🇷', value: 'ext:geosite_IR.dat:malware' },
+          { label: 'Phishing 🇮🇷', value: 'ext:geosite_IR.dat:phishing' },
+          { label: 'Cryptominers 🇮🇷', value: 'ext:geosite_IR.dat:cryptominers' },
+          { label: 'Adult +18', value: 'geosite:category-porn' },
+          { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
+          { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
+          { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
+          { label: '🇨🇳 China', value: 'geosite:cn' },
+          { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
+          { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
+          { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru' },
+          { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
+          { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
+          { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
+        ],
+        ServicesOptions: [
+          { label: 'Apple', value: 'geosite:apple' },
+          { label: 'Meta', value: 'geosite:meta' },
+          { label: 'Google', value: 'geosite:google' },
+          { label: 'OpenAI', value: 'geosite:openai' },
+          { label: 'Spotify', value: 'geosite:spotify' },
+          { label: 'Netflix', value: 'geosite:netflix' },
+          { label: 'Reddit', value: 'geosite:reddit' },
+          { label: 'Speedtest', value: 'geosite:speedtest' },
+        ]
+      },
+      defaultObservatory: {
+        subjectSelector: [],
+        probeURL: "http://www.google.com/gen_204",
+        probeInterval: "10m",
+        enableConcurrency: true
+      },
+      defaultBurstObservatory: {
+        subjectSelector: [],
+        pingConfig: {
+          destination: "http://www.google.com/gen_204",
+          interval: "30m",
+          connectivity: "http://connectivitycheck.platform.hicloud.com/generate_204",
+          timeout: "10s",
+          sampling: 2
+        }
+      }
+    },
+    methods: {
+      loading(spinning = true) {
+        this.loadingStates.spinning = spinning;
+      },
+      async getOutboundsTraffic() {
+        const msg = await HttpUtil.get("/panel/xray/getOutboundsTraffic");
+        if (msg.success) {
+          this.outboundsTraffic = msg.obj;
+        }
+      },
+      async getXraySetting() {
+        const msg = await HttpUtil.post("/panel/xray/");
 
-                            // Add related rules
-                            this.templateSettings.routing.rules.push(...rules);
-                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
-                        }
-                        reverseModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editReverse(index){
-                if(this.reverseData[index].type == "bridge") {
-                    oldRules = this.templateSettings.routing.rules.filter(r => r.inboundTag && r.inboundTag[0] == this.reverseData[index].tag);
-                } else {
-                    oldRules = this.templateSettings.routing.rules.filter(r => r.outboundTag && r.outboundTag == this.reverseData[index].tag);
-                }
-                reverseModal.show({
-                    title: '{{ i18n "pages.xray.outbound.editReverse"}} ' + (index+1),
-                    reverse: this.reverseData[index],
-                    rules: oldRules,
-                    confirm: (reverse, rules) => {
-                        reverseModal.loading();
-                        if(reverse.tag.length > 0){
-                            oldData = this.reverseData[index];
-                            newTemplateSettings = this.templateSettings;
-                            oldReverseIndex = newTemplateSettings.reverse[oldData.type+'s'].findIndex(rs => rs.tag == oldData.tag);
-                            oldRuleIndex0 = oldRules.length>0 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[0])) : -1;
-                            oldRuleIndex1 = oldRules.length==2 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[1])) : -1;
-                            if(oldData.type == reverse.type){
-                                newTemplateSettings.reverse[oldData.type + 's'][oldReverseIndex] = { tag: reverse.tag, domain: reverse.domain };
-                            } else {
-                                newTemplateSettings.reverse[oldData.type+'s'].splice(oldReverseIndex,1);
-                                // delete empty object
-                                if(newTemplateSettings.reverse[oldData.type+'s'].length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
-                                // add other type of reverse if it is not exist
-                                if(!newTemplateSettings.reverse[reverse.type+'s']) newTemplateSettings.reverse[reverse.type+'s'] = [];
-                                newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
-                            }
-                            this.templateSettings = newTemplateSettings;
+        if (msg.success) {
+          if (!this.loadingStates.fetched) {
+            this.loadingStates.fetched = true
+          }
 
-                            // Adjust Rules
-                            newRules = this.templateSettings.routing.rules;
-                            oldRuleIndex0 != -1 ? newRules[oldRuleIndex0] = rules[0] : newRules.push(rules[0]);
-                            oldRuleIndex1 != -1 ? newRules[oldRuleIndex1] = rules[1] : newRules.push(rules[1]);
-                            this.routingRuleSettings = JSON.stringify(newRules);
-                        }
-                        reverseModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            deleteReverse(index){
-                oldData = this.reverseData[index];
-                newTemplateSettings = this.templateSettings;
-                reverseTypeObj = newTemplateSettings.reverse[oldData.type+'s'];
-                realIndex = reverseTypeObj.findIndex(r => r.tag==oldData.tag && r.domain==oldData.domain);
-                newTemplateSettings.reverse[oldData.type+'s'].splice(realIndex,1);
-
-                // delete empty objects
-                if(reverseTypeObj.length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
-                if(Object.keys(newTemplateSettings.reverse).length === 0) Reflect.deleteProperty(newTemplateSettings, 'reverse');
-
-                // delete related routing rules
-                newRules = newTemplateSettings.routing.rules;
-                if(oldData.type == "bridge"){
-                    newRules = newTemplateSettings.routing.rules.filter(r => !( r.inboundTag && r.inboundTag.length == 1 && r.inboundTag[0] == oldData.tag));
-                } else if(oldData.type == "portal"){
-                    newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag);
-                }
-                newTemplateSettings.routing.rules = newRules;
-
-                this.templateSettings = newTemplateSettings;
-            },
-            async refreshOutboundTraffic() {
-                if (!this.refreshing) {
-                    this.refreshing = true;
-                    await this.getOutboundsTraffic();
-
-                    data = []
-                    if (this.templateSettings != null) {
-                        this.templateSettings.outbounds.forEach((o, index) => {
-                            data.push({'key': index, ...o});
-                        });
-                    }
-
-                    this.outboundData = data;
-                    this.refreshing = false;
-                }
-            },
-            async resetOutboundTraffic(index) {
-                let tag = "-alltags-";
-                if (index >= 0) {
-                    tag = this.outboundData[index].tag ? this.outboundData[index].tag : ""
-                }
-                const msg = await HttpUtil.post("/panel/xray/resetOutboundsTraffic", { tag: tag });
-                if (msg.success) {
-                    await this.refreshOutboundTraffic();
-                }
-            },
-            addBalancer() {
-                balancerModal.show({
-                    title: '{{ i18n "pages.xray.balancer.addBalancer"}}',
-                    okText: '{{ i18n "pages.xray.balancer.addBalancer"}}',
-                    balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
-                    balancer: {
-                        tag: '',
-                        strategy: 'random',
-                        selector: [],
-                        fallbackTag: ''
-                    },
-                    confirm: (balancer) => {
-                        balancerModal.loading();
-                        newTemplateSettings = this.templateSettings;
-                        if (newTemplateSettings.routing.balancers == undefined) {
-                            newTemplateSettings.routing.balancers = [];
-                        }
-                        let tmpBalancer = {
-                            'tag': balancer.tag,
-                            'selector': balancer.selector,
-                            'fallbackTag': balancer.fallbackTag
-                        };
-                        if (balancer.strategy && balancer.strategy != 'random') {
-                            tmpBalancer.strategy = {
-                                'type': balancer.strategy
-                            };
-                        }
-                        newTemplateSettings.routing.balancers.push(tmpBalancer);
-                        this.templateSettings = newTemplateSettings;
-                        this.updateObservatorySelectors();
-                        balancerModal.close();
-                        this.changeObsCode();
-                    },
-                    isEdit: false
-                });
-            },
-            editBalancer(index) {
-                const oldTag = this.balancersData[index].tag;
-                balancerModal.show({
-                    title: '{{ i18n "pages.xray.balancer.editBalancer"}}',
-                    okText: '{{ i18n "sure" }}',
-                    balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
-                    balancer: this.balancersData[index],
-                    confirm: (balancer) => {
-                        balancerModal.loading();
-                        newTemplateSettings = this.templateSettings;
-
-                        let tmpBalancer = {
-                            'tag': balancer.tag,
-                            'selector': balancer.selector,
-                            'fallbackTag': balancer.fallbackTag
-                        };
-
-                        // Remove old tag
-                        if (newTemplateSettings.observatory){
-                            newTemplateSettings.observatory.subjectSelector = newTemplateSettings.observatory.subjectSelector.filter(s => s != oldTag);
-                        }
-                        if (newTemplateSettings.burstObservatory){
-                            newTemplateSettings.burstObservatory.subjectSelector = newTemplateSettings.burstObservatory.subjectSelector.filter(s => s != oldTag);
-                        }
-
-                        if (balancer.strategy && balancer.strategy != 'random') {
-                            tmpBalancer.strategy = {
-                                'type': balancer.strategy
-                            };
-                        }
-
-                        newTemplateSettings.routing.balancers[index] = tmpBalancer;
-                        // change edited tag if used in rule section
-                        if (oldTag != balancer.tag) {
-                            newTemplateSettings.routing.rules.forEach((rule) => {
-                                if (rule.balancerTag && rule.balancerTag == oldTag) {
-                                    rule.balancerTag = balancer.tag;
-                                }
-                            });
-                        }
-                        this.templateSettings = newTemplateSettings;
-                        this.updateObservatorySelectors();
-                        balancerModal.close();
-                        this.changeObsCode();
-                    },
-                    isEdit: true
-                });
-            },
-            updateObservatorySelectors(){
-                newTemplateSettings = this.templateSettings;
-                const leastPings = this.balancersData.filter((b) => b.strategy == 'leastPing');
-                const leastLoads = this.balancersData.filter((b) =>
-                    b.strategy === 'leastLoad' ||
-                    b.strategy === 'roundRobin' ||
-                    b.strategy === 'random'
-                );
-                if (leastPings.length>0){
-                    if (!newTemplateSettings.observatory)
-                        newTemplateSettings.observatory = this.defaultObservatory;
-                    newTemplateSettings.observatory.subjectSelector = [];
-                    leastPings.forEach((b) => {
-                        b.selector.forEach((s) => {
-                            if (!newTemplateSettings.observatory.subjectSelector.includes(s))
-                                newTemplateSettings.observatory.subjectSelector.push(s);
-                        });
-                    });
-                } else {
-                    delete newTemplateSettings.observatory
-                }
-                if (leastLoads.length>0){
-                    if (!newTemplateSettings.burstObservatory)
-                        newTemplateSettings.burstObservatory = this.defaultBurstObservatory;
-                    newTemplateSettings.burstObservatory.subjectSelector = [];
-                    leastLoads.forEach((b) => {
-                        b.selector.forEach((s) => {
-                            if (!newTemplateSettings.burstObservatory.subjectSelector.includes(s))
-                                newTemplateSettings.burstObservatory.subjectSelector.push(s);
-                        });
-                    });
-                } else {
-                    delete newTemplateSettings.burstObservatory
-                }
-                this.templateSettings = newTemplateSettings;
-                this.changeObsCode();
-            },
-            deleteBalancer(index) {
-                newTemplateSettings = this.templateSettings;
-
-                // Remove from balancers
-                const removedBalancer = this.balancersData.splice(index, 1)[0];
-
-                // Remove from settings
-                let realIndex = newTemplateSettings.routing.balancers.findIndex((b) => b.tag === removedBalancer.tag);
-                newTemplateSettings.routing.balancers.splice(realIndex, 1);
-                
-                // Update balancers property to an empty array if there are no more balancers
-                if (newTemplateSettings.routing.balancers.length === 0) {
-                    delete newTemplateSettings.routing.balancers;
-                }
-                this.templateSettings = newTemplateSettings;
-                this.updateObservatorySelectors();
-                this.obsSettings = '';
-                this.changeObsCode()
-            },
-            openDNSPresets() {
-                dnsPresetsModal.show({
-                    title: '{{ i18n "pages.xray.dns.dnsPresetTitle" }}',
-                    selected: (selectedPreset) => {
-                        this.dnsServers = selectedPreset;
-                        
-                        dnsPresetsModal.close();
-                    }
-                });
-            },
-            addDNSServer(){
-                dnsModal.show({
-                    title: '{{ i18n "pages.xray.dns.add" }}',
-                    confirm: (dnsServer) => {
-                        dnsServers = this.dnsServers;
-                        dnsServers.push(dnsServer);
-                        this.dnsServers = dnsServers;
-                        dnsModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editDNSServer(index){
-                dnsModal.show({
-                    title: '{{ i18n "pages.xray.dns.edit" }} #' + (index+1),
-                    dnsServer: this.dnsServers[index],
-                    confirm: (dnsServer) => {
-                        dnsServers = this.dnsServers;
-                        dnsServers[index] = dnsServer;
-                        this.dnsServers = dnsServers;
-                        dnsModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            deleteDNSServer(index){
-                newDnsServers = this.dnsServers;
-                newDnsServers.splice(index,1);
-                this.dnsServers = newDnsServers;
-            },
-            addFakedns() {
-                fakednsModal.show({
-                    title: '{{ i18n "pages.xray.fakedns.add" }}',
-                    confirm: (item) => {
-                        fakeDns = this.fakeDns?? [];
-                        fakeDns.push(item);
-                        this.fakeDns = fakeDns;
-                        fakednsModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editFakedns(index){
-                fakednsModal.show({
-                    title: '{{ i18n "pages.xray.fakedns.edit" }} #' + (index+1),
-                    fakeDns: this.fakeDns[index],
-                    confirm: (item) => {
-                        fakeDns = this.fakeDns;
-                        fakeDns[index] = item;
-                        this.fakeDns = fakeDns;
-                        fakednsModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            deleteFakedns(index){
-                fakeDns = this.fakeDns;
-                fakeDns.splice(index,1);
-                this.fakeDns = fakeDns;
-            },
-            addRule(){
-                ruleModal.show({
-                    title: '{{ i18n "pages.xray.rules.add"}}',
-                    okText: '{{ i18n "pages.xray.rules.add" }}',
-                    confirm: (rule) => {
-                        ruleModal.loading();
-                        if(JSON.stringify(rule).length > 3){
-                            this.templateSettings.routing.rules.push(rule);
-                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
-                        }
-                        ruleModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editRule(index){
-                ruleModal.show({
-                    title: '{{ i18n "pages.xray.rules.edit"}} ' + (index+1),
-                    rule: app.templateSettings.routing.rules[index],
-                    confirm: (rule) => {
-                        ruleModal.loading();
-                        if(JSON.stringify(rule).length > 3){
-                            this.templateSettings.routing.rules[index] = rule;
-                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
-                        }
-                        ruleModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            replaceRule(old_index,new_index){
-                rules = this.templateSettings.routing.rules;
-                if (new_index >= rules.length) rules.push(undefined);
-                rules.splice(new_index, 0, rules.splice(old_index, 1)[0]);
-                this.routingRuleSettings = JSON.stringify(rules);
-            },
-            deleteRule(index){
-                rules = this.templateSettings.routing.rules;
-                rules.splice(index,1);
-                this.routingRuleSettings = JSON.stringify(rules);
-            },
-            showWarp(){
-                warpModal.show();
+          result = JSON.parse(msg.obj);
+          xs = JSON.stringify(result.xraySetting, null, 2);
+          this.oldXraySetting = xs;
+          this.xraySetting = xs;
+          this.inboundTags = result.inboundTags;
+          this.saveBtnDisable = true;
+        }
+      },
+      async updateXraySetting() {
+        this.loading(true);
+        const msg = await HttpUtil.post("/panel/xray/update", { xraySetting: this.xraySetting });
+        this.loading(false);
+        if (msg.success) {
+          await this.getXraySetting();
+        }
+      },
+      async restartXray() {
+        this.loading(true);
+        const msg = await HttpUtil.post("server/restartXrayService");
+        this.loading(false);
+        if (msg.success) {
+          await PromiseUtil.sleep(500);
+          await this.getXrayResult();
+        }
+        this.loading(false);
+      },
+      async getXrayResult() {
+        const msg = await HttpUtil.get("/panel/xray/getXrayResult");
+        if (msg.success) {
+          this.restartResult = msg.obj;
+          if (msg.obj.length > 1) Vue.prototype.$message.error(msg.obj);
+        }
+      },
+      async resetXrayConfigToDefault() {
+        this.loading(true);
+        const msg = await HttpUtil.get("/panel/setting/getDefaultJsonConfig");
+        this.loading(false);
+        if (msg.success) {
+          this.templateSettings = JSON.parse(JSON.stringify(msg.obj, null, 2));
+          this.saveBtnDisable = true;
+        }
+      },
+      changePage(pageKey) {
+        if (pageKey == 'tpl-advanced') this.changeCode();
+        if (pageKey == 'tpl-balancer') this.changeObsCode();
+      },
+      syncRulesWithOutbound(tag, setting) {
+        const newTemplateSettings = this.templateSettings;
+        const haveRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === tag);
+        const outboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.tag === tag);
+        if (!haveRules && outboundIndex > 0) {
+          newTemplateSettings.outbounds.splice(outboundIndex);
+        }
+        if (haveRules && outboundIndex < 0) {
+          newTemplateSettings.outbounds.push(setting);
+        }
+        this.templateSettings = newTemplateSettings;
+      },
+      templateRuleGetter(routeSettings) {
+        const { property, outboundTag } = routeSettings;
+        let result = [];
+        if (this.templateSettings != null) {
+          this.templateSettings.routing.rules.forEach(
+            (routingRule) => {
+              if (
+                routingRule.hasOwnProperty(property) &&
+                routingRule.hasOwnProperty("outboundTag") &&
+                routingRule.outboundTag === outboundTag
+              ) {
+                result.push(...routingRule[property]);
+              }
             }
+          );
+        }
+        return result;
+      },
+      templateRuleSetter(routeSettings) {
+        const { data, property, outboundTag } = routeSettings;
+        const oldTemplateSettings = this.templateSettings;
+        const newTemplateSettings = oldTemplateSettings;
+        currentProperty = this.templateRuleGetter({ outboundTag, property })
+        if (currentProperty.length == 0) {
+          const propertyRule = {
+            type: "field",
+            outboundTag,
+            [property]: data
+          };
+          newTemplateSettings.routing.rules.push(propertyRule);
+        }
+        else {
+          const newRules = [];
+          insertedOnce = false;
+          newTemplateSettings.routing.rules.forEach(
+            (routingRule) => {
+              if (
+                routingRule.hasOwnProperty(property) &&
+                routingRule.hasOwnProperty("outboundTag") &&
+                routingRule.outboundTag === outboundTag
+              ) {
+                if (!insertedOnce && data.length > 0) {
+                  insertedOnce = true;
+                  routingRule[property] = data;
+                  newRules.push(routingRule);
+                }
+              }
+              else {
+                newRules.push(routingRule);
+              }
+            }
+          );
+          newTemplateSettings.routing.rules = newRules;
+        }
+        this.templateSettings = newTemplateSettings;
+      },
+      changeCode() {
+        if (this.cm != null) {
+          this.cm.toTextArea();
+        }
+        textAreaObj = document.getElementById('xraySetting');
+        textAreaObj.value = this[this.advSettings];
+        this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
+        this.cm.on('change', editor => {
+          value = editor.getValue();
+          if (this.isJsonString(value)) {
+            this[this.advSettings] = value;
+          }
+        });
+      },
+      changeObsCode() {
+        if (this.cm != null) {
+          this.cm.toTextArea();
+        }
+        if (this.obsSettings == '') {
+          this.cm = null;
+          return
+        }
+        textAreaObj = document.getElementById('obsSetting');
+        textAreaObj.value = this[this.obsSettings];
+        this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
+        this.cm.on('change', editor => {
+          value = editor.getValue();
+          if (this.isJsonString(value)) {
+            this[this.obsSettings] = value;
+          }
+        });
+      },
+      isJsonString(str) {
+        try {
+          JSON.parse(str);
+        } catch (e) {
+          return false;
+        }
+        return true;
+      },
+      findOutboundTraffic(o) {
+        for (const otraffic of this.outboundsTraffic) {
+          if (otraffic.tag == o.tag) {
+            return SizeFormatter.sizeFormat(otraffic.up) + ' / ' + SizeFormatter.sizeFormat(otraffic.down);
+          }
+        }
+        return SizeFormatter.sizeFormat(0) + ' / ' + SizeFormatter.sizeFormat(0);
+      },
+      findOutboundAddress(o) {
+        serverObj = null;
+        switch (o.protocol) {
+          case Protocols.VMess:
+          case Protocols.VLESS:
+            serverObj = o.settings.vnext;
+            break;
+          case Protocols.HTTP:
+          case Protocols.Socks:
+          case Protocols.Shadowsocks:
+          case Protocols.Trojan:
+            serverObj = o.settings.servers;
+            break;
+          case Protocols.DNS:
+            return [o.settings?.address + ':' + o.settings?.port];
+          case Protocols.Wireguard:
+            return o.settings.peers.map(peer => peer.endpoint);
+          default:
+            return null;
+        }
+        return serverObj ? serverObj.map(obj => obj.address + ':' + obj.port) : null;
+      },
+      addOutbound() {
+        outModal.show({
+          title: '{{ i18n "pages.xray.outbound.addOutbound"}}',
+          okText: '{{ i18n "pages.xray.outbound.addOutbound" }}',
+          confirm: (outbound) => {
+            outModal.loading();
+            if (outbound.tag.length > 0) {
+              this.templateSettings.outbounds.push(outbound);
+              this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
+            }
+            outModal.close();
+          },
+          isEdit: false,
+          tags: this.templateSettings.outbounds.map(obj => obj.tag)
+        });
+      },
+      editOutbound(index) {
+        outModal.show({
+          title: '{{ i18n "pages.xray.outbound.editOutbound"}} ' + (index + 1),
+          outbound: app.templateSettings.outbounds[index],
+          confirm: (outbound) => {
+            outModal.loading();
+            this.templateSettings.outbounds[index] = outbound;
+            this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
+            outModal.close();
+          },
+          isEdit: true,
+          tags: this.outboundData.filter((o) => o.key != index).map(obj => obj.tag)
+        });
+      },
+      deleteOutbound(index) {
+        outbounds = this.templateSettings.outbounds;
+        outbounds.splice(index, 1);
+        this.outboundSettings = JSON.stringify(outbounds);
+      },
+      setFirstOutbound(index) {
+        outbounds = this.templateSettings.outbounds;
+        outbounds.splice(0, 0, outbounds.splice(index, 1)[0]);
+        this.outboundSettings = JSON.stringify(outbounds);
+      },
+      addReverse() {
+        reverseModal.show({
+          title: '{{ i18n "pages.xray.outbound.addReverse"}}',
+          okText: '{{ i18n "pages.xray.outbound.addReverse" }}',
+          confirm: (reverse, rules) => {
+            reverseModal.loading();
+            if (reverse.tag.length > 0) {
+              newTemplateSettings = this.templateSettings;
+              if (newTemplateSettings.reverse == undefined) newTemplateSettings.reverse = {};
+              if (newTemplateSettings.reverse[reverse.type + 's'] == undefined) newTemplateSettings.reverse[reverse.type + 's'] = [];
+              newTemplateSettings.reverse[reverse.type + 's'].push({ tag: reverse.tag, domain: reverse.domain });
+              this.templateSettings = newTemplateSettings;
+
+              // Add related rules
+              this.templateSettings.routing.rules.push(...rules);
+              this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+            }
+            reverseModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editReverse(index) {
+        if (this.reverseData[index].type == "bridge") {
+          oldRules = this.templateSettings.routing.rules.filter(r => r.inboundTag && r.inboundTag[0] == this.reverseData[index].tag);
+        } else {
+          oldRules = this.templateSettings.routing.rules.filter(r => r.outboundTag && r.outboundTag == this.reverseData[index].tag);
+        }
+        reverseModal.show({
+          title: '{{ i18n "pages.xray.outbound.editReverse"}} ' + (index + 1),
+          reverse: this.reverseData[index],
+          rules: oldRules,
+          confirm: (reverse, rules) => {
+            reverseModal.loading();
+            if (reverse.tag.length > 0) {
+              oldData = this.reverseData[index];
+              newTemplateSettings = this.templateSettings;
+              oldReverseIndex = newTemplateSettings.reverse[oldData.type + 's'].findIndex(rs => rs.tag == oldData.tag);
+              oldRuleIndex0 = oldRules.length > 0 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[0])) : -1;
+              oldRuleIndex1 = oldRules.length == 2 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[1])) : -1;
+              if (oldData.type == reverse.type) {
+                newTemplateSettings.reverse[oldData.type + 's'][oldReverseIndex] = { tag: reverse.tag, domain: reverse.domain };
+              } else {
+                newTemplateSettings.reverse[oldData.type + 's'].splice(oldReverseIndex, 1);
+                // delete empty object
+                if (newTemplateSettings.reverse[oldData.type + 's'].length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type + 's');
+                // add other type of reverse if it is not exist
+                if (!newTemplateSettings.reverse[reverse.type + 's']) newTemplateSettings.reverse[reverse.type + 's'] = [];
+                newTemplateSettings.reverse[reverse.type + 's'].push({ tag: reverse.tag, domain: reverse.domain });
+              }
+              this.templateSettings = newTemplateSettings;
+
+              // Adjust Rules
+              newRules = this.templateSettings.routing.rules;
+              oldRuleIndex0 != -1 ? newRules[oldRuleIndex0] = rules[0] : newRules.push(rules[0]);
+              oldRuleIndex1 != -1 ? newRules[oldRuleIndex1] = rules[1] : newRules.push(rules[1]);
+              this.routingRuleSettings = JSON.stringify(newRules);
+            }
+            reverseModal.close();
+          },
+          isEdit: true
+        });
+      },
+      deleteReverse(index) {
+        oldData = this.reverseData[index];
+        newTemplateSettings = this.templateSettings;
+        reverseTypeObj = newTemplateSettings.reverse[oldData.type + 's'];
+        realIndex = reverseTypeObj.findIndex(r => r.tag == oldData.tag && r.domain == oldData.domain);
+        newTemplateSettings.reverse[oldData.type + 's'].splice(realIndex, 1);
+
+        // delete empty objects
+        if (reverseTypeObj.length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type + 's');
+        if (Object.keys(newTemplateSettings.reverse).length === 0) Reflect.deleteProperty(newTemplateSettings, 'reverse');
+
+        // delete related routing rules
+        newRules = newTemplateSettings.routing.rules;
+        if (oldData.type == "bridge") {
+          newRules = newTemplateSettings.routing.rules.filter(r => !(r.inboundTag && r.inboundTag.length == 1 && r.inboundTag[0] == oldData.tag));
+        } else if (oldData.type == "portal") {
+          newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag);
+        }
+        newTemplateSettings.routing.rules = newRules;
+
+        this.templateSettings = newTemplateSettings;
+      },
+      async refreshOutboundTraffic() {
+        if (!this.refreshing) {
+          this.refreshing = true;
+          await this.getOutboundsTraffic();
+
+          data = []
+          if (this.templateSettings != null) {
+            this.templateSettings.outbounds.forEach((o, index) => {
+              data.push({ 'key': index, ...o });
+            });
+          }
+
+          this.outboundData = data;
+          this.refreshing = false;
+        }
+      },
+      async resetOutboundTraffic(index) {
+        let tag = "-alltags-";
+        if (index >= 0) {
+          tag = this.outboundData[index].tag ? this.outboundData[index].tag : ""
+        }
+        const msg = await HttpUtil.post("/panel/xray/resetOutboundsTraffic", { tag: tag });
+        if (msg.success) {
+          await this.refreshOutboundTraffic();
+        }
+      },
+      addBalancer() {
+        balancerModal.show({
+          title: '{{ i18n "pages.xray.balancer.addBalancer"}}',
+          okText: '{{ i18n "pages.xray.balancer.addBalancer"}}',
+          balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
+          balancer: {
+            tag: '',
+            strategy: 'random',
+            selector: [],
+            fallbackTag: ''
+          },
+          confirm: (balancer) => {
+            balancerModal.loading();
+            newTemplateSettings = this.templateSettings;
+            if (newTemplateSettings.routing.balancers == undefined) {
+              newTemplateSettings.routing.balancers = [];
+            }
+            let tmpBalancer = {
+              'tag': balancer.tag,
+              'selector': balancer.selector,
+              'fallbackTag': balancer.fallbackTag
+            };
+            if (balancer.strategy && balancer.strategy != 'random') {
+              tmpBalancer.strategy = {
+                'type': balancer.strategy
+              };
+            }
+            newTemplateSettings.routing.balancers.push(tmpBalancer);
+            this.templateSettings = newTemplateSettings;
+            this.updateObservatorySelectors();
+            balancerModal.close();
+            this.changeObsCode();
+          },
+          isEdit: false
+        });
+      },
+      editBalancer(index) {
+        const oldTag = this.balancersData[index].tag;
+        balancerModal.show({
+          title: '{{ i18n "pages.xray.balancer.editBalancer"}}',
+          okText: '{{ i18n "sure" }}',
+          balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
+          balancer: this.balancersData[index],
+          confirm: (balancer) => {
+            balancerModal.loading();
+            newTemplateSettings = this.templateSettings;
+
+            let tmpBalancer = {
+              'tag': balancer.tag,
+              'selector': balancer.selector,
+              'fallbackTag': balancer.fallbackTag
+            };
+
+            // Remove old tag
+            if (newTemplateSettings.observatory) {
+              newTemplateSettings.observatory.subjectSelector = newTemplateSettings.observatory.subjectSelector.filter(s => s != oldTag);
+            }
+            if (newTemplateSettings.burstObservatory) {
+              newTemplateSettings.burstObservatory.subjectSelector = newTemplateSettings.burstObservatory.subjectSelector.filter(s => s != oldTag);
+            }
+
+            if (balancer.strategy && balancer.strategy != 'random') {
+              tmpBalancer.strategy = {
+                'type': balancer.strategy
+              };
+            }
+
+            newTemplateSettings.routing.balancers[index] = tmpBalancer;
+            // change edited tag if used in rule section
+            if (oldTag != balancer.tag) {
+              newTemplateSettings.routing.rules.forEach((rule) => {
+                if (rule.balancerTag && rule.balancerTag == oldTag) {
+                  rule.balancerTag = balancer.tag;
+                }
+              });
+            }
+            this.templateSettings = newTemplateSettings;
+            this.updateObservatorySelectors();
+            balancerModal.close();
+            this.changeObsCode();
+          },
+          isEdit: true
+        });
+      },
+      updateObservatorySelectors() {
+        newTemplateSettings = this.templateSettings;
+        const leastPings = this.balancersData.filter((b) => b.strategy == 'leastPing');
+        const leastLoads = this.balancersData.filter((b) =>
+          b.strategy === 'leastLoad' ||
+          b.strategy === 'roundRobin' ||
+          b.strategy === 'random'
+        );
+        if (leastPings.length > 0) {
+          if (!newTemplateSettings.observatory)
+            newTemplateSettings.observatory = this.defaultObservatory;
+          newTemplateSettings.observatory.subjectSelector = [];
+          leastPings.forEach((b) => {
+            b.selector.forEach((s) => {
+              if (!newTemplateSettings.observatory.subjectSelector.includes(s))
+                newTemplateSettings.observatory.subjectSelector.push(s);
+            });
+          });
+        } else {
+          delete newTemplateSettings.observatory
+        }
+        if (leastLoads.length > 0) {
+          if (!newTemplateSettings.burstObservatory)
+            newTemplateSettings.burstObservatory = this.defaultBurstObservatory;
+          newTemplateSettings.burstObservatory.subjectSelector = [];
+          leastLoads.forEach((b) => {
+            b.selector.forEach((s) => {
+              if (!newTemplateSettings.burstObservatory.subjectSelector.includes(s))
+                newTemplateSettings.burstObservatory.subjectSelector.push(s);
+            });
+          });
+        } else {
+          delete newTemplateSettings.burstObservatory
+        }
+        this.templateSettings = newTemplateSettings;
+        this.changeObsCode();
+      },
+      deleteBalancer(index) {
+        newTemplateSettings = this.templateSettings;
+
+        // Remove from balancers
+        const removedBalancer = this.balancersData.splice(index, 1)[0];
+
+        // Remove from settings
+        let realIndex = newTemplateSettings.routing.balancers.findIndex((b) => b.tag === removedBalancer.tag);
+        newTemplateSettings.routing.balancers.splice(realIndex, 1);
+
+        // Update balancers property to an empty array if there are no more balancers
+        if (newTemplateSettings.routing.balancers.length === 0) {
+          delete newTemplateSettings.routing.balancers;
+        }
+        this.templateSettings = newTemplateSettings;
+        this.updateObservatorySelectors();
+        this.obsSettings = '';
+        this.changeObsCode()
+      },
+      openDNSPresets() {
+        dnsPresetsModal.show({
+          title: '{{ i18n "pages.xray.dns.dnsPresetTitle" }}',
+          selected: (selectedPreset) => {
+            this.dnsServers = selectedPreset;
+
+            dnsPresetsModal.close();
+          }
+        });
+      },
+      addDNSServer() {
+        dnsModal.show({
+          title: '{{ i18n "pages.xray.dns.add" }}',
+          confirm: (dnsServer) => {
+            dnsServers = this.dnsServers;
+            dnsServers.push(dnsServer);
+            this.dnsServers = dnsServers;
+            dnsModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editDNSServer(index) {
+        dnsModal.show({
+          title: '{{ i18n "pages.xray.dns.edit" }} #' + (index + 1),
+          dnsServer: this.dnsServers[index],
+          confirm: (dnsServer) => {
+            dnsServers = this.dnsServers;
+            dnsServers[index] = dnsServer;
+            this.dnsServers = dnsServers;
+            dnsModal.close();
+          },
+          isEdit: true
+        });
+      },
+      deleteDNSServer(index) {
+        newDnsServers = this.dnsServers;
+        newDnsServers.splice(index, 1);
+        this.dnsServers = newDnsServers;
+      },
+      addFakedns() {
+        fakednsModal.show({
+          title: '{{ i18n "pages.xray.fakedns.add" }}',
+          confirm: (item) => {
+            fakeDns = this.fakeDns ?? [];
+            fakeDns.push(item);
+            this.fakeDns = fakeDns;
+            fakednsModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editFakedns(index) {
+        fakednsModal.show({
+          title: '{{ i18n "pages.xray.fakedns.edit" }} #' + (index + 1),
+          fakeDns: this.fakeDns[index],
+          confirm: (item) => {
+            fakeDns = this.fakeDns;
+            fakeDns[index] = item;
+            this.fakeDns = fakeDns;
+            fakednsModal.close();
+          },
+          isEdit: true
+        });
+      },
+      deleteFakedns(index) {
+        fakeDns = this.fakeDns;
+        fakeDns.splice(index, 1);
+        this.fakeDns = fakeDns;
+      },
+      addRule() {
+        ruleModal.show({
+          title: '{{ i18n "pages.xray.rules.add"}}',
+          okText: '{{ i18n "pages.xray.rules.add" }}',
+          confirm: (rule) => {
+            ruleModal.loading();
+            if (JSON.stringify(rule).length > 3) {
+              this.templateSettings.routing.rules.push(rule);
+              this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+            }
+            ruleModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editRule(index) {
+        ruleModal.show({
+          title: '{{ i18n "pages.xray.rules.edit"}} ' + (index + 1),
+          rule: app.templateSettings.routing.rules[index],
+          confirm: (rule) => {
+            ruleModal.loading();
+            if (JSON.stringify(rule).length > 3) {
+              this.templateSettings.routing.rules[index] = rule;
+              this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+            }
+            ruleModal.close();
+          },
+          isEdit: true
+        });
+      },
+      replaceRule(old_index, new_index) {
+        rules = this.templateSettings.routing.rules;
+        if (new_index >= rules.length) rules.push(undefined);
+        rules.splice(new_index, 0, rules.splice(old_index, 1)[0]);
+        this.routingRuleSettings = JSON.stringify(rules);
+      },
+      deleteRule(index) {
+        rules = this.templateSettings.routing.rules;
+        rules.splice(index, 1);
+        this.routingRuleSettings = JSON.stringify(rules);
+      },
+      showWarp() {
+        warpModal.show();
+      }
+    },
+    async mounted() {
+      if (window.location.protocol !== "https:") {
+        this.showAlert = true;
+      }
+      await this.getXraySetting();
+      await this.getXrayResult();
+      await this.getOutboundsTraffic();
+      while (true) {
+        await PromiseUtil.sleep(800);
+        this.saveBtnDisable = this.oldXraySetting === this.xraySetting;
+      }
+    },
+    computed: {
+      templateSettings: {
+        get: function () {
+          const parsedSettings = this.xraySetting ? JSON.parse(this.xraySetting) : null;
+          return parsedSettings;
         },
-        async mounted() {
-            if (window.location.protocol !== "https:") {
-                this.showAlert = true;
-            }
-            await this.getXraySetting();
-            await this.getXrayResult();
-            await this.getOutboundsTraffic();
-            while (true) {
-                await PromiseUtil.sleep(800);
-                this.saveBtnDisable = this.oldXraySetting === this.xraySetting;
-            }
+        set: function (newValue) {
+          if (newValue) {
+            this.xraySetting = JSON.stringify(newValue, null, 2);
+          }
         },
-        computed: {
-            templateSettings: {
-                get: function () {
-                    const parsedSettings = this.xraySetting ? JSON.parse(this.xraySetting) : null;
-                    return parsedSettings;
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.xraySetting = JSON.stringify(newValue, null, 2);
-                    }
-                },
-            },
-            inboundSettings: {
-                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.inbounds = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            outboundSettings: {
-                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.outbounds = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            outboundData: {
-                get: function () {
-                    data = []
-                    if (this.templateSettings != null) {
-                        this.templateSettings.outbounds.forEach((o, index) => {
-                            data.push({'key': index, ...o});
-                        });
-                    }
-                    return data;
-                },
-            },
-            reverseData: {
-                get: function () {
-                    data = []
-                    if (this.templateSettings != null && this.templateSettings.reverse != null) {
-                        if(this.templateSettings.reverse.bridges) {
-                            this.templateSettings.reverse.bridges.forEach((o, index) => {
-                                data.push({'key': index, 'type':'bridge', ...o});
-                            });
-                        }
-                        if(this.templateSettings.reverse.portals){
-                            this.templateSettings.reverse.portals.forEach((o, index) => {
-                                data.push({'key': index, 'type':'portal', ...o});
-                            });
-                        }
-                    }
-                    return data;
-                },
-            },
-            routingRuleSettings: {
-                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.routing.rules = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            routingRuleData: {
-                get: function () {
-                    data = [];
-                    if (this.templateSettings != null) {
-                        this.templateSettings.routing.rules.forEach((r, index) => {
-                            data.push({'key': index, ...r});
-                        });
-                        // Make rules readable
-                        data.forEach(r => {
-                            if(r.domain) r.domain = r.domain.join(',')
-                            if(r.ip) r.ip = r.ip.join(',')
-                            if(r.source) r.source = r.source.join(',');
-                            if(r.user) r.user = r.user.join(',')
-                            if(r.inboundTag) r.inboundTag = r.inboundTag.join(',')
-                            if(r.protocol) r.protocol = r.protocol.join(',')
-                            if(r.attrs) r.attrs = JSON.stringify(r.attrs, null, 2)
-                        });
-                    }
-                    return data;
-                }
-            },
-            balancersData: {
-                get: function () {
-                    data = []
-                    if (this.templateSettings != null && this.templateSettings.routing != null && this.templateSettings.routing.balancers != null) {
-                        this.templateSettings.routing.balancers.forEach((o, index) => {
-                            data.push({
-                                'key': index,
-                                'tag': o.tag ? o.tag : "",
-                                'strategy': o.strategy?.type ?? "random",
-                                'selector': o.selector ? o.selector : [],
-                                'fallbackTag': o.fallbackTag?? '',
-                            });
-                        });
-                    }
-                    return data;
-                }
-            },
-            observatory: {
-                get: function () { 
-                    return this.templateSettings?.observatory ? JSON.stringify(this.templateSettings.observatory, null, 2) : null;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.observatory = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            burstObservatory: {
-                get: function () { 
-                    return this.templateSettings?.burstObservatory ? JSON.stringify(this.templateSettings.burstObservatory, null, 2) : null; 
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.burstObservatory = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            observatoryEnable: function () { return this.templateSettings != null && this.templateSettings.observatory != undefined },
-            burstObservatoryEnable: function () { return this.templateSettings != null && this.templateSettings.burstObservatory != undefined },
-            freedomStrategy: {
-                get: function () {
-                    if (!this.templateSettings) return "AsIs";
-                    freedomOutbound = this.templateSettings.outbounds.find((o) => o.protocol === "freedom" && o.tag == "direct");
-                    if (!freedomOutbound) return "AsIs";
-                    if (!freedomOutbound.settings || !freedomOutbound.settings.domainStrategy) return "AsIs";
-                    return freedomOutbound.settings.domainStrategy;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    freedomOutboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.protocol === "freedom" && o.tag == "direct");
-                    if(freedomOutboundIndex == -1){
-                        newTemplateSettings.outbounds.push({protocol: "freedom", tag: "direct", settings: { "domainStrategy": newValue }});
-                    } else if (!newTemplateSettings.outbounds[freedomOutboundIndex].settings) {
-                        newTemplateSettings.outbounds[freedomOutboundIndex].settings = {"domainStrategy": newValue};
-                    } else {
-                        newTemplateSettings.outbounds[freedomOutboundIndex].settings.domainStrategy = newValue;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            routingStrategy: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.routing || !this.templateSettings.routing.domainStrategy) return "AsIs";
-                    return this.templateSettings.routing.domainStrategy;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.routing.domainStrategy = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            logLevel: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.loglevel) return "warning";
-                    return this.templateSettings.log.loglevel;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.loglevel = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            accessLog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.access) return "";
-                    return this.templateSettings.log.access;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.access = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            errorLog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.error) return "";
-                    return this.templateSettings.log.error;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.error = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnslog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.dnsLog) return false;
-                    return this.templateSettings.log.dnsLog;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.dnsLog = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsInboundUplink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundUplink) return false;
-                    return this.templateSettings.policy.system.statsInboundUplink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsInboundUplink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsInboundDownlink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundDownlink) return false;
-                    return this.templateSettings.policy.system.statsInboundDownlink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsInboundDownlink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsOutboundUplink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundUplink) return false;
-                    return this.templateSettings.policy.system.statsOutboundUplink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsOutboundUplink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsOutboundDownlink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundDownlink) return false;
-                    return this.templateSettings.policy.system.statsOutboundDownlink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsOutboundDownlink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            maskAddressLog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.maskAddress) return "";
-                    return this.templateSettings.log.maskAddress;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.maskAddress = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            blockedIPs: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "blocked", property: "ip" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "blocked", property: "ip", data: newValue });
-                }
-            },
-            blockedDomains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "blocked", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "blocked", property: "domain", data: newValue });
-                }
-            },
-            blockedProtocols: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "blocked", property: "protocol" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "blocked", property: "protocol", data: newValue });
-                }
-            },
-            directIPs: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "direct", property: "ip" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "direct", property: "ip", data: newValue });
-                    this.syncRulesWithOutbound("direct", this.directSettings);
-                }
-            },
-            directDomains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "direct", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "direct", property: "domain", data: newValue });
-                    this.syncRulesWithOutbound("direct", this.directSettings);
-                }
-            },
-            ipv4Domains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "IPv4", property: "domain", data: newValue });
-                    this.syncRulesWithOutbound("IPv4", this.ipv4Settings);
-                }
-            },
-            warpDomains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "warp", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "warp", property: "domain", data: newValue });
-                }
-            },
-            torrentSettings: {
-                get: function () {
-                    return ArrayUtils.doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedProtocols = [...this.blockedProtocols, ...this.settingsData.protocols.bittorrent];
-                    } else {
-                        this.blockedProtocols = this.blockedProtocols.filter(data => !this.settingsData.protocols.bittorrent.includes(data));
-                    }
-                },
-            },
-            WarpExist: {
-                get: function() {
-                    return this.templateSettings ? this.templateSettings.outbounds.findIndex((o) => o.tag == "warp")>=0  : false;
-                },
-            },
-            enableDNS: {
-                get: function () {
-                    return this.templateSettings ? this.templateSettings.dns != null : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns = { 
-                            servers: [], 
-                            queryStrategy: "UseIP", 
-                            tag: "dns_inbound"
-                        };
-                        newTemplateSettings.fakedns = null; 
-                    } else {
-                        delete newTemplateSettings.dns;
-                        delete newTemplateSettings.fakedns;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsTag: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.tag : "";
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.dns.tag = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsClientIp: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.clientIp : null;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.clientIp = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.clientIp;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsDisableCache: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.disableCache : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.disableCache = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.disableCache
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsDisableFallback: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.disableFallback : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.disableFallback = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.disableFallback
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsDisableFallbackIfMatch: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.disableFallbackIfMatch : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.disableFallbackIfMatch = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.disableFallbackIfMatch
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsUseSystemHosts: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.useSystemHosts : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.useSystemHosts = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.useSystemHosts
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsStrategy: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.queryStrategy : null;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.dns.queryStrategy =  newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsServers: {
-                get: function () { return this.enableDNS ? this.templateSettings.dns.servers : []; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.dns.servers =  newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            fakeDns: {
-                get: function () { return this.templateSettings && this.templateSettings.fakedns ? this.templateSettings.fakedns : []; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (this.enableDNS) {
-                        newTemplateSettings.fakedns = newValue.length > 0 ? newValue : null;
-                    } else {
-                        delete newTemplateSettings.fakedns;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            }
+      },
+      inboundSettings: {
+        get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.inbounds = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
         },
-    });
+      },
+      outboundSettings: {
+        get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.outbounds = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      outboundData: {
+        get: function () {
+          data = []
+          if (this.templateSettings != null) {
+            this.templateSettings.outbounds.forEach((o, index) => {
+              data.push({ 'key': index, ...o });
+            });
+          }
+          return data;
+        },
+      },
+      reverseData: {
+        get: function () {
+          data = []
+          if (this.templateSettings != null && this.templateSettings.reverse != null) {
+            if (this.templateSettings.reverse.bridges) {
+              this.templateSettings.reverse.bridges.forEach((o, index) => {
+                data.push({ 'key': index, 'type': 'bridge', ...o });
+              });
+            }
+            if (this.templateSettings.reverse.portals) {
+              this.templateSettings.reverse.portals.forEach((o, index) => {
+                data.push({ 'key': index, 'type': 'portal', ...o });
+              });
+            }
+          }
+          return data;
+        },
+      },
+      routingRuleSettings: {
+        get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.routing.rules = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      routingRuleData: {
+        get: function () {
+          data = [];
+          if (this.templateSettings != null) {
+            this.templateSettings.routing.rules.forEach((r, index) => {
+              data.push({ 'key': index, ...r });
+            });
+            // Make rules readable
+            data.forEach(r => {
+              if (r.domain) r.domain = r.domain.join(',')
+              if (r.ip) r.ip = r.ip.join(',')
+              if (r.source) r.source = r.source.join(',');
+              if (r.user) r.user = r.user.join(',')
+              if (r.inboundTag) r.inboundTag = r.inboundTag.join(',')
+              if (r.protocol) r.protocol = r.protocol.join(',')
+              if (r.attrs) r.attrs = JSON.stringify(r.attrs, null, 2)
+            });
+          }
+          return data;
+        }
+      },
+      balancersData: {
+        get: function () {
+          data = []
+          if (this.templateSettings != null && this.templateSettings.routing != null && this.templateSettings.routing.balancers != null) {
+            this.templateSettings.routing.balancers.forEach((o, index) => {
+              data.push({
+                'key': index,
+                'tag': o.tag ? o.tag : "",
+                'strategy': o.strategy?.type ?? "random",
+                'selector': o.selector ? o.selector : [],
+                'fallbackTag': o.fallbackTag ?? '',
+              });
+            });
+          }
+          return data;
+        }
+      },
+      observatory: {
+        get: function () {
+          return this.templateSettings?.observatory ? JSON.stringify(this.templateSettings.observatory, null, 2) : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.observatory = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      burstObservatory: {
+        get: function () {
+          return this.templateSettings?.burstObservatory ? JSON.stringify(this.templateSettings.burstObservatory, null, 2) : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.burstObservatory = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      observatoryEnable: function () { return this.templateSettings != null && this.templateSettings.observatory != undefined },
+      burstObservatoryEnable: function () { return this.templateSettings != null && this.templateSettings.burstObservatory != undefined },
+      freedomStrategy: {
+        get: function () {
+          if (!this.templateSettings) return "AsIs";
+          freedomOutbound = this.templateSettings.outbounds.find((o) => o.protocol === "freedom" && o.tag == "direct");
+          if (!freedomOutbound) return "AsIs";
+          if (!freedomOutbound.settings || !freedomOutbound.settings.domainStrategy) return "AsIs";
+          return freedomOutbound.settings.domainStrategy;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          freedomOutboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.protocol === "freedom" && o.tag == "direct");
+          if (freedomOutboundIndex == -1) {
+            newTemplateSettings.outbounds.push({ protocol: "freedom", tag: "direct", settings: { "domainStrategy": newValue } });
+          } else if (!newTemplateSettings.outbounds[freedomOutboundIndex].settings) {
+            newTemplateSettings.outbounds[freedomOutboundIndex].settings = { "domainStrategy": newValue };
+          } else {
+            newTemplateSettings.outbounds[freedomOutboundIndex].settings.domainStrategy = newValue;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      routingStrategy: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.routing || !this.templateSettings.routing.domainStrategy) return "AsIs";
+          return this.templateSettings.routing.domainStrategy;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.routing.domainStrategy = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      logLevel: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.loglevel) return "warning";
+          return this.templateSettings.log.loglevel;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.loglevel = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      accessLog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.access) return "";
+          return this.templateSettings.log.access;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.access = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      errorLog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.error) return "";
+          return this.templateSettings.log.error;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.error = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnslog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.dnsLog) return false;
+          return this.templateSettings.log.dnsLog;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.dnsLog = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsInboundUplink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundUplink) return false;
+          return this.templateSettings.policy.system.statsInboundUplink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsInboundUplink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsInboundDownlink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundDownlink) return false;
+          return this.templateSettings.policy.system.statsInboundDownlink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsInboundDownlink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsOutboundUplink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundUplink) return false;
+          return this.templateSettings.policy.system.statsOutboundUplink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsOutboundUplink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsOutboundDownlink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundDownlink) return false;
+          return this.templateSettings.policy.system.statsOutboundDownlink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsOutboundDownlink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      maskAddressLog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.maskAddress) return "";
+          return this.templateSettings.log.maskAddress;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.maskAddress = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      blockedIPs: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "blocked", property: "ip" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "blocked", property: "ip", data: newValue });
+        }
+      },
+      blockedDomains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "blocked", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "blocked", property: "domain", data: newValue });
+        }
+      },
+      blockedProtocols: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "blocked", property: "protocol" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "blocked", property: "protocol", data: newValue });
+        }
+      },
+      directIPs: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "direct", property: "ip" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "direct", property: "ip", data: newValue });
+          this.syncRulesWithOutbound("direct", this.directSettings);
+        }
+      },
+      directDomains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "direct", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "direct", property: "domain", data: newValue });
+          this.syncRulesWithOutbound("direct", this.directSettings);
+        }
+      },
+      ipv4Domains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "IPv4", property: "domain", data: newValue });
+          this.syncRulesWithOutbound("IPv4", this.ipv4Settings);
+        }
+      },
+      warpDomains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "warp", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "warp", property: "domain", data: newValue });
+        }
+      },
+      torrentSettings: {
+        get: function () {
+          return ArrayUtils.doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
+        },
+        set: function (newValue) {
+          if (newValue) {
+            this.blockedProtocols = [...this.blockedProtocols, ...this.settingsData.protocols.bittorrent];
+          } else {
+            this.blockedProtocols = this.blockedProtocols.filter(data => !this.settingsData.protocols.bittorrent.includes(data));
+          }
+        },
+      },
+      WarpExist: {
+        get: function () {
+          return this.templateSettings ? this.templateSettings.outbounds.findIndex((o) => o.tag == "warp") >= 0 : false;
+        },
+      },
+      enableDNS: {
+        get: function () {
+          return this.templateSettings ? this.templateSettings.dns != null : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns = {
+              servers: [],
+              queryStrategy: "UseIP",
+              tag: "dns_inbound"
+            };
+            newTemplateSettings.fakedns = null;
+          } else {
+            delete newTemplateSettings.dns;
+            delete newTemplateSettings.fakedns;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsTag: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.tag : "";
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.dns.tag = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsClientIp: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.clientIp : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.clientIp = newValue;
+          } else {
+            delete newTemplateSettings.dns.clientIp;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsDisableCache: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.disableCache : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.disableCache = newValue;
+          } else {
+            delete newTemplateSettings.dns.disableCache
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsDisableFallback: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.disableFallback : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.disableFallback = newValue;
+          } else {
+            delete newTemplateSettings.dns.disableFallback
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsDisableFallbackIfMatch: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.disableFallbackIfMatch : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.disableFallbackIfMatch = newValue;
+          } else {
+            delete newTemplateSettings.dns.disableFallbackIfMatch
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsUseSystemHosts: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.useSystemHosts : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.useSystemHosts = newValue;
+          } else {
+            delete newTemplateSettings.dns.useSystemHosts
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsStrategy: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.queryStrategy : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.dns.queryStrategy = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsServers: {
+        get: function () { return this.enableDNS ? this.templateSettings.dns.servers : []; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.dns.servers = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      fakeDns: {
+        get: function () { return this.templateSettings && this.templateSettings.fakedns ? this.templateSettings.fakedns : []; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (this.enableDNS) {
+            newTemplateSettings.fakedns = newValue.length > 0 ? newValue : null;
+          } else {
+            delete newTemplateSettings.fakedns;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      }
+    },
+  });
 </script>
 {{ template "page/body_end" .}}
\ No newline at end of file