admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Baobhan Sith
2025-04-19 14:05:26 +08:00
parent ea9ce19b60
commit 6f403834ac
9 changed files with 471 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/src/config/preset-themes-definition.ts
+110
View File
@@ -0,0 +1,110 @@
import type { ITheme } from 'xterm';
import type { TerminalTheme } from '../types/terminal-theme.types';
// 定义基础的 ITheme 结构，用于类型提示
interface PresetITheme extends ITheme {
name?: string; // itermcolors 文件可能包含 name
}
// 定义预设主题数组的类型，确保包含 preset_key
type PresetThemeDefinition = Omit<TerminalTheme, '_id' | 'createdAt' | 'updatedAt'> & { preset_key: string };
// 默认主题 (可以从 default-themes.ts 导入或直接定义)
const defaultThemeData: PresetITheme = {
background: '#ffffff',
foreground: '#000000',
cursor: '#000000',
cursorAccent: '#ffffff',
selectionBackground: '#a7a7a7', // 使用更柔和的灰色作为选择背景
black: '#000000',
red: '#c50f1f',
green: '#13a10e',
yellow: '#c19c00',
blue: '#0037da',
magenta: '#881798',
cyan: '#3a96dd',
white: '#cccccc',
brightBlack: '#767676',
brightRed: '#e74856',
brightGreen: '#16c60c',
brightYellow: '#f9f1a5',
brightBlue: '#3b78ff',
brightMagenta: '#b4009e',
brightCyan: '#61d6d6',
brightWhite: '#ffffff',
};
// 其他预设主题 (从 iterm-themes.ts 迁移并添加 preset_key)
// 注意：需要将原 iterm-themes.ts 中的主题数据转换为 ITheme 格式
// 这里仅作示例，你需要将实际的主题数据填充进来
const solarizedDark: PresetITheme = {
background: '#002b36',
foreground: '#839496',
cursor: '#839496',
selectionBackground: '#073642',
black: '#073642',
red: '#dc322f',
green: '#859900',
yellow: '#b58900',
blue: '#268bd2',
magenta: '#d33682',
cyan: '#2aa198',
white: '#eee8d5',
brightBlack: '#002b36',
brightRed: '#cb4b16',
brightGreen: '#586e75',
brightYellow: '#657b83',
brightBlue: '#839496',
brightMagenta: '#6c71c4', // Note: Original Solarized might use a different magenta
brightCyan: '#93a1a1',
brightWhite: '#fdf6e3',
};
const oneDark: PresetITheme = {
foreground: '#abb2bf',
background: '#282c34',
cursor: '#abb2bf',
selectionBackground: '#3e4451', // A slightly lighter background for selection
black: '#282c34', // Often same as background
red: '#e06c75',
green: '#98c379',
yellow: '#e5c07b',
blue: '#61afef',
magenta: '#c678dd',
cyan: '#56b6c2',
white: '#abb2bf', // Often same as foreground
brightBlack: '#5c6370', // A darker grey
brightRed: '#e06c75', // Often same as normal red
brightGreen: '#98c379', // Often same as normal green
brightYellow: '#e5c07b', // Often same as normal yellow
brightBlue: '#61afef', // Often same as normal blue
brightMagenta: '#c678dd', // Often same as normal magenta
brightCyan: '#56b6c2', // Often same as normal cyan
brightWhite: '#ffffff', // Pure white for bright white
};
// ... (添加其他所有需要的预设主题)
// 导出预设主题数组
export const presetTerminalThemes: PresetThemeDefinition[] = [
{
preset_key: 'default', // 指定一个唯一的 key
name: '默认', // 显示名称
themeData: defaultThemeData,
isPreset: true,
},
{
preset_key: 'solarized-dark',
name: 'Solarized Dark',
themeData: solarizedDark,
isPreset: true,
},
{
preset_key: 'one-dark',
name: 'One Dark',
themeData: oneDark,
isPreset: true,
},
// ... (添加其他所有预设主题对象)
];
packages/backend/src/database.ts
+73 -19
View File
@@ -1,9 +1,14 @@
import sqlite3 from 'sqlite3';
import path from 'path';
import fs from 'fs';
// 导入 Repository 模块以调用其初始化相关函数
import * as appearanceRepository from './repositories/appearance.repository';
import * as terminalThemeRepository from './repositories/terminal-theme.repository';
// 导入预设主题定义
import { presetTerminalThemes } from './config/preset-themes-definition';
// 数据库文件路径 (相对于 backend 项目根目录)
const dbDir = path.resolve(__dirname, '../../data'); // 使用 '../../data' 定位到 monorepo 根目录下的 data 文件夹
// 数据库文件路径
const dbDir = path.resolve(__dirname, '../../data');
const dbPath = path.join(dbDir, 'nexus-terminal.db');
// 确保数据库目录存在
@@ -12,44 +17,88 @@ if (!fs.existsSync(dbDir)) {
console.log(`数据库目录已创建: ${dbDir}`);
}
// 使用详细模式以获得更丰富的错误信息
const verboseSqlite3 = sqlite3.verbose();
// 创建并连接数据库
// 使用单例 (singleton) 模式确保只有一个数据库连接实例
let dbInstance: sqlite3.Database | null = null;
/**
* 执行数据库初始化序列：创建表、插入预设主题、设置默认外观。
* @param db 数据库实例
*/
const runDatabaseInitializations = (db: sqlite3.Database) => {
db.serialize(() => {
console.log('[DB Init] 开始数据库初始化序列...');
// 1. 启用外键约束 (必须在事务之外或序列化块的开始处)
db.run('PRAGMA foreign_keys = ON;', (pragmaErr) => {
if (pragmaErr) {
console.error('[DB Init] 启用外键约束失败:', pragmaErr.message);
// 根据需要处理错误，可能需要阻止后续初始化
} else {
console.log('[DB Init] 外键约束已启用。');
}
});
// 2. 创建 terminal_themes 表
db.run(terminalThemeRepository.SQL_CREATE_TABLE, (err) => {
if (err) {
console.error('[DB Init] 创建 terminal_themes 表失败:', err.message);
} else {
console.log('[DB Init] terminal_themes 表已存在或已创建。');
// 3. 初始化预设主题 (只有在表创建成功或已存在后才执行)
terminalThemeRepository.initializePresetThemes(presetTerminalThemes)
.then(() => console.log('[DB Init] 预设主题初始化检查完成。'))
.catch(initErr => console.error('[DB Init] 初始化预设主题时出错:', initErr));
}
});
// 4. 创建 appearance_settings 表
db.run(appearanceRepository.SQL_CREATE_TABLE, (err) => {
if (err) {
console.error('[DB Init] 创建 appearance_settings 表失败:', err.message);
} else {
console.log('[DB Init] appearance_settings 表已存在或已创建。');
// 5. 确保默认设置存在并设置默认激活主题 (只有在表创建成功或已存在后才执行)
// 注意：这需要等待预设主题初始化完成，但 serialize 会保证顺序
appearanceRepository.ensureDefaultSettingsExist()
.then(() => console.log('[DB Init] 外观设置初始化检查完成。'))
.catch(initErr => console.error('[DB Init] 初始化外观设置时出错:', initErr));
}
});
// TODO: 在这里添加其他表的创建和初始化逻辑...
console.log('[DB Init] 数据库初始化序列提交。');
});
};
export const getDb = (): sqlite3.Database => {
if (!dbInstance) {
console.log(`[DB] 尝试连接到数据库: ${dbPath}`);
dbInstance = new verboseSqlite3.Database(dbPath, (err) => {
if (err) {
console.error('打开数据库时出错:', err.message);
// 在实际应用中，这里可能需要更健壮的错误处理，例如直接退出进程
console.error('[DB] 打开数据库时出错:', err.message);
process.exit(1);
} else {
console.log(`已连接到 SQLite 数据库: ${dbPath}`);
// 可选：启用外键约束 (如果数据库设计中使用了外键)
// dbInstance.run('PRAGMA foreign_keys = ON;', (pragmaErr) => {
// if (pragmaErr) {
// console.error('启用外键约束失败:', pragmaErr.message);
// }
// });
console.log(`[DB] 已连接到 SQLite 数据库: ${dbPath}`);
// 连接成功后运行初始化逻辑
runDatabaseInitializations(dbInstance as sqlite3.Database);
}
});
}
return dbInstance;
};
// 优雅停机：在应用接收到中断信号 (如 Ctrl+C) 时关闭数据库连接
// 优雅停机
process.on('SIGINT', () => {
if (dbInstance) {
console.log('[DB] 收到 SIGINT，正在关闭数据库连接...');
dbInstance.close((err) => {
if (err) {
console.error('关闭数据库时出错:', err.message);
console.error('[DB] 关闭数据库时出错:', err.message);
} else {
console.log('数据库连接已关闭。');
console.log('[DB] 数据库连接已关闭。');
}
process.exit(0);
process.exit(err ? 1 : 0);
});
} else {
process.exit(0);
@@ -57,3 +106,8 @@ process.on('SIGINT', () => {
});
export default getDb;
// 注意：为了让这个文件工作，需要修改 repository 文件：
// 1. 从 repository 文件中移除顶层的 createTableIfNotExists() 调用。
// 2. 从 repository 文件中导出 SQL_CREATE_TABLE 字符串常量。
// 3. 从 appearance.repository.ts 导出 ensureDefaultSettingsExist 函数。
packages/backend/src/repositories/appearance.repository.ts
+72 -47
View File
@@ -2,33 +2,40 @@ import { getDb } from '../database';
import { AppearanceSettings, UpdateAppearanceDto } from '../types/appearance.types';
import { defaultUiTheme } from '../config/default-themes'; // Assuming default UI theme is here too
const db = getDb();
// const db = getDb(); // Removed top-level call to avoid circular dependency issues
const TABLE_NAME = 'appearance_settings';
const SETTINGS_ID = 1; // Use a fixed ID for the single row of global settings
/**
* 创建 appearance_settings 表 (如果不存在)
* SQL语句：创建 appearance_settings 表
*/
export const SQL_CREATE_TABLE = `
CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
id INTEGER PRIMARY KEY, -- Fixed ID for the single settings row
custom_ui_theme TEXT,
active_terminal_theme_id INTEGER NULL, -- 修改为 INTEGER NULL
terminal_font_family TEXT,
terminal_font_size INTEGER,
editor_font_size INTEGER, -- 新增：编辑器字体大小
terminal_background_image TEXT,
page_background_image TEXT,
updated_at INTEGER NOT NULL,
FOREIGN KEY(active_terminal_theme_id) REFERENCES terminal_themes(id) -- 添加外键约束
);
`;
/**
* 创建 appearance_settings 表 (如果不存在) - 不再自动调用
*/
const createTableIfNotExists = () => {
const sql = `
CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
id INTEGER PRIMARY KEY, -- Fixed ID for the single settings row
custom_ui_theme TEXT,
active_terminal_theme_id TEXT,
terminal_font_family TEXT,
terminal_font_size INTEGER,
editor_font_size INTEGER, -- 新增：编辑器字体大小
terminal_background_image TEXT,
page_background_image TEXT,
updated_at INTEGER NOT NULL
);
`;
db.run(sql, (err) => {
// This function is no longer called automatically, initialization is handled in database.ts
getDb().run(SQL_CREATE_TABLE, (err) => {
if (err) {
console.error(`创建 ${TABLE_NAME} 表失败:`, err.message);
} else {
// 确保默认设置行存在
ensureDefaultSettingsExist();
console.log(`${TABLE_NAME} 表已存在或已创建。`);
// 确保默认设置行存在 - 这个调用也应该移到 database.ts
// ensureDefaultSettingsExist();
}
});
};
@@ -39,7 +46,7 @@ const mapRowToAppearanceSettings = (row: any): AppearanceSettings => {
return {
_id: row.id.toString(),
customUiTheme: row.custom_ui_theme,
activeTerminalThemeId: row.active_terminal_theme_id,
activeTerminalThemeId: row.active_terminal_theme_id, // 直接返回数字或 null
terminalFontFamily: row.terminal_font_family,
terminalFontSize: row.terminal_font_size,
editorFontSize: row.editor_font_size, // 新增：编辑器字体大小映射
@@ -58,7 +65,7 @@ const getDefaultAppearanceSettings = (): AppearanceSettings => {
return {
_id: SETTINGS_ID.toString(),
customUiTheme: JSON.stringify(defaultUiTheme), // Use default UI theme
activeTerminalThemeId: undefined, // Needs to be set after querying default theme ID
activeTerminalThemeId: null, // 初始应为 null，待 findAndSetDefaultThemeId 设置
terminalFontFamily: 'Consolas, "Courier New", monospace, "Microsoft YaHei", "微软雅黑"', // Default font
terminalFontSize: 14,
editorFontSize: 14, // 新增：默认编辑器字体大小
@@ -72,12 +79,14 @@ const getDefaultAppearanceSettings = (): AppearanceSettings => {
/**
* 确保默认设置行存在
* 确保默认设置行存在，并在需要时设置默认激活主题 ID。
* 这个函数应该在数据库初始化时，在预设主题初始化之后调用。
*/
const ensureDefaultSettingsExist = () => {
export const ensureDefaultSettingsExist = async () => { // 改为 async 以便内部 await
const defaults = getDefaultAppearanceSettings();
const sqlSelect = `SELECT id FROM ${TABLE_NAME} WHERE id = ?`;
db.get(sqlSelect, [SETTINGS_ID], (err, row) => {
const sqlSelect = `SELECT id, active_terminal_theme_id FROM ${TABLE_NAME} WHERE id = ?`; // 同时查询当前 ID
// 将回调函数改为 async
getDb().get(sqlSelect, [SETTINGS_ID], async (err, row) => {
if (err) {
console.error(`检查默认外观设置时出错:`, err.message);
return;
@@ -91,10 +100,10 @@ const ensureDefaultSettingsExist = () => {
updated_at
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?) -- 调整占位符数量
`;
db.run(sqlInsert, [
SETTINGS_ID,
defaults.customUiTheme,
defaults.activeTerminalThemeId, // Initially undefined
getDb().run(sqlInsert, [
SETTINGS_ID,
defaults.customUiTheme,
defaults.activeTerminalThemeId, // Initially null
defaults.terminalFontFamily,
defaults.terminalFontSize,
defaults.editorFontSize, // 添加 editor_font_size 默认值参数
@@ -113,8 +122,8 @@ const ensureDefaultSettingsExist = () => {
}
});
} else {
// If row exists, still check if default theme ID needs setting
findAndSetDefaultThemeId();
// 如果行已存在，直接调用 findAndSetDefaultThemeId 检查并设置默认 ID
await findAndSetDefaultThemeId(); // 使用 await
}
});
};
@@ -127,19 +136,22 @@ const findAndSetDefaultThemeId = async () => {
// Find the default theme from the other table
const defaultThemeSql = `SELECT id FROM terminal_themes WHERE is_system_default = 1 LIMIT 1`;
// Explicitly type the row or use type assertion
db.get(defaultThemeSql, [], async (err, defaultThemeRow: { id: number } | undefined) => {
getDb().get(defaultThemeSql, [], async (err, defaultThemeRow: { id: number } | undefined) => {
if (err) {
console.error("查找默认终端主题 ID 失败:", err.message);
return;
}
if (defaultThemeRow) {
const defaultThemeId = defaultThemeRow.id.toString();
const defaultThemeIdNum = defaultThemeRow.id; // 直接使用数字 ID
// Check current appearance settings
const currentSettings = await getAppearanceSettings();
if (currentSettings && currentSettings.activeTerminalThemeId !== defaultThemeId) {
// Update only if the active ID is not already the default
console.log(`设置默认激活终端主题 ID 为: ${defaultThemeId}`);
await updateAppearanceSettings({ activeTerminalThemeId: defaultThemeId });
// Only set the default theme ID if no active theme ID is currently set (i.e., it's null in the DB)
if (currentSettings && currentSettings.activeTerminalThemeId === null) {
console.log(`数据库中未设置激活终端主题，设置为默认数字 ID: ${defaultThemeIdNum}`);
// 更新时传递数字 ID
await updateAppearanceSettings({ activeTerminalThemeId: defaultThemeIdNum });
} else {
console.log(`数据库中已设置激活终端主题数字 ID (${currentSettings?.activeTerminalThemeId}) 或未找到默认主题，跳过设置默认 ID。`);
}
} else {
console.warn("未找到系统默认终端主题，无法设置 activeTerminalThemeId。");
@@ -157,7 +169,7 @@ const findAndSetDefaultThemeId = async () => {
*/
export const getAppearanceSettings = async (): Promise<AppearanceSettings> => {
return new Promise((resolve, reject) => {
db.get(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [SETTINGS_ID], (err, row) => {
getDb().get(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [SETTINGS_ID], (err, row) => {
if (err) {
console.error('获取外观设置失败:', err.message);
reject(new Error('获取外观设置失败'));
@@ -180,14 +192,22 @@ export const updateAppearanceSettings = async (settingsDto: UpdateAppearanceDto)
// Dynamically build the SET part of the query
const updates: string[] = [];
for (const key in settingsDto) {
if (Object.prototype.hasOwnProperty.call(settingsDto, key)) {
const dbKey = key.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`); // Convert camelCase to snake_case
// Ensure only valid keys are updated (Added editor_font_size)
if (['custom_ui_theme', 'active_terminal_theme_id', 'terminal_font_family', 'terminal_font_size', 'editor_font_size', 'terminal_background_image', 'page_background_image'].includes(dbKey)) {
updates.push(`${dbKey} = ?`);
params.push((settingsDto as any)[key]);
const validDbKeys = ['custom_ui_theme', 'active_terminal_theme_id', 'terminal_font_family', 'terminal_font_size', 'editor_font_size', 'terminal_background_image', 'page_background_image'];
// Iterate over potential keys to update
for (const key of Object.keys(settingsDto) as Array<keyof UpdateAppearanceDto>) {
const dbKey = key.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`); // Convert camelCase to snake_case
if (validDbKeys.includes(dbKey)) {
const value = settingsDto[key];
// active_terminal_theme_id 应该是数字或 null
if (dbKey === 'active_terminal_theme_id' && typeof value !== 'number' && value !== null) {
console.error(`[AppearanceRepo] 更新 active_terminal_theme_id 时收到无效类型值: ${value} (类型: ${typeof value})，应为数字或 null。跳过此字段。`);
continue; // 跳过无效类型
}
updates.push(`${dbKey} = ?`);
// 直接推入值 (数字或 null)
params.push(value);
}
}
@@ -199,16 +219,21 @@ export const updateAppearanceSettings = async (settingsDto: UpdateAppearanceDto)
params.push(SETTINGS_ID);
return new Promise((resolve, reject) => {
db.run(sql, params, function (err) {
// --- 增加详细日志 ---
console.log(`[AppearanceRepo] Executing SQL: ${sql}`);
console.log(`[AppearanceRepo] With Params: ${JSON.stringify(params)}`);
// --- 日志结束 ---
getDb().run(sql, params, function (err) {
if (err) {
console.error('更新外观设置失败:', err.message);
reject(new Error('更新外观设置失败'));
} else {
console.log(`[AppearanceRepo] 更新外观设置成功，影响行数: ${this.changes}`);
resolve(this.changes > 0);
}
});
});
};
// 初始化时创建表
createTableIfNotExists();
// 初始化时创建表 - Removed: Initialization is now handled in database.ts
// createTableIfNotExists();
packages/backend/src/repositories/terminal-theme.repository.ts
+81 -50
View File
@@ -2,29 +2,34 @@ import { getDb } from '../database';
import { TerminalTheme, CreateTerminalThemeDto, UpdateTerminalThemeDto } from '../types/terminal-theme.types';
import { defaultXtermTheme } from '../config/default-themes'; // 假设默认主题配置在此
const db = getDb();
// const db = getDb(); // Removed top-level call to avoid circular dependency issues
/**
* 创建 terminal_themes 表 (如果不存在)
* SQL语句：创建 terminal_themes 表
*/
export const SQL_CREATE_TABLE = `
CREATE TABLE IF NOT EXISTS terminal_themes (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL UNIQUE,
theme_data TEXT NOT NULL, -- Store ITheme as JSON string
is_preset BOOLEAN NOT NULL DEFAULT 0,
preset_key TEXT NULL UNIQUE, -- 可选，用于识别预设主题
is_system_default BOOLEAN NOT NULL DEFAULT 0, -- 新增：标记是否为系统默认主题
created_at INTEGER NOT NULL,
updated_at INTEGER NOT NULL
);
`;
/**
* 创建 terminal_themes 表 (如果不存在) - 不再自动调用
*/
const createTableIfNotExists = () => {
const sql = `
CREATE TABLE IF NOT EXISTS terminal_themes (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL UNIQUE,
theme_data TEXT NOT NULL, -- Store ITheme as JSON string
is_preset BOOLEAN NOT NULL DEFAULT 0,
is_system_default BOOLEAN DEFAULT 0,
created_at INTEGER NOT NULL,
updated_at INTEGER NOT NULL
);
`;
db.run(sql, (err) => {
// This function is no longer called automatically, initialization is handled in database.ts
getDb().run(SQL_CREATE_TABLE, (err) => {
if (err) {
console.error('创建 terminal_themes 表失败:', err.message);
} else {
// 表创建成功后，初始化预设主题
initializePresetThemes();
console.log('terminal_themes 表已存在或已创建。');
}
});
};
@@ -36,7 +41,7 @@ const mapRowToTerminalTheme = (row: any): TerminalTheme => {
name: row.name,
themeData: JSON.parse(row.theme_data), // 解析 JSON 字符串
isPreset: !!row.is_preset, // 转换为布尔值
isSystemDefault: !!row.is_system_default,
isSystemDefault: !!row.is_system_default, // 映射新增的列
createdAt: row.created_at,
updatedAt: row.updated_at,
};
@@ -48,7 +53,7 @@ const mapRowToTerminalTheme = (row: any): TerminalTheme => {
*/
export const findAllThemes = async (): Promise<TerminalTheme[]> => {
return new Promise((resolve, reject) => {
db.all('SELECT * FROM terminal_themes ORDER BY is_preset DESC, name ASC', [], (err, rows) => {
getDb().all('SELECT * FROM terminal_themes ORDER BY is_preset DESC, name ASC', [], (err, rows) => {
if (err) {
console.error('查询所有终端主题失败:', err.message);
reject(new Error('查询终端主题失败'));
@@ -66,7 +71,7 @@ export const findAllThemes = async (): Promise<TerminalTheme[]> => {
*/
export const findThemeById = async (id: number): Promise<TerminalTheme | null> => {
return new Promise((resolve, reject) => {
db.get('SELECT * FROM terminal_themes WHERE id = ?', [id], (err, row) => {
getDb().get('SELECT * FROM terminal_themes WHERE id = ?', [id], (err, row) => {
if (err) {
console.error(`查询 ID 为 ${id} 的终端主题失败:`, err.message);
reject(new Error('查询终端主题失败'));
@@ -90,7 +95,7 @@ export const createTheme = async (themeDto: CreateTerminalThemeDto): Promise<Ter
VALUES (?, ?, 0, ?, ?)
`;
return new Promise((resolve, reject) => {
db.run(sql, [themeDto.name, themeDataJson, now, now], function (err) {
getDb().run(sql, [themeDto.name, themeDataJson, now, now], function (err) {
if (err) {
console.error('创建新终端主题失败:', err.message);
// 特别处理唯一约束错误
@@ -132,7 +137,7 @@ export const updateTheme = async (id: number, themeDto: UpdateTerminalThemeDto):
WHERE id = ? AND is_preset = 0
`;
return new Promise((resolve, reject) => {
db.run(sql, [themeDto.name, themeDataJson, now, id], function (err) {
getDb().run(sql, [themeDto.name, themeDataJson, now, id], function (err) {
if (err) {
console.error(`更新 ID 为 ${id} 的终端主题失败:`, err.message);
if (err.message.includes('UNIQUE constraint failed')) {
@@ -156,7 +161,7 @@ export const deleteTheme = async (id: number): Promise<boolean> => {
// 只允许删除非预设主题
const sql = 'DELETE FROM terminal_themes WHERE id = ? AND is_preset = 0';
return new Promise((resolve, reject) => {
db.run(sql, [id], function (err) {
getDb().run(sql, [id], function (err) {
if (err) {
console.error(`删除 ID 为 ${id} 的终端主题失败:`, err.message);
reject(new Error('删除终端主题失败'));
@@ -168,36 +173,62 @@ export const deleteTheme = async (id: number): Promise<boolean> => {
};
/**
* 初始化预设主题 (如果不存在)
* 初始化预设主题到数据库 (如果不存在)
* 这个函数应该在数据库连接成功后，由应用初始化逻辑调用。
* @param presets 预设主题定义数组 (包含 name, themeData, isPreset=true, 可选 preset_key)
*/
export const initializePresetThemes = async () => {
const defaultPresetName = '默认'; // Default Light
const themeDataJson = JSON.stringify(defaultXtermTheme);
const now = Date.now();
export const initializePresetThemes = async (presets: Array<Omit<TerminalTheme, '_id' | 'createdAt' | 'updatedAt'> & { preset_key?: string }>) => {
console.log('[DB Init] 开始检查并初始化预设主题...');
const now = Date.now();
// 检查默认预设是否存在
db.get('SELECT id FROM terminal_themes WHERE name = ? AND is_preset = 1', [defaultPresetName], (err, row) => {
if (err) {
console.error('检查预设主题时出错:', err.message);
return;
// 使用 for...of 循环确保顺序执行检查和插入（避免并发 UNIQUE 约束问题）
for (const preset of presets) {
await new Promise<void>((resolve, reject) => {
// 优先使用 preset_key 检查，如果提供了的话
const checkColumn = preset.preset_key ? 'preset_key' : 'name';
const checkValue = preset.preset_key ?? preset.name;
getDb().get(`SELECT id FROM terminal_themes WHERE ${checkColumn} = ? AND is_preset = 1`, [checkValue], (err, row) => {
if (err) {
console.error(`[DB Init] 检查预设主题 "${preset.name}" (Key: ${checkValue}) 时出错:`, err.message);
return reject(err);
}
if (!row) {
const themeDataJson = JSON.stringify(preset.themeData);
const isDefault = preset.preset_key === 'default' ? 1 : 0;
// 始终包含 preset_key 列，如果不存在则插入 NULL
const columns = ['name', 'theme_data', 'is_preset', 'is_system_default', 'preset_key', 'created_at', 'updated_at']; // 7 columns
const values = [preset.name, themeDataJson, 1, isDefault, preset.preset_key ?? null, now, now]; // 7 values
const placeholders = ['?', '?', '?', '?', '?', '?', '?']; // 7 placeholders
// 移除动态添加 preset_key 的逻辑
// if (preset.preset_key) {
// values.push(preset.preset_key);
// placeholders.push('?');
// }
const insertSql = `
INSERT INTO terminal_themes (${columns.join(', ')})
VALUES (${placeholders.join(', ')})
`;
getDb().run(insertSql, values, (insertErr) => {
if (insertErr) {
console.error(`[DB Init] 初始化预设主题 "${preset.name}" (Key: ${preset.preset_key ?? 'N/A'}) 失败:`, insertErr.message); // 调整日志输出
return reject(insertErr);
} else {
console.log(`[DB Init] 预设主题 "${preset.name}" (Key: ${checkValue}) 已初始化到数据库。`);
resolve();
}
});
} else {
// console.log(`[DB Init] 预设主题 "${preset.name}" (Key: ${checkValue}) 已存在，跳过初始化。`);
resolve();
}
});
});
}
if (!row) {
// 如果不存在，则插入
const insertSql = `
INSERT INTO terminal_themes (name, theme_data, is_preset, is_system_default, created_at, updated_at)
VALUES (?, ?, 1, 1, ?, ?)
`;
db.run(insertSql, [defaultPresetName, themeDataJson, now, now], (insertErr) => {
if (insertErr) {
console.error(`初始化预设主题 "${defaultPresetName}" 失败:`, insertErr.message);
} else {
console.log(`预设主题 "${defaultPresetName}" 已初始化。`);
}
});
}
// 在这里可以添加更多预设主题的初始化逻辑
});
console.log('[DB Init] 预设主题检查和初始化完成。');
};
// 初始化时创建表
createTableIfNotExists();
// 移除所有在此文件中的初始化调用和相关导入，它们应该在 database.ts 或 app.ts 中进行
packages/backend/src/services/appearance.service.ts
+16 -12
View File
@@ -18,24 +18,28 @@ export const getSettings = async (): Promise<AppearanceSettings> => {
export const updateSettings = async (settingsDto: UpdateAppearanceDto): Promise<boolean> => {
// 验证 activeTerminalThemeId (如果提供了)
if (settingsDto.activeTerminalThemeId !== undefined && settingsDto.activeTerminalThemeId !== null) {
const themeIdNum = parseInt(settingsDto.activeTerminalThemeId, 10);
if (isNaN(themeIdNum)) {
throw new Error(`无效的终端主题 ID 格式: ${settingsDto.activeTerminalThemeId}`);
const themeIdNum = settingsDto.activeTerminalThemeId; // ID is now number | null
// 验证 ID 是否为有效的数字
if (typeof themeIdNum !== 'number') {
console.error(`[AppearanceService] 收到的 activeTerminalThemeId 不是有效的数字: ${themeIdNum}`);
throw new Error(`无效的终端主题 ID 类型，应为数字。`);
}
try {
// 直接使用数字 ID 调用 findThemeById 进行验证
const themeExists = await terminalThemeRepository.findThemeById(themeIdNum);
if (!themeExists) {
throw new Error(`指定的终端主题 ID 不存在: ${settingsDto.activeTerminalThemeId}`);
console.warn(`[AppearanceService] 尝试更新为不存在的终端主题数字 ID: ${themeIdNum}`);
throw new Error(`指定的终端主题 ID 不存在: ${themeIdNum}`);
}
} catch (e: any) { // Catch potential errors from findThemeById as well
console.error(`验证终端主题 ID (${settingsDto.activeTerminalThemeId}) 时出错:`, e.message);
// Rethrow a more specific error or the original one
throw new Error(`验证终端主题 ID 时出错: ${e.message || settingsDto.activeTerminalThemeId}`);
console.log(`[AppearanceService] 终端主题数字 ID ${themeIdNum} 验证通过。`);
} catch (e: any) {
console.error(`[AppearanceService] 验证终端主题数字 ID (${themeIdNum}) 时出错:`, e.message);
throw new Error(`验证终端主题 ID 时出错: ${e.message || themeIdNum}`);
}
} else if (settingsDto.hasOwnProperty('activeTerminalThemeId')) {
// Handle explicit setting to null/undefined (meaning reset to default/no theme)
// The repository update logic handles null/undefined correctly, so no specific validation needed here.
// We just need to ensure the key exists in the DTO if it's meant to be cleared.
} else if (settingsDto.hasOwnProperty('activeTerminalThemeId') && settingsDto.activeTerminalThemeId === null) {
// 处理显式设置为 null (表示重置为默认/无用户主题)
console.log(`[AppearanceService] 接收到将 activeTerminalThemeId 设置为 null 的请求。`);
// 仓库层会处理 null
}
// 验证 terminalFontSize (如果提供了)
packages/backend/src/types/appearance.types.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export interface AppearanceSettings {
_id?: string; // 通常只有一个文档，ID 固定或不使用
userId?: string; // 如果需要区分用户设置 (当前假设为全局)
customUiTheme?: string; // UI 主题 (CSS 变量 JSON 字符串)
activeTerminalThemeId?: string; // 当前激活的终端主题 ID (对应 terminal_themes 表的 _id)
activeTerminalThemeId?: number | null; // 修改为数字 ID 或 null
terminalFontFamily?: string; // 终端字体列表字符串
terminalFontSize?: number; // 终端字体大小 (px)
terminalBackgroundImage?: string; // 终端背景图片 URL 或路径
packages/frontend/src/components/StyleCustomizer.vue
+40 -23
View File
@@ -13,8 +13,8 @@ const {
appearanceSettings, // <-- 添加这个 ref
currentUiTheme,
// currentTerminalTheme, // 这个是计算属性，只读，在编辑时不需要直接用
activeTerminalThemeId,
availableTerminalThemes,
activeTerminalThemeId, // 现在是 number | null | undefined
allTerminalThemes, // 使用重命名后的变量
currentTerminalFontFamily,
currentTerminalFontSize,
currentEditorFontSize, // <-- 新增
@@ -359,16 +359,23 @@ const handleSaveEditorFontSize = async () => {
// 应用选定的终端主题
const handleApplyTheme = async (theme: TerminalTheme) => {
// 确保 theme._id 存在且不等于当前激活的 ID
// setActiveTerminalTheme 期望 string | null，而 theme._id 是 string | undefined
// 如果 theme._id 是 undefined (理论上不应发生在列表项上)，传递 null
const themeIdToApply = theme._id ?? null;
if (themeIdToApply === null || themeIdToApply === activeTerminalThemeId.value) return;
// theme._id 是字符串 ID
if (!theme._id) return; // 防御性检查
// 将字符串 ID 转换为数字进行比较
const themeIdNum = parseInt(theme._id, 10);
if (isNaN(themeIdNum)) {
console.error(`无效的主题 ID 格式: ${theme._id}`);
return;
}
// activeTerminalThemeId.value 是 number | null
if (themeIdNum === activeTerminalThemeId.value) return; // 如果已经是激活的，则不操作
try {
await appearanceStore.setActiveTerminalTheme(themeIdToApply);
// setActiveTerminalTheme action 现在需要字符串 ID
await appearanceStore.setActiveTerminalTheme(theme._id);
// 成功后 activeTerminalThemeId 会自动更新
// alert(`Theme '${theme.name}' applied successfully`); // 移除成功提示
} catch (error: any) {
console.error("应用终端主题失败:", error);
alert(t('styleCustomizer.setActiveThemeFailed', { message: error.message }));
@@ -601,16 +608,19 @@ const handleImportThemeFile = async (event: Event) => {
// 处理主题导出 (导出当前激活的主题)
const handleExportActiveTheme = async () => {
const currentId = activeTerminalThemeId.value; // activeTerminalThemeId 是 Ref<string | undefined>
if (currentId) { // 检查 currentId 是否为真值 (不是 undefined 或空字符串)
const currentIdNum = activeTerminalThemeId.value; // 现在是 number | null | undefined
// 必须同时检查 null 和 undefined
if (currentIdNum !== null && currentIdNum !== undefined) {
try {
await appearanceStore.exportTerminalTheme(currentId);
// exportTerminalTheme action 需要字符串 ID
await appearanceStore.exportTerminalTheme(currentIdNum.toString());
} catch (error: any) {
console.error("导出主题失败:", error);
alert(t('styleCustomizer.exportFailed', { message: error.message }));
}
} else {
alert(t('styleCustomizer.noActiveThemeToExport')); // 需要添加翻译
console.warn("尝试导出主题，但 activeTerminalThemeId 为 null 或 undefined");
alert(t('styleCustomizer.noActiveThemeToExport'));
}
};
@@ -698,24 +708,31 @@ const formatXtermLabel = (key: keyof ITheme): string => {
// 获取当前激活主题的名称
const activeThemeName = computed(() => {
const theme = availableTerminalThemes.value.find(t => t._id === activeTerminalThemeId.value);
// 如果找不到主题 (例如 ID 无效或列表为空)，则显示提示
return theme ? theme.name : 'No active theme selected';
const currentIdNum = activeTerminalThemeId.value; // number | null | undefined
// 同时检查 null 和 undefined
if (currentIdNum === null || currentIdNum === undefined) {
return '未选择主题'; // 或者返回默认主题名称？
}
// 在 allTerminalThemes 中查找
// 将数字 ID 转为字符串进行比较
const theme = allTerminalThemes.value.find((t: TerminalTheme) => t._id === currentIdNum.toString());
return theme ? theme.name : '未知主题';
});
// 过滤和排序主题列表
// 过滤和排序主题列表 (使用 allTerminalThemes)
const filteredAndSortedThemes = computed(() => {
const searchTerm = themeSearchTerm.value.toLowerCase().trim(); // 转小写并去除首尾空格
let themes = [...availableTerminalThemes.value]; // 创建副本以进行排序
const searchTerm = themeSearchTerm.value.toLowerCase().trim();
// 使用 allTerminalThemes
let themes = [...allTerminalThemes.value];
// 过滤
if (searchTerm) {
themes = themes.filter(theme => theme.name.toLowerCase().includes(searchTerm));
// 显式指定 theme 类型
themes = themes.filter((theme: TerminalTheme) => theme.name.toLowerCase().includes(searchTerm));
}
// 排序逻辑已移除
// 默认按名称升序排序
themes.sort((a, b) => a.name.localeCompare(b.name));
// 按名称升序排序
themes.sort((a: TerminalTheme, b: TerminalTheme) => a.name.localeCompare(b.name));
return themes;
});
packages/frontend/src/components/Terminal.vue
+9
View File
@@ -214,7 +214,16 @@ onMounted(() => {
watch(currentTerminalTheme, (newTheme) => {
if (terminal) {
console.log(`[Terminal ${props.sessionId}] 应用新终端主题。`);
// 直接修改 options 对象
terminal.options.theme = newTheme;
// 修改选项后需要刷新终端才能生效
try {
// 刷新整个视口
terminal.refresh(0, terminal.rows - 1);
console.log(`[Terminal ${props.sessionId}] 终端已刷新以应用新主题。`);
} catch (e) {
console.warn(`[Terminal ${props.sessionId}] 刷新终端以应用主题时出错:`, e);
}
}
}, { deep: true });
packages/frontend/src/stores/appearance.store.ts
+69 -81
View File
@@ -26,15 +26,11 @@ export const useAppearanceStore = defineStore('appearance', () => {
// Appearance Settings State
const appearanceSettings = ref<Partial<AppearanceSettings>>({}); // 从 API 获取的原始设置
const userTerminalThemes = ref<TerminalTheme[]>([]); // <-- 新增：只存储用户自定义主题
const allTerminalThemes = ref<TerminalTheme[]>([]); // 重命名: 存储从后端获取的所有主题
// --- Computed Properties (Getters) ---
// 合并后的可用终端主题列表 (包括预设和用户自定义)
const availableTerminalThemes = computed<TerminalTheme[]>(() => {
// 确保预设主题在前，用户主题在后
return [...presetTerminalThemes, ...userTerminalThemes.value];
});
// 移除 availableTerminalThemes 计算属性，直接使用 allTerminalThemes
// 当前应用的 UI 主题 (CSS 变量对象)
const currentUiTheme = computed<Record<string, string>>(() => {
return safeJsonParse(appearanceSettings.value.customUiTheme, defaultUiTheme);
@@ -45,11 +41,16 @@ export const useAppearanceStore = defineStore('appearance', () => {
// 当前应用的终端主题对象 (ITheme)
const currentTerminalTheme = computed<ITheme>(() => {
if (!activeTerminalThemeId.value || availableTerminalThemes.value.length === 0) {
return defaultXtermTheme; // 回退到默认
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;
}
const activeTheme = availableTerminalThemes.value.find(t => t._id === activeTerminalThemeId.value);
return activeTheme ? activeTheme.themeData : defaultXtermTheme; // 找不到也回退
// 根据数字 ID 查找 (需要将 theme._id 转回数字比较)
const activeTheme = allTerminalThemes.value.find(t => parseInt(t._id ?? '-1', 10) === activeId);
return activeTheme ? activeTheme.themeData : defaultXtermTheme; // 找不到也回退到 xterm 默认
});
// 当前终端字体设置
@@ -89,25 +90,29 @@ export const useAppearanceStore = defineStore('appearance', () => {
// 并行加载外观设置和主题列表
const [settingsResponse, themesResponse] = await Promise.all([
axios.get<AppearanceSettings>('/api/v1/appearance'),
axios.get<TerminalTheme[]>('/api/v1/terminal-themes')
axios.get<TerminalTheme[]>('/api/v1/terminal-themes') // 获取所有主题
]);
appearanceSettings.value = settingsResponse.data;
userTerminalThemes.value = themesResponse.data; // <-- 更新 userTerminalThemes
allTerminalThemes.value = themesResponse.data; // 更新 allTerminalThemes
console.log('[AppearanceStore] 外观设置已加载:', appearanceSettings.value);
console.log('[AppearanceStore] 用户终端主题列表已加载:', userTerminalThemes.value); // <-- 修改日志
console.log('[AppearanceStore] 所有终端主题列表已加载:', allTerminalThemes.value);
// --- 后端返回的 activeTerminalThemeId 已经是 number | null ---
// 前端不再需要设置默认主题 ID 的逻辑，后端初始化时会保证它不为 NULL
// 如果后端返回 null (理论上不应发生，除非初始化失败)，则 currentTerminalTheme 计算属性会回退到 defaultXtermTheme
// 应用加载的 UI 主题
applyUiTheme(currentUiTheme.value);
// 应用背景
applyPageBackground();
// 终端背景和主题将在 Terminal 组件中应用
// 终端主题将由 Terminal 组件根据 activeTerminalThemeId 自动应用
} catch (err: any) {
console.error('加载外观数据失败:', err);
error.value = err.response?.data?.message || err.message || '加载外观数据失败';
// 出错时应用默认值
appearanceSettings.value = {}; // 清空可能不完整的设置
userTerminalThemes.value = []; // <-- 清空 userTerminalThemes
allTerminalThemes.value = []; // 清空 allTerminalThemes
applyUiTheme(defaultUiTheme);
applyPageBackground(); // 应用默认背景（可能为空）
} finally {
@@ -127,30 +132,16 @@ export const useAppearanceStore = defineStore('appearance', () => {
/**
* 更新外观设置 (不包括主题列表管理)
* @param updates 要更新的设置项
* @param updates 要更新的设置项 (activeTerminalThemeId 应为 number | null)
*/
async function updateAppearanceSettings(updates: UpdateAppearanceDto) {
try {
// --- 修复预设主题闪烁问题 ---
// 检查本次更新是否是为了清除后端 activeTerminalThemeId (因为选择了预设)
const isClearingThemeForPreset = updates.activeTerminalThemeId === undefined &&
appearanceSettings.value.activeTerminalThemeId?.startsWith('preset-');
const presetThemeIdToRestore = isClearingThemeForPreset ? appearanceSettings.value.activeTerminalThemeId : null;
// --- 修复结束 ---
// 移除预设主题闪烁修复逻辑，不再需要
const response = await axios.put<AppearanceSettings>('/api/v1/appearance', updates);
// 使用后端返回的最新设置更新本地状态
appearanceSettings.value = response.data;
console.log('[AppearanceStore] 外观设置已更新:', appearanceSettings.value);
// --- 修复预设主题闪烁问题 ---
// 如果之前是为了清除预设主题而更新的，现在恢复前端的预设 ID
if (presetThemeIdToRestore) {
appearanceSettings.value.activeTerminalThemeId = presetThemeIdToRestore;
console.log(`[AppearanceStore] Restored preset theme ID after backend update: ${presetThemeIdToRestore}`);
}
// --- 修复结束 ---
// 如果 UI 主题或背景更新，重新应用
if (updates.customUiTheme !== undefined) applyUiTheme(currentUiTheme.value);
if (updates.pageBackgroundImage !== undefined) applyPageBackground(); // 移除 pageBackgroundOpacity 检查
@@ -179,28 +170,31 @@ export const useAppearanceStore = defineStore('appearance', () => {
/**
* 设置激活的终端主题
* @param themeId 主题 ID
* @param themeId 主题的字符串 ID (来自 UI) 或 null (用于重置，但新逻辑下不直接使用 null)
*/
async function setActiveTerminalTheme(themeId: string | null) {
// 检查是否为预设主题 ID
if (themeId && themeId.startsWith('preset-')) {
// 1. 直接更新本地状态以立即反映前端选择
appearanceSettings.value.activeTerminalThemeId = themeId;
console.log(`[AppearanceStore] Applied preset theme locally: ${themeId}`);
// 2. 通知后端没有激活的用户主题 (发送 undefined)
try {
await updateAppearanceSettings({ activeTerminalThemeId: undefined }); // <-- 使用 undefined 替代 null
console.log('[AppearanceStore] Notified backend: No user theme active (preset selected).');
} catch (error) {
// 即使通知后端失败，前端也已应用，记录错误但可能不需要回滚前端状态
console.error('[AppearanceStore] Failed to notify backend about preset theme selection:', error);
// 可选：如果希望严格同步，可以在这里抛出错误或回滚本地状态
// appearanceSettings.value.activeTerminalThemeId = // previous value? 需要额外逻辑记录
// throw error; // 重新抛出错误，让调用者处理
}
} else {
// 对于用户主题或 null，按原逻辑更新后端
await updateAppearanceSettings({ activeTerminalThemeId: themeId ?? undefined });
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)}`);
}
}
@@ -231,18 +225,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
// --- 终端主题列表管理 Actions ---
/**
* 重新加载终端主题列表
*/
async function reloadTerminalThemes() {
try {
const response = await axios.get<TerminalTheme[]>('/api/v1/terminal-themes');
userTerminalThemes.value = response.data; // <-- 更新 userTerminalThemes
console.log('[AppearanceStore] 用户终端主题列表已重新加载:', userTerminalThemes.value); // <-- 添加日志
} catch (err: any) {
console.error('重新加载终端主题列表失败:', err);
// 可以选择抛出错误或显示通知
}
}
// 移除 reloadTerminalThemes，统一由 loadInitialAppearanceData 处理加载
/**
* 创建新的终端主题
@@ -252,7 +235,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
async function createTerminalTheme(name: string, themeData: ITheme) {
try {
await axios.post('/api/v1/terminal-themes', { name, themeData });
await reloadTerminalThemes(); // 重新加载列表
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
} catch (err: any) {
console.error('创建终端主题失败:', err);
throw new Error(err.response?.data?.message || err.message || '创建终端主题失败');
@@ -267,11 +250,11 @@ export const useAppearanceStore = defineStore('appearance', () => {
*/
async function updateTerminalTheme(id: string, name: string, themeData: ITheme) {
try {
await axios.put(`/api/v1/terminal-themes/${id}`, { name, themeData });
await reloadTerminalThemes(); // 重新加载列表
} catch (err: any) {
console.error('更新终端主题失败:', err);
throw new Error(err.response?.data?.message || err.message || '更新终端主题失败');
await axios.put(`/api/v1/terminal-themes/${id}`, { name, themeData });
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
} catch (err: any) {
console.error('更新终端主题失败:', err);
throw new Error(err.response?.data?.message || err.message || '更新终端主题失败');
}
}
@@ -282,11 +265,17 @@ export const useAppearanceStore = defineStore('appearance', () => {
async function deleteTerminalTheme(id: string) {
try {
await axios.delete(`/api/v1/terminal-themes/${id}`);
// 如果删除的是当前激活的主题，则切换回默认
if (activeTerminalThemeId.value === id) {
await setActiveTerminalTheme(null); // 或者设置为默认主题的 ID
// 如果删除的是当前激活的主题，则切换回默认主题 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 reloadTerminalThemes(); // 重新加载列表
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
} catch (err: any) {
console.error('删除终端主题失败:', err);
throw new Error(err.response?.data?.message || err.message || '删除终端主题失败');
@@ -308,7 +297,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
await axios.post('/api/v1/terminal-themes/import', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
await reloadTerminalThemes();
await loadInitialAppearanceData(); // 重新加载所有数据以更新列表
} catch (err: any) {
console.error('导入终端主题失败:', err);
throw new Error(err.response?.data?.message || err.message || '导入终端主题失败');
@@ -494,7 +483,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
error,
// State refs (原始数据)
appearanceSettings,
availableTerminalThemes,
allTerminalThemes, // 导出重命名后的 ref
// Computed Getters
currentUiTheme,
activeTerminalThemeId,
@@ -515,11 +504,10 @@ export const useAppearanceStore = defineStore('appearance', () => {
setTerminalFontFamily,
setTerminalFontSize,
setEditorFontSize, // <-- 新增
reloadTerminalThemes,
createTerminalTheme,
updateTerminalTheme,
deleteTerminalTheme,
importTerminalTheme,
createTerminalTheme, // 保留
updateTerminalTheme, // 保留
deleteTerminalTheme, // 保留
importTerminalTheme, // 保留
exportTerminalTheme,
uploadPageBackground,
uploadTerminalBackground,