Baobhan Sith
598 lines
27 KiB
TypeScript
598 lines
27 KiB
TypeScript
import { defineStore } from 'pinia';
|
|
import apiClient from '../utils/apiClient'; // 使用统一的 apiClient
|
|
import { ref, computed, watch, nextTick } from 'vue'; // 导入 nextTick
|
|
import type { ITheme } from 'xterm';
|
|
import type { TerminalTheme } from '../types/terminal-theme.types'; // 引用本地类型
|
|
import type { AppearanceSettings, UpdateAppearanceDto } from '../types/appearance.types'; // 引用本地类型
|
|
import { defaultXtermTheme, defaultUiTheme } from '../features/appearance/config/default-themes'; // 保持 .ts
|
|
import { presetTerminalThemes } from '../features/appearance/config/iterm-themes'; // <-- 导入预设主题
|
|
|
|
// Helper function to safely parse JSON
|
|
export const safeJsonParse = <T>(jsonString: string | undefined | null, defaultValue: T): T => { // Add export
|
|
if (!jsonString) return defaultValue;
|
|
try {
|
|
return JSON.parse(jsonString);
|
|
} catch (e) {
|
|
console.error("JSON 解析失败:", e);
|
|
return defaultValue;
|
|
}
|
|
};
|
|
|
|
export const useAppearanceStore = defineStore('appearance', () => {
|
|
// --- State ---
|
|
const isLoading = ref(false);
|
|
const error = ref<string | null>(null);
|
|
const isStyleCustomizerVisible = ref(false); // 控制样式编辑器可见性
|
|
|
|
// Appearance Settings State
|
|
const appearanceSettings = ref<Partial<AppearanceSettings>>({}); // 从 API 获取的原始设置
|
|
const allTerminalThemes = ref<TerminalTheme[]>([]); // 重命名: 存储从后端获取的所有主题
|
|
|
|
// --- Computed Properties (Getters) ---
|
|
|
|
// 移除 availableTerminalThemes 计算属性，直接使用 allTerminalThemes
|
|
// 当前应用的 UI 主题 (CSS 变量对象)
|
|
const currentUiTheme = computed<Record<string, string>>(() => {
|
|
return safeJsonParse(appearanceSettings.value.customUiTheme, defaultUiTheme);
|
|
});
|
|
|
|
// 当前激活的终端主题 ID
|
|
const activeTerminalThemeId = computed(() => appearanceSettings.value.activeTerminalThemeId);
|
|
|
|
// 当前应用的终端主题对象 (ITheme)
|
|
const currentTerminalTheme = computed<ITheme>(() => {
|
|
const activeId = activeTerminalThemeId.value; // number | null | undefined
|
|
if (activeId === null || activeId === undefined || allTerminalThemes.value.length === 0) {
|
|
// 如果没有激活 ID 或列表为空，查找默认主题
|
|
// TODO: 需要确认默认主题的识别方式 (preset_key='default' 或 name='默认')
|
|
const defaultTheme = allTerminalThemes.value.find(t => t.name === '默认'); // 假设按名称查找
|
|
return defaultTheme ? defaultTheme.themeData : defaultXtermTheme;
|
|
}
|
|
// 根据数字 ID 查找 (需要将 theme._id 转回数字比较)
|
|
const activeTheme = allTerminalThemes.value.find(t => parseInt(t._id ?? '-1', 10) === activeId);
|
|
return activeTheme ? activeTheme.themeData : defaultXtermTheme; // 找不到也回退到 xterm 默认
|
|
});
|
|
|
|
// 当前终端字体设置
|
|
const currentTerminalFontFamily = computed<string>(() => {
|
|
return appearanceSettings.value.terminalFontFamily || 'Consolas, "Courier New", monospace, "Microsoft YaHei", "微软雅黑"'; // 提供默认值
|
|
});
|
|
|
|
// 当前终端字体大小
|
|
const currentTerminalFontSize = computed<number>(() => {
|
|
// 提供默认值 14，如果后端没有设置或设置无效
|
|
const size = appearanceSettings.value.terminalFontSize;
|
|
return typeof size === 'number' && size > 0 ? size : 14;
|
|
});
|
|
|
|
// 页面背景图片 URL
|
|
const pageBackgroundImage = computed(() => appearanceSettings.value.pageBackgroundImage);
|
|
|
|
// 终端背景图片 URL
|
|
const terminalBackgroundImage = computed(() => appearanceSettings.value.terminalBackgroundImage);
|
|
|
|
// 当前编辑器字体大小
|
|
const currentEditorFontSize = computed<number>(() => {
|
|
// 提供默认值 14，如果后端没有设置或设置无效
|
|
const size = appearanceSettings.value.editorFontSize;
|
|
return typeof size === 'number' && size > 0 ? size : 14;
|
|
});
|
|
|
|
// 终端背景是否启用
|
|
const isTerminalBackgroundEnabled = computed<boolean>(() => {
|
|
// 提供默认值 true，如果后端没有设置或设置无效
|
|
const enabled = appearanceSettings.value.terminalBackgroundEnabled;
|
|
return typeof enabled === 'boolean' ? enabled : true; // 默认启用
|
|
});
|
|
|
|
// --- Actions ---
|
|
|
|
/**
|
|
* 加载所有外观相关设置 (外观设置 + 终端主题列表)
|
|
*/
|
|
async function loadInitialAppearanceData() {
|
|
isLoading.value = true;
|
|
error.value = null;
|
|
try {
|
|
// 并行加载外观设置和主题列表
|
|
const [settingsResponse, themesResponse] = await Promise.all([
|
|
apiClient.get<AppearanceSettings>('/appearance'), // 使用 apiClient
|
|
apiClient.get<TerminalTheme[]>('/terminal-themes') // 使用 apiClient
|
|
]);
|
|
appearanceSettings.value = settingsResponse.data;
|
|
allTerminalThemes.value = themesResponse.data; // 更新 allTerminalThemes
|
|
|
|
// 应用加载的 UI 主题
|
|
applyUiTheme(currentUiTheme.value);
|
|
// 应用背景
|
|
applyPageBackground();
|
|
// 终端主题将由 Terminal 组件根据 activeTerminalThemeId 自动应用
|
|
|
|
} catch (err: any) {
|
|
console.error('加载外观数据失败:', err);
|
|
error.value = err.response?.data?.message || err.message || '加载外观数据失败';
|
|
// 出错时应用默认值
|
|
appearanceSettings.value = {}; // 清空可能不完整的设置
|
|
allTerminalThemes.value = []; // 清空 allTerminalThemes
|
|
applyUiTheme(defaultUiTheme);
|
|
applyPageBackground(); // 应用默认背景（可能为空）
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 切换样式编辑器面板的可见性。
|
|
* @param visible 可选，强制设置可见性
|
|
*/
|
|
function toggleStyleCustomizer(visible?: boolean) {
|
|
isStyleCustomizerVisible.value = visible === undefined ? !isStyleCustomizerVisible.value : visible;
|
|
console.log('[AppearanceStore] Style Customizer visibility toggled:', isStyleCustomizerVisible.value);
|
|
}
|
|
|
|
|
|
/**
|
|
* 更新外观设置 (不包括主题列表管理)
|
|
* @param updates 要更新的设置项 (activeTerminalThemeId 应为 number | null)
|
|
*/
|
|
async function updateAppearanceSettings(updates: UpdateAppearanceDto) {
|
|
try {
|
|
// 移除预设主题闪烁修复逻辑，不再需要
|
|
const response = await apiClient.put<AppearanceSettings>('/appearance', updates); // 使用 apiClient
|
|
// 使用后端返回的最新设置更新本地状态
|
|
appearanceSettings.value = response.data;
|
|
console.log('[AppearanceStore] 外观设置已更新:', appearanceSettings.value);
|
|
|
|
// 如果 UI 主题或背景更新，重新应用
|
|
if (updates.customUiTheme !== undefined) applyUiTheme(currentUiTheme.value);
|
|
if (updates.pageBackgroundImage !== undefined) applyPageBackground(); // 移除 pageBackgroundOpacity 检查
|
|
// 终端相关设置由 Terminal 组件监听应用
|
|
// 注意：terminalBackgroundEnabled 的应用逻辑在 Terminal 组件中处理
|
|
|
|
} catch (err: any) {
|
|
console.error('更新外观设置失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '更新外观设置失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 保存当前编辑器中的自定义 UI 主题到后端。
|
|
* @param uiTheme UI 主题对象
|
|
*/
|
|
async function saveCustomUiTheme(uiTheme: Record<string, string>) {
|
|
await updateAppearanceSettings({ customUiTheme: JSON.stringify(uiTheme) });
|
|
}
|
|
|
|
/**
|
|
* 重置为默认 UI 主题并保存。
|
|
*/
|
|
async function resetCustomUiTheme() {
|
|
await saveCustomUiTheme(defaultUiTheme);
|
|
}
|
|
|
|
/**
|
|
* 设置激活的终端主题
|
|
* @param themeId 主题的字符串 ID (来自 UI) 或 null (用于重置，但新逻辑下不直接使用 null)
|
|
*/
|
|
async function setActiveTerminalTheme(themeId: string) { // 参数改为 string，不允许 null
|
|
const previousActiveId = appearanceSettings.value.activeTerminalThemeId; // 记录之前的数字 ID 或 null
|
|
|
|
// 1. 将传入的字符串 ID 转换为数字
|
|
const idNum = parseInt(themeId, 10);
|
|
if (isNaN(idNum)) {
|
|
console.error(`[AppearanceStore] setActiveTerminalTheme 接收到无效的数字 ID 字符串: ${themeId}`);
|
|
throw new Error(`无效的主题 ID: ${themeId}`);
|
|
}
|
|
|
|
// 2. 立即更新前端本地状态 (使用数字 ID)
|
|
appearanceSettings.value.activeTerminalThemeId = idNum;
|
|
console.log(`[AppearanceStore] Applied theme locally (ID): ${idNum}`);
|
|
|
|
// 3. 更新后端 (发送数字 ID)
|
|
try {
|
|
await updateAppearanceSettings({ activeTerminalThemeId: idNum });
|
|
console.log(`[AppearanceStore] Notified backend. Sent activeTerminalThemeId: ${idNum}`);
|
|
} catch (error) {
|
|
// 如果更新后端失败，回滚前端状态
|
|
console.error('[AppearanceStore] Failed to update backend activeTerminalThemeId:', error);
|
|
appearanceSettings.value.activeTerminalThemeId = previousActiveId; // 回滚到之前的数字 ID 或 null
|
|
throw new Error(`应用主题失败: ${error instanceof Error ? error.message : String(error)}`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 设置终端字体
|
|
* @param fontFamily 字体列表字符串
|
|
*/
|
|
async function setTerminalFontFamily(fontFamily: string) {
|
|
await updateAppearanceSettings({ terminalFontFamily: fontFamily });
|
|
}
|
|
|
|
/**
|
|
* 设置终端字体大小
|
|
* @param size 字体大小 (数字)
|
|
*/
|
|
async function setTerminalFontSize(size: number) {
|
|
await updateAppearanceSettings({ terminalFontSize: size });
|
|
}
|
|
|
|
/**
|
|
* 设置编辑器字体大小
|
|
* @param size 字体大小 (数字)
|
|
*/
|
|
async function setEditorFontSize(size: number) {
|
|
await updateAppearanceSettings({ editorFontSize: size });
|
|
}
|
|
|
|
/**
|
|
* 设置终端背景是否启用
|
|
* @param enabled 是否启用
|
|
*/
|
|
async function setTerminalBackgroundEnabled(enabled: boolean) {
|
|
console.log(`[AppearanceStore LOG] setTerminalBackgroundEnabled 调用，准备发送给后端的值: ${enabled}`); // 添加日志
|
|
await updateAppearanceSettings({ terminalBackgroundEnabled: enabled });
|
|
console.log(`[AppearanceStore LOG] setTerminalBackgroundEnabled 更新后端调用完成。`); // 添加日志
|
|
}
|
|
|
|
// --- 终端主题列表管理 Actions ---
|
|
|
|
/**
|
|
// 移除 reloadTerminalThemes，统一由 loadInitialAppearanceData 处理加载
|
|
|
|
/**
|
|
* 创建新的终端主题
|
|
* @param name 主题名称
|
|
* @param themeData 主题数据 (ITheme)
|
|
*/
|
|
async function createTerminalTheme(name: string, themeData: ITheme) {
|
|
try {
|
|
await apiClient.post('/terminal-themes', { name, themeData }); // 使用 apiClient
|
|
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
|
|
} catch (err: any) {
|
|
console.error('创建终端主题失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '创建终端主题失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 更新终端主题
|
|
* @param id 主题 ID
|
|
* @param name 新名称
|
|
* @param themeData 新主题数据
|
|
*/
|
|
async function updateTerminalTheme(id: string, name: string, themeData: ITheme) {
|
|
try {
|
|
await apiClient.put(`/terminal-themes/${id}`, { name, themeData }); // 使用 apiClient
|
|
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
|
|
} catch (err: any) {
|
|
console.error('更新终端主题失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '更新终端主题失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 删除终端主题
|
|
* @param id 主题 ID
|
|
*/
|
|
async function deleteTerminalTheme(id: string) {
|
|
try {
|
|
await apiClient.delete(`/terminal-themes/${id}`); // 使用 apiClient
|
|
// 如果删除的是当前激活的主题，则切换回默认主题 ID
|
|
// 需要将字符串 id 转换为数字进行比较
|
|
const idNum = parseInt(id, 10);
|
|
if (!isNaN(idNum) && activeTerminalThemeId.value === idNum) {
|
|
// 查找默认主题的数字 ID (这里假设默认主题 ID 为 1，实际应从配置或查询获取)
|
|
// TODO: 需要一种可靠的方式获取默认主题的数字 ID
|
|
const defaultThemeIdNum = 1; // 临时硬编码，需要改进
|
|
console.log(`[AppearanceStore] 删除的主题是当前激活主题，尝试切换到默认主题 ID: ${defaultThemeIdNum}`);
|
|
await setActiveTerminalTheme(defaultThemeIdNum.toString()); // setActiveTerminalTheme 需要字符串 ID
|
|
}
|
|
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
|
|
} catch (err: any) {
|
|
console.error('删除终端主题失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '删除终端主题失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 导入终端主题文件
|
|
* @param file File 对象
|
|
* @param name 可选，如果提供则覆盖文件名作为主题名
|
|
*/
|
|
async function importTerminalTheme(file: File, name?: string) {
|
|
const formData = new FormData();
|
|
formData.append('themeFile', file);
|
|
if (name) {
|
|
formData.append('name', name);
|
|
}
|
|
try {
|
|
await apiClient.post('/terminal-themes/import', formData, { // 使用 apiClient
|
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
});
|
|
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
|
|
} catch (err: any) {
|
|
console.error('导入终端主题失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '导入终端主题失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 导出终端主题文件
|
|
* @param id 主题 ID
|
|
*/
|
|
async function exportTerminalTheme(id: string) {
|
|
try {
|
|
const response = await apiClient.get(`/terminal-themes/${id}/export`, { // 使用 apiClient
|
|
responseType: 'blob' // 重要：接收二进制数据
|
|
});
|
|
// 从响应头获取文件名
|
|
const contentDisposition = response.headers['content-disposition'];
|
|
let filename = `terminal_theme_${id}.json`; // 默认文件名
|
|
if (contentDisposition) {
|
|
const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i);
|
|
if (filenameMatch && filenameMatch.length > 1) {
|
|
filename = filenameMatch[1];
|
|
}
|
|
}
|
|
// 创建下载链接并触发下载
|
|
const url = window.URL.createObjectURL(new Blob([response.data]));
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', filename);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (err: any) {
|
|
console.error('导出终端主题失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '导出终端主题失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 按需加载单个终端主题的详细数据
|
|
* @param themeId 主题的字符串 ID
|
|
* @returns 返回主题的 ITheme 数据，如果找不到或加载失败则返回 null
|
|
*/
|
|
async function loadTerminalThemeData(themeId: string): Promise<ITheme | null> {
|
|
// 1. 尝试从已加载的列表中查找
|
|
const existingTheme = allTerminalThemes.value.find(t => t._id === themeId);
|
|
|
|
// 2. 如果找到且已有 themeData，直接返回
|
|
if (existingTheme?.themeData && Object.keys(existingTheme.themeData).length > 0) {
|
|
console.log(`[AppearanceStore] Theme data for ${themeId} already loaded.`);
|
|
return existingTheme.themeData;
|
|
}
|
|
|
|
// 3. 如果未找到或缺少 themeData，从后端加载
|
|
console.log(`[AppearanceStore] Loading theme data for ${themeId} from backend...`);
|
|
try {
|
|
const response = await apiClient.get<TerminalTheme>(`/terminal-themes/${themeId}`); // 假设后端提供此接口
|
|
const fullTheme = response.data;
|
|
|
|
if (fullTheme && fullTheme.themeData) {
|
|
// 更新 allTerminalThemes 列表中的对应项
|
|
const index = allTerminalThemes.value.findIndex(t => t._id === themeId);
|
|
if (index !== -1) {
|
|
// 确保响应性，可以考虑替换整个对象或使用 Vue.set (在 Vue 3 中不推荐)
|
|
// 简单的替换可能足够，因为 allTerminalThemes 本身是 ref
|
|
allTerminalThemes.value[index] = { ...allTerminalThemes.value[index], themeData: fullTheme.themeData };
|
|
console.log(`[AppearanceStore] Updated theme data for ${themeId} in local store.`);
|
|
} else {
|
|
// 如果列表中不存在（理论上不应发生，因为初始加载了元数据），可以考虑添加到列表
|
|
console.warn(`[AppearanceStore] Theme metadata for ${themeId} not found in initial list, but loaded data.`);
|
|
// allTerminalThemes.value.push(fullTheme); // 或者不添加，仅返回数据
|
|
}
|
|
return fullTheme.themeData;
|
|
} else {
|
|
console.error(`[AppearanceStore] Loaded data for theme ${themeId} is invalid or missing themeData.`);
|
|
return null;
|
|
}
|
|
} catch (err: any) {
|
|
console.error(`加载终端主题 ${themeId} 数据失败:`, err);
|
|
error.value = err.response?.data?.message || err.message || `加载主题 ${themeId} 数据失败`;
|
|
return null; // 返回 null 表示加载失败
|
|
}
|
|
}
|
|
// --- 背景图片 Actions ---
|
|
/**
|
|
* 上传页面背景图片
|
|
* @param file File 对象
|
|
*/
|
|
async function uploadPageBackground(file: File): Promise<string> {
|
|
const formData = new FormData();
|
|
formData.append('pageBackgroundFile', file);
|
|
try {
|
|
const response = await apiClient.post<{ filePath: string }>('/appearance/background/page', formData, { // 使用 apiClient
|
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
});
|
|
// 更新本地状态 (虽然 updateAppearanceSettings 也会做，但这里立即反映)
|
|
appearanceSettings.value.pageBackgroundImage = response.data.filePath;
|
|
applyPageBackground(); // 应用新背景
|
|
return response.data.filePath;
|
|
} catch (err: any) {
|
|
console.error('上传页面背景失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '上传页面背景失败');
|
|
}
|
|
}
|
|
/**
|
|
* 上传终端背景图片
|
|
* @param file File 对象
|
|
*/
|
|
async function uploadTerminalBackground(file: File): Promise<string> {
|
|
const formData = new FormData();
|
|
formData.append('terminalBackgroundFile', file);
|
|
try {
|
|
const response = await apiClient.post<{ filePath: string }>('/appearance/background/terminal', formData, { // 使用 apiClient
|
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
});
|
|
appearanceSettings.value.terminalBackgroundImage = response.data.filePath;
|
|
// 终端背景的应用由 Terminal 组件处理
|
|
return response.data.filePath;
|
|
} catch (err: any) {
|
|
console.error('上传终端背景失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '上传终端背景失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 移除页面背景
|
|
*/
|
|
async function removePageBackground() {
|
|
try {
|
|
// 先调用后端删除接口
|
|
await apiClient.delete('/appearance/background/page');
|
|
// 成功后再更新数据库记录
|
|
await updateAppearanceSettings({ pageBackgroundImage: '' });
|
|
} catch (err: any) {
|
|
console.error('移除页面背景失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '移除页面背景失败');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 移除终端背景
|
|
*/
|
|
async function removeTerminalBackground() {
|
|
try {
|
|
// 先调用后端删除接口
|
|
await apiClient.delete('/appearance/background/terminal');
|
|
// 成功后再更新数据库记录
|
|
await updateAppearanceSettings({ terminalBackgroundImage: '' });
|
|
} catch (err: any) {
|
|
console.error('移除终端背景失败:', err);
|
|
throw new Error(err.response?.data?.message || err.message || '移除终端背景失败');
|
|
}
|
|
}
|
|
|
|
|
|
// --- Helper Functions ---
|
|
/**
|
|
* 将 UI 主题 (CSS 变量) 应用到文档根元素。
|
|
* @param theme 要应用的 UI 主题对象。
|
|
*/
|
|
function applyUiTheme(theme: Record<string, string>) {
|
|
const root = document.documentElement;
|
|
// 先移除可能存在的旧变量（可选，但更干净）
|
|
// Object.keys(defaultUiTheme).forEach(key => root.style.removeProperty(key));
|
|
// 应用新变量
|
|
for (const [key, value] of Object.entries(theme)) {
|
|
root.style.setProperty(key, value);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 应用页面背景设置到 body 元素
|
|
*/
|
|
function applyPageBackground() {
|
|
const body = document.body;
|
|
if (pageBackgroundImage.value) {
|
|
// --- 修改开始：使用 URL 构造函数改进 URL 拼接 ---
|
|
const backendUrl = import.meta.env.VITE_API_BASE_URL || window.location.origin; // 如果未设置 VITE_API_BASE_URL，则回退到当前页面源
|
|
const imagePath = pageBackgroundImage.value;
|
|
console.log(`[AppearanceStore applyPageBackground] Base URL: "${backendUrl}", Image Path: "${imagePath}"`);
|
|
|
|
let fullImageUrl = '';
|
|
try {
|
|
// 假设 imagePath 是相对于后端根目录的路径 (例如 /uploads/image.jpg)
|
|
// 使用 URL 构造函数确保路径正确拼接
|
|
const baseUrl = new URL(backendUrl);
|
|
// 确保 imagePath 是以 / 开头，如果不是则添加
|
|
const correctedPath = imagePath.startsWith('/') ? imagePath : `/${imagePath}`;
|
|
fullImageUrl = new URL(correctedPath, baseUrl).href;
|
|
console.log(`[AppearanceStore applyPageBackground] Constructed Full Image URL: "${fullImageUrl}"`);
|
|
} catch (e) {
|
|
console.error(`[AppearanceStore applyPageBackground] Error constructing image URL:`, e);
|
|
// URL 构建失败，清除背景并退出
|
|
body.style.backgroundImage = 'none';
|
|
return; // 停止执行
|
|
}
|
|
// --- 修改结束 ---
|
|
|
|
// 应用背景图片
|
|
// 先设置为空，强制浏览器重新请求（可能有助于避免缓存问题）
|
|
body.style.backgroundImage = 'none';
|
|
// 使用 nextTick 确保 DOM 更新后再设置背景
|
|
nextTick(() => {
|
|
// 再次检查 fullImageUrl 是否有效
|
|
if (fullImageUrl) {
|
|
body.style.backgroundImage = `url(${fullImageUrl})`;
|
|
body.style.backgroundSize = 'cover'; // 覆盖整个区域
|
|
body.style.backgroundPosition = 'center'; // 居中显示
|
|
body.style.backgroundRepeat = 'no-repeat'; // 不重复
|
|
body.style.backgroundAttachment = 'fixed'; // 背景固定，不随滚动条滚动 (可选)
|
|
console.log(`[AppearanceStore applyPageBackground] Applied background image: ${fullImageUrl}`);
|
|
} else {
|
|
console.warn(`[AppearanceStore applyPageBackground] Skipping background application due to invalid URL.`);
|
|
body.style.backgroundImage = 'none'; // 确保清除
|
|
}
|
|
});
|
|
} else {
|
|
// 如果没有设置背景图片，则清除背景
|
|
body.style.backgroundImage = 'none';
|
|
console.log(`[AppearanceStore applyPageBackground] Cleared background image.`);
|
|
}
|
|
// 注意：直接设置 body 透明度会影响所有子元素，通常不建议。
|
|
// 如果需要背景透明效果，通常结合伪元素或额外 div 实现。
|
|
// 这里暂时不直接应用 pageBackgroundOpacity 到 body。
|
|
console.log('[AppearanceStore] 页面背景已应用:', pageBackgroundImage.value);
|
|
}
|
|
|
|
// --- Watchers ---
|
|
// 监听 UI 主题变化并应用
|
|
watch(currentUiTheme, (newTheme) => {
|
|
applyUiTheme(newTheme);
|
|
}, { deep: true, immediate: true }); // 添加 immediate: true 确保初始加载时应用默认主题
|
|
|
|
// 监听页面背景变化并应用
|
|
watch(pageBackgroundImage, () => { // 只监听图片变化
|
|
applyPageBackground();
|
|
});
|
|
|
|
|
|
return {
|
|
isLoading,
|
|
error,
|
|
// State refs (原始数据)
|
|
appearanceSettings,
|
|
allTerminalThemes, // 导出重命名后的 ref
|
|
// Computed Getters
|
|
currentUiTheme,
|
|
activeTerminalThemeId,
|
|
currentTerminalTheme,
|
|
currentTerminalFontFamily,
|
|
currentTerminalFontSize,
|
|
currentEditorFontSize, // <-- 新增
|
|
pageBackgroundImage,
|
|
// pageBackgroundOpacity, // Removed
|
|
terminalBackgroundImage,
|
|
// terminalBackgroundOpacity, // Removed
|
|
// Actions
|
|
loadInitialAppearanceData,
|
|
updateAppearanceSettings,
|
|
saveCustomUiTheme,
|
|
resetCustomUiTheme,
|
|
setActiveTerminalTheme,
|
|
setTerminalFontFamily,
|
|
setTerminalFontSize,
|
|
setEditorFontSize, // <-- 新增
|
|
setTerminalBackgroundEnabled, // <-- 新增
|
|
createTerminalTheme, // 保留
|
|
updateTerminalTheme, // 保留
|
|
deleteTerminalTheme, // 保留
|
|
importTerminalTheme, // 保留
|
|
exportTerminalTheme,
|
|
uploadPageBackground,
|
|
uploadTerminalBackground,
|
|
// setPageBackgroundOpacity, // Removed
|
|
// setTerminalBackgroundOpacity, // Removed
|
|
removePageBackground,
|
|
removeTerminalBackground,
|
|
loadTerminalThemeData, // <-- 新增导出
|
|
isTerminalBackgroundEnabled, // <-- 新增导出
|
|
// Visibility control
|
|
isStyleCustomizerVisible,
|
|
toggleStyleCustomizer,
|
|
};
|
|
});
|