From f5435c581bd39813e86d91ad3fc77f85ab28bb5b 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 18:32:00 +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(#7015)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue  | 21 +++++-
 .../src/components/router-button/index.vue    |  2 +-
 frontend/src/lang/modules/en.ts               |  8 +-
 frontend/src/lang/modules/tw.ts               |  7 +-
 frontend/src/lang/modules/zh.ts               |  7 +-
 frontend/src/styles/element-dark.scss         | 75 +++++++++++++++----
 frontend/src/views/app-store/index.vue        |  2 +-
 7 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 8a23ce502..f14eb95b7 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -72,9 +72,14 @@
                             :content="$t('website.openrestyHelper', [httpPort, httpsPort])"
                             placement="top-start"
                         >
-                            <el-button size="small" type="warning" :icon="Warning">
-                                {{ $t('app.checkTitle') }}
-                            </el-button>
+                            <el-alert
+                                :title="$t('app.checkTitle')"
+                                :closable="false"
+                                center
+                                type="warning"
+                                show-icon
+                                class="h-6 check-title"
+                            />
                         </el-tooltip>
                     </div>
                 </div>
@@ -109,7 +114,6 @@ 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: {
@@ -237,3 +241,12 @@ defineExpose({
     onCheck,
 });
 </script>
+<style scoped lang="scss">
+.check-title {
+    color: var(--el-color-warning);
+    border: 1px solid var(--el-color-warning);
+    background-color: transparent;
+    padding: 8px 8px;
+    width: 70px;
+}
+</style>
diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
index f58c4c3d7..4e4cc8e74 100644
--- a/frontend/src/components/router-button/index.vue
+++ b/frontend/src/components/router-button/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-card class="router_card">
-        <div class="flex w-full flex-col md:justify-between md:flex-row">
+        <div class="flex w-full flex-col items-center md:justify-between md:flex-row">
             <el-radio-group v-model="activeName" @change="handleChange">
                 <el-radio-button
                     class="router_card_button"
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index e87a2b145..57333aff4 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -1392,14 +1392,18 @@ const message = {
         proxyHelper: 'After setting up the proxy server, it will be effective in the following scenarios:',
         proxyHelper1: 'Downloading and synchronizing installation packages from the app store (Professional)',
         proxyHelper2: 'System version upgrades and retrieving update information (Professional)',
-        proxyHelper4: 'Docker Daemon provides network access proxy (Professional)',
+        proxyHelper4: 'Docker network access will be done through a proxy server (Professional)',
         proxyHelper3: 'Verification and synchronization of system licenses',
         proxyType: 'Proxy Type',
         proxyUrl: 'Proxy Address',
         proxyPort: 'Proxy Port',
         proxyPasswdKeep: 'Remember Password',
         proxyDocker: 'Docker Proxy',
-        proxyDockerHelper: 'Docker Daemon provides network access proxy',
+        ProxyDockerHelper:
+            'Synchronize proxy server configuration to Docker, support offline server image pulling and other operations',
+        ConfDockerProxy: 'Configure Docker Proxy',
+        RestartNowHelper: 'Configuring Docker proxy requires restarting the Docker service.',
+        RestartNow: 'Restart immediately',
         systemIPWarning: 'The server address is not currently set. Please set it in the control panel first!',
         systemIPWarning1: 'The current server address is set to {0}, and quick redirection is not possible!',
         defaultNetwork: 'Network Card',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 260eeb62d..1c91e43cc 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1314,14 +1314,17 @@ const message = {
         proxyHelper: '設置代理伺服器後，將在以下場景中生效：',
         proxyHelper1: '應用商店的安裝包下載和同步（專業版功能）',
         proxyHelper2: '系統版本升級及獲取更新說明（專業版功能）',
-        proxyHelper4: 'Docker Daemon 提供網絡訪問代理（專業版功能）',
+        proxyHelper4: 'Docker 的網絡訪問將通過代理伺服器進行（專業版功能）',
         proxyHelper3: '系統許可證的驗證和同步',
         proxyType: '代理類型',
         proxyUrl: '代理地址',
         proxyPort: '代理端口',
         proxyPasswdKeep: '記住密碼',
         proxyDocker: 'Docker 代理',
-        proxyDockerHelper: '為 Docker Daemon 提供網絡訪問代理',
+        proxyDockerHelper: '將代理伺服器配寘同步至Docker，支持離線服務器拉取鏡像等操作',
+        confDockerProxy: '配寘Docker代理',
+        restartNowHelper: '配寘Docker代理需要重啓Docker服務。',
+        restartNow: '立即重啓',
         systemIPWarning: '當前未設置服務器地址，請先在面板設置中設置！',
         systemIPWarning1: '當前服務器地址設置為 {0}，無法快速跳轉！',
         defaultNetwork: '默認網卡',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index fa12e84e1..df91ec8f5 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1317,13 +1317,16 @@ const message = {
         proxyHelper1: '应用商店的安装包下载和同步（专业版功能）',
         proxyHelper2: '系统版本升级及获取更新说明（专业版功能）',
         proxyHelper3: '系统许可证的验证和同步',
-        proxyHelper4: 'Docker Daemon 提供网络访问代理（专业版功能）',
+        proxyHelper4: 'Docker 的网络访问将通过代理服务器进行（专业版功能）',
         proxyType: '代理类型',
         proxyUrl: '代理地址',
         proxyPort: '代理端口',
         proxyPasswdKeep: '记住密码',
         proxyDocker: 'Docker 代理',
-        proxyDockerHelper: '为 Docker Daemon 提供网络访问代理',
+        proxyDockerHelper: '将代理服务器配置同步至 Docker，支持离线服务器拉取镜像等操作',
+        confDockerProxy: '配置 Docker 代理',
+        restartNowHelper: '配置 Docker 代理需要重启 Docker 服务。',
+        restartNow: '立即重启',
         systemIPWarning: '当前未设置服务器地址，请先在面板设置中设置！',
         systemIPWarning1: '当前服务器地址设置为 {0}，无法快速跳转！',
         defaultNetwork: '默认网卡',
diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
index 2ef4e1f7a..659aac64c 100644
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@@ -24,19 +24,44 @@ html.dark {
     --panel-main-bg-color-11: #60626F;
 
     --panel-alert-error-bg-color: #54293A;
-    --panel-alert-error-text-color: #B22F48;
-    --panel-alert-error-hover-bg-color: #672A3D;
+    --panel-alert-error-text-color: #E2324F;
+    --panel-alert-error-hover-bg-color: #E9657B;
 
     --panel-alert-success-bg-color: #1E5146;
-    --panel-alert-success-text-color: #169262;
-    --panel-alert-success-hover-bg-color: #1D5849;
+    --panel-alert-success-text-color: #11B671;
+    --panel-alert-success-hover-bg-color: #4DC894;
 
     --panel-alert-warning-bg-color: #59472A;
-    --panel-alert-warning-text-color: #BB8A2E;
-    --panel-alert-warning-hover-bg-color: #6A5531;
+    --panel-alert-warning-text-color: #EDAC2C;
+    --panel-alert-warning-hover-bg-color: #F1C161;
 
-    --panel-alert-info-bg-color: var(--panel-main-bg-color-6);
-    --panel-alert-info-text-color: var(--panel-main-bg-color-3);
+    --el-color-success: #3fb950;
+    --el-color-success-light-5: #4DC894;
+    --el-color-success-light-8: #3fb950;
+    --el-color-success-light-9: #1E5146;
+
+    --el-color-warning: #EDAC2C;
+    --el-color-warning-light-5: #F1C161;
+    --el-color-warning-light-8: #EDAC2C;
+    --el-color-warning-light-9: #59472A;
+
+    --el-color-danger: #E2324F;
+    --el-color-danger-light-5: #E9657B;
+    --el-color-danger-light-8: #E2324F;
+    --el-color-danger-light-9: #54293A;
+
+    --el-color-error: #E2324F;
+    --el-color-error-light-5: #E9657B;
+    --el-color-error-light-8: #E2324F;
+    --el-color-error-light-9: #54293A;
+
+    --el-color-info: var(--panel-text-color-white);
+    --el-color-info-light-5: var(--panel-main-bg-color-3);
+    --el-color-info-light-8: var(--panel-text-color-white);
+    --el-color-info-light-9: var(--panel-main-bg-color-8);
+
+    --panel-alert-info-bg-color: var(--panel-main-bg-color-8);
+    --panel-alert-info-text-color: var(--panel-text-color-white);
     --panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);
 
     --panel-pie-bg-color: #434552;
@@ -52,10 +77,6 @@ html.dark {
     --el-color-primary-dark-2: var(--panel-color-primary);
     --el-scrollbar-bg-color: var(--panel-main-bg-color-8);
     --el-border-color-darker: var(--panel-main-bg-color-6);
-    --el-color-success:#238636;
-    --el-color-success-light-8: #3fb950;
-    --el-color-success-light-9: #3fb95030;
-
 
     --panel-border: 2px solid var(--panel-main-bg-color-8);
     --panel-button-active: var(--panel-main-bg-color-10);
@@ -92,6 +113,32 @@ html.dark {
 
     --el-text-color-placeholder: var(--panel-main-bg-color-4);
 
+    .el-message {
+        --el-color-primary: #409eff;
+        --el-color-primary-light-5: #a0cfff;
+        --el-color-primary-light-8: #d9ecff;
+        --el-color-primary-light-9: #ecf5ff;
+        --el-color-success: #67c23a;
+        --el-color-success-light-5: #b3e19d;
+        --el-color-success-light-8: #e1f3d8;
+        --el-color-success-light-9: #f0f9eb;
+        --el-color-warning: #e6a23c;
+        --el-color-warning-light-5: #f3d19e;
+        --el-color-warning-light-8: #faecd8;
+        --el-color-warning-light-9: #fdf6ec;
+        --el-color-danger: #f56c6c;
+        --el-color-danger-light-5: #fab6b6;
+        --el-color-danger-light-8: #fde2e2;
+        --el-color-error: #f56c6c;
+        --el-color-error-light-5: #fab6b6;
+        --el-color-error-light-8: #fde2e2;
+        --el-color-error-light-9: #fef0f0;
+        --el-color-info: #909399;
+        --el-color-info-light-5: #c8c9cc;
+        --el-color-info-light-8: #e9e9eb;
+        --el-color-info-light-9: #f4f4f5;
+    }
+
     .el-descriptions__content:not(.is-bordered-label) {
         color: var(--panel-main-bg-color-3);
     }
@@ -114,7 +161,7 @@ html.dark {
 
     .el-tag.el-tag--primary {
         --el-tag-bg-color: var(--panel-main-bg-color-9);
-        --el-tag-border-color: var(--panel-main-bg-color-8);
+        --el-tag-border-color: var(--panel-main-bg-color-11);
         --el-tag-hover-color: var(--panel-color-primary);
     }
 
@@ -272,7 +319,7 @@ html.dark {
     }
 
     .el-avatar {
-        --el-avatar-bg-color: var(--panel-main-bg-color-7) !important;
+        --el-avatar-bg-color: var(--panel-text-color-white) !important;
         box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
         border: 0.5px solid var(--panel-main-bg-color-7);
     }
diff --git a/frontend/src/views/app-store/index.vue b/frontend/src/views/app-store/index.vue
index 0a70c063b..1b3224d03 100644
--- a/frontend/src/views/app-store/index.vue
+++ b/frontend/src/views/app-store/index.vue
@@ -3,7 +3,7 @@
         <div v-if="showButton">
             <RouterButton :buttons="buttons">
                 <template #route-button>
-                    <div class="pr-5 mt-1">
+                    <div class="pr-5">
                         <el-badge is-dot :hidden="!canUpdate">
                             <el-button @click="sync" type="primary" plain :disabled="syncing">
                                 {{ $t('app.syncAppList') }}