shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新的实用更新

Browse Source
This commit is contained in:
Chance_Li
2025-09-04 14:31:44 +08:00
parent b8456c437a
commit 71a648fdf4
11 changed files with 1071 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/60sapi/实用功能/链接OG信息/index.html
View File

@@ -135,8 +135,8 @@
<div id="og-image" class="info-value url-value">-</div>
</div>
<div class="info-item">
<label>图片尺寸</label>
<div id="og-image-size" class="info-value">-</div>
<label>图片描述</label>
<div id="og-image-alt" class="info-value">-</div>
</div>
</div>
</div>
@@ -161,8 +161,12 @@
<div id="og-locale" class="info-value">-</div>
</div>
<div class="info-item">
<label>字符编码</label>
<div id="og-charset" class="info-value">-</div>
<label>更新时间</label>
<div id="og-updated-time" class="info-value">-</div>
</div>
<div class="info-item">
<label>响应时间</label>
<div id="response-time" class="info-value">-</div>
</div>
</div>
</div>

84
frontend/60sapi/实用功能/链接OG信息/js/script.js
View File

@@ -124,6 +124,7 @@ class OGAnalyzer {
this.currentUrl = url;
this.isAnalyzing = true;
this.startTime = Date.now(); // 记录开始时间
this.showLoading();
this.hideError();
this.hideResults();
@@ -185,23 +186,36 @@ class OGAnalyzer {
const resultsElement = document.getElementById('results');
const ogCard = document.getElementById('og-card');
// 基础信息
this.updateElement('og-title', data.title || '未获取到标题');
this.updateElement('og-description', data.description || '未获取到描述');
this.updateElement('og-url', data.url || this.currentUrl);
this.updateElement('og-site-name', data.site_name || '未知站点');
this.updateElement('og-type', data.type || 'website');
// 检查是否有有效数据 - 放宽检查条件，只要有任何非空字段就显示
const hasValidData = Object.values(data).some(value => {
if (value === null || value === undefined) return false;
if (typeof value === 'string') return value.trim() !== '';
return true; // 其他类型的值都认为是有效的
});
if (!hasValidData) {
this.showError('该链接暂无可获取的OG信息，请检查链接是否正确或稍后重试');
return;
}
// 基础信息 - 只显示有数据的字段
this.updateElementWithVisibility('og-title', data.title, '标题');
this.updateElementWithVisibility('og-description', data.description, '描述');
this.updateElement('og-url', data.url || this.currentUrl); // URL始终显示
this.updateElementWithVisibility('og-site-name', data.site_name, '网站名称');
this.updateElement('og-type', data.type || 'website'); // 类型始终显示
// 媒体信息
this.updateImageElement('og-image', data.image);
this.updateElement('og-image-alt', data.image_alt || '图片描述不可用');
this.updateImageElementWithVisibility('og-image', data.image);
this.updateElementWithVisibility('og-image-alt', data.image_alt, '图片描述');
// 技术信息
this.updateElement('og-locale', data.locale || '未指定');
this.updateElement('og-updated-time', this.formatDate(data.updated_time));
this.updateElement('response-time', `${Date.now() - this.startTime}ms`);
this.updateElementWithVisibility('og-locale', data.locale, '语言');
this.updateElementWithVisibility('og-updated-time', this.formatDate(data.updated_time), '更新时间');
this.updateElement('response-time', `${Date.now() - this.startTime}ms`); // 响应时间始终显示
// 显示结果
resultsElement.style.display = 'block';
resultsElement.classList.add('active');
// 添加动画效果
@@ -219,6 +233,21 @@ class OGAnalyzer {
}
}
updateElementWithVisibility(id, content, fieldName) {
const element = document.getElementById(id);
if (!element) return;
const parentItem = element.closest('.info-item');
if (!parentItem) return;
if (content && content.trim() !== '') {
element.textContent = content;
parentItem.style.display = 'block';
} else {
parentItem.style.display = 'none';
}
}
updateImageElement(id, imageSrc) {
const element = document.getElementById(id);
if (element && imageSrc) {
@@ -240,6 +269,30 @@ class OGAnalyzer {
}
}
updateImageElementWithVisibility(id, imageSrc) {
const element = document.getElementById(id);
const mediaSection = document.querySelector('.media-info');
const mediaPreview = document.getElementById('media-preview');
if (imageSrc && imageSrc.trim() !== '') {
element.textContent = imageSrc;
if (mediaSection) mediaSection.style.display = 'block';
if (mediaPreview) {
mediaPreview.innerHTML = `
<img src="${imageSrc}" alt="OG Image" class="og-preview-image"
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
<div class="no-media" style="display: none;">
<i class="fas fa-image-slash"></i>
<span>图片加载失败</span>
</div>
`;
}
} else {
if (mediaSection) mediaSection.style.display = 'none';
}
}
formatDate(timestamp) {
if (!timestamp) return '未知';
try {
@@ -292,6 +345,7 @@ class OGAnalyzer {
hideResults() {
const resultsElement = document.getElementById('results');
resultsElement.style.display = 'none';
resultsElement.classList.remove('active');
// 重置动画状态
@@ -358,6 +412,7 @@ class OGAnalyzer {
urlInput.value = '';
urlInput.classList.remove('error');
resultsElement.style.display = 'none';
resultsElement.classList.remove('active');
errorElement.classList.remove('active');
@@ -367,6 +422,13 @@ class OGAnalyzer {
this.currentUrl = '';
// 重置所有字段的显示状态
const infoItems = document.querySelectorAll('.info-item');
infoItems.forEach(item => item.style.display = 'block');
const mediaSection = document.querySelector('.media-info');
if (mediaSection) mediaSection.style.display = 'block';
// 重置动画状态
const cards = document.querySelectorAll('.info-card');
cards.forEach(card => card.classList.remove('animate-in'));