Merge pull request #381 from hamid-gh98/main

[FIX] bug logout path + [UPDATE] login UI and more ... 

37 files changed, 1342 insertions, 1202 deletions

diff --git a/web/assets/ant-design-vue@1.7.2/antd.min.css b/web/assets/ant-design-vue@1.7.2/antd.min.css
index 5f731c06..4de7fad0 100644
--- a/web/assets/ant-design-vue@1.7.2/antd.min.css
+++ b/web/assets/ant-design-vue@1.7.2/antd.min.css
@@ -992,7 +992,7 @@ to{transform:scale(0) translate(50%,-50%);opacity:0}
 .ant-menu-item>.ant-badge>a{color:rgba(0,0,0,.65)}
 .ant-menu-item>.ant-badge>a:hover{color:#1890ff}
 .ant-menu-item-divider{height:1px;overflow:hidden;line-height:0;background-color:#e8e8e8}
-.ant-menu-item-active,.ant-menu-item:hover,.ant-menu-submenu-active,.ant-menu-submenu-title:hover,.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open{color:#fff;background-image: linear-gradient(90deg,#99999980 0,#8888889e 100%);border-radius: 0.5rem}
+.ant-menu-item-active,.ant-menu-item:hover,.ant-menu-submenu-active,.ant-menu-submenu-title:hover,.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open{color:#2d2d2d;background-image: linear-gradient(90deg,#99999980 0,#8888889e 100%);border-radius: 0.5rem}
 .ant-menu-horizontal .ant-menu-item,.ant-menu-horizontal .ant-menu-submenu{margin-top:-1px}
 .ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu .ant-menu-submenu-title:hover{background-color:transparent}
 .ant-menu-item-selected,.ant-menu-item-selected>a,.ant-menu-item-selected>a:hover{color:#1890ff}
diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 718e87f8..7cdfe711 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -1,5 +1,23 @@
-#app {
+html,
+body {
     height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+#app {
+    height: 100%;
+    min-height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
 }
 
 .ant-space {
@@ -180,12 +198,12 @@
 
 .ant-card-dark:hover {
     border-color: #e8e8e8;
-    box-shadow: 0 1px 10px -1px rgb(154 175 238);
+    box-shadow: 0 1px 10px -1px rgb(76, 88, 126);
 }
 
-.ant-card-bordered:hover {
-    /*box-shadow: 0 3px 12px -0.8px #0000005c;*/
-}
+/* .ant-card-bordered:hover {
+    box-shadow: 0 3px 12px -0.8px #0000005c;
+} */
 
 .ant-card-dark .ant-table-thead th {
     color: hsla(0,0%,100%,.65);
@@ -203,6 +221,7 @@
 .ant-card-dark .ant-input-group-addon {
     color: hsla(0,0%,100%,.65);
     background-color: #262f3d;
+    border: 1px solid rgb(0 150 112 / 0%);
 }
 
 .ant-card-dark .ant-list-item-meta-title,
diff --git a/web/assets/js/axios-init.js b/web/assets/js/axios-init.js
index bd55c3cf..b864b714 100644
--- a/web/assets/js/axios-init.js
+++ b/web/assets/js/axios-init.js
@@ -2,7 +2,7 @@ axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 axios.interceptors.request.use(
-    config => {
+    (config) => {
         if (config.data instanceof FormData) {
             config.headers['Content-Type'] = 'multipart/form-data';
         } else {
@@ -12,5 +12,5 @@ axios.interceptors.request.use(
         }
         return config;
     },
-    error => Promise.reject(error)
+    (error) => Promise.reject(error),
 );
diff --git a/web/assets/js/langs.js b/web/assets/js/langs.js
index e83b05f3..9e1f0911 100644
--- a/web/assets/js/langs.js
+++ b/web/assets/js/langs.js
@@ -1,41 +1,41 @@
 const supportLangs = [
     {
-       name : "English",
-       value : "en-US",
-       icon : "🇺🇸"
+        name: 'English',
+        value: 'en-US',
+        icon: '🇺🇸',
     },
     {
-        name : "Farsi",
-        value : "fa_IR",
-        icon : "🇮🇷"
+        name: 'Farsi',
+        value: 'fa_IR',
+        icon: '🇮🇷',
     },
     {
-        name : "汉语",
-        value : "zh-Hans",
-        icon : "🇨🇳"
+        name: '汉语',
+        value: 'zh-Hans',
+        icon: '🇨🇳',
     },
     {
-        name : "Russian",
-        value : "ru_RU",
-        icon : "🇷🇺"
+        name: 'Russian',
+        value: 'ru_RU',
+        icon: '🇷🇺',
     },
-]
+];
 
-function getLang(){
-    let lang = getCookie('lang')
+function getLang() {
+    let lang = getCookie('lang');
 
-    if (! lang){
-        if (window.navigator){
+    if (!lang) {
+        if (window.navigator) {
             lang = window.navigator.language || window.navigator.userLanguage;
 
-            if (isSupportLang(lang)){
-                setCookie('lang' , lang , 150)
-            }else{
-                setCookie('lang' , 'en-US' , 150)
+            if (isSupportLang(lang)) {
+                setCookie('lang', lang, 150);
+            } else {
+                setCookie('lang', 'en-US', 150);
                 window.location.reload();
             }
-        }else{
-            setCookie('lang' , 'en-US' , 150)
+        } else {
+            setCookie('lang', 'en-US', 150);
             window.location.reload();
         }
     }
@@ -43,47 +43,21 @@ function getLang(){
     return lang;
 }
 
-function setLang(lang){
-
-    if (!isSupportLang(lang)){
+function setLang(lang) {
+    if (!isSupportLang(lang)) {
         lang = 'en-US';
     }
 
-    setCookie('lang' , lang , 150)
+    setCookie('lang', lang, 150);
     window.location.reload();
 }
 
-function isSupportLang(lang){
-    for (l of supportLangs){
-        if (l.value === lang){
+function isSupportLang(lang) {
+    for (l of supportLangs) {
+        if (l.value === lang) {
             return true;
         }
     }
 
     return false;
 }
-
-
-
-function getCookie(cname) {
-    let name = cname + "=";
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for(let i = 0; i <ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
-        }
-    }
-    return "";
-}
-
-function setCookie(cname, cvalue, exdays) {
-    const d = new Date();
-    d.setTime(d.getTime() + (exdays*24*60*60*1000));
-    let expires = "expires="+ d.toUTCString();
-    document.cookie =  cname + "=" + cvalue + ";" + expires + ";path=/";
-}
\ No newline at end of file
diff --git a/web/assets/js/util/common.js b/web/assets/js/util/common.js
index b3ebc0bd..808b1ba9 100644
--- a/web/assets/js/util/common.js
+++ b/web/assets/js/util/common.js
@@ -56,14 +56,37 @@ function toFixed(num, n) {
     return Math.round(num * n) / n;
 }
 
-function debounce (fn, delay) {
-    var timeoutID = null
+function debounce(fn, delay) {
+    var timeoutID = null;
     return function () {
-      clearTimeout(timeoutID)
-      var args = arguments
-      var that = this
-      timeoutID = setTimeout(function () {
-        fn.apply(that, args)
-      }, delay)
+        clearTimeout(timeoutID);
+        var args = arguments;
+        var that = this;
+        timeoutID = setTimeout(function () {
+            fn.apply(that, args);
+        }, delay);
+    };
+}
+
+function getCookie(cname) {
+    let name = cname + '=';
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
     }
-  }
\ No newline at end of file
+    return '';
+}
+
+function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
+    let expires = 'expires=' + d.toUTCString();
+    document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
+}
diff --git a/web/assets/js/util/date-util.js b/web/assets/js/util/date-util.js
index 24e08879..651101d8 100644
--- a/web/assets/js/util/date-util.js
+++ b/web/assets/js/util/date-util.js
@@ -128,14 +128,13 @@ Date.prototype.formatDateTime = function (split = ' ') {
 };
 
 class DateUtil {
-
     // 字符串转 Date 对象
     static parseDate(str) {
         return new Date(str.replace(/-/g, '/'));
     }
 
     static formatMillis(millis) {
-        return moment(millis).format('YYYY-M-D H:m:s')
+        return moment(millis).format('YYYY-M-D H:m:s');
     }
 
     static firstDayOfMonth() {
@@ -144,4 +143,4 @@ class DateUtil {
         date.setMinTime();
         return date;
     }
-}
\ No newline at end of file
+}
diff --git a/web/assets/js/util/utils.js b/web/assets/js/util/utils.js
index 9c441537..28891cd4 100644
--- a/web/assets/js/util/utils.js
+++ b/web/assets/js/util/utils.js
@@ -68,13 +68,11 @@ class HttpUtil {
 }
 
 class PromiseUtil {
-
     static async sleep(timeout) {
         await new Promise(resolve => {
             setTimeout(resolve, timeout)
         });
     }
-
 }
 
 const seq = [
@@ -95,7 +93,6 @@ const shortIdSeq = [
 ];
 
 class RandomUtil {
-
     static randomIntRange(min, max) {
         return parseInt(Math.random() * (max - min) + min, 10);
     }
@@ -153,8 +150,8 @@ class RandomUtil {
     static randomText() {
         var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
         var string = '';
-        var len = 6 + Math.floor(Math.random() * 5)
-        for(var ii=0; ii<len; ii++){
+        var len = 6 + Math.floor(Math.random() * 5);
+        for (var ii = 0; ii < len; ii++) {
             string += chars[Math.floor(Math.random() * chars.length)];
         }
         return string;
@@ -162,11 +159,11 @@ class RandomUtil {
 
     static randowShortId() {
         let str = '';
-        str += this.randomShortIdSeq(8)
+        str += this.randomShortIdSeq(8);
         return str;
     }
-    
-    static randomShadowsocksPassword(){
+
+    static randomShadowsocksPassword() {
         let array = new Uint8Array(32);
         window.crypto.getRandomValues(array);
         return btoa(String.fromCharCode.apply(null, array));
@@ -174,7 +171,6 @@ class RandomUtil {
 }
 
 class ObjectUtil {
-
     static getPropIgnoreCase(obj, prop) {
         for (const name in obj) {
             if (!obj.hasOwnProperty(name)) {
@@ -322,5 +318,4 @@ class ObjectUtil {
         }
         return true;
     }
-
 }
diff --git a/web/html/common/prompt_modal.html b/web/html/common/prompt_modal.html
index 4b8a13d0..17a65ec1 100644
--- a/web/html/common/prompt_modal.html
+++ b/web/html/common/prompt_modal.html
@@ -1,7 +1,7 @@
 {{define "promptModal"}}
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
          :closable="true" @ok="promptModal.ok" :mask-closable="false"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"
@@ -36,12 +36,12 @@
         },
         confirm() {},
         open({
-                title='',
-                type='text',
-                value='',
-                okText='{{ i18n "sure"}}',
-                confirm=() => {},
-            }) {
+            title = '',
+            type = 'text',
+            value = '',
+            okText = '{{ i18n "sure"}}',
+            confirm = () => {},
+        }) {
             this.title = title;
             this.type = type;
             this.value = value;
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index f492dabb..2bd2f00f 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,10 +1,12 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :footer="null"
          width="300px">
-    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >{{ i18n "pages.inbounds.clickOnQRcode" }}</a-tag>
+    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
+        {{ i18n "pages.inbounds.clickOnQRcode" }}
+    </a-tag>
     <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%;"></canvas>
 </a-modal>
 
@@ -19,7 +21,7 @@
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', dbInbound=new DBInbound(), copyText='') {
+        show: function (title = '', content = '', dbInbound = new DBInbound(), copyText = '') {
             this.title = title;
             this.content = content;
             this.dbInbound = dbInbound;
diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
index ce77d0ca..1514051b 100644
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -1,7 +1,7 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
          :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
     <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
               :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
@@ -21,7 +21,7 @@
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', fileName='') {
+        show: function (title = '', content = '', fileName = '') {
             this.title = title;
             this.content = content;
             this.fileName = fileName;
diff --git a/web/html/login.html b/web/html/login.html
index 2f4cb3e6..1b6478de 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -18,6 +18,12 @@
         border-radius: 30px;
     }
 
+    .ant-input-group-addon {
+        border-radius: 0 30px 30px 0;
+        width: 50px;
+        font-size: 18px;
+    }
+
     .ant-input-affix-wrapper .ant-input-prefix {
         left: 23px;
     }
@@ -26,20 +32,26 @@
         padding-left: 50px;
     }
 
-    .selectLang{
+    .centered {
         display: flex;
         text-align: center;
+        align-items: center;
         justify-content: center;
     }
 
+    .title {
+        font-size: 32px;
+        font-weight: bold;
+    }
+
 </style>
 <body>
-<a-layout id="app" v-cloak>
+<a-layout id="app" v-cloak :class="themeSwitcher.darkClass">
     <transition name="list" appear>
         <a-layout-content>
             <a-row type="flex" justify="center">
                 <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
-                    <h1>{{ i18n "pages.login.title" }}</h1>
+                    <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                 </a-col>
             </a-row>
             <a-row type="flex" justify="center">
@@ -48,35 +60,33 @@
                         <a-form-item>
                             <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
                                      @keydown.enter.native="login" autofocus>
-                                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
+                                <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
                             </a-input>
                         </a-form-item>
                         <a-form-item>
-                            <a-input type="password" v-model.trim="user.password"
-                                     placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
-                            </a-input>
+                            <password-input icon="lock" v-model.trim="user.password"
+                                            placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
+                            </password-input>
                         </a-form-item>
                         <a-form-item v-if="secretEnable">
-                            <a-input type="text" placeholder='{{ i18n "secretToken" }}' v-model.trim="user.loginSecret" @keydown.enter.native="login">
-                            <a-icon slot="prefix" type="key" style="color: rgba(0,0,0,.25)"/>
+                            <password-input icon="key" v-model.trim="user.loginSecret"
+                                            placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
+                            </password-input>
                         </a-input>
                         </a-form-item>
                         <a-form-item>
-                            <a-button block @click="login" :loading="loading">{{ i18n "login" }}</a-button>
+                            <a-row justify="center" class="centered">
+                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+                                          :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
+                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
+                                </a-button>
+                            </a-row>
                         </a-form-item>
                         <a-form-item>
-
-                            <a-row justify="center" class="selectLang">
-                                <a-col :span="5"><span>Language :</span></a-col>
-
-                                <a-col :span="7">
-                                    <a-select
-                                            ref="selectLang"
-                                            v-model="lang"
-                                            @change="setLang(lang)"
-                                    >
-                                        <a-select-option  :value="l.value" label="English" v-for="l in supportLangs" >
+                            <a-row justify="center" class="centered">
+                                <a-col :span="12">
+                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
+                                        <a-select-option :value="l.value" label="English" 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>
@@ -84,6 +94,11 @@
                                 </a-col>
                             </a-row>
                         </a-form-item>
+                        <a-form-item>
+                            <a-row justify="center" class="centered">
+                                <theme-switch />
+                            </a-row>
+                        </a-form-item>
                     </a-form>
                 </a-col>
             </a-row>
@@ -91,24 +106,24 @@
     </transition>
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
+{{template "component/password" .}}
 <script>
-    const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
-    const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
-    const deg = RandomUtil.randomIntRange(0, 360);
-    const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
-    document.querySelector('#app').style.background = background;
+
     const app = new Vue({
         delimiters: ['[[', ']]'],
         el: '#app',
         data: {
+            themeSwitcher,
             loading: false,
             user: new User(),
             secretEnable: false,
-            lang : ""
+            lang: ""
         },
-        created(){
-          this.lang = getLang();
-          this.secretEnable = this.getSecretStatus();
+        created() {
+            this.updateBackground();
+            this.lang = getLang();
+            this.secretEnable = this.getSecretStatus();
         },
         methods: {
             async login() {
@@ -120,16 +135,29 @@
                 }
             },
             async getSecretStatus() {
-                this.loading= true;
+                this.loading = true;
                 const msg = await HttpUtil.post('/getSecretStatus');
                 this.loading = false;
-                if (msg.success){
+                if (msg.success) {
                     this.secretEnable = msg.obj;
                     return msg.obj;
                 }
-            }
-        }
+            },
+            updateBackground() {
+                const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
+                const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
+                const deg = RandomUtil.randomIntRange(0, 360);
+                const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
+                document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
+            },
+        },
+        watch: {
+            'themeSwitcher.isDarkTheme'(newVal, oldVal) {
+                this.updateBackground();
+            },
+        },
     });
+
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index d35d7278..076579a9 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -1,11 +1,11 @@
 {{define "clientsBulkModal"}}
 <a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title" @ok="clientsBulkModal.ok"
          :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
     <a-form layout="inline">
         <a-form-item label='{{ i18n "pages.client.method" }}'>
-            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <a-select-option :value="0">Random</a-select-option>
                 <a-select-option :value="1">Random+Prefix</a-select-option>
                 <a-select-option :value="2">Random+Prefix+Num</a-select-option>
@@ -71,20 +71,20 @@
         </a-form-item>
         <br>
         <a-form-item v-if="clientsBulkModal.inbound.xtls" label="Flow">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <a-select-option value="">{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
         </a-form-item>
         <a-form-item v-if="clientsBulkModal.inbound.canEnableTlsFlow()" label="Flow" layout="inline">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
         </a-form-item>
         <a-form-item>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                 <a-tooltip>
                     <template slot="title">
                         0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -104,7 +104,7 @@
               
                
                    
                        contacts: admin@thfree.ru
                    
                
                
                    
                        mirrors for living