From e1d532d65866be3ccda0ef8fcd2567841c20b79c Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Thu, 24 Apr 2025 09:09:14 +0800
Subject: [PATCH] update

---
 .../src/settings/settings.controller.ts       |   4 +-
 .../frontend/src/components/FileManager.vue   |  88 ++++++++++++--
 .../frontend/src/stores/settings.store.ts     | 112 +++++++++++++++++-
 3 files changed, 191 insertions(+), 13 deletions(-)

diff --git a/packages/backend/src/settings/settings.controller.ts b/packages/backend/src/settings/settings.controller.ts
index c803399..16323db 100644
--- a/packages/backend/src/settings/settings.controller.ts
+++ b/packages/backend/src/settings/settings.controller.ts
@@ -37,7 +37,9 @@ export const settingsController = {
           'autoCopyOnSelect', 'dockerStatusIntervalSeconds', 'dockerDefaultExpand',
           'statusMonitorIntervalSeconds', // +++ 添加状态监控间隔键 +++
           'workspaceSidebarPersistent', // +++ 添加侧边栏固定键 +++
-          'sidebarPaneWidths' // +++ 添加侧边栏宽度对象键 +++
+          'sidebarPaneWidths', // +++ 添加侧边栏宽度对象键 +++
+          'fileManagerRowSizeMultiplier', // +++ 添加文件管理器行大小键 +++
+          'fileManagerColWidths' // +++ 添加文件管理器列宽键 +++
           // --- REMOVED old width keys ---
       ];
       const filteredSettings: Record<string, string> = {};
diff --git a/packages/frontend/src/components/FileManager.vue b/packages/frontend/src/components/FileManager.vue
index 677766f..25b9af9 100644
--- a/packages/frontend/src/components/FileManager.vue
+++ b/packages/frontend/src/components/FileManager.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect, type PropType, readonly, defineExpose, shallowRef } from 'vue'; // 添加 shallowRef
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect, type PropType, readonly, defineExpose, shallowRef } from 'vue';
+// 移除 debounce 导入
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router'; // 保留用于生成下载 URL (如果下载逻辑移动则可移除)
 import { storeToRefs } from 'pinia'; // 导入 storeToRefs
@@ -9,8 +10,8 @@ import { useFileUploader } from '../composables/useFileUploader';
 // import { useFileEditor } from '../composables/useFileEditor'; // 移除旧的 composable 导入
 import { useFileEditorStore, type FileInfo } from '../stores/fileEditor.store'; // 导入新的 Store 和 FileInfo 类型
 import { useSessionStore } from '../stores/session.store';
-import { useSettingsStore } from '../stores/settings.store';
-import { useFocusSwitcherStore } from '../stores/focusSwitcher.store'; // +++ 导入焦点切换 Store +++
+import { useSettingsStore } from '../stores/settings.store'; // +++ 实例化 Settings Store +++
+import { useFocusSwitcherStore } from '../stores/focusSwitcher.store'; // +++ 实例化焦点切换 Store +++
 import { useFileManagerContextMenu } from '../composables/file-manager/useFileManagerContextMenu'; // +++ 导入上下文菜单 Composable +++
 import { useFileManagerSelection } from '../composables/file-manager/useFileManagerSelection'; // +++ 导入选择 Composable +++
 import { useFileManagerDragAndDrop } from '../composables/file-manager/useFileManagerDragAndDrop'; // +++ 导入拖放 Composable +++
@@ -101,11 +102,15 @@ const {
 // 实例化其他 Stores
 const fileEditorStore = useFileEditorStore(); // 用于共享模式
 // const sessionStore = useSessionStore(); // 已在上面实例化
-const settingsStore = useSettingsStore();
+const settingsStore = useSettingsStore(); // +++ 实例化 Settings Store +++
 const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换 Store +++
 
 // 从 Settings Store 获取共享设置
-const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore); // 使用 storeToRefs 保持响应性
+const {
+  shareFileEditorTabsBoolean,
+  fileManagerRowSizeMultiplierNumber, // +++ 获取行大小 getter +++
+  fileManagerColWidthsObject, // +++ 获取列宽 getter +++
+} = storeToRefs(settingsStore); // 使用 storeToRefs 保持响应性
 
 
 
@@ -124,13 +129,13 @@ const editablePath = ref('');
 const fileListContainerRef = ref<HTMLDivElement | null>(null); // 文件列表容器引用 (保留，传递给 Composable)
 // const scrollIntervalId = ref<number | null>(null); // 已移至 useFileManagerDragAndDrop
 
-const rowSizeMultiplier = ref(1); // 新增：行大小（字体）乘数
+const rowSizeMultiplier = ref(1.0); // 新增：行大小（字体）乘数, 默认值会被 store 覆盖
 // --- 键盘导航状态 (移至 useFileManagerKeyboardNavigation) ---
 // const selectedIndex = ref<number>(-1);
 
 // --- Column Resizing State (Remains the same) ---
 const tableRef = ref<HTMLTableElement | null>(null);
-const colWidths = ref({
+const colWidths = ref({ // 默认值会被 store 覆盖
     type: 50,
     name: 300,
     size: 100,
@@ -515,10 +520,64 @@ watch(sortDirection, () => {
 });
 
 
+// --- 保存设置的函数 ---
+const saveLayoutSettings = () => {
+  // 确保 colWidths.value 是普通对象，而不是 Proxy
+  const widthsToSave = JSON.parse(JSON.stringify(colWidths.value));
+  // +++ 添加日志：记录保存的值 +++
+  console.log(`[FileManager ${props.sessionId}-${props.instanceId}] Triggering saveLayoutSettings: multiplier=${rowSizeMultiplier.value}, widths=${JSON.stringify(widthsToSave)}`);
+  settingsStore.updateFileManagerLayoutSettings(rowSizeMultiplier.value, widthsToSave);
+};
+
 // --- 生命周期钩子 ---
 onMounted(() => {
     console.log(`[FileManager ${props.sessionId}-${props.instanceId}] Component mounted.`);
-    // Initial load logic is handled by watchEffect
+    // --- 移除 onMounted 中的加载逻辑 ---
+    // Initial load logic is handled by watchEffect below and the main sftp loading watchEffect
+});
+
+// +++ 使用 watchEffect 响应式地加载和应用布局设置 +++
+watchEffect(() => {
+  // 检查 store 中的值是否有效 (避免在 store 加载完成前使用默认值覆盖本地 ref)
+  // fileManagerColWidthsObject 初始可能是空对象 {}，需要检查其是否有键
+  const storeMultiplier = fileManagerRowSizeMultiplierNumber.value;
+  const storeWidths = fileManagerColWidthsObject.value;
+
+  // +++ 添加日志：记录从 store 获取的值 +++
+  console.log(`[FileManager ${props.sessionId}-${props.instanceId}] watchEffect triggered. Store values: multiplier=${storeMultiplier}, widths=${JSON.stringify(storeWidths)}`);
+
+  // 只有当 store 加载完成并提供了有效值时才更新
+  // 假设 store 加载完成后 multiplier > 0 且 widths 对象有内容
+  if (storeMultiplier > 0 && Object.keys(storeWidths).length > 0) {
+    const currentMultiplier = rowSizeMultiplier.value;
+    const currentWidthsString = JSON.stringify(colWidths.value);
+    const storeWidthsString = JSON.stringify(storeWidths);
+
+    // +++ 添加日志：记录当前值和 store 值，以及是否更新 +++
+    console.log(`[FileManager ${props.sessionId}-${props.instanceId}] Comparing values: Current Multiplier=${currentMultiplier}, Store Multiplier=${storeMultiplier}. Update needed: ${storeMultiplier !== currentMultiplier}`);
+    console.log(`[FileManager ${props.sessionId}-${props.instanceId}] Comparing values: Current Widths=${currentWidthsString}, Store Widths=${storeWidthsString}. Update needed: ${storeWidthsString !== currentWidthsString}`);
+
+    // 仅在值不同时更新，避免不必要的重渲染和潜在的循环更新
+    if (storeMultiplier !== currentMultiplier) {
+      rowSizeMultiplier.value = storeMultiplier;
+      console.log(`[FileManager ${props.sessionId}-${props.instanceId}] Row size multiplier updated from store: ${storeMultiplier}`);
+    }
+    if (storeWidthsString !== currentWidthsString) {
+      // --- 修改：合并 storeWidths 到 colWidths.value ---
+      // 确保 colWidths.value 的所有键都存在，并用 store 的值更新（如果存在且有效）
+      const updatedWidths = { ...colWidths.value }; // 创建当前值的副本
+      for (const key in updatedWidths) {
+        if (storeWidths[key] !== undefined && typeof storeWidths[key] === 'number' && storeWidths[key] > 0) {
+          updatedWidths[key as keyof typeof updatedWidths] = storeWidths[key];
+        }
+      }
+      colWidths.value = updatedWidths; // 赋值更新后的对象
+      console.log(`[FileManager ${props.sessionId}-${props.instanceId}] Column widths updated from store: ${JSON.stringify(updatedWidths)}`);
+    }
+  } else {
+    // +++ 添加日志：记录等待 store 加载 +++
+    console.log(`[FileManager ${props.sessionId}-${props.instanceId}] Waiting for valid layout settings from store... Store Multiplier=${storeMultiplier}, Store Widths Keys=${Object.keys(storeWidths).length}`);
+  }
 });
 
 // 使用 watchEffect 监听连接和 SFTP 就绪状态以触发初始加载
@@ -709,6 +768,10 @@ const stopResize = () => {
         document.removeEventListener('mouseup', stopResize);
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
+        // +++ 在调整结束后保存列宽 +++
+        // +++ 添加日志：记录触发保存 +++
+        console.log(`[FileManager ${props.sessionId}-${props.instanceId}] stopResize triggered saveLayoutSettings.`);
+        saveLayoutSettings();
     }
 };
 
@@ -780,8 +843,15 @@ const handleWheel = (event: WheelEvent) => {
         const delta = event.deltaY > 0 ? -0.05 : 0.05; // 滚轮向下减小，向上增大
         // 限制字体大小乘数在 0.5 到 2 之间
         const newMultiplier = Math.max(0.5, Math.min(2, rowSizeMultiplier.value + delta));
+        const oldMultiplier = rowSizeMultiplier.value;
         rowSizeMultiplier.value = parseFloat(newMultiplier.toFixed(2)); // 保留两位小数避免浮点数问题
         // console.log(`Row size multiplier: ${rowSizeMultiplier.value}`); // 调试日志
+        // +++ 在行大小变化后保存设置 +++
+        if (rowSizeMultiplier.value !== oldMultiplier) {
+            // +++ 添加日志：记录触发保存 +++
+            console.log(`[FileManager ${props.sessionId}-${props.instanceId}] handleWheel triggered saveLayoutSettings.`);
+            saveLayoutSettings();
+        }
     }
 };
 
@@ -1100,5 +1170,3 @@ defineExpose({ focusSearchInput });
 <style scoped>
 /* Scoped styles removed for Tailwind CSS refactoring */
 </style>
-
-
diff --git a/packages/frontend/src/stores/settings.store.ts b/packages/frontend/src/stores/settings.store.ts
index 2b8df11..ec4bc95 100644
--- a/packages/frontend/src/stores/settings.store.ts
+++ b/packages/frontend/src/stores/settings.store.ts
@@ -20,6 +20,8 @@ interface SettingsState {
   statusMonitorIntervalSeconds?: string; // NEW: 状态监控轮询间隔 (秒)
   workspaceSidebarPersistent?: string; // NEW: 工作区侧边栏是否固定 'true' or 'false'
   sidebarPaneWidths?: string; // NEW: 存储各侧边栏组件宽度的 JSON 字符串
+  fileManagerRowSizeMultiplier?: string; // NEW: 文件管理器行大小乘数 (e.g., '1.0')
+  fileManagerColWidths?: string; // NEW: 文件管理器列宽 JSON 字符串 (e.g., '{"name": 300, "size": 100}')
  // Add other general settings keys here as needed
  [key: string]: string | undefined; // Allow other string settings
 }
@@ -29,6 +31,7 @@ export const useSettingsStore = defineStore('settings', () => {
   // --- State ---
   const settings = ref<Partial<SettingsState>>({}); // 通用设置状态
   const parsedSidebarPaneWidths = ref<Record<string, string>>({}); // NEW: 解析后的侧边栏宽度对象
+  const parsedFileManagerColWidths = ref<Record<string, number>>({}); // NEW: 解析后的文件管理器列宽对象
   const isLoading = ref(false);
   const error = ref<string | null>(null);
   // 移除外观相关状态: isStyleCustomizerVisible, currentUiTheme, currentXtermTheme
@@ -115,6 +118,65 @@ export const useSettingsStore = defineStore('settings', () => {
       //     await updateSetting('sidebarPaneWidths', JSON.stringify(finalWidths));
       // }
 
+      // NEW: Load and parse file manager layout settings
+      const defaultFileManagerRowMultiplier = '1.0';
+      const defaultFileManagerColWidths = { type: 50, name: 300, size: 100, permissions: 120, modified: 180 };
+
+      // Row Size Multiplier
+      console.log(`[SettingsStore] Raw fileManagerRowSizeMultiplier from backend: '${settings.value.fileManagerRowSizeMultiplier}'`);
+      if (settings.value.fileManagerRowSizeMultiplier === undefined) {
+          settings.value.fileManagerRowSizeMultiplier = defaultFileManagerRowMultiplier; // Assign first
+          console.log(`[SettingsStore] fileManagerRowSizeMultiplier not found, set to default: ${settings.value.fileManagerRowSizeMultiplier}`); // Log the assigned value
+      }
+      // Ensure it's a valid number string before parsing later
+      const parsedMultiplier = parseFloat(settings.value.fileManagerRowSizeMultiplier);
+      if (isNaN(parsedMultiplier) || parsedMultiplier <= 0) {
+          console.warn(`[SettingsStore] Invalid fileManagerRowSizeMultiplier loaded ('${settings.value.fileManagerRowSizeMultiplier}'), resetting to default.`);
+          settings.value.fileManagerRowSizeMultiplier = defaultFileManagerRowMultiplier;
+      }
+      console.log(`[SettingsStore] Final fileManagerRowSizeMultiplier value in store: '${settings.value.fileManagerRowSizeMultiplier}'`);
+
+      // Column Widths
+      let loadedFmWidths: Record<string, number> = {};
+      console.log(`[SettingsStore] Raw fileManagerColWidths from backend: '${settings.value.fileManagerColWidths}'`);
+      try {
+          if (settings.value.fileManagerColWidths) {
+              loadedFmWidths = JSON.parse(settings.value.fileManagerColWidths);
+              console.log(`[SettingsStore] Successfully parsed fileManagerColWidths JSON: ${JSON.stringify(loadedFmWidths)}`);
+              if (typeof loadedFmWidths !== 'object' || loadedFmWidths === null) {
+                  console.warn('[SettingsStore] Invalid fileManagerColWidths format loaded, resetting.');
+                  loadedFmWidths = {};
+              }
+              // Validate that values are numbers
+              for (const key in loadedFmWidths) {
+                  if (typeof loadedFmWidths[key] !== 'number') {
+                      console.warn(`[SettingsStore] Invalid non-numeric value found in fileManagerColWidths for key '${key}', resetting.`);
+                      loadedFmWidths = {};
+                      break;
+                  }
+              }
+          }
+      } catch (e) {
+          console.error('[SettingsStore] Failed to parse fileManagerColWidths, resetting.', e);
+          loadedFmWidths = {};
+      }
+      // Ensure defaults for all known columns, merging with loaded valid ones
+      const finalFmWidths: Record<string, number> = { ...defaultFileManagerColWidths };
+      console.log(`[SettingsStore] Default FM Col Widths: ${JSON.stringify(defaultFileManagerColWidths)}`);
+      Object.keys(defaultFileManagerColWidths).forEach(key => {
+          if (loadedFmWidths[key] !== undefined && loadedFmWidths[key] > 0) { // Use loaded if valid
+              finalFmWidths[key] = loadedFmWidths[key];
+          }
+      });
+      parsedFileManagerColWidths.value = finalFmWidths;
+      console.log(`[SettingsStore] Final parsedFileManagerColWidths value in store: ${JSON.stringify(parsedFileManagerColWidths.value)}`);
+      // Save back if defaults were added or structure changed (optional, might cause extra write)
+      // const currentSavedFmWidthsString = settings.value.fileManagerColWidths;
+      // const finalFmWidthsString = JSON.stringify(finalFmWidths);
+      // if (currentSavedFmWidthsString !== finalFmWidthsString) {
+      //     await updateSetting('fileManagerColWidths', finalFmWidthsString);
+      // }
+
       // --- 语言设置 ---
       const langFromSettings = settings.value.language;
       console.log(`[SettingsStore] Language from fetched settings: ${langFromSettings}`); // <-- 添加日志
@@ -166,7 +228,9 @@ export const useSettingsStore = defineStore('settings', () => {
         'autoCopyOnSelect', 'dockerStatusIntervalSeconds', 'dockerDefaultExpand',
         'statusMonitorIntervalSeconds', // +++ 添加状态监控间隔键 +++
         'workspaceSidebarPersistent', // +++ 添加侧边栏固定键 +++
-        'sidebarPaneWidths' // +++ 添加侧边栏宽度对象键 +++
+        'sidebarPaneWidths', // +++ 添加侧边栏宽度对象键 +++
+        'fileManagerRowSizeMultiplier', // +++ 添加文件管理器行大小键 +++
+        'fileManagerColWidths' // +++ 添加文件管理器列宽键 +++
     ];
     if (!allowedKeys.includes(key)) {
         console.error(`[SettingsStore] 尝试更新不允许的设置键: ${key}`);
@@ -202,7 +266,9 @@ export const useSettingsStore = defineStore('settings', () => {
         'autoCopyOnSelect', 'dockerStatusIntervalSeconds', 'dockerDefaultExpand',
         'statusMonitorIntervalSeconds', // +++ 添加状态监控间隔键 +++
         'workspaceSidebarPersistent', // +++ 添加侧边栏固定键 +++
-        'sidebarPaneWidths' // +++ 添加侧边栏宽度对象键 +++
+        'sidebarPaneWidths', // +++ 添加侧边栏宽度对象键 +++
+        'fileManagerRowSizeMultiplier', // +++ 添加文件管理器行大小键 +++
+        'fileManagerColWidths' // +++ 添加文件管理器列宽键 +++
     ];
     const filteredUpdates: Partial<SettingsState> = {};
     let languageUpdate: 'en' | 'zh' | undefined = undefined;
@@ -257,6 +323,33 @@ export const useSettingsStore = defineStore('settings', () => {
     }
   }
 
+  /**
+   * Updates the File Manager layout settings (row size multiplier and column widths).
+   * @param multiplier The new row size multiplier (number).
+   * @param widths The new column widths object (Record<string, number>).
+   */
+  async function updateFileManagerLayoutSettings(multiplier: number, widths: Record<string, number>) {
+    const multiplierString = multiplier.toFixed(2); // Store with 2 decimal places
+    const widthsString = JSON.stringify(widths);
+
+    // Update local parsed state immediately for responsiveness
+    parsedFileManagerColWidths.value = widths;
+    // The multiplier is handled directly by the component, but update the setting value
+    settings.value.fileManagerRowSizeMultiplier = multiplierString;
+    settings.value.fileManagerColWidths = widthsString;
+
+    try {
+      console.log(`[SettingsStore] Saving FM layout: multiplier=${multiplierString}, widths=${widthsString}`);
+      await updateMultipleSettings({
+        fileManagerRowSizeMultiplier: multiplierString,
+        fileManagerColWidths: widthsString,
+      });
+    } catch (error) {
+      console.error('[SettingsStore] Failed to save file manager layout settings:', error);
+      // Optionally revert local state or show error to user
+    }
+  }
+
   // 移除外观相关 actions: saveCustomThemes, resetCustomThemes, toggleStyleCustomizer
 
   // --- Getters ---
@@ -306,6 +399,18 @@ export const useSettingsStore = defineStore('settings', () => {
       return isNaN(val) || val <= 0 ? 3 : val; // Fallback to 3 if invalid
   });
 
+  // NEW: Getter for File Manager row size multiplier, returning number
+  const fileManagerRowSizeMultiplierNumber = computed(() => {
+      const val = parseFloat(settings.value.fileManagerRowSizeMultiplier || '1.0');
+      return isNaN(val) || val <= 0 ? 1.0 : val; // Fallback to 1.0 if invalid
+  });
+
+  // NEW: Getter for File Manager column widths, returning object
+  const fileManagerColWidthsObject = computed(() => {
+      // Return the reactive ref directly, which is updated during load and save
+      return parsedFileManagerColWidths.value;
+  });
+
   return {
     settings, // 只包含通用设置
     isLoading,
@@ -319,10 +424,13 @@ export const useSettingsStore = defineStore('settings', () => {
     statusMonitorIntervalSecondsNumber, // +++ 暴露状态监控间隔 getter +++
     workspaceSidebarPersistentBoolean, // +++ 暴露侧边栏固定 getter +++
     getSidebarPaneWidth, // +++ 暴露获取特定面板宽度的 getter +++
+    fileManagerRowSizeMultiplierNumber, // +++ 暴露文件管理器行大小 getter +++
+    fileManagerColWidthsObject, // +++ 暴露文件管理器列宽 getter +++
     // 移除外观相关的 getters 和 actions
     loadInitialSettings,
     updateSetting,
     updateMultipleSettings,
     updateSidebarPaneWidth, // +++ 暴露更新特定面板宽度的 action +++
+    updateFileManagerLayoutSettings, // +++ 暴露更新文件管理器布局的 action +++
   };
 });