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-17 20:33:14 +08:00
parent 9eb0bcc5f3
commit 636ed5a2bb
8 changed files with 37 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/src/repositories/appearance.repository.ts
+12 -13
View File
@@ -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]);
}
packages/backend/src/services/appearance.service.ts
-9
View File
@@ -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);
packages/backend/src/types/appearance.types.ts
-2
View File
@@ -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;
}
packages/frontend/src/components/StyleCustomizer.vue
+13 -40
View File
@@ -16,16 +16,16 @@ const {
availableTerminalThemes,
currentTerminalFontFamily,
pageBackgroundImage,
pageBackgroundOpacity,
// pageBackgroundOpacity, // Removed
terminalBackgroundImage,
terminalBackgroundOpacity,
// terminalBackgroundOpacity, // Removed
} = storeToRefs(appearanceStore);
// --- 本地状态用于编辑 ---
const editableUiTheme = ref<Record<string, string>>({});
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<string | null>(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 => {
<button @click="handleRemovePageBg" :disabled="!pageBackgroundImage" class="button-danger">{{ t('styleCustomizer.removePageBg') }}</button>
<input type="file" ref="pageBgFileInput" @change="handlePageBgUpload" accept="image/*" style="display: none;" />
</div>
<div class="form-group">
<label for="pageBgOpacity">{{ t('styleCustomizer.pageBgOpacity') }}:</label>
<input type="range" id="pageBgOpacity" v-model.number="editablePageBackgroundOpacity" min="0" max="1" step="0.05" @change="handlePageOpacityChange"/>
<span>{{ Math.round(editablePageBackgroundOpacity * 100) }}%</span>
</div>
<!-- Removed Opacity Slider -->
<p v-if="uploadError" class="error-message">{{ uploadError }}</p>
<hr>
@@ -520,11 +497,7 @@ const formatXtermLabel = (key: keyof ITheme): string => {
<button @click="handleRemoveTerminalBg" :disabled="!terminalBackgroundImage" class="button-danger">{{ t('styleCustomizer.removeTerminalBg') }}</button>
<input type="file" ref="terminalBgFileInput" @change="handleTerminalBgUpload" accept="image/*" style="display: none;" />
</div>
<div class="form-group">
<label for="terminalBgOpacity">{{ t('styleCustomizer.terminalBgOpacity') }}:</label>
<input type="range" id="terminalBgOpacity" v-model.number="editableTerminalBackgroundOpacity" min="0" max="1" step="0.05" @change="handleTerminalOpacityChange"/>
<span>{{ Math.round(editableTerminalBackgroundOpacity * 100) }}%</span>
</div>
<!-- Removed Opacity Slider -->
</section>
</main>
packages/frontend/src/components/Terminal.vue
+4 -4
View File
@@ -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
packages/frontend/src/locales/en.json
+1
View File
@@ -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?",
packages/frontend/src/locales/zh.json
+1
View File
@@ -36,6 +36,7 @@
"exportTheme": "导出选中主题",
"editThemeTitle": "编辑终端主题",
"newThemeTitle": "新建终端主题",
"newThemeDefaultName": "新主题",
"themeName": "主题名称",
"confirmDeleteTheme": "确定要删除主题 \"{name}\" 吗？此操作不可撤销。",
"confirmCloseEditing": "您正在编辑主题，关闭将丢失未保存的更改。确定要关闭吗？",
packages/frontend/src/stores/appearance.store.ts
+6 -26
View File
@@ -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