txlyre
/
3x-ui
mirror of https://github.com/MHSanaei/3x-ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
							<!DOCTYPE html>
<html lang="en">
{{template "head" .}}
<style>
    @media (min-width: 769px) {
        .ant-layout-content {
            margin: 24px 16px;
        }
        .ant-card-hoverable {
            margin-inline: 0.3rem;
        }
    }
    .ant-col-sm-24 {
        margin-top: 10px;
    }
    .ant-card-dark h2 {
        color: var(--dark-color-text-primary);
    }
</style>

<body>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
    {{ template "commonSider" . }}
    <a-layout id="content-layout">
        <a-layout-content>
            <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
            <transition name="list" appear>
                <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
                message='{{ i18n "secAlertTitle" }}'
                color="red"
                description='{{ i18n "secAlertSsl" }}'
                show-icon closable
                >
                </a-alert>
            </transition>
            <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-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>
            </transition>
        </a-layout-content>
    </a-layout>

    <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
        @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
        <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
            message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
        <template v-for="version, index in versionModal.versions">
            <a-tag :color="index % 2 == 0 ? 'purple' : 'green'" style="margin-right: 12px; margin-bottom: 12px"
                @click="switchV2rayVersion(version)">
                [[ version ]]
            </a-tag>
        </template>
    </a-modal>

    <a-modal id="log-modal" v-model="logModal.visible"
             :closable="true" @cancel="() => logModal.visible = false"
             :class="themeSwitcher.currentTheme"
             width="800px" footer="">
        <template slot="title">
            {{ i18n "pages.index.logs" }}
            <a-icon :spin="logModal.loading"
                    type="sync"
                    style="vertical-align: middle; margin-left: 10px;"
                    :disabled="logModal.loading"
                    @click="openLogs()">
            </a-icon>
        </template>
        <a-form layout="inline">
            <a-form-item>
                <a-input-group compact>
                    <a-select v-model="logModal.rows" style="width:70px;"
                    @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
                        <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-select v-model="logModal.level" style="width:100px;"
                    @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
                        <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-input-group>
            </a-form-item>
            <a-form-item>
                <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
            </a-form-item>
            <a-form-item style="float: right;">
                <a-button type="primary" icon="download"
                :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs.join('\n'))" download="x-ui.log">
                </a-button>
            </a-form-item>
        </a-form>
        <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto;" v-html="logModal.formattedLogs"></div>
    </a-modal>

    <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
            :closable="true" footer=""
            :class="themeSwitcher.currentTheme">
            <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
            :message="backupModal.description"
            show-icon
            ></a-alert>
        <a-space direction="horizontal" style="text-align: center" style="margin-bottom: 10px;">
            <a-button type="primary" @click="exportDatabase()">
                [[ backupModal.exportText ]]
            </a-button>
            <a-button type="primary" @click="importDatabase()">
                [[ backupModal.importText ]]
            </a-button>
        </a-space>
    </a-modal>

</a-layout>
{{template "js" .}}
<script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
{{template "component/themeSwitcher" .}}
{{template "textModal"}}
<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 '#008771'; // Green
            } else if (percent < 90) {
                return "#f37b24"; // Orange
            } else {
                return "#cf3c3c"; // Red
            }
        }
    }

    class Status {
        constructor(data) {
            this.cpu = new CurTotal(0, 0);
            this.cpuCores = 0;
            this.cpuSpeedMhz = 0;
            this.disk = new CurTotal(0, 0);
            this.loads = [0, 0, 0];
            this.mem = new CurTotal(0, 0);
            this.netIO = { up: 0, down: 0 };
            this.netTraffic = { sent: 0, recv: 0 };
            this.publicIP = { ipv4: 0, ipv6: 0 };
            this.swap = new CurTotal(0, 0);
            this.tcpCount = 0;
            this.udpCount = 0;
            this.uptime = 0;
            this.appUptime = 0;
            this.appStats = {threads: 0, mem: 0, uptime: 0};
            this.xray = { state: State.Stop, errorMsg: "", version: "", color: "" };

            if (data == null) {
                return;
            }
            this.cpu = new CurTotal(data.cpu, 100);
            this.cpuCores = data.cpuCores;
            this.cpuSpeedMhz = data.cpuSpeedMhz;
            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;
            this.publicIP = data.publicIP;
            this.swap = new CurTotal(data.swap.current, data.swap.total);
            this.tcpCount = data.tcpCount;
            this.udpCount = data.udpCount;
            this.uptime = data.uptime;
            this.appUptime = data.appUptime;
            this.appStats = data.appStats;
            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;
        },
    };

    const logModal = {
        visible: false,
        logs: [],
        rows: 20,
        level: 'info',
        syslog: false,
        loading: false,
        show(logs) {
            this.visible = true;
            this.logs = logs; 
            this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record...";
        },
        formatLogs(logs) {
            let formattedLogs = '';
            const levels = ["DEBUG","INFO","NOTICE","WARNING","ERROR"];
            const levelColors = ["#3c89e8","#008771","#008771","#f37b24","#e04141","#bcbcbc"];

            logs.forEach((log, index) => {
                let [data, message] = log.split(" - ",2);
                const parts = data.split(" ")
                if(index>0) formattedLogs += '<br>';

                if (parts.length === 3) {
                    const d = parts[0];
                    const t = parts[1];
                    const level = parts[2];
                    const levelIndex = levels.indexOf(level,levels) || 5;

                    //formattedLogs += `<span style="color: gray;">${index + 1}.</span>`;
                    formattedLogs += `<span style="color: ${levelColors[0]};">${d} ${t}</span> `;
                    formattedLogs += `<span style="color: ${levelColors[levelIndex]}">${level}</span>`;
                } else {
                    const levelIndex = levels.indexOf(data,levels) || 5;
                    formattedLogs += `<span style="color: ${levelColors[levelIndex]}">${data}</span>`;
                }

                if(message){
                    if(message.startsWith("XRAY:"))
                        message = "<b>XRAY: </b>" + message.substring(5);
                    else
                        message = "<b>X-UI: </b>" + message;
                }

                formattedLogs += message ? ' - ' + message : '';
            });

            return formattedLogs;
        },
        hide() {
            this.visible = false;
        },
    };

    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;
        },
    };

    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            siderDrawer,
            themeSwitcher,
            status: new Status(),
            versionModal,
            logModal,
            backupModal,
            spinning: false,
            loadingTip: '{{ i18n "loading"}}',
            showAlert: false,
        },
        methods: {
            loading(spinning, tip = '{{ i18n "loading"}}') {
                this.spinning = spinning;
                this.loadingTip = tip;
            },
            async getStatus() {
                try {
                    const msg = await HttpUtil.post('/server/status');
                    if (msg.success) {
                        this.setStatus(msg.obj);
                    }
                } catch (e) {
                    console.error("Failed to get status:", e);
                }
            },
            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"}}',
                    class: themeSwitcher.currentTheme,
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: async () => {
                        versionModal.hide();
                        this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
                        await HttpUtil.post(`/server/installXray/${version}`);
                        this.loading(false);
                    },
                });
            },
            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;
                }
            },
            async openLogs(){
                logModal.loading = true;
                const msg = await HttpUtil.post('server/logs/'+logModal.rows,{level: logModal.level, syslog: logModal.syslog});
                if (!msg.success) {
                    return;
                }
                logModal.show(msg.obj);
                await PromiseUtil.sleep(500);
                logModal.loading = false;
            },
            async openConfig() {
                this.loading(true);
                const msg = await HttpUtil.post('server/getConfigJson');
                this.loading(false);
                if (!msg.success) {
                    return;
                }
                txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json');
            },
            openBackup() {
                backupModal.show({
                    title: '{{ i18n "pages.index.backupTitle" }}',
                    description: '{{ i18n "pages.index.backupDescription" }}',
                    exportText: '{{ i18n "pages.index.exportDatabase" }}',
                    importText: '{{ i18n "pages.index.importDatabase" }}',
                });
            },
            exportDatabase() {
                window.location = basePath + 'server/getDb';
            },
            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);
                        const restartMsg = await HttpUtil.post("/panel/setting/restartPanel");
                        this.loading(false);
                        if (restartMsg.success) {
                            this.loading(true);
                            await PromiseUtil.sleep(5000);
                            location.reload();
                        }
                    }
                });
                fileInput.click();
            },
        },
        async mounted() {
            if (window.location.protocol !== "https:") {
                this.showAlert = true;
            }
            while (true) {
                try {
                    await this.getStatus();
                } catch (e) {
                    console.error(e);
                }
                await PromiseUtil.sleep(2000);
            }
        },
    });

</script>
</body>
</html>