Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-07-01 20:42:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[bug] fix status colors in pages

Browse source 
Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>
This commit is contained in:
MHSanaei 2023-12-04 23:51:14 +03:30
parent ba2d02ae1d
commit 375814da27
6 changed files with 65 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/assets/js/util/common.js
View file

@ -131,6 +131,19 @@ function usageColor(data, threshold, total) {
} }
} }
function clientUsageColor(clientStats, trafficDiff) {
switch (true) {
case !clientStats || clientStats.total == 0:
return "#7a316f";
case clientStats.up + clientStats.down < clientStats.total - trafficDiff:
return "#0e49b5";
case clientStats.up + clientStats.down < clientStats.total:
return "#FFA031";
default:
return "#E04141";
}
}
function userExpiryColor(threshold, client, isDark = false) { function userExpiryColor(threshold, client, isDark = false) {
if (!client.enable) { if (!client.enable) {
return isDark ? '#2c3950' : '#bcbcbc'; return isDark ? '#2c3950' : '#bcbcbc';

3
web/html/xui/client_modal.html
View file

@ -112,9 +112,6 @@
get isExpiry() { get isExpiry() {
return this.clientModal.isEdit && this.client.expiryTime >0 ? (this.client.expiryTime < new Date().getTime()) : false; return this.clientModal.isEdit && this.client.expiryTime >0 ? (this.client.expiryTime < new Date().getTime()) : false;
}, },
get statsColor() {
return usageColor(clientStats.up + clientStats.down, app.trafficDiff, this.client.totalGB);
},
get delayedStart() { get delayedStart() {
return this.clientModal.delayedStart; return this.clientModal.delayedStart;
}, },

2
web/html/xui/form/client.html
View file

@ -117,7 +117,7 @@
<template v-if="isEdit && clientStats"> <template v-if="isEdit && clientStats">
<br> <br>
<span> {{ i18n "usage" }}:</span> <span> {{ i18n "usage" }}:</span>
<a-tag :color="statsColor"> <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
[[ sizeFormat(clientStats.up) ]] / [[ sizeFormat(clientStats.up) ]] /
[[ sizeFormat(clientStats.down) ]] [[ sizeFormat(clientStats.down) ]]
([[ sizeFormat(clientStats.up + clientStats.down) ]]) ([[ sizeFormat(clientStats.up + clientStats.down) ]])

4
web/html/xui/inbound_client_table.html
View file

@ -85,7 +85,7 @@
:percent="statsProgress(record, client.email)"/> :percent="statsProgress(record, client.email)"/>
</td> </td>
<td width="120px" v-else-if="client.totalGB > 0"> <td width="120px" v-else-if="client.totalGB > 0">
<a-progress :stroke-color="statsColor(record, client.email)" <a-progress :stroke-color="clientStatsColor(record, client.email)"
:show-info="false" :show-info="false"
:status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''" :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
:percent="statsProgress(record, client.email)"/> :percent="statsProgress(record, client.email)"/>
@ -201,7 +201,7 @@
</tr> </tr>
</table> </table>
</template> </template>
<a-progress :stroke-color="statsColor(record, client.email)" <a-progress :stroke-color="clientStatsColor(record, client.email)"
:show-info="false" :show-info="false"
:status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''" :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
:percent="statsProgress(record, client.email)"/> :percent="statsProgress(record, client.email)"/>

83
web/html/xui/inbound_info_modal.html
View file

@ -10,38 +10,43 @@
<table style="margin-bottom: 10px; width: 100%;"> <table style="margin-bottom: 10px; width: 100%;">
<tr><td> <tr><td>
<table> <table>
<tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr> <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="purple">[[ 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.address" }}</td><td><a-tag>[[ dbInbound.address ]]</a-tag></td></tr>
<tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag color="green">[[ dbInbound.port ]]</a-tag></td></tr> <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag>[[ dbInbound.port ]]</a-tag></td></tr>
</table> </table>
</td> </td>
<td v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS"> <td v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
<table> <table>
<tr> <tr>
<td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td> <td>{{ i18n "transmission" }}</td><td><a-tag color="blue">[[ inbound.network ]]</a-tag></td>
</tr> </tr>
<template v-if="inbound.isTcp || inbound.isWs || inbound.isH2"> <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>
<tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr> <td>{{ i18n "host" }}</td>
<td v-if="inbound.host"><a-tag>[[ inbound.host ]]</a-tag></td>
<tr v-if="inbound.path"><td>{{ i18n "path" }}</td><td><a-tag color="green">[[ inbound.path ]]</a-tag></td></tr> <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
<tr v-else><td>{{ i18n "path" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr> </tr>
<tr>
<td>{{ i18n "path" }}</td>
<td v-if="inbound.path"><a-tag>[[ inbound.path ]]</a-tag></td>
<td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td>
</tr>
</template> </template>
<template v-if="inbound.isQuic"> <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 "encryption" }}</td><td><a-tag>[[ 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 "password" }}</td><td><a-tag>[[ inbound.quicKey ]]</a-tag></td></tr>
<tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag color="green">[[ inbound.quicType ]]</a-tag></td></tr> <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag>[[ inbound.quicType ]]</a-tag></td></tr>
</template> </template>
<template v-if="inbound.isKcp"> <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 "encryption" }}</td><td><a-tag>[[ inbound.kcpType ]]</a-tag></td></tr>
<tr><td>kcp {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></td></tr> <tr><td>kcp {{ i18n "password" }}</td><td><a-tag>[[ inbound.kcpSeed ]]</a-tag></td></tr>
</template> </template>
<template v-if="inbound.isGrpc"> <template v-if="inbound.isGrpc">
<tr><td>grpc serviceName</td><td><a-tag color="green">[[ inbound.serviceName ]]</a-tag></td></tr> <tr><td>grpc serviceName</td><td><a-tag>[[ inbound.serviceName ]]</a-tag></td></tr>
<tr><td>grpc multiMode</td><td><a-tag color="green">[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr> <tr><td>grpc multiMode</td><td><a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
</template> </template>
</table> </table>
</td></tr> </td></tr>
@ -64,13 +69,13 @@
<table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;"> <table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;">
<tr> <tr>
<td>{{ i18n "encryption" }}</td> <td>{{ i18n "encryption" }}</td>
<td><a-tag color="green">[[ inbound.settings.method ]]</a-tag></td> <td><a-tag color="blue">[[ inbound.settings.method ]]</a-tag></td>
</tr><tr v-if="inbound.isSS2022"> </tr><tr v-if="inbound.isSS2022">
<td>{{ i18n "password" }}</td> <td>{{ i18n "password" }}</td>
<td><a-tag color="blue">[[ inbound.settings.password ]]</a-tag></td> <td><a-tag>[[ inbound.settings.password ]]</a-tag></td>
</tr><tr> </tr><tr>
<td>{{ i18n "pages.inbounds.network" }}</td> <td>{{ i18n "pages.inbounds.network" }}</td>
<td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td> <td><a-tag color="blue">[[ inbound.settings.network ]]</a-tag></td>
</tr> </tr>
</table> </table>
<template v-if="infoModal.clientSettings"> <template v-if="infoModal.clientSettings">
@ -78,37 +83,37 @@
<table style="margin-bottom: 10px;"> <table style="margin-bottom: 10px;">
<tr> <tr>
<td>{{ i18n "pages.inbounds.email" }}</td> <td>{{ i18n "pages.inbounds.email" }}</td>
<td><a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag></td> <td><a-tag color="blue">[[ infoModal.clientSettings.email ]]</a-tag></td>
</tr> </tr>
<tr v-if="infoModal.clientSettings.id"> <tr v-if="infoModal.clientSettings.id">
<td>ID</td> <td>ID</td>
<td><a-tag color="green">[[ infoModal.clientSettings.id ]]</a-tag></td> <td><a-tag>[[ infoModal.clientSettings.id ]]</a-tag></td>
</tr> </tr>
<tr v-if="infoModal.inbound.canEnableTlsFlow()"> <tr v-if="infoModal.inbound.canEnableTlsFlow()">
<td>Flow</td> <td>Flow</td>
<td><a-tag color="green">[[ infoModal.clientSettings.flow ]]</a-tag></td> <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
</tr> </tr>
<tr v-if="infoModal.clientSettings.password"> <tr v-if="infoModal.clientSettings.password">
<td>Password</td> <td>Password</td>
<td><a-tag color="green">[[ infoModal.clientSettings.password ]]</a-tag></td> <td><a-tag>[[ infoModal.clientSettings.password ]]</a-tag></td>
</tr> </tr>
<tr> <tr>
<td>{{ i18n "status" }}</td> <td>{{ i18n "status" }}</td>
<td> <td>
<a-tag v-if="isEnable" color="blue">{{ i18n "enabled" }}</a-tag> <a-tag v-if="isEnable" color="blue">{{ i18n "enabled" }}</a-tag>
<a-tag v-else color="red">{{ i18n "disabled" }}</a-tag> <a-tag v-else>{{ i18n "disabled" }}</a-tag>
<a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag> <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
</td> </td>
</tr> </tr>
<tr v-if="infoModal.clientStats"> <tr v-if="infoModal.clientStats">
<td>{{ i18n "usage" }}</td> <td>{{ i18n "usage" }}</td>
<td> <td>
<a-tag color="green">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag> <a-tag color="blue">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
<a-tag color="blue">↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag> <a-tag>↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
</td> </td>
</tr> </tr>
</table> </table>
<table style="margin-bottom: 10px; width: 100%;"> <table style="margin-bottom: 10px; width: 100%; text-align: center;">
<tr> <tr>
<th>{{ i18n "remained" }}</th> <th>{{ i18n "remained" }}</th>
<th>{{ i18n "pages.inbounds.totalFlow" }}</th> <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
@ -124,7 +129,7 @@
<a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
[[ sizeFormat(infoModal.clientSettings.totalGB) ]] [[ sizeFormat(infoModal.clientSettings.totalGB) ]]
</a-tag> </a-tag>
<a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag> <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
</td> </td>
<td> <td>
<template v-if="infoModal.clientSettings.expiryTime > 0"> <template v-if="infoModal.clientSettings.expiryTime > 0">
@ -132,8 +137,8 @@
[[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]] [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
</a-tag> </a-tag>
</template> </template>
<a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="cyan">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag> <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="blue">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
<a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag> <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
</td> </td>
</tr> </tr>
</table> </table>
@ -166,7 +171,7 @@
<template v-if="dbInbound.hasLink()"> <template v-if="dbInbound.hasLink()">
<a-divider>URL</a-divider> <a-divider>URL</a-divider>
<a-row v-for="(link,index) in infoModal.links"> <a-row v-for="(link,index) in infoModal.links">
<a-col :span="22"><a-tag color="cyan">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col> <a-col :span="22"><a-tag color="blue">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
<a-col :span="2" style="text-align: right;"> <a-col :span="2" style="text-align: right;">
<a-tooltip title='{{ i18n "copy" }}'> <a-tooltip title='{{ i18n "copy" }}'>
<button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)"> <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
@ -181,7 +186,7 @@
<template v-if="dbInbound.isSS && !inbound.isSSMultiUser"> <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
<a-divider>URL</a-divider> <a-divider>URL</a-divider>
<a-row v-for="(link,index) in infoModal.links"> <a-row v-for="(link,index) in infoModal.links">
<a-col :span="22"><a-tag color="cyan">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col> <a-col :span="22"><a-tag color="blue">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
<a-col :span="2" style="text-align: right;"> <a-col :span="2" style="text-align: right;">
<a-tooltip title='{{ i18n "copy" }}'> <a-tooltip title='{{ i18n "copy" }}'>
<button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)"> <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
@ -198,9 +203,9 @@
<th>{{ i18n "pages.inbounds.network" }}</th> <th>{{ i18n "pages.inbounds.network" }}</th>
<th>FollowRedirect</th> <th>FollowRedirect</th>
</tr><tr> </tr><tr>
<td><a-tag color="green">[[ inbound.settings.address ]]</a-tag></td> <td><a-tag color="blue">[[ inbound.settings.address ]]</a-tag></td>
<td><a-tag color="blue">[[ inbound.settings.port ]]</a-tag></td> <td><a-tag color="blue">[[ inbound.settings.port ]]</a-tag></td>
<td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td> <td><a-tag color="blue">[[ inbound.settings.network ]]</a-tag></td>
<td><a-tag color="blue">[[ inbound.settings.followRedirect ]]</a-tag></td> <td><a-tag color="blue">[[ inbound.settings.followRedirect ]]</a-tag></td>
</tr> </tr>
</table> </table>
@ -212,7 +217,7 @@
</tr> </tr>
<tr> <tr>
<td><a-tag color="green">[[ inbound.settings.auth ]]</a-tag></td> <td><a-tag color="green">[[ inbound.settings.auth ]]</a-tag></td>
<td><a-tag color="blue">[[ inbound.settings.udp]]</a-tag></td> <td><a-tag color="green">[[ inbound.settings.udp]]</a-tag></td>
<td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td> <td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td>
</tr> </tr>
<template v-if="inbound.settings.auth == 'password'"> <template v-if="inbound.settings.auth == 'password'">
@ -221,9 +226,9 @@
<td>{{ i18n "username" }}</td> <td>{{ i18n "username" }}</td>
<td>{{ i18n "password" }}</td> <td>{{ i18n "password" }}</td>
</tr><tr v-for="account,index in inbound.settings.accounts"> </tr><tr v-for="account,index in inbound.settings.accounts">
<td><a-tag color="green">[[ index ]]</a-tag></td> <td>[[ index ]]</td>
<td><a-tag color="blue">[[ account.user ]]</a-tag></td> <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
<td><a-tag color="green">[[ account.pass ]]</a-tag></td> <td><a-tag color="blue">[[ account.pass ]]</a-tag></td>
</tr> </tr>
</template> </template>
</table> </table>
@ -233,9 +238,9 @@
<th>{{ i18n "username" }}</th> <th>{{ i18n "username" }}</th>
<th>{{ i18n "password" }}</th> <th>{{ i18n "password" }}</th>
</tr><tr v-for="account,index in inbound.settings.accounts"> </tr><tr v-for="account,index in inbound.settings.accounts">
<td><a-tag color="green">[[ index ]]</a-tag></td> <td>[[ index ]]</td>
<td><a-tag color="blue">[[ account.user ]]</a-tag></td> <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
<td><a-tag color="green">[[ account.pass ]]</a-tag></td> <td><a-tag color="blue">[[ account.pass ]]</a-tag></td>
</tr> </tr>
</table> </table>
</template> </template>

15
web/html/xui/inbounds.html
View file

@ -1112,19 +1112,10 @@
remained = clientStats.totalGB - (clientStats.up + clientStats.down); remained = clientStats.totalGB - (clientStats.up + clientStats.down);
return remained>0 ? remained : 0; return remained>0 ? remained : 0;
}, },
statsColor(dbInbound, email) { clientStatsColor(dbInbound, email) {
if (email.length == 0) return '#0e49b5'; if (email.length == 0) return clientUsageColor();
clientStats = dbInbound.clientStats.find(stats => stats.email === email); clientStats = dbInbound.clientStats.find(stats => stats.email === email);
switch (true) { return clientUsageColor(clientStats, app.trafficDiff)
case !clientStats:
return "#0e49b5";
case clientStats.up + clientStats.down < clientStats.total - app.trafficDiff:
return "#0e49b5";
case clientStats.up + clientStats.down < clientStats.total:
return "#FFA031";
default:
return "#E04141";
}
}, },
statsProgress(dbInbound, email) { statsProgress(dbInbound, email) {
if (email.length == 0) return 100; if (email.length == 0) return 100;