From f2849aa6ec82edaa108e29c201f5a4290bf3301e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:48:49 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=E5=8F=8A=E6=A0=B7=E5=BC=8F=20(#7009)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue    | 11 ++++-------
 frontend/src/styles/element-dark.scss           |  2 +-
 frontend/src/views/app-store/apps/index.vue     | 17 +++++++++++++----
 .../src/views/login/components/login-form.vue   |  4 ++++
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 4387f0c7b..8a23ce502 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -72,13 +72,9 @@
                             :content="$t('website.openrestyHelper', [httpPort, httpsPort])"
                             placement="top-start"
                         >
-                            <el-alert
-                                :title="$t('app.checkTitle')"
-                                :closable="false"
-                                type="warning"
-                                show-icon
-                                class="h-8"
-                            />
+                            <el-button size="small" type="warning" :icon="Warning">
+                                {{ $t('app.checkTitle') }}
+                            </el-button>
                         </el-tooltip>
                     </div>
                 </div>
@@ -113,6 +109,7 @@ import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ClearNginxCache } from '@/api/modules/nginx';
+import { Warning } from '@element-plus/icons-vue';
 
 const props = defineProps({
     appKey: {
diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
index eb59bfdb2..2ef4e1f7a 100644
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@@ -114,7 +114,7 @@ html.dark {
 
     .el-tag.el-tag--primary {
         --el-tag-bg-color: var(--panel-main-bg-color-9);
-        --el-tag-border-color: var(--panel-color-primary-light-8);
+        --el-tag-border-color: var(--panel-main-bg-color-8);
         --el-tag-hover-color: var(--panel-color-primary);
     }
 
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 4419cd79d..8ae80e3e2 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -100,10 +100,19 @@
                                 <el-col :xs="16" :sm="18" :md="18" :lg="18" :xl="19">
                                     <div class="app-content">
                                         <div class="app-header">
-                                            <span class="app-title">{{ app.name }}</span>
-                                            <el-text type="success" class="!ml-2" v-if="app.installed">
-                                                {{ $t('app.allReadyInstalled') }}
-                                            </el-text>
+                                            <el-space wrap :size="1">
+                                                <span class="app-title">{{ app.name }}</span>
+                                                <el-tag
+                                                    type="success"
+                                                    v-if="app.installed"
+                                                    round
+                                                    size="small"
+                                                    class="!ml-2"
+                                                >
+                                                    {{ $t('app.allReadyInstalled') }}
+                                                </el-tag>
+                                            </el-space>
+
                                             <el-button
                                                 class="app-button"
                                                 type="primary"
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 5fb410fd1..b73edc3ce 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -534,6 +534,10 @@ onMounted(() => {
         margin-top: -20px;
         margin-left: 20px;
     }
+
+    :deep(.el-input__inner) {
+        color: #000 !important;
+    }
 }
 .cursor-pointer {
     outline: none;