Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/MHSanaei/3x-ui.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorTara Rostami <132676256+TaraRostami@users.noreply.github.com>2025-03-18 11:51:05 +0300
committerGitHub <noreply@github.com>2025-03-18 11:51:05 +0300
commit21e7d45b5481bb882db008b5d95bd899510005fb (patch)
treec3355e930943acda5463e88f89c1c6251e4d0e4c /web
parentdb62a07fb89e08e974210ccb0f62cc648d799e94 (diff)
Fixes and improvements (#2789)
* Fixes and improvements * Update translate.en_US.toml
Diffstat (limited to 'web')
-rw-r--r--web/html/xui/component/aCustomStatistic.html25
-rw-r--r--web/html/xui/index.html257
-rw-r--r--web/translation/translate.en_US.toml6
3 files changed, 143 insertions, 145 deletions
diff --git a/web/html/xui/component/aCustomStatistic.html b/web/html/xui/component/aCustomStatistic.html
index 41695e90..a8ede41c 100644
--- a/web/html/xui/component/aCustomStatistic.html
+++ b/web/html/xui/component/aCustomStatistic.html
@@ -12,31 +12,6 @@
{{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: {
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 0e1c21e2..dc9b4750 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -21,17 +21,23 @@
}
.ant-backup-list-item {
gap: 10px;
- user-select: none;
- cursor: pointer;
}
.dark .ant-backup-list-item svg,
- .dark .ant-card-actions>li>*,
.dark .ant-badge-status-text,
+ .dark .ant-statistic-content,
.dark .ant-card-extra {
- color: var(--dark-color-text-primary) !important;
+ color: var(--dark-color-text-primary);
+ }
+ .dark .ant-statistic-title,
+ .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-card-actions>li>*:hover {
- color: var(--color-primary-100) !important;
+ .dark .ant-radio-checked .ant-radio-inner {
+ border-color: var(--color-primary-100);
}
.dark .ant-backup-list,
.dark .ant-xray-version-list,
@@ -40,11 +46,35 @@
border-color: var(--dark-color-stroke);
}
.ant-card-actions {
- background: transparent !important;
+ background: transparent;
+ }
+ .ant-statistic-content {
+ font-size: 16px;
}
.ip-hidden {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
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>
<body>
@@ -61,66 +91,64 @@
show-icon closable>
</a-alert>
</transition>
- <transition v-if="status.isLoaded" name="list" appear>
- <a-row>
- <a-card hoverable>
+ <transition name="list" appear>
+ <template>
+ <a-row v-if="!status.isLoaded">
+ <a-card hoverable style="text-align: center; padding: 30px 0; margin-top: 10px; background: transparent;">
+ <a-spin tip="Loading..."></a-spin>
+ </a-card>
+ </a-row>
+ <a-row v-else>
<a-row>
- <a-col :sm="24" :md="12">
- <a-row>
- <a-col :span="12" style="text-align: center">
- <a-progress type="dashboard" status="normal"
- :stroke-color="status.cpu.color"
- :percent="status.cpu.percent"></a-progress>
- <div><b>CPU:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] <a-tooltip>
- <a-icon type="area-chart"></a-icon>
- <template slot="title">
- <div><b>Logical Processors:</b> [[ (status.logicalPro) ]]</div>
- <div><b>Speed:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
- </template>
- </a-tooltip></div>
- </a-col>
- <a-col :span="12" style="text-align: center">
- <a-progress type="dashboard" status="normal"
- :stroke-color="status.mem.color"
- :percent="status.mem.percent"></a-progress>
- <div>
- <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
- </div>
- </a-col>
- </a-row>
- </a-col>
- <a-col :sm="24" :md="12">
+ <a-card hoverable>
<a-row>
- <a-col :span="12" style="text-align: center">
- <a-progress type="dashboard" status="normal"
- :stroke-color="status.swap.color"
- :percent="status.swap.percent"></a-progress>
- <div>
- <b>Swap:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
- </div>
+ <a-col :sm="24" :md="12">
+ <a-row>
+ <a-col :span="12" style="text-align: center">
+ <a-progress type="dashboard" status="normal"
+ :stroke-color="status.cpu.color"
+ :percent="status.cpu.percent"></a-progress>
+ <div><b>CPU:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] <a-tooltip>
+ <a-icon type="area-chart"></a-icon>
+ <template slot="title">
+ <div><b>Logical Processors:</b> [[ (status.logicalPro) ]]</div>
+ <div><b>Speed:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+ </template>
+ </a-tooltip></div>
+ </a-col>
+ <a-col :span="12" style="text-align: center">
+ <a-progress type="dashboard" status="normal"
+ :stroke-color="status.mem.color"
+ :percent="status.mem.percent"></a-progress>
+ <div>
+ <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
+ </div>
+ </a-col>
+ </a-row>
</a-col>
- <a-col :span="12" style="text-align: center">
- <a-progress type="dashboard" status="normal"
- :stroke-color="status.disk.color"
- :percent="status.disk.percent"></a-progress>
- <div>
- <b>{{ i18n "pages.index.hard"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
- </div>
+ <a-col :sm="24" :md="12">
+ <a-row>
+ <a-col :span="12" style="text-align: center">
+ <a-progress type="dashboard" status="normal"
+ :stroke-color="status.swap.color"
+ :percent="status.swap.percent"></a-progress>
+ <div>
+ <b>Swap:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
+ </div>
+ </a-col>
+ <a-col :span="12" style="text-align: center">
+ <a-progress type="dashboard" status="normal"
+ :stroke-color="status.disk.color"
+ :percent="status.disk.percent"></a-progress>
+ <div>
+ <b>{{ i18n "pages.index.hard"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
+ </div>
+ </a-col>
+ </a-row>
</a-col>
</a-row>
- </a-col>
+ </a-card>
</a-row>
- </a-card>
- </a-row>
- </transition>
- <transition name="list" appear>
- <template v-if="!status.isLoaded">
- <div style="text-align: center; padding: 30px 0; margin-top: 10px;">
- <a-spin size="large"></a-spin>
- </div>
- </template>
- <template v-else>
- <a-row>
<a-col :sm="24" :lg="12">
<a-card hoverable>
<template #title>
@@ -133,7 +161,7 @@
</template>
<template #extra>
<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 v-else>
<a-popover :overlay-class-name="themeSwitcher.currentTheme">
@@ -214,27 +242,25 @@
</a-card>
</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-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
+ <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
+ <a-row>
+ <a-col :span="12">
+ <a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
<template #prefix>
- <a-icon type="global" />
+ <a-icon type="arrow-up" />
+ </template>
+ <template #suffix>
+ /s
</template>
</a-custom-statistic>
</a-col>
- <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
- <a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
+ <a-col :span="12">
+ <a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
<template #prefix>
- <a-icon type="global" />
+ <a-icon type="arrow-down" />
+ </template>
+ <template #suffix>
+ /s
</template>
</a-custom-statistic>
</a-col>
@@ -242,19 +268,19 @@
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
- <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
+ <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
<a-row>
- <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
- <a-custom-statistic title="TCP" :value="status.tcpCount">
+ <a-col :span="12">
+ <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
<template #prefix>
- <a-icon type="swap" />
+ <a-icon type="cloud-upload" />
</template>
</a-custom-statistic>
</a-col>
- <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
- <a-custom-statistic title="UDP" :value="status.udpCount">
+ <a-col :span="12">
+ <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
<template #prefix>
- <a-icon type="swap" />
+ <a-icon type="cloud-download" />
</template>
</a-custom-statistic>
</a-col>
@@ -262,25 +288,27 @@
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
- <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
- <a-row>
- <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
- <a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
+ <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-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
<template #prefix>
- <a-icon type="arrow-up" />
- </template>
- <template #suffix>
- /s
+ <a-icon type="global" />
</template>
</a-custom-statistic>
</a-col>
- <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
- <a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
+ <a-col :xs="24" :xxl="12" :style="{ marginTop: isMobile ? '10px' : 0 }">
+ <a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
<template #prefix>
- <a-icon type="arrow-down" />
- </template>
- <template #suffix>
- /s
+ <a-icon type="global" />
</template>
</a-custom-statistic>
</a-col>
@@ -288,19 +316,19 @@
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
- <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
+ <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
<a-row>
- <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
- <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
+ <a-col :span="12">
+ <a-custom-statistic title="TCP" :value="status.tcpCount">
<template #prefix>
- <a-icon type="cloud-upload" />
+ <a-icon type="swap" />
</template>
</a-custom-statistic>
</a-col>
- <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
- <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
+ <a-col :span="12">
+ <a-custom-statistic title="UDP" :value="status.udpCount">
<template #prefix>
- <a-icon type="cloud-download" />
+ <a-icon type="swap" />
</template>
</a-custom-statistic>
</a-col>
@@ -318,10 +346,8 @@
<a-alert type="warning" style="margin-bottom: 12px; width: 100%;"
message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
<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-meta>
- <template #title>[[ version ]]</template>
- </a-list-item-meta>
+ <a-list-item class="ant-xray-version-list-item" v-for="version, index in versionModal.versions">
+ <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
<a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
</a-list-item>
</a-list>
@@ -378,22 +404,19 @@
footer=""
:class="themeSwitcher.currentTheme">
<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>
<template #title>{{ i18n "pages.index.exportDatabase" }}</template>
<template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
</a-list-item-meta>
- <a-icon type="right" />
+ <a-button @click="exportDatabase()" type="primary" icon="download"/>
</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>
<template #title>{{ i18n "pages.index.importDatabase" }}</template>
<template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
- <templaet #avatar>
- <a-icon type="import" />
- </templaet>
</a-list-item-meta>
- <a-icon type="right" />
+ <a-button @click="importDatabase()" type="primary" icon="upload" />
</a-list-item>
</a-list>
</a-modal>
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index e3090667..ff8d01f0 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -103,12 +103,12 @@
"systemLoad" = "System Load"
"systemLoadDesc" = "System load average for the past 1, 5, and 15 minutes"
"connectionCount" = "Connection Stats"
-"ipAddresses" = "IP addresses"
+"ipAddresses" = "IP Addresses"
"toggleIpVisibility" = "Toggle visibility of the IP"
-"overallSpeed" = "Overall speed"
+"overallSpeed" = "Overall Speed"
"upload" = "Upload"
"download" = "Download"
-"totalData" = "Total data"
+"totalData" = "Total Data"
"sent" = "Sent"
"received" = "Received"
"xraySwitchVersionDialog" = "Change Xray Version"
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-25 02:37:30 +0300