2425 lines
92 KiB
HTML
2425 lines
92 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);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.nav-menu {
|
||
display: flex;
|
||
gap: 30px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-menu a {
|
||
color: white;
|
||
text-decoration: none;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.nav-menu a:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 用户信息和登出按钮样式 */
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.user-name {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.logout-btn {
|
||
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;
|
||
}
|
||
|
||
.logout-btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 未登录状态样式 */
|
||
.login-link {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
padding: 6px 16px;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.login-link:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 主容器布局 */
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* 左侧边栏 */
|
||
.left-sidebar {
|
||
width: 200px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
padding: 20px;
|
||
height: fit-content;
|
||
}
|
||
|
||
.nav-tabs {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.nav-tab {
|
||
padding: 12px 16px;
|
||
background: #f8f9fa;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav-tab.active {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
|
||
.nav-tab:hover:not(.active) {
|
||
background: #e9ecef;
|
||
}
|
||
|
||
/* 主内容区 */
|
||
.main-content {
|
||
flex: 1;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
padding: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 文章详细内容区域 */
|
||
.article-detail-section {
|
||
display: none;
|
||
animation: fadeIn 0.3s ease-in;
|
||
}
|
||
|
||
.article-detail-section.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.detail-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 20px 30px;
|
||
border-radius: 8px 8px 0 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: -20px -20px 30px -20px;
|
||
}
|
||
|
||
.detail-title {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.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;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.back-btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.article-info {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.article-platform,
|
||
.article-account,
|
||
.article-field,
|
||
.article-date {
|
||
background: #f8f9fa;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
color: #495057;
|
||
border: 1px solid #e9ecef;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.article-platform {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
border-color: #bbdefb;
|
||
}
|
||
|
||
.article-field {
|
||
background: #f3e5f5;
|
||
color: #7b1fa2;
|
||
border-color: #e1bee7;
|
||
}
|
||
|
||
.article-date {
|
||
background: #e8f5e8;
|
||
color: #2e7d32;
|
||
border-color: #c8e6c9;
|
||
}
|
||
|
||
.article-summary {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 25px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.article-summary h4 {
|
||
margin: 0 0 10px 0;
|
||
color: #495057;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.article-summary p {
|
||
margin: 0;
|
||
color: #6c757d;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.article-content {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.article-content h4 {
|
||
margin: 0 0 15px 0;
|
||
color: #495057;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.article-content-text {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 8px;
|
||
border: 1px solid #e9ecef;
|
||
line-height: 1.8;
|
||
color: #495057;
|
||
font-size: 15px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.article-content-text::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.article-content-text::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.article-content-text::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.article-content-text::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
.article-stats {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.article-stats h4 {
|
||
margin: 0 0 15px 0;
|
||
color: #495057;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
padding: 15px;
|
||
background: white;
|
||
border-radius: 6px;
|
||
border: 1px solid #e9ecef;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #667eea;
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.article-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #e9ecef;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.3s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #5a6268;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
flex-direction: column;
|
||
padding: 10px;
|
||
}
|
||
|
||
.left-sidebar {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 15px;
|
||
}
|
||
|
||
.detail-header {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.detail-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.article-meta {
|
||
justify-content: center;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.article-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.article-content-text {
|
||
max-height: 300px;
|
||
}
|
||
}
|
||
|
||
/* 分类筛选区域 */
|
||
.cate-horizontal {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.cate-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.cate-label {
|
||
display: block;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.cate-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
list-style: none;
|
||
}
|
||
|
||
.cate-options li {
|
||
padding: 6px 12px;
|
||
background: #f8f9fa;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.cate-options li.cate-active,
|
||
.cate-options li:hover {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
/* 右侧边栏 */
|
||
.right-sidebar {
|
||
width: 280px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
padding: 20px;
|
||
height: fit-content;
|
||
border-left: 3px solid #667eea;
|
||
}
|
||
|
||
.follow {
|
||
text-align: center;
|
||
}
|
||
|
||
.account-add-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.account-add-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
|
||
}
|
||
|
||
.follw-box {
|
||
text-align: center;
|
||
}
|
||
|
||
.follw-no {
|
||
color: #6c757d;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.search-box {
|
||
position: relative;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
padding: 10px 40px 10px 15px;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
outline: none;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.search-box input:focus {
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.search-box i {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #6c757d;
|
||
}
|
||
|
||
/* 文章列表 */
|
||
.article-list {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.article-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.article-table th {
|
||
background: #f8f9fa;
|
||
padding: 12px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
border-bottom: 2px solid #dee2e6;
|
||
}
|
||
|
||
.article-table td {
|
||
padding: 12px;
|
||
border-bottom: 1px solid #dee2e6;
|
||
}
|
||
|
||
.article-table tr:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.tb-tbody-loading {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #6c757d;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 操作按钮 */
|
||
.action-btn {
|
||
padding: 4px 8px;
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
/* 详细按钮 */
|
||
.btn-detail {
|
||
padding: 6px 12px;
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
margin-right: 8px;
|
||
transition: all 0.3s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.btn-detail:hover {
|
||
background: #0056b3;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
|
||
}
|
||
|
||
/* 收藏按钮 */
|
||
.btn-favorite {
|
||
padding: 6px 12px;
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
transition: all 0.3s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.btn-favorite:hover {
|
||
background: #ffc107;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
|
||
}
|
||
|
||
/* 文章链接样式 */
|
||
.article-link {
|
||
color: #007bff;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
max-width: 200px;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.article-link:hover {
|
||
color: #0056b3;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 状态样式 */
|
||
.status-normal {
|
||
color: #28a745;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-error {
|
||
color: #dc3545;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 分页 */
|
||
.page-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.page-up, .page-down {
|
||
padding: 8px 12px;
|
||
background: #f8f9fa;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.page-up:hover, .page-down:hover {
|
||
background: #e9ecef;
|
||
}
|
||
|
||
.page-num {
|
||
width: 60px;
|
||
padding: 8px;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 导出按钮 */
|
||
.export {
|
||
padding: 10px 20px;
|
||
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
margin: 20px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.export:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
|
||
}
|
||
|
||
/* 对话框 */
|
||
.dialo-box {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.5);
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.dialo-box-son {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 30px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
position: relative;
|
||
}
|
||
|
||
.add-mp-close {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.add-mp-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.add-mp-link {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
margin: 15px 0;
|
||
outline: none;
|
||
}
|
||
|
||
.add-mp-link:focus {
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.add-mp-remain {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
line-height: 1.5;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.add-mp-remain a {
|
||
color: #667eea;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.add-mp-remain a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 文章详细内容弹窗样式 */
|
||
.article-detail .dialo-box-son {
|
||
max-width: 800px;
|
||
width: 95%;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
padding: 0;
|
||
}
|
||
|
||
.article-detail-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.article-detail-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 20px 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.article-detail-title {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.article-detail-header .add-mp-close {
|
||
color: white;
|
||
font-size: 24px;
|
||
top: 20px;
|
||
right: 20px;
|
||
}
|
||
|
||
.article-detail-body {
|
||
padding: 30px;
|
||
}
|
||
|
||
.article-info {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.article-platform,
|
||
.article-account,
|
||
.article-field {
|
||
background: #f8f9fa;
|
||
padding: 6px 12px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
color: #495057;
|
||
border: 1px solid #e9ecef;
|
||
}
|
||
|
||
.article-platform {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
border-color: #bbdefb;
|
||
}
|
||
|
||
.article-field {
|
||
background: #f3e5f5;
|
||
color: #7b1fa2;
|
||
border-color: #e1bee7;
|
||
}
|
||
|
||
.article-title {
|
||
color: #212529;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin: 0 0 20px 0;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.article-stats {
|
||
display: flex;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
padding: 15px 0;
|
||
border-top: 1px solid #e9ecef;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.stat-item {
|
||
font-size: 14px;
|
||
color: #6c757d;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.article-content {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.article-summary,
|
||
.article-full-content {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.article-summary h4,
|
||
.article-full-content h4 {
|
||
color: #495057;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #e9ecef;
|
||
}
|
||
|
||
.article-summary p {
|
||
color: #6c757d;
|
||
line-height: 1.6;
|
||
font-size: 15px;
|
||
margin: 0;
|
||
}
|
||
|
||
.article-full-text {
|
||
line-height: 1.7;
|
||
color: #495057;
|
||
}
|
||
|
||
.article-full-text p {
|
||
margin-bottom: 15px;
|
||
text-align: justify;
|
||
}
|
||
|
||
.article-full-text h3 {
|
||
color: #212529;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 25px 0 15px 0;
|
||
padding-left: 12px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.article-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
padding: 20px 0;
|
||
border-top: 1px solid #e9ecef;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #f8f9fa;
|
||
color: #495057;
|
||
border: 1px solid #dee2e6;
|
||
padding: 12px 24px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #e9ecef;
|
||
border-color: #adb5bd;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.left-sidebar, .right-sidebar {
|
||
width: 100%;
|
||
}
|
||
|
||
.cate-options {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.article-table {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.article-table th, .article-table td {
|
||
padding: 8px;
|
||
}
|
||
|
||
/* 文章详细内容弹窗响应式 */
|
||
.article-detail .dialo-box-son {
|
||
width: 98%;
|
||
max-height: 95vh;
|
||
margin: 10px;
|
||
}
|
||
|
||
.article-detail-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.article-meta {
|
||
gap: 10px;
|
||
}
|
||
|
||
.article-stats {
|
||
gap: 15px;
|
||
}
|
||
|
||
.article-actions {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.article-actions button {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 头部 -->
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<a href="#" class="logo">🔍 易搜高</a>
|
||
<nav class="nav-menu">
|
||
<a href="#" class="nav-link active">首页</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 class="left-sidebar">
|
||
<div class="nav-tabs">
|
||
<button class="nav-tab active" data-tab="library">📚 自媒体库</button>
|
||
<button class="nav-tab" data-tab="monitor">👁️ 监控账号</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-content" id="mainContent">
|
||
<!-- 分类筛选区域 -->
|
||
<div class="cate-horizontal" id="filterSection">
|
||
<div class="cate-group">
|
||
<span class="cate-label">平台</span>
|
||
<ul class="cate-options" data-key="formId">
|
||
<li class="cate-active">
|
||
<span data-id="0">🌐 全部</span>
|
||
</li>
|
||
<li><span data-id="100">📱 公众号</span></li>
|
||
<li><span data-id="101">📰 头条号</span></li>
|
||
<li><span data-id="102">📖 百家号</span></li>
|
||
<li><span data-id="103">🦊 搜狐号</span></li>
|
||
<li><span data-id="104">🐟 大鱼号</span></li>
|
||
<li><span data-id="105">🐧 企鹅号</span></li>
|
||
<li><span data-id="106">📮 网易号</span></li>
|
||
<li><span data-id="107">👁️ 一点号</span></li>
|
||
<li><span data-id="108">🦅 凤凰号</span></li>
|
||
<li><span data-id="109">🎯 趣头条</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">领域</span>
|
||
<ul class="cate-options" data-key="cateId">
|
||
<li class="cate-active"><span data-id="0">不限</span></li>
|
||
<li><span data-id="1">国际</span></li>
|
||
<li><span data-id="2">体育</span></li>
|
||
<li><span data-id="3">娱乐</span></li>
|
||
<li><span data-id="4">社会</span></li>
|
||
<li><span data-id="5">财经</span></li>
|
||
<li><span data-id="6">时事</span></li>
|
||
<li><span data-id="7">科技</span></li>
|
||
<li><span data-id="8">情感</span></li>
|
||
<li><span data-id="9">汽车</span></li>
|
||
<li><span data-id="10">教育</span></li>
|
||
<li><span data-id="11">时尚</span></li>
|
||
<li><span data-id="12">游戏</span></li>
|
||
<li><span data-id="13">军事</span></li>
|
||
<li><span data-id="14">旅游</span></li>
|
||
<li><span data-id="15">美食</span></li>
|
||
<li><span data-id="16">文化</span></li>
|
||
<li><span data-id="17">健康</span></li>
|
||
<li><span data-id="18">搞笑</span></li>
|
||
<li><span data-id="19">家居</span></li>
|
||
<li><span data-id="20">动漫</span></li>
|
||
<li><span data-id="21">宠物</span></li>
|
||
<li><span data-id="22">母婴</span></li>
|
||
<li><span data-id="23">星座</span></li>
|
||
<li><span data-id="24">历史</span></li>
|
||
<li><span data-id="25">音乐</span></li>
|
||
<li><span data-id="27">美图摄影</span></li>
|
||
<li><span data-id="26">综合</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">时间</span>
|
||
<ul class="cate-options" data-key="time">
|
||
<li class="cate-active"><span data-id="168">7天内</span></li>
|
||
<li><span data-id="12">12小时</span></li>
|
||
<li><span data-id="24">24小时</span></li>
|
||
<li><span data-id="72">3天内</span></li>
|
||
<li><span data-id="720">30天内</span></li>
|
||
<li><span data-id="8760">一年内</span></li>
|
||
<li><span data-id="0">不限</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">排序</span>
|
||
<ul class="cate-options" data-key="order">
|
||
<li class="cate-active"><span data-id="time">发布时间</span></li>
|
||
<li><span data-id="readNum">阅读量</span></li>
|
||
<li><span data-id="likeNum">点赞数</span></li>
|
||
<li><span data-id="comNum">评论数</span></li>
|
||
</ul>
|
||
<input type="number" id="data-num" placeholder="大于多少" />
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">类型</span>
|
||
<ul class="cate-options" data-key="type">
|
||
<li class="cate-active"><span data-id="0">不限</span></li>
|
||
<li><span data-id="1">文章</span></li>
|
||
<li><span data-id="2">视频</span></li>
|
||
<li><span data-id="3">微头条</span></li>
|
||
<li>
|
||
<span data-id="5">爆文</span>
|
||
<span style="color: #ff4444; font-size: 12px; margin-left: 3px;">🔥</span>
|
||
</li>
|
||
<li><span data-id="6">热文</span></li>
|
||
<li><span data-id="8">我的收藏</span></li>
|
||
</ul>
|
||
|
||
<div class="search-box">
|
||
<input type="text" id="search" placeholder="搜索关键词" title="点击搜索" />
|
||
<i class="iconfont icon-sousuo">🔍</i>
|
||
</div>
|
||
|
||
<div class="export">
|
||
📊 导出Excel
|
||
</div>
|
||
|
||
<div class="cond"></div>
|
||
|
||
<div class="page-box">
|
||
<span style="color: #6c757d; cursor: help;">❓</span>
|
||
<div class="cate-show">
|
||
<em>隐藏分类</em>
|
||
<span>▲</span>
|
||
</div>
|
||
<span class="page-up" title="上一页">◀</span>
|
||
<input type="number" value="1" class="page-num" />
|
||
<span class="page-down" title="下一页">▶</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章列表 -->
|
||
<div class="article-list" id="articleListSection">
|
||
<table class="article-table">
|
||
<thead class="tb-thead">
|
||
<tr>
|
||
<th>来源</th>
|
||
<th>领域</th>
|
||
<th>账号</th>
|
||
<th>文章标题</th>
|
||
<th>发布时间</th>
|
||
<th>阅读量</th>
|
||
<th>点赞数</th>
|
||
<th>评论数</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="tb-tbody">
|
||
<!-- 示例数据 -->
|
||
<tr>
|
||
<td>📱 公众号</td>
|
||
<td>科技</td>
|
||
<td>科技前沿</td>
|
||
<td>AI技术发展趋势分析</td>
|
||
<td>2024-01-15</td>
|
||
<td>10.5万</td>
|
||
<td>2.3万</td>
|
||
<td>856</td>
|
||
<td>
|
||
<button class="btn-detail" onclick="viewArticleDetail(1)" title="查看详细">📋 详细</button>
|
||
<button class="btn-favorite" onclick="toggleFavorite(1)" title="收藏账号">⭐ 收藏</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>📰 头条号</td>
|
||
<td>娱乐</td>
|
||
<td>娱乐八卦</td>
|
||
<td>明星动态最新消息</td>
|
||
<td>2024-01-14</td>
|
||
<td>8.2万</td>
|
||
<td>1.8万</td>
|
||
<td>432</td>
|
||
<td>
|
||
<button class="btn-detail" onclick="viewArticleDetail(2)" title="查看详细">📋 详细</button>
|
||
<button class="btn-favorite" onclick="toggleFavorite(2)" title="收藏账号">⭐ 收藏</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>📱 公众号</td>
|
||
<td>美食</td>
|
||
<td>美食生活</td>
|
||
<td>传统美食文化传承</td>
|
||
<td>2024-01-13</td>
|
||
<td>15.7万</td>
|
||
<td>3.1万</td>
|
||
<td>967</td>
|
||
<td>
|
||
<button class="btn-detail" onclick="viewArticleDetail(3)" title="查看详细">📋 详细</button>
|
||
<button class="btn-favorite" onclick="toggleFavorite(3)" title="收藏账号">⭐ 收藏</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="tb-tbody-loading" style="display: none;">
|
||
哦豁，啥也没搜到~🤪
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="page-box">
|
||
<span style="color: #6c757d; cursor: help;">❓</span>
|
||
<span class="page-up" title="上一页">◀</span>
|
||
<input type="number" value="1" class="page-num" />
|
||
<span class="page-down" title="下一页">▶</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章详细内容展示区域 -->
|
||
<div class="article-detail-section" id="articleDetailSection" style="display: none;">
|
||
<div class="article-detail-header">
|
||
<div class="detail-nav">
|
||
<button class="btn-back" onclick="hideArticleDetail()">← 返回列表</button>
|
||
<h3 class="article-detail-title">文章详细内容</h3>
|
||
</div>
|
||
</div>
|
||
<div class="article-detail-body">
|
||
<div class="article-info">
|
||
<div class="article-meta">
|
||
<span class="article-platform">📱 公众号</span>
|
||
<span class="article-account">科技前沿</span>
|
||
<span class="article-field">科技</span>
|
||
</div>
|
||
<h2 class="article-title">AI技术革命：改变未来生活的十大趋势</h2>
|
||
<div class="article-stats">
|
||
<span class="stat-item">📅 <span id="detail-publish-time">2024-01-20</span></span>
|
||
<span class="stat-item">👁️ <span id="detail-read-count">5.2万</span></span>
|
||
<span class="stat-item">👍 <span id="detail-like-count">1.8万</span></span>
|
||
<span class="stat-item">💬 <span id="detail-comment-count">423</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="article-content">
|
||
<div class="article-summary">
|
||
<h4>文章摘要</h4>
|
||
<p id="article-summary">本文深入分析了人工智能技术在各个领域的应用前景，探讨了AI如何改变我们的生活方式、工作模式和社会结构...</p>
|
||
</div>
|
||
<div class="article-full-content">
|
||
<h4>正文内容</h4>
|
||
<div id="article-full-text">
|
||
<p>随着科技的飞速发展，人工智能技术正以前所未有的速度改变着我们的世界。从智能家居到自动驾驶，从医疗诊断到金融分析，AI的应用已经渗透到生活的方方面面。</p>
|
||
<h3>1. 智能家居的普及</h3>
|
||
<p>智能家居系统通过AI技术学习用户的生活习惯，自动调节家居环境，提供更加舒适便捷的生活体验...</p>
|
||
<h3>2. 自动驾驶技术的突破</h3>
|
||
<p>自动驾驶汽车利用深度学习和计算机视觉技术，能够实时感知周围环境，做出安全的驾驶决策...</p>
|
||
<h3>3. 医疗诊断的精准化</h3>
|
||
<p>AI辅助诊断系统能够分析医学影像，识别疾病特征，提高诊断的准确性和效率...</p>
|
||
<p>（更多内容请查看原文）</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="article-actions">
|
||
<button class="btn-primary" onclick="viewOriginalArticle()">查看原文</button>
|
||
<button class="btn-secondary" onclick="copyArticleLink()">复制链接</button>
|
||
<button class="btn-secondary" onclick="shareArticle()">分享文章</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧边栏 -->
|
||
<div class="right-sidebar" id="rightSidebar" style="display: none;">
|
||
<div class="follow">
|
||
<div class="account-add-btn" onclick="showAddDialog()">
|
||
添加监控账号
|
||
</div>
|
||
|
||
<div class="follw-box">
|
||
<p class="follw-no">
|
||
暂无监控账号<br />添加一个账号试试吧~
|
||
</p>
|
||
<div class="search-box">
|
||
<input type="text" placeholder="搜索账号" class="follw-search" />
|
||
<i class="iconfont icon-sousuo">🔍</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 添加监控账号对话框 -->
|
||
<div class="dialo-box add-mp" id="addMpDialog" style="display: none;">
|
||
<div class="dialo-box-son">
|
||
<div class="add-mp-close" onclick="hideAddDialog()">✖</div>
|
||
<p>请输入需监控账号任意文章链接</p>
|
||
<input type="text" class="add-mp-link" placeholder="账号任意文章链接" />
|
||
<p class="add-mp-remain">
|
||
* 目前支持微信公众号、头条号、百家号、搜狐号、大鱼号、企鹅号、网易号作者发文监控，提交后会在24小时内更新数据
|
||
<a href="https://wpa.qq.com/msgrd?v=3&uin=778293877&site=qq&menu=yes">没有我要的平台点击申请</a>
|
||
</p>
|
||
<button class="add-mp-btn" id="act-addmp-btn">确 认 添 加</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导出对话框 -->
|
||
<div class="dialo-box act-export" id="exportDialog">
|
||
<div class="dialo-box-son">
|
||
<div class="add-mp-close" onclick="hideExportDialog()">✖</div>
|
||
<p>
|
||
今日还可导出数据 <span id="export-leftnum">5000</span> 条
|
||
<a href="/files/sample/sample.html" target="_blank" class="sample" title="查看导出Excel样例">查看导出样例</a>
|
||
</p>
|
||
<input type="number" class="aexport-num" placeholder="本次需导出的数据量" value="5000" />
|
||
<p class="add-mp-remain">
|
||
* 单次最大可导出5000条数据，如果当前按筛选条件不足5000条，会以实际条数扣除当日额度
|
||
<a href="https://wpa.qq.com/msgrd?v=3&uin=778293877&site=qq&menu=yes">需要导出更多点我添加客服</a>
|
||
</p>
|
||
<button class="add-mp-btn" id="act-export-btn">确 认 导 出</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 引入jQuery -->
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
// 默认加载自媒体库页面
|
||
loadLibraryPage();
|
||
|
||
// 左侧导航切换
|
||
$('.nav-tab').click(function() {
|
||
$('.nav-tab').removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
const tab = $(this).data('tab');
|
||
if (tab === 'monitor') {
|
||
// 切换到监控账号页面
|
||
loadMonitorPage();
|
||
} else {
|
||
// 切换到自媒体库页面
|
||
loadLibraryPage();
|
||
}
|
||
});
|
||
|
||
// 分类选择功能
|
||
$('.cate-options li').click(function() {
|
||
const parent = $(this).parent();
|
||
parent.find('li').removeClass('cate-active');
|
||
$(this).addClass('cate-active');
|
||
|
||
const key = parent.data('key');
|
||
const value = $(this).find('span').data('id');
|
||
|
||
console.log(`分类筛选: ${key} = ${value}`);
|
||
|
||
// 触发筛选
|
||
filterArticles();
|
||
});
|
||
|
||
// 搜索功能
|
||
$('#search').on('keypress', function(e) {
|
||
if (e.which === 13) {
|
||
filterArticles();
|
||
}
|
||
});
|
||
|
||
$('.search-box i').click(function() {
|
||
filterArticles();
|
||
});
|
||
|
||
// 导出功能
|
||
$('.export').click(function() {
|
||
$('#exportDialog').css('display', 'flex');
|
||
});
|
||
|
||
// 翻页功能
|
||
$('.page-up').click(function() {
|
||
const pageNum = $('.page-num');
|
||
if (parseInt(pageNum.val()) > 1) {
|
||
pageNum.val(parseInt(pageNum.val()) - 1);
|
||
loadArticles();
|
||
}
|
||
});
|
||
|
||
$('.page-down').click(function() {
|
||
const pageNum = $('.page-num');
|
||
pageNum.val(parseInt(pageNum.val()) + 1);
|
||
loadArticles();
|
||
});
|
||
|
||
// 监控账号搜索
|
||
$('.follw-search').on('keypress', function(e) {
|
||
if (e.which === 13) {
|
||
searchAccounts($(this).val());
|
||
}
|
||
});
|
||
|
||
// 添加监控账号对话框按钮
|
||
$('#act-addmp-btn').click(function() {
|
||
const link = $('.add-mp-link').val().trim();
|
||
if (link) {
|
||
addMonitorAccount(link);
|
||
} else {
|
||
alert('请输入文章链接');
|
||
}
|
||
});
|
||
|
||
// 导出数据
|
||
$('#act-export-btn').click(function() {
|
||
const num = $('.aexport-num').val();
|
||
exportData(num);
|
||
});
|
||
|
||
// 关闭对话框
|
||
$('.add-mp-close').click(function() {
|
||
$(this).closest('.dialo-box').css('display', 'none');
|
||
});
|
||
|
||
// 点击对话框外部关闭
|
||
$('.dialo-box').click(function(e) {
|
||
if (e.target === this) {
|
||
$(this).css('display', 'none');
|
||
}
|
||
});
|
||
|
||
// 分类显示/隐藏切换
|
||
$('.cate-show').click(function() {
|
||
const $cateHorizontal = $('.cate-horizontal');
|
||
if ($cateHorizontal.is(':visible')) {
|
||
$cateHorizontal.hide();
|
||
$(this).find('em').text('显示分类');
|
||
$(this).find('span').text('▼');
|
||
} else {
|
||
$cateHorizontal.show();
|
||
$(this).find('em').text('隐藏分类');
|
||
$(this).find('span').text('▲');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 加载自媒体库页面
|
||
function loadLibraryPage() {
|
||
// 自媒体库页面内容 - 与yixiaogao_article.html完全一致的分类筛选
|
||
const libraryContent = `
|
||
<div class="cate-horizontal">
|
||
<div class="cate-group">
|
||
<span class="cate-label">平台</span>
|
||
<ul class="cate-options" data-key="formId">
|
||
<li class="cate-active">
|
||
<span data-id="0">🌐 全部</span>
|
||
</li>
|
||
<li><span data-id="100">📱 公众号</span></li>
|
||
<li><span data-id="101">📰 头条号</span></li>
|
||
<li><span data-id="102">📖 百家号</span></li>
|
||
<li><span data-id="103">🦊 搜狐号</span></li>
|
||
<li><span data-id="104">🐟 大鱼号</span></li>
|
||
<li><span data-id="105">🐧 企鹅号</span></li>
|
||
<li><span data-id="106">📮 网易号</span></li>
|
||
<li><span data-id="107">👁️ 一点号</span></li>
|
||
<li><span data-id="108">🦅 凤凰号</span></li>
|
||
<li><span data-id="109">🎯 趣头条</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">领域</span>
|
||
<ul class="cate-options" data-key="cateId">
|
||
<li class="cate-active"><span data-id="0">不限</span></li>
|
||
<li><span data-id="1">国际</span></li>
|
||
<li><span data-id="2">体育</span></li>
|
||
<li><span data-id="3">娱乐</span></li>
|
||
<li><span data-id="4">社会</span></li>
|
||
<li><span data-id="5">财经</span></li>
|
||
<li><span data-id="6">时事</span></li>
|
||
<li><span data-id="7">科技</span></li>
|
||
<li><span data-id="8">情感</span></li>
|
||
<li><span data-id="9">汽车</span></li>
|
||
<li><span data-id="10">教育</span></li>
|
||
<li><span data-id="11">时尚</span></li>
|
||
<li><span data-id="12">游戏</span></li>
|
||
<li><span data-id="13">军事</span></li>
|
||
<li><span data-id="14">旅游</span></li>
|
||
<li><span data-id="15">美食</span></li>
|
||
<li><span data-id="16">文化</span></li>
|
||
<li><span data-id="17">健康</span></li>
|
||
<li><span data-id="18">搞笑</span></li>
|
||
<li><span data-id="19">家居</span></li>
|
||
<li><span data-id="20">动漫</span></li>
|
||
<li><span data-id="21">宠物</span></li>
|
||
<li><span data-id="22">母婴</span></li>
|
||
<li><span data-id="23">星座</span></li>
|
||
<li><span data-id="24">历史</span></li>
|
||
<li><span data-id="25">音乐</span></li>
|
||
<li><span data-id="27">美图摄影</span></li>
|
||
<li><span data-id="26">综合</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">时间</span>
|
||
<ul class="cate-options" data-key="time">
|
||
<li class="cate-active"><span data-id="168">7天内</span></li>
|
||
<li><span data-id="12">12小时</span></li>
|
||
<li><span data-id="24">24小时</span></li>
|
||
<li><span data-id="72">3天内</span></li>
|
||
<li><span data-id="720">30天内</span></li>
|
||
<li><span data-id="8760">一年内</span></li>
|
||
<li><span data-id="0">不限</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">排序</span>
|
||
<ul class="cate-options" data-key="order">
|
||
<li class="cate-active"><span data-id="time">发布时间</span></li>
|
||
<li><span data-id="readNum">阅读量</span></li>
|
||
<li><span data-id="likeNum">点赞数</span></li>
|
||
<li><span data-id="comNum">评论数</span></li>
|
||
</ul>
|
||
<input type="number" id="data-num" placeholder="大于多少" />
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">类型</span>
|
||
<ul class="cate-options" data-key="type">
|
||
<li class="cate-active"><span data-id="0">不限</span></li>
|
||
<li><span data-id="1">文章</span></li>
|
||
<li><span data-id="2">视频</span></li>
|
||
<li><span data-id="3">微头条</span></li>
|
||
<li>
|
||
<span data-id="5">爆文</span>
|
||
<span style="color: #ff4444; font-size: 12px; margin-left: 3px;">🔥</span>
|
||
</li>
|
||
<li><span data-id="6">热文</span></li>
|
||
<li><span data-id="8">我的收藏</span></li>
|
||
</ul>
|
||
|
||
<div class="search-box">
|
||
<input type="text" id="search" placeholder="搜索关键词" title="点击搜索" />
|
||
<i class="iconfont icon-sousuo">🔍</i>
|
||
</div>
|
||
|
||
<div class="export">
|
||
📊 导出Excel
|
||
</div>
|
||
|
||
<div class="cond"></div>
|
||
|
||
<div class="page-box">
|
||
<span style="color: #6c757d; cursor: help;">❓</span>
|
||
<div class="cate-show">
|
||
<em>隐藏分类</em>
|
||
<span>▲</span>
|
||
</div>
|
||
<span class="page-up" title="上一页">◀</span>
|
||
<input type="number" value="1" class="page-num" />
|
||
<span class="page-down" title="下一页">▶</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="article-list">
|
||
<table class="article-table">
|
||
<thead class="tb-thead">
|
||
<tr>
|
||
<th>来源</th>
|
||
<th>领域</th>
|
||
<th>账号</th>
|
||
<th>文章标题</th>
|
||
<th>发布时间</th>
|
||
<th>阅读量</th>
|
||
<th>点赞数</th>
|
||
<th>评论数</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="tb-tbody">
|
||
<tr>
|
||
<td>公众号</td>
|
||
<td>科技</td>
|
||
<td>Tech前沿</td>
|
||
<td>AI技术革命：改变未来生活的十大趋势</td>
|
||
<td>2024-01-20</td>
|
||
<td>5.2万</td>
|
||
<td>1.8万</td>
|
||
<td>423</td>
|
||
<td>
|
||
<button class="action-btn" onclick="viewArticleDetail(1)">详细</button>
|
||
<button class="action-btn">收藏</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>头条号</td>
|
||
<td>娱乐</td>
|
||
<td>娱乐八卦</td>
|
||
<td>明星动态最新消息</td>
|
||
<td>2024-01-15</td>
|
||
<td>10.5万</td>
|
||
<td>2.3万</td>
|
||
<td>856</td>
|
||
<td>
|
||
<button class="action-btn" onclick="viewArticleDetail(2)">详细</button>
|
||
<button class="action-btn">收藏</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="tb-tbody-loading" style="display: none;">
|
||
哦豁，啥也没搜到~🤪
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
$('.main-content').html(libraryContent);
|
||
|
||
// 显示右侧边栏
|
||
$('#rightSidebar').show();
|
||
|
||
// 重新绑定分类选择事件
|
||
$('.cate-options li').off('click').on('click', function() {
|
||
const parent = $(this).parent();
|
||
parent.find('li').removeClass('cate-active');
|
||
$(this).addClass('cate-active');
|
||
|
||
const key = parent.data('key');
|
||
const value = $(this).find('span').data('id');
|
||
|
||
console.log(`分类筛选: ${key} = ${value}`);
|
||
|
||
// 触发筛选
|
||
filterArticles();
|
||
});
|
||
|
||
// 重新绑定分类显示/隐藏切换事件
|
||
$('.cate-show').off('click').on('click', function() {
|
||
const $cateHorizontal = $('.cate-horizontal');
|
||
if ($cateHorizontal.is(':visible')) {
|
||
$cateHorizontal.hide();
|
||
$(this).find('em').text('显示分类');
|
||
$(this).find('span').text('▼');
|
||
} else {
|
||
$cateHorizontal.show();
|
||
$(this).find('em').text('隐藏分类');
|
||
$(this).find('span').text('▲');
|
||
}
|
||
});
|
||
|
||
// 重新绑定搜索功能
|
||
$('#search').off('keypress').on('keypress', function(e) {
|
||
if (e.which === 13) {
|
||
filterArticles();
|
||
}
|
||
});
|
||
|
||
$('.search-box i').off('click').on('click', function() {
|
||
filterArticles();
|
||
});
|
||
|
||
// 重新绑定导出功能
|
||
$('.export').off('click').on('click', function() {
|
||
$('#exportDialog').css('display', 'flex');
|
||
});
|
||
|
||
// 重新绑定翻页功能
|
||
$('.page-up').off('click').on('click', function() {
|
||
const pageNum = $('.page-num');
|
||
if (parseInt(pageNum.val()) > 1) {
|
||
pageNum.val(parseInt(pageNum.val()) - 1);
|
||
loadArticles();
|
||
}
|
||
});
|
||
|
||
$('.page-down').off('click').on('click', function() {
|
||
const pageNum = $('.page-num');
|
||
pageNum.val(parseInt(pageNum.val()) + 1);
|
||
loadArticles();
|
||
});
|
||
|
||
console.log('自媒体库页面加载完成');
|
||
}
|
||
|
||
// 加载监控账号页面
|
||
function loadMonitorPage() {
|
||
// 监控账号页面内容 - 包含分类筛选
|
||
const monitorContent = `
|
||
<div class="cate-horizontal">
|
||
<div class="cate-group">
|
||
<span class="cate-label">平台</span>
|
||
<ul class="cate-options" data-key="formId">
|
||
<li class="cate-active">
|
||
<span data-id="0">🌐 全部</span>
|
||
</li>
|
||
<li><span data-id="100">📱 公众号</span></li>
|
||
<li><span data-id="101">📰 头条号</span></li>
|
||
<li><span data-id="102">📖 百家号</span></li>
|
||
<li><span data-id="103">🦊 搜狐号</span></li>
|
||
<li><span data-id="104">🐟 大鱼号</span></li>
|
||
<li><span data-id="105">🐧 企鹅号</span></li>
|
||
<li><span data-id="106">📮 网易号</span></li>
|
||
<li><span data-id="107">👁️ 一点号</span></li>
|
||
<li><span data-id="108">🦅 凤凰号</span></li>
|
||
<li><span data-id="109">🎯 趣头条</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">领域</span>
|
||
<ul class="cate-options" data-key="cateId">
|
||
<li class="cate-active"><span data-id="0">不限</span></li>
|
||
<li><span data-id="1">国际</span></li>
|
||
<li><span data-id="2">体育</span></li>
|
||
<li><span data-id="3">娱乐</span></li>
|
||
<li><span data-id="4">社会</span></li>
|
||
<li><span data-id="5">财经</span></li>
|
||
<li><span data-id="6">时事</span></li>
|
||
<li><span data-id="7">科技</span></li>
|
||
<li><span data-id="8">情感</span></li>
|
||
<li><span data-id="9">汽车</span></li>
|
||
<li><span data-id="10">教育</span></li>
|
||
<li><span data-id="11">时尚</span></li>
|
||
<li><span data-id="12">游戏</span></li>
|
||
<li><span data-id="13">军事</span></li>
|
||
<li><span data-id="14">旅游</span></li>
|
||
<li><span data-id="15">美食</span></li>
|
||
<li><span data-id="16">文化</span></li>
|
||
<li><span data-id="17">健康</span></li>
|
||
<li><span data-id="18">搞笑</span></li>
|
||
<li><span data-id="19">家居</span></li>
|
||
<li><span data-id="20">动漫</span></li>
|
||
<li><span data-id="21">宠物</span></li>
|
||
<li><span data-id="22">母婴</span></li>
|
||
<li><span data-id="23">星座</span></li>
|
||
<li><span data-id="24">历史</span></li>
|
||
<li><span data-id="25">音乐</span></li>
|
||
<li><span data-id="27">美图摄影</span></li>
|
||
<li><span data-id="26">综合</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">时间</span>
|
||
<ul class="cate-options" data-key="time">
|
||
<li class="cate-active"><span data-id="168">7天内</span></li>
|
||
<li><span data-id="12">12小时</span></li>
|
||
<li><span data-id="24">24小时</span></li>
|
||
<li><span data-id="72">3天内</span></li>
|
||
<li><span data-id="720">30天内</span></li>
|
||
<li><span data-id="8760">一年内</span></li>
|
||
<li><span data-id="0">不限</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">排序</span>
|
||
<ul class="cate-options" data-key="order">
|
||
<li class="cate-active"><span data-id="time">发布时间</span></li>
|
||
<li><span data-id="readNum">阅读量</span></li>
|
||
<li><span data-id="likeNum">点赞数</span></li>
|
||
<li><span data-id="comNum">评论数</span></li>
|
||
</ul>
|
||
<input type="number" id="data-num" placeholder="大于多少" />
|
||
</div>
|
||
|
||
<div class="cate-group">
|
||
<span class="cate-label">类型</span>
|
||
<ul class="cate-options" data-key="type">
|
||
<li class="cate-active"><span data-id="0">不限</span></li>
|
||
<li><span data-id="1">文章</span></li>
|
||
<li><span data-id="2">视频</span></li>
|
||
<li><span data-id="3">微头条</span></li>
|
||
<li>
|
||
<span data-id="5">爆文</span>
|
||
<span style="color: #ff4444; font-size: 12px; margin-left: 3px;">🔥</span>
|
||
</li>
|
||
<li><span data-id="6">热文</span></li>
|
||
<li><span data-id="8">我的收藏</span></li>
|
||
</ul>
|
||
|
||
<div class="search-box">
|
||
<input type="text" id="search" placeholder="搜索关键词" title="点击搜索" />
|
||
<i class="iconfont icon-sousuo">🔍</i>
|
||
</div>
|
||
|
||
<div class="export">
|
||
📊 导出Excel
|
||
</div>
|
||
|
||
<div class="cond"></div>
|
||
|
||
<div class="page-box">
|
||
<span style="color: #6c757d; cursor: help;">❓</span>
|
||
<div class="cate-show">
|
||
<em>隐藏分类</em>
|
||
<span>▲</span>
|
||
</div>
|
||
<span class="page-up" title="上一页">◀</span>
|
||
<input type="number" value="1" class="page-num" />
|
||
<span class="page-down" title="下一页">▶</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="monitor-accounts">
|
||
<table class="article-table">
|
||
<thead>
|
||
<tr>
|
||
<th>账号</th>
|
||
<th>领域</th>
|
||
<th>平台</th>
|
||
<th>最新文章标题</th>
|
||
<th>发布时间</th>
|
||
<th>阅读量</th>
|
||
<th>点赞数</th>
|
||
<th>评论数</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="monitor-tbody">
|
||
<tr>
|
||
<td colspan="7" style="text-align: center; color: #6c757d;">
|
||
暂无监控账号，请添加账号开始监控
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`;
|
||
|
||
$('.main-content').html(monitorContent);
|
||
|
||
// 显示右侧边栏
|
||
$('#rightSidebar').show();
|
||
|
||
// 重新绑定分类选择事件
|
||
$('.cate-options li').off('click').on('click', function() {
|
||
const parent = $(this).parent();
|
||
parent.find('li').removeClass('cate-active');
|
||
$(this).addClass('cate-active');
|
||
|
||
const key = parent.data('key');
|
||
const value = $(this).find('span').data('id');
|
||
|
||
console.log(`监控账号分类筛选: ${key} = ${value}`);
|
||
|
||
// 触发筛选
|
||
filterMonitorAccounts();
|
||
});
|
||
|
||
// 重新绑定分类显示/隐藏切换事件
|
||
$('.cate-show').off('click').on('click', function() {
|
||
const $cateHorizontal = $('.cate-horizontal');
|
||
if ($cateHorizontal.is(':visible')) {
|
||
$cateHorizontal.hide();
|
||
$(this).find('em').text('显示分类');
|
||
$(this).find('span').text('▼');
|
||
} else {
|
||
$cateHorizontal.show();
|
||
$(this).find('em').text('隐藏分类');
|
||
$(this).find('span').text('▲');
|
||
}
|
||
});
|
||
|
||
// 重新绑定搜索功能
|
||
$('#search').off('keypress').on('keypress', function(e) {
|
||
if (e.which === 13) {
|
||
filterMonitorAccounts();
|
||
}
|
||
});
|
||
|
||
$('.search-box i').off('click').on('click', function() {
|
||
filterMonitorAccounts();
|
||
});
|
||
|
||
// 重新绑定导出功能
|
||
$('.export').off('click').on('click', function() {
|
||
$('#exportDialog').css('display', 'flex');
|
||
});
|
||
|
||
// 重新绑定翻页功能
|
||
$('.page-up').off('click').on('click', function() {
|
||
const pageNum = $('.page-num');
|
||
if (parseInt(pageNum.val()) > 1) {
|
||
pageNum.val(parseInt(pageNum.val()) - 1);
|
||
loadMonitorAccounts();
|
||
}
|
||
});
|
||
|
||
$('.page-down').off('click').on('click', function() {
|
||
const pageNum = $('.page-num');
|
||
pageNum.val(parseInt(pageNum.val()) + 1);
|
||
loadMonitorAccounts();
|
||
});
|
||
|
||
// 加载监控账号数据
|
||
loadMonitorAccounts();
|
||
|
||
console.log('监控账号页面加载完成');
|
||
}
|
||
|
||
// 筛选文章
|
||
function filterArticles() {
|
||
console.log('筛选文章');
|
||
// 这里实现筛选逻辑
|
||
loadArticles();
|
||
}
|
||
|
||
// 加载文章列表
|
||
function loadArticles() {
|
||
console.log('加载文章列表');
|
||
// 这里可以发送AJAX请求获取数据
|
||
// 暂时使用示例数据
|
||
}
|
||
|
||
// 搜索账号
|
||
function searchAccounts(keyword) {
|
||
console.log('搜索账号:', keyword);
|
||
// 这里实现搜索逻辑
|
||
}
|
||
|
||
// 添加监控账号
|
||
function addMonitorAccount(link) {
|
||
console.log('添加监控账号:', link);
|
||
// 这里实现添加账号的逻辑
|
||
$('#addMpDialog').css('display', 'none');
|
||
$('.add-mp-link').val('');
|
||
|
||
// 显示成功提示
|
||
alert('账号添加成功！数据将在24小时内更新');
|
||
}
|
||
|
||
// 加载监控账号列表
|
||
function loadMonitorAccounts() {
|
||
console.log('加载监控账号列表');
|
||
|
||
// 包含最新文章信息的账号数据
|
||
const mockAccounts = [
|
||
{
|
||
id: 1,
|
||
name: '科技前沿',
|
||
platform: '公众号',
|
||
field: '科技',
|
||
latestArticle: {
|
||
title: 'AI技术革命：改变未来生活的十大趋势',
|
||
publishTime: '2024-01-20',
|
||
readCount: '5.2万',
|
||
likeCount: '1.8万',
|
||
commentCount: 423
|
||
}
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '娱乐八卦',
|
||
platform: '头条号',
|
||
field: '娱乐',
|
||
latestArticle: {
|
||
title: '明星动态最新消息',
|
||
publishTime: '2024-01-15',
|
||
readCount: '10.5万',
|
||
likeCount: '2.3万',
|
||
commentCount: 856
|
||
}
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '美食生活',
|
||
platform: '公众号',
|
||
field: '美食',
|
||
latestArticle: {
|
||
title: '传统美食文化传承',
|
||
publishTime: '2024-01-13',
|
||
readCount: '15.7万',
|
||
likeCount: '3.1万',
|
||
commentCount: 967
|
||
}
|
||
}
|
||
];
|
||
|
||
let tbodyHtml = '';
|
||
|
||
if (mockAccounts.length === 0) {
|
||
tbodyHtml = `
|
||
<tr>
|
||
<td colspan="9" style="text-align: center; color: #6c757d;">
|
||
暂无监控账号，请添加账号开始监控
|
||
</td>
|
||
</tr>
|
||
`;
|
||
} else {
|
||
mockAccounts.forEach(account => {
|
||
const platformIcon = account.platform === '公众号' ? '📱' : '📰';
|
||
|
||
tbodyHtml += `
|
||
<tr>
|
||
<td>${account.name}</td>
|
||
<td>${account.field}</td>
|
||
<td>${platformIcon} ${account.platform}</td>
|
||
<td><a href="#" class="article-link" onclick="viewArticle(${account.id})" title="点击查看文章">${account.latestArticle.title}</a></td>
|
||
<td>${account.latestArticle.publishTime}</td>
|
||
<td>${account.latestArticle.readCount}</td>
|
||
<td>${account.latestArticle.likeCount}</td>
|
||
<td>${account.latestArticle.commentCount}</td>
|
||
<td>
|
||
<button class="btn-detail" onclick="showAccountDetail(${account.id})" title="查看详细">
|
||
详细
|
||
</button>
|
||
<button class="btn-favorite" onclick="toggleFavorite(${account.id})" title="收藏账号">
|
||
收藏
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
}
|
||
|
||
$('.monitor-tbody').html(tbodyHtml);
|
||
}
|
||
|
||
// 查看文章详情
|
||
function viewArticle(accountId) {
|
||
console.log('查看文章详情，账号ID:', accountId);
|
||
// 跳转到文章详情页面
|
||
window.open(`article-detail.html?id=${accountId}`, '_blank');
|
||
return false; // 阻止默认链接行为
|
||
}
|
||
|
||
// 文章详细内容模拟数据
|
||
const articleDetails = {
|
||
1: {
|
||
platform: '公众号',
|
||
account: '科技前沿',
|
||
field: '科技',
|
||
title: 'AI技术革命：改变未来生活的十大趋势',
|
||
publishTime: '2024-01-20',
|
||
readCount: '5.2万',
|
||
likeCount: '1.8万',
|
||
commentCount: 423,
|
||
summary: '人工智能技术正在以前所未有的速度改变着我们的生活。从智能家居到自动驾驶，从医疗诊断到金融分析，AI的应用已经渗透到各个领域。本文将深入探讨AI技术的最新发展趋势，分析其对未来社会生活的深远影响。',
|
||
content: `
|
||
<h3>引言：AI时代的到来</h3>
|
||
<p>人工智能技术已经不再是科幻小说中的概念，而是正在深刻改变我们日常生活的现实技术。随着算力的提升、算法的优化和数据的积累，AI技术正迎来爆发式增长。</p>
|
||
|
||
<h3>趋势一：智能家居普及化</h3>
|
||
<p>智能家居系统通过AI技术学习用户的生活习惯，自动调节室内温度、照明、安防等设备。未来的家将是一个会思考、会学习的智能空间，为居住者提供更加舒适、便捷的生活体验。</p>
|
||
|
||
<h3>趋势二：自动驾驶商业化</h3>
|
||
<p>自动驾驶技术正在从实验阶段走向商业化应用。从L2级别的辅助驾驶到L4级别的完全自动驾驶，AI技术的进步让无人驾驶成为可能。这将彻底改变交通运输行业，提高道路安全性，减少交通拥堵。</p>
|
||
|
||
<h3>趋势三：医疗AI精准化</h3>
|
||
<p>AI在医疗领域的应用正在实现精准化诊断。通过深度学习算法，AI可以辅助医生进行疾病诊断、药物研发和个性化治疗方案制定，大大提高医疗效率和准确性。</p>
|
||
|
||
<h3>趋势四：教育AI个性化</h3>
|
||
<p>AI技术正在改变传统教育模式，实现个性化教学。智能教育系统可以根据学生的学习进度和特点，制定个性化的学习计划，提供针对性的教学内容和辅导。</p>
|
||
|
||
<h3>趋势五：金融AI智能化</h3>
|
||
<p>在金融领域，AI技术被广泛应用于风险评估、投资决策、欺诈检测等场景。智能投顾、量化交易等应用正在改变传统的金融服务模式。</p>
|
||
|
||
<h3>结语：拥抱AI时代</h3>
|
||
<p>AI技术的发展为我们带来了无限可能，同时也带来了新的挑战。我们需要积极拥抱AI时代，同时也要关注AI技术的伦理和安全问题，确保技术发展能够造福人类社会。</p>
|
||
`
|
||
},
|
||
2: {
|
||
platform: '头条号',
|
||
account: '娱乐八卦',
|
||
field: '娱乐',
|
||
title: '明星动态最新消息',
|
||
publishTime: '2024-01-15',
|
||
readCount: '10.5万',
|
||
likeCount: '2.3万',
|
||
commentCount: 856,
|
||
summary: '娱乐圈最新动态汇总，包括明星新作品发布、综艺节目精彩瞬间、时尚活动红毯造型等。本期为您带来娱乐圈的热点新闻和独家报道。',
|
||
content: `
|
||
<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,
|
||
summary: '中华美食文化源远流长，各地传统美食承载着深厚的历史文化底蕴。本文将带您走进传统美食的世界，了解美食背后的文化故事和制作工艺。',
|
||
content: `
|
||
<h3>美食与文化的融合</h3>
|
||
<p>中国传统美食不仅仅是味觉的享受，更是文化的传承。每一道传统菜品都蕴含着丰富的历史文化内涵，反映了不同地区的风土人情和生活智慧。</p>
|
||
|
||
<h3>地方特色美食</h3>
|
||
<p>从北京的烤鸭到四川的火锅，从广东的早茶到陕西的肉夹馍，各地特色美食展现了中华饮食文化的多样性和地域特色。这些美食不仅是当地人的骄傲，也成为了吸引游客的重要名片。</p>
|
||
|
||
<h3>传统制作工艺</h3>
|
||
<p>传统美食的制作工艺往往需要经过多年的学习和实践才能掌握。从选材到烹饪，每一个环节都讲究精益求精，这种工匠精神正是传统美食文化的重要组成部分。</p>
|
||
|
||
<h3>美食文化的现代传承</h3>
|
||
<p>在现代化进程中，如何保护和传承传统美食文化成为重要课题。通过美食节、烹饪比赛、文化展示等多种形式，传统美食文化正在以新的方式焕发生机。</p>
|
||
|
||
<h3>美食与健康</h3>
|
||
<p>现代人在享受美食的同时，也越来越注重健康饮食。传统美食在保持原有风味的基础上，也在不断创新，推出更加健康、营养的菜品，满足现代人的饮食需求。</p>
|
||
`
|
||
}
|
||
};
|
||
|
||
// 跳转到文章详情页面
|
||
function viewArticleDetail(articleId) {
|
||
console.log('跳转到文章详情页面，文章ID:', articleId);
|
||
// 跳转到新的文章详情页面，并传递文章ID参数
|
||
window.open(`article-detail.html?id=${articleId}`, '_blank');
|
||
}
|
||
|
||
// 显示账号详细
|
||
function showAccountDetail(accountId) {
|
||
console.log('查看账号详细:', accountId);
|
||
// 跳转到文章详情页面
|
||
window.open(`article-detail.html?id=${accountId}`, '_blank');
|
||
}
|
||
|
||
// 查看原文
|
||
function viewOriginalArticle(accountId) {
|
||
console.log('查看原文，账号ID:', accountId);
|
||
alert('跳转到原文链接...');
|
||
}
|
||
|
||
// 分享文章
|
||
function shareArticle(accountId) {
|
||
console.log('分享文章，账号ID:', accountId);
|
||
alert('分享功能开发中...');
|
||
}
|
||
|
||
// 收藏文章
|
||
function collectArticle(accountId) {
|
||
console.log('收藏文章，账号ID:', accountId);
|
||
alert('文章已收藏！');
|
||
}
|
||
|
||
// 切换收藏状态
|
||
function toggleFavorite(accountId) {
|
||
console.log('切换收藏状态:', accountId);
|
||
const button = event.target;
|
||
if (button.textContent.includes('收藏')) {
|
||
button.textContent = '⭐ 已收藏';
|
||
button.style.backgroundColor = '#28a745';
|
||
button.style.color = 'white';
|
||
alert(`账号 ${accountId} 已收藏`);
|
||
} else {
|
||
button.textContent = '⭐ 收藏';
|
||
button.style.backgroundColor = '#007bff';
|
||
button.style.color = 'white';
|
||
alert(`账号 ${accountId} 已取消收藏`);
|
||
}
|
||
}
|
||
|
||
// 筛选监控账号
|
||
function filterMonitorAccounts() {
|
||
console.log('筛选监控账号');
|
||
// 这里实现筛选逻辑
|
||
loadMonitorAccounts();
|
||
}
|
||
|
||
// 导出数据
|
||
function exportData(num) {
|
||
console.log('导出数据:', num);
|
||
// 这里实现导出逻辑
|
||
$('#exportDialog').css('display', 'none');
|
||
alert('导出成功！');
|
||
}
|
||
|
||
// 显示添加对话框
|
||
function showAddDialog() {
|
||
$('#addMpDialog').css('display', 'flex');
|
||
}
|
||
|
||
// 隐藏添加对话框
|
||
function hideAddDialog() {
|
||
$('#addMpDialog').css('display', 'none');
|
||
}
|
||
|
||
// 隐藏导出对话框
|
||
function hideExportDialog() {
|
||
$('#exportDialog').css('display', 'none');
|
||
}
|
||
|
||
// 检查登录状态
|
||
function checkLoginStatus() {
|
||
// 尝试从localStorage和sessionStorage获取认证信息
|
||
const authData = localStorage.getItem('authData') || sessionStorage.getItem('authData');
|
||
const token = localStorage.getItem('token') || sessionStorage.getItem('token');
|
||
const authToken = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');
|
||
const username = localStorage.getItem('username') || sessionStorage.getItem('username');
|
||
const nickname = localStorage.getItem('nickname') || sessionStorage.getItem('nickname');
|
||
|
||
// 检查是否有有效的认证信息
|
||
if (authData || token || authToken) {
|
||
// 使用适当的用户名
|
||
const displayName = authData ? JSON.parse(authData).user_info?.username : username || nickname || '用户';
|
||
showLoggedInState(displayName);
|
||
return true;
|
||
} else {
|
||
showLoggedOutState();
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 显示已登录状态
|
||
function showLoggedInState(username) {
|
||
// 获取或创建登录状态相关元素
|
||
const navMenu = document.querySelector('.nav-menu');
|
||
let userMenu = document.getElementById('userMenu');
|
||
|
||
if (!userMenu) {
|
||
userMenu = document.createElement('div');
|
||
userMenu.id = 'userMenu';
|
||
userMenu.className = 'user-info';
|
||
navMenu.appendChild(userMenu);
|
||
}
|
||
|
||
// 更新用户菜单内容
|
||
userMenu.innerHTML = `
|
||
<span class="user-name">${username}</span>
|
||
<button id="logoutButton" class="logout-btn">退出登录</button>
|
||
`;
|
||
|
||
// 隐藏登录链接
|
||
const loginLink = document.getElementById('loginLink');
|
||
if (loginLink) {
|
||
loginLink.style.display = 'none';
|
||
}
|
||
|
||
// 确保用户中心链接可见
|
||
const userCenterLink = document.getElementById('userCenterLink');
|
||
if (userCenterLink) {
|
||
userCenterLink.style.display = 'inline';
|
||
}
|
||
|
||
// 添加登出事件监听
|
||
document.getElementById('logoutButton').addEventListener('click', logout);
|
||
}
|
||
|
||
// 显示未登录状态
|
||
function showLoggedOutState() {
|
||
// 获取或创建登录链接
|
||
const navMenu = document.querySelector('.nav-menu');
|
||
let loginLink = document.getElementById('loginLink');
|
||
|
||
if (!loginLink) {
|
||
loginLink = document.createElement('a');
|
||
loginLink.id = 'loginLink';
|
||
loginLink.className = 'login-link';
|
||
loginLink.href = 'login.html';
|
||
loginLink.textContent = '登录/注册';
|
||
navMenu.appendChild(loginLink);
|
||
} else {
|
||
loginLink.style.display = 'inline';
|
||
}
|
||
|
||
// 确保用户中心链接可见
|
||
const userCenterLink = document.getElementById('userCenterLink');
|
||
if (userCenterLink) {
|
||
userCenterLink.style.display = 'inline';
|
||
}
|
||
|
||
// 清空用户菜单
|
||
const userMenu = document.getElementById('userMenu');
|
||
if (userMenu) {
|
||
userMenu.innerHTML = '';
|
||
}
|
||
}
|
||
|
||
// 在页面加载完成后检查登录状态
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
checkLoginStatus();
|
||
});
|
||
|
||
// 登出功能
|
||
function logout() {
|
||
if (confirm('确定要退出登录吗？')) {
|
||
// 获取认证数据
|
||
const authData = localStorage.getItem('authData') || sessionStorage.getItem('authData');
|
||
const token = localStorage.getItem('token') || sessionStorage.getItem('token');
|
||
const authToken = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');
|
||
|
||
// 确定使用哪个token
|
||
let bearerToken = '';
|
||
if (authData) {
|
||
const auth = JSON.parse(authData);
|
||
bearerToken = auth.token || '';
|
||
} else if (token) {
|
||
bearerToken = token;
|
||
} else if (authToken) {
|
||
bearerToken = authToken;
|
||
}
|
||
|
||
// 调用后端登出API（使用8000端口）
|
||
fetch('http://localhost:8000/api/user/logout', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': bearerToken ? `Bearer ${bearerToken}` : ''
|
||
}
|
||
})
|
||
.then(response => {
|
||
// 清除所有可能的认证信息
|
||
localStorage.removeItem('authData');
|
||
sessionStorage.removeItem('authData');
|
||
localStorage.removeItem('token');
|
||
sessionStorage.removeItem('token');
|
||
localStorage.removeItem('authToken');
|
||
sessionStorage.removeItem('authToken');
|
||
localStorage.removeItem('username');
|
||
sessionStorage.removeItem('username');
|
||
localStorage.removeItem('nickname');
|
||
sessionStorage.removeItem('nickname');
|
||
|
||
showLoggedOutState();
|
||
alert('已成功退出登录');
|
||
// 跳转到登录页面
|
||
window.location.href = 'login.html';
|
||
})
|
||
.catch(error => {
|
||
console.error('登出请求失败:', error);
|
||
// 即使请求失败，也要清除本地存储的认证信息
|
||
localStorage.removeItem('authData');
|
||
sessionStorage.removeItem('authData');
|
||
localStorage.removeItem('token');
|
||
sessionStorage.removeItem('token');
|
||
localStorage.removeItem('authToken');
|
||
sessionStorage.removeItem('authToken');
|
||
localStorage.removeItem('username');
|
||
sessionStorage.removeItem('username');
|
||
localStorage.removeItem('nickname');
|
||
sessionStorage.removeItem('nickname');
|
||
|
||
showLoggedOutState();
|
||
alert('已退出登录');
|
||
window.location.href = 'login.html';
|
||
});
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// 页面加载时检查登录状态
|
||
$(document).ready(function() {
|
||
checkLoginStatus();
|
||
|
||
// 开发测试：加载认证测试脚本（可选）
|
||
const script = document.createElement('script');
|
||
script.src = 'test-auth.js';
|
||
script.onload = function() {
|
||
console.log('认证测试脚本加载完成');
|
||
};
|
||
script.onerror = function() {
|
||
console.log('认证测试脚本加载失败（仅开发用途）');
|
||
};
|
||
// 取消下面这行的注释来运行测试
|
||
// document.body.appendChild(script);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |