863 lines
32 KiB
HTML
863 lines
32 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>
|
||
<meta name="keywords" content="文章详情,自媒体文章,微信公众号,头条号,百家号">
|
||
<style>
|
||
/* 全局样式重置 */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||
background: #f5f6fa;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
.header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 15px 0;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.header-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
text-decoration: none;
|
||
color: white;
|
||
}
|
||
|
||
.back-btn {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
padding: 8px 16px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.back-btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-1px);
|
||
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);
|
||
}
|
||
|
||
/* 主容器 */
|
||
.container {
|
||
max-width: 1000px;
|
||
margin: 20px auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* 文章卡片 */
|
||
.article-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
overflow: hidden;
|
||
margin-bottom: 20px;
|
||
animation: fadeIn 0.5s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* 文章头部信息 */
|
||
.article-header {
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||
padding: 30px;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #2c3e50;
|
||
margin-bottom: 20px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
background: white;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
color: #495057;
|
||
border: 1px solid #e9ecef;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.meta-item.platform {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
border-color: #bbdefb;
|
||
}
|
||
|
||
.meta-item.account {
|
||
background: #f3e5f5;
|
||
color: #7b1fa2;
|
||
border-color: #e1bee7;
|
||
}
|
||
|
||
.meta-item.field {
|
||
background: #e8f5e8;
|
||
color: #388e3c;
|
||
border-color: #c8e6c9;
|
||
}
|
||
|
||
.meta-item.date {
|
||
background: #fff3e0;
|
||
color: #f57c00;
|
||
border-color: #ffcc02;
|
||
}
|
||
|
||
/* 文章统计 */
|
||
.article-stats {
|
||
padding: 25px 30px;
|
||
background: #fafbfc;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.stat-item:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.stat-value {
|
||
display: block;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #667eea;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #6c757d;
|
||
}
|
||
|
||
/* 文章内容 */
|
||
.article-content {
|
||
padding: 30px;
|
||
}
|
||
|
||
.content-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.content-section h4 {
|
||
font-size: 18px;
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #667eea;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.content-section p {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
color: #495057;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.content-section h3 {
|
||
font-size: 20px;
|
||
color: #2c3e50;
|
||
margin: 25px 0 15px 0;
|
||
padding-left: 15px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
/* 文章操作按钮 */
|
||
.article-actions {
|
||
padding: 30px;
|
||
background: #f8f9fa;
|
||
border-top: 1px solid #e9ecef;
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||
text-decoration: none;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: white;
|
||
color: #495057;
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #f8f9fa;
|
||
border-color: #667eea;
|
||
color: #667eea;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.loading {
|
||
text-align: center;
|
||
padding: 50px;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.loading-spinner {
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #667eea;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 错误状态 */
|
||
.error-message {
|
||
text-align: center;
|
||
padding: 50px;
|
||
color: #dc3545;
|
||
}
|
||
|
||
.error-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.article-header {
|
||
padding: 20px;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.article-meta {
|
||
gap: 10px;
|
||
}
|
||
|
||
.meta-item {
|
||
font-size: 12px;
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
}
|
||
|
||
.article-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.article-actions {
|
||
padding: 20px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 头部 -->
|
||
<header 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>
|
||
</header>
|
||
|
||
<!-- 主容器 -->
|
||
<div class="container">
|
||
<!-- 加载状态 -->
|
||
<div id="loadingState" class="loading">
|
||
<div class="loading-spinner"></div>
|
||
<p>正在加载文章详情...</p>
|
||
</div>
|
||
|
||
<!-- 错误状态 -->
|
||
<div id="errorState" class="error-message" style="display: none;">
|
||
<div class="error-icon">⚠️</div>
|
||
<h2>文章不存在</h2>
|
||
<p>抱歉，您访问的文章不存在或已被删除。</p>
|
||
<a href="frontend.html" class="action-btn btn-primary" style="margin-top: 20px;">返回首页</a>
|
||
</div>
|
||
|
||
<!-- 文章内容 -->
|
||
<div id="articleContent" style="display: none;">
|
||
<div class="article-card">
|
||
<!-- 文章头部信息 -->
|
||
<div class="article-header">
|
||
<h1 class="article-title" id="articleTitle">文章标题</h1>
|
||
<div class="article-meta">
|
||
<div class="meta-item platform">
|
||
<span>📱</span>
|
||
<span id="articlePlatform">公众号</span>
|
||
</div>
|
||
<div class="meta-item account">
|
||
<span>👤</span>
|
||
<span id="articleAccount">账号名称</span>
|
||
</div>
|
||
<div class="meta-item field">
|
||
<span>🏷️</span>
|
||
<span id="articleField">领域</span>
|
||
</div>
|
||
<div class="meta-item date">
|
||
<span>📅</span>
|
||
<span id="articleDate">发布时间</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章统计 -->
|
||
<div class="article-stats">
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<span class="stat-value" id="readCount">0</span>
|
||
<span class="stat-label">阅读量</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value" id="likeCount">0</span>
|
||
<span class="stat-label">点赞数</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value" id="commentCount">0</span>
|
||
<span class="stat-label">评论数</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value" id="shareCount">0</span>
|
||
<span class="stat-label">分享数</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章内容 -->
|
||
<div class="article-content">
|
||
<div class="content-section">
|
||
<h4>📝 文章摘要</h4>
|
||
<p id="articleSummary">文章摘要内容...</p>
|
||
</div>
|
||
|
||
<div class="content-section">
|
||
<h4>📄 正文内容</h4>
|
||
<div id="articleFullText">
|
||
<!-- 正文内容将在这里动态插入 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章操作按钮 -->
|
||
<div class="article-actions">
|
||
<button class="action-btn btn-primary" onclick="viewOriginalUrl()">
|
||
🔗 原文地址
|
||
</button>
|
||
<button class="action-btn btn-primary" onclick="exportFullText()">
|
||
📄 导出全文
|
||
</button>
|
||
<button class="action-btn btn-primary" onclick="viewHistoryArticles()">
|
||
📚 历史文章
|
||
</button>
|
||
<button class="action-btn btn-secondary" onclick="shareArticle()">
|
||
📤 分享文章
|
||
</button>
|
||
<button class="action-btn btn-secondary" onclick="collectArticle()">
|
||
⭐ 收藏文章
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 文章详细数据
|
||
const articleDetails = {
|
||
1: {
|
||
platform: '公众号',
|
||
account: '科技前沿',
|
||
field: '科技',
|
||
title: 'AI技术革命：改变未来生活的十大趋势',
|
||
publishTime: '2024-01-15',
|
||
readCount: '10.5万',
|
||
likeCount: '2.3万',
|
||
commentCount: 856,
|
||
shareCount: 1250,
|
||
summary: '本文深入分析了人工智能技术在各个领域的应用前景，探讨了AI如何改变我们的生活方式、工作模式和社会结构。从智能家居到自动驾驶，从医疗诊断到金融分析，AI的应用已经渗透到生活的方方面面。',
|
||
content: `
|
||
<p>随着科技的飞速发展，人工智能技术正以前所未有的速度改变着我们的世界。从智能家居到自动驾驶，从医疗诊断到金融分析，AI的应用已经渗透到生活的方方面面。</p>
|
||
|
||
<h3>1. 智能家居的普及</h3>
|
||
<p>智能家居系统通过AI技术学习用户的生活习惯，自动调节家居环境，提供更加舒适便捷的生活体验。智能音箱、智能照明、智能安防等产品已经成为现代家庭的标准配置。</p>
|
||
|
||
<h3>2. 自动驾驶技术的突破</h3>
|
||
<p>自动驾驶汽车利用深度学习和计算机视觉技术，能够实时感知周围环境，做出安全的驾驶决策。多家科技公司和汽车制造商都在积极研发自动驾驶技术，预计在未来几年内将实现商业化应用。</p>
|
||
|
||
<h3>3. 医疗诊断的精准化</h3>
|
||
<p>AI辅助诊断系统能够分析医学影像，识别疾病特征，提高诊断的准确性和效率。在癌症筛查、心脏病诊断等领域，AI已经展现出超越人类专家的能力。</p>
|
||
|
||
<h3>4. 金融服务的智能化</h3>
|
||
<p>AI技术在金融领域的应用包括风险评估、欺诈检测、智能投顾等。通过大数据分析和机器学习算法，金融机构能够为客户提供更加个性化和精准的服务。</p>
|
||
|
||
<h3>5. 教育个性化的发展</h3>
|
||
<p>AI教育平台能够根据学生的学习进度和特点，提供个性化的学习方案。智能辅导系统可以实时反馈学生的学习情况，帮助教师更好地指导学生。</p>
|
||
`
|
||
},
|
||
2: {
|
||
platform: '头条号',
|
||
account: '娱乐八卦',
|
||
field: '娱乐',
|
||
title: '明星动态最新消息',
|
||
publishTime: '2024-01-14',
|
||
readCount: '8.2万',
|
||
likeCount: '1.8万',
|
||
commentCount: 432,
|
||
shareCount: 890,
|
||
summary: '最新娱乐圈动态，包括明星新作品发布、综艺节目表现、时尚活动红毯时刻等。本文为您带来娱乐圈的最新资讯和明星们的精彩表现。',
|
||
content: `
|
||
<p>娱乐圈总是充满新鲜事，明星们的每一个动态都牵动着粉丝的心。今天我们就来为大家带来最新的娱乐资讯。</p>
|
||
|
||
<h3>影视新作发布</h3>
|
||
<p>多位知名演员近期都有新作品上线，包括电影、电视剧和综艺节目。这些作品涵盖了不同的题材和风格，为观众带来丰富的视听享受。</p>
|
||
|
||
<h3>综艺节目精彩表现</h3>
|
||
<p>各大卫视和网络平台推出的综艺节目持续热播，明星嘉宾在节目中的精彩表现成为观众讨论的焦点。真人秀、音乐竞技、脱口秀等多种类型的节目为观众带来丰富的娱乐体验。</p>
|
||
|
||
<h3>时尚活动红毯时刻</h3>
|
||
<p>各大时尚活动和颁奖典礼上，明星们的红毯造型总是备受关注。从服装搭配到妆容发型，每一个细节都展现着明星的时尚品味和个人风格。</p>
|
||
|
||
<h3>明星公益行动</h3>
|
||
<p>越来越多的明星积极参与公益活动，用自己的影响力传递正能量。从教育扶贫到环保宣传，从关爱老人到帮助儿童，明星们用实际行动践行社会责任。</p>
|
||
`
|
||
},
|
||
3: {
|
||
platform: '公众号',
|
||
account: '美食生活',
|
||
field: '美食',
|
||
title: '传统美食文化传承',
|
||
publishTime: '2024-01-13',
|
||
readCount: '15.7万',
|
||
likeCount: '3.1万',
|
||
commentCount: 967,
|
||
shareCount: 2100,
|
||
summary: '中华美食文化源远流长，各地传统美食承载着深厚的历史文化底蕴。本文将带您走进传统美食的世界，了解美食背后的文化故事和制作工艺。',
|
||
content: `
|
||
<p>中华美食文化源远流长，各地传统美食承载着深厚的历史文化底蕴。每一道传统菜品都蕴含着丰富的历史文化内涵，反映了不同地区的风土人情和生活智慧。</p>
|
||
|
||
<h3>美食与文化的融合</h3>
|
||
<p>中国传统美食不仅仅是味觉的享受，更是文化的传承。每一道传统菜品都蕴含着丰富的历史文化内涵，反映了不同地区的风土人情和生活智慧。</p>
|
||
|
||
<h3>地方特色美食</h3>
|
||
<p>从北京的烤鸭到四川的火锅，从广东的早茶到陕西的肉夹馍，各地特色美食展现了中华饮食文化的多样性和地域特色。这些美食不仅是当地人的骄傲，也成为了吸引游客的重要名片。</p>
|
||
|
||
<h3>传统制作工艺</h3>
|
||
<p>传统美食的制作工艺往往需要经过多年的学习和实践才能掌握。从选材到烹饪，每一个环节都讲究精益求精，这种工匠精神正是传统美食文化的重要组成部分。</p>
|
||
|
||
<h3>美食文化的现代传承</h3>
|
||
<p>在现代化进程中，如何保护和传承传统美食文化成为重要课题。通过美食节、烹饪比赛、文化展示等多种形式，传统美食文化正在以新的方式焕发生机。</p>
|
||
|
||
<h3>美食与健康</h3>
|
||
<p>现代人在享受美食的同时，也越来越注重健康饮食。传统美食在保持原有风味的基础上，也在不断创新，推出更加健康、营养的菜品，满足现代人的饮食需求。</p>
|
||
`
|
||
}
|
||
};
|
||
|
||
// 获取URL参数
|
||
function getUrlParameter(name) {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
return urlParams.get(name);
|
||
}
|
||
|
||
// 加载文章详情
|
||
function loadArticleDetail(articleId) {
|
||
const article = articleDetails[articleId];
|
||
|
||
if (!article) {
|
||
document.getElementById('loadingState').style.display = 'none';
|
||
document.getElementById('errorState').style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
// 填充文章数据
|
||
document.getElementById('articleTitle').textContent = article.title;
|
||
document.getElementById('articlePlatform').textContent = article.platform;
|
||
document.getElementById('articleAccount').textContent = article.account;
|
||
document.getElementById('articleField').textContent = article.field;
|
||
document.getElementById('articleDate').textContent = article.publishTime;
|
||
document.getElementById('readCount').textContent = article.readCount;
|
||
document.getElementById('likeCount').textContent = article.likeCount;
|
||
document.getElementById('commentCount').textContent = article.commentCount;
|
||
document.getElementById('shareCount').textContent = article.shareCount || '0';
|
||
document.getElementById('articleSummary').textContent = article.summary;
|
||
document.getElementById('articleFullText').innerHTML = article.content;
|
||
|
||
// 显示文章内容，隐藏加载状态
|
||
document.getElementById('loadingState').style.display = 'none';
|
||
document.getElementById('articleContent').style.display = 'block';
|
||
}
|
||
|
||
// 查看原文地址
|
||
function viewOriginalUrl() {
|
||
const articleId = getUrlParameter('id');
|
||
console.log('查看原文地址，文章ID:', articleId);
|
||
|
||
// 模拟原文地址
|
||
const originalUrls = {
|
||
1: 'https://mp.weixin.qq.com/s/tech-ai-trends-2024',
|
||
2: 'https://www.toutiao.com/article/entertainment-news-2024',
|
||
3: 'https://mp.weixin.qq.com/s/traditional-food-culture'
|
||
};
|
||
|
||
const url = originalUrls[articleId] || '#';
|
||
if (url !== '#') {
|
||
window.open(url, '_blank');
|
||
} else {
|
||
alert('原文地址暂未提供');
|
||
}
|
||
}
|
||
|
||
// 导出全文
|
||
function exportFullText() {
|
||
const articleId = getUrlParameter('id');
|
||
const article = articleDetails[articleId];
|
||
|
||
if (!article) {
|
||
alert('文章信息不存在');
|
||
return;
|
||
}
|
||
|
||
// 创建导出内容
|
||
const exportContent = `
|
||
文章标题：${article.title}
|
||
平台：${article.platform}
|
||
账号：${article.account}
|
||
领域：${article.field}
|
||
发布时间：${article.publishTime}
|
||
阅读量：${article.readCount}
|
||
点赞数：${article.likeCount}
|
||
评论数：${article.commentCount}
|
||
分享数：${article.shareCount}
|
||
|
||
摘要：
|
||
${article.summary}
|
||
|
||
正文：
|
||
${article.content.replace(/<[^>]*>/g, '')}
|
||
`.trim();
|
||
|
||
// 创建下载链接
|
||
const blob = new Blob([exportContent], { type: 'text/plain;charset=utf-8' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `${article.title}.txt`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
alert('文章已导出为文本文件！');
|
||
}
|
||
|
||
// 查看历史文章
|
||
function viewHistoryArticles() {
|
||
const articleId = getUrlParameter('id');
|
||
const article = articleDetails[articleId];
|
||
|
||
if (!article) {
|
||
alert('文章信息不存在');
|
||
return;
|
||
}
|
||
|
||
// 跳转到历史文章页面，传递账号信息
|
||
const accountMap = {
|
||
1: 1, // 科技前沿
|
||
2: 2, // 娱乐资讯
|
||
3: 3 // 美食文化
|
||
};
|
||
|
||
const accountId = accountMap[articleId] || articleId;
|
||
window.open(`history-articles.html?account=${accountId}`, '_blank');
|
||
}
|
||
|
||
// 分享文章
|
||
function shareArticle() {
|
||
const articleId = getUrlParameter('id');
|
||
console.log('分享文章，文章ID:', articleId);
|
||
|
||
if (navigator.share) {
|
||
navigator.share({
|
||
title: document.getElementById('articleTitle').textContent,
|
||
text: document.getElementById('articleSummary').textContent,
|
||
url: window.location.href
|
||
});
|
||
} else {
|
||
alert('分享功能开发中...');
|
||
}
|
||
}
|
||
|
||
// 收藏文章
|
||
function collectArticle() {
|
||
const articleId = getUrlParameter('id');
|
||
console.log('收藏文章，文章ID:', articleId);
|
||
alert('文章已收藏！');
|
||
}
|
||
|
||
// 登录状态管理
|
||
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 = `
|
||
<span style="margin-right: 10px;">👋 ${username}</span>
|
||
<button onclick="logout()" style="
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
transition: all 0.3s;
|
||
" onmouseover="this.style.background='rgba(255, 255, 255, 0.3)'"
|
||
onmouseout="this.style.background='rgba(255, 255, 255, 0.2)'">
|
||
退出登录
|
||
</button>
|
||
`;
|
||
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 ? `Bearer ${token}` : ''
|
||
}
|
||
}).then(response => {
|
||
// 无论API调用成功与否，都清除本地数据
|
||
localStorage.removeItem('authData');
|
||
localStorage.removeItem('isLoggedIn');
|
||
localStorage.removeItem('username');
|
||
localStorage.removeItem('token');
|
||
sessionStorage.removeItem('authData');
|
||
sessionStorage.removeItem('userSession');
|
||
|
||
alert('已成功退出登录！');
|
||
window.location.href = 'login.html';
|
||
}).catch(error => {
|
||
console.error('登出请求失败:', error);
|
||
// 即使API调用失败，也清除本地数据
|
||
localStorage.removeItem('authData');
|
||
localStorage.removeItem('isLoggedIn');
|
||
localStorage.removeItem('username');
|
||
localStorage.removeItem('token');
|
||
sessionStorage.removeItem('authData');
|
||
sessionStorage.removeItem('userSession');
|
||
|
||
alert('已成功退出登录！');
|
||
window.location.href = 'login.html';
|
||
});
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后执行
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 检查登录状态
|
||
checkLoginStatus();
|
||
|
||
const articleId = getUrlParameter('id');
|
||
|
||
if (!articleId || !articleDetails[articleId]) {
|
||
// 显示错误状态
|
||
document.getElementById('loadingState').style.display = 'none';
|
||
document.getElementById('errorState').style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
// 模拟加载延迟
|
||
setTimeout(() => {
|
||
loadArticleDetail(articleId);
|
||
}, 800);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |