2023-02-09 19:18:06 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
{{template "head" .}}
|
|
|
|
|
<style>
|
|
|
|
|
@media (min-width: 769px) {
|
|
|
|
|
.ant-layout-content {
|
|
|
|
|
margin: 24px 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ant-col-sm-24 {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
2023-03-17 16:07:49 +00:00
|
|
|
|
|
|
|
|
.ant-card-dark h2 {
|
2023-05-08 14:44:22 +00:00
|
|
|
color: hsla(0, 0%, 100%, .65);
|
2023-03-17 16:07:49 +00:00
|
|
|
}
|
2023-02-09 19:18:06 +00:00
|
|
|
</style>
|
2023-05-08 14:44:22 +00:00
|
|
|
|
2023-02-09 19:18:06 +00:00
|
|
|
<body>
|
|
|
|
|
<a-layout id="app" v-cloak>
|
|
|
|
|
{{ template "commonSider" . }}
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-layout id="content-layout" :style="themeSwitcher.bgStyle">
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-layout-content>
|
|
|
|
|
<a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
|
|
|
|
|
<transition name="list" appear>
|
|
|
|
|
<a-row>
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-02-09 19:18:06 +00:00
|
|
|
<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"
|
2023-05-08 14:44:22 +00:00
|
|
|
:class="themeSwitcher.darkCardClass"
|
2023-02-09 19:18:06 +00:00
|
|
|
:percent="status.cpu.percent"></a-progress>
|
2023-05-25 12:18:23 +00:00
|
|
|
<div>CPU: [[ cpuCoreFormat(status.cpuCores) ]]</div>
|
|
|
|
|
<div>Speed: [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
|
2023-02-09 19:18:06 +00:00
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12" style="text-align: center">
|
|
|
|
|
<a-progress type="dashboard" status="normal"
|
|
|
|
|
:stroke-color="status.mem.color"
|
2023-05-08 14:44:22 +00:00
|
|
|
:class="themeSwitcher.darkCardClass"
|
2023-02-09 19:18:06 +00:00
|
|
|
:percent="status.mem.percent"></a-progress>
|
|
|
|
|
<div>
|
|
|
|
|
{{ i18n "pages.index.memory"}}: [[ 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"
|
2023-05-08 14:44:22 +00:00
|
|
|
:class="themeSwitcher.darkCardClass"
|
2023-02-09 19:18:06 +00:00
|
|
|
:percent="status.swap.percent"></a-progress>
|
|
|
|
|
<div>
|
2023-02-11 20:22:24 +00:00
|
|
|
Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
|
2023-02-09 19:18:06 +00:00
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12" style="text-align: center">
|
|
|
|
|
<a-progress type="dashboard" status="normal"
|
|
|
|
|
:stroke-color="status.disk.color"
|
2023-05-08 14:44:22 +00:00
|
|
|
:class="themeSwitcher.darkCardClass"
|
2023-02-09 19:18:06 +00:00
|
|
|
:percent="status.disk.percent"></a-progress>
|
|
|
|
|
<div>
|
|
|
|
|
{{ i18n "pages.index.hard"}}: [[ 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>
|
2023-04-11 12:11:04 +00:00
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-09-17 09:30:36 +00:00
|
|
|
X-UI: <a href="https://github.com/quydang04/x-ui/releases" target="_blank" style="cursor: pointer;"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
|
2023-08-30 00:32:19 +00:00
|
|
|
Xray version: <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
|
2023-04-11 12:11:04 +00:00
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-05-24 23:41:09 +00:00
|
|
|
{{ i18n "menu.link" }}:
|
2023-07-31 16:41:47 +00:00
|
|
|
<a-tag color="blue" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
|
2023-05-24 23:41:09 +00:00
|
|
|
<a-tag color="blue" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
|
|
|
|
|
<a-tag color="blue" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
|
2023-04-11 12:11:04 +00:00
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-02-09 19:18:06 +00:00
|
|
|
{{ i18n "pages.index.xrayStatus" }}:
|
|
|
|
|
<a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
|
|
|
|
|
<a-tooltip v-if="status.xray.state === State.Error">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<p v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
2023-03-24 13:44:26 +00:00
|
|
|
<a-tag color="blue" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
|
|
|
|
|
<a-tag color="blue" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>
|
|
|
|
|
<a-tag color="blue" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag>
|
2023-02-09 19:18:06 +00:00
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-08-08 21:07:05 +00:00
|
|
|
{{ i18n "pages.index.operationHours" }}:
|
|
|
|
|
Xray:
|
|
|
|
|
<a-tag color="green">[[ formatSecond(status.appStats.uptime) ]]</a-tag>
|
2023-08-30 00:32:19 +00:00
|
|
|
System:
|
2023-08-08 21:07:05 +00:00
|
|
|
<a-tag color="green">[[ formatSecond(status.uptime) ]]</a-tag>
|
|
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :sm="24" :md="12">
|
|
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
|
|
|
|
{{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
|
|
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
{{ i18n "pages.index.systemLoadDesc" }}
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :sm="24" :md="12">
|
|
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
|
|
|
|
{{ i18n "usage"}}:
|
|
|
|
|
Memory [[ sizeFormat(status.appStats.mem) ]] -
|
|
|
|
|
Threads [[ status.appStats.threads ]]
|
|
|
|
|
</a-tooltip>
|
2023-02-09 19:18:06 +00:00
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-05-24 23:41:09 +00:00
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="12">
|
2023-05-25 15:46:09 +00:00
|
|
|
IPv4:
|
2023-05-24 23:41:09 +00:00
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
[[ status.publicIP.ipv4 ]]
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12">
|
2023-05-25 15:46:09 +00:00
|
|
|
IPv6:
|
2023-05-24 23:41:09 +00:00
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
[[ status.publicIP.ipv6 ]]
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
2023-02-09 19:18:06 +00:00
|
|
|
</a-card>
|
2023-05-24 23:41:09 +00:00
|
|
|
</a-col>
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-05-24 23:41:09 +00:00
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
TCP: [[ status.tcpCount ]]
|
|
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
{{ i18n "pages.index.connectionTcpCountDesc" }}
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
UDP: [[ status.udpCount ]]
|
|
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
{{ i18n "pages.index.connectionUdpCountDesc" }}
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
2023-02-09 19:18:06 +00:00
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
<a-icon type="arrow-up"></a-icon>
|
2023-05-25 12:18:23 +00:00
|
|
|
[[ sizeFormat(status.netIO.up) ]]/S
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
{{ i18n "pages.index.upSpeed" }}
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
<a-icon type="arrow-down"></a-icon>
|
2023-05-25 12:18:23 +00:00
|
|
|
[[ sizeFormat(status.netIO.down) ]]/S
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
{{ i18n "pages.index.downSpeed" }}
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :sm="24" :md="12">
|
2023-05-08 14:44:22 +00:00
|
|
|
<a-card hoverable :class="themeSwitcher.darkCardClass">
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
<a-icon type="cloud-upload"></a-icon>
|
|
|
|
|
[[ sizeFormat(status.netTraffic.sent) ]]
|
|
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
{{ i18n "pages.index.totalSent" }}
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
<a-icon type="cloud-download"></a-icon>
|
|
|
|
|
[[ sizeFormat(status.netTraffic.recv) ]]
|
|
|
|
|
<a-tooltip>
|
|
|
|
|
<template slot="title">
|
|
|
|
|
{{ i18n "pages.index.totalReceive" }}
|
|
|
|
|
</template>
|
|
|
|
|
<a-icon type="question-circle" theme="filled"></a-icon>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-card>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</transition>
|
|
|
|
|
</a-layout-content>
|
|
|
|
|
</a-layout>
|
2023-05-05 18:22:35 +00:00
|
|
|
|
2023-02-09 19:18:06 +00:00
|
|
|
<a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
|
|
|
|
|
:closable="true" @ok="() => versionModal.visible = false"
|
2023-05-08 14:44:22 +00:00
|
|
|
:class="themeSwitcher.darkCardClass"
|
2023-03-24 13:44:26 +00:00
|
|
|
footer="">
|
2023-02-09 19:18:06 +00:00
|
|
|
<h2>{{ i18n "pages.index.xraySwitchClick"}}</h2>
|
|
|
|
|
<h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
|
|
|
|
|
<template v-for="version, index in versionModal.versions">
|
|
|
|
|
<a-tag :color="index % 2 == 0 ? 'blue' : 'green'"
|
|
|
|
|
style="margin: 10px" @click="switchV2rayVersion(version)">
|
|
|
|
|
[[ version ]]
|
|
|
|
|
</a-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</a-modal>
|
2023-05-05 18:22:35 +00:00
|
|
|
|
2023-03-24 13:44:26 +00:00
|
|
|
<a-modal id="log-modal" v-model="logModal.visible" title="X-UI logs"
|
|
|
|
|
:closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false"
|
2023-05-08 14:44:22 +00:00
|
|
|
:class="themeSwitcher.darkCardClass"
|
2023-03-24 13:44:26 +00:00
|
|
|
width="800px"
|
|
|
|
|
footer="">
|
2023-04-09 19:43:18 +00:00
|
|
|
<a-form layout="inline">
|
|
|
|
|
<a-form-item label="Count">
|
|
|
|
|
<a-select v-model="logModal.rows"
|
|
|
|
|
style="width: 80px"
|
2023-07-31 16:41:47 +00:00
|
|
|
@change="openLogs()"
|
2023-05-08 14:44:22 +00:00
|
|
|
:dropdown-class-name="themeSwitcher.darkCardClass">
|
2023-04-09 19:43:18 +00:00
|
|
|
<a-select-option value="10">10</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="100">100</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
2023-06-16 14:55:33 +00:00
|
|
|
<a-form-item label="Log Level">
|
2023-07-31 16:41:47 +00:00
|
|
|
<a-select v-model="logModal.level"
|
2023-06-16 14:55:33 +00:00
|
|
|
style="width: 120px"
|
2023-07-31 16:41:47 +00:00
|
|
|
@change="openLogs()"
|
2023-06-16 14:55:33 +00:00
|
|
|
:dropdown-class-name="themeSwitcher.darkCardClass">
|
|
|
|
|
<a-select-option value="debug">Debug</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="warning">Warning</a-select-option>
|
|
|
|
|
<a-select-option value="err">Error</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
2023-07-31 16:41:47 +00:00
|
|
|
<a-form-item label="SysLog">
|
|
|
|
|
<a-checkbox v-model="logModal.syslog" @change="openLogs()"></a-checkbox>
|
|
|
|
|
</a-form-item>
|
2023-04-09 19:43:18 +00:00
|
|
|
<a-form-item>
|
2023-07-31 16:41:47 +00:00
|
|
|
<button class="ant-btn ant-btn-primary" @click="openLogs()"><a-icon type="sync"></a-icon> Reload</button>
|
2023-04-09 19:43:18 +00:00
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item>
|
|
|
|
|
<a-button type="primary" style="margin-bottom: 10px;"
|
|
|
|
|
:href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs)" download="x-ui.log">
|
|
|
|
|
{{ i18n "download" }} x-ui.log
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-form-item>
|
2023-05-05 18:22:35 +00:00
|
|
|
</a-form>
|
2023-04-09 19:43:18 +00:00
|
|
|
<a-input type="textarea" v-model="logModal.logs" disabled="true"
|
|
|
|
|
:autosize="{ minRows: 10, maxRows: 22}"></a-input>
|
2023-03-24 13:44:26 +00:00
|
|
|
</a-modal>
|
2023-05-05 18:22:35 +00:00
|
|
|
|
|
|
|
|
<a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
|
2023-05-08 14:44:22 +00:00
|
|
|
:closable="true" :class="themeSwitcher.darkCardClass"
|
2023-05-05 18:22:35 +00:00
|
|
|
@ok="() => backupModal.hide()" @cancel="() => backupModal.hide()">
|
|
|
|
|
<p style="color: inherit; font-size: 16px; padding: 4px 2px;">
|
|
|
|
|
<a-icon type="warning" style="color: inherit; font-size: 20px;"></a-icon>
|
|
|
|
|
[[ backupModal.description ]]
|
|
|
|
|
</p>
|
2023-05-13 10:23:17 +00:00
|
|
|
<a-space direction="horizontal" style="text-align: center" style="margin-bottom: 10px;">
|
2023-05-05 18:22:35 +00:00
|
|
|
<a-button type="primary" @click="exportDatabase()">
|
|
|
|
|
[[ backupModal.exportText ]]
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button type="primary" @click="importDatabase()">
|
|
|
|
|
[[ backupModal.importText ]]
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-space>
|
|
|
|
|
</a-modal>
|
|
|
|
|
|
2023-02-09 19:18:06 +00:00
|
|
|
</a-layout>
|
|
|
|
|
{{template "js" .}}
|
2023-05-08 14:44:22 +00:00
|
|
|
{{template "component/themeSwitcher" .}}
|
2023-04-11 12:11:04 +00:00
|
|
|
{{template "textModal"}}
|
2023-02-09 19:18:06 +00:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
const State = {
|
|
|
|
|
Running: "running",
|
|
|
|
|
Stop: "stop",
|
|
|
|
|
Error: "error",
|
|
|
|
|
}
|
|
|
|
|
Object.freeze(State);
|
|
|
|
|
|
|
|
|
|
class CurTotal {
|
|
|
|
|
|
|
|
|
|
constructor(current, total) {
|
|
|
|
|
this.current = current;
|
|
|
|
|
this.total = total;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get percent() {
|
|
|
|
|
if (this.total === 0) {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
return toFixed(this.current / this.total * 100, 2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get color() {
|
|
|
|
|
const percent = this.percent;
|
|
|
|
|
if (percent < 80) {
|
|
|
|
|
return '#67C23A';
|
|
|
|
|
} else if (percent < 90) {
|
|
|
|
|
return '#E6A23C';
|
|
|
|
|
} else {
|
|
|
|
|
return '#F56C6C';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class Status {
|
|
|
|
|
constructor(data) {
|
|
|
|
|
this.cpu = new CurTotal(0, 0);
|
2023-05-25 12:18:23 +00:00
|
|
|
this.cpuCores = 0;
|
|
|
|
|
this.cpuSpeedMhz = 0;
|
2023-02-09 19:18:06 +00:00
|
|
|
this.disk = new CurTotal(0, 0);
|
|
|
|
|
this.loads = [0, 0, 0];
|
|
|
|
|
this.mem = new CurTotal(0, 0);
|
2023-05-08 14:44:22 +00:00
|
|
|
this.netIO = { up: 0, down: 0 };
|
|
|
|
|
this.netTraffic = { sent: 0, recv: 0 };
|
2023-05-24 23:41:09 +00:00
|
|
|
this.publicIP = { ipv4: 0, ipv6: 0 };
|
2023-02-09 19:18:06 +00:00
|
|
|
this.swap = new CurTotal(0, 0);
|
|
|
|
|
this.tcpCount = 0;
|
|
|
|
|
this.udpCount = 0;
|
|
|
|
|
this.uptime = 0;
|
2023-08-08 21:07:05 +00:00
|
|
|
this.appUptime = 0;
|
|
|
|
|
this.appStats = {threads: 0, mem: 0, uptime: 0};
|
2023-05-08 14:44:22 +00:00
|
|
|
this.xray = { state: State.Stop, errorMsg: "", version: "", color: "" };
|
2023-02-09 19:18:06 +00:00
|
|
|
|
|
|
|
|
if (data == null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.cpu = new CurTotal(data.cpu, 100);
|
2023-05-25 12:18:23 +00:00
|
|
|
this.cpuCores = data.cpuCores;
|
|
|
|
|
this.cpuSpeedMhz = data.cpuSpeedMhz;
|
2023-02-09 19:18:06 +00:00
|
|
|
this.disk = new CurTotal(data.disk.current, data.disk.total);
|
|
|
|
|
this.loads = data.loads.map(load => toFixed(load, 2));
|
|
|
|
|
this.mem = new CurTotal(data.mem.current, data.mem.total);
|
|
|
|
|
this.netIO = data.netIO;
|
|
|
|
|
this.netTraffic = data.netTraffic;
|
2023-05-24 23:41:09 +00:00
|
|
|
this.publicIP = data.publicIP;
|
2023-02-09 19:18:06 +00:00
|
|
|
this.swap = new CurTotal(data.swap.current, data.swap.total);
|
|
|
|
|
this.tcpCount = data.tcpCount;
|
|
|
|
|
this.udpCount = data.udpCount;
|
|
|
|
|
this.uptime = data.uptime;
|
2023-08-08 21:07:05 +00:00
|
|
|
this.appUptime = data.appUptime;
|
|
|
|
|
this.appStats = data.appStats;
|
2023-02-09 19:18:06 +00:00
|
|
|
this.xray = data.xray;
|
|
|
|
|
switch (this.xray.state) {
|
|
|
|
|
case State.Running:
|
|
|
|
|
this.xray.color = "green";
|
|
|
|
|
break;
|
|
|
|
|
case State.Stop:
|
|
|
|
|
this.xray.color = "orange";
|
|
|
|
|
break;
|
|
|
|
|
case State.Error:
|
|
|
|
|
this.xray.color = "red";
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
this.xray.color = "gray";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const versionModal = {
|
|
|
|
|
visible: false,
|
|
|
|
|
versions: [],
|
|
|
|
|
show(versions) {
|
|
|
|
|
this.visible = true;
|
|
|
|
|
this.versions = versions;
|
|
|
|
|
},
|
|
|
|
|
hide() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
2023-03-24 13:44:26 +00:00
|
|
|
const logModal = {
|
|
|
|
|
visible: false,
|
|
|
|
|
logs: '',
|
2023-04-09 19:43:18 +00:00
|
|
|
rows: 20,
|
2023-07-31 16:41:47 +00:00
|
|
|
level: 'info',
|
|
|
|
|
syslog: false,
|
|
|
|
|
show(logs) {
|
2023-03-24 13:44:26 +00:00
|
|
|
this.visible = true;
|
2023-07-31 16:41:47 +00:00
|
|
|
this.logs = logs? logs.join("\n"): "No Record...";
|
2023-03-24 13:44:26 +00:00
|
|
|
},
|
|
|
|
|
hide() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
2023-05-05 18:22:35 +00:00
|
|
|
const backupModal = {
|
|
|
|
|
visible: false,
|
|
|
|
|
title: '',
|
|
|
|
|
description: '',
|
|
|
|
|
exportText: '',
|
|
|
|
|
importText: '',
|
|
|
|
|
show({
|
|
|
|
|
title = '{{ i18n "pages.index.backupTitle" }}',
|
|
|
|
|
description = '{{ i18n "pages.index.backupDescription" }}',
|
|
|
|
|
exportText = '{{ i18n "pages.index.exportDatabase" }}',
|
|
|
|
|
importText = '{{ i18n "pages.index.importDatabase" }}',
|
|
|
|
|
}) {
|
|
|
|
|
this.title = title;
|
|
|
|
|
this.description = description;
|
|
|
|
|
this.exportText = exportText;
|
|
|
|
|
this.importText = importText;
|
|
|
|
|
this.visible = true;
|
|
|
|
|
},
|
|
|
|
|
hide() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
2023-02-09 19:18:06 +00:00
|
|
|
const app = new Vue({
|
|
|
|
|
delimiters: ['[[', ']]'],
|
|
|
|
|
el: '#app',
|
|
|
|
|
data: {
|
2023-05-14 01:38:49 +00:00
|
|
|
siderDrawer,
|
2023-05-08 14:44:22 +00:00
|
|
|
themeSwitcher,
|
2023-02-09 19:18:06 +00:00
|
|
|
status: new Status(),
|
|
|
|
|
versionModal,
|
2023-03-24 13:44:26 +00:00
|
|
|
logModal,
|
2023-05-05 18:22:35 +00:00
|
|
|
backupModal,
|
2023-02-09 19:18:06 +00:00
|
|
|
spinning: false,
|
|
|
|
|
loadingTip: '{{ i18n "loading"}}',
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
loading(spinning, tip = '{{ i18n "loading"}}') {
|
|
|
|
|
this.spinning = spinning;
|
|
|
|
|
this.loadingTip = tip;
|
|
|
|
|
},
|
|
|
|
|
async getStatus() {
|
2023-06-14 16:20:19 +00:00
|
|
|
try {
|
|
|
|
|
const msg = await HttpUtil.post('/server/status');
|
|
|
|
|
if (msg.success) {
|
|
|
|
|
this.setStatus(msg.obj);
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error("Failed to get status:", e);
|
2023-02-09 19:18:06 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
setStatus(data) {
|
|
|
|
|
this.status = new Status(data);
|
|
|
|
|
},
|
|
|
|
|
async openSelectV2rayVersion() {
|
|
|
|
|
this.loading(true);
|
|
|
|
|
const msg = await HttpUtil.post('server/getXrayVersion');
|
|
|
|
|
this.loading(false);
|
|
|
|
|
if (!msg.success) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
versionModal.show(msg.obj);
|
|
|
|
|
},
|
|
|
|
|
switchV2rayVersion(version) {
|
|
|
|
|
this.$confirm({
|
|
|
|
|
title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}',
|
|
|
|
|
content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`,
|
|
|
|
|
okText: '{{ i18n "confirm"}}',
|
2023-05-08 14:44:22 +00:00
|
|
|
class: themeSwitcher.darkCardClass,
|
2023-02-09 19:18:06 +00:00
|
|
|
cancelText: '{{ i18n "cancel"}}',
|
|
|
|
|
onOk: async () => {
|
|
|
|
|
versionModal.hide();
|
2023-05-04 17:52:54 +00:00
|
|
|
this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
|
2023-02-09 19:18:06 +00:00
|
|
|
await HttpUtil.post(`/server/installXray/${version}`);
|
|
|
|
|
this.loading(false);
|
|
|
|
|
},
|
|
|
|
|
});
|
2023-03-16 22:01:14 +00:00
|
|
|
},
|
|
|
|
|
async stopXrayService() {
|
|
|
|
|
this.loading(true);
|
|
|
|
|
const msg = await HttpUtil.post('server/stopXrayService');
|
|
|
|
|
this.loading(false);
|
|
|
|
|
if (!msg.success) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async restartXrayService() {
|
|
|
|
|
this.loading(true);
|
|
|
|
|
const msg = await HttpUtil.post('server/restartXrayService');
|
|
|
|
|
this.loading(false);
|
|
|
|
|
if (!msg.success) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-02-09 19:18:06 +00:00
|
|
|
},
|
2023-07-31 16:41:47 +00:00
|
|
|
async openLogs(){
|
2023-03-24 13:44:26 +00:00
|
|
|
this.loading(true);
|
2023-07-31 16:41:47 +00:00
|
|
|
const msg = await HttpUtil.post('server/logs/'+logModal.rows,{level: logModal.level, syslog: logModal.syslog});
|
2023-03-24 13:44:26 +00:00
|
|
|
this.loading(false);
|
|
|
|
|
if (!msg.success) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-07-31 16:41:47 +00:00
|
|
|
logModal.show(msg.obj);
|
2023-04-11 12:11:04 +00:00
|
|
|
},
|
2023-05-05 18:22:35 +00:00
|
|
|
async openConfig() {
|
2023-04-11 12:11:04 +00:00
|
|
|
this.loading(true);
|
|
|
|
|
const msg = await HttpUtil.post('server/getConfigJson');
|
|
|
|
|
this.loading(false);
|
|
|
|
|
if (!msg.success) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-05-05 18:22:35 +00:00
|
|
|
txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json');
|
2023-04-11 12:11:04 +00:00
|
|
|
},
|
2023-05-05 18:22:35 +00:00
|
|
|
openBackup() {
|
|
|
|
|
backupModal.show({
|
|
|
|
|
title: '{{ i18n "pages.index.backupTitle" }}',
|
|
|
|
|
description: '{{ i18n "pages.index.backupDescription" }}',
|
|
|
|
|
exportText: '{{ i18n "pages.index.exportDatabase" }}',
|
|
|
|
|
importText: '{{ i18n "pages.index.importDatabase" }}',
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
exportDatabase() {
|
2023-04-11 12:11:04 +00:00
|
|
|
window.location = basePath + 'server/getDb';
|
2023-05-05 18:22:35 +00:00
|
|
|
},
|
|
|
|
|
importDatabase() {
|
|
|
|
|
const fileInput = document.createElement('input');
|
|
|
|
|
fileInput.type = 'file';
|
|
|
|
|
fileInput.accept = '.db';
|
|
|
|
|
fileInput.addEventListener('change', async (event) => {
|
|
|
|
|
const dbFile = event.target.files[0];
|
|
|
|
|
if (dbFile) {
|
|
|
|
|
const formData = new FormData();
|
|
|
|
|
formData.append('db', dbFile);
|
|
|
|
|
backupModal.hide();
|
|
|
|
|
this.loading(true);
|
|
|
|
|
const uploadMsg = await HttpUtil.post('server/importDB', formData, {
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'multipart/form-data',
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.loading(false);
|
|
|
|
|
if (!uploadMsg.success) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.loading(true);
|
2023-05-12 18:06:05 +00:00
|
|
|
const restartMsg = await HttpUtil.post("/panel/setting/restartPanel");
|
2023-05-05 18:22:35 +00:00
|
|
|
this.loading(false);
|
|
|
|
|
if (restartMsg.success) {
|
|
|
|
|
this.loading(true);
|
|
|
|
|
await PromiseUtil.sleep(5000);
|
|
|
|
|
location.reload();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
fileInput.click();
|
|
|
|
|
},
|
2023-02-09 19:18:06 +00:00
|
|
|
},
|
|
|
|
|
async mounted() {
|
2023-06-14 16:20:19 +00:00
|
|
|
let retries = 0;
|
|
|
|
|
while (retries < 5) {
|
2023-02-09 19:18:06 +00:00
|
|
|
try {
|
|
|
|
|
await this.getStatus();
|
2023-06-14 16:20:19 +00:00
|
|
|
retries = 0;
|
2023-02-09 19:18:06 +00:00
|
|
|
} catch (e) {
|
2023-06-14 16:20:19 +00:00
|
|
|
console.error("Error occurred while fetching status:", e);
|
|
|
|
|
retries++;
|
2023-02-09 19:18:06 +00:00
|
|
|
}
|
2023-09-16 07:22:30 +00:00
|
|
|
await PromiseUtil.sleep(1000);
|
2023-02-09 19:18:06 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2023-08-30 00:32:19 +00:00
|
|
|
</html>
|
