You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
4.8 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每周动态人员授权工具</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
margin: 0;
padding: 24px 16px;
background: #0b0f14;
color: #e5e7eb;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial;
min-height: 100vh;
}
.container { max-width: 1100px; margin: auto; }
.card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 20px;
margin-bottom: 14px;
}
h2 { margin: 0 0 12px 0; font-size: 20px; }
.badge {
display: inline-block;
font-size: 12px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(59,130,246,0.15);
border: 1px solid rgba(59,130,246,0.35);
color: #60a5fa;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 12px;
}
input {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
background: #111827;
border: 1px solid rgba(255,255,255,0.12);
color: #e5e7eb;
outline: none;
font-size: 14px;
}
input:focus { border-color: #2563eb; }
.btn-group { display: flex; gap: 10px; margin-top: 14px; }
button {
flex: 1;
padding: 10px 14px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: 0.15s;
}
.btn-auth { background: #2563eb; color: white; }
.btn-auth:hover { background: #1d4ed8; }
.btn-rebuild { background: #f59e0b; color: #0b0f14; }
.btn-rebuild:hover { background: #d97706; }
.msg { color: #60a5fa; font-size: 13px; }
.error { color: #f87171; }
.sql-header { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
.sql-header .msg { font-size: 13px; color: #9ca3af; }
.copy-btn {
margin-left: auto;
padding: 4px 10px;
font-size: 12px;
height: 26px;
border-radius: 999px;
background: rgba(34,197,94,0.15);
color: #22c55e;
border: 1px solid rgba(34,197,94,0.3);
cursor: pointer;
}
.copy-btn:hover { background: rgba(34,197,94,0.25); }
pre {
margin: 0;
padding: 14px;
background: #0f172a;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: auto;
color: #e5e7eb;
font-size: 13px;
line-height: 1.5;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
}
.hint { font-size: 12px; color: #9ca3af; margin-top: 8px; }
#toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
display: none;
z-index: 9999;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
color: #0b0f14;
}
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
body { padding: 16px 12px; }
.btn-group { flex-direction: column; }
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>📌 每周动态人员授权工具 <span class="badge">MySQL · SQL Generator</span></h2>
<div class="hint">输入中心名称 + 8位工号生成授权或重复处理SQL</div>
</div>
<div class="card">
<form method="post">
<div class="grid">
<input name="center_name" placeholder="中心名称(如:新闻新媒体中心)" value="{{ center_name or '' }}" required>
<input name="emp_id" placeholder="工作证号8位数字如00313390" value="{{ emp_id or '' }}" required>
</div>
<div class="btn-group">
<button class="btn-auth" type="submit" name="action" value="auth">授权SQL</button>
<button class="btn-rebuild" type="submit" name="action" value="rebuild">重复处理SQL</button>
</div>
</form>
{% if message %}
<div class="msg {% if '错误' in message %}error{% endif %}">{{ message }}</div>
{% endif %}
</div>
{% if sql_text %}
<div class="card sql-box">
<div class="sql-header">
<div class="msg">生成结果</div>
<button class="copy-btn" onclick="copySQL()">一键复制</button>
</div>
<pre id="sql">{{ sql_text }}</pre>
<div class="hint">⚠ SQL为模板生成请确认业务环境后执行</div>
</div>
{% endif %}
</div>
<div id="toast"></div>
<script>
function showToast(msg, type="success"){
const t = document.getElementById("toast");
t.innerText = msg;
t.style.background = type === "error" ? "rgba(248,113,113,0.95)" : "rgba(34,197,94,0.95)";
t.style.display = "block";
setTimeout(() => t.style.display = "none", 1500);
}
function copySQL(){
const el = document.getElementById("sql");
if(!el){ showToast("没有可复制内容", "error"); return; }
navigator.clipboard.writeText(el.innerText).then(() => showToast("复制成功")).catch(() => showToast("复制失败", "error"));
}
</script>
</body>
</html>