619 lines
21 KiB
HTML
619 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>网易大神审核数据监控看板 - 登录</title>
|
||
<link rel="icon" href="/static/ds-favicon.ico" type="image/x-icon">
|
||
<style>
|
||
:root {
|
||
--primary-color: #1890ff;
|
||
--primary-hover: #40a9ff;
|
||
--primary-active: #096dd9;
|
||
--text-color: #333;
|
||
--text-secondary: #666;
|
||
--border-color: #e8e8e8;
|
||
--background-color: #f5f7fa;
|
||
--card-background: #ffffff;
|
||
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
--info-bg: #e6f7ff;
|
||
--info-border: #91d5ff;
|
||
--error-color: #ff4d4f;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||
background-color: #f0f2f5;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||
width: 80%;
|
||
max-width: 800px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
margin: 20px auto;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.container:hover {
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.left-panel {
|
||
flex: 0.8;
|
||
background-color: #1890ff;
|
||
padding: 1.8rem;
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
}
|
||
|
||
.left-panel::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
||
z-index: 1;
|
||
}
|
||
|
||
.left-panel h1 {
|
||
font-size: 1.6rem; /* 减小标题字体 */
|
||
margin-bottom: 1rem;
|
||
color: white;
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
white-space: nowrap; /* 防止标题换行 */
|
||
letter-spacing: -0.5px; /* 稍微调整字间距 */
|
||
}
|
||
|
||
.left-panel p {
|
||
font-size: 0.9rem; /* 进一步减小描述文字 */
|
||
margin-bottom: 1.2rem;
|
||
line-height: 1.4;
|
||
opacity: 0.9;
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.feature-list {
|
||
list-style: none;
|
||
margin-top: 1.2rem;
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: left;
|
||
font-size: 0.85rem; /* 减小列表字体 */
|
||
padding-left: 0.5rem; /* 添加左侧内边距 */
|
||
}
|
||
|
||
.feature-list li {
|
||
margin-bottom: 0.7rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.feature-list li::before {
|
||
content: "✓";
|
||
display: inline-block;
|
||
margin-right: 8px;
|
||
font-weight: bold;
|
||
color: #52c41a;
|
||
background: white;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.right-panel {
|
||
flex: 1.2; /* 增加右侧面板比例 */
|
||
padding: 1.8rem;
|
||
background-color: white;
|
||
}
|
||
|
||
.logo {
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.logo img {
|
||
width: 80px;
|
||
height: auto;
|
||
}
|
||
|
||
h2 {
|
||
color: var(--text-color);
|
||
margin-top: 0;
|
||
margin-bottom: 1rem;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
h2::before {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
background-color: var(--primary-color);
|
||
margin-right: 8px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 0.4rem;
|
||
color: var(--text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
input[type="text"] {
|
||
width: 100%;
|
||
padding: 0.7rem 1rem;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px;
|
||
box-sizing: border-box;
|
||
font-size: 0.9rem;
|
||
transition: all 0.3s;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
input[type="text"]:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
background-color: #fff;
|
||
}
|
||
|
||
select:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
background-color: #fff;
|
||
}
|
||
|
||
button[type="submit"] {
|
||
background-color: var(--primary-color);
|
||
border: none;
|
||
color: white;
|
||
padding: 0.8rem 1.5rem;
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
font-size: 0.95rem;
|
||
width: 100%;
|
||
margin-top: 1.2rem;
|
||
transition: all 0.3s;
|
||
font-weight: 500;
|
||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
|
||
}
|
||
|
||
button[type="submit"]:hover {
|
||
background-color: var(--primary-hover);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
|
||
}
|
||
|
||
button[type="submit"]:active {
|
||
background-color: var(--primary-active);
|
||
transform: translateY(0);
|
||
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.4);
|
||
}
|
||
|
||
.error {
|
||
color: var(--error-color);
|
||
margin-top: 1rem;
|
||
text-align: center;
|
||
padding: 0.8rem;
|
||
background-color: #fff2f0;
|
||
border: 1px solid #ffccc7;
|
||
border-radius: 6px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.info {
|
||
background: rgba(230, 247, 255, 0.9);
|
||
border: 1px solid rgba(24, 144, 255, 0.2);
|
||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
|
||
padding: 0.7rem 1rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 1rem;
|
||
color: #1a5fb4;
|
||
font-size: 0.75rem;
|
||
text-align: left;
|
||
line-height: 1.3;
|
||
position: relative;
|
||
padding-left: 2.5rem;
|
||
max-width: 95%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.info::before {
|
||
content: "ℹ️";
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 1rem; /* 调整图标位置 */
|
||
font-size: 1rem; /* 减小图标大小 */
|
||
color: #1890ff;
|
||
}
|
||
|
||
.input-icon {
|
||
position: relative;
|
||
}
|
||
|
||
.input-icon input {
|
||
padding-left: 2.5rem;
|
||
}
|
||
|
||
.input-icon::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 16px;
|
||
height: 16px;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.input-icon.user::before {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231890ff'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.input-icon.cookie::before {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231890ff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 1.5rem;
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.version {
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.cookie-guide {
|
||
text-align: center;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.cookie-guide a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-size: 0.85rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 4px;
|
||
background-color: rgba(24, 144, 255, 0.1);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.cookie-guide a:hover {
|
||
background-color: rgba(24, 144, 255, 0.2);
|
||
color: var(--primary-hover);
|
||
}
|
||
|
||
.cookie-guide a::before {
|
||
content: "🔗";
|
||
font-size: 1rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
width: 92%;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.left-panel {
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
|
||
.left-panel h1 {
|
||
font-size: 1.4rem;
|
||
white-space: normal; /* 在移动端允许换行 */
|
||
letter-spacing: normal;
|
||
}
|
||
|
||
.right-panel {
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
|
||
.feature-list {
|
||
font-size: 0.85rem;
|
||
}
|
||
}
|
||
|
||
/* 消息提示样式 - Element Plus 风格 */
|
||
.message-container {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 9999;
|
||
}
|
||
|
||
.message {
|
||
min-width: 380px;
|
||
box-sizing: border-box;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
position: relative;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
padding: 15px 15px 15px 40px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: opacity 0.3s, transform .4s, top .4s;
|
||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||
animation: el-message-fade-in .3s;
|
||
}
|
||
|
||
.message::before {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
content: "";
|
||
width: 16px;
|
||
height: 16px;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.message.success {
|
||
background-color: #f0f9eb;
|
||
border-color: #e1f3d8;
|
||
color: #67c23a;
|
||
}
|
||
|
||
.message.success::before {
|
||
background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z' fill='%2367c23a'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.message.warning {
|
||
background-color: #fdf6ec;
|
||
border-color: #faecd8;
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.message.warning::before {
|
||
background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z' fill='%23e6a23c'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.message.info {
|
||
background-color: #edf2fc;
|
||
border-color: #ebeef5;
|
||
color: #909399;
|
||
}
|
||
|
||
.message.info::before {
|
||
background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z' fill='%23909399'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.message.error {
|
||
background-color: #fef0f0;
|
||
border-color: #fde2e2;
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.message.error::before {
|
||
background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z' fill='%23f56c6c'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
@keyframes el-message-fade-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate(-50%, -100%);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes el-message-fade-out {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
max-height: 150px;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translate(-50%, -100%);
|
||
max-height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.message.fade-out {
|
||
animation: el-message-fade-out .3s;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="messageContainer" class="message-container"></div>
|
||
<div class="container">
|
||
<div class="left-panel">
|
||
<h1>网易大神审核数据监控看板</h1>
|
||
<p>高效、实时的审核数据分析平台，为您提供全面的数据监控和统计服务。</p>
|
||
|
||
<ul class="feature-list">
|
||
<li>实时数据监控与分析</li>
|
||
<li>多系统数据整合</li>
|
||
<li>自动告警与通知</li>
|
||
<li>高效的数据可视化</li>
|
||
<li>安全的数据传输机制</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="right-panel">
|
||
<div class="logo">
|
||
<!-- 可以添加网易大神的logo -->
|
||
<!-- <img src="/static/logo.png" alt="网易大神"> -->
|
||
</div>
|
||
|
||
<div class="info">
|
||
注意：为保证数据安全，凭据仅在当前会话中使用，不会保存到本地文件。
|
||
每次重启系统后都需要重新登录，所有数据查询均为实时获取。
|
||
</div>
|
||
|
||
<div class="cookie-guide">
|
||
<a href="http://cos.ui-beam.com/work_scripts/monitor/cookie-extension/README.html" target="_blank">如何获取Cookie？点击查看详细指南</a>
|
||
</div>
|
||
|
||
{% if error %}
|
||
<div class="error">{{ error }}</div>
|
||
{% endif %}
|
||
|
||
<form id="loginForm" method="post">
|
||
<div class="section">
|
||
<h2>账号信息</h2>
|
||
<div class="form-group">
|
||
<label for="username">工号:</label>
|
||
<div class="input-icon user">
|
||
<input type="text" id="username" name="username" required onkeyup="this.value = this.value.toUpperCase();" style="text-transform: uppercase;" placeholder="请输入您的工号">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>后端选择</h2>
|
||
<div class="form-group">
|
||
<label for="backend_type">选择后端类型:</label>
|
||
<div class="input-icon">
|
||
<select id="backend_type" name="backend_type" required style="width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.9rem; background-color: #fafafa;">
|
||
<option value="breeze_monitor_CHAT">Breeze监控 - 带清风文本</option>
|
||
<option value="breeze_monitor">Breeze监控 - 不带清风文本</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>Breeze工单系统凭据</h2>
|
||
<div class="form-group">
|
||
<label for="breeze_cookie">Breeze Cookie:</label>
|
||
<div class="input-icon cookie">
|
||
<input type="text" id="breeze_cookie" name="breeze_cookie" required placeholder="请输入Breeze系统Cookie">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>CMS系统凭据</h2>
|
||
<div class="form-group">
|
||
<label for="cms_cookie">CMS Cookie:</label>
|
||
<div class="input-icon cookie">
|
||
<input type="text" id="cms_cookie" name="cms_cookie" required placeholder="请输入CMS系统Cookie">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit">登 录</button>
|
||
</form>
|
||
|
||
<div class="footer">
|
||
<div>© 2025 网易大神审核数据监控看板</div>
|
||
<div class="version">{{ version }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 消息提示函数
|
||
function showMessage(type, content) {
|
||
const container = document.getElementById('messageContainer');
|
||
const message = document.createElement('div');
|
||
message.className = `message ${type}`;
|
||
message.textContent = content;
|
||
container.appendChild(message);
|
||
|
||
// 3秒后自动移除消息
|
||
setTimeout(() => {
|
||
message.addEventListener('animationend', () => {
|
||
container.removeChild(message);
|
||
});
|
||
}, 3000);
|
||
}
|
||
|
||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const formData = new FormData(this);
|
||
|
||
fetch('/login', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.code === 0 || data.success) { // 兼容两种成功状态
|
||
localStorage.setItem('staff_name', data.staff_name);
|
||
showMessage('info', '登录成功，正在跳转...');
|
||
setTimeout(() => {
|
||
window.location.href = data.redirect || '/dashboard'; // 兼容两种跳转方式
|
||
}, 1000);
|
||
} else {
|
||
showMessage('error', data.message || '登录失败，请重试');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
showMessage('error', '登录请求失败，请重试');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |