733 lines
27 KiB
HTML
733 lines
27 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>历史文章 - 微信文章访问系统</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
color: white;
|
||
padding: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.8em;
|
||
font-weight: 700;
|
||
color: white;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.logo:hover {
|
||
text-decoration: none;
|
||
color: white;
|
||
}
|
||
|
||
/* 导航菜单 */
|
||
.nav-menu {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-link {
|
||
color: white;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
padding: 8px 16px;
|
||
border-radius: 6px;
|
||
transition: all 0.3s;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-1px);
|
||
text-decoration: none;
|
||
color: white;
|
||
}
|
||
|
||
.nav-link.active {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border-color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2.5em;
|
||
margin-bottom: 10px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.account-info {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
margin-top: 20px;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.account-info h2 {
|
||
font-size: 1.5em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.account-info p {
|
||
font-size: 1.1em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.content {
|
||
padding: 30px;
|
||
}
|
||
|
||
.loading {
|
||
text-align: center;
|
||
padding: 50px;
|
||
font-size: 1.2em;
|
||
color: #666;
|
||
}
|
||
|
||
.articles-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.article-card {
|
||
background: white;
|
||
border: 1px solid #e1e5e9;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.article-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
border-color: #4facfe;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 1.2em;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 10px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
padding-top: 15px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.article-date {
|
||
color: #7f8c8d;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.article-stats {
|
||
display: flex;
|
||
gap: 15px;
|
||
font-size: 0.85em;
|
||
color: #95a5a6;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
}
|
||
|
||
.back-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 1em;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.back-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.error-message {
|
||
text-align: center;
|
||
padding: 50px;
|
||
color: #e74c3c;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.no-articles {
|
||
text-align: center;
|
||
padding: 50px;
|
||
color: #7f8c8d;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.search-bar {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.search-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
padding: 12px;
|
||
border: 2px solid #e1e5e9;
|
||
border-radius: 8px;
|
||
font-size: 1em;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.search-input:focus {
|
||
outline: none;
|
||
border-color: #4facfe;
|
||
}
|
||
|
||
.search-button {
|
||
padding: 12px 24px;
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 1em;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.search-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
|
||
}
|
||
|
||
.time-filter {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.time-filter button {
|
||
padding: 8px 16px;
|
||
background: #f8f9fa;
|
||
border: 2px solid #e1e5e9;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-size: 0.9em;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.time-filter button:hover {
|
||
background: #e9ecef;
|
||
}
|
||
|
||
.time-filter button.active {
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
color: white;
|
||
border-color: #4facfe;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.articles-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
.content {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="header-content">
|
||
<a href="frontend.html" class="logo">🔍 易搜高</a>
|
||
<nav class="nav-menu">
|
||
<a href="frontend.html" class="nav-link">首页</a>
|
||
<a href="#" class="nav-link">监控中心</a>
|
||
<a href="#" class="nav-link">数据分析</a>
|
||
<a href="#" class="nav-link">帮助文档</a>
|
||
<a href="user-center.html" class="nav-link" id="userCenterLink">👤 用户中心</a>
|
||
<a href="login.html" class="nav-link" id="loginLink">🔐 登录</a>
|
||
<div id="userMenu" class="user-info"></div>
|
||
</nav>
|
||
</div>
|
||
<h1>历史文章</h1>
|
||
<div class="account-info" id="accountInfo">
|
||
<h2 id="accountName">加载中...</h2>
|
||
<p id="accountPlatform">平台信息加载中...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<button class="back-button" onclick="goBack()">
|
||
← 返回上一页
|
||
</button>
|
||
|
||
<div class="search-bar">
|
||
<div class="time-filter">
|
||
<button onclick="filterByTime('all')" class="time-btn active" data-time="all">全部</button>
|
||
<button onclick="filterByTime('today')" class="time-btn" data-time="today">今天</button>
|
||
<button onclick="filterByTime('yesterday')" class="time-btn" data-time="yesterday">昨天</button>
|
||
<button onclick="filterByTime('3days')" class="time-btn" data-time="3days">三天前</button>
|
||
<button onclick="filterByTime('7days')" class="time-btn" data-time="7days">七天前</button>
|
||
</div>
|
||
|
||
<div class="search-row">
|
||
<input type="text" class="search-input" id="searchInput" placeholder="搜索文章标题...">
|
||
<button class="search-button" onclick="searchArticles()">搜索</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="loadingState" class="loading">
|
||
正在加载历史文章...
|
||
</div>
|
||
|
||
<div id="articlesContainer" style="display: none;">
|
||
<div id="articlesGrid" class="articles-grid">
|
||
<!-- 文章列表将在这里动态生成 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div id="errorState" class="error-message" style="display: none;">
|
||
加载历史文章失败，请稍后重试
|
||
</div>
|
||
|
||
<div id="noArticlesState" class="no-articles" style="display: none;">
|
||
暂无历史文章
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 模拟历史文章数据
|
||
const historyArticlesData = {
|
||
1: {
|
||
account: '科技前沿',
|
||
platform: '微信公众号',
|
||
field: '科技',
|
||
articles: [
|
||
{ id: 101, title: '机器学习在医疗领域的应用：从诊断到治疗的革命', date: '2025-01-24', readCount: 5234, likeCount: 189, commentCount: 45 },
|
||
{ id: 102, title: '量子计算的发展前景：突破传统计算极限', date: '2025-01-23', readCount: 3892, likeCount: 156, commentCount: 32 },
|
||
{ id: 103, title: '区块链技术的实际应用案例：不止是加密货币', date: '2025-01-22', readCount: 4123, likeCount: 178, commentCount: 38 },
|
||
{ id: 104, title: '人工智能伦理：技术发展的道德边界', date: '2025-01-21', readCount: 3567, likeCount: 145, commentCount: 29 },
|
||
{ id: 105, title: '5G技术的商业化应用：改变生活方式', date: '2025-01-20', readCount: 4789, likeCount: 198, commentCount: 41 },
|
||
{ id: 106, title: '虚拟现实技术的教育应用前景', date: '2025-01-19', readCount: 2934, likeCount: 123, commentCount: 25 },
|
||
{ id: 107, title: '物联网安全：智能家居的隐私保护', date: '2025-01-18', readCount: 3456, likeCount: 167, commentCount: 33 },
|
||
{ id: 108, title: '边缘计算：下一代云计算架构', date: '2025-01-17', readCount: 2789, likeCount: 134, commentCount: 28 },
|
||
{ id: 109, title: 'ChatGPT对编程行业的影响分析', date: '2025-01-16', readCount: 4567, likeCount: 234, commentCount: 56 },
|
||
{ id: 110, title: '自动驾驶技术的最新进展', date: '2025-01-15', readCount: 3876, likeCount: 198, commentCount: 45 }
|
||
]
|
||
},
|
||
2: {
|
||
account: '娱乐资讯',
|
||
platform: '今日头条',
|
||
field: '娱乐',
|
||
articles: [
|
||
{ id: 201, title: '春节档电影票房分析：谁是最大赢家', date: '2025-01-24', readCount: 8934, likeCount: 456, commentCount: 123 },
|
||
{ id: 202, title: '综艺节目收视率排行榜：观众最爱看什么', date: '2025-01-23', readCount: 7234, likeCount: 389, commentCount: 98 },
|
||
{ id: 203, title: '明星时尚穿搭盘点：2024年流行趋势', date: '2025-01-22', readCount: 6543, likeCount: 334, commentCount: 87 },
|
||
{ id: 204, title: '音乐节现场直击：年轻人的狂欢盛宴', date: '2025-01-21', readCount: 5432, likeCount: 278, commentCount: 76 },
|
||
{ id: 205, title: '电视剧口碑榜：哪些作品值得追', date: '2025-01-20', readCount: 4987, likeCount: 256, commentCount: 69 },
|
||
{ id: 206, title: '网红经济分析：流量变现的新模式', date: '2025-01-19', readCount: 4321, likeCount: 223, commentCount: 58 }
|
||
]
|
||
},
|
||
3: {
|
||
account: '美食文化',
|
||
platform: '微信公众号',
|
||
field: '美食',
|
||
articles: [
|
||
{ id: 301, title: '春节传统美食制作方法：家乡的味道', date: '2025-01-24', readCount: 6789, likeCount: 345, commentCount: 89 },
|
||
{ id: 302, title: '各地特色小吃推荐：舌尖上的中国', date: '2025-01-23', readCount: 5432, likeCount: 278, commentCount: 67 },
|
||
{ id: 303, title: '健康饮食新趋势：营养与美味的平衡', date: '2025-01-22', readCount: 4567, likeCount: 234, commentCount: 56 },
|
||
{ id: 304, title: '素食主义：环保与健康的双重选择', date: '2025-01-21', readCount: 3876, likeCount: 198, commentCount: 45 },
|
||
{ id: 305, title: '咖啡文化探索：从豆子到杯子的旅程', date: '2025-01-20', readCount: 3234, likeCount: 167, commentCount: 38 },
|
||
{ id: 306, title: '茶艺入门：中国传统文化的精髓', date: '2025-01-19', readCount: 2987, likeCount: 156, commentCount: 34 },
|
||
{ id: 307, title: '烘焙技巧分享：新手也能做出美味蛋糕', date: '2025-01-18', readCount: 2765, likeCount: 145, commentCount: 31 }
|
||
]
|
||
}
|
||
};
|
||
|
||
let currentArticles = [];
|
||
let filteredArticles = [];
|
||
let currentFilter = 'all';
|
||
|
||
// 返回到主页面
|
||
function goBack() {
|
||
// 直接跳转到 frontend.html 页面
|
||
window.location.href = 'frontend.html';
|
||
}
|
||
|
||
// 时间筛选功能
|
||
function filterByTime(timeRange) {
|
||
currentFilter = timeRange;
|
||
|
||
// 更新按钮状态
|
||
document.querySelectorAll('.time-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
document.querySelector(`[data-time="${timeRange}"]`).classList.add('active');
|
||
|
||
// 为了演示，我们使用文章数据中的最新日期作为"今天"
|
||
const latestArticle = currentArticles.reduce((latest, article) => {
|
||
return new Date(article.date) > new Date(latest.date) ? article : latest;
|
||
}, currentArticles[0]);
|
||
|
||
const today = new Date(latestArticle.date);
|
||
today.setHours(0, 0, 0, 0);
|
||
|
||
let startDate = new Date();
|
||
let endDate = new Date();
|
||
|
||
switch(timeRange) {
|
||
case 'today':
|
||
// 今天：2025-1-24
|
||
startDate = new Date('2025-01-24');
|
||
endDate = new Date('2025-01-24');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
case 'yesterday':
|
||
// 昨天：2025-1-23
|
||
startDate = new Date('2025-01-23');
|
||
endDate = new Date('2025-01-23');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
case '3days':
|
||
// 三天前：2025-1-17到2025-1-22
|
||
startDate = new Date('2025-01-17');
|
||
endDate = new Date('2025-01-22');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
case '7days':
|
||
// 七天前：2024-12-24到2025-1-16
|
||
startDate = new Date('2024-12-24');
|
||
endDate = new Date('2025-01-16');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
case 'all':
|
||
default:
|
||
// 显示所有文章
|
||
filteredArticles = [...currentArticles];
|
||
renderArticles(filteredArticles);
|
||
return;
|
||
}
|
||
|
||
// 根据时间筛选文章
|
||
filteredArticles = currentArticles.filter(article => {
|
||
const articleDate = new Date(article.date);
|
||
return articleDate >= startDate && articleDate <= endDate;
|
||
});
|
||
|
||
renderArticles(filteredArticles);
|
||
}
|
||
|
||
// 获取URL参数
|
||
function getUrlParameter(name) {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
return urlParams.get(name);
|
||
}
|
||
|
||
// 格式化数字
|
||
function formatNumber(num) {
|
||
if (num >= 10000) {
|
||
return (num / 10000).toFixed(1) + 'w';
|
||
}
|
||
return num.toString();
|
||
}
|
||
|
||
// 加载历史文章
|
||
function loadHistoryArticles() {
|
||
const accountId = getUrlParameter('account');
|
||
console.log('加载历史文章，账号ID:', accountId);
|
||
|
||
if (!accountId || !historyArticlesData[accountId]) {
|
||
document.getElementById('loadingState').style.display = 'none';
|
||
document.getElementById('errorState').style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
const accountData = historyArticlesData[accountId];
|
||
|
||
// 更新账号信息
|
||
document.getElementById('accountName').textContent = accountData.account;
|
||
document.getElementById('accountPlatform').textContent = `${accountData.platform} · ${accountData.field}领域`;
|
||
|
||
// 设置当前文章列表
|
||
currentArticles = accountData.articles;
|
||
filteredArticles = [...currentArticles];
|
||
|
||
// 隐藏加载状态，显示文章列表
|
||
document.getElementById('loadingState').style.display = 'none';
|
||
document.getElementById('articlesContainer').style.display = 'block';
|
||
|
||
// 渲染文章列表
|
||
renderArticles(filteredArticles);
|
||
}
|
||
|
||
// 渲染文章列表
|
||
function renderArticles(articles) {
|
||
const articlesGrid = document.getElementById('articlesGrid');
|
||
|
||
if (articles.length === 0) {
|
||
document.getElementById('articlesContainer').style.display = 'none';
|
||
document.getElementById('noArticlesState').style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
let articlesHtml = '';
|
||
articles.forEach(article => {
|
||
articlesHtml += `
|
||
<div class="article-card" onclick="viewArticle(${article.id})">
|
||
<div class="article-title">${article.title}</div>
|
||
<div class="article-meta">
|
||
<div class="article-date">${article.date}</div>
|
||
<div class="article-stats">
|
||
<div class="stat-item">
|
||
<span>👁</span>
|
||
<span>${formatNumber(article.readCount)}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>👍</span>
|
||
<span>${formatNumber(article.likeCount)}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>💬</span>
|
||
<span>${article.commentCount}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
articlesGrid.innerHTML = articlesHtml;
|
||
}
|
||
|
||
// 查看文章详情
|
||
function viewArticle(articleId) {
|
||
// 跳转到文章详情页面
|
||
window.open(`article-detail.html?id=${articleId}`, '_blank');
|
||
}
|
||
|
||
// 搜索文章
|
||
function searchArticles() {
|
||
const searchTerm = document.getElementById('searchInput').value.toLowerCase().trim();
|
||
|
||
// 首先应用时间筛选
|
||
let articlesToSearch = [...currentArticles];
|
||
if (currentFilter !== 'all') {
|
||
let startDate = new Date();
|
||
let endDate = new Date();
|
||
|
||
switch(currentFilter) {
|
||
case 'today':
|
||
// 今天：2025-1-24
|
||
startDate = new Date('2025-01-24');
|
||
endDate = new Date('2025-01-24');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
case 'yesterday':
|
||
// 昨天：2025-1-23
|
||
startDate = new Date('2025-01-23');
|
||
endDate = new Date('2025-01-23');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
case '3days':
|
||
// 三天前：2025-1-17到2025-1-22
|
||
startDate = new Date('2025-01-17');
|
||
endDate = new Date('2025-01-22');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
case '7days':
|
||
// 七天前：2024-12-24到2025-1-16
|
||
startDate = new Date('2024-12-24');
|
||
endDate = new Date('2025-01-16');
|
||
endDate.setHours(23, 59, 59, 999);
|
||
break;
|
||
}
|
||
|
||
articlesToSearch = articlesToSearch.filter(article => {
|
||
const articleDate = new Date(article.date);
|
||
return articleDate >= startDate && articleDate <= endDate;
|
||
});
|
||
}
|
||
|
||
// 然后应用搜索
|
||
if (searchTerm === '') {
|
||
filteredArticles = articlesToSearch;
|
||
} else {
|
||
filteredArticles = articlesToSearch.filter(article =>
|
||
article.title.toLowerCase().includes(searchTerm)
|
||
);
|
||
}
|
||
|
||
renderArticles(filteredArticles);
|
||
}
|
||
|
||
// 登录状态管理
|
||
function checkLoginStatus() {
|
||
// 检查认证数据
|
||
const authData = localStorage.getItem('authData') || sessionStorage.getItem('authData');
|
||
|
||
if (authData) {
|
||
try {
|
||
const auth = JSON.parse(authData);
|
||
const username = auth.user_info && auth.user_info.username ? auth.user_info.username : '用户';
|
||
showLoggedInState(username);
|
||
} catch (e) {
|
||
console.error('解析登录数据失败:', e);
|
||
showLoggedOutState();
|
||
}
|
||
} else {
|
||
showLoggedOutState();
|
||
}
|
||
}
|
||
|
||
// 显示已登录状态
|
||
function showLoggedInState(username) {
|
||
const loginLink = document.getElementById('loginLink');
|
||
const userMenu = document.getElementById('userMenu');
|
||
|
||
if (loginLink) loginLink.style.display = 'none';
|
||
if (userMenu) {
|
||
userMenu.innerHTML = `
|
||
<div class="user-info">
|
||
<span class="user-name">${username}</span>
|
||
<button class="logout-btn" onclick="logout()" style="background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s;">退出登录</button>
|
||
</div>
|
||
`;
|
||
userMenu.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
// 显示未登录状态
|
||
function showLoggedOutState() {
|
||
const loginLink = document.getElementById('loginLink');
|
||
const userMenu = document.getElementById('userMenu');
|
||
|
||
if (loginLink) loginLink.style.display = 'inline';
|
||
if (userMenu) userMenu.innerHTML = '';
|
||
}
|
||
|
||
// 登出功能
|
||
function logout() {
|
||
if (confirm('确定要退出登录吗？')) {
|
||
// 获取认证数据
|
||
const authData = localStorage.getItem('authData') || sessionStorage.getItem('authData');
|
||
let token = '';
|
||
|
||
if (authData) {
|
||
try {
|
||
const auth = JSON.parse(authData);
|
||
token = auth.token || '';
|
||
} catch (e) {
|
||
console.error('解析token失败:', e);
|
||
}
|
||
}
|
||
|
||
// 调用后端API登出
|
||
fetch('http://localhost:8080/api/user/logout', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': token
|
||
},
|
||
body: JSON.stringify({ token: token })
|
||
})
|
||
.finally(() => {
|
||
// 清除所有认证信息
|
||
localStorage.removeItem('authData');
|
||
sessionStorage.removeItem('authData');
|
||
localStorage.removeItem('isLoggedIn');
|
||
localStorage.removeItem('username');
|
||
localStorage.removeItem('token');
|
||
sessionStorage.removeItem('userSession');
|
||
|
||
showLoggedOutState();
|
||
alert('已成功退出登录！');
|
||
window.location.href = 'login.html';
|
||
});
|
||
}
|
||
}
|
||
|
||
// 监听搜索框回车事件
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 检查登录状态
|
||
checkLoginStatus();
|
||
|
||
const searchInput = document.getElementById('searchInput');
|
||
searchInput.addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
searchArticles();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 页面加载完成后加载历史文章
|
||
window.addEventListener('load', loadHistoryArticles);
|
||
</script>
|
||
</body>
|
||
</html> |