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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
							<!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;
    }

    .ant-card-dark h2 {
        color: hsla(0,0%,100%,.65);
    }
</style>
<body>
<a-layout id="app" v-cloak>
    {{ template "commonSider" . }}
    <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
        <a-layout-content>
            <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
            <transition name="list" appear>
                <a-row>
                    <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                        <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"
                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                    :percent="status.cpu.percent"></a-progress>
                                        <div>CPU</div>
                                    </a-col>
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.mem.color"
                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                    :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"
                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                    :percent="status.swap.percent"></a-progress>
                                        <div>
                                            Swap: [[ 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"
                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
                                                    :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>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                            {{ 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>
                            <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">[[ status.xray.version ]]</a-tag>
                            <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>
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                            {{ i18n "pages.index.operationHours" }}:
                            <a-tag color="green">[[ formatSecond(status.uptime) ]]</a-tag>
                            <a-tooltip>
                                <template slot="title">
                                    {{ i18n "pages.index.operationHoursDesc" }}
                                </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="siderDrawer.isDarkTheme ? darkClass : ''">
                            {{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                            TCP / UDP {{ i18n "pages.index.connectionCount" }}: [[ status.tcpCount ]] / [[ status.udpCount ]]
                            <a-tooltip>
                                <template slot="title">
                                    {{ i18n "pages.index.connectionCountDesc" }}
                                </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="siderDrawer.isDarkTheme ? darkClass : ''">
                            <a-row>
                                <a-col :span="12">
                                    <a-icon type="arrow-up"></a-icon>
                                    [[ sizeFormat(status.netIO.up) ]] / S
                                    <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>
                                    [[ sizeFormat(status.netIO.down) ]] / S
                                    <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">
                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                            <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-col :sm="24" :md="12">
                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
							 3x-ui: <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
							<a href="https://t.me/panel3xui" target="_blank"><a-tag color="green">Telegram</a-tag></a>
							<a-tag color="blue" style="cursor: pointer;" @click="openLogs(20)">Log Reports</a-tag>
                        </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="siderDrawer.isDarkTheme ? darkClass : ''"
             footer="">
        <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>
    <a-modal id="log-modal" v-model="logModal.visible" title="X-UI logs"
             :closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false"
             :class="siderDrawer.isDarkTheme ? darkClass : ''"
             width="800px"
             footer="">
        <a-form layout="inline">
            <a-form-item label="Count">
                <a-select v-model="logModal.rows"
                style="width: 80px"
                @change="openLogs(logModal.rows)"
                :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                    <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>
            <a-form-item>
                <button class="ant-btn ant-btn-primary" @click="openLogs(logModal.rows)"><a-icon type="sync"></a-icon> Reload</button>
            </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>
       </a-form>
        <a-input type="textarea" v-model="logModal.logs" disabled="true"
                :autosize="{ minRows: 10, maxRows: 22}"></a-input>
    </a-modal>
</a-layout>
{{template "js" .}}
<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);
            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.swap = new CurTotal(0, 0);
            this.tcpCount = 0;
            this.udpCount = 0;
            this.uptime = 0;
            this.xray = {state: State.Stop, errorMsg: "", version: "", color: ""};

            if (data == null) {
                return;
            }
            this.cpu = new CurTotal(data.cpu, 100);
            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.swap = new CurTotal(data.swap.current, data.swap.total);
            this.tcpCount = data.tcpCount;
            this.udpCount = data.udpCount;
            this.uptime = data.uptime;
            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,
        show(logs, rows) {
            this.visible = true;
            this.rows = rows;
            this.logs = logs.join("\n");
        },
        hide() {
            this.visible = false;
        },
    };

    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            siderDrawer,
            status: new Status(),
            versionModal,
            logModal,
            spinning: false,
            loadingTip: '{{ i18n "loading"}}',
        },
        methods: {
            loading(spinning, tip = '{{ i18n "loading"}}') {
                this.spinning = spinning;
                this.loadingTip = tip;
            },
            async getStatus() {
                const msg = await HttpUtil.post('/server/status');
                if (msg.success) {
                    this.setStatus(msg.obj);
                }
            },
            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: siderDrawer.isDarkTheme ? darkClass : '',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: async () => {
                        versionModal.hide();
                        this.loading(true, '{{ i18n "pages.index.dontRefreshh"}}');
                        await HttpUtil.post(`/server/installXray/${version}`);
                        this.loading(false);
                    },
                });
            },
	        //here add stop xray function
            async stopXrayService() {
                this.loading(true);
                const msg = await HttpUtil.post('server/stopXrayService');
                this.loading(false);
                if (!msg.success) {
                    return;
                }
            },
            //here add restart xray function
            async restartXrayService() {
                this.loading(true);
                const msg = await HttpUtil.post('server/restartXrayService');
                this.loading(false);
                if (!msg.success) {
                    return;
                }
            },
            async openLogs(rows){
                this.loading(true);
                const msg = await HttpUtil.post('server/logs/'+rows);
                this.loading(false);
                if (!msg.success) {
                    return;
                }
                logModal.show(msg.obj,rows);
            }
        },
        async mounted() {
            while (true) {
                try {
                    await this.getStatus();
                } catch (e) {
                    console.error(e);
                }
                await PromiseUtil.sleep(2000);
            }
        },
    });

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