cqcst/xbxs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善代码，应该可以进行签到了，就差测试了

Browse Source
This commit is contained in:
zhilv
2025-12-16 22:39:42 +08:00
parent 366ab0b2e8
commit 66199c8130
16 changed files with 353 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
templates/auth.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-zinc-100">
<!-- App 容器 -->
<div class="mx-auto max-w-md min-h-screen bg-white relative">
<!-- 主内容 -->
<main class="pb-20">
{% block content %}{% endblock %}
</main>
</div>
</body>
</html>

3
templates/base.html
View File

@@ -14,10 +14,11 @@
<div class="mx-auto max-w-md min-h-screen bg-white relative">
<!-- 主内容 -->
<main class="pb-20">
<main class="pt-6 pb-20">
{% block content %}{% endblock %}
</main>
<!-- 底部 Tab -->
<nav class="fixed bottom-0 left-1/2 -translate-x-1/2
w-full max-w-md

2
templates/home.html
View File

@@ -6,6 +6,8 @@
<h1 class="text-xl font-bold">应用</h1>
<hr>
<!-- 签到 App 卡片 -->
<a href="/sign" class="block bg-blue-500 text-white rounded-2xl p-6 shadow
active:scale-95 transition">

125
templates/login.html
View File

@@ -1,55 +1,116 @@
<!DOCTYPE html>
<html lang="zh-CN">
{% extends "auth.html" %}
<head>
<meta charset="UTF-8" />
<title>登录</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
{% block title %}登录{% endblock %}
<body class="min-h-screen flex items-center justify-center bg-gray-100">
{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
<div class="w-full max-w-sm bg-white rounded-xl shadow-lg p-8">
<h2 class="text-2xl font-bold text-center mb-6">登录</h2>
<div class="w-full max-w-sm bg-white rounded-2xl shadow-xl p-8 relative">
<!-- Logo / 标题 -->
<div class="text-center mb-6">
<div
class="mx-auto w-14 h-14 flex items-center justify-center rounded-full bg-blue-600 text-white text-xl font-bold shadow">
北
</div>
<h2 class="text-2xl font-bold mt-4">小北学生系统</h2>
<p class="text-sm text-gray-500 mt-1">
校园签到 · 数据可视化 · 自动化
</p>
</div>
<!-- 表单 -->
<div class="space-y-4">
<input id="username" type="text" placeholder="用户名"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring" />
<!-- 用户名 -->
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
👤
</span>
<input id="username" type="text" placeholder="用户名"
class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring focus:ring-blue-200" />
</div>
<input id="password" type="password" placeholder="密码"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring" />
<!-- 密码 -->
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
🔒
</span>
<input id="password" type="password" placeholder="密码"
class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring focus:ring-blue-200" />
</div>
<button onclick="login()"
class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
登录
<!-- 登录按钮 -->
<button id="login-btn"
class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition disabled:opacity-60 flex items-center justify-center gap-2">
<span id="btn-text">登录</span>
<svg id="loading" class="hidden w-5 h-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
</svg>
</button>
</div>
<p id="error" class="text-red-500 text-sm mt-4 hidden"></p>
<!-- 错误提示 -->
<p id="error" class="text-red-500 text-sm mt-4 text-center hidden animate-pulse"></p>
<!-- 底部 -->
<div class="mt-6 text-center text-xs text-gray-400">
&copy; {{ year }} 小北 · 学生服务系统
</div>
</div>
<script>
async function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
</div>
<script>
const btn = document.getElementById("login-btn")
const btnText = document.getElementById("btn-text")
const loading = document.getElementById("loading")
const errorBox = document.getElementById("error")
async function login() {
const username = document.getElementById("username").value.trim()
const password = document.getElementById("password").value.trim()
if (!username || !password) {
showError("请输入用户名和密码")
return
}
btn.disabled = true
btnText.innerText = "登录中"
loading.classList.remove("hidden")
try {
const res = await fetch("/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
})
if (res.ok) {
window.location.href = "/home";
window.location.href = "/home"
} else {
document.getElementById("error").innerText = "登录失败";
document.getElementById("error").classList.remove("hidden");
showError("用户名或密码错误")
}
} catch {
showError("网络异常，请稍后再试")
} finally {
btn.disabled = false
btnText.innerText = "登录"
loading.classList.add("hidden")
}
</script>
}
</body>
function showError(msg) {
errorBox.innerText = msg
errorBox.classList.remove("hidden")
}
</html>
// 事件绑定
btn.addEventListener("click", login)
document.addEventListener("keydown", e => {
if (e.key === "Enter") login()
})
</script>
{% endblock %}

4
templates/profile.html
View File

@@ -4,6 +4,10 @@
{% block content %}
<div class="p-4 space-y-6">
<h1 class="text-xl font-bold">个人信息</h1>
<hr>
<!-- 头像 + 名字 -->
<div class="bg-gradient-to-r from-blue-500 to-indigo-500
rounded-2xl p-6 text-white">

148
templates/sign_detail.html
View File

@@ -3,72 +3,160 @@
{% block title %}签到详情{% endblock %}
{% block content %}
<div class="p-4 space-y-4">
<div class="p-4 max-w-xl mx-auto space-y-6">
<!-- 标题 -->
<!-- 顶部 -->
<div class="flex justify-between items-center">
<h1 class="text-xl font-bold">签到详情</h1>
<a href="/sign" class="text-sm text-blue-500 hover:underline">返回签到列表</a>
</div>
<hr />
<hr>
<!-- 详情信息 -->
<div class="space-y-4">
<!-- 基本信息 -->
<div class="space-y-3 text-sm">
<div>
<span class="text-zinc-500">签到名称</span>
<div class="font-medium">{{ knowing_name }}</div>
</div>
<div>
<span class="text-zinc-500">日期</span>
<div class="font-medium">{{ start_date }}</div>
</div>
<div>
<span class="text-zinc-500">时间</span>
<div class="font-medium">{{ start_time }} - {{ end_time }}</div>
<div class="font-medium">
{{ start_date }} {{ start_time }} - {{ end_time }}
</div>
</div>
<div>
<span class="text-zinc-500">发起人</span>
<div class="font-medium">{{ send_name }} ({{ send_role }})</div>
<div class="font-medium">
{{ send_name }}（{{ send_role }}）
</div>
</div>
<div>
<!-- <div>
<span class="text-zinc-500">签到状态</span>
<div class="font-medium">
{% if is_finish_know == 1 %}
<span class="text-green-600">已签到</span>
{% elif is_check == 1 %}
<span class="text-green-600">已签到</span>
{% else %}
<span class="text-red-600">未签到</span>
{% endif %}
</div>
</div> -->
<div>
<span class="text-zinc-500">是否需要拍照</span>
<div class="font-medium">
{{ "是" if is_picture == 0 else "否" }}
</div>
</div>
</div>
<!-- 签到表单 -->
{% if is_finish_know == 0 and is_check == 0 %}
<form method="POST" action="/sign/{{ know_id }}/complete" enctype="multipart/form-data"
class="space-y-4 border rounded-lg p-4 bg-zinc-50">
<!-- 地点选择 -->
<div>
<label class="block text-sm font-medium text-zinc-700 mb-1">
签到地点
</label>
<select id="location-select" class="w-full p-2 border rounded-md bg-white">
<option value="">请选择预设地点</option>
{% for loc in locations %}
<option value="{{ loc.longitude }}:{{ loc.latitude }}" data-address="{{ loc.location }}">
{{ loc.alias }}（{{ loc.radius }}m）
</option>
{% endfor %}
<option value="custom">📍 自定义地点</option>
</select>
</div>
<!-- 自定义地点 -->
<div id="custom-location" class="hidden space-y-2">
<div>
<label class="block text-sm text-zinc-600">
经度:纬度
</label>
<input type="text" id="custom-location-value" class="w-full p-2 border rounded-md"
placeholder="106.534597:29.341189">
</div>
<div>
<label class="block text-sm text-zinc-600">
地址描述
</label>
<input type="text" id="custom-address" class="w-full p-2 border rounded-md" placeholder="请输入签到地址">
</div>
</div>
<!-- 实际提交字段 -->
<input type="hidden" name="location" id="location" required>
<input type="hidden" name="address" id="address" required>
<!-- 备注 -->
<div>
<label class="block text-sm font-medium text-zinc-700 mb-1">
备注（必填）
</label>
<textarea name="remark" class="w-full p-2 border rounded-md" rows="3" placeholder="请输入备注"
required></textarea>
</div>
<!-- 图片上传 -->
{% if is_picture == 1 %}
<div>
<span class="text-zinc-500">签到需要拍照</span>
<div class="font-medium">是</div>
</div>
{% else %}
<div>
<span class="text-zinc-500">签到需要拍照</span>
<div class="font-medium">否</div>
<label class="block text-sm font-medium text-zinc-700 mb-1">
上传图片（可多张）
</label>
<input type="file" name="images" multiple accept="image/*" class="w-full p-2 border rounded-md bg-white">
</div>
{% endif %}
</div>
<!-- 完成签到按钮 -->
{% if is_finish_know == 0 and is_check == 0 %}
<div class="mt-4">
<form method="post" action="/sign/{{ know_id }}/complete">
<button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-lg">完成签到</button>
</form>
</div>
<!-- 提交 -->
<button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
完成签到
</button>
</form>
{% endif %}
</div>
<script>
const select = document.getElementById("location-select")
const customBox = document.getElementById("custom-location")
select?.addEventListener("change", function () {
const value = this.value
if (value === "custom") {
customBox.classList.remove("hidden")
document.getElementById("location").value = ""
document.getElementById("address").value = ""
return
}
customBox.classList.add("hidden")
if (!value) return
const opt = this.options[this.selectedIndex]
document.getElementById("location").value = value
document.getElementById("address").value = opt.dataset.address
})
document.getElementById("custom-location-value")?.addEventListener("input", e => {
document.getElementById("location").value = e.target.value
})
document.getElementById("custom-address")?.addEventListener("input", e => {
document.getElementById("address").value = e.target.value
})
</script>
{% endblock %}