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

Update index.html

Browse source
This commit is contained in:
Shahin 2024-02-06 17:56:05 +00:00 committed by GitHub
parent 7a2aadc74b
commit 8176210b67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 67 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -36,15 +36,15 @@
<a-progress type="dashboard" status="normal" <a-progress type="dashboard" status="normal"
:stroke-color="status.cpu.color" :stroke-color="status.cpu.color"
:percent="status.cpu.percent"></a-progress> :percent="status.cpu.percent"></a-progress>
<div>CPU: [[ cpuCoreFormat(status.cpuCores) ]]</div> <div><strong>CPU:</strong> [[ cpuCoreFormat(status.cpuCores) ]]</div>
<div>Speed: [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div> <div><strong>Speed:</strong> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
</a-col> </a-col>
<a-col :span="12" style="text-align: center"> <a-col :span="12" style="text-align: center">
<a-progress type="dashboard" status="normal" <a-progress type="dashboard" status="normal"
:stroke-color="status.mem.color" :stroke-color="status.mem.color"
:percent="status.mem.percent"></a-progress> :percent="status.mem.percent"></a-progress>
<div> <div>
{{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]] <strong>{{ i18n "pages.index.memory"}}:</strong> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
@ -56,7 +56,7 @@
:stroke-color="status.swap.color" :stroke-color="status.swap.color"
:percent="status.swap.percent"></a-progress> :percent="status.swap.percent"></a-progress>
<div> <div>
Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]] <strong>Swap:</strong> [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
</div> </div>
</a-col> </a-col>
<a-col :span="12" style="text-align: center"> <a-col :span="12" style="text-align: center">
@ -64,7 +64,7 @@
:stroke-color="status.disk.color" :stroke-color="status.disk.color"
:percent="status.disk.percent"></a-progress> :percent="status.disk.percent"></a-progress>
<div> <div>
{{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]] <strong>{{ i18n "pages.index.hard"}}:</strong> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
@ -74,26 +74,39 @@
</a-row> </a-row>
</transition> </transition>
<transition name="list" appear> <transition name="list" appear>
<a-row>
<a-row>
<a-col :sm="24" :md="12">
<a-card hoverable>
<strong>{{ i18n "pages.index.machineInfo" }}:</strong>
<a-tooltip>
<template slot="title">{{ i18n "pages.index.hostname" }}</template>
<a-tag color="green" style="margin-right: 3px;">[[ status.publicIP.hostname ]]</a-tag>
</a-tooltip>
<a-tooltip>
<template slot="title">
IPv4:<br>[[ status.publicIP.ipv4 ]]<br>IPv6:<br>[[ status.publicIP.ipv6 ]]
</template>
<a-tag color="green" style="margin-right: 3px;">IPv4/v6</a-tag>
</a-tooltip>
</template>
<a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="purple"><strong>3X-UI</strong> v{{ .cur_ver }}</a-tag></a>
</a-card>
</a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
3X-UI <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a> <strong>{{ i18n "menu.link" }}:</strong>
Xray <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag> <a-tag color="purple" style="cursor: pointer; margin-right: 3px;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
<a href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@panel3xui</a-tag></a> <a-tag color="purple" style="cursor: pointer; margin-right: 3px;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
</a-card>
</a-col>
<a-col :sm="24" :md="12">
<a-card hoverable>
{{ i18n "menu.link" }}:
<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-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
{{ i18n "pages.index.xrayStatus" }}: <strong>{{ i18n "pages.index.xrayStatus" }}:</strong>
<a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag> <a-tag :color="status.xray.color" style="margin-right: 3px;"><strong>[[ status.xray.state.toUpperCase() ]]</strong></a-tag>
<a-popover v-if="status.xray.state === State.Error" <a-popover v-if="status.xray.state === State.Error"
:overlay-class-name="themeSwitcher.currentTheme"> :overlay-class-name="themeSwitcher.currentTheme">
<span slot="title" style="font-size: 12pt">An error occurred while running Xray <span slot="title" style="font-size: 12pt">An error occurred while running Xray
@ -102,140 +115,117 @@
<template slot="content"> <template slot="content">
<p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p> <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
</template> </template>
<a-icon type="question-circle"></a-icon> <a-icon type="exclamation-circle"></a-icon>
</a-popover> </a-popover>
<a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag> <a-tag color="purple" style="cursor: pointer; margin-right: 3px;" @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; margin-right: 3px;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>
<a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag> <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
{{ i18n "pages.index.operationHours" }}: <strong>{{ i18n "pages.index.operationHours" }}:</strong>
Xray <a-tag color="green" style="margin-right: 3px;"><strong>Xray</strong> [[ formatSecond(status.appStats.uptime) ]]</a-tag>
<a-tag color="green">[[ formatSecond(status.appStats.uptime) ]]</a-tag> <a-tag color="green"><strong>OS</strong> [[ formatSecond(status.uptime) ]]</a-tag>
OS
<a-tag color="green">[[ formatSecond(status.uptime) ]]</a-tag>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
{{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]] <strong>{{ i18n "pages.index.systemLoad" }}:</strong>
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ i18n "pages.index.systemLoadDesc" }} {{ i18n "pages.index.systemLoadDesc" }}
</template> </template>
<a-icon type="question-circle"></a-icon> <a-tag color="green">[[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]</a-tag>
</a-tooltip> </a-tooltip>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
{{ i18n "usage"}}: <strong>{{ i18n "usage"}}:</strong>
RAM [[ sizeFormat(status.appStats.mem) ]] - <a-tooltip>
Threads [[ status.appStats.threads ]] <a-tag color="green" style="margin-right: 3px;"><strong>RAM</strong> [[ sizeFormat(status.appStats.mem) ]]
</a-tooltip>
<a-tooltip>
<a-tag color="green"><strong>Threads</strong> [[ status.appStats.threads ]]
</a-tooltip> </a-tooltip>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :md="12">
<a-card hoverable>
<a-row>
<a-col :span="12">
<a-icon type="global"></a-icon>
IPv4:
<a-tooltip>
<template slot="title">
[[ status.publicIP.ipv4 ]]
</template>
<a-icon type="question-circle"></a-icon>
</a-tooltip>
</a-col>
<a-col :span="12">
<a-icon type="global"></a-icon>
IPv6:
<a-tooltip>
<template slot="title">
[[ status.publicIP.ipv6 ]]
</template>
<a-icon type="question-circle"></a-icon>
</a-tooltip>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
<a-icon type="swap"></a-icon> <a-icon type="swap"></a-icon>
TCP: [[ status.tcpCount ]]
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ i18n "pages.index.connectionTcpCountDesc" }} {{ i18n "pages.index.connectionTcpCountDesc" }}
</template> </template>
<a-icon type="question-circle"></a-icon> <a-tag color="green"><strong>TCP:</strong> [[ status.tcpCount ]]</strong>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-icon type="swap"></a-icon> <a-icon type="swap"></a-icon>
UDP: [[ status.udpCount ]]
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ i18n "pages.index.connectionUdpCountDesc" }} {{ i18n "pages.index.connectionUdpCountDesc" }}
</template> </template>
<a-icon type="question-circle"></a-icon> <a-tag color="green"><strong>UDP:</strong> [[ status.udpCount ]]</strong>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
<a-icon type="arrow-up"></a-icon> <a-icon type="arrow-up"></a-icon>
[[ sizeFormat(status.netIO.up) ]]/s
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ i18n "pages.index.upSpeed" }} {{ i18n "pages.index.upSpeed" }}
</template> </template>
<a-icon type="question-circle"></a-icon> <a-tag color="green"><strong>Up:</strong> [[ sizeFormat(status.netIO.up) ]]/s</a-tag>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-icon type="arrow-down"></a-icon> <a-icon type="arrow-down"></a-icon>
[[ sizeFormat(status.netIO.down) ]]/s
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ i18n "pages.index.downSpeed" }} {{ i18n "pages.index.downSpeed" }}
</template> </template>
<a-icon type="question-circle"></a-icon> <a-tag color="green"><strong>Dn:</strong> [[ sizeFormat(status.netIO.down) ]]/s</a-tag>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
</a-card> </a-card>
</a-col> </a-col>
<a-col :sm="24" :md="12"> <a-col :sm="24" :md="12">
<a-card hoverable> <a-card hoverable>
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
<a-icon type="cloud-upload"></a-icon> <a-icon type="cloud-upload"></a-icon>
[[ sizeFormat(status.netTraffic.sent) ]]
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ i18n "pages.index.totalSent" }} {{ i18n "pages.index.totalSent" }}
</template> </template>
<a-icon type="question-circle"></a-icon> <a-tag color="green"><strong>Out:</strong> [[ sizeFormat(status.netTraffic.sent) ]]</a-tag>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-icon type="cloud-download"></a-icon> <a-icon type="cloud-download"></a-icon>
[[ sizeFormat(status.netTraffic.recv) ]]
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ i18n "pages.index.totalReceive" }} {{ i18n "pages.index.totalReceive" }}
</template> </template>
<a-icon type="question-circle"></a-icon> <a-tag color="green"><strong>In:</strong> [[ sizeFormat(status.netTraffic.recv) ]]</a-tag>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
@ -245,7 +235,7 @@
</transition> </transition>
</a-layout-content> </a-layout-content>
</a-layout> </a-layout>
<a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
:closable="true" @ok="() => versionModal.visible = false" :closable="true" @ok="() => versionModal.visible = false"
:class="themeSwitcher.currentTheme" :class="themeSwitcher.currentTheme"
@ -374,7 +364,7 @@
this.mem = new CurTotal(0, 0); this.mem = new CurTotal(0, 0);
this.netIO = { up: 0, down: 0 }; this.netIO = { up: 0, down: 0 };
this.netTraffic = { sent: 0, recv: 0 }; this.netTraffic = { sent: 0, recv: 0 };
this.publicIP = { ipv4: 0, ipv6: 0 }; this.publicIP = {hostname:"", ipv4: 0, ipv6: 0};
this.swap = new CurTotal(0, 0); this.swap = new CurTotal(0, 0);
this.tcpCount = 0; this.tcpCount = 0;
this.udpCount = 0; this.udpCount = 0;
@ -404,16 +394,16 @@
this.xray = data.xray; this.xray = data.xray;
switch (this.xray.state) { switch (this.xray.state) {
case State.Running: case State.Running:
this.xray.color = "green"; this.xray.color = '#3dbd7d'; //Apple Green
break; break;
case State.Stop: case State.Stop:
this.xray.color = "orange"; this.xray.color = '#FF8733'; //BurgerKing Orange
break; break;
case State.Error: case State.Error:
this.xray.color = "red"; this.xray.color = '#D92906'; //NASA Red
break; break;
default: default:
this.xray.color = "gray"; this.xray.color = '#A2AAAD'; //Apple Gray
} }
} }
} }