diff options
Diffstat (limited to 'web/html/inbounds.html')
| -rw-r--r-- | web/html/inbounds.html | 99 |
1 files changed, 91 insertions, 8 deletions
diff --git a/web/html/inbounds.html b/web/html/inbounds.html index 29e6b00f..1750aa44 100644 --- a/web/html/inbounds.html +++ b/web/html/inbounds.html @@ -79,6 +79,54 @@ max-width: 200px; overflow: hidden; } + .client-comment { + font-size: 12px; + color: #888; + font-style: italic; + line-height: 1.2; + } + .dark .client-comment { + color: #bbb; + } + .client-email { + font-weight: 500; + } + .client-cell { + display: flex; + flex-direction: column; + gap: 2px; + } + .client-info-row { + 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; + } .online-animation .ant-badge-status-dot { animation: onlineAnimation 1.2s linear infinite; } @@ -382,25 +430,37 @@ <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag> <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <div v-for="clientEmail in clientCount[dbInbound.id].deactive"><span>[[ clientEmail ]]</span></div> + <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> + </div> </template> <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag> </a-popover> <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <div v-for="clientEmail in clientCount[dbInbound.id].depleted"><span>[[ clientEmail ]]</span></div> + <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> + </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> </a-popover> <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <div v-for="clientEmail in clientCount[dbInbound.id].expiring"><span>[[ clientEmail ]]</span></div> + <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> + </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> </a-popover> <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <div v-for="clientEmail in clientCount[dbInbound.id].online"><span>[[ clientEmail ]]</span></div> + <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> + </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> </a-popover> @@ -479,25 +539,37 @@ <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag> <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p> + <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> + </div> </template> <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag> </a-popover> <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p> + <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> + </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> </a-popover> <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p> + <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> + </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> </a-popover> <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content"> - <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p> + <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> + </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> </a-popover> @@ -716,6 +788,17 @@ loading(spinning = true) { this.spinning = spinning; }, + getClientWithComment(email, inboundId) { + const dbInbound = this.dbInbounds.find(inbound => inbound.id === inboundId); + if (!dbInbound) return { email, comment: '' }; + + const inboundSettings = JSON.parse(dbInbound.settings); + if (inboundSettings.clients) { + const client = inboundSettings.clients.find(c => c.email === email); + return client ? { email: client.email, comment: client.comment || '' } : { email, comment: '' }; + } + return { email, comment: '' }; + }, async getDBInbounds() { this.refreshing = true; const msg = await HttpUtil.post('/panel/inbound/list'); |