feat: 实现修改管理员密码的功能

packages/frontend/src/App.vue

@@ -21,6 +21,7 @@ const handleLogout = () => {
         <RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink> |
         <RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink> | <!-- 新增代理链接 -->
         <RouterLink to="/tags">{{ t('nav.tags') }}</RouterLink> | <!-- 新增标签链接 -->
+        <RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink> | <!-- 新增设置链接 -->
         <RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
         <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
       </nav>

packages/frontend/src/locales/en.json

@@ -6,7 +6,8 @@
     "proxies": "Proxies",
     "login": "Login",
     "logout": "Logout",
-    "tags": "Tags"
+    "tags": "Tags",
+    "settings": "Settings"
   },
   "login": {
     "title": "User Login",
@@ -276,5 +277,23 @@
      "status": {
       "never": "Never"
     }
+  },
+  "settings": {
+    "title": "Global Settings",
+    "changePassword": {
+      "title": "Change Password",
+      "currentPassword": "Current Password:",
+      "newPassword": "New Password:",
+      "confirmPassword": "Confirm New Password:",
+      "submit": "Change Password",
+      "success": "Password changed successfully!",
+      "error": {
+        "passwordsDoNotMatch": "New password and confirmation do not match.",
+        "generic": "Failed to change password. Please try again later."
+      }
+    }
+  },
+  "common": {
+    "loading": "Loading..."
   }
 }

packages/frontend/src/locales/zh.json

@@ -6,7 +6,8 @@
     "proxies": "代理管理",
     "login": "登录",
     "logout": "登出",
-    "tags": "标签管理"
+    "tags": "标签管理",
+    "settings": "设置"
   },
   "login": {
     "title": "用户登录",
@@ -279,5 +280,23 @@
      "status": {
       "never": "从未"
     }
+  },
+  "settings": {
+    "title": "全局设置",
+    "changePassword": {
+      "title": "修改密码",
+      "currentPassword": "当前密码:",
+      "newPassword": "新密码:",
+      "confirmPassword": "确认新密码:",
+      "submit": "确认修改",
+      "success": "密码修改成功！",
+      "error": {
+        "passwordsDoNotMatch": "新密码和确认密码不匹配。",
+        "generic": "修改密码失败，请稍后重试。"
+      }
+    }
+  },
+  "common": {
+    "loading": "加载中..."
   }
 }

packages/frontend/src/router/index.ts

@@ -41,6 +41,12 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('../views/WorkspaceView.vue'),
     props: true // 将路由参数作为 props 传递给组件
   },
+  // 新增：设置页面
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: () => import('../views/SettingsView.vue')
+  },
   // 其他路由...
 ];
 

packages/frontend/src/stores/auth.store.ts

@@ -101,6 +101,31 @@ export const useAuthStore = defineStore('auth', {
         //         }
         //     }
         // }
+        
+        // 修改密码 Action
+        async changePassword(currentPassword: string, newPassword: string) {
+            if (!this.isAuthenticated) {
+                throw new Error('用户未登录，无法修改密码。');
+            }
+            this.isLoading = true;
+            this.error = null;
+            try {
+                const response = await axios.put<{ message: string }>('/api/v1/auth/password', {
+                    currentPassword,
+                    newPassword,
+                });
+                console.log('密码修改成功:', response.data.message);
+                // 密码修改成功后，通常不需要更新本地状态，但可以清除错误
+                return true;
+            } catch (err: any) {
+                console.error('修改密码失败:', err);
+                this.error = err.response?.data?.message || err.message || '修改密码时发生未知错误。';
+                // 抛出错误，以便组件可以捕获并显示 (提供默认消息以防 this.error 为 null)
+                throw new Error(this.error ?? '修改密码时发生未知错误。');
+            } finally {
+                this.isLoading = false;
+            }
+        },
     },
     persist: true, // 使用默认持久化配置 (localStorage, 持久化所有 state)
 });

packages/frontend/src/views/SettingsView.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="settings-view">
+    <h1>{{ $t('settings.title') }}</h1>
+
+    <div class="settings-section">
+      <h2>{{ $t('settings.changePassword.title') }}</h2>
+      <form @submit.prevent="handleChangePassword">
+        <div class="form-group">
+          <label for="currentPassword">{{ $t('settings.changePassword.currentPassword') }}</label>
+          <input type="password" id="currentPassword" v-model="currentPassword" required>
+        </div>
+        <div class="form-group">
+          <label for="newPassword">{{ $t('settings.changePassword.newPassword') }}</label>
+          <input type="password" id="newPassword" v-model="newPassword" required>
+        </div>
+        <div class="form-group">
+          <label for="confirmPassword">{{ $t('settings.changePassword.confirmPassword') }}</label>
+          <input type="password" id="confirmPassword" v-model="confirmPassword" required>
+        </div>
+        <button type="submit" :disabled="loading">{{ loading ? $t('common.loading') : $t('settings.changePassword.submit') }}</button>
+        <p v-if="message" :class="{ 'success-message': isSuccess, 'error-message': !isSuccess }">{{ message }}</p>
+      </form>
+    </div>
+
+    <!-- 其他设置项可以在这里添加 -->
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useAuthStore } from '../stores/auth.store';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const authStore = useAuthStore();
+
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const loading = ref(false);
+const message = ref('');
+const isSuccess = ref(false);
+
+const handleChangePassword = async () => {
+  message.value = ''; // 清除之前的消息
+  isSuccess.value = false;
+
+  if (newPassword.value !== confirmPassword.value) {
+    message.value = t('settings.changePassword.error.passwordsDoNotMatch');
+    return;
+  }
+
+  // 可选：添加前端密码复杂度校验
+
+  loading.value = true;
+  try {
+    await authStore.changePassword(currentPassword.value, newPassword.value);
+    message.value = t('settings.changePassword.success');
+    isSuccess.value = true;
+    // 清空表单
+    currentPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+  } catch (error: any) {
+    console.error('修改密码失败:', error);
+    message.value = error.message || t('settings.changePassword.error.generic');
+    isSuccess.value = false;
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.settings-view {
+  padding: 20px;
+}
+
+.settings-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input[type="password"] {
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+button {
+  padding: 10px 15px;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.success-message {
+  color: green;
+  margin-top: 10px;
+}
+
+.error-message {
+  color: red;
+  margin-top: 10px;
+}
+</style>