style: 主题样式优化 (#7037)

2024-11-23 18:49:21 +08:00 · 2024-11-13 22:16:01 +08:00 · 2024-11-13 22:16:01 +08:00 · 6e690cc6f2
commit 6e690cc6f2
parent 911b4076f5
11 changed files with 259 additions and 103 deletions
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@ -2,17 +2,17 @@
    <div>
        <div class="flex w-full flex-col gap-2 md:flex-row items-center">
            <div class="flex flex-wrap items-center" v-if="props.footer">
-                <el-button type="primary" link @click="toForum">
+                <el-link type="primary" :underline="false" @click="toForum">
                    <span class="font-normal">{{ $t('setting.forum') }}</span>
-                </el-button>
+                </el-link>
                <el-divider direction="vertical" />
-                <el-button type="primary" link @click="toDoc">
+                <el-link type="primary" :underline="false" @click="toDoc">
                    <span class="font-normal">{{ $t('setting.doc2') }}</span>
-                </el-button>
+                </el-link>
                <el-divider direction="vertical" />
-                <el-button type="primary" link @click="toGithub">
+                <el-link type="primary" :underline="false" @click="toGithub">
                    <span class="font-normal">{{ $t('setting.project') }}</span>
-                </el-button>
+                </el-link>
                <el-divider v-if="!mobile" direction="vertical" />
            </div>
            <div class="flex flex-wrap items-center">
@ -27,14 +27,14 @@
                        （{{ $t('setting.hasNewVersion') }}）
                    </el-link>
                </el-badge>
-                <el-button
+                <el-link
                    v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
                    type="primary"
-                    link
+                    :underline="false"
                    @click="onLoadUpgradeInfo"
                >
                    （{{ $t('setting.upgradeCheck') }}）
-                </el-button>
+                </el-link>
                <el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">
                    {{ $t('setting.upgrading') }}
                </el-tag>
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@ -464,3 +464,24 @@ html {
 .monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
    background-color: #111417;
 }
+.check-label{
+    background: var(--panel-main-bg-color-10) !important;
+    .check-label-a {
+        color: var(--panel-color-primary);
+    }
+}
+.check-content {
+    background: var(--panel-main-bg-color-10);
+    pre {
+        margin: 0;
+        width: 350px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+
+.el-descriptions {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@ -22,19 +22,24 @@ html.dark {
    --panel-main-bg-color-9: #2E313D;
    --panel-main-bg-color-10: #242633;
    --panel-main-bg-color-11: #60626F;
+    --panel-main-bg-color-12: #000000;

-    --panel-alert-error-bg-color: #54293A;
-    --panel-alert-error-text-color: #E2324F;
+    --panel-alert-error-bg-color: #fef0f0;
+    --panel-alert-error-text-color: #f56c6c;
    --panel-alert-error-hover-bg-color: #E9657B;

-    --panel-alert-success-bg-color: #1E5146;
-    --panel-alert-success-text-color: #11B671;
+    --panel-alert-success-bg-color: #e1f3d8;
+    --panel-alert-success-text-color: #67c23a;
    --panel-alert-success-hover-bg-color: #4DC894;

    --panel-alert-warning-bg-color: #59472A;
    --panel-alert-warning-text-color: #EDAC2C;
    --panel-alert-warning-hover-bg-color: #F1C161;

+    --panel-alert-info-bg-color: var(--panel-main-bg-color-7);
+    --panel-alert-info-text-color: var(--panel-text-color-white);
+    --panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);
+
    --el-color-success: #3fb950;
    --el-color-success-light-5: #4DC894;
    --el-color-success-light-8: #3fb950;
@ -55,14 +60,11 @@ html.dark {
    --el-color-error-light-8: #E2324F;
    --el-color-error-light-9: #54293A;

-    --el-color-info: var(--panel-text-color-white);
+    --el-color-info: var(--panel-main-bg-color-2);
    --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-8: var(--panel-color-primary);
    --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;
    --panel-text-color-white: #ffffff;
@ -78,7 +80,8 @@ html.dark {
    --el-scrollbar-bg-color: var(--panel-main-bg-color-8);
    --el-border-color-darker: var(--panel-main-bg-color-6);

-    --panel-border: 2px solid var(--panel-main-bg-color-8);
+    --panel-border: 1px solid var(--panel-main-bg-color-8);
+    --panel-border-color: var(--panel-main-bg-color-8);
    --panel-button-active: var(--panel-main-bg-color-10);
    --panel-button-text-color: var(--panel-main-bg-color-10);
    --panel-button-bg-color:  var(--panel-color-primary);
@ -113,6 +116,9 @@ html.dark {

    --el-text-color-placeholder: var(--panel-main-bg-color-4);

+    .el-radio-button {
+        --el-radio-button-checked-text-color: var(--panel-main-bg-color-10);
+    }
    .el-descriptions__content:not(.is-bordered-label) {
        color: var(--panel-main-bg-color-3);
    }
@ -180,21 +186,52 @@ html.dark {
    }

    .el-button--primary {
+        --el-button-text-color: var(--panel-main-bg-color-10);
        --el-button-hover-link-text-color: var(--panel-color-primary-light-1);
+        &.tag-button,
+        &.brief-button {
+            --el-button-text-color: var(--panel-main-bg-color-10);
+            --el-button-hover-text-color: var(--el-color-white);
+            --el-button-hover-border-color:var(--el-color-primary);
+            --el-button-hover-bg-color: var(--el-color-primary);
+        }
+
+        &.app-button {
+            --el-button-text-color: var(--el-color-primary);
+        }
+
+        &.h-app-button {
+            --el-button-text-color: var(--panel-main-bg-color-10);
+            --el-button-hover-text-color: var(--el-color-white);
+            --el-button-hover-border-color: var(--el-color-primary);
+            --el-button-hover-bg-color: var(--el-color-primary);
+        }
    }

    .el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link {
+        --el-button-text-color: var(--panel-main-bg-color-2);
        --el-button-bg-color: var(--panel-main-bg-color-9);
        --el-button-border-color: var(--panel-main-bg-color-8);
        --el-button-hover-bg-color: var(--panel-main-bg-color-9);
        --el-button-hover-border-color: var(--panel-main-bg-color-8);
    }

+    .el-button--primary.is-text,.el-button--primary.is-link {
+        --el-button-text-color: var(--panel-color-primary);
+    }
+
    .el-button--primary:hover {
-        --el-button-hover-text-color: var(--panel-text-color-white);
-        --el-button-border-color: var(--el-color-primary-light-3);
-        --el-button-hover-bg-color: var(--el-color-primary-light-3);
-        --el-button-hover-border-color: var(--el-color-primary-light-3);
+        --el-button-hover-text-color: var(--panel-main-bg-color-2);
+        --el-button-border-color: var(--el-color-primary);
+        --el-button-hover-bg-color: var(--panel-main-bg-color-9);
+        --el-button-hover-border-color: var(--panel-main-bg-color-8);
+    }
+
+    .el-button--primary.is-plain:hover {
+        --el-button-hover-text-color: var(--panel-main-bg-color-10);
+        --el-button-border-color: var(--el-color-primary);
+        --el-button-hover-bg-color: var(--el-color-primary);
+        --el-button-hover-border-color: var(--el-color-primary);
    }

    .el-button--primary:active {
@ -231,7 +268,7 @@ html.dark {
    }

    .el-dialog {
-        background-color: var(--panel-main-bg-color-8);
+        background-color: var(--panel-main-bg-color-9);
        border: 1px solid var(--panel-border-color);

        .el-dialog__header {
@ -265,15 +302,24 @@ html.dark {
    }

    .md-editor-dark {
-        --md-bk-color: var(--panel-main-bg-color-8);
+        --md-bk-color: var(--panel-main-bg-color-9);
    }
+
    .md-editor-dark .md-editor-preview {
        --md-theme-color: var(--el-text-color-primary);
    }
+
    .md-editor-dark .default-theme a {
        --md-theme-link-color: var(--el-color-primary);
    }

+    .md-editor-dark .default-theme pre code {
+        background-color: var(--panel-main-bg-color-8);
+    }
+    .md-editor-dark .default-theme pre:before {
+        background-color: var(--panel-main-bg-color-10);
+    }
+
    .el-descriptions__title {
        color: var(--el-text-color-primary);
    }
@ -297,12 +343,20 @@ html.dark {
        box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
        border: 0.5px solid var(--panel-main-bg-color-7);
    }
+    .el-drawer {
+        .cm-editor {
+            background-color: var(--panel-main-bg-color-10);
+        }
+        .cm-gutters {
+            background-color: var(--panel-main-bg-color-10);
+        }
+    }

    .cm-editor {
        background-color: var(--panel-main-bg-color-9);
    }
    .cm-gutters {
-        background-color: var(--panel-main-bg-color-8);
+        background-color: var(--panel-main-bg-color-9);
    }

    // scroll-bar
@ -312,6 +366,9 @@ html.dark {
    ::-webkit-scrollbar-thumb {
        background-color: var(--el-border-color-darker);
    }
+    ::-webkit-scrollbar-corner {
+        background-color: var(--el-scrollbar-bg-color);
+    }

    .app-warn {
        span {
@ -325,4 +382,61 @@ html.dark {
        }
    }

+    .el-table {
+        --el-table-bg-color: var(--el-bg-color);
+        --el-table-tr-bg-color: var(--el-bg-color);
+        --el-table-header-bg-color: var(--el-bg-color);
+        --el-table-border: 1px solid var(--panel-main-bg-color-8);
+        --el-table-border-color: var(--panel-main-bg-color-8);
+    }
+
+    .el-message-box {
+        --el-messagebox-title-color: var(--el-menu-text-color);
+        border: 1px solid var(--panel-border-color);
+    }
+
+    .el-popover {
+        --el-popover-title-text-color: var(--panel-main-bg-color-2);
+        border: 1px solid var(--panel-border-color);
+    }
+
+    .app-wrapper {
+        .main-container {
+            background-color: var(--panel-main-bg-color-9) !important;
+        }
+        .app-footer {
+            background-color: var(--panel-main-bg-color-9) !important;
+            border-top: var(--panel-border);
+        }
+        .mobile-header {
+            background-color: var(--panel-main-bg-color-9) !important;
+            border-bottom: var(--panel-border);
+            color: #ffffff;
+        }
+    }
+
+    .router_card_button {
+        .el-radio-button__inner {
+            background: none !important;
+        }
+        .el-radio-button__original-radio:checked + .el-radio-button__inner {
+            color: var(--panel-main-bg-color-10);
+            background-color: var(--panel-color-primary) !important;
+            box-shadow: none !important;
+            border: none !important;
+        }
+    }
+
+    .el-date-table td.in-range .el-date-table-cell {
+        background-color: var(--panel-main-bg-color-8);
+    }
+
+    .el-collapse-item__header {
+        color: #ffffff;
+        background-color: var(--panel-main-bg-color-10) !important;
+    }
+
+    .el-loading-mask {
+        background-color: rgba(36, 38, 51, 0.8);
+    }
 }
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@ -162,7 +162,7 @@ defineExpose({
 });
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
 .brief {
    .name {
        span {
@ -183,6 +183,7 @@ defineExpose({
    .icon {
        width: 180px;
        height: 180px;
+        background-color: #ffffff;
    }

    .version {
@ -196,4 +197,8 @@ defineExpose({
        }
    }
 }
+
+:deep(.md-editor-dark) {
+    background-color: var(--panel-main-bg-color-9);
+}
 </style>
--- a/frontend/src/views/app-store/installed/check/index.vue
+++ b/frontend/src/views/app-store/installed/check/index.vue
@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
+    <el-dialog v-model="open" :title="$t('app.checkTitle')" width="40%" :close-on-click-modal="false">
        <el-row>
            <el-col :span="20" :offset="2" v-if="open">
                <el-alert
@ -9,11 +9,18 @@
                    show-icon
                    :closable="false"
                />
-                <br />
-                <el-descriptions border :column="1">
-                    <el-descriptions-item v-for="(item, key) in map" :key="key">
+                <el-descriptions :column="1" border>
+                    <el-descriptions-item
+                        v-for="(item, key) in map"
+                        :key="key"
+                        label-class-name="check-label"
+                        class-name="check-content"
+                        min-width="60px"
+                    >
                        <template #label>
-                            <a href="javascript:void(0);" @click="toPage(item[0])">{{ $t('app.' + item[0]) }}</a>
+                            <a href="javascript:void(0);" class="check-label-a" @click="toPage(item[0])">
+                                {{ $t('app.' + item[0]) }}
+                            </a>
                        </template>
                        <span class="resources">
                            {{ map.get(item[0]).toString() }}
--- a/frontend/src/views/database/mysql/check/index.vue
+++ b/frontend/src/views/database/mysql/check/index.vue
@ -15,10 +15,12 @@
                    show-icon
                    :closable="false"
                />
-                <el-descriptions :column="1" border>
-                    <el-descriptions-item label-class-name="label" class-name="content" min-width="60px">
+                <el-descriptions border :column="1">
+                    <el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
                        <template #label>
-                            <a href="javascript:void(0);" class="content-a" @click="toApp()">{{ $t('app.app') }}</a>
+                            <a href="javascript:void(0);" class="check-label-a" @click="toApp()">
+                                {{ $t('app.app') }}
+                            </a>
                        </template>
                        <pre>{{ installData.join('\n') }}</pre>
                    </el-descriptions-item>
@ -40,7 +42,6 @@ let open = ref(false);

 const acceptParams = (props: InstallProps) => {
    installData.value = props.items;
-    installData.value.push('sdsfhjdghjdgfhsdgfhjsgfkhjsdgfhjasgdfhjasgdfjhsagdfhjsagdfashdfgaskhjdfgaskjhdf');
    open.value = true;
 };

@ -52,25 +53,3 @@ defineExpose({
    acceptParams,
 });
 </script>
-
-<style scoped>
-:deep(.label) {
-    background: var(--panel-main-bg-color-10) !important;
-}
-:deep(.content) {
-    background: var(--panel-main-bg-color-10);
-}
-:deep(.content-a) {
-    color: var(--panel-color-primary);
-}
-pre {
-    margin: 0;
-    width: 350px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-:deep(.el-descriptions) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-</style>
--- a/frontend/src/views/database/postgresql/check/index.vue
+++ b/frontend/src/views/database/postgresql/check/index.vue
@ -2,7 +2,7 @@
    <el-dialog
        v-model="open"
        :title="$t('app.checkTitle')"
-        width="50%"
+        width="40%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
    >
@ -15,13 +15,14 @@
                    show-icon
                    :closable="false"
                />
-                <br />
                <el-descriptions border :column="1">
-                    <el-descriptions-item>
+                    <el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
                        <template #label>
-                            <a href="javascript:void(0);" @click="toApp()">{{ $t('app.app') }}</a>
+                            <a href="javascript:void(0);" class="check-label-a" @click="toApp()">
+                                {{ $t('app.app') }}
+                            </a>
                        </template>
-                        {{ installData.join(',') }}
+                        <pre>{{ installData.join('\n') }}</pre>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
--- a/frontend/src/views/database/redis/check/index.vue
+++ b/frontend/src/views/database/redis/check/index.vue
@ -2,7 +2,7 @@
    <el-dialog
        v-model="open"
        :title="$t('app.checkTitle')"
-        width="50%"
+        width="40%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
    >
@ -15,13 +15,14 @@
                    show-icon
                    :closable="false"
                />
-                <br />
                <el-descriptions border :column="1">
-                    <el-descriptions-item>
+                    <el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
                        <template #label>
-                            <a href="javascript:void(0);" @click="toApp()">{{ $t('app.app') }}</a>
+                            <a href="javascript:void(0);" class="check-label-a" @click="toApp()">
+                                {{ $t('app.app') }}
+                            </a>
                        </template>
-                        {{ installData.join(',') }}
+                        <pre>{{ installData.join('\n') }}</pre>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
--- a/frontend/src/views/setting/snapshot/snap_status/index.vue
+++ b/frontend/src/views/setting/snapshot/snap_status/index.vue
@ -14,69 +14,89 @@
        <div v-loading="loading">
            <el-alert :type="loadStatus(status.panelInfo)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.panelInfo)" link>{{ $t('setting.panelInfo') }}</el-button>
-                    <div v-if="showErrorMsg(status.panelInfo)" class="top-margin">
-                        <span class="err-message">{{ status.panelInfo }}</span>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.panelInfo)" class="w-4 pr-1" />
+                        {{ $t('setting.panelInfo') }}
+                        <div v-if="showErrorMsg(status.panelInfo)" class="top-margin">
+                            <span class="err-message">{{ status.panelInfo }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
            <el-alert :type="loadStatus(status.panel)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.panel)" link>{{ $t('setting.panelBin') }}</el-button>
-                    <div v-if="showErrorMsg(status.panel)" class="top-margin">
-                        <span class="err-message">{{ status.panel }}</span>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.panel)" class="w-4 pr-1" />
+                        {{ $t('setting.panelBin') }}
+                        <div v-if="showErrorMsg(status.panel)" class="top-margin">
+                            <span class="err-message">{{ status.panel }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
            <el-alert :type="loadStatus(status.daemonJson)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.daemonJson)" link>{{ $t('setting.daemonJson') }}</el-button>
-                    <div v-if="showErrorMsg(status.daemonJson)" class="top-margin">
-                        <span class="err-message">{{ status.daemonJson }}</span>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.daemonJson)" class="w-4 pr-1" />
+                        {{ $t('setting.daemonJson') }}
+                        <div v-if="showErrorMsg(status.daemonJson)" class="top-margin">
+                            <span class="err-message">{{ status.daemonJson }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
            <el-alert :type="loadStatus(status.appData)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.appData)" link>{{ $t('setting.appData') }}</el-button>
-                    <div v-if="showErrorMsg(status.appData)" class="top-margin">
-                        <span class="err-message">{{ status.appData }}</span>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.appData)" class="w-4 pr-1" />
+                        {{ $t('setting.appData') }}
+                        <div v-if="showErrorMsg(status.appData)" class="top-margin">
+                            <span class="err-message">{{ status.appData }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
            <el-alert :type="loadStatus(status.backupData)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.backupData)" link>{{ $t('setting.backupData') }}</el-button>
-                    <div v-if="showErrorMsg(status.backupData)" class="top-margin">
-                        <span class="err-message">{{ status.backupData }}</span>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.backupData)" class="w-4 pr-1" />
+                        {{ $t('setting.backupData') }}
+                        <div v-if="showErrorMsg(status.backupData)" class="top-margin">
+                            <span class="err-message">{{ status.backupData }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
            <el-alert :type="loadStatus(status.panelData)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.panelData)" link>{{ $t('setting.panelData') }}</el-button>
-                    <div v-if="showErrorMsg(status.panelData)" class="top-margin">
-                        <span class="err-message">{{ status.panelData }}</span>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.panelData)" class="w-4 pr-1" />
+                        {{ $t('setting.panelData') }}
+                        <div v-if="showErrorMsg(status.panelData)" class="top-margin">
+                            <span class="err-message">{{ status.panelData }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
            <el-alert :type="loadStatus(status.compress)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.compress)" link>
-                        {{ $t('setting.compress') }} {{ status.size }}
-                    </el-button>
-                    <div v-if="showErrorMsg(status.compress)" class="top-margin">
-                        <span class="err-message">{{ status.compress }}</span>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.compress)" class="w-4 pr-1" />
+                        {{ $t('setting.compress') }}
+                        <div v-if="showErrorMsg(status.compress)" class="top-margin">
+                            <span class="err-message">{{ status.compress }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
            <el-alert :type="loadStatus(status.upload)" :closable="false">
                <template #title>
-                    <el-button :icon="loadIcon(status.upload)" link>
+                    <div class="flex flex-wrap items-center justify-start">
+                        <component :is="loadIcon(status.upload)" class="w-4 pr-1" />
                        {{ $t('setting.upload') }}
-                    </el-button>
-                    <div v-if="showErrorMsg(status.upload)" class="top-margin">
-                        <span class="err-message">{{ status.upload }}</span>
+                        <div v-if="showErrorMsg(status.upload)" class="top-margin">
+                            <span class="err-message">{{ status.upload }}</span>
+                        </div>
                    </div>
                </template>
            </el-alert>
@ -98,6 +118,7 @@
 import { Setting } from '@/api/interface/setting';
 import { loadSnapStatus, snapshotCreate } from '@/api/modules/setting';
 import { nextTick, onBeforeUnmount, reactive, ref } from 'vue';
+import { Loading, Check, Close } from '@element-plus/icons-vue';

 const status = reactive<Setting.SnapshotStatus>({
    panel: '',
@ -285,11 +306,11 @@ const loadIcon = (status: string) => {
        case 'Running':
        case 'Waiting':
        case 'Uploading':
-            return 'Loading';
+            return Loading;
        case 'Done':
-            return 'Check';
+            return Check;
        default:
-            return 'Close';
+            return Close;
    }
 };

--- a/frontend/src/views/setting/snapshot/status/index.vue
+++ b/frontend/src/views/setting/snapshot/status/index.vue
@ -230,7 +230,7 @@ defineExpose({
    border-top: 1px var(--el-border-color) var(--el-border-style);
 }
 .alert {
-    background-color: rgba(0, 94, 235, 0.03);
+    background-color: var(--panel-main-bg-color-10);
 }

 .card-title {
--- a/frontend/src/views/website/runtime/php/check/index.vue
+++ b/frontend/src/views/website/runtime/php/check/index.vue
@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
+    <el-dialog v-model="open" :title="$t('app.checkTitle')" width="40%" :close-on-click-modal="false">
        <el-row>
            <el-col :span="20" :offset="2" v-if="open">
                <el-alert
@ -9,11 +9,18 @@
                    show-icon
                    :closable="false"
                />
-                <br />
                <el-descriptions border :column="1">
-                    <el-descriptions-item v-for="(item, key) in map" :key="key">
+                    <el-descriptions-item
+                        v-for="(item, key) in map"
+                        :key="key"
+                        label-class-name="check-label"
+                        class-name="check-content"
+                        min-width="60px"
+                    >
                        <template #label>
-                            <a href="javascript:void(0);" @click="toPage(item[0])">{{ $t('app.' + item[0]) }}</a>
+                            <a href="javascript:void(0);" class="check-label-a" @click="toPage(item[0])">
+                                {{ $t('app.' + item[0]) }}
+                            </a>
                        </template>
                        <span class="resources">
                            {{ map.get(item[0]).toString() }}