chore: sync local changes (2026-03-12)
This commit is contained in:
@@ -1,192 +1,192 @@
|
||||
/* 彩虹渐变背景样式 */
|
||||
|
||||
/* 主背景渐变 */
|
||||
body {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 107, 107, 0.3) 0%,
|
||||
rgba(255, 165, 0, 0.3) 14.28%,
|
||||
rgba(255, 255, 0, 0.25) 28.56%,
|
||||
rgba(50, 205, 50, 0.3) 42.84%,
|
||||
rgba(0, 191, 255, 0.3) 57.12%,
|
||||
rgba(65, 105, 225, 0.3) 71.4%,
|
||||
rgba(147, 112, 219, 0.3) 85.68%,
|
||||
rgba(255, 105, 180, 0.3) 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: rainbowShift 20s ease infinite;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 彩虹渐变动画 */
|
||||
@keyframes rainbowShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 半透明覆盖层，增强可读性 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 搜索按钮彩虹渐变 */
|
||||
.search-btn {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 107, 107, 0.8),
|
||||
rgba(255, 165, 0, 0.8),
|
||||
rgba(255, 255, 0, 0.7),
|
||||
rgba(50, 205, 50, 0.8),
|
||||
rgba(0, 191, 255, 0.8),
|
||||
rgba(65, 105, 225, 0.8),
|
||||
rgba(147, 112, 219, 0.8)
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
animation: buttonRainbow 12s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes buttonRainbow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 结果卡片边框彩虹渐变 */
|
||||
.result-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 107, 107, 0.4),
|
||||
rgba(255, 165, 0, 0.4),
|
||||
rgba(255, 255, 0, 0.3),
|
||||
rgba(50, 205, 50, 0.4),
|
||||
rgba(0, 191, 255, 0.4),
|
||||
rgba(65, 105, 225, 0.4),
|
||||
rgba(147, 112, 219, 0.4),
|
||||
rgba(255, 107, 107, 0.4)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: borderRainbow 15s linear infinite;
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes borderRainbow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 400% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载动画彩虹效果 */
|
||||
.loading-spinner {
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 4px solid transparent;
|
||||
border-image: linear-gradient(
|
||||
45deg,
|
||||
#ff6b6b,
|
||||
#ffa500,
|
||||
#ffff00,
|
||||
#32cd32,
|
||||
#00bfff,
|
||||
#4169e1,
|
||||
#9370db
|
||||
) 1;
|
||||
animation: spin 1s linear infinite, colorShift 3s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes colorShift {
|
||||
0%, 100% {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 链接悬停彩虹效果 */
|
||||
.result-link:hover {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 107, 107, 0.7),
|
||||
rgba(255, 165, 0, 0.7),
|
||||
rgba(255, 255, 0, 0.6),
|
||||
rgba(50, 205, 50, 0.7),
|
||||
rgba(0, 191, 255, 0.7),
|
||||
rgba(65, 105, 225, 0.7),
|
||||
rgba(147, 112, 219, 0.7)
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
animation: linkRainbow 3s ease infinite;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@keyframes linkRainbow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题彩虹文字效果 */
|
||||
.title {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 107, 107, 0.8),
|
||||
rgba(255, 165, 0, 0.8),
|
||||
rgba(255, 255, 0, 0.7),
|
||||
rgba(50, 205, 50, 0.8),
|
||||
rgba(0, 191, 255, 0.8),
|
||||
rgba(65, 105, 225, 0.8),
|
||||
rgba(147, 112, 219, 0.8)
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: titleRainbow 8s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes titleRainbow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
/* 彩虹渐变背景样式 */
|
||||
|
||||
/* 主背景渐变 */
|
||||
body {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 107, 107, 0.3) 0%,
|
||||
rgba(255, 165, 0, 0.3) 14.28%,
|
||||
rgba(255, 255, 0, 0.25) 28.56%,
|
||||
rgba(50, 205, 50, 0.3) 42.84%,
|
||||
rgba(0, 191, 255, 0.3) 57.12%,
|
||||
rgba(65, 105, 225, 0.3) 71.4%,
|
||||
rgba(147, 112, 219, 0.3) 85.68%,
|
||||
rgba(255, 105, 180, 0.3) 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: rainbowShift 20s ease infinite;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 彩虹渐变动画 */
|
||||
@keyframes rainbowShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 半透明覆盖层，增强可读性 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 搜索按钮彩虹渐变 */
|
||||
.search-btn {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 107, 107, 0.8),
|
||||
rgba(255, 165, 0, 0.8),
|
||||
rgba(255, 255, 0, 0.7),
|
||||
rgba(50, 205, 50, 0.8),
|
||||
rgba(0, 191, 255, 0.8),
|
||||
rgba(65, 105, 225, 0.8),
|
||||
rgba(147, 112, 219, 0.8)
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
animation: buttonRainbow 12s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes buttonRainbow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 结果卡片边框彩虹渐变 */
|
||||
.result-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 107, 107, 0.4),
|
||||
rgba(255, 165, 0, 0.4),
|
||||
rgba(255, 255, 0, 0.3),
|
||||
rgba(50, 205, 50, 0.4),
|
||||
rgba(0, 191, 255, 0.4),
|
||||
rgba(65, 105, 225, 0.4),
|
||||
rgba(147, 112, 219, 0.4),
|
||||
rgba(255, 107, 107, 0.4)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: borderRainbow 15s linear infinite;
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes borderRainbow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 400% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载动画彩虹效果 */
|
||||
.loading-spinner {
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 4px solid transparent;
|
||||
border-image: linear-gradient(
|
||||
45deg,
|
||||
#ff6b6b,
|
||||
#ffa500,
|
||||
#ffff00,
|
||||
#32cd32,
|
||||
#00bfff,
|
||||
#4169e1,
|
||||
#9370db
|
||||
) 1;
|
||||
animation: spin 1s linear infinite, colorShift 3s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes colorShift {
|
||||
0%, 100% {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 链接悬停彩虹效果 */
|
||||
.result-link:hover {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 107, 107, 0.7),
|
||||
rgba(255, 165, 0, 0.7),
|
||||
rgba(255, 255, 0, 0.6),
|
||||
rgba(50, 205, 50, 0.7),
|
||||
rgba(0, 191, 255, 0.7),
|
||||
rgba(65, 105, 225, 0.7),
|
||||
rgba(147, 112, 219, 0.7)
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
animation: linkRainbow 3s ease infinite;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@keyframes linkRainbow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题彩虹文字效果 */
|
||||
.title {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 107, 107, 0.8),
|
||||
rgba(255, 165, 0, 0.8),
|
||||
rgba(255, 255, 0, 0.7),
|
||||
rgba(50, 205, 50, 0.8),
|
||||
rgba(0, 191, 255, 0.8),
|
||||
rgba(65, 105, 225, 0.8),
|
||||
rgba(147, 112, 219, 0.8)
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: titleRainbow 8s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes titleRainbow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,83 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>百度百科词条查询</title>
|
||||
<link rel="stylesheet" href="css/background.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1 class="title">百度百科词条查询</h1>
|
||||
<p class="subtitle">探索知识的彩虹世界</p>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="search-section">
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="请输入要查询的词条..." autocomplete="off">
|
||||
<button id="searchBtn" class="search-btn">
|
||||
<span class="search-icon">🔍</span>
|
||||
<span class="search-text">搜索</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-section" id="resultSection">
|
||||
<div class="loading" id="loading" style="display: none;">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在搜索中...</p>
|
||||
</div>
|
||||
|
||||
<div class="result-card" id="resultCard" style="display: none;">
|
||||
<div class="result-header">
|
||||
<h2 class="result-title" id="resultTitle"></h2>
|
||||
<p class="result-description" id="resultDescription"></p>
|
||||
</div>
|
||||
|
||||
<div class="result-content">
|
||||
<div class="result-image-container">
|
||||
<img id="resultImage" class="result-image" alt="词条图片">
|
||||
</div>
|
||||
|
||||
<div class="result-text">
|
||||
<div class="result-abstract">
|
||||
<h3>摘要</h3>
|
||||
<p id="resultAbstract"></p>
|
||||
</div>
|
||||
|
||||
<div class="result-actions">
|
||||
<a id="resultLink" class="result-link" target="_blank">
|
||||
<span>查看完整词条</span>
|
||||
<span class="link-icon">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage" style="display: none;">
|
||||
<div class="error-icon">⚠️</div>
|
||||
<h3>查询失败</h3>
|
||||
<p id="errorText"></p>
|
||||
<button id="retryBtn" class="retry-btn">重试</button>
|
||||
</div>
|
||||
|
||||
<div class="welcome-message" id="welcomeMessage">
|
||||
<div class="welcome-icon">📚</div>
|
||||
<h3>欢迎使用百度百科词条查询</h3>
|
||||
<p>在上方搜索框中输入您想了解的词条，开始探索知识的海洋</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p>数据来源：百度百科</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>百度百科词条查询</title>
|
||||
<link rel="stylesheet" href="css/background.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1 class="title">百度百科词条查询</h1>
|
||||
<p class="subtitle">探索知识的彩虹世界</p>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="search-section">
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="请输入要查询的词条..." autocomplete="off">
|
||||
<button id="searchBtn" class="search-btn">
|
||||
<span class="search-icon">🔍</span>
|
||||
<span class="search-text">搜索</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-section" id="resultSection">
|
||||
<div class="loading" id="loading" style="display: none;">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在搜索中...</p>
|
||||
</div>
|
||||
|
||||
<div class="result-card" id="resultCard" style="display: none;">
|
||||
<div class="result-header">
|
||||
<h2 class="result-title" id="resultTitle"></h2>
|
||||
<p class="result-description" id="resultDescription"></p>
|
||||
</div>
|
||||
|
||||
<div class="result-content">
|
||||
<div class="result-image-container">
|
||||
<img id="resultImage" class="result-image" alt="词条图片">
|
||||
</div>
|
||||
|
||||
<div class="result-text">
|
||||
<div class="result-abstract">
|
||||
<h3>摘要</h3>
|
||||
<p id="resultAbstract"></p>
|
||||
</div>
|
||||
|
||||
<div class="result-actions">
|
||||
<a id="resultLink" class="result-link" target="_blank">
|
||||
<span>查看完整词条</span>
|
||||
<span class="link-icon">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage" style="display: none;">
|
||||
<div class="error-icon">⚠️</div>
|
||||
<h3>查询失败</h3>
|
||||
<p id="errorText"></p>
|
||||
<button id="retryBtn" class="retry-btn">重试</button>
|
||||
</div>
|
||||
|
||||
<div class="welcome-message" id="welcomeMessage">
|
||||
<div class="welcome-icon">📚</div>
|
||||
<h3>欢迎使用百度百科词条查询</h3>
|
||||
<p>在上方搜索框中输入您想了解的词条，开始探索知识的海洋</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p>数据来源：百度百科</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,320 +1,320 @@
|
||||
// 百度百科词条查询应用
|
||||
class BaikeApp {
|
||||
constructor() {
|
||||
// API接口列表
|
||||
this.apiEndpoints = [
|
||||
'https://60s.api.shumengya.top',
|
||||
];
|
||||
|
||||
this.currentApiIndex = 0;
|
||||
this.isLoading = false;
|
||||
|
||||
this.initElements();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
// 初始化DOM元素
|
||||
initElements() {
|
||||
this.searchInput = document.getElementById('searchInput');
|
||||
this.searchBtn = document.getElementById('searchBtn');
|
||||
this.resultSection = document.getElementById('resultSection');
|
||||
this.loading = document.getElementById('loading');
|
||||
this.resultCard = document.getElementById('resultCard');
|
||||
this.errorMessage = document.getElementById('errorMessage');
|
||||
this.welcomeMessage = document.getElementById('welcomeMessage');
|
||||
this.retryBtn = document.getElementById('retryBtn');
|
||||
|
||||
// 结果显示元素
|
||||
this.resultTitle = document.getElementById('resultTitle');
|
||||
this.resultDescription = document.getElementById('resultDescription');
|
||||
this.resultImage = document.getElementById('resultImage');
|
||||
this.resultAbstract = document.getElementById('resultAbstract');
|
||||
this.resultLink = document.getElementById('resultLink');
|
||||
this.errorText = document.getElementById('errorText');
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvents() {
|
||||
// 搜索按钮点击事件
|
||||
this.searchBtn.addEventListener('click', () => {
|
||||
this.handleSearch();
|
||||
});
|
||||
|
||||
// 输入框回车事件
|
||||
this.searchInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.handleSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// 重试按钮事件
|
||||
this.retryBtn.addEventListener('click', () => {
|
||||
this.handleSearch();
|
||||
});
|
||||
|
||||
// 输入框焦点事件
|
||||
this.searchInput.addEventListener('focus', () => {
|
||||
this.searchInput.select();
|
||||
});
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
async handleSearch() {
|
||||
const query = this.searchInput.value.trim();
|
||||
|
||||
if (!query) {
|
||||
this.showError('请输入要查询的词条');
|
||||
this.searchInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.searchBaike(query);
|
||||
}
|
||||
|
||||
// 搜索百科词条
|
||||
async searchBaike(query) {
|
||||
this.showLoading();
|
||||
this.isLoading = true;
|
||||
|
||||
// 重置API索引
|
||||
this.currentApiIndex = 0;
|
||||
|
||||
const success = await this.tryApiCall(query);
|
||||
|
||||
if (!success) {
|
||||
this.showError('所有API接口都无法访问，请稍后重试');
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
// 尝试API调用
|
||||
async tryApiCall(query) {
|
||||
for (let i = 0; i < this.apiEndpoints.length; i++) {
|
||||
const endpoint = this.apiEndpoints[this.currentApiIndex];
|
||||
|
||||
try {
|
||||
const result = await this.callApi(endpoint, query);
|
||||
if (result) {
|
||||
this.showResult(result);
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`API ${endpoint} 调用失败:`, error.message);
|
||||
}
|
||||
|
||||
// 切换到下一个API
|
||||
this.currentApiIndex = (this.currentApiIndex + 1) % this.apiEndpoints.length;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 调用API
|
||||
async callApi(endpoint, query) {
|
||||
const url = `${endpoint}/v2/baike?word=${encodeURIComponent(query)}`;
|
||||
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
signal: controller.signal,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
return data.data;
|
||||
} else {
|
||||
throw new Error(data.message || '未找到相关词条');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (error.name === 'AbortError') {
|
||||
throw new Error('请求超时');
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
showLoading() {
|
||||
this.hideAllSections();
|
||||
this.loading.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 显示搜索结果
|
||||
showResult(data) {
|
||||
this.hideAllSections();
|
||||
|
||||
// 填充数据
|
||||
this.resultTitle.textContent = data.title || '未知标题';
|
||||
this.resultDescription.textContent = data.description || '暂无描述';
|
||||
this.resultAbstract.textContent = data.abstract || '暂无摘要信息';
|
||||
|
||||
// 处理图片
|
||||
if (data.cover) {
|
||||
this.resultImage.src = data.cover;
|
||||
this.resultImage.style.display = 'block';
|
||||
this.resultImage.onerror = () => {
|
||||
this.resultImage.style.display = 'none';
|
||||
};
|
||||
} else {
|
||||
this.resultImage.style.display = 'none';
|
||||
}
|
||||
|
||||
// 处理链接
|
||||
if (data.link) {
|
||||
this.resultLink.href = data.link;
|
||||
this.resultLink.style.display = 'inline-flex';
|
||||
} else {
|
||||
this.resultLink.style.display = 'none';
|
||||
}
|
||||
|
||||
this.resultCard.style.display = 'block';
|
||||
|
||||
// 滚动到结果区域
|
||||
this.resultCard.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
showError(message) {
|
||||
this.hideAllSections();
|
||||
this.errorText.textContent = message;
|
||||
this.errorMessage.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 隐藏所有区域
|
||||
hideAllSections() {
|
||||
this.loading.style.display = 'none';
|
||||
this.resultCard.style.display = 'none';
|
||||
this.errorMessage.style.display = 'none';
|
||||
this.welcomeMessage.style.display = 'none';
|
||||
}
|
||||
|
||||
// 显示欢迎信息
|
||||
showWelcome() {
|
||||
this.hideAllSections();
|
||||
this.welcomeMessage.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
class Utils {
|
||||
// 防抖函数
|
||||
static debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// 节流函数
|
||||
static throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function() {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => inThrottle = false, limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 格式化文本长度
|
||||
static truncateText(text, maxLength) {
|
||||
if (text.length <= maxLength) {
|
||||
return text;
|
||||
}
|
||||
return text.substring(0, maxLength) + '...';
|
||||
}
|
||||
|
||||
// 检查是否为移动设备
|
||||
static isMobile() {
|
||||
return window.innerWidth <= 768;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化应用
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 初始化应用
|
||||
const app = new BaikeApp();
|
||||
|
||||
// 添加页面可见性变化监听
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
// 页面重新可见时，聚焦搜索框
|
||||
if (!app.isLoading) {
|
||||
app.searchInput.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 添加窗口大小变化监听
|
||||
window.addEventListener('resize', Utils.throttle(() => {
|
||||
// 响应式调整
|
||||
if (Utils.isMobile()) {
|
||||
// 移动端特殊处理
|
||||
document.body.classList.add('mobile');
|
||||
} else {
|
||||
document.body.classList.remove('mobile');
|
||||
}
|
||||
}, 250));
|
||||
|
||||
// 初始检查设备类型
|
||||
if (Utils.isMobile()) {
|
||||
document.body.classList.add('mobile');
|
||||
}
|
||||
|
||||
// 页面加载完成后聚焦搜索框
|
||||
setTimeout(() => {
|
||||
app.searchInput.focus();
|
||||
}, 500);
|
||||
|
||||
// 添加键盘快捷键支持
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl/Cmd + K 聚焦搜索框
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
app.searchInput.focus();
|
||||
app.searchInput.select();
|
||||
}
|
||||
|
||||
// ESC 清空搜索框
|
||||
if (e.key === 'Escape') {
|
||||
app.searchInput.value = '';
|
||||
app.showWelcome();
|
||||
app.searchInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
console.log('百度百科词条查询应用已初始化');
|
||||
// 百度百科词条查询应用
|
||||
class BaikeApp {
|
||||
constructor() {
|
||||
// API接口列表
|
||||
this.apiEndpoints = [
|
||||
'https://60s.api.shumengya.top',
|
||||
];
|
||||
|
||||
this.currentApiIndex = 0;
|
||||
this.isLoading = false;
|
||||
|
||||
this.initElements();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
// 初始化DOM元素
|
||||
initElements() {
|
||||
this.searchInput = document.getElementById('searchInput');
|
||||
this.searchBtn = document.getElementById('searchBtn');
|
||||
this.resultSection = document.getElementById('resultSection');
|
||||
this.loading = document.getElementById('loading');
|
||||
this.resultCard = document.getElementById('resultCard');
|
||||
this.errorMessage = document.getElementById('errorMessage');
|
||||
this.welcomeMessage = document.getElementById('welcomeMessage');
|
||||
this.retryBtn = document.getElementById('retryBtn');
|
||||
|
||||
// 结果显示元素
|
||||
this.resultTitle = document.getElementById('resultTitle');
|
||||
this.resultDescription = document.getElementById('resultDescription');
|
||||
this.resultImage = document.getElementById('resultImage');
|
||||
this.resultAbstract = document.getElementById('resultAbstract');
|
||||
this.resultLink = document.getElementById('resultLink');
|
||||
this.errorText = document.getElementById('errorText');
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvents() {
|
||||
// 搜索按钮点击事件
|
||||
this.searchBtn.addEventListener('click', () => {
|
||||
this.handleSearch();
|
||||
});
|
||||
|
||||
// 输入框回车事件
|
||||
this.searchInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.handleSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// 重试按钮事件
|
||||
this.retryBtn.addEventListener('click', () => {
|
||||
this.handleSearch();
|
||||
});
|
||||
|
||||
// 输入框焦点事件
|
||||
this.searchInput.addEventListener('focus', () => {
|
||||
this.searchInput.select();
|
||||
});
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
async handleSearch() {
|
||||
const query = this.searchInput.value.trim();
|
||||
|
||||
if (!query) {
|
||||
this.showError('请输入要查询的词条');
|
||||
this.searchInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.searchBaike(query);
|
||||
}
|
||||
|
||||
// 搜索百科词条
|
||||
async searchBaike(query) {
|
||||
this.showLoading();
|
||||
this.isLoading = true;
|
||||
|
||||
// 重置API索引
|
||||
this.currentApiIndex = 0;
|
||||
|
||||
const success = await this.tryApiCall(query);
|
||||
|
||||
if (!success) {
|
||||
this.showError('所有API接口都无法访问，请稍后重试');
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
// 尝试API调用
|
||||
async tryApiCall(query) {
|
||||
for (let i = 0; i < this.apiEndpoints.length; i++) {
|
||||
const endpoint = this.apiEndpoints[this.currentApiIndex];
|
||||
|
||||
try {
|
||||
const result = await this.callApi(endpoint, query);
|
||||
if (result) {
|
||||
this.showResult(result);
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`API ${endpoint} 调用失败:`, error.message);
|
||||
}
|
||||
|
||||
// 切换到下一个API
|
||||
this.currentApiIndex = (this.currentApiIndex + 1) % this.apiEndpoints.length;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 调用API
|
||||
async callApi(endpoint, query) {
|
||||
const url = `${endpoint}/v2/baike?word=${encodeURIComponent(query)}`;
|
||||
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
signal: controller.signal,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
return data.data;
|
||||
} else {
|
||||
throw new Error(data.message || '未找到相关词条');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (error.name === 'AbortError') {
|
||||
throw new Error('请求超时');
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
showLoading() {
|
||||
this.hideAllSections();
|
||||
this.loading.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 显示搜索结果
|
||||
showResult(data) {
|
||||
this.hideAllSections();
|
||||
|
||||
// 填充数据
|
||||
this.resultTitle.textContent = data.title || '未知标题';
|
||||
this.resultDescription.textContent = data.description || '暂无描述';
|
||||
this.resultAbstract.textContent = data.abstract || '暂无摘要信息';
|
||||
|
||||
// 处理图片
|
||||
if (data.cover) {
|
||||
this.resultImage.src = data.cover;
|
||||
this.resultImage.style.display = 'block';
|
||||
this.resultImage.onerror = () => {
|
||||
this.resultImage.style.display = 'none';
|
||||
};
|
||||
} else {
|
||||
this.resultImage.style.display = 'none';
|
||||
}
|
||||
|
||||
// 处理链接
|
||||
if (data.link) {
|
||||
this.resultLink.href = data.link;
|
||||
this.resultLink.style.display = 'inline-flex';
|
||||
} else {
|
||||
this.resultLink.style.display = 'none';
|
||||
}
|
||||
|
||||
this.resultCard.style.display = 'block';
|
||||
|
||||
// 滚动到结果区域
|
||||
this.resultCard.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
showError(message) {
|
||||
this.hideAllSections();
|
||||
this.errorText.textContent = message;
|
||||
this.errorMessage.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 隐藏所有区域
|
||||
hideAllSections() {
|
||||
this.loading.style.display = 'none';
|
||||
this.resultCard.style.display = 'none';
|
||||
this.errorMessage.style.display = 'none';
|
||||
this.welcomeMessage.style.display = 'none';
|
||||
}
|
||||
|
||||
// 显示欢迎信息
|
||||
showWelcome() {
|
||||
this.hideAllSections();
|
||||
this.welcomeMessage.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
class Utils {
|
||||
// 防抖函数
|
||||
static debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// 节流函数
|
||||
static throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function() {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => inThrottle = false, limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 格式化文本长度
|
||||
static truncateText(text, maxLength) {
|
||||
if (text.length <= maxLength) {
|
||||
return text;
|
||||
}
|
||||
return text.substring(0, maxLength) + '...';
|
||||
}
|
||||
|
||||
// 检查是否为移动设备
|
||||
static isMobile() {
|
||||
return window.innerWidth <= 768;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化应用
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 初始化应用
|
||||
const app = new BaikeApp();
|
||||
|
||||
// 添加页面可见性变化监听
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
// 页面重新可见时，聚焦搜索框
|
||||
if (!app.isLoading) {
|
||||
app.searchInput.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 添加窗口大小变化监听
|
||||
window.addEventListener('resize', Utils.throttle(() => {
|
||||
// 响应式调整
|
||||
if (Utils.isMobile()) {
|
||||
// 移动端特殊处理
|
||||
document.body.classList.add('mobile');
|
||||
} else {
|
||||
document.body.classList.remove('mobile');
|
||||
}
|
||||
}, 250));
|
||||
|
||||
// 初始检查设备类型
|
||||
if (Utils.isMobile()) {
|
||||
document.body.classList.add('mobile');
|
||||
}
|
||||
|
||||
// 页面加载完成后聚焦搜索框
|
||||
setTimeout(() => {
|
||||
app.searchInput.focus();
|
||||
}, 500);
|
||||
|
||||
// 添加键盘快捷键支持
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl/Cmd + K 聚焦搜索框
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
app.searchInput.focus();
|
||||
app.searchInput.select();
|
||||
}
|
||||
|
||||
// ESC 清空搜索框
|
||||
if (e.key === 'Escape') {
|
||||
app.searchInput.value = '';
|
||||
app.showWelcome();
|
||||
app.searchInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
console.log('百度百科词条查询应用已初始化');
|
||||
});
|
||||
@@ -1,3 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": {
|
||||
"title": "西游记",
|
||||
"description": "明代吴承恩创作的章回体长篇神魔小说",
|
||||
"abstract": "《西游记》又名《西游释厄传》，是中国古代第一部浪漫主义章回体长篇神魔小说。最早的《西游记》版本是明代万历二十年金陵世德堂《新刻出像官板大字西游记》，未署作者姓名。鲁迅、董作宾等人根据《淮安府志》“吴承恩《西游记》”的记载予以最终论定“吴承恩原著”。该小说主要讲述了孙悟空出世，并寻菩提祖师学艺及大闹天宫后，与猪八戒、沙僧和白龙马一同护送唐僧西天取经，于路上历经险阻，降妖除魔，渡过了九九八十一难，成功...",
|
||||
"cover": "https://bkimg.cdn.bcebos.com/pic/b7fd5266d01609248d763e43db0735fae6cd3412?x-bce-process=image/format,f_auto",
|
||||
"has_other": true,
|
||||
"link": "http://baike.baidu.com/subview/2583/5315045.htm"
|
||||
}
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": {
|
||||
"title": "西游记",
|
||||
"description": "明代吴承恩创作的章回体长篇神魔小说",
|
||||
"abstract": "《西游记》又名《西游释厄传》，是中国古代第一部浪漫主义章回体长篇神魔小说。最早的《西游记》版本是明代万历二十年金陵世德堂《新刻出像官板大字西游记》，未署作者姓名。鲁迅、董作宾等人根据《淮安府志》“吴承恩《西游记》”的记载予以最终论定“吴承恩原著”。该小说主要讲述了孙悟空出世，并寻菩提祖师学艺及大闹天宫后，与猪八戒、沙僧和白龙马一同护送唐僧西天取经，于路上历经险阻，降妖除魔，渡过了九九八十一难，成功...",
|
||||
"cover": "https://bkimg.cdn.bcebos.com/pic/b7fd5266d01609248d763e43db0735fae6cd3412?x-bce-process=image/format,f_auto",
|
||||
"has_other": true,
|
||||
"link": "http://baike.baidu.com/subview/2583/5315045.htm"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user