chore: clients comment improvement

- use default ant components instead custom styles
- remove comments in inbound info modal (duplicates information)
- enhance tooltip usage

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>