192 lines
6.0 KiB
HTML
192 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>WorkPod</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: #1a1a2e;
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.container { width: 90%; max-width: 400px; padding: 20px; }
|
|
.logo {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
.logo h1 {
|
|
font-size: 28px;
|
|
color: #fff;
|
|
margin-bottom: 8px;
|
|
}
|
|
.logo p { color: #888; font-size: 14px; }
|
|
.card {
|
|
background: #16213e;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
}
|
|
.input-group { margin-bottom: 16px; }
|
|
.input-group label {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #aaa;
|
|
margin-bottom: 6px;
|
|
}
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
background: #0f3460;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.input-group input:focus { border-color: #e94560; }
|
|
.btn {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.btn-primary {
|
|
background: #e94560;
|
|
color: #fff;
|
|
}
|
|
.btn-primary:hover { opacity: 0.85; }
|
|
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.error {
|
|
color: #e94560;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
margin-top: 12px;
|
|
display: none;
|
|
}
|
|
.hidden { display: none !important; }
|
|
.workspaces {
|
|
margin-top: 20px;
|
|
}
|
|
.workspaces h3 {
|
|
font-size: 16px;
|
|
color: #aaa;
|
|
margin-bottom: 12px;
|
|
}
|
|
.workspace-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 16px;
|
|
margin-bottom: 8px;
|
|
background: #0f3460;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.workspace-item:hover { border-color: #e94560; }
|
|
.workspace-item .name { font-weight: 600; }
|
|
.workspace-item .desc { font-size: 12px; color: #888; margin-top: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 登录页 -->
|
|
<div class="container" id="loginView">
|
|
<div class="logo">
|
|
<h1>WorkPod</h1>
|
|
<p>Web Terminal Access</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="input-group">
|
|
<label>访问密码</label>
|
|
<input type="password" id="password" placeholder="请输入密码" autocomplete="off">
|
|
</div>
|
|
<button class="btn btn-primary" id="loginBtn" onclick="login()">登录</button>
|
|
<div class="error" id="loginError">密码错误</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工作空间选择页 -->
|
|
<div class="container hidden" id="workspaceView">
|
|
<div class="logo">
|
|
<h1>WorkPod</h1>
|
|
<p>选择工作空间</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="workspaces">
|
|
<h3>可用终端</h3>
|
|
<a class="workspace-item" onclick="openTerminal('')">
|
|
<div class="name">默认工作区</div>
|
|
<div class="desc">/workspace</div>
|
|
</a>
|
|
<a class="workspace-item" onclick="openTerminal('hszd')">
|
|
<div class="name">华商智地</div>
|
|
<div class="desc">/workspace/wk-hszd</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var token = localStorage.getItem('wk_token') || '';
|
|
|
|
// 已有 token 则直接显示工作空间
|
|
if (token) {
|
|
showWorkspaces();
|
|
}
|
|
|
|
// 回车登录
|
|
document.getElementById('password').addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter') login();
|
|
});
|
|
|
|
function login() {
|
|
var password = document.getElementById('password').value;
|
|
if (!password) return;
|
|
|
|
var btn = document.getElementById('loginBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = '验证中...';
|
|
|
|
fetch('/auth/check?t=' + Date.now(), {
|
|
headers: { 'Authorization': 'Basic ' + btoa('wk:' + password) }
|
|
}).then(function(r) {
|
|
if (r.ok) return r.text();
|
|
throw new Error();
|
|
}).then(function(t) {
|
|
token = t.trim();
|
|
localStorage.setItem('wk_token', token);
|
|
showWorkspaces();
|
|
}).catch(function() {
|
|
document.getElementById('loginError').style.display = 'block';
|
|
btn.disabled = false;
|
|
btn.textContent = '登录';
|
|
});
|
|
}
|
|
|
|
function showWorkspaces() {
|
|
document.getElementById('loginView').classList.add('hidden');
|
|
document.getElementById('workspaceView').classList.remove('hidden');
|
|
}
|
|
|
|
function openTerminal(path) {
|
|
var url = path ? '/' + path + '/?token=' + token : '/?token=' + token;
|
|
window.location.href = url;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|