From 62b1bb319195e90d784453475d84f44308cbf7d5 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Thu, 7 Mar 2024 11:07:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=87=E7=BA=A7=20element-plus=20?=
 =?UTF-8?q?=E5=88=B0=202.6.0=20(#4092)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                       | 16 ++++++++--------
 frontend/package.json                            |  2 +-
 frontend/src/components/file-list/index.vue      |  2 +-
 frontend/src/components/router-button/index.vue  |  1 +
 frontend/src/components/status/index.vue         |  2 +-
 frontend/src/components/system-upgrade/index.vue |  4 ++--
 frontend/src/styles/common.scss                  |  6 +++++-
 frontend/src/views/app-store/apps/index.vue      |  2 +-
 .../src/views/container/compose/create/index.vue |  6 +++---
 frontend/src/views/container/container/index.vue |  2 +-
 .../views/container/container/operate/index.vue  | 16 ++++++++--------
 .../src/views/container/image/build/index.vue    |  4 ++--
 .../src/views/container/image/prune/index.vue    |  4 ++--
 .../src/views/container/repo/operator/index.vue  |  4 ++--
 frontend/src/views/container/setting/index.vue   |  8 ++++----
 .../src/views/container/volume/create/index.vue  |  4 ++--
 frontend/src/views/cronjob/operate/index.vue     |  6 +++---
 frontend/src/views/database/mysql/index.vue      |  2 +-
 .../database/mysql/remote/operate/index.vue      | 12 ++++++------
 frontend/src/views/database/postgresql/index.vue |  2 +-
 .../database/postgresql/remote/operate/index.vue |  6 +++---
 .../database/redis/setting/persistence/index.vue |  6 +++---
 frontend/src/views/home/index.vue                |  8 ++++----
 .../views/host/file-management/create/index.vue  |  4 ++--
 .../views/host/file-management/move/index.vue    |  4 ++--
 frontend/src/views/host/firewall/ip/index.vue    |  2 +-
 .../src/views/host/firewall/ip/operate/index.vue |  4 ++--
 frontend/src/views/host/firewall/port/index.vue  | 10 ++++++++--
 .../views/host/firewall/port/operate/index.vue   |  8 ++++----
 .../src/views/host/process/process/index.vue     |  2 +-
 frontend/src/views/host/ssh/log/log.vue          |  2 +-
 frontend/src/views/host/ssh/ssh/index.vue        |  4 ++--
 .../src/views/host/terminal/command/index.vue    |  2 +-
 frontend/src/views/host/terminal/host/index.vue  |  2 +-
 .../views/host/terminal/host/operate/index.vue   |  4 ++--
 frontend/src/views/host/terminal/index.vue       |  6 +++---
 .../views/host/terminal/terminal/host-create.vue |  4 ++--
 frontend/src/views/log/operation/index.vue       | 10 ++++++++--
 frontend/src/views/log/system/index.vue          |  2 +-
 frontend/src/views/log/website/index.vue         |  2 +-
 .../setting/backup-account/onedrive/index.vue    |  4 ++--
 frontend/src/views/setting/panel/index.vue       | 12 ++++++------
 frontend/src/views/setting/safe/bind/index.vue   |  4 ++--
 frontend/src/views/setting/safe/ssl/index.vue    |  6 +++---
 frontend/src/views/toolbox/device/dns/index.vue  |  4 ++--
 .../src/views/toolbox/device/hosts/index.vue     |  4 ++--
 frontend/src/views/toolbox/fail2ban/index.vue    |  4 ++--
 .../views/website/runtime/node/operate/index.vue |  2 ++
 .../views/website/runtime/php/create/index.vue   |  6 ++++--
 .../src/views/website/ssl/ca/detail/index.vue    |  6 +++---
 frontend/src/views/website/ssl/create/index.vue  |  6 +++---
 frontend/src/views/website/ssl/detail/index.vue  |  6 +++---
 frontend/src/views/website/ssl/obtain/index.vue  |  2 +-
 .../src/views/website/website/create/index.vue   |  2 +-
 frontend/src/views/website/website/index.vue     |  2 +-
 55 files changed, 144 insertions(+), 123 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 492b455dd..4a8e8bb9f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,7 @@
                 "axios": "^1.6.0",
                 "echarts": "^5.3.0",
                 "echarts-liquidfill": "^3.1.0",
-                "element-plus": "^2.3.4",
+                "element-plus": "^2.6.0",
                 "fit2cloud-ui-plus": "^1.0.9",
                 "js-base64": "^3.7.2",
                 "js-md5": "^0.7.3",
@@ -4530,12 +4530,12 @@
             "integrity": "sha512-vjeaj0u/UYnzA/CIdGXzzcxRLCqRwREYc9YfaWInjIEr7/XPttZ6ShpyqapchEy0S2r6LpLjDBTnNj7ZxnxJKg=="
         },
         "node_modules/element-plus": {
-            "version": "2.3.5",
-            "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.3.5.tgz",
-            "integrity": "sha512-g27DHm2C5/tPwte9H6Juu+JOdzT9z1ALHTIvia6MwnBdCrI4kd77o6KcYdodU15/tYiPBoCEmobhl/7GUDb+1Q==",
+            "version": "2.6.0",
+            "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.6.0.tgz",
+            "integrity": "sha512-MP+N48P+diyndR+GjY+0VOrUmFnajD4U0CkrXIMzmeRmq4+dwi0bdzVo587v4wDo9Hs+ggviyacqm3NS8JYVqw==",
             "dependencies": {
                 "@ctrl/tinycolor": "^3.4.1",
-                "@element-plus/icons-vue": "^2.0.6",
+                "@element-plus/icons-vue": "^2.3.1",
                 "@floating-ui/dom": "^1.0.1",
                 "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
                 "@types/lodash": "^4.14.182",
@@ -4555,9 +4555,9 @@
             }
         },
         "node_modules/element-plus/node_modules/@element-plus/icons-vue": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
-            "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
+            "version": "2.3.1",
+            "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+            "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
             "peerDependencies": {
                 "vue": "^3.2.0"
             }
diff --git a/frontend/package.json b/frontend/package.json
index df50b9801..20020c6bd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,7 @@
         "axios": "^1.6.0",
         "echarts": "^5.3.0",
         "echarts-liquidfill": "^3.1.0",
-        "element-plus": "^2.3.4",
+        "element-plus": "^2.6.0",
         "fit2cloud-ui-plus": "^1.0.9",
         "js-base64": "^3.7.2",
         "js-md5": "^0.7.3",
diff --git a/frontend/src/components/file-list/index.vue b/frontend/src/components/file-list/index.vue
index 537543545..8baea171d 100644
--- a/frontend/src/components/file-list/index.vue
+++ b/frontend/src/components/file-list/index.vue
@@ -57,7 +57,7 @@
                     <template #default="{ row }">
                         <el-checkbox
                             v-model="rowName"
-                            :true-label="row.name"
+                            :true-value="row.name"
                             :disabled="disabledDir(row)"
                             @change="checkFile(row)"
                         />
diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
index 65151cf16..3d487ed8e 100644
--- a/frontend/src/components/router-button/index.vue
+++ b/frontend/src/components/router-button/index.vue
@@ -4,6 +4,7 @@
             <el-radio-button
                 class="router_card_button"
                 :label="button.label"
+                :value="button.label"
                 v-for="(button, index) in buttonArray"
                 size="large"
                 :key="index"
diff --git a/frontend/src/components/status/index.vue b/frontend/src/components/status/index.vue
index 17d38ff2f..0495b0f73 100644
--- a/frontend/src/components/status/index.vue
+++ b/frontend/src/components/status/index.vue
@@ -36,7 +36,7 @@ const getType = (status: string) => {
         case 'removing':
             return 'warning';
         default:
-            return '';
+            return 'info';
     }
 };
 
diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
index 412986e66..7cddc9344 100644
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@@ -44,10 +44,10 @@
                 <h2 class="inline-block">{{ $t('app.version') }}</h2>
             </div>
             <el-radio-group class="inline-block tag" v-model="upgradeVersion" @change="changeOption">
-                <el-radio v-if="upgradeInfo.newVersion" :label="upgradeInfo.newVersion">
+                <el-radio v-if="upgradeInfo.newVersion" :value="upgradeInfo.newVersion">
                     {{ upgradeInfo.newVersion }} {{ $t('setting.newVersion') }}
                 </el-radio>
-                <el-radio :label="upgradeInfo.latestVersion">
+                <el-radio :value="upgradeInfo.latestVersion">
                     {{ upgradeInfo.latestVersion }} {{ $t('setting.latestVersion') }}
                 </el-radio>
             </el-radio-group>
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 676c69ecb..67ece2b9d 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -412,5 +412,9 @@ html {
 }
 
 .p-mb-5 {
-	margin-bottom: 5px !important;
+    margin-bottom: 5px !important;
+}
+
+.p-w-200 {
+    width: 200px !important;
 }
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index cc465bcc6..5a5b58dca 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -57,7 +57,7 @@
         <template #rightButton>
             <div class="flex justify-end">
                 <div class="mr-10">
-                    <el-checkbox v-model="req.resource" true-label="all" false-label="remote" @change="search(req)">
+                    <el-checkbox v-model="req.resource" true-value="all" false-value="remote" @change="search(req)">
                         {{ $t('app.showLocal') }}
                     </el-checkbox>
                 </div>
diff --git a/frontend/src/views/container/compose/create/index.vue b/frontend/src/views/container/compose/create/index.vue
index 781d8d325..fa0600041 100644
--- a/frontend/src/views/container/compose/create/index.vue
+++ b/frontend/src/views/container/compose/create/index.vue
@@ -15,9 +15,9 @@
                     <el-form ref="formRef" @submit.prevent label-position="top" :model="form" :rules="rules">
                         <el-form-item :label="$t('container.from')">
                             <el-radio-group v-model="form.from" @change="changeFrom">
-                                <el-radio label="edit">{{ $t('commons.button.edit') }}</el-radio>
-                                <el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
-                                <el-radio label="template">{{ $t('container.composeTemplate') }}</el-radio>
+                                <el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
+                                <el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
+                                <el-radio value="template">{{ $t('container.composeTemplate') }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item v-if="form.from === 'path'" prop="path">
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 18ac4f2d2..f78bf855d 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -61,7 +61,7 @@
                 </el-row>
             </template>
             <template #search>
-                <el-select v-model="searchState" @change="search()" clearable>
+                <el-select v-model="searchState" @change="search()" clearable class="p-w-200">
                     <template #prefix>{{ $t('commons.table.status') }}</template>
                     <el-option :label="$t('commons.table.all')" value="all"></el-option>
                     <el-option :label="$t('commons.status.created')" value="created"></el-option>
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index c52496c7b..fc8cd69a4 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -76,8 +76,8 @@
                     </el-form-item>
                     <el-form-item :label="$t('commons.table.port')">
                         <el-radio-group v-model="dialogData.rowData!.publishAllPorts" class="ml-4">
-                            <el-radio :label="false">{{ $t('container.exposePort') }}</el-radio>
-                            <el-radio :label="true">{{ $t('container.exposeAll') }}</el-radio>
+                            <el-radio :value="false">{{ $t('container.exposePort') }}</el-radio>
+                            <el-radio :value="true">{{ $t('container.exposeAll') }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item v-if="!dialogData.rowData!.publishAllPorts">
@@ -139,8 +139,8 @@
                         <div v-for="(row, index) in dialogData.rowData!.volumes" :key="index" style="width: 100%">
                             <el-card class="mt-1">
                                 <el-radio-group v-model="row.isVolume">
-                                    <el-radio-button :label="true">{{ $t('container.volumeOption') }}</el-radio-button>
-                                    <el-radio-button :label="false">{{ $t('container.hostOption') }}</el-radio-button>
+                                    <el-radio-button :value="true">{{ $t('container.volumeOption') }}</el-radio-button>
+                                    <el-radio-button :value="false">{{ $t('container.hostOption') }}</el-radio-button>
                                 </el-radio-group>
                                 <el-button
                                     class="float-right mt-3"
@@ -216,10 +216,10 @@
                     </el-form-item>
                     <el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
                         <el-radio-group v-model="dialogData.rowData!.restartPolicy">
-                            <el-radio label="no">{{ $t('container.no') }}</el-radio>
-                            <el-radio label="always">{{ $t('container.always') }}</el-radio>
-                            <el-radio label="on-failure">{{ $t('container.onFailure') }}</el-radio>
-                            <el-radio label="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio>
+                            <el-radio value="no">{{ $t('container.no') }}</el-radio>
+                            <el-radio value="always">{{ $t('container.always') }}</el-radio>
+                            <el-radio value="on-failure">{{ $t('container.onFailure') }}</el-radio>
+                            <el-radio value="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item :label="$t('container.cpuShare')" prop="cpuShares">
diff --git a/frontend/src/views/container/image/build/index.vue b/frontend/src/views/container/image/build/index.vue
index 1c977c408..ec526c30b 100644
--- a/frontend/src/views/container/image/build/index.vue
+++ b/frontend/src/views/container/image/build/index.vue
@@ -17,8 +17,8 @@
                     </el-form-item>
                     <el-form-item label="Dockerfile" prop="from">
                         <el-radio-group v-model="form.from">
-                            <el-radio label="edit">{{ $t('commons.button.edit') }}</el-radio>
-                            <el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
+                            <el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
+                            <el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
diff --git a/frontend/src/views/container/image/prune/index.vue b/frontend/src/views/container/image/prune/index.vue
index 884e9ee2e..4785a45bb 100644
--- a/frontend/src/views/container/image/prune/index.vue
+++ b/frontend/src/views/container/image/prune/index.vue
@@ -8,8 +8,8 @@
         <el-form ref="deleteForm" v-loading="loading">
             <el-form-item>
                 <el-radio-group v-model="withTagAll">
-                    <el-radio :label="false">{{ $t('container.imagePruneSome') }}</el-radio>
-                    <el-radio :label="true">{{ $t('container.imagePruneAll') }}</el-radio>
+                    <el-radio :value="false">{{ $t('container.imagePruneSome') }}</el-radio>
+                    <el-radio :value="true">{{ $t('container.imagePruneAll') }}</el-radio>
                 </el-radio-group>
             </el-form-item>
             <span v-if="withTagAll">
diff --git a/frontend/src/views/container/repo/operator/index.vue b/frontend/src/views/container/repo/operator/index.vue
index 935f23f2b..cdcb8ec76 100644
--- a/frontend/src/views/container/repo/operator/index.vue
+++ b/frontend/src/views/container/repo/operator/index.vue
@@ -26,8 +26,8 @@
                     </el-form-item>
                     <el-form-item :label="$t('container.auth')" prop="auth">
                         <el-radio-group v-model="dialogData.rowData!.auth">
-                            <el-radio :label="true">{{ $t('commons.true') }}</el-radio>
-                            <el-radio :label="false">{{ $t('commons.false') }}</el-radio>
+                            <el-radio :value="true">{{ $t('commons.true') }}</el-radio>
+                            <el-radio :value="false">{{ $t('commons.false') }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.username')" prop="username">
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index a3bffb2f8..051042172 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -38,8 +38,8 @@
         <LayoutContent style="margin-top: 20px" :title="$t('container.setting')" :divider="true">
             <template #main>
                 <el-radio-group v-model="confShowType" @change="changeMode">
-                    <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
-                    <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
+                    <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
+                    <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
                 </el-radio-group>
                 <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
                     <el-col :span="1"><br /></el-col>
@@ -146,8 +146,8 @@
                             </el-form-item>
                             <el-form-item label="cgroup-driver" prop="cgroupDriver">
                                 <el-radio-group v-model="form.cgroupDriver" @change="handleCgroup">
-                                    <el-radio label="cgroupfs">cgroupfs</el-radio>
-                                    <el-radio label="systemd">systemd</el-radio>
+                                    <el-radio value="cgroupfs">cgroupfs</el-radio>
+                                    <el-radio value="systemd">systemd</el-radio>
                                 </el-radio-group>
                             </el-form-item>
                             <el-form-item :label="$t('container.sockPath')" prop="dockerSockPath">
diff --git a/frontend/src/views/container/volume/create/index.vue b/frontend/src/views/container/volume/create/index.vue
index 7b58698f8..cda29d43e 100644
--- a/frontend/src/views/container/volume/create/index.vue
+++ b/frontend/src/views/container/volume/create/index.vue
@@ -33,8 +33,8 @@
                         </el-form-item>
                         <el-form-item :label="$t('container.version')" prop="nfsVersion">
                             <el-radio-group v-model="form.nfsVersion">
-                                <el-radio label="v3">NFS</el-radio>
-                                <el-radio label="v4">NFS4</el-radio>
+                                <el-radio value="v3">NFS</el-radio>
+                                <el-radio value="v4">NFS4</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item :label="$t('container.mountpoint')" prop="nfsMount">
diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index 1b10126dd..51d8389c4 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -208,9 +208,9 @@
                     <div v-if="dialogData.rowData!.type === 'database'">
                         <el-form-item :label="$t('cronjob.database')">
                             <el-radio-group v-model="dialogData.rowData!.dbType" @change="loadDatabases">
-                                <el-radio label="mysql">MySQL</el-radio>
-                                <el-radio label="mariadb">Mariadb</el-radio>
-                                <el-radio label="postgresql">PostgreSQL</el-radio>
+                                <el-radio value="mysql">MySQL</el-radio>
+                                <el-radio value="mariadb">Mariadb</el-radio>
+                                <el-radio value="postgresql">PostgreSQL</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item :label="$t('cronjob.database')" prop="dbName">
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 8bf5262c7..7ea0b11e2 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -23,7 +23,7 @@
             </template>
 
             <template #search v-if="currentDB">
-                <el-select v-model="currentDBName" @change="changeDatabase()">
+                <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200">
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">
diff --git a/frontend/src/views/database/mysql/remote/operate/index.vue b/frontend/src/views/database/mysql/remote/operate/index.vue
index f2edcbc8e..763165500 100644
--- a/frontend/src/views/database/mysql/remote/operate/index.vue
+++ b/frontend/src/views/database/mysql/remote/operate/index.vue
@@ -21,18 +21,18 @@
                     </el-form-item>
                     <el-form-item :label="$t('commons.table.type')" prop="type">
                         <el-radio-group v-model="dialogData.rowData!.type" @change="changeType">
-                            <el-radio-button label="mysql">MySQL</el-radio-button>
-                            <el-radio-button label="mariadb">MariaDB</el-radio-button>
+                            <el-radio-button value="mysql">MySQL</el-radio-button>
+                            <el-radio-button value="mariadb">MariaDB</el-radio-button>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item :label="$t('database.version')" prop="version">
                         <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
                             <div v-if="dialogData.rowData!.type === 'mysql'">
-                                <el-radio label="8.x" />
-                                <el-radio label="5.7" />
-                                <el-radio label="5.6" />
+                                <el-radio label="8.x" value="8.x" />
+                                <el-radio label="5.7" value="5.7" />
+                                <el-radio label="5.6" value="5.6" />
                             </div>
-                            <el-radio v-else label="10.x" />
+                            <el-radio v-else label="10.x" value="10.x" />
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item :label="$t('database.address')" prop="address">
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index 185dc414f..16bca00e0 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -21,7 +21,7 @@
             </template>
 
             <template #search v-if="currentDB">
-                <el-select v-model="currentDBName" @change="changeDatabase()">
+                <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200">
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">
diff --git a/frontend/src/views/database/postgresql/remote/operate/index.vue b/frontend/src/views/database/postgresql/remote/operate/index.vue
index ace62d31c..a03294ec8 100644
--- a/frontend/src/views/database/postgresql/remote/operate/index.vue
+++ b/frontend/src/views/database/postgresql/remote/operate/index.vue
@@ -21,9 +21,9 @@
                     </el-form-item>
                     <el-form-item :label="$t('database.version')" prop="version">
                         <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
-                            <el-radio label="16.x" />
-                            <el-radio label="15.x" />
-                            <el-radio label="14.x" />
+                            <el-radio label="16.x" value="16.x" />
+                            <el-radio label="15.x" value="15.x" />
+                            <el-radio label="14.x" value="14.x" />
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item :label="$t('database.address')" prop="address">
diff --git a/frontend/src/views/database/redis/setting/persistence/index.vue b/frontend/src/views/database/redis/setting/persistence/index.vue
index 6e54d96d5..ba01569d9 100644
--- a/frontend/src/views/database/redis/setting/persistence/index.vue
+++ b/frontend/src/views/database/redis/setting/persistence/index.vue
@@ -21,9 +21,9 @@
                                 </el-form-item>
                                 <el-form-item label="appendfsync" prop="appendfsync">
                                     <el-radio-group style="width: 100%" v-model="form.appendfsync">
-                                        <el-radio label="always">always</el-radio>
-                                        <el-radio label="everysec">everysec</el-radio>
-                                        <el-radio label="no">no</el-radio>
+                                        <el-radio value="always">always</el-radio>
+                                        <el-radio value="everysec">everysec</el-radio>
+                                        <el-radio value="no">no</el-radio>
                                     </el-radio-group>
                                 </el-form-item>
                                 <el-form-item>
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 4e559f3cb..fc248c939 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -91,14 +91,14 @@
                             v-model="chartOption"
                             @change="changeOption"
                         >
-                            <el-radio-button label="network">{{ $t('home.network') }}</el-radio-button>
-                            <el-radio-button label="io">{{ $t('home.io') }}</el-radio-button>
+                            <el-radio-button value="network">{{ $t('home.network') }}</el-radio-button>
+                            <el-radio-button value="io">{{ $t('home.io') }}</el-radio-button>
                         </el-radio-group>
                         <el-select
                             v-if="chartOption === 'network'"
                             @change="onLoadBaseInfo(false, 'network')"
                             v-model="searchInfo.netOption"
-                            style="float: right"
+                            class="p-w-200 float-right"
                         >
                             <template #prefix>{{ $t('home.networkCard') }}</template>
                             <el-option
@@ -112,7 +112,7 @@
                             v-if="chartOption === 'io'"
                             v-model="searchInfo.ioOption"
                             @change="onLoadBaseInfo(false, 'io')"
-                            style="float: right"
+                            class="p-w-200 float-right"
                         >
                             <template #prefix>{{ $t('home.disk') }}</template>
                             <el-option
diff --git a/frontend/src/views/host/file-management/create/index.vue b/frontend/src/views/host/file-management/create/index.vue
index d0e15c561..5ab006c00 100644
--- a/frontend/src/views/host/file-management/create/index.vue
+++ b/frontend/src/views/host/file-management/create/index.vue
@@ -29,8 +29,8 @@
                     </el-form-item>
                     <el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
                         <el-radio-group v-model="addForm.isSymlink">
-                            <el-radio :label="true">{{ $t('file.softLink') }}</el-radio>
-                            <el-radio :label="false">{{ $t('file.hardLink') }}</el-radio>
+                            <el-radio :value="true">{{ $t('file.softLink') }}</el-radio>
+                            <el-radio :value="false">{{ $t('file.hardLink') }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
diff --git a/frontend/src/views/host/file-management/move/index.vue b/frontend/src/views/host/file-management/move/index.vue
index dde6ebdc6..07a4bf0fa 100644
--- a/frontend/src/views/host/file-management/move/index.vue
+++ b/frontend/src/views/host/file-management/move/index.vue
@@ -23,8 +23,8 @@
                             <el-input v-model="addForm.name" :disabled="addForm.cover"></el-input>
                         </el-form-item>
                         <el-radio-group v-model="addForm.cover" @change="changeType">
-                            <el-radio :label="true" size="large">{{ $t('file.replace') }}</el-radio>
-                            <el-radio :label="false" size="large">{{ $t('file.rename') }}</el-radio>
+                            <el-radio :value="true" size="large">{{ $t('file.replace') }}</el-radio>
+                            <el-radio :value="false" size="large">{{ $t('file.rename') }}</el-radio>
                         </el-radio-group>
                     </div>
                 </el-form>
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index f5d7d687a..5008c6923 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -37,7 +37,7 @@
                     </template>
                     <template #search>
                         <div class="flx-align-center">
-                            <el-select v-model="searchStrategy" @change="search()" clearable>
+                            <el-select v-model="searchStrategy" @change="search()" clearable class="p-w-200">
                                 <template #prefix>{{ $t('firewall.strategy') }}</template>
                                 <el-option :label="$t('commons.table.all')" value=""></el-option>
                                 <el-option :label="$t('firewall.allow')" value="accept"></el-option>
diff --git a/frontend/src/views/host/firewall/ip/operate/index.vue b/frontend/src/views/host/firewall/ip/operate/index.vue
index ee3b85802..6d2b97f95 100644
--- a/frontend/src/views/host/firewall/ip/operate/index.vue
+++ b/frontend/src/views/host/firewall/ip/operate/index.vue
@@ -20,8 +20,8 @@
                         </el-form-item>
                         <el-form-item :label="$t('firewall.strategy')" prop="strategy">
                             <el-radio-group v-model="dialogData.rowData!.strategy">
-                                <el-radio label="accept">{{ $t('firewall.allow') }}</el-radio>
-                                <el-radio label="drop">{{ $t('firewall.deny') }}</el-radio>
+                                <el-radio value="accept">{{ $t('firewall.allow') }}</el-radio>
+                                <el-radio value="drop">{{ $t('firewall.deny') }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item :label="$t('commons.table.description')" prop="description">
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index d607a06dd..f6b112791 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -37,13 +37,19 @@
                     </template>
                     <template #search>
                         <div class="flx-align-center">
-                            <el-select v-model="searchStatus" @change="search()" clearable>
+                            <el-select v-model="searchStatus" @change="search()" clearable class="p-w-200">
                                 <template #prefix>{{ $t('commons.table.status') }}</template>
                                 <el-option :label="$t('commons.table.all')" value=""></el-option>
                                 <el-option :label="$t('firewall.unUsed')" value="free"></el-option>
                                 <el-option :label="$t('firewall.used')" value="used"></el-option>
                             </el-select>
-                            <el-select v-model="searchStrategy" style="margin-left: 10px" @change="search()" clearable>
+                            <el-select
+                                v-model="searchStrategy"
+                                style="margin-left: 10px"
+                                @change="search()"
+                                clearable
+                                class="p-w-200"
+                            >
                                 <template #prefix>{{ $t('firewall.strategy') }}</template>
                                 <el-option :label="$t('commons.table.all')" value=""></el-option>
                                 <el-option :label="$t('firewall.accept')" value="accept"></el-option>
diff --git a/frontend/src/views/host/firewall/port/operate/index.vue b/frontend/src/views/host/firewall/port/operate/index.vue
index da57677d1..0c4044fe7 100644
--- a/frontend/src/views/host/firewall/port/operate/index.vue
+++ b/frontend/src/views/host/firewall/port/operate/index.vue
@@ -27,8 +27,8 @@
 
                         <el-form-item :label="$t('firewall.source')" prop="source">
                             <el-radio-group v-model="dialogData.rowData!.source">
-                                <el-radio label="anyWhere">{{ $t('firewall.anyWhere') }}</el-radio>
-                                <el-radio label="address">{{ $t('firewall.address') }}</el-radio>
+                                <el-radio value="anyWhere">{{ $t('firewall.anyWhere') }}</el-radio>
+                                <el-radio value="address">{{ $t('firewall.address') }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
 
@@ -44,8 +44,8 @@
 
                         <el-form-item :label="$t('firewall.strategy')" prop="strategy">
                             <el-radio-group v-model="dialogData.rowData!.strategy">
-                                <el-radio label="accept">{{ $t('firewall.accept') }}</el-radio>
-                                <el-radio label="drop">{{ $t('firewall.drop') }}</el-radio>
+                                <el-radio value="accept">{{ $t('firewall.accept') }}</el-radio>
+                                <el-radio value="drop">{{ $t('firewall.drop') }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item :label="$t('commons.table.description')" prop="description">
diff --git a/frontend/src/views/host/process/process/index.vue b/frontend/src/views/host/process/process/index.vue
index 47a961cac..f9963ef7d 100644
--- a/frontend/src/views/host/process/process/index.vue
+++ b/frontend/src/views/host/process/process/index.vue
@@ -6,7 +6,7 @@
                 <el-row>
                     <el-col :span="24">
                         <div style="width: 100%">
-                            <el-form-item style="float: right">
+                            <el-form-item class="float-right">
                                 <el-row :gutter="20">
                                     <el-col :span="8">
                                         <TableSearch
diff --git a/frontend/src/views/host/ssh/log/log.vue b/frontend/src/views/host/ssh/log/log.vue
index dffdc8e2d..dbd243aaa 100644
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@@ -6,7 +6,7 @@
                 <div class="mt-2"><el-alert type="info" :title="$t('ssh.sshAlert')" :closable="false" /></div>
             </template>
             <template #search>
-                <el-select v-model="searchStatus" @change="search()">
+                <el-select v-model="searchStatus" @change="search()" class="p-w-200">
                     <template #prefix>{{ $t('commons.table.status') }}</template>
                     <el-option :label="$t('commons.table.all')" value="All"></el-option>
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
diff --git a/frontend/src/views/host/ssh/ssh/index.vue b/frontend/src/views/host/ssh/ssh/index.vue
index 7141215a4..01c2a601c 100644
--- a/frontend/src/views/host/ssh/ssh/index.vue
+++ b/frontend/src/views/host/ssh/ssh/index.vue
@@ -53,8 +53,8 @@
         <LayoutContent style="margin-top: 20px" :title="$t('menu.config')" :divider="true">
             <template #main>
                 <el-radio-group v-model="confShowType" @change="changeMode">
-                    <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
-                    <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
+                    <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
+                    <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
                 </el-radio-group>
                 <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
                     <el-col :span="1"><br /></el-col>
diff --git a/frontend/src/views/host/terminal/command/index.vue b/frontend/src/views/host/terminal/command/index.vue
index fa986dc31..43b066017 100644
--- a/frontend/src/views/host/terminal/command/index.vue
+++ b/frontend/src/views/host/terminal/command/index.vue
@@ -16,7 +16,7 @@
                 </el-button>
             </template>
             <template #search>
-                <el-select v-model="group" @change="search()" clearable>
+                <el-select v-model="group" @change="search()" clearable class="p-w-200">
                     <template #prefix>{{ $t('terminal.group') }}</template>
                     <el-option :label="$t('commons.table.all')" value=""></el-option>
                     <div v-for="item in groupList" :key="item.name">
diff --git a/frontend/src/views/host/terminal/host/index.vue b/frontend/src/views/host/terminal/host/index.vue
index 5411c22bd..3db0e1a6c 100644
--- a/frontend/src/views/host/terminal/host/index.vue
+++ b/frontend/src/views/host/terminal/host/index.vue
@@ -20,7 +20,7 @@
                 </el-row>
             </template>
             <template #search>
-                <el-select v-model="group" @change="search()" clearable>
+                <el-select v-model="group" @change="search()" clearable class="p-w-200">
                     <template #prefix>{{ $t('terminal.group') }}</template>
                     <el-option :label="$t('commons.table.all')" value=""></el-option>
                     <div v-for="item in groupList" :key="item.name">
diff --git a/frontend/src/views/host/terminal/host/operate/index.vue b/frontend/src/views/host/terminal/host/operate/index.vue
index 0322c0f2d..cbe2e24d8 100644
--- a/frontend/src/views/host/terminal/host/operate/index.vue
+++ b/frontend/src/views/host/terminal/host/operate/index.vue
@@ -18,8 +18,8 @@
                         </el-form-item>
                         <el-form-item :label="$t('terminal.authMode')" prop="authMode">
                             <el-radio-group @change="isOK = false" v-model="dialogData.rowData!.authMode">
-                                <el-radio label="password">{{ $t('terminal.passwordMode') }}</el-radio>
-                                <el-radio label="key">{{ $t('terminal.keyMode') }}</el-radio>
+                                <el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
+                                <el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item
diff --git a/frontend/src/views/host/terminal/index.vue b/frontend/src/views/host/terminal/index.vue
index fbc8544bb..df3be7126 100644
--- a/frontend/src/views/host/terminal/index.vue
+++ b/frontend/src/views/host/terminal/index.vue
@@ -2,13 +2,13 @@
     <div>
         <el-card class="router_card">
             <el-radio-group v-model="activeNames" @change="handleChange">
-                <el-radio-button class="router_card_button" size="large" label="terminal">
+                <el-radio-button class="router_card_button" size="large" value="terminal">
                     {{ $t('menu.terminal') }}
                 </el-radio-button>
-                <el-radio-button class="router_card_button" size="large" label="host">
+                <el-radio-button class="router_card_button" size="large" value="host">
                     {{ $t('menu.host') }}
                 </el-radio-button>
-                <el-radio-button class="router_card_button" size="large" label="command">
+                <el-radio-button class="router_card_button" size="large" value="command">
                     {{ $t('terminal.quickCommand') }}
                 </el-radio-button>
             </el-radio-group>
diff --git a/frontend/src/views/host/terminal/terminal/host-create.vue b/frontend/src/views/host/terminal/terminal/host-create.vue
index ef918083d..68d505dbc 100644
--- a/frontend/src/views/host/terminal/terminal/host-create.vue
+++ b/frontend/src/views/host/terminal/terminal/host-create.vue
@@ -24,8 +24,8 @@
                         </el-form-item>
                         <el-form-item :label="$t('terminal.authMode')" prop="authMode">
                             <el-radio-group @change="isOK = false" v-model="hostInfo.authMode">
-                                <el-radio label="password">{{ $t('terminal.passwordMode') }}</el-radio>
-                                <el-radio label="key">{{ $t('terminal.keyMode') }}</el-radio>
+                                <el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
+                                <el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index d770d6634..1d4a48a2d 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -21,7 +21,7 @@
                 </el-row>
             </template>
             <template #search>
-                <el-select v-model="searchGroup" @change="search()" clearable>
+                <el-select v-model="searchGroup" @change="search()" clearable class="p-w-200">
                     <template #prefix>{{ $t('logs.resource') }}</template>
                     <el-option :label="$t('commons.table.all')" value=""></el-option>
                     <el-option :label="$t('logs.detail.apps')" value="apps"></el-option>
@@ -36,7 +36,13 @@
                     <el-option :label="$t('logs.detail.logs')" value="logs"></el-option>
                     <el-option :label="$t('logs.detail.settings')" value="settings"></el-option>
                 </el-select>
-                <el-select v-model="searchStatus" @change="search()" clearable style="margin-left: 10px">
+                <el-select
+                    v-model="searchStatus"
+                    @change="search()"
+                    clearable
+                    style="margin-left: 10px"
+                    class="p-w-200"
+                >
                     <template #prefix>{{ $t('commons.table.status') }}</template>
                     <el-option :label="$t('commons.table.all')" value=""></el-option>
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index ea1ea342b..4012c51b2 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -17,7 +17,7 @@
                 </el-row>
             </template>
             <template #search>
-                <el-select class="float-left" v-model="logConfig.name" @change="search()">
+                <el-select class="float-left p-w-200" v-model="logConfig.name" @change="search()">
                     <template #prefix>{{ $t('commons.button.log') }}</template>
                     <el-option v-for="(item, index) in fileList" :key="index" :label="item" :value="item" />
                 </el-select>
diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index 641003785..42eb01f06 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -25,7 +25,7 @@
             </template>
             <template #search>
                 <div>
-                    <el-select v-model="logConfig.id" @change="changeWebsite()">
+                    <el-select v-model="logConfig.id" @change="changeWebsite()" class="p-w-200">
                         <template #prefix>{{ $t('website.website') }}</template>
                         <el-option
                             v-for="(website, index) in websites"
diff --git a/frontend/src/views/setting/backup-account/onedrive/index.vue b/frontend/src/views/setting/backup-account/onedrive/index.vue
index 51c378b08..e5631a67b 100644
--- a/frontend/src/views/setting/backup-account/onedrive/index.vue
+++ b/frontend/src/views/setting/backup-account/onedrive/index.vue
@@ -18,8 +18,8 @@
                         </el-form-item>
                         <el-form-item>
                             <el-radio-group v-model="oneDriveData.rowData!.varsJson['isCN']" @change="changeFrom">
-                                <el-radio-button :label="false">{{ $t('setting.isNotCN') }}</el-radio-button>
-                                <el-radio-button :label="true">{{ $t('setting.isCN') }}</el-radio-button>
+                                <el-radio-button :value="false">{{ $t('setting.isNotCN') }}</el-radio-button>
+                                <el-radio-button :value="true">{{ $t('setting.isCN') }}</el-radio-button>
                             </el-radio-group>
                             <span class="input-help">
                                 {{ $t('setting.onedrive_helper') }}
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index e9a783369..f082fed32 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -28,13 +28,13 @@
 
                             <el-form-item :label="$t('setting.theme')" prop="theme">
                                 <el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
-                                    <el-radio-button label="light">
+                                    <el-radio-button value="light">
                                         <span>{{ $t('setting.light') }}</span>
                                     </el-radio-button>
-                                    <el-radio-button label="dark">
+                                    <el-radio-button value="dark">
                                         <span>{{ $t('setting.dark') }}</span>
                                     </el-radio-button>
-                                    <el-radio-button label="auto">
+                                    <el-radio-button value="auto">
                                         <span>{{ $t('setting.auto') }}</span>
                                     </el-radio-button>
                                 </el-radio-group>
@@ -56,9 +56,9 @@
                                     @change="onSave('Language', form.language)"
                                     v-model="form.language"
                                 >
-                                    <el-radio label="zh">中文(简体)</el-radio>
-                                    <el-radio label="tw">中文(繁體)</el-radio>
-                                    <el-radio label="en">English</el-radio>
+                                    <el-radio value="zh">中文(简体)</el-radio>
+                                    <el-radio value="tw">中文(繁體)</el-radio>
+                                    <el-radio value="en">English</el-radio>
                                 </el-radio-group>
                             </el-form-item>
 
diff --git a/frontend/src/views/setting/safe/bind/index.vue b/frontend/src/views/setting/safe/bind/index.vue
index a2b5cd57a..a2ebff85e 100644
--- a/frontend/src/views/setting/safe/bind/index.vue
+++ b/frontend/src/views/setting/safe/bind/index.vue
@@ -9,8 +9,8 @@
                     <el-col :span="22">
                         <el-form-item :label="$t('setting.ipv6')" prop="ipv6" :rules="Rules.requiredSelect">
                             <el-radio-group style="width: 100%" v-model="form.ipv6" @change="onChangeMode()">
-                                <el-radio label="enable">{{ $t('commons.button.enable') }}</el-radio>
-                                <el-radio label="disable">{{ $t('commons.button.disable') }}</el-radio>
+                                <el-radio value="enable">{{ $t('commons.button.enable') }}</el-radio>
+                                <el-radio value="disable">{{ $t('commons.button.disable') }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item
diff --git a/frontend/src/views/setting/safe/ssl/index.vue b/frontend/src/views/setting/safe/ssl/index.vue
index 01739c7c0..7e814784f 100644
--- a/frontend/src/views/setting/safe/ssl/index.vue
+++ b/frontend/src/views/setting/safe/ssl/index.vue
@@ -22,9 +22,9 @@
                     <el-col :span="22">
                         <el-form-item :label="$t('setting.certType')">
                             <el-radio-group v-model="form.sslType">
-                                <el-radio label="self">{{ $t('setting.selfSigned') }}</el-radio>
-                                <el-radio label="select">{{ $t('setting.select') }}</el-radio>
-                                <el-radio label="import">{{ $t('commons.button.import') }}</el-radio>
+                                <el-radio value="self">{{ $t('setting.selfSigned') }}</el-radio>
+                                <el-radio value="select">{{ $t('setting.select') }}</el-radio>
+                                <el-radio value="import">{{ $t('commons.button.import') }}</el-radio>
                             </el-radio-group>
                             <span class="input-help" v-if="form.sslType === 'self'">
                                 {{ $t('setting.selfSignedHelper') }}
diff --git a/frontend/src/views/toolbox/device/dns/index.vue b/frontend/src/views/toolbox/device/dns/index.vue
index a8524903c..5b8dc49df 100644
--- a/frontend/src/views/toolbox/device/dns/index.vue
+++ b/frontend/src/views/toolbox/device/dns/index.vue
@@ -14,8 +14,8 @@
                         type="warning"
                     />
                     <el-radio-group v-model="confShowType" @change="changeMode">
-                        <el-radio-button label="form">{{ $t('database.baseConf') }}</el-radio-button>
-                        <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
+                        <el-radio-button value="form">{{ $t('database.baseConf') }}</el-radio-button>
+                        <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
                     </el-radio-group>
                     <el-form
                         class="mt-4"
diff --git a/frontend/src/views/toolbox/device/hosts/index.vue b/frontend/src/views/toolbox/device/hosts/index.vue
index 27357f4f4..318b776b0 100644
--- a/frontend/src/views/toolbox/device/hosts/index.vue
+++ b/frontend/src/views/toolbox/device/hosts/index.vue
@@ -8,8 +8,8 @@
             <el-row type="flex" justify="center" v-loading="loading">
                 <el-col :span="22">
                     <el-radio-group v-model="confShowType" @change="changeMode">
-                        <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
-                        <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
+                        <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
+                        <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
                     </el-radio-group>
                     <div v-if="confShowType === 'base'">
                         <el-table :data="form.hosts">
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index 877bf3aaf..5b5f4b71c 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -55,8 +55,8 @@
                 </template>
                 <template #main>
                     <el-radio-group v-model="confShowType" @change="changeMode">
-                        <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
-                        <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
+                        <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
+                        <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
                     </el-radio-group>
                     <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
                         <el-col :span="1"><br /></el-col>
diff --git a/frontend/src/views/website/runtime/node/operate/index.vue b/frontend/src/views/website/runtime/node/operate/index.vue
index 5f8dfdb2d..29c9516f1 100644
--- a/frontend/src/views/website/runtime/node/operate/index.vue
+++ b/frontend/src/views/website/runtime/node/operate/index.vue
@@ -28,6 +28,7 @@
                                     v-model="runtime.appID"
                                     :disabled="mode === 'edit'"
                                     @change="changeApp(runtime.appID)"
+                                    class="p-w-200"
                                 >
                                     <el-option
                                         v-for="(app, index) in apps"
@@ -42,6 +43,7 @@
                                     v-model="runtime.version"
                                     :disabled="mode === 'edit'"
                                     @change="changeVersion()"
+                                    class="p-w-200"
                                 >
                                     <el-option
                                         v-for="(version, index) in appVersions"
diff --git a/frontend/src/views/website/runtime/php/create/index.vue b/frontend/src/views/website/runtime/php/create/index.vue
index 95e8588ab..2a7b50b90 100644
--- a/frontend/src/views/website/runtime/php/create/index.vue
+++ b/frontend/src/views/website/runtime/php/create/index.vue
@@ -22,10 +22,10 @@
                             v-model="runtime.resource"
                             @change="changeResource(runtime.resource)"
                         >
-                            <el-radio :label="'appstore'">
+                            <el-radio :value="'appstore'">
                                 {{ $t('runtime.appstore') }}
                             </el-radio>
-                            <el-radio :label="'local'">
+                            <el-radio :value="'local'">
                                 {{ $t('runtime.local') }}
                             </el-radio>
                         </el-radio-group>
@@ -38,6 +38,7 @@
                                         v-model="runtime.appID"
                                         :disabled="mode === 'edit'"
                                         @change="changeApp(runtime.appID)"
+                                        class="p-w-200"
                                     >
                                         <el-option
                                             v-for="(app, index) in apps"
@@ -52,6 +53,7 @@
                                         v-model="runtime.version"
                                         :disabled="mode === 'edit'"
                                         @change="changeVersion()"
+                                        class="p-w-200"
                                     >
                                         <el-option
                                             v-for="(version, index) in appVersions"
diff --git a/frontend/src/views/website/ssl/ca/detail/index.vue b/frontend/src/views/website/ssl/ca/detail/index.vue
index 17ca6d436..1f72d7bde 100644
--- a/frontend/src/views/website/ssl/ca/detail/index.vue
+++ b/frontend/src/views/website/ssl/ca/detail/index.vue
@@ -5,9 +5,9 @@
         </template>
         <div v-loading="loading">
             <el-radio-group v-model="curr">
-                <el-radio-button label="detail">{{ $t('ssl.organizationDetail') }}</el-radio-button>
-                <el-radio-button label="ssl">csr</el-radio-button>
-                <el-radio-button label="key">{{ $t('ssl.key') }}</el-radio-button>
+                <el-radio-button value="detail">{{ $t('ssl.organizationDetail') }}</el-radio-button>
+                <el-radio-button value="ssl">csr</el-radio-button>
+                <el-radio-button value="key">{{ $t('ssl.key') }}</el-radio-button>
             </el-radio-group>
             <div v-if="curr === 'detail'" class="mt-5">
                 <el-descriptions border :column="1">
diff --git a/frontend/src/views/website/ssl/create/index.vue b/frontend/src/views/website/ssl/create/index.vue
index 148050975..8753ae6ee 100644
--- a/frontend/src/views/website/ssl/create/index.vue
+++ b/frontend/src/views/website/ssl/create/index.vue
@@ -64,9 +64,9 @@
                     </el-form-item>
                     <el-form-item :label="$t('website.provider')" prop="provider">
                         <el-radio-group v-model="ssl.provider" @change="changeProvider()">
-                            <el-radio label="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
-                            <el-radio label="dnsManual">{{ $t('website.dnsManual') }}</el-radio>
-                            <el-radio label="http">HTTP</el-radio>
+                            <el-radio value="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
+                            <el-radio value="dnsManual">{{ $t('website.dnsManual') }}</el-radio>
+                            <el-radio value="http">HTTP</el-radio>
                         </el-radio-group>
                         <span class="input-help" v-if="ssl.provider === 'dnsManual'">
                             {{ $t('ssl.dnsMauanlHelper') }}
diff --git a/frontend/src/views/website/ssl/detail/index.vue b/frontend/src/views/website/ssl/detail/index.vue
index 94ce4c5c9..34708af3a 100644
--- a/frontend/src/views/website/ssl/detail/index.vue
+++ b/frontend/src/views/website/ssl/detail/index.vue
@@ -5,9 +5,9 @@
         </template>
         <div v-loading="loading">
             <el-radio-group v-model="curr">
-                <el-radio-button label="detail">{{ $t('ssl.msg') }}</el-radio-button>
-                <el-radio-button label="ssl">{{ $t('ssl.ssl') }}</el-radio-button>
-                <el-radio-button label="key">{{ $t('ssl.key') }}</el-radio-button>
+                <el-radio-button value="detail">{{ $t('ssl.msg') }}</el-radio-button>
+                <el-radio-button value="ssl">{{ $t('ssl.ssl') }}</el-radio-button>
+                <el-radio-button value="key">{{ $t('ssl.key') }}</el-radio-button>
             </el-radio-group>
             <div v-if="curr === 'detail'" class="mt-5">
                 <el-descriptions border :column="1">
diff --git a/frontend/src/views/website/ssl/obtain/index.vue b/frontend/src/views/website/ssl/obtain/index.vue
index 3de89c716..f6b0b5231 100644
--- a/frontend/src/views/website/ssl/obtain/index.vue
+++ b/frontend/src/views/website/ssl/obtain/index.vue
@@ -14,7 +14,7 @@
                     <br />
                     <span>
                         <span v-for="(website, index) in ssl.websites" :key="index">
-                            <el-tag>{{ website.primaryDomain }}</el-tag>
+                            <el-tag type="info">{{ website.primaryDomain }}</el-tag>
                         </span>
                     </span>
                 </div>
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index 2aab350ae..6947982d6 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -92,7 +92,7 @@
                                 <el-radio :label="'installed'" :value="'installed'">
                                     {{ $t('website.appInstalled') }}
                                 </el-radio>
-                                <el-radio :label="'new'">
+                                <el-radio :label="'new'" :value="'new'">
                                     {{ $t('website.appNew') }}
                                 </el-radio>
                             </el-radio-group>
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index b882cf9fa..16cf84181 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -38,7 +38,7 @@
             </template>
             <template v-if="nginxIsExist && !openNginxConfig" #search>
                 <div :class="{ mask: nginxStatus != 'Running' }">
-                    <el-select v-model="req.websiteGroupId" @change="search()">
+                    <el-select v-model="req.websiteGroupId" @change="search()" class="p-w-200">
                         <template #prefix>{{ $t('website.group') }}</template>
                         <el-option :label="$t('commons.table.all')" :value="0"></el-option>
                         <el-option