From 280f6ec6e3c4984be7c504e0e006427684516e42 Mon Sep 17 00:00:00 2001 From: aaron <> Date: Fri, 23 May 2025 15:12:19 +0800 Subject: [PATCH] update --- docker-compose.yml | 2 +- src/assets/base.css | 76 +++++++++++++++++++-------- src/main.ts | 23 ++++++++- src/stores/theme.ts | 54 ++++++++++++++++++++ src/views/HomeView.vue | 113 ++++++++++++++++++++++++++++++++++++++++- 5 files changed, 243 insertions(+), 25 deletions(-) create mode 100644 src/stores/theme.ts diff --git a/docker-compose.yml b/docker-compose.yml index f0d158a..2c04630 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -5,7 +5,7 @@ services: build: context: . dockerfile: Dockerfile - image: tradus-web:1.3.9 + image: tradus-web:1.3.10 container_name: tradus-web ports: - '6000:80' diff --git a/src/assets/base.css b/src/assets/base.css index fd62014..541952b 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -17,35 +17,69 @@ --vt-c-text-light-2: var(--vt-c-white-soft); --vt-c-text-dark-1: var(--vt-c-white); --vt-c-text-dark-2: var(--vt-c-white-soft); + + /* 通用颜色 */ + --color-accent: #3355ff; + --color-accent-hover: #2244ee; + --color-accent-light: rgba(51, 85, 255, 0.08); + --color-accent-rgb: 51, 85, 255; } -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); +/* 深色主题变量 - 默认 */ +:root, +html[data-theme='dark'] { + --color-bg-primary: #050505; + --color-bg-secondary: rgba(255, 255, 255, 0.05); + --color-text-primary: rgba(255, 255, 255, 0.9); + --color-text-secondary: rgba(255, 255, 255, 0.6); + --color-border: rgba(255, 255, 255, 0.1); + --color-border-hover: rgba(255, 255, 255, 0.2); + --color-shadow: rgba(0, 0, 0, 0.3); - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); + --color-background: var(--color-bg-primary); + --color-background-soft: var(--color-bg-secondary); + --color-background-mute: #111111; - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-1); + --color-heading: var(--color-text-primary); + --color-text: var(--color-text-primary); --section-gap: 160px; } -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); +/* 浅色主题变量 */ +html[data-theme='light'] { + --color-bg-primary: #ffffff; + --color-bg-secondary: rgba(0, 0, 0, 0.03); + --color-text-primary: rgba(0, 0, 0, 0.9); + --color-text-secondary: rgba(0, 0, 0, 0.6); + --color-border: rgba(0, 0, 0, 0.1); + --color-border-hover: rgba(0, 0, 0, 0.2); + --color-shadow: rgba(0, 0, 0, 0.1); - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); + --color-background: var(--color-bg-primary); + --color-background-soft: var(--color-bg-secondary); + --color-background-mute: #f5f5f5; - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } + --color-heading: var(--color-text-primary); + --color-text: var(--color-text-primary); +} + +/* 深色主题变量 - 通过data-theme属性设置 */ +html[data-theme='dark'] { + --color-bg-primary: #050505; + --color-bg-secondary: rgba(255, 255, 255, 0.05); + --color-text-primary: rgba(255, 255, 255, 0.9); + --color-text-secondary: rgba(255, 255, 255, 0.6); + --color-border: rgba(255, 255, 255, 0.1); + --color-border-hover: rgba(255, 255, 255, 0.2); + --color-shadow: rgba(0, 0, 0, 0.3); + + --color-background: var(--color-bg-primary); + --color-background-soft: var(--color-bg-secondary); + --color-background-mute: #111111; + + --color-heading: var(--color-text-primary); + --color-text: var(--color-text-primary); } *, @@ -73,8 +107,8 @@ body { color: var(--color-text); background: var(--color-background); transition: - color 0.5s, - background-color 0.5s; + color 0.3s ease, + background-color 0.3s ease; line-height: 1.6; font-family: Inter, diff --git a/src/main.ts b/src/main.ts index 5dcad83..fb9d7b6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,10 +5,29 @@ import { createPinia } from 'pinia' import App from './App.vue' import router from './router' +import { useThemeStore } from './stores/theme' + +// 设置默认主题attribute以防止闪烁 +const applyInitialTheme = () => { + const savedTheme = localStorage.getItem('theme') || 'dark' + document.documentElement.setAttribute('data-theme', savedTheme) +} + +// 在应用挂载前应用初始主题，避免闪烁 +applyInitialTheme() const app = createApp(App) - -app.use(createPinia()) +const pinia = createPinia() +app.use(pinia) app.use(router) +// 在pinia初始化后，确保theme store被创建并应用主题设置 +app.config.globalProperties.$initTheme = () => { + useThemeStore() // 只需创建实例，watch会自动处理主题设置 +} + +// 挂载应用 app.mount('#app') + +// 确保主题store被初始化 +app.config.globalProperties.$initTheme() diff --git a/src/stores/theme.ts b/src/stores/theme.ts new file mode 100644 index 0000000..aa22d92 --- /dev/null +++ b/src/stores/theme.ts @@ -0,0 +1,54 @@ +import { defineStore } from 'pinia' +import { ref, watch } from 'vue' + +type ThemeMode = 'dark' | 'light' + +// 设置主题到DOM +const applyThemeToDOM = (theme: ThemeMode) => { + document.documentElement.setAttribute('data-theme', theme) +} + +export const useThemeStore = defineStore('theme', () => { + // 获取存储的主题或默认为深色 + const storedTheme = localStorage.getItem('theme') as ThemeMode | null + const currentTheme = ref(storedTheme || 'dark') + + // 立即应用当前主题到DOM + applyThemeToDOM(currentTheme.value) + + // 监听主题变化并应用 + watch( + currentTheme, + (newTheme) => { + // 保存到本地存储 + localStorage.setItem('theme', newTheme) + // 设置文档根元素的主题属性 + applyThemeToDOM(newTheme) + }, + { immediate: true }, + ) + + // 切换主题 + function toggleTheme() { + currentTheme.value = currentTheme.value === 'dark' ? 'light' : 'dark' + } + + // 设置特定主题 + function setTheme(theme: ThemeMode) { + currentTheme.value = theme + } + + // 判断是否为深色主题 + const isDarkTheme = ref(currentTheme.value === 'dark') + + watch(currentTheme, (newTheme) => { + isDarkTheme.value = newTheme === 'dark' + }) + + return { + currentTheme, + isDarkTheme, + toggleTheme, + setTheme, + } +}) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 5cefe4b..adee808 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,12 @@