✨ Added dark theme and white theme switching
This commit is contained in:
@@ -114,6 +114,11 @@ export class AppearanceConfig {
|
||||
*/
|
||||
"theme": ThemeType;
|
||||
|
||||
/**
|
||||
* 系统界面主题
|
||||
*/
|
||||
"systemTheme": SystemThemeType;
|
||||
|
||||
/** Creates a new AppearanceConfig instance. */
|
||||
constructor($$source: Partial<AppearanceConfig> = {}) {
|
||||
if (!("language" in $$source)) {
|
||||
@@ -122,6 +127,9 @@ export class AppearanceConfig {
|
||||
if (!("theme" in $$source)) {
|
||||
this["theme"] = ("" as ThemeType);
|
||||
}
|
||||
if (!("systemTheme" in $$source)) {
|
||||
this["systemTheme"] = ("" as SystemThemeType);
|
||||
}
|
||||
|
||||
Object.assign(this, $$source);
|
||||
}
|
||||
@@ -509,6 +517,31 @@ export enum LanguageType {
|
||||
LangEnUS = "en-US",
|
||||
};
|
||||
|
||||
/**
|
||||
* SystemThemeType 系统主题类型定义
|
||||
*/
|
||||
export enum SystemThemeType {
|
||||
/**
|
||||
* The Go zero value for the underlying type of the enum.
|
||||
*/
|
||||
$zero = "",
|
||||
|
||||
/**
|
||||
* SystemThemeDark 深色系统主题
|
||||
*/
|
||||
SystemThemeDark = "dark",
|
||||
|
||||
/**
|
||||
* SystemThemeLight 浅色系统主题
|
||||
*/
|
||||
SystemThemeLight = "light",
|
||||
|
||||
/**
|
||||
* SystemThemeAuto 跟随系统主题
|
||||
*/
|
||||
SystemThemeAuto = "auto",
|
||||
};
|
||||
|
||||
/**
|
||||
* TabType 定义了制表符类型
|
||||
*/
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import { useSystemTheme } from '@/composables/useSystemTheme';
|
||||
import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
|
||||
|
||||
const configStore = useConfigStore();
|
||||
|
||||
const { setTheme } = useSystemTheme();
|
||||
|
||||
// 应用启动时加载配置
|
||||
onMounted(async () => {
|
||||
await configStore.initConfig();
|
||||
await configStore.initializeLanguage();
|
||||
setTheme(configStore.config.appearance.systemTheme);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
/* 导入所有CSS文件 */
|
||||
@import 'normalize.css';
|
||||
@import 'variables.css';
|
||||
@import "fonts.css";
|
||||
@import "fonts.css";
|
||||
@import 'scrollbar.css';
|
||||
108
frontend/src/assets/styles/scrollbar.css
Normal file
108
frontend/src/assets/styles/scrollbar.css
Normal file
@@ -0,0 +1,108 @@
|
||||
/* 滚动条样式 - 支持主题切换 */
|
||||
|
||||
/* Webkit 浏览器滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--scrollbar-track);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
|
||||
/* 细滚动条变体（用于特定区域） */
|
||||
.thin-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--scrollbar-track);
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* Firefox 滚动条样式 */
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
/* 细滚动条的Firefox样式 */
|
||||
.thin-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
/* 隐藏滚动条但保持功能的工具类 */
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 自定义悬浮显示滚动条 */
|
||||
.hover-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.hover-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hover-scrollbar:hover {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.hover-scrollbar:hover::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.hover-scrollbar:hover::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.hover-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.hover-scrollbar:hover::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
@@ -1,12 +1,177 @@
|
||||
:root {
|
||||
/* 主题颜色 */
|
||||
--bg-secondary: #0E1217; /* 工具栏背景 */
|
||||
|
||||
/* 文本颜色 */
|
||||
/* 编辑器区域 */
|
||||
--text-primary: #9BB586; /* 内容区域字体颜色 */
|
||||
--text-secondary: #a0aec0;
|
||||
--text-muted: #666;
|
||||
|
||||
/* 深色主题颜色变量 */
|
||||
--dark-toolbar-bg: #2d2d2d;
|
||||
--dark-toolbar-border: #404040;
|
||||
--dark-toolbar-text: #ffffff;
|
||||
--dark-toolbar-text-secondary: #cccccc;
|
||||
--dark-toolbar-button-hover: #404040;
|
||||
--dark-bg-secondary: #0E1217;
|
||||
--dark-text-secondary: #a0aec0;
|
||||
--dark-text-muted: #666;
|
||||
--dark-border-color: #2d3748;
|
||||
--dark-settings-bg: #2a2a2a;
|
||||
--dark-settings-card-bg: #333333;
|
||||
--dark-settings-text: #ffffff;
|
||||
--dark-settings-text-secondary: #cccccc;
|
||||
--dark-settings-border: #444444;
|
||||
--dark-settings-input-bg: #3a3a3a;
|
||||
--dark-settings-input-border: #555555;
|
||||
--dark-settings-hover: #404040;
|
||||
--dark-scrollbar-track: #2a2a2a;
|
||||
--dark-scrollbar-thumb: #555555;
|
||||
--dark-scrollbar-thumb-hover: #666666;
|
||||
|
||||
/* 浅色主题颜色变量 */
|
||||
--light-toolbar-bg: #f8f9fa;
|
||||
--light-toolbar-border: #e9ecef;
|
||||
--light-toolbar-text: #212529;
|
||||
--light-toolbar-text-secondary: #495057;
|
||||
--light-toolbar-button-hover: #e9ecef;
|
||||
--light-bg-secondary: #f7fef7;
|
||||
--light-text-secondary: #374151;
|
||||
--light-text-muted: #6b7280;
|
||||
--light-border-color: #e5e7eb;
|
||||
--light-settings-bg: #ffffff;
|
||||
--light-settings-card-bg: #f8f9fa;
|
||||
--light-settings-text: #212529;
|
||||
--light-settings-text-secondary: #6c757d;
|
||||
--light-settings-border: #dee2e6;
|
||||
--light-settings-input-bg: #ffffff;
|
||||
--light-settings-input-border: #ced4da;
|
||||
--light-settings-hover: #e9ecef;
|
||||
--light-scrollbar-track: #f1f3f4;
|
||||
--light-scrollbar-thumb: #c1c1c1;
|
||||
--light-scrollbar-thumb-hover: #a8a8a8;
|
||||
|
||||
/* 默认使用深色主题 */
|
||||
--toolbar-bg: var(--dark-toolbar-bg);
|
||||
--toolbar-border: var(--dark-toolbar-border);
|
||||
--toolbar-text: var(--dark-toolbar-text);
|
||||
--toolbar-text-secondary: var(--dark-toolbar-text-secondary);
|
||||
--toolbar-button-hover: var(--dark-toolbar-button-hover);
|
||||
--toolbar-separator: var(--dark-toolbar-button-hover);
|
||||
--bg-secondary: var(--dark-bg-secondary);
|
||||
--text-secondary: var(--dark-text-secondary);
|
||||
--text-muted: var(--dark-text-muted);
|
||||
--border-color: var(--dark-border-color);
|
||||
--settings-bg: var(--dark-settings-bg);
|
||||
--settings-card-bg: var(--dark-settings-card-bg);
|
||||
--settings-text: var(--dark-settings-text);
|
||||
--settings-text-secondary: var(--dark-settings-text-secondary);
|
||||
--settings-border: var(--dark-settings-border);
|
||||
--settings-input-bg: var(--dark-settings-input-bg);
|
||||
--settings-input-border: var(--dark-settings-input-border);
|
||||
--settings-hover: var(--dark-settings-hover);
|
||||
--scrollbar-track: var(--dark-scrollbar-track);
|
||||
--scrollbar-thumb: var(--dark-scrollbar-thumb);
|
||||
--scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
/* 边框颜色 */
|
||||
--border-color: #2d3748;
|
||||
/* 监听系统深色主题 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root[data-theme="auto"] {
|
||||
--toolbar-bg: var(--dark-toolbar-bg);
|
||||
--toolbar-border: var(--dark-toolbar-border);
|
||||
--toolbar-text: var(--dark-toolbar-text);
|
||||
--toolbar-text-secondary: var(--dark-toolbar-text-secondary);
|
||||
--toolbar-button-hover: var(--dark-toolbar-button-hover);
|
||||
--toolbar-separator: var(--dark-toolbar-button-hover);
|
||||
--bg-secondary: var(--dark-bg-secondary);
|
||||
--text-secondary: var(--dark-text-secondary);
|
||||
--text-muted: var(--dark-text-muted);
|
||||
--border-color: var(--dark-border-color);
|
||||
--settings-bg: var(--dark-settings-bg);
|
||||
--settings-card-bg: var(--dark-settings-card-bg);
|
||||
--settings-text: var(--dark-settings-text);
|
||||
--settings-text-secondary: var(--dark-settings-text-secondary);
|
||||
--settings-border: var(--dark-settings-border);
|
||||
--settings-input-bg: var(--dark-settings-input-bg);
|
||||
--settings-input-border: var(--dark-settings-input-border);
|
||||
--settings-hover: var(--dark-settings-hover);
|
||||
--scrollbar-track: var(--dark-scrollbar-track);
|
||||
--scrollbar-thumb: var(--dark-scrollbar-thumb);
|
||||
--scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* 监听系统浅色主题 */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-theme="auto"] {
|
||||
--toolbar-bg: var(--light-toolbar-bg);
|
||||
--toolbar-border: var(--light-toolbar-border);
|
||||
--toolbar-text: var(--light-toolbar-text);
|
||||
--toolbar-text-secondary: var(--light-toolbar-text-secondary);
|
||||
--toolbar-button-hover: var(--light-toolbar-button-hover);
|
||||
--toolbar-separator: var(--light-toolbar-button-hover);
|
||||
--bg-secondary: var(--light-bg-secondary);
|
||||
--text-secondary: var(--light-text-secondary);
|
||||
--text-muted: var(--light-text-muted);
|
||||
--border-color: var(--light-border-color);
|
||||
--settings-bg: var(--light-settings-bg);
|
||||
--settings-card-bg: var(--light-settings-card-bg);
|
||||
--settings-text: var(--light-settings-text);
|
||||
--settings-text-secondary: var(--light-settings-text-secondary);
|
||||
--settings-border: var(--light-settings-border);
|
||||
--settings-input-bg: var(--light-settings-input-bg);
|
||||
--settings-input-border: var(--light-settings-input-border);
|
||||
--settings-hover: var(--light-settings-hover);
|
||||
--scrollbar-track: var(--light-scrollbar-track);
|
||||
--scrollbar-thumb: var(--light-scrollbar-thumb);
|
||||
--scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* 手动选择浅色主题 */
|
||||
:root[data-theme="light"] {
|
||||
--toolbar-bg: var(--light-toolbar-bg);
|
||||
--toolbar-border: var(--light-toolbar-border);
|
||||
--toolbar-text: var(--light-toolbar-text);
|
||||
--toolbar-text-secondary: var(--light-toolbar-text-secondary);
|
||||
--toolbar-button-hover: var(--light-toolbar-button-hover);
|
||||
--toolbar-separator: var(--light-toolbar-button-hover);
|
||||
--bg-secondary: var(--light-bg-secondary);
|
||||
--text-secondary: var(--light-text-secondary);
|
||||
--text-muted: var(--light-text-muted);
|
||||
--border-color: var(--light-border-color);
|
||||
--settings-bg: var(--light-settings-bg);
|
||||
--settings-card-bg: var(--light-settings-card-bg);
|
||||
--settings-text: var(--light-settings-text);
|
||||
--settings-text-secondary: var(--light-settings-text-secondary);
|
||||
--settings-border: var(--light-settings-border);
|
||||
--settings-input-bg: var(--light-settings-input-bg);
|
||||
--settings-input-border: var(--light-settings-input-border);
|
||||
--settings-hover: var(--light-settings-hover);
|
||||
--scrollbar-track: var(--light-scrollbar-track);
|
||||
--scrollbar-thumb: var(--light-scrollbar-thumb);
|
||||
--scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* 手动选择深色主题 */
|
||||
:root[data-theme="dark"] {
|
||||
--toolbar-bg: var(--dark-toolbar-bg);
|
||||
--toolbar-border: var(--dark-toolbar-border);
|
||||
--toolbar-text: var(--dark-toolbar-text);
|
||||
--toolbar-text-secondary: var(--dark-toolbar-text-secondary);
|
||||
--toolbar-button-hover: var(--dark-toolbar-button-hover);
|
||||
--toolbar-separator: var(--dark-toolbar-button-hover);
|
||||
--bg-secondary: var(--dark-bg-secondary);
|
||||
--text-secondary: var(--dark-text-secondary);
|
||||
--text-muted: var(--dark-text-muted);
|
||||
--border-color: var(--dark-border-color);
|
||||
--settings-bg: var(--dark-settings-bg);
|
||||
--settings-card-bg: var(--dark-settings-card-bg);
|
||||
--settings-text: var(--dark-settings-text);
|
||||
--settings-text-secondary: var(--dark-settings-text-secondary);
|
||||
--settings-border: var(--dark-settings-border);
|
||||
--settings-input-bg: var(--dark-settings-input-bg);
|
||||
--settings-input-border: var(--dark-settings-input-border);
|
||||
--settings-hover: var(--dark-settings-hover);
|
||||
--scrollbar-track: var(--dark-scrollbar-track);
|
||||
--scrollbar-thumb: var(--dark-scrollbar-thumb);
|
||||
--scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
|
||||
}
|
||||
@@ -123,7 +123,8 @@ onMounted(async () => {
|
||||
.windows-titlebar {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
background: #202020;
|
||||
background: var(--toolbar-bg);
|
||||
border-bottom: 1px solid var(--toolbar-border);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
@@ -145,7 +146,7 @@ onMounted(async () => {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
gap: 8px;
|
||||
color: #ffffff;
|
||||
color: var(--toolbar-text);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
cursor: default;
|
||||
@@ -169,7 +170,7 @@ onMounted(async () => {
|
||||
|
||||
.titlebar-title {
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
color: var(--toolbar-text);
|
||||
}
|
||||
|
||||
.titlebar-controls {
|
||||
@@ -187,7 +188,7 @@ onMounted(async () => {
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
color: var(--toolbar-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -197,11 +198,12 @@ onMounted(async () => {
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.0605);
|
||||
background: var(--toolbar-button-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.0837);
|
||||
background: var(--toolbar-button-hover);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -220,12 +222,13 @@ onMounted(async () => {
|
||||
|
||||
.minimize-button:hover,
|
||||
.maximize-button:hover {
|
||||
background: rgba(255, 255, 255, 0.0605);
|
||||
background: var(--toolbar-button-hover);
|
||||
}
|
||||
|
||||
.minimize-button:active,
|
||||
.maximize-button:active {
|
||||
background: rgba(255, 255, 255, 0.0837);
|
||||
background: var(--toolbar-button-hover);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
|
||||
@@ -174,7 +174,8 @@ watch(isLoaded, async (newLoaded) => {
|
||||
color: var(--text-muted);
|
||||
|
||||
.stat-value {
|
||||
color: #e0e0e0;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -212,10 +213,12 @@ watch(isLoaded, async (newLoaded) => {
|
||||
cursor: pointer;
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
background-color: var(--border-color);
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
opacity: 1;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,7 +258,8 @@ watch(isLoaded, async (newLoaded) => {
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background-color: var(--border-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@@ -291,7 +295,8 @@ watch(isLoaded, async (newLoaded) => {
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
background-color: var(--border-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@@ -321,7 +326,8 @@ watch(isLoaded, async (newLoaded) => {
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-hover);
|
||||
background-color: var(--border-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@@ -342,7 +348,7 @@ watch(isLoaded, async (newLoaded) => {
|
||||
padding: 2px;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
35
frontend/src/composables/useSystemTheme.ts
Normal file
35
frontend/src/composables/useSystemTheme.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
|
||||
export function useSystemTheme() {
|
||||
const configStore = useConfigStore();
|
||||
const currentSystemTheme = ref<'dark' | 'light'>('dark');
|
||||
|
||||
// 设置主题 - 简化版本
|
||||
const setTheme = (theme: string) => {
|
||||
const root = document.documentElement;
|
||||
root.setAttribute('data-theme', theme);
|
||||
};
|
||||
|
||||
// 监听配置变化
|
||||
watch(
|
||||
() => configStore.config.appearance.systemTheme,
|
||||
(newTheme) => {
|
||||
// 直接根据配置设置主题，不需要检测系统主题
|
||||
const root = document.documentElement;
|
||||
root.setAttribute('data-theme', newTheme);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const root = document.documentElement;
|
||||
const systemTheme = configStore.config.appearance.systemTheme;
|
||||
root.setAttribute('data-theme', systemTheme);
|
||||
});
|
||||
|
||||
return {
|
||||
currentSystemTheme,
|
||||
setTheme
|
||||
};
|
||||
}
|
||||
@@ -37,12 +37,19 @@ export default {
|
||||
languageChanged: 'Language setting updated',
|
||||
languageChangeFailed: 'Failed to update language setting',
|
||||
themeChanged: 'Theme setting updated',
|
||||
themeChangeFailed: 'Failed to update theme setting'
|
||||
themeChangeFailed: 'Failed to update theme setting',
|
||||
systemThemeChanged: 'System theme setting updated',
|
||||
systemThemeChangeFailed: 'Failed to update system theme setting'
|
||||
},
|
||||
languages: {
|
||||
'zh-CN': '简体中文',
|
||||
'en-US': 'English'
|
||||
},
|
||||
systemTheme: {
|
||||
dark: 'Dark',
|
||||
light: 'Light',
|
||||
auto: 'Follow System'
|
||||
},
|
||||
document: {
|
||||
loadSuccess: 'Document loaded successfully',
|
||||
loadFailed: 'Failed to load document',
|
||||
@@ -76,7 +83,6 @@ export default {
|
||||
cancel: 'Cancel',
|
||||
dangerZone: 'Danger Zone',
|
||||
resetAllSettings: 'Reset All Settings',
|
||||
resetDescription: 'This will restore all settings to their default values. This action cannot be undone.',
|
||||
confirmReset: 'Click again to confirm reset',
|
||||
globalHotkey: 'Global Keyboard Shortcuts',
|
||||
enableGlobalHotkey: 'Enable Global Hotkeys',
|
||||
@@ -106,6 +112,7 @@ export default {
|
||||
tabs: 'Tabs',
|
||||
enableTabIndent: 'Enable Tab Indent',
|
||||
language: 'Interface Language',
|
||||
systemTheme: 'System Theme',
|
||||
theme: 'Editor Theme',
|
||||
themeDescription: 'Choose editor theme',
|
||||
restartRequired: '(Restart required)',
|
||||
|
||||
@@ -37,12 +37,19 @@ export default {
|
||||
languageChanged: '语言设置已更新',
|
||||
languageChangeFailed: '语言设置更新失败',
|
||||
themeChanged: '主题设置已更新',
|
||||
themeChangeFailed: '主题设置更新失败'
|
||||
themeChangeFailed: '主题设置更新失败',
|
||||
systemThemeChanged: '系统主题设置已更新',
|
||||
systemThemeChangeFailed: '系统主题设置更新失败'
|
||||
},
|
||||
languages: {
|
||||
'zh-CN': '简体中文',
|
||||
'en-US': 'English'
|
||||
},
|
||||
systemTheme: {
|
||||
dark: '深色',
|
||||
light: '浅色',
|
||||
auto: '跟随系统'
|
||||
},
|
||||
document: {
|
||||
loadSuccess: '文档加载成功',
|
||||
loadFailed: '文档加载失败',
|
||||
@@ -76,7 +83,6 @@ export default {
|
||||
cancel: '取消',
|
||||
dangerZone: '危险操作',
|
||||
resetAllSettings: '重置所有设置',
|
||||
resetDescription: '这将恢复所有设置为默认值，此操作无法撤销',
|
||||
confirmReset: '再次点击确认重置',
|
||||
globalHotkey: '全局键盘快捷键',
|
||||
enableGlobalHotkey: '启用全局热键',
|
||||
@@ -106,6 +112,7 @@ export default {
|
||||
tabs: '制表符',
|
||||
enableTabIndent: '启用 Tab 缩进',
|
||||
language: '界面语言',
|
||||
systemTheme: '系统主题',
|
||||
theme: '编辑器主题',
|
||||
themeDescription: '选择编辑器主题',
|
||||
restartRequired: '(需要重启)',
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
EditingConfig,
|
||||
GeneralConfig,
|
||||
LanguageType,
|
||||
SystemThemeType,
|
||||
TabType,
|
||||
ThemeType
|
||||
} from '@/../bindings/voidraft/internal/models';
|
||||
@@ -67,7 +68,8 @@ const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
|
||||
|
||||
const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
|
||||
language: 'appearance.language',
|
||||
theme: 'appearance.theme'
|
||||
theme: 'appearance.theme',
|
||||
systemTheme: 'appearance.system_theme'
|
||||
} as const;
|
||||
|
||||
// 配置限制
|
||||
@@ -139,7 +141,8 @@ const DEFAULT_CONFIG: AppConfig = {
|
||||
},
|
||||
appearance: {
|
||||
language: LanguageType.LangZhCN,
|
||||
theme: 'default-dark' as ThemeType
|
||||
theme: 'default-dark' as ThemeType,
|
||||
systemTheme: 'dark' as SystemThemeType
|
||||
},
|
||||
keyBindings: {},
|
||||
updates: {},
|
||||
@@ -308,6 +311,13 @@ export const useConfigStore = defineStore('config', () => {
|
||||
}, 'config.themeChangeFailed', 'config.themeChanged');
|
||||
};
|
||||
|
||||
// 系统主题设置方法
|
||||
const setSystemTheme = async (systemTheme: SystemThemeType): Promise<void> => {
|
||||
await safeCall(async () => {
|
||||
await updateAppearanceConfig('systemTheme', systemTheme);
|
||||
}, 'config.systemThemeChangeFailed', 'config.systemThemeChanged');
|
||||
};
|
||||
|
||||
// 初始化语言设置
|
||||
const initializeLanguage = async (): Promise<void> => {
|
||||
try {
|
||||
@@ -372,6 +382,7 @@ export const useConfigStore = defineStore('config', () => {
|
||||
|
||||
// 主题相关方法
|
||||
setTheme,
|
||||
setSystemTheme,
|
||||
|
||||
// 字体大小操作
|
||||
...adjusters.fontSize,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// 统一类型导出
|
||||
export type { ThemeType, LanguageType } from '@/../bindings/voidraft/internal/models';
|
||||
export type { ThemeType, LanguageType, SystemThemeType } from '@/../bindings/voidraft/internal/models';
|
||||
export * from './theme';
|
||||
export * from './editor';
|
||||
@@ -45,7 +45,7 @@ const goBackToEditor = async () => {
|
||||
<h1>{{ t('settings.title') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-nav">
|
||||
<div class="settings-nav thin-scrollbar">
|
||||
<div
|
||||
v-for="item in navItems"
|
||||
:key="item.id"
|
||||
@@ -76,8 +76,8 @@ const goBackToEditor = async () => {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
background-color: var(--settings-bg);
|
||||
color: var(--settings-text);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
@@ -85,16 +85,16 @@ const goBackToEditor = async () => {
|
||||
.settings-sidebar {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: #333333;
|
||||
border-right: 1px solid #444444;
|
||||
background-color: var(--settings-card-bg);
|
||||
border-right: 1px solid var(--settings-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.settings-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid #444444;
|
||||
background-color: #2d2d2d;
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
background-color: var(--settings-card-bg);
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
@@ -104,7 +104,7 @@ const goBackToEditor = async () => {
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a0a0a0;
|
||||
color: var(--settings-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
@@ -114,8 +114,8 @@ const goBackToEditor = async () => {
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #e0e0e0;
|
||||
background-color: #3a3a3a;
|
||||
color: var(--settings-text);
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -128,7 +128,7 @@ const goBackToEditor = async () => {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
color: var(--settings-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -138,19 +138,6 @@ const goBackToEditor = async () => {
|
||||
padding: 10px 0;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #555555;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -160,11 +147,11 @@ const goBackToEditor = async () => {
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a3a3a;
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #3c3c3c;
|
||||
background-color: var(--settings-hover);
|
||||
border-left-color: #4a9eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -183,8 +170,8 @@ const goBackToEditor = async () => {
|
||||
|
||||
.settings-footer {
|
||||
padding: 12px 16px 16px 16px;
|
||||
border-top: 1px solid #444444;
|
||||
background-color: #2d2d2d;
|
||||
border-top: 1px solid var(--settings-border);
|
||||
background-color: var(--settings-card-bg);
|
||||
|
||||
.memory-info-section {
|
||||
display: flex;
|
||||
@@ -193,7 +180,7 @@ const goBackToEditor = async () => {
|
||||
|
||||
.section-title {
|
||||
font-size: 10px;
|
||||
color: #777777;
|
||||
color: var(--settings-text-secondary);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
@@ -206,36 +193,11 @@ const goBackToEditor = async () => {
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
padding: 24px 24px 48px 24px;
|
||||
overflow-y: auto;
|
||||
background-color: #2a2a2a;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #555555;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #2a2a2a;
|
||||
}
|
||||
background-color: var(--settings-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义变量
|
||||
:root {
|
||||
--border-color: #444444;
|
||||
--hover-color: #3a3a3a;
|
||||
--active-bg: #3c3c3c;
|
||||
--accent-color: #4a9eff;
|
||||
--bg-primary: #2a2a2a;
|
||||
--bg-secondary: #333333;
|
||||
--text-primary: #e0e0e0;
|
||||
--text-secondary: #a0a0a0;
|
||||
--text-muted: #777777;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -21,11 +21,12 @@ defineProps<{
|
||||
.setting-item {
|
||||
display: flex;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #444444;
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
background-color: var(--settings-hover);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@@ -40,12 +41,12 @@ defineProps<{
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
}
|
||||
|
||||
.setting-description {
|
||||
font-size: 12px;
|
||||
color: #a0a0a0;
|
||||
color: var(--settings-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,19 +16,20 @@ defineProps<{
|
||||
<style scoped lang="scss">
|
||||
.setting-section {
|
||||
margin-bottom: 30px;
|
||||
background-color: #333333;
|
||||
background-color: var(--settings-card-bg);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid var(--settings-border);
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
background-color: #3d3d3d;
|
||||
color: #ffffff;
|
||||
border-bottom: 1px solid #444444;
|
||||
background-color: var(--settings-hover);
|
||||
color: var(--settings-text);
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
|
||||
@@ -22,7 +22,7 @@ const toggle = () => {
|
||||
.toggle-switch {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background-color: #555555;
|
||||
background-color: var(--settings-input-border);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@@ -44,7 +44,7 @@ const toggle = () => {
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--settings-text);
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
|
||||
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import SettingSection from '../components/SettingSection.vue';
|
||||
import SettingItem from '../components/SettingItem.vue';
|
||||
import type { ThemeType } from '@/types';
|
||||
import type { ThemeType, SystemThemeType } from '@/types';
|
||||
import { LanguageType } from '@/../bindings/voidraft/internal/models';
|
||||
import { AVAILABLE_THEMES } from '@/types/theme';
|
||||
import { useTheme } from '@/composables/useTheme';
|
||||
@@ -21,6 +21,13 @@ const languageOptions = [
|
||||
{ value: LanguageType.LangEnUS, label: t('languages.en-US') },
|
||||
];
|
||||
|
||||
// 系统主题选项
|
||||
const systemThemeOptions = [
|
||||
{ value: 'dark' as SystemThemeType, label: t('systemTheme.dark') },
|
||||
{ value: 'light' as SystemThemeType, label: t('systemTheme.light') },
|
||||
{ value: 'auto' as SystemThemeType, label: t('systemTheme.auto') },
|
||||
];
|
||||
|
||||
// 更新语言设置
|
||||
const updateLanguage = async (event: Event) => {
|
||||
const select = event.target as HTMLSelectElement;
|
||||
@@ -32,6 +39,17 @@ const updateLanguage = async (event: Event) => {
|
||||
);
|
||||
};
|
||||
|
||||
// 更新系统主题设置
|
||||
const updateSystemTheme = async (event: Event) => {
|
||||
const select = event.target as HTMLSelectElement;
|
||||
const selectedSystemTheme = select.value as SystemThemeType;
|
||||
|
||||
await safeCall(
|
||||
() => configStore.setSystemTheme(selectedSystemTheme),
|
||||
'config.systemThemeChangeFailed'
|
||||
);
|
||||
};
|
||||
|
||||
// 主题选择
|
||||
const themeOptions = computed(() => AVAILABLE_THEMES);
|
||||
const selectedTheme = ref<ThemeType>(configStore.config.appearance.theme || 'default-dark' as ThemeType);
|
||||
@@ -77,6 +95,16 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection :title="t('settings.systemTheme')">
|
||||
<SettingItem :title="t('settings.systemTheme')">
|
||||
<select class="select-input" :value="configStore.config.appearance.systemTheme" @change="updateSystemTheme">
|
||||
<option v-for="option in systemThemeOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection :title="t('settings.appearance')">
|
||||
<div class="appearance-content">
|
||||
<div class="theme-selection-area">
|
||||
@@ -140,6 +168,7 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
max-width: 1000px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.appearance-content {
|
||||
@@ -169,17 +198,18 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
|
||||
.select-input {
|
||||
min-width: 150px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #555555;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
background-color: #3a3a3a;
|
||||
color: #e0e0e0;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
font-size: 13px;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 30px;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
@@ -187,7 +217,8 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #2a2a2a;
|
||||
background-color: var(--settings-card-bg);
|
||||
color: var(--settings-text);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -295,30 +295,31 @@ const fontPreviewText = computed(() => {
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
max-width: 800px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.number-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
|
||||
.control-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #3a3a3a;
|
||||
border: 1px solid #555555;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #444444;
|
||||
border-color: #666666;
|
||||
background-color: var(--settings-hover);
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
@@ -335,9 +336,9 @@ const fontPreviewText = computed(() => {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #e0e0e0;
|
||||
background-color: #3a3a3a;
|
||||
border: 1px solid #555555;
|
||||
color: var(--settings-text);
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
@@ -346,14 +347,14 @@ const fontPreviewText = computed(() => {
|
||||
.font-size-preview {
|
||||
margin: 15px 0 5px 20px;
|
||||
padding: 15px;
|
||||
background-color: #252525;
|
||||
border: 1px solid #444444;
|
||||
background-color: var(--settings-card-bg);
|
||||
border: 1px solid var(--settings-border);
|
||||
border-radius: 4px;
|
||||
font-family: 'Consolas', 'Courier New', monospace;
|
||||
|
||||
.preview-label {
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@@ -364,7 +365,7 @@ const fontPreviewText = computed(() => {
|
||||
|
||||
span {
|
||||
line-height: 1.4;
|
||||
color: #d0d0d0;
|
||||
color: var(--settings-text-secondary);
|
||||
}
|
||||
|
||||
.indent {
|
||||
@@ -377,13 +378,13 @@ const fontPreviewText = computed(() => {
|
||||
.font-preview {
|
||||
margin: 15px 0 5px 20px;
|
||||
padding: 15px;
|
||||
background-color: #252525;
|
||||
border: 1px solid #444444;
|
||||
background-color: var(--settings-card-bg);
|
||||
border: 1px solid var(--settings-border);
|
||||
border-radius: 4px;
|
||||
|
||||
.preview-label {
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@@ -393,7 +394,7 @@ const fontPreviewText = computed(() => {
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
color: #d0d0d0;
|
||||
color: var(--settings-text-secondary);
|
||||
}
|
||||
|
||||
.indent {
|
||||
@@ -407,10 +408,10 @@ const fontPreviewText = computed(() => {
|
||||
.font-weight-select {
|
||||
min-width: 180px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #555555;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
background-color: #3a3a3a;
|
||||
color: #e0e0e0;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -420,12 +421,12 @@ const fontPreviewText = computed(() => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #666666;
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #3a3a3a;
|
||||
color: #e0e0e0;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
@@ -433,18 +434,18 @@ const fontPreviewText = computed(() => {
|
||||
.tab-type-toggle {
|
||||
min-width: 100px;
|
||||
padding: 8px 15px;
|
||||
background-color: #3a3a3a;
|
||||
border: 1px solid #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #444444;
|
||||
border-color: #666666;
|
||||
background-color: var(--settings-hover);
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -455,10 +456,10 @@ const fontPreviewText = computed(() => {
|
||||
.number-input {
|
||||
width: 100px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #555555;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
background-color: #3a3a3a;
|
||||
color: #e0e0e0;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
font-size: 13px;
|
||||
|
||||
&:focus {
|
||||
@@ -467,14 +468,14 @@ const fontPreviewText = computed(() => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #666666;
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
background-color: #2a2a2a;
|
||||
color: #a0a0a0;
|
||||
background-color: var(--settings-hover);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -491,8 +492,8 @@ const fontPreviewText = computed(() => {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a3a3a;
|
||||
border-color: #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border-color: var(--settings-input-border);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -506,8 +507,8 @@ const fontPreviewText = computed(() => {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a3a3a;
|
||||
border-color: #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border-color: var(--settings-input-border);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -148,9 +148,11 @@ const progressBarClass = computed(() => {
|
||||
});
|
||||
|
||||
const progressBarWidth = computed(() => {
|
||||
if (isMigrating.value) {
|
||||
// 只有在显示消息且正在迁移时才显示进度条
|
||||
if (showMessages.value && isMigrating.value) {
|
||||
return migrationProgress.progress + '%';
|
||||
} else if (migrationComplete.value || migrationFailed.value) {
|
||||
} else if (showMessages.value && (migrationComplete.value || migrationFailed.value)) {
|
||||
// 迁移完成或失败时，短暂显示100%，然后随着消息隐藏而隐藏
|
||||
return '100%';
|
||||
}
|
||||
return '0%';
|
||||
@@ -369,7 +371,7 @@ onUnmounted(() => {
|
||||
<div
|
||||
class="progress-bar"
|
||||
:class="[
|
||||
{ 'active': showMessages },
|
||||
{ 'active': showMessages && (isMigrating || migrationComplete || migrationFailed) },
|
||||
progressBarClass
|
||||
]"
|
||||
:style="{ width: progressBarWidth }"
|
||||
@@ -392,7 +394,7 @@ onUnmounted(() => {
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection :title="t('settings.dangerZone')">
|
||||
<SettingItem :title="t('settings.resetAllSettings')" :description="t('settings.resetDescription')">
|
||||
<SettingItem :title="t('settings.resetAllSettings')">
|
||||
<button
|
||||
class="reset-button"
|
||||
:class="{ 'confirming': resetConfirmState === 'confirming' }"
|
||||
@@ -415,6 +417,7 @@ onUnmounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
max-width: 800px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.hotkey-selector {
|
||||
@@ -453,15 +456,15 @@ onUnmounted(() => {
|
||||
.modifier-key {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
background-color: #444444;
|
||||
border: 1px solid #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: #b0b0b0;
|
||||
color: var(--settings-text-secondary);
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #4a4a4a;
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -476,13 +479,13 @@ onUnmounted(() => {
|
||||
.key-select {
|
||||
min-width: 80px;
|
||||
padding: 8px 12px;
|
||||
background-color: #3a3a3a;
|
||||
border: 1px solid #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
font-size: 13px;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
@@ -496,11 +499,12 @@ onUnmounted(() => {
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: #2a2a2a;
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #2a2a2a;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -509,19 +513,19 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background-color: #252525;
|
||||
border: 1px solid #444444;
|
||||
background-color: var(--settings-card-bg);
|
||||
border: 1px solid var(--settings-border);
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
|
||||
.preview-label {
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
color: var(--settings-text-secondary);
|
||||
}
|
||||
|
||||
.preview-hotkey {
|
||||
font-size: 13px;
|
||||
color: #4a9eff;
|
||||
color: var(--settings-text);
|
||||
font-weight: 500;
|
||||
font-family: 'Consolas', 'Courier New', monospace;
|
||||
}
|
||||
@@ -544,7 +548,7 @@ onUnmounted(() => {
|
||||
.setting-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -563,24 +567,23 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px;
|
||||
background-color: #3a3a3a;
|
||||
border: 1px solid #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: #4a9eff;
|
||||
background-color: #404040;
|
||||
border-color: var(--settings-hover);
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #4a9eff;
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@@ -589,7 +592,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #888888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -598,25 +601,27 @@ onUnmounted(() => {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background-color: #22c55e;
|
||||
transition: width 0.3s ease;
|
||||
background-color: transparent;
|
||||
border-radius: 0 0 4px 4px;
|
||||
transition: all 0.3s ease;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.migrating {
|
||||
background-color: #3b82f6;
|
||||
animation: progress-wave 2s infinite;
|
||||
}
|
||||
|
||||
&.migrating {
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
&.success {
|
||||
background-color: #22c55e;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: #22c55e;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: #ef4444;
|
||||
&.error {
|
||||
background-color: #ef4444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -653,10 +658,10 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
&.start {
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted);
|
||||
|
||||
&::before {
|
||||
background-color: #94a3b8;
|
||||
background-color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -732,6 +737,19 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条波浪动画
|
||||
@keyframes progress-wave {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮脉冲动画
|
||||
@keyframes pulse-button {
|
||||
0% {
|
||||
|
||||
@@ -121,6 +121,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
max-width: 800px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.key-bindings-container {
|
||||
@@ -129,8 +130,8 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
.key-bindings-header {
|
||||
display: flex;
|
||||
padding: 0 0 10px 0;
|
||||
border-bottom: 1px solid #444444;
|
||||
color: #a0a0a0;
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -138,7 +139,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
.key-binding-row {
|
||||
display: flex;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
@@ -147,7 +148,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
&.is-editing {
|
||||
@@ -159,6 +160,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
flex: 1;
|
||||
padding-right: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--settings-text);
|
||||
}
|
||||
|
||||
.keybinding-col {
|
||||
@@ -169,15 +171,16 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
|
||||
&.is-editing {
|
||||
font-style: italic;
|
||||
color: #a0a0a0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.key-badge {
|
||||
background-color: #3a3a3a;
|
||||
background-color: var(--settings-input-bg);
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #555555;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
color: var(--settings-text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -187,17 +190,17 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
|
||||
.edit-button {
|
||||
padding: 5px 10px;
|
||||
background-color: #3a3a3a;
|
||||
border: 1px solid #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #444444;
|
||||
border-color: #666666;
|
||||
background-color: var(--settings-hover);
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -209,9 +212,9 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
|
||||
|
||||
.coming-soon-placeholder {
|
||||
padding: 20px;
|
||||
background-color: #333333;
|
||||
background-color: var(--settings-card-bg);
|
||||
border-radius: 6px;
|
||||
color: #a0a0a0;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -89,6 +89,7 @@ const downloadUpdate = () => {
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
max-width: 800px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.update-info {
|
||||
@@ -105,22 +106,22 @@ const downloadUpdate = () => {
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
color: #a0a0a0;
|
||||
color: var(--text-muted);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.check-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #3a3a3a;
|
||||
border: 1px solid #555555;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
color: var(--settings-text);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
@@ -129,8 +130,8 @@ const downloadUpdate = () => {
|
||||
gap: 8px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #444444;
|
||||
border-color: #666666;
|
||||
background-color: var(--settings-hover);
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
@@ -148,7 +149,7 @@ const downloadUpdate = () => {
|
||||
height: 14px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: #e0e0e0;
|
||||
border-top-color: var(--settings-text);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@@ -159,8 +160,8 @@ const downloadUpdate = () => {
|
||||
}
|
||||
|
||||
.update-available {
|
||||
background-color: #2c3847;
|
||||
border: 1px solid #3a4a5c;
|
||||
background-color: var(--settings-card-bg);
|
||||
border: 1px solid var(--settings-border);
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
|
||||
@@ -199,7 +200,7 @@ const downloadUpdate = () => {
|
||||
.update-notes {
|
||||
.notes-title {
|
||||
font-size: 13px;
|
||||
color: #b0b0b0;
|
||||
color: var(--settings-text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -209,7 +210,7 @@ const downloadUpdate = () => {
|
||||
|
||||
li {
|
||||
font-size: 13px;
|
||||
color: #d0d0d0;
|
||||
color: var(--settings-text-secondary);
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
|
||||
Reference in New Issue
Block a user