feat: Uniform state style (#7436)

agent/app/service/ftp.go

@@ -122,7 +122,7 @@ func (f *FtpService) Sync() error {
 	}
 	for _, item := range listsInDB {
 		if _, ok := sameData[item.User]; !ok {
-			_ = ftpRepo.Update(item.ID, map[string]interface{}{"status": "deleted"})
+			_ = ftpRepo.Update(item.ID, map[string]interface{}{"status": constant.StatusDeleted})
 		}
 	}
 	return nil

agent/constant/status.go

@@ -10,6 +10,7 @@ const (
 	StatusEnable    = "Enable"
 	StatusDisable   = "Disable"
 	StatusNone      = "None"
+	StatusDeleted   = "Deleted"
 
 	OrderDesc = "descending"
 	OrderAsc  = "ascending"

agent/init/migration/migrate.go

@@ -15,13 +15,6 @@ func Init() {
 		migrations.InitImageRepo,
 		migrations.InitDefaultCA,
 		migrations.InitPHPExtensions,
-		migrations.UpdateWebsite,
-		migrations.UpdateWebsiteDomain,
-		migrations.UpdateApp,
-		migrations.AddTaskDB,
-		migrations.UpdateAppInstall,
-		migrations.UpdateSnapshot,
-		migrations.UpdateCronjob,
 		migrations.InitBaseDir,
 	})
 	if err := m.Migrate(); err != nil {

core/app/api/v2/setting.go

@@ -357,7 +357,7 @@ func (b *BaseApi) MFABind(c *gin.Context) {
 		return
 	}
 
-	if err := settingService.Update("MFAStatus", "enable"); err != nil {
+	if err := settingService.Update("MFAStatus", constant.StatusEnable); err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
 		return
 	}

core/app/service/auth.go

@@ -61,7 +61,7 @@ func (u *AuthService) Login(c *gin.Context, info dto.Login, entrance string) (*d
 	if err = settingRepo.Update("Language", info.Language); err != nil {
 		return nil, err
 	}
-	if mfa.Value == "enable" {
+	if mfa.Value == constant.StatusEnable {
 		return &dto.UserLoginInfo{Name: nameSetting.Value, MfaStatus: mfa.Value}, nil
 	}
 	return u.generateSession(c, info.Name, info.AuthMethod)
@@ -134,13 +134,13 @@ func (u *AuthService) generateSession(c *gin.Context, name, authMethod string) (
 	}
 	sessionUser, err := global.SESSION.Get(c)
 	if err != nil {
-		err := global.SESSION.Set(c, sessionUser, httpsSetting.Value == "enable", lifeTime)
+		err := global.SESSION.Set(c, sessionUser, httpsSetting.Value == constant.StatusEnable, lifeTime)
 		if err != nil {
 			return nil, err
 		}
 		return &dto.UserLoginInfo{Name: name}, nil
 	}
-	if err := global.SESSION.Set(c, sessionUser, httpsSetting.Value == "enable", lifeTime); err != nil {
+	if err := global.SESSION.Set(c, sessionUser, httpsSetting.Value == constant.StatusEnable, lifeTime); err != nil {
 		return nil, err
 	}
 
@@ -154,7 +154,7 @@ func (u *AuthService) LogOut(c *gin.Context) error {
 	}
 	sID, _ := c.Cookie(constant.SessionName)
 	if sID != "" {
-		c.SetCookie(constant.SessionName, sID, -1, "", "", httpsSetting.Value == "enable", true)
+		c.SetCookie(constant.SessionName, sID, -1, "", "", httpsSetting.Value == constant.StatusEnable, true)
 		err := global.SESSION.Delete(c)
 		if err != nil {
 			return err

core/app/service/setting.go

@@ -189,8 +189,8 @@ func (u *SettingService) UpdatePort(port uint) error {
 
 func (u *SettingService) UpdateSSL(c *gin.Context, req dto.SSLUpdate) error {
 	secretDir := path.Join(global.CONF.System.BaseDir, "1panel/secret")
-	if req.SSL == "disable" {
+	if req.SSL == constant.StatusDisable {
-		if err := settingRepo.Update("SSL", "disable"); err != nil {
+		if err := settingRepo.Update("SSL", constant.StatusDisable); err != nil {
 			return err
 		}
 		if err := settingRepo.Update("SSLType", "self"); err != nil {
@@ -275,7 +275,7 @@ func (u *SettingService) LoadFromCert() (*dto.SSLInfo, error) {
 	if err != nil {
 		return nil, err
 	}
-	if ssl.Value == "disable" {
+	if ssl.Value == constant.StatusDisable {
 		return &dto.SSLInfo{}, nil
 	}
 	sslType, err := settingRepo.Get(repo.WithByKey("SSLType"))

core/app/service/upgrade.go

@@ -53,7 +53,7 @@ func (u *UpgradeService) SearchUpgrade() (*dto.UpgradeInfo, error) {
 	if len(upgrade.NewVersion) != 0 {
 		itemVersion = upgrade.NewVersion
 	}
-	if (global.CONF.System.Mode == "dev" || DeveloperMode.Value == "enable") && len(upgrade.TestVersion) != 0 {
+	if (global.CONF.System.Mode == "dev" || DeveloperMode.Value == constant.StatusEnable) && len(upgrade.TestVersion) != 0 {
 		itemVersion = upgrade.TestVersion
 	}
 	if len(itemVersion) == 0 {
@@ -232,7 +232,7 @@ func (u *UpgradeService) loadVersionByMode(developer, currentVersion string) (st
 	betaVersionLatest := ""
 	latest = u.loadVersion(true, currentVersion, "stable")
 	current = u.loadVersion(false, currentVersion, "stable")
-	if developer == "enable" {
+	if developer == constant.StatusEnable {
 		betaVersionLatest = u.loadVersion(true, currentVersion, "beta")
 	}
 	if current != latest {

core/cmd/server/cmd/listen-ip.go

@@ -3,6 +3,7 @@ package cmd
 import (
 	"fmt"
 
+	"github.com/1Panel-dev/1Panel/core/constant"
 	"github.com/spf13/cobra"
 )
 
@@ -41,11 +42,11 @@ func updateBindInfo(protocol string) error {
 	if err != nil {
 		return err
 	}
-	ipv6 := "disable"
+	ipv6 := constant.StatusDisable
 	tcp := "tcp4"
 	address := "0.0.0.0"
 	if protocol == "ipv6" {
-		ipv6 = "enable"
+		ipv6 = constant.StatusEnable
 		tcp = "tcp6"
 		address = "::"
 	}

core/cmd/server/cmd/reset.go

@@ -3,6 +3,7 @@ package cmd
 import (
 	"fmt"
 
+	"github.com/1Panel-dev/1Panel/core/constant"
 	"github.com/spf13/cobra"
 )
 
@@ -33,7 +34,7 @@ var resetMFACmd = &cobra.Command{
 			return err
 		}
 
-		return setSettingByKey(db, "MFAStatus", "disable")
+		return setSettingByKey(db, "MFAStatus", constant.StatusDisable)
 	},
 }
 var resetSSLCmd = &cobra.Command{
@@ -49,7 +50,7 @@ var resetSSLCmd = &cobra.Command{
 			return err
 		}
 
-		return setSettingByKey(db, "SSL", "disable")
+		return setSettingByKey(db, "SSL", constant.StatusDisable)
 	},
 }
 var resetEntranceCmd = &cobra.Command{

core/cmd/server/cmd/update.go

@@ -9,6 +9,7 @@ import (
 	"strings"
 	"unicode"
 
+	"github.com/1Panel-dev/1Panel/core/constant"
 	"github.com/1Panel-dev/1Panel/core/global"
 	"github.com/1Panel-dev/1Panel/core/utils/cmd"
 	"github.com/1Panel-dev/1Panel/core/utils/common"
@@ -123,7 +124,7 @@ func password() {
 		return
 	}
 	complexSetting := getSettingByKey(db, "ComplexityVerification")
-	if complexSetting == "enable" {
+	if complexSetting == constant.StatusEnable {
 		if isValidPassword("newPassword") {
 			fmt.Println("\n错误：面板密码仅支持字母、数字、特殊字符（!@#$%*_,.?），长度 8-30 位！")
 			return

core/constant/common.go

@@ -17,9 +17,6 @@ const (
 	OrderDesc = "descending"
 	OrderAsc  = "ascending"
 
-	StatusEnable  = "Enable"
-	StatusDisable = "Disable"
-
 	// backup
 	S3          = "S3"
 	OSS         = "OSS"

core/constant/status.go

@@ -1,22 +1,24 @@
 package constant
 
 const (
-	StatusSuccess = "success"
+	StatusSuccess = "Success"
-	StatusFailed  = "failed"
+	StatusFailed  = "Failed"
 
 	// node
-	StatusWaiting     = "waiting"
+	StatusWaiting     = "Waiting"
-	StatusDownloading = "downloading"
+	StatusPacking     = "Packing"
-	StatusPacking     = "packing"
+	StatusSending     = "Sending"
-	StatusSending     = "sending"
+	StatusStarting    = "Starting"
-	StatusStarting    = "starting"
+	StatusHealthy     = "Healthy"
-	StatusHealthy     = "healthy"
+	StatusUnhealthy   = "Unhealthy"
-	StatusUnhealthy   = "unhealthy"
+	StatusUpgrading   = "Upgrading"
-	StatusUpgrading   = "upgrading"
+	StatusRunning     = "Running"
-	StatusRunning     = "running"
+	StatusFree        = "Free"
-	StatusFree        = "free"
+	StatusBound       = "Bound"
-	StatusBound       = "bound"
+	StatusExceptional = "Exceptional"
-	StatusExceptional = "exceptional"
+	StatusRetrying    = "Retrying"
-	StatusRetrying    = "retrying"
+	StatusLost        = "Lost"
-	StatusLost        = "lost"
+
+	StatusEnable  = "Enable"
+	StatusDisable = "Disable"
 )

core/init/migration/migrate.go

@@ -19,6 +19,7 @@ func Init() {
 		migrations.InitBackup,
 		migrations.InitGoogle,
 		migrations.AddTaskDB,
+		migrations.UpdateSettingStatus,
 	})
 	if err := m.Migrate(); err != nil {
 		global.LOG.Error(err)

core/init/migration/migrations/init.go

@@ -45,7 +45,7 @@ var InitSetting = &gormigrate.Migration{
 		if err := tx.Create(&model.Setting{Key: "Theme", Value: "light"}).Error; err != nil {
 			return err
 		}
-		if err := tx.Create(&model.Setting{Key: "MenuTabs", Value: "disable"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "MenuTabs", Value: constant.StatusDisable}).Error; err != nil {
 			return err
 		}
 		if err := tx.Create(&model.Setting{Key: "PanelName", Value: "1Panel"}).Error; err != nil {
@@ -64,11 +64,11 @@ var InitSetting = &gormigrate.Migration{
 		if err := tx.Create(&model.Setting{Key: "SSLID", Value: "0"}).Error; err != nil {
 			return err
 		}
-		if err := tx.Create(&model.Setting{Key: "SSL", Value: "disable"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "SSL", Value: constant.StatusDisable}).Error; err != nil {
 			return err
 		}
 
-		if err := tx.Create(&model.Setting{Key: "DeveloperMode", Value: "disable"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "DeveloperMode", Value: constant.StatusDisable}).Error; err != nil {
 			return err
 		}
 		if err := tx.Create(&model.Setting{Key: "ProxyType", Value: ""}).Error; err != nil {
@@ -111,10 +111,10 @@ var InitSetting = &gormigrate.Migration{
 		if err := tx.Create(&model.Setting{Key: "ExpirationDays", Value: "0"}).Error; err != nil {
 			return err
 		}
-		if err := tx.Create(&model.Setting{Key: "ComplexityVerification", Value: "enable"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "ComplexityVerification", Value: constant.StatusEnable}).Error; err != nil {
 			return err
 		}
-		if err := tx.Create(&model.Setting{Key: "MFAStatus", Value: "disable"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "MFAStatus", Value: constant.StatusDisable}).Error; err != nil {
 			return err
 		}
 		if err := tx.Create(&model.Setting{Key: "MFASecret", Value: ""}).Error; err != nil {
@@ -132,7 +132,7 @@ var InitSetting = &gormigrate.Migration{
 		if err := tx.Create(&model.Setting{Key: "BindAddress", Value: "0.0.0.0"}).Error; err != nil {
 			return err
 		}
-		if err := tx.Create(&model.Setting{Key: "Ipv6", Value: "disable"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "Ipv6", Value: constant.StatusDisable}).Error; err != nil {
 			return err
 		}
 		if err := tx.Create(&model.Setting{Key: "BindDomain", Value: ""}).Error; err != nil {
@@ -219,7 +219,7 @@ var InitTerminalSetting = &gormigrate.Migration{
 		if err := tx.Create(&model.Setting{Key: "FontSize", Value: "12"}).Error; err != nil {
 			return err
 		}
-		if err := tx.Create(&model.Setting{Key: "CursorBlink", Value: "enable"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "CursorBlink", Value: constant.StatusEnable}).Error; err != nil {
 			return err
 		}
 		if err := tx.Create(&model.Setting{Key: "CursorStyle", Value: "block"}).Error; err != nil {
@@ -270,3 +270,16 @@ var AddTaskDB = &gormigrate.Migration{
 		)
 	},
 }
+
+var UpdateSettingStatus = &gormigrate.Migration{
+	ID: "20241218-update-setting-status",
+	Migrate: func(tx *gorm.DB) error {
+		if err := tx.Model(model.Setting{}).Where("value = ?", "enable").Update("value", constant.StatusEnable).Error; err != nil {
+			return err
+		}
+		if err := tx.Model(model.Setting{}).Where("value = ?", "disable").Update("value", constant.StatusDisable).Error; err != nil {
+			return err
+		}
+		return nil
+	},
+}

core/middleware/session.go

@@ -38,7 +38,7 @@ func SessionAuth() gin.HandlerFunc {
 			global.LOG.Errorf("create operation record failed, err: %v", err)
 			return
 		}
-		_ = global.SESSION.Set(c, psession, httpsSetting.Value == "enable", lifeTime)
+		_ = global.SESSION.Set(c, psession, httpsSetting.Value == constant.StatusEnable, lifeTime)
 		c.Next()
 	}
 }

core/server/server.go

@@ -9,6 +9,7 @@ import (
 	"os"
 	"path"
 
+	"github.com/1Panel-dev/1Panel/core/constant"
 	"github.com/1Panel-dev/1Panel/core/global"
 	"github.com/1Panel-dev/1Panel/core/i18n"
 	"github.com/1Panel-dev/1Panel/core/init/cron"
@@ -42,7 +43,7 @@ func Start() {
 	rootRouter := router.Routers()
 
 	tcpItem := "tcp4"
-	if global.CONF.System.Ipv6 == "enable" {
+	if global.CONF.System.Ipv6 == constant.StatusEnable {
 		tcpItem = "tcp"
 		global.CONF.System.BindAddress = fmt.Sprintf("[%s]", global.CONF.System.BindAddress)
 	}
@@ -57,7 +58,7 @@ func Start() {
 	type tcpKeepAliveListener struct {
 		*net.TCPListener
 	}
-	if global.CONF.System.SSL == "enable" {
+	if global.CONF.System.SSL == constant.StatusEnable {
 		certPath := path.Join(global.CONF.System.BaseDir, "1panel/secret/server.crt")
 		keyPath := path.Join(global.CONF.System.BaseDir, "1panel/secret/server.key")
 		certificate, err := os.ReadFile(certPath)

frontend/src/api/interface/host.ts

@@ -61,7 +61,8 @@ export namespace Host {
 
     export interface FirewallBase {
         name: string;
-        status: string;
+        isExist: boolean;
+        isActive: boolean;
         version: string;
         pingStatus: string;
     }
@@ -148,7 +149,7 @@ export namespace Host {
 
     export interface SSHInfo {
         autoStart: boolean;
-        status: string;
+        isActive: boolean;
         message: string;
         port: string;
         listenAddress: string;

frontend/src/components/app-status/index.vue

@@ -4,7 +4,7 @@
             <div class="flex w-full flex-col gap-4 md:flex-row">
                 <div class="flex flex-wrap gap-4">
                     <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
-                    <Status :key="refresh" :status="data.status"></Status>
+                    <Status class="mt-0.5" :key="refresh" :status="data.status"></Status>
                     <el-tag>{{ $t('app.version') }}{{ data.version }}</el-tag>
                 </div>
 

frontend/src/components/status/index.vue

@@ -1,8 +1,22 @@
 <template>
-    <el-tag :type="getType(status)" round effect="light">
+    <el-tooltip v-if="msg" effect="dark" placement="bottom">
+        <template #content>
+            <div style="width: 300px; word-break: break-all">{{ msg }}</div>
+        </template>
+        <el-tag size="small" :type="getType(statusItem)" round effect="light">
+            <span class="flx-align-center">
+                {{ $t('commons.status.' + statusItem) }}
+                <el-icon v-if="loadingIcon(statusItem)" class="is-loading">
+                    <Loading />
+                </el-icon>
+            </span>
+        </el-tag>
+    </el-tooltip>
+
+    <el-tag size="small" v-else :type="getType(statusItem)" round effect="light">
         <span class="flx-align-center">
-            {{ $t('commons.status.' + status) }}
+            {{ $t('commons.status.' + statusItem) }}
-            <el-icon v-if="loadingIcon(status)" class="is-loading">
+            <el-icon v-if="loadingIcon(statusItem)" class="is-loading">
                 <Loading />
             </el-icon>
         </span>
@@ -10,15 +24,16 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
-    status: {
+    status: String,
-        type: String,
+    msg: String,
-        default: 'running',
+});
-    },
+
+const statusItem = computed(() => {
+    return props.status.toLowerCase() || '';
 });
-let status = ref('running');
 
 const getType = (status: string) => {
     if (status.includes('error') || status.includes('err')) {
@@ -26,14 +41,23 @@ const getType = (status: string) => {
     }
     switch (status) {
         case 'running':
+        case 'free':
+        case 'success':
+        case 'enable':
+        case 'done':
+        case 'healthy':
+        case 'used':
             return 'success';
         case 'stopped':
-            return 'danger';
+        case 'exceptional':
+        case 'disable':
         case 'unhealthy':
+            return 'danger';
         case 'paused':
         case 'exited':
         case 'dead':
         case 'removing':
+        case 'deleted':
             return 'warning';
         default:
             return 'primary';
@@ -52,13 +76,13 @@ const loadingStatus = [
     'removing',
     'applying',
     'uninstalling',
+    'downloading',
+    'packing',
+    'sending',
+    'waiting',
 ];
 
 const loadingIcon = (status: string): boolean => {
     return loadingStatus.indexOf(status) > -1;
 };
-
-onMounted(() => {
-    status.value = props.status.toLocaleLowerCase();
-});
 </script>

frontend/src/lang/modules/en.ts

@@ -12,6 +12,7 @@ const message = {
         false: 'false',
         example: 'e.g.:',
         fit2cloud: 'FIT2CLOUD',
+        colon: ': ',
         button: {
             prev: 'Previous',
             next: 'Next',
@@ -252,7 +253,6 @@ const message = {
             scanFailed: 'Incomplete',
             success: 'Success',
             waiting: 'Waiting',
-            waiting1: 'Waiting',
             failed: 'Failed',
             stopped: 'Stopped',
             error: 'Error',
@@ -277,7 +277,7 @@ const message = {
             deny: 'Denied',
             accept: 'Accepted',
             used: 'Used',
-            unUsed: 'Unused',
+            unused: 'Unused',
             starting: 'Starting',
             recreating: 'Recreating',
             creating: 'Creating',
@@ -289,6 +289,17 @@ const message = {
             syncerr: 'Error',
             uperr: 'Error',
             uninstalling: 'Uninstalling',
+            lost: 'Lost Contact',
+            bound: 'Bound',
+            exceptional: 'Exceptional',
+            free: 'Free',
+            enable: 'Enabled',
+            disable: 'Disabled',
+            deleted: 'Deleted',
+            downloading: 'Downloading',
+            packing: 'Packing',
+            sending: 'Sending',
+            healthy: 'Normal',
         },
         units: {
             second: 'Second',
@@ -1762,10 +1773,6 @@ const message = {
         expiresAt: 'Expiration Date',
         productName: 'Product Name',
         productStatus: 'Product Status',
-        lost: 'Lost Contact',
-        bound: 'Bound',
-        exceptional: 'Exceptional',
-        free: 'Free',
         lostHelper:
             'The license has reached the maximum number of retry attempts. Please manually click the sync button to ensure the professional version functions properly.',
         exceptionalHelper:

frontend/src/lang/modules/tw.ts

@@ -11,6 +11,7 @@ const message = {
         false: '否',
         example: '例：',
         fit2cloud: '飛致雲',
+        colon: '： ',
         button: {
             prev: '上一步',
             next: '下一步',
@@ -246,8 +247,7 @@ const message = {
             done: '已完成',
             scanFailed: '未完成',
             success: '成功',
-            waiting: '執行中',
+            waiting: '請等待',
-            waiting1: '等待中',
             failed: '失敗',
             stopped: '已停止',
             error: '失敗',
@@ -272,7 +272,7 @@ const message = {
             deny: '已屏蔽',
             accept: '已放行',
             used: '已使用',
-            unUsed: '未使用',
+            unused: '未使用',
             starting: '啟動中',
             recreating: '重建中',
             creating: '創建中',
@@ -284,6 +284,17 @@ const message = {
             syncerr: '失敗',
             uperr: '失败',
             uninstalling: '卸載中',
+            lost: '已失聯',
+            bound: '已綁定',
+            exceptional: '異常',
+            free: '空閒',
+            enable: '已啟用',
+            disable: '已停止',
+            deleted: '已刪除',
+            downloading: '下載中',
+            packing: '打包中',
+            sending: '下發中',
+            healthy: '正常',
         },
         units: {
             second: '秒',
@@ -1641,10 +1652,6 @@ const message = {
         expiresAt: '到期時間',
         productName: '產品名稱',
         productStatus: '產品狀態',
-        lost: '已失聯',
-        bound: '已綁定',
-        exceptional: '異常',
-        free: '空閒',
         lostHelper: '許可證已達到最大重試次數，請手動點擊同步按鈕，以確保專業版功能正常使用。',
         exceptionalHelper: '許可證同步驗證異常，請手動點擊同步按鈕，以確保專業版功能正常使用。',
         quickUpdate: '快速更新',

frontend/src/lang/modules/zh.ts

@@ -11,6 +11,7 @@ const message = {
         false: '否',
         example: '例：',
         fit2cloud: '飞致云',
+        colon: '： ',
         button: {
             prev: '上一步',
             next: '下一步',
@@ -246,8 +247,7 @@ const message = {
             done: '已完成',
             scanFailed: '未完成',
             success: '成功',
-            waiting: '执行中',
+            waiting: '请等待',
-            waiting1: '等待中',
             failed: '失败',
             stopped: '已停止',
             error: '失败',
@@ -272,7 +272,7 @@ const message = {
             deny: '已屏蔽',
             accept: '已放行',
             used: '已使用',
-            unUsed: '未使用',
+            unused: '未使用',
             starting: '启动中',
             recreating: '重建中',
             creating: '创建中',
@@ -284,6 +284,17 @@ const message = {
             syncerr: '失败',
             uperr: '失败',
             uninstalling: '卸载中',
+            lost: '已失联',
+            bound: '已绑定',
+            exceptional: '异常',
+            free: '空闲',
+            enable: '已启用',
+            disable: '已停止',
+            deleted: '已删除',
+            downloading: '下载中',
+            packing: '打包中',
+            sending: '下发中',
+            healthy: '正常',
         },
         units: {
             second: '秒',
@@ -1641,10 +1652,6 @@ const message = {
         expiresAt: '到期时间',
         productName: '产品名称',
         productStatus: '产品状态',
-        lost: '已失联',
-        bound: '已绑定',
-        exceptional: '异常',
-        free: '空闲',
         lostHelper: '许可证已达到最大重试次数，请手动点击同步按钮，以确保专业版功能正常使用。',
         exceptionalHelper: '许可证同步验证异常，请手动点击同步按钮，以确保专业版功能正常使用。',
         quickUpdate: '快速更新',

frontend/src/styles/common.scss

@@ -407,10 +407,6 @@ html {
     width: 200px !important;
 }
 
-.p-w-250 {
-    width: 250px !important;
-}
-
 .p-w-100 {
     width: 100px !important;
 }

frontend/src/utils/xpack.ts

@@ -55,7 +55,7 @@ export async function loadProductProFromDB() {
     if (!res || !res.data) {
         globalStore.isProductPro = false;
     } else {
-        globalStore.isProductPro = res.data.status === 'bound';
+        globalStore.isProductPro = res.data.status === 'Bound';
         if (globalStore.isProductPro) {
             globalStore.productProExpires = Number(res.data.productPro);
         }
@@ -68,7 +68,7 @@ export async function loadMasterProductProFromDB() {
     if (!res || !res.data) {
         globalStore.isMasterProductPro = false;
     } else {
-        globalStore.isMasterProductPro = res.data.status === 'bound';
+        globalStore.isMasterProductPro = res.data.status === 'Bound';
     }
     switchTheme();
     initFavicon();
@@ -83,7 +83,7 @@ export async function getXpackSettingForTheme() {
         initFavicon();
         return;
     }
-    globalStore.isMasterProductPro = res.data.status === 'bound';
+    globalStore.isMasterProductPro = res.data.status === 'Bound';
     if (!globalStore.isMasterProductPro) {
         globalStore.isMasterProductPro = false;
         resetXSetting();

frontend/src/views/container/compose/index.vue

@@ -13,8 +13,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="compose-refresh" @search="search()" />
             </template>
             <template #main>

frontend/src/views/container/image/index.vue

@@ -21,8 +21,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="image-refresh" @search="search()" />
             </template>
             <template #main>
@@ -36,12 +36,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.status')" prop="isUsed" width="100">
                         <template #default="{ row }">
-                            <el-tag icon="Select" v-if="row.isUsed" type="success">
+                            <Status :status="row.isUsed ? 'used' : 'unused'" />
-                                {{ $t('commons.status.used') }}
-                            </el-tag>
-                            <el-tag v-else type="info">
-                                {{ $t('commons.status.unUsed') }}
-                            </el-tag>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -154,10 +149,16 @@ const search = async () => {
         page: paginationConfig.currentPage,
         pageSize: paginationConfig.pageSize,
     };
-    await searchImage(repoSearch).then((res) => {
+    loading.value = true;
-        data.value = res.data.items || [];
+    await searchImage(repoSearch)
-        paginationConfig.total = res.data.total;
+        .then((res) => {
-    });
+            loading.value = false;
+            data.value = res.data.items || [];
+            paginationConfig.total = res.data.total;
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 const loadRepos = async () => {
     const res = await listImageRepo();

frontend/src/views/container/network/index.vue

@@ -15,8 +15,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="network-refresh" @search="search()" />
             </template>
             <template #main>

frontend/src/views/container/repo/index.vue

@@ -9,8 +9,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="repo-refresh" @search="search()" />
             </template>
             <template #main>
@@ -32,15 +32,7 @@
                     <el-table-column :label="$t('commons.table.protocol')" prop="protocol" min-width="60" fix />
                     <el-table-column :label="$t('commons.table.status')" prop="status" min-width="60" fix>
                         <template #default="{ row }">
-                            <el-tag v-if="row.status === 'Success'" type="success">
+                            <Status :status="row.status" :msg="row.message" />
-                                {{ $t('commons.status.success') }}
-                            </el-tag>
-                            <el-tooltip v-else effect="dark" placement="bottom">
-                                <template #content>
-                                    <div style="width: 300px; word-break: break-all">{{ row.message }}</div>
-                                </template>
-                                <el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
-                            </el-tooltip>
                         </template>
                     </el-table-column>
                     <el-table-column

frontend/src/views/container/setting/index.vue

@@ -5,12 +5,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-tag class="float-left" effect="dark" type="success">Docker</el-tag>
-                        <el-tag round v-if="form.status === 'Running'" type="success">
+                        <Status class="mt-0.5" :status="form.status" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-tag round v-if="form.status === 'Stopped'" type="info">
-                            {{ $t('commons.status.stopped') }}
-                        </el-tag>
                         <el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
                     </div>
                     <div class="mt-0.5" v-if="form.status === 'Running'">

frontend/src/views/container/template/index.vue

@@ -12,8 +12,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="template-refresh" @search="search()" />
             </template>
             <template #main>

frontend/src/views/container/volume/index.vue

@@ -15,8 +15,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="volume-refresh" @search="search()" />
             </template>
             <template #main>

frontend/src/views/cronjob/index.vue

@@ -26,8 +26,8 @@
                 </el-button-group>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="cronjob-refresh" @search="search()" />
             </template>
             <template #main>
@@ -54,24 +54,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.status')" :min-width="80" prop="status" sortable>
                         <template #default="{ row }">
-                            <el-button
+                            <Status
                                 v-if="row.status === 'Enable'"
                                 @click="onChangeStatus(row.id, 'disable')"
-                                link
+                                :status="row.status"
-                                icon="VideoPlay"
+                            />
-                                type="success"
+                            <Status v-else @click="onChangeStatus(row.id, 'enable')" :status="row.status" />
-                            >
-                                {{ $t('commons.button.enable') }}
-                            </el-button>
-                            <el-button
-                                v-else
-                                icon="VideoPause"
-                                link
-                                type="danger"
-                                @click="onChangeStatus(row.id, 'enable')"
-                            >
-                                {{ $t('commons.button.disable') }}
-                            </el-button>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('cronjob.cronSpec')" show-overflow-tooltip :min-width="120">

frontend/src/views/cronjob/record/index.vue

@@ -27,12 +27,7 @@
                             {{ $t('cronjob.' + dialogData.rowData.type) }} - {{ dialogData.rowData.name }}
                         </el-tag>
 
-                        <el-tag v-if="dialogData.rowData.status === 'Enable'" round type="success">
+                        <Status class="mt-0.5" :status="dialogData.rowData.status" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-tag v-if="dialogData.rowData.status === 'Disable'" round type="info">
-                            {{ $t('commons.status.stopped') }}
-                        </el-tag>
                     </div>
                     <div class="mt-0.5">
                         <el-button type="primary" @click="onHandle(dialogData.rowData)" link>
@@ -99,15 +94,7 @@
                                     <el-table-column>
                                         <template #default="{ row }">
                                             <span v-if="row.id === currentRecord.id" class="select-sign"></span>
-                                            <el-tag v-if="row.status === 'Success'" type="success">
+                                            <Status :status="row.status" />
-                                                {{ $t('commons.status.success') }}
-                                            </el-tag>
-                                            <el-tag v-if="row.status === 'Waiting'" type="info">
-                                                {{ $t('commons.status.waiting') }}
-                                            </el-tag>
-                                            <el-tag v-if="row.status === 'Failed'" type="danger">
-                                                {{ $t('commons.status.failed') }}
-                                            </el-tag>
                                             <span>
                                                 {{ row.startTime }}
                                             </span>

frontend/src/views/database/mysql/index.vue

@@ -64,7 +64,7 @@
                 </el-dropdown>
             </template>
             <template #rightToolBar>
-                <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-250" v-if="currentDB">
+                <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200" v-if="currentDB">
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">

frontend/src/views/database/postgresql/index.vue

@@ -47,7 +47,7 @@
                 <el-button @click="goDashboard()" type="primary" plain>PGAdmin4</el-button>
             </template>
             <template #rightToolBar>
-                <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-250" v-if="currentDB">
+                <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200" v-if="currentDB">
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">

frontend/src/views/host/firewall/forward/index.vue

@@ -27,8 +27,8 @@
                         </el-button>
                     </template>
                     <template #rightToolBar>
-                        <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                        <TableRefresh @search="search()" class="mr-2.5" />
+                        <TableRefresh @search="search()" />
                         <TableSetting title="firewall-forward-refresh" @search="search()" />
                     </template>
                     <template #main>

frontend/src/views/host/firewall/ip/index.vue

@@ -34,8 +34,8 @@
                             <el-option :label="$t('firewall.allow')" value="accept"></el-option>
                             <el-option :label="$t('firewall.deny')" value="drop"></el-option>
                         </el-select>
-                        <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                        <TableRefresh @search="search()" class="mr-2.5" />
+                        <TableRefresh @search="search()" />
                         <TableSetting title="firewall-ip-refresh" @search="search()" />
                     </template>
                     <template #main>

frontend/src/views/host/firewall/port/index.vue

@@ -56,8 +56,8 @@
                             <el-option :label="$t('firewall.accept')" value="accept"></el-option>
                             <el-option :label="$t('firewall.drop')" value="drop"></el-option>
                         </el-select>
-                        <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                        <TableRefresh @search="search()" class="mr-2.5" />
+                        <TableRefresh @search="search()" />
                         <TableSetting title="firewall-port-refresh" @search="search()" />
                     </template>
                     <template #main>

frontend/src/views/host/firewall/status/index.vue

@@ -5,12 +5,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
-                        <el-tag round v-if="baseInfo.isActive" type="success">
+                        <Status class="mt-0.5" :status="baseInfo.isActive ? 'enable' : 'disable'" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-tag round v-if="!baseInfo.isActive" type="info">
-                            {{ $t('commons.status.stopped') }}
-                        </el-tag>
                         <el-tag>{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">
@@ -67,7 +62,7 @@ const loadBaseInfo = async (search: boolean) => {
             onPing.value = baseInfo.value.pingStatus;
             oldStatus.value = onPing.value;
             emit('update:name', baseInfo.value.name);
-            emit('update:is-active', baseInfo.value.status);
+            emit('update:is-active', baseInfo.value.isActive);
             if (search) {
                 emit('search');
             } else {

frontend/src/views/host/ssh/log/log.vue

@@ -12,8 +12,8 @@
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
-                <TableSearch @search="search()" v-model:searchName="searchInfo" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchInfo" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="ssh-log-refresh" @search="search()" />
             </template>
 

frontend/src/views/host/ssh/ssh/index.vue

@@ -7,22 +7,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-tag class="float-left" effect="dark" type="success">SSH</el-tag>
-                        <el-tag round v-if="form.isActive" type="success">
+                        <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" :msg="form.message" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-popover
-                            v-if="!form.isActive"
-                            placement="top-start"
-                            trigger="hover"
-                            width="450"
-                            :content="form.message"
-                        >
-                            <template #reference>
-                                <el-tag round v-if="!form.isActive" type="info">
-                                    {{ $t('commons.status.stopped') }}
-                                </el-tag>
-                            </template>
-                        </el-popover>
                     </div>
                     <div class="mt-0.5">
                         <el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>

frontend/src/views/log/login/index.vue

@@ -16,8 +16,8 @@
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
-                <TableSearch @search="search()" v-model:searchName="searchIP" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchIP" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="login-log-refresh" @search="search()" />
             </template>
             <template #main>
@@ -27,14 +27,7 @@
                     <el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
                     <el-table-column :label="$t('logs.loginStatus')" prop="status">
                         <template #default="{ row }">
-                            <div v-if="row.status === 'Success'">
+                            <Status :status="row.status" :msg="row.message" />
-                                <el-tag type="success">{{ $t('commons.status.success') }}</el-tag>
-                            </div>
-                            <div v-else>
-                                <el-tooltip class="box-item" effect="dark" :content="row.message" placement="top-start">
-                                    <el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
-                                </el-tooltip>
-                            </div>
                         </template>
                     </el-table-column>
                     <el-table-column

frontend/src/views/log/operation/index.vue

@@ -31,8 +31,8 @@
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="operation-log-refresh" @search="search()" />
             </template>
             <template #main>
@@ -55,22 +55,7 @@
 
                     <el-table-column :label="$t('commons.table.status')" prop="status">
                         <template #default="{ row }">
-                            <el-tag v-if="row.status === 'Success'" class="ml-2" type="success">
+                            <Status :status="row.status" :msg="row.message" />
-                                {{ $t('commons.status.success') }}
-                            </el-tag>
-                            <div v-else>
-                                <el-popover
-                                    placement="top-start"
-                                    :title="$t('commons.table.message')"
-                                    :width="400"
-                                    trigger="hover"
-                                    :content="row.message"
-                                >
-                                    <template #reference>
-                                        <el-tag class="ml-2" type="danger">{{ $t('commons.status.failed') }}</el-tag>
-                                    </template>
-                                </el-popover>
-                            </div>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -147,78 +132,38 @@ const onClean = async () => {
 };
 
 const loadDetail = (log: string) => {
-    if (log.indexOf('[enable]') !== -1) {
+    for (const [key, value] of Object.entries(replacements)) {
-        log = log.replace('[enable]', '[' + i18n.global.t('commons.button.enable') + ']');
+        if (log.indexOf(key) !== -1) {
-    }
+            log = log.replace(key, '[' + i18n.global.t(value) + ']');
-    if (log.indexOf('[Enable]') !== -1) {
+        }
-        log = log.replace('[Enable]', '[' + i18n.global.t('commons.button.enable') + ']');
-    }
-    if (log.indexOf('[disable]') !== -1) {
-        log = log.replace('[disable]', '[' + i18n.global.t('commons.button.disable') + ']');
-    }
-    if (log.indexOf('[Disable]') !== -1) {
-        log = log.replace('[Disable]', '[' + i18n.global.t('commons.button.disable') + ']');
-    }
-    if (log.indexOf('[light]') !== -1) {
-        log = log.replace('[light]', '[' + i18n.global.t('setting.light') + ']');
-    }
-    if (log.indexOf('[dark]') !== -1) {
-        log = log.replace('[dark]', '[' + i18n.global.t('setting.dark') + ']');
-    }
-    if (log.indexOf('[delete]') !== -1) {
-        log = log.replace('[delete]', '[' + i18n.global.t('commons.button.delete') + ']');
-    }
-    if (log.indexOf('[get]') !== -1) {
-        log = log.replace('[get]', '[' + i18n.global.t('commons.button.get') + ']');
-    }
-    if (log.indexOf('[operate]') !== -1) {
-        log = log.replace('[operate]', '[' + i18n.global.t('commons.table.operate') + ']');
-    }
-    if (log.indexOf('[UserName]') !== -1) {
-        return log.replace('[UserName]', '[' + i18n.global.t('commons.login.username') + ']');
-    }
-    if (log.indexOf('[PanelName]') !== -1) {
-        return log.replace('[PanelName]', '[' + i18n.global.t('setting.title') + ']');
-    }
-    if (log.indexOf('[Language]') !== -1) {
-        return log.replace('[Language]', '[' + i18n.global.t('setting.language') + ']');
-    }
-    if (log.indexOf('[Theme]') !== -1) {
-        return log.replace('[Theme]', '[' + i18n.global.t('setting.theme') + ']');
-    }
-    if (log.indexOf('[MenuTabs]') !== -1) {
-        return log.replace('[MenuTabs]', '[' + i18n.global.t('setting.menuTabs') + ']');
-    }
-    if (log.indexOf('[SessionTimeout]') !== -1) {
-        return log.replace('[SessionTimeout]', '[' + i18n.global.t('setting.sessionTimeout') + ']');
-    }
-    if (log.indexOf('SecurityEntrance') !== -1) {
-        return log.replace('[SecurityEntrance]', '[' + i18n.global.t('setting.entrance') + ']');
-    }
-    if (log.indexOf('[ExpirationDays]') !== -1) {
-        return log.replace('[ExpirationDays]', '[' + i18n.global.t('setting.expirationTime') + ']');
-    }
-    if (log.indexOf('[ComplexityVerification]') !== -1) {
-        return log.replace('[ComplexityVerification]', '[' + i18n.global.t('setting.complexity') + ']');
-    }
-    if (log.indexOf('[MFAStatus]') !== -1) {
-        return log.replace('[MFAStatus]', '[' + i18n.global.t('setting.mfa') + ']');
-    }
-    if (log.indexOf('[MonitorStatus]') !== -1) {
-        return log.replace('[MonitorStatus]', '[' + i18n.global.t('monitor.enableMonitor') + ']');
-    }
-    if (log.indexOf('[MonitorStoreDays]') !== -1) {
-        return log.replace('[MonitorStoreDays]', '[' + i18n.global.t('setting.monitor') + ']');
-    }
-    if (log.indexOf('[MonitorStoreDays]') !== -1) {
-        return log.replace('[MonitorStoreDays]', '[' + i18n.global.t('setting.monitor') + ']');
-    }
-    if (log.indexOf('[MonitorStoreDays]') !== -1) {
-        return log.replace('[MonitorStoreDays]', '[' + i18n.global.t('setting.monitor') + ']');
     }
     return log;
 };
 
+const replacements = {
+    '[enable]': 'commons.button.enable',
+    '[Enable]': 'commons.button.enable',
+    '[disable]': 'commons.button.disable',
+    '[Disable]': 'commons.button.disable',
+    '[light]': 'setting.light',
+    '[dark]': 'setting.dark',
+    '[delete]': 'commons.button.delete',
+    '[get]': 'commons.button.get',
+    '[operate]': 'commons.table.operate',
+    '[UserName]': 'commons.button.username',
+    '[PanelName]': 'setting.title',
+    '[Language]': 'setting.language',
+    '[Theme]': 'setting.theme',
+    '[MenuTabs]': 'setting.menuTabs',
+    '[SessionTimeout]': 'setting.sessionTimeout',
+    '[SecurityEntrance]': 'setting.entrance',
+    '[ExpirationDays]': 'setting.expirationTime',
+    '[ComplexityVerification]': 'setting.complexity',
+    '[MFAStatus]': 'setting.mfa',
+    '[MonitorStatus]': 'setting.enableMonitor',
+    '[MonitorStoreDays]': 'setting.monitor',
+};
+
 const onSubmitClean = async () => {
     await cleanLogs({ logType: 'operation' });
     search();

frontend/src/views/log/task/index.vue

@@ -12,7 +12,7 @@
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                     <el-option :label="$t('logs.taskRunning')" value="Running"></el-option>
                 </el-select>
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="task-log-refresh" @search="search()" />
             </template>
             <template #main>
@@ -21,22 +21,7 @@
                     <el-table-column :label="$t('commons.table.type')" prop="type" />
                     <el-table-column :label="$t('commons.table.status')" prop="status">
                         <template #default="{ row }">
-                            <div v-if="row.status === 'Success'">
+                            <Status :status="row.status" :msg="row.errorMsg" />
-                                <el-tag type="success">{{ $t('commons.status.success') }}</el-tag>
-                            </div>
-                            <div v-else-if="row.status === 'Running'">
-                                <el-tag type="primary">{{ $t('process.running') }}</el-tag>
-                            </div>
-                            <div v-else>
-                                <el-tooltip
-                                    class="box-item"
-                                    effect="dark"
-                                    :content="row.errorMsg"
-                                    placement="top-start"
-                                >
-                                    <el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
-                                </el-tooltip>
-                            </div>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('website.log')" prop="log">

frontend/src/views/setting/backup-account/index.vue

@@ -7,8 +7,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="paginationConfig.name" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="paginationConfig.name" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="backup-account-refresh" @search="search()" />
             </template>
             <template #main>

frontend/src/views/setting/license/index.vue

@@ -27,29 +27,14 @@
                     <el-table-column :label="$t('commons.table.status')" prop="status" show-overflow-tooltip>
                         <template #default="{ row }">
                             <div v-if="row.status">
-                                <el-tooltip
+                                <Status :status="row.status" :msg="loadMsg(row.status)"></Status>
-                                    v-if="row.status === 'exceptional'"
-                                    :content="$t('license.exceptionalHelper')"
-                                >
-                                    <el-tag type="danger">
-                                        {{ $t('license.' + row.status) }}
-                                    </el-tag>
-                                </el-tooltip>
-                                <el-tooltip v-if="row.status === 'lost'" :content="$t('license.lostHelper')">
-                                    <el-tag type="info">
-                                        {{ $t('license.' + row.status) }}
-                                    </el-tag>
-                                </el-tooltip>
-                                <el-tag v-if="row.status !== 'exceptional' && row.status !== 'lost'">
-                                    {{ $t('license.' + row.status) }}
-                                </el-tag>
                             </div>
                             <span v-else>-</span>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('setting.bindNode')">
                         <template #default="{ row }">
-                            <span v-if="row.freeCount !== 0 && (row.status === 'free' || row.status === 'exceptional')">
+                            <span v-if="row.freeCount !== 0 && (row.status === 'Free' || row.status === 'Exceptional')">
                                 -
                             </span>
                             <div v-else>
@@ -125,6 +110,16 @@ const paginationConfig = reactive({
     name: '',
 });
 
+const loadMsg = (status: string) => {
+    if (status === 'Exceptional') {
+        return i18n.global.t('license.exceptionalHelper');
+    }
+    if (status === 'Lost') {
+        return i18n.global.t('license.lostHelper');
+    }
+    return '';
+};
+
 const onSync = async (row: any) => {
     loading.value = true;
     await syncLicense(row.id)
@@ -219,7 +214,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.unbind'),
         disabled: (row: any) => {
-            return row.status === 'free';
+            return row.status === 'Free';
         },
         click: (row: any) => {
             if (row.freeCount != 0) {

frontend/src/views/setting/panel/index.vue

@@ -45,10 +45,10 @@
 
                             <el-form-item :label="$t('setting.menuTabs')" prop="menuTabs">
                                 <el-radio-group @change="onSave('MenuTabs', form.menuTabs)" v-model="form.menuTabs">
-                                    <el-radio-button value="enable">
+                                    <el-radio-button value="Enable">
                                         <span>{{ $t('commons.button.enable') }}</span>
                                     </el-radio-button>
-                                    <el-radio-button value="disable">
+                                    <el-radio-button value="Disable">
                                         <span>{{ $t('commons.button.disable') }}</span>
                                     </el-radio-button>
                                 </el-radio-group>
@@ -104,10 +104,10 @@
                                     @change="onSave('DeveloperMode', form.developerMode)"
                                     v-model="form.developerMode"
                                 >
-                                    <el-radio-button value="enable">
+                                    <el-radio-button value="Enable">
                                         <span>{{ $t('commons.button.enable') }}</span>
                                     </el-radio-button>
-                                    <el-radio-button value="disable">
+                                    <el-radio-button value="Disable">
                                         <span>{{ $t('commons.button.disable') }}</span>
                                     </el-radio-button>
                                 </el-radio-group>
@@ -326,7 +326,7 @@ const onSave = async (key: string, val: any) => {
         }
     }
     if (key === 'MenuTabs') {
-        globalStore.setOpenMenuTabs(val === 'enable');
+        globalStore.setOpenMenuTabs(val === 'Enable');
     }
     let param = {
         key: key,

frontend/src/views/setting/safe/index.vue

@@ -107,11 +107,11 @@
                                 <el-switch
                                     @change="handleSSL"
                                     v-model="form.ssl"
-                                    active-value="enable"
+                                    active-value="Enable"
-                                    inactive-value="disable"
+                                    inactive-value="Disable"
                                 />
                                 <span class="input-help">{{ $t('setting.https') }}</span>
-                                <div v-if="form.ssl === 'enable' && sslInfo">
+                                <div v-if="form.ssl === 'Enable' && sslInfo">
                                     <el-tag>{{ $t('setting.domainOrIP') }} {{ sslInfo.domain }}</el-tag>
                                     <el-tag style="margin-left: 5px">
                                         {{ $t('setting.timeOut') }} {{ sslInfo.timeout }}
@@ -145,8 +145,8 @@
                                 <el-switch
                                     @change="onSaveComplexity"
                                     v-model="form.complexityVerification"
-                                    active-value="enable"
+                                    active-value="Enable"
-                                    inactive-value="disable"
+                                    inactive-value="Disable"
                                 />
                                 <span class="input-help">
                                     {{ $t('setting.complexityHelper') }}
@@ -157,8 +157,8 @@
                                 <el-switch
                                     @change="handleMFA"
                                     v-model="form.mfaStatus"
-                                    active-value="enable"
+                                    active-value="Enable"
-                                    inactive-value="disable"
+                                    inactive-value="Disable"
                                 />
                                 <span class="input-help">
                                     {{ $t('setting.mfaHelper') }}
@@ -219,15 +219,15 @@ const mobile = computed(() => {
 
 const form = reactive({
     serverPort: 9999,
-    ipv6: 'disable',
+    ipv6: 'Disable',
     bindAddress: '',
-    ssl: 'disable',
+    ssl: 'Disable',
     sslType: 'self',
     securityEntrance: '',
     expirationDays: 0,
     expirationTime: '',
-    complexityVerification: 'disable',
+    complexityVerification: 'Disable',
-    mfaStatus: 'disable',
+    mfaStatus: 'Disable',
     mfaInterval: 30,
     allowIPs: '',
     bindDomain: '',
@@ -244,7 +244,7 @@ const search = async () => {
     form.bindAddress = res.data.bindAddress;
     form.ssl = res.data.ssl;
     form.sslType = res.data.sslType;
-    if (form.ssl === 'enable') {
+    if (form.ssl === 'Enable') {
         loadInfo();
     }
     form.securityEntrance = res.data.securityEntrance;
@@ -281,7 +281,7 @@ const onSaveComplexity = async () => {
 };
 
 const handleMFA = async () => {
-    if (form.mfaStatus === 'enable') {
+    if (form.mfaStatus === 'Enable') {
         mfaRef.value.acceptParams({ interval: form.mfaInterval });
         return;
     }
@@ -290,7 +290,7 @@ const handleMFA = async () => {
         cancelButtonText: i18n.global.t('commons.button.cancel'),
     }).then(async () => {
         loading.value = true;
-        await updateSetting({ key: 'MFAStatus', value: 'disable' })
+        await updateSetting({ key: 'MFAStatus', value: 'Disable' })
             .then(() => {
                 loading.value = false;
                 search();
@@ -321,7 +321,7 @@ const onChangeAllowIPs = () => {
     allowIPsRef.value.acceptParams({ allowIPs: form.allowIPs });
 };
 const handleSSL = async () => {
-    if (form.ssl === 'enable') {
+    if (form.ssl === 'Enable') {
         let params = {
             ssl: form.ssl,
             sslType: form.sslType,
@@ -336,7 +336,7 @@ const handleSSL = async () => {
         type: 'info',
     })
         .then(async () => {
-            await updateSSL({ ssl: 'disable', domain: '', sslType: form.sslType, key: '', cert: '', sslID: 0 });
+            await updateSSL({ ssl: 'Disable', domain: '', sslType: form.sslType, key: '', cert: '', sslID: 0 });
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             let href = window.location.href;
             globalStore.isLogin = false;
@@ -349,7 +349,7 @@ const handleSSL = async () => {
             window.location.href = `http://${address}`;
         })
         .catch(() => {
-            form.ssl = 'enable';
+            form.ssl = 'Enable';
         });
 };
 

frontend/src/views/setting/snapshot/index.vue

@@ -16,8 +16,8 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableRefresh @search="search()" />
                 <TableSetting title="snapshot-refresh" ref="timerRef" @search="search()" />
             </template>
             <template #main>

frontend/src/views/toolbox/clam/index.vue

@@ -75,24 +75,16 @@
                         sortable
                     >
                         <template #default="{ row }">
-                            <el-button
+                            <Status
                                 v-if="row.status === 'Enable'"
+                                :status="row.status"
                                 @click="onChangeStatus(row.id, 'disable')"
-                                link
+                            />
-                                icon="VideoPlay"
+                            <Status
-                                type="success"
-                            >
-                                {{ $t('commons.status.enabled') }}
-                            </el-button>
-                            <el-button
                                 v-if="row.status === 'Disable'"
-                                icon="VideoPause"
+                                :status="row.status"
-                                link
-                                type="danger"
                                 @click="onChangeStatus(row.id, 'enable')"
-                            >
+                            />
-                                {{ $t('commons.status.disabled') }}
-                            </el-button>
                             <span v-if="row.status === ''">-</span>
                         </template>
                     </el-table-column>

frontend/src/views/toolbox/clam/record/index.vue

@@ -73,12 +73,7 @@
                                     <el-table-column>
                                         <template #default="{ row }">
                                             <span v-if="row.name === currentRecord.name" class="select-sign"></span>
-                                            <el-tag v-if="row.status === 'Done'" type="success">
+                                            <Status :status="row.status" />
-                                                {{ $t('commons.status.done') }}
-                                            </el-tag>
-                                            <el-tag v-if="row.status === 'Waiting'" type="info">
-                                                {{ $t('commons.status.scanFailed') }}
-                                            </el-tag>
                                             <span>
                                                 {{ row.name }}
                                             </span>

frontend/src/views/toolbox/clam/status/index.vue

@@ -5,12 +5,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-tag class="w-17" effect="dark" type="success">ClamAV</el-tag>
-                        <el-tag round v-if="data.isActive" type="success">
+                        <Status class="mt-0.5" :status="data.isActive ? 'enable' : 'disable'" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-tag round v-if="!data.isActive" type="info">
-                            {{ $t('commons.status.stopped') }}
-                        </el-tag>
                         <el-tag class="w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">
@@ -40,12 +35,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row mt-5" v-if="showFresh">
                     <div class="flex flex-wrap gap-4">
                         <el-tag class="w-16" effect="dark" type="success">FreshClam</el-tag>
-                        <el-tag round v-if="data.freshIsActive" type="success">
+                        <Status class="mt-0.5" :status="data.freshIsActive ? 'enable' : 'disable'" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-tag round v-if="!data.freshIsActive" type="info">
-                            {{ $t('commons.status.stopped') }}
-                        </el-tag>
                         <el-tag class="w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>
                     </div>
                     <div class="mt-0.5">

frontend/src/views/toolbox/fail2ban/index.vue

@@ -5,12 +5,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-tag effect="dark" type="success">Fail2ban</el-tag>
-                        <el-tag round v-if="form.isActive" type="success">
+                        <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-tag round v-if="!form.isActive" type="info">
-                            {{ $t('commons.status.stopped') }}
-                        </el-tag>
                         <el-tag>{{ form.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">

frontend/src/views/toolbox/ftp/index.vue

@@ -5,12 +5,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-tag effect="dark" type="success">FTP</el-tag>
-                        <el-tag round v-if="form.isActive" type="success">
+                        <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" />
-                            {{ $t('commons.status.running') }}
-                        </el-tag>
-                        <el-tag round v-if="!form.isActive" type="info">
-                            {{ $t('commons.status.stopped') }}
-                        </el-tag>
                     </div>
                     <div class="mt-0.5">
                         <el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
@@ -92,27 +87,17 @@
                         </el-table-column>
                         <el-table-column :label="$t('commons.table.status')" :min-width="60" prop="status">
                             <template #default="{ row }">
-                                <el-tag v-if="row.status === 'deleted'" type="info">
+                                <Status v-if="row.status === 'Deleted'" :status="row.status" />
-                                    {{ $t('database.isDelete') }}
+                                <Status
-                                </el-tag>
-                                <el-button
                                     v-if="row.status === 'Enable'"
+                                    :status="row.status"
                                     @click="onChangeStatus(row, 'disable')"
-                                    link
+                                />
-                                    icon="VideoPlay"
+                                <Status
-                                    type="success"
-                                >
-                                    {{ $t('commons.status.enabled') }}
-                                </el-button>
-                                <el-button
                                     v-if="row.status === 'Disable'"
-                                    icon="VideoPause"
+                                    :status="row.status"
                                     @click="onChangeStatus(row, 'enable')"
-                                    link
+                                />
-                                    type="danger"
-                                >
-                                    {{ $t('commons.status.disabled') }}
-                                </el-button>
                             </template>
                         </el-table-column>
                         <el-table-column :label="$t('file.root')" :min-width="120" prop="path" show-overflow-tooltip>

frontend/src/views/toolbox/ftp/log/index.vue

@@ -9,8 +9,7 @@
             <el-table-column label="ip" prop="ip" show-overflow-tooltip />
             <el-table-column :label="$t('commons.table.status')" min-width="50" show-overflow-tooltip prop="status">
                 <template #default="{ row }">
-                    <el-tag v-if="row.status === '200'">{{ $t('commons.status.success') }}</el-tag>
+                    <Status :status="row.status === '200' ? 'success' : 'failed'" />
-                    <el-tag v-else type="danger">{{ $t('commons.status.failed') }}</el-tag>
                 </template>
             </el-table-column>
             <el-table-column :label="$t('commons.table.operate')" min-width="40" show-overflow-tooltip>

frontend/src/views/toolbox/supervisor/index.vue

@@ -60,33 +60,17 @@
                     <el-table-column :label="$t('tool.supervisor.manage')" min-width="80px">
                         <template #default="{ row }">
                             <div v-if="row.status && row.status.length > 0 && row.hasLoad">
-                                <el-button
+                                <Status
                                     v-if="checkStatus(row.status) === 'RUNNING'"
-                                    link
+                                    status="running"
-                                    type="success"
-                                    :icon="VideoPlay"
                                     @click="operate('stop', row.name)"
-                                >
+                                />
-                                    {{ $t('commons.status.running') }}
+                                <Status
-                                </el-button>
-                                <el-button
                                     v-else-if="checkStatus(row.status) === 'WARNING'"
-                                    link
+                                    status="unhealthy"
-                                    type="warning"
-                                    :icon="RefreshRight"
                                     @click="operate('restart', row.name)"
-                                >
+                                />
-                                    {{ $t('commons.status.unhealthy') }}
+                                <Status v-else status="stopped" @click="operate('start', row.name)" />
-                                </el-button>
-                                <el-button
-                                    v-else
-                                    link
-                                    type="danger"
-                                    :icon="VideoPause"
-                                    @click="operate('start', row.name)"
-                                >
-                                    {{ $t('commons.status.stopped') }}
-                                </el-button>
                             </div>
                             <div v-if="!row.hasLoad">
                                 <el-button link loading></el-button>
@@ -166,7 +150,6 @@ import { GlobalStore } from '@/store';
 import i18n from '@/lang';
 import { HostTool } from '@/api/interface/host-tool';
 import { MsgSuccess } from '@/utils/message';
-import { VideoPlay, VideoPause, RefreshRight } from '@element-plus/icons-vue';
 import router from '@/routers';
 const globalStore = GlobalStore();
 

frontend/src/views/toolbox/supervisor/status/index.vue

@@ -5,7 +5,7 @@
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-tag effect="dark" type="success">{{ 'Supervisor' }}</el-tag>
-                        <Status :key="data.status" :status="data.status"></Status>
+                        <Status class="mt-0.5" :key="data.status" :status="data.status"></Status>
                         <el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
                     </div>
                     <div class="mt-0.5" v-if="!data.init">

frontend/src/views/website/runtime/php/supervisor/index.vue

@@ -42,27 +42,17 @@
                 <el-table-column :label="$t('tool.supervisor.manage')" min-width="80px">
                     <template #default="{ row }">
                         <div v-if="row.status && row.status.length > 0 && row.hasLoad">
-                            <el-button
+                            <Status
                                 v-if="checkStatus(row.status) === 'RUNNING'"
-                                link
+                                status="running"
-                                type="success"
-                                :icon="VideoPlay"
                                 @click="operate('stop', row.name)"
-                            >
+                            />
-                                {{ $t('commons.status.running') }}
+                            <Status
-                            </el-button>
-                            <el-button
                                 v-else-if="checkStatus(row.status) === 'WARNING'"
-                                link
+                                status="unhealthy"
-                                type="warning"
-                                :icon="RefreshRight"
                                 @click="operate('restart', row.name)"
-                            >
+                            />
-                                {{ $t('commons.status.unhealthy') }}
+                            <Status v-else status="stopped" @click="operate('start', row.name)" />
-                            </el-button>
-                            <el-button v-else link type="danger" :icon="VideoPause" @click="operate('start', row.name)">
-                                {{ $t('commons.status.stopped') }}
-                            </el-button>
                         </div>
                         <div v-if="!row.hasLoad">
                             <el-button link loading></el-button>
@@ -138,7 +128,6 @@ import { GlobalStore } from '@/store';
 import i18n from '@/lang';
 import { HostTool } from '@/api/interface/host-tool';
 import { MsgSuccess } from '@/utils/message';
-import { VideoPlay, VideoPause, RefreshRight } from '@element-plus/icons-vue';
 const globalStore = GlobalStore();
 
 const loading = ref(false);

frontend/src/views/website/website/config/basic/proxy/index.vue

@@ -14,12 +14,7 @@
         </el-table-column>
         <el-table-column :label="$t('commons.table.status')" prop="enable">
             <template #default="{ row }">
-                <el-button v-if="row.enable" link type="success" :icon="VideoPlay" @click="opProxy(row)">
+                <Status :status="row.enable ? 'enable' : 'disable'" @click="opProxy(row)" />
-                    {{ $t('commons.status.running') }}
-                </el-button>
-                <el-button v-else link type="danger" :icon="VideoPause" @click="opProxy(row)">
-                    {{ $t('commons.status.stopped') }}
-                </el-button>
             </template>
         </el-table-column>
         <fu-table-operations
@@ -42,7 +37,6 @@
 import { Website } from '@/api/interface/website';
 import { OperateProxyConfig, GetProxyConfig } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
-import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
@@ -112,6 +106,7 @@ const initData = (id: number): Website.ProxyConfig => ({
     proxyPass: 'http://',
     proxyHost: '$host',
     replaces: {},
+    proxySSLName: '',
 });
 
 const openCreate = () => {

frontend/src/views/website/website/config/basic/redirect/index.vue

@@ -30,12 +30,7 @@
         </el-table-column>
         <el-table-column :label="$t('commons.table.status')" prop="enable" min-width="50px">
             <template #default="{ row }">
-                <el-button v-if="row.enable" link type="success" :icon="VideoPlay" @click="opProxy(row)">
+                <Status :status="row.enable ? 'enable' : 'disable'" @click="opProxy(row)" />
-                    {{ $t('commons.status.running') }}
-                </el-button>
-                <el-button v-else link type="danger" :icon="VideoPause" @click="opProxy(row)">
-                    {{ $t('commons.status.stopped') }}
-                </el-button>
             </template>
         </el-table-column>
         <fu-table-operations
@@ -59,7 +54,6 @@ import { OperateRedirectConfig, GetRedirectConfig } from '@/api/modules/website'
 import { computed, onMounted, ref } from 'vue';
 import Create from './create/index.vue';
 import File from './file/index.vue';
-import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';

frontend/src/views/website/website/index.vue

@@ -136,18 +136,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.status')" prop="status" width="120px" sortable>
                         <template #default="{ row }">
-                            <el-button
+                            <Status
                                 v-if="row.status === 'Running'"
-                                link
+                                :status="row.status"
-                                type="success"
-                                :icon="VideoPlay"
                                 @click="opWebsite('stop', row.id)"
-                            >
+                            />
-                                {{ $t('commons.status.running') }}
+                            <Status v-else :status="row.status" @click="opWebsite('start', row.id)" />
-                            </el-button>
-                            <el-button v-else link type="danger" :icon="VideoPause" @click="opWebsite('start', row.id)">
-                                {{ $t('commons.status.stopped') }}
-                            </el-button>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -255,7 +249,6 @@ import { ElMessageBox } from 'element-plus';
 import { dateFormatSimple } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
-import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 import { GetGroupList } from '@/api/modules/group';
 import { Group } from '@/api/interface/group';
 import { GlobalStore } from '@/store';