feat: add password change settings

frontend/src/MvpPanel.vue

@@ -24,6 +24,11 @@ const habitNameInput = ref<HTMLInputElement | null>(null)
 const importFile = ref<File | null>(null)
 const importPreview = ref<any>(null)
 const restoreFile = ref<File | null>(null)
+const currentPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const passwordBusy = ref(false)
+const passwordError = ref('')
 const todayKey = ref(dateKey(new Date()))
 const habitSwipeStart = ref<{ id: string; x: number; y: number } | null>(null)
 const habitPointerStart = ref<{ id: string; x: number; y: number } | null>(null)
@@ -286,6 +291,33 @@ async function restore() {
     emit('changed'); emit('notice', '数据已恢复')
   })
 }
+async function changePassword() {
+  passwordError.value = ''
+  if (newPassword.value !== confirmPassword.value) {
+    passwordError.value = '两次输入的新密码不一致'
+    return
+  }
+  if (newPassword.value.length < 12) {
+    passwordError.value = '新密码至少需要 12 位'
+    return
+  }
+  passwordBusy.value = true
+  try {
+    await request('/auth/change-password', {
+      method: 'POST',
+      body: JSON.stringify({ current_password: currentPassword.value, new_password: newPassword.value }),
+    })
+    currentPassword.value = ''
+    newPassword.value = ''
+    confirmPassword.value = ''
+    emit('notice', '密码已修改，其他设备已退出登录')
+    await loadSettings()
+  } catch (e) {
+    passwordError.value = e instanceof Error ? e.message : '修改密码失败'
+  } finally {
+    passwordBusy.value = false
+  }
+}
 onMounted(() => {
   if (props.view === 'habits' || props.view === 'today-habits') {
     refreshHabitDay()
@@ -357,6 +389,7 @@ onBeforeUnmount(() => {
       <div class="settings-grid">
         <article class="tool-card"><FileJson /><h3>数据导出与恢复</h3><p>下载完整 JSON 备份，或从备份恢复。</p><button class="soft-button" @click="exportData"><Download />导出 JSON</button><label class="file-button"><ArchiveRestore />选择备份<input type="file" accept="application/json" @change="restoreFile=($event.target as HTMLInputElement).files?.[0]||null"></label><button v-if="restoreFile" class="danger-button" @click="restore">确认恢复</button></article>
         <article class="tool-card"><Upload /><h3>导入</h3><p>先预览变化，确认后才写入。</p><label class="file-button">选择文件<input type="file" accept=".json,.csv" @change="importFile=($event.target as HTMLInputElement).files?.[0]||null"></label><button :disabled="!importFile" class="soft-button" @click="previewImport">生成预览</button><pre v-if="importPreview">{{ JSON.stringify(importPreview, null, 2) }}</pre><button v-if="importPreview" class="primary-small" @click="confirmImport">确认导入</button></article>
+        <article class="tool-card password-card"><Activity /><h3>修改密码</h3><p>修改后当前设备保持登录，其他设备会自动退出。</p><form class="password-form" @submit.prevent="changePassword"><label>当前密码<input v-model="currentPassword" type="password" autocomplete="current-password" required aria-label="当前密码"></label><label>新密码<input v-model="newPassword" type="password" autocomplete="new-password" minlength="12" required aria-label="新密码" placeholder="至少 12 位"></label><label>确认新密码<input v-model="confirmPassword" type="password" autocomplete="new-password" minlength="12" required aria-label="确认新密码"></label><p v-if="passwordError" class="inline-error" role="alert">{{passwordError}}</p><button class="primary-small" :disabled="passwordBusy || !currentPassword || !newPassword || !confirmPassword">{{passwordBusy?'正在修改…':'修改密码'}}</button></form></article>
         <article class="tool-card wide"><LogOut /><h3>登录会话</h3><div v-for="s in sessions" :key="s.id" class="session-row"><span><b>{{ s.current ? '当前设备' : '其他设备' }}</b><small>{{ s.user_agent || '未知设备' }} · {{ s.last_seen_at || s.created_at }}</small></span><button v-if="!s.current" class="danger-text" @click="revoke(s.id)">撤销</button></div><p v-if="!sessions.length">没有可显示的会话。</p></article>
         <article v-if="audit.length" class="tool-card wide"><Activity /><h3>最近活动</h3><div v-for="(row, i) in audit" :key="row.id || i" class="audit-row"><span>{{ row.action || row.event || '变更' }}</span><small>{{ row.created_at || row.timestamp }}</small></div></article>
       </div>