Refactor theme constants and resolve merge conflicts

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))) {
+  if (!theme || ![LIGHT_THEME_NAME, DARK_THEME_NAME].includes(theme)) {
-    localStorage.setItem("uiTheme", "PurpleTheme");   // todo: 这部分可以根据vuetify.ts的默认主题动态调整
+    localStorage.setItem("uiTheme", LIGHT_THEME_NAME); // todo: 这部分可以根据vuetify.ts的默认主题动态调整
-    return 'PurpleTheme';
+    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;

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;

dashboard/src/plugins/vuetify.ts

@@ -1,32 +1,33 @@
-import { createVuetify } from 'vuetify';
+import { createVuetify } from "vuetify";
-import '@mdi/font/css/materialdesignicons.css';
+import "@mdi/font/css/materialdesignicons.css";
-import * as components from 'vuetify/components';
+import * as components from "vuetify/components";
-import * as directives from 'vuetify/directives';
+import * as directives from "vuetify/directives";
-import { PurpleTheme } from '@/theme/LightTheme';
+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,
+      [LIGHT_THEME_NAME]: PurpleTheme,
-      PurpleThemeDark
+      [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",
-    }
+    },
-  }
+  },
 });

dashboard/src/stores/customizer.ts

@@ -1,5 +1,6 @@
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";
-import config from '@/config';
+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() {

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',
+    "border-color": "#3c96ca",
-    'carousel-control-size': 10
+    "carousel-control-size": 10,
   },
   colors: {
-    primary: '#3c96ca',
+    primary: "#3c96ca",
-    secondary: '#4ea4d8',
+    secondary: "#4ea4d8",
-    info: '#03c9d7',
+    info: "#03c9d7",
-    success: '#52c41a',
+    success: "#52c41a",
-    accent: '#FFAB91',
+    accent: "#FFAB91",
-    warning: '#faad14',
+    warning: "#faad14",
-    error: '#ff4d4f',
+    error: "#ff4d4f",
-    lightprimary: '#e8f3fa',
+    lightprimary: "#e8f3fa",
-    lightsecondary: '#e8f3fa',
+    lightsecondary: "#e8f3fa",
-    lightsuccess: '#b9f6ca',
+    lightsuccess: "#b9f6ca",
-    lighterror: '#f9d8d8',
+    lighterror: "#f9d8d8",
-    lightwarning: '#fff8e1',
+    lightwarning: "#fff8e1",
-    primaryText: '#ffffff',
+    primaryText: "#ffffff",
-    secondaryText: '#ffffffcc',
+    secondaryText: "#ffffffcc",
-    darkprimary: '#2f86bd',
+    darkprimary: "#2f86bd",
-    darksecondary: '#2f86bd',
+    darksecondary: "#2f86bd",
-    borderLight: '#d0d0d0',
+    borderLight: "#d0d0d0",
-    border: '#333333ee',
+    border: "#333333ee",
-    inputBorder: '#787878',
+    inputBorder: "#787878",
-    containerBg: '#1a1a1a',
+    containerBg: "#1a1a1a",
-    surface: '#1f1f1f',
+    surface: "#1f1f1f",
-    'on-surface-variant': '#000',
+    "on-surface-variant": "#000",
-    facebook: '#4267b2',
+    facebook: "#4267b2",
-    twitter: '#1da1f2',
+    twitter: "#1da1f2",
-    linkedin: '#0e76a8',
+    linkedin: "#0e76a8",
-    gray100: '#cccccccc',
+    gray100: "#cccccccc",
-    primary200: '#84c9ea',
+    primary200: "#84c9ea",
-    secondary200: '#8cc4e1',
+    secondary200: "#8cc4e1",
-    background: '#1d1d1d',
+    background: "#1d1d1d",
-    overlay: '#111111aa',
+    overlay: "#111111aa",
-    codeBg: '#282833',
+    codeBg: "#282833",
-    preBg: 'rgb(23, 23, 23)',
+    preBg: "rgb(23, 23, 23)",
-    code: '#ffffffdd',
+    code: "#ffffffdd",
-    chatMessageBubble: '#2d2e30',
+    chatMessageBubble: "#2d2e30",
-    mcpCardBg: '#2a2a2a',
+    mcpCardBg: "#2a2a2a",
-  }
+  },
 };
 
 export { PurpleThemeDark };

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',
+    "border-color": "#1e88e5",
-    'carousel-control-size': 10
+    "carousel-control-size": 10,
   },
   colors: {
-    primary: '#3c96ca',
+    primary: "#3c96ca",
-    secondary: '#2f86bd',
+    secondary: "#2f86bd",
-    info: '#03c9d7',
+    info: "#03c9d7",
-    success: '#00c853',
+    success: "#00c853",
-    accent: '#FFAB91',
+    accent: "#FFAB91",
-    warning: '#ffc107',
+    warning: "#ffc107",
-    error: '#f44336',
+    error: "#f44336",
-    lightprimary: '#eef2f6',
+    lightprimary: "#eef2f6",
-    lightsecondary: '#e8f3fa',
+    lightsecondary: "#e8f3fa",
-    lightsuccess: '#b9f6ca',
+    lightsuccess: "#b9f6ca",
-    lighterror: '#f9d8d8',
+    lighterror: "#f9d8d8",
-    lightwarning: '#fff8e1',
+    lightwarning: "#fff8e1",
-    primaryText: '#1b1c1d',
+    primaryText: "#1b1c1d",
-    secondaryText: '#000000aa',
+    secondaryText: "#000000aa",
-    darkprimary: '#1565c0',
+    darkprimary: "#1565c0",
-    darksecondary: '#236b99',
+    darksecondary: "#236b99",
-    borderLight: '#d0d0d0',
+    borderLight: "#d0d0d0",
-    border: '#d0d0d0',
+    border: "#d0d0d0",
-    inputBorder: '#787878',
+    inputBorder: "#787878",
-    containerBg: '#f9fafcf4',
+    containerBg: "#f9fafcf4",
-    surface: '#fff',
+    surface: "#fff",
-    'on-surface-variant': '#fff',
+    "on-surface-variant": "#fff",
-    facebook: '#4267b2',
+    facebook: "#4267b2",
-    twitter: '#1da1f2',
+    twitter: "#1da1f2",
-    linkedin: '#0e76a8',
+    linkedin: "#0e76a8",
-    gray100: '#fafafacc',
+    gray100: "#fafafacc",
-    primary200: '#90caf9',
+    primary200: "#90caf9",
-    secondary200: '#8cc4e1',
+    secondary200: "#8cc4e1",
-    background: '#ffffff',
+    background: "#ffffff",
-    overlay: '#ffffffaa',
+    overlay: "#ffffffaa",
-    codeBg: '#ececec',
+    codeBg: "#ececec",
-    preBg: 'rgb(249, 249, 249)',
+    preBg: "rgb(249, 249, 249)",
-    code: 'rgb(13, 13, 13)',
+    code: "rgb(13, 13, 13)",
-    chatMessageBubble: '#e7ebf4',
+    chatMessageBubble: "#e7ebf4",
-    mcpCardBg: '#ecf2faff',
+    mcpCardBg: "#ecf2faff",
-  }
+  },
 };
 
 export { PurpleTheme };

dashboard/src/theme/constants.ts

@@ -0,0 +1,2 @@
+export const LIGHT_THEME_NAME = 'PurpleTheme';
+export const DARK_THEME_NAME = 'PurpleThemeDark';