From 4c0fb31e7dfdd30d32e595be9588d6840e7c6ffd Mon Sep 17 00:00:00 2001 From: LIghtJUNction Date: Tue, 17 Mar 2026 19:27:50 +0800 Subject: [PATCH] Refactor theme constants and resolve merge conflicts --- dashboard/src/config.ts | 12 +++-- dashboard/src/main.ts | 3 +- dashboard/src/plugins/vuetify.ts | 29 +++++------ dashboard/src/stores/customizer.ts | 11 ++-- dashboard/src/theme/DarkTheme.ts | 81 +++++++++++++++--------------- dashboard/src/theme/LightTheme.ts | 81 +++++++++++++++--------------- dashboard/src/theme/constants.ts | 2 + 7 files changed, 114 insertions(+), 105 deletions(-) create mode 100644 dashboard/src/theme/constants.ts diff --git a/dashboard/src/config.ts b/dashboard/src/config.ts index f52812ad8..1dbfed2ba 100644 --- a/dashboard/src/config.ts +++ b/dashboard/src/config.ts @@ -1,3 +1,5 @@ +import { LIGHT_THEME_NAME, DARK_THEME_NAME } from "@/theme/constants"; + export type ConfigProps = { Sidebar_drawer: boolean; Customizer_drawer: boolean; @@ -10,9 +12,9 @@ export type ConfigProps = { function checkUITheme() { /* 检查localStorage有无记忆的主题选项，如有则使用，否则使用默认值 */ const theme = localStorage.getItem("uiTheme"); - if (!theme || !(['PurpleTheme', 'PurpleThemeDark'].includes(theme))) { - localStorage.setItem("uiTheme", "PurpleTheme"); // todo: 这部分可以根据vuetify.ts的默认主题动态调整 - return 'PurpleTheme'; + if (!theme || ![LIGHT_THEME_NAME, DARK_THEME_NAME].includes(theme)) { + localStorage.setItem("uiTheme", LIGHT_THEME_NAME); // todo: 这部分可以根据vuetify.ts的默认主题动态调整 + return LIGHT_THEME_NAME; } else return theme; } @@ -20,9 +22,9 @@ const config: ConfigProps = { Sidebar_drawer: true, Customizer_drawer: false, mini_sidebar: false, - fontTheme: 'Roboto', + fontTheme: "Roboto", uiTheme: checkUITheme(), - inputBg: false + inputBg: false, }; export default config; diff --git a/dashboard/src/main.ts b/dashboard/src/main.ts index 817163a00..e7117d00e 100644 --- a/dashboard/src/main.ts +++ b/dashboard/src/main.ts @@ -12,6 +12,7 @@ import print from "vue3-print-nb"; import { loader } from "@guolao/vue-monaco-editor"; import axios from "axios"; import { waitForRouterReadyInBackground } from "./utils/routerReadiness.mjs"; +import { LIGHT_THEME_NAME, DARK_THEME_NAME } from "@/theme/constants"; // 1. 定义加载配置的函数 async function loadAppConfig() { @@ -44,7 +45,7 @@ async function mountApp(app: any, pinia: any, waitForRouter = true) { const storedSecondary = localStorage.getItem("themeSecondary"); if (storedPrimary || storedSecondary) { const themes = vuetify.theme.themes.value; - ["PurpleTheme", "PurpleThemeDark"].forEach((name) => { + [LIGHT_THEME_NAME, DARK_THEME_NAME].forEach((name) => { const theme = themes[name]; if (!theme?.colors) return; if (storedPrimary) theme.colors.primary = storedPrimary; diff --git a/dashboard/src/plugins/vuetify.ts b/dashboard/src/plugins/vuetify.ts index 3e9bae9c1..d21fe2939 100644 --- a/dashboard/src/plugins/vuetify.ts +++ b/dashboard/src/plugins/vuetify.ts @@ -1,32 +1,33 @@ -import { createVuetify } from 'vuetify'; -import '@mdi/font/css/materialdesignicons.css'; -import * as components from 'vuetify/components'; -import * as directives from 'vuetify/directives'; -import { PurpleTheme } from '@/theme/LightTheme'; +import { createVuetify } from "vuetify"; +import "@mdi/font/css/materialdesignicons.css"; +import * as components from "vuetify/components"; +import * as directives from "vuetify/directives"; +import { PurpleTheme } from "@/theme/LightTheme"; import { PurpleThemeDark } from "@/theme/DarkTheme"; +import { LIGHT_THEME_NAME, DARK_THEME_NAME } from "@/theme/constants"; export default createVuetify({ components, directives, theme: { - defaultTheme: 'PurpleTheme', + defaultTheme: LIGHT_THEME_NAME, themes: { - PurpleTheme, - PurpleThemeDark - } + [LIGHT_THEME_NAME]: PurpleTheme, + [DARK_THEME_NAME]: PurpleThemeDark, + }, }, defaults: { VBtn: {}, VCard: { - rounded: 'lg' + rounded: "lg", }, VTextField: { - rounded: 'lg' + rounded: "lg", }, VTooltip: { // set v-tooltip default location to top - location: 'top' - } - } + location: "top", + }, + }, }); diff --git a/dashboard/src/stores/customizer.ts b/dashboard/src/stores/customizer.ts index 4b2f73762..b0674e76f 100644 --- a/dashboard/src/stores/customizer.ts +++ b/dashboard/src/stores/customizer.ts @@ -1,5 +1,6 @@ -import { defineStore } from 'pinia'; -import config from '@/config'; +import { defineStore } from "pinia"; +import config from "@/config"; +import { LIGHT_THEME_NAME, DARK_THEME_NAME } from "@/theme/constants"; export const useCustomizerStore = defineStore({ id: "customizer", @@ -16,7 +17,7 @@ export const useCustomizerStore = defineStore({ }), getters: { - isDarkTheme: (state) => state.uiTheme === "PurpleThemeDark", + isDarkTheme: (state) => state.uiTheme === DARK_THEME_NAME, }, actions: { SET_SIDEBAR_DRAWER() { @@ -44,14 +45,14 @@ export const useCustomizerStore = defineStore({ TOGGLE_DARK_MODE() { // 手动切换时禁用自动同步 this.SET_AUTO_SYNC(false); - const newTheme = this.isDarkTheme ? "PurpleTheme" : "PurpleThemeDark"; + const newTheme = this.isDarkTheme ? LIGHT_THEME_NAME : DARK_THEME_NAME; this.SET_UI_THEME(newTheme); }, // 新增：应用系统主题（用于自动同步） APPLY_SYSTEM_THEME() { if (typeof window === "undefined") return; const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; - const themeToApply = isDark ? "PurpleThemeDark" : "PurpleTheme"; + const themeToApply = isDark ? DARK_THEME_NAME : LIGHT_THEME_NAME; this.SET_UI_THEME(themeToApply); }, TOGGLE_CHAT_SIDEBAR() { diff --git a/dashboard/src/theme/DarkTheme.ts b/dashboard/src/theme/DarkTheme.ts index e8733960b..e71be9543 100644 --- a/dashboard/src/theme/DarkTheme.ts +++ b/dashboard/src/theme/DarkTheme.ts @@ -1,49 +1,50 @@ -import type { ThemeTypes } from '@/types/themeTypes/ThemeType'; +import type { ThemeTypes } from "@/types/themeTypes/ThemeType"; +import { DARK_THEME_NAME } from "./constants"; const PurpleThemeDark: ThemeTypes = { - name: 'PurpleThemeDark', + name: DARK_THEME_NAME, dark: true, variables: { - 'border-color': '#3c96ca', - 'carousel-control-size': 10 + "border-color": "#3c96ca", + "carousel-control-size": 10, }, colors: { - primary: '#3c96ca', - secondary: '#4ea4d8', - info: '#03c9d7', - success: '#52c41a', - accent: '#FFAB91', - warning: '#faad14', - error: '#ff4d4f', - lightprimary: '#e8f3fa', - lightsecondary: '#e8f3fa', - lightsuccess: '#b9f6ca', - lighterror: '#f9d8d8', - lightwarning: '#fff8e1', - primaryText: '#ffffff', - secondaryText: '#ffffffcc', - darkprimary: '#2f86bd', - darksecondary: '#2f86bd', - borderLight: '#d0d0d0', - border: '#333333ee', - inputBorder: '#787878', - containerBg: '#1a1a1a', - surface: '#1f1f1f', - 'on-surface-variant': '#000', - facebook: '#4267b2', - twitter: '#1da1f2', - linkedin: '#0e76a8', - gray100: '#cccccccc', - primary200: '#84c9ea', - secondary200: '#8cc4e1', - background: '#1d1d1d', - overlay: '#111111aa', - codeBg: '#282833', - preBg: 'rgb(23, 23, 23)', - code: '#ffffffdd', - chatMessageBubble: '#2d2e30', - mcpCardBg: '#2a2a2a', - } + primary: "#3c96ca", + secondary: "#4ea4d8", + info: "#03c9d7", + success: "#52c41a", + accent: "#FFAB91", + warning: "#faad14", + error: "#ff4d4f", + lightprimary: "#e8f3fa", + lightsecondary: "#e8f3fa", + lightsuccess: "#b9f6ca", + lighterror: "#f9d8d8", + lightwarning: "#fff8e1", + primaryText: "#ffffff", + secondaryText: "#ffffffcc", + darkprimary: "#2f86bd", + darksecondary: "#2f86bd", + borderLight: "#d0d0d0", + border: "#333333ee", + inputBorder: "#787878", + containerBg: "#1a1a1a", + surface: "#1f1f1f", + "on-surface-variant": "#000", + facebook: "#4267b2", + twitter: "#1da1f2", + linkedin: "#0e76a8", + gray100: "#cccccccc", + primary200: "#84c9ea", + secondary200: "#8cc4e1", + background: "#1d1d1d", + overlay: "#111111aa", + codeBg: "#282833", + preBg: "rgb(23, 23, 23)", + code: "#ffffffdd", + chatMessageBubble: "#2d2e30", + mcpCardBg: "#2a2a2a", + }, }; export { PurpleThemeDark }; diff --git a/dashboard/src/theme/LightTheme.ts b/dashboard/src/theme/LightTheme.ts index b88f05c28..836f3fbf6 100644 --- a/dashboard/src/theme/LightTheme.ts +++ b/dashboard/src/theme/LightTheme.ts @@ -1,49 +1,50 @@ -import type { ThemeTypes } from '@/types/themeTypes/ThemeType'; +import type { ThemeTypes } from "@/types/themeTypes/ThemeType"; +import { LIGHT_THEME_NAME } from "./constants"; const PurpleTheme: ThemeTypes = { - name: 'PurpleTheme', + name: LIGHT_THEME_NAME, dark: false, variables: { - 'border-color': '#1e88e5', - 'carousel-control-size': 10 + "border-color": "#1e88e5", + "carousel-control-size": 10, }, colors: { - primary: '#3c96ca', - secondary: '#2f86bd', - info: '#03c9d7', - success: '#00c853', - accent: '#FFAB91', - warning: '#ffc107', - error: '#f44336', - lightprimary: '#eef2f6', - lightsecondary: '#e8f3fa', - lightsuccess: '#b9f6ca', - lighterror: '#f9d8d8', - lightwarning: '#fff8e1', - primaryText: '#1b1c1d', - secondaryText: '#000000aa', - darkprimary: '#1565c0', - darksecondary: '#236b99', - borderLight: '#d0d0d0', - border: '#d0d0d0', - inputBorder: '#787878', - containerBg: '#f9fafcf4', - surface: '#fff', - 'on-surface-variant': '#fff', - facebook: '#4267b2', - twitter: '#1da1f2', - linkedin: '#0e76a8', - gray100: '#fafafacc', - primary200: '#90caf9', - secondary200: '#8cc4e1', - background: '#ffffff', - overlay: '#ffffffaa', - codeBg: '#ececec', - preBg: 'rgb(249, 249, 249)', - code: 'rgb(13, 13, 13)', - chatMessageBubble: '#e7ebf4', - mcpCardBg: '#ecf2faff', - } + primary: "#3c96ca", + secondary: "#2f86bd", + info: "#03c9d7", + success: "#00c853", + accent: "#FFAB91", + warning: "#ffc107", + error: "#f44336", + lightprimary: "#eef2f6", + lightsecondary: "#e8f3fa", + lightsuccess: "#b9f6ca", + lighterror: "#f9d8d8", + lightwarning: "#fff8e1", + primaryText: "#1b1c1d", + secondaryText: "#000000aa", + darkprimary: "#1565c0", + darksecondary: "#236b99", + borderLight: "#d0d0d0", + border: "#d0d0d0", + inputBorder: "#787878", + containerBg: "#f9fafcf4", + surface: "#fff", + "on-surface-variant": "#fff", + facebook: "#4267b2", + twitter: "#1da1f2", + linkedin: "#0e76a8", + gray100: "#fafafacc", + primary200: "#90caf9", + secondary200: "#8cc4e1", + background: "#ffffff", + overlay: "#ffffffaa", + codeBg: "#ececec", + preBg: "rgb(249, 249, 249)", + code: "rgb(13, 13, 13)", + chatMessageBubble: "#e7ebf4", + mcpCardBg: "#ecf2faff", + }, }; export { PurpleTheme }; diff --git a/dashboard/src/theme/constants.ts b/dashboard/src/theme/constants.ts new file mode 100644 index 000000000..f2474fe60 --- /dev/null +++ b/dashboard/src/theme/constants.ts @@ -0,0 +1,2 @@ +export const LIGHT_THEME_NAME = 'PurpleTheme'; +export const DARK_THEME_NAME = 'PurpleThemeDark';