From 41b0fe4af452609e4e39dd66fea118ba2cc615bd Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Thu, 11 Jan 2024 00:00:35 +0100
Subject: [PATCH] [ui] separate outbound and reverse

---
 web/html/xui/xray.html | 140 ++++++++++++++++++++---------------------
 1 file changed, 67 insertions(+), 73 deletions(-)

diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index ba487c15..51576a96 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -103,7 +103,7 @@
                             </a-col>
                         </a-row>
                     </a-card>
-                    <a-tabs default-active-key="1" @change="(activeKey) => { if(activeKey == 'tpl-4') this.changeCode(); }">
+                    <a-tabs default-active-key="1" @change="(activeKey) => { if(activeKey == 'tpl-advanced') this.changeCode(); }">
                         <a-tab-pane key="tpl-1" tab='{{ i18n "pages.xray.basicTemplate"}}' style="padding-top: 20px;">
                             <a-collapse>
                                 <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
@@ -325,79 +325,73 @@
                             </a-table>
                         </a-tab-pane>
                         <a-tab-pane key="tpl-3" tab='{{ i18n "pages.xray.Outbounds"}}' style="padding-top: 20px;" force-render="true">
-                            <a-button type="primary" icon="plus" @click="addOutbound()">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
-                            <a-button type="primary" icon="plus" @click="addReverse()">{{ i18n "pages.xray.outbound.addReverse" }}</a-button>
-                            <a-row>
-                                <a-col :sm="24" :md="12">
-                                    <p style="margin: 10px;">{{ i18n "pages.xray.Outbounds"}}</p>
-                                    <a-table :columns="outboundColumns" bordered
-                                    :row-key="r => r.key"
-                                    :data-source="outboundData"
-                                    :scroll="isMobile ? {} : { x: 200 }"
-                                    :pagination="false"
-                                    :indent-size="0"
-                                    :style="isMobile ? 'padding: 5px 5px' : 'margin-right: 1px;'">
-                                        <template slot="action" slot-scope="text, outbound, index">
-                                            [[ index+1 ]]
-                                            <a-dropdown :trigger="['click']">
-                                                <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 16px; text-decoration: bold;"></a-icon>
-                                                <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
-                                                    <a-menu-item @click="editOutbound(index)">
-                                                        <a-icon type="edit"></a-icon>
-                                                        {{ i18n "edit" }}
-                                                    </a-menu-item>
-                                                    <a-menu-item @click="deleteOutbound(index)">
-                                                        <span style="color: #FF4D4F">
-                                                            <a-icon type="delete"></a-icon> {{ i18n "delete"}}
-                                                        </span>
-                                                    </a-menu-item>
-                                                </a-menu>
-                                            </a-dropdown>
-                                        </template>
-                                        <template slot="address" slot-scope="text, outbound, index">
-                                            <p style="margin: 0 5px;" v-for="addr in findOutboundAddress(outbound)">[[ addr ]]</p>
-                                        </template>
-                                        <template slot="protocol" slot-scope="text, outbound, index">
-                                            <a-tag style="margin:0;" color="purple">[[ outbound.protocol ]]</a-tag>
-                                            <template v-if="[Protocols.VMess, Protocols.VLESS, Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
-                                                <a-tag style="margin:0;" color="blue">[[ outbound.streamSettings.network ]]</a-tag>
-                                                <a-tag style="margin:0;" v-if="outbound.streamSettings.security=='tls'" color="green">tls</a-tag>
-                                                <a-tag style="margin:0;" v-if="outbound.streamSettings.security=='reality'" color="green">reality</a-tag>
-                                            </template>
-                                        </template>
-                                    </a-table>
-                                </a-col>
-                                <a-col :sm="24" :md="12" v-if="reverseData.length>0">
-                                    <p style="margin: 10px;">{{ i18n "pages.xray.outbound.reverse"}}</p>
-                                    <a-table :columns="reverseColumns" bordered
-                                    :row-key="r => r.key"
-                                    :data-source="reverseData"
-                                    :scroll="isMobile ? {} : { x: 200 }"
-                                    :pagination="false"
-                                    :indent-size="0"
-                                    :style="isMobile ? 'padding: 5px 0' : 'margin-left: 1px;'">
-                                        <template slot="action" slot-scope="text, reverse, index">
-                                            [[ index+1 ]]
-                                            <a-dropdown :trigger="['click']">
-                                                <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 16px; text-decoration: bold;"></a-icon>
-                                                <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
-                                                    <a-menu-item @click="editReverse(index)">
-                                                        <a-icon type="edit"></a-icon>
-                                                        {{ i18n "edit" }}
-                                                    </a-menu-item>
-                                                    <a-menu-item @click="deleteReverse(index)">
-                                                        <span style="color: #FF4D4F">
-                                                            <a-icon type="delete"></a-icon> {{ i18n "delete"}}
-                                                        </span>
-                                                    </a-menu-item>
-                                                </a-menu>
-                                            </a-dropdown>
-                                        </template>
-                                    </a-table>
-                                </a-col>
-                            </a-row>
+                            <a-button type="primary" icon="plus" @click="addOutbound()" style="margin-bottom: 10px;">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
+                            <a-table :columns="outboundColumns" bordered
+                            :row-key="r => r.key"
+                            :data-source="outboundData"
+                            :scroll="isMobile ? {} : { x: 200 }"
+                            :pagination="false"
+                            :indent-size="0"
+                            :style="isMobile ? 'padding: 5px 5px' : 'margin-right: 1px;'">
+                                <template slot="action" slot-scope="text, outbound, index">
+                                    [[ index+1 ]]
+                                    <a-dropdown :trigger="['click']">
+                                        <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 16px; text-decoration: bold;"></a-icon>
+                                        <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
+                                            <a-menu-item @click="editOutbound(index)">
+                                                <a-icon type="edit"></a-icon>
+                                                {{ i18n "edit" }}
+                                            </a-menu-item>
+                                            <a-menu-item @click="deleteOutbound(index)">
+                                                <span style="color: #FF4D4F">
+                                                    <a-icon type="delete"></a-icon> {{ i18n "delete"}}
+                                                </span>
+                                            </a-menu-item>
+                                        </a-menu>
+                                    </a-dropdown>
+                                </template>
+                                <template slot="address" slot-scope="text, outbound, index">
+                                    <p style="margin: 0 5px;" v-for="addr in findOutboundAddress(outbound)">[[ addr ]]</p>
+                                </template>
+                                <template slot="protocol" slot-scope="text, outbound, index">
+                                    <a-tag style="margin:0;" color="purple">[[ outbound.protocol ]]</a-tag>
+                                    <template v-if="[Protocols.VMess, Protocols.VLESS, Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
+                                        <a-tag style="margin:0;" color="blue">[[ outbound.streamSettings.network ]]</a-tag>
+                                        <a-tag style="margin:0;" v-if="outbound.streamSettings.security=='tls'" color="green">tls</a-tag>
+                                        <a-tag style="margin:0;" v-if="outbound.streamSettings.security=='reality'" color="green">reality</a-tag>
+                                    </template>
+                                </template>
+                            </a-table>
                         </a-tab-pane>
-                        <a-tab-pane key="tpl-4" tab='{{ i18n "pages.xray.advancedTemplate"}}' style="padding-top: 20px;" force-render="true">
+                        <a-tab-pane key="tpl-4" tab='{{ i18n "pages.xray.outbound.reverse"}}' style="padding-top: 20px;" force-render="true">
+                            <a-button type="primary" icon="plus" @click="addReverse()" style="margin-bottom: 10px;">{{ i18n "pages.xray.outbound.addReverse" }}</a-button>
+                            <a-table :columns="reverseColumns" bordered
+                            :row-key="r => r.key"
+                            :data-source="reverseData"
+                            :scroll="isMobile ? {} : { x: 200 }"
+                            :pagination="false"
+                            :indent-size="0"
+                            :style="isMobile ? 'padding: 5px 0' : 'margin-left: 1px;'">
+                                <template slot="action" slot-scope="text, reverse, index">
+                                    [[ index+1 ]]
+                                    <a-dropdown :trigger="['click']">
+                                        <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 16px; text-decoration: bold;"></a-icon>
+                                        <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
+                                            <a-menu-item @click="editReverse(index)">
+                                                <a-icon type="edit"></a-icon>
+                                                {{ i18n "edit" }}
+                                            </a-menu-item>
+                                            <a-menu-item @click="deleteReverse(index)">
+                                                <span style="color: #FF4D4F">
+                                                    <a-icon type="delete"></a-icon> {{ i18n "delete"}}
+                                                </span>
+                                            </a-menu-item>
+                                        </a-menu>
+                                    </a-dropdown>
+                                </template>
+                            </a-table>
+                        </a-tab-pane>
+                        <a-tab-pane key="tpl-advanced" tab='{{ i18n "pages.xray.advancedTemplate"}}' style="padding-top: 20px;" force-render="true">
                             <a-list-item-meta title='{{ i18n "pages.xray.Template"}}' description='{{ i18n "pages.xray.TemplateDesc"}}'></a-list-item-meta>
                             <a-radio-group v-model="advSettings" @change="changeCode" button-style="solid" style="margin: 10px 0;" :size="isMobile ? 'small' : ''">
                                 <a-radio-button value="xraySetting">{{ i18n "pages.xray.completeTemplate"}}</a-radio-button>