优化密码找回流程、管理后台批量操作和上传体验 (#2)

Reviewed-on: #2
2026-05-31 17:00:16 +08:00
parent e087dd46e2
commit 217b81c506
15 changed files with 736 additions and 158 deletions
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { NAlert, NButton, NCard, NForm, NFormItem, NInput, NResult } from 'naive-ui'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const route = useRoute()
+
+const email = ref(typeof route.query.email === 'string' ? route.query.email : '')
+const error = ref('')
+const loading = ref(false)
+const submitted = ref(false)
+const cooldown = ref(0)
+let cooldownTimer: ReturnType<typeof setInterval> | null = null
+
+const resendButtonLabel = computed(() => {
+  if (loading.value) return '发送中...'
+  if (cooldown.value > 0) return `重新发送（${cooldown.value}s）`
+  return '重新发送'
+})
+
+function clearCooldownTimer() {
+  if (!cooldownTimer) return
+  clearInterval(cooldownTimer)
+  cooldownTimer = null
+}
+
+function startCooldown() {
+  clearCooldownTimer()
+  cooldown.value = 60
+  cooldownTimer = setInterval(() => {
+    cooldown.value--
+    if (cooldown.value <= 0) {
+      cooldown.value = 0
+      clearCooldownTimer()
+    }
+  }, 1000)
+}
+
+async function handleSendResetEmail() {
+  error.value = ''
+
+  if (!email.value.trim()) {
+    error.value = '请输入需要找回密码的邮箱。'
+    return
+  }
+
+  loading.value = true
+  try {
+    await authStore.sendPasswordReset(email.value.trim())
+    submitted.value = true
+    startCooldown()
+  } catch (e: unknown) {
+    error.value = e instanceof Error ? e.message : '重置邮件发送失败，请稍后重试。'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function resendResetEmail() {
+  if (cooldown.value > 0 || loading.value) {
+    return
+  }
+
+  await handleSendResetEmail()
+}
+
+onUnmounted(() => {
+  clearCooldownTimer()
+})
+</script>
+
+<template>
+  <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
+    <div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
+      <section class="border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_52%,#f0fdfa_100%)] p-8 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)]">
+        <p class="text-sm uppercase tracking-[0.26em] text-sky-700">Password Recovery</p>
+        <h1 class="mt-4 max-w-xl text-5xl font-black leading-[1.05] text-slate-900">
+          重新拿回你的
+          <span class="block text-sky-700">OpenCloud 账号</span>
+        </h1>
+        <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
+          输入注册邮箱后，我们会发送一封密码重置邮件。打开邮件中的链接，即可进入新的密码设置页面。
+        </p>
+        <div class="mt-8 grid gap-4 sm:grid-cols-2">
+          <div class="border border-slate-200 bg-white px-4 py-3">
+            <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Step 1</div>
+            <div class="mt-2 text-lg font-bold text-slate-900">发送邮件</div>
+            <div class="mt-1 text-sm text-slate-500">使用注册邮箱请求重置链接</div>
+          </div>
+          <div class="border border-slate-200 bg-white px-4 py-3">
+            <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Step 2</div>
+            <div class="mt-2 text-lg font-bold text-slate-900">设置新密码</div>
+            <div class="mt-1 text-sm text-slate-500">在专用页面完成新密码更新</div>
+          </div>
+        </div>
+      </section>
+
+      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+        <NResult
+          v-if="submitted"
+          status="success"
+          title="重置邮件已发送"
+          description="如果该邮箱已注册，请查收邮件中的重置链接。"
+        >
+          <template #footer>
+            <div class="space-y-4">
+              <p class="text-sm text-slate-500">
+                目标邮箱：
+                <span class="font-semibold text-slate-700">{{ email }}</span>
+              </p>
+              <div class="flex flex-wrap justify-center gap-3">
+                <NButton
+                  type="primary"
+                  class="oc-primary-button oc-primary-button--teal"
+                  :disabled="cooldown > 0"
+                  :loading="loading"
+                  @click="resendResetEmail"
+                >
+                  {{ resendButtonLabel }}
+                </NButton>
+                <RouterLink :to="{ path: '/login', query: { email } }" class="no-underline">
+                  <NButton type="default" class="oc-panel-button oc-panel-button--neutral">返回登录</NButton>
+                </RouterLink>
+              </div>
+            </div>
+          </template>
+        </NResult>
+
+        <template v-else>
+          <div class="mb-8">
+            <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Reset Request</div>
+            <h2 class="mt-3 text-3xl font-bold text-slate-900">忘记密码</h2>
+            <p class="mt-2 text-sm text-slate-500">输入你的注册邮箱，我们会发送一封密码重置邮件。</p>
+          </div>
+
+          <NForm @submit.prevent="handleSendResetEmail">
+            <NFormItem label="邮箱">
+              <NInput
+                v-model:value="email"
+                required
+                autocomplete="email"
+                placeholder="your@email.com"
+              />
+            </NFormItem>
+
+            <NAlert v-if="error" type="error" class="mb-4">
+              {{ error }}
+            </NAlert>
+
+            <NButton
+              attr-type="submit"
+              type="primary"
+              block
+              size="large"
+              class="oc-primary-button oc-primary-button--sky"
+              :loading="loading"
+            >
+              {{ loading ? '发送中...' : '发送重置邮件' }}
+            </NButton>
+          </NForm>
+
+          <div class="mt-6 flex flex-wrap items-center justify-between gap-3 text-sm text-slate-500">
+            <p>如果你已经记起密码，可以直接返回登录。</p>
+            <RouterLink :to="{ path: '/login', query: { email } }" class="font-semibold text-sky-700 hover:text-sky-800">
+              返回登录
+            </RouterLink>
+          </div>
+        </template>
+      </NCard>
+    </div>
+  </div>
+</template>