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

chore: clients comment improvement

Browse source 
- use default ant components instead custom styles
- remove comments in inbound info modal (duplicates information)
- enhance tooltip usage
This commit is contained in:
Shishkevich D. 2025-06-21 08:21:09 +00:00
parent 5c10035bd9
commit f0162911b3
6 changed files with 85 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
web/html/component/aClientTable.html
View file

@ -41,28 +41,28 @@
</template>
</template>
<template slot="client" slot-scope="text, client">
<div class="client-cell">
<div class="client-info-row">
<a-tooltip>
<template slot="title">
<template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
<template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
<template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
</template>
<a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
</a-tooltip>
<a-space direction="horizontal" :size="2">
<a-tooltip>
<template slot="title">
<template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
<template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
<template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
</template>
<a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
</a-tooltip>
<a-space direction="vertical" :size="2">
<span class="client-email">[[ client.email ]]</span>
</div>
<div v-if="client.comment && client.comment.trim()" style="margin-left: 18px;">
<a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
<template slot="title">
[[ client.comment ]]
</template>
<span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
</a-tooltip>
<span v-else class="client-comment">[[ client.comment ]]</span>
</div>
</div>
<template v-if="client.comment && client.comment.trim()">
<a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
<template slot="title">
[[ client.comment ]]
</template>
<span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
</a-tooltip>
<span v-else class="client-comment">[[ client.comment ]]</span>
</template>
</a-space>
</a-space>
</template>
<template slot="traffic" slot-scope="text, client">
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
@ -182,15 +182,6 @@
<a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
<template slot="content">
<table>
<tr v-if="client.comment && client.comment.trim()">
<td colspan="3" :style="{ textAlign: 'left', borderBottom: '1px solid #f0f0f0', paddingBottom: '8px', marginBottom: '8px' }">
<div :style="{ fontSize: '0.9em', fontWeight: '500', marginBottom: '4px' }">[[ client.email ]]</div>
<div :style="{ fontSize: '0.85em', color: '#666', fontStyle: 'italic', wordBreak: 'break-word', maxWidth: '250px' }">[[ client.comment ]]</div>
</td>
</tr>
<tr v-else>
<td colspan="3" :style="{ textAlign: 'center', fontWeight: '500', paddingBottom: '8px' }">[[ client.email ]]</td>
</tr>
<tr>
<td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
</tr>

7
web/html/form/protocol/shadowsocks.html
View file

@ -13,12 +13,7 @@
<th>Password</th>
</tr>
<tr v-for="(client, index) in inbound.settings.shadowsockses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
<td>
<div class="client-cell">
<div class="client-email">[[ client.email ]]</div>
<div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
</div>
</td>
<td>[[ client.email ]]</td>
<td>[[ client.password ]]</td>
</tr>
</table>

7
web/html/form/protocol/trojan.html
View file

@ -12,12 +12,7 @@
<th>Password</th>
</tr>
<tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
<td>
<div class="client-cell">
<div class="client-email">[[ client.email ]]</div>
<div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
</div>
</td>
<td>[[ client.email ]]</td>
<td>[[ client.password ]]</td>
</tr>
</table>

7
web/html/form/protocol/vless.html
View file

@ -12,12 +12,7 @@
<th>ID</th>
</tr>
<tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
<td>
<div class="client-cell">
<div class="client-email">[[ client.email ]]</div>
<div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
</div>
</td>
<td>[[ client.email ]]</td>
<td>[[ client.id ]]</td>
</tr>
</table>

7
web/html/form/protocol/vmess.html
View file

@ -13,12 +13,7 @@
<th>{{ i18n "security" }}</th>
</tr>
<tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
<td>
<div class="client-cell">
<div class="client-email">[[ client.email ]]</div>
<div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
</div>
</td>
<td>[[ client.email ]]</td>
<td>[[ client.id ]]</td>
<td>[[ client.security ]]</td>
</tr>

115
web/html/inbounds.html
View file

@ -81,51 +81,16 @@
}
.client-comment {
font-size: 12px;
color: #888;
font-style: italic;
line-height: 1.2;
}
.dark .client-comment {
color: #bbb;
opacity: 0.75;
cursor: help;
}
.client-email {
font-weight: 500;
}
.client-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.client-info-row {
.client-popup-item {
display: flex;
align-items: center;
gap: 6px;
}
.client-popup-item {
margin-bottom: 8px;
padding: 4px 0;
border-bottom: 1px solid #f0f0f0;
}
.dark .client-popup-item {
border-bottom: 1px solid #333;
}
.client-popup-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.client-popup-email {
font-weight: 500;
margin-bottom: 2px;
}
.client-popup-comment {
font-size: 11px;
color: #666;
font-style: italic;
max-width: 200px;
word-break: break-word;
}
.dark .client-popup-comment {
color: #aaa;
gap: 5px;
}
.online-animation .ant-badge-status-dot {
animation: onlineAnimation 1.2s linear infinite;
@ -431,8 +396,13 @@
<a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
@ -440,8 +410,13 @@
<a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
@ -449,8 +424,13 @@
<a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
@ -458,8 +438,13 @@
<a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
@ -540,8 +525,13 @@
<a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
@ -549,8 +539,13 @@
<a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
@ -558,8 +553,13 @@
<a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
@ -567,8 +567,13 @@
<a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
<template slot="content">
<div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
<div class="client-popup-email">[[ clientEmail ]]</div>
<div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
<span>[[ clientEmail ]]</span>
<a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
<template #title>
[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
</template>
<a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
</a-tooltip>
</div>
</template>
<a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>