Merge 5e953bae45 into 5ee62b25ca

move styles to css

database/db.go

@@ -35,6 +35,7 @@ func initModels() error {
 		&model.InboundClientIps{},
 		&xray.ClientTraffic{},
 		&model.HistoryOfSeeders{},
+		&model.Server{},
 	}
 	for _, model := range models {
 		if err := db.AutoMigrate(model); err != nil {

database/model/model.go

@@ -113,3 +113,12 @@ type VLESSSettings struct {
 	Encryption string   `json:"encryption"`
 	Fallbacks  []any    `json:"fallbacks"`
 }
+
+type Server struct {
+	Id      int    `json:"id" gorm:"primaryKey;autoIncrement"`
+	Name    string `json:"name" gorm:"unique;not null"`
+	Address string `json:"address" gorm:"not null"`
+	Port    int    `json:"port" gorm:"not null"`
+	APIKey  string `json:"apiKey" gorm:"not null"`
+	Enable  bool   `json:"enable" gorm:"default:true"`
+}

go.mod

@@ -62,6 +62,7 @@ require (
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/pires/go-proxyproto v0.8.1 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect
 	github.com/quic-go/qpack v0.5.1 // indirect
 	github.com/quic-go/quic-go v0.54.0 // indirect

install.sh

@@ -137,6 +137,13 @@ config_after_install() {
     fi
 
     /usr/local/x-ui/x-ui migrate
+
+    local existing_apiKey=$(/usr/local/x-ui/x-ui setting -show true | grep -oP 'ApiKey: \K.*')
+    if [[ -z "$existing_apiKey" ]]; then
+        local config_apiKey=$(gen_random_string 32)
+        /usr/local/x-ui/x-ui setting -apiKey "${config_apiKey}"
+        echo -e "${green}Generated random API Key: ${config_apiKey}${plain}"
+    fi
 }
 
 install_x-ui() {

main.go

@@ -232,7 +232,7 @@ func updateTgbotSetting(tgBotToken string, tgBotChatid string, tgBotRuntime stri
 	}
 }
 
-func updateSetting(port int, username string, password string, webBasePath string, listenIP string, resetTwoFactor bool) {
+func updateSetting(port int, username string, password string, webBasePath string, listenIP string, resetTwoFactor bool, apiKey string) {
 	err := database.InitDB(config.GetDBPath())
 	if err != nil {
 		fmt.Println("Database initialization failed:", err)
@@ -242,6 +242,15 @@ func updateSetting(port int, username string, password string, webBasePath strin
 	settingService := service.SettingService{}
 	userService := service.UserService{}
 
+	if apiKey != "" {
+		err := settingService.SetAPIKey(apiKey)
+		if err != nil {
+			fmt.Println("Failed to set API Key:", err)
+		} else {
+			fmt.Printf("API Key set successfully: %v\n", apiKey)
+		}
+	}
+
 	if port > 0 {
 		err := settingService.SetPort(port)
 		if err != nil {
@@ -388,9 +397,11 @@ func main() {
 	var show bool
 	var getCert bool
 	var resetTwoFactor bool
+	var apiKey string
 	settingCmd.BoolVar(&reset, "reset", false, "Reset all settings")
 	settingCmd.BoolVar(&show, "show", false, "Display current settings")
 	settingCmd.IntVar(&port, "port", 0, "Set panel port number")
+	settingCmd.StringVar(&apiKey, "apiKey", "", "Set API Key")
 	settingCmd.StringVar(&username, "username", "", "Set login username")
 	settingCmd.StringVar(&password, "password", "", "Set login password")
 	settingCmd.StringVar(&webBasePath, "webBasePath", "", "Set base path for Panel")
@@ -440,7 +451,7 @@ func main() {
 		if reset {
 			resetSetting()
 		} else {
-			updateSetting(port, username, password, webBasePath, listenIP, resetTwoFactor)
+			updateSetting(port, username, password, webBasePath, listenIP, resetTwoFactor, apiKey)
 		}
 		if show {
 			showSetting(show)

sub/subService.go

@@ -154,26 +154,43 @@ func (s *SubService) getFallbackMaster(dest string, streamSettings string) (stri
 }
 
 func (s *SubService) getLink(inbound *model.Inbound, email string) string {
-	switch inbound.Protocol {
+	serverService := service.MultiServerService{}
-	case "vmess":
+	servers, err := serverService.GetServers()
-		return s.genVmessLink(inbound, email)
+	if err != nil {
-	case "vless":
+		logger.Warning("Failed to get servers for subscription:", err)
-		return s.genVlessLink(inbound, email)
+		return ""
-	case "trojan":
-		return s.genTrojanLink(inbound, email)
-	case "shadowsocks":
-		return s.genShadowsocksLink(inbound, email)
 	}
-	return ""
+
+	var links []string
+	for _, server := range servers {
+		if !server.Enable {
+			continue
+		}
+		var link string
+		switch inbound.Protocol {
+		case "vmess":
+			link = s.genVmessLink(inbound, email, server)
+		case "vless":
+			link = s.genVlessLink(inbound, email, server)
+		case "trojan":
+			link = s.genTrojanLink(inbound, email, server)
+		case "shadowsocks":
+			link = s.genShadowsocksLink(inbound, email, server)
+		}
+		if link != "" {
+			links = append(links, link)
+		}
+	}
+	return strings.Join(links, "\n")
 }
 
-func (s *SubService) genVmessLink(inbound *model.Inbound, email string) string {
+func (s *SubService) genVmessLink(inbound *model.Inbound, email string, server *model.Server) string {
 	if inbound.Protocol != model.VMESS {
 		return ""
 	}
 	obj := map[string]any{
 		"v":    "2",
-		"add":  s.address,
+		"add":  server.Address,
 		"port": inbound.Port,
 		"type": "none",
 	}
@@ -286,7 +303,7 @@ func (s *SubService) genVmessLink(inbound *model.Inbound, email string) string {
 					newObj[key] = value
 				}
 			}
-			newObj["ps"] = s.genRemark(inbound, email, ep["remark"].(string))
+			newObj["ps"] = s.genRemark(inbound, email, ep["remark"].(string), server.Name)
 			newObj["add"] = ep["dest"].(string)
 			newObj["port"] = int(ep["port"].(float64))
 
@@ -302,14 +319,14 @@ func (s *SubService) genVmessLink(inbound *model.Inbound, email string) string {
 		return links
 	}
 
-	obj["ps"] = s.genRemark(inbound, email, "")
+	obj["ps"] = s.genRemark(inbound, email, "", server.Name)
 
 	jsonStr, _ := json.MarshalIndent(obj, "", "  ")
 	return "vmess://" + base64.StdEncoding.EncodeToString(jsonStr)
 }
 
-func (s *SubService) genVlessLink(inbound *model.Inbound, email string) string {
+func (s *SubService) genVlessLink(inbound *model.Inbound, email string, server *model.Server) string {
-	address := s.address
+	address := server.Address
 	if inbound.Protocol != model.VLESS {
 		return ""
 	}
@@ -488,7 +505,7 @@ func (s *SubService) genVlessLink(inbound *model.Inbound, email string) string {
 			// Set the new query values on the URL
 			url.RawQuery = q.Encode()
 
-			url.Fragment = s.genRemark(inbound, email, ep["remark"].(string))
+			url.Fragment = s.genRemark(inbound, email, ep["remark"].(string), server.Name)
 
 			if index > 0 {
 				links += "\n"
@@ -509,12 +526,12 @@ func (s *SubService) genVlessLink(inbound *model.Inbound, email string) string {
 	// Set the new query values on the URL
 	url.RawQuery = q.Encode()
 
-	url.Fragment = s.genRemark(inbound, email, "")
+	url.Fragment = s.genRemark(inbound, email, "", server.Name)
 	return url.String()
 }
 
-func (s *SubService) genTrojanLink(inbound *model.Inbound, email string) string {
+func (s *SubService) genTrojanLink(inbound *model.Inbound, email string, server *model.Server) string {
-	address := s.address
+	address := server.Address
 	if inbound.Protocol != model.Trojan {
 		return ""
 	}
@@ -683,7 +700,7 @@ func (s *SubService) genTrojanLink(inbound *model.Inbound, email string) string
 			// Set the new query values on the URL
 			url.RawQuery = q.Encode()
 
-			url.Fragment = s.genRemark(inbound, email, ep["remark"].(string))
+			url.Fragment = s.genRemark(inbound, email, ep["remark"].(string), server.Name)
 
 			if index > 0 {
 				links += "\n"
@@ -705,12 +722,12 @@ func (s *SubService) genTrojanLink(inbound *model.Inbound, email string) string
 	// Set the new query values on the URL
 	url.RawQuery = q.Encode()
 
-	url.Fragment = s.genRemark(inbound, email, "")
+	url.Fragment = s.genRemark(inbound, email, "", server.Name)
 	return url.String()
 }
 
-func (s *SubService) genShadowsocksLink(inbound *model.Inbound, email string) string {
+func (s *SubService) genShadowsocksLink(inbound *model.Inbound, email string, server *model.Server) string {
-	address := s.address
+	address := server.Address
 	if inbound.Protocol != model.Shadowsocks {
 		return ""
 	}
@@ -850,7 +867,7 @@ func (s *SubService) genShadowsocksLink(inbound *model.Inbound, email string) st
 			// Set the new query values on the URL
 			url.RawQuery = q.Encode()
 
-			url.Fragment = s.genRemark(inbound, email, ep["remark"].(string))
+			url.Fragment = s.genRemark(inbound, email, ep["remark"].(string), server.Name)
 
 			if index > 0 {
 				links += "\n"
@@ -871,17 +888,18 @@ func (s *SubService) genShadowsocksLink(inbound *model.Inbound, email string) st
 	// Set the new query values on the URL
 	url.RawQuery = q.Encode()
 
-	url.Fragment = s.genRemark(inbound, email, "")
+	url.Fragment = s.genRemark(inbound, email, "", server.Name)
 	return url.String()
 }
 
-func (s *SubService) genRemark(inbound *model.Inbound, email string, extra string) string {
+func (s *SubService) genRemark(inbound *model.Inbound, email string, extra string, serverName string) string {
 	separationChar := string(s.remarkModel[0])
 	orderChars := s.remarkModel[1:]
 	orders := map[byte]string{
 		'i': "",
 		'e': "",
 		'o': "",
+		's': "",
 	}
 	if len(email) > 0 {
 		orders['e'] = email
@@ -892,6 +910,9 @@ func (s *SubService) genRemark(inbound *model.Inbound, email string, extra strin
 	if len(extra) > 0 {
 		orders['o'] = extra
 	}
+	if len(serverName) > 0 {
+		orders['s'] = serverName
+	}
 
 	var remark []string
 	for i := 0; i < len(orderChars); i++ {

web/controller/inbound.go

@@ -6,6 +6,7 @@ import (
 	"strconv"
 
 	"x-ui/database/model"
+	"x-ui/web/middleware"
 	"x-ui/web/service"
 	"x-ui/web/session"
 

web/controller/multi_server_controller.go

@@ -0,0 +1,89 @@
+package controller
+
+import (
+	"strconv"
+
+	"x-ui/database/model"
+	"x-ui/web/service"
+
+	"github.com/gin-gonic/gin"
+)
+
+type MultiServerController struct {
+	multiServerService service.MultiServerService
+}
+
+func NewMultiServerController(g *gin.RouterGroup) *MultiServerController {
+	c := &MultiServerController{}
+	c.initRouter(g)
+	return c
+}
+
+func (c *MultiServerController) initRouter(g *gin.RouterGroup) {
+	g = g.Group("/server")
+
+	g.GET("/list", c.getServers)
+	g.POST("/add", c.addServer)
+	g.POST("/del/:id", c.delServer)
+	g.POST("/update/:id", c.updateServer)
+}
+
+func (c *MultiServerController) getServers(ctx *gin.Context) {
+	servers, err := c.multiServerService.GetServers()
+	if err != nil {
+		jsonMsg(ctx, "Failed to get servers", err)
+		return
+	}
+	jsonObj(ctx, servers, nil)
+}
+
+func (c *MultiServerController) addServer(ctx *gin.Context) {
+	server := &model.Server{}
+	err := ctx.ShouldBind(server)
+	if err != nil {
+		jsonMsg(ctx, "Invalid data", err)
+		return
+	}
+	err = c.multiServerService.AddServer(server)
+	if err != nil {
+		jsonMsg(ctx, "Failed to add server", err)
+		return
+	}
+	jsonMsg(ctx, "Server added successfully", nil)
+}
+
+func (c *MultiServerController) delServer(ctx *gin.Context) {
+	id, err := strconv.Atoi(ctx.Param("id"))
+	if err != nil {
+		jsonMsg(ctx, "Invalid ID", err)
+		return
+	}
+	err = c.multiServerService.DeleteServer(id)
+	if err != nil {
+		jsonMsg(ctx, "Failed to delete server", err)
+		return
+	}
+	jsonMsg(ctx, "Server deleted successfully", nil)
+}
+
+func (c *MultiServerController) updateServer(ctx *gin.Context) {
+	id, err := strconv.Atoi(ctx.Param("id"))
+	if err != nil {
+		jsonMsg(ctx, "Invalid ID", err)
+		return
+	}
+	server := &model.Server{
+		Id: id,
+	}
+	err = ctx.ShouldBind(server)
+	if err != nil {
+		jsonMsg(ctx, "Invalid data", err)
+		return
+	}
+	err = c.multiServerService.UpdateServer(server)
+	if err != nil {
+		jsonMsg(ctx, "Failed to update server", err)
+		return
+	}
+	jsonMsg(ctx, "Server updated successfully", nil)
+}

web/controller/xui.go

@@ -25,6 +25,7 @@ func (a *XUIController) initRouter(g *gin.RouterGroup) {
 
 	g.GET("/", a.index)
 	g.GET("/inbounds", a.inbounds)
+	g.GET("/servers", a.servers)
 	g.GET("/settings", a.settings)
 	g.GET("/xray", a.xraySettings)
 
@@ -49,3 +50,7 @@ func (a *XUIController) settings(c *gin.Context) {
 func (a *XUIController) xraySettings(c *gin.Context) {
 	html(c, "xray.html", "pages.xray.title", nil)
 }
+
+func (a *XUIController) servers(c *gin.Context) {
+	html(c, "servers.html", "Servers", nil)
+}

web/html/component/aSidebar.html

@@ -54,6 +54,11 @@
                         icon: 'user',
                         title: '{{ i18n "menu.inbounds"}}'
                     },
+                    {
+                        key: '{{ .base_path }}panel/servers',
+                        icon: 'cloud-server',
+                        title: 'Servers'
+                    },
                     {
                         key: '{{ .base_path }}panel/settings',
                         icon: 'setting',

web/html/inbounds.html

@@ -1,150 +1,8 @@
 {{ template "page/head_start" .}}
-<style>
-  .ant-table:not(.ant-table-expanded-row .ant-table) {
-    outline: 1px solid #f0f0f0;
-    outline-offset: -1px;
-    border-radius: 1rem;
-    overflow-x: hidden;
-  }
-  .dark .ant-table:not(.ant-table-expanded-row .ant-table) {
-    outline-color: var(--dark-color-table-ring);
-  }
-  .ant-table .ant-table-content .ant-table-scroll .ant-table-body {
-    overflow-y: hidden;
-  }
-  .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
-	  margin:-10px 22px !important;
-  }
-  .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper .ant-table {
-    border-bottom-left-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-  }
-  .ant-table .ant-table-content .ant-table-tbody tr:last-child tr:last-child td {
-	  border-bottom-color: transparent;
-  }
-  .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:first-child {
-    border-bottom-left-radius: 6px;
-  }
-  .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:last-child {
-    border-bottom-right-radius: 6px;
-  }
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-  @media (max-width: 768px) {
-    .ant-card-body {
-      padding: .5rem;
-    }
-    .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
-	    margin:-10px 2px !important;
-    }
-  }
-  .dark .ant-switch-small:not(.ant-switch-checked) {
-    background-color: var(--dark-color-surface-100) !important;
-  }
-  .ant-custom-popover-title {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 5px 0;
-  }
-  .ant-col-sm-24 {
-    margin: 0.5rem -2rem 0.5rem 2rem;
-  }
-  tr.hideExpandIcon .ant-table-row-expand-icon {
-    display: none;
-  }
-  .infinite-tag {
-    padding: 0 5px;
-    border-radius: 2rem;
-    min-width: 50px;
-    min-height: 22px;
-  }
-  .infinite-bar .ant-progress-inner .ant-progress-bg {
-    background-color: #F2EAF1;
-    border: #D5BED2 solid 1px;
-  }
-  .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
-    background-color: #7a316f !important;
-    border: #7a316f solid 1px;
-  }
-  .ant-collapse {
-    margin: 5px 0;
-  }
-  .info-large-tag {
-    max-width: 200px;
-    overflow: hidden;
-  }
-  .client-comment {
-    font-size: 12px;
-    opacity: 0.75;
-    cursor: help;
-  }
-  .client-email {
-    font-weight: 500;
-  }
-  .client-popup-item {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-  .online-animation .ant-badge-status-dot {
-    animation: onlineAnimation 1.2s linear infinite;
-  }
-  @keyframes onlineAnimation {
-    0%,
-    50%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    10% {
-      transform: scale(1.5);
-      opacity: .2;
-    }
-  }
-  .tr-table-box {
-    display: flex;
-    gap: 4px;
-    justify-content: center;
-    align-items: center;
-  }
-  .tr-table-rt {
-    flex-basis: 70px;
-    min-width: 70px;
-    text-align: end;
-  }
-  .tr-table-lt {
-    flex-basis: 70px;
-    min-width: 70px;
-    text-align: start;
-  }
-  .tr-table-bar {
-    flex-basis: 160px;
-    min-width: 60px;
-  }
-  .tr-infinity-ch {
-    font-size: 14pt;
-    max-height: 24px;
-    display: inline-flex;
-    align-items: center;
-  }
-  .ant-table-expanded-row .ant-table .ant-table-body {
-    overflow-x: hidden;
-  }
-  .ant-table-expanded-row .ant-table-tbody>tr>td {
-    padding: 10px 2px;
-  }
-  .ant-table-expanded-row .ant-table-thead>tr>th {
-    padding: 12px 2px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' inbounds-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>

web/html/index.html

@@ -1,73 +1,4 @@
 {{ template "page/head_start" .}}
-<style>
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-  .ant-card-dark h2 {
-    color: var(--dark-color-text-primary);
-  }
-  .ant-backup-list-item {
-    gap: 10px;
-  }
-  .ant-version-list-item {
-    --padding: 12px;
-    padding: var(--padding) !important;
-    gap: var(--padding);
-  }
-  .dark .ant-version-list-item svg{
-    color: var(--dark-color-text-primary);
-  }
-  .dark .ant-backup-list-item svg,
-  .dark .ant-badge-status-text,
-  .dark .ant-card-extra {
-    color: var(--dark-color-text-primary);
-  }
-  .dark .ant-card-actions>li {
-    color: rgba(255, 255, 255, 0.55);
-  }
-  .dark .ant-radio-inner {
-    background-color: var(--dark-color-surface-100);
-    border-color: var(--dark-color-surface-600);
-  }
-  .dark .ant-radio-checked .ant-radio-inner {
-    border-color: var(--color-primary-100);
-  }
-  .dark .ant-backup-list, 
-  .dark .ant-version-list,
-  .dark .ant-card-actions,
-  .dark .ant-card-actions>li:not(:last-child) {
-    border-color: var(--dark-color-stroke);
-  }
-  .ant-card-actions {
-    background: transparent;
-  }
-  .ip-hidden {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    filter: blur(10px);
-  }
-  .running-animation .ant-badge-status-dot {
-    animation: runningAnimation 1.2s linear infinite;
-  }
-  .running-animation .ant-badge-status-processing:after {
-    border-color: var(--color-primary-100);
-  }
-  @keyframes runningAnimation {
-    0%,
-    50%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    10% {
-      transform: scale(1.5);
-      opacity: .2;
-    }
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
@@ -77,7 +8,7 @@
     <a-layout-content>
       <a-spin :spinning="loadingStates.spinning" :delay="200" :tip="loadingTip">
         <transition name="list" appear>
-          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" class="mb-10"
             message='{{ i18n "secAlertTitle" }}'
             color="red"
             description='{{ i18n "secAlertSsl" }}'
@@ -87,7 +18,7 @@
         <transition name="list" appear>
           <template>
             <a-row v-if="!loadingStates.fetched">
-              <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+              <a-card class="card-placeholder text-center">
                 <a-spin tip='{{ i18n "loading" }}'></a-spin>
               </a-card>
             </a-row>
@@ -97,7 +28,7 @@
                   <a-row :gutter="[0, isMobile ? 16 : 0]">
                     <a-col :sm="24" :md="12">
                       <a-row>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
                           <a-progress type="dashboard" status="normal"
                             :stroke-color="status.cpu.color"
                             :percent="status.cpu.percent"></a-progress>
@@ -112,7 +43,7 @@
                             </a-tooltip>
                           </div>
                         </a-col>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
                           <a-progress type="dashboard" status="normal"
                             :stroke-color="status.mem.color"
                             :percent="status.mem.percent"></a-progress>
@@ -124,7 +55,7 @@
                     </a-col>
                     <a-col :sm="24" :md="12">
                       <a-row>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
                           <a-progress type="dashboard" status="normal"
                             :stroke-color="status.swap.color"
                             :percent="status.swap.percent"></a-progress>
@@ -132,7 +63,7 @@
                             <b>{{ i18n "pages.index.swap" }}:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
                           </div>
                         </a-col>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
                           <a-progress type="dashboard" status="normal"
                             :stroke-color="status.disk.color"
                             :percent="status.disk.percent"></a-progress>
@@ -167,31 +98,31 @@
                               <span>{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
                             </a-col>
                             <a-col>
-                              <a-icon type="bars" :style="{ cursor: 'pointer', float: 'right' }" @click="openLogs()"></a-icon>
+                              <a-icon type="bars" class="cursor-pointer float-right" @click="openLogs()"></a-icon>
                             </a-col>
                           </a-row>
                         </span>
                         <template slot="content">
-                          <span :style="{ maxWidth: '400px' }" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
+                          <span class="max-w-400" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
                         </template>
                         <a-badge :text="status.xray.stateMsg" :color="status.xray.color"/>
                       </a-popover>
                     </template>
                   </template>
                   <template #actions>
-                    <a-space v-if="app.ipLimitEnable" direction="horizontal" @click="openXrayLogs()" :style="{ justifyContent: 'center' }">
+                    <a-space v-if="app.ipLimitEnable" direction="horizontal" @click="openXrayLogs()" class="jc-center">
                       <a-icon type="bars"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="stopXrayService" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="stopXrayService" class="jc-center">
                       <a-icon type="poweroff"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.stopXray" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="restartXrayService" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="restartXrayService" class="jc-center">
                       <a-icon type="reload"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="openSelectV2rayVersion" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openSelectV2rayVersion" class="jc-center">
                       <a-icon type="tool"></a-icon>
                       <span v-if="!isMobile">
                         [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n "pages.index.xraySwitch" }}' ]]
@@ -203,15 +134,15 @@
               <a-col :sm="24" :lg="12">
                 <a-card title='{{ i18n "menu.link" }}' hoverable>
                   <template #actions>
-                    <a-space direction="horizontal" @click="openLogs()" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openLogs()" class="jc-center">
                       <a-icon type="bars"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="openConfig" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openConfig" class="jc-center">
                       <a-icon type="control"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.config" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="openBackup" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openBackup" class="jc-center">
                       <a-icon type="cloud-server"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.backup" }}</span>
                     </a-space>
@@ -314,7 +245,7 @@
                       <template #title>
                         {{ i18n "pages.index.toggleIpVisibility" }}
                       </template>
-                      <a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
+                      <a-icon :type="showIp ? 'eye' : 'eye-invisible'" class="fs-1rem" @click="showIp = !showIp"></a-icon>
                     </a-tooltip>
                   </template>
                   <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'" :gutter="isMobile ? [8,8] : 0">
@@ -365,8 +296,8 @@
       @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
     <a-collapse default-active-key="1">
       <a-collapse-panel key="1" header='Xray'>
-        <a-alert type="warning" :style="{ marginBottom: '12px', width: '100%' }" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
+  <a-alert type="warning" class="mb-12 w-100" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
-        <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+  <a-list class="ant-version-list w-100" bordered>
           <a-list-item class="ant-version-list-item" v-for="version, index in versionModal.versions">
             <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
             <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
@@ -374,15 +305,13 @@
         </a-list>
       </a-collapse-panel>
       <a-collapse-panel key="2" header='Geofiles'>
-        <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+  <a-list class="ant-version-list w-100" bordered>
           <a-list-item class="ant-version-list-item" v-for="file, index in ['geosite.dat', 'geoip.dat', 'geosite_IR.dat', 'geoip_IR.dat', 'geosite_RU.dat', 'geoip_RU.dat']">
             <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ file ]]</a-tag>
-            <a-icon type="reload" @click="updateGeofile(file)" :style="{ marginRight: '8px' }"/>
+            <a-icon type="reload" @click="updateGeofile(file)" class="mr-8"/>
           </a-list-item>
         </a-list>
-        <div style="margin-top: 5px; display: flex; justify-content: flex-end;">
+        <div class="mt-5 d-flex justify-end"><a-button @click="updateGeofile('')">{{ i18n "pages.index.geofilesUpdateAll" }}</a-button></div>
-          <a-button @click="updateGeofile('')">{{ i18n "pages.index.geofilesUpdateAll" }}</a-button>
-        </div>
       </a-collapse-panel>
     </a-collapse>
   </a-modal>
@@ -394,15 +323,15 @@
       {{ i18n "pages.index.logs" }}
       <a-icon :spin="logModal.loading"
         type="sync"
-        :style="{ verticalAlign: 'middle', marginLeft: '10px' }"
+  class="va-middle ml-10"
         :disabled="logModal.loading"
         @click="openLogs()">
       </a-icon>
     </template>
     <a-form layout="inline">
-      <a-form-item :style="{ marginRight: '0.5rem' }">
+  <a-form-item class="mr-05">
         <a-input-group compact>
-          <a-select size="small" v-model="logModal.rows" :style="{ width: '70px' }"
+          <a-select size="small" v-model="logModal.rows" class="w-70"
               @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="10">10</a-select-option>
             <a-select-option value="20">20</a-select-option>
@@ -410,7 +339,7 @@
             <a-select-option value="100">100</a-select-option>
             <a-select-option value="500">500</a-select-option>
           </a-select>
-          <a-select size="small" v-model="logModal.level" :style="{ width: '95px' }"
+          <a-select size="small" v-model="logModal.level" class="w-95"
               @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="debug">Debug</a-select-option>
             <a-select-option value="info">Info</a-select-option>
@@ -423,11 +352,11 @@
       <a-form-item>
         <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
       </a-form-item>
-      <a-form-item :style="{ float: 'right' }">
+      <a-form-item style="float: right;">
         <a-button type="primary" icon="download" @click="FileManager.downloadTextFile(logModal.logs?.join('\n'), 'x-ui.log')"></a-button>
       </a-form-item>
     </a-form>
-    <div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="logModal.formattedLogs"></div>
+  <div class="ant-input log-container" v-html="logModal.formattedLogs"></div>
   </a-modal>
   <a-modal id="xraylog-modal"
       v-model="xraylogModal.visible"
@@ -439,15 +368,15 @@
       {{ i18n "pages.index.logs" }}
       <a-icon :spin="xraylogModal.loading"
         type="sync"
-        :style="{ verticalAlign: 'middle', marginLeft: '10px' }"
+  class="va-middle ml-10"
         :disabled="xraylogModal.loading"
         @click="openXrayLogs()">
       </a-icon>
     </template>
     <a-form layout="inline">
-      <a-form-item :style="{ marginRight: '0.5rem' }">
+  <a-form-item class="mr-05">
         <a-input-group compact>
-          <a-select size="small" v-model="xraylogModal.rows" :style="{ width: '70px' }"
+          <a-select size="small" v-model="xraylogModal.rows" class="w-70"
               @change="openXrayLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="10">10</a-select-option>
             <a-select-option value="20">20</a-select-option>
@@ -465,11 +394,11 @@
         <a-checkbox v-model="xraylogModal.showBlocked" @change="openXrayLogs()">Blocked</a-checkbox>
         <a-checkbox v-model="xraylogModal.showProxy" @change="openXrayLogs()">Proxy</a-checkbox>
       </a-form-item>
-      <a-form-item :style="{ float: 'right' }">
+      <a-form-item style="float: right;">
         <a-button type="primary" icon="download" @click="FileManager.downloadTextFile(xraylogModal.logs?.join('\n'), 'x-ui.log')"></a-button>
       </a-form-item>
     </a-form>
-    <div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="xraylogModal.formattedLogs"></div>
+  <div class="ant-input log-container" v-html="xraylogModal.formattedLogs"></div>
   </a-modal>
   <a-modal id="backup-modal" 
       v-model="backupModal.visible" 
@@ -477,7 +406,7 @@
       :closable="true"
       footer=""
       :class="themeSwitcher.currentTheme">
-    <a-list class="ant-backup-list" bordered :style="{ width: '100%' }">
+  <a-list class="ant-backup-list w-100" bordered>
       <a-list-item class="ant-backup-list-item">
         <a-list-item-meta>
           <template #title>{{ i18n "pages.index.exportDatabase" }}</template>

web/html/login.html

@@ -1,456 +1,10 @@
 {{ template "page/head_start" .}}
-<style>
-  html * {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1 {
-    text-align: center;
-    /*margin: 20px 0 50px 0;*/
-    height: 110px;
-  }
-
-  .ant-form-item-children .ant-btn,
-  .ant-input {
-    height: 50px;
-    border-radius: 30px;
-  }
-
-  .ant-input-group-addon {
-    border-radius: 0 30px 30px 0;
-    width: 50px;
-    font-size: 18px;
-  }
-
-  .ant-input-affix-wrapper .ant-input-prefix {
-    left: 23px;
-  }
-
-  .ant-input-affix-wrapper .ant-input:not(:first-child) {
-    padding-left: 50px;
-  }
-
-  .centered {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .title {
-    font-size: 2rem;
-    margin-block-end: 2rem;
-  }
-
-  .title b {
-    font-weight: bold !important;
-  }
-
-  #app {
-    overflow: hidden;
-  }
-
-  #login {
-    animation: charge 0.5s both;
-    background-color: #fff;
-    border-radius: 2rem;
-    padding: 4rem 3rem;
-    transition: all 0.3s;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-  }
-
-  #login:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  }
-
-  @keyframes charge {
-    from {
-      transform: translateY(5rem);
-      opacity: 0;
-    }
-
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  .under {
-    background-color: #c7ebe2;
-    z-index: 0;
-  }
-
-  .dark .under {
-    background-color: var(--dark-color-login-wave);
-  }
-
-  .dark #login {
-    background-color: var(--dark-color-surface-100);
-  }
-
-  .dark h1 {
-    color: rgba(255, 255, 255);
-  }
-
-  .ant-btn-primary-login {
-    width: 100%;
-  }
-
-  .ant-btn-primary-login:focus,
-  .ant-btn-primary-login:hover {
-    color: #fff;
-    background-color: #006655;
-    border-color: #006655;
-    background-image: linear-gradient(270deg,
-        rgba(123, 199, 77, 0) 30%,
-        #009980,
-        rgba(123, 199, 77, 0) 100%);
-    background-repeat: no-repeat;
-    animation: ma-bg-move ease-in-out 5s infinite;
-    background-position-x: -500px;
-    width: 95%;
-    animation-delay: -0.5s;
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
-  }
-
-  .ant-btn-primary-login.active,
-  .ant-btn-primary-login:active {
-    color: #fff;
-    background-color: #006655;
-    border-color: #006655;
-  }
-
-  @keyframes ma-bg-move {
-    0% {
-      background-position: -500px 0;
-    }
-
-    50% {
-      background-position: 1000px 0;
-    }
-
-    100% {
-      background-position: 1000px 0;
-    }
-  }
-
-  .wave-btn-bg {
-    position: relative;
-    border-radius: 25px;
-    width: 100%;
-    transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
-  }
-
-  .dark .wave-btn-bg {
-    color: #fff;
-    position: relative;
-    background-color: #0a7557;
-    border: 2px double transparent;
-    background-origin: border-box;
-    background-clip: padding-box, border-box;
-    background-size: 300%;
-    width: 100%;
-    z-index: 1;
-  }
-
-  .dark .wave-btn-bg:hover {
-    animation: wave-btn-tara 4s ease infinite;
-  }
-
-  .dark .wave-btn-bg-cl {
-    background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
-      radial-gradient(circle at left top, #006655, #009980, #006655) !important;
-    border-radius: 3em;
-  }
-
-  .dark .wave-btn-bg-cl:hover {
-    width: 95%;
-  }
-
-  .dark .wave-btn-bg-cl:before {
-    position: absolute;
-    content: "";
-    top: -5px;
-    left: -5px;
-    bottom: -5px;
-    right: -5px;
-    z-index: -1;
-    background: inherit;
-    background-size: inherit;
-    border-radius: 4em;
-    opacity: 0;
-    transition: 0.5s;
-  }
-
-  .dark .wave-btn-bg-cl:hover::before {
-    opacity: 1;
-    filter: blur(20px);
-    animation: wave-btn-tara 8s linear infinite;
-  }
-
-  @keyframes wave-btn-tara {
-    to {
-      background-position: 300%;
-    }
-  }
-
-  .dark .ant-btn-primary-login {
-    font-size: 14px;
-    color: #fff;
-    text-align: center;
-    background-image: linear-gradient(rgba(13, 14, 33, 0.45),
-        rgba(13, 14, 33, 0.35));
-    border-radius: 2rem;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    height: 46px;
-    position: relative;
-    white-space: nowrap;
-    cursor: pointer;
-    touch-action: manipulation;
-    padding: 0 15px;
-    width: 100%;
-    animation: none;
-    background-position-x: 0;
-    box-shadow: none;
-  }
-
-  .waves-header {
-    position: fixed;
-    width: 100%;
-    text-align: center;
-    background-color: #dbf5ed;
-    color: white;
-    z-index: -1;
-  }
-
-  .dark .waves-header {
-    background-color: var(--dark-color-login-background);
-  }
-
-  .waves-inner-header {
-    height: 50vh;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  .waves {
-    position: relative;
-    width: 100%;
-    height: 15vh;
-    margin-bottom: -8px;
-    /*Fix for safari gap*/
-    min-height: 100px;
-    max-height: 150px;
-  }
-
-  .parallax>use {
-    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
-  }
-
-  .dark .parallax>use {
-    fill: var(--dark-color-login-wave);
-  }
-
-  .parallax>use:nth-child(1) {
-    animation-delay: -2s;
-    animation-duration: 4s;
-    opacity: 0.2;
-  }
-
-  .parallax>use:nth-child(2) {
-    animation-delay: -3s;
-    animation-duration: 7s;
-    opacity: 0.4;
-  }
-
-  .parallax>use:nth-child(3) {
-    animation-delay: -4s;
-    animation-duration: 10s;
-    opacity: 0.6;
-  }
-
-  .parallax>use:nth-child(4) {
-    animation-delay: -5s;
-    animation-duration: 13s;
-  }
-
-  @keyframes move-forever {
-    0% {
-      transform: translate3d(-90px, 0, 0);
-    }
-
-    100% {
-      transform: translate3d(85px, 0, 0);
-    }
-  }
-
-  @media (max-width: 768px) {
-    .waves {
-      height: 40px;
-      min-height: 40px;
-    }
-  }
-
-  .words-wrapper {
-    width: 100%;
-    display: inline-block;
-    position: relative;
-    text-align: center;
-  }
-
-  .words-wrapper b {
-    width: 100%;
-    display: inline-block;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  .words-wrapper b.is-visible {
-    position: relative;
-  }
-
-  .headline.zoom .words-wrapper {
-    -webkit-perspective: 300px;
-    -moz-perspective: 300px;
-    perspective: 300px;
-  }
-
-  .headline {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .headline.zoom b {
-    opacity: 0;
-  }
-
-  .headline.zoom b.is-visible {
-    opacity: 1;
-    -webkit-animation: zoom-in 0.8s;
-    -moz-animation: zoom-in 0.8s;
-    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
-  }
-
-  .headline.zoom b.is-hidden {
-    -webkit-animation: zoom-out 0.8s;
-    -moz-animation: zoom-out 0.8s;
-    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
-  }
-
-  @-webkit-keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -webkit-transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-    }
-  }
-
-  @-moz-keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -moz-transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -moz-transform: translateZ(0);
-    }
-  }
-
-  @keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -webkit-transform: translateZ(100px);
-      -moz-transform: translateZ(100px);
-      -ms-transform: translateZ(100px);
-      -o-transform: translateZ(100px);
-      transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-      -moz-transform: translateZ(0);
-      -ms-transform: translateZ(0);
-      -o-transform: translateZ(0);
-      transform: translateZ(0);
-    }
-  }
-
-  @-webkit-keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -webkit-transform: translateZ(-100px);
-    }
-  }
-
-  @-moz-keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -moz-transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -moz-transform: translateZ(-100px);
-    }
-  }
-
-  @keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-      -moz-transform: translateZ(0);
-      -ms-transform: translateZ(0);
-      -o-transform: translateZ(0);
-      transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -webkit-transform: translateZ(-100px);
-      -moz-transform: translateZ(-100px);
-      -ms-transform: translateZ(-100px);
-      -o-transform: translateZ(-100px);
-      transform: translateZ(-100px);
-    }
-  }
-
-  .setting-section {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 22px;
-  }
-
-  .ant-space-item .ant-switch {
-    margin: 2px 0 4px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
   <transition name="list" appear>
-    <a-layout-content class="under" :style="{ minHeight: '0' }">
+  <a-layout-content class="under min-h-100vh">
       <div class="waves-header">
         <div class="waves-inner-header"></div>
         <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -466,11 +20,10 @@
           </g>
         </svg>
       </div>
-      <a-row type="flex" justify="center" align="middle"
+  <a-row type="flex" justify="center" align="middle" class="h-100 overflow-hidden-auto">
-        :style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
+        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" class="my-3rem">
-        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
           <template v-if="!loadingStates.fetched">
-            <div :style="{ textAlign: 'center' }">
+            <div class="text-center">
               <a-spin size="large" />
             </div>
           </template>
@@ -482,7 +35,7 @@
                   <a-space direction="vertical" :size="10">
                     <a-theme-switch-login></a-theme-switch-login>
                     <span>{{ i18n "pages.settings.language" }}</span>
-                    <a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang"
+                    <a-select ref="selectLang" class="w-100" v-model="lang"
                       @change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
                       <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
                         <span role="img" aria-label="l.name" v-text="l.icon"></span>
@@ -511,26 +64,24 @@
                     <a-form-item>
                       <a-input autocomplete="username" name="username" v-model.trim="user.username"
                         placeholder='{{ i18n "username" }}' autofocus required>
-                        <a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="user" class="fs-1rem"></a-icon>
                       </a-input>
                     </a-form-item>
                     <a-form-item>
                       <a-input-password autocomplete="password" name="password" v-model.trim="user.password"
                         placeholder='{{ i18n "password" }}' required>
-                        <a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="lock" class="fs-1rem"></a-icon>
                       </a-input-password>
                     </a-form-item>
                     <a-form-item v-if="twoFactorEnable">
                       <a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
                         placeholder='{{ i18n "twoFactorCode" }}' required>
-                        <a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="key" class="fs-1rem"></a-icon>
                       </a-input>
                     </a-form-item>
                     <a-form-item>
                       <a-row justify="center" class="centered">
-                        <div
+                        <div class="wave-btn-bg wave-btn-bg-cl h-50px mt-1rem" :style="loadingStates.spinning ? 'width: 52px' : 'display: inline-block'">
-                          :style="{ height: '50px', marginTop: '1rem', ...loadingStates.spinning ? { width: '52px' } : { display: 'inline-block' } }"
-                          class="wave-btn-bg wave-btn-bg-cl">
                           <a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
                             :icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
                             [[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]

web/html/servers.html

@@ -0,0 +1,165 @@
+{{template "header" .}}
+
+<div id="app" class="row" v-cloak>
+    <div class="col-md-12">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Server Management</h3>
+                <div class="card-tools">
+                    <button class="btn btn-primary" @click="showAddModal">Add Server</button>
+                </div>
+            </div>
+            <div class="card-body">
+                <table class="table table-bordered">
+                    <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>Name</th>
+                        <th>Address</th>
+                        <th>Port</th>
+                        <th>Enabled</th>
+                        <th>Actions</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr v-for="(server, index) in servers">
+                        <td>{{index + 1}}</td>
+                        <td>{{server.name}}</td>
+                        <td>{{server.address}}</td>
+                        <td>{{server.port}}</td>
+                        <td>
+                            <span v-if="server.enable" class="badge bg-success">Yes</span>
+                            <span v-else class="badge bg-danger">No</span>
+                        </td>
+                        <td>
+                            <button class="btn btn-info btn-sm" @click="showEditModal(server)">Edit</button>
+                            <button class="btn btn-danger btn-sm" @click="deleteServer(server.id)">Delete</button>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div class="modal fade" id="serverModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">{{modal.title}}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="form-group">
+                            <label>Name</label>
+                            <input type="text" class="form-control" v-model="modal.server.name">
+                        </div>
+                        <div class="form-group">
+                            <label>Address (IP or Domain)</label>
+                            <input type="text" class="form-control" v-model="modal.server.address">
+                        </div>
+                        <div class="form-group">
+                            <label>Port</label>
+                            <input type="number" class="form-control" v-model.number="modal.server.port">
+                        </div>
+                        <div class="form-group">
+                            <label>API Key</label>
+                            <input type="text" class="form-control" v-model="modal.server.apiKey">
+                        </div>
+                        <div class="form-check">
+                            <input type="checkbox" class="form-check-input" v-model="modal.server.enable">
+                            <label class="form-check-label">Enabled</label>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" @click="saveServer">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    const app = new Vue({
+        el: '#app',
+        data: {
+            servers: [],
+            modal: {
+                title: '',
+                server: {
+                    name: '',
+                    address: '',
+                    port: 0,
+                    apiKey: '',
+                    enable: true
+                }
+            }
+        },
+        methods: {
+            loadServers() {
+                axios.get('{{.base_path}}server/list')
+                    .then(response => {
+                        this.servers = response.data.obj;
+                    })
+                    .catch(error => {
+                        alert(error.response.data.msg);
+                    });
+            },
+            showAddModal() {
+                this.modal.title = 'Add Server';
+                this.modal.server = {
+                    name: '',
+                    address: '',
+                    port: 0,
+                    apiKey: '',
+                    enable: true
+                };
+                $('#serverModal').modal('show');
+            },
+            showEditModal(server) {
+                this.modal.title = 'Edit Server';
+                this.modal.server = Object.assign({}, server);
+                $('#serverModal').modal('show');
+            },
+            saveServer() {
+                let url = '{{.base_path}}server/add';
+                if (this.modal.server.id) {
+                    url = `{{.base_path}}server/update/${this.modal.server.id}`;
+                }
+                axios.post(url, this.modal.server)
+                    .then(response => {
+                        alert(response.data.msg);
+                        $('#serverModal').modal('hide');
+                        this.loadServers();
+                    })
+                    .catch(error => {
+                        alert(error.response.data.msg);
+                    });
+            },
+            deleteServer(id) {
+                if (!confirm('Are you sure you want to delete this server?')) {
+                    return;
+                }
+                axios.post(`{{.base_path}}server/del/${id}`)
+                    .then(response => {
+                        alert(response.data.msg);
+                        this.loadServers();
+                    })
+                    .catch(error => {
+                        alert(error.response.data.msg);
+                    });
+            }
+        },
+        mounted() {
+            this.loadServers();
+        }
+    });
+</script>
+
+{{template "footer" .}}

web/html/settings.html

@@ -1,67 +1,8 @@
 {{ template "page/head_start" .}}
-<style>
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-  @media (max-width: 768px) {
-    .ant-tabs-nav .ant-tabs-tab {
-      margin: 0;
-      padding: 12px .5rem;
-    }
-  }
-  .ant-tabs-bar {
-    margin: 0;
-  }
-  .ant-list-item {
-    display: block;
-  }
-  .alert-msg {
-    color: rgb(194, 117, 18);
-    font-weight: normal;
-    font-size: 16px;
-    padding: .5rem 1rem;
-    text-align: center;
-    background: rgb(255 145 0 / 15%);
-    margin: 1.5rem 2.5rem 0rem;
-    border-radius: .5rem;
-    transition: all 0.5s;
-    animation: signal 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
-  }
-  .alert-msg:hover {
-    cursor: default;
-    transition-duration: .3s;
-    animation: signal 0.9s ease infinite;
-  }
-  @keyframes signal {
-    0% {
-      box-shadow: 0 0 0 0 rgba(194, 118, 18, 0.5);
-    }
-
-    50% {
-      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
-    }
-
-    100% {
-      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
-    }
-  }
-  .alert-msg>i {
-    color: inherit;
-    font-size: 24px;
-  }
-  .dark .ant-input-password-icon {
-    color: var(--dark-color-text-primary);
-  }
-  .ant-collapse-content-box .ant-alert {
-    margin-block-end: 12px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' settings-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>

web/html/xray.html

@@ -3,45 +3,10 @@
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/fold/foldgutter.css">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.min.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/lint/lint.css">
-<style>
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .ant-tabs-nav .ant-tabs-tab {
-      margin: 0;
-      padding: 12px .5rem;
-    }
-
-    .ant-table-thead>tr>th,
-    .ant-table-tbody>tr>td {
-      padding: 10px 0px;
-    }
-  }
-
-  .ant-tabs-bar {
-    margin: 0;
-  }
-
-  .ant-list-item {
-    display: block;
-  }
-
-  .ant-list-item>li {
-    padding: 10px 20px !important;
-  }
-
-  .ant-collapse-content-box .ant-alert {
-    margin-block-end: 12px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' xray-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>

web/middleware/auth.go

@@ -0,0 +1,34 @@
+package middleware
+
+import (
+	"net/http"
+	"x-ui/web/service"
+	"github.com/gin-gonic/gin"
+)
+
+func ApiAuth() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		apiKey := c.GetHeader("Api-Key")
+		if apiKey == "" {
+			c.JSON(http.StatusUnauthorized, gin.H{"error": "API key is required"})
+			c.Abort()
+			return
+		}
+
+		settingService := service.SettingService{}
+		panelAPIKey, err := settingService.GetAPIKey()
+		if err != nil || panelAPIKey == "" {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "API key not configured on the panel"})
+			c.Abort()
+			return
+		}
+
+		if apiKey != panelAPIKey {
+			c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid API key"})
+			c.Abort()
+			return
+		}
+
+		c.Next()
+	}
+}

web/service/inbound.go

@@ -1,8 +1,11 @@
 package service
 
 import (
+	"bytes"
 	"encoding/json"
 	"fmt"
+	"io"
+	"net/http"
 	"sort"
 	"strconv"
 	"strings"
@@ -606,6 +609,11 @@ func (s *InboundService) AddInboundClient(data *model.Inbound) (bool, error) {
 	}
 	s.xrayApi.Close()
 
+	if err == nil {
+		body, _ := json.Marshal(data)
+		s.syncWithSlaves("POST", "/panel/inbound/api/addClient", bytes.NewReader(body))
+	}
+
 	return needRestart, tx.Save(oldInbound).Error
 }
 
@@ -694,6 +702,11 @@ func (s *InboundService) DelInboundClient(inboundId int, clientId string) (bool,
 			s.xrayApi.Close()
 		}
 	}
+
+	if err == nil {
+		s.syncWithSlaves("POST", fmt.Sprintf("/panel/inbound/api/%d/delClient/%s", inboundId, clientId), nil)
+	}
+
 	return needRestart, db.Save(oldInbound).Error
 }
 
@@ -868,6 +881,12 @@ func (s *InboundService) UpdateInboundClient(data *model.Inbound, clientId strin
 		logger.Debug("Client old email not found")
 		needRestart = true
 	}
+
+	if err == nil {
+		body, _ := json.Marshal(data)
+		s.syncWithSlaves("POST", fmt.Sprintf("/panel/inbound/api/updateClient/%s", clientId), bytes.NewReader(body))
+	}
+
 	return needRestart, tx.Save(oldInbound).Error
 }
 
@@ -2247,6 +2266,44 @@ func (s *InboundService) FilterAndSortClientEmails(emails []string) ([]string, [
 
 	return validEmails, extraEmails, nil
 }
+
+func (s *InboundService) syncWithSlaves(method string, path string, body io.Reader) {
+	serverService := MultiServerService{}
+	servers, err := serverService.GetServers()
+	if err != nil {
+		logger.Warning("Failed to get servers for syncing:", err)
+		return
+	}
+
+	for _, server := range servers {
+		if !server.Enable {
+			continue
+		}
+
+		url := fmt.Sprintf("http://%s:%d%s", server.Address, server.Port, path)
+		req, err := http.NewRequest(method, url, body)
+		if err != nil {
+			logger.Warningf("Failed to create request for server %s: %v", server.Name, err)
+			continue
+		}
+
+		req.Header.Set("Content-Type", "application/json")
+		req.Header.Set("Api-Key", server.APIKey)
+
+		client := &http.Client{}
+		resp, err := client.Do(req)
+		if err != nil {
+			logger.Warningf("Failed to send request to server %s: %v", server.Name, err)
+			continue
+		}
+		defer resp.Body.Close()
+
+		if resp.StatusCode != http.StatusOK {
+			bodyBytes, _ := io.ReadAll(resp.Body)
+			logger.Warningf("Failed to sync with server %s. Status: %s, Body: %s", server.Name, resp.Status, string(bodyBytes))
+		}
+	}
+  
 func (s *InboundService) DelInboundClientByEmail(inboundId int, email string) (bool, error) {
 	oldInbound, err := s.GetInbound(inboundId)
 	if err != nil {
@@ -2338,4 +2395,5 @@ func (s *InboundService) DelInboundClientByEmail(inboundId int, email string) (b
 	}
 
 	return needRestart, db.Save(oldInbound).Error
+
 }

web/service/inbound_service_sync_test.go

@@ -0,0 +1,72 @@
+package service
+
+import (
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"net/url"
+	"strconv"
+	"testing"
+	"x-ui/database"
+	"x-ui/database/model"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestInboundServiceSync(t *testing.T) {
+	setup()
+	defer teardown()
+
+	// Mock server to simulate a slave
+	var receivedApiKey string
+	var receivedBody []byte
+	mockSlave := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		receivedApiKey = r.Header.Get("Api-Key")
+		receivedBody, _ = io.ReadAll(r.Body)
+		w.WriteHeader(http.StatusOK)
+	}))
+	defer mockSlave.Close()
+
+	// Add the mock slave to the database
+	multiServerService := MultiServerService{}
+	mockSlaveURL, _ := url.Parse(mockSlave.URL)
+	mockSlavePort, _ := strconv.Atoi(mockSlaveURL.Port())
+	slaveServer := &model.Server{
+		Name:    "mock-slave",
+		Address: mockSlaveURL.Hostname(),
+		Port:    mockSlavePort,
+		APIKey:  "slave-api-key",
+		Enable:  true,
+	}
+	multiServerService.AddServer(slaveServer)
+
+	// Create a test inbound and client
+	inboundService := InboundService{}
+	db := database.GetDB()
+	testInbound := &model.Inbound{
+		UserId:   1,
+		Remark:   "test-inbound",
+		Enable:   true,
+		Settings: `{"clients":[]}`,
+	}
+	db.Create(testInbound)
+
+	clientData := model.Client{
+		Email: "test@example.com",
+		ID:    "test-id",
+	}
+	clientBytes, _ := json.Marshal([]model.Client{clientData})
+	inboundData := &model.Inbound{
+		Id:       testInbound.Id,
+		Settings: string(clientBytes),
+	}
+
+	// Test AddInboundClient sync
+	inboundService.AddInboundClient(inboundData)
+
+	assert.Equal(t, "slave-api-key", receivedApiKey)
+	var receivedInbound model.Inbound
+	json.Unmarshal(receivedBody, &receivedInbound)
+	assert.Equal(t, 1, receivedInbound.Id)
+}

web/service/multi_server_service.go

@@ -0,0 +1,37 @@
+package service
+
+import (
+	"x-ui/database"
+	"x-ui/database/model"
+)
+
+type MultiServerService struct{}
+
+func (s *MultiServerService) GetServers() ([]*model.Server, error) {
+	db := database.GetDB()
+	var servers []*model.Server
+	err := db.Find(&servers).Error
+	return servers, err
+}
+
+func (s *MultiServerService) GetServer(id int) (*model.Server, error) {
+	db := database.GetDB()
+	var server model.Server
+	err := db.First(&server, id).Error
+	return &server, err
+}
+
+func (s *MultiServerService) AddServer(server *model.Server) error {
+	db := database.GetDB()
+	return db.Create(server).Error
+}
+
+func (s *MultiServerService) UpdateServer(server *model.Server) error {
+	db := database.GetDB()
+	return db.Save(server).Error
+}
+
+func (s *MultiServerService) DeleteServer(id int) error {
+	db := database.GetDB()
+	return db.Delete(&model.Server{}, id).Error
+}

web/service/multi_server_service_test.go

@@ -0,0 +1,63 @@
+package service
+
+import (
+	"os"
+	"testing"
+	"x-ui/database"
+	"x-ui/database/model"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func setup() {
+	dbPath := "test.db"
+	os.Remove(dbPath)
+	database.InitDB(dbPath)
+}
+
+func teardown() {
+	db, _ := database.GetDB().DB()
+	db.Close()
+	os.Remove("test.db")
+}
+
+func TestMultiServerService(t *testing.T) {
+	setup()
+	defer teardown()
+
+	service := MultiServerService{}
+
+	// Test AddServer
+	server := &model.Server{
+		Name:    "test-server",
+		Address: "127.0.0.1",
+		Port:    54321,
+		APIKey:  "test-key",
+		Enable:  true,
+	}
+	err := service.AddServer(server)
+	assert.NoError(t, err)
+
+	// Test GetServer
+	retrievedServer, err := service.GetServer(server.Id)
+	assert.NoError(t, err)
+	assert.Equal(t, server.Name, retrievedServer.Name)
+
+	// Test GetServers
+	servers, err := service.GetServers()
+	assert.NoError(t, err)
+	assert.Len(t, servers, 1)
+
+	// Test UpdateServer
+	retrievedServer.Name = "updated-server"
+	err = service.UpdateServer(retrievedServer)
+	assert.NoError(t, err)
+	updatedServer, _ := service.GetServer(server.Id)
+	assert.Equal(t, "updated-server", updatedServer.Name)
+
+	// Test DeleteServer
+	err = service.DeleteServer(server.Id)
+	assert.NoError(t, err)
+	_, err = service.GetServer(server.Id)
+	assert.Error(t, err)
+}

web/service/setting.go

@@ -180,6 +180,21 @@ func (s *SettingService) getSetting(key string) (*model.Setting, error) {
 	return setting, nil
 }
 
+func (s *SettingService) GetAPIKey() (string, error) {
+	setting, err := s.getSetting("ApiKey")
+	if err != nil {
+		return "", err
+	}
+	if setting == nil {
+		return "", nil
+	}
+	return setting.Value, nil
+}
+
+func (s *SettingService) SetAPIKey(apiKey string) error {
+	return s.saveSetting("ApiKey", apiKey)
+}
+
 func (s *SettingService) saveSetting(key string, value string) error {
 	setting, err := s.getSetting(key)
 	db := database.GetDB()

web/web.go

@@ -243,7 +243,7 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 	g := engine.Group(basePath)
 
 	s.index = controller.NewIndexController(g)
-	s.server = controller.NewServerController(g)
+	s.server = controller.NewMultiServerController(g)
 	s.panel = controller.NewXUIController(g)
 	s.api = controller.NewAPIController(g)