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

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>

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;
+}

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-bg-color: #fef0f0;
-    --panel-alert-error-text-color: #E2324F;
+    --panel-alert-error-text-color: #f56c6c;
     --panel-alert-error-hover-bg-color: #E9657B;
 
-    --panel-alert-success-bg-color: #1E5146;
+    --panel-alert-success-bg-color: #e1f3d8;
-    --panel-alert-success-text-color: #11B671;
+    --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-hover-text-color: var(--panel-main-bg-color-2);
-        --el-button-border-color: var(--el-color-primary-light-3);
+        --el-button-border-color: var(--el-color-primary);
-        --el-button-hover-bg-color: var(--el-color-primary-light-3);
+        --el-button-hover-bg-color: var(--panel-main-bg-color-9);
-        --el-button-hover-border-color: var(--el-color-primary-light-3);
+        --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);
+    }
 }

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>

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 :column="1" border>
-                <el-descriptions border :column="1">
+                    <el-descriptions-item
-                    <el-descriptions-item v-for="(item, key) in map" :key="key">
+                        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() }}

frontend/src/views/database/mysql/check/index.vue

@@ -15,10 +15,12 @@
                     show-icon
                     :closable="false"
                 />
-                <el-descriptions :column="1" border>
+                <el-descriptions border :column="1">
-                    <el-descriptions-item label-class-name="label" class-name="content" min-width="60px">
+                    <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>

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>

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>

frontend/src/views/setting/snapshot/snap_status/index.vue

@@ -14,70 +14,90 @@
         <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 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 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 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 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 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 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>
+                    <div class="flex flex-wrap items-center justify-start">
-                        {{ $t('setting.compress') }} {{ status.size }}
+                        <component :is="loadIcon(status.compress)" class="w-4 pr-1" />
-                    </el-button>
+                        {{ $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>
+                    </div>
                 </template>
             </el-alert>
         </div>
@@ -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;
     }
 };
 

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 {

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() }}