docs(prototype): confirm p0 web and app flows
This commit is contained in:
QiuSW
@@ -0,0 +1,267 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="data:,">
|
||||
<title>管理端登录原型</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #18201d;
|
||||
--muted: #5b6862;
|
||||
--line: #cfd7d3;
|
||||
--surface: #ffffff;
|
||||
--canvas: #f3f5f4;
|
||||
--brand: #0b6b50;
|
||||
--brand-dark: #07513d;
|
||||
--danger: #a62f2f;
|
||||
--focus: #1a73b8;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 280px;
|
||||
color: var(--ink);
|
||||
background: var(--canvas);
|
||||
font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
button, input { font: inherit; }
|
||||
button, input { min-height: 44px; }
|
||||
button:focus-visible, input:focus-visible {
|
||||
outline: 3px solid rgba(26, 115, 184, .28);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.prototype {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 10;
|
||||
min-height: 32px;
|
||||
padding: 6px 16px;
|
||||
color: #fff;
|
||||
background: #24312c;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
padding-top: 32px;
|
||||
display: grid;
|
||||
grid-template-rows: 58px 1fr;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 clamp(18px, 5vw, 48px);
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 750;
|
||||
}
|
||||
.brand-mark {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
main {
|
||||
width: min(100% - 32px, 420px);
|
||||
margin: 0 auto;
|
||||
padding: clamp(40px, 10vh, 96px) 0 48px;
|
||||
}
|
||||
.panel {
|
||||
padding: clamp(22px, 6vw, 32px);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 8px 24px rgba(31, 47, 40, .06);
|
||||
}
|
||||
h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.25; }
|
||||
.lead { margin: 0 0 24px; color: var(--muted); }
|
||||
.field { margin-top: 16px; }
|
||||
label { display: block; margin-bottom: 6px; font-weight: 650; }
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #9eaaa4;
|
||||
border-radius: 5px;
|
||||
color: var(--ink);
|
||||
background: #fff;
|
||||
}
|
||||
.password-wrap { position: relative; }
|
||||
.password-wrap input { padding-right: 72px; }
|
||||
.reveal {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--brand-dark);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 650;
|
||||
}
|
||||
.error-summary {
|
||||
display: none;
|
||||
margin: 18px 0 0;
|
||||
padding: 10px 12px;
|
||||
border-left: 4px solid var(--danger);
|
||||
background: #fff1f1;
|
||||
color: #762222;
|
||||
}
|
||||
.field-error { min-height: 20px; margin: 4px 0 0; color: var(--danger); font-size: 13px; }
|
||||
.submit {
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
border: 1px solid var(--brand);
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
.submit:hover { background: var(--brand-dark); }
|
||||
.submit:disabled { cursor: wait; opacity: .7; }
|
||||
.demo-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.demo-tools button {
|
||||
min-height: 38px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #9eaaa4;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
color: #34423c;
|
||||
}
|
||||
.hint { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
|
||||
@media (max-width: 420px) {
|
||||
.prototype { padding-inline: 2px; font-size: 10px; white-space: nowrap; }
|
||||
header { padding-inline: 16px; }
|
||||
main { width: min(100% - 24px, 420px); padding-top: 28px; }
|
||||
.panel { padding: 20px 16px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="prototype">PROTOTYPE - 仅供确认布局和交互，不是生产实现</div>
|
||||
<div class="shell">
|
||||
<header>
|
||||
<div class="brand"><span class="brand-mark" aria-hidden="true">采</span>采购任务管理</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="panel" aria-labelledby="page-title">
|
||||
<h1 id="page-title">管理端登录</h1>
|
||||
<p class="lead">使用采购管理员账号继续</p>
|
||||
<form id="login-form" novalidate>
|
||||
<div id="summary" class="error-summary" role="alert" tabindex="-1"></div>
|
||||
<div class="field">
|
||||
<label for="account">账号</label>
|
||||
<input id="account" name="account" autocomplete="username" autofocus>
|
||||
<p id="account-error" class="field-error"></p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">密码</label>
|
||||
<div class="password-wrap">
|
||||
<input id="password" name="password" type="password" autocomplete="current-password">
|
||||
<button class="reveal" id="reveal" type="button" aria-controls="password" aria-pressed="false">显示</button>
|
||||
</div>
|
||||
<p id="password-error" class="field-error"></p>
|
||||
</div>
|
||||
<button class="submit" id="submit" type="submit">登录</button>
|
||||
</form>
|
||||
<div class="demo-tools" aria-label="原型状态">
|
||||
<button type="button" data-state="credentials">账号错误</button>
|
||||
<button type="button" data-state="network">网络错误</button>
|
||||
<button type="button" data-state="expired">会话过期</button>
|
||||
<button type="button" data-state="reset">重置</button>
|
||||
</div>
|
||||
<p class="hint">原型状态按钮用于确认错误文案和焦点，不代表生产功能。</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script>
|
||||
const form = document.querySelector('#login-form');
|
||||
const account = document.querySelector('#account');
|
||||
const password = document.querySelector('#password');
|
||||
const submit = document.querySelector('#submit');
|
||||
const summary = document.querySelector('#summary');
|
||||
const accountError = document.querySelector('#account-error');
|
||||
const passwordError = document.querySelector('#password-error');
|
||||
|
||||
function clearErrors() {
|
||||
summary.style.display = 'none';
|
||||
summary.textContent = '';
|
||||
accountError.textContent = '';
|
||||
passwordError.textContent = '';
|
||||
}
|
||||
|
||||
function showSummary(message) {
|
||||
summary.textContent = message;
|
||||
summary.style.display = 'block';
|
||||
summary.focus();
|
||||
}
|
||||
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
clearErrors();
|
||||
if (!account.value.trim() || !password.value) {
|
||||
if (!account.value.trim()) accountError.textContent = '请输入账号。';
|
||||
if (!password.value) passwordError.textContent = '请输入密码。';
|
||||
showSummary('请检查并补全必填项。');
|
||||
(!account.value.trim() ? account : password).focus();
|
||||
return;
|
||||
}
|
||||
submit.disabled = true;
|
||||
submit.textContent = '正在登录…';
|
||||
window.setTimeout(() => {
|
||||
submit.disabled = false;
|
||||
submit.textContent = '登录';
|
||||
showSummary('原型：登录成功后进入任务列表。');
|
||||
}, 650);
|
||||
});
|
||||
|
||||
document.querySelector('#reveal').addEventListener('click', (event) => {
|
||||
const showing = password.type === 'text';
|
||||
password.type = showing ? 'password' : 'text';
|
||||
event.currentTarget.textContent = showing ? '显示' : '隐藏';
|
||||
event.currentTarget.setAttribute('aria-pressed', String(!showing));
|
||||
});
|
||||
|
||||
document.querySelector('.demo-tools').addEventListener('click', (event) => {
|
||||
const state = event.target.dataset.state;
|
||||
if (!state) return;
|
||||
clearErrors();
|
||||
if (state === 'credentials') showSummary('账号或密码不正确。');
|
||||
if (state === 'network') {
|
||||
password.value = '';
|
||||
showSummary('网络连接失败，密码已清空。请检查网络后重试。');
|
||||
}
|
||||
if (state === 'expired') showSummary('登录已过期，请重新登录后继续访问原页面。');
|
||||
if (state === 'reset') {
|
||||
account.value = '';
|
||||
password.value = '';
|
||||
account.focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user