beppeb/demo-ai-develops
1
0
Fork 0
generated from templates/ai-develops
Code Issues 1 Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Compare commits

base: beppeb:main
Branches Tags
beppeb:main beppeb:dev-feature beppeb:dev1 beppeb:dev-feature-mcp
beppeb:merge-temp
..
compare: beppeb:dev1
Branches Tags
beppeb:main beppeb:dev-feature beppeb:dev1 beppeb:dev-feature-mcp
beppeb:merge-temp

4 Commits
main ... dev1

Author SHA1 Message Date
潘舒啸
3cbb00a95b Add static/js/login.js from workspace
All checks were successful
ai-reviews / review (pull_request) Successful in 2m17s
Details
2001-01-01 00:00:00 +00:00
潘舒啸
966fbea307 Add static/css/style.css from workspace 2001-01-01 00:00:00 +00:00
潘舒啸
6468fe661a Add login.html from workspace 2001-01-01 00:00:00 +00:00
潘舒啸
4bfb449865 Add index.html from workspace 2001-01-01 00:00:00 +00:00
5 changed files with 147 additions and 1 deletions
Expand all files Collapse all files

3
.vscode/mcp.json vendored
View File

@@ -1,4 +1,5 @@
{ {
"mcp": {
"inputs": [ "inputs": [
{ {
"type": "promptString", "type": "promptString",
@@ -26,5 +27,5 @@
} }
} }
} }
}
} }

40
index.html Normal file
View File

@@ -0,0 +1,40 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Demo - 主页</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<main class="container">
<header>
<h1>Demo 应用</h1>
</header>
<section id="content">
<p id="greeting">正在检查登录状态……</p>
<div id="actions"></div>
</section>
</main>
<script>
// 简单客户端令牌检查
const token = localStorage.getItem('demo_auth_token');
const greeting = document.getElementById('greeting');
const actions = document.getElementById('actions');
if (token) {
greeting.textContent = '欢迎，已登录用户！';
const logoutBtn = document.createElement('button');
logoutBtn.textContent = '退出登录';
logoutBtn.onclick = () => {
localStorage.removeItem('demo_auth_token');
location.reload();
};
actions.appendChild(logoutBtn);
} else {
greeting.innerHTML = '你还未登录。前往 <a href="/login.html">登录页面</a>。';
}
</script>
</body>
</html>

34
login.html Normal file
View File

@@ -0,0 +1,34 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>登录 - Demo</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<main class="container">
<form id="loginForm" class="card">
<h2>用户登录</h2>
<div class="form-group">
<label for="username">用户名</label>
<input id="username" name="username" type="text" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input id="password" name="password" type="password" placeholder="请输入密码" required>
</div>
<div class="form-group row">
<label><input id="remember" type="checkbox"> 记住我</label>
</div>
<div class="form-group">
<div id="error" class="error" aria-live="polite"></div>
</div>
<div class="form-group">
<button type="submit">登录</button>
</div>
</form>
</main>
<script src="/static/js/login.js"></script>
</body>
</html>

20
static/css/style.css Normal file
View File

@@ -0,0 +1,20 @@
:root{
--bg:#f4f7fb;
--card:#ffffff;
--accent:#1976d2;
--muted:#666;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;color:#222}
.container{max-width:520px;padding:20px;margin:48px auto}
.card{background:var(--card);padding:20px;border-radius:8px;box-shadow:0 6px 18px rgba(20,30,50,0.08)}
h1,h2{margin:0 0 12px}
.form-group{margin:12px 0}
label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}
input[type=text],input[type=password]{width:100%;padding:10px 12px;border:1px solid #d9e2ef;border-radius:6px;font-size:15px}
button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:6px;font-size:15px;cursor:pointer}
.error{color:#b00020;font-size:14px;min-height:18px}
@media (max-width:520px){
.container{margin:20px;padding:12px}
}

51
static/js/login.js Normal file
View File

@@ -0,0 +1,51 @@
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('loginForm');
const username = document.getElementById('username');
const password = document.getElementById('password');
const remember = document.getElementById('remember');
const error = document.getElementById('error');
function showError(msg){
error.textContent = msg;
}
function validate() {
if (!username.value || username.value.trim().length < 3) {
showError('用户名至少 3 个字符');
return false;
}
if (!password.value || password.value.length < 6) {
showError('密码至少 6 个字符');
return false;
}
return true;
}
form.addEventListener('submit', (e) => {
e.preventDefault();
showError('');
if (!validate()) return;
// 本地模拟认证：示例用户名/密码对
const validUsers = { 'alice':'password123', 'bob':'secret123', 'beppeb':'demoPass' };
const inputUser = username.value.trim();
const inputPass = password.value;
if (validUsers[inputUser] && validUsers[inputUser] === inputPass) {
// 登录成功：写入本地 token（示例）并跳转首页
const token = 'demo-token-' + Math.random().toString(36).slice(2);
if (remember.checked) {
localStorage.setItem('demo_auth_token', token);
} else {
sessionStorage.setItem('demo_auth_token', token);
// keep a copy in localStorage to let index.html detect login; it's demo-only
localStorage.setItem('demo_auth_token', token);
}
// 简短提示后跳转
showError('登录成功，正在跳转……');
setTimeout(() => { window.location.href = '/'; }, 700);
} else {
showError('用户名或密码不正确（此示例使用本地模拟账号）。');
}
});
});