feat: 添加调整终端字体大小设置

2025-04-18 09:17:56 +08:00
parent fdc613e12d
commit f8c651dafa
8 changed files with 103 additions and 24 deletions
@@ -15,6 +15,7 @@ const {
    activeTerminalThemeId,
    availableTerminalThemes,
    currentTerminalFontFamily,
+    currentTerminalFontSize, // <-- 添加
    pageBackgroundImage,
    // pageBackgroundOpacity, // Removed
    terminalBackgroundImage,
@@ -24,6 +25,7 @@ const {
 // --- 本地状态用于编辑 ---
 const editableUiTheme = ref<Record<string, string>>({});
 const editableTerminalFontFamily = ref('');
+const editableTerminalFontSize = ref(14); // <-- 添加，默认值 14
 // const editablePageBackgroundOpacity = ref(1.0); // Removed
 // const editableTerminalBackgroundOpacity = ref(1.0); // Removed

@@ -46,9 +48,11 @@ const saveThemeError = ref<string | null>(null); // 用于显示保存主题时

 // 初始化本地编辑状态
 const initializeEditableState = () => {
+  // 深拷贝 UI 主题
  // 深拷贝 UI 主题
  editableUiTheme.value = JSON.parse(JSON.stringify(currentUiTheme.value || {}));
  editableTerminalFontFamily.value = currentTerminalFontFamily.value;
+  editableTerminalFontSize.value = currentTerminalFontSize.value; // <-- 添加
  selectedTerminalThemeId.value = activeTerminalThemeId.value ?? null; // 初始化下拉框
  // editablePageBackgroundOpacity.value = pageBackgroundOpacity.value; // Removed
  // editableTerminalBackgroundOpacity.value = terminalBackgroundOpacity.value; // Removed
@@ -63,18 +67,20 @@ onMounted(initializeEditableState);
 // 监听 store 变化以更新本地状态 (例如重置或外部更改)
 // 只监听不需要编辑的状态或用于初始化的状态
 watch([
-    currentUiTheme, currentTerminalFontFamily, activeTerminalThemeId
+    currentUiTheme, currentTerminalFontFamily, currentTerminalFontSize, activeTerminalThemeId // <-- 添加 currentTerminalFontSize
    // pageBackgroundOpacity, terminalBackgroundOpacity // Removed dependencies
 ], (newVals, oldVals) => {
    // 仅当非编辑状态时，或活动主题ID变化时，才同步下拉框和非编辑状态
-    if (!isEditingTheme.value || newVals[2] !== oldVals[2]) {
+    // 注意：索引现在需要调整，因为 newVals 数组长度变了
+    if (!isEditingTheme.value || newVals[3] !== oldVals[3]) { // <-- 索引从 2 改为 3
        initializeEditableState();
    } else {
-        // 如果正在编辑，只更新非编辑相关的部分 (例如 UI 主题可以在编辑终端主题时同时更新)
+        // 如果正在编辑，只更新非编辑相关的部分
        editableUiTheme.value = JSON.parse(JSON.stringify(newVals[0] || {}));
        editableTerminalFontFamily.value = newVals[1];
-        // editablePageBackgroundOpacity.value = newVals[3]; // Removed
-        // editableTerminalBackgroundOpacity.value = newVals[4]; // Removed
+        editableTerminalFontSize.value = newVals[2]; // <-- 添加
+        // editablePageBackgroundOpacity.value = newVals[4]; // Removed
+        // editableTerminalBackgroundOpacity.value = newVals[5]; // Removed
    }
 }, { deep: true });

@@ -135,6 +141,22 @@ const handleSaveTerminalFont = async () => {
    }
 };

+// 保存终端字体大小
+const handleSaveTerminalFontSize = async () => {
+    try {
+        const size = Number(editableTerminalFontSize.value);
+        if (isNaN(size) || size <= 0) {
+            alert(t('styleCustomizer.errorInvalidFontSize')); // 需要添加翻译
+            return;
+        }
+        await appearanceStore.setTerminalFontSize(size);
+        alert(t('styleCustomizer.terminalFontSizeSaved')); // 需要添加翻译
+    } catch (error: any) {
+        console.error("保存终端字体大小失败:", error);
+        alert(t('styleCustomizer.terminalFontSizeSaveFailed', { message: error.message })); // 需要添加翻译
+    }
+};
+
 // 更改激活的终端主题
 const handleTerminalThemeChange = async () => {
    try {
@@ -401,6 +423,13 @@ const formatXtermLabel = (key: keyof ITheme): string => {
            </div>
            <p class="setting-description">{{ t('styleCustomizer.terminalFontDescription') }}</p>

+            <!-- 终端字体大小设置 -->
+            <div class="form-group">
+                <label for="terminalFontSize">{{ t('styleCustomizer.terminalFontSize') }}:</label> <!-- 需要添加翻译 -->
+                <input type="number" id="terminalFontSize" v-model.number="editableTerminalFontSize" class="number-input" min="1" />
+                <button @click="handleSaveTerminalFontSize" class="button-inline">{{ t('common.save') }}</button>
+            </div>
+
            <hr>

            <!-- 终端主题选择与管理 -->
@@ -27,11 +27,11 @@ let terminal: Terminal | null = null;
 let fitAddon: FitAddon | null = null;
 let resizeObserver: ResizeObserver | null = null;
 let debounceTimer: number | null = null; // 用于防抖的计时器 ID
-const fontSize = ref(14); // 字体大小状态, 默认为14 (这个可以保留，或者也移到 appearance store)
+// const fontSize = ref(14); // 移除本地字体大小状态，将由 store 管理

 // --- Appearance Store ---
 const appearanceStore = useAppearanceStore();
-const { currentTerminalTheme, currentTerminalFontFamily, terminalBackgroundImage } = storeToRefs(appearanceStore); // 获取外观状态 (移除 terminalBackgroundOpacity)
+const { currentTerminalTheme, currentTerminalFontFamily, terminalBackgroundImage, currentTerminalFontSize } = storeToRefs(appearanceStore); // <-- 添加 currentTerminalFontSize

 // 防抖函数
 const debounce = (func: Function, delay: number) => {
@@ -75,7 +75,7 @@ onMounted(() => {
  if (terminalRef.value) {
    terminal = new Terminal({
      cursorBlink: true,
-      fontSize: fontSize.value, // 初始字体大小
+      fontSize: currentTerminalFontSize.value, // <-- 使用 store 中的字体大小
      fontFamily: currentTerminalFontFamily.value, // 使用 store 中的字体设置
      theme: currentTerminalTheme.value, // 使用 store 中的当前 xterm 主题
      rows: 24, // 初始行数
@@ -202,6 +202,16 @@ onMounted(() => {
        }
    });

+    // 监听字体大小变化
+    watch(currentTerminalFontSize, (newSize) => {
+        if (terminal) {
+            console.log(`[Terminal ${props.sessionId}] 应用新终端字体大小: ${newSize}`);
+            terminal.options.fontSize = newSize;
+            // 字体大小变化需要重新 fit
+            fitAndEmitResizeNow(terminal);
+        }
+    });
+
    // 监听背景图片变化
    watch(terminalBackgroundImage, () => { // 只监听图片
        console.log(`[Terminal Watcher] terminalBackgroundImage changed. New image: ${terminalBackgroundImage.value}`); // 添加日志确认 watcher 触发
@@ -242,17 +252,17 @@ onMounted(() => {
          event.preventDefault(); // 阻止默认的滚动行为
          
          // 根据滚轮方向调整字体大小
-          if (event.deltaY < 0) {
-            // 向上滚动，增大字体
-            fontSize.value = Math.min(fontSize.value + 1, 40); // 设置最大字体大小为40
-          } else {
-            // 向下滚动，减小字体
-            fontSize.value = Math.max(fontSize.value - 1, 8); // 设置最小字体大小为8
-          }
-          
-          // 更新终端字体大小
+          // 直接读取和修改 terminal 实例的字体大小
          if (terminal) {
-            terminal.options.fontSize = fontSize.value;
+            let newSize;
+            if (event.deltaY < 0) {
+              // 向上滚动，增大字体
+              newSize = Math.min((terminal.options.fontSize ?? currentTerminalFontSize.value) + 1, 40); // 使用当前实例值或 store 值作为基础
+            } else {
+              // 向下滚动，减小字体
+              newSize = Math.max((terminal.options.fontSize ?? currentTerminalFontSize.value) - 1, 8); // 使用当前实例值或 store 值作为基础
+            }
+            terminal.options.fontSize = newSize;
            // 调整终端大小以适应新的字体大小
            fitAddon?.fit();
            emit('resize', { cols: terminal.cols, rows: terminal.rows });