lint:fix all
This commit is contained in:
@@ -41,20 +41,20 @@
|
||||
* </template>
|
||||
* ```
|
||||
*/
|
||||
import { ref, watch } from 'vue';
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
// 定义各种选项
|
||||
const themes = [
|
||||
{ label: '经典', value: 'classic' },
|
||||
{ label: '优雅', value: 'elegant' },
|
||||
{ label: '简洁', value: 'minimal' }
|
||||
];
|
||||
]
|
||||
|
||||
const fonts = [
|
||||
{ label: '无衬线', value: 'sans-serif' },
|
||||
{ label: '衬线', value: 'serif' },
|
||||
{ label: '等宽', value: 'monospace' }
|
||||
];
|
||||
]
|
||||
|
||||
const fontSizes = [
|
||||
{ label: '更小', value: 'xs' },
|
||||
@@ -62,7 +62,7 @@ const fontSizes = [
|
||||
{ label: '推荐', value: 'base' },
|
||||
{ label: '稍大', value: 'lg' },
|
||||
{ label: '更大', value: 'xl' }
|
||||
];
|
||||
]
|
||||
|
||||
const themeColors = [
|
||||
{ label: '经典蓝', value: 'blue', color: '#3B82F6' },
|
||||
@@ -76,7 +76,7 @@ const themeColors = [
|
||||
{ label: '石墨黑', value: 'gray', color: '#6B7280' },
|
||||
{ label: '雾烟灰', value: 'slate', color: '#64748B' },
|
||||
{ label: '樱花粉', value: 'pink', color: '#EC4899' }
|
||||
];
|
||||
]
|
||||
|
||||
const codeThemes = [
|
||||
{ label: 'dark', value: 'dark' },
|
||||
@@ -85,14 +85,14 @@ const codeThemes = [
|
||||
{ label: 'github-light', value: 'github-light' },
|
||||
{ label: 'one-dark-pro', value: 'one-dark-pro' },
|
||||
{ label: 'material-theme', value: 'material-theme' }
|
||||
];
|
||||
]
|
||||
|
||||
const captionFormats = [
|
||||
{ label: 'title 优先', value: 'title' },
|
||||
{ label: 'alt 优先', value: 'alt' },
|
||||
{ label: '只显示 title', value: 'title-only' },
|
||||
{ label: '只显示 alt', value: 'alt-only' }
|
||||
];
|
||||
]
|
||||
|
||||
// 默认设置
|
||||
const defaultSettings = {
|
||||
@@ -102,92 +102,92 @@ const defaultSettings = {
|
||||
themeColor: 'blue',
|
||||
codeTheme: 'dark',
|
||||
captionFormat: 'none'
|
||||
};
|
||||
}
|
||||
|
||||
// 响应式状态
|
||||
const selectedTheme = ref<string>(defaultSettings.theme);
|
||||
const selectedFont = ref<string>(defaultSettings.font);
|
||||
const selectedFontSize = ref<string>(defaultSettings.fontSize);
|
||||
const selectedThemeColor = ref<string>(defaultSettings.themeColor);
|
||||
const customColor = ref<string>('#3B82F6');
|
||||
const selectedCodeTheme = ref<string>(defaultSettings.codeTheme);
|
||||
const selectedCaptionFormat = ref<string>(defaultSettings.captionFormat);
|
||||
const selectedTheme = ref<string>(defaultSettings.theme)
|
||||
const selectedFont = ref<string>(defaultSettings.font)
|
||||
const selectedFontSize = ref<string>(defaultSettings.fontSize)
|
||||
const selectedThemeColor = ref<string>(defaultSettings.themeColor)
|
||||
const customColor = ref<string>('#3B82F6')
|
||||
const selectedCodeTheme = ref<string>(defaultSettings.codeTheme)
|
||||
const selectedCaptionFormat = ref<string>(defaultSettings.captionFormat)
|
||||
|
||||
// 这是一个单例，确保在整个应用中只有一个主题状态实例
|
||||
let isInitialized = false;
|
||||
let isInitialized = false
|
||||
|
||||
export function useTheme() {
|
||||
const colorMode = useColorMode();
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const initializeTheme = () => {
|
||||
if (import.meta.client && !isInitialized) {
|
||||
selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme;
|
||||
selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font;
|
||||
selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize;
|
||||
selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor;
|
||||
selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme;
|
||||
selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat;
|
||||
|
||||
// 找到自定义颜色对应的主题色值
|
||||
const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6';
|
||||
customColor.value = localStorage.getItem('app-custom-color') || initialColor;
|
||||
selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme
|
||||
selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font
|
||||
selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize
|
||||
selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor
|
||||
selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme
|
||||
selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat
|
||||
|
||||
applyThemeVariables();
|
||||
isInitialized = true;
|
||||
console.log('主题已初始化');
|
||||
// 找到自定义颜色对应的主题色值
|
||||
const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6'
|
||||
customColor.value = localStorage.getItem('app-custom-color') || initialColor
|
||||
|
||||
applyThemeVariables()
|
||||
isInitialized = true
|
||||
console.log('主题已初始化')
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const applyThemeVariables = () => {
|
||||
if (import.meta.client) {
|
||||
const root = document.documentElement;
|
||||
|
||||
const root = document.documentElement
|
||||
|
||||
// 颜色映射到 @nuxt/ui 支持的颜色
|
||||
const colorMapping: { [key: string]: string } = {
|
||||
'blue': 'blue',
|
||||
'emerald': 'emerald',
|
||||
'orange': 'orange',
|
||||
'yellow': 'yellow',
|
||||
'violet': 'violet',
|
||||
'sky': 'sky',
|
||||
'rose': 'rose',
|
||||
'lime': 'lime',
|
||||
'gray': 'gray',
|
||||
'slate': 'slate',
|
||||
'pink': 'pink'
|
||||
};
|
||||
|
||||
blue: 'blue',
|
||||
emerald: 'emerald',
|
||||
orange: 'orange',
|
||||
yellow: 'yellow',
|
||||
violet: 'violet',
|
||||
sky: 'sky',
|
||||
rose: 'rose',
|
||||
lime: 'lime',
|
||||
gray: 'gray',
|
||||
slate: 'slate',
|
||||
pink: 'pink'
|
||||
}
|
||||
|
||||
// 使用 @nuxt/ui 的主题系统
|
||||
if (selectedThemeColor.value !== 'custom') {
|
||||
const mappedColor = colorMapping[selectedThemeColor.value];
|
||||
const mappedColor = colorMapping[selectedThemeColor.value]
|
||||
if (mappedColor) {
|
||||
const appConfig = useAppConfig();
|
||||
if (!appConfig.ui.colors) appConfig.ui.colors = {};
|
||||
appConfig.ui.colors.primary = mappedColor;
|
||||
const appConfig = useAppConfig()
|
||||
if (!appConfig.ui.colors) appConfig.ui.colors = {}
|
||||
appConfig.ui.colors.primary = mappedColor
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 字体设置保持不变
|
||||
const fontMapping = {
|
||||
'sans-serif': 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
|
||||
'serif': 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
|
||||
'monospace': 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
|
||||
};
|
||||
root.style.setProperty('--font-family', fontMapping[selectedFont.value as keyof typeof fontMapping]);
|
||||
|
||||
}
|
||||
root.style.setProperty('--font-family', fontMapping[selectedFont.value as keyof typeof fontMapping])
|
||||
|
||||
const fontSizeMapping = {
|
||||
'xs': '0.75rem', 'sm': '0.875rem', 'base': '1rem', 'lg': '1.125rem', 'xl': '1.25rem'
|
||||
};
|
||||
root.style.setProperty('--font-size-base', fontSizeMapping[selectedFontSize.value as keyof typeof fontSizeMapping]);
|
||||
|
||||
root.classList.remove('theme-classic', 'theme-elegant', 'theme-minimal');
|
||||
root.classList.add(`theme-${selectedTheme.value}`);
|
||||
xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem'
|
||||
}
|
||||
root.style.setProperty('--font-size-base', fontSizeMapping[selectedFontSize.value as keyof typeof fontSizeMapping])
|
||||
|
||||
root.classList.remove('theme-classic', 'theme-elegant', 'theme-minimal')
|
||||
root.classList.add(`theme-${selectedTheme.value}`)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用自定义主色调
|
||||
*
|
||||
*
|
||||
* Nuxt UI v3 不支持运行时动态自定义颜色，因此我们使用 CSS 变量覆盖的方法：
|
||||
* 1. 保持 Nuxt UI 使用有效的颜色系统（这里使用 'blue' 作为基础）
|
||||
* 2. 通过 CSS 变量 --ui-primary 覆盖实际显示的颜色
|
||||
@@ -195,62 +195,62 @@ export function useTheme() {
|
||||
*/
|
||||
const applyCustomColor = () => {
|
||||
if (import.meta.client) {
|
||||
selectedThemeColor.value = 'custom';
|
||||
const root = document.documentElement;
|
||||
|
||||
selectedThemeColor.value = 'custom'
|
||||
const root = document.documentElement
|
||||
|
||||
// 使用 Nuxt UI v3 推荐的 CSS 变量覆盖方法
|
||||
// 设置主色调的 CSS 变量，这会影响所有使用 primary 颜色的组件
|
||||
root.style.setProperty('--ui-primary', customColor.value);
|
||||
|
||||
root.style.setProperty('--ui-primary', customColor.value)
|
||||
|
||||
// 保持 Nuxt UI 使用有效的颜色系统
|
||||
const appConfig = useAppConfig();
|
||||
if (!appConfig.ui.colors) appConfig.ui.colors = {};
|
||||
appConfig.ui.colors.primary = 'blue'; // 使用有效的颜色名称作为基础
|
||||
const appConfig = useAppConfig()
|
||||
if (!appConfig.ui.colors) appConfig.ui.colors = {}
|
||||
appConfig.ui.colors.primary = 'blue' // 使用有效的颜色名称作为基础
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const resetSettings = () => {
|
||||
selectedTheme.value = defaultSettings.theme;
|
||||
selectedFont.value = defaultSettings.font;
|
||||
selectedFontSize.value = defaultSettings.fontSize;
|
||||
selectedThemeColor.value = defaultSettings.themeColor;
|
||||
const defaultColor = themeColors.find(c => c.value === defaultSettings.themeColor)?.color || '#3B82F6';
|
||||
customColor.value = defaultColor;
|
||||
selectedCodeTheme.value = defaultSettings.codeTheme;
|
||||
selectedCaptionFormat.value = defaultSettings.captionFormat;
|
||||
|
||||
colorMode.preference = 'system';
|
||||
|
||||
applyThemeVariables();
|
||||
};
|
||||
selectedTheme.value = defaultSettings.theme
|
||||
selectedFont.value = defaultSettings.font
|
||||
selectedFontSize.value = defaultSettings.fontSize
|
||||
selectedThemeColor.value = defaultSettings.themeColor
|
||||
const defaultColor = themeColors.find(c => c.value === defaultSettings.themeColor)?.color || '#3B82F6'
|
||||
customColor.value = defaultColor
|
||||
selectedCodeTheme.value = defaultSettings.codeTheme
|
||||
selectedCaptionFormat.value = defaultSettings.captionFormat
|
||||
|
||||
colorMode.preference = 'system'
|
||||
|
||||
applyThemeVariables()
|
||||
}
|
||||
|
||||
// 监听预设主题色的变化，并同步更新自定义颜色选择器的值
|
||||
watch(selectedThemeColor, (newThemeColor) => {
|
||||
if (newThemeColor !== 'custom') {
|
||||
const colorObject = themeColors.find(c => c.value === newThemeColor);
|
||||
const colorObject = themeColors.find(c => c.value === newThemeColor)
|
||||
if (colorObject) {
|
||||
customColor.value = colorObject.color;
|
||||
//应用颜色
|
||||
applyCustomColor();
|
||||
customColor.value = colorObject.color
|
||||
// 应用颜色
|
||||
applyCustomColor()
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
watch([selectedTheme, selectedFont, selectedFontSize, selectedThemeColor, selectedCodeTheme, selectedCaptionFormat, customColor], () => {
|
||||
applyThemeVariables();
|
||||
|
||||
applyThemeVariables()
|
||||
|
||||
if (import.meta.client) {
|
||||
localStorage.setItem('app-theme', selectedTheme.value);
|
||||
localStorage.setItem('app-font', selectedFont.value);
|
||||
localStorage.setItem('app-font-size', selectedFontSize.value);
|
||||
localStorage.setItem('app-theme-color', selectedThemeColor.value);
|
||||
localStorage.setItem('app-code-theme', selectedCodeTheme.value);
|
||||
localStorage.setItem('app-caption-format', selectedCaptionFormat.value);
|
||||
localStorage.setItem('app-theme', selectedTheme.value)
|
||||
localStorage.setItem('app-font', selectedFont.value)
|
||||
localStorage.setItem('app-font-size', selectedFontSize.value)
|
||||
localStorage.setItem('app-theme-color', selectedThemeColor.value)
|
||||
localStorage.setItem('app-code-theme', selectedCodeTheme.value)
|
||||
localStorage.setItem('app-caption-format', selectedCaptionFormat.value)
|
||||
if (selectedThemeColor.value === 'custom') {
|
||||
localStorage.setItem('app-custom-color', customColor.value);
|
||||
localStorage.setItem('app-custom-color', customColor.value)
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
return {
|
||||
initializeTheme,
|
||||
@@ -270,5 +270,5 @@ export function useTheme() {
|
||||
applyCustomColor,
|
||||
resetSettings,
|
||||
colorMode
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user