cykj/shanxia2.0
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: add web-admin WeChat QR phone login design.

Browse Source 
Record the shanxia-shell + zkxw-tab dual-mode login approach (mini program code, session poll, phone_no match) with an interactive HTML demo for review.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-09-18 18:08:11 +08:00
1 parent 1ba1f38321
commit ef8b59d23c
2 files changed
+782
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/demos/web-admin-login-wx-qr-demo.html
+479
View File
@@ -0,0 +1,479 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>山峡一体化门户 · 登录页 Demo（扫码 + 账号密码）</title>
<style>
:root {
--primary: #10b981;
--primary-dark: #059669;
--primary-bg: #ecfdf5;
--text: #1e293b;
--muted: #64748b;
--border: #e5e7eb;
--danger: #dc2626;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
color: var(--text);
min-height: 100vh;
}
.page {
min-height: 100vh;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 24px 200px 56px 24px;
position: relative;
background:
linear-gradient(120deg, rgba(15, 23, 42, 0.35), rgba(5, 150, 105, 0.25)),
radial-gradient(ellipse at 20% 30%, #86efac 0%, transparent 50%),
linear-gradient(135deg, #0f766e 0%, #134e4a 40%, #1e293b 100%);
background-size: cover;
background-position: center;
}
.page::before {
content: "";
position: absolute;
inset: 0;
background:
url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.06'%3E%3Cpath d='M0 0h60v60H0z'/%3E%3Cpath stroke='%23fff' stroke-width='1' d='M0 30h60M30 0v60'/%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
pointer-events: none;
}
.login-card {
width: 400px;
padding: 28px 28px 20px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
position: relative;
z-index: 1;
}
.brand {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 8px;
}
.brand-mark {
width: 180px;
height: 40px;
border-radius: 8px;
background: linear-gradient(90deg, var(--primary), var(--primary-dark));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
letter-spacing: 2px;
font-size: 15px;
margin-bottom: 10px;
}
.brand h1 {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
}
.brand .hint {
font-size: 13px;
color: var(--muted);
text-align: center;
min-height: 20px;
margin-bottom: 16px;
}
.tabs {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
}
.tab {
appearance: none;
border: 0;
background: transparent;
padding: 12px 8px;
font-size: 15px;
color: var(--muted);
cursor: pointer;
position: relative;
font-family: inherit;
}
.tab:hover { color: var(--primary); }
.tab.active {
color: var(--primary-dark);
font-weight: 600;
}
.tab.active::after {
content: "";
position: absolute;
left: 16%;
right: 16%;
bottom: -1px;
height: 2px;
background: var(--primary);
border-radius: 2px;
}
.panel { display: none; }
.panel.active { display: block; }
.qr-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding-top: 4px;
}
.qr-frame {
width: 200px;
height: 200px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.qr-frame svg { width: 168px; height: 168px; }
.qr-overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.88);
display: none;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
font-size: 13px;
color: var(--muted);
}
.qr-overlay.show { display: flex; }
.qr-status {
font-size: 13px;
color: var(--muted);
text-align: center;
min-height: 20px;
}
.qr-status.error { color: var(--danger); }
.qr-status.ok { color: var(--primary-dark); }
.btn {
appearance: none;
border: 1px solid var(--border);
background: #fff;
color: var(--text);
border-radius: 8px;
height: 40px;
padding: 0 16px;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.btn-primary {
width: 100%;
height: 48px;
border: 0;
color: #fff;
font-size: 16px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.btn-primary:hover { opacity: 0.92; }
.field {
margin-bottom: 18px;
}
.field label {
display: block;
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.input {
width: 100%;
height: 44px;
border: 1px solid var(--border);
border-radius: 8px;
padding: 0 14px;
font-size: 15px;
background: rgba(255, 255, 255, 0.9);
font-family: inherit;
color: var(--text);
outline: none;
}
.input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-bg);
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 40px;
line-height: 40px;
text-align: center;
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
letter-spacing: 1px;
z-index: 2;
}
/* Demo controls */
.demo-bar {
position: fixed;
left: 20px;
top: 20px;
z-index: 10;
width: min(360px, calc(100vw - 40px));
background: rgba(15, 23, 42, 0.88);
color: #e2e8f0;
border-radius: 12px;
padding: 14px 16px;
font-size: 13px;
backdrop-filter: blur(8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.demo-bar h2 {
font-size: 14px;
margin-bottom: 8px;
color: #fff;
}
.demo-bar p {
color: #94a3b8;
line-height: 1.5;
margin-bottom: 10px;
}
.demo-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.demo-actions button {
appearance: none;
border: 1px solid #334155;
background: #1e293b;
color: #e2e8f0;
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
}
.demo-actions button:hover {
border-color: var(--primary);
color: #a7f3d0;
}
@media (max-width: 768px) {
.page {
justify-content: center;
padding: 72px 16px 64px;
}
.login-card { width: min(400px, 100%); }
.demo-bar {
left: 12px;
right: 12px;
width: auto;
}
}
</style>
</head>
<body>
<aside class="demo-bar">
<h2>登录页交互 Demo</h2>
<p>
默认「微信扫码」优先；可切换到「账号密码」。左侧按钮可模拟扫码各状态（仅演示，无真实接口）。
</p>
<div class="demo-actions">
<button type="button" data-sim="creating">生成中</button>
<button type="button" data-sim="pending">待扫码</button>
<button type="button" data-sim="scanned">已扫码</button>
<button type="button" data-sim="success">登录成功</button>
<button type="button" data-sim="expired">已过期</button>
<button type="button" data-sim="failed">失败</button>
</div>
</aside>
<div class="page">
<div class="login-card">
<div class="brand">
<div class="brand-mark">山峡化工</div>
<h1>山峡一体化门户</h1>
<p class="hint" id="subtitle">微信扫一扫，授权手机号后自动登录</p>
</div>
<div class="tabs" role="tablist">
<button type="button" class="tab active" data-tab="wechat" role="tab">微信扫码</button>
<button type="button" class="tab" data-tab="password" role="tab">账号密码</button>
</div>
<div class="panel active" id="panel-wechat" role="tabpanel">
<div class="qr-box">
<div class="qr-frame">
<!-- Decorative QR placeholder -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="100" height="100" fill="#fff"/>
<rect x="8" y="8" width="28" height="28" fill="#0f172a"/>
<rect x="14" y="14" width="16" height="16" fill="#fff"/>
<rect x="18" y="18" width="8" height="8" fill="#0f172a"/>
<rect x="64" y="8" width="28" height="28" fill="#0f172a"/>
<rect x="70" y="14" width="16" height="16" fill="#fff"/>
<rect x="74" y="18" width="8" height="8" fill="#0f172a"/>
<rect x="8" y="64" width="28" height="28" fill="#0f172a"/>
<rect x="14" y="70" width="16" height="16" fill="#fff"/>
<rect x="18" y="74" width="8" height="8" fill="#0f172a"/>
<rect x="44" y="8" width="8" height="8" fill="#0f172a"/>
<rect x="56" y="20" width="8" height="8" fill="#0f172a"/>
<rect x="44" y="32" width="8" height="8" fill="#0f172a"/>
<rect x="44" y="44" width="12" height="12" fill="#10b981"/>
<rect x="64" y="44" width="8" height="8" fill="#0f172a"/>
<rect x="80" y="44" width="8" height="8" fill="#0f172a"/>
<rect x="44" y="64" width="8" height="8" fill="#0f172a"/>
<rect x="56" y="72" width="8" height="8" fill="#0f172a"/>
<rect x="72" y="64" width="20" height="8" fill="#0f172a"/>
<rect x="72" y="80" width="8" height="12" fill="#0f172a"/>
<rect x="88" y="72" width="4" height="20" fill="#0f172a"/>
</svg>
<div class="qr-overlay" id="qrOverlay"></div>
</div>
<p class="qr-status" id="qrStatus">请使用微信扫一扫</p>
<button type="button" class="btn" id="refreshBtn">↻ 刷新二维码</button>
</div>
</div>
<div class="panel" id="panel-password" role="tabpanel">
<form id="pwdForm" onsubmit="return false;">
<div class="field">
<label for="username">用户名</label>
<input class="input" id="username" type="text" placeholder="请输入用户名" autocomplete="username" />
</div>
<div class="field">
<label for="password">密码</label>
<input class="input" id="password" type="password" placeholder="请输入密码" autocomplete="current-password" />
</div>
<button type="button" class="btn btn-primary" id="loginBtn">登 录</button>
</form>
</div>
</div>
</div>
<div class="footer">
Copyright © 2025–2026 山峡化工有限公司 All Rights Reserved.
</div>
<script>
const subtitle = document.getElementById('subtitle')
const qrStatus = document.getElementById('qrStatus')
const qrOverlay = document.getElementById('qrOverlay')
const tabs = document.querySelectorAll('.tab')
const panels = {
wechat: document.getElementById('panel-wechat'),
password: document.getElementById('panel-password')
}
const statusMap = {
creating: { text: '正在生成二维码…', cls: '', overlay: '生成中…' },
pending: { text: '请使用微信扫一扫', cls: '', overlay: '' },
scanned: { text: '已扫码，请在手机上确认授权', cls: 'ok', overlay: '已扫码\n请在手机确认' },
success: { text: '登录成功，正在跳转…', cls: 'ok', overlay: '✓ 登录成功' },
expired: { text: '二维码已过期，请刷新后重扫', cls: 'error', overlay: '已过期\n请刷新' },
failed: { text: '扫码登录失败，请刷新后重试', cls: 'error', overlay: '登录失败' }
}
function setQrStatus(key) {
const conf = statusMap[key] || statusMap.pending
qrStatus.textContent = conf.text
qrStatus.className = 'qr-status' + (conf.cls ? ' ' + conf.cls : '')
if (conf.overlay) {
qrOverlay.textContent = conf.overlay
qrOverlay.classList.add('show')
} else {
qrOverlay.classList.remove('show')
qrOverlay.textContent = ''
}
}
function switchTab(name) {
tabs.forEach((t) => t.classList.toggle('active', t.dataset.tab === name))
Object.keys(panels).forEach((k) => panels[k].classList.toggle('active', k === name))
subtitle.textContent =
name === 'wechat'
? '微信扫一扫，授权手机号后自动登录'
: '请输入账号密码登录系统'
}
tabs.forEach((tab) => {
tab.addEventListener('click', () => switchTab(tab.dataset.tab))
})
document.querySelectorAll('[data-sim]').forEach((btn) => {
btn.addEventListener('click', () => {
switchTab('wechat')
setQrStatus(btn.dataset.sim)
})
})
document.getElementById('refreshBtn').addEventListener('click', () => {
setQrStatus('creating')
setTimeout(() => setQrStatus('pending'), 600)
})
document.getElementById('loginBtn').addEventListener('click', () => {
const u = document.getElementById('username').value.trim()
const p = document.getElementById('password').value.trim()
if (!u || !p) {
alert('请输入用户名和密码（Demo 仅做前端校验）')
return
}
alert('Demo：账号密码登录成功（不会真实请求后端）')
})
setQrStatus('pending')
</script>
</body>
</html>