diff options
Diffstat (limited to 'web/html')
| -rw-r--r-- | web/html/component/aClientTable.html | 51 | ||||
| -rw-r--r-- | web/html/form/protocol/shadowsocks.html | 7 | ||||
| -rw-r--r-- | web/html/form/protocol/trojan.html | 7 | ||||
| -rw-r--r-- | web/html/form/protocol/vless.html | 7 | ||||
| -rw-r--r-- | web/html/form/protocol/vmess.html | 7 | ||||
| -rw-r--r-- | web/html/inbounds.html | 115 |
6 files changed, 85 insertions, 109 deletions
diff --git a/web/html/component/aClientTable.html b/web/html/component/aClientTable.html index 8ab08679..96bd502f 100644 --- a/web/html/component/aClientTable.html +++ b/web/html/component/aClientTable.html @@ -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> diff --git a/web/html/form/protocol/shadowsocks.html b/web/html/form/protocol/shadowsocks.html index 04cd9399..06e12075 100644 --- a/web/html/form/protocol/shadowsocks.html +++ b/web/html/form/protocol/shadowsocks.html @@ -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> diff --git a/web/html/form/protocol/trojan.html b/web/html/form/protocol/trojan.html index 6c7b3773..fc327721 100644 --- a/web/html/form/protocol/trojan.html +++ b/web/html/form/protocol/trojan.html @@ -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> diff --git a/web/html/form/protocol/vless.html b/web/html/form/protocol/vless.html index 88274f71..3cebda6e 100644 --- a/web/html/form/protocol/vless.html +++ b/web/html/form/protocol/vless.html @@ -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> diff --git a/web/html/form/protocol/vmess.html b/web/html/form/protocol/vmess.html index 94a0cc58..3c5200ac 100644 --- a/web/html/form/protocol/vmess.html +++ b/web/html/form/protocol/vmess.html @@ -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> diff --git a/web/html/inbounds.html b/web/html/inbounds.html index 1750aa44..5ee541df 100644 --- a/web/html/inbounds.html +++ b/web/html/inbounds.html @@ -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> |