chore: pretty 'Inbounds' page

web/html/xui/inbounds.html

@@ -43,6 +43,12 @@
 	    margin:-10px 2px !important;
     }
   }
+  .ant-custom-popover-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 5px 0;
+  }
   .ant-col-sm-24 {
     margin: 0.5rem -2rem 0.5rem 2rem;
   }
@@ -137,61 +143,73 @@
           </a-alert>
         </transition>
         <transition name="list" appear>
-          <a-card hoverable>
+          <a-card size="small" style="padding: 16px;" hoverable>
             <a-row>
-              <a-col :xs="24" :sm="24" :lg="12">
-                {{ i18n "pages.inbounds.totalDownUp" }}:
-                <a-tag color="green">[[ SizeFormatter.sizeFormat(total.up) ]] / [[ SizeFormatter.sizeFormat(total.down) ]]</a-tag>
+              <a-col :sm="12" :md="6">
+                <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`">
+                  <template #prefix>
+                    <a-icon type="swap"></a-icon>
+                  </template>
+                </a-custom-statistic>
               </a-col>
-              <a-col :xs="24" :sm="24" :lg="12">
-                {{ i18n "pages.inbounds.totalUsage" }}:
-                <a-tag color="green">[[ SizeFormatter.sizeFormat(total.up + total.down) ]]</a-tag>
+              <a-col :sm="12" :md="6">
+                <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                  <template #prefix>
+                    <a-icon type="pie-chart"></a-icon>
+                  </template>
+                </a-custom-statistic>
               </a-col>
-              <a-col :xs="24" :sm="24" :lg="12">
-                {{ i18n "pages.inbounds.inboundCount" }}:
-                <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
+              <a-col :sm="12" :md="6">
+                <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                  <template #prefix>
+                    <a-icon type="bars"></a-icon>
+                  </template>
+                </a-custom-statistic>
               </a-col>
-              <a-col :xs="24" :sm="24" :lg="12">
-                <template>
+              <a-col :sm="12" :md="6">
+                <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }">
+                  <template #prefix>
+                    <a-space direction="horizontal">
+                      <a-icon type="team"></a-icon>
                       <div>
                         <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                    {{ i18n "clients" }}:
                         <a-tag color="green">[[ total.clients ]]</a-tag>
                         <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                        <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
+                            <div v-for="clientEmail in total.deactive"><span>[[ clientEmail ]]</span></div>
                           </template>
                           <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
                         </a-popover>
                         <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                        <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
+                            <div v-for="clientEmail in total.depleted"><span>[[ clientEmail ]]</span></div>
                           </template>
                           <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
                         </a-popover>
                         <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                        <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
+                            <div v-for="clientEmail in total.expiring"><span>[[ clientEmail ]]</span></div>
                           </template>
                           <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
                         </a-popover>
                         <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                        <p v-for="clientEmail in onlineClients">[[ clientEmail ]]</p>
+                            <div v-for="clientEmail in onlineClients"><span>[[ clientEmail ]]</span></div>
                           </template>
                           <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
                         </a-popover>
                       </div>
+                    </a-space>
                   </template>
+                </a-custom-statistic>
               </a-col>
             </a-row>
           </a-card>
         </transition>
         <transition name="list" appear>
           <a-card hoverable>
-            <div slot="title">
-              <a-row>
-                <a-col :xs="12" :sm="12" :lg="12">
+            <template #title>
+              <a-space direction="horizontal">
                 <a-button type="primary" icon="plus" @click="openAddInbound">
                   <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
                 </a-button>
@@ -226,20 +244,35 @@
                     </a-menu-item>
                   </a-menu>
                 </a-dropdown>
-                </a-col>
-                <a-col :xs="12" :sm="12" :lg="12" style="text-align: right;">
+              </a-space>
+            </template>
+            <template #extra>
+              <a-button-group>
+                <a-button icon="sync" @click="manualRefresh" :loading="refreshing"></a-button>
+                <a-popover placement="bottomRight" trigger="click" :overlay-class-name="themeSwitcher.currentTheme"> 
+                  <template #title>
+                    <div class="ant-custom-popover-title">
+                      <a-switch v-model="isRefreshEnabled" @change="toggleRefresh" size="small"></a-switch>
+                      <span>{{ i18n "pages.inbounds.autoRefresh" }}</span>
+                    </div>
+                  </template>
+                  <template #content>
+                    <a-space direction="vertical">
+                      <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span>
                       <a-select v-model="refreshInterval"
-                      style="width: 65px;"
-                      v-if="isRefreshEnabled"
+                          :disabled="!isRefreshEnabled"
+                          style="width: 100%;"
                           @change="changeRefreshInterval"
                           :dropdown-class-name="themeSwitcher.currentTheme">
                         <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
                       </a-select>
-                  <a-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
-                  <a-switch v-model="isRefreshEnabled" @change="toggleRefresh"></a-switch>
-                </a-col>
-              </a-row>
-            </div>
+                    </a-space>
+                  </template>
+                  <a-button icon="down"></a-button>
+                </a-popover>
+              </a-button-group>
+            </template>
+            <a-space direction="vertical">
               <div :style="isMobile ? '' : 'display: flex; align-items: center; justify-content: flex-start;'">
                 <a-switch v-model="enableFilter"
                     :style="isMobile ? 'margin-bottom: .5rem; display: flex;' : 'margin-right: .5rem;'"
@@ -256,7 +289,6 @@
                   <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
                 </a-radio-group>
               </div>
-            <a-back-top></a-back-top>
               <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
                   :data-source="searchedInbounds"
                   :scroll="isMobile ? {} : { x: 1000 }"
@@ -346,25 +378,25 @@
                     <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">
-                      <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].deactive"><span>[[ clientEmail ]]</span></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"><span>[[ clientEmail ]]</span></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"><span>[[ clientEmail ]]</span></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"><span>[[ clientEmail ]]</span></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>
@@ -537,6 +569,7 @@
                   </a-table>
                 </template>
               </a-table>
+            </a-space>
           </a-card>
         </transition>
       </a-spin>
@@ -549,6 +582,7 @@
 <script src="{{ .base_path }}assets/js/model/inbound.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
 {{template "component/aThemeSwitch" .}}
+{{template "component/aCustomStatistic" .}}
 {{template "component/aPersianDatepicker" .}}
 <script>
     const columns = [{

web/translation/translate.en_US.toml

@@ -140,6 +140,8 @@
 "resetTraffic" = "Reset Traffic"
 "addInbound" = "Add Inbound"
 "generalActions" = "General Actions"
+"autoRefresh" = "Auto-refresh"
+"autoRefreshInterval" = "Interval"
 "create" = "Create"
 "update" = "Update"
 "modifyInbound" = "Modify Inbound"

web/translation/translate.es_ES.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "Restablecer Tráfico"
 "addInbound" = "Agregar Entrada"
 "generalActions" = "Acciones Generales"
+"autoRefresh" = "Auto-actualizar"
+"autoRefreshInterval" = "Intervalo"
 "create" = "Crear"
 "update" = "Actualizar"
 "modifyInbound" = "Modificar Entrada"

web/translation/translate.fa_IR.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "ریست ترافیک"
 "addInbound" = "افزودن ورودی"
 "generalActions" = "عملیات کلی"
+"autoRefresh" = "تازه‌سازی خودکار"
+"autoRefreshInterval" = "فاصله"
 "create" = "افزودن"
 "update" = "ویرایش"
 "modifyInbound" = "ویرایش ورودی"

web/translation/translate.id_ID.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "Reset Traffic"
 "addInbound" = "Tambahkan Masuk"
 "generalActions" = "Tindakan Umum"
+"autoRefresh" = "Pembaruan otomatis"
+"autoRefreshInterval" = "Interval"
 "create" = "Buat"
 "update" = "Perbarui"
 "modifyInbound" = "Ubah Masuk"

web/translation/translate.ja_JP.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "トラフィックリセット"
 "addInbound" = "インバウンド追加"
 "generalActions" = "一般操作"
+"autoRefresh" = "自動更新"
+"autoRefreshInterval" = "間隔"
 "create" = "追加"
 "update" = "更新"
 "modifyInbound" = "インバウンド修正"

web/translation/translate.pt_BR.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "Redefinir Tráfego"
 "addInbound" = "Adicionar Inbound"
 "generalActions" = "Ações Gerais"
+"autoRefresh" = "Atualização automática"
+"autoRefreshInterval" = "Intervalo"
 "create" = "Criar"
 "update" = "Atualizar"
 "modifyInbound" = "Modificar Inbound"

web/translation/translate.ru_RU.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "Сбросить трафик"
 "addInbound" = "Добавить подключение"
 "generalActions" = "Общие действия"
+"autoRefresh" = "Автообновление"
+"autoRefreshInterval" = "Интервал"
 "create" = "Создать"
 "update" = "Обновить"
 "modifyInbound" = "Изменить подключение"

web/translation/translate.tr_TR.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "Trafiği Sıfırla"
 "addInbound" = "Gelen Ekle"
 "generalActions" = "Genel Eylemler"
+"autoRefresh" = "Otomatik yenileme"
+"autoRefreshInterval" = "Aralık"
 "create" = "Oluştur"
 "update" = "Güncelle"
 "modifyInbound" = "Geleni Düzenle"

web/translation/translate.uk_UA.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "Скинути трафік"
 "addInbound" = "Додати вхідний"
 "generalActions" = "Загальні дії"
+"autoRefresh" = "Автооновлення"
+"autoRefreshInterval" = "Інтервал"
 "create" = "Створити"
 "update" = "Оновити"
 "modifyInbound" = "Змінити вхідний"

web/translation/translate.vi_VN.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "Đặt lại lưu lượng"
 "addInbound" = "Thêm điểm vào"
 "generalActions" = "Hành động chung"
+"autoRefresh" = "Tự động làm mới"
+"autoRefreshInterval" = "Khoảng thời gian"
 "create" = "Tạo mới"
 "update" = "Cập nhật"
 "modifyInbound" = "Chỉnh sửa điểm vào (Inbound)"

web/translation/translate.zh_CN.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "重置流量"
 "addInbound" = "添加入站"
 "generalActions" = "通用操作"
+"autoRefresh" = "自动刷新"
+"autoRefreshInterval" = "间隔"
 "create" = "添加"
 "update" = "修改"
 "modifyInbound" = "修改入站"

web/translation/translate.zh_TW.toml

@@ -142,6 +142,8 @@
 "resetTraffic" = "重置流量"
 "addInbound" = "新增入站"
 "generalActions" = "通用操作"
+"autoRefresh" = "自動刷新"
+"autoRefreshInterval" = "間隔"
 "create" = "新增"
 "update" = "修改"
 "modifyInbound" = "修改入站"