style: 黑金主题样式优化 (#5337)

frontend/src/components/system-upgrade/index.vue

@@ -2,25 +2,25 @@
     <div class="flx-center">
         <span v-if="props.footer">
             <el-button type="primary" link @click="toForum">
-                <span>{{ $t('setting.forum') }}</span>
+                <span class="font-normal">{{ $t('setting.forum') }}</span>
             </el-button>
             <el-divider direction="vertical" />
             <el-button type="primary" link @click="toDoc">
-                <span>{{ $t('setting.doc2') }}</span>
+                <span class="font-normal">{{ $t('setting.doc2') }}</span>
             </el-button>
             <el-divider direction="vertical" />
             <el-button type="primary" link @click="toGithub">
-                <span>{{ $t('setting.project') }}</span>
+                <span class="font-normal">{{ $t('setting.project') }}</span>
             </el-button>
             <el-divider direction="vertical" />
         </span>
         <el-button type="primary" link @click="toHalo">
-            {{ isProductPro ? $t('license.pro') : $t('license.community') }}
+            <span class="font-normal">{{ isProductPro ? $t('license.pro') : $t('license.community') }}</span>
         </el-button>
         <span class="version">{{ version }}</span>
         <el-badge is-dot style="margin-top: -3px" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
             <el-button type="primary" link @click="onLoadUpgradeInfo">
-                <span>({{ $t('setting.hasNewVersion') }})</span>
+                <span class="font-normal">({{ $t('setting.hasNewVersion') }})</span>
             </el-button>
         </el-badge>
         <el-button

frontend/src/lang/modules/en.ts

@@ -2114,11 +2114,11 @@ const message = {
             'Two files will be generated in this directory, the certificate file: fullchain.pem and the key file: privkey.pem',
         organizationDetail: 'Organization Details',
         fromWebsite: 'From Websites',
-        dnsMauanlHelper: '手動解析模式需要在建立完之後點選申請按鈕取得 DNS 解析值',
-        httpHelper: 'HTTP 模式需要安裝 OpenResty',
-        buypassHelper: 'Buypass 大陸地區無法訪問',
-        googleHelper:
-            "<a target=“_blank” href='https://cloud.google.com/certificate-manager/docs/public-ca-tutorial?hl=zh-cn'>如何取得EAB HmacKey 和EAB kid</a > ",
+        dnsMauanlHelper:
+            'In manual resolution mode, you need to click the apply button after creation to obtain the DNS resolution value',
+        httpHelper: 'HTTP mode requires OpenResty to be installed',
+        buypassHelper: 'Buypass is not accessible in mainland China',
+        googleHelper: 'How to get EAB HmacKey and EAB kid',
         googleCloudHelper: 'Google Cloud API is not accessible in most parts of mainland China',
         httpHelper2: 'Unable to apply for a generic domain name certificate in HTTP mode',
         skipDNSCheck: 'Skip DNS check',

frontend/src/lang/modules/tw.ts

@@ -1294,8 +1294,7 @@ const message = {
         scArchive: '歸檔存儲，適用於極低訪問頻率（例如半年訪問1次）的業務場景。',
         scDeep_Archive: '深度歸檔存儲，適用於極低訪問頻率（例如1年訪問1~2次）的業務場景。',
         archiveHelper: '歸檔存儲的文件無法直接下載，需要先在對應的雲服務商網站進行恢復操作，請謹慎使用！',
-        backupAlert:
-            "理論上只要雲廠商兼容 S3 協議，就可以用現有的亞馬遜 S3 雲存儲來備份，具體配置參考 <a target=「_blank」 href='https://1panel.cn/docs/user_manual/settings/#3'>官方文檔</a> ",
+        backupAlert: '理論上只要雲廠商兼容 S3 協議，就可以用現有的亞馬遜 S3 雲存儲來備份，具體配置參考 ',
         domain: '加速域名',
         backupAccount: '備份賬號',
         loadBucket: '獲取桶',
@@ -1976,8 +1975,7 @@ const message = {
         dnsMauanlHelper: '手動解析模式需要在建立完之後點選申請按鈕取得 DNS 解析值',
         httpHelper: 'HTTP 模式需要安裝 OpenResty',
         buypassHelper: 'Buypass 大陸地區無法訪問',
-        googleHelper:
-            "<a target=“_blank” href='https://cloud.google.com/certificate-manager/docs/public-ca-tutorial?hl=zh-cn'>如何取得EAB HmacKey 和EAB kid</a > ",
+        googleHelper: '如何取得EAB HmacKey 和EAB kid',
         googleCloudHelper: 'Google Cloud API 大陸大部分地區無法存取',
         httpHelper2: 'HTTP 模式無法申請泛網域憑證',
         skipDNSCheck: '跳過 DNS 校驗',

frontend/src/lang/modules/zh.ts

@@ -1295,8 +1295,7 @@ const message = {
         scArchive: '归档存储，适用于极低访问频率（例如半年访问1次）的业务场景。',
         scDeep_Archive: '深度归档存储，适用于极低访问频率（例如1年访问1~2次）的业务场景。',
         archiveHelper: '归档存储的文件无法直接下载，需要先在对应的云服务商网站进行恢复操作，请谨慎使用！',
-        backupAlert:
-            "理论上只要云厂商兼容 S3 协议，就可以用现有的亚马逊 S3 云存储来备份，具体配置参考 <a target=“_blank” href='https://1panel.cn/docs/user_manual/settings/#3'>官方文档</a> ",
+        backupAlert: '理论上只要云厂商兼容 S3 协议，就可以用现有的亚马逊 S3 云存储来备份，具体配置参考',
         domain: '加速域名',
         backupAccount: '备份账号',
         loadBucket: '获取桶',
@@ -1977,8 +1976,7 @@ const message = {
         dnsMauanlHelper: '手动解析模式需要在创建完之后点击申请按钮获取 DNS 解析值',
         httpHelper: 'HTTP 模式需要安装 OpenResty',
         buypassHelper: 'Buypass 大陆地区无法访问',
-        googleHelper:
-            "<a target=“_blank” href='https://cloud.google.com/certificate-manager/docs/public-ca-tutorial?hl=zh-cn'>如何获取 EAB HmacKey 和 EAB kid</a> ",
+        googleHelper: '如何获取 EAB HmacKey 和 EAB kid',
         googleCloudHelper: 'Google Cloud API 大陆大部分地区无法访问',
         httpHelper2: 'HTTP 模式无法申请泛域名证书',
         skipDNSCheck: '跳过 DNS 校验',

frontend/src/styles/element-dark.scss

@@ -44,7 +44,7 @@ html.dark {
         --el-tag-border-color: var(--el-color-danger);
     }
     .el-card {
-        --el-card-bg-color: #111417;
+        --el-card-bg-color: rgb(35, 35, 35);
         color: #ffffff;
         border: 1px solid var(--el-card-border-color) !important;
     }

frontend/src/views/host/file-management/index.vue

@@ -19,7 +19,6 @@
                 v-show="!searchableStatus"
                 tabindex="0"
                 @click="searchableStatus = true"
-                :class="globalStore.$state.themeConfig.theme === 'light' && 'bg-white'"
                 class="address-bar shadow-md rounded-md px-4 py-2 flex items-center flex-grow"
             >
                 <div ref="pathRef" class="w-full">

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

@@ -78,6 +78,7 @@ onMounted(() => {
     }
     span {
         line-height: 20px;
+        font-weight: 400;
     }
 }
 </style>

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

@@ -35,7 +35,17 @@
 
                 <el-alert type="info" :closable="false" class="common-div">
                     <template #title>
-                        <span v-html="$t('setting.backupAlert')"></span>
+                        <span>
+                            {{ $t('setting.backupAlert') }}
+                            <el-link
+                                class="ml-1.5"
+                                type="primary"
+                                target="_blank"
+                                href="https://1panel.cn/docs/user_manual/settings/#3"
+                            >
+                                {{ $t('setting.doc') }}
+                            </el-link>
+                        </span>
                     </template>
                 </el-alert>
 
@@ -736,8 +746,8 @@ onMounted(() => {
     margin: 12px 0;
     border-top: 1px var(--el-border-color) var(--el-border-style);
 }
-.alert {
-    background-color: rgba(0, 94, 235, 0.03);
+.alert-span {
+    color: var(--el-color-primary);
 }
 
 .common-div {

frontend/src/views/website/ssl/acme-account/create/index.vue

@@ -45,7 +45,14 @@
                         <el-form-item label="EAB HmacKey" prop="eabHmacKey">
                             <el-input v-model.trim="account.eabHmacKey"></el-input>
                         </el-form-item>
-                        <span v-html="$t('ssl.googleHelper')"></span>
+                        <el-link
+                            class="ml-1.5"
+                            type="primary"
+                            target="_blank"
+                            href="https://cloud.google.com/certificate-manager/docs/public-ca-tutorial?hl=zh-cn"
+                        >
+                            {{ $t('ssl.googleHelper') }}
+                        </el-link>
                     </div>
                 </el-form>
             </el-col>