Better inbounds view for multiuser

web/assets/js/model/models.js

@@ -151,9 +151,9 @@ class DBInbound {
         }
     }
 
-    genLink() {
+    genLink(clientIndex) {
         const inbound = this.toInbound();
-        return inbound.genLink(this.address, this.remark);
+        return inbound.genLink(this.address, this.remark, clientIndex);
     }
 }
 

web/assets/js/util/common.js

@@ -54,4 +54,16 @@ function addZero(num) {
 function toFixed(num, n) {
     n = Math.pow(10, n);
     return Math.round(num * n) / n;
-}
+}
+
+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)
+    }
+  }

web/html/common/qrcode_modal.html

@@ -2,26 +2,7 @@
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true" width="300px" :ok-text="qrModal.okText"
          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 v-if="qrModal.inbound.protocol != Protocols.VMESS && qrModal.inbound.protocol != Protocols.VLESS && qrModal.inbound.protocol != Protocols.TROJAN" id="qrCode" style="width: 100%; height: 100%;"></canvas>
-
-    <template v-if="qrModal.inbound.protocol === Protocols.VMESS" v-for="(vmess, index) in qrModal.inbound.settings.vmesses">
-        <a-tag color="red" style="margin-bottom: 10px;display: block;text-align: center;" v-text="vmess.email"></a-tag>
-        <canvas @click="copyTextToClipboard(`qrCode-vmess-${vmess.id}`,index)" :id="`qrCode-vmess-${vmess.id}`" style="width: 100%; height: 100%;"></canvas>
-        <a-divider style="height: 2px; background-color: #7e7e7e" />
-    </template>
-
-    <template v-if="qrModal.inbound.protocol === Protocols.VLESS" v-for="(vless, index) in qrModal.inbound.settings.vlesses">
-        <a-tag color="red" style="margin-bottom: 10px;display: block;text-align: center;" v-text="vless.email"></a-tag>
-        <canvas @click="copyTextToClipboard(`qrCode-vless-${vless.id}`,index)" :id="`qrCode-vless-${vless.id}`" style="width: 100%; height: 100%;"></canvas>
-        <a-divider style="height: 2px; background-color: #7e7e7e" />
-    </template>
-
-    <template v-if="qrModal.inbound.protocol === Protocols.TROJAN" v-for="(trojan, index) in qrModal.inbound.settings.trojans">
-        <a-tag color="red" style="margin-bottom: 10px;display: block;text-align: center;" v-text="trojan.email"></a-tag>
-        <canvas @click="copyTextToClipboard(`qrCode-trojan-${trojan.password}`,index)" :id="`qrCode-trojan-${trojan.password}`" style="width: 100%; height: 100%;"></canvas>
-        <a-divider style="height: 2px; background-color: #7e7e7e" />
-    </template>
+    <canvas id="qrCode" style="width: 100%; height: 100%;"></canvas>
 </a-modal>
 
 <script>
@@ -76,57 +57,6 @@
         data: {
             qrModal: qrModal,
         },
-        methods: {
-            setQrCode(elmentId,index) {
-                content = qrModal.inbound.genLink(qrModal.dbInbound.address,qrModal.dbInbound.remark,index)
-
-                new QRious({
-                        element: document.querySelector('#'+elmentId),
-                        size: 260,
-                        value: content,
-                    });
-            },
-            copyTextToClipboard(elmentId,index) {
-                link = qrModal.inbound.genLink(qrModal.dbInbound.address,qrModal.dbInbound.remark,index)
-                this.qrModal.copyText = link
-
-                this.qrModal.clipboard = new ClipboardJS('#' + elmentId, {
-                        text: () => link,
-                    });
-                this.qrModal.clipboard.on('success', () => { 
-                    app.$message.success('{{ i18n "copied" }}')
-                    this.qrModal.clipboard.destroy();
-                });
-
-
-            }
-        },
-        updated()  {
-            switch (qrModal.inbound.protocol) {
-                    case Protocols.VMESS: 
-                        vmesses = qrModal.inbound.settings.vmesses
-                        for (const index in vmesses) {
-                            this.setQrCode("qrCode-vmess-" + vmesses[index].id ,index)
-                        }
-                    break;
-                    case Protocols.VLESS: 
-                        vlesses = qrModal.inbound.settings.vlesses
-
-                        for (const index in vlesses) {
-                            this.setQrCode("qrCode-vless-" + vlesses[index].id ,index)
-                        }
-                    break;
-                    case Protocols.TROJAN: 
-                        trojans = qrModal.inbound.settings.trojans
-
-                        for (const index in trojans) {
-                            this.setQrCode("qrCode-trojan-" + trojans[index].password ,index)
-                        }
-                    break;
-                    default: return null;
-            }
-
-        }
     });
 
 </script>

web/html/xui/component/inbound_info.html

@@ -1,119 +0,0 @@
-{{define "inboundInfoStream"}}
-<table>
-    <tr>
-        <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
-    </tr>
-<template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
-    <tr v-if="inbound.host"><td>{{ i18n "host" }}</td><td><a-tag color="green">[[ inbound.host ]]</a-tag></td></tr>
-    <tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
-
-    <tr v-if="inbound.path"><td>{{ i18n "path" }}</td><td><a-tag color="green">[[ inbound.path ]]</a-tag></td></tr>
-    <tr v-else><td>{{ i18n "path" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
-</template>
-
-<template v-if="inbound.isQuic">
-    <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.quicSecurity ]]</a-tag></td></tr>
-    <tr><td>quic {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.quicKey ]]</a-tag></td></tr>
-    <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag color="green">[[ inbound.quicType ]]</a-tag></td></tr>
-</template>
-
-<template v-if="inbound.isKcp">
-    <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.kcpType ]]</a-tag></td></tr>
-    <tr><td>kcp {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></td></tr>
-</template>
-
-<template v-if="inbound.isGrpc">
-    <tr><td>grpc serviceName</td><td><a-tag color="green">[[ inbound.serviceName ]]</a-tag></td></tr>
-</template>
-</table>
-</td></tr>
-<tr colspan="2">
-    <td v-if="inbound.tls">
-        tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
-        tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-    </td>
-    <td v-else-if="inbound.xtls">
-        xtls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
-        xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-    </td>
-    <td v-else>tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag>
-{{end}}
-
-{{define "component/inboundInfoComponent"}}
-<div>
-    <table style="margin-bottom: 10px">
-        <tr><td>
-            <table>
-                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag color="blue">[[ dbInbound.address ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag color="green">[[ dbInbound.port ]]</a-tag></td></tr>
-            </table>
-        </td>
-        <td>
-            <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                {{template "inboundInfoStream"}}
-            </template>
-        </td></tr>
-    </table>
-    <a-divider>{{ i18n "clients" }}</a-divider>
-    <table v-if="dbInbound.isVMess">
-        <tr>
-            <th>email</th>
-            <th>uuid</th>
-        </tr>
-        <tr v-for="(vmess, index) in inbound.settings.vmesses">
-            <td><a-tag color="green">[[ vmess.email ]]</a-tag></td>
-            <td><a-tag color="green">[[ vmess.id ]]</a-tag></td>
-        </tr>
-    </table>
-
-    <table v-if="dbInbound.isVLess">
-        <tr>
-            <th>email</th>
-            <th>uuid</th>
-        </tr>
-        <tr v-for="(vless, index) in inbound.settings.vlesses">
-            <td><a-tag color="green">[[ vless.email ]]</a-tag></td>
-            <td><a-tag color="green">[[ vless.id ]]</a-tag></td>
-        </tr>
-    </table>
-
-    <table v-if="dbInbound.isTrojan">
-        <tr>
-            <th>email</th>
-            <th>password</th>
-        </tr>
-        <tr v-for="(trojan, index) in inbound.settings.trojans">
-            <td><a-tag color="green">[[ trojan.email ]]</a-tag></td>
-            <td><a-tag color="green">[[ trojan.password ]]</a-tag></td>
-        </tr>
-    </table>
-
-    <template v-if="dbInbound.isSS">
-        <p>{{ i18n "encryption"}}: <a-tag color="green">[[ inbound.method ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isSocks">
-        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isHTTP">
-        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-</div>
-{{end}}
-
-{{define "component/inboundInfo"}}
-<script>
-    Vue.component('inbound-info', {
-        delimiters: ['[[', ']]'],
-        props: ["dbInbound", "inbound"],
-        template: `{{template "component/inboundInfoComponent"}}`,
-    });
-
-</script>
-{{end}}

web/html/xui/inbound_client_table.html

@@ -0,0 +1,34 @@
+{{define "client_table"}}
+<template slot="actions" slot-scope="text, client, index">
+    <a-dropdown>
+        <a-icon @click="e => e.preventDefault()" type="menu"></a-icon>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item v-if="record.hasLink()" @click="showQrcode(record,index);"><a-icon type="qrcode"></a-icon>{{ i18n "qrCode" }}</a-menu-item>
+            <a-menu-item @click="showInfo(record,index);"><a-icon type="info-circle"></a-icon>{{ i18n "info" }}</a-menu-item>
+            <a-menu-item @click="resetClientTraffic(client,record,$event)"><a-icon type="retweet"></a-icon>{{ i18n "pages.inbounds.resetTraffic" }}</a-menu-item>
+          </a-menu>
+        </template>
+    </a-dropdown>
+</template>
+<template slot="client" slot-scope="text, client">
+    [[ client.email ]]
+    <a-tag v-if="!isClientEnabled(record, client.email)" color="red"> expired</a-tag>
+</template>                                    
+<template slot="traffic" slot-scope="text, client">
+    <a-tag v-if="client._totalGB === 0" color="blue">{{ i18n "usage" }}: [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]]</a-tag>
+    <a-tag v-if="client._totalGB > 0 && !isTrafficExhausted(record, client.email)" color="green">{{ i18n "usage" }}: [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] / [[client._totalGB]]GB</a-tag>
+    <a-tag v-if="client._totalGB > 0 && isTrafficExhausted(record, client.email)" color="red">{{ i18n "usage" }}: [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] / [[client._totalGB]]GB</a-tag>
+</template>                                    
+<template slot="expiryTime" slot-scope="text, client, index">
+    <template v-if="client._expiryTime > 0">
+        <a-tag v-if="isExpiry(record, index)" color="red">
+            [[ DateUtil.formatMillis(client._expiryTime) ]]
+        </a-tag>
+        <a-tag v-else color="blue">
+            [[ DateUtil.formatMillis(client._expiryTime) ]]
+        </a-tag>
+    </template>
+    <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+</template>
+{{end}}

web/html/xui/inbound_info_modal.html

@@ -1,9 +1,65 @@
 {{define "inboundInfoModal"}}
-{{template "component/inboundInfo"}}
-<a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' @ok="infoModal.ok"
-         :closable="true" :mask-closable="true"
-         ok-text='{{ i18n "pages.inbounds.copyLink"}}' cancel-text='{{ i18n "close" }}' :ok-button-props="infoModal.okBtnPros">
-    <inbound-info :db-inbound="dbInbound" :inbound="inbound"></inbound-info>
+<a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
+         :closable="true"
+         :mask-closable="true"
+         :footer="null"
+         >
+    <table style="margin-bottom: 10px; width: 100%;">
+        <tr><td>
+            <table>
+                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr>
+                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag color="blue">[[ dbInbound.address ]]</a-tag></td></tr>
+                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag color="green">[[ dbInbound.port ]]</a-tag></td></tr>
+            </table>
+        </td>
+        <td v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+            <table>
+                <tr>
+                    <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
+                </tr>
+            <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
+                <tr v-if="inbound.host"><td>{{ i18n "host" }}</td><td><a-tag color="green">[[ inbound.host ]]</a-tag></td></tr>
+                <tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
+            
+                <tr v-if="inbound.path"><td>{{ i18n "path" }}</td><td><a-tag color="green">[[ inbound.path ]]</a-tag></td></tr>
+                <tr v-else><td>{{ i18n "path" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
+            </template>
+            
+            <template v-if="inbound.isQuic">
+                <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.quicSecurity ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.quicKey ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag color="green">[[ inbound.quicType ]]</a-tag></td></tr>
+            </template>
+            
+            <template v-if="inbound.isKcp">
+                <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.kcpType ]]</a-tag></td></tr>
+                <tr><td>kcp {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></td></tr>
+            </template>
+            
+            <template v-if="inbound.isGrpc">
+                <tr><td>grpc serviceName</td><td><a-tag color="green">[[ inbound.serviceName ]]</a-tag></td></tr>
+            </template>
+            </table>
+        </td></tr>
+            <tr colspan="2">
+                <td v-if="inbound.tls">
+                    tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
+                    tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+                </td>
+                <td v-else-if="inbound.xtls">
+                    xtls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
+                    xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+                </td>
+                <td v-else>tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag>
+            </td>
+        </tr>
+    </table>
+    <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
+    <template v-if="dbInbound.hasLink()">
+        <p>Client URL:</p>
+        <p>[[ infoModal.link ]]</p>
+        <button class="btn" id="copy-url-link"><a-icon type="snippets"></a-icon>{{ i18n "copy" }}</button>
+    </template>
 </a-modal>
 <script>
 
@@ -12,31 +68,22 @@
         inbound: new Inbound(),
         dbInbound: new DBInbound(),
         clipboard: null,
-        okBtnPros: {
-            attrs: {
-                id: "inbound-info-modal-ok-btn",
-                style: "",
-            },
-        },
-        show(dbInbound) {
+        link: null,
+        index: 0,
+        show(dbInbound, index=0) {
+            this.index = index;
             this.inbound = dbInbound.toInbound();
             this.dbInbound = new DBInbound(dbInbound);
+            this.link = dbInbound.genLink(index);
             this.visible = true;
-
-            if (dbInbound.hasLink()) {
-                this.okBtnPros.attrs.style = "";
-            } else {
-                this.okBtnPros.attrs.style = "display: none";
-            }
-
-            if (this.clipboard == null) {
-                infoModalApp.$nextTick(() => {
-                    this.clipboard = new ClipboardJS(`#${this.okBtnPros.attrs.id}`, {
-                        text: () => this.dbInbound.genLink(),
+            infoModalApp.$nextTick(() => {
+                if (this.clipboard === null) {
+                    this.clipboard = new ClipboardJS('#copy-url-link', {
+                        text: () => this.link,
                     });
-                    this.clipboard.on('success', () => app.$message.success('{{ i18n "copySuccess" }}'));
-                });
-            }
+                    this.clipboard.on('success', () => app.$message.success('{{ i18n "copied" }}'));
+                }
+            });
         },
         close() {
             infoModal.visible = false;
@@ -54,7 +101,28 @@
             get inbound() {
                 return this.infoModal.inbound;
             }
-        }
+        },
+        methods: {
+            setQrCode(elmentId,index) {
+                content = infoModal.inbound.genLink(infoModal.dbInbound.address,infoModal.dbInbound.remark,index)
+
+                new QRious({
+                        element: document.querySelector('#'+elmentId),
+                        size: 260,
+                        value: content,
+                    });
+            },
+            copyTextToClipboard(elmentId,content) {
+                this.infoModal.clipboard = new ClipboardJS('#' + elmentId, {
+                        text: () => content,
+                    });
+                this.infoModal.clipboard.on('success', () => { 
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.infoModal.clipboard.destroy();
+                });
+            }
+        },
+        
     });
 
 </script>

web/html/xui/inbounds.html

@@ -27,15 +27,15 @@
                     <a-card hoverable style="margin-bottom: 20px;">
                         <a-row>
                             <a-col :xs="24" :sm="24" :lg="12">
-                                {{ i18n "pages.inbounds.totalDownUp" }}：
+                                {{ i18n "pages.inbounds.totalDownUp" }}:
                                 <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
                             </a-col>
                             <a-col :xs="24" :sm="24" :lg="12">
-                                {{ i18n "pages.inbounds.totalUsage" }}：
+                                {{ i18n "pages.inbounds.totalUsage" }}:
                                 <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
                             </a-col>
                             <a-col :xs="24" :sm="24" :lg="12">
-                                {{ i18n "pages.inbounds.inboundCount" }}：
+                                {{ i18n "pages.inbounds.inboundCount" }}:
                                 <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
                             </a-col>
                         </a-row>
@@ -46,10 +46,10 @@
                         <div slot="title">
                             <a-button type="primary" icon="plus" @click="openAddInbound"></a-button>
                         </div>
-<!--                        <a-input v-model="searchKey" placeholder="search" autofocus style="max-width: 300px"></a-input>-->
-                            <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
-                                 :data-source="dbInbounds"
-                                 :loading="spinning" :scroll="{ x: 1500 }"
+                        <a-input v-model.lazy="searchKey" placeholder="{{ i18n "search" }}" autofocus style="max-width: 300px"></a-input>
+                        <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
+                                 :data-source="searchedInbounds"
+                                 :loading="spinning" :scroll="{ x: 1300 }"
                                  :pagination="false"
                                  style="margin-top: 20px"
                                  @change="() => getDBInbounds()">
@@ -57,7 +57,7 @@
                                 <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-item v-if="dbInbound.hasLink()" key="qrcode">
+                                        <a-menu-item v-if="dbInbound.isSS" key="qrcode">
                                             <a-icon type="qrcode"></a-icon>
                                             {{ i18n "qrCode" }}
                                         </a-menu-item>
@@ -87,9 +87,6 @@
                                 </template>
                                 <a-tag v-else color="green">{{ i18n "unlimited" }}</a-tag>
                             </template>
-                            <template slot="settings" slot-scope="text, dbInbound">
-                                <a-button type="link" @click="showInfo(dbInbound)">{{ i18n "check" }}</a-button>
-                            </template>
                             <template slot="stream" slot-scope="text, dbInbound, index">
                                 <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
                                     <a-tag color="green">[[ inbounds[index].stream.network ]]</a-tag>
@@ -110,13 +107,37 @@
                                         [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
                                     </a-tag>
                                 </template>
-                                <a-tag v-else color="green">{{ i18n "indefinitely" }}</a-tag>
+                                <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+                            </template>
+                            <template slot="expandedRowRender" slot-scope="record">
+                                <a-table
+                                v-if="(record.protocol === Protocols.VLESS) || (record.protocol === Protocols.VMESS)"
+                                :row-key="client => client.id"
+                                :columns="innerColumns"
+                                :data-source="getInboundClients(record)"
+                                :pagination="false"
+                                >
+                                    {{template "client_table"}}
+                                </a-table>
+                                <a-table
+                                v-else-if="record.protocol === Protocols.TROJAN"
+                                :row-key="client => client.id"
+                                :columns="innerTrojanColumns"
+                                :data-source="getInboundClients(record)"
+                                :pagination="false"
+                                >
+                                    {{template "client_table"}}
+                                </a-table>
+                                <a-table
+                                v-else
+                                :row-key="client => client.id"
+                                :columns="innerOneColumns"
+                                :data-source="record"
+                                :pagination="false"
+                                >
+                                    {{template "client_table"}}
+                                </a-table>
                             </template>
-                            <template #expandedRowRender="{ record }">
-                                <p style="margin: 0">
-                                  {{ i18n "none" }}
-                                </p>
-                              </template>                          
                         </a-table>
                     </a-card>
                 </transition>
@@ -145,28 +166,23 @@
     }, {
         title: '{{ i18n "pages.inbounds.remark" }}',
         align: 'center',
-        width: 100,
+        width: 60,
         dataIndex: "remark",
     }, {
         title: '{{ i18n "pages.inbounds.protocol" }}',
         align: 'center',
-        width: 60,
+        width: 40,
         scopedSlots: { customRender: 'protocol' },
     }, {
         title: '{{ i18n "pages.inbounds.port" }}',
         align: 'center',
         dataIndex: "port",
-        width: 60,
+        width: 30,
     }, {
         title: '{{ i18n "pages.inbounds.traffic" }}↑|↓',
         align: 'center',
         width: 150,
         scopedSlots: { customRender: 'traffic' },
-    }, {
-        title: '{{ i18n "pages.inbounds.details" }}',
-        align: 'center',
-        width: 40,
-        scopedSlots: { customRender: 'settings' },
     }, {
         title: '{{ i18n "pages.inbounds.transportConfig" }}',
         align: 'center',
@@ -179,6 +195,26 @@
         scopedSlots: { customRender: 'expiryTime' },
     }];
 
+    const innerColumns = [
+        { title: '', width: 50, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 100, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, scopedSlots: { customRender: 'expiryTime' } },
+        { title: 'UID', width: 150, dataIndex: "id" },
+    ];
+
+    const innerTrojanColumns = [
+        { title: '', width: 50, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 100, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, scopedSlots: { customRender: 'expiryTime' } },
+        { title: 'Password', width: 150, dataIndex: "password" },
+    ];
+
+    const innerOneColumns = [
+        { title: '', width: 50, scopedSlots: { customRender: 'actions' } },
+    ];
+
     const app = new Vue({
         delimiters: ['[[', ']]'],
         el: '#app',
@@ -188,6 +224,7 @@
             inbounds: [],
             dbInbounds: [],
             searchKey: '',
+            searchedInbounds: [],
         },
         methods: {
             loading(spinning=true) {
@@ -205,10 +242,12 @@
             setInbounds(dbInbounds) {
                 this.inbounds.splice(0);
                 this.dbInbounds.splice(0);
+                this.searchedInbounds.splice(0);
                 for (const inbound of dbInbounds) {
                     const dbInbound = new DBInbound(inbound);
                     this.inbounds.push(dbInbound.toInbound());
                     this.dbInbounds.push(dbInbound);
+                    this.searchedInbounds.push(dbInbound);
                 }
             },
             searchInbounds(key) {
@@ -327,12 +366,12 @@
                     onOk: () => this.submit('/xui/inbound/del/' + dbInbound.id),
                 });
             },
-            showQrcode(dbInbound) {
-                const link = dbInbound.genLink();
+            showQrcode(dbInbound, clientIndex) {
+                const link = dbInbound.genLink(clientIndex);
                 qrModal.show('{{ i18n "qrCode"}}', link, dbInbound);
             },
-            showInfo(dbInbound) {
-                infoModal.show(dbInbound);
+            showInfo(dbInbound, index) {
+                infoModal.show(dbInbound, index);
             },
             switchEnable(dbInbound) {
                 this.submit(`/xui/inbound/update/${dbInbound.id}`, dbInbound);
@@ -343,11 +382,105 @@
                     await this.getDBInbounds();
                 }
             },
+            getInboundClients(dbInbound) {
+                if(dbInbound.protocol == Protocols.VLESS) {
+                    return dbInbound.toInbound().settings.vlesses
+                } else if(dbInbound.protocol == Protocols.VMESS) {
+                    return dbInbound.toInbound().settings.vmesses
+                } else if(dbInbound.protocol == Protocols.TROJAN) {
+                    return dbInbound.toInbound().settings.trojans
+                }
+            },
+            resetClientTraffic(client,inbound,event) {
+                this.$confirm({
+                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
+                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
+                    okText: '{{ i18n "reset"}}',
+                    cancelText: '{{ i18n "cancel"}}',
+                    onOk: () => {
+                        this.resetClTraffic(client,inbound,event);
+                    },
+                });
+            },
+            async resetClTraffic(client,inbound,event) {
+                const msg = await HttpUtil.post('/xui/inbound/resetClientTraffic/'+ client.email);
+                if (!msg.success) {
+                    return;
+                }
+                clientStats = inbound.clientStats
+                if(clientStats.length > 0)
+                {
+                    for (const key in clientStats) {
+                        if (Object.hasOwnProperty.call(clientStats, key)) {
+                            if(clientStats[key]['email'] == client.email){ 
+                                clientStats[key]['up'] = 0
+                                clientStats[key]['down'] = 0
+                            }
+                        }
+                    }
+                }
+            },
+            isExpiry(dbInbound, index) {
+                return dbInbound.toInbound().isExpiry(index)
+            },
+            getUpStats(dbInbound, email) {
+                clientStats = dbInbound.clientStats
+                if(clientStats.length > 0)
+                {
+                    for (const key in clientStats) {
+                        if (Object.hasOwnProperty.call(clientStats, key)) {
+                            if(clientStats[key]['email'] == email)
+                                return clientStats[key]['up']
+
+                        }
+                    }
+                }
+
+            },
+            getDownStats(dbInbound, email) {
+                clientStats = dbInbound.clientStats
+                if(clientStats.length > 0)
+                {
+                    for (const key in clientStats) {
+                        if (Object.hasOwnProperty.call(clientStats, key)) {
+                            if(clientStats[key]['email'] == email)
+                                return clientStats[key]['down']
+
+                        }
+                    }
+                }
+            },
+            isTrafficExhausted(dbInbound, email) {
+                clientStats = dbInbound.clientStats
+                if(clientStats.length > 0)
+                {
+                    for (const key in clientStats) {
+                        if (Object.hasOwnProperty.call(clientStats, key)) {
+                            if(clientStats[key]['email'] == email)
+                                return clientStats[key]['down']+clientStats[key]['up'] > clientStats[key]['total']
+
+                        }
+                    }
+                }
+            },
+            isClientEnabled(dbInbound, email) {
+                clientStats = dbInbound.clientStats
+                if(clientStats.length > 0)
+                {
+                    for (const key in clientStats) {
+                        if (Object.hasOwnProperty.call(clientStats, key)) {
+                            if(clientStats[key]['email'] == email)
+                                return clientStats[key]['enable']
+
+                        }
+                    }
+                }
+            },
         },
         watch: {
-            searchKey(value) {
-                this.searchInbounds(value);
-            }
+            searchKey: debounce(function (newVal) {
+                this.searchInbounds(newVal);
+            }, 500)
         },
         mounted() {
             this.getDBInbounds();
@@ -368,6 +501,7 @@
     });
 
 </script>
+
 {{template "inboundModal"}}
 {{template "promptModal"}}
 {{template "qrcodeModal"}}