d490b18b7e
- 清除了所有损坏的 HTML/JS 代码 - 重写为干净的结构 - 包含完整的 header/menu/modal - 包含所有图表功能 - 与 index.html 功能一致
418 lines
33 KiB
HTML
418 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Cache-Control" content="no-cache">
|
|
<title>数据分析</title>
|
|
<script src="/chart.min.js"></script>
|
|
<style>
|
|
:root{--bg:#f5f5f7;--card:rgba(255,255,255,.8);--border:rgba(0,0,0,.06);--text:#1d1d1f;--text2:#6e6e73;--text3:#aeaeb2;--blue:#0071e3;--green:#34c759;--red:#ff3b30;--orange:#ff9500;--purple:#af52de;--radius:16px;--radius-sm:10px;--radius-xs:8px}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px}
|
|
.header{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
|
|
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between}
|
|
.header h1{font-size:17px;font-weight:600;color:var(--text);letter-spacing:-.2px}
|
|
.header-center{position:absolute;left:50%;transform:translateX(-50%)}
|
|
.nav-tabs{display:flex;gap:4px;background:rgba(0,0,0,.04);border-radius:var(--radius-xs);padding:3px}
|
|
.nav-tab{padding:6px 16px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text2);text-decoration:none;transition:all .2s}
|
|
.nav-tab:hover{color:var(--text)}
|
|
.nav-tab.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
|
|
.header-right{display:flex;align-items:center;gap:4px}
|
|
.header-right a,.hdr-btn{color:var(--text2);text-decoration:none;font-size:12px;padding:6px 12px;border-radius:var(--radius-xs);transition:all .2s;background:transparent;border:none;cursor:pointer;font-family:inherit}
|
|
.header-right a:hover,.hdr-btn:hover{background:rgba(0,0,0,.04);color:var(--text)}
|
|
.header-right .admin-link{color:var(--blue)}
|
|
.header-right .logout-link{color:var(--red)}
|
|
.user-info{color:var(--text);font-size:13px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:var(--radius-xs);transition:all .2s}
|
|
.user-info:hover{background:rgba(0,0,0,.04)}
|
|
.notif-wrap{position:relative}
|
|
.notif-bell{cursor:pointer;padding:4px 8px;border-radius:var(--radius-xs);transition:all .2s;color:var(--text2)}
|
|
.notif-bell:hover{background:rgba(0,0,0,.04);color:var(--text)}
|
|
.notif-badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;background:var(--red);color:#fff;border-radius:7px;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 3px}
|
|
.notif-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);background:rgba(255,255,255,.96);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 48px rgba(0,0,0,.15);width:360px;max-height:480px;overflow:hidden;z-index:60}
|
|
.notif-dropdown.show{display:block}
|
|
.notif-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
|
.notif-header h4{font-size:14px;font-weight:600;color:var(--text)}
|
|
.notif-header .mark-all{font-size:12px;color:var(--blue);cursor:pointer;background:none;border:none;font-family:inherit}
|
|
.notif-list{overflow-y:auto;max-height:380px}
|
|
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;display:flex;gap:12px;align-items:flex-start}
|
|
.notif-item:hover{background:rgba(0,0,0,.02)}
|
|
.notif-item.unread{background:rgba(0,113,227,.03)}
|
|
.notif-item .notif-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
|
|
.notif-icon.repayment_due{background:rgba(0,113,227,.08)}
|
|
.notif-icon.repayment_overdue{background:rgba(255,59,48,.08)}
|
|
.notif-icon.system{background:rgba(175,82,222,.08)}
|
|
.notif-icon.account{background:rgba(52,199,89,.08)}
|
|
.notif-item .notif-content{flex:1;min-width:0}
|
|
.notif-item .notif-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.notif-item .notif-msg{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.notif-item .notif-time{font-size:11px;color:var(--text3);white-space:nowrap}
|
|
.notif-empty{text-align:center;padding:32px;color:var(--text3);font-size:13px}
|
|
.export-wrap{position:relative}
|
|
.export-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 32px rgba(0,0,0,.12);min-width:160px;z-index:50;overflow:hidden}
|
|
.export-menu.show{display:block}
|
|
.export-menu a{display:block;padding:10px 18px;font-size:13px;color:var(--text);text-decoration:none;transition:background .15s}
|
|
.export-menu a:hover{background:rgba(0,0,0,.04)}
|
|
.container{max-width:1200px;margin:0 auto;padding:24px}
|
|
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
|
|
.stat-card{background:var(--card);border-radius:var(--radius-sm);padding:20px;text-align:center;border:1px solid var(--border)}
|
|
.stat-card .lbl{font-size:12px;color:var(--text3);margin-bottom:6px;font-weight:500}
|
|
.stat-card .val{font-size:24px;font-weight:700}
|
|
.stat-card .val.blue{color:var(--blue)}.stat-card .val.green{color:var(--green)}.stat-card .val.red{color:var(--red)}.stat-card .val.orange{color:var(--orange)}
|
|
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
|
|
.chart-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
|
|
.chart-card h3{font-size:14px;font-weight:600;margin-bottom:16px;color:var(--text)}
|
|
.chart-wrap{position:relative;height:280px}
|
|
.full-width{grid-column:1/-1}
|
|
.empty-tip{text-align:center;padding:40px;color:var(--text3);font-size:13px}
|
|
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
|
|
.modal-mask.show{display:flex}
|
|
.modal{background:#fff;border-radius:var(--radius);padding:28px;max-width:420px;width:90%;box-shadow:0 24px 80px rgba(0,0,0,.15)}
|
|
.modal h3{margin-bottom:18px;font-size:17px;color:var(--text);font-weight:600}
|
|
.modal .form-row{margin-bottom:14px}
|
|
.modal .form-row label{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
|
|
.modal .form-row input{width:100%;padding:10px 14px;border:1px solid #d2d2d7;border-radius:var(--radius-xs);font-size:14px;outline:none}
|
|
.modal .form-row input:focus{border-color:var(--blue)}
|
|
.modal .btn-row{display:flex;gap:10px;margin-top:18px}
|
|
.btn-ghost{background:#fff;color:var(--text2);border:1px solid #d2d2d7;padding:10px 0;border-radius:var(--radius-xs);font-size:14px;cursor:pointer;flex:1;font-family:inherit}
|
|
.btn-main{background:var(--blue);color:#fff;padding:10px 0;border:none;border-radius:var(--radius-xs);font-size:14px;font-weight:500;cursor:pointer;flex:1;font-family:inherit}
|
|
.error-msg{color:var(--red);font-size:12px;margin-top:8px;display:none}
|
|
.error-msg.show{display:block}
|
|
.success-msg{color:var(--green);font-size:13px;margin-top:8px;display:none}
|
|
.success-msg.show{display:block}
|
|
#loginPage,#registerPage{display:none}
|
|
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
|
|
.auth-card{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);border-radius:20px;padding:48px 44px;width:400px;border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.08)}
|
|
.auth-card h2{text-align:center;margin-bottom:32px;color:var(--text);font-size:22px;font-weight:700}
|
|
.auth-card .form-row{margin-bottom:18px}
|
|
.auth-card .form-row label{font-size:13px;font-weight:500}
|
|
.auth-card .form-row input{padding:12px 16px;font-size:15px;width:100%;border:1px solid #d2d2d7;border-radius:var(--radius-xs);outline:none}
|
|
.auth-card .links{text-align:center;margin-top:18px}
|
|
.auth-card .links a{color:var(--blue);text-decoration:none;font-size:13px;font-weight:500}
|
|
@media(max-width:900px){.stats-row{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}}
|
|
@media(max-width:480px){.stats-row{grid-template-columns:1fr 1fr}.stat-card .val{font-size:18px}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="loginPage" class="auth-page">
|
|
<div class="auth-card">
|
|
<h2>债务管理系统</h2>
|
|
<div class="form-row"><label>账号</label><input type="text" id="loginEmail" placeholder="请输入账号"></div>
|
|
<div class="form-row"><label>密码</label><input type="password" id="loginPwd" placeholder="请输入密码"></div>
|
|
<div id="loginError" class="error-msg"></div>
|
|
<div class="btn-row"><button class="btn btn-main" onclick="doLogin()">登录</button></div>
|
|
<div class="links"><a href="#" onclick="showRegister()">注册新账户</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="registerPage" class="auth-page">
|
|
<div class="auth-card">
|
|
<h2>注册账户</h2>
|
|
<div id="regSuccess" class="success-msg" style="display:none"></div>
|
|
<div id="regForm">
|
|
<div class="form-row"><label>账号</label><input type="text" id="regEmail" placeholder="请输入账号"></div>
|
|
<div class="form-row"><label>昵称</label><input type="text" id="regNick" placeholder="请输入昵称"></div>
|
|
<div class="form-row"><label>密码</label><input type="password" id="regPwd" placeholder="请输入密码"></div>
|
|
<div class="form-row"><label>确认密码</label><input type="password" id="regPwd2" placeholder="请再次输入密码"></div>
|
|
<div id="regError" class="error-msg"></div>
|
|
<div class="btn-row"><button class="btn btn-main" onclick="doRegister()">注册</button></div>
|
|
</div>
|
|
<div class="links"><a href="#" onclick="showLogin()">已有账户？去登录</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="appPage">
|
|
<div class="header">
|
|
<div class="header-inner">
|
|
<h1>债务统计</h1>
|
|
<div class="header-center">
|
|
<div class="nav-tabs">
|
|
<a href="/" class="nav-tab">首页</a>
|
|
<a href="/analysis.html" class="nav-tab active">分析</a>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="notif-wrap">
|
|
<div class="notif-bell" onclick="toggleNotifDropdown(event)">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
|
|
<span class="notif-badge" id="notifBadge" style="display:none">0</span>
|
|
</div>
|
|
<div class="notif-dropdown" id="notifDropdown">
|
|
<div class="notif-header"><h4>通知</h4><button class="mark-all" onclick="markAllNotifRead()">全部已读</button></div>
|
|
<div class="notif-list" id="notifList"><div class="notif-empty">暂无通知</div></div>
|
|
</div>
|
|
</div>
|
|
<span class="user-info" id="userInfo" onclick="toggleUserMenu(event)"></span>
|
|
<div class="export-wrap">
|
|
<div class="export-menu" id="userMenu">
|
|
<a href="#" onclick="showProfile()">个人中心</a>
|
|
</div>
|
|
</div>
|
|
<a href="/admin.html" class="admin-link" id="adminLink" style="display:none">管理</a>
|
|
<div class="export-wrap">
|
|
<button class="hdr-btn" onclick="toggleExport(event)">导出</button>
|
|
<div class="export-menu" id="exportMenu">
|
|
<a href="#" onclick="exportCSV(event)">导出 CSV</a>
|
|
<a href="#" onclick="exportJSON(event)">导出 JSON</a>
|
|
<a href="#" onclick="exportHTML(event)">导出 HTML</a>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="logout-link" onclick="doLogout()">退出</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="stats-row" id="statsRow"></div>
|
|
<div class="charts-grid" id="chartsGrid">
|
|
<div class="chart-card"><h3>借款总额 vs 已还总额</h3><div class="chart-wrap"><canvas id="chartPie"></canvas></div></div>
|
|
<div class="chart-card"><h3>债权人分布</h3><div class="chart-wrap"><canvas id="chartCreditor"></canvas></div></div>
|
|
<div class="chart-card"><h3>还款方式分布</h3><div class="chart-wrap"><canvas id="chartMethod"></canvas></div></div>
|
|
<div class="chart-card"><h3>利率分布</h3><div class="chart-wrap"><canvas id="chartRate"></canvas></div></div>
|
|
<div class="chart-card full-width"><h3>月度还款计划</h3><div class="chart-wrap"><canvas id="chartMonth"></canvas></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="twofaBindModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9998;align-items:center;justify-content:center">
|
|
<div style="background:#fff;border-radius:16px;padding:28px;max-width:360px;width:90%;box-shadow:0 24px 80px rgba(0,0,0,.2)">
|
|
<h3>双因素认证</h3>
|
|
<p style="font-size:13px;color:var(--text2);margin-bottom:12px;text-align:center">请使用验证器应用扫描二维码</p>
|
|
<div style="display:flex;justify-content:center;margin:16px 0"><img id="twofaBindQr" width="200" height="200" style="border:1px solid var(--border);border-radius:8px"></div>
|
|
<p style="font-size:11px;color:var(--text3);text-align:center;margin-bottom:12px">密钥：<code id="twofaBindSecret" style="background:#f5f5f7;padding:2px 6px;border-radius:4px;font-size:11px"></code></p>
|
|
<div style="display:flex;gap:8px;align-items:center"><input type="text" id="twofaBindCode" placeholder="输入 6 位验证码" maxlength="6" style="flex:1;padding:10px;border:1px solid #d2d2d7;border-radius:8px;font-size:20px;text-align:center;letter-spacing:4px"></div>
|
|
<div id="twofaBindError" class="error-msg" style="display:none"></div>
|
|
<div style="margin-top:16px"><button class="btn btn-main" style="width:100%" onclick="verifyTwofaBind()">确认绑定</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="profileModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9998;align-items:center;justify-content:center">
|
|
<div style="background:#fff;border-radius:16px;padding:28px;max-width:480px;width:90%;box-shadow:0 24px 80px rgba(0,0,0,.2)">
|
|
<h3>个人中心</h3>
|
|
<div class="form-row"><label>账号</label><input type="text" id="profileAccount" disabled style="background:#f5f5f7"></div>
|
|
<div class="form-row"><label>昵称</label><input type="text" id="profileNickname" placeholder="请输入昵称"></div>
|
|
<div class="form-row"><label>邮箱</label><div style="display:flex;gap:8px"><input type="email" id="profileEmail" placeholder="请输入邮箱" style="flex:1"><button class="btn btn-ghost" style="flex:none;width:auto;padding:8px 16px;font-size:12px" onclick="sendEmailVerify()">发送验证码</button></div></div>
|
|
<div class="form-row" id="emailCodeRow" style="display:none"><label>验证码</label><input type="text" id="profileEmailCode" placeholder="请输入验证码"></div>
|
|
<div id="profileError" class="error-msg" style="display:none"></div>
|
|
<div id="profileSuccess" class="success-msg" style="display:none"></div>
|
|
<div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border)">
|
|
<label style="display:block;font-size:13px;font-weight:500;margin-bottom:8px">双因素认证</label>
|
|
<div id="twofaStatus"><span style="font-size:12px;color:var(--text3)">加载中...</span></div>
|
|
<div id="twofaSetupSection" style="display:none">
|
|
<p style="font-size:12px;color:var(--text2);margin:12px 0">请使用验证器应用扫描：</p>
|
|
<div style="display:flex;justify-content:center;margin:12px 0"><img id="twofaQrCode" width="200" height="200" style="border:1px solid var(--border);border-radius:8px"></div>
|
|
<p style="font-size:11px;color:var(--text3);text-align:center;margin-bottom:12px">密钥：<code id="twofaSecret" style="background:#f5f5f7;padding:2px 6px;border-radius:4px"></code></p>
|
|
<div style="display:flex;gap:8px;align-items:center"><input type="text" id="twofaSetupCode" placeholder="6位验证码" maxlength="6" style="flex:1"><button class="btn btn-main" style="flex:none;width:auto;padding:8px 16px;font-size:12px" onclick="verifyTwofaSetup()">确认</button></div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:16px;display:flex;gap:10px"><button class="btn-ghost" onclick="closeProfile()" style="flex:1">取消</button><button class="btn btn-main" onclick="saveProfile()" style="flex:1">保存</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-mask" id="changeNickModal"><div class="modal"><h3>修改昵称</h3><div class="form-row"><label>新昵称</label><input type="text" id="newNick" placeholder="请输入新昵称"></div><div id="nickError" class="error-msg" style="display:none"></div><div id="nickSuccess" class="success-msg" style="display:none"></div><div class="btn-row"><button class="btn-ghost" onclick="closeChangeNick()">取消</button><button class="btn btn-main" onclick="doChangeNick()">确认修改</button></div></div></div>
|
|
<div class="modal-mask" id="changePwdModal"><div class="modal"><h3>修改密码</h3><div class="form-row"><label>原密码</label><input type="password" id="oldPwd" placeholder="请输入原密码"></div><div class="form-row"><label>新密码</label><input type="password" id="newPwd" placeholder="请输入新密码"></div><div class="form-row"><label>确认新密码</label><input type="password" id="newPwd2" placeholder="请再次输入新密码"></div><div id="pwdError" class="error-msg" style="display:none"></div><div id="pwdSuccess" class="success-msg" style="display:none"></div><div class="btn-row"><button class="btn-ghost" onclick="closeChangePwd()">取消</button><button class="btn btn-main" onclick="doChangePwd()">确认修改</button></div></div></div>
|
|
|
|
<script>
|
|
const API='/api/v1';
|
|
let token=localStorage.getItem('access_token')||'';
|
|
let refreshToken=localStorage.getItem('refresh_token')||'';
|
|
let currentUser=null;
|
|
let loans=[];
|
|
const $=id=>document.getElementById(id);
|
|
const fmt=n=>n.toLocaleString('zh-CN',{minimumFractionDigits:2,maximumFractionDigits:2});
|
|
function escapeHtml(s){if(!s)return'';const d=document.createElement('div');d.textContent=s;return d.innerHTML;}
|
|
|
|
async function apiFetch(path,opts={}){
|
|
const headers={'Content-Type':'application/json',...opts.headers};
|
|
if(token)headers['Authorization']='Bearer '+token;
|
|
let res=await fetch(API+path,{...opts,headers});
|
|
if(res.status===401&&refreshToken){
|
|
const r=await fetch(API+'/auth/refresh',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({refresh_token:refreshToken})});
|
|
if(r.ok){const d=await r.json();token=d.access_token;refreshToken=d.refresh_token;localStorage.setItem('access_token',token);localStorage.setItem('refresh_token',refreshToken);headers['Authorization']='Bearer '+token;res=await fetch(API+path,{...opts,headers});}
|
|
else{doLogout();return null;}
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function toggleUserMenu(e){e.stopPropagation();$('userMenu').classList.toggle('show');}
|
|
document.addEventListener('click',function(){$('userMenu')?.classList.remove('show');});
|
|
|
|
function showProfile(){
|
|
$('userMenu').classList.remove('show');
|
|
$('profileAccount').value=currentUser.account;
|
|
$('profileNickname').value=currentUser.nickname||'';
|
|
$('profileEmail').value=currentUser.real_email||'';
|
|
$('emailCodeRow').style.display='none';
|
|
$('profileError').style.display='none';
|
|
$('profileSuccess').style.display='none';
|
|
$('profileModal').style.display='flex';
|
|
loadTwofaStatus();
|
|
}
|
|
function closeProfile(){$('profileModal').style.display='none';}
|
|
|
|
let emailVerifySent=false;
|
|
async function sendEmailVerify(){
|
|
const email=$('profileEmail').value.trim();
|
|
if(!email||!email.includes('@')){$('profileError').textContent='请输入有效邮箱';$('profileError').style.display='';return;}
|
|
$('profileError').style.display='none';
|
|
const res=await apiFetch('/auth/verify-email',{method:'POST',body:JSON.stringify({email})});
|
|
if(res&&res.ok){emailVerifySent=true;$('emailCodeRow').style.display='';$('profileSuccess').style.display='';$('profileSuccess').textContent='验证码已发送';}
|
|
else{const d=await res.json().catch(()=>({}));$('profileError').textContent=d.detail||'发送失败';$('profileError').style.display='';}
|
|
}
|
|
|
|
async function saveProfile(){
|
|
const nick=$('profileNickname').value.trim();
|
|
const email=$('profileEmail').value.trim();
|
|
const code=$('profileEmailCode').value.trim();
|
|
$('profileError').style.display='none';
|
|
$('profileSuccess').style.display='none';
|
|
if(nick&&nick!==currentUser.nickname){
|
|
const res=await apiFetch('/auth/profile',{method:'PUT',body:JSON.stringify({nickname:nick})});
|
|
if(res&&res.ok){currentUser.nickname=nick;$('userInfo').textContent=nick||currentUser.account;}
|
|
else{$('profileError').textContent='昵称修改失败';$('profileError').style.display='';return;}
|
|
}
|
|
if(email&&email!==currentUser.real_email){
|
|
if(!code){$('profileError').textContent='请输入邮箱验证码';$('profileError').style.display='';return;}
|
|
const res=await apiFetch('/auth/change-email',{method:'POST',body:JSON.stringify({code,new_email:email})});
|
|
if(res&&res.ok){currentUser.real_email=email;}
|
|
else{$('profileError').textContent='邮箱修改失败';$('profileError').style.display='';return;}
|
|
}
|
|
$('profileSuccess').style.display='';$('profileSuccess').textContent='保存成功';
|
|
setTimeout(closeProfile,1000);
|
|
}
|
|
|
|
async function loadTwofaStatus(){
|
|
const res=await apiFetch('/auth/2fa/status');
|
|
if(res&&res.ok){
|
|
const data=await res.json();
|
|
const el=document.getElementById('twofaStatus');
|
|
if(data.enabled){el.innerHTML='<span style="font-size:12px;color:var(--green)">已启用</span>';}
|
|
else{el.innerHTML='<span style="font-size:12px;color:var(--text3)">未启用</span>';}
|
|
}
|
|
}
|
|
|
|
function toggleNotifDropdown(e){e.stopPropagation();$('notifDropdown').classList.toggle('show');}
|
|
document.addEventListener('click',function(){$('notifDropdown')?.classList.remove('show');$('userMenu')?.classList.remove('show');});
|
|
|
|
async function loadNotifications(){const res=await apiFetch('/notifications?size=20');if(!res||!res.ok)return;const data=await res.json();renderNotifBadge(data.unread);renderNotifList(data.items);}
|
|
function renderNotifBadge(unread){const badge=$('notifBadge');if(unread>0){badge.style.display='';badge.textContent=unread>99?'99+':unread;}else{badge.style.display='none';}}
|
|
function renderNotifList(items){const el=$('notifList');if(!items.length){el.innerHTML='<div class="notif-empty">暂无通知</div>';return;}el.innerHTML=items.map(n=>`<div class="notif-item${n.is_read===0?' unread':''}" onclick="readNotif(${n.id})"><div class="notif-icon ${n.type}">${notifTypeIcon(n.type)}</div><div class="notif-content"><div class="notif-title">${escapeHtml(n.title)}</div><div class="notif-msg">${escapeHtml(n.message)}</div></div><div class="notif-time">${timeAgo(n.created_at)}</div></div>`).join('');}
|
|
function notifTypeIcon(type){const map={repayment_due:'📅',repayment_overdue:'⚠️',system:'📢',account:'👤'};return map[type]||'📩';}
|
|
function timeAgo(dt){const diff=(Date.now()-new Date(dt).getTime())/1000;if(diff<60)return '刚刚';if(diff<3600)return Math.floor(diff/60)+'分钟前';if(diff<86400)return Math.floor(diff/3600)+'小时前';return Math.floor(diff/86400)+'天前';}
|
|
async function readNotif(id){await apiFetch('/notifications/'+id+'/read',{method:'PUT'});loadNotifications();}
|
|
async function markAllNotifRead(){await apiFetch('/notifications/read-all',{method:'PUT'});loadNotifications();}
|
|
|
|
let twofaBindToken='';
|
|
function showTwofaBindModal(){
|
|
apiFetch('/auth/2fa/status').then(function(res){
|
|
if(res&&res.ok){res.json().then(function(data){
|
|
if(data.enabled&&data.has_secret){return;}
|
|
apiFetch('/auth/2fa/setup',{method:'POST'}).then(function(res2){
|
|
if(res2&&res2.ok){res2.json().then(function(d){
|
|
$('twofaBindQr').src=d.qr_code;
|
|
$('twofaBindSecret').textContent=d.secret;
|
|
$('twofaBindCode').value='';
|
|
$('twofaBindError').style.display='none';
|
|
$('twofaBindModal').style.display='flex';
|
|
document.body.style.overflow='hidden';
|
|
});}
|
|
});
|
|
});}
|
|
});
|
|
}
|
|
function closeTwofaBindModal(){$('twofaBindModal').style.display='none';document.body.style.overflow='';}
|
|
async function verifyTwofaBind(){
|
|
var code=$('twofaBindCode').value.trim();
|
|
if(!code||code.length!==6){$('twofaBindError').textContent='请输入6位验证码';$('twofaBindError').style.display='';return;}
|
|
var res=await apiFetch('/auth/2fa/verify',{method:'POST',body:JSON.stringify({code:code})});
|
|
if(res&&res.ok){$('twofaBindModal').style.display='none';document.body.style.overflow='';showToast('双因素认证已绑定','success');}
|
|
else{var d=await res.json().catch(function(){return {};});$('twofaBindError').textContent=d.detail||'验证码错误';$('twofaBindError').style.display='';}
|
|
}
|
|
function showToast(msg,type){alert(msg);}
|
|
|
|
async function doLogin(){
|
|
var account=$('loginEmail').value.trim();
|
|
var pwd=$('loginPwd').value;
|
|
if(!account||!pwd){$('loginError').textContent='请输入账号和密码';$('loginError').style.display='';return;}
|
|
$('loginError').style.display='none';
|
|
try{
|
|
var res=await fetch(API+'/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({account:account,password:pwd})});
|
|
var data=await res.json();
|
|
if(!res.ok){$('loginError').textContent=data.detail||'登录失败';$('loginError').style.display='';return;}
|
|
token=data.access_token;refreshToken=data.refresh_token;
|
|
localStorage.setItem('access_token',token);localStorage.setItem('refresh_token',refreshToken);
|
|
await checkAuth();await loadLoans();
|
|
}catch(e){$('loginError').textContent='网络异常';$('loginError').style.display='';}
|
|
}
|
|
|
|
async function checkAuth(){
|
|
if(!token){showLogin();return false;}
|
|
const res=await apiFetch('/auth/profile');
|
|
if(!res||!res.ok){showLogin();return false;}
|
|
currentUser=await res.json();
|
|
$('userInfo').textContent=currentUser.nickname||currentUser.account;
|
|
if(currentUser.role==='admin')$('adminLink').style.display='';
|
|
showApp();return true;
|
|
}
|
|
function showLogin(){$('loginPage').style.display='flex';$('registerPage').style.display='none';$('appPage').style.display='none';}
|
|
function showRegister(){$('loginPage').style.display='none';$('registerPage').style.display='flex';$('appPage').style.display='none';}
|
|
function showApp(){$('loginPage').style.display='none';$('registerPage').style.display='none';$('appPage').style.display='';}
|
|
|
|
async function doRegister(){
|
|
var account=$('regEmail').value.trim(),nick=$('regNick').value.trim(),pwd=$('regPwd').value,pwd2=$('regPwd2').value;
|
|
if(!account||!pwd){$('regError').textContent='请填写账号和密码';return;}
|
|
if(pwd!==pwd2){$('regError').textContent='两次密码不一致';return;}
|
|
try{const res=await fetch(API+'/auth/register',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({account:account,password:pwd,nickname:nick})});const data=await res.json();if(!res.ok){$('regError').textContent=data.detail||'注册失败';return;}$('regForm').style.display='none';$('regSuccess').style.display='';$('regSuccess').textContent=data.message||'注册成功';}catch(e){$('regError').textContent='网络异常';}
|
|
}
|
|
function doLogout(){token='';refreshToken='';currentUser=null;localStorage.removeItem('access_token');localStorage.removeItem('refresh_token');showLogin();}
|
|
|
|
async function loadLoans(){const res=await apiFetch('/loans');if(!res||!res.ok)return;loans=await res.json();renderAll();}
|
|
|
|
function renderAll(){
|
|
if(!loans.length){$('statsRow').innerHTML='<div class="empty-tip">暂无数据</div>';return;}
|
|
renderStats();renderPie();renderCreditor();renderMethod();renderRate();renderMonth();
|
|
}
|
|
function renderStats(){
|
|
let totalAmt=0,totalInt=0,totalPaid=0,paidN=0,totalN=0;
|
|
loans.forEach(l=>{totalAmt+=l.amount;totalN+=l.periods;totalInt+=l.schedule.reduce((a,r)=>a+r.it,0);paidN+=l.paid.length;totalPaid+=l.schedule.filter(r=>l.paid.includes(r.p)).reduce((a,r)=>a+r.pay,0);});
|
|
const totalPay=totalAmt+totalInt;
|
|
$('statsRow').innerHTML=`<div class="stat-card"><div class="lbl">借款总额</div><div class="val blue">¥${fmt(totalAmt)}</div></div><div class="stat-card"><div class="lbl">总利息</div><div class="val red">¥${fmt(totalInt)}</div></div><div class="stat-card"><div class="lbl">已还</div><div class="val green">¥${fmt(totalPaid)}</div></div><div class="stat-card"><div class="lbl">还款进度</div><div class="val orange">${paidN}/${totalN}期</div></div>`;
|
|
}
|
|
function renderPie(){
|
|
let totalAmt=0,totalPaid=0;
|
|
loans.forEach(l=>{totalAmt+=l.amount;totalPaid+=l.schedule.filter(r=>l.paid.includes(r.p)).reduce((a,r)=>a+r.pay,0);});
|
|
new Chart($('chartPie'),{type:'doughnut',data:{labels:['已还本金','待还本金','已还利息','待还利息'],datasets:[{data:[totalPaid*0.85,Math.max(0,totalAmt-totalPaid*0.85),totalPaid*0.15,Math.max(0,loans.reduce((s,l)=>s+l.schedule.reduce((a,r)=>a+r.it,0),0)-totalPaid*0.15)],backgroundColor:['#34c759','#0071e3','#30d158','#5ac8fa']}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{padding:12,font:{size:12}}}}}});
|
|
}
|
|
function renderCreditor(){
|
|
const map={};loans.forEach(l=>{map[l.name]=(map[l.name]||0)+l.amount;});
|
|
const sorted=Object.entries(map).sort((a,b)=>b[1]-a[1]).slice(0,8);
|
|
new Chart($('chartCreditor'),{type:'bar',data:{labels:sorted.map(s=>s[0]),datasets:[{label:'借款金额',data:sorted.map(s=>s[1]),backgroundColor:['#0071e3','#34c759','#ff9500','#af52de','#ff3b30','#5ac8fa','#30d158','#ff6b35']}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true,ticks:{callback:v=>'¥'+v.toLocaleString()}},x:{ticks:{font:{size:11}}}}}});
|
|
}
|
|
function renderMethod(){
|
|
const map={};loans.forEach(l=>{const m=l.method==='e'?'等额本息':l.method==='p'?'等额本金':'先息后本';map[m]=(map[m]||0)+1;});
|
|
new Chart($('chartMethod'),{type:'doughnut',data:{labels:Object.keys(map),datasets:[{data:Object.values(map),backgroundColor:['#0071e3','#ff9500','#af52de']}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{padding:12,font:{size:12}}}}}});
|
|
}
|
|
function renderRate(){
|
|
const buckets={'0%':0,'0-5%':0,'5-10%':0,'10-15%':0,'15-20%':0,'20%+':0};
|
|
loans.forEach(l=>{const r=l.rate;if(r===0)buckets['0%']++;else if(r<5)buckets['0-5%']++;else if(r<10)buckets['5-10%']++;else if(r<15)buckets['10-15%']++;else if(r<20)buckets['15-20%']++;else buckets['20%+']++;});
|
|
new Chart($('chartRate'),{type:'bar',data:{labels:Object.keys(buckets),datasets:[{label:'借款数量',data:Object.values(buckets),backgroundColor:['#34c759','#5ac8fa','#0071e3','#ff9500','#ff6b35','#ff3b30']}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true,ticks:{stepSize:1}},x:{ticks:{font:{size:11}}}}}});
|
|
}
|
|
function renderMonth(){
|
|
const map={};loans.forEach(l=>{l.schedule.forEach(r=>{const ym=r.date.slice(0,7);if(!map[ym])map[ym]={total:0,paid:0};map[ym].total+=r.pay;if(l.paid.includes(r.p))map[ym].paid+=r.pay;});});
|
|
const months=Object.keys(map).sort().slice(0,12);
|
|
new Chart($('chartMonth'),{type:'bar',data:{labels:months.map(m=>m.replace('-','年')+'月'),datasets:[{label:'应还',data:months.map(m=>map[m].total),backgroundColor:'rgba(0,113,227,.3)',borderColor:'#0071e3',borderWidth:1},{label:'已还',data:months.map(m=>map[m].paid),backgroundColor:'rgba(52,199,89,.5)',borderColor:'#34c759',borderWidth:1}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{padding:12,font:{size:12}}}},scales:{y:{beginAtZero:true,ticks:{callback:v=>'¥'+v.toLocaleString()}},x:{ticks:{font:{size:10}}}}}});
|
|
}
|
|
|
|
function toggleExport(e){e.stopPropagation();$('exportMenu').classList.toggle('show');}
|
|
document.addEventListener('click',function(){$('exportMenu')?.classList.remove('show');});
|
|
function download(filename,content,mime){const blob=new Blob(['\uFEFF'+content],{type:mime});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=filename;a.click();}
|
|
function exportCSV(e){e.preventDefault();if(!loans.length)return;let csv='债权人,借款日期,借款金额,年化率(%),总利息,分期数,还款方式,已还期数,状态,用途\n';loans.forEach(l=>{const ti=l.schedule.reduce((s,r)=>s+r.it,0);const paid=l.paid.length+'/'+l.periods;const status=l.paid.length>=l.periods?'已还清':'还款中';csv+=`${escapeHtml(l.name)},${l.date},${l.amount},${l.rate},${ti.toFixed(2)},${l.periods},${l.method==='e'?'等额本息':l.method==='p'?'等额本金':'先息后本'},${paid},${status},${escapeHtml(l.purpose||'')}\n`;});download('债务统计_'+new Date().toISOString().slice(0,10)+'.csv',csv,'text/csv;charset=utf-8');}
|
|
function exportJSON(e){e.preventDefault();if(!loans.length)return;const data=loans.map(l=>({债权人:l.name,借款日期:l.date,借款金额:l.amount,年化率:l.rate,分期数:l.periods,还款方式:l.method==='e'?'等额本息':l.method==='p'?'等额本金':'先息后本',已还期数:l.paid.length,状态:l.paid.length>=l.periods?'已还清':'还款中',用途:l.purpose||''}));download('债务统计_'+new Date().toISOString().slice(0,10)+'.json',JSON.stringify(data,null,2),'application/json;charset=utf-8');}
|
|
function exportHTML(e){e.preventDefault();if(!loans.length)return;let h='<html><head><meta charset="utf-8"><title>债务统计</title></head><body><h2>债务统计报表</h2><table border="1"><tr><th>借款人</th><th>金额</th><th>利率</th><th>期数</th></tr>';loans.forEach(l=>{h+=`<tr><td>${escapeHtml(l.name)}</td><td>¥${l.amount.toLocaleString()}</td><td>${l.rate}%</td><td>${l.paid.length}/${l.periods}</td></tr>`;});h+='</table></body></html>';download('债务统计_'+new Date().toISOString().slice(0,10)+'.html',h,'text/html;charset=utf-8');}
|
|
|
|
checkAuth().then(ok=>{if(ok)loadLoans();});
|
|
</script>
|
|
</body>
|
|
</html>
|