laoxong/AstrBot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor theme constants and resolve merge conflicts

Browse Source
This commit is contained in:
LIghtJUNction
2026-03-17 19:27:50 +08:00
parent 7aae048405
commit 4c0fb31e7d
7 changed files with 114 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/config.ts
+7 -5
View File
@@ -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;
dashboard/src/main.ts
+2 -1
View File
@@ -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
+15 -14
View File
@@ -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",
},
},
});
dashboard/src/stores/customizer.ts
+6 -5
View File
@@ -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() {
dashboard/src/theme/DarkTheme.ts
+41 -40
View File
@@ -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 };
dashboard/src/theme/LightTheme.ts
+41 -40
View File
@@ -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 };
dashboard/src/theme/constants.ts
+2
View File
@@ -0,0 +1,2 @@
export const LIGHT_THEME_NAME = 'PurpleTheme';
export const DARK_THEME_NAME = 'PurpleThemeDark';