perf: 优化主题色及样式 (#7002)

1Panel-dev · Nov 11, 2024 · 49c072b · 49c072b
1 parent 204f9f1
commit 49c072b
Show file tree

Hide file tree

Showing 17 changed files with 126 additions and 38 deletions.
diff --git a/frontend/src/components/log-file/index.vue b/frontend/src/components/log-file/index.vue
@@ -290,7 +290,7 @@ defineExpose({ changeTail, onDownload, clearLog });
     overflow-y: auto;
     overflow-x: auto;
     position: relative;
-    background-color: #1e1e1e;
+    background-color: var(--panel-logs-bg-color);
     margin-top: 10px;
 }
 

diff --git a/frontend/src/components/terminal/index.vue b/frontend/src/components/terminal/index.vue
@@ -47,12 +47,13 @@ const acceptParams = (props: WsProps) => {
 };
 
 const newTerm = () => {
+    const background = getComputedStyle(document.documentElement).getPropertyValue('--panel-terminal-bg-color').trim();
     term.value = new Terminal({
         lineHeight: 1.2,
         fontSize: 12,
         fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
         theme: {
-            background: '#000000',
+            background: background,
         },
         cursorBlink: true,
         cursorStyle: 'underline',
@@ -243,4 +244,7 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 100%;
 }
+:deep(.xterm) {
+    padding: 5px !important;
+}
 </style>
diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
@@ -49,6 +49,12 @@ html.dark {
     --el-color-primary-light-7: var(--panel-color-primary-light-7);
     --el-color-primary-light-8: var(--panel-color-primary-light-8);
     --el-color-primary-light-9: var(--panel-color-primary-light-9);
+    --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);
@@ -59,7 +65,10 @@ html.dark {
     --panel-footer-border: var(--panel-main-bg-color-7);
     --panel-text-color: var(--panel-main-bg-color-1);
     --panel-menu-bg-color: var(--panel-main-bg-color-10);
-    --panel-terminal-tag-bg-color:  var(--panel-main-bg-color-10);
+    --panel-terminal-tag-bg-color: var(--panel-main-bg-color-10);
+    --panel-terminal-tag-active-bg-color: var(--panel-main-bg-color-10);
+    --panel-terminal-bg-color: var(--panel-main-bg-color-10);
+    --panel-logs-bg-color: var(--panel-main-bg-color-9);
 
     --el-menu-item-bg-color: var(--panel-main-bg-color-10);
     --el-menu-item-bg-color-active: var(--panel-main-bg-color-8);
@@ -160,14 +169,14 @@ html.dark {
         --el-button-hover-border-color: var(--panel-main-bg-color-8);
     }
 
-    .el-button:hover {
+    .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:active {
+    .el-button--primary:active {
         --el-button-hover-text-color: var(--panel-text-color-white);
         --el-button-active-bg-color: var(--el-color-primary-light-3);
         --el-button-active-border-color: var(--el-color-primary-light-3);
@@ -197,7 +206,7 @@ html.dark {
     }
 
     .el-drawer .el-drawer__header span {
-        color: var(--el-menu-text-color);
+        color: var(--panel-text-color);
     }
 
     .el-dialog {
@@ -234,4 +243,65 @@ html.dark {
         --el-color-info: var(--panel-alert-info-text-color);
     }
 
+    .md-editor-dark {
+        --md-bk-color: var(--panel-main-bg-color-8);
+    }
+    .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);
+    }
+
+    .el-descriptions__title {
+        color: var(--el-text-color-primary);
+    }
+    .el-descriptions__content.el-descriptions__cell.is-bordered-content {
+        color: var(--el-text-color-primary);
+    }
+    .el-descriptions--large .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
+        padding: 12px 15px;
+        background-color: transparent;
+    }
+    .el-descriptions__body {
+        background-color: transparent;
+    }
+    .el-descriptions__label {
+        color: var(--el-color-primary) !important;
+        margin-right: 16px;
+    }
+
+    .el-avatar {
+        --el-avatar-bg-color: var(--panel-main-bg-color-7) !important;
+        box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
+        border: 0.5px solid var(--panel-main-bg-color-7);
+    }
+
+    .cm-editor {
+        background-color: var(--panel-main-bg-color-9);
+    }
+    .cm-gutters {
+        background-color: var(--panel-main-bg-color-8);
+    }
+
+    // scroll-bar
+    ::-webkit-scrollbar {
+        background-color: var(--el-scrollbar-bg-color) !important;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: var(--el-border-color-darker);
+    }
+
+    .app-warn {
+        span {
+            &:nth-child(2) {
+                color: var(--panel-color-primary);
+
+                &:hover {
+                    color: var(--panel-color-primary-light-3);
+                }
+            }
+        }
+    }
+
 }
diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss
@@ -25,6 +25,9 @@
     --el-color-primary-light-9: var(--panel-color-primary-light-9);
 
     --el-text-color-regular: #646a73;
+    --el-color-success:#238636;
+    --el-color-success-light-8: #3fb950;
+    --el-color-success-light-9: #3fb95030;
 }
 
 html {
@@ -44,6 +47,9 @@ html {
     --panel-button-bg-color: #ffffff;
     --panel-footer-border: #e4e7ed;
     --panel-terminal-tag-bg-color: #efefef;
+    --panel-terminal-tag-active-bg-color: #575758;
+    --panel-terminal-bg-color: #1e1e1e;
+    --panel-logs-bg-color: #1e1e1e;
 
     --panel-alert-bg: #e2e4ec;
     --panel-path-bg: #ffffff;

diff --git a/frontend/src/utils/xpack.ts b/frontend/src/utils/xpack.ts
@@ -115,6 +115,7 @@ export async function getXpackSettingForTheme() {
             globalStore.themeConfig.logoWithText = res2.data?.logoWithText;
             globalStore.themeConfig.favicon = res2.data?.favicon;
             globalStore.themeConfig.themeColor = res2.data?.themeColor;
+            globalStore.themeConfig.theme = res2.data?.theme || 'auto';
         } else {
             resetXSetting();
         }

diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
@@ -282,7 +282,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .header {
     padding-bottom: 10px;
 }

diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
@@ -251,11 +251,12 @@
             :close-on-click-modal="false"
             :destroy-on-close="true"
         >
-            <el-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info">
+            <div class="flex justify-center items-center gap-2 flex-wrap">
+                {{ $t('app.checkInstalledWarn', [dashboardName]) }}
                 <el-link icon="Position" @click="getAppDetail" type="primary">
                     {{ $t('database.goInstall') }}
                 </el-link>
-            </el-alert>
+            </div>
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="dashboardVisible = false">{{ $t('commons.button.cancel') }}</el-button>

diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
@@ -211,11 +211,12 @@
             :close-on-click-modal="false"
             :destroy-on-close="true"
         >
-            <el-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info">
+            <div class="flex justify-center items-center gap-2 flex-wrap">
+                {{ $t('app.checkInstalledWarn', [dashboardName]) }}
                 <el-link icon="Position" @click="getAppDetail" type="primary">
                     {{ $t('database.goInstall') }}
                 </el-link>
-            </el-alert>
+            </div>
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="dashboardVisible = false">{{ $t('commons.button.cancel') }}</el-button>

diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
@@ -123,11 +123,12 @@
             :close-on-click-modal="false"
             :destroy-on-close="true"
         >
-            <el-alert :closable="false" :title="$t('app.checkInstalledWarn', ['Redis-Commander'])" type="info">
+            <div class="flex justify-center items-center gap-2 flex-wrap">
+                {{ $t('app.checkInstalledWarn', ['Redis-Commander']) }}
                 <el-link icon="Position" @click="getAppDetail('redis-commander')" type="primary">
                     {{ $t('database.goInstall') }}
                 </el-link>
-            </el-alert>
+            </div>
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="commandVisible = false">{{ $t('commons.button.cancel') }}</el-button>

diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
@@ -722,7 +722,7 @@ onBeforeUnmount(() => {
 .system-label {
     font-weight: 400 !important;
     font-size: 14px !important;
-    color: #1f2329;
+    color: var(--panel-text-color);
 }
 
 .system-content {

diff --git a/frontend/src/views/host/terminal/command/index.vue b/frontend/src/views/host/terminal/command/index.vue
@@ -8,7 +8,7 @@
                 <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
                     <div class="flex flex-wrap gap-4">
                         <el-button type="primary" @click="onCreate()">
-                            {{ $t('commons.button.create') }} {{ $t('terminal.quickCommand') }}
+                            {{ $t('commons.button.create') }}{{ $t('terminal.quickCommand') }}
                         </el-button>
                         <el-button type="primary" plain @click="onOpenGroupDialog()">
                             {{ $t('terminal.group') }}

diff --git a/frontend/src/views/host/terminal/terminal/index.vue b/frontend/src/views/host/terminal/terminal/index.vue
@@ -44,7 +44,10 @@
                     </span>
                 </template>
                 <Terminal
-                    :style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
+                    :style="{
+                        height: `calc(100vh - ${loadHeight()})`,
+                        'background-color': `var(--panel-logs-bg-color)`,
+                    }"
                     :ref="'t-' + item.index"
                     :key="item.Refresh"
                 ></Terminal>
@@ -427,12 +430,10 @@ onMounted(() => {
         z-index: calc(var(--el-index-normal) + 1);
     }
     :deep(.el-tabs__item) {
-        color: #575758;
-        padding: 0 0px;
+        padding: 0;
     }
     :deep(.el-tabs__item.is-active) {
-        color: #ebeef5;
-        background-color: #575758;
+        background-color: var(--panel-terminal-tag-active-bg-color);
     }
 }
 

diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
@@ -241,3 +241,11 @@ onMounted(() => {
     search();
 });
 </script>
+<style scoped lang="scss">
+.tag-button {
+    &.no-active {
+        background: none;
+        border: none;
+    }
+}
+</style>
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
@@ -366,7 +366,8 @@ const loadDataFromDB = async () => {
     globalStore.setDefaultNetwork(res.data.defaultNetwork);
     globalStore.setOpenMenuTabs(res.data.menuTabs === 'enable');
     globalStore.updateLanguage(res.data.language);
-    globalStore.setThemeConfig({ ...themeConfig.value, theme: res.data.theme, panelName: res.data.panelName });
+    let theme = globalStore.themeConfig.theme === res.data.theme ? res.data.theme : globalStore.themeConfig.theme;
+    globalStore.setThemeConfig({ ...themeConfig.value, theme: theme, panelName: res.data.panelName });
 };
 
 onMounted(() => {

diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
@@ -303,6 +303,7 @@ const search = async () => {
             form.theme = xpackRes.data.theme || globalStore.themeConfig.theme;
             form.themeColor = JSON.parse(xpackRes.data.themeColor);
             globalStore.themeConfig.themeColor = xpackRes.data.themeColor;
+            globalStore.themeConfig.theme = form.theme;
             form.proxyDocker = xpackRes.data.proxyDocker;
         }
     } else {

diff --git a/frontend/src/views/setting/panel/theme-color/index.vue b/frontend/src/views/setting/panel/theme-color/index.vue
@@ -27,11 +27,11 @@
                                     </el-tooltip>
                                     <el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top">
                                         <el-button
-                                            color="#00CC00"
-                                            :class="form.light === '#00CC00' ? 'selected-white' : ''"
+                                            color="#238636"
+                                            :class="form.light === '#238636' ? 'selected-white' : ''"
                                             circle
                                             dark
-                                            @click="changeLightColor('#00CC00')"
+                                            @click="changeLightColor('#238636')"
                                         />
                                     </el-tooltip>
                                     <el-color-picker
@@ -68,11 +68,11 @@
                                         </el-tooltip>
                                         <el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top">
                                             <el-button
-                                                color="#00CC00"
-                                                :class="form.dark === '#00CC00' ? 'selected-white' : ''"
+                                                color="#238636"
+                                                :class="form.dark === '#238636' ? 'selected-white' : ''"
                                                 circle
                                                 dark
-                                                @click="changeDarkColor('#00CC00')"
+                                                @click="changeDarkColor('#238636')"
                                             />
                                         </el-tooltip>
                                         <el-color-picker
@@ -136,7 +136,7 @@ const predefineColors = ref([
     '#005eeb',
     '#3D8EFF',
     '#F0BE96',
-    '#00CC00',
+    '#238636',
     '#00ced1',
     '#c71585',
     '#ff4500',

diff --git a/frontend/src/views/website/runtime/php/create/index.vue b/frontend/src/views/website/runtime/php/create/index.vue
@@ -107,9 +107,7 @@
                                 ></EditParams>
                                 <el-form-item>
                                     <el-alert :title="$t('runtime.buildHelper')" type="warning" :closable="false" />
-                                </el-form-item>
-                                <el-form-item>
-                                    <el-alert type="info" :closable="false">
+                                    <span class="input-help">
                                         <span>{{ $t('runtime.extendHelper') }}</span>
                                         <el-link
                                             target="_blank"
@@ -119,19 +117,14 @@
                                             {{ $t('php.toExtensionsList') }}
                                         </el-link>
                                         <br />
-                                    </el-alert>
+                                    </span>
                                 </el-form-item>
                                 <div v-if="mode == 'edit'">
                                     <el-form-item>
                                         <el-checkbox v-model="runtime.rebuild">
                                             {{ $t('runtime.rebuild') }}
                                         </el-checkbox>
-                                    </el-form-item>
-                                    <el-form-item>
-                                        <el-alert type="info" :closable="false">
-                                            <span>{{ $t('runtime.rebuildHelper') }}</span>
-                                            <br />
-                                        </el-alert>
+                                        <span class="input-help">{{ $t('runtime.rebuildHelper') }}</span>
                                     </el-form-item>
                                 </div>
                             </div>