Apq
/
x-ui
mirror of https://github.com/vaxilu/x-ui.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
							<!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;
    }
</style>
<body>
<a-layout id="app" v-cloak>
    {{ template "commonSider" . }}
    <a-layout id="content-layout">
        <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;">
                        <a-row>
                            <a-col :xs="24" :sm="24" :lg="12">
                                upload / download：
                                <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                total traffic：
                                <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                number of accounts：
                                <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
                            </a-col>
                        </a-row>
                    </a-card>
                </transition>
                <transition name="list" appear>
                    <a-card hoverable>
                        <div slot="title">
                            <a-button type="primary" icon="plus" @click="openAddInbound"></a-button>
                        </div>
                        <a-input v-model="searchKey" placeholder="search" autofocus style="max-width: 300px"></a-input>
                        <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
                                 :data-source="dbInbounds"
                                 :loading="spinning" :scroll="{ x: 1500 }"
                                 :pagination="false"
                                 style="margin-top: 20px"
                                 @change="() => getDBInbounds()">
                            <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) ]]</a-tag>
                                <a-tag color="green">[[ sizeFormat(dbInbound.down) ]]</a-tag>
                            </template>
                            <template slot="settings" slot-scope="text, dbInbound">
                                <a-button type="link">查看</a-button>
                            </template>
                            <template slot="streamSettings" slot-scope="text, dbInbound">
                                <a-button type="link">查看</a-button>
                            </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">
                                <span v-if="dbInbound.expiryTime > 0" color="red">[[ DateUtil.formatMillis(dbInbound.expiryTime) ]]</span>
                                <span v-else>无限期</span>
                            </template>
                            <template slot="action" slot-scope="text, dbInbound">
                                <a-button v-if="dbInbound.hasLink()" type="primary" icon="qrcode" @click="showQrcode(dbInbound)"></a-button>
                                <a-button type="primary" icon="edit" @click="openEditInbound(dbInbound)"></a-button>
                                <a-button type="danger" icon="delete" @click="delInbound(dbInbound)"></a-button>
                            </template>
                        </a-table>
                    </a-card>
                </transition>
            </a-spin>
        </a-layout-content>
    </a-layout>
</a-layout>
{{template "js" .}}
<script>

    const columns = [{
        title: "id",
        align: 'center',
        dataIndex: "id",
        width: 60,
    }, {
        title: "protocol",
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'protocol' },
    }, {
        title: "port",
        align: 'center',
        dataIndex: "port",
        width: 60,
    }, {
        title: "traffic",
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'traffic' },
    // }, {
    //     title: "settings",
    //     align: 'center',
    //     width: 60,
    //     scopedSlots: { customRender: 'settings' },
    // }, {
    //     title: "streamSettings",
    //     align: 'center',
    //     width: 60,
    //     scopedSlots: { customRender: 'streamSettings' },
    }, {
        title: "enable",
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'enable' },
    }, {
        title: "action",
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'action' },
    }];

    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            siderDrawer,
            spinning: false,
            dbInbounds: [],
            searchKey: '',
        },
        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.dbInbounds.splice(0);
                for (const inbound of dbInbounds) {
                    this.dbInbounds.push(new DBInbound(inbound));
                }
            },
            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)) {
                            this.searchedInbounds.push(inbound);
                        }
                    });
                }
            },
            openAddInbound() {
                inModal.show({
                    title: 'add account',
                    okText: 'add',
                    confirm: async (inbound, dbInbound) => {
                        inModal.loading();
                        await this.addInbound(inbound, dbInbound);
                        inModal.close();
                    }
                });
            },
            openEditInbound(dbInbound) {
                const inbound = dbInbound.toInbound();
                inModal.show({
                    title: 'update account',
                    okText: 'update',
                    inbound: inbound,
                    dbInbound: dbInbound,
                    confirm: async (inbound, dbInbound) => {
                        inModal.loading();
                        await this.updateInbound(inbound, dbInbound);
                        inModal.close();
                    }
                });
            },
            async addInbound(inbound, dbInbound) {
                const data = {
                    remark: dbInbound.remark,
                    enable: dbInbound.enable,

                    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 = {
                    remark: dbInbound.remark,
                    enable: dbInbound.enable,

                    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);
            },
            delInbound(dbInbound) {
                this.$confirm({
                    title: 'delete account',
                    content: 'Cannot be restored after deletion, confirm deletion?',
                    okText: 'delete',
                    cancelText: 'cancel',
                    onOk: () => this.submit('/xui/inbound/del/' + dbInbound.id),
                });
            },
            showQrcode(dbInbound) {
                let address = location.hostname;
                if (!ObjectUtil.isEmpty(dbInbound.listen) || dbInbound.listen !== "0.0.0.0") {
                    address = dbInbound.listen;
                }
                const link = dbInbound.genLink(address);
                qrModal.show('二维码', link);
            },
            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();
                }
            },
        },
        watch: {
            searchKey(value) {
                this.searchInbounds(value);
            }
        },
        mounted() {
            this.getDBInbounds();
        },
        computed: {
            total() {
                let down = 0, up = 0;
                for (let i = 0; i < this.dbInbounds.length; ++i) {
                    down += this.dbInbounds[i].down;
                    up += this.dbInbounds[i].up;
                }
                return {
                    down: down,
                    up: up,
                };
            }
        },
    });

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