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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
							<!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-table-row-expand-icon {
        color: rgba(0,0,0,.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="500" tip="loading">
                <transition name="list" appear>
                    <a-tag v-if="false" color="red" style="margin-bottom: 10px">
                        Please go to the panel settings as soon as possible to modify the username and password, otherwise there may be a risk of leaking account information
                    </a-tag>
                </transition>
                <transition name="list" appear>
                    <a-card hoverable style="margin-bottom: 20px;" :class="siderDrawer.isDarkTheme ? darkClass : ''">
                        <a-row>
                            <a-col :xs="24" :sm="24" :lg="12">
                                {{ i18n "pages.inbounds.totalDownUp" }}：
                                <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                {{ i18n "pages.inbounds.totalUsage" }}：
                                <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                {{ i18n "pages.inbounds.inboundCount" }}：
                                <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                {{ i18n "clients" }}:
                                <a-tag color="green">[[ total.clients ]]</a-tag>
                                <a-tag color="blue">{{ i18n "enabled" }} [[ total.active ]]</a-tag>
                                <a-tag color="red">{{ i18n "disabled" }} [[ total.deactive ]]</a-tag>
                            </a-col>
                        </a-row>
                    </a-card>
                </transition>
                <transition name="list" appear>
                    <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
                        <div slot="title">
                             <a-button type="primary" @click="openAddInbound">Add Inbound</a-button>
							 <a-button type="primary" @click="exportAllLinks" class="copy-btn">Export Links</a-button>
                        </div>
						<a-input v-model.lazy="searchKey" placeholder="{{ i18n "search" }}" autofocus style="max-width: 300px"></a-input>
                        <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
                                 :data-source="searchedInbounds"
                                 :loading="spinning" :scroll="{ x: 1300 }"
                                 :pagination="false"
                                 style="margin-top: 20px"
                                 @change="() => getDBInbounds()">
                            <template slot="action" slot-scope="text, dbInbound">
                                <a-icon type="edit" style="font-size: 25px" @click="openEditInbound(dbInbound.id);"></a-icon>
                                <a-dropdown :trigger="['click']">
                                    <a @click="e => e.preventDefault()">{{ i18n "pages.inbounds.operate" }}</a>
                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)">
                                        <a-menu-item v-if="dbInbound.isSS" key="qrcode">
                                            <a-icon type="qrcode"></a-icon>
                                            {{ i18n "qrCode" }}
                                        </a-menu-item>
                                        <a-menu-item key="edit">
                                            <a-icon type="edit"></a-icon>
                                            {{ i18n "edit" }}
                                        </a-menu-item>
                                         <template v-if="dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess">
                                            <a-menu-item key="export">
                                                <a-icon type="export"></a-icon>
                                                {{ i18n "pages.inbounds.export"}}
                                            </a-menu-item>
                                        </template>
                                        <a-menu-item key="resetTraffic">
                                            <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
                                        </a-menu-item>
                                        <a-menu-item key="delete">
                                            <span style="color: #FF4D4F">
                                                <a-icon type="delete"></a-icon> {{ i18n "delete"}}
                                            </span>
                                        </a-menu-item>
                                    </a-menu>
                                </a-dropdown>
                            </template>
                            <template slot="protocol" slot-scope="text, dbInbound">
                                <a-tag color="blue">[[ dbInbound.protocol ]]</a-tag>
                            </template>
                            <template slot="traffic" slot-scope="text, dbInbound">
                                <a-tag color="blue">[[ sizeFormat(dbInbound.up) ]] / [[ sizeFormat(dbInbound.down) ]]</a-tag>
                                <template v-if="dbInbound.total > 0">
                                    <a-tag v-if="dbInbound.up + dbInbound.down < dbInbound.total" color="cyan">[[ sizeFormat(dbInbound.total) ]]</a-tag>
                                    <a-tag v-else color="red">[[ sizeFormat(dbInbound.total) ]]</a-tag>
                                </template>
                                <a-tag v-else color="green">{{ i18n "unlimited" }}</a-tag>
                            </template>
                            <template slot="stream" slot-scope="text, dbInbound, index">
                                <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
                                    <a-tag color="green">[[ inbounds[index].stream.network ]]</a-tag>
                                    <a-tag v-if="inbounds[index].stream.isTls" color="blue">tls</a-tag>
                                    <a-tag v-if="inbounds[index].stream.isXTls" color="blue">xtls</a-tag>
                                </template>
                                <template v-else>{{ i18n "none" }}</template>
                            </template>
                            <template slot="enable" slot-scope="text, dbInbound">
                                <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound)"></a-switch>
                            </template>
                            <template slot="expiryTime" slot-scope="text, dbInbound">
                                <template v-if="dbInbound.expiryTime > 0">
                                    <a-tag v-if="dbInbound.isExpiry" color="red">
                                        [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
                                    </a-tag>
                                    <a-tag v-else color="blue">
                                        [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
                                    </a-tag>
                                </template>
                                <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
                            </template>
                            <template slot="expandedRowRender" slot-scope="record">
                                <a-table
                                v-if="(record.protocol === Protocols.VLESS) || (record.protocol === Protocols.VMESS)"
                                :row-key="client => client.id"
                                :columns="innerColumns"
                                :data-source="getInboundClients(record)"
                                :pagination="false"
                                >
                                    {{template "client_row"}}
                                </a-table>
                                <a-table
                                v-else-if="record.protocol === Protocols.TROJAN"
                                :row-key="client => client.id"
                                :columns="innerTrojanColumns"
                                :data-source="getInboundClients(record)"
                                :pagination="false"
                                >
                                    {{template "client_row"}}
                                </a-table>
                                <a-table
                                v-else
                                :row-key="client => client.id"
                                :columns="innerOneColumns"
                                :data-source="record"
                                :pagination="false"
                                >
                                    {{template "client_row"}}
                                </a-table>
                            </template>
                        </a-table>
                    </a-card>
                </transition>
            </a-spin>
        </a-layout-content>
    </a-layout>
</a-layout>
{{template "js" .}}
<script>

    const columns = [{
        title: '{{ i18n "pages.inbounds.operate" }}',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'action' },
    }, {
        title: '{{ i18n "pages.inbounds.enable" }}',
        align: 'center',
        width: 40,
        scopedSlots: { customRender: 'enable' },
    }, {
        title: "Id",
        align: 'center',
        dataIndex: "id",
        width: 30,
    }, {
        title: '{{ i18n "pages.inbounds.remark" }}',
        align: 'center',
        width: 80,
        dataIndex: "remark",
    }, {
        title: '{{ i18n "pages.inbounds.protocol" }}',
        align: 'center',
        width: 50,
        scopedSlots: { customRender: 'protocol' },
    }, {
        title: '{{ i18n "pages.inbounds.port" }}',
        align: 'center',
        dataIndex: "port",
        width: 40,
    }, {
        title: '{{ i18n "pages.inbounds.traffic" }}↑|↓',
        align: 'center',
        width: 150,
        scopedSlots: { customRender: 'traffic' },
    },{
        title: '{{ i18n "pages.inbounds.transportConfig" }}',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'stream' },
    }, {
        title: '{{ i18n "pages.inbounds.expireDate" }}',
        align: 'center',
        width: 80,
        scopedSlots: { customRender: 'expiryTime' },
    }];

    const innerColumns = [
        { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
        { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
        { title: 'UID', width: 150, dataIndex: "id" },
		
    ];

    const innerTrojanColumns = [
        { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
        { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
        { title: 'Password', width: 100, dataIndex: "password" },
    ];

    const innerOneColumns = [
        { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
    ];

    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            siderDrawer,
            spinning: false,
            inbounds: [],
            dbInbounds: [],
            searchKey: '',
            searchedInbounds: [],
        },
        methods: {
            loading(spinning=true) {
                this.spinning = spinning;
            },
            async getDBInbounds() {
                this.loading();
                const msg = await HttpUtil.post('/xui/inbound/list');
                this.loading(false);
                if (!msg.success) {
                    return;
                }
                this.setInbounds(msg.obj);
            },
            setInbounds(dbInbounds) {
                this.inbounds.splice(0);
                this.dbInbounds.splice(0);
                this.searchedInbounds.splice(0);
                for (const inbound of dbInbounds) {
                    const dbInbound = new DBInbound(inbound);
                    this.inbounds.push(dbInbound.toInbound());
                    this.dbInbounds.push(dbInbound);
                    this.searchedInbounds.push(dbInbound);
                }
            },
            searchInbounds(key) {
                if (ObjectUtil.isEmpty(key)) {
                    this.searchedInbounds = this.dbInbounds.slice();
                } else {
                    this.searchedInbounds.splice(0, this.searchedInbounds.length);
                    this.dbInbounds.forEach(inbound => {
                        if (ObjectUtil.deepSearch(inbound, key)) {
                            const newInbound = new DBInbound(inbound);
                            const inboundSettings = JSON.parse(inbound.settings);
                            if (inboundSettings.hasOwnProperty('clients')){
                                const searchedSettings = { "clients": [] };
                                inboundSettings.clients.forEach(client => {
                                    if (ObjectUtil.deepSearch(client, key)){
                                        searchedSettings.clients.push(client);
                                    }
                                });
                                newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, searchedSettings);
                            }
                            this.searchedInbounds.push(newInbound);
                        }
                    });
                }
            },
            clickAction(action, dbInbound) {
                switch (action.key) {
                    case "qrcode":
                        this.showQrcode(dbInbound);
                        break;
                    case "export":
                        this.inboundLinks(dbInbound.id);
                        break;
                    case "edit":
                        this.openEditInbound(dbInbound.id);
                        break;
                    case "resetTraffic":
                        this.resetTraffic(dbInbound);
                        break;
                    case "delete":
                        this.delInbound(dbInbound);
                        break;
                }
            },
            openAddInbound() {
                inModal.show({
                    title: '{{ i18n "pages.inbounds.addInbound"}}',
                    okText: '{{ i18n "pages.inbounds.addTo"}}',
                    cancelText: '{{ i18n "close" }}',
                    confirm: async (inbound, dbInbound) => {
                        inModal.loading();
                        await this.addInbound(inbound, dbInbound);
                        inModal.close();
                    },
                    isEdit: false
                });
            },
            openEditInbound(dbInbound_id) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInbound_id);
                const inbound = dbInbound.toInbound();
                inModal.show({
                    title: '{{ i18n "pages.inbounds.modifyInbound"}}',
                    okText: '{{ i18n "pages.inbounds.revise"}}',
                    cancelText: '{{ i18n "close" }}',
                    inbound: inbound,
                    dbInbound: dbInbound,
                    confirm: async (inbound, dbInbound) => {
                        inModal.loading();
                        await this.updateInbound(inbound, dbInbound);
                        inModal.close();
                    },
                    isEdit: true
                });
            },
            async addInbound(inbound, dbInbound) {
                const data = {
                    up: dbInbound.up,
                    down: dbInbound.down,
                    total: dbInbound.total,
                    remark: dbInbound.remark,
                    enable: dbInbound.enable,
                    expiryTime: dbInbound.expiryTime,

                    listen: inbound.listen,
                    port: inbound.port,
                    protocol: inbound.protocol,
                    settings: inbound.settings.toString(),
                    streamSettings: inbound.stream.toString(),
                    sniffing: inbound.canSniffing() ? inbound.sniffing.toString() : '{}',
                };
                await this.submit('/xui/inbound/add', data, inModal);
            },
            async updateInbound(inbound, dbInbound) {
                const data = {
                    up: dbInbound.up,
                    down: dbInbound.down,
                    total: dbInbound.total,
                    remark: dbInbound.remark,
                    enable: dbInbound.enable,
                    expiryTime: dbInbound.expiryTime,

                    listen: inbound.listen,
                    port: inbound.port,
                    protocol: inbound.protocol,
                    settings: inbound.settings.toString(),
                    streamSettings: inbound.stream.toString(),
                    sniffing: inbound.canSniffing() ? inbound.sniffing.toString() : '{}',
                };
                await this.submit(`/xui/inbound/update/${dbInbound.id}`, data, inModal);
            },
            resetTraffic(dbInbound) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => {
                        const inbound = dbInbound.toInbound();
                        dbInbound.up = 0;
                        dbInbound.down = 0;
                        this.updateInbound(inbound, dbInbound);
                    },
                });
            },
            delInbound(dbInbound) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                    content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
                    okText: '{{ i18n "delete"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => this.submit('/xui/inbound/del/' + dbInbound.id),
                });
            },
			getClients(protocol, clientSettings) {
                switch(protocol){
                    case Protocols.VMESS: return clientSettings.vmesses;
                    case Protocols.VLESS: return clientSettings.vlesses;
                    case Protocols.TROJAN: return clientSettings.trojans;
                    default: return null;
                }
            },
             showQrcode(dbInbound, clientIndex) {
                const link = dbInbound.genLink(clientIndex);
                qrModal.show('{{ i18n "qrCode"}}', link, dbInbound);
            },
            showInfo(dbInbound, index) {
                infoModal.show(dbInbound, index);
            },
            switchEnable(dbInbound) {
                this.submit(`/xui/inbound/update/${dbInbound.id}`, dbInbound);
            },
            async submit(url, data, modal) {
                const msg = await HttpUtil.postWithModal(url, data, modal);
                if (msg.success) {
                    await this.getDBInbounds();
                }
            },
            getInboundClients(dbInbound) {
                if(dbInbound.protocol == Protocols.VLESS) {
                    return dbInbound.toInbound().settings.vlesses
                } else if(dbInbound.protocol == Protocols.VMESS) {
                    return dbInbound.toInbound().settings.vmesses
                } else if(dbInbound.protocol == Protocols.TROJAN) {
                    return dbInbound.toInbound().settings.trojans
                }
            },
            resetClientTraffic(client,inbound,event) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => {
                        this.resetClTraffic(client,inbound,event);
                    },
                });
            },
            async resetClTraffic(client,inbound,event) {
                const msg = await HttpUtil.post('/xui/inbound/resetClientTraffic/'+ client.email);
                if (!msg.success) {
                    return;
                }
                clientStats = inbound.clientStats
                if(clientStats.length > 0)
                {
                    for (const key in clientStats) {
                        if (Object.hasOwnProperty.call(clientStats, key)) {
                            if(clientStats[key]['email'] == client.email){ 
                                clientStats[key]['up'] = 0
                                clientStats[key]['down'] = 0
                            }
                        }
                    }
                }
            },
            isExpiry(dbInbound, index) {
                return dbInbound.toInbound().isExpiry(index)
            },
            getUpStats(dbInbound, email) {
                if(email.length == 0) return 0
                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
                return clientStats ? clientStats.up : 0
            },
            getDownStats(dbInbound, email) {
                if(email.length == 0) return 0
                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
                return clientStats ? clientStats.down : 0
            },
            isTrafficExhausted(dbInbound, email) {
                if(email.length == 0) return false
                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
                return clientStats ? clientStats.down + clientStats.up > clientStats.total : false
            },
            inboundLinks(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                txtModal.show('{{ i18n "pages.inbounds.export"}}',dbInbound.genInboundLinks,dbInbound.remark);
            },
			exportAllLinks() {
                let copyText = '';
                for (const dbInbound of this.dbInbounds) {
                    copyText += dbInbound.genInboundLinks
                }
                txtModal.show('{{ i18n "pages.inbounds.export"}}',copyText,'All-Inbounds');
            },
            isClientEnabled(dbInbound, email) {
                clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null
                return clientStats ? clientStats['enable'] : true
            },
        },
        watch: {
            searchKey: debounce(function (newVal) {
                this.searchInbounds(newVal);
            }, 500)
        },
        mounted() {
            this.getDBInbounds();
        },
        computed: {
            total() {
                let down = 0, up = 0;
				let clients = 0, active = 0, deactive = 0;
                this.dbInbounds.forEach(dbInbound => {
                    down += dbInbound.down;
                    up += dbInbound.up;
                    inbound = dbInbound.toInbound();
                    clients = this.getClients(dbInbound.protocol, inbound.settings);
                    if(clients){
                        if(dbInbound.enable){
                            isClientEnable = false;
                            clients.forEach(client => {
                                isClientEnable = client.email == "" ? true: this.isClientEnabled(dbInbound,client.email);
                                isClientEnable ? active++ : deactive++;
                            });
                        } else {
                            deactive += clients.length;
                        }
                    } else {
                        dbInbound.enable ? active++ : deactive++;
                    }
                });
                return {
                    down: down,
                    up: up,
                    clients: active + deactive,
                    active: active,
                    deactive: deactive,
                };
            }
        },
    });

</script>

{{template "inboundModal"}}
{{template "promptModal"}}
{{template "qrcodeModal"}}
{{template "textModal"}}
{{template "inboundInfoModal"}}
</body>
</html>