feat: 增加自定义主题颜色，调整默认暗色主题配色

1Panel-dev · Nov 6, 2024 · 421d833 · 421d833
1 parent eb01649
commit 421d833
Show file tree

Hide file tree

Showing 26 changed files with 631 additions and 478 deletions.
diff --git a/frontend/src/assets/images/menu-bg.svg b/frontend/src/assets/images/menu-bg.svg
diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
@@ -88,9 +88,9 @@
             <LayoutContent :title="getTitle(key)" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div class="flex flex-col gap-4 items-cetner justify-center w-full sm:flex-row">
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <div>{{ $t('app.checkInstalledWarn', [data.app]) }}</div>
-                            <span @click="goRouter(key)" class="flex items-cetner justify-center">
+                            <span @click="goRouter(key)" class="flex items-center justify-center gap-0.5">
                                 <el-icon class="flex items-center justify-center"><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>

diff --git a/frontend/src/components/license-import/index.vue b/frontend/src/components/license-import/index.vue
@@ -48,7 +48,7 @@ import { UploadFileData } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
 import { useTheme } from '@/hooks/use-theme';
-import { getXpackSetting } from '@/utils/xpack';
+import { getXpackSetting, initFavicon } from '@/utils/xpack';
 const globalStore = GlobalStore();
 
 const { switchTheme } = useTheme();
@@ -90,10 +90,11 @@ const submit = async () => {
             globalStore.isProductPro = true;
             const xpackRes = await getXpackSetting();
             if (xpackRes) {
-                globalStore.themeConfig.isGold = xpackRes.data.theme === 'dark-gold';
+                globalStore.themeConfig.themeColor = xpackRes.data.themeColor;
             }
             loading.value = false;
             switchTheme();
+            initFavicon();
             uploadRef.value!.clearFiles();
             uploaderFiles.value = [];
             open.value = false;

diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
@@ -94,8 +94,9 @@ onMounted(() => {
     }
 
     .el-radio-button__original-radio:checked + .el-radio-button__inner {
-        color: $primary-color;
-        border-color: $primary-color !important;
+        color: var(--panel-button-text-color) !important;
+        background-color: var(--panel-button-bg-color) !important;
+        border-color: var(--panel-button-active) !important;
         border-radius: 4px;
     }
 }

diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div class="flex w-full flex-col gap-2 md:flex-row">
-            <div class="flex flex-wrap" v-if="props.footer">
+        <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">
                     <span class="font-normal">{{ $t('setting.forum') }}</span>
                 </el-button>
@@ -15,25 +15,25 @@
                 </el-button>
                 <el-divider v-if="!mobile" direction="vertical" />
             </div>
-            <div class="flex flex-wrap">
-                <el-button type="primary" link @click="toHalo">
-                    <span class="font-normal">
-                        {{ isProductPro ? $t('license.pro') : $t('license.community') }}
-                    </span>
-                </el-button>
-                <span class="version" @click="copyText(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 class="font-normal">({{ $t('setting.hasNewVersion') }})</span>
-                    </el-button>
+            <div class="flex flex-wrap items-center">
+                <el-link :underline="false" type="primary" @click="toHalo">
+                    {{ isProductPro ? $t('license.pro') : $t('license.community') }}
+                </el-link>
+                <el-link :underline="false" class="version" type="primary" @click="copyText(version)">
+                    {{ version }}
+                </el-link>
+                <el-badge is-dot class="-mt-0.5" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
+                    <el-link :underline="false" type="primary" @click="onLoadUpgradeInfo">
+                        （{{ $t('setting.hasNewVersion') }}）
+                    </el-link>
                 </el-badge>
                 <el-button
                     v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
                     type="primary"
                     link
                     @click="onLoadUpgradeInfo"
                 >
-                    <span>({{ $t('setting.upgradeCheck') }})</span>
+                    （{{ $t('setting.upgradeCheck') }}）
                 </el-button>
                 <el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">
                     {{ $t('setting.upgrading') }}
@@ -201,11 +201,10 @@ onMounted(() => {
 <style lang="scss" scoped>
 .version {
     font-size: 14px;
-    color: var(--dark-gold-base-color);
+    color: var(--panel-color-primary-light-4);
     text-decoration: none;
     letter-spacing: 0.5px;
     cursor: pointer;
-    margin-top: 2px;
 }
 .line-height {
     line-height: 25px;
@@ -221,10 +220,13 @@ onMounted(() => {
         font-size: 14px;
     }
     :deep(.default-theme h2) {
-        color: var(--dark-gold-base-color);
-        margin: 13px, 0;
+        color: var(--el-color-primary);
+        margin: 13px 0;
         padding: 0;
         font-size: 16px;
     }
 }
+:deep(.el-link__inner) {
+    font-weight: 400;
+}
 </style>
diff --git a/frontend/src/components/v-charts/components/Pie.vue b/frontend/src/components/v-charts/components/Pie.vue
@@ -7,7 +7,7 @@ import * as echarts from 'echarts';
 import { GlobalStore } from '@/store';
 import { storeToRefs } from 'pinia';
 const globalStore = GlobalStore();
-const { isDarkGoldTheme, isDarkTheme } = storeToRefs(globalStore);
+const { isDarkTheme } = storeToRefs(globalStore);
 
 const props = defineProps({
     id: {
@@ -25,7 +25,7 @@ const props = defineProps({
     option: {
         type: Object,
         required: true,
-    }, // option: { title , data }
+    },
 });
 
 function initChart() {
@@ -34,6 +34,12 @@ function initChart() {
         myChart = echarts.init(document.getElementById(props.id) as HTMLElement);
     }
     let percentText = String(props.option.data).split('.');
+    const primaryLight2 = getComputedStyle(document.documentElement)
+        .getPropertyValue('--panel-color-primary-light-3')
+        .trim();
+    const primaryLight1 = getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim();
+    const pieBgColor = getComputedStyle(document.documentElement).getPropertyValue('--panel-pie-bg-color').trim();
+
     const option = {
         title: [
             {
@@ -99,11 +105,11 @@ function initChart() {
                     new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                         {
                             offset: 0,
-                            color: isDarkGoldTheme.value ? '#836c4c' : 'rgba(81, 192, 255, .1)',
+                            color: primaryLight2,
                         },
                         {
                             offset: 1,
-                            color: isDarkGoldTheme.value ? '#eaba63' : '#4261F6',
+                            color: primaryLight1,
                         },
                     ]),
                 ],
@@ -119,7 +125,7 @@ function initChart() {
                 label: {
                     show: false,
                 },
-                color: isDarkTheme.value ? '#16191D' : '#fff',
+                color: pieBgColor,
                 data: [
                     {
                         value: 0,

diff --git a/frontend/src/hooks/use-theme.ts b/frontend/src/hooks/use-theme.ts
@@ -1,22 +1,29 @@
 import { GlobalStore } from '@/store';
+import { setPrimaryColor } from '@/utils/theme';
 
 export const useTheme = () => {
-    const globalStore = GlobalStore();
     const switchTheme = () => {
-        if (globalStore.themeConfig.isGold && globalStore.isProductPro) {
-            const body = document.documentElement as HTMLElement;
-            body.setAttribute('class', 'dark-gold');
-            return;
+        const globalStore = GlobalStore();
+        const themeConfig = globalStore.themeConfig;
+        let itemTheme = themeConfig.theme;
+        if (itemTheme === 'auto') {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            itemTheme = prefersDark ? 'dark' : 'light';
         }
+        document.documentElement.className = itemTheme === 'dark' ? 'dark' : 'light';
+        if (globalStore.isProductPro && themeConfig.themeColor) {
+            try {
+                const themeColor = JSON.parse(themeConfig.themeColor);
+                const color = itemTheme === 'dark' ? themeColor.dark : themeColor.light;
 
-        let itemTheme = globalStore.themeConfig.theme;
-        if (globalStore.themeConfig.theme === 'auto') {
-            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-            itemTheme = prefersDark.matches ? 'dark' : 'light';
+                if (color) {
+                    themeConfig.primary = color;
+                    setPrimaryColor(color);
+                }
+            } catch (e) {
+                console.error('Failed to parse themeColor', e);
+            }
         }
-        const body = document.documentElement as HTMLElement;
-        if (itemTheme === 'dark') body.setAttribute('class', 'dark');
-        else body.setAttribute('class', '');
     };
 
     return {

diff --git a/frontend/src/layout/components/AppFooter.vue b/frontend/src/layout/components/AppFooter.vue
@@ -28,8 +28,8 @@ const mobile = computed(() => {
     align-items: center;
     justify-content: space-between;
     height: 48px;
-    background: #ffffff;
-    border-top: 1px solid #e4e7ed;
+    background: var(--panel-footer-bg);
+    border-top: 1px solid var(--panel-footer-border);
     box-sizing: border-box;
     padding: 10px 20px;
     a {

diff --git a/frontend/src/layout/components/Sidebar/components/Collapse.vue b/frontend/src/layout/components/Sidebar/components/Collapse.vue
@@ -18,7 +18,7 @@ const isCollapse = computed(() => menuStore.isCollapse);
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    border-top: 1px solid #e4e7ed;
+    border-top: 1px solid var(--panel-footer-border);
     height: 48px;
 }
 

diff --git a/frontend/src/layout/components/Sidebar/components/Logo.vue b/frontend/src/layout/components/Sidebar/components/Logo.vue
@@ -37,6 +37,7 @@ const goHome = () => {
     align-items: center;
     justify-content: center;
     height: 55px;
+    z-index: 1;
     img {
         object-fit: contain;
         width: 95%;

diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
@@ -6,6 +6,9 @@
         element-loading-svg-view-box="-10, -10, 50, 50"
         element-loading-background="rgba(122, 122, 122, 0.01)"
     >
+        <div class="fixed">
+            <PrimaryMenu />
+        </div>
         <Logo :isCollapse="isCollapse" />
         <el-scrollbar>
             <el-menu
@@ -46,6 +49,7 @@ import { GlobalStore, MenuStore } from '@/store';
 import { MsgSuccess } from '@/utils/message';
 import { isString } from '@vueuse/core';
 import { getSettingInfo } from '@/api/modules/setting';
+import PrimaryMenu from '@/assets/images/menu-bg.svg?component';
 
 const route = useRoute();
 const menuStore = MenuStore();
@@ -183,7 +187,7 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: url(@/assets/images/menu-bg.png) var(--el-menu-bg-color) no-repeat top;
+    background: var(--panel-menu-bg-color) no-repeat top;
 
     .el-scrollbar {
         flex: 1;

diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
@@ -137,7 +137,7 @@ onMounted(() => {
     height: 100vh;
     transition: margin-left 0.3s;
     margin-left: var(--panel-menu-width);
-    background-color: #f4f4f4;
+    background-color: var(--panel-main-bg-color-9);
     overflow-x: hidden;
 }
 .app-main {

diff --git a/frontend/src/store/interface/index.ts b/frontend/src/store/interface/index.ts
@@ -4,13 +4,13 @@ export interface ThemeConfigProp {
     panelName: string;
     primary: string;
     theme: string; // dark | bright ｜ auto
-    isGold: boolean;
     footer: boolean;
 
     title: string;
     logo: string;
     logoWithText: string;
     favicon: string;
+    themeColor: string;
 }
 
 export interface GlobalState {

diff --git a/frontend/src/store/modules/global.ts b/frontend/src/store/modules/global.ts
@@ -14,11 +14,10 @@ const GlobalStore = defineStore({
         language: '',
         themeConfig: {
             panelName: '',
-            primary: '#005EEB',
+            primary: '#005eeb',
             theme: 'auto',
-            isGold: false,
             footer: true,
-
+            themeColor: '',
             title: '',
             logo: '',
             logoWithText: '',
@@ -46,9 +45,8 @@ const GlobalStore = defineStore({
     getters: {
         isDarkTheme: (state) =>
             state.themeConfig.theme === 'dark' ||
-            state.themeConfig.isGold ||
             (state.themeConfig.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches),
-        isDarkGoldTheme: (state) => state.themeConfig.isGold && state.isProductPro,
+        isDarkGoldTheme: (state) => state.themeConfig.primary === '#F0BE96' && state.isProductPro,
     },
     actions: {
         setOpenMenuTabs(openMenuTabs: boolean) {

diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
@@ -124,7 +124,7 @@ html {
 .input-help {
     font-size: 12px;
     word-break: break-all;
-    color: #8f959e;
+    color: #ADB0BC;
     width: 100%;
     display: inline-block;
 }
@@ -219,7 +219,6 @@ html {
         background: var(--el-button-bg-color, var(--el-fill-color-blank));
         border: 0;
         font-weight: 350;
-        border-left: 0;
         color: var(--el-button-text-color, var(--el-text-color-regular));
         text-align: center;
         box-sizing: border-box;
@@ -361,7 +360,7 @@ html {
 
 .el-input-group__append {
     border-left: 0;
-    background-color: #ffffff !important;
+    background-color: var(--el-fill-color-light) !important;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset,