diff options
Diffstat (limited to 'web/html')
| -rw-r--r-- | web/html/xui/form/protocol/trojan.html | 4 | ||||
| -rw-r--r-- | web/html/xui/form/protocol/vless.html | 4 | ||||
| -rw-r--r-- | web/html/xui/form/protocol/vmess.html | 4 | ||||
| -rw-r--r-- | web/html/xui/inbound_info_modal.html | 83 | ||||
| -rw-r--r-- | web/html/xui/inbound_modal.html | 4 | ||||
| -rw-r--r-- | web/html/xui/inbounds.html | 31 | ||||
| -rw-r--r-- | web/html/xui/inbounds_client_row.html | 16 |
7 files changed, 105 insertions, 41 deletions
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html index fa5a2032..48fbfd4e 100644 --- a/web/html/xui/form/protocol/trojan.html +++ b/web/html/xui/form/protocol/trojan.html @@ -9,10 +9,10 @@ <a-form layout="inline"> <a-form-item> <span slot="label"> - Email + Username <a-tooltip> <template slot="title"> - The Email Must Be Completely Unique + The Username Must Be Completely Unique </template> <!--Renew Svg Icon--> <svg diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html index 5d56fdd3..f6809c1e 100644 --- a/web/html/xui/form/protocol/vless.html +++ b/web/html/xui/form/protocol/vless.html @@ -9,10 +9,10 @@ <a-form layout="inline"> <a-form-item> <span slot="label"> - Email + Username <a-tooltip> <template slot="title"> - The Email Must Be Completely Unique + The Username Must Be Completely Unique </template> <!--Renew Svg Icon--> <svg diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html index 9ed444c6..c156d6d5 100644 --- a/web/html/xui/form/protocol/vmess.html +++ b/web/html/xui/form/protocol/vmess.html @@ -8,10 +8,10 @@ <a-form layout="inline"> <a-form-item> <span slot="label"> - Email + Username <a-tooltip> <template slot="title"> - The Email Must Be Completely Unique + The Username Must Be Completely Unique </template> <!--Renew Svg Icon--> <svg diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html index 14809ab7..2ffebe85 100644 --- a/web/html/xui/inbound_info_modal.html +++ b/web/html/xui/inbound_info_modal.html @@ -1,9 +1,11 @@ {{define "inboundInfoModal"}} -<a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' - :closable="true" - :mask-closable="true" - :footer="null" - > +<a-modal id="inbound-info-modal" + v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' + :closable="true" + :mask-closable="true" + :footer="null" + width="600px" + > <table style="margin-bottom: 10px; width: 100%;"> <tr><td> <table> @@ -55,11 +57,47 @@ </tr> </table> <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider> - <template v-if="dbInbound.hasLink()"> - <p>Client URL:</p> + <table style="margin-bottom: 10px; width: 100%;"> + <tr><th>[[ Object.keys(infoModal.clientSettings)[0] ]]</th><th>[[ Object.keys(infoModal.clientSettings)[1] ]]</th><th>[[ Object.keys(infoModal.clientSettings)[2] ]]</th></tr> + <tr> + <td><a-tag color="green">[[ Object.values(infoModal.clientSettings)[0] ]]</a-tag></td> + <td><a-tag color="green">[[ Object.values(infoModal.clientSettings)[1] ]]</a-tag></td> + <td><a-tag color="green">[[ Object.values(infoModal.clientSettings)[2] ]]</a-tag></td> + </tr> + </table> + <table style="margin-bottom: 10px; width: 100%;"> + <tr><th>{{ i18n "usage" }}</th><th>{{ i18n "pages.inbounds.totalFlow" }}</th><th>{{ i18n "pages.inbounds.expireDate" }}</th><th>{{ i18n "enable" }}</th></tr> + <tr> + <td> + <a-tag :color="statsColor(infoModal.clientStats)"> + [[ sizeFormat(infoModal.clientStats['up']) ]] / + [[ sizeFormat(infoModal.clientStats['down']) ]] + ([[ sizeFormat(infoModal.clientStats['up'] + infoModal.clientStats['down']) ]]) + </a-tag> + </td> + <td> + <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">[[ sizeFormat(infoModal.clientSettings.totalGB) ]]</a-tag> + <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag> + </td> + <td> + <template v-if="infoModal.clientSettings.expiryTime > 0"> + <a-tag :color="infoModal.isExpired ? 'red' : 'blue'"> + [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]] + </a-tag> + </template> + <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag> + </td> + <td> + <a-tag v-if="infoModal.clientStats.enable" color="blue">{{ i18n "enabled" }}</a-tag> + <a-tag v-else color="red">{{ i18n "disabled" }}</a-tag> + </td> + </tr> + </table> + <div v-if="dbInbound.hasLink()"> + <a-divider>URL</a-divider> <p>[[ infoModal.link ]]</p> - <button class="btn" id="copy-url-link"><a-icon type="snippets"></a-icon>{{ i18n "copy" }}</button> - </template> + <button class="ant-btn ant-btn-primary" id="copy-url-link"><a-icon type="snippets"></a-icon>{{ i18n "copy" }}</button> + </div> </a-modal> <script> @@ -67,14 +105,32 @@ visible: false, inbound: new Inbound(), dbInbound: new DBInbound(), + clientSettings: new Inbound.Settings(), + clientStats: [], + upStats: 0, + downStats: 0, clipboard: null, link: null, index: 0, + isExpired: false, show(dbInbound, index=0) { this.index = index; this.inbound = dbInbound.toInbound(); this.dbInbound = new DBInbound(dbInbound); this.link = dbInbound.genLink(index); + this.clientSettings = Object.values(JSON.parse(this.inbound.settings).clients)[index]; + this.clientStats = dbInbound.clientStats; + this.isExpired = this.inbound.isExpiry(index); + if(dbInbound.clientStats.length > 0) + { + for (const key in dbInbound.clientStats) { + if (Object.hasOwnProperty.call(dbInbound.clientStats, key)) { + if(dbInbound.clientStats[key]['email'] == this.clientSettings.email) + this.clientStats = dbInbound.clientStats[key]; + + } + } + } this.visible = true; infoModalApp.$nextTick(() => { if (this.clipboard === null) { @@ -89,7 +145,6 @@ infoModal.visible = false; }, }; - const infoModalApp = new Vue({ delimiters: ['[[', ']]'], el: '#inbound-info-modal', @@ -105,7 +160,6 @@ methods: { setQrCode(elmentId,index) { content = infoModal.inbound.genLink(infoModal.dbInbound.address,infoModal.dbInbound.remark,index) - new QRious({ element: document.querySelector('#'+elmentId), size: 260, @@ -120,10 +174,13 @@ app.$message.success('{{ i18n "copySuccess" }}') this.infoModal.clipboard.destroy(); }); + }, + statsColor(stats) { + if(stats['total'] === 0) return 'blue' + else if(stats['total'] > 0 && (stats['down']+stats['up']) < stats['total']) return 'cyan' + else return 'red' } }, - }); - </script> {{end}}
\ No newline at end of file diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html index 0c2be412..4fec0ded 100644 --- a/web/html/xui/inbound_modal.html +++ b/web/html/xui/inbound_modal.html @@ -165,11 +165,11 @@ getNewEmail(client) { var chars = 'abcdefghijklmnopqrstuvwxyz1234567890'; var string = ''; - var len = 6 + Math.floor(Math.random() * 5) + var len = 7 + Math.floor(Math.random() * 5) for(var ii=0; ii<len; ii++){ string += chars[Math.floor(Math.random() * chars.length)]; } - client.email = string + "@gmail.com" + client.email = string } }, }); diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html index 4cca8aac..ba2d1b4c 100644 --- a/web/html/xui/inbounds.html +++ b/web/html/xui/inbounds.html @@ -160,11 +160,6 @@ width: 40, scopedSlots: { customRender: 'enable' }, }, { - title: "Id", - align: 'center', - dataIndex: "id", - width: 30, - }, { title: '{{ i18n "pages.inbounds.remark" }}', align: 'center', width: 60, @@ -197,18 +192,19 @@ }]; const innerColumns = [ - { title: '', width: 50, scopedSlots: { customRender: 'actions' } }, + { title: '', width: 20, 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: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 80, scopedSlots: { customRender: 'traffic' } }, + { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } }, { title: 'UID', width: 150, dataIndex: "id" }, + ]; const innerTrojanColumns = [ - { title: '', width: 50, scopedSlots: { customRender: 'actions' } }, + { title: '', width: 20, 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: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 80, scopedSlots: { customRender: 'traffic' } }, + { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } }, { title: 'Password', width: 150, dataIndex: "password" }, ]; @@ -258,7 +254,18 @@ this.searchedInbounds.splice(0, this.searchedInbounds.length); this.dbInbounds.forEach(inbound => { if (ObjectUtil.deepSearch(inbound, key)) { - this.searchedInbounds.push(inbound); + const newInbound = new DBInbound(inbound); + const inboundSettings = JSON.parse(inbound.settings); + if (inboundSettings.hasOwnProperty('clients')){ + const searchedSettings = { "clients": [] }; + inboundSettings.clients.forEach(client => { + if (ObjectUtil.deepSearch(client, key)){ + searchedSettings.clients.push(client); + } + }); + newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, searchedSettings); + } + this.searchedInbounds.push(newInbound); } }); } diff --git a/web/html/xui/inbounds_client_row.html b/web/html/xui/inbounds_client_row.html index 7453d062..6e03e4ca 100644 --- a/web/html/xui/inbounds_client_row.html +++ b/web/html/xui/inbounds_client_row.html @@ -16,16 +16,16 @@ <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "disabled" }}</a-tag> </template> <template slot="traffic" slot-scope="text, client"> - <a-tag v-if="client._totalGB === 0" color="blue">{{ i18n "used" }}: [[ 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 "used" }}: [[ 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 "used" }}: [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] / [[client._totalGB]]GB</a-tag> -</template> + <a-tag color="blue">[[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]</a-tag> + <template v-if="client._totalGB > 0"> + <a-tag v-if="isTrafficExhausted(record, client.email)" color="red">[[client._totalGB]]GB</a-tag> + <a-tag v-else color="cyan">[[client._totalGB]]GB</a-tag> + </template> + <a-tag v-else color="green">{{ i18n "indefinite" }}</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"> + <a-tag :color="isExpiry(record, index)? 'red' : 'blue'"> [[ DateUtil.formatMillis(client._expiryTime) ]] </a-tag> </template> |