refactor：优化settings代码结构

packages/frontend/src/composables/settings/useAboutSection.ts

@@ -0,0 +1,78 @@
+import { ref, computed, onMounted } from 'vue';
+import axios from 'axios';
+import pkg from '../../../package.json'; // 路径相对于当前文件
+import { useI18n } from 'vue-i18n';
+
+export function useAboutSection() {
+  const { t } = useI18n();
+  const appVersion = ref(pkg.version);
+
+  // --- Version Check State ---
+  const latestVersion = ref<string | null>(null);
+  const isCheckingVersion = ref(false);
+  const versionCheckError = ref<string | null>(null);
+
+  const isUpdateAvailable = computed(() => {
+    // 简单的字符串比较，假设 tag 格式为 vX.Y.Z 或 X.Y.Z
+    // 后端返回的 tag_name 可能包含 'v' 前缀，也可能不包含
+    // appVersion.value 通常不包含 'v'
+    if (!latestVersion.value) return false;
+
+    const cleanLatestVersion = latestVersion.value.startsWith('v')
+      ? latestVersion.value.substring(1)
+      : latestVersion.value;
+    const cleanAppVersion = appVersion.value.startsWith('v')
+      ? appVersion.value.substring(1)
+      : appVersion.value;
+
+    // 进行版本比较，更健壮的比较可能需要拆分版本号进行数字比较
+    // 此处简单比较字符串，对于 "1.0.10" > "1.0.9" 是有效的
+    // 但对于 "1.0.9" > "1.0.10" 可能会出错，如果需要更精确，可以引入 semver 库或手动比较
+    return cleanLatestVersion !== cleanAppVersion && cleanLatestVersion > cleanAppVersion;
+  });
+
+
+  const checkLatestVersion = async () => {
+    isCheckingVersion.value = true;
+    versionCheckError.value = null;
+    latestVersion.value = null; // Reset before check
+    try {
+      const response = await axios.get('https://api.github.com/repos/Heavrnl/nexus-terminal/releases/latest', {
+        // 移除 headers 以尝试解决潜在的CORS或请求问题，GitHub API 通常不需要特定 headers 进行公共读取
+      });
+      if (response.data && response.data.tag_name) {
+        latestVersion.value = response.data.tag_name;
+      } else {
+        throw new Error('Invalid API response format');
+      }
+    } catch (error: any) {
+      console.error('检查最新版本失败:', error);
+      if (axios.isAxiosError(error)) {
+        if (error.response?.status === 404) {
+          versionCheckError.value = t('settings.about.error.noReleases', '没有找到发布版本。');
+        } else if (error.response?.status === 403) {
+          versionCheckError.value = t('settings.about.error.rateLimit', 'API 访问频率受限，请稍后再试。');
+        } else {
+          versionCheckError.value = t('settings.about.error.checkFailed', '检查更新失败，请检查网络连接或稍后再试。');
+        }
+      } else {
+        versionCheckError.value = t('settings.about.error.checkFailed', '检查更新失败，请检查网络连接或稍后再试。');
+      }
+    } finally {
+      isCheckingVersion.value = false;
+    }
+  };
+
+  onMounted(() => {
+    checkLatestVersion();
+  });
+
+  return {
+    appVersion,
+    latestVersion,
+    isCheckingVersion,
+    versionCheckError,
+    isUpdateAvailable,
+    checkLatestVersion, // Expose if manual refresh is needed
+  };
+}

packages/frontend/src/composables/settings/useAppearanceSettings.ts

@@ -0,0 +1,18 @@
+import { useAppearanceStore } from '../../stores/appearance.store';
+// import { useI18n } from 'vue-i18n'; // t function might be needed if there were messages
+
+export function useAppearanceSettings() {
+  const appearanceStore = useAppearanceStore();
+  // const { t } = useI18n(); // Not strictly needed for just opening a modal yet
+
+  const openStyleCustomizer = () => {
+    appearanceStore.toggleStyleCustomizer(true);
+  };
+
+  // No specific loading, message, or success states are typically needed for just opening a UI element.
+  // These would be managed within the StyleCustomizer component itself or its own composable if it gets complex.
+
+  return {
+    openStyleCustomizer,
+  };
+}

packages/frontend/src/composables/settings/useCaptchaSettings.ts

@@ -0,0 +1,171 @@
+import { ref, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useSettingsStore } from '../../stores/settings.store';
+import apiClient from '../../utils/apiClient';
+
+// Define necessary types locally if not shared, or import from a shared types file
+export type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'none';
+
+export interface UpdateCaptchaSettingsDto {
+    enabled?: boolean;
+    provider?: CaptchaProvider;
+    hcaptchaSiteKey?: string;
+    hcaptchaSecretKey?: string;
+    recaptchaSiteKey?: string;
+    recaptchaSecretKey?: string;
+}
+
+export function useCaptchaSettings() {
+    const settingsStore = useSettingsStore();
+    const { t } = useI18n();
+    const { captchaSettings } = storeToRefs(settingsStore);
+
+    const captchaForm = reactive<UpdateCaptchaSettingsDto>({
+        enabled: false,
+        provider: 'none',
+        hcaptchaSiteKey: '',
+        hcaptchaSecretKey: '',
+        recaptchaSiteKey: '',
+        recaptchaSecretKey: '',
+    });
+
+    const captchaLoading = ref(false);
+    const captchaMessage = ref('');
+    const captchaSuccess = ref(false);
+
+    watch(captchaSettings, (newCaptchaSettings) => {
+        if (newCaptchaSettings) {
+            captchaForm.enabled = newCaptchaSettings.enabled;
+            captchaForm.provider = newCaptchaSettings.provider;
+            captchaForm.hcaptchaSiteKey = newCaptchaSettings.hcaptchaSiteKey || '';
+            // Secret keys are not pre-filled from store for security; form will only send if user inputs a new one
+            captchaForm.hcaptchaSecretKey = ''; 
+            captchaForm.recaptchaSiteKey = newCaptchaSettings.recaptchaSiteKey || '';
+            captchaForm.recaptchaSecretKey = '';
+        } else {
+            // Reset form if settings are null (e.g., on error or initial load without data)
+            captchaForm.enabled = false;
+            captchaForm.provider = 'none';
+            captchaForm.hcaptchaSiteKey = '';
+            captchaForm.hcaptchaSecretKey = '';
+            captchaForm.recaptchaSiteKey = '';
+            captchaForm.recaptchaSecretKey = '';
+        }
+    }, { immediate: true, deep: true }); // deep: true might be useful if captchaSettings structure is complex
+
+    const handleUpdateCaptchaSettings = async () => {
+        captchaLoading.value = true;
+        captchaMessage.value = '';
+        captchaSuccess.value = false;
+        try {
+            let needsVerification = false;
+            let providerForVerification: CaptchaProvider | null = null;
+            let siteKeyForVerification: string | undefined = undefined;
+            let secretKeyForVerification: string | undefined = undefined;
+
+            // Step 1: Determine if verification is needed
+            if (captchaForm.enabled && captchaForm.provider && captchaForm.provider !== 'none') {
+                const originalSettings = captchaSettings.value; // Persisted settings from store
+
+                if (captchaForm.provider === 'hcaptcha') {
+                    const originalSiteKeyValue = originalSettings?.hcaptchaSiteKey || '';
+                    const currentSiteKeyValue = captchaForm.hcaptchaSiteKey || '';
+                    const currentSecretKeyValue = captchaForm.hcaptchaSecretKey || '';
+
+                    if (currentSiteKeyValue !== originalSiteKeyValue) {
+                        if (!currentSiteKeyValue || !currentSecretKeyValue) {
+                            throw new Error(t('settings.captcha.error.hcaptchaKeysRequired'));
+                        }
+                        needsVerification = true;
+                        providerForVerification = 'hcaptcha';
+                        siteKeyForVerification = currentSiteKeyValue;
+                        secretKeyForVerification = currentSecretKeyValue;
+                    } else if (currentSecretKeyValue) {
+                         if (!currentSiteKeyValue) {
+                            throw new Error(t('settings.captcha.error.hcaptchaKeysRequired'));
+                        }
+                        needsVerification = true;
+                        providerForVerification = 'hcaptcha';
+                        siteKeyForVerification = currentSiteKeyValue;
+                        secretKeyForVerification = currentSecretKeyValue;
+                    }
+                } else if (captchaForm.provider === 'recaptcha') {
+                    const originalSiteKeyValue = originalSettings?.recaptchaSiteKey || '';
+                    const currentSiteKeyValue = captchaForm.recaptchaSiteKey || '';
+                    const currentSecretKeyValue = captchaForm.recaptchaSecretKey || '';
+
+                    if (currentSiteKeyValue !== originalSiteKeyValue) {
+                        if (!currentSiteKeyValue || !currentSecretKeyValue) {
+                            throw new Error(t('settings.captcha.error.recaptchaKeysRequired'));
+                        }
+                        needsVerification = true;
+                        providerForVerification = 'recaptcha';
+                        siteKeyForVerification = currentSiteKeyValue;
+                        secretKeyForVerification = currentSecretKeyValue;
+                    } else if (currentSecretKeyValue) {
+                        if (!currentSiteKeyValue) {
+                            throw new Error(t('settings.captcha.error.recaptchaKeysRequired'));
+                        }
+                        needsVerification = true;
+                        providerForVerification = 'recaptcha';
+                        siteKeyForVerification = currentSiteKeyValue;
+                        secretKeyForVerification = currentSecretKeyValue;
+                    }
+                }
+            }
+
+            // Step 2: Perform verification if needed
+            if (needsVerification && providerForVerification && siteKeyForVerification && secretKeyForVerification) {
+                try {
+                    await apiClient.post('/settings/captcha/verify', {
+                        provider: providerForVerification,
+                        siteKey: siteKeyForVerification,
+                        secretKey: secretKeyForVerification,
+                    });
+                } catch (verifyError: any) {
+                    console.error('CAPTCHA verification failed:', verifyError);
+                    throw new Error(verifyError.response?.data?.message || verifyError.message || t('settings.captcha.error.verificationFailed'));
+                }
+            }
+
+            // Step 3: Prepare DTO for saving
+            const dtoToSave: UpdateCaptchaSettingsDto = {
+                enabled: captchaForm.enabled,
+                provider: captchaForm.provider,
+                hcaptchaSiteKey: captchaForm.hcaptchaSiteKey || undefined,
+                recaptchaSiteKey: captchaForm.recaptchaSiteKey || undefined,
+                hcaptchaSecretKey: captchaForm.hcaptchaSecretKey || undefined,
+                recaptchaSecretKey: captchaForm.recaptchaSecretKey || undefined,
+            };
+
+            // Step 4: Call save operation
+            await settingsStore.updateCaptchaSettings(dtoToSave);
+            captchaMessage.value = t('settings.captcha.success.saved');
+            captchaSuccess.value = true;
+            // Clear secret key fields from the form after successful save
+            captchaForm.hcaptchaSecretKey = '';
+            captchaForm.recaptchaSecretKey = '';
+
+        } catch (error: any) {
+            captchaMessage.value = error.message || t('settings.captcha.error.saveFailed');
+            captchaSuccess.value = false;
+        } finally {
+            captchaLoading.value = false;
+        }
+    };
+
+    // Load initial CAPTCHA settings when the composable is used
+    // settingsStore.loadCaptchaSettings(); // This is called in SettingsView onMounted, might be redundant here unless SettingsView stops calling it.
+                                        // For now, assume SettingsView still handles initial load on its onMounted.
+
+    return {
+        captchaForm,
+        captchaLoading,
+        captchaMessage,
+        captchaSuccess,
+        handleUpdateCaptchaSettings,
+        // Expose captchaSettings from store if needed by the template directly, though form uses captchaForm
+        // captchaSettingsStore: captchaSettings 
+    };
+}

packages/frontend/src/composables/settings/useChangePassword.ts

@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+import { useAuthStore } from '../../stores/auth.store';
+import { useI18n } from 'vue-i18n';
+
+export function useChangePassword() {
+  const authStore = useAuthStore();
+  const { t } = useI18n();
+
+  const currentPassword = ref('');
+  const newPassword = ref('');
+  const confirmPassword = ref('');
+  const changePasswordLoading = ref(false);
+  const changePasswordMessage = ref('');
+  const changePasswordSuccess = ref(false);
+
+  const handleChangePassword = async () => {
+    changePasswordMessage.value = '';
+    changePasswordSuccess.value = false;
+
+    if (newPassword.value !== confirmPassword.value) {
+      changePasswordMessage.value = t('settings.changePassword.error.passwordsDoNotMatch');
+      return;
+    }
+
+    if (!currentPassword.value || !newPassword.value) {
+      changePasswordMessage.value = t('settings.changePassword.error.fieldsRequired'); // 您可能需要添加此翻译
+      return;
+    }
+
+    changePasswordLoading.value = true;
+    try {
+      await authStore.changePassword(currentPassword.value, newPassword.value);
+      changePasswordMessage.value = t('settings.changePassword.success');
+      changePasswordSuccess.value = true;
+      currentPassword.value = '';
+      newPassword.value = '';
+      confirmPassword.value = '';
+    } catch (error: any) {
+      console.error('修改密码失败:', error);
+      changePasswordMessage.value = error.message || t('settings.changePassword.error.generic');
+      changePasswordSuccess.value = false;
+    } finally {
+      changePasswordLoading.value = false;
+    }
+  };
+
+  return {
+    currentPassword,
+    newPassword,
+    confirmPassword,
+    changePasswordLoading,
+    changePasswordMessage,
+    changePasswordSuccess,
+    handleChangePassword,
+  };
+}

packages/frontend/src/composables/settings/useDataManagement.ts

@@ -0,0 +1,75 @@
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import apiClient from '../../utils/apiClient';
+import { isAxiosError } from 'axios';
+
+export function useDataManagement() {
+  const { t } = useI18n();
+
+  // --- Export Connections State & Method ---
+  const exportConnectionsLoading = ref(false);
+  const exportConnectionsMessage = ref('');
+  const exportConnectionsSuccess = ref(false);
+
+  const handleExportConnections = async () => {
+    exportConnectionsLoading.value = true;
+    exportConnectionsMessage.value = '';
+    exportConnectionsSuccess.value = false;
+    try {
+      const response = await apiClient.get('/settings/export-connections', {
+        responseType: 'blob',
+      });
+
+      let filename = 'nexus_connections_export.zip';
+      const disposition = response.headers['content-disposition'];
+      if (disposition && disposition.includes('attachment')) {
+        const filenameRegex = /filename[^;=\n]*=(?:(?:["'])(?<quoted>.*?)\1|(?<unquoted>[^;\n]*))/;
+        const matches = filenameRegex.exec(disposition);
+        if (matches?.groups?.quoted || matches?.groups?.unquoted) {
+          filename = matches.groups.quoted || matches.groups.unquoted;
+        }
+      }
+
+      const blob = new Blob([response.data], { type: response.headers['content-type'] || 'application/zip' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', filename);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+
+      exportConnectionsMessage.value = t('settings.exportConnections.success', '导出成功。文件已开始下载。');
+      exportConnectionsSuccess.value = true;
+    } catch (error: any) {
+      console.error('导出连接失败:', error);
+      let message = t('settings.exportConnections.error', '导出连接时发生错误。');
+      if (isAxiosError(error) && error.response && error.response.data) {
+        if (error.response.data instanceof Blob && error.response.data.type === 'application/json') {
+          try {
+            const errorJson = JSON.parse(await error.response.data.text());
+            message = errorJson.message || message;
+          } catch (e) { /* Blob not valid JSON */ }
+        } else if (typeof error.response.data === 'string' && error.response.data.length < 200) { // Avoid overly long string errors
+          message = error.response.data;
+        } else if (error.response.data && typeof error.response.data.message === 'string') {
+          message = error.response.data.message;
+        }
+      } else if (error.message) {
+        message = error.message;
+      }
+      exportConnectionsMessage.value = message;
+      exportConnectionsSuccess.value = false;
+    } finally {
+      exportConnectionsLoading.value = false;
+    }
+  };
+
+  return {
+    exportConnectionsLoading,
+    exportConnectionsMessage,
+    exportConnectionsSuccess,
+    handleExportConnections,
+  };
+}

packages/frontend/src/composables/settings/useExportConnections.ts

@@ -0,0 +1,74 @@
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import apiClient from '../../utils/apiClient';
+import { isAxiosError } from 'axios';
+
+export function useExportConnections() {
+  const { t } = useI18n();
+
+  const exportConnectionsLoading = ref(false);
+  const exportConnectionsMessage = ref('');
+  const exportConnectionsSuccess = ref(false);
+
+  const handleExportConnections = async () => {
+    exportConnectionsLoading.value = true;
+    exportConnectionsMessage.value = '';
+    exportConnectionsSuccess.value = false;
+    try {
+      const response = await apiClient.get('/settings/export-connections', {
+        responseType: 'blob',
+      });
+
+      let filename = 'nexus_connections_export.zip';
+      const disposition = response.headers['content-disposition'];
+      if (disposition && disposition.includes('attachment')) {
+        const filenameRegex = /filename[^;=\n]*=(?:(['"])(.*?)\1|([^;\n]*))/;
+        const matches = filenameRegex.exec(disposition);
+        if (matches != null && (matches[2] || matches[3])) {
+          filename = matches[2] || matches[3];
+        }
+      }
+
+      const blob = new Blob([response.data], { type: response.headers['content-type'] || 'application/zip' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', filename);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+
+      exportConnectionsMessage.value = t('settings.exportConnections.success', '导出成功。文件已开始下载。');
+      exportConnectionsSuccess.value = true;
+    } catch (error: any) {
+      console.error('导出连接失败:', error);
+      let message = t('settings.exportConnections.error', '导出连接时发生错误。');
+      if (isAxiosError(error) && error.response && error.response.data) {
+          if (error.response.data instanceof Blob && error.response.data.type === 'application/json') {
+              try {
+                  const errorJson = JSON.parse(await error.response.data.text());
+                  message = errorJson.message || message;
+              } catch (e) { /* Blob not valid JSON */ }
+          } else if (typeof error.response.data === 'string') {
+              message = error.response.data;
+          } else if (error.response.data && typeof error.response.data.message === 'string') {
+              message = error.response.data.message;
+          }
+      } else if (error.message) {
+          message = error.message;
+      }
+      exportConnectionsMessage.value = message;
+      exportConnectionsSuccess.value = false;
+    } finally {
+      exportConnectionsLoading.value = false;
+    }
+  };
+
+  return {
+    exportConnectionsLoading,
+    exportConnectionsMessage,
+    exportConnectionsSuccess,
+    handleExportConnections,
+  };
+}

packages/frontend/src/composables/settings/useIpBlacklist.ts

@@ -0,0 +1,158 @@
+import { ref, reactive, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useSettingsStore } from '../../stores/settings.store';
+import { useAuthStore } from '../../stores/auth.store';
+
+export function useIpBlacklist() {
+    const settingsStore = useSettingsStore();
+    const authStore = useAuthStore();
+    const { t } = useI18n();
+    const { settings, ipBlacklistEnabledBoolean } = storeToRefs(settingsStore);
+
+    // --- IP Blacklist Enabled State & Method ---
+    const ipBlacklistEnabled = ref(true); // Local state for the switch
+
+    watch(ipBlacklistEnabledBoolean, (newVal) => {
+        ipBlacklistEnabled.value = newVal;
+    }, { immediate: true });
+
+    const handleUpdateIpBlacklistEnabled = async () => {
+        const originalValue = ipBlacklistEnabled.value;
+        // Toggle local state immediately for UI feedback if it's directly bound to the switch
+        // If the switch v-model is ipBlacklistEnabled, this line is not strictly needed before API call,
+        // but helps if we want to manage the state change explicitly.
+        // ipBlacklistEnabled.value = !ipBlacklistEnabled.value; // This line might be redundant if v-model handles it
+
+        try {
+            // The value to save is the new state of the switch
+            const valueToSave = ipBlacklistEnabled.value; // This should reflect the intended new state
+            await settingsStore.updateSetting('ipBlacklistEnabled', valueToSave ? 'true' : 'false');
+            // Success: ipBlacklistEnabledBoolean will update via store watcher, syncing ipBlacklistEnabled.value
+        } catch (error: any) {
+            console.error('更新 IP 黑名单启用状态失败:', error);
+            ipBlacklistEnabled.value = originalValue; // Revert on failure
+            // Optionally, show an error message to the user
+        }
+    };
+
+
+    // --- IP Blacklist Configuration Form State & Method ---
+    const blacklistSettingsForm = reactive({
+        maxLoginAttempts: '5',
+        loginBanDuration: '300',
+    });
+    const blacklistSettingsLoading = ref(false);
+    const blacklistSettingsMessage = ref('');
+    const blacklistSettingsSuccess = ref(false);
+
+    watch(settings, (newSettings) => {
+        blacklistSettingsForm.maxLoginAttempts = newSettings.maxLoginAttempts || '5';
+        blacklistSettingsForm.loginBanDuration = newSettings.loginBanDuration || '300';
+    }, { deep: true, immediate: true });
+
+    const handleUpdateBlacklistSettings = async () => {
+        blacklistSettingsLoading.value = true;
+        blacklistSettingsMessage.value = '';
+        blacklistSettingsSuccess.value = false;
+        try {
+            const maxAttempts = parseInt(blacklistSettingsForm.maxLoginAttempts, 10);
+            const banDuration = parseInt(blacklistSettingsForm.loginBanDuration, 10);
+            if (isNaN(maxAttempts) || maxAttempts <= 0) {
+                throw new Error(t('settings.ipBlacklist.error.invalidMaxAttempts'));
+            }
+            if (isNaN(banDuration) || banDuration <= 0) {
+                throw new Error(t('settings.ipBlacklist.error.invalidBanDuration'));
+            }
+            await settingsStore.updateMultipleSettings({
+                maxLoginAttempts: blacklistSettingsForm.maxLoginAttempts,
+                loginBanDuration: blacklistSettingsForm.loginBanDuration,
+            });
+            blacklistSettingsMessage.value = t('settings.ipBlacklist.success.configUpdated');
+            blacklistSettingsSuccess.value = true;
+        } catch (error: any) {
+            console.error('更新黑名单配置失败:', error);
+            blacklistSettingsMessage.value = error.message || t('settings.ipBlacklist.error.updateConfigFailed');
+            blacklistSettingsSuccess.value = false;
+        } finally {
+            blacklistSettingsLoading.value = false;
+        }
+    };
+
+    // --- IP Blacklist Table State & Methods ---
+    const ipBlacklist = reactive({
+        entries: [] as any[],
+        total: 0,
+        loading: false,
+        error: null as string | null,
+        currentPage: 1,
+        limit: 10,
+    });
+    const blacklistToDeleteIp = ref<string | null>(null);
+    const blacklistDeleteLoading = ref(false);
+    const blacklistDeleteError = ref<string | null>(null);
+
+    const fetchIpBlacklist = async (page = 1) => {
+        ipBlacklist.loading = true;
+        ipBlacklist.error = null;
+        const offset = (page - 1) * ipBlacklist.limit;
+        try {
+            const data = await authStore.fetchIpBlacklist(ipBlacklist.limit, offset);
+            ipBlacklist.entries = data.entries;
+            ipBlacklist.total = data.total;
+            ipBlacklist.currentPage = page;
+        } catch (error: any) {
+            ipBlacklist.error = error.message || t('settings.ipBlacklist.error.fetchFailed');
+        } finally {
+            ipBlacklist.loading = false;
+        }
+    };
+
+    const handleDeleteIp = async (ip: string) => {
+        blacklistToDeleteIp.value = ip;
+        if (confirm(t('settings.ipBlacklist.confirmRemoveIp', { ip }))) {
+            blacklistDeleteLoading.value = true;
+            blacklistDeleteError.value = null;
+            try {
+                await authStore.deleteIpFromBlacklist(ip);
+                await fetchIpBlacklist(ipBlacklist.currentPage); // Refresh list
+            } catch (error: any) {
+                blacklistDeleteError.value = error.message || t('settings.ipBlacklist.error.deleteFailed');
+            } finally {
+                blacklistDeleteLoading.value = false;
+                blacklistToDeleteIp.value = null;
+            }
+        } else {
+            blacklistToDeleteIp.value = null;
+        }
+    };
+
+    onMounted(() => {
+        if (ipBlacklistEnabled.value) { // Only fetch if enabled, or always fetch and let template hide
+             fetchIpBlacklist();
+        }
+    });
+    
+    watch(ipBlacklistEnabled, (newValue) => {
+        if (newValue && ipBlacklist.entries.length === 0 && !ipBlacklist.loading) {
+            fetchIpBlacklist();
+        }
+    });
+
+
+    return {
+        ipBlacklistEnabled,
+        handleUpdateIpBlacklistEnabled,
+        blacklistSettingsForm,
+        blacklistSettingsLoading,
+        blacklistSettingsMessage,
+        blacklistSettingsSuccess,
+        handleUpdateBlacklistSettings,
+        ipBlacklist,
+        blacklistToDeleteIp,
+        blacklistDeleteLoading,
+        blacklistDeleteError,
+        fetchIpBlacklist, // Expose if pagination is handled in the template
+        handleDeleteIp,
+    };
+}

packages/frontend/src/composables/settings/useIpWhitelist.ts

@@ -0,0 +1,44 @@
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useSettingsStore } from '../../stores/settings.store';
+
+export function useIpWhitelist() {
+    const settingsStore = useSettingsStore();
+    const { t } = useI18n();
+    const { settings } = storeToRefs(settingsStore);
+
+    const ipWhitelistInput = ref('');
+    const ipWhitelistLoading = ref(false);
+    const ipWhitelistMessage = ref('');
+    const ipWhitelistSuccess = ref(false);
+
+    watch(() => settings.value.ipWhitelist, (newVal) => {
+        ipWhitelistInput.value = newVal || '';
+    }, { immediate: true });
+
+    const handleUpdateIpWhitelist = async () => {
+        ipWhitelistLoading.value = true;
+        ipWhitelistMessage.value = '';
+        ipWhitelistSuccess.value = false;
+        try {
+            await settingsStore.updateSetting('ipWhitelist', ipWhitelistInput.value.trim());
+            ipWhitelistMessage.value = t('settings.ipWhitelist.success.saved');
+            ipWhitelistSuccess.value = true;
+        } catch (error: any) {
+            console.error('更新 IP 白名单失败:', error);
+            ipWhitelistMessage.value = error.message || t('settings.ipWhitelist.error.saveFailed');
+            ipWhitelistSuccess.value = false;
+        } finally {
+            ipWhitelistLoading.value = false;
+        }
+    };
+
+    return {
+        ipWhitelistInput,
+        ipWhitelistLoading,
+        ipWhitelistMessage,
+        ipWhitelistSuccess,
+        handleUpdateIpWhitelist,
+    };
+}

packages/frontend/src/composables/settings/usePasskeyManagement.ts

@@ -0,0 +1,157 @@
+import { ref, reactive, computed } from 'vue';
+import { useAuthStore } from '../../stores/auth.store';
+import { useI18n } from 'vue-i18n';
+import { startRegistration } from '@simplewebauthn/browser';
+import { storeToRefs } from 'pinia';
+
+export function usePasskeyManagement() {
+  const authStore = useAuthStore();
+  const { t } = useI18n();
+  const { user, passkeys, passkeysLoading } = storeToRefs(authStore);
+
+  // --- Passkey State ---
+  const passkeyRegistrationLoading = ref(false); // Renamed for clarity
+  const passkeyMessage = ref('');
+  const passkeySuccess = ref(false);
+  const passkeyDeleteLoadingStates = reactive<Record<string, boolean>>({});
+  const passkeyDeleteError = ref<string | null>(null);
+
+  // State for editing passkey name
+  const editingPasskeyId = ref<string | null>(null);
+  const editingPasskeyName = ref('');
+  const passkeyEditLoadingStates = reactive<Record<string, boolean>>({});
+
+  const handleRegisterNewPasskey = async () => {
+    passkeyRegistrationLoading.value = true;
+    passkeyMessage.value = '';
+    passkeySuccess.value = false;
+
+    const username = user.value?.username;
+    if (!username) {
+      passkeyMessage.value = t('settings.passkey.error.userNotLoggedIn');
+      passkeyRegistrationLoading.value = false;
+      return;
+    }
+
+    try {
+      const registrationOptions = await authStore.getPasskeyRegistrationOptions(username);
+      const registrationResult = await startRegistration(registrationOptions);
+      await authStore.registerPasskey(username, registrationResult);
+
+      passkeyMessage.value = t('settings.passkey.success.registered');
+      passkeySuccess.value = true;
+      await authStore.fetchPasskeys();
+    } catch (error: any) {
+      console.error('Passkey 注册失败:', error);
+      if (error.name === 'InvalidStateError' || error.message.includes('cancelled') || error.message.includes('excludeCredentials')) {
+        passkeyMessage.value = t('settings.passkey.error.registrationCancelledOrExists'); // 您可能需要添加或修改此翻译
+      } else {
+        passkeyMessage.value = error.response?.data?.message || error.message || t('settings.passkey.error.registrationFailed');
+      }
+      passkeySuccess.value = false;
+    } finally {
+      passkeyRegistrationLoading.value = false;
+    }
+  };
+
+  const startEditPasskeyName = (credentialID: string, currentName: string) => {
+    editingPasskeyId.value = credentialID;
+    editingPasskeyName.value = currentName || ''; // Ensure it's a string
+    passkeyMessage.value = '';
+    passkeySuccess.value = false;
+  };
+
+  const cancelEditPasskeyName = () => {
+    editingPasskeyId.value = null;
+    editingPasskeyName.value = '';
+  };
+
+  const savePasskeyName = async (credentialID: string) => {
+    if (!editingPasskeyName.value.trim()) {
+      passkeyMessage.value = t('settings.passkey.error.nameRequired', 'Passkey 名称不能为空。');
+      passkeySuccess.value = false;
+      return;
+    }
+    passkeyEditLoadingStates[credentialID] = true;
+    passkeyMessage.value = '';
+    passkeySuccess.value = false;
+    try {
+      await authStore.updatePasskeyName(credentialID, editingPasskeyName.value.trim());
+      passkeyMessage.value = t('settings.passkey.success.nameUpdated');
+      passkeySuccess.value = true;
+      await authStore.fetchPasskeys();
+      cancelEditPasskeyName();
+    } catch (error: any) {
+      console.error(`更新 Passkey ${credentialID} 名称失败:`, error);
+      passkeyMessage.value = error.response?.data?.message || error.message || t('settings.passkey.error.nameUpdateFailed', '更新 Passkey 名称失败。');
+      passkeySuccess.value = false;
+    } finally {
+      passkeyEditLoadingStates[credentialID] = false;
+    }
+  };
+
+  const handleDeletePasskey = async (credentialID: string) => {
+    if (editingPasskeyId.value === credentialID) {
+      cancelEditPasskeyName();
+    }
+    if (!credentialID || typeof credentialID !== 'string') {
+      console.error('Attempted to delete a passkey with an invalid or undefined credentialID:', credentialID);
+      passkeyDeleteError.value = t('settings.passkey.error.deleteFailedInvalidId', '删除失败：无效的凭证 ID。');
+      return;
+    }
+    // It's better to handle confirmation in the component itself if needed, or pass a confirm function
+    // For now, assuming confirmation is handled or not strictly needed in the composable.
+    // if (!confirm(t('settings.passkey.confirmDelete'))) return;
+
+    passkeyDeleteLoadingStates[credentialID] = true;
+    passkeyDeleteError.value = null;
+    passkeyMessage.value = '';
+    try {
+      await authStore.deletePasskey(credentialID);
+      passkeyMessage.value = t('settings.passkey.success.deleted');
+      passkeySuccess.value = true;
+      // authStore.fetchPasskeys() is usually called within deletePasskey in the store
+    } catch (error: any) {
+      console.error(`删除 Passkey ${credentialID} 失败:`, error);
+      passkeyDeleteError.value = error.response?.data?.message || error.message || t('settings.passkey.error.deleteFailedGeneral');
+      passkeySuccess.value = false;
+    } finally {
+      passkeyDeleteLoadingStates[credentialID] = false;
+    }
+  };
+
+  const formatDate = (dateInput: string | number | Date | undefined): string => {
+    if (!dateInput) return t('statusMonitor.notAvailable', 'N/A');
+    try {
+      const date = new Date(typeof dateInput === 'number' ? dateInput * 1000 : dateInput);
+      return !isNaN(date.getTime()) ? date.toLocaleString() : t('statusMonitor.notAvailable', 'N/A');
+    } catch (e) {
+      console.error("Error formatting date:", e);
+      return t('statusMonitor.notAvailable', 'N/A');
+    }
+  };
+
+  // Fetch passkeys on composable initialization if user is authenticated
+  if (authStore.isAuthenticated) {
+    authStore.fetchPasskeys();
+  }
+
+  return {
+    passkeys, // from store
+    passkeysLoading, // from store
+    passkeyRegistrationLoading,
+    passkeyMessage,
+    passkeySuccess,
+    passkeyDeleteLoadingStates,
+    passkeyDeleteError,
+    editingPasskeyId,
+    editingPasskeyName,
+    passkeyEditLoadingStates,
+    handleRegisterNewPasskey,
+    startEditPasskeyName,
+    cancelEditPasskeyName,
+    savePasskeyName,
+    handleDeletePasskey,
+    formatDate,
+  };
+}

packages/frontend/src/composables/settings/useSystemSettings.ts

@@ -0,0 +1,200 @@
+import { ref, watch } from 'vue';
+import { useSettingsStore } from '../../stores/settings.store';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { availableLocales } from '../../i18n'; // 导入可用语言列表
+
+export function useSystemSettings() {
+  const settingsStore = useSettingsStore();
+  const { t } = useI18n();
+  const {
+    settings,
+    language: storeLanguage,
+    statusMonitorIntervalSecondsNumber,
+    dockerDefaultExpandBoolean, // Assuming this comes from settings store
+  } = storeToRefs(settingsStore);
+
+  // --- Language ---
+  const selectedLanguage = ref<string>(storeLanguage.value);
+  const languageLoading = ref(false);
+  const languageMessage = ref('');
+  const languageSuccess = ref(false);
+  const languageNames: Record<string, string> = {
+    'en-US': 'English',
+    'zh-CN': '中文',
+    'ja-JP': '日本語',
+  };
+
+  const handleUpdateLanguage = async () => {
+    languageLoading.value = true;
+    languageMessage.value = '';
+    languageSuccess.value = false;
+    try {
+      await settingsStore.updateSetting('language', selectedLanguage.value);
+      languageMessage.value = t('settings.language.success.saved');
+      languageSuccess.value = true;
+      // The language change will be reflected globally by the i18n instance
+      // when settingsStore.language updates.
+    } catch (error: any) {
+      console.error('更新语言设置失败:', error);
+      languageMessage.value = error.message || t('settings.language.error.saveFailed');
+      languageSuccess.value = false;
+    } finally {
+      languageLoading.value = false;
+    }
+  };
+
+  // --- Timezone ---
+  const selectedTimezone = ref('UTC');
+  const timezoneLoading = ref(false);
+  const timezoneMessage = ref('');
+  const timezoneSuccess = ref(false);
+  const commonTimezones = ref([
+    'UTC',
+    'Etc/GMT+12', 'Pacific/Midway', 'Pacific/Honolulu', 'America/Anchorage',
+    'America/Los_Angeles', 'America/Denver', 'America/Chicago', 'America/New_York',
+    'America/Caracas', 'America/Halifax', 'America/Sao_Paulo', 'Atlantic/Azores',
+    'Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Moscow',
+    'Asia/Dubai', 'Asia/Karachi', 'Asia/Dhaka', 'Asia/Bangkok',
+    'Asia/Shanghai', 'Asia/Tokyo', 'Australia/Sydney', 'Pacific/Auckland',
+    'Etc/GMT-14'
+  ]);
+
+  const handleUpdateTimezone = async () => {
+    timezoneLoading.value = true;
+    timezoneMessage.value = '';
+    timezoneSuccess.value = false;
+    try {
+      await settingsStore.updateSetting('timezone', selectedTimezone.value);
+      timezoneMessage.value = t('settings.timezone.success.saved');
+      timezoneSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新时区设置失败:', error);
+      timezoneMessage.value = error.message || t('settings.timezone.error.saveFailed');
+      timezoneSuccess.value = false;
+    } finally {
+      timezoneLoading.value = false;
+    }
+  };
+
+  // --- Status Monitor ---
+  const statusMonitorIntervalLocal = ref(3);
+  const statusMonitorLoading = ref(false);
+  const statusMonitorMessage = ref('');
+  const statusMonitorSuccess = ref(false);
+
+  const handleUpdateStatusMonitorInterval = async () => {
+    statusMonitorLoading.value = true;
+    statusMonitorMessage.value = '';
+    statusMonitorSuccess.value = false;
+    try {
+      const intervalValue = statusMonitorIntervalLocal.value;
+      if (isNaN(intervalValue) || intervalValue < 1 || !Number.isInteger(intervalValue)) {
+        throw new Error(t('settings.statusMonitor.error.invalidInterval'));
+      }
+      await settingsStore.updateSetting('statusMonitorIntervalSeconds', String(intervalValue));
+      statusMonitorMessage.value = t('settings.statusMonitor.success.saved');
+      statusMonitorSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新状态监控间隔失败:', error);
+      statusMonitorMessage.value = error.message || t('settings.statusMonitor.error.saveFailed');
+      statusMonitorSuccess.value = false;
+    } finally {
+      statusMonitorLoading.value = false;
+    }
+  };
+
+  // --- Docker Settings ---
+  const dockerInterval = ref(2);
+  const dockerExpandDefault = ref(false);
+  const dockerSettingsLoading = ref(false);
+  const dockerSettingsMessage = ref('');
+  const dockerSettingsSuccess = ref(false);
+
+  const handleUpdateDockerSettings = async () => {
+    dockerSettingsLoading.value = true;
+    dockerSettingsMessage.value = '';
+    dockerSettingsSuccess.value = false;
+    try {
+      const intervalValue = dockerInterval.value;
+      if (isNaN(intervalValue) || intervalValue < 1) {
+        throw new Error(t('settings.docker.error.invalidInterval'));
+      }
+      await settingsStore.updateMultipleSettings({
+        dockerStatusIntervalSeconds: String(intervalValue),
+        dockerDefaultExpand: dockerExpandDefault.value ? 'true' : 'false'
+      });
+      dockerSettingsMessage.value = t('settings.docker.success.saved');
+      dockerSettingsSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新 Docker 设置失败:', error);
+      dockerSettingsMessage.value = error.message || t('settings.docker.error.saveFailed');
+      dockerSettingsSuccess.value = false;
+    } finally {
+      dockerSettingsLoading.value = false;
+    }
+  };
+
+  // Watch for changes in settings from the store and update local refs
+  watch(settings, (newSettings) => {
+    if (newSettings) {
+      selectedLanguage.value = newSettings.language || 'en-US'; // Default to en-US
+      selectedTimezone.value = newSettings.timezone || 'UTC';
+      statusMonitorIntervalLocal.value = parseInt(newSettings.statusMonitorIntervalSeconds || '3', 10);
+      dockerInterval.value = parseInt(newSettings.dockerStatusIntervalSeconds || '2', 10);
+      // dockerExpandDefault.value is already reactive from storeToRefs (dockerDefaultExpandBoolean)
+      // but we keep a local ref for the form v-model and sync it.
+      dockerExpandDefault.value = newSettings.dockerDefaultExpand === 'true';
+    }
+  }, { deep: true, immediate: true });
+
+  // Sync local dockerExpandDefault with the store's boolean getter
+  watch(dockerDefaultExpandBoolean, (newValue) => {
+    dockerExpandDefault.value = newValue;
+  }, { immediate: true });
+
+  // Sync local statusMonitorIntervalLocal with the store's number getter
+  watch(statusMonitorIntervalSecondsNumber, (newValue) => {
+    statusMonitorIntervalLocal.value = newValue;
+  }, { immediate: true });
+  
+  // Sync local selectedLanguage with the store's language getter
+  watch(storeLanguage, (newVal) => {
+    selectedLanguage.value = newVal;
+  }, { immediate: true });
+
+
+  return {
+    // Language
+    selectedLanguage,
+    languageLoading,
+    languageMessage,
+    languageSuccess,
+    languageNames,
+    availableLocales, // Export for template
+    handleUpdateLanguage,
+
+    // Timezone
+    selectedTimezone,
+    timezoneLoading,
+    timezoneMessage,
+    timezoneSuccess,
+    commonTimezones,
+    handleUpdateTimezone,
+
+    // Status Monitor
+    statusMonitorIntervalLocal,
+    statusMonitorLoading,
+    statusMonitorMessage,
+    statusMonitorSuccess,
+    handleUpdateStatusMonitorInterval,
+
+    // Docker Settings
+    dockerInterval,
+    dockerExpandDefault,
+    dockerSettingsLoading,
+    dockerSettingsMessage,
+    dockerSettingsSuccess,
+    handleUpdateDockerSettings,
+  };
+}

packages/frontend/src/composables/settings/useTwoFactorAuth.ts

@@ -0,0 +1,117 @@
+import { ref, computed, onMounted } from 'vue';
+import { useAuthStore } from '../../stores/auth.store';
+import apiClient from '../../utils/apiClient';
+import { useI18n } from 'vue-i18n';
+
+export function useTwoFactorAuth() {
+  const authStore = useAuthStore();
+  const { t } = useI18n();
+
+  const twoFactorEnabled = ref(false);
+  const twoFactorLoading = ref(false);
+  const twoFactorMessage = ref('');
+  const twoFactorSuccess = ref(false);
+  const setupData = ref<{ secret: string; qrCodeUrl: string } | null>(null);
+  const verificationCode = ref('');
+  const disablePassword = ref('');
+
+  const isSettingUp2FA = computed(() => setupData.value !== null);
+
+  const checkTwoFactorStatus = async () => {
+    // Ensure user is loaded before checking 2FA status
+    if (!authStore.user) {
+      await authStore.checkAuthStatus(); // Attempt to load user if not already
+    }
+    twoFactorEnabled.value = authStore.user?.isTwoFactorEnabled ?? false;
+  };
+
+  const handleSetup2FA = async () => {
+    twoFactorMessage.value = '';
+    twoFactorSuccess.value = false;
+    twoFactorLoading.value = true;
+    setupData.value = null;
+    verificationCode.value = '';
+    try {
+      const response = await apiClient.post<{ secret: string; qrCodeUrl: string }>('/auth/2fa/setup');
+      setupData.value = response.data;
+    } catch (error: any) {
+      console.error('开始设置 2FA 失败:', error);
+      twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.setupFailed');
+    } finally {
+      twoFactorLoading.value = false;
+    }
+  };
+
+  const handleVerifyAndActivate2FA = async () => {
+    if (!setupData.value || !verificationCode.value) {
+      twoFactorMessage.value = t('settings.twoFactor.error.codeRequired');
+      return;
+    }
+    twoFactorMessage.value = '';
+    twoFactorSuccess.value = false;
+    twoFactorLoading.value = true;
+    try {
+      await apiClient.post('/auth/2fa/verify', { token: verificationCode.value });
+      twoFactorMessage.value = t('settings.twoFactor.success.activated');
+      twoFactorSuccess.value = true;
+      twoFactorEnabled.value = true;
+      setupData.value = null;
+      verificationCode.value = '';
+      await authStore.checkAuthStatus(); // Refresh user data
+    } catch (error: any) {
+      console.error('验证并激活 2FA 失败:', error);
+      twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.verificationFailed');
+    } finally {
+      twoFactorLoading.value = false;
+    }
+  };
+
+  const handleDisable2FA = async () => {
+    if (!disablePassword.value) {
+      twoFactorMessage.value = t('settings.twoFactor.error.passwordRequiredForDisable');
+      return;
+    }
+    twoFactorMessage.value = '';
+    twoFactorSuccess.value = false;
+    twoFactorLoading.value = true;
+    try {
+      await apiClient.delete('/auth/2fa', { data: { password: disablePassword.value } });
+      twoFactorMessage.value = t('settings.twoFactor.success.disabled');
+      twoFactorSuccess.value = true;
+      twoFactorEnabled.value = false;
+      disablePassword.value = '';
+      await authStore.checkAuthStatus(); // Refresh user data
+    } catch (error: any) {
+      console.error('禁用 2FA 失败:', error);
+      twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.disableFailed');
+    } finally {
+      twoFactorLoading.value = false;
+    }
+  };
+
+  const cancelSetup = () => {
+    setupData.value = null;
+    verificationCode.value = '';
+    twoFactorMessage.value = '';
+  };
+
+  onMounted(async () => {
+    await checkTwoFactorStatus();
+  });
+
+  return {
+    twoFactorEnabled,
+    twoFactorLoading,
+    twoFactorMessage,
+    twoFactorSuccess,
+    setupData,
+    verificationCode,
+    disablePassword,
+    isSettingUp2FA,
+    checkTwoFactorStatus, // Expose if needed externally, though onMounted handles initial check
+    handleSetup2FA,
+    handleVerifyAndActivate2FA,
+    handleDisable2FA,
+    cancelSetup,
+  };
+}

packages/frontend/src/composables/settings/useVersionCheck.ts

@@ -0,0 +1,51 @@
+import { ref, computed } from 'vue';
+import axios from 'axios';
+import pkg from '../../../package.json'; // 调整路径以正确导入 package.json
+import { useI18n } from 'vue-i18n';
+
+export function useVersionCheck() {
+  const { t } = useI18n();
+  const appVersion = ref(pkg.version);
+  const latestVersion = ref<string | null>(null);
+  const isCheckingVersion = ref(false);
+  const versionCheckError = ref<string | null>(null);
+
+  const isUpdateAvailable = computed(() => {
+    // 简单的字符串比较，假设 tag 格式为 vX.Y.Z
+    return latestVersion.value && latestVersion.value !== `v${appVersion.value}`;
+  });
+
+  const checkLatestVersion = async () => {
+    isCheckingVersion.value = true;
+    versionCheckError.value = null;
+    latestVersion.value = null;
+    try {
+      const response = await axios.get('https://api.github.com/repos/Heavrnl/nexus-terminal/releases/latest');
+      if (response.data && response.data.tag_name) {
+        latestVersion.value = response.data.tag_name;
+      } else {
+        throw new Error('Invalid API response format');
+      }
+    } catch (error: any) {
+      console.error('检查最新版本失败:', error);
+      if (axios.isAxiosError(error) && error.response?.status === 404) {
+        versionCheckError.value = t('settings.about.error.noReleases');
+      } else if (axios.isAxiosError(error) && error.response?.status === 403) {
+         versionCheckError.value = t('settings.about.error.rateLimit');
+      } else {
+        versionCheckError.value = t('settings.about.error.checkFailed');
+      }
+    } finally {
+      isCheckingVersion.value = false;
+    }
+  };
+
+  return {
+    appVersion,
+    latestVersion,
+    isCheckingVersion,
+    versionCheckError,
+    isUpdateAvailable,
+    checkLatestVersion,
+  };
+}

packages/frontend/src/composables/settings/useWorkspaceSettings.ts

@@ -0,0 +1,306 @@
+import { ref, watch } from 'vue';
+import { useSettingsStore } from '../../stores/settings.store';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+
+export function useWorkspaceSettings() {
+  const settingsStore = useSettingsStore();
+  const { t } = useI18n();
+
+  const {
+    showPopupFileEditorBoolean,
+    shareFileEditorTabsBoolean,
+    autoCopyOnSelectBoolean,
+    workspaceSidebarPersistentBoolean,
+    commandInputSyncTarget,
+    showConnectionTagsBoolean,
+    showQuickCommandTagsBoolean,
+    terminalScrollbackLimitNumber,
+    fileManagerShowDeleteConfirmationBoolean,
+  } = storeToRefs(settingsStore);
+
+  // --- Popup Editor ---
+  const popupEditorEnabled = ref(true);
+  const popupEditorLoading = ref(false);
+  const popupEditorMessage = ref('');
+  const popupEditorSuccess = ref(false);
+
+  const handleUpdatePopupEditorSetting = async () => {
+    popupEditorLoading.value = true;
+    popupEditorMessage.value = '';
+    popupEditorSuccess.value = false;
+    try {
+      const valueToSave = popupEditorEnabled.value ? 'true' : 'false';
+      await settingsStore.updateSetting('showPopupFileEditor', valueToSave);
+      popupEditorMessage.value = t('settings.popupEditor.success.saved');
+      popupEditorSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新弹窗编辑器设置失败:', error);
+      popupEditorMessage.value = error.message || t('settings.popupEditor.error.saveFailed');
+      popupEditorSuccess.value = false;
+    } finally {
+      popupEditorLoading.value = false;
+    }
+  };
+
+  // --- Share Editor Tabs ---
+  const shareTabsEnabled = ref(true);
+  const shareTabsLoading = ref(false);
+  const shareTabsMessage = ref('');
+  const shareTabsSuccess = ref(false);
+
+  const handleUpdateShareTabsSetting = async () => {
+    shareTabsLoading.value = true;
+    shareTabsMessage.value = '';
+    shareTabsSuccess.value = false;
+    try {
+      const valueToSave = shareTabsEnabled.value ? 'true' : 'false';
+      await settingsStore.updateSetting('shareFileEditorTabs', valueToSave);
+      shareTabsMessage.value = t('settings.shareEditorTabs.success.saved');
+      shareTabsSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新共享编辑器标签页设置失败:', error);
+      shareTabsMessage.value = error.message || t('settings.shareEditorTabs.error.saveFailed');
+      shareTabsSuccess.value = false;
+    } finally {
+      shareTabsLoading.value = false;
+    }
+  };
+
+  // --- Auto Copy on Select ---
+  const autoCopyEnabled = ref(false);
+  const autoCopyLoading = ref(false);
+  const autoCopyMessage = ref('');
+  const autoCopySuccess = ref(false);
+
+  const handleUpdateAutoCopySetting = async () => {
+    autoCopyLoading.value = true;
+    autoCopyMessage.value = '';
+    autoCopySuccess.value = false;
+    try {
+      const valueToSave = autoCopyEnabled.value ? 'true' : 'false';
+      await settingsStore.updateSetting('autoCopyOnSelect', valueToSave);
+      autoCopyMessage.value = t('settings.autoCopyOnSelect.success.saved');
+      autoCopySuccess.value = true;
+    } catch (error: any) {
+      console.error('更新自动复制设置失败:', error);
+      autoCopyMessage.value = error.message || t('settings.autoCopyOnSelect.error.saveFailed');
+      autoCopySuccess.value = false;
+    } finally {
+      autoCopyLoading.value = false;
+    }
+  };
+
+  // --- Workspace Sidebar Persistent ---
+  const workspaceSidebarPersistentEnabled = ref(false);
+  const workspaceSidebarPersistentLoading = ref(false);
+  const workspaceSidebarPersistentMessage = ref('');
+  const workspaceSidebarPersistentSuccess = ref(false);
+
+  const handleUpdateWorkspaceSidebarSetting = async () => {
+    workspaceSidebarPersistentLoading.value = true;
+    workspaceSidebarPersistentMessage.value = '';
+    workspaceSidebarPersistentSuccess.value = false;
+    try {
+      const valueToSave = workspaceSidebarPersistentEnabled.value ? 'true' : 'false';
+      await settingsStore.updateSetting('workspaceSidebarPersistent', valueToSave);
+      workspaceSidebarPersistentMessage.value = t('settings.workspace.success.sidebarPersistentSaved');
+      workspaceSidebarPersistentSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新侧边栏固定设置失败:', error);
+      workspaceSidebarPersistentMessage.value = error.message || t('settings.workspace.error.sidebarPersistentSaveFailed');
+      workspaceSidebarPersistentSuccess.value = false;
+    } finally {
+      workspaceSidebarPersistentLoading.value = false;
+    }
+  };
+
+  // --- Command Input Sync Target ---
+  const commandInputSyncTargetLocal = ref<'none' | 'quickCommands' | 'commandHistory'>('none');
+  const commandInputSyncLoading = ref(false);
+  const commandInputSyncMessage = ref('');
+  const commandInputSyncSuccess = ref(false);
+
+  const handleUpdateCommandInputSyncTarget = async () => {
+    commandInputSyncLoading.value = true;
+    commandInputSyncMessage.value = '';
+    commandInputSyncSuccess.value = false;
+    try {
+      await settingsStore.updateSetting('commandInputSyncTarget', commandInputSyncTargetLocal.value);
+      commandInputSyncMessage.value = t('settings.commandInputSync.success.saved', '同步目标已保存');
+      commandInputSyncSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新命令输入同步目标失败:', error);
+      commandInputSyncMessage.value = error.message || t('settings.commandInputSync.error.saveFailed', '保存同步目标失败');
+      commandInputSyncSuccess.value = false;
+    } finally {
+      commandInputSyncLoading.value = false;
+    }
+  };
+
+  // --- Show Connection Tags ---
+  const showConnectionTagsLocal = ref(true);
+  const showConnectionTagsLoading = ref(false);
+  const showConnectionTagsMessage = ref('');
+  const showConnectionTagsSuccess = ref(false);
+
+  const handleUpdateShowConnectionTags = async () => {
+    showConnectionTagsLoading.value = true;
+    showConnectionTagsMessage.value = '';
+    showConnectionTagsSuccess.value = false;
+    try {
+      await settingsStore.updateSetting('showConnectionTags', showConnectionTagsLocal.value);
+      showConnectionTagsMessage.value = t('settings.workspace.success.showConnectionTagsSaved', '连接标签显示设置已保存');
+      showConnectionTagsSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新显示连接标签设置失败:', error);
+      showConnectionTagsMessage.value = error.message || t('settings.workspace.error.showConnectionTagsSaveFailed', '保存连接标签显示设置失败');
+      showConnectionTagsSuccess.value = false;
+    } finally {
+      showConnectionTagsLoading.value = false;
+    }
+  };
+
+  // --- Show Quick Command Tags ---
+  const showQuickCommandTagsLocal = ref(true);
+  const showQuickCommandTagsLoading = ref(false);
+  const showQuickCommandTagsMessage = ref('');
+  const showQuickCommandTagsSuccess = ref(false);
+
+  const handleUpdateShowQuickCommandTags = async () => {
+    showQuickCommandTagsLoading.value = true;
+    showQuickCommandTagsMessage.value = '';
+    showQuickCommandTagsSuccess.value = false;
+    try {
+      await settingsStore.updateSetting('showQuickCommandTags', showQuickCommandTagsLocal.value);
+      showQuickCommandTagsMessage.value = t('settings.workspace.success.showQuickCommandTagsSaved', '快捷指令标签显示设置已保存');
+      showQuickCommandTagsSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新显示快捷指令标签设置失败:', error);
+      showQuickCommandTagsMessage.value = error.message || t('settings.workspace.error.showQuickCommandTagsSaveFailed', '保存快捷指令标签显示设置失败');
+      showQuickCommandTagsSuccess.value = false;
+    } finally {
+      showQuickCommandTagsLoading.value = false;
+    }
+  };
+
+  // --- Terminal Scrollback Limit ---
+  const terminalScrollbackLimitLocal = ref<number | null>(null);
+  const terminalScrollbackLimitLoading = ref(false);
+  const terminalScrollbackLimitMessage = ref('');
+  const terminalScrollbackLimitSuccess = ref(false);
+
+  const handleUpdateTerminalScrollbackLimit = async () => {
+    terminalScrollbackLimitLoading.value = true;
+    terminalScrollbackLimitMessage.value = '';
+    terminalScrollbackLimitSuccess.value = false;
+    try {
+      const limitValue = terminalScrollbackLimitLocal.value;
+      if (limitValue !== null && limitValue !== undefined && (isNaN(limitValue) || !Number.isInteger(limitValue) || limitValue < 0)) {
+        throw new Error(t('settings.terminalScrollback.error.invalidInput', '请输入一个有效的非负整数。'));
+      }
+      const valueToSave = (limitValue === null || limitValue === undefined) ? '5000' : String(limitValue);
+      await settingsStore.updateSetting('terminalScrollbackLimit', valueToSave);
+      terminalScrollbackLimitMessage.value = t('settings.terminalScrollback.success.saved', '终端回滚行数设置已保存。');
+      terminalScrollbackLimitSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新终端回滚行数设置失败:', error);
+      terminalScrollbackLimitMessage.value = error.message || t('settings.terminalScrollback.error.saveFailed', '保存终端回滚行数设置失败。');
+      terminalScrollbackLimitSuccess.value = false;
+    } finally {
+      terminalScrollbackLimitLoading.value = false;
+    }
+  };
+
+  // --- File Manager Delete Confirmation ---
+  const fileManagerShowDeleteConfirmationLocal = ref(true);
+  const fileManagerShowDeleteConfirmationLoading = ref(false);
+  const fileManagerShowDeleteConfirmationMessage = ref('');
+  const fileManagerShowDeleteConfirmationSuccess = ref(false);
+
+  const handleUpdateFileManagerDeleteConfirmation = async () => {
+    fileManagerShowDeleteConfirmationLoading.value = true;
+    fileManagerShowDeleteConfirmationMessage.value = '';
+    fileManagerShowDeleteConfirmationSuccess.value = false;
+    try {
+      const valueToSave = fileManagerShowDeleteConfirmationLocal.value ? 'true' : 'false';
+      await settingsStore.updateSetting('fileManagerShowDeleteConfirmation', valueToSave);
+      fileManagerShowDeleteConfirmationMessage.value = t('settings.workspace.fileManagerDeleteConfirmSuccess', '文件管理器删除确认设置已保存。');
+      fileManagerShowDeleteConfirmationSuccess.value = true;
+    } catch (error: any) {
+      console.error('更新文件管理器删除确认设置失败:', error);
+      fileManagerShowDeleteConfirmationMessage.value = error.message || t('settings.workspace.fileManagerDeleteConfirmError', '保存文件管理器删除确认设置失败。');
+      fileManagerShowDeleteConfirmationSuccess.value = false;
+    } finally {
+      fileManagerShowDeleteConfirmationLoading.value = false;
+    }
+  };
+
+  // Watchers to sync local state with store state
+  watch(showPopupFileEditorBoolean, (newValue) => { popupEditorEnabled.value = newValue; }, { immediate: true });
+  watch(shareFileEditorTabsBoolean, (newValue) => { shareTabsEnabled.value = newValue; }, { immediate: true });
+  watch(autoCopyOnSelectBoolean, (newValue) => { autoCopyEnabled.value = newValue; }, { immediate: true });
+  watch(workspaceSidebarPersistentBoolean, (newValue) => { workspaceSidebarPersistentEnabled.value = newValue; }, { immediate: true });
+  watch(commandInputSyncTarget, (newValue) => { commandInputSyncTargetLocal.value = newValue; }, { immediate: true });
+  watch(showConnectionTagsBoolean, (newValue) => { showConnectionTagsLocal.value = newValue; }, { immediate: true });
+  watch(showQuickCommandTagsBoolean, (newValue) => { showQuickCommandTagsLocal.value = newValue; }, { immediate: true });
+  watch(terminalScrollbackLimitNumber, (newValue) => { terminalScrollbackLimitLocal.value = newValue; }, { immediate: true });
+  watch(fileManagerShowDeleteConfirmationBoolean, (newValue) => { fileManagerShowDeleteConfirmationLocal.value = newValue; }, { immediate: true });
+
+
+  return {
+    popupEditorEnabled,
+    popupEditorLoading,
+    popupEditorMessage,
+    popupEditorSuccess,
+    handleUpdatePopupEditorSetting,
+
+    shareTabsEnabled,
+    shareTabsLoading,
+    shareTabsMessage,
+    shareTabsSuccess,
+    handleUpdateShareTabsSetting,
+
+    autoCopyEnabled,
+    autoCopyLoading,
+    autoCopyMessage,
+    autoCopySuccess,
+    handleUpdateAutoCopySetting,
+
+    workspaceSidebarPersistentEnabled,
+    workspaceSidebarPersistentLoading,
+    workspaceSidebarPersistentMessage,
+    workspaceSidebarPersistentSuccess,
+    handleUpdateWorkspaceSidebarSetting,
+
+    commandInputSyncTargetLocal,
+    commandInputSyncLoading,
+    commandInputSyncMessage,
+    commandInputSyncSuccess,
+    handleUpdateCommandInputSyncTarget,
+
+    showConnectionTagsLocal,
+    showConnectionTagsLoading,
+    showConnectionTagsMessage,
+    showConnectionTagsSuccess,
+    handleUpdateShowConnectionTags,
+
+    showQuickCommandTagsLocal,
+    showQuickCommandTagsLoading,
+    showQuickCommandTagsMessage,
+    showQuickCommandTagsSuccess,
+    handleUpdateShowQuickCommandTags,
+
+    terminalScrollbackLimitLocal,
+    terminalScrollbackLimitLoading,
+    terminalScrollbackLimitMessage,
+    terminalScrollbackLimitSuccess,
+    handleUpdateTerminalScrollbackLimit,
+
+    fileManagerShowDeleteConfirmationLocal,
+    fileManagerShowDeleteConfirmationLoading,
+    fileManagerShowDeleteConfirmationMessage,
+    fileManagerShowDeleteConfirmationSuccess,
+    handleUpdateFileManagerDeleteConfirmation,
+  };
+}