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

feat: 为移动端和电脑端启用两套终端字号大小设置

Browse Source
This commit is contained in:
Baobhan Sith
2025-05-17 16:09:47 +08:00
parent 409ba8ff40
commit 5a4049b39b
4 changed files with 53 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@nexus-terminal/frontend",
"version": "0.6",
"version": "0.6.1",
"private": true,
"type": "module",
"scripts": {
packages/frontend/src/components/Terminal.vue
+10 -5
View File
@@ -122,11 +122,16 @@ const fitAndEmitResizeNow = (term: Terminal) => {
}
};
// 创建防抖版的字体大小保存函数
const debouncedSetTerminalFontSize = debounce(async (size: number) => {
// 创建防抖版的字体大小保存函数 (区分设备)
const debouncedSaveFontSize = debounce(async (size: number) => {
try {
if (isMobile.value) {
await appearanceStore.setTerminalFontSizeMobile(size);
console.log(`[Terminal ${props.sessionId}] Debounced MOBILE font size saved: ${size}`);
} else {
await appearanceStore.setTerminalFontSize(size);
console.log(`[Terminal ${props.sessionId}] Debounced font size saved: ${size}`);
console.log(`[Terminal ${props.sessionId}] Debounced DESKTOP font size saved: ${size}`);
}
} catch (error) {
console.error(`[Terminal ${props.sessionId}] Debounced font size save failed:`, error);
// Optionally show an error to the user
@@ -200,7 +205,7 @@ const handleTouchMove = (event: TouchEvent) => {
if (newSize !== currentTerminalOptFontSize) {
terminal.options.fontSize = newSize;
fitAndEmitResizeNow(terminal);
debouncedSetTerminalFontSize(newSize);
debouncedSaveFontSize(newSize); // 使用新的区分设备的保存函数
}
}
}
@@ -551,7 +556,7 @@ onMounted(() => {
fitAndEmitResizeNow(terminal); // 调用统一函数
// 调用防抖函数来保存设置
debouncedSetTerminalFontSize(newSize);
debouncedSaveFontSize(newSize); // 使用新的区分设备的保存函数
}
}
}
packages/frontend/src/stores/appearance.store.ts
+40 -10
View File
@@ -1,14 +1,14 @@
import { defineStore } from 'pinia';
import apiClient from '../utils/apiClient'; // 使用统一的 apiClient
import { ref, computed, watch, nextTick } from 'vue'; // 导入 nextTick
import apiClient from '../utils/apiClient';
import { ref, computed, watch, nextTick } from 'vue';
import { useDeviceDetection } from '../composables/useDeviceDetection';
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'; // <-- 导入预设主题
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';
// Helper function to safely parse JSON
export const safeJsonParse = <T>(jsonString: string | undefined | null, defaultValue: T): T => { // Add export
export const safeJsonParse = <T>(jsonString: string | undefined | null, defaultValue: T): T => {
if (!jsonString) return defaultValue;
try {
return JSON.parse(jsonString);
@@ -19,6 +19,8 @@ export const safeJsonParse = <T>(jsonString: string | undefined | null, defaultV
};
export const useAppearanceStore = defineStore('appearance', () => {
const { isMobile } = useDeviceDetection(); // + 获取设备检测结果
// --- State ---
const isLoading = ref(false);
const error = ref<string | null>(null);
@@ -61,10 +63,27 @@ export const useAppearanceStore = defineStore('appearance', () => {
// 当前终端字体大小
const currentTerminalFontSize = computed<number>(() => {
// 提供默认值 14，如果后端没有设置或设置无效
let size;
if (isMobile.value) {
size = appearanceSettings.value.terminalFontSizeMobile;
} else {
size = appearanceSettings.value.terminalFontSize;
}
return typeof size === 'number' && size > 0 ? size : 14;
});
// 桌面端终端字体大小 (用于设置面板等处区分显示)
const terminalFontSizeDesktop = computed<number>(() => {
const size = appearanceSettings.value.terminalFontSize;
return typeof size === 'number' && size > 0 ? size : 14;
});
// 移动端终端字体大小 (用于设置面板等处区分显示)
const terminalFontSizeMobile = computed<number>(() => {
const size = appearanceSettings.value.terminalFontSizeMobile;
return typeof size === 'number' && size > 0 ? size : 14;
});
// 页面背景图片 URL
const pageBackgroundImage = computed(() => appearanceSettings.value.pageBackgroundImage);
@@ -218,10 +237,18 @@ export const useAppearanceStore = defineStore('appearance', () => {
* 设置终端字体大小
* @param size 字体大小 (数字)
*/
async function setTerminalFontSize(size: number) {
async function setTerminalFontSize(size: number) { // 此函数专用于桌面端
await updateAppearanceSettings({ terminalFontSize: size });
}
/**
* 设置移动端终端字体大小
* @param size 字体大小 (数字)
*/
async function setTerminalFontSizeMobile(size: number) {
await updateAppearanceSettings({ terminalFontSizeMobile: size });
}
/**
* 设置编辑器字体大小
* @param size 字体大小 (数字)
@@ -575,7 +602,9 @@ export const useAppearanceStore = defineStore('appearance', () => {
activeTerminalThemeId,
currentTerminalTheme,
currentTerminalFontFamily,
currentTerminalFontSize,
currentTerminalFontSize, // 这个 getter 会自动根据设备类型返回正确的字体大小
terminalFontSizeDesktop, // + 用于在设置中分别显示/设置桌面端字号
terminalFontSizeMobile, // + 用于在设置中分别显示/设置移动端字号
currentEditorFontSize, // <-- 新增
pageBackgroundImage,
// pageBackgroundOpacity, // Removed
@@ -589,7 +618,8 @@ export const useAppearanceStore = defineStore('appearance', () => {
resetCustomUiTheme,
setActiveTerminalTheme,
setTerminalFontFamily,
setTerminalFontSize,
setTerminalFontSize, // 设置桌面端字体大小
setTerminalFontSizeMobile, // + 设置移动端字体大小
setEditorFontSize, // <-- 新增
setTerminalBackgroundEnabled, // <-- 新增
createTerminalTheme, // 保留
packages/frontend/src/types/appearance.types.ts
+1
View File
@@ -8,6 +8,7 @@ export interface AppearanceSettings {
activeTerminalThemeId?: number | null; // 终端主题 ID
terminalFontFamily?: string;
terminalFontSize?: number;
terminalFontSizeMobile?: number; // 移动端字体大小
terminalBackgroundImage?: string;
pageBackgroundImage?: string;
editorFontSize?: number;