Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-05-15 20:58:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions1

refactor: create custom a-statistic component

Browse source
This commit is contained in:
Shishkevich D. 2025-03-17 10:45:17 +00:00
parent a83d2cc6a5
commit 01e260cab4
3 changed files with 72 additions and 32 deletions

55
web/html/xui/component/aCustomStatistic.html Normal file
View file

@ -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}}

8
web/html/xui/component/aSettingListItem.html
View file

@ -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,

41
web/html/xui/index.html
View file

@ -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 = {