warehouse-web/src/views/Login.vue

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { setAuthInfo } from '../utils/auth'

const router = useRouter()
const form = reactive({ username: 'admin', password: 'admin123' })
const busy = ref(false)
const showPassword = ref(false)

async function submit() {
	if (busy.value) return
	busy.value = true
	try {
		// 跳过登录验证，直接写入模拟令牌进入系统
		await setAuthInfo({ accessToken: 'mock-token-' + Date.now(), displayName: form.username || '管理员' })
		ElMessage.success('登录成功')
		await router.replace('/dashboard')
	} finally {
		busy.value = false
	}
}
</script>

<template>
	<div class="mock-login">
		<section class="login-panel" aria-labelledby="login-title">
			<div class="brand login-brand"><span class="brand-mark">H</span>
				<div class="brand-text">
					<strong>HS 仓储运营台</strong>
					<small>WAREHOUSE OPS · 上海闵行仓</small>
				</div>
			</div>
			<h1 id="login-title">登录系统</h1>
			<p class="login-desc">使用内部账号进入仓储基础 ERP，登录后所有操作将自动记录操作人。</p>
			<form class="login-form" @submit.prevent="submit">
				<div class="form-field">
					<label class="field-label">用户名</label>
					<input v-model="form.username" class="field-input" placeholder="请输入用户名" autocomplete="username" />
				</div>
				<div class="form-field">
					<label class="field-label">密码</label>
					<input v-model="form.password" :type="showPassword ? 'text' : 'password'" class="field-input" placeholder="请输入密码" autocomplete="current-password" />
					<button type="button" class="toggle-password" @click="showPassword = !showPassword" :aria-label="showPassword ? '隐藏密码' : '显示密码'">
						<svg v-if="showPassword" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
						<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
					</button>
				</div>
				<el-button type="primary" class="login-submit" :loading="busy" native-type="submit">继 续</el-button>
			</form>
			<footer>仅限内部操作 · 登录后进入上海闵行仓工作台</footer>
		</section>
	</div>
</template>

<style scoped>
.mock-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%); padding: 24px; }
.login-panel { width: 100%; max-width: 480px; background: #fff; border-radius: 24px; padding: 48px 40px 36px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.brand-mark { width: 52px; height: 52px; border-radius: 14px; background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; }
.brand-text { display: flex; flex-direction: column; gap: 4px; }
.brand-text strong { font-size: 18px; font-weight: 600; color: #111827; }
.brand-text small { font-size: 11px; color: #6b7280; letter-spacing: 0.3px; }
.login-panel h1 { font-size: 25px; font-weight: 700; margin: 0 0 12px; color: #111827; }
.login-desc { font-size: 13px; color: #6b7280; line-height: 1.7; margin: 0 0 32px; }
.login-form { display: flex; flex-direction: column; gap: 20px; }
.form-field { position: relative; display: flex; align-items: center; border: 1px solid #dbeafe; border-radius: 20px; padding: 0 24px; height: 64px; background: #fff; transition: border-color 0.2s; }
.form-field:focus-within { border-color: #3b82f6; }
.field-label { flex-shrink: 0; width: 100px; font-size: 13px; color: #6b7280; font-weight: 500; }
.field-input { flex: 1; border: none; outline: none; font-size: 14px; color: #111827; background: transparent; }
.field-input::placeholder { color: #9ca3af; }
.toggle-password { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; display: flex; align-items: center; justify-content: center; }
.toggle-password:hover { color: #6b7280; }
.toggle-password svg { width: 22px; height: 22px; }
.login-submit { width: 100%; height: 56px; font-size: 18px; font-weight: 600; border-radius: 14px; margin-top: 12px; background: #3b82f6; border: none; }
.login-submit:hover { background: #2563eb; }
.login-panel footer { margin-top: 28px; text-align: center; font-size: 11px; color: #9ca3af; }
</style>