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-29 20:47:53 +08:00
parent b4847640f2
commit 89818a3628
6 changed files with 161 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/src/repositories/appearance.repository.ts
+19 -1
View File
@@ -18,6 +18,7 @@ interface DbAppearanceSettingsRow {
const mapRowsToAppearanceSettings = (rows: DbAppearanceSettingsRow[]): AppearanceSettings => {
const settings: Partial<AppearanceSettings> = {};
let latestUpdatedAt = 0;
let terminalBackgroundEnabledFound = false; // 新增：标记是否在数据库中找到该设置
for (const row of rows) {
// 更新 latestUpdatedAt
@@ -48,6 +49,10 @@ const mapRowsToAppearanceSettings = (rows: DbAppearanceSettingsRow[]): Appearanc
case 'pageBackgroundImage':
settings.pageBackgroundImage = row.value || undefined;
break;
case 'terminalBackgroundEnabled':
settings.terminalBackgroundEnabled = row.value === 'true'; // 将 'true'/'false' 字符串转为 boolean
terminalBackgroundEnabledFound = true; // 标记已找到
break;
}
}
@@ -61,6 +66,10 @@ const mapRowsToAppearanceSettings = (rows: DbAppearanceSettingsRow[]): Appearanc
editorFontSize: settings.editorFontSize ?? defaults.editorFontSize,
terminalBackgroundImage: settings.terminalBackgroundImage ?? defaults.terminalBackgroundImage,
pageBackgroundImage: settings.pageBackgroundImage ?? defaults.pageBackgroundImage,
// 修改：只有当数据库中未找到记录时才使用默认值
terminalBackgroundEnabled: terminalBackgroundEnabledFound
? settings.terminalBackgroundEnabled // 使用数据库找到的值 (true 或 false)
: defaults.terminalBackgroundEnabled, // 否则使用默认值 (true)
updatedAt: latestUpdatedAt || defaults.updatedAt, // 使用最新的更新时间，否则使用默认时间戳
};
};
@@ -76,6 +85,7 @@ const getDefaultAppearanceSettings = (): Omit<AppearanceSettings, '_id'> => {
editorFontSize: 14,
terminalBackgroundImage: undefined,
pageBackgroundImage: undefined,
terminalBackgroundEnabled: true, // 新增：默认启用
updatedAt: Date.now(), // 提供默认时间戳
};
};
@@ -100,6 +110,7 @@ export const ensureDefaultSettingsExist = async (db: sqlite3.Database): Promise<
{ key: 'editorFontSize', value: defaults.editorFontSize },
{ key: 'terminalBackgroundImage', value: defaults.terminalBackgroundImage ?? '' }, // 数据库中使用空字符串
{ key: 'pageBackgroundImage', value: defaults.pageBackgroundImage ?? '' }, // 数据库中使用空字符串
{ key: 'terminalBackgroundEnabled', value: defaults.terminalBackgroundEnabled }, // 新增
];
try {
@@ -177,7 +188,10 @@ export const getAppearanceSettings = async (): Promise<AppearanceSettings> => {
const db = await getDbInstance();
// 从键值表中获取所有行
const rows = await allDb<DbAppearanceSettingsRow>(db, `SELECT key, value, updated_at FROM ${TABLE_NAME}`);
return mapRowsToAppearanceSettings(rows); // 将键值对映射到设置对象
console.log('[AppearanceRepo LOG] 从数据库读取的原始行:', JSON.stringify(rows)); // 添加原始行日志
const mappedSettings = mapRowsToAppearanceSettings(rows); // 将键值对映射到设置对象
console.log(`[AppearanceRepo LOG] 映射后的 terminalBackgroundEnabled 值: ${mappedSettings.terminalBackgroundEnabled}`); // 添加映射后值的日志
return mappedSettings;
} catch (err: any) {
console.error('[AppearanceRepo] 获取外观设置失败:', err.message);
throw new Error('获取外观设置失败');
@@ -235,6 +249,8 @@ const updateAppearanceSettingsInternal = async (db: sqlite3.Database, settingsDt
dbValue = key === 'activeTerminalThemeId' ? 'null' : ''; // 主题 ID 特殊存储为 'null'
} else if (typeof value === 'object') {
dbValue = JSON.stringify(value);
} else if (typeof value === 'boolean') { // 新增：处理布尔值
dbValue = value ? 'true' : 'false';
} else {
dbValue = String(value);
}
@@ -252,8 +268,10 @@ const updateAppearanceSettingsInternal = async (db: sqlite3.Database, settingsDt
}
// 对每个键值对执行 INSERT OR REPLACE
console.log(`[AppearanceRepo LOG] 准备更新/插入键: '${key}', 值: '${dbValue}'`); // 添加保存日志
const result = await runDb(db, sqlReplace, [key, dbValue, nowSeconds]);
if (result.changes > 0) {
console.log(`[AppearanceRepo LOG] 键 '${key}' 更新成功。`); // 添加成功日志
changesMade = true;
}
}
packages/backend/src/types/appearance.types.ts
+1
View File
@@ -16,6 +16,7 @@ export interface AppearanceSettings {
terminalBackgroundImage?: string; // 终端背景图片 URL 或路径
pageBackgroundImage?: string; // 页面背景图片 URL 或路径
editorFontSize?: number; // 编辑器字体大小 (px)
terminalBackgroundEnabled?: boolean; // 新增：终端背景是否启用
updatedAt?: number;
}
packages/frontend/src/components/StyleCustomizer.vue
+67 -5
View File
@@ -22,6 +22,7 @@ const {
// pageBackgroundOpacity, // Removed
terminalBackgroundImage,
// terminalBackgroundOpacity, // Removed
isTerminalBackgroundEnabled, // <-- 新增：终端背景启用状态
} = storeToRefs(appearanceStore);
// --- 本地状态用于编辑 ---
@@ -33,6 +34,7 @@ const editableEditorFontSize = ref(14); // <-- 新增，编辑器字体大小
// const editableTerminalBackgroundOpacity = ref(1.0); // Removed
const editableUiThemeString = ref(''); // 用于 textarea 绑定
const themeParseError = ref<string | null>(null); // 用于显示 JSON 解析错误
const localTerminalBackgroundEnabled = ref(true); // <-- 新增：本地终端背景开关状态
// 终端主题管理相关状态
const isEditingTheme = ref(false); // 是否正在编辑某个主题
@@ -92,6 +94,8 @@ const initializeEditableState = () => {
editableTerminalFontFamily.value = currentTerminalFontFamily.value;
editableTerminalFontSize.value = currentTerminalFontSize.value;
editableEditorFontSize.value = currentEditorFontSize.value; // <-- 新增
localTerminalBackgroundEnabled.value = isTerminalBackgroundEnabled.value; // <-- 重新添加：在此处初始化
console.log(`[StyleCustomizer initializeEditableState] Initializing localTerminalBackgroundEnabled to: ${localTerminalBackgroundEnabled.value} (from store: ${isTerminalBackgroundEnabled.value})`); // 添加日志
uploadError.value = null;
importError.value = null;
saveThemeError.value = null;
@@ -130,12 +134,13 @@ watch([
const newActiveThemeId = newVals[1];
const oldActiveThemeId = oldVals ? oldVals[1] : null;
// 仅当非编辑状态时，或活动终端主题ID变化时，或 UI 主题设置本身发生变化时 (例如重置)，才重新初始化
if (!isEditingTheme.value || newActiveThemeId !== oldActiveThemeId || newSettings?.customUiTheme !== oldSettings?.customUiTheme) {
console.log('[StyleCustomizer] Watch triggered re-initialization.');
// 仅当非编辑状态时，或活动终端主题ID变化时，或 UI 主题/终端背景启用状态设置本身发生变化时 (例如重置或外部更改)，才重新初始化
const settingsChanged = newSettings?.customUiTheme !== oldSettings?.customUiTheme || newSettings?.terminalBackgroundEnabled !== oldSettings?.terminalBackgroundEnabled; // 检查相关设置是否变化
if (!isEditingTheme.value || newActiveThemeId !== oldActiveThemeId || settingsChanged) {
console.log(`[StyleCustomizer Watch] Triggering re-initialization. isEditing: ${isEditingTheme.value}, themeIdChanged: ${newActiveThemeId !== oldActiveThemeId}, settingsChanged: ${settingsChanged}`); // 添加日志
initializeEditableState(); // 调用修改后的初始化函数
} else {
// 如果正在编辑，只更新非编辑相关的部分 (不包括 UI 主题，因为它由 initializeEditableState 处理)
// 如果正在编辑，只更新非编辑相关的部分 (不包括 UI 主题和终端背景开关，因为它们由 initializeEditableState 处理)
console.log('[StyleCustomizer] Watch triggered partial update (editing).');
// editableUiTheme.value = JSON.parse(JSON.stringify(newVals[0] || {})); // 移除或注释掉，避免覆盖编辑状态
// 确保从正确的 newVals 索引获取值，现在 watch 的依赖项变了
@@ -144,12 +149,26 @@ watch([
editableTerminalFontFamily.value = newSettings?.terminalFontFamily || '';
editableTerminalFontSize.value = newSettings?.terminalFontSize || 14;
editableEditorFontSize.value = newSettings?.editorFontSize || 14; // <-- 新增同步
// localTerminalBackgroundEnabled.value = newSettings?.terminalBackgroundEnabled ?? true; // <-- 移除此行，避免冲突
}
}, { deep: true });
// 监听 store 中 isTerminalBackgroundEnabled 的变化，以同步本地状态
watch(isTerminalBackgroundEnabled, (newValue) => {
// 只有当本地状态与 store 状态不一致时才更新本地状态
// 这避免了 handleToggleTerminalBackground 触发的不必要更新
if (localTerminalBackgroundEnabled.value !== newValue) {
console.log(`[StyleCustomizer Watch isTerminalBackgroundEnabled] Store changed to ${newValue}, updating local state.`); // 添加日志
localTerminalBackgroundEnabled.value = newValue;
} else {
console.log(`[StyleCustomizer Watch isTerminalBackgroundEnabled] Store changed to ${newValue}, but local state already matches. No update needed.`); // 添加日志
}
});
// 移除单独监听 isTerminalBackgroundEnabled 的 watcher
const emit = defineEmits(['close']);
const closeCustomizer = () => {
// 如果正在编辑主题，直接关闭并重置状态
if (isEditingTheme.value) {
@@ -757,6 +776,21 @@ const handleRemoveTerminalBg = async () => {
}
};
// 处理终端背景启用/禁用切换
const handleToggleTerminalBackground = async () => {
const newValue = !localTerminalBackgroundEnabled.value; // 先计算新值
localTerminalBackgroundEnabled.value = newValue; // 立即更新本地 UI
try {
await appearanceStore.setTerminalBackgroundEnabled(newValue);
// 成功后不需要提示，UI 已更新
} catch (error: any) {
console.error("更新终端背景启用状态失败:", error);
// 失败时回滚本地状态
localTerminalBackgroundEnabled.value = !newValue;
alert(t('styleCustomizer.errorToggleTerminalBg', { message: error.message })); // 需要添加翻译
}
};
// Removed handlePageOpacityChange and handleTerminalOpacityChange functions
// --- 辅助函数 ---
@@ -1140,7 +1174,31 @@ const handleFocusAndSelect = (event: FocusEvent) => {
<hr class="my-8 border-border"> <!-- Replaced inline style with Tailwind -->
<!-- 终端背景 -->
<h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalBackground') }}</h4>
<div class="flex items-center justify-between mb-3"> <!-- 使用 flex 布局 -->
<h4 class="m-0 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalBackground') }}</h4>
<!-- 开关按钮 -->
<button
type="button"
@click="handleToggleTerminalBackground"
:class="[
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
localTerminalBackgroundEnabled ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
]"
role="switch"
:aria-checked="localTerminalBackgroundEnabled"
>
<span
aria-hidden="true"
:class="[
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
localTerminalBackgroundEnabled ? 'translate-x-5' : 'translate-x-0'
]"
></span>
</button>
</div>
<!-- 条件渲染背景设置区域 -->
<div v-if="localTerminalBackgroundEnabled">
<div class="w-full h-[150px] border border-dashed border-border mb-2 flex justify-center items-center text-text-secondary bg-cover bg-center bg-no-repeat rounded bg-header relative overflow-hidden" :style="{ backgroundImage: terminalBackgroundImage ? `url(${terminalBackgroundImage})` : 'none' }">
<span v-if="!terminalBackgroundImage" class="bg-white/80 px-3 py-1.5 rounded text-sm font-medium text-foreground shadow-sm">{{ t('styleCustomizer.noBackground') }}</span>
</div>
@@ -1150,6 +1208,10 @@ const handleFocusAndSelect = (event: FocusEvent) => {
<input type="file" ref="terminalBgFileInput" @change="handleTerminalBgUpload" accept="image/*" class="hidden" /> <!-- Use hidden class -->
</div>
<!-- Removed Opacity Slider -->
</div> <!-- End v-if="localTerminalBackgroundEnabled" -->
<div v-else class="p-4 text-center text-text-secondary italic border border-dashed border-border/50 rounded-md">
{{ t('styleCustomizer.terminalBgDisabled', '终端背景功能已禁用。') }} <!-- 需要添加翻译 -->
</div>
</section>
<section v-if="currentTab === 'other'">
packages/frontend/src/components/Terminal.vue
+25 -5
View File
@@ -37,7 +37,13 @@ let selectionListenerDisposable: IDisposable | null = null; // +++ 提升声明
// --- Appearance Store ---
const appearanceStore = useAppearanceStore();
const { currentTerminalTheme, currentTerminalFontFamily, terminalBackgroundImage, currentTerminalFontSize } = storeToRefs(appearanceStore); // <-- 添加 currentTerminalFontSize
const {
currentTerminalTheme,
currentTerminalFontFamily,
terminalBackgroundImage,
currentTerminalFontSize,
isTerminalBackgroundEnabled // <-- 新增：导入背景启用状态
} = storeToRefs(appearanceStore);
// --- Settings Store ---
const settingsStore = useSettingsStore(); // +++ 实例化设置 store +++
@@ -289,11 +295,11 @@ onMounted(() => {
}
});
// 监听背景图片变化
watch(terminalBackgroundImage, () => { // 只监听图片
console.log(`[Terminal Watcher] terminalBackgroundImage changed. New image: ${terminalBackgroundImage.value}`); // 添加日志确认 watcher 触发
// 监听背景图片和启用状态的变化
watch([terminalBackgroundImage, isTerminalBackgroundEnabled], () => {
console.log(`[Terminal Watcher] Background image or enabled status changed. Image: ${terminalBackgroundImage.value}, Enabled: ${isTerminalBackgroundEnabled.value}`);
applyTerminalBackground();
}, { immediate: true }); // 添加 immediate: true，强制立即执行一次
}, { immediate: true }); // 强制立即执行一次
// 移除 onMounted 中的 applyTerminalBackground 调用，完全依赖 watch
// applyTerminalBackground(); // 初始应用一次
@@ -400,6 +406,20 @@ defineExpose({ write, findNext, findPrevious, clearSearch });
// --- 应用终端背景 ---
const applyTerminalBackground = () => {
if (terminalRef.value) {
// 首先检查背景功能是否启用
if (!isTerminalBackgroundEnabled.value) {
// 如果禁用，则移除背景并返回
nextTick(() => {
if (terminalRef.value) {
terminalRef.value.style.backgroundImage = 'none';
terminalRef.value.classList.remove('has-terminal-background');
}
});
console.log(`[Terminal ${props.sessionId}] 终端背景已禁用，移除背景。`);
return; // 提前退出
}
// 如果启用，再检查是否有背景图片
if (terminalBackgroundImage.value) {
// --- 修改开始 ---
// 使用环境变量获取后端基础 URL
packages/frontend/src/stores/appearance.store.ts
+22 -1
View File
@@ -78,6 +78,13 @@ export const useAppearanceStore = defineStore('appearance', () => {
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 ---
/**
@@ -94,7 +101,8 @@ export const useAppearanceStore = defineStore('appearance', () => {
]);
appearanceSettings.value = settingsResponse.data;
allTerminalThemes.value = themesResponse.data; // 更新 allTerminalThemes
console.log('[AppearanceStore] 外观设置已加载:', appearanceSettings.value);
console.log('[AppearanceStore LOG] 外观设置已加载 (原始数据):', JSON.stringify(settingsResponse.data)); // 添加原始数据日志
console.log(`[AppearanceStore LOG] 从后端加载的 terminalBackgroundEnabled 原始值: ${settingsResponse.data.terminalBackgroundEnabled}`); // 专门记录该值
console.log('[AppearanceStore] 所有终端主题列表已加载:', allTerminalThemes.value);
// --- 后端返回的 activeTerminalThemeId 已经是 number | null ---
@@ -146,6 +154,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
if (updates.customUiTheme !== undefined) applyUiTheme(currentUiTheme.value);
if (updates.pageBackgroundImage !== undefined) applyPageBackground(); // 移除 pageBackgroundOpacity 检查
// 终端相关设置由 Terminal 组件监听应用
// 注意：terminalBackgroundEnabled 的应用逻辑在 Terminal 组件中处理
} catch (err: any) {
console.error('更新外观设置失败:', err);
@@ -222,6 +231,16 @@ export const useAppearanceStore = defineStore('appearance', () => {
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 ---
/**
@@ -565,6 +584,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
setTerminalFontFamily,
setTerminalFontSize,
setEditorFontSize, // <-- 新增
setTerminalBackgroundEnabled, // <-- 新增
createTerminalTheme, // 保留
updateTerminalTheme, // 保留
deleteTerminalTheme, // 保留
@@ -577,6 +597,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
removePageBackground,
removeTerminalBackground,
loadTerminalThemeData, // <-- 新增导出
isTerminalBackgroundEnabled, // <-- 新增导出
// Visibility control
isStyleCustomizerVisible,
toggleStyleCustomizer,
packages/frontend/src/types/appearance.types.ts
+1
View File
@@ -11,6 +11,7 @@ export interface AppearanceSettings {
terminalBackgroundImage?: string;
pageBackgroundImage?: string;
editorFontSize?: number;
terminalBackgroundEnabled?: boolean; // 新增：终端背景是否启用
}
// 前端用于更新外观设置的数据结构 (对应 API 请求体)