v0.4.1

add Xray stop & Xray restart into web

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Set up Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: '1.20'
       - name: build linux amd64 version
@@ -50,7 +50,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Set up Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: '1.20'
       - name: build linux arm64 version
@@ -90,7 +90,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Set up Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: '1.20'
       - name: build linux s390x version

README.md

@@ -11,6 +11,7 @@ xray panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese)**
 | Features        | Enable?           |
 | ------------- |:-------------:|
 | Multi-lang | :heavy_check_mark: |
+| Dark/Light Theme | :heavy_check_mark: |
 | Search in deep | :heavy_check_mark: |
 | Inbound Multi User | :heavy_check_mark: |
 | Multi User Traffic & Expiration time | :heavy_check_mark: |
@@ -24,6 +25,7 @@ xray panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese)**
 
 - System Status Monitoring
 - Search within all inbounds and clients
+- Support Dark/Light theme UI
 - Support multi-user multi-protocol, web page visualization operation
 - Supported protocols: vmess, vless, trojan, shadowsocks, dokodemo-door, socks, http
 - Support for configuring more transport configurations
@@ -36,6 +38,7 @@ xray panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese)**
 # Screenshot from Inbouds page
 
 ![inbounds](./media/inbounds.png)
+![Dark inbounds](./media/inbounds-dark.png)
 
 # Install & Upgrade
 
@@ -65,8 +68,6 @@ systemctl restart x-ui
 
 ## Install using docker
 
-> This docker tutorial and docker image are provided by [alireza0](https://github.com/alireza0)
-
 1. install docker
 
 ```shell
@@ -77,7 +78,9 @@ curl -fsSL https://get.docker.com | sh
 
 ```shell
 mkdir x-ui && cd x-ui
-docker run -itd --network=host \
+docker run -itd \
+    -p 54321:54321 -p 443:443 -p 80:80 \
+    -e XRAY_VMESS_AEAD_FORCED=false \
     -v $PWD/db/:/etc/x-ui/ \
     -v $PWD/cert/:/root/cert/ \
     --name x-ui --restart=unless-stopped \
@@ -113,8 +116,8 @@ certbot certonly --standalone --register-unsafely-without-email --non-interactiv
 X-UI supports daily traffic notification, panel login reminder and other functions through the Tg robot. To use the Tg robot, you need to apply for the specific application tutorial. You can refer to the [blog](https://coderfan.net/how-to-use-telegram-bot-to-alarm-you-when-someone-login-into-your-vps.html)
 Set the robot-related parameters in the panel background, including:
 
-- Tg Robot Token
-- Tg Robot ChatId
+- Tg robot Token
+- Tg robot ChatId
 - Tg robot cycle runtime, in crontab syntax
 - Tg robot Expiration threshold
 - Tg robot Traffic threshold
@@ -135,8 +138,9 @@ Reference syntax:
 - CPU threshold notification
 - Threshold for Expiration time and Traffic to report in advance
 - Support client report if client's telegram username is added to the end of `email` like 'test123@telegram_username'
+- Support telegram traffic report searched with UID (VMESS/VLESS) or Password (TROJAN) - anonymously
 - Menu based bot
-- Search client by email
+- Search client by email ( only admin )
 - Check all inbounds
 - Check server status
 - Check Exhausted users

config/version

@@ -1 +1 @@
-0.4.0
+0.4.1

web/assets/css/custom.css

@@ -149,4 +149,121 @@
 .deactive-client .ant-collapse-header{
     color:rgb(255, 255, 255) !important;
     background-color: rgb(255, 127, 127);
+}
+
+.ant-table-tbody>tr>td,
+.ant-table-thead>tr>th{
+    padding:16px;
+}
+
+.ant-card-dark {
+    color: hsla(0,0%,100%,.65);
+    background-color: #001529;
+    border-color:rgba(0,0,0,.09);
+}
+
+.ant-card-dark:hover {
+    border-color: #e8e8e8;
+}
+
+.ant-card-dark .ant-table-thead th {
+    color: hsla(0,0%,100%,.65);
+    background-color: #000c17;
+}
+
+.ant-card-dark .ant-table-tbody tr td,
+.ant-card-dark .ant-modal-title {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-collapse-content,
+.ant-card-dark .ant-calendar,
+.ant-card-dark .ant-table-placeholder {
+    color: hsla(0,0%,100%,.65);
+    background-color: #001529;
+}
+
+.ant-card-dark .ant-list-item-meta-title,
+.ant-card-dark .ant-list-item-meta-description,
+.ant-card-dark .ant-form-item-label>label,
+.ant-card-dark .ant-form-item,
+.ant-card-dark .ant-divider-inner-text,
+.ant-card-dark .ant-modal-confirm-content,
+.ant-card-dark .ant-modal-confirm-title,
+.ant-card-dark .ant-progress-text,
+.ant-card-dark .ant-modal-close,
+.ant-card-dark i,
+.ant-card-dark .ant-select-dropdown-menu-item,
+.ant-card-dark .ant-calendar-month-select,
+.ant-card-dark .ant-calendar-year-select,
+.ant-card-dark .ant-calendar-date,
+.ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header,
+.ant-card-dark .ant-empty-normal {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
+.ant-card-dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
+.ant-card-dark .ant-calendar-date:hover {
+    background-color: #004488;
+}
+
+.ant-card-dark tbody .ant-table-expanded-row {
+    color: hsla(0,0%,100%,.65);
+    background-color: #023366; 
+}
+
+.ant-card-dark .ant-input,
+.ant-card-dark .ant-input-number,
+.ant-card-dark .ant-calendar-input,
+.ant-card-dark .ant-select-dropdown-menu-item-selected,
+.ant-card-dark .ant-select-selection {
+    color: hsla(0,0%,100%,.65);
+    background-color: #023366;
+}
+
+.ant-card-dark .ant-collapse-item {
+    color: hsla(0,0%,100%,.65);
+    background-color: #000c17;
+}
+
+.ant-card-dark .ant-modal-content,
+.ant-card-dark .ant-modal-body,
+.ant-card-dark .ant-modal-header,
+.ant-card-dark .ant-calendar-selected-day .ant-calendar-date {
+    color: hsla(0,0%,100%,.65);
+    background-color: #1C262D; 
+}
+
+.client-table-header {
+    background-color: #f0f2f5;
+}
+
+.client-table-odd-row {
+    background-color: #fafafa;
+}
+
+.ant-card-dark .client-table-header {
+    background-color:  #023366;
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .client-table-odd-row {
+    color: hsla(0,0%,100%,.65);
+    background-color: #1C262D;
+}
+
+.ant-card-dark .ant-calendar-last-month-cell .ant-calendar-date,
+.ant-card-dark .ant-calendar-next-month-btn-day .ant-calendar-date {
+    color: hsla(0,0%,100%,.30);
+}
+
+.ant-drawer-dark {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-drawer-dark .ant-drawer-wrapper-body,
+.ant-drawer-dark .drawer-handle {
+    background-color: #001529;
+    border: 1px solid hsla(0,0%,100%,.30);
 }

web/assets/js/model/xray.js

@@ -92,6 +92,12 @@ const UTLS_FINGERPRINT = {
     UTLS_RANDOMIZED: "randomized",
 };
 
+const ALPN_OPTION = {
+    H2: "h2",
+    HTTP1: "http/1.1",
+    BOTH: "h2,http/1.1",
+};
+
 Object.freeze(Protocols);
 Object.freeze(VmessMethods);
 Object.freeze(SSMethods);
@@ -101,6 +107,7 @@ Object.freeze(XTLS_FLOW_CONTROL);
 Object.freeze(TLS_FLOW_CONTROL);
 Object.freeze(TLS_VERSION_OPTION);
 Object.freeze(TLS_CIPHER_OPTION);
+Object.freeze(ALPN_OPTION);
 
 class XrayCommonClass {
 
@@ -471,7 +478,8 @@ class TlsStreamSettings extends XrayCommonClass {
                 maxVersion = TLS_VERSION_OPTION.TLS13,
                 cipherSuites = '',
                 certificates=[new TlsStreamSettings.Cert()],
-                alpn=["h2", "http/1.1"]) {
+                alpn=[''],
+                settings=[new TlsStreamSettings.Settings()]) {
         super();
         this.server = serverName;
         this.minVersion = minVersion;
@@ -479,6 +487,7 @@ class TlsStreamSettings extends XrayCommonClass {
         this.cipherSuites = cipherSuites;
         this.certs = certificates;
         this.alpn = alpn;
+        this.settings = settings;
     }
 
     addCert(cert) {
@@ -491,17 +500,23 @@ class TlsStreamSettings extends XrayCommonClass {
 
     static fromJson(json={}) {
         let certs;
+        let settings;
         if (!ObjectUtil.isEmpty(json.certificates)) {
             certs = json.certificates.map(cert => TlsStreamSettings.Cert.fromJson(cert));
         }
 
+		if (!ObjectUtil.isEmpty(json.settings)) {
+            let values = json.settings[0];
+            settings = [new TlsStreamSettings.Settings(values.allowInsecure , values.fingerprint, values.serverName)];
+        }
         return new TlsStreamSettings(
             json.serverName,
             json.minVersion,
             json.maxVersion,
             json.cipherSuites,
             certs,
-            json.alpn
+            json.alpn,
+            settings,
         );
     }
 
@@ -512,7 +527,8 @@ class TlsStreamSettings extends XrayCommonClass {
             maxVersion: this.maxVersion,
             cipherSuites: this.cipherSuites,
             certificates: TlsStreamSettings.toJsonArray(this.certs),
-            alpn: this.alpn
+            alpn: this.alpn,
+            settings: TlsStreamSettings.toJsonArray(this.settings),
         };
     }
 }
@@ -558,6 +574,29 @@ TlsStreamSettings.Cert = class extends XrayCommonClass {
     }
 };
 
+TlsStreamSettings.Settings = class extends XrayCommonClass {
+    constructor(insecure = false, fingerprint = '', serverName = '') {
+        super();
+        this.inSecure = insecure;
+        this.fingerprint = fingerprint;
+        this.serverName = serverName;
+    }
+    static fromJson(json = {}) {
+        return new TlsStreamSettings.Settings(
+            json.allowInsecure,
+            json.fingerprint,
+            json.servername,
+        );
+    }
+    toJson() {
+        return {
+            allowInsecure: this.inSecure,
+            fingerprint: this.fingerprint,
+            serverName: this.serverName,
+        };
+    }
+};
+
 class StreamSettings extends XrayCommonClass {
     constructor(network='tcp',
                 security='none',
@@ -920,7 +959,7 @@ class Inbound extends XrayCommonClass {
         }
     }
 
-    //this is used for xtls-rprx-vison
+    //this is used for xtls-rprx-vision
     canEnableTlsFlow() {
         if ((this.stream.security === 'tls') && (this.network === "tcp")) {
             switch (this.protocol) {
@@ -1053,12 +1092,7 @@ class Inbound extends XrayCommonClass {
         const type = this.stream.network;
         const params = new Map();
         params.set("type", this.stream.network);
-        if (this.xtls) {
-            params.set("security", "xtls");
-            address = this.stream.tls.server;
-        } else {
-            params.set("security", this.stream.security);
-        }
+        params.set("security", this.stream.security);
         switch (type) {
             case "tcp":
                 const tcp = this.stream.tcp;
@@ -1104,16 +1138,27 @@ class Inbound extends XrayCommonClass {
                 break;
         }
 
-        if (this.stream.security === 'tls') {
+        if (this.tls) {
+            params.set("fp" , this.stream.tls.settings[0]['fingerprint']);
+            params.set("alpn", this.stream.tls.alpn[0]);
             if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
                 address = this.stream.tls.server;
-                params.set("sni", address);
+			}
+            if (this.stream.tls.settings[0]['serverName'] !== ''){
+                params.set("sni", this.stream.tls.settings[0]['serverName']);
+            }
+            if (type === "tcp" && this.settings.vlesses[clientIndex].flow.length > 0) {
+                params.set("flow", this.settings.vlesses[clientIndex].flow);
             }
-            params.set("flow", this.settings.vlesses[clientIndex].flow);
         }
 
         if (this.xtls) {
-            params.set("flow", this.settings.vlesses[clientIndex].flow);
+            if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
+                address = this.stream.tls.server;
+                if (type === "tcp") {
+                    params.set("flow", this.settings.vlesses[clientIndex].flow);
+                }
+            }
         }
 
         const link = `vless://${uuid}@${address}:${port}`;
@@ -1145,11 +1190,7 @@ class Inbound extends XrayCommonClass {
         const type = this.stream.network;
         const params = new Map();
         params.set("type", this.stream.network);
-        if (this.xtls) {
-            params.set("security", "xtls");
-        } else {
-            params.set("security", this.stream.security);
-        }
+        params.set("security", this.stream.security);
         switch (type) {
             case "tcp":
                 const tcp = this.stream.tcp;
@@ -1195,16 +1236,26 @@ class Inbound extends XrayCommonClass {
                 break;
         }
 
-        if (this.stream.security === 'tls') {
+        if (this.tls) {
+            params.set("fp" , this.stream.tls.settings[0]['fingerprint']);
+            params.set("alpn", this.stream.tls.alpn[0]);
             if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
                 address = this.stream.tls.server;
-                params.set("sni", address);
             }
-            params.set("flow", this.settings.trojans[clientIndex].flow);
+            if (this.stream.tls.settings[0]['serverName'] !== ''){
+                params.set("sni", this.stream.tls.settings[0]['serverName']);
+			}
         }
-        if (this.xtls) {
-            params.set("flow", this.settings.trojans[clientIndex].flow);
+
+		if (this.xtls) {
+            if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
+                address = this.stream.tls.server;
+                if (type === "tcp" && this.settings.trojans[clientIndex].flow.length > 0) {
+                    params.set("flow", this.settings.trojans[clientIndex].flow);
+                }
+			}
         }
+
         const link = `trojan://${settings.trojans[clientIndex].password}@${address}:${this.port}#${encodeURIComponent(remark)}`;
         const url = new URL(link);
         for (const [key, value] of params) {

web/controller/server.go

@@ -34,6 +34,8 @@ func (a *ServerController) initRouter(g *gin.RouterGroup) {
 	g.Use(a.checkLogin)
 	g.POST("/status", a.status)
 	g.POST("/getXrayVersion", a.getXrayVersion)
+	g.POST("/stopXrayService", a.stopXrayService)
+	g.POST("/restartXrayService", a.restartXrayService)
 	g.POST("/installXray/:version", a.installXray)
 }
 
@@ -83,3 +85,23 @@ func (a *ServerController) installXray(c *gin.Context) {
 	err := a.serverService.UpdateXray(version)
 	jsonMsg(c, I18n(c, "install")+" xray", err)
 }
+
+func (a *ServerController) stopXrayService(c *gin.Context) {
+        a.lastGetStatusTime = time.Now()
+	err := a.serverService.StopXrayService()
+	if err != nil {
+		jsonMsg(c, "", err)
+		return
+	}
+	jsonMsg(c, "Xray stoped",err)
+
+}
+func (a *ServerController) restartXrayService(c *gin.Context) {
+	err := a.serverService.RestartXrayService()
+	if err != nil {
+		jsonMsg(c, "", err)
+		return
+	}
+	jsonMsg(c, "Xray restarted",err)
+
+}

web/html/common/prompt_modal.html

@@ -1,6 +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 : ''"
          :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"

web/html/common/qrcode_modal.html

@@ -1,6 +1,7 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true" width="300px" :ok-text="qrModal.okText"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          cancel-text='{{ i18n "close" }}' :ok-button-props="{attrs:{id:'qr-modal-ok-btn'}}">
          <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>
@@ -31,15 +32,13 @@
             }
             this.visible = true;
             qrModalApp.$nextTick(() => {
-                if (this.clipboard === null) {
-                    this.clipboard = new ClipboardJS('#qr-modal-ok-btn', {
-                        text: () => this.copyText,
-                    });
-                    this.clipboard.on('success', () => {
-                        app.$message.success('{{ i18n "copied" }}')
-                        this.clipboard.destroy();
-                    });
-                }
+                this.clipboard = new ClipboardJS('#qr-modal-ok-btn', {
+                    text: () => this.copyText,
+                });
+                this.clipboard.on('success', () => {
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.clipboard.destroy();
+                });
                 if (this.qrcode === null) {
                     this.qrcode = new QRious({
                         element: document.querySelector('#qrCode'),

web/html/common/text_modal.html

@@ -1,6 +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 : ''"
          :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)" :download="txtModal.fileName">

web/html/xui/client_bulk_modal.html

@@ -1,10 +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 : ''"
          :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">
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                 <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>
@@ -57,7 +58,8 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                            v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
+                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                           v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
     </a-form>
 </a-modal>

web/html/xui/client_modal.html

@@ -1,6 +1,7 @@
 {{define "clientsModal"}}
 <a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
          :confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/client"}}
 </a-modal>

web/html/xui/common_sider.html

@@ -33,27 +33,50 @@
 
 
 {{define "commonSider"}}
-<a-layout-sider id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <a-menu theme="dark" mode="inline" :selected-keys="['{{ .request_uri }}']"
+<a-layout-sider :theme="siderDrawer.theme" id="sider" collapsible breakpoint="md" collapsed-width="0">
+    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+        <a-menu-item mode="inline">
+            <a-icon type="bg-colors"></a-icon>
+            <a-switch :default-checked="siderDrawer.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="siderDrawer.changeTheme()"></a-switch>
+        </a-menu-item>
+    </a-menu>
+    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
             @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
 </a-layout-sider>
 <a-drawer id="sider-drawer" placement="left" :closable="false"
           @close="siderDrawer.close()"
-          :visible="siderDrawer.visible" :wrap-style="{ padding: 0 }">
+          :visible="siderDrawer.visible"
+          :wrap-class-name="siderDrawer.isDarkTheme ? 'ant-drawer-dark' : ''"
+          :wrap-style="{ padding: 0 }">
     <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
         <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
     </div>
-    <a-menu theme="light" mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+        <a-menu-item mode="inline">
+            <a-icon type="bg-colors"></a-icon>
+            <a-switch :default-checked="siderDrawer.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="siderDrawer.changeTheme()"></a-switch>
+        </a-menu-item>
+    </a-menu>
+    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
         @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
 </a-drawer>
 <script>
-
+    const darkClass = "ant-card-dark";
+    const bgDarkStyle = "background-color: #1C262D";
     const siderDrawer = {
         visible: false,
+        collapsed: false,
+        isDarkTheme: localStorage.getItem("dark-mode") === 'true' ? true : false,
         show() {
             this.visible = true;
         },
@@ -62,6 +85,16 @@
         },
         change() {
             this.visible = !this.visible;
+        },
+        toggleCollapsed() {
+            this.collapsed = !this.collapsed;
+        },
+        changeTheme() {
+            this.isDarkTheme = ! this.isDarkTheme;
+            localStorage.setItem("dark-mode", this.isDarkTheme);
+        },
+        get theme() {
+            return this.isDarkTheme ? 'dark' : 'light';
         }
     };
 

web/html/xui/form/client.html

@@ -25,7 +25,7 @@
         <a-input type="number" v-model.number="client.alterId"></a-input>
     </a-form-item>
     <a-form-item v-if="inbound.xtls" label="flow">
-        <a-select v-model="client.flow" style="width: 150px">
+        <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <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>
@@ -48,7 +48,7 @@
         </span>
         <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
         <template v-if="isEdit && clientStats">
-            {{ i18n "usage" }}: 
+            <span>{{ i18n "usage" }}:</span>
             <a-tag :color="statsColor">
                 [[ sizeFormat(clientStats.up) ]] / 
                 [[ sizeFormat(clientStats.down) ]]
@@ -67,7 +67,8 @@
             </a-tooltip>
         </span>
         <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                        v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
+                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                       v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
         <a-tag color="red" v-if="isExpiry">Expired</a-tag>
     </a-form-item>
 </a-form>

web/html/xui/form/inbound.html

@@ -8,7 +8,7 @@
         <a-switch v-model="dbInbound.enable"></a-switch>
     </a-form-item>
     <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit">
+        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -50,6 +50,7 @@
             </a-tooltip>
         </span>
         <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                        v-model="dbInbound._expiryTime" style="width: 300px;"></a-date-picker>
     </a-form-item>
 </a-form>

web/html/xui/form/protocol/dokodemo.html

@@ -7,7 +7,7 @@
         <a-input type="number" v-model.number="inbound.settings.port"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;">
+        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option value="tcp,udp">tcp+udp</a-select-option>
             <a-select-option value="tcp">tcp</a-select-option>
             <a-select-option value="udp">udp</a-select-option>

web/html/xui/form/protocol/shadowsocks.html

@@ -1,7 +1,7 @@
 {{define "form/shadowsocks"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "encryption" }}'>
-        <a-select v-model="inbound.settings.method" style="width: 165px;">
+        <a-select v-model="inbound.settings.method" style="width: 165px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -9,7 +9,7 @@
         <a-input v-model.trim="inbound.settings.password"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;">
+        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option value="tcp,udp">tcp+udp</a-select-option>
             <a-select-option value="tcp">tcp</a-select-option>
             <a-select-option value="udp">udp</a-select-option>

web/html/xui/form/protocol/trojan.html

@@ -20,7 +20,7 @@
             <a-input v-model.trim="client.password"></a-input>
         </a-form-item>
         <a-form-item v-if="inbound.xtls" label="flow">
-            <a-select v-model="client.flow" style="width: 150px">
+            <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                 <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>
@@ -48,17 +48,18 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                            v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
+                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                           v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
     </a-collapse-panel>
 </a-collapse>
 <a-collapse v-else>
     <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
         <table width="100%">
-            <tr style="background-color: lightgrey;">
+            <tr class="client-table-header">
                 <th v-for="col in Object.keys(inbound.settings.trojans[0]).slice(0, 3)">[[ col ]]</th>
             </tr>
-            <tr v-for="(client, index) in inbound.settings.trojans" :style="[ index % 2 == 1 ? {'background-color': '#fafafa'} : {}]">
+            <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
                 <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
             </tr>
         </table>

web/html/xui/form/protocol/vless.html

@@ -20,13 +20,13 @@
             <a-input v-model.trim="client.id"></a-input>
         </a-form-item>
 		<a-form-item v-if="inbound.xtls" label="flow">
-            <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px">
+            <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                 <a-select-option value="" selected>{{ 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-else-if="inbound.canEnableTlsFlow()" label="flow" layout="inline">
-            <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px">
+            <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                 <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>
@@ -54,6 +54,7 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                            v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
     </a-collapse-panel>
@@ -61,10 +62,10 @@
 <a-collapse v-else>
     <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
         <table width="100%">
-            <tr style="background-color: lightgrey;">
+            <tr class="client-table-header">
                 <th v-for="col in Object.keys(inbound.settings.vlesses[0]).slice(0, 3)">[[ col ]]</th>
             </tr>
-            <tr v-for="(client, index) in inbound.settings.vlesses" :style="[ index % 2 == 1 ? {'background-color': '#fafafa'} : {}]">
+            <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
                 <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
             </tr>
         </table>

web/html/xui/form/protocol/vmess.html

@@ -45,6 +45,7 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                            v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
     </a-collapse-panel>
@@ -52,10 +53,10 @@
 <a-collapse v-else>
     <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vmesses.length">
         <table width="100%">
-            <tr style="background-color: lightgrey;">
+            <tr class="client-table-header">
                 <th v-for="col in Object.keys(inbound.settings.vmesses[0]).slice(0, 3)">[[ col ]]</th>
             </tr>
-            <tr v-for="(client, index) in inbound.settings.vmesses" :style="[ index % 2 == 1 ? {'background-color': '#fafafa'} : {}]">
+            <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
                 <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
             </tr>
         </table>

web/html/xui/form/stream/stream_kcp.html

@@ -1,7 +1,7 @@
 {{define "form/streamKCP"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;">
+        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option value="none">none（not camouflage）</a-select-option>
             <a-select-option value="srtp">srtp（camouflage video call）</a-select-option>
             <a-select-option value="utp">utp（camouflage BT download）</a-select-option>

web/html/xui/form/stream/stream_quic.html

@@ -1,7 +1,7 @@
 {{define "form/streamQUIC"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
-        <a-select v-model="inbound.stream.quic.security" style="width: 165px;">
+        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option value="none">none</a-select-option>
             <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
             <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
@@ -11,7 +11,7 @@
         <a-input v-model.trim="inbound.stream.quic.key"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.quic.type" style="width: 280px;">
+        <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option value="none">none（not camouflage）</a-select-option>
             <a-select-option value="srtp">srtp（camouflage video call）</a-select-option>
             <a-select-option value="utp">utp（camouflage BT download）</a-select-option>

web/html/xui/form/stream/stream_settings.html

@@ -2,7 +2,7 @@
 <!-- select stream network -->
 <a-form layout="inline">
     <a-form-item label='{{ i18n "transmission" }}'>
-        <a-select v-model="inbound.stream.network" @change="streamNetworkChange">
+        <a-select v-model="inbound.stream.network" @change="streamNetworkChange" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
             <a-select-option value="tcp">tcp</a-select-option>
             <a-select-option value="kcp">kcp</a-select-option>
             <a-select-option value="ws">ws</a-select-option>

web/html/xui/form/tls_settings.html

@@ -12,15 +12,8 @@
 
 <!-- tls settings -->
 <a-form v-if="inbound.tls || inbound.xtls" layout="inline">
-    <a-form-item label="MinVersion">
-        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px">
-            <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item label="MaxVersion">
-        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 60px">
-            <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-        </a-select>
+    <a-form-item label="SNI" placeholder="Server Name Indication" v-if="inbound.tls">
+        <a-input v-model.trim="inbound.stream.tls.settings[0].serverName"></a-input>
     </a-form-item>
     <a-form-item label="CipherSuites">
         <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px">
@@ -28,11 +21,30 @@
             <a-select-option v-for="key in TLS_CIPHER_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
+    <a-form-item label="MinVersion">
+        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item label="MaxVersion">
+        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item label="uTLS" v-if="inbound.tls" >
+        <a-select v-model="inbound.stream.tls.settings[0].fingerprint" style="width: 135px">
+            <a-select-option value=''>None</a-select-option>
+            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
     <a-form-item label='{{ i18n "domainName" }}'>
         <a-input v-model.trim="inbound.stream.tls.server"></a-input>
     </a-form-item>
-    <a-form-item label="alpn" placeholder="http/1.1,h2">
-        <a-input v-model.trim="inbound.stream.tls.alpn"></a-input>
+    <a-form-item label="Alpn" v-if="inbound.tls">
+        <a-select v-model="inbound.stream.tls.alpn[0]" style="width:200px">
+            <a-select-option value=''>auto</a-select-option>
+            <a-select-option v-for="key in ALPN_OPTION" :value="key">[[ key ]]</a-select-option>
+        </a-select>
     </a-form-item>
     <a-form-item label='{{ i18n "certificate" }}'>
         <a-radio-group v-model="inbound.stream.tls.certs[0].useFile" button-style="solid">
@@ -42,18 +54,18 @@
     </a-form-item>
     <template v-if="inbound.stream.tls.certs[0].useFile">
         <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].certFile"></a-input>
+            <a-input v-model.trim="inbound.stream.tls.certs[0].certFile" style="width:300px;"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile"></a-input>
+            <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile" style="width:300px;"></a-input>
         </a-form-item>
     </template>
     <template v-else>
         <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-            <a-input type="textarea" :rows="2" v-model="inbound.stream.tls.certs[0].cert"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].cert"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
-            <a-input type="textarea" :rows="2" v-model="inbound.stream.tls.certs[0].key"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].key"></a-input>
         </a-form-item>
     </template>
 </a-form>

web/html/xui/inbound_info_modal.html

@@ -3,6 +3,7 @@
     v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
     :closable="true"
     :mask-closable="true"
+    :class="siderDrawer.isDarkTheme ? darkClass : ''"
     :footer="null"
     width="600px"
     >
@@ -211,7 +212,7 @@
                 return this.infoModal.inbound;
             },
             get isEnable() {
-                if(infoModal.clientStats.length){
+                if(infoModal.clientStats){
                     return infoModal.clientStats.enable;
                 }
                 return infoModal.dbInbound.isEnable;

web/html/xui/inbound_modal.html

@@ -1,6 +1,7 @@
 {{define "inboundModal"}}
 <a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title" @ok="inModal.ok"
          :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/inbound"}}
 </a-modal>

web/html/xui/inbounds.html

@@ -11,11 +11,15 @@
     .ant-col-sm-24 {
         margin-top: 10px;
     }
+
+    .ant-table-row-expand-icon {
+        color: rgba(0,0,0,.65);
+    }
 </style>
 <body>
 <a-layout id="app" v-cloak>
     {{ template "commonSider" . }}
-    <a-layout id="content-layout">
+    <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
         <a-layout-content>
             <a-spin :spinning="spinning" :delay="500" tip="loading">
                 <transition name="list" appear>
@@ -24,7 +28,7 @@
                     </a-tag>
                 </transition>
                 <transition name="list" appear>
-                    <a-card hoverable style="margin-bottom: 20px;">
+                    <a-card hoverable style="margin-bottom: 20px;" :class="siderDrawer.isDarkTheme ? darkClass : ''">
                         <a-row>
                             <a-col :xs="24" :sm="24" :lg="12">
                                 {{ i18n "pages.inbounds.totalDownUp" }}:
@@ -48,7 +52,7 @@
                     </a-card>
                 </transition>
                 <transition name="list" appear>
-                    <a-card hoverable>
+                    <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                         <div slot="title">
                             <a-button type="primary" icon="plus" @click="openAddInbound">{{ i18n "pages.inbounds.addInbound" }}</a-button>
                             <a-button type="primary" icon="export" @click="exportAllLinks">{{ i18n "pages.inbounds.export" }}</a-button>
@@ -63,7 +67,7 @@
                             <template slot="action" slot-scope="text, dbInbound">
                                 <a-dropdown :trigger="['click']">
                                     <a-icon @click="e => e.preventDefault()" type="menu"></a-icon>
-                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)">
+                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="siderDrawer.theme" style="border: 1px solid rgba(255, 255, 255, 0.65);">
                                         <a-menu-item v-if="dbInbound.isSS" key="qrcode">
                                             <a-icon type="qrcode"></a-icon>
                                             {{ i18n "qrCode" }}
@@ -195,11 +199,11 @@
         title: '{{ i18n "pages.inbounds.port" }}',
         align: 'center',
         dataIndex: "port",
-        width: 30,
+        width: 50,
     }, {
         title: '{{ i18n "pages.inbounds.traffic" }}↑|↓',
         align: 'center',
-        width: 150,
+        width: 120,
         scopedSlots: { customRender: 'traffic' },
     }, {
         title: '{{ i18n "pages.inbounds.transportConfig" }}',
@@ -214,19 +218,19 @@
     }];
 
     const innerColumns = [
-        { title: '{{ i18n "pages.inbounds.operate" }}', width: 60, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 80, scopedSlots: { customRender: 'actions' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 80, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 70, scopedSlots: { customRender: 'traffic' } },
         { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
-        { title: 'UID', width: 150, dataIndex: "id" },
+        { title: 'UID', width: 120, dataIndex: "id" },
     ];
 
     const innerTrojanColumns = [
-        { title: '{{ i18n "pages.inbounds.operate" }}', width: 60, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 80, scopedSlots: { customRender: 'actions' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 80, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 70, scopedSlots: { customRender: 'traffic' } },
         { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
-        { title: 'Password', width: 150, dataIndex: "password" },
+        { title: 'Password', width: 120, dataIndex: "password" },
     ];
 
     const app = new Vue({
@@ -451,6 +455,7 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
+                    class: siderDrawer.isDarkTheme ? darkClass : '',
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => {
@@ -465,6 +470,7 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                     content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
+                    class: siderDrawer.isDarkTheme ? darkClass : '',
                     okText: '{{ i18n "delete"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/xui/inbound/del/' + dbInboundId),
@@ -484,6 +490,7 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                     content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
+                    class: siderDrawer.isDarkTheme ? darkClass : '',
                     okText: '{{ i18n "delete"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/xui/inbound/delClient/' + client.email, data),
@@ -527,6 +534,7 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
+                    class: siderDrawer.isDarkTheme ? darkClass : '',
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/xui/inbound/' + dbInboundId + '/resetClientTraffic/'+ client.email),

web/html/xui/index.html

@@ -11,28 +11,34 @@
     .ant-col-sm-24 {
         margin-top: 10px;
     }
+
+    .ant-card-dark h2 {
+        color: hsla(0,0%,100%,.65);
+    }
 </style>
 <body>
 <a-layout id="app" v-cloak>
     {{ template "commonSider" . }}
-    <a-layout id="content-layout">
+    <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
         <a-layout-content>
             <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
             <transition name="list" appear>
                 <a-row>
-                    <a-card hoverable>
+                    <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                         <a-row>
                             <a-col :sm="24" :md="12">
                                 <a-row>
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.cpu.color"
+                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                     :percent="status.cpu.percent"></a-progress>
                                         <div>CPU</div>
                                     </a-col>
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.mem.color"
+                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                     :percent="status.mem.percent"></a-progress>
                                         <div>
                                             {{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
@@ -45,6 +51,7 @@
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.swap.color"
+                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                     :percent="status.swap.percent"></a-progress>
                                         <div>
                                             swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
@@ -53,6 +60,7 @@
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.disk.color"
+                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                     :percent="status.disk.percent"></a-progress>
                                         <div>
                                             {{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
@@ -67,7 +75,7 @@
             <transition name="list" appear>
                 <a-row>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                             {{ i18n "pages.index.xrayStatus" }}:
                             <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
                             <a-tooltip v-if="status.xray.state === State.Error">
@@ -77,11 +85,13 @@
                                 <a-icon type="question-circle" theme="filled"></a-icon>
                             </a-tooltip>
                             <a-tag color="green" @click="openSelectV2rayVersion">[[ status.xray.version ]]</a-tag>
-                            <a-tag color="blue" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch"}}</a-tag>
+                            <a-tag color="blue" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
+                            <a-tag color="blue" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>                    
+                            <a-tag color="blue" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                             {{ i18n "pages.index.operationHours" }}:
                             <a-tag color="#87d068">[[ formatSecond(status.uptime) ]]</a-tag>
                             <a-tooltip>
@@ -93,12 +103,12 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                             {{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                             tcp / udp {{ i18n "pages.index.connectionCount" }}: [[ status.tcpCount ]] / [[ status.udpCount ]]
                             <a-tooltip>
                                 <template slot="title">
@@ -109,7 +119,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="arrow-up"></a-icon>
@@ -135,7 +145,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="cloud-upload"></a-icon>
@@ -166,6 +176,7 @@
     </a-layout>
     <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
              :closable="true" @ok="() => versionModal.visible = false"
+             :class="siderDrawer.isDarkTheme ? darkClass : ''"
              ok-text='{{ i18n "confirm" }}' cancel-text='{{ i18n "cancel"}}'>
         <h2>{{ i18n "pages.index.xraySwitchClick"}}</h2>
         <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
@@ -307,6 +318,7 @@
                     title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}',
                     content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`,
                     okText: '{{ i18n "confirm"}}',
+                    class: siderDrawer.isDarkTheme ? darkClass : '',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: async () => {
                         versionModal.hide();
@@ -316,6 +328,24 @@
                     },
                 });
             },
+	        //here add stop xray function
+            async stopXrayService() {
+                this.loading(true);
+                const msg = await HttpUtil.post('server/stopXrayService');
+                this.loading(false);
+                if (!msg.success) {
+                    return;
+                }
+            },
+            //here add restart xray function
+            async restartXrayService() {
+                this.loading(true);
+                const msg = await HttpUtil.post('server/restartXrayService');
+                this.loading(false);
+                if (!msg.success) {
+                    return;
+                }
+            },
         },
         async mounted() {
             while (true) {

web/html/xui/setting.html

@@ -20,14 +20,14 @@
         display: block;
     }
 
-    .ant-tabs-top-bar {
+    :not(.ant-card-dark)>.ant-tabs-top-bar {
         background: white;
     }
 </style>
 <body>
 <a-layout id="app" v-cloak>
     {{ template "commonSider" . }}
-    <a-layout id="content-layout">
+    <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
         <a-layout-content>
             <a-spin :spinning="spinning" :delay="500" tip="loading">
                 <a-space direction="vertical">
@@ -35,17 +35,17 @@
                         <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.setting.save" }}</a-button>
                         <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.setting.restartPanel" }}</a-button>
                     </a-space>
-                    <a-tabs default-active-key="1">
+                    <a-tabs default-active-key="1" :class="siderDrawer.isDarkTheme ? darkClass : ''">
                         <a-tab-pane key="1" tab='{{ i18n "pages.setting.panelConfig"}}'>
 
-                            <a-list item-layout="horizontal" style="background: white">
+                            <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
                                 <setting-list-item type="text" title='{{ i18n "pages.setting.panelListeningIP"}}' desc='{{ i18n "pages.setting.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
                                 <setting-list-item type="number" title='{{ i18n "pages.setting.panelPort"}}' desc='{{ i18n "pages.setting.panelPortDesc"}}' v-model.number="allSetting.webPort"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.setting.publicKeyPath"}}' desc='{{ i18n "pages.setting.publicKeyPathDesc"}}' v-model="allSetting.webCertFile"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.setting.privateKeyPath"}}' desc='{{ i18n "pages.setting.privateKeyPathDesc"}}' v-model="allSetting.webKeyFile"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.setting.panelUrlPath"}}' desc='{{ i18n "pages.setting.panelUrlPathDesc"}}' v-model="allSetting.webBasePath"></setting-list-item>
                                 <a-list-item>
-                                    <a-row  style="padding: 20px">
+                                    <a-row style="padding: 20px">
                                         <a-col :lg="24" :xl="12">
                                             <a-list-item-meta title="Language"/>
                                         </a-col>
@@ -56,9 +56,10 @@
                                                         ref="selectLang"
                                                         v-model="lang"
                                                         @change="setLang(lang)"
+                                                        :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                                                         style="width: 100%"
                                                 >
-                                                    <a-select-option  :value="l.value" label="China" v-for="l in supportLangs" >
+                                                    <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>
@@ -71,7 +72,7 @@
                             </a-list>
                         </a-tab-pane>
                         <a-tab-pane key="2" tab='{{ i18n "pages.setting.userSetting"}}'>
-                            <a-form style="background: white; padding: 20px">
+                            <a-form :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65); padding: 20px;': 'background: white; padding: 20px;'">
                                 <a-form-item label='{{ i18n "pages.setting.oldUsername"}}'>
                                     <a-input v-model="user.oldUsername" style="max-width: 300px"></a-input>
                                 </a-form-item>
@@ -93,7 +94,7 @@
                             </a-form>
                         </a-tab-pane>
                         <a-tab-pane key="3" tab='{{ i18n "pages.setting.xrayConfiguration"}}'>
-                            <a-list item-layout="horizontal" style="background: white">
+                            <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
                                 <setting-list-item type="switch" title='{{ i18n "pages.setting.xrayConfigTorrent"}}' desc='{{ i18n "pages.setting.xrayConfigTorrentDesc"}}'  v-model="torrentSettings"></setting-list-item>
                                 <setting-list-item type="switch" title='{{ i18n "pages.setting.xrayConfigPrivateIp"}}' desc='{{ i18n "pages.setting.xrayConfigPrivateIpDesc"}}'  v-model="privateIpSettings"></setting-list-item>
                                 <a-divider>{{ i18n "pages.setting.advancedTemplate"}}</a-divider>
@@ -113,10 +114,10 @@
                             </a-list>
                         </a-tab-pane>
                         <a-tab-pane key="4" tab='{{ i18n "pages.setting.TGReminder"}}'>
-                            <a-list item-layout="horizontal" style="background: white">
+                            <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
                                 <setting-list-item type="switch" title='{{ i18n "pages.setting.telegramBotEnable" }}' desc='{{ i18n "pages.setting.telegramBotEnableDesc" }}'  v-model="allSetting.tgBotEnable"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.setting.telegramToken"}}' desc='{{ i18n "pages.setting.telegramTokenDesc"}}'  v-model="allSetting.tgBotToken"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.setting.telegramChatId"}}' desc='{{ i18n "pages.setting.telegramChatIdDesc"}}'  v-model.number="allSetting.tgBotChatId"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.setting.telegramChatId"}}' desc='{{ i18n "pages.setting.telegramChatIdDesc"}}'  v-model.number="allSetting.tgBotChatId"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.setting.telegramNotifyTime"}}' desc='{{ i18n "pages.setting.telegramNotifyTimeDesc"}}'  v-model="allSetting.tgRunTime"></setting-list-item>
                                 <setting-list-item type="switch" title='{{ i18n "pages.setting.tgNotifyBackup" }}' desc='{{ i18n "pages.setting.tgNotifyBackupDesc" }}'  v-model="allSetting.tgBotBackup"></setting-list-item>
                                 <setting-list-item type="number" title='{{ i18n "pages.setting.tgNotifyExpireTimeDiff" }}' desc='{{ i18n "pages.setting.tgNotifyExpireTimeDiffDesc" }}'  v-model="allSetting.tgExpireDiff" :min="0"></setting-list-item>
@@ -125,7 +126,7 @@
                             </a-list>
                         </a-tab-pane>
                         <a-tab-pane key="5" tab='{{ i18n "pages.setting.otherSetting"}}'>
-                            <a-list item-layout="horizontal" style="background: white">
+                            <a-list item-layout="horizontal" :style="siderDrawer.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
                                 <setting-list-item type="text" title='{{ i18n "pages.setting.timeZonee"}}' desc='{{ i18n "pages.setting.timeZoneDesc"}}' v-model="allSetting.timeLocation"></setting-list-item>
                             </a-list>
                         </a-tab-pane>

web/service/config.json

@@ -1,7 +1,6 @@
 {
   "log": {
-    "loglevel": "warning", 
-    "access": "./access.log"
+    "loglevel": "warning"
   },
  
   "api": {

web/service/inbound.go

@@ -319,12 +319,18 @@ func (s *InboundService) UpdateInboundClient(inbound *model.Inbound, index int)
 
 	if len(clients[index].Email) > 0 {
 		if len(oldClients[index].Email) > 0 {
-			s.UpdateClientStat(oldClients[index].Email, &clients[index])
+			err = s.UpdateClientStat(oldClients[index].Email, &clients[index])
+			if err != nil {
+				return err
+			}
 		} else {
 			s.AddClientStat(inbound.Id, &clients[index])
 		}
 	} else {
-		s.DelClientStat(db, oldClients[index].Email)
+		err = s.DelClientStat(db, oldClients[index].Email)
+		if err != nil {
+			return err
+		}
 	}
 	return db.Save(oldInbound).Error
 }
@@ -396,7 +402,6 @@ func (s *InboundService) AddClientTraffic(traffics []*xray.ClientTraffic) (err e
 		if err != nil {
 			if err == gorm.ErrRecordNotFound {
 				logger.Warning(err, traffic.Email)
-
 			}
 			continue
 		}
@@ -424,7 +429,6 @@ func (s *InboundService) AddClientTraffic(traffics []*xray.ClientTraffic) (err e
 			logger.Warning("AddClientTraffic update data ", err)
 			continue
 		}
-
 	}
 	return
 }
@@ -528,3 +532,42 @@ func (s *InboundService) GetClientTrafficByEmail(email string) (traffic []*xray.
 	}
 	return traffics, err
 }
+
+func (s *InboundService) SearchClientTraffic(query string) (traffic *xray.ClientTraffic, err error) {
+	db := database.GetDB()
+	inbound := &model.Inbound{}
+	traffic = &xray.ClientTraffic{}
+
+	err = db.Model(model.Inbound{}).Where("settings like ?", "%\""+query+"\"%").First(inbound).Error
+	if err != nil {
+		if err == gorm.ErrRecordNotFound {
+			logger.Warning(err)
+			return nil, err
+		}
+	}
+	traffic.InboundId = inbound.Id
+
+	// get settings clients
+	settings := map[string][]model.Client{}
+	json.Unmarshal([]byte(inbound.Settings), &settings)
+	clients := settings["clients"]
+	for _, client := range clients {
+		if client.ID == query && client.Email != "" {
+			traffic.Email = client.Email
+			break
+		}
+		if client.Password == query && client.Email != "" {
+			traffic.Email = client.Email
+			break
+		}
+	}
+	if traffic.Email == "" {
+		return nil, err
+	}
+	err = db.Model(xray.ClientTraffic{}).Where("email = ?", traffic.Email).First(traffic).Error
+	if err != nil {
+		logger.Warning(err)
+		return nil, err
+	}
+	return traffic, err
+}

web/service/server.go

@@ -198,6 +198,30 @@ func (s *ServerService) GetXrayVersions() ([]string, error) {
 	return versions, nil
 }
 
+func (s *ServerService) StopXrayService() (string error) {
+
+        err := s.xrayService.StopXray()
+                if err != nil {
+                        logger.Error("stop xray failed:", err)
+                        return err
+                }
+
+	return nil
+}
+
+func (s *ServerService) RestartXrayService() (string error) {
+
+        s.xrayService.StopXray()
+        defer func() {
+                err := s.xrayService.RestartXray(true)
+                if err != nil {
+                        logger.Error("start xray failed:", err)
+		}
+        }()
+
+	return nil
+}
+
 func (s *ServerService) downloadXRay(version string) (string, error) {
 	osName := runtime.GOOS
 	arch := runtime.GOARCH

web/service/tgbot.go

@@ -131,7 +131,7 @@ func (t *Tgbot) answerCommand(message *tgbotapi.Message, chatId int64, isAdmin b
 		if isAdmin {
 			t.searchClient(chatId, message.CommandArguments())
 		} else {
-			msg = "🚫 Insufficient privilege"
+			t.searchForClient(chatId, message.CommandArguments())
 		}
 	default:
 		msg = "❗ Unknown command"
@@ -162,6 +162,8 @@ func (t *Tgbot) asnwerCallback(callbackQuery *tgbotapi.CallbackQuery, isAdmin bo
 		t.sendBackup(callbackQuery.From.ID)
 	case "client_traffic":
 		t.getClientUsage(callbackQuery.From.ID, callbackQuery.From.UserName)
+	case "client_commands":
+		t.SendMsgToTgbot(callbackQuery.From.ID, "To search for statistics, just use folowing command:\r\n \r\n<code>/usage [UID|Passowrd]</code>\r\n \r\nUse UID for vmess and vless and Password for Trojan.")
 	case "commands":
 		t.SendMsgToTgbot(callbackQuery.From.ID, "To search for a client email, just use folowing command:\r\n \r\n<code>/usage email</code>")
 	}
@@ -193,6 +195,7 @@ func (t *Tgbot) SendAnswer(chatId int64, msg string, isAdmin bool) {
 	var numericKeyboardClient = tgbotapi.NewInlineKeyboardMarkup(
 		tgbotapi.NewInlineKeyboardRow(
 			tgbotapi.NewInlineKeyboardButtonData("Get Usage", "client_traffic"),
+			tgbotapi.NewInlineKeyboardButtonData("Commands", "client_commands"),
 		),
 	)
 	msgConfig := tgbotapi.NewMessage(chatId, msg)
@@ -420,6 +423,37 @@ func (t *Tgbot) searchClient(chatId int64, email string) {
 	}
 }
 
+func (t *Tgbot) searchForClient(chatId int64, query string) {
+	traffic, err := t.inboundService.SearchClientTraffic(query)
+	if err != nil {
+		logger.Warning(err)
+		msg := "❌ Something went wrong!"
+		t.SendMsgToTgbot(chatId, msg)
+		return
+	}
+	if traffic == nil {
+		msg := "No result!"
+		t.SendMsgToTgbot(chatId, msg)
+		return
+	}
+	expiryTime := ""
+	if traffic.ExpiryTime == 0 {
+		expiryTime = "♾Unlimited"
+	} else {
+		expiryTime = time.Unix((traffic.ExpiryTime / 1000), 0).Format("2006-01-02 15:04:05")
+	}
+	total := ""
+	if traffic.Total == 0 {
+		total = "♾Unlimited"
+	} else {
+		total = common.FormatTraffic((traffic.Total))
+	}
+	output := fmt.Sprintf("💡 Active: %t\r\n📧 Email: %s\r\n🔼 Upload↑: %s\r\n🔽 Download↓: %s\r\n🔄 Total: %s / %s\r\n📅 Expire in: %s\r\n",
+		traffic.Enable, traffic.Email, common.FormatTraffic(traffic.Up), common.FormatTraffic(traffic.Down), common.FormatTraffic((traffic.Up + traffic.Down)),
+		total, expiryTime)
+	t.SendMsgToTgbot(chatId, output)
+}
+
 func (t *Tgbot) getExhausted() string {
 	trDiff := int64(0)
 	exDiff := int64(0)

web/translation/translate.en_US.toml

@@ -69,6 +69,8 @@
 "memory" = "Memory"
 "hard" = "Hard disk"
 "xrayStatus" = "xray Status"
+"stopXray" = "Stop xray"
+"restartXray" = "Restart xray"
 "xraySwitch" = "Switch Version"
 "xraySwitchClick" = "Click on the version you want to switch"
 "xraySwitchClickDesk" = "Please choose carefully, older versions may have incompatible configurations"

web/translation/translate.fa_IR.toml

@@ -69,6 +69,8 @@
 "memory" = "حافظه رم"
 "hard" = "حافظه دیسک"
 "xrayStatus" = "وضعیت Xray"
+"stopXray" = "توقف xray"
+"restartXray" = "شروع مجدد xray"
 "xraySwitch" = "تغییر ورژن"
 "xraySwitchClick" = "ورژن مورد نظر را انتخاب کنید"
 "xraySwitchClickDesk" = "لطفا با دقت انتخاب کنید ، در صورت انتخاب اشتباه امکان قطعی سیستم وجود دارد ."

web/translation/translate.zh_Hans.toml

@@ -69,6 +69,8 @@
 "memory" = "内存"
 "hard" = "硬盘"
 "xrayStatus" = "xray 状态"
+"stopXray" = "停止 Xray"
+"restartXray" = "重启 Xray"
 "xraySwitch" = "切换版本"
 "xraySwitchClick" = "点击你想切换的版本"
 "xraySwitchClickDesk" = "请谨慎选择，旧版本可能配置不兼容"