From fb02a9a89a6e74f573aeeda2a04a9130ce0c1a64 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Thu, 6 Mar 2025 09:47:27 +0000
Subject: [PATCH] chore: replace settings list with settings collapse panels

---
 web/html/xui/settings.html           | 928 ++++++++++++++-------------
 web/translation/translate.en_US.toml |  10 +-
 web/translation/translate.es_ES.toml |  10 +-
 web/translation/translate.fa_IR.toml |  10 +-
 web/translation/translate.id_ID.toml |  10 +-
 web/translation/translate.ja_JP.toml |  10 +-
 web/translation/translate.pt_BR.toml |  10 +-
 web/translation/translate.ru_RU.toml |  10 +-
 web/translation/translate.tr_TR.toml |  10 +-
 web/translation/translate.uk_UA.toml |  10 +-
 web/translation/translate.vi_VN.toml |  10 +-
 web/translation/translate.zh_CN.toml |  10 +-
 web/translation/translate.zh_TW.toml |  10 +-
 13 files changed, 574 insertions(+), 474 deletions(-)

diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index c3a83235..176e5558 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -108,154 +108,158 @@
               </a-row>
             </a-card>
             <a-tabs default-active-key="1">
-              <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings"}}'>
-                <a-list item-layout="horizontal" split="false">
-                  <a-setting-list-item>
-                    <template #title>
-                      {{ i18n "pages.settings.remarkModel"}}
-                    </template>
-                    <template #description>
-                      {{ i18n "pages.settings.sampleRemark"}}: <i>#[[ remarkSample ]]</i>
-                    </template>
-                    <template #control>
-                      <a-input-group style="width: 100%;">
-                        <a-select style="padding-right: .5rem; min-width: 80%; width: auto;"
-                            mode="multiple"
-                            v-model="remarkModel"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                          <a-select-option v-for="(value, key) in remarkModels" :value="key">[[ value ]]</a-select-option>
+              <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings" }}' style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>
+                        {{ i18n "pages.settings.remarkModel"}}
+                      </template>
+                      <template #description>
+                        {{ i18n "pages.settings.sampleRemark"}}: <i>#[[ remarkSample ]]</i>
+                      </template>
+                      <template #control>
+                        <a-input-group style="width: 100%;">
+                          <a-select style="padding-right: .5rem; min-width: 80%; width: auto;"
+                              mode="multiple"
+                              v-model="remarkModel"
+                              :dropdown-class-name="themeSwitcher.currentTheme">
+                            <a-select-option v-for="(value, key) in remarkModels" :value="key">[[ value ]]</a-select-option>
+                          </a-select>
+                          <a-select style="width: 20%;" v-model="remarkSeparator" :dropdown-class-name="themeSwitcher.currentTheme">
+                            <a-select-option v-for="key in remarkSeparators" :value="key">[[ key ]]</a-select-option>
+                          </a-select>
+                        </a-input-group>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelListeningIP"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelListeningIPDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webListen"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelListeningDomain"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelListeningDomainDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webDomain"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelPort"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelPortDesc"}}</template>
+                      <template #control>
+                        <a-input-number :min="1" :min="65531" v-model="allSetting.webPort" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelUrlPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelUrlPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webBasePath"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.sessionMaxAge" }}</template>
+                      <template #description>{{ i18n "pages.settings.sessionMaxAgeDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="60" v-model="allSetting.sessionMaxAge" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.pageSize" }}</template>
+                      <template #description>{{ i18n "pages.settings.pageSizeDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="0" step="5" v-model="allSetting.pageSize" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>Language</template>
+                      <template #control>
+                        <a-select ref="selectLang"
+                            v-model="lang"
+                            @change="setLang(lang)"
+                            :dropdown-class-name="themeSwitcher.currentTheme"
+                            style="width: 100%">
+                          <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
+                            <span role="img" :aria-label="l.name" v-text="l.icon"></span> &nbsp;&nbsp; <span v-text="l.name"></span>
+                          </a-select-option>
                         </a-select>
-                        <a-select style="width: 20%;" v-model="remarkSeparator" :dropdown-class-name="themeSwitcher.currentTheme">
-                          <a-select-option v-for="key in remarkSeparators" :value="key">[[ key ]]</a-select-option>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.notifications" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.expireTimeDiff" }}</template>
+                      <template #description>{{ i18n "pages.settings.expireTimeDiffDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="0" v-model="allSetting.expireDiff" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.trafficDiff" }}</template>
+                      <template #description>{{ i18n "pages.settings.trafficDiffDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="0" v-model="allSetting.trafficDiff" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.certs" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.publicKeyPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.publicKeyPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webCertFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.privateKeyPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.privateKeyPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webKeyFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.externalTraffic" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.externalTrafficInformEnable"}}</template>
+                      <template #description>{{ i18n "pages.settings.externalTrafficInformEnableDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.externalTrafficInformEnable"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.externalTrafficInformURI"}}</template>
+                      <template #description>{{ i18n "pages.settings.externalTrafficInformURIDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.externalTrafficInformURI"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.dateAndTime" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.timeZone"}}</template>
+                      <template #description>{{ i18n "pages.settings.timeZoneDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.timeLocation"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.datepicker"}}</template>
+                      <template #description>{{ i18n "pages.settings.datepickerDescription"}}</template>
+                      <template #control>
+                        <a-select style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme" v-model="datepicker">
+                          <a-select-option v-for="item in datepickerList" :value="item.value">
+                            <span v-text="item.name"></span>
+                          </a-select-option>
                         </a-select>
-                      </a-input-group>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.panelListeningIP"}}</template>
-                    <template #description>{{ i18n "pages.settings.panelListeningIPDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.webListen"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.panelListeningDomain"}}</template>
-                    <template #description>{{ i18n "pages.settings.panelListeningDomainDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.webDomain"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.panelPort"}}</template>
-                    <template #description>{{ i18n "pages.settings.panelPortDesc"}}</template>
-                    <template #control>
-                      <a-input-number :min="1" :min="65531" v-model="allSetting.webPort" style="width: 100%;"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.publicKeyPath"}}</template>
-                    <template #description>{{ i18n "pages.settings.publicKeyPathDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.webCertFile"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.privateKeyPath"}}</template>
-                    <template #description>{{ i18n "pages.settings.privateKeyPathDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.webKeyFile"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.panelUrlPath"}}</template>
-                    <template #description>{{ i18n "pages.settings.panelUrlPathDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.webBasePath"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.sessionMaxAge" }}</template>
-                    <template #description>{{ i18n "pages.settings.sessionMaxAgeDesc" }}</template>
-                    <template #control>
-                      <a-input-number :min="60" v-model="allSetting.sessionMaxAge" style="width: 100%;"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.pageSize" }}</template>
-                    <template #description>{{ i18n "pages.settings.pageSizeDesc" }}</template>
-                    <template #control>
-                      <a-input-number :min="0" step="5" v-model="allSetting.pageSize" style="width: 100%;"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.expireTimeDiff" }}</template>
-                    <template #description>{{ i18n "pages.settings.expireTimeDiffDesc" }}</template>
-                    <template #control>
-                      <a-input-number :min="0" v-model="allSetting.expireDiff" style="width: 100%;"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.trafficDiff" }}</template>
-                    <template #description>{{ i18n "pages.settings.trafficDiffDesc" }}</template>
-                    <template #control>
-                      <a-input-number :min="0" v-model="allSetting.trafficDiff" style="width: 100%;"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.externalTrafficInformEnable"}}</template>
-                    <template #description>{{ i18n "pages.settings.externalTrafficInformEnableDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="allSetting.externalTrafficInformEnable"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.externalTrafficInformURI"}}</template>
-                    <template #description>{{ i18n "pages.settings.externalTrafficInformURIDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.externalTrafficInformURI"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.timeZone"}}</template>
-                    <template #description>{{ i18n "pages.settings.timeZoneDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.timeLocation"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.datepicker"}}</template>
-                    <template #description>{{ i18n "pages.settings.datepickerDescription"}}</template>
-                    <template #control>
-                      <a-select style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme" v-model="datepicker">
-                        <a-select-option v-for="item in datepickerList" :value="item.value">
-                          <span v-text="item.name"></span>
-                        </a-select-option>
-                      </a-select>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.timeZone"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.timeLocation"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>Language</template>
-                    <template #control>
-                      <a-select ref="selectLang"
-                          v-model="lang"
-                          @change="setLang(lang)"
-                          :dropdown-class-name="themeSwitcher.currentTheme"
-                          style="width: 100%">
-                        <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
-                          <span role="img" :aria-label="l.name" v-text="l.icon"></span> &nbsp;&nbsp; <span v-text="l.name"></span>
-                        </a-select-option>
-                      </a-select>
-                    </template>
-                  </a-setting-list-item>
-                </a-list>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
-              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding-top: 20px;">
+              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings" }}' style="padding-top: 20px;">
                 <a-collapse>
                   <a-collapse-panel header='{{ i18n "pages.settings.security.admin"}}'>
                     <a-setting-list-item paddings="small">
@@ -312,313 +316,337 @@
                   </a-collapse-panel>
                 </a-collapse>
               </a-tab-pane>
-              <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings"}}'>
-                <a-list item-layout="horizontal" split="false">
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.telegramBotEnable" }}</template>
-                    <template #description>{{ i18n "pages.settings.telegramBotEnableDesc" }}</template>
-                    <template #control>
-                      <a-switch v-model="allSetting.tgBotEnable"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.telegramToken"}}</template>
-                    <template #description>{{ i18n "pages.settings.telegramTokenDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.tgBotToken"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.telegramChatId"}}</template>
-                    <template #description>{{ i18n "pages.settings.telegramChatIdDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.tgBotChatId"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.telegramNotifyTime"}}</template>
-                    <template #description>{{ i18n "pages.settings.telegramNotifyTimeDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.tgRunTime"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.tgNotifyBackup" }}</template>
-                    <template #description>{{ i18n "pages.settings.tgNotifyBackupDesc" }}</template>
-                    <template #control>
-                      <a-switch v-model="allSetting.tgBotBackup"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.tgNotifyLogin" }}</template>
-                    <template #description>{{ i18n "pages.settings.tgNotifyLoginDesc" }}</template>
-                    <template #control>
-                      <a-switch v-model="allSetting.tgBotLoginNotify"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.tgNotifyCpu" }}</template>
-                    <template #description>{{ i18n "pages.settings.tgNotifyCpuDesc" }}</template>
-                    <template #control>
-                      <a-input-number :min="0" :min="100" v-model="allSetting.tgCpu"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.telegramProxy"}}</template>
-                    <template #description>{{ i18n "pages.settings.telegramProxyDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" placeholder="socks5://user:pass@host:port" v-model="allSetting.tgBotProxy"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.telegramAPIServer"}}</template>
-                    <template #description>{{ i18n "pages.settings.telegramAPIServerDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" placeholder="https://api.example.com" v-model="allSetting.tgBotAPIServer"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>Telegram Bot Language</template>
-                    <template #control>
-                      <a-select ref="selectBotLang" v-model="allSetting.tgLang" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
-                        <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
-                          <span role="img" :aria-label="l.name" v-text="l.icon"></span> &nbsp;&nbsp; <span v-text="l.name"></span>
-                        </a-select-option>
-                      </a-select>
-                    </template>
-                  </a-setting-list-item>
-                </a-list>
+              <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings" }}' style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramBotEnable" }}</template>
+                      <template #description>{{ i18n "pages.settings.telegramBotEnableDesc" }}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.tgBotEnable"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramToken"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramTokenDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.tgBotToken"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramChatId"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramChatIdDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.tgBotChatId"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>Telegram Bot Language</template>
+                      <template #control>
+                        <a-select ref="selectBotLang" v-model="allSetting.tgLang" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
+                          <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
+                            <span role="img" :aria-label="l.name" v-text="l.icon"></span> &nbsp;&nbsp; <span v-text="l.name"></span>
+                          </a-select-option>
+                        </a-select>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.notifications" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramNotifyTime"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramNotifyTimeDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.tgRunTime"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.tgNotifyBackup" }}</template>
+                      <template #description>{{ i18n "pages.settings.tgNotifyBackupDesc" }}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.tgBotBackup"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.tgNotifyLogin" }}</template>
+                      <template #description>{{ i18n "pages.settings.tgNotifyLoginDesc" }}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.tgBotLoginNotify"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.tgNotifyCpu" }}</template>
+                      <template #description>{{ i18n "pages.settings.tgNotifyCpuDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="0" :min="100" v-model="allSetting.tgCpu"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.proxyAndServer" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramProxy"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramProxyDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="socks5://user:pass@host:port" v-model="allSetting.tgBotProxy"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramAPIServer"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramAPIServerDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="https://api.example.com" v-model="allSetting.tgBotAPIServer"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
-              <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}'>
-                <a-list item-layout="horizontal" split="false">
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subEnable"}}</template>
-                    <template #description>{{ i18n "pages.settings.subEnableDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="allSetting.subEnable"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subEncrypt"}}</template>
-                    <template #description>{{ i18n "pages.settings.subEncryptDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="allSetting.subEncrypt"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subShowInfo"}}</template>
-                    <template #description>{{ i18n "pages.settings.subShowInfoDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="allSetting.subShowInfo"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subListen"}}</template>
-                    <template #description>{{ i18n "pages.settings.subListenDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.subListen"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subDomain"}}</template>
-                    <template #description>{{ i18n "pages.settings.subDomainDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.subDomain"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subPort"}}</template>
-                    <template #description>{{ i18n "pages.settings.subPortDesc"}}</template>
-                    <template #control>
-                      <a-input-number v-model="allSetting.subPort" :min="1" :min="65531" style="width: 100%;"></a-input-number>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subPath"}}</template>
-                    <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.subPath"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subCertPath"}}</template>
-                    <template #description>{{ i18n "pages.settings.subCertPathDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.subCertFile"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subKeyPath"}}</template>
-                    <template #description>{{ i18n "pages.settings.subKeyPathDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.subKeyFile"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subURI"}}</template>
-                    <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.subURI"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subUpdates"}}</template>
-                    <template #description>{{ i18n "pages.settings.subUpdatesDesc"}}</template>
-                    <template #control>
-                      <a-input-number :min="1" v-model="allSetting.subUpdates"></a-input-number>
-                    </template>
-                  </a-setting-list-item>
-                </a-list>
+              <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}' style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subEnable"}}</template>
+                      <template #description>{{ i18n "pages.settings.subEnableDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.subEnable"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subListen"}}</template>
+                      <template #description>{{ i18n "pages.settings.subListenDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subListen"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subDomain"}}</template>
+                      <template #description>{{ i18n "pages.settings.subDomainDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subDomain"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subPort"}}</template>
+                      <template #description>{{ i18n "pages.settings.subPortDesc"}}</template>
+                      <template #control>
+                        <a-input-number v-model="allSetting.subPort" :min="1" :min="65531" style="width: 100%;"></a-input-number>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subPath"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subURI"}}</template>
+                      <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.subURI"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.information" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subEncrypt"}}</template>
+                      <template #description>{{ i18n "pages.settings.subEncryptDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.subEncrypt"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subShowInfo"}}</template>
+                      <template #description>{{ i18n "pages.settings.subShowInfoDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.subShowInfo"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.certs" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subCertPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subCertPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subCertFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subKeyPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subKeyPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subKeyFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.intervals"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subUpdates"}}</template>
+                      <template #description>{{ i18n "pages.settings.subUpdatesDesc"}}</template>
+                      <template #control>
+                        <a-input-number :min="1" v-model="allSetting.subUpdates" style="width: 100%;"></a-input-number>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
-              <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable">
-                <a-list item-layout="horizontal" split="false">
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subPath"}}</template>
-                    <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" v-model="allSetting.subJsonPath"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.subURI"}}</template>
-                    <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
-                    <template #control>
-                      <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.subJsonURI"></a-input>
-                    </template>
-                  </a-setting-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.fragment"}}</template>
-                    <template #description>{{ i18n "pages.settings.fragmentDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="fragment"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-list-item v-if="fragment" style="padding: 20px;">
-                    <a-collapse>
-                      <a-collapse-panel header='{{ i18n "pages.settings.fragmentSett"}}' v-if="fragment">
-                        <a-setting-list-item paddings="small">
-                          <template #title>Packets</template>
-                          <template #control>
-                            <a-input type="text" v-model="fragmentPackets" placeholder="1-1 | 1-3 | tlshello | ..."></a-input>
-                          </template>
-                        </a-setting-list-item>
-                        <a-setting-list-item paddings="small">
-                          <template #title>Length</template>
-                          <template #control>
-                            <a-input type="text" v-model="fragmentLength" placeholder="100-200"></a-input>
-                          </template>
-                        </a-setting-list-item>
-                        <a-setting-list-item paddings="small">
-                          <template #title>Interval</template>
-                          <template #control>
-                            <a-input type="text" v-model="fragmentInterval" placeholder="10-20"></a-input>
-                          </template>
-                        </a-setting-list-item>
-                      </a-collapse-panel>
-                    </a-collapse>
-                  </a-list-item>
-                  <a-setting-list-item>
-                    <template #title>Noises</template>
-                    <template #description>{{ i18n "pages.settings.noisesDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="noises"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-list-item v-if="noises" style="padding: 20px">
-                    <a-collapse>
-                      <a-collapse-panel v-for="(noise, index) in noisesArray" :key="index" :header="`Noise №${index + 1}`">
-                        <a-setting-list-item paddings="small">
-                          <template #title>Type</template>
-                          <template #control>
-                            <a-select :value="noise.type" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme"
-                              @change="(value) => updateNoiseType(index, value)">
-                              <a-select-option :value="p" :label="p" v-for="p in ['rand', 'base64', 'str', 'hex']" :key="p">
-                                [[ p ]] </a-select-option>
-                            </a-select>
-                          </template>
-                        </a-setting-list-item>
-                        <a-setting-list-item paddings="small">
-                          <template #title>Packet</template>
-                          <template #control>
-                            <a-input type="text" :value="noise.packet" @input="(value) => updateNoisePacket(index, event.target.value)" placeholder="5-10"></a-input>
-                          </template>
-                        </a-setting-list-item>
-                        <a-setting-list-item paddings="small">
-                          <template #title>Delay (ms)</template>
-                          <template #control>
-                            <a-input type="text" :value="noise.delay" @input="(value) => updateNoiseDelay(index, event.target.value)" placeholder="10-20"></a-input>
-                          </template>
-                        </a-setting-list-item>
-                        <a-space direction="horizontal" style="padding: 10px 20px;">
-                          <a-button v-if="noisesArray.length > 1" type="danger" @click="removeNoise(index)">Remove</a-button>
-                        </a-space>
-                      </a-collapse-panel>
-                    </a-collapse>
-                    <a-button v-if="noises" type="primary" @click="addNoise" style="margin-top: 10px">Add Noise</a-button>
-                  </a-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.mux"}}</template>
-                    <template #description>{{ i18n "pages.settings.muxDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="enableMux"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-list-item v-if="enableMux" style="padding: 20px">
-                    <a-collapse>
-                      <a-collapse-panel header='{{ i18n "pages.settings.muxSett"}}'>
-                        <a-setting-list-item paddings="small">
-                          <template #title>Concurrency</template>
-                          <template #control>
-                            <a-input-number v-model="muxConcurrency" :min="-1" :max="1024" style="width: 100%;"></a-input-number>
-                          </template>
-                        </a-setting-list-item>
-                        <a-setting-list-item paddings="small">
-                          <template #title>xudp Concurrency</template>
-                          <template #control>
-                            <a-input-number v-model="muxXudpConcurrency" :min="-1" :max="1024" style="width: 100%;"></a-input-number>
-                          </template>
-                        </a-setting-list-item>
-                        <a-setting-list-item paddings="small">
-                          <template #title>xudp UDP 443</template>
-                          <template #control>
-                            <a-select v-model="muxXudpProxyUDP443" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
-                              <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']"> [[ p ]] </a-select-option>
-                            </a-select>
-                          </template>
-                        </a-setting-list-item>
-                      </a-collapse-panel>
-                    </a-collapse>
-                  </a-list-item>
-                  <a-setting-list-item>
-                    <template #title>{{ i18n "pages.settings.direct"}}</template>
-                    <template #description>{{ i18n "pages.settings.directDesc"}}</template>
-                    <template #control>
-                      <a-switch v-model="enableDirect"></a-switch>
-                    </template>
-                  </a-setting-list-item>
-                  <a-list-item v-if="enableDirect" style="padding: 20px">
-                    <a-collapse>
-                      <a-collapse-panel header='{{ i18n "pages.settings.direct"}}'>
-                        <a-setting-list-item paddings="small">
-                          <template #title>{{ i18n "pages.xray.directips" }}</template>
-                          <template #control>
-                            <a-select mode="tags" style="width: 100%" v-model="directIPs" :dropdown-class-name="themeSwitcher.currentTheme">
-                              <a-select-option :value="p.value" :label="p.label" v-for="p in directIPsOptions">[[ p.label ]]</a-select-option>
-                            </a-select>
-                          </template>
-                        </a-setting-list-item>
-                        <a-setting-list-item paddings="small">
-                          <template #title>{{ i18n "pages.xray.directdomains" }}</template>
-                          <template #control>
-                            <a-select mode="tags" style="width: 100%" v-model="directDomains" :dropdown-class-name="themeSwitcher.currentTheme">
-                              <a-select-option :value="p.value" :label="p.label" v-for="p in diretDomainsOptions">[[ p.label ]]</a-select-option>
-                            </a-select>
-                          </template>
-                        </a-setting-list-item>
-                      </a-collapse-panel>
-                    </a-collapse>
-                  </a-list-item>
-                </a-list>
+              <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable" style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subJsonPath"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subURI"}}</template>
+                      <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.subJsonURI"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.fragment"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.fragment"}}</template>
+                      <template #description>{{ i18n "pages.settings.fragmentDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="fragment"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="fragment" style="padding: 10px 20px;">
+                      <a-collapse>
+                        <a-collapse-panel header='{{ i18n "pages.settings.fragmentSett"}}' v-if="fragment">
+                          <a-setting-list-item paddings="small">
+                            <template #title>Packets</template>
+                            <template #control>
+                              <a-input type="text" v-model="fragmentPackets" placeholder="1-1 | 1-3 | tlshello | ..."></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Length</template>
+                            <template #control>
+                              <a-input type="text" v-model="fragmentLength" placeholder="100-200"></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Interval</template>
+                            <template #control>
+                              <a-input type="text" v-model="fragmentInterval" placeholder="10-20"></a-input>
+                            </template>
+                          </a-setting-list-item>
+                        </a-collapse-panel>
+                      </a-collapse>
+                    </a-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header="Noises">
+                    <a-setting-list-item paddings="small">
+                      <template #title>Noises</template>
+                      <template #description>{{ i18n "pages.settings.noisesDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="noises"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="noises" style="padding: 10px 20px;">
+                      <a-collapse>
+                        <a-collapse-panel v-for="(noise, index) in noisesArray" :key="index" :header="`Noise №${index + 1}`">
+                          <a-setting-list-item paddings="small">
+                            <template #title>Type</template>
+                            <template #control>
+                              <a-select :value="noise.type" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme"
+                                @change="(value) => updateNoiseType(index, value)">
+                                <a-select-option :value="p" :label="p" v-for="p in ['rand', 'base64', 'str', 'hex']" :key="p">
+                                  [[ p ]] </a-select-option>
+                              </a-select>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Packet</template>
+                            <template #control>
+                              <a-input type="text" :value="noise.packet" @input="(value) => updateNoisePacket(index, event.target.value)" placeholder="5-10"></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Delay (ms)</template>
+                            <template #control>
+                              <a-input type="text" :value="noise.delay" @input="(value) => updateNoiseDelay(index, event.target.value)" placeholder="10-20"></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-space direction="horizontal" style="padding: 10px 20px;">
+                            <a-button v-if="noisesArray.length > 1" type="danger" @click="removeNoise(index)">Remove</a-button>
+                          </a-space>
+                        </a-collapse-panel>
+                      </a-collapse>
+                      <a-button v-if="noises" type="primary" @click="addNoise" style="margin-top: 10px">Add Noise</a-button>
+                    </a-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.mux"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.mux"}}</template>
+                      <template #description>{{ i18n "pages.settings.muxDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="enableMux"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="enableMux" style="padding: 10px 20px;">
+                      <a-collapse>
+                        <a-collapse-panel header='{{ i18n "pages.settings.muxSett"}}'>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Concurrency</template>
+                            <template #control>
+                              <a-input-number v-model="muxConcurrency" :min="-1" :max="1024" style="width: 100%;"></a-input-number>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>xudp Concurrency</template>
+                            <template #control>
+                              <a-input-number v-model="muxXudpConcurrency" :min="-1" :max="1024" style="width: 100%;"></a-input-number>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>xudp UDP 443</template>
+                            <template #control>
+                              <a-select v-model="muxXudpProxyUDP443" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']"> [[ p ]] </a-select-option>
+                              </a-select>
+                            </template>
+                          </a-setting-list-item>
+                        </a-collapse-panel>
+                      </a-collapse>
+                    </a-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.direct" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.direct"}}</template>
+                      <template #description>{{ i18n "pages.settings.directDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="enableDirect"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="enableDirect" style="padding: 10px 20px;">
+                      <a-collapse>
+                        <a-collapse-panel header='{{ i18n "pages.settings.direct"}}'>
+                          <a-setting-list-item paddings="small">
+                            <template #title>{{ i18n "pages.xray.directips" }}</template>
+                            <template #control>
+                              <a-select mode="tags" style="width: 100%" v-model="directIPs" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in directIPsOptions">[[ p.label ]]</a-select-option>
+                              </a-select>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>{{ i18n "pages.xray.directdomains" }}</template>
+                            <template #control>
+                              <a-select mode="tags" style="width: 100%" v-model="directDomains" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in diretDomainsOptions">[[ p.label ]]</a-select-option>
+                              </a-select>
+                            </template>
+                          </a-setting-list-item>
+                        </a-collapse-panel>
+                      </a-collapse>
+                    </a-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
             </a-tabs>
           </a-space>
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index 46dc6d3f..563686e4 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -321,7 +321,13 @@
 "muxSett" = "Mux Settings"
 "direct" = "Direct Connection"
 "directDesc" = "Directly establishes connections with domains or IP ranges of a specific country."
-
+"notifications" = "Notifications"
+"certs" = "Certificaties"
+"externalTraffic" = "External Traffic"
+"dateAndTime" = "Date and Time"
+"proxyAndServer" = "Proxy and Server"
+"intervals" = "Intervals"
+"information" = "Information"
 
 [pages.xray]
 "title" = "Xray Configs"
@@ -462,7 +468,7 @@
 "poolSize" = "Pool Size"
 
 [pages.settings.security]
-"admin" = "Admin"
+"admin" = "Admin credentinals"
 "secret" = "Secret Token"
 "loginSecurity" = "Secure Login"
 "loginSecurityDesc" = "Adds an additional layer of authentication to provide more security."
diff --git a/web/translation/translate.es_ES.toml b/web/translation/translate.es_ES.toml
index 171f0a69..e182f8e2 100644
--- a/web/translation/translate.es_ES.toml
+++ b/web/translation/translate.es_ES.toml
@@ -321,7 +321,13 @@
 "muxSett" = "Configuración Mux"
 "direct" = "Conexión Directa"
 "directDesc" = "Establece conexiones directas con dominios o rangos de IP de un país específico."
-
+"notifications" = "Notificaciones"
+"certs" = "Certificados"
+"externalTraffic" = "Tráfico Externo"
+"dateAndTime" = "Fecha y Hora"
+"proxyAndServer" = "Proxy y Servidor"
+"intervals" = "Intervalos"
+"information" = "Información"
 
 [pages.xray]
 "title" = "Xray Configuración"
@@ -462,7 +468,7 @@
 "poolSize" = "Tamaño del grupo"
 
 [pages.settings.security]
-"admin" = "Administrador"
+"admin" = "Credenciales de administrador"
 "secret" = "Token Secreto"
 "loginSecurity" = "Seguridad de Inicio de Sesión"
 "loginSecurityDesc" = "Habilitar un paso adicional de seguridad para el inicio de sesión de usuarios."
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index ed4f69df..6e44ea59 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -321,7 +321,13 @@
 "muxSett" = "تنظیمات ماکس"
 "direct" = "اتصال مستقیم"
 "directDesc" = "به طور مستقیم با دامنه ها یا محدوده آی‌پی یک کشور خاص ارتباط برقرار می کند"
-
+"notifications" = "اعلان‌ها"
+"certs" = "گواهی‌ها"
+"externalTraffic" = "ترافیک خارجی"
+"dateAndTime" = "تاریخ و زمان"
+"proxyAndServer" = "پراکسی و سرور"
+"intervals" = "فواصل"
+"information" = "اطلاعات"
 
 [pages.xray]
 "title" = "پیکربندی ایکس‌ری"
@@ -462,7 +468,7 @@
 "poolSize" = "اندازه استخر"
 
 [pages.settings.security]
-"admin" = "مدیر"
+"admin" = "اعتبارنامه‌های ادمین"
 "secret" = "توکن مخفی"
 "loginSecurity" = "ورود ایمن"
 "loginSecurityDesc" = "یک لایه اضافی از احراز هویت برای ایجاد امنیت بیشتر اضافه می کند"
diff --git a/web/translation/translate.id_ID.toml b/web/translation/translate.id_ID.toml
index de9c1f64..abd36d1a 100644
--- a/web/translation/translate.id_ID.toml
+++ b/web/translation/translate.id_ID.toml
@@ -320,7 +320,13 @@
 "muxSett" = "Pengaturan Mux"
 "direct" = "Koneksi langsung"
 "directDesc" = "Secara langsung membuat koneksi dengan domain atau rentang IP negara tertentu."
-
+"notifications" = "Notifikasi"
+"certs" = "Sertifikat"
+"externalTraffic" = "Lalu Lintas Eksternal"
+"dateAndTime" = "Tanggal dan Waktu"
+"proxyAndServer" = "Proxy dan Server"
+"intervals" = "Interval"
+"information" = "Informasi"
 
 [pages.xray]
 "title" = "Konfigurasi Xray"
@@ -461,7 +467,7 @@
 "poolSize" = "Ukuran Kolam"
 
 [pages.settings.security]
-"admin" = "Admin"
+"admin" = "Kredensial admin"
 "secret" = "Token Rahasia"
 "loginSecurity" = "Login Aman"
 "loginSecurityDesc" = "Menambahkan lapisan otentikasi tambahan untuk memberikan keamanan lebih."
diff --git a/web/translation/translate.ja_JP.toml b/web/translation/translate.ja_JP.toml
index 7e9208fb..770824a8 100644
--- a/web/translation/translate.ja_JP.toml
+++ b/web/translation/translate.ja_JP.toml
@@ -321,7 +321,13 @@
 "muxSett" = "マルチプレクサ設定"
 "direct" = "直接接続"
 "directDesc" = "特定の国のドメインまたはIP範囲に直接接続する"
-
+"notifications" = "通知"
+"certs" = "証明書"
+"externalTraffic" = "外部トラフィック"
+"dateAndTime" = "日付と時刻"
+"proxyAndServer" = "プロキシとサーバー"
+"intervals" = "間隔"
+"information" = "情報"
 
 [pages.xray]
 "title" = "Xray 設定"
@@ -462,7 +468,7 @@
 "poolSize" = "プールサイズ"
 
 [pages.settings.security]
-"admin" = "管理者"
+"admin" = "管理者の資格情報"
 "secret" = "セキュリティトークン"
 "loginSecurity" = "ログインセキュリティ"
 "loginSecurityDesc" = "追加の認証を追加してセキュリティを向上させる"
diff --git a/web/translation/translate.pt_BR.toml b/web/translation/translate.pt_BR.toml
index 362a87ed..b54e72b2 100644
--- a/web/translation/translate.pt_BR.toml
+++ b/web/translation/translate.pt_BR.toml
@@ -321,7 +321,13 @@
 "muxSett" = "Configurações de Mux"
 "direct" = "Conexão Direta"
 "directDesc" = "Estabelece conexões diretamente com domínios ou intervalos de IP de um país específico."
-
+"notifications" = "Notificações"
+"certs" = "Certificados"
+"externalTraffic" = "Tráfego Externo"
+"dateAndTime" = "Data e Hora"
+"proxyAndServer" = "Proxy e Servidor"
+"intervals" = "Intervalos"
+"information" = "Informação"
 
 [pages.xray]
 "title" = "Configurações Xray"
@@ -462,7 +468,7 @@
 "poolSize" = "Tamanho do Pool"
 
 [pages.settings.security]
-"admin" = "Admin"
+"admin" = "Credenciais de administrador"
 "secret" = "Token Secreto"
 "loginSecurity" = "Login Seguro"
 "loginSecurityDesc" = "Adiciona uma camada extra de autenticação para fornecer mais segurança."
diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index ef423ce0..cef3c2c1 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -321,7 +321,13 @@
 "muxSett" = "Mux Настройки"
 "direct" = "Прямая связь"
 "directDesc" = "Устанавливает прямые соединения с доменами или IP-адресами определённой страны."
-
+"notifications" = "Уведомления"
+"certs" = "Сертификаты"
+"externalTraffic" = "Внешний трафик"
+"dateAndTime" = "Дата и время"
+"proxyAndServer" = "Прокси и сервер"
+"intervals" = "Интервалы"
+"information" = "Информация"
 
 [pages.xray]
 "title" = "Настройки Xray"
@@ -462,7 +468,7 @@
 "poolSize" = "Размер пула"
 
 [pages.settings.security]
-"admin" = "Админ"
+"admin" = "Учетные данные администратора"
 "secret" = "Секретный токен"
 "loginSecurity" = "Безопасность входа"
 "loginSecurityDesc" = "Включить дополнительные меры безопасности входа пользователя"
diff --git a/web/translation/translate.tr_TR.toml b/web/translation/translate.tr_TR.toml
index 3bab97e0..81c2e001 100644
--- a/web/translation/translate.tr_TR.toml
+++ b/web/translation/translate.tr_TR.toml
@@ -321,7 +321,13 @@
 "muxSett" = "Mux Ayarları"
 "direct" = "Doğrudan Bağlantı"
 "directDesc" = "Belirli bir ülkenin alan adları veya IP aralıkları ile doğrudan bağlantı kurar."
-
+"notifications" = "Bildirimler"
+"certs" = "Sertifikalar"
+"externalTraffic" = "Harici Trafik"
+"dateAndTime" = "Tarih ve Saat"
+"proxyAndServer" = "Proxy ve Sunucu"
+"intervals" = "Aralıklar"
+"information" = "Bilgi"
 
 [pages.xray]
 "title" = "Xray Yapılandırmaları"
@@ -462,7 +468,7 @@
 "poolSize" = "Havuz Boyutu"
 
 [pages.settings.security]
-"admin" = "Yönetici"
+"admin" = "Yönetici kimlik bilgileri"
 "secret" = "Gizli Anahtar"
 "loginSecurity" = "Güvenli Giriş"
 "loginSecurityDesc" = "Daha fazla güvenlik sağlamak için ek bir kimlik doğrulama katmanı ekler."
diff --git a/web/translation/translate.uk_UA.toml b/web/translation/translate.uk_UA.toml
index 05d5c854..62c81939 100644
--- a/web/translation/translate.uk_UA.toml
+++ b/web/translation/translate.uk_UA.toml
@@ -321,7 +321,13 @@
 "muxSett" = "Налаштування Mux"
 "direct" = "Пряме підключення"
 "directDesc" = "Безпосередньо встановлює з’єднання з доменами або діапазонами IP певної країни."
-
+"notifications" = "Сповіщення"
+"certs" = "Сертифікати"
+"externalTraffic" = "Зовнішній трафік"
+"dateAndTime" = "Дата та час"
+"proxyAndServer" = "Проксі та сервер"
+"intervals" = "Інтервали"
+"information" = "Інформація"
 
 [pages.xray]
 "title" = "Xray конфігурації"
@@ -462,7 +468,7 @@
 "poolSize" = "Розмір пулу"
 
 [pages.settings.security]
-"admin" = "Адміністратор"
+"admin" = "Облікові дані адміністратора"
 "secret" = "Секретний маркер"
 "loginSecurity" = "Безпечний вхід"
 "loginSecurityDesc" = "Додає додатковий рівень автентифікації для забезпечення більшої безпеки."
diff --git a/web/translation/translate.vi_VN.toml b/web/translation/translate.vi_VN.toml
index 7e5babaa..ccbcc4a6 100644
--- a/web/translation/translate.vi_VN.toml
+++ b/web/translation/translate.vi_VN.toml
@@ -321,7 +321,13 @@
 "muxSett" = "Mux Cài đặt"
 "direct" = "Kết nối trực tiếp"
 "directDesc" = "Trực tiếp thiết lập kết nối với tên miền hoặc dải IP của một quốc gia cụ thể."
-
+"notifications" = "Thông báo"
+"certs" = "Chứng chỉ"
+"externalTraffic" = "Lưu lượng bên ngoài"
+"dateAndTime" = "Ngày và giờ"
+"proxyAndServer" = "Proxy và máy chủ"
+"intervals" = "Khoảng thời gian"
+"information" = "Thông tin"
 
 [pages.xray]
 "title" = "Cài đặt Xray"
@@ -462,7 +468,7 @@
 "poolSize" = "Kích thước bể bơi"
 
 [pages.settings.security]
-"admin" = "Quản trị viên"
+"admin" = "Thông tin đăng nhập quản trị viên"
 "secret" = "Mã thông báo bí mật"
 "loginSecurity" = "Bảo mật đăng nhập"
 "loginSecurityDesc" = "Bật bước bảo mật đăng nhập bổ sung cho người dùng"
diff --git a/web/translation/translate.zh_CN.toml b/web/translation/translate.zh_CN.toml
index 9f094fdf..d1cdfaa5 100644
--- a/web/translation/translate.zh_CN.toml
+++ b/web/translation/translate.zh_CN.toml
@@ -321,7 +321,13 @@
 "muxSett" = "复用器设置"
 "direct" = "直接连接"
 "directDesc" = "直接与特定国家的域或IP范围建立连接"
-
+"notifications" = "通知"
+"certs" = "证书"
+"externalTraffic" = "外部流量"
+"dateAndTime" = "日期和时间"
+"proxyAndServer" = "代理和服务器"
+"intervals" = "间隔"
+"information" = "信息"
 
 [pages.xray]
 "title" = "Xray 配置"
@@ -462,7 +468,7 @@
 "poolSize" = "池大小"
 
 [pages.settings.security]
-"admin" = "管理员"
+"admin" = "管理员凭据"
 "secret" = "安全令牌"
 "loginSecurity" = "登录安全"
 "loginSecurityDesc" = "添加额外的身份验证以提高安全性"
diff --git a/web/translation/translate.zh_TW.toml b/web/translation/translate.zh_TW.toml
index 8796ff21..5b1de33f 100644
--- a/web/translation/translate.zh_TW.toml
+++ b/web/translation/translate.zh_TW.toml
@@ -321,7 +321,13 @@
 "muxSett" = "複用器設定"
 "direct" = "直接連線"
 "directDesc" = "直接與特定國家的域或IP範圍建立連線"
-
+"notifications" = "通知"
+"certs" = "證書"
+"externalTraffic" = "外部流量"
+"dateAndTime" = "日期和時間"
+"proxyAndServer" = "代理和伺服器"
+"intervals" = "間隔"
+"information" = "資訊"
 
 [pages.xray]
 "title" = "Xray 配置"
@@ -462,7 +468,7 @@
 "poolSize" = "池大小"
 
 [pages.settings.security]
-"admin" = "管理員"
+"admin" = "管理員憑證"
 "secret" = "安全令牌"
 "loginSecurity" = "登入安全"
 "loginSecurityDesc" = "新增額外的身份驗證以提高安全性"