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/html
diff options
context:
space:
mode:
authorShishkevich D. <135337715+shishkevichd@users.noreply.github.com>2025-03-15 14:15:46 +0300
committerGitHub <noreply@github.com>2025-03-15 14:15:46 +0300
commitb9307c6c9c26c7d87819ef60c18eccce134f09ea (patch)
tree5770a7ecbc87a9b90b9d719c27109d43a9512bdd /web/html
parentd30cdbf49a7443a62f599d4f91a4f1ebceb1c666 (diff)
chore: pretty 'Overview' page (#2772)
* chore: pretty 'Overview' page * chore: some improvements in 'overview page' - reduced font size - added caption to buttons - fixed display of xray state - xray version display returned
Diffstat (limited to 'web/html')
-rw-r--r--web/html/xui/index.html389
1 files changed, 217 insertions, 172 deletions
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index e78940fd..bd7d3878 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -24,13 +24,35 @@
user-select: none;
cursor: pointer;
}
- .dark .ant-backup-list-item svg {
- color: var(--dark-color-text-primary);
+ .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;
+ }
+ .dark .ant-card-actions>li>*:hover {
+ color: var(--color-primary-100) !important;
}
.dark .ant-backup-list,
- .dark .ant-xray-version-list {
+ .dark .ant-xray-version-list,
+ .dark .ant-card-actions,
+ .dark .ant-card-actions>li:not(:last-child) {
border-color: var(--dark-color-stroke);
}
+ .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);
+ }
</style>
<body>
@@ -47,7 +69,7 @@
show-icon closable>
</a-alert>
</transition>
- <transition name="list" appear>
+ <transition v-if="status.isLoaded" name="list" appear>
<a-row>
<a-card hoverable>
<a-row>
@@ -100,172 +122,191 @@
</a-row>
</transition>
<transition name="list" appear>
- <a-row>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <b>3X-UI:</b>
- <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
- <a rel="noopener" href="https://t.me/XrayUI" target="_blank"><a-tag color="green">@XrayUI</a-tag></a>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <b>{{ i18n "pages.index.operationHours" }}:</b>
- <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
- <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <b>{{ i18n "pages.index.xrayStatus" }}:</b>
- <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]] </a-tag>
- <a-popover v-if="status.xray.state === State.Error" :overlay-class-name="themeSwitcher.currentTheme">
- <span slot="title" style="font-size: 12pt">An error occurred while running Xray
- <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
- </span>
- <template slot="content">
- <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
- </template>
- <a-icon type="question-circle"></a-icon>
- </a-popover>
- <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
- <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>
- <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <b>{{ i18n "menu.link" }}:</b>
- <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
- <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
- <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <b>{{ i18n "pages.index.systemLoad" }}:</b>
- <a-tag color="green">
- <a-tooltip>
- [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
- <template slot="title">
- {{ i18n "pages.index.systemLoadDesc" }}
+ <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-card title='{{ i18n "pages.index.xrayStatus" }}' hoverable>
+ <template #extra>
+ <template v-if="status.xray.state != State.Error">
+ <a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
</template>
- </a-tooltip>
- </a-tag>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <b>{{ i18n "usage"}}:</b>
- <a-tag color="green"> RAM: [[ SizeFormatter.sizeFormat(status.appStats.mem) ]] </a-tag>
- <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <a-row>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="global"></a-icon> IPv4
- <template slot="title">
- [[ status.publicIP.ipv4 ]]
+ <template v-else>
+ <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+ <span slot="title" style="font-size: 12pt">An error occurred while running Xray
+ <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
+ </span>
+ <template slot="content">
+ <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
</template>
- </a-tooltip>
- </a-tag>
- </a-col>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="global"></a-icon> IPv6
- <template slot="title">
- [[ status.publicIP.ipv6 ]]
+ <a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
+ </a-popover>
+ </template>
+ </template>
+ <template #actions>
+ <a-space direction="horizontal" @click="stopXrayService" style="justify-content: center;">
+ <a-icon type="poweroff"></a-icon>
+ <span>{{ i18n "pages.index.stopXray" }}</span>
+ </a-space>
+ <a-space direction="horizontal" @click="restartXrayService" style="justify-content: center;">
+ <a-icon type="reload"></a-icon>
+ <span>{{ i18n "pages.index.restartXray" }}</span>
+ </a-space>
+ <a-space direction="horizontal" @click="openSelectV2rayVersion" style="justify-content: center;">
+ <a-icon type="tool"></a-icon>
+ <span>v[[ status.xray.version ]]</span>
+ </a-space>
+ </template>
+ </a-card>
+ </a-col>
+ <a-col :sm="24" :lg="12">
+ <a-card title='{{ i18n "menu.link" }}' hoverable>
+ <template #actions>
+ <a-space direction="horizontal" @click="openLogs()" style="justify-content: center;">
+ <a-icon type="bars"></a-icon>
+ <span>{{ i18n "pages.index.logs" }}</span>
+ </a-space>
+ <a-space direction="horizontal" @click="openConfig" style="justify-content: center;">
+ <a-icon type="control"></a-icon>
+ <span>{{ i18n "pages.index.config" }}</span>
+ </a-space>
+ <a-space direction="horizontal" @click="openBackup" style="justify-content: center;">
+ <a-icon type="cloud-server"></a-icon>
+ <span>{{ i18n "pages.index.backup" }}</span>
+ </a-space>
+ </template>
+ </a-card>
+ </a-col>
+ <a-col :sm="24" :lg="12">
+ <a-card title='3X-UI' hoverable>
+ <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
+ <a rel="noopener" href="https://t.me/XrayUI" target="_blank"><a-tag color="green">@XrayUI</a-tag></a>
+ </a-card>
+ </a-col>
+ <a-col :sm="24" :lg="12">
+ <a-card title='{{ i18n "pages.index.operationHours" }}' hoverable>
+ <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
+ <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
+ </a-card>
+ </a-col>
+ <a-col :sm="24" :lg="12">
+ <a-card title='{{ i18n "pages.index.systemLoad" }}' hoverable>
+ <a-tag color="green">
+ <a-tooltip>
+ [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
+ <template slot="title">
+ {{ i18n "pages.index.systemLoadDesc" }}
+ </template>
+ </a-tooltip>
+ </a-tag>
+ </a-card>
+ </a-col>
+ <a-col :sm="24" :lg="12">
+ <a-card title='{{ i18n "usage"}}' hoverable>
+ <a-tag color="green"> RAM: [[ SizeFormatter.sizeFormat(status.appStats.mem) ]] </a-tag>
+ <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
+ </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-statistic title="IPv4" :value="status.publicIP.ipv4">
+ <template #prefix>
+ <a-icon type="global" />
</template>
- </a-tooltip>
- </a-tag>
- </a-col>
- </a-row>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <a-row>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]]
- <template slot="title">
- {{ i18n "pages.index.connectionTcpCountDesc" }}
+ </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-tooltip>
- </a-tag>
- </a-col>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]]
- <template slot="title">
- {{ i18n "pages.index.connectionUdpCountDesc" }}
+ </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-tooltip>
- </a-tag>
- </a-col>
- </a-row>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <a-row>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="arrow-up"></a-icon> Up: [[ SizeFormatter.sizeFormat(status.netIO.up) ]]/s
- <template slot="title">
- {{ i18n "pages.index.upSpeed" }}
+ </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-tooltip>
- </a-tag>
- </a-col>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="arrow-down"></a-icon> Down: [[ SizeFormatter.sizeFormat(status.netIO.down) ]]/s
- <template slot="title">
- {{ i18n "pages.index.downSpeed" }}
+ </a-statistic>
+ </a-col>
+ </a-row>
+ </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-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
+ <template #prefix>
+ <a-icon type="arrow-up" />
</template>
- </a-tooltip>
- </a-tag>
- </a-col>
- </a-row>
- </a-card>
- </a-col>
- <a-col :sm="24" :lg="12">
- <a-card hoverable>
- <a-row>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="cloud-upload"></a-icon>
- <template slot="title">
- {{ i18n "pages.index.totalSent" }}
- </template> Out: [[ SizeFormatter.sizeFormat(status.netTraffic.sent) ]]
- </a-tooltip>
- </a-tag>
- </a-col>
- <a-col :span="12">
- <a-tag>
- <a-tooltip>
- <a-icon type="cloud-download"></a-icon>
- <template slot="title">
- {{ i18n "pages.index.totalReceive" }}
- </template> In: [[ SizeFormatter.sizeFormat(status.netTraffic.recv) ]]
- </a-tooltip>
- </a-tag>
- </a-col>
- </a-row>
- </a-card>
- </a-col>
- </a-row>
+ <template #suffix>
+ /s
+ </template>
+ </a-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)">
+ <template #prefix>
+ <a-icon type="arrow-down" />
+ </template>
+ <template #suffix>
+ /s
+ </template>
+ </a-statistic>
+ </a-col>
+ </a-row>
+ </a-card>
+ </a-col>
+ <a-col :sm="24" :lg="12">
+ <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)">
+ <template #prefix>
+ <a-icon type="cloud-upload" />
+ </template>
+ </a-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)">
+ <template #prefix>
+ <a-icon type="cloud-download" />
+ </template>
+ </a-statistic>
+ </a-col>
+ </a-row>
+ </a-card>
+ </a-col>
+ </a-row>
+ </template>
</transition>
</a-spin>
</a-layout-content>
@@ -279,7 +320,7 @@
<a-list-item-meta>
<template #title>[[ version ]]</template>
</a-list-item-meta>
- <a-radio :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>
</a-modal>
@@ -360,9 +401,9 @@
{{template "textModal"}}
<script>
const State = {
- Running: "running",
- Stop: "stop",
- Error: "error",
+ Running: "running",
+ Stop: "stop",
+ Error: "error",
}
Object.freeze(State);
@@ -393,7 +434,7 @@
}
class Status {
- constructor(data) {
+ constructor(data, isLoaded = false) {
this.cpu = new CurTotal(0, 0);
this.cpuCores = 0;
this.logicalPro = 0;
@@ -413,8 +454,10 @@
this.xray = { state: State.Stop, errorMsg: "", version: "", color: "" };
if (data == null) {
- return;
+ return;
}
+
+ this.isLoaded = isLoaded;
this.cpu = new CurTotal(data.cpu, 100);
this.cpuCores = data.cpuCores;
this.logicalPro = data.logicalPro;
@@ -536,6 +579,8 @@
spinning: false,
loadingTip: '{{ i18n "loading"}}',
showAlert: false,
+ showIp: false,
+ isMobile: window.innerWidth <= 768
},
methods: {
loading(spinning, tip = '{{ i18n "loading"}}') {
@@ -546,14 +591,14 @@
try {
const msg = await HttpUtil.post('/server/status');
if (msg.success) {
- this.setStatus(msg.obj);
+ this.setStatus(msg.obj, true);
}
} catch (e) {
console.error("Failed to get status:", e);
}
},
- setStatus(data) {
- this.status = new Status(data);
+ setStatus(data, isLoaded = false) {
+ this.status = new Status(data, isLoaded);
},
async openSelectV2rayVersion() {
this.loading(true);
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-25 02:19:56 +0300