320 lines
9.2 KiB
JavaScript
320 lines
9.2 KiB
JavaScript
// 百度百科词条查询应用
|
||
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('百度百科词条查询应用已初始化');
|
||
}); |