refactor: create custom a-statistic component

web/html/xui/component/aCustomStatistic.html

@@ -0,0 +1,55 @@
+{{define "component/customStatistic"}}
+<template>
+    <a-statistic :title="title" :value="value">
+        <template #prefix>
+            <slot name="prefix"></slot>
+        </template>
+        <template #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </a-statistic>
+</template>
+{{end}}
+
+{{define "component/aCustomStatistic"}}
+<style>
+    .dark .ant-statistic-title,
+    .dark .ant-statistic-content {
+        color: var(--dark-color-text-primary) !important
+    }
+
+    .dark .ant-statistic-title {
+        user-select: none;
+        opacity: 0.55;
+    }
+    
+    .ant-statistic-title {
+        margin-bottom: 0 !important;
+    }
+
+    .ant-statistic-content-prefix {
+        margin-right: 6px !important;
+    }
+
+    .ant-statistic-content-prefix,
+    .ant-statistic-content-value {
+        font-size: 1.05rem;
+    }
+</style>
+
+<script>
+  Vue.component('a-custom-statistic', {
+    props: {
+      'title': {
+        type: String,
+        required: false,
+      },
+      'value': {
+        type: String,
+        required: false
+      }
+    },
+    template: `{{template "component/customStatistic"}}`,
+  });
+</script>
+{{end}}

web/html/xui/component/aSettingListItem.html

@@ -22,14 +22,6 @@
 <script>
     Vue.component('a-setting-list-item', {
         props: {
-            'title': {
-                type: String,
-                required: true,
-            },
-            'description': {
-                type: String,
-                required: false,
-            },
             'paddings': {
                 type: String,
                 required: false,

web/html/xui/index.html

@@ -27,8 +27,6 @@
   .dark .ant-backup-list-item svg,
   .dark .ant-card-actions>li>*,
   .dark .ant-badge-status-text,
-  .dark .ant-statistic-title,
-  .dark .ant-statistic-content,
   .dark .ant-card-extra {
     color: var(--dark-color-text-primary) !important;
   }
@@ -44,12 +42,6 @@
   .ant-card-actions {
     background: transparent !important;
   }
-  .ant-statistic-content-prefix {
-    font-size: 20px;
-  }
-  .ant-statistic-content-value {
-    font-size: 18px;
-  }
   .ip-hidden {
     filter: blur(10px);
   }
@@ -223,18 +215,18 @@
                     </template>
                     <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="IPv4" :value="status.publicIP.ipv4">
+                        <a-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
                           <template #prefix>
                             <a-icon type="global" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="IPv6" :value="status.publicIP.ipv6">
+                        <a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
                           <template #prefix>
                             <a-icon type="global" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -243,18 +235,18 @@
                   <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
                     <a-row>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="TCP" :value="status.tcpCount">
+                        <a-custom-statistic title="TCP" :value="status.tcpCount">
                           <template #prefix>
                             <a-icon type="swap" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="UDP" :value="status.udpCount">
+                        <a-custom-statistic title="UDP" :value="status.udpCount">
                           <template #prefix>
                             <a-icon type="swap" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -263,24 +255,24 @@
                   <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
                     <a-row>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
+                        <a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
                           <template #prefix>
                             <a-icon type="arrow-up" />
                           </template>
                           <template #suffix>
                             /s
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
+                        <a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
                           <template #prefix>
                             <a-icon type="arrow-down" />
                           </template>
                           <template #suffix>
                             /s
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -289,18 +281,18 @@
                   <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
                     <a-row>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
+                        <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
                           <template #prefix>
                             <a-icon type="cloud-upload" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
+                        <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
                           <template #prefix>
                             <a-icon type="cloud-download" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -398,6 +390,7 @@
   </a-layout>
 {{template "js" .}}
 {{template "component/aThemeSwitch" .}}
+{{template "component/aCustomStatistic" .}}
 {{template "textModal"}}
 <script>
     const State = {