saint/border-red-post-nalati
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

feat: polish authentication pages

Browse Source
This commit is contained in:
saint
2026-10-17 00:13:01 +08:00
parent b12f315cb3
commit 644dcd20d9
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/LoginView.vue
+10 -1
View File
@@ -1 +1,10 @@
<script setup lang="ts">import { ref } from 'vue';import { useRoute,useRouter } from 'vue-router';import { login } from '../services/auth';const username=ref(''),password=ref(''),error=ref(''),router=useRouter(),route=useRoute();async function submit(){try{await login({username:username.value,password:password.value});await router.replace(typeof route.query.redirect==='string'?route.query.redirect:'/')}catch(e){error.value=e instanceof Error?e.message:'登录失败'}}</script><template><main><h1>登录</h1><form @submit.prevent="submit"><input v-model="username" autocomplete="username" required placeholder="用户名"><input v-model="password" type="password" autocomplete="current-password" required placeholder="密码"><p v-if="error">{{error}}</p><button>登录</button></form><RouterLink to="/register">注册账户</RouterLink></main></template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { login } from '../services/auth'
const username=ref(''),password=ref(''),error=ref(''),submitting=ref(false),router=useRouter(),route=useRoute()
const redirect=computed(()=>typeof route.query.redirect==='string'?route.query.redirect:'/')
async function submit(){if(submitting.value)return;error.value='';submitting.value=true;try{await login({username:username.value.trim(),password:password.value});await router.replace(redirect.value)}catch(cause){error.value=cause instanceof Error?cause.message:'登录失败，请稍后重试。'}finally{submitting.value=false}}
</script>
<template><main class="auth-page"><section class="auth-intro"><p>边疆红驿 · NALATI KNOWLEDGE HUB</p><h1>每一次提问，<br>都有据可查。</h1><span>聚焦那拉提红色文化、旅游资源与民宿服务的可信知识问答。</span></section><section class="auth-panel"><RouterLink to="/">边疆红驿</RouterLink><form class="auth-card" @submit.prevent="submit"><p>WELCOME BACK</p><h2>登录账户</h2><label>用户名<input v-model.trim="username" autocomplete="username" required maxlength="100" placeholder="请输入用户名"/></label><label>密码<input v-model="password" type="password" autocomplete="current-password" required placeholder="请输入密码"/></label><p v-if="error" class="auth-error" role="alert">{{error}}</p><button :disabled="submitting">{{submitting?'登录中…':'登录'}}</button><small>还没有账户？ <RouterLink to="/register">注册账户</RouterLink></small></form></section></main></template>
<style scoped>.auth-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#f5f3eb}.auth-intro{padding:12vw;background:#214d3b;color:#fff;display:flex;flex-direction:column;justify-content:center}.auth-intro p,.auth-card>p{letter-spacing:.14em;font-size:11px;font-weight:700;color:#b8d1be}.auth-intro h1{font-size:clamp(42px,5vw,68px);line-height:1.08;letter-spacing:-.06em;margin:20px 0}.auth-intro span{max-width:410px;line-height:1.9;color:#d7e7da}.auth-panel{padding:34px;display:flex;flex-direction:column;align-items:center;color:#214d3b;font-weight:700}.auth-panel>a{align-self:stretch}.auth-card{width:min(100%,410px);margin:auto 0;padding:34px;border:1px solid #e3e1d8;border-radius:16px;background:#fffefa;box-shadow:0 18px 45px #27332b14;display:grid;gap:16px}.auth-card h2{margin:0;font-size:30px;letter-spacing:-.04em;color:#27332b}.auth-card label{display:grid;gap:7px;font-size:12px;color:#526052}.auth-card input{padding:12px;border:1px solid #dfe2d8;border-radius:9px;font:inherit;outline-color:#6f967c}.auth-card button{border:0;border-radius:9px;padding:13px;background:#214d3b;color:#fff;font-weight:700}.auth-card small{color:#707a70;font-weight:400}.auth-error{margin:0;padding:10px;border-radius:8px;background:#f8e9e4;color:#a5423a;font-size:12px}@media(max-width:780px){.auth-page{grid-template-columns:1fr}.auth-intro{padding:48px 28px}.auth-panel{padding:22px}.auth-card{margin:44px 0}}</style>
frontend/src/views/RegisterView.vue
+9 -1
View File
@@ -1 +1,9 @@
<script setup lang="ts">import { ref } from 'vue';import { useRouter } from 'vue-router';import { register } from '../services/auth';const username=ref(''),password=ref(''),error=ref(''),router=useRouter();async function submit(){try{await register({username:username.value,password:password.value});await router.push('/login')}catch(e){error.value=e instanceof Error?e.message:'注册失败'}}</script><template><main><h1>注册</h1><form @submit.prevent="submit"><input v-model="username" required minlength="3" placeholder="用户名"><input v-model="password" required minlength="15" type="password" placeholder="至少 15 位密码"><p v-if="error">{{error}}</p><button>注册</button></form></main></template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '../services/auth'
const username=ref(''),password=ref(''),confirmPassword=ref(''),error=ref(''),notice=ref(''),submitting=ref(false),router=useRouter()
async function submit(){if(submitting.value)return;error.value='';notice.value='';if(password.value!==confirmPassword.value){error.value='两次输入的密码不一致。';return}submitting.value=true;try{await register({username:username.value.trim(),password:password.value});notice.value='注册成功，正在跳转登录页…';window.setTimeout(()=>router.push('/login'),500)}catch(cause){error.value=cause instanceof Error?cause.message:'注册失败，请稍后重试。'}finally{submitting.value=false}}
</script>
<template><main class="auth-page"><section class="auth-panel"><RouterLink to="/">边疆红驿</RouterLink><form class="auth-card" @submit.prevent="submit"><p>CREATE ACCOUNT</p><h1>注册账户</h1><span>新注册账户默认为普通用户；管理员权限仅能由后端授权。</span><label>用户名<input v-model.trim="username" autocomplete="username" required minlength="3" maxlength="100" placeholder="至少 3 个字符"/></label><label>密码<input v-model="password" autocomplete="new-password" required minlength="15" type="password" placeholder="至少 15 位密码"/></label><label>确认密码<input v-model="confirmPassword" autocomplete="new-password" required type="password" placeholder="再次输入密码"/></label><p v-if="error" class="auth-error" role="alert">{{error}}</p><p v-if="notice" class="auth-notice" role="status">{{notice}}</p><button :disabled="submitting">{{submitting?'注册中…':'创建账户'}}</button><small>已有账户？ <RouterLink to="/login">前往登录</RouterLink></small></form></section><section class="auth-intro"><p>TRUSTWORTHY KNOWLEDGE</p><h2>从可靠资料出发，<br>再开始提问。</h2><span>未审核知识不会进入正式检索；没有可靠依据时，系统会明确说明知识不足。</span></section></main></template>
<style scoped>.auth-page{min-height:100vh;display:grid;grid-template-columns:.9fr 1.1fr;background:#f5f3eb}.auth-intro{padding:12vw;background:#a5423a;color:#fff;display:flex;flex-direction:column;justify-content:center}.auth-intro p,.auth-card>p{letter-spacing:.14em;font-size:11px;font-weight:700;color:#efc9be}.auth-intro h2{font-size:clamp(40px,4.7vw,64px);line-height:1.08;letter-spacing:-.06em;margin:20px 0}.auth-intro span{max-width:410px;line-height:1.9;color:#f6ded7}.auth-panel{padding:34px;display:flex;flex-direction:column;align-items:center;color:#214d3b;font-weight:700}.auth-panel>a{align-self:stretch}.auth-card{width:min(100%,410px);margin:auto 0;padding:34px;border:1px solid #e3e1d8;border-radius:16px;background:#fffefa;box-shadow:0 18px 45px #27332b14;display:grid;gap:14px}.auth-card h1{margin:0;font-size:30px;letter-spacing:-.04em;color:#27332b}.auth-card>span{color:#707a70;font-size:12px;line-height:1.7;font-weight:400}.auth-card label{display:grid;gap:7px;font-size:12px;color:#526052}.auth-card input{padding:12px;border:1px solid #dfe2d8;border-radius:9px;font:inherit;outline-color:#6f967c}.auth-card button{border:0;border-radius:9px;padding:13px;background:#214d3b;color:#fff;font-weight:700}.auth-card small{color:#707a70;font-weight:400}.auth-error,.auth-notice{margin:0;padding:10px;border-radius:8px;font-size:12px}.auth-error{background:#f8e9e4;color:#a5423a}.auth-notice{background:#e8f1e8;color:#356443}@media(max-width:780px){.auth-page{grid-template-columns:1fr}.auth-panel{padding:22px;order:2}.auth-intro{padding:48px 28px;order:1}.auth-card{margin:44px 0}}</style>