Files
lunar-mini/server/web/static/js/pages/Login.js
T
gouki cc7f30191e
Build and Publish Server / build (push) Successful in 1m44s
chore(admin): 登录页加版本标记便于线上验证
2026-08-12 00:40:37 +00:00

70 lines
2.9 KiB
JavaScript

// Login 管理员登录页
export default {
template: `
<div class="min-h-screen bg-gray-100 flex items-center justify-center px-4">
<div class="max-w-sm w-full bg-white rounded-lg shadow-md p-8">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-red-600">祈福小助手</h1>
<p class="text-gray-500 text-sm mt-1">管理后台登录</p>
<p class="text-gray-300 text-xs mt-2">v2026.08.12-login</p>
</div>
<form @submit.prevent="submit">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">管理密码</label>
<input
v-model="password"
type="password"
autocomplete="current-password"
placeholder="请输入 ADMIN_PASSWORD"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
:disabled="loading"
/>
</div>
<div v-if="error" class="mb-4 text-sm text-red-600">{{ error }}</div>
<button
type="submit"
:disabled="loading || !password"
class="w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
>
{{ loading ? '登录中...' : '登 录' }}
</button>
</form>
</div>
</div>
`,
data() {
return {
password: '',
loading: false,
error: ''
};
},
methods: {
async submit() {
if (!this.password || this.loading) return;
this.loading = true;
this.error = '';
try {
const res = await fetch('/admin/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password: this.password })
});
const data = await res.json();
if (data.code === 0) {
// Cookie 已由服务端写入,跳回原本要访问的页面
window.location.href = window.location.pathname === '/admin/login'
? '/admin/'
: window.location.pathname;
} else {
this.error = data.msg || '登录失败';
}
} catch (e) {
this.error = '网络错误,请重试';
} finally {
this.loading = false;
}
}
}
};