账户: 修改密码接口 + 账户设置页

- 后端 POST /auth/password: 校验旧密码(argon2id)后重哈希更新 - 前端 /console/settings 账户设置页: 个人资料卡 + 修改密码表单 Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-15 20:55:45 +08:00
parent eb57a09c5d
commit a8e2cd214c
3 changed files with 115 additions and 0 deletions
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { http, errMsg } from '@/api/client'
+import { useAuthStore } from '@/stores/auth'
+import { useToastStore } from '@/stores/toast'
+import { fmtMoney, fmtTime } from '@/lib/format'
+import Badge from '@/components/ui/Badge.vue'
+import Button from '@/components/ui/Button.vue'
+import Input from '@/components/ui/Input.vue'
+
+const auth = useAuthStore()
+const toast = useToastStore()
+
+const oldPwd = ref('')
+const newPwd = ref('')
+const confirmPwd = ref('')
+const saving = ref(false)
+
+async function changePassword() {
+  if (newPwd.value.length < 8) {
+    toast.err('新密码至少 8 位')
+    return
+  }
+  if (newPwd.value !== confirmPwd.value) {
+    toast.err('两次输入的新密码不一致')
+    return
+  }
+  saving.value = true
+  try {
+    await http.post('/auth/password', { old_password: oldPwd.value, new_password: newPwd.value })
+    toast.ok('密码已更新')
+    oldPwd.value = newPwd.value = confirmPwd.value = ''
+  } catch (e) {
+    toast.err(errMsg(e))
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl space-y-6">
+    <div class="mb-2">
+      <h1 class="text-lg font-semibold">账户设置</h1>
+      <p class="text-sm text-muted">个人资料与安全</p>
+    </div>
+
+    <div class="card p-5">
+      <h2 class="mb-4 text-sm font-semibold">个人资料</h2>
+      <dl class="grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
+        <div>
+          <dt class="text-xs text-muted">用户名</dt>
+          <dd class="mt-1 text-ink">{{ auth.user?.username }}</dd>
+        </div>
+        <div>
+          <dt class="text-xs text-muted">邮箱</dt>
+          <dd class="mt-1 font-mono text-xs text-ink">{{ auth.user?.email }}</dd>
+        </div>
+        <div>
+          <dt class="text-xs text-muted">角色</dt>
+          <dd class="mt-1"><Badge :variant="auth.isAdmin ? 'accent' : 'neutral'">{{ auth.user?.role }}</Badge></dd>
+        </div>
+        <div>
+          <dt class="text-xs text-muted">余额</dt>
+          <dd class="mono-num mt-1 text-accent">{{ fmtMoney(auth.user?.balance ?? 0) }}</dd>
+        </div>
+        <div>
+          <dt class="text-xs text-muted">注册时间</dt>
+          <dd class="mono-num mt-1 text-xs text-muted">{{ fmtTime(auth.user?.created_at) }}</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="card p-5">
+      <h2 class="mb-4 text-sm font-semibold">修改密码</h2>
+      <div class="max-w-sm space-y-4">
+        <Input v-model="oldPwd" label="当前密码" type="password" autocomplete="current-password" />
+        <Input v-model="newPwd" label="新密码" type="password" autocomplete="new-password" hint="至少 8 位" />
+        <Input v-model="confirmPwd" label="确认新密码" type="password" autocomplete="new-password" />
+        <Button :loading="saving" @click="changePassword">更新密码</Button>
+      </div>
+    </div>
+  </div>
+</template>