优化结果

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/background.css

@@ -0,0 +1,108 @@
+.background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.green-gradient {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        135deg,
+        rgba(0, 132, 255, 0.4) 0%,
+        rgba(0, 132, 255, 0.3) 25%,
+        rgba(0, 132, 255, 0.2) 50%,
+        rgba(0, 132, 255, 0.3) 75%,
+        rgba(0, 132, 255, 0.4) 100%
+    );
+    animation: gradient-flow 20s ease-in-out infinite;
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+}
+
+.green-gradient::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(
+        circle at 30% 70%,
+        rgba(139, 195, 74, 0.4) 0%,
+        transparent 50%
+    ), radial-gradient(
+        circle at 70% 30%,
+        rgba(102, 187, 106, 0.3) 0%,
+        transparent 50%
+    );
+    animation: green-pulse 15s ease-in-out infinite alternate;
+}
+
+@keyframes green-flow {
+    0%, 100% {
+        transform: rotate(0deg) scale(1);
+        opacity: 0.8;
+    }
+    25% {
+        transform: rotate(90deg) scale(1.1);
+        opacity: 0.6;
+    }
+    50% {
+        transform: rotate(180deg) scale(0.9);
+        opacity: 0.9;
+    }
+    75% {
+        transform: rotate(270deg) scale(1.05);
+        opacity: 0.7;
+    }
+}
+
+@keyframes green-pulse {
+    0% {
+        transform: scale(1) rotate(0deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: scale(1.2) rotate(180deg);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1) rotate(360deg);
+        opacity: 0.6;
+    }
+}
+
+/* 手机端背景优化 */
+@media (max-width: 768px) {
+    .green-gradient {
+        animation-duration: 25s;
+    }
+    
+    .green-gradient::before {
+        animation-duration: 18s;
+    }
+}
+
+/* 减少动画以节省电池 */
+@media (prefers-reduced-motion: reduce) {
+    .green-gradient,
+    .green-gradient::before {
+        animation: none;
+    }
+    
+    .green-gradient {
+        background: linear-gradient(
+            135deg,
+            rgba(76, 175, 80, 0.2) 0%,
+            rgba(165, 214, 167, 0.1) 50%,
+            rgba(200, 230, 201, 0.15) 100%
+        );
+    }
+}

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css

@@ -0,0 +1,499 @@
+/* 背景样式 */
+.background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+    background-color: #f8f9fa;
+}
+
+.modern-gradient {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        135deg,
+        rgba(64, 169, 255, 0.4) 0%,
+        rgba(120, 192, 255, 0.3) 25%,
+        rgba(255, 175, 64, 0.2) 50%,
+        rgba(255, 140, 50, 0.3) 75%,
+        rgba(255, 122, 69, 0.4) 100%
+    );
+    animation: gradient-flow 20s ease-in-out infinite;
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+}
+
+.modern-gradient::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(
+        circle at 30% 70%,
+        rgba(64, 169, 255, 0.5) 0%,
+        transparent 50%
+    ), radial-gradient(
+        circle at 70% 30%,
+        rgba(255, 140, 50, 0.4) 0%,
+        transparent 50%
+    );
+    animation: pulse-effect 15s ease-in-out infinite alternate;
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+}
+
+@keyframes gradient-flow {
+    0%, 100% {
+        transform: rotate(0deg) scale(1);
+        opacity: 0.8;
+    }
+    25% {
+        transform: rotate(90deg) scale(1.1);
+        opacity: 0.6;
+    }
+    50% {
+        transform: rotate(180deg) scale(0.9);
+        opacity: 0.9;
+    }
+    75% {
+        transform: rotate(270deg) scale(1.05);
+        opacity: 0.7;
+    }
+}
+
+@keyframes pulse-effect {
+    0% {
+        transform: scale(1) rotate(0deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: scale(1.2) rotate(180deg);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1) rotate(360deg);
+        opacity: 0.6;
+    }
+}
+
+/* 主样式 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    color: #333;
+    background-color: #f8f9fa;
+    position: relative;
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 24px;
+    position: relative;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.85);
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    backdrop-filter: blur(10px);
+}
+
+header {
+    text-align: center;
+    margin-bottom: 28px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+header h1 {
+    background: linear-gradient(135deg, #4096ff, #ff7a45);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin-bottom: 14px;
+    font-size: 2.4rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+.update-time {
+    color: #666;
+    font-size: 0.9rem;
+    background-color: rgba(0, 0, 0, 0.03);
+    padding: 8px 16px;
+    border-radius: 24px;
+    display: inline-block;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.hot-list {
+    list-style: none;
+}
+
+.hot-item {
+    padding: 20px;
+    margin-bottom: 16px;
+    border-radius: 12px;
+    background-color: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+.hot-item:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+    border-color: rgba(64, 169, 255, 0.3);
+}
+
+.hot-rank {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #4096ff;
+    margin-right: 18px;
+    min-width: 38px;
+    text-align: center;
+    background-color: rgba(64, 169, 255, 0.1);
+    border-radius: 50%;
+    width: 38px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hot-rank.top-1 {
+    background: linear-gradient(135deg, #ff4d4f, #ff7a45);
+    color: white;
+}
+
+.hot-rank.top-2 {
+    background: linear-gradient(135deg, #ff7a45, #ffa940);
+    color: white;
+}
+
+.hot-rank.top-3 {
+    background: linear-gradient(135deg, #ffa940, #ffec3d);
+    color: white;
+}
+
+.hot-content {
+    flex: 1;
+}
+
+.hot-title {
+    font-size: 1.15rem;
+    margin-bottom: 8px;
+    color: #333;
+    text-decoration: none;
+    display: block;
+    line-height: 1.5;
+    font-weight: 500;
+    transition: color 0.2s ease;
+}
+
+.hot-title:hover {
+    color: #4096ff;
+    text-decoration: none;
+}
+
+.loading {
+    text-align: center;
+    padding: 40px;
+    color: #666;
+    font-size: 1.1rem;
+}
+
+footer {
+    text-align: center;
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    color: #666;
+    font-size: 0.9rem;
+}
+
+/* 新增样式 */
+.topic-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    width: 100%;
+}
+
+/* 短内容时的布局 - 图片在右侧 */
+.topic-header.short-content {
+    flex-direction: row;
+}
+
+/* 长内容时的布局 - 图片在下方 */
+.topic-header.long-content {
+    flex-direction: column;
+}
+
+.topic-rank {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #4096ff;
+    margin-right: 16px;
+    min-width: 36px;
+    text-align: center;
+    background-color: rgba(64, 169, 255, 0.1);
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.topic-rank.top-1 {
+    background: linear-gradient(135deg, #ff4d4f, #ff7a45);
+    color: white;
+}
+
+.topic-rank.top-2 {
+    background: linear-gradient(135deg, #ff7a45, #ffa940);
+    color: white;
+}
+
+.topic-rank.top-3 {
+    background: linear-gradient(135deg, #ffa940, #ffec3d);
+    color: white;
+}
+
+.topic-content {
+    flex: 1;
+    padding-right: 16px;
+}
+
+.topic-title {
+    font-size: 1.15rem;
+    margin-bottom: 8px;
+    color: #333;
+    text-decoration: none;
+    display: block;
+    line-height: 1.5;
+    font-weight: 600;
+    transition: color 0.2s ease;
+}
+
+.topic-title:hover {
+    color: #4096ff;
+}
+
+.topic-detail {
+    color: #666;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-bottom: 10px;
+    text-align: justify;
+    text-indent: 2em;
+}
+
+.topic-stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 8px;
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+}
+
+.hot-value {
+    color: #ff4d4f;
+    font-weight: 500;
+}
+
+/* 短内容时的图片样式 - 在右侧 */
+.short-content .topic-cover {
+    width: 120px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    align-self: center;
+    margin-left: auto;
+}
+
+/* 长内容时的图片样式 - 在下方 */
+.long-content .topic-cover {
+    width: 100%;
+    height: auto;
+    max-height: none;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 12px;
+    margin-left: 0;
+    margin-bottom: 8px;
+}
+
+.topic-item {
+    padding: 20px;
+    margin-bottom: 16px;
+    border-radius: 12px;
+    background-color: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s ease;
+    border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+.topic-item:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+    border-color: rgba(64, 169, 255, 0.3);
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) and (min-width: 768px) {
+    .container {
+        max-width: 90%;
+        padding: 20px;
+    }
+    
+    header h1 {
+        font-size: 2.2rem;
+    }
+    
+    .topic-item {
+        padding: 18px;
+    }
+    
+    .topic-title {
+        font-size: 1.1rem;
+    }
+    
+    .topic-cover {
+        width: 100px;
+        height: 70px;
+    }
+}
+
+@media (max-width: 768px) {
+    body {
+        background-color: #f8f9fa;
+    }
+    
+    .container {
+        max-width: 95%;
+        margin: 12px auto;
+        padding: 16px;
+        border-radius: 12px;
+    }
+    
+    header {
+        margin-bottom: 20px;
+        padding-bottom: 16px;
+    }
+    
+    header h1 {
+        font-size: 1.8rem;
+        margin-bottom: 10px;
+    }
+    
+    .update-time {
+        font-size: 0.85rem;
+        padding: 6px 12px;
+    }
+    
+    .topic-item {
+        padding: 16px;
+        margin-bottom: 12px;
+        border-radius: 10px;
+    }
+    
+    .topic-rank {
+        font-size: 1.1rem;
+        margin-right: 14px;
+        min-width: 32px;
+        width: 32px;
+        height: 32px;
+    }
+    
+    .topic-title {
+        font-size: 1rem;
+        line-height: 1.5;
+        margin-bottom: 6px;
+    }
+    
+    .topic-cover {
+        width: 90px;
+        height: 65px;
+    }
+    
+    footer {
+        margin-top: 24px;
+        padding-top: 16px;
+        font-size: 0.85rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        margin: 8px auto;
+        padding: 14px;
+    }
+    
+    header h1 {
+        font-size: 1.6rem;
+    }
+    
+    .topic-item {
+        padding: 14px;
+        margin-bottom: 10px;
+    }
+    
+    .topic-rank {
+        font-size: 1rem;
+        margin-right: 12px;
+        min-width: 30px;
+        width: 30px;
+        height: 30px;
+    }
+    
+    .topic-title {
+        font-size: 0.95rem;
+    }
+    
+    .topic-cover {
+        width: 80px;
+        height: 60px;
+    }
+}
+
+/* 减少动画以节省电池 */
+@media (prefers-reduced-motion: reduce) {
+    .modern-gradient,
+    .modern-gradient::before {
+        animation: none;
+    }
+    
+    .modern-gradient {
+        background: linear-gradient(
+            135deg,
+            rgba(64, 169, 255, 0.3) 0%,
+            rgba(255, 175, 64, 0.2) 50%,
+            rgba(255, 122, 69, 0.25) 100%
+        );
+    }
+}

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/img/zhihu-logo.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+  <path d="M53.29,80.035l7.32.002 2.41 8.24 13.128-8.24h15.477v-67.98H53.29v67.978zM46.2,80.035v-67.98H7.065V80.035H46.2z" fill="#0084FF"/>
+  <path d="M46.2,80.035v-67.98H7.065V80.035H46.2z" fill="#0084FF"/>
+  <path d="M60.61,26.48H40.11c0-6.505,1.76-14.58,8.04-14.58V5.88H30.79c0,4.44-3.6,20.32-11.21,19.77v6.505h12.93v49.4H16.09v6.56h54.13v-6.56H53.75v-49.4h6.86V26.48z" fill="#FFF"/>
+</svg>

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/index.html

@@ -0,0 +1,34 @@
+<!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/style.css">
+    <link rel="stylesheet" href="./css/background.css">
+</head>
+<body>
+    <div class="background-container">
+        <div class="green-gradient"></div>
+    </div>
+    
+    <div class="container">
+        <header>
+            <h1>知乎热门话题</h1>
+            <div class="update-time" id="updateTime"></div>
+        </header>
+        
+        <main>
+            <div class="topic-list" id="topicList">
+                <div class="loading">加载中...</div>
+            </div>
+        </main>
+        
+        <footer>
+            <p>数据来源于知乎热门话题</p>
+        </footer>
+    </div>
+    
+    <script src="./js/main.js"></script>
+</body>
+</html>

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/js/main.js

@@ -0,0 +1,159 @@
+// API接口列表
+const API_ENDPOINTS = [
+    "https://60s.api.shumengya.top/v2/zhihu",
+];
+
+// 当前使用的API索引
+let currentApiIndex = 0;
+
+// DOM元素
+const topicListElement = document.getElementById('topicList');
+const updateTimeElement = document.getElementById('updateTime');
+
+// 格式化时间
+function formatDate(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+// 格式化数字
+function formatNumber(num) {
+    if (num >= 10000) {
+        return (num / 10000).toFixed(1) + '万';
+    }
+    return num.toString();
+}
+
+// 渲染话题列表
+function renderTopicList(data) {
+    topicListElement.innerHTML = '';
+    
+    data.forEach((item, index) => {
+        const topicItem = document.createElement('div');
+        topicItem.className = 'topic-item';
+        
+        const rankClass = index < 3 ? `top-${index + 1}` : '';
+        
+        // 处理封面图片
+        const coverImg = item.cover ? 
+            `<img src="${item.cover}" alt="话题封面" class="topic-cover" onerror="this.style.display='none'">` : '';
+        
+        // 判断文本内容长度，决定图片位置
+        // 如果detail存在且长度较长，或者没有detail但标题较长，则图片放在下方
+        const detailLength = item.detail ? item.detail.length : 0;
+        const titleLength = item.title ? item.title.length : 0;
+        const isLongContent = detailLength > 100 || (detailLength === 0 && titleLength > 30);
+        
+        // 根据内容长度决定布局类名
+        const layoutClass = isLongContent ? 'long-content' : 'short-content';
+        
+        topicItem.innerHTML = `
+            <div class="topic-header ${layoutClass}">
+                <div class="topic-rank ${rankClass}">${index + 1}</div>
+                <div class="topic-content">
+                    <a href="${item.link}" class="topic-title" target="_blank">🔥 ${item.title}</a>
+                    ${item.detail ? `<div class="topic-detail">${item.detail}</div>` : ''}
+                    <div class="topic-stats">
+                        ${item.hot_value_desc ? `<div class="stat-item"><span class="hot-value">🔥 ${item.hot_value_desc}</span></div>` : ''}
+                        ${item.answer_cnt ? `<div class="stat-item">💬 ${formatNumber(item.answer_cnt)} 回答</div>` : ''}
+                        ${item.follower_cnt ? `<div class="stat-item">👥 ${formatNumber(item.follower_cnt)} 关注</div>` : ''}
+                    </div>
+                </div>
+                ${coverImg}
+            </div>`;
+        
+        topicListElement.appendChild(topicItem);
+    });
+    
+    // 更新时间
+    updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
+}
+
+// 显示加载状态
+function showLoading() {
+    topicListElement.innerHTML = '<div class="loading">加载中...</div>';
+}
+
+// 显示错误状态
+function showError(message) {
+    topicListElement.innerHTML = `<div class="loading">${message}</div>`;
+}
+
+// 获取知乎热门话题数据
+async function fetchZhihuTopics() {
+    showLoading();
+    
+    try {
+        const response = await fetch(API_ENDPOINTS[currentApiIndex]);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const result = await response.json();
+        
+        if (result.code === 200 && result.data && Array.isArray(result.data)) {
+            if (result.data.length > 0) {
+                renderTopicList(result.data);
+            } else {
+                showError('暂无热门话题数据');
+            }
+        } else {
+            throw new Error('数据格式错误或无数据');
+        }
+    } catch (error) {
+        console.error('获取数据失败:', error);
+        
+        // 尝试切换到下一个API
+        const nextApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
+        
+        if (nextApiIndex !== 0) {
+            // 还有其他API可以尝试
+            currentApiIndex = nextApiIndex;
+            showError('获取数据失败，正在尝试其他接口...');
+            
+            // 延迟后重试
+            setTimeout(fetchZhihuTopics, 2000);
+        } else {
+            // 所有API都尝试过了
+            currentApiIndex = 0;
+            showError('所有接口都无法访问，请稍后再试');
+        }
+    }
+}
+
+// 手动刷新数据
+function refreshData() {
+    currentApiIndex = 0; // 重置API索引
+    fetchZhihuTopics();
+}
+
+// 页面加载完成后获取数据
+document.addEventListener('DOMContentLoaded', () => {
+    fetchZhihuTopics();
+    
+    // 每隔5分钟刷新一次数据
+    setInterval(fetchZhihuTopics, 5 * 60 * 1000);
+    
+    // 添加键盘快捷键支持（按R键刷新）
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'r' || event.key === 'R') {
+            event.preventDefault();
+            refreshData();
+        }
+    });
+});
+
+// 页面可见性变化时的处理
+document.addEventListener('visibilitychange', () => {
+    if (!document.hidden) {
+        // 页面重新可见时刷新数据
+        refreshData();
+    }
+});

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/接口集合.json

@@ -0,0 +1,3 @@
+[
+    "https://60s.api.shumengya.top"
+]

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/返回接口.json

@@ -0,0 +1,30 @@
+{
+  "code": 200,
+  "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
+  "data": [
+    {
+      "title": "你是什么时候意识到抗日战争很艰难的？",
+      "detail": "就不像抗日神剧",
+      "cover": "https://picx.zhimg.com/v2-a07a53b2e23887c7a2440cc3f1984122.png",
+      "hot_value_desc": "1311 万热度",
+      "answer_cnt": 739,
+      "follower_cnt": 1739,
+      "comment_cnt": 0,
+      "created_at": 1622774952000,
+      "created": "2021/06/04 10:49:12",
+      "link": "https://api.zhihu.com/questions/463076881"
+    },
+    {
+      "title": "为什么中国在很多领域都要求自主研发？",
+      "detail": "中国在很多领域都要求自主研发，似乎确认很多东西都有个中国版本，真有这个必要吗？",
+      "cover": "https://pic3.zhimg.com/80/v2-bb4dfa56f138980078da003df436e661_hd.png",
+      "hot_value_desc": "816 万热度",
+      "answer_cnt": 2476,
+      "follower_cnt": 12545,
+      "comment_cnt": 0,
+      "created_at": 1352205751000,
+      "created": "2012/11/06 20:42:31",
+      "link": "https://api.zhihu.com/questions/20579464"
+    }
+  ]
+}