diff --git a/web/html/xui/setting.html b/web/html/xui/setting.html
index bc40db2f..72a53251 100644
--- a/web/html/xui/setting.html
+++ b/web/html/xui/setting.html
@@ -238,56 +238,123 @@ const app = new Vue({
                     },
                 }
             },
-        methods: {
-            loading(spinning = true) {
-                this.spinning = spinning;
-            },
-            async getAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/all");
-                this.loading(false);
-                if (msg.success) {
-                    this.oldAllSetting = new AllSetting(msg.obj);
-                    this.allSetting = new AllSetting(msg.obj);
-                    this.saveBtnDisable = true;
-                }
-            },
-            async updateAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/update", this.allSetting);
-                this.loading(false);
-                if (msg.success) {
-                    await this.getAllSetting();
-                }
-            },
-            async updateUser() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/updateUser", this.user);
-                this.loading(false);
-                if (msg.success) {
-                    this.user = {};
-                }
-            },
-            async restartPanel() {
-                await new Promise(resolve => {
-                    this.$confirm({
-                        title: '{{ i18n "pages.setting.restartPanel" }}',
-                        content: '{{ i18n "pages.setting.restartPanelDesc" }}',
-                        okText: '{{ i18n "sure" }}',
-                        cancelText: '{{ i18n "cancel" }}',
-                        onOk: () => resolve(),
-                    });
-                });
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/restartPanel");
-                this.loading(false);
-                if (msg.success) {
+            methods: {
+                loading(spinning = true) {
+                    this.spinning = spinning;
+                },
+                async getAllSetting() {
                     this.loading(true);
-                    await PromiseUtil.sleep(5000);
-                    location.reload();
+                    const msg = await HttpUtil.post("/xui/setting/all");
+                    this.loading(false);
+                    if (msg.success) {
+                        this.oldAllSetting = new AllSetting(msg.obj);
+                        this.allSetting = new AllSetting(msg.obj);
+                        this.saveBtnDisable = true;
+                    }
+                },
+                async updateAllSetting() {
+                    this.loading(true);
+                    const msg = await HttpUtil.post("/xui/setting/update", this.allSetting);
+                    this.loading(false);
+                    if (msg.success) {
+                        await this.getAllSetting();
+                    }
+                },
+                async updateUser() {
+                    this.loading(true);
+                    const msg = await HttpUtil.post("/xui/setting/updateUser", this.user);
+                    this.loading(false);
+                    if (msg.success) {
+                        this.user = {};
+                    }
+                },
+                async restartPanel() {
+                    await new Promise(resolve => {
+                        this.$confirm({
+                            title: '{{ i18n "pages.setting.restartPanel" }}',
+                            content: '{{ i18n "pages.setting.restartPanelDesc" }}',
+                            okText: '{{ i18n "sure" }}',
+                            cancelText: '{{ i18n "cancel" }}',
+                            onOk: () => resolve(),
+                        });
+                    });
+                    this.loading(true);
+                    const msg = await HttpUtil.post("/xui/setting/restartPanel");
+                    this.loading(false);
+                    if (msg.success) {
+                        this.loading(true);
+                        await PromiseUtil.sleep(5000);
+                        location.reload();
+                    }
+                },
+                checkRequiredOutbounds() {
+                    const newTemplateSettings = this.templateSettings;
+                    const haveIPv4Outbounds = newTemplateSettings.outbounds.some((o) => o?.tag === "IPv4");
+                    const haveIPv4Rules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === "IPv4");
+                    const haveWARPOutbounds = newTemplateSettings.outbounds.some((o) => o?.tag === "WARP");
+                    const haveWARPRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === "WARP");
+                    if (haveWARPRules && !haveWARPOutbounds) {
+                        newTemplateSettings.outbounds.push(this.warpSettings);
+                    }
+                    if (haveIPv4Rules && !haveIPv4Outbounds) {
+                        newTemplateSettings.outbounds.push(this.ipv4Settings);
+                    }
+                    this.templateSettings = newTemplateSettings;
+                },
+                templateRuleGetter(routeSettings) {
+                    const { data, property, outboundTag } = routeSettings;
+                    let result = false;
+                    if (this.templateSettings != null) {
+                        this.templateSettings.routing.rules.forEach(
+                            (routingRule) => {
+                                if (
+                                    routingRule.hasOwnProperty(property) &&
+                                    routingRule.hasOwnProperty("outboundTag") &&
+                                    routingRule.outboundTag === outboundTag
+                                ) {
+                                    if (data.includes(routingRule[property][0])) {
+                                        result = true;
+                                    }
+                                }
+                            }
+                        );
+                    }
+                    return result;
+                },
+                templateRuleSetter(routeSettings) {
+                    const { newValue, data, property, outboundTag } = routeSettings;
+                    const oldTemplateSettings = this.templateSettings;
+                    const newTemplateSettings = oldTemplateSettings;
+                    if (newValue) {
+                        const propertyRule = {
+                            type: "field",
+                            outboundTag,
+                            [property]: data
+                        };
+                        newTemplateSettings.routing.rules.push(propertyRule);
+                    }
+                    else {
+                        const newRules = [];
+                        newTemplateSettings.routing.rules.forEach(
+                            (routingRule) => {
+                                if (
+                                    routingRule.hasOwnProperty(property) &&
+                                    routingRule.hasOwnProperty("outboundTag") &&
+                                    routingRule.outboundTag === outboundTag
+                                ) {
+                                    if (data.includes(routingRule[property][0])) {
+                                        return;
+                                    }
+                                }
+                                newRules.push(routingRule);
+                            }
+                        );
+                        newTemplateSettings.routing.rules = newRules;
+                    }
+                    this.templateSettings = newTemplateSettings;
+                    this.checkRequiredOutbounds();
                 }
-            }
-        },
+            },
         async mounted() {
             await this.getAllSetting();
             while (true) {