mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2025-12-18 05:04:40 +03:00
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
This commit is contained in:
Shishkevich D.
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user