1134 lines
32 KiB
Python
1134 lines
32 KiB
Python
|
|
#!/usr/bin/env python3
|
|
"""
|
|
账单查询服务 - Flask版
|
|
从 zhangdan.db 读取数据，提供网页展示和API接口
|
|
"""
|
|
|
|
import sqlite3
|
|
import os
|
|
import sys
|
|
import signal
|
|
import hashlib
|
|
import secrets
|
|
import threading
|
|
import time
|
|
from urllib.request import urlopen
|
|
from urllib.error import URLError
|
|
from flask import Flask, render_template_string, jsonify, request, session, redirect, url_for
|
|
from flask_cors import CORS
|
|
|
|
# ===== 🔧 常量 =====
|
|
PORT = 5001
|
|
PID_FILE = os.path.join(os.path.dirname(os.path.abspath(__file__)), ".flask.pid")
|
|
|
|
# ===== 🔧 全局状态 =====
|
|
_server = None # werkzeug server 实例
|
|
_server_thread = None # 服务线程
|
|
_server_lock = threading.Event()
|
|
|
|
# 启动
|
|
def runwebui(web_port,web_passwd,datadb):
|
|
global AUTH_PASSWORD,DB_PATH,AUTH_COOKIE_MAX_AGE
|
|
try:
|
|
AUTH_PASSWORD = web_passwd
|
|
AUTH_COOKIE_MAX_AGE = 86400 * 1 # 1天免登录
|
|
DB_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), datadb)
|
|
start_server(host="0.0.0.0", port=web_port, debug=False )
|
|
except EOFError as e:
|
|
print(e)
|
|
|
|
|
|
def start_server(host="0.0.0.0", port=PORT, debug=False):
|
|
"""在子线程中启动 Flask 服务，主线程不受影响"""
|
|
global _server, _server_thread
|
|
|
|
if _server_thread and _server_thread.is_alive():
|
|
print("⚠️ 服务已在运行中")
|
|
return _server
|
|
|
|
from werkzeug.serving import make_server
|
|
|
|
_server = make_server(host, port, app, threaded=True)
|
|
_server_thread = threading.Thread(target=_server.serve_forever, daemon=True)
|
|
_server_thread.start()
|
|
_server_lock.set()
|
|
|
|
# 写 PID
|
|
with open(PID_FILE, "w") as f:
|
|
f.write(str(os.getpid()))
|
|
|
|
print(f"🚀 服务已启动 (子线程) → http://{host}:{port}")
|
|
return _server
|
|
|
|
|
|
def stop_server():
|
|
"""只关闭 Flask 子线程，主线程继续运行"""
|
|
global _server, _server_thread
|
|
|
|
if _server:
|
|
try:
|
|
_server.shutdown() # 优雅关闭 werkzeug server
|
|
except Exception:
|
|
pass
|
|
_server = None
|
|
|
|
if _server_thread and _server_thread.is_alive():
|
|
_server_thread.join(timeout=3)
|
|
_server_thread = None
|
|
|
|
_server_lock.clear()
|
|
|
|
# 清理 PID 文件
|
|
if os.path.exists(PID_FILE):
|
|
try:
|
|
os.remove(PID_FILE)
|
|
except OSError:
|
|
pass
|
|
|
|
print("🛑 Flask 服务已关闭（主线程仍在运行）")
|
|
|
|
|
|
def server_status():
|
|
"""检查 Flask 子线程是否在运行"""
|
|
alive = _server_thread is not None and _server_thread.is_alive()
|
|
return {"running": alive, "port": PORT}
|
|
|
|
app = Flask(__name__)
|
|
app.secret_key = secrets.token_hex(32)
|
|
CORS(app)
|
|
|
|
def check_auth():
|
|
"""检查是否已登录"""
|
|
return session.get("authenticated") is True
|
|
|
|
|
|
def login_required(f):
|
|
"""登录装饰器"""
|
|
from functools import wraps
|
|
@wraps(f)
|
|
def decorated(*args, **kwargs):
|
|
if not check_auth():
|
|
return redirect(url_for("login_page"))
|
|
return f(*args, **kwargs)
|
|
return decorated
|
|
|
|
def get_db():
|
|
conn = sqlite3.connect(DB_PATH)
|
|
conn.row_factory = sqlite3.Row
|
|
return conn
|
|
|
|
|
|
@app.route("/login", methods=["GET", "POST"])
|
|
def login_page():
|
|
error = None
|
|
if request.method == "POST":
|
|
pwd = request.form.get("password", "")
|
|
if pwd == AUTH_PASSWORD:
|
|
session["authenticated"] = True
|
|
session.permanent = True
|
|
app.permanent_session_lifetime = __import__("datetime").timedelta(seconds=AUTH_COOKIE_MAX_AGE)
|
|
return redirect(url_for("index"))
|
|
error = "密码不对哦，再试试 🤔"
|
|
return render_template_string(LOGIN_TEMPLATE, error=error)
|
|
|
|
|
|
@app.route("/logout")
|
|
def logout():
|
|
session.clear()
|
|
return redirect(url_for("login_page"))
|
|
|
|
|
|
# ===== 🔴 关机密令 =====
|
|
SHUTDOWN_TOKEN = "shutdown_2026"
|
|
|
|
|
|
@app.route("/shutdown")
|
|
def shutdown_server():
|
|
"""通过密令关闭服务，访问 /shutdown?token=xxx 即可关机"""
|
|
token = request.args.get("token", "")
|
|
if token != SHUTDOWN_TOKEN:
|
|
return "❌ 无效密令", 403
|
|
# 在新线程中关闭，避免阻塞当前请求
|
|
threading.Thread(target=stop_server, daemon=True).start()
|
|
return "🛑 服务已关闭"
|
|
|
|
|
|
@app.route("/")
|
|
@login_required
|
|
def index():
|
|
return render_template_string(HTML_TEMPLATE, shutdown_token=SHUTDOWN_TOKEN)
|
|
|
|
|
|
@app.route("/api/bills")
|
|
@login_required
|
|
def api_bills():
|
|
"""返回所有账单数据，支持排序和筛选"""
|
|
conn = get_db()
|
|
cur = conn.cursor()
|
|
|
|
# 筛选参数
|
|
payto = request.args.get("payto") # 收入/支出
|
|
payqd = request.args.get("payqd") # 渠道
|
|
paybox = request.args.get("paybox") # 钱包
|
|
paytype = request.args.get("paytype") # 交易类型
|
|
keyword = request.args.get("keyword") # 搜索关键词
|
|
date_from = request.args.get("date_from") # 起始日期
|
|
date_to = request.args.get("date_to") # 截止日期
|
|
|
|
# 排序参数
|
|
sort = request.args.get("sort", "paydate")
|
|
order = request.args.get("order", "DESC")
|
|
|
|
allowed_sorts = {
|
|
"paydate", "paysize", "paytype", "payname",
|
|
"payto", "paystu", "paybox", "payqd", "id"
|
|
}
|
|
if sort not in allowed_sorts:
|
|
sort = "paydate"
|
|
order = "ASC" if order.upper() == "ASC" else "DESC"
|
|
|
|
query = "SELECT * FROM zhangdan WHERE 1=1"
|
|
params = []
|
|
|
|
if payto:
|
|
query += " AND payto = ?"
|
|
params.append(payto)
|
|
if payqd:
|
|
query += " AND payqd = ?"
|
|
params.append(payqd)
|
|
if paybox:
|
|
query += " AND paybox = ?"
|
|
params.append(paybox)
|
|
if paytype:
|
|
query += " AND paytype = ?"
|
|
params.append(paytype)
|
|
if keyword:
|
|
query += " AND (payname LIKE ? OR paytype LIKE ?)"
|
|
params.extend([f"%{keyword}%", f"%{keyword}%"])
|
|
if date_from:
|
|
query += " AND paydate >= ?"
|
|
params.append(date_from)
|
|
if date_to:
|
|
query += " AND paydate <= ?"
|
|
params.append(date_to + " 23:59:59")
|
|
|
|
# paysize 存的是文本，需要特殊处理排序
|
|
if sort == "paysize":
|
|
query += f" ORDER BY CAST({sort} AS REAL) {order}"
|
|
else:
|
|
query += f" ORDER BY {sort} {order}"
|
|
|
|
cur.execute(query, params)
|
|
rows = [dict(r) for r in cur.fetchall()]
|
|
conn.close()
|
|
return jsonify(rows)
|
|
|
|
|
|
@app.route("/api/summary")
|
|
@login_required
|
|
def api_summary():
|
|
"""汇总统计 — 支持与 /api/bills 相同的筛选参数"""
|
|
conn = get_db()
|
|
cur = conn.cursor()
|
|
|
|
# 收集筛选条件（与 /api/bills 一致）
|
|
payto = request.args.get("payto")
|
|
payqd = request.args.get("payqd")
|
|
paybox = request.args.get("paybox")
|
|
paytype = request.args.get("paytype")
|
|
keyword = request.args.get("keyword")
|
|
date_from = request.args.get("date_from")
|
|
date_to = request.args.get("date_to")
|
|
|
|
where = "WHERE 1=1"
|
|
params = []
|
|
if payto:
|
|
where += " AND payto = ?"
|
|
params.append(payto)
|
|
if payqd:
|
|
where += " AND payqd = ?"
|
|
params.append(payqd)
|
|
if paybox:
|
|
where += " AND paybox = ?"
|
|
params.append(paybox)
|
|
if paytype:
|
|
where += " AND paytype = ?"
|
|
params.append(paytype)
|
|
if keyword:
|
|
where += " AND (payname LIKE ? OR paytype LIKE ?)"
|
|
params.extend([f"%{keyword}%", f"%{keyword}%"])
|
|
if date_from:
|
|
where += " AND paydate >= ?"
|
|
params.append(date_from)
|
|
if date_to:
|
|
where += " AND paydate <= ?"
|
|
params.append(date_to + " 23:59:59")
|
|
|
|
# 总收入/支出
|
|
cur.execute(f"""
|
|
SELECT payto,
|
|
COUNT(*) as count,
|
|
SUM(CAST(paysize AS REAL)) as total
|
|
FROM zhangdan {where}
|
|
GROUP BY payto
|
|
""", params)
|
|
overview = [dict(r) for r in cur.fetchall()]
|
|
|
|
# 按类型汇总
|
|
cur.execute(f"""
|
|
SELECT paytype, payto,
|
|
COUNT(*) as count,
|
|
SUM(CAST(paysize AS REAL)) as total
|
|
FROM zhangdan {where}
|
|
GROUP BY paytype, payto
|
|
ORDER BY total DESC
|
|
""", params)
|
|
by_type = [dict(r) for r in cur.fetchall()]
|
|
|
|
# 按渠道汇总
|
|
cur.execute(f"""
|
|
SELECT payqd, payto,
|
|
COUNT(*) as count,
|
|
SUM(CAST(paysize AS REAL)) as total
|
|
FROM zhangdan {where}
|
|
GROUP BY payqd, payto
|
|
ORDER BY total DESC
|
|
""", params)
|
|
by_channel = [dict(r) for r in cur.fetchall()]
|
|
|
|
# 按钱包汇总
|
|
cur.execute(f"""
|
|
SELECT paybox, payto,
|
|
COUNT(*) as count,
|
|
SUM(CAST(paysize AS REAL)) as total
|
|
FROM zhangdan {where}
|
|
GROUP BY paybox, payto
|
|
ORDER BY total DESC
|
|
""", params)
|
|
by_wallet = [dict(r) for r in cur.fetchall()]
|
|
|
|
# 按交易名称汇总
|
|
cur.execute(f"""
|
|
SELECT payname, payto,
|
|
COUNT(*) as count,
|
|
SUM(CAST(paysize AS REAL)) as total
|
|
FROM zhangdan {where}
|
|
GROUP BY payname, payto
|
|
ORDER BY total DESC
|
|
""", params)
|
|
by_name = [dict(r) for r in cur.fetchall()]
|
|
|
|
conn.close()
|
|
return jsonify({
|
|
"overview": overview,
|
|
"by_type": by_type,
|
|
"by_channel": by_channel,
|
|
"by_wallet": by_wallet,
|
|
"by_name": by_name,
|
|
})
|
|
|
|
|
|
@app.route("/api/filters")
|
|
@login_required
|
|
def api_filters():
|
|
"""获取所有可选的筛选值"""
|
|
conn = get_db()
|
|
cur = conn.cursor()
|
|
result = {}
|
|
for col in ["payto", "payqd", "paybox", "paytype"]:
|
|
cur.execute(f"SELECT DISTINCT {col} FROM zhangdan ORDER BY {col}")
|
|
result[col] = [r[0] for r in cur.fetchall()]
|
|
conn.close()
|
|
return jsonify(result)
|
|
|
|
|
|
|
|
LOGIN_TEMPLATE = r"""<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>🔐 验证身份</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.login-box {
|
|
width: 90%;
|
|
max-width: 380px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 20px;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
|
}
|
|
.lock-icon {
|
|
font-size: 3em;
|
|
margin-bottom: 16px;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
h2 {
|
|
font-size: 1.3em;
|
|
margin-bottom: 6px;
|
|
background: linear-gradient(90deg, #f093fb, #f5576c);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.subtitle { font-size: 0.85em; color: #888; margin-bottom: 28px; }
|
|
.input-group {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 14px 44px 14px 16px;
|
|
background: rgba(255,255,255,0.08);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 12px;
|
|
color: #e0e0e0;
|
|
font-size: 16px; /* 防 iOS 缩放 */
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.input-group input:focus {
|
|
border-color: #f5576c;
|
|
}
|
|
.input-group input::placeholder { color: #666; }
|
|
.eye-btn {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.2em;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.eye-btn:hover { opacity: 1; }
|
|
.submit-btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: linear-gradient(135deg, #f093fb, #f5576c);
|
|
border: none;
|
|
border-radius: 12px;
|
|
color: #fff;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
letter-spacing: 1px;
|
|
}
|
|
.submit-btn:hover { opacity: 0.85; transform: translateY(-1px); }
|
|
.submit-btn:active { transform: translateY(0); }
|
|
.error {
|
|
color: #f87171;
|
|
font-size: 0.85em;
|
|
margin-top: -12px;
|
|
margin-bottom: 16px;
|
|
animation: shake 0.4s;
|
|
}
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-6px); }
|
|
75% { transform: translateX(6px); }
|
|
}
|
|
.footer-note {
|
|
margin-top: 24px;
|
|
font-size: 0.72em;
|
|
color: #555;
|
|
}
|
|
@media (max-width: 480px) {
|
|
.login-box { padding: 30px 20px; }
|
|
.lock-icon { font-size: 2.5em; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="login-box">
|
|
<div class="lock-icon">🔒</div>
|
|
<h2>账单查询</h2>
|
|
<p class="subtitle">请输入密码以继续</p>
|
|
|
|
{% if error %}
|
|
<div class="error">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
<form method="POST" action="/login">
|
|
<div class="input-group">
|
|
<input type="password" id="pwd" name="password" placeholder="输入密码" autofocus autocomplete="off">
|
|
<button type="button" class="eye-btn" onclick="togglePwd()">👁</button>
|
|
</div>
|
|
<button type="submit" class="submit-btn">进入 →</button>
|
|
</form>
|
|
|
|
<p class="footer-note">数据已加密保护 🔐</p>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePwd() {
|
|
const inp = document.getElementById("pwd");
|
|
inp.type = inp.type === "password" ? "text" : "password";
|
|
}
|
|
// 回车提交
|
|
document.getElementById("pwd").addEventListener("keydown", e => {
|
|
if (e.key === "Enter") e.target.closest("form").submit();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
HTML_TEMPLATE = r"""<!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>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
}
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
|
|
/* 头部 */
|
|
header {
|
|
text-align: center;
|
|
padding: 30px 0 20px;
|
|
}
|
|
header h1 {
|
|
font-size: 2em;
|
|
background: linear-gradient(90deg, #f093fb, #f5576c, #fda085);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 8px;
|
|
}
|
|
header p { color: #aaa; font-size: 0.95em; }
|
|
|
|
/* 概览卡片 */
|
|
.overview {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin: 24px 0;
|
|
}
|
|
.card {
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
backdrop-filter: blur(10px);
|
|
transition: transform 0.2s;
|
|
}
|
|
.card:hover { transform: translateY(-3px); }
|
|
.card .label { font-size: 0.85em; color: #aaa; margin-bottom: 6px; }
|
|
.card .value { font-size: 1.6em; font-weight: 700; }
|
|
.card .value.income { color: #4ade80; }
|
|
.card .value.expense { color: #f87171; }
|
|
.card .value.count { color: #60a5fa; }
|
|
|
|
/* 筛选栏 */
|
|
.filters {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin: 20px 0;
|
|
padding: 16px;
|
|
background: rgba(255,255,255,0.04);
|
|
border-radius: 12px;
|
|
align-items: flex-end;
|
|
}
|
|
.filter-group { display: flex; flex-direction: column; gap: 4px; }
|
|
.filter-group label { font-size: 0.78em; color: #aaa; }
|
|
.filter-group select, .filter-group input {
|
|
background: rgba(255,255,255,0.08);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
color: #e0e0e0;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.9em;
|
|
outline: none;
|
|
min-width: 130px;
|
|
}
|
|
.filter-group select:focus, .filter-group input:focus {
|
|
border-color: #f5576c;
|
|
}
|
|
.btn {
|
|
padding: 8px 18px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-primary { background: linear-gradient(135deg, #f093fb, #f5576c); color: #fff; }
|
|
.btn-primary:hover { opacity: 0.85; }
|
|
.btn-secondary { background: rgba(255,255,255,0.1); color: #ccc; }
|
|
.btn-secondary:hover { background: rgba(255,255,255,0.18); }
|
|
|
|
/* 汇总标签页 */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 24px 0 12px;
|
|
}
|
|
.tab {
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
color: #aaa;
|
|
cursor: pointer;
|
|
font-size: 0.88em;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab.active {
|
|
background: linear-gradient(135deg, #f093fb, #f5576c);
|
|
color: #fff;
|
|
border-color: transparent;
|
|
}
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.summary-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 10px;
|
|
border-left: 3px solid;
|
|
}
|
|
.summary-item.income { border-left-color: #4ade80; }
|
|
.summary-item.expense { border-left-color: #f87171; }
|
|
.summary-item .s-left { flex: 1; min-width: 0; }
|
|
.summary-item .s-right { text-align: right; flex-shrink: 0; margin-left: 12px; }
|
|
.summary-item .s-label { font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.summary-item .s-meta { font-size: 0.75em; color: #888; }
|
|
.summary-item .s-count { font-size: 1.1em; font-weight: 700; color: #60a5fa; }
|
|
.summary-item .s-count span { font-size: 0.7em; font-weight: 400; color: #888; }
|
|
.summary-item .s-value { font-weight: 700; font-size: 1.05em; }
|
|
|
|
/* 表格 */
|
|
.table-wrapper {
|
|
overflow-x: auto;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
margin-top: 16px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.88em;
|
|
}
|
|
th {
|
|
background: rgba(255,255,255,0.08);
|
|
padding: 12px 14px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
th:hover { background: rgba(255,255,255,0.12); }
|
|
th .sort-arrow { margin-left: 4px; font-size: 0.8em; opacity: 0.5; }
|
|
th.sorted .sort-arrow { opacity: 1; color: #f5576c; }
|
|
td {
|
|
padding: 10px 14px;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
tr:hover td { background: rgba(255,255,255,0.03); }
|
|
.amount { font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
.amount.income { color: #4ade80; }
|
|
.amount.expense { color: #f87171; }
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
font-size: 0.82em;
|
|
font-weight: 500;
|
|
}
|
|
.tag-income { background: rgba(74,222,128,0.15); color: #4ade80; }
|
|
.tag-expense { background: rgba(248,113,113,0.15); color: #f87171; }
|
|
|
|
.empty { text-align: center; padding: 40px; color: #666; }
|
|
.footer { text-align: center; padding: 30px 0 20px; color: #555; font-size: 0.82em; }
|
|
|
|
/* ===== 响应式：手机端适配 ===== */
|
|
@media (max-width: 768px) {
|
|
.container { padding: 12px; }
|
|
|
|
/* 头部 */
|
|
header { padding: 18px 0 12px; }
|
|
header h1 { font-size: 1.4em; }
|
|
header p { font-size: 0.82em; }
|
|
|
|
/* 概览卡片：两列 */
|
|
.overview {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin: 14px 0;
|
|
}
|
|
.card { padding: 14px 10px; border-radius: 10px; }
|
|
.card .label { font-size: 0.78em; }
|
|
.card .value { font-size: 1.3em; }
|
|
|
|
/* 筛选栏 */
|
|
.filters {
|
|
padding: 12px;
|
|
gap: 8px;
|
|
margin: 14px 0;
|
|
border-radius: 10px;
|
|
}
|
|
.filter-group { flex: 1 1 calc(50% - 8px); min-width: 0; }
|
|
.filter-group label { font-size: 0.72em; }
|
|
.filter-group select,
|
|
.filter-group input {
|
|
padding: 10px 10px;
|
|
font-size: 14px; /* 防止 iOS 缩放 */
|
|
min-width: 0;
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
.filter-group select {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23aaa'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
padding-right: 28px;
|
|
}
|
|
.btn {
|
|
flex: 1 1 calc(50% - 8px);
|
|
padding: 12px;
|
|
font-size: 0.9em;
|
|
border-radius: 10px;
|
|
}
|
|
.btn-primary, .btn-secondary { text-align: center; }
|
|
|
|
/* 标签页 */
|
|
.tabs {
|
|
gap: 6px;
|
|
margin: 16px 0 10px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.tabs::-webkit-scrollbar { display: none; }
|
|
.tab {
|
|
padding: 8px 14px;
|
|
font-size: 0.82em;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* 汇总网格：单列 */
|
|
.summary-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
.summary-item { padding: 10px 12px; border-radius: 8px; }
|
|
.summary-item .s-label { font-size: 0.85em; }
|
|
.summary-item .s-count { font-size: 0.95em; }
|
|
.summary-item .s-value { font-size: 0.95em; }
|
|
|
|
/* 表格 */
|
|
.table-wrapper {
|
|
border-radius: 10px;
|
|
margin-top: 12px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
table { font-size: 0.8em; }
|
|
th { padding: 10px 10px; font-size: 0.88em; }
|
|
td { padding: 8px 10px; }
|
|
.tag { font-size: 0.75em; padding: 2px 6px; }
|
|
|
|
/* 空状态 & 页脚 */
|
|
.empty { padding: 30px 20px; font-size: 0.9em; }
|
|
.footer { padding: 20px 0 16px; }
|
|
}
|
|
|
|
/* 超小屏 (< 380px) */
|
|
@media (max-width: 380px) {
|
|
header h1 { font-size: 1.2em; }
|
|
.overview { grid-template-columns: 1fr; }
|
|
.card .value { font-size: 1.15em; }
|
|
.filter-group { flex: 1 1 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<h1>💰 账单查询</h1>
|
|
<p>数据来源: zhangdan.db · Flask API 驱动</p>
|
|
</header>
|
|
|
|
<div class="overview" id="overview"></div>
|
|
|
|
<div class="tabs" id="summaryTabs">
|
|
<div class="tab active" data-tab="type" onclick="switchTab('type')">按类型</div>
|
|
<div class="tab" data-tab="channel" onclick="switchTab('channel')">按渠道</div>
|
|
<div class="tab" data-tab="wallet" onclick="switchTab('wallet')">按钱包</div>
|
|
<div class="tab" data-tab="name" onclick="switchTab('name')">按名称</div>
|
|
</div>
|
|
<div class="summary-grid" id="summaryGrid"></div>
|
|
|
|
<div class="filters">
|
|
<div class="filter-group">
|
|
<label>🔍 关键词</label>
|
|
<input type="text" id="fKeyword" placeholder="搜索名称/类型...">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>📊 类型</label>
|
|
<select id="fPayto"><option value="">全部</option></select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>📱 渠道</label>
|
|
<select id="fQd"><option value="">全部</option></select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>👛 钱包</label>
|
|
<select id="fBox"><option value="">全部</option></select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>💳 交易方式</label>
|
|
<select id="fType"><option value="">全部</option></select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>📅 起始</label>
|
|
<input type="date" id="fDateFrom">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>📅 截止</label>
|
|
<input type="date" id="fDateTo">
|
|
</div>
|
|
<button class="btn btn-primary" onclick="loadBills()">查询</button>
|
|
<button class="btn btn-secondary" onclick="resetFilters()">重置</button>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead id="thead"></thead>
|
|
<tbody id="tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="empty" id="emptyMsg" style="display:none;">暂无数据 🤷</div>
|
|
|
|
<div class="footer">
|
|
· Flask + SQLite · <span id="totalCount">0</span> 条记录
|
|
· <a href="/logout" style="color:#f5576c;text-decoration:none;">退出登录 🔒</a>
|
|
· <a href="javascript:shutdown()" style="color:#f87171;text-decoration:none;font-weight:600;">关闭服务 ⏻</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const COLUMNS = [
|
|
{ key: "paydate", label: "日期" },
|
|
{ key: "paytype", label: "交易类型" },
|
|
{ key: "payname", label: "交易名称" },
|
|
{ key: "payto", label: "收支" },
|
|
{ key: "paysize", label: "金额" },
|
|
{ key: "paystu", label: "状态" },
|
|
{ key: "paybox", label: "钱包" },
|
|
{ key: "payqd", label: "渠道" },
|
|
];
|
|
|
|
let currentSort = "paydate";
|
|
let currentOrder = "DESC";
|
|
let summaryData = {};
|
|
let activeTab = "type";
|
|
|
|
// 初始化
|
|
async function init() {
|
|
await loadFilters();
|
|
await loadBills(); // 内部已联动 loadSummary
|
|
}
|
|
|
|
async function loadFilters() {
|
|
const res = await fetch("/api/filters");
|
|
const data = await res.json();
|
|
fillSelect("fPayto", data.payto);
|
|
fillSelect("fQd", data.payqd);
|
|
fillSelect("fBox", data.paybox);
|
|
fillSelect("fType", data.paytype);
|
|
}
|
|
|
|
function fillSelect(id, options) {
|
|
const sel = document.getElementById(id);
|
|
const first = sel.options[0];
|
|
sel.innerHTML = "";
|
|
sel.appendChild(first);
|
|
options.forEach(o => {
|
|
const opt = document.createElement("option");
|
|
opt.value = o;
|
|
opt.textContent = o;
|
|
sel.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
// 提取当前筛选参数（共用）
|
|
function getFilterParams() {
|
|
const params = new URLSearchParams();
|
|
const kw = document.getElementById("fKeyword").value.trim();
|
|
const payto = document.getElementById("fPayto").value;
|
|
const qd = document.getElementById("fQd").value;
|
|
const box = document.getElementById("fBox").value;
|
|
const ptype = document.getElementById("fType").value;
|
|
const dFrom = document.getElementById("fDateFrom").value;
|
|
const dTo = document.getElementById("fDateTo").value;
|
|
if (kw) params.set("keyword", kw);
|
|
if (payto) params.set("payto", payto);
|
|
if (qd) params.set("payqd", qd);
|
|
if (box) params.set("paybox", box);
|
|
if (ptype) params.set("paytype", ptype);
|
|
if (dFrom) params.set("date_from", dFrom);
|
|
if (dTo) params.set("date_to", dTo);
|
|
return params;
|
|
}
|
|
|
|
async function loadBills() {
|
|
const params = getFilterParams();
|
|
params.set("sort", currentSort);
|
|
params.set("order", currentOrder);
|
|
|
|
const res = await fetch("/api/bills?" + params.toString());
|
|
const rows = await res.json();
|
|
renderTable(rows);
|
|
|
|
// 联动刷新汇总
|
|
await loadSummary();
|
|
}
|
|
|
|
function renderTable(rows) {
|
|
// 表头
|
|
const thead = document.getElementById("thead");
|
|
thead.innerHTML = "<tr>" + COLUMNS.map(c => {
|
|
const arrow = currentSort === c.key
|
|
? (currentOrder === "ASC" ? "▲" : "▼")
|
|
: "⇅";
|
|
const cls = currentSort === c.key ? " class='sorted'" : "";
|
|
return `<th${cls} onclick="sortBy('${c.key}')">${c.label} <span class="sort-arrow">${arrow}</span></th>`;
|
|
}).join("") + "</tr>";
|
|
|
|
// 表体
|
|
const tbody = document.getElementById("tbody");
|
|
const empty = document.getElementById("emptyMsg");
|
|
document.getElementById("totalCount").textContent = rows.length;
|
|
|
|
if (rows.length === 0) {
|
|
tbody.innerHTML = "";
|
|
empty.style.display = "block";
|
|
return;
|
|
}
|
|
empty.style.display = "none";
|
|
|
|
tbody.innerHTML = rows.map(r => {
|
|
const isIn = r.payto === "收入";
|
|
const amtClass = isIn ? "income" : "expense";
|
|
const tagClass = isIn ? "tag-income" : "tag-expense";
|
|
return `<tr>
|
|
<td>${r.paydate || ""}</td>
|
|
<td>${r.paytype || ""}</td>
|
|
<td title="${r.payname || ""}">${truncate(r.payname || "", 30)}</td>
|
|
<td><span class="tag ${tagClass}">${r.payto || ""}</span></td>
|
|
<td class="amount ${amtClass}">¥${Number(r.paysize || 0).toFixed(2)}</td>
|
|
<td>${r.paystu || ""}</td>
|
|
<td>${r.paybox || ""}</td>
|
|
<td>${r.payqd || ""}</td>
|
|
</tr>`;
|
|
}).join("");
|
|
}
|
|
|
|
function truncate(s, n) {
|
|
return s.length > n ? s.slice(0, n) + "…" : s;
|
|
}
|
|
|
|
function sortBy(key) {
|
|
if (currentSort === key) {
|
|
currentOrder = currentOrder === "ASC" ? "DESC" : "ASC";
|
|
} else {
|
|
currentSort = key;
|
|
currentOrder = key === "paydate" ? "DESC" : "ASC";
|
|
}
|
|
loadBills();
|
|
}
|
|
|
|
function resetFilters() {
|
|
document.getElementById("fKeyword").value = "";
|
|
document.getElementById("fPayto").value = "";
|
|
document.getElementById("fQd").value = "";
|
|
document.getElementById("fBox").value = "";
|
|
document.getElementById("fType").value = "";
|
|
document.getElementById("fDateFrom").value = "";
|
|
document.getElementById("fDateTo").value = "";
|
|
loadBills();
|
|
}
|
|
|
|
// 汇总
|
|
async function loadSummary() {
|
|
const params = getFilterParams();
|
|
const res = await fetch("/api/summary?" + params.toString());
|
|
summaryData = await res.json();
|
|
renderOverview();
|
|
renderSummary(activeTab);
|
|
}
|
|
|
|
function renderOverview() {
|
|
const ov = summaryData.overview || [];
|
|
let income = 0, expense = 0, incCount = 0, expCount = 0;
|
|
ov.forEach(r => {
|
|
if (r.payto === "收入") { income = r.total; incCount = r.count; }
|
|
if (r.payto === "支出") { expense = r.total; expCount = r.count; }
|
|
});
|
|
document.getElementById("overview").innerHTML = `
|
|
<div class="card">
|
|
<div class="label">总收入</div>
|
|
<div class="value income">¥${income.toFixed(2)}</div>
|
|
<div class="label">${incCount} 笔</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">总支出</div>
|
|
<div class="value expense">¥${expense.toFixed(2)}</div>
|
|
<div class="label">${expCount} 笔</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">净额</div>
|
|
<div class="value" style="color:${income - expense >= 0 ? '#4ade80' : '#f87171'}">
|
|
¥${(income - expense).toFixed(2)}
|
|
</div>
|
|
<div class="label">${incCount + expCount} 笔合计</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function switchTab(tab) {
|
|
activeTab = tab;
|
|
document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
|
|
document.querySelector(`.tab[data-tab="${tab}"]`).classList.add("active");
|
|
renderSummary(tab);
|
|
}
|
|
|
|
function renderSummary(tab) {
|
|
const grid = document.getElementById("summaryGrid");
|
|
let items = [];
|
|
if (tab === "type") items = summaryData.by_type || [];
|
|
else if (tab === "channel") items = summaryData.by_channel || [];
|
|
else if (tab === "wallet") items = summaryData.by_wallet || [];
|
|
else if (tab === "name") items = summaryData.by_name || [];
|
|
|
|
grid.innerHTML = items.map(r => {
|
|
const isIn = r.payto === "收入";
|
|
const label = r.paytype || r.payqd || r.paybox || r.payname || "未知";
|
|
return `<div class="summary-item ${isIn ? 'income' : 'expense'}">
|
|
<div class="s-left">
|
|
<div class="s-label">${label}</div>
|
|
<div class="s-meta">${r.payto}</div>
|
|
</div>
|
|
<div class="s-right">
|
|
<div class="s-count">${r.count} <span>笔</span></div>
|
|
<div class="s-value" style="color:${isIn ? '#4ade80' : '#f87171'}">¥${Number(r.total).toFixed(2)}</div>
|
|
</div>
|
|
</div>`;
|
|
}).join("");
|
|
}
|
|
|
|
// 🔴 关闭服务
|
|
function shutdown() {
|
|
if (!confirm("⚠️ 确定要关闭账单查询服务吗？\n关闭后需要手动重新启动。")) return;
|
|
fetch("/shutdown?token={{ shutdown_token }}")
|
|
.then(r => r.text())
|
|
.then(t => {
|
|
document.body.innerHTML = `
|
|
<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;
|
|
background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#e0e0e0;
|
|
font-family:system-ui;text-align:center;">
|
|
<div>
|
|
<div style="font-size:4em;margin-bottom:16px;">🛑</div>
|
|
<h2>${t}</h2>
|
|
<p style="color:#888;margin-top:12px;">服务已停止，可以关闭此页面</p>
|
|
</div>
|
|
</div>`;
|
|
})
|
|
.catch(() => alert("关闭程序已启动"));
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
# if __name__ == "__main__":
|
|
# command = sys.argv[1] if len(sys.argv) > 1 else "start"
|
|
|
|
# # ---------- stop ----------
|
|
# if command == "stop":
|
|
# # 尝试通过 HTTP 调 shutdown 接口
|
|
# try:
|
|
# urlopen(f"http://localhost:{PORT}/shutdown?token={SHUTDOWN_TOKEN}", timeout=3)
|
|
# print("🛑 已发送关闭指令")
|
|
# except URLError:
|
|
# print("⚠️ 服务未运行或无法连接")
|
|
# sys.exit(0)
|
|
|
|
# # ---------- status ----------
|
|
# elif command == "status":
|
|
# info = server_status()
|
|
# if info["running"]:
|
|
# print(f"✅ Flask 服务运行中 → http://localhost:{info['port']}")
|
|
# else:
|
|
# print("❌ Flask 服务未运行")
|
|
# sys.exit(0)
|
|
|
|
# # ---------- restart ----------
|
|
# elif command == "restart":
|
|
# stop_server()
|
|
# time.sleep(0.5)
|
|
# print("🔄 正在重启...")
|
|
|
|
# # ---------- start (默认) ----------
|
|
# elif command != "start":
|
|
# print(f"用法: python3 {sys.argv[0]} [start|stop|restart|status]")
|
|
# sys.exit(1)
|
|
|
|
# # 启动 Flask 子线程
|
|
# start_server(host="0.0.0.0", port=PORT, debug=True)
|
|
|
|
# # 主线程继续做其他事（不会被 Flask 阻塞）
|
|
# print("📌 主线程继续运行中... (Ctrl+C 退出)")
|
|
# try:
|
|
# while True:
|
|
# time.sleep(1)
|
|
# except KeyboardInterrupt:
|
|
# print("\n👋 主线程退出")
|
|
# stop_server()
|