fz-mirrors/AstrBot
1
0
Fork 0
mirror of https://github.com/AstrBotDevs/AstrBot synced 2026-07-17 17:51:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(dashboard): improve sidebar styling and dark mode SCSS overrides

Browse Source
This commit is contained in:
LIghtJUNction
2026-03-29 18:16:07 +08:00
parent 15e3c12eab
commit 158a26cac8
4 changed files with 953 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dashboard/src/components/shared/ReactorBg.vue
View File

@@ -33,7 +33,7 @@ function draw() {
const isDark = customizer.isDarkTheme;
// Background
ctx.fillStyle = isDark ? "#0A0A0C" : "#F0F4F8";
ctx.fillStyle = isDark ? "#050507" : "#F2F5F8";
ctx.fillRect(0, 0, W, H);
const cols = Math.ceil(W / GRID) + 1;
@@ -45,7 +45,7 @@ function draw() {
// Grid lines — dark mode: faint white, light mode: faint deep-blue
ctx.strokeStyle = isDark
? "rgba(255, 255, 255, 0.025)"
: "rgba(26, 46, 60, 0.06)";
: "rgba(26, 46, 60, 0.04)";
ctx.lineWidth = 0.5;
for (let x = 0; x <= W; x += GRID) {
ctx.beginPath();
@@ -81,10 +81,11 @@ function draw() {
let crossAlpha = isDark ? 0.04 : 0.06;
let crossScale = 1.0;
let accent = 0; // 0=neutral, 1=cyan dark, 2=blue light
let eased = 0;
if (dist < ENERGY_RADIUS) {
const t = 1 - dist / ENERGY_RADIUS;
const eased = t * t * (3 - 2 * t);
eased = t * t * (3 - 2 * t);
if (isDark) {
// Dark mode: crosses glow cyan (Cherenkov)

993
dashboard/src/scss/_override.scss
View File

File diff suppressed because it is too large Load Diff

34
dashboard/src/scss/layout/_sidebar.scss
View File

@@ -9,11 +9,39 @@
backdrop-filter: blur(16px) saturate(1.2);
}
/* Light mode: keep sidebar as dark blueprint panel */
/* Light mode: blueprint glass sidebar — light content + deep indigo border */
.v-theme--light {
.leftSidebar {
background: rgba(12, 18, 28, 0.92) !important;
border-right-color: rgba(0, 200, 255, 0.08) !important;
background: rgba(228, 233, 242, 0.7) !important;
backdrop-filter: blur(20px) saturate(1.3);
border-right: 1px solid rgba(26, 46, 80, 0.15) !important;
box-shadow: 2px 0 12px rgba(26, 46, 80, 0.08) !important;
}
.listitem {
.v-list-item {
color: rgba(26, 46, 80, 0.7) !important;
&:hover {
background: rgba(26, 46, 80, 0.05) !important;
color: #1A2B3C !important;
}
&.v-list-item--active {
background: rgba(26, 46, 80, 0.08) !important;
color: #1A2B3C !important;
border-left: 3px solid #1A2B3C;
}
}
.v-list-item-title {
color: inherit !important;
}
.v-icon {
color: rgba(26, 46, 80, 0.6) !important;
}
}
.sidebar-footer-btn {
color: rgba(26, 46, 80, 0.7) !important;
border-color: rgba(26, 46, 80, 0.2) !important;
}
}

14
dashboard/src/stores/customizer.ts
View File

@@ -40,19 +40,17 @@ export const useCustomizerStore = defineStore("customizer", {
this.autoSwitchTheme = payload;
localStorage.setItem("autoSwitchTheme", String(payload));
},
// 新增：手动切换主题（同时关闭自动同步）
// 工业精密风格仅支持暗色主题，强制锁定暗色模式
// 手动切换主题（同时关闭自动同步）
TOGGLE_DARK_MODE() {
this.SET_AUTO_SYNC(false);
// Force lock to dark theme — industrial aesthetic is dark-only
this.SET_UI_THEME(DARK_THEME_NAME);
const newTheme = this.isDarkTheme ? LIGHT_THEME_NAME : DARK_THEME_NAME;
this.SET_UI_THEME(newTheme);
},
// 新增：应用系统主题（用于自动同步）
// 工业精密风格仅支持暗色主题，强制锁定暗色模式
// 应用系统主题（用于自动同步）
APPLY_SYSTEM_THEME() {
if (typeof window === "undefined") return;
// Always lock to dark regardless of system preference
this.SET_UI_THEME(DARK_THEME_NAME);
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
this.SET_UI_THEME(prefersDark ? DARK_THEME_NAME : LIGHT_THEME_NAME);
},
TOGGLE_CHAT_SIDEBAR() {
this.chatSidebarOpen = !this.chatSidebarOpen;