374 lines
14 KiB
Vue
374 lines
14 KiB
Vue
<template>
|
||
<form class="card" @submit.prevent="onSubmit">
|
||
<!-- Logo -->
|
||
<div class="logo">
|
||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||
<defs>
|
||
<linearGradient id="lg" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stop-color="#67b4ff" />
|
||
<stop offset="1" stop-color="#3b82f6" />
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="24" cy="24" r="22" fill="url(#lg)" />
|
||
<path d="M18 31h3l3-6 3 6h3L26 17h-4l-4 14z" fill="white" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 标题 + 切换 -->
|
||
<div class="head">
|
||
<h2 class="title">
|
||
AI智能平台 -
|
||
{{
|
||
mode==='login' ? '登录'
|
||
: mode==='register' ? '注册'
|
||
: mode==='forgot' ? '找回密码'
|
||
: '重置密码'
|
||
}}
|
||
</h2>
|
||
|
||
<button
|
||
v-if="mode==='login' || mode==='register'"
|
||
type="button"
|
||
class="switch"
|
||
@click="toggleMode"
|
||
>
|
||
{{ mode === 'login' ? '没有账号？去注册' : '已有账号？去登录' }}
|
||
</button>
|
||
<button v-else type="button" class="switch" @click="switchTo('login')">
|
||
返回登录
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 邮箱 -->
|
||
<label class="field">
|
||
<span class="icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<path fill="currentColor"
|
||
d="M20 4q.825 0 1.412.588T22 6v12q0 .825-.588 1.413T20 20H4q-.825 0-1.412-.587T2 18V6q0-.825.588-1.413T4 4h16Zm0 4-8 5L4 8v10h16V8Zm-8 3 8-5H4l8 5Z"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<input v-model.trim="email" type="email" autocomplete="username" placeholder="邮箱" required />
|
||
</label>
|
||
|
||
<!-- 密码：登录/注册/重置 -->
|
||
<label v-if="mode!=='forgot'" class="field">
|
||
<span class="icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<path fill="currentColor"
|
||
d="M6 10V8q0-2.5 1.75-4.25T12 2t4.25 1.75T18 8v2h1q.825 0 1.413.588T21 12v8q0 .825-.587 1.413T19 22H5q-.825 0-1.412-.587T3 20v-8q0-.825.588-1.412T5 10h1Zm2 0h8V8q0-1.65-1.175-2.825T12 4T9.175 5.175T8 8v2Z"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<input
|
||
v-model="password"
|
||
:type="showPwd ? 'text' : 'password'"
|
||
:autocomplete="mode==='login' ? 'current-password' : 'new-password'"
|
||
:placeholder="mode==='login' ? '密码' : '设置密码（不少于 6 位）'"
|
||
required
|
||
minlength="6"
|
||
/>
|
||
<button class="toggle" type="button" @click="showPwd = !showPwd" :aria-label="showPwd ? '隐藏' : '显示'">
|
||
<svg v-if="!showPwd" viewBox="0 0 24 24">
|
||
<path fill="currentColor"
|
||
d="M12 7q3.35 0 6.175 1.75T23 12q-2.15 2.5-4.975 4.25T12 18q-3.35 0-6.175-1.75T1 12q2.15-2.5 4.975-4.25T12 7Zm0 9q1.875 0 3.188-1.313T16.5 11.5q0-1.875-1.313-3.188T12 7q-1.875 0-3.188 1.313T7.5 11.5q0 1.875 1.313 3.188T12 16Z"
|
||
/>
|
||
</svg>
|
||
<svg v-else viewBox="0 0 24 24">
|
||
<path fill="currentColor"
|
||
d="M12 9.5q-.85 0-1.425.575T10 11.5q0 .85.575 1.425T12 13.5q.85 0 1.425-.575T14 11.5q0-.85-.575-1.425T12 9.5Zm0 6.5q-3.35 0-6.175-1.75T1 10q2.15-2.5 4.975-4.25T12 4q3.35 0 6.175 1.75T23 10q-2.15 2.5-4.975 4.25T12 16Z"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</label>
|
||
|
||
<!-- 注册/重置 确认密码 -->
|
||
<label v-if="mode==='register' || mode==='reset'" class="field">
|
||
<span class="icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<path fill="currentColor"
|
||
d="M12 2q2.925 0 4.963 2.037Q19 6.075 19 9q0 1.6-.6 3.012q-.6 1.413-1.65 2.463l-4.2 4.2q-.275.275-.55.275t-.55-.275l-4.2-4.2Q5.2 13.425 4.6 12.012Q4 10.6 4 9q0-2.925 2.037-4.963Q8.075 2 11 2h1Zm0 9q.825 0 1.412-.587Q14 9.825 14 9t-.588-1.413Q12.825 7 12 7q-1.875 0-3.188 1.313T7.5 11.5q0 1.875 1.313 3.188T12 16Z"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<input
|
||
v-model="confirmPwd"
|
||
:type="showPwd ? 'text' : 'password'"
|
||
autocomplete="new-password"
|
||
placeholder="确认密码"
|
||
required
|
||
minlength="6"
|
||
/>
|
||
</label>
|
||
|
||
<!-- 注册 / 重置：验证码 + 发送 -->
|
||
<div v-if="mode==='register' || mode==='reset'" class="field code-line">
|
||
<label class="field code-field">
|
||
<span class="icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<path fill="currentColor"
|
||
d="M4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20H4q-.825 0-1.412-.587T2 18V6q0-.825.588-1.413T4 4Zm8 9 8-5V6l-8 5L4 6v2l8 5Z"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<input
|
||
v-model.trim="code"
|
||
type="text"
|
||
inputmode="numeric"
|
||
pattern="[0-9]*"
|
||
maxlength="8"
|
||
autocomplete="one-time-code"
|
||
placeholder="邮箱验证码"
|
||
required
|
||
/>
|
||
</label>
|
||
<button class="code-btn" type="button" :disabled="!canSendCode" @click="handleSendCode">
|
||
<template v-if="cd>0">{{ cd }}s</template>
|
||
<template v-else>发送验证码</template>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 登录：记住密码 + 忘记密码 -->
|
||
<div v-if="mode==='login'" class="row">
|
||
<label class="remember">
|
||
<input type="checkbox" v-model="remember" />
|
||
<span>记住密码</span>
|
||
</label>
|
||
<button type="button" class="link" @click="switchTo('forgot')">忘记密码</button>
|
||
</div>
|
||
|
||
<!-- 找回密码说明 -->
|
||
<div v-if="mode==='forgot'" class="hint">我们会向该邮箱发送验证码用于重置密码。</div>
|
||
|
||
<!-- 主按钮 -->
|
||
<button class="submit" type="submit" :disabled="submitting || !submitEnabled">
|
||
{{
|
||
mode==='login' ? '登录'
|
||
: mode==='register' ? '注册'
|
||
: mode==='forgot' ? (submitting ? '发送中…' : '发送验证码')
|
||
: (submitting ? '提交中…' : '确认重置')
|
||
}}
|
||
</button>
|
||
</form>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onBeforeUnmount, nextTick } from 'vue'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const { open: flashOpen } = useFlash() // :contentReference[oaicite:2]{index=2}
|
||
const { post } = useApi() // 你项目里的封装，会拼接 /api
|
||
|
||
const props = defineProps({
|
||
actionLogin: Function,
|
||
actionRegister: Function,
|
||
optimisticSuccess: { type: Boolean, default: true }
|
||
})
|
||
|
||
const mode = ref('login')
|
||
|
||
// 表单状态
|
||
const email = ref('')
|
||
const password = ref('')
|
||
const confirmPwd = ref('')
|
||
const code = ref('')
|
||
const remember = ref(false)
|
||
const showPwd = ref(false)
|
||
|
||
const submitting = ref(false)
|
||
const sending = ref(false)
|
||
const cd = ref(0)
|
||
let timer = null
|
||
|
||
function switchTo (m) {
|
||
mode.value = m
|
||
if (m !== 'login') remember.value = false
|
||
password.value = ''
|
||
confirmPwd.value = ''
|
||
if (m !== 'register' && m !== 'reset') code.value = ''
|
||
}
|
||
|
||
function toggleMode () {
|
||
switchTo(mode.value === 'login' ? 'register' : 'login')
|
||
}
|
||
|
||
const emailOk = computed(() => /^\S+@\S+\.\S+$/.test(email.value))
|
||
const codeOk = computed(() => /^[0-9]{4,8}$/.test(code.value.trim()))
|
||
|
||
const submitEnabled = computed(() => {
|
||
if (!emailOk.value) return false
|
||
if (mode.value === 'login') return password.value.length >= 6
|
||
if (mode.value === 'register') {
|
||
return password.value.length >= 6 &&
|
||
confirmPwd.value.length >= 6 &&
|
||
password.value === confirmPwd.value &&
|
||
codeOk.value
|
||
}
|
||
if (mode.value === 'forgot') return true
|
||
return password.value.length >= 6 &&
|
||
confirmPwd.value.length >= 6 &&
|
||
password.value === confirmPwd.value &&
|
||
codeOk.value
|
||
})
|
||
|
||
const canSendCode = computed(() => emailOk.value && !sending.value && cd.value <= 0)
|
||
|
||
function startCountdown (seconds) {
|
||
cd.value = seconds
|
||
if (timer) clearInterval(timer)
|
||
timer = setInterval(() => {
|
||
cd.value -= 1
|
||
if (cd.value <= 0) {
|
||
clearInterval(timer)
|
||
timer = null
|
||
}
|
||
}, 1000)
|
||
}
|
||
onBeforeUnmount(() => { if (timer) clearInterval(timer) })
|
||
|
||
async function handleSendCode () {
|
||
if (!canSendCode.value) return
|
||
sending.value = true
|
||
try {
|
||
if (mode.value === 'register') {
|
||
await post('/auth/email-code', { email: email.value, scene: 'register' })
|
||
} else {
|
||
await post('/auth/password/forgot', { email: email.value })
|
||
if (mode.value === 'forgot') switchTo('reset')
|
||
}
|
||
startCountdown(60)
|
||
flashOpen('验证码已发送，请查收邮箱', 'success', 4200)
|
||
} catch (e) {
|
||
flashOpen(e?.data?.detail || e?.message || '发送失败', 'error', 4200)
|
||
} finally {
|
||
sending.value = false
|
||
}
|
||
}
|
||
|
||
function usernameFromEmail (e) {
|
||
const name = e.split('@')[0]?.trim()
|
||
return name || '用户'
|
||
}
|
||
|
||
async function onSubmit () {
|
||
if (!submitEnabled.value) return
|
||
submitting.value = true
|
||
try {
|
||
if (mode.value === 'login') {
|
||
if (typeof props.actionLogin === 'function') {
|
||
const res = await props.actionLogin({ email: email.value, password: password.value, remember: remember.value })
|
||
if (res && res.ok) {
|
||
flashOpen(`欢迎回来，${res.name || usernameFromEmail(email.value)}！`, 'success', 2600)
|
||
} else {
|
||
flashOpen('登录失败，请检查邮箱或密码', 'error', 4200)
|
||
return
|
||
}
|
||
} else {
|
||
// ✅ 修正为后端实际路由
|
||
await post('/auth/login', { user: { email: email.value, password: password.value } })
|
||
if (props.optimisticSuccess) {
|
||
flashOpen(`欢迎回来，${usernameFromEmail(email.value)}！`, 'success', 2600)
|
||
}
|
||
}
|
||
// SPA 导航，避免整页刷新导致提示丢失
|
||
const redirect = route.query.redirect?.toString() || '/'
|
||
await nextTick()
|
||
await router.push(redirect)
|
||
} else if (mode.value === 'register') {
|
||
if (typeof props.actionRegister === 'function') {
|
||
const res = await props.actionRegister({ email: email.value, password: password.value, code: code.value.trim() })
|
||
if (res && res.ok) {
|
||
flashOpen(`注册成功，欢迎加入，${res.name || usernameFromEmail(email.value)}！`, 'success', 2600)
|
||
} else {
|
||
flashOpen('注册失败，请检查验证码或邮箱', 'error', 4200)
|
||
return
|
||
}
|
||
} else {
|
||
// ✅ 修正为后端实际路由
|
||
await post('/auth', { user: { email: email.value, password: password.value, code: code.value.trim() } })
|
||
if (props.optimisticSuccess) {
|
||
flashOpen(`注册成功，欢迎加入，${usernameFromEmail(email.value)}！`, 'success', 2600)
|
||
}
|
||
}
|
||
await nextTick()
|
||
await router.push('/')
|
||
} else if (mode.value === 'forgot') {
|
||
await handleSendCode()
|
||
} else {
|
||
await post('/auth/password/reset', {
|
||
email: email.value,
|
||
code: code.value.trim(),
|
||
password: password.value,
|
||
confirm_password: confirmPwd.value
|
||
})
|
||
flashOpen('密码已重置，请使用新密码登录。', 'success', 3200)
|
||
switchTo('login')
|
||
}
|
||
} catch (e) {
|
||
flashOpen(e?.data?.detail || e?.message || '操作失败', 'error', 4200)
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.card{
|
||
--radius: 28px;
|
||
--shadow: 0 25px 60px rgba(18,24,40,.25), 0 10px 25px rgba(18,24,40,.18);
|
||
--border: 1px solid rgba(15,23,42,.06);
|
||
--primary-1: #3b82f6;
|
||
--primary-2: #60a5fa;
|
||
--text-1: #0f172a;
|
||
--text-2: #334155;
|
||
width: min(92vw, 520px);
|
||
background: #fff;
|
||
border: var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 28px 28px 22px;
|
||
box-shadow: var(--shadow);
|
||
margin-top: 16px;
|
||
}
|
||
.logo{ width:72px; height:72px; border-radius:999px; overflow:hidden; display:grid; place-items:center; margin:4px auto 10px; filter: drop-shadow(0 8px 20px rgba(59,130,246,.35)); }
|
||
.logo svg{ width:64px; height:64px; }
|
||
.head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
|
||
.title{ text-align:left; font-size:clamp(18px, 2.4vw, 26px); line-height:1.25; font-weight:700; color:#0f172a; margin:6px 2px 6px; }
|
||
.switch{ border:0; background:transparent; color:#3b82f6; cursor:pointer; font-size:14px; white-space:nowrap; }
|
||
.switch:hover{ text-decoration: underline; }
|
||
.field{ position:relative; display:block; margin:12px 0; }
|
||
.field input{
|
||
box-sizing:border-box; width:100%; height:48px; padding:0 44px; border-radius:999px;
|
||
border:1px solid #e5e7eb; outline:0; background:#f8fafc; color:#0f172a; font-size:15px;
|
||
transition:border-color .2s, background .2s, box-shadow .2s;
|
||
}
|
||
.field input::placeholder{ color:#9aa4b2; }
|
||
.field input:focus{ border-color:#bfdbfe; background:#fff; box-shadow:0 0 0 4px rgba(59,130,246,.12); }
|
||
.icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#94a3b8; width:20px; height:20px; display:grid; place-items:center; }
|
||
.icon svg{ width:20px; height:20px; }
|
||
.toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); height:36px; width:36px; border:0; border-radius:10px; background:transparent; color:#64748b; cursor:pointer; display:grid; place-items:center; }
|
||
.toggle:hover{ background:#f1f5f9; }
|
||
.toggle svg{ width:22px; height:22px; }
|
||
.code-line{ display:flex; gap:10px; align-items:center; }
|
||
.code-field{ flex:1 1 auto; margin:0; }
|
||
.code-btn{ flex:0 0 auto; height:48px; padding:0 14px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; color:#3b82f6; font-weight:600; transition: background .2s, box-shadow .2s, color .2s, opacity .2s; }
|
||
.code-btn:disabled{ opacity:.55; cursor:not-allowed; }
|
||
.code-btn:not(:disabled):hover{ background:#f8fafc; box-shadow:0 8px 18px rgba(2,6,23,.06); }
|
||
.row{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
|
||
.remember{ display:inline-flex; align-items:center; gap:8px; color:#334155; font-size:14px; }
|
||
.remember input{ width:16px; height:16px; }
|
||
.link{ border:0; background:transparent; color:#3b82f6; font-size:14px; cursor:pointer; }
|
||
.link:hover{ text-decoration: underline; }
|
||
.hint{ margin-top:6px; font-size:12px; color:#64748b; }
|
||
.submit{
|
||
margin-top: 16px; width: 100%; height: 50px; border: 0; border-radius: 999px;
|
||
color: #fff; font-weight: 700; letter-spacing:.5px; cursor: pointer;
|
||
background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
|
||
box-shadow: 0 8px 24px rgba(59,130,246,.35);
|
||
transition: transform .06s ease, box-shadow .2s ease, filter .2s, opacity .2s;
|
||
}
|
||
.submit:disabled{ opacity:.65; cursor:not-allowed; }
|
||
.submit:hover:not(:disabled){ filter: brightness(1.04); }
|
||
.submit:active:not(:disabled){ transform: translateY(1px); box-shadow: 0 6px 14px rgba(59,130,246,.35); }
|
||
</style>
|