24024
d4b28a731a
- 新增 SystemNotification 模型，实现系统通知的数据存储 - 管理后台新增通知相关接口，支持通知的增删改查 - 用户端新增接口，获取最新激活通知并支持标记已读 - 在前端首页添加全局通知弹窗，实现通知自动轮询及已读同步 - 生成历史记录中兼容支持图片缩略图及新旧图片格式 - 优化后台图片同步逻辑，新增缩略图生成与存储 - 支持上传参考图的拖拽、粘贴、多文件上传及排序功能 - 增加购买积分页面入口及菜单项，调整菜单结构 - 日志系统由 Redis 列表迁移为有序集合，保留 30 天日志 - 优化日志页面样式，提升可读性及滚动体验 - 调整部分模板布局为自定义滚动条容器，增强视觉一致性
158 lines
8.1 KiB
HTML
158 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}AI 视界{% endblock %}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body class="text-slate-700 antialiased bg-slate-50 overflow-hidden">
|
|
<div class="bg-mesh"></div>
|
|
<div id="toastContainer" class="toast-container"></div>
|
|
|
|
<div class="flex h-screen w-screen overflow-hidden">
|
|
<!-- 全局系统菜单栏 (默认隐藏，仅在 initGlobalNav 成功后显示) -->
|
|
<nav id="globalNav" class="hidden w-20 flex-shrink-0 bg-slate-900 flex flex-col items-center py-8 z-40 shadow-2xl transition-all duration-500">
|
|
<div class="w-12 h-12 btn-primary logo-box rounded-2xl flex items-center justify-center mb-12 rotate-3">
|
|
<i data-lucide="scan-eye" class="w-7 h-7"></i>
|
|
</div>
|
|
|
|
<div id="dynamicMenuList" class="flex-1 w-full px-2 space-y-4"></div>
|
|
|
|
<div id="globalUserProfile" class="flex flex-col items-center gap-4 mb-4">
|
|
<div class="w-10 h-10 bg-slate-800 rounded-xl flex items-center justify-center text-slate-400 border border-slate-700">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
</div>
|
|
<button id="globalLogoutBtn" class="text-slate-500 hover:text-rose-400 transition-colors">
|
|
<i data-lucide="log-out" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容区域 (全屏) -->
|
|
<main class="flex-1 flex overflow-hidden relative w-full h-full">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 全局通知弹窗 -->
|
|
<div id="notifModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[60] flex items-center justify-center hidden opacity-0 transition-opacity duration-500">
|
|
<div class="bg-white w-full max-w-2xl rounded-[2.5rem] shadow-2xl p-10 space-y-6 transform scale-90 transition-transform duration-500">
|
|
<div class="w-16 h-16 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-2">
|
|
<i data-lucide="bell-ring" class="w-8 h-8 animate-tada"></i>
|
|
</div>
|
|
<div class="text-center space-y-2">
|
|
<h2 id="notifTitle" class="text-2xl font-black text-slate-900">系统通知</h2>
|
|
<div id="notifContent" class="text-slate-500 text-sm font-bold leading-relaxed whitespace-pre-wrap"></div>
|
|
</div>
|
|
<button id="closeNotifBtn" class="w-full py-4 rounded-2xl bg-slate-900 text-white font-black text-sm hover:bg-slate-800 transition-all shadow-xl shadow-slate-200">
|
|
我已收到
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
// 自动加载菜单
|
|
async function initGlobalNav() {
|
|
try {
|
|
const r = await fetch('/api/auth/menu');
|
|
const d = await r.json();
|
|
if(d.menu && d.menu.length > 0) {
|
|
document.getElementById('globalNav').classList.remove('hidden');
|
|
const list = document.getElementById('dynamicMenuList');
|
|
list.innerHTML = d.menu.map(item => {
|
|
const isActive = window.location.pathname === item.url;
|
|
return `
|
|
<div class="relative group flex justify-center">
|
|
<a href="${item.url}"
|
|
class="w-12 h-12 flex items-center justify-center rounded-2xl transition-all duration-300 ${
|
|
isActive
|
|
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/40'
|
|
: 'text-slate-500 hover:bg-slate-800 hover:text-white'
|
|
}">
|
|
<i data-lucide="${item.icon}" class="w-5 h-5"></i>
|
|
</a>
|
|
<div class="absolute left-full ml-4 px-3 py-2 bg-slate-800 text-white text-[10px] font-black rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl">
|
|
${item.name}
|
|
<div class="absolute right-full top-1/2 -translate-y-1/2 border-8 border-transparent border-r-slate-800"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
lucide.createIcons();
|
|
}
|
|
} catch(e) { console.error('菜单加载失败', e); }
|
|
}
|
|
|
|
document.getElementById('globalLogoutBtn').onclick = async () => {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
window.location.href = '/login';
|
|
};
|
|
|
|
// 全局通知检查
|
|
let currentNotifId = null;
|
|
async function checkNotifications() {
|
|
try {
|
|
const r = await fetch('/api/notifications/latest');
|
|
const d = await r.json();
|
|
if (d.id) {
|
|
currentNotifId = d.id;
|
|
document.getElementById('notifTitle').innerText = d.title;
|
|
document.getElementById('notifContent').innerText = d.content;
|
|
|
|
const modal = document.getElementById('notifModal');
|
|
modal.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
modal.classList.add('opacity-100');
|
|
modal.querySelector('div').classList.remove('scale-90');
|
|
}, 10);
|
|
}
|
|
} catch (e) { console.error('通知检查失败', e); }
|
|
}
|
|
|
|
document.getElementById('closeNotifBtn').onclick = async () => {
|
|
if (!currentNotifId) return;
|
|
|
|
// 立即隐藏
|
|
const modal = document.getElementById('notifModal');
|
|
modal.classList.remove('opacity-100');
|
|
modal.querySelector('div').classList.add('scale-90');
|
|
setTimeout(() => {
|
|
modal.classList.add('hidden');
|
|
// 递归检查是否有下一条通知
|
|
checkNotifications();
|
|
}, 500);
|
|
|
|
// 后端同步已读
|
|
await fetch('/api/notifications/read', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id: currentNotifId })
|
|
});
|
|
};
|
|
|
|
initGlobalNav();
|
|
checkNotifications();
|
|
|
|
function showToast(message, type = 'info') {
|
|
const container = document.getElementById('toastContainer');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
const colors = { success: 'text-emerald-500', error: 'text-rose-500', warning: 'text-amber-500', info: 'text-indigo-500' };
|
|
const icons = { success: 'check-circle', error: 'x-circle', warning: 'alert-triangle', info: 'info' };
|
|
toast.innerHTML = `<i data-lucide="${icons[type]}" class="w-5 h-5 ${colors[type]} flex-shrink-0"></i><span class="text-sm font-medium text-slate-700">${message}</span>`;
|
|
container.appendChild(toast);
|
|
lucide.createIcons();
|
|
setTimeout(() => { toast.style.animation = 'slideOutRight 0.3s ease-in'; setTimeout(() => toast.remove(), 300); }, 3000);
|
|
}
|
|
</script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html> |