Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-04-19 21:42:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Minor fixes and improvements

Browse source
This commit is contained in:
TaraRostami 2025-03-15 09:09:36 -05:00
parent b9307c6c9c
commit e675c1d762
2 changed files with 154 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,19 +21,23 @@
} }
.ant-backup-list-item { .ant-backup-list-item {
gap: 10px; gap: 10px;
user-select: none;
cursor: pointer;
} }
.dark .ant-backup-list-item svg, .dark .ant-backup-list-item svg,
.dark .ant-card-actions>li>*,
.dark .ant-badge-status-text, .dark .ant-badge-status-text,
.dark .ant-statistic-title,
.dark .ant-statistic-content, .dark .ant-statistic-content,
.dark .ant-card-extra { .dark .ant-card-extra {
color: var(--dark-color-text-primary) !important; color: var(--dark-color-text-primary);
} }
.dark .ant-card-actions>li>*:hover { .dark .ant-statistic-title,
color: var(--color-primary-100) !important; .dark .ant-card-actions>li {
color: rgba(255, 255, 255, 0.55);
}
.dark .ant-radio-inner {
background-color: var(--dark-color-surface-100);
border-color: var(--dark-color-surface-600);
}
.dark .ant-radio-checked .ant-radio-inner {
border-color: var(--color-primary-100);
} }
.dark .ant-backup-list, .dark .ant-backup-list,
.dark .ant-xray-version-list, .dark .ant-xray-version-list,
@ -42,17 +46,35 @@
border-color: var(--dark-color-stroke); border-color: var(--dark-color-stroke);
} }
.ant-card-actions { .ant-card-actions {
background: transparent !important; background: transparent;
} }
.ant-statistic-content-prefix { .ant-statistic-content {
font-size: 20px; font-size: 16px;
}
.ant-statistic-content-value {
font-size: 18px;
} }
.ip-hidden { .ip-hidden {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
filter: blur(10px); filter: blur(10px);
} }
.running-animation .ant-badge-status-dot {
animation: runningAnimation 1.2s linear infinite;
}
.running-animation .ant-badge-status-processing:after {
border-color: var(--color-primary-100);
}
@keyframes runningAnimation {
0%,
50%,
100% {
transform: scale(1);
opacity: 1;
}
10% {
transform: scale(1.5);
opacity: .2;
}
}
</style> </style>
<body> <body>
@ -69,7 +91,14 @@
show-icon closable> show-icon closable>
</a-alert> </a-alert>
</transition> </transition>
<transition v-if="status.isLoaded" name="list" appear> <transition name="list" appear>
<template>
<a-row v-if="!status.isLoaded">
<a-card hoverable style="text-align: center; padding: 30px 0; margin-top: 10px;">
<a-spin size="large"></a-spin>
</a-card>
</a-row>
<a-row v-else>
<a-row> <a-row>
<a-card hoverable> <a-card hoverable>
<a-row> <a-row>
@ -120,20 +149,11 @@
</a-row> </a-row>
</a-card> </a-card>
</a-row> </a-row>
</transition>
<transition name="list" appear>
<template v-if="!status.isLoaded">
<a-card hoverable style="text-align: center; padding: 30px 0; margin-top: 10px;">
<a-spin size="large"></a-spin>
</a-card>
</template>
<template v-else>
<a-row>
<a-col :sm="24" :lg="12"> <a-col :sm="24" :lg="12">
<a-card title='{{ i18n "pages.index.xrayStatus" }}' hoverable> <a-card title='{{ i18n "pages.index.xrayStatus" }}' hoverable>
<template #extra> <template #extra>
<template v-if="status.xray.state != State.Error"> <template v-if="status.xray.state != State.Error">
<a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/> <a-badge status="processing" class="running-animation" :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
</template> </template>
<template v-else> <template v-else>
<a-popover :overlay-class-name="themeSwitcher.currentTheme"> <a-popover :overlay-class-name="themeSwitcher.currentTheme">
@ -211,58 +231,10 @@
<a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag> <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :lg="12">
<a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
<template #extra>
<a-tooltip>
<template #title>
{{ i18n "pages.index.toggleIpVisibility" }}
</template>
<a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
</a-tooltip>
</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">
<template #prefix>
<a-icon type="global" />
</template>
</a-statistic>
</a-col>
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
<a-statistic title="IPv6" :value="status.publicIP.ipv6">
<template #prefix>
<a-icon type="global" />
</template>
</a-statistic>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
<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">
<template #prefix>
<a-icon type="swap" />
</template>
</a-statistic>
</a-col>
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
<a-statistic title="UDP" :value="status.udpCount">
<template #prefix>
<a-icon type="swap" />
</template>
</a-statistic>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :sm="24" :lg="12"> <a-col :sm="24" :lg="12">
<a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable> <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
<a-row> <a-row>
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }"> <a-col :span="12">
<a-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)"> <a-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
<template #prefix> <template #prefix>
<a-icon type="arrow-up" /> <a-icon type="arrow-up" />
@ -272,7 +244,7 @@
</template> </template>
</a-statistic> </a-statistic>
</a-col> </a-col>
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }"> <a-col :span="12">
<a-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)"> <a-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
<template #prefix> <template #prefix>
<a-icon type="arrow-down" /> <a-icon type="arrow-down" />
@ -288,14 +260,14 @@
<a-col :sm="24" :lg="12"> <a-col :sm="24" :lg="12">
<a-card title='{{ i18n "pages.index.totalData" }}' hoverable> <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
<a-row> <a-row>
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }"> <a-col :span="12">
<a-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)"> <a-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
<template #prefix> <template #prefix>
<a-icon type="cloud-upload" /> <a-icon type="cloud-upload" />
</template> </template>
</a-statistic> </a-statistic>
</a-col> </a-col>
<a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }"> <a-col :span="12">
<a-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)"> <a-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
<template #prefix> <template #prefix>
<a-icon type="cloud-download" /> <a-icon type="cloud-download" />
@ -305,6 +277,54 @@
</a-row> </a-row>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :lg="12">
<a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
<template #extra>
<a-tooltip>
<template #title>
{{ i18n "pages.index.toggleIpVisibility" }}
</template>
<a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
</a-tooltip>
</template>
<a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
<a-col :xs="24" :xxl="12" :style="{ marginTop: isMobile ? '10px' : 0 }">
<a-statistic title="IPv4" :value="status.publicIP.ipv4">
<template #prefix>
<a-icon type="global" />
</template>
</a-statistic>
</a-col>
<a-col :xs="24" :xxl="12" :style="{ marginTop: isMobile ? '10px' : 0 }">
<a-statistic title="IPv6" :value="status.publicIP.ipv6">
<template #prefix>
<a-icon type="global" />
</template>
</a-statistic>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
<a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
<a-row>
<a-col :span="12">
<a-statistic title="TCP" :value="status.tcpCount">
<template #prefix>
<a-icon type="swap" />
</template>
</a-statistic>
</a-col>
<a-col :span="12">
<a-statistic title="UDP" :value="status.udpCount">
<template #prefix>
<a-icon type="swap" />
</template>
</a-statistic>
</a-col>
</a-row>
</a-card>
</a-col>
</a-row> </a-row>
</template> </template>
</transition> </transition>
@ -316,10 +336,8 @@
<a-alert type="warning" style="margin-bottom: 12px; width: 100%;" <a-alert type="warning" style="margin-bottom: 12px; width: 100%;"
message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert> message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
<a-list class="ant-xray-version-list" bordered style="width: 100%;"> <a-list class="ant-xray-version-list" bordered style="width: 100%;">
<a-list-item class="ant-xray-version-list-item" v-for="version in versionModal.versions"> <a-list-item class="ant-xray-version-list-item" v-for="version, index in versionModal.versions">
<a-list-item-meta> <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
<template #title>[[ version ]]</template>
</a-list-item-meta>
<a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio> <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
</a-list-item> </a-list-item>
</a-list> </a-list>
@ -376,22 +394,19 @@
footer="" footer=""
:class="themeSwitcher.currentTheme"> :class="themeSwitcher.currentTheme">
<a-list class="ant-backup-list" bordered style="width: 100%;"> <a-list class="ant-backup-list" bordered style="width: 100%;">
<a-list-item class="ant-backup-list-item" @click="exportDatabase()"> <a-list-item class="ant-backup-list-item">
<a-list-item-meta> <a-list-item-meta>
<template #title>{{ i18n "pages.index.exportDatabase" }}</template> <template #title>{{ i18n "pages.index.exportDatabase" }}</template>
<template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template> <template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
</a-list-item-meta> </a-list-item-meta>
<a-icon type="right" /> <a-button @click="exportDatabase()" type="primary" icon="download"/>
</a-list-item> </a-list-item>
<a-list-item class="ant-backup-list-item" @click="importDatabase()"> <a-list-item class="ant-backup-list-item">
<a-list-item-meta> <a-list-item-meta>
<template #title>{{ i18n "pages.index.importDatabase" }}</template> <template #title>{{ i18n "pages.index.importDatabase" }}</template>
<template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template> <template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
<templaet #avatar>
<a-icon type="import" />
</templaet>
</a-list-item-meta> </a-list-item-meta>
<a-icon type="right" /> <a-button @click="importDatabase()" type="primary" icon="upload" />
</a-list-item> </a-list-item>
</a-list> </a-list>
</a-modal> </a-modal>

6
web/translation/translate.en_US.toml
View file

@ -100,12 +100,12 @@
"systemLoad" = "System Load" "systemLoad" = "System Load"
"systemLoadDesc" = "System load average for the past 1, 5, and 15 minutes" "systemLoadDesc" = "System load average for the past 1, 5, and 15 minutes"
"connectionCount" = "Connection Stats" "connectionCount" = "Connection Stats"
"ipAddresses" = "IP addresses" "ipAddresses" = "IP Addresses"
"toggleIpVisibility" = "Toggle visibility of the IP" "toggleIpVisibility" = "Toggle visibility of the IP"
"overallSpeed" = "Overall speed" "overallSpeed" = "Overall Speed"
"upload" = "Upload" "upload" = "Upload"
"download" = "Download" "download" = "Download"
"totalData" = "Total data" "totalData" = "Total Data"
"sent" = "Sent" "sent" = "Sent"
"received" = "Received" "received" = "Received"
"xraySwitchVersionDialog" = "Change Xray Version" "xraySwitchVersionDialog" = "Change Xray Version"