From 636ed5a2bb41dd0c1050c44e7881f139ea49f364 Mon Sep 17 00:00:00 2001 From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com> Date: Thu, 17 Apr 2025 20:33:14 +0800 Subject: [PATCH] update --- .../src/repositories/appearance.repository.ts | 25 +++++---- .../src/services/appearance.service.ts | 9 ---- .../backend/src/types/appearance.types.ts | 2 - .../src/components/StyleCustomizer.vue | 53 +++++-------------- packages/frontend/src/components/Terminal.vue | 8 +-- packages/frontend/src/locales/en.json | 1 + packages/frontend/src/locales/zh.json | 1 + .../frontend/src/stores/appearance.store.ts | 32 +++-------- 8 files changed, 37 insertions(+), 94 deletions(-) diff --git a/packages/backend/src/repositories/appearance.repository.ts b/packages/backend/src/repositories/appearance.repository.ts index e53fe50..6849b9c 100644 --- a/packages/backend/src/repositories/appearance.repository.ts +++ b/packages/backend/src/repositories/appearance.repository.ts @@ -17,9 +17,7 @@ const createTableIfNotExists = () => { active_terminal_theme_id TEXT, terminal_font_family TEXT, terminal_background_image TEXT, - terminal_background_opacity REAL, -- Use REAL for floating point numbers page_background_image TEXT, - page_background_opacity REAL, updated_at INTEGER NOT NULL ); `; @@ -42,9 +40,9 @@ const mapRowToAppearanceSettings = (row: any): AppearanceSettings => { activeTerminalThemeId: row.active_terminal_theme_id, terminalFontFamily: row.terminal_font_family, terminalBackgroundImage: row.terminal_background_image, - terminalBackgroundOpacity: row.terminal_background_opacity, + // terminalBackgroundOpacity: row.terminal_background_opacity, // Removed pageBackgroundImage: row.page_background_image, - pageBackgroundOpacity: row.page_background_opacity, + // pageBackgroundOpacity: row.page_background_opacity, // Removed updatedAt: row.updated_at, }; }; @@ -59,9 +57,9 @@ const getDefaultAppearanceSettings = (): AppearanceSettings => { activeTerminalThemeId: undefined, // Needs to be set after querying default theme ID terminalFontFamily: 'Consolas, "Courier New", monospace, "Microsoft YaHei", "微软雅黑"', // Default font terminalBackgroundImage: undefined, - terminalBackgroundOpacity: 1.0, + // terminalBackgroundOpacity: 1.0, // Removed pageBackgroundImage: undefined, - pageBackgroundOpacity: 1.0, + // pageBackgroundOpacity: 1.0, // Removed updatedAt: Date.now(), }; }; @@ -82,9 +80,10 @@ const ensureDefaultSettingsExist = () => { const sqlInsert = ` INSERT INTO ${TABLE_NAME} ( id, custom_ui_theme, active_terminal_theme_id, terminal_font_family, - terminal_background_image, terminal_background_opacity, - page_background_image, page_background_opacity, updated_at - ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?) + terminal_background_image, -- terminal_background_opacity, -- Removed + page_background_image, -- page_background_opacity, -- Removed + updated_at + ) VALUES (?, ?, ?, ?, ?, ?, ?) -- Adjusted placeholder count `; db.run(sqlInsert, [ SETTINGS_ID, @@ -92,9 +91,9 @@ const ensureDefaultSettingsExist = () => { defaults.activeTerminalThemeId, // Initially undefined defaults.terminalFontFamily, defaults.terminalBackgroundImage, - defaults.terminalBackgroundOpacity, + // defaults.terminalBackgroundOpacity, // Removed defaults.pageBackgroundImage, - defaults.pageBackgroundOpacity, + // defaults.pageBackgroundOpacity, // Removed defaults.updatedAt ], (insertErr) => { if (insertErr) { @@ -176,8 +175,8 @@ export const updateAppearanceSettings = async (settingsDto: UpdateAppearanceDto) 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 - if (['custom_ui_theme', 'active_terminal_theme_id', 'terminal_font_family', 'terminal_background_image', 'terminal_background_opacity', 'page_background_image', 'page_background_opacity'].includes(dbKey)) { + // Ensure only valid keys are updated (Removed opacity keys) + if (['custom_ui_theme', 'active_terminal_theme_id', 'terminal_font_family', 'terminal_background_image', 'page_background_image'].includes(dbKey)) { updates.push(`${dbKey} = ?`); params.push((settingsDto as any)[key]); } diff --git a/packages/backend/src/services/appearance.service.ts b/packages/backend/src/services/appearance.service.ts index c77c5b2..8a511de 100644 --- a/packages/backend/src/services/appearance.service.ts +++ b/packages/backend/src/services/appearance.service.ts @@ -38,15 +38,6 @@ export const updateSettings = async (settingsDto: UpdateAppearanceDto): Promise< // We just need to ensure the key exists in the DTO if it's meant to be cleared. } - - // 验证透明度值 (如果提供了) - if (settingsDto.terminalBackgroundOpacity !== undefined && (settingsDto.terminalBackgroundOpacity < 0 || settingsDto.terminalBackgroundOpacity > 1)) { - throw new Error('终端背景透明度必须在 0 和 1 之间'); - } - if (settingsDto.pageBackgroundOpacity !== undefined && (settingsDto.pageBackgroundOpacity < 0 || settingsDto.pageBackgroundOpacity > 1)) { - throw new Error('页面背景透明度必须在 0 和 1 之间'); - } - // TODO: 如果实现了背景图片上传，这里需要处理文件路径或 URL 的验证/保存逻辑 return appearanceRepository.updateAppearanceSettings(settingsDto); diff --git a/packages/backend/src/types/appearance.types.ts b/packages/backend/src/types/appearance.types.ts index 72ff0c2..d981bb5 100644 --- a/packages/backend/src/types/appearance.types.ts +++ b/packages/backend/src/types/appearance.types.ts @@ -10,9 +10,7 @@ export interface AppearanceSettings { activeTerminalThemeId?: string; // 当前激活的终端主题 ID (对应 terminal_themes 表的 _id) terminalFontFamily?: string; // 终端字体列表字符串 terminalBackgroundImage?: string; // 终端背景图片 URL 或路径 - terminalBackgroundOpacity?: number; // 终端背景透明度 (0-1) pageBackgroundImage?: string; // 页面背景图片 URL 或路径 - pageBackgroundOpacity?: number; // 页面背景透明度 (0-1) updatedAt?: number; } diff --git a/packages/frontend/src/components/StyleCustomizer.vue b/packages/frontend/src/components/StyleCustomizer.vue index 9e5134e..1dbd51e 100644 --- a/packages/frontend/src/components/StyleCustomizer.vue +++ b/packages/frontend/src/components/StyleCustomizer.vue @@ -16,16 +16,16 @@ const { availableTerminalThemes, currentTerminalFontFamily, pageBackgroundImage, - pageBackgroundOpacity, + // pageBackgroundOpacity, // Removed terminalBackgroundImage, - terminalBackgroundOpacity, + // terminalBackgroundOpacity, // Removed } = storeToRefs(appearanceStore); // --- 本地状态用于编辑 --- const editableUiTheme = ref>({}); const editableTerminalFontFamily = ref(''); -const editablePageBackgroundOpacity = ref(1.0); -const editableTerminalBackgroundOpacity = ref(1.0); +// const editablePageBackgroundOpacity = ref(1.0); // Removed +// const editableTerminalBackgroundOpacity = ref(1.0); // Removed // 终端主题管理相关状态 const selectedTerminalThemeId = ref(null); // 下拉框选择的 ID @@ -50,8 +50,8 @@ const initializeEditableState = () => { editableUiTheme.value = JSON.parse(JSON.stringify(currentUiTheme.value || {})); editableTerminalFontFamily.value = currentTerminalFontFamily.value; selectedTerminalThemeId.value = activeTerminalThemeId.value ?? null; // 初始化下拉框 - editablePageBackgroundOpacity.value = pageBackgroundOpacity.value; - editableTerminalBackgroundOpacity.value = terminalBackgroundOpacity.value; + // editablePageBackgroundOpacity.value = pageBackgroundOpacity.value; // Removed + // editableTerminalBackgroundOpacity.value = terminalBackgroundOpacity.value; // Removed // 不在 store 变化时重置编辑状态，除非是显式取消或保存 uploadError.value = null; importError.value = null; @@ -63,8 +63,8 @@ onMounted(initializeEditableState); // 监听 store 变化以更新本地状态 (例如重置或外部更改) // 只监听不需要编辑的状态或用于初始化的状态 watch([ - currentUiTheme, currentTerminalFontFamily, activeTerminalThemeId, - pageBackgroundOpacity, terminalBackgroundOpacity + currentUiTheme, currentTerminalFontFamily, activeTerminalThemeId + // pageBackgroundOpacity, terminalBackgroundOpacity // Removed dependencies ], (newVals, oldVals) => { // 仅当非编辑状态时，或活动主题ID变化时，才同步下拉框和非编辑状态 if (!isEditingTheme.value || newVals[2] !== oldVals[2]) { @@ -73,8 +73,8 @@ watch([ // 如果正在编辑，只更新非编辑相关的部分 (例如 UI 主题可以在编辑终端主题时同时更新) editableUiTheme.value = JSON.parse(JSON.stringify(newVals[0] || {})); editableTerminalFontFamily.value = newVals[1]; - editablePageBackgroundOpacity.value = newVals[3]; - editableTerminalBackgroundOpacity.value = newVals[4]; + // editablePageBackgroundOpacity.value = newVals[3]; // Removed + // editableTerminalBackgroundOpacity.value = newVals[4]; // Removed } }, { deep: true }); @@ -328,26 +328,7 @@ const handleRemoveTerminalBg = async () => { } }; -const handlePageOpacityChange = async () => { - try { - await appearanceStore.setPageBackgroundOpacity(editablePageBackgroundOpacity.value); - } catch (error: any) { - console.error("设置页面背景透明度失败:", error); - // 恢复旧值 - editablePageBackgroundOpacity.value = pageBackgroundOpacity.value; - alert(t('styleCustomizer.setOpacityFailed', { message: error.message })); - } -}; -const handleTerminalOpacityChange = async () => { - try { - await appearanceStore.setTerminalBackgroundOpacity(editableTerminalBackgroundOpacity.value); - } catch (error: any) { - console.error("设置终端背景透明度失败:", error); - editableTerminalBackgroundOpacity.value = terminalBackgroundOpacity.value; - alert(t('styleCustomizer.setOpacityFailed', { message: error.message })); - } -}; - +// Removed handlePageOpacityChange and handleTerminalOpacityChange functions // --- 辅助函数 --- // 格式化 UI 主题标签 @@ -501,11 +482,7 @@ const formatXtermLabel = (key: keyof ITheme): string => { -
- - - {{ Math.round(editablePageBackgroundOpacity * 100) }}% -
+

{{ uploadError }}

@@ -520,11 +497,7 @@ const formatXtermLabel = (key: keyof ITheme): string => { -
- - - {{ Math.round(editableTerminalBackgroundOpacity * 100) }}% -
+ diff --git a/packages/frontend/src/components/Terminal.vue b/packages/frontend/src/components/Terminal.vue index 31b1ded..4d18a1b 100644 --- a/packages/frontend/src/components/Terminal.vue +++ b/packages/frontend/src/components/Terminal.vue @@ -31,7 +31,7 @@ const fontSize = ref(14); // 字体大小状态, 默认为14 (这个可以保留 // --- Appearance Store --- const appearanceStore = useAppearanceStore(); -const { currentTerminalTheme, currentTerminalFontFamily, terminalBackgroundImage, terminalBackgroundOpacity } = storeToRefs(appearanceStore); // 获取外观状态 +const { currentTerminalTheme, currentTerminalFontFamily, terminalBackgroundImage } = storeToRefs(appearanceStore); // 获取外观状态 (移除 terminalBackgroundOpacity) // 防抖函数 const debounce = (func: Function, delay: number) => { @@ -202,9 +202,9 @@ onMounted(() => { } }); - // 监听背景图片和透明度 (恢复之前的监听方式，因为监听整个对象可能引入其他问题) - watch([terminalBackgroundImage, terminalBackgroundOpacity], () => { - console.log(`[Terminal Watcher] terminalBackgroundImage or Opacity changed. New image: ${terminalBackgroundImage.value}`); // 添加日志确认 watcher 触发 + // 监听背景图片变化 + watch(terminalBackgroundImage, () => { // 只监听图片 + console.log(`[Terminal Watcher] terminalBackgroundImage changed. New image: ${terminalBackgroundImage.value}`); // 添加日志确认 watcher 触发 applyTerminalBackground(); }, { immediate: true }); // 添加 immediate: true，强制立即执行一次 // 移除 onMounted 中的 applyTerminalBackground 调用，完全依赖 watch diff --git a/packages/frontend/src/locales/en.json b/packages/frontend/src/locales/en.json index a179ae8..a6b515d 100644 --- a/packages/frontend/src/locales/en.json +++ b/packages/frontend/src/locales/en.json @@ -36,6 +36,7 @@ "exportTheme": "Export Selected", "editThemeTitle": "Edit Terminal Theme", "newThemeTitle": "New Terminal Theme", + "newThemeDefaultName": "New Theme", "themeName": "Theme Name", "confirmDeleteTheme": "Are you sure you want to delete the theme \"{name}\"? This action cannot be undone.", "confirmCloseEditing": "You are currently editing a theme. Closing will discard unsaved changes. Are you sure?", diff --git a/packages/frontend/src/locales/zh.json b/packages/frontend/src/locales/zh.json index 8a0060f..1e58b73 100644 --- a/packages/frontend/src/locales/zh.json +++ b/packages/frontend/src/locales/zh.json @@ -36,6 +36,7 @@ "exportTheme": "导出选中主题", "editThemeTitle": "编辑终端主题", "newThemeTitle": "新建终端主题", + "newThemeDefaultName": "新主题", "themeName": "主题名称", "confirmDeleteTheme": "确定要删除主题 \"{name}\" 吗？此操作不可撤销。", "confirmCloseEditing": "您正在编辑主题，关闭将丢失未保存的更改。确定要关闭吗？", diff --git a/packages/frontend/src/stores/appearance.store.ts b/packages/frontend/src/stores/appearance.store.ts index 24912c7..0852dd1 100644 --- a/packages/frontend/src/stores/appearance.store.ts +++ b/packages/frontend/src/stores/appearance.store.ts @@ -53,13 +53,9 @@ export const useAppearanceStore = defineStore('appearance', () => { // 页面背景图片 URL const pageBackgroundImage = computed(() => appearanceSettings.value.pageBackgroundImage); - // 页面背景透明度 - const pageBackgroundOpacity = computed(() => appearanceSettings.value.pageBackgroundOpacity ?? 1.0); // 默认 1 // 终端背景图片 URL const terminalBackgroundImage = computed(() => appearanceSettings.value.terminalBackgroundImage); - // 终端背景透明度 - const terminalBackgroundOpacity = computed(() => appearanceSettings.value.terminalBackgroundOpacity ?? 1.0); // 默认 1 // --- Actions --- @@ -121,7 +117,7 @@ export const useAppearanceStore = defineStore('appearance', () => { console.log('[AppearanceStore] 外观设置已更新:', appearanceSettings.value); // 如果 UI 主题或背景更新，重新应用 if (updates.customUiTheme !== undefined) applyUiTheme(currentUiTheme.value); - if (updates.pageBackgroundImage !== undefined || updates.pageBackgroundOpacity !== undefined) applyPageBackground(); + if (updates.pageBackgroundImage !== undefined) applyPageBackground(); // 移除 pageBackgroundOpacity 检查 // 终端相关设置由 Terminal 组件监听应用 } catch (err: any) { @@ -321,22 +317,6 @@ export const useAppearanceStore = defineStore('appearance', () => { } } - /** - * 设置页面背景透明度 - * @param opacity 0-1 之间的数字 - */ - async function setPageBackgroundOpacity(opacity: number) { - await updateAppearanceSettings({ pageBackgroundOpacity: opacity }); - } - - /** - * 设置终端背景透明度 - * @param opacity 0-1 之间的数字 - */ - async function setTerminalBackgroundOpacity(opacity: number) { - await updateAppearanceSettings({ terminalBackgroundOpacity: opacity }); - } - /** * 移除页面背景 */ @@ -410,7 +390,7 @@ export const useAppearanceStore = defineStore('appearance', () => { }, { deep: true }); // 监听页面背景变化并应用 - watch([pageBackgroundImage, pageBackgroundOpacity], () => { + watch(pageBackgroundImage, () => { // 只监听图片变化 applyPageBackground(); }); @@ -427,9 +407,9 @@ export const useAppearanceStore = defineStore('appearance', () => { currentTerminalTheme, currentTerminalFontFamily, pageBackgroundImage, - pageBackgroundOpacity, + // pageBackgroundOpacity, // Removed terminalBackgroundImage, - terminalBackgroundOpacity, + // terminalBackgroundOpacity, // Removed // Actions loadInitialAppearanceData, updateAppearanceSettings, @@ -445,8 +425,8 @@ export const useAppearanceStore = defineStore('appearance', () => { exportTerminalTheme, uploadPageBackground, uploadTerminalBackground, - setPageBackgroundOpacity, - setTerminalBackgroundOpacity, + // setPageBackgroundOpacity, // Removed + // setTerminalBackgroundOpacity, // Removed removePageBackground, removeTerminalBackground, // Visibility control