60sapi接口搭建完毕，数据库连接测试成功，登录注册部分简单完成
This commit is contained in:
388
frontend/react-app/public/60sapi/日更资讯/历史上的今天/css/style.css
Normal file
388
frontend/react-app/public/60sapi/日更资讯/历史上的今天/css/style.css
Normal file
@@ -0,0 +1,388 @@
|
||||
/* 历史上的今天 - 手机端优先的响应式设计 */
|
||||
|
||||
/* 重置样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
color: #2c3e50;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* 头部样式 - 手机端优先 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 15px;
|
||||
padding: 20px 15px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.8rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 日期显示 */
|
||||
.date-info {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.date-info h2 {
|
||||
font-size: 1.3rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.date-info .date-text {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 30px 15px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: 3px solid #ecf0f1;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 历史事件容器 */
|
||||
.events-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 统计信息 */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* 事件列表 */
|
||||
.events-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid #667eea;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.event-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 事件类型标签 */
|
||||
.event-type {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.event-type.birth {
|
||||
background: #e8f5e8;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.event-type.death {
|
||||
background: #fdf2e9;
|
||||
color: #e67e22;
|
||||
}
|
||||
|
||||
.event-type.event {
|
||||
background: #ebf3fd;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
/* 事件年份 */
|
||||
.event-year {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.event-year::before {
|
||||
content: "📅";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 事件标题 */
|
||||
.event-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 事件描述 */
|
||||
.event-description {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 链接按钮 */
|
||||
.event-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
padding: 6px 12px;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.event-link:hover {
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.event-link::after {
|
||||
content: "🔗";
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* 错误提示 */
|
||||
.error {
|
||||
background: #fed7d7;
|
||||
color: #c53030;
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #feb2b2;
|
||||
margin: 15px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 隐藏类 */
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 淡入动画 */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.6s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端适配 (768px+) */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 750px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 30px 25px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.date-info {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.date-info h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.events-container {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.event-description {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 电脑端适配 (1024px+) */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 40px 35px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.event-description {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 (1200px+) */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(102, 126, 234, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(102, 126, 234, 0.7);
|
||||
}
|
||||
83
frontend/react-app/public/60sapi/日更资讯/历史上的今天/index.html
Normal file
83
frontend/react-app/public/60sapi/日更资讯/历史上的今天/index.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="历史上的今天 - 了解今天在历史上发生的重要事件">
|
||||
<meta name="keywords" content="历史上的今天,历史事件,百度百科,今日历史">
|
||||
<title>历史上的今天 - 60s API集合</title>
|
||||
|
||||
<!-- 预加载关键资源 -->
|
||||
<link rel="preconnect" href="https://60s.viki.moe">
|
||||
<link rel="dns-prefetch" href="https://60s.viki.moe">
|
||||
|
||||
<!-- 样式文件 -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<!-- 图标 -->
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📚</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 页面容器 -->
|
||||
<div class="container">
|
||||
<!-- 页面头部 -->
|
||||
<header class="header">
|
||||
<h1 class="title">📚 历史上的今天</h1>
|
||||
<p class="subtitle">探索历史，了解今天在历史上发生的重要事件</p>
|
||||
</header>
|
||||
|
||||
<!-- 日期信息 -->
|
||||
<section class="date-section" id="date-info">
|
||||
<div class="date-display">
|
||||
<span class="date-text" id="date-text">加载中...</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在加载历史数据...</p>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="main-content" id="history-content" style="display: none;">
|
||||
|
||||
|
||||
<!-- 历史事件列表 -->
|
||||
<section class="events-section">
|
||||
<h2 class="section-title">历史事件</h2>
|
||||
<div class="events-container">
|
||||
<div class="events-list" id="events-list">
|
||||
<!-- 事件卡片将通过 JavaScript 动态生成 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- JavaScript 文件 -->
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
<!-- 页面性能监控 -->
|
||||
<script>
|
||||
// 页面加载性能监控
|
||||
window.addEventListener('load', function() {
|
||||
if ('performance' in window) {
|
||||
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
|
||||
console.log(`页面加载时间: ${loadTime}ms`);
|
||||
}
|
||||
});
|
||||
|
||||
// 错误监控
|
||||
window.addEventListener('error', function(event) {
|
||||
console.error('页面错误:', event.error);
|
||||
});
|
||||
|
||||
// 未处理的 Promise 错误
|
||||
window.addEventListener('unhandledrejection', function(event) {
|
||||
console.error('未处理的 Promise 错误:', event.reason);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
295
frontend/react-app/public/60sapi/日更资讯/历史上的今天/js/script.js
vendored
Normal file
295
frontend/react-app/public/60sapi/日更资讯/历史上的今天/js/script.js
vendored
Normal file
@@ -0,0 +1,295 @@
|
||||
// 历史上的今天 - JavaScript 功能实现
|
||||
|
||||
// API 配置
|
||||
const API = {
|
||||
endpoints: [],
|
||||
currentIndex: 0,
|
||||
encoding: 'utf-8',
|
||||
// 初始化API接口列表
|
||||
async init() {
|
||||
try {
|
||||
const res = await fetch('./接口集合.json');
|
||||
const endpoints = await res.json();
|
||||
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/today_in_history`);
|
||||
} catch (e) {
|
||||
// 如果无法加载接口集合，使用默认接口
|
||||
this.endpoints = ['https://60s.viki.moe/v2/today_in_history'];
|
||||
}
|
||||
},
|
||||
// 获取当前接口URL
|
||||
getCurrentUrl() {
|
||||
if (this.endpoints.length === 0) return null;
|
||||
const url = new URL(this.endpoints[this.currentIndex]);
|
||||
url.searchParams.append('encoding', this.encoding);
|
||||
return url.toString();
|
||||
},
|
||||
// 切换到下一个接口
|
||||
switchToNext() {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.endpoints.length;
|
||||
return this.currentIndex < this.endpoints.length;
|
||||
},
|
||||
// 重置到第一个接口
|
||||
reset() {
|
||||
this.currentIndex = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 事件类型映射
|
||||
const EVENT_TYPE_MAP = {
|
||||
'birth': { name: '诞生', icon: '🎂', color: '#27ae60' },
|
||||
'death': { name: '逝世', icon: '🕊️', color: '#e67e22' },
|
||||
'event': { name: '事件', icon: '📰', color: '#3498db' }
|
||||
};
|
||||
|
||||
// DOM 元素
|
||||
let elements = {};
|
||||
let currentData = null;
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initElements();
|
||||
loadTodayInHistory();
|
||||
});
|
||||
|
||||
// 初始化 DOM 元素
|
||||
function initElements() {
|
||||
elements = {
|
||||
loading: document.getElementById('loading'),
|
||||
content: document.getElementById('history-content'),
|
||||
dateInfo: document.getElementById('date-info'),
|
||||
dateText: document.getElementById('date-text'),
|
||||
totalEvents: document.getElementById('total-events'),
|
||||
birthEvents: document.getElementById('birth-events'),
|
||||
deathEvents: document.getElementById('death-events'),
|
||||
otherEvents: document.getElementById('other-events'),
|
||||
eventsList: document.getElementById('events-list')
|
||||
};
|
||||
}
|
||||
|
||||
// 加载历史上的今天数据
|
||||
async function loadTodayInHistory() {
|
||||
try {
|
||||
showLoading(true);
|
||||
|
||||
// 初始化API接口列表
|
||||
await API.init();
|
||||
|
||||
// 重置API索引到第一个接口
|
||||
API.reset();
|
||||
|
||||
// 尝试所有API接口
|
||||
for (let i = 0; i < API.endpoints.length; i++) {
|
||||
try {
|
||||
const url = API.getCurrentUrl();
|
||||
console.log(`尝试接口 ${i + 1}/${API.endpoints.length}: ${url}`);
|
||||
|
||||
const response = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
timeout: 10000 // 10秒超时
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('API响应数据:', data);
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
console.log(`接口 ${i + 1} 请求成功`);
|
||||
currentData = data.data;
|
||||
displayHistoryData(data.data);
|
||||
return;
|
||||
} else {
|
||||
throw new Error(data.message || '获取数据失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.warn(`接口 ${i + 1} 失败:`, error.message);
|
||||
|
||||
// 如果不是最后一个接口，切换到下一个
|
||||
if (i < API.endpoints.length - 1) {
|
||||
API.switchToNext();
|
||||
continue;
|
||||
}
|
||||
|
||||
// 所有接口都失败了，抛出错误
|
||||
throw new Error('所有接口都无法访问');
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载历史数据失败:', error);
|
||||
showError(`加载失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示历史数据
|
||||
function displayHistoryData(data) {
|
||||
if (!data || !data.items) {
|
||||
showError('没有获取到历史数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新日期信息
|
||||
updateDateInfo(data);
|
||||
|
||||
// 更新统计信息
|
||||
updateStats(data.items);
|
||||
|
||||
// 显示事件列表
|
||||
renderEventsList(data.items);
|
||||
|
||||
// 显示内容区域
|
||||
if (elements.content) {
|
||||
elements.content.classList.add('fade-in');
|
||||
elements.content.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// 更新日期信息
|
||||
function updateDateInfo(data) {
|
||||
if (elements.dateText && data.date) {
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
elements.dateText.textContent = `${year}年${data.month}月${data.day}日`;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新统计信息
|
||||
function updateStats(items) {
|
||||
const stats = {
|
||||
total: items.length,
|
||||
birth: items.filter(item => item.event_type === 'birth').length,
|
||||
death: items.filter(item => item.event_type === 'death').length,
|
||||
event: items.filter(item => item.event_type === 'event').length
|
||||
};
|
||||
|
||||
if (elements.totalEvents) {
|
||||
elements.totalEvents.textContent = stats.total;
|
||||
}
|
||||
|
||||
if (elements.birthEvents) {
|
||||
elements.birthEvents.textContent = stats.birth;
|
||||
}
|
||||
|
||||
if (elements.deathEvents) {
|
||||
elements.deathEvents.textContent = stats.death;
|
||||
}
|
||||
|
||||
if (elements.otherEvents) {
|
||||
elements.otherEvents.textContent = stats.event;
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染事件列表
|
||||
function renderEventsList(items) {
|
||||
if (!elements.eventsList || !items) return;
|
||||
|
||||
// 按年份排序（从今到古）
|
||||
const sortedItems = [...items].sort((a, b) => {
|
||||
return parseInt(b.year) - parseInt(a.year);
|
||||
});
|
||||
|
||||
elements.eventsList.innerHTML = '';
|
||||
|
||||
sortedItems.forEach(item => {
|
||||
const eventCard = createEventCard(item);
|
||||
elements.eventsList.appendChild(eventCard);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建事件卡片
|
||||
function createEventCard(item) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'event-card';
|
||||
|
||||
const eventType = EVENT_TYPE_MAP[item.event_type] || EVENT_TYPE_MAP['event'];
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="event-type ${item.event_type}">${eventType.name}</div>
|
||||
<div class="event-year">${formatYear(item.year)}</div>
|
||||
<div class="event-title">${escapeHtml(item.title)}</div>
|
||||
<div class="event-description">${escapeHtml(item.description)}</div>
|
||||
${item.link ? `<a href="${escapeHtml(item.link)}" target="_blank" rel="noopener noreferrer" class="event-link">了解更多</a>` : ''}
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// 格式化年份显示
|
||||
function formatYear(year) {
|
||||
const yearNum = parseInt(year);
|
||||
if (yearNum < 0) {
|
||||
return `公元前${Math.abs(yearNum)}年`;
|
||||
} else if (yearNum < 1000) {
|
||||
return `公元${yearNum}年`;
|
||||
} else {
|
||||
return `${yearNum}年`;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
if (elements.loading) {
|
||||
elements.loading.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
|
||||
if (elements.content) {
|
||||
elements.content.style.display = show ? 'none' : 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError(message) {
|
||||
if (elements.content) {
|
||||
elements.content.innerHTML = `
|
||||
<div class="error">
|
||||
<h3>😔 加载失败</h3>
|
||||
<p>${escapeHtml(message)}</p>
|
||||
<button onclick="loadTodayInHistory()" style="
|
||||
margin-top: 10px;
|
||||
padding: 8px 16px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
">重新加载</button>
|
||||
</div>
|
||||
`;
|
||||
elements.content.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// HTML 转义
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(event) {
|
||||
console.error('页面错误:', event.error);
|
||||
});
|
||||
|
||||
// 网络状态监听
|
||||
window.addEventListener('online', function() {
|
||||
console.log('网络已连接');
|
||||
});
|
||||
|
||||
window.addEventListener('offline', function() {
|
||||
console.log('网络已断开');
|
||||
showError('网络连接已断开，请检查网络设置');
|
||||
});
|
||||
|
||||
// 导出全局方法
|
||||
window.TodayInHistory = {
|
||||
loadTodayInHistory,
|
||||
showError,
|
||||
showLoading
|
||||
};
|
||||
7
frontend/react-app/public/60sapi/日更资讯/历史上的今天/接口集合.json
Normal file
7
frontend/react-app/public/60sapi/日更资讯/历史上的今天/接口集合.json
Normal file
@@ -0,0 +1,7 @@
|
||||
[
|
||||
"https://60s-cf.viki.moe",
|
||||
"https://60s.viki.moe",
|
||||
"https://60s.b23.run",
|
||||
"https://60s.114128.xyz",
|
||||
"https://60s-cf.114128.xyz"
|
||||
]
|
||||
102
frontend/react-app/public/60sapi/日更资讯/历史上的今天/返回接口.json
Normal file
102
frontend/react-app/public/60sapi/日更资讯/历史上的今天/返回接口.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": {
|
||||
"date": "8-19",
|
||||
"month": 8,
|
||||
"day": 19,
|
||||
"items": [
|
||||
{
|
||||
"title": "罗马帝国开国皇帝奥古斯都逝世",
|
||||
"year": "14",
|
||||
"description": "奥古斯都（拉丁文 Augustus的中译，复数型 Augusti）的原意为“神圣的”、“高贵的”，带有宗教与神学式的意味。",
|
||||
"event_type": "death",
|
||||
"link": "https://baike.baidu.com/item/%E5%A5%A5%E5%8F%A4%E6%96%AF%E9%83%BD/14291"
|
||||
},
|
||||
{
|
||||
"title": "近代概率论的奠基者帕斯卡逝世",
|
||||
"year": "1662",
|
||||
"description": "布莱士·帕斯卡（Blaise Pascal ，1623－1662）是法国数学家、物理学家、哲学家、散文家。",
|
||||
"event_type": "death",
|
||||
"link": "https://baike.baidu.com/item/%E5%B8%83%E8%8E%B1%E5%A3%AB%C2%B7%E5%B8%95%E6%96%AF%E5%8D%A1"
|
||||
},
|
||||
{
|
||||
"title": "瑞典国王古斯塔夫三世发动政变夺取权力",
|
||||
"year": "1772",
|
||||
"description": "古斯塔夫三世（Gustavus III，1746－1792）是瑞典历史上褒贬最多的国王（1771－1792）。阿道夫·弗里德里克国王的儿子和继承者。",
|
||||
"event_type": "event",
|
||||
"link": "https://baike.baidu.com/item/%E5%8F%A4%E6%96%AF%E5%A1%94%E5%A4%AB%E4%B8%89%E4%B8%96"
|
||||
},
|
||||
{
|
||||
"title": "美国飞机设计师奥维尔·莱特诞生",
|
||||
"year": "1871",
|
||||
"description": "奥威尔莱特（公元1871～公元1948）。 奥维尔·莱特1871年生于美国俄亥俄州代顿市。上过中学，但实际上未获得毕业文凭。",
|
||||
"event_type": "birth",
|
||||
"link": "https://baike.baidu.com/item/%E5%A5%A5%E7%BB%B4%E5%B0%94%C2%B7%E8%8E%B1%E7%89%B9"
|
||||
},
|
||||
{
|
||||
"title": "法国著名时装设计师、香奈儿品牌创始人加布里埃·香奈儿出生",
|
||||
"year": "1883",
|
||||
"description": "香奈儿儿时入读修女院学校学得一手针线活。后来她与许多上流社会男士有过交往。1910年，毅然放弃嫁入豪门做阔太太的她在巴黎开设了一家女装帽子店，从此开创了香奈儿时尚帝国。",
|
||||
"event_type": "birth",
|
||||
"link": "https://baike.baidu.com/item/%E5%8A%A0%E5%B8%83%E9%87%8C%E5%9F%83%C2%B7%E9%A6%99%E5%A5%88%E5%84%BF/9480318"
|
||||
},
|
||||
{
|
||||
"title": "美国宇航员斯托里·马斯格雷夫出生",
|
||||
"year": "1935",
|
||||
"description": "斯托里·马斯格雷夫（Franklin Story Musgrave，1935年8月19日－），美国宇航员，拥有医学、数学、文学等六个学位，入选美国国家航空航天局（NASA）科学家宇航员。",
|
||||
"event_type": "birth",
|
||||
"link": "https://baike.baidu.com/item/%E6%96%AF%E6%89%98%E9%87%8C%C2%B7%E9%A9%AC%E6%96%AF%E6%A0%BC%E9%9B%B7%E5%A4%AB"
|
||||
},
|
||||
{
|
||||
"title": "纳粹德国陆军元帅京特·冯·克鲁格畏罪自杀",
|
||||
"year": "1944",
|
||||
"description": "汉斯·京特·冯·克卢格（Günther·von·Kluge， 1882年10月30日－1944年8月19日），纳粹德国陆军元帅（1940.7.19），著名军事家、统帅。",
|
||||
"event_type": "death",
|
||||
"link": "https://baike.baidu.com/item/%E4%BA%AC%E7%89%B9%C2%B7%E5%86%AF%C2%B7%E5%85%8B%E9%B2%81%E6%A0%BC"
|
||||
},
|
||||
{
|
||||
"title": "美国第42任总统克林顿出生",
|
||||
"year": "1946",
|
||||
"description": "威廉·杰斐逊·克林顿，美国律师、政治家，美国民主党成员，曾任阿肯色州州长和第42任美国总统。克林顿基金会主席 。",
|
||||
"event_type": "birth",
|
||||
"link": "https://baike.baidu.com/item/%E5%A8%81%E5%BB%89%C2%B7%E6%9D%B0%E6%96%90%E9%80%8A%C2%B7%E5%85%8B%E6%9E%97%E9%A1%BF"
|
||||
},
|
||||
{
|
||||
"title": "美国演员马修·派瑞出生",
|
||||
"year": "1969",
|
||||
"description": "马修·派瑞（Matthew Perry，1969年8月19日—2023年10月28日），出生于美国马萨诸塞州普利茅斯，美国、加拿大籍男演员、编剧。",
|
||||
"event_type": "birth",
|
||||
"link": "https://baike.baidu.com/item/%E9%A9%AC%E4%BF%AE%C2%B7%E6%B4%BE%E7%91%9E"
|
||||
},
|
||||
{
|
||||
"title": "北回归线标志塔在广州落成",
|
||||
"year": "1985",
|
||||
"description": "北回归线标志塔，是标志地理学上北回归线经过地方的建筑物。",
|
||||
"event_type": "event",
|
||||
"link": "https://baike.baidu.com/item/%E5%8C%97%E5%9B%9E%E5%BD%92%E7%BA%BF%E6%A0%87%E5%BF%97%E5%A1%94"
|
||||
},
|
||||
{
|
||||
"title": "“八一九事件”，苏联八月政变",
|
||||
"year": "1991",
|
||||
"description": "八一九事件，又称“苏联政变”、“八月政变”，指1991年8月19日-8月21日在苏联发生的一次政变。",
|
||||
"event_type": "event",
|
||||
"link": "https://baike.baidu.com/item/%E5%85%AB%E4%B8%80%E4%B9%9D%E4%BA%8B%E4%BB%B6"
|
||||
},
|
||||
{
|
||||
"title": "量子化学家莱纳斯·卡尔·鲍林逝世",
|
||||
"year": "1994",
|
||||
"description": "莱纳斯·卡尔·鲍林（Linus Carl Pauling，1901年2月28日—1994年8月19日），出生于美国俄勒冈州波特兰，化学家、美国国家科学院院士、美国艺术与科学院院士，1954年诺贝尔化学奖获得者。",
|
||||
"event_type": "death",
|
||||
"link": "https://baike.baidu.com/item/%E8%8E%B1%E7%BA%B3%E6%96%AF%C2%B7%E5%8D%A1%E5%B0%94%C2%B7%E9%B2%8D%E6%9E%97"
|
||||
},
|
||||
{
|
||||
"title": "中国三江源自然保护区成立",
|
||||
"year": "2000",
|
||||
"description": "青海三江源国家级自然保护区位于青藏高原腹地，青海省南部，地理位置介于东经89°24′～102°23′，北纬31°39′～36°16′之间，青海三江源国家级自然保护区属湿地类型的自然保护区。",
|
||||
"event_type": "event",
|
||||
"link": "https://baike.baidu.com/item/%E4%B8%89%E6%B1%9F%E6%BA%90%E8%87%AA%E7%84%B6%E4%BF%9D%E6%8A%A4%E5%8C%BA"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user