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:
Tara Rostami 2024-03-14 22:51:51 +03:30 committed by GitHub
parent 3375ba1ec1
commit 1bd2f2b9f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 288 additions and 303 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,327 +19,313 @@
</style> </style>
<body> <body>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
{{ template "commonSider" . }} {{ template "commonSider" . }}
<a-layout id="content-layout"> <a-layout id="content-layout">
<a-layout-content> <a-layout-content>
<a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/> <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"></a-spin>
<transition name="list" appear> <transition name="list" appear>
<a-alert type="error" v-if="showAlert" style="margin-bottom: 10px" <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
message='{{ i18n "secAlertTitle" }}' message='{{ i18n "secAlertTitle" }}'
color="red" color="red"
description='{{ i18n "secAlertSsl" }}' description='{{ i18n "secAlertSsl" }}'
show-icon closable show-icon closable>
> </a-alert>
</a-alert> </transition>
</transition> <transition name="list" appear>
<transition name="list" appear> <a-row>
<a-card hoverable>
<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> [[ cpuCoreFormat(status.cpuCores) ]]</div>
<div><b>Speed:</b> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</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> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
</div>
</a-col>
</a-row>
</a-col>
<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> [[ sizeFormat(status.swap.current) ]] / [[ 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> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
</div>
</a-col>
</a-row>
</a-col>
</a-row>
</a-card>
</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/panel3xui" target="_blank"><a-tag color="green">@Panel3xui</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: [[ formatSecond(status.appStats.uptime) ]]</a-tag>
<a-tag color="green">OS: [[ 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>
</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: [[ 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-row>
<a-card hoverable> <a-col :span="12">
<a-row> <a-tag>
<a-col :sm="24" :md="12"> <a-tooltip>
<a-row> <a-icon type="global"></a-icon> IPv4
<a-col :span="12" style="text-align: center"> <template slot="title">
<a-progress type="dashboard" status="normal" [[ status.publicIP.ipv4 ]]
:stroke-color="status.cpu.color" </template>
:percent="status.cpu.percent"></a-progress> </a-tooltip>
<div><b>CPU:</b> [[ cpuCoreFormat(status.cpuCores) ]]</div> </a-tag>
<div><b>Speed:</b> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div> </a-col>
</a-col> <a-col :span="12">
<a-col :span="12" style="text-align: center"> <a-tag>
<a-progress type="dashboard" status="normal" <a-tooltip>
:stroke-color="status.mem.color" <a-icon type="global"></a-icon> IPv6
:percent="status.mem.percent"></a-progress> <template slot="title">
<div> [[ status.publicIP.ipv6 ]]
<b>{{ i18n "pages.index.memory"}}:</b> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]] </template>
</div> </a-tooltip>
</a-col> </a-tag>
</a-row> </a-col>
</a-col>
<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> [[ sizeFormat(status.swap.current) ]] / [[ 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> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
</div>
</a-col>
</a-row>
</a-col>
</a-row>
</a-card>
</a-row> </a-row>
</transition> </a-card>
<transition name="list" appear> </a-col>
<a-col :sm="24" :lg="12">
<a-card hoverable>
<a-row> <a-row>
<a-col :sm="24" :lg="12"> <a-col :span="12">
<a-card hoverable> <a-tag>
<b>3X-UI:</b> <a-tooltip>
<a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a> <a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]]
<a rel="noopener" href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@Panel3xui</a-tag></a> <template slot="title">
</a-card> {{ i18n "pages.index.connectionTcpCountDesc" }}
</a-col> </template>
<a-col :sm="24" :lg="12"> </a-tooltip>
<a-card hoverable> </a-tag>
<b>{{ i18n "pages.index.operationHours" }}:</b> </a-col>
<a-tag :color="status.xray.color">Xray: [[ formatSecond(status.appStats.uptime) ]]</a-tag> <a-col :span="12">
<a-tag color="green">OS: [[ formatSecond(status.uptime) ]]</a-tag> <a-tag>
</a-card> <a-tooltip>
</a-col> <a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]]
<a-col :sm="24" :lg="12"> <template slot="title">
<a-card hoverable> {{ i18n "pages.index.connectionUdpCountDesc" }}
<b>{{ i18n "pages.index.xrayStatus" }}:</b> </template>
<a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]] </a-tooltip>
</a-tag> </a-tag>
<a-popover v-if="status.xray.state === State.Error" </a-col>
: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>
</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: [[ 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>
</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 ]]
</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" }}
</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" }}
</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: [[ sizeFormat(status.netIO.up) ]]/s
<template slot="title">
{{ i18n "pages.index.upSpeed" }}
</template>
</a-tooltip>
</a-tag>
</a-col>
<a-col :span="12">
<a-tag>
<a-tooltip>
<a-icon type="arrow-down"></a-icon>
Down: [[ sizeFormat(status.netIO.down) ]]/s
<template slot="title">
{{ i18n "pages.index.downSpeed" }}
</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: [[ 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: [[ sizeFormat(status.netTraffic.recv) ]]
</a-tooltip>
</a-tag>
</a-col>
</a-row>
</a-card>
</a-col>
</a-row> </a-row>
</transition> </a-card>
</a-layout-content> </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: [[ sizeFormat(status.netIO.up) ]]/s
<template slot="title">
{{ i18n "pages.index.upSpeed" }}
</template>
</a-tooltip>
</a-tag>
</a-col>
<a-col :span="12">
<a-tag>
<a-tooltip>
<a-icon type="arrow-down"></a-icon> Down: [[ sizeFormat(status.netIO.down) ]]/s
<template slot="title">
{{ i18n "pages.index.downSpeed" }}
</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: [[ 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: [[ sizeFormat(status.netTraffic.recv) ]]
</a-tooltip>
</a-tag>
</a-col>
</a-row>
</a-card>
</a-col>
</a-row>
</transition>
</a-layout-content>
</a-layout> </a-layout>
<a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true" <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
@ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer=""> @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
<a-alert type="warning" style="margin-bottom: 12px; width: fit-content" <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert> message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
<template v-for="version, index in versionModal.versions"> <template v-for="version, index in versionModal.versions">
<a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px" <a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px"
@click="switchV2rayVersion(version)"> @click="switchV2rayVersion(version)">
[[ version ]] [[ version ]]
</a-tag> </a-tag>
</template> </template>
</a-modal> </a-modal>
<a-modal id="log-modal" v-model="logModal.visible" <a-modal id="log-modal" v-model="logModal.visible"
:closable="true" @cancel="() => logModal.visible = false" :closable="true" @cancel="() => logModal.visible = false"
:class="themeSwitcher.currentTheme" :class="themeSwitcher.currentTheme"
width="800px" footer=""> width="800px" footer="">
<template slot="title"> <template slot="title">
{{ i18n "pages.index.logs" }} {{ i18n "pages.index.logs" }}
<a-icon :spin="logModal.loading" <a-icon :spin="logModal.loading"
type="sync" type="sync"
style="vertical-align: middle; margin-left: 10px;" style="vertical-align: middle; margin-left: 10px;"
:disabled="logModal.loading" :disabled="logModal.loading"
@click="openLogs()"> @click="openLogs()">
</a-icon> </a-icon>
</template> </template>
<a-form layout="inline"> <a-form layout="inline">
<a-form-item> <a-form-item style="margin-right: 0.5rem;">
<a-input-group compact> <a-input-group compact>
<a-select v-model="logModal.rows" style="width:70px;" <a-select size="small" v-model="logModal.rows" style="width:70px;"
@change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme"> @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
<a-select-option value="10">10</a-select-option> <a-select-option value="10">10</a-select-option>
<a-select-option value="20">20</a-select-option> <a-select-option value="20">20</a-select-option>
<a-select-option value="50">50</a-select-option> <a-select-option value="50">50</a-select-option>
<a-select-option value="100">100</a-select-option> <a-select-option value="100">100</a-select-option>
</a-select> </a-select>
<a-select v-model="logModal.level" style="width:100px;" <a-select size="small" v-model="logModal.level" style="width:95px;"
@change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme"> @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
<a-select-option value="debug">Debug</a-select-option> <a-select-option value="debug">Debug</a-select-option>
<a-select-option value="info">Info</a-select-option> <a-select-option value="info">Info</a-select-option>
<a-select-option value="notice">Notice</a-select-option> <a-select-option value="notice">Notice</a-select-option>
<a-select-option value="warning">Warning</a-select-option> <a-select-option value="warning">Warning</a-select-option>
<a-select-option value="err">Error</a-select-option> <a-select-option value="err">Error</a-select-option>
</a-select> </a-select>
</a-input-group> </a-input-group>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox> <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
</a-form-item> </a-form-item>
<a-form-item style="float: right;"> <a-form-item style="float: right;">
<a-button type="primary" icon="download" <a-button type="primary" icon="download"
:href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs.join('\n'))" download="x-ui.log"> :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs.join('\n'))" download="x-ui.log">
</a-button> </a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
<div class="ant-input" style="height: auto; max-height: 500px; overflow: auto;" v-html="logModal.formattedLogs"></div> <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto; margin-top: 0.5rem;" v-html="logModal.formattedLogs"></div>
</a-modal> </a-modal>
<a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title" <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
:closable="true" footer="" :closable="true" footer=""
:class="themeSwitcher.currentTheme"> :class="themeSwitcher.currentTheme">
<a-alert type="warning" style="margin-bottom: 10px; width: fit-content" <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
:message="backupModal.description" :message="backupModal.description"
show-icon show-icon>
></a-alert> </a-alert>
<a-space direction="horizontal" style="text-align: center" style="margin-bottom: 10px;"> <a-space direction="horizontal" style="text-align: center; margin-bottom: 10px;">
<a-button type="primary" @click="exportDatabase()"> <a-button type="primary" @click="exportDatabase()">
[[ backupModal.exportText ]] [[ backupModal.exportText ]]
</a-button> </a-button>
<a-button type="primary" @click="importDatabase()"> <a-button type="primary" @click="importDatabase()">
[[ backupModal.importText ]] [[ backupModal.importText ]]
</a-button> </a-button>
</a-space> </a-space>
</a-modal> </a-modal>
</a-layout>
</a-layout>
{{template "js" .}} {{template "js" .}}
<script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script> <script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
{{template "component/themeSwitcher" .}} {{template "component/themeSwitcher" .}}
{{template "textModal"}} {{template "textModal"}}
<script> <script>
const State = { const State = {
Running: "running", Running: "running",
Stop: "stop", Stop: "stop",
@ -664,7 +650,6 @@
} }
}, },
}); });
</script> </script>
</body> </body>
</html> </html>