From 5a4049b39b6a6796062d863109869c257012450f Mon Sep 17 00:00:00 2001 From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com> Date: Sat, 17 May 2025 16:09:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E5=92=8C=E7=94=B5=E8=84=91=E7=AB=AF=E5=90=AF=E7=94=A8=E4=B8=A4?= =?UTF-8?q?=E5=A5=97=E7=BB=88=E7=AB=AF=E5=AD=97=E5=8F=B7=E5=A4=A7=E5=B0=8F?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/package.json | 2 +- packages/frontend/src/components/Terminal.vue | 17 ++++--- .../frontend/src/stores/appearance.store.ts | 50 +++++++++++++++---- .../frontend/src/types/appearance.types.ts | 1 + 4 files changed, 53 insertions(+), 17 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index ea47da4..f3675cc 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -1,6 +1,6 @@ { "name": "@nexus-terminal/frontend", - "version": "0.6", + "version": "0.6.1", "private": true, "type": "module", "scripts": { diff --git a/packages/frontend/src/components/Terminal.vue b/packages/frontend/src/components/Terminal.vue index 81f638a..0e57173 100644 --- a/packages/frontend/src/components/Terminal.vue +++ b/packages/frontend/src/components/Terminal.vue @@ -122,11 +122,16 @@ const fitAndEmitResizeNow = (term: Terminal) => { } }; -// 创建防抖版的字体大小保存函数 -const debouncedSetTerminalFontSize = debounce(async (size: number) => { +// 创建防抖版的字体大小保存函数 (区分设备) +const debouncedSaveFontSize = debounce(async (size: number) => { try { - await appearanceStore.setTerminalFontSize(size); - console.log(`[Terminal ${props.sessionId}] Debounced font size saved: ${size}`); + 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 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); // 使用新的区分设备的保存函数 } } } diff --git a/packages/frontend/src/stores/appearance.store.ts b/packages/frontend/src/stores/appearance.store.ts index a717551..9efb9d5 100644 --- a/packages/frontend/src/stores/appearance.store.ts +++ b/packages/frontend/src/stores/appearance.store.ts @@ -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 = (jsonString: string | undefined | null, defaultValue: T): T => { // Add export +export const safeJsonParse = (jsonString: string | undefined | null, defaultValue: T): T => { if (!jsonString) return defaultValue; try { return JSON.parse(jsonString); @@ -19,6 +19,8 @@ export const safeJsonParse = (jsonString: string | undefined | null, defaultV }; export const useAppearanceStore = defineStore('appearance', () => { + const { isMobile } = useDeviceDetection(); // + 获取设备检测结果 + // --- State --- const isLoading = ref(false); const error = ref(null); @@ -61,10 +63,27 @@ export const useAppearanceStore = defineStore('appearance', () => { // 当前终端字体大小 const currentTerminalFontSize = computed(() => { // 提供默认值 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(() => { const size = appearanceSettings.value.terminalFontSize; return typeof size === 'number' && size > 0 ? size : 14; }); + // 移动端终端字体大小 (用于设置面板等处区分显示) + const terminalFontSizeMobile = computed(() => { + 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, // 保留 diff --git a/packages/frontend/src/types/appearance.types.ts b/packages/frontend/src/types/appearance.types.ts index 0b16e3a..7e4fef4 100644 --- a/packages/frontend/src/types/appearance.types.ts +++ b/packages/frontend/src/types/appearance.types.ts @@ -8,6 +8,7 @@ export interface AppearanceSettings { activeTerminalThemeId?: number | null; // 终端主题 ID terminalFontFamily?: string; terminalFontSize?: number; + terminalFontSizeMobile?: number; // 移动端字体大小 terminalBackgroundImage?: string; pageBackgroundImage?: string; editorFontSize?: number;