把大致框架搭好1

2025-09-02 08:40:37 +08:00
parent 56659d9790
commit b139fb14d9
108 changed files with 25897 additions and 3 deletions
--- a/frontend/60sapi/实用功能/EpicGames免费游戏/css/style.css
+++ b/frontend/60sapi/实用功能/EpicGames免费游戏/css/style.css
@@ -0,0 +1,330 @@
+/* Epic Games 免费游戏 - 淡绿色清新风格样式 */
+
+/* 重置样式 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%);
+    min-height: 100vh;
+    color: #2d5016;
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* 头部 */
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 20px;
+    padding: 24px;
+    box-shadow: 0 8px 25px rgba(45, 80, 22, 0.08);
+    backdrop-filter: blur(10px);
+}
+
+.header h1 {
+    font-size: 2.2rem;
+    color: #2d5016;
+    margin-bottom: 10px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+}
+
+.header p {
+    color: #5a7c65;
+    font-size: 1rem;
+}
+
+/* 统计信息 */
+.stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-bottom: 25px;
+}
+
+.stat-card {
+    background: rgba(255, 255, 255, 0.9);
+    padding: 16px;
+    border-radius: 15px;
+    text-align: center;
+    box-shadow: 0 4px 18px rgba(45, 80, 22, 0.08);
+}
+
+.stat-number {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: #1b5e20;
+    margin-bottom: 5px;
+}
+
+.stat-label {
+    color: #5a7c65;
+    font-size: 0.9rem;
+}
+
+/* 游戏网格 */
+.games-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+/* 游戏卡片 */
+.game-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 18px;
+    overflow: hidden;
+    box-shadow: 0 6px 25px rgba(45, 80, 22, 0.1);
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.game-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 35px rgba(45, 80, 22, 0.15);
+}
+
+.game-cover {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    border-radius: 0;
+}
+
+.game-info {
+    padding: 18px;
+}
+
+.game-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #1b5e20;
+    margin-bottom: 8px;
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.game-description {
+    color: #5a7c65;
+    font-size: 0.9rem;
+    margin-bottom: 12px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+}
+
+.game-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.game-price {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.original-price {
+    color: #81c784;
+    text-decoration: line-through;
+}
+
+.free-price {
+    color: #2e7d32;
+    font-weight: 700;
+}
+
+.game-seller {
+    color: #5a7c65;
+    font-size: 0.85rem;
+}
+
+.game-dates {
+    background: rgba(129, 199, 132, 0.1);
+    padding: 10px;
+    border-radius: 10px;
+    margin-bottom: 12px;
+    font-size: 0.85rem;
+    color: #2d5016;
+}
+
+.free-period {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 4px;
+}
+
+.game-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.btn {
+    flex: 1;
+    background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
+    color: white;
+    border: none;
+    padding: 10px 16px;
+    border-radius: 10px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    box-shadow: 0 4px 12px rgba(129, 199, 132, 0.35);
+    text-decoration: none;
+    text-align: center;
+    display: inline-block;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 18px rgba(129, 199, 132, 0.45);
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #a5d6a7 0%, #81c784 100%);
+}
+
+/* 状态标签 */
+.status-badge {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: white;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+
+.status-free {
+    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+}
+
+.status-upcoming {
+    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+}
+
+/* 加载与错误 */
+.loading, .error {
+    text-align: center;
+    padding: 40px;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 15px;
+    box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08);
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #e8f5e8;
+    border-top: 4px solid #81c784;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 动画 */
+.fade-in {
+    animation: fadeIn 0.6s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* 平板端适配 */
+@media (max-width: 1024px) and (min-width: 768px) {
+    .container { padding: 16px; }
+    .header h1 { font-size: 2rem; }
+    .games-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+}
+
+/* 手机端优化 */
+@media (max-width: 767px) {
+    .container { padding: 12px; }
+    .header { padding: 18px; }
+    .header h1 { font-size: 1.8rem; gap: 8px; }
+    
+    .stats {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 8px;
+    }
+    
+    .stat-card { 
+        padding: 10px 8px;
+        flex: 1;
+        min-width: 0;
+    }
+    .stat-number { font-size: 1.4rem; }
+    .stat-label { font-size: 0.75rem; }
+    
+    .games-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+    
+    .game-card { margin: 0 4px; }
+    .game-cover { height: 160px; }
+    .game-info { padding: 14px; }
+    
+    .game-actions {
+        flex-direction: column;
+    }
+    
+    .btn {
+        width: 100%;
+        padding: 12px;
+    }
+}
+
+/* 小屏手机优化 */
+@media (max-width: 480px) {
+    .stats {
+        grid-template-columns: 1fr;
+    }
+    
+    .game-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+    }
+}
+
+/* 高分辨率显示器优化 */
+@media (min-width: 1400px) {
+    .games-grid {
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    }
+}
--- a/frontend/60sapi/实用功能/EpicGames免费游戏/index.html
+++ b/frontend/60sapi/实用功能/EpicGames免费游戏/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>Epic Games 免费游戏 - 60s API 集合</title>
+  <meta name="description" content="Epic Games 免费游戏列表，数据源自 60s.viki.moe，提供当前免费和即将免费的游戏信息。" />
+  
+  <link rel="stylesheet" href="./css/style.css" />
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <h1>
+        🎮 Epic Games 免费游戏
+      </h1>
+    </header>
+
+    <!-- 加载与错误状态 -->
+    <section id="loading" class="loading">
+      <div class="spinner"></div>
+      <p>正在加载游戏数据，请稍候…</p>
+    </section>
+
+    <section id="error" class="error" style="display: none;">
+      <p>获取数据失败，请稍后重试</p>
+      <button id="refresh-btn" class="btn" style="margin-top: 15px;">重新加载</button>
+    </section>
+
+    <!-- 内容区域 -->
+    <main id="content" style="display: none;" class="fade-in">
+      <!-- 统计信息 -->
+      <div class="stats">
+        <div class="stat-card">
+          <div class="stat-number" id="total-games">0</div>
+          <div class="stat-label">总游戏数</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number" id="free-now">0</div>
+          <div class="stat-label">当前免费</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number" id="upcoming">0</div>
+          <div class="stat-label">即将免费</div>
+        </div>
+      </div>
+
+      <!-- 游戏列表 -->
+      <div class="games-grid" id="games-grid">
+        <!-- 游戏卡片将通过 JavaScript 动态生成 -->
+      </div>
+
+      <!-- 刷新按钮 -->
+      <div style="text-align: center; margin-top: 30px;">
+        <button id="refresh-btn" class="btn btn-secondary">🔄 刷新数据</button>
+      </div>
+    </main>
+  </div>
+
+  <script src="./js/script.js"></script>
+</body>
+</html>
--- a/frontend/60sapi/实用功能/EpicGames免费游戏/js/script.js
+++ b/frontend/60sapi/实用功能/EpicGames免费游戏/js/script.js
@@ -0,0 +1,266 @@
+// Epic Games 免费游戏 页面脚本
+(function () {
+  'use strict';
+
+  const API = {
+    endpoints: [],
+    currentIndex: 0,
+    // 初始化API接口列表
+    async init() {
+      try {
+        const res = await fetch('./接口集合.json');
+        const endpoints = await res.json();
+        this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/epic`);
+      } catch (e) {
+        // 如果无法加载接口集合，使用默认接口
+        this.endpoints = ['https://60s-api.viki.moe/v2/epic'];
+      }
+    },
+    // 获取当前接口URL
+    getCurrentUrl(encoding) {
+      if (this.endpoints.length === 0) return null;
+      const url = new URL(this.endpoints[this.currentIndex]);
+      if (encoding) url.searchParams.set('encoding', encoding);
+      return url.toString();
+    },
+    // 切换到下一个接口
+    switchToNext() {
+      this.currentIndex = (this.currentIndex + 1) % this.endpoints.length;
+      return this.currentIndex < this.endpoints.length;
+    },
+    // 重置到第一个接口
+    reset() {
+      this.currentIndex = 0;
+    }
+  };
+
+  // DOM 元素引用
+  const els = {
+    loading: null,
+    error: null,
+    container: null,
+    gamesGrid: null,
+    totalGames: null,
+    freeNow: null,
+    upcoming: null,
+    refreshBtn: null,
+  };
+
+  function initDom() {
+    els.loading = document.getElementById('loading');
+    els.error = document.getElementById('error');
+    els.container = document.getElementById('content');
+    els.gamesGrid = document.getElementById('games-grid');
+    els.totalGames = document.getElementById('total-games');
+    els.freeNow = document.getElementById('free-now');
+    els.upcoming = document.getElementById('upcoming');
+    els.refreshBtn = document.getElementById('refresh-btn');
+  }
+
+  function showLoading() {
+    els.loading.style.display = 'block';
+    els.error.style.display = 'none';
+    els.container.style.display = 'none';
+  }
+
+  function showError(msg) {
+    els.loading.style.display = 'none';
+    els.error.style.display = 'block';
+    els.container.style.display = 'none';
+    els.error.querySelector('p').textContent = msg || '获取数据失败，请稍后重试';
+  }
+
+  function showContent() {
+    els.loading.style.display = 'none';
+    els.error.style.display = 'none';
+    els.container.style.display = 'block';
+  }
+
+  function safeText(text) {
+    const div = document.createElement('div');
+    div.textContent = text == null ? '' : String(text);
+    return div.innerHTML;
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '';
+    try {
+      const date = new Date(dateStr);
+      return date.toLocaleDateString('zh-CN', {
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    } catch (e) {
+      return dateStr;
+    }
+  }
+
+  async function fetchData(preferLocal = false) {
+    if (preferLocal) {
+      try {
+        const res = await fetch('./返回接口.json', { cache: 'no-store' });
+        const json = await res.json();
+        return json;
+      } catch (e) {
+        throw new Error('本地数据加载失败');
+      }
+    }
+
+    // 重置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 res = await fetch(url, { 
+          cache: 'no-store',
+          timeout: 10000 // 10秒超时
+        });
+        
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        
+        const json = await res.json();
+        
+        if (json && json.code === 200) {
+          console.log(`接口 ${i + 1} 请求成功`);
+          return json;
+        }
+        
+        throw new Error(json && json.message ? json.message : '接口返回异常');
+        
+      } catch (e) {
+        console.warn(`接口 ${i + 1} 失败:`, e.message);
+        
+        // 如果不是最后一个接口，切换到下一个
+        if (i < API.endpoints.length - 1) {
+          API.switchToNext();
+          continue;
+        }
+        
+        // 所有接口都失败了，尝试本地数据
+        console.warn('所有远程接口都失败，尝试本地数据');
+        try {
+          const res = await fetch('./返回接口.json', { cache: 'no-store' });
+          const json = await res.json();
+          return json;
+        } catch (e2) {
+          throw new Error('所有接口和本地数据都无法访问');
+        }
+      }
+    }
+  }
+
+  function createGameCard(game) {
+    const isFree = game.is_free_now;
+    const statusClass = isFree ? 'status-free' : 'status-upcoming';
+    const statusText = isFree ? '限时免费' : '即将免费';
+    
+    return `
+      <div class="game-card fade-in">
+        <div class="status-badge ${statusClass}">${statusText}</div>
+        <img class="game-cover" src="${safeText(game.cover)}" alt="${safeText(game.title)} 封面" loading="lazy" />
+        <div class="game-info">
+          <h3 class="game-title">${safeText(game.title)}</h3>
+          <p class="game-description">${safeText(game.description)}</p>
+          
+          <div class="game-meta">
+            <div class="game-price">
+              <span class="original-price">${safeText(game.original_price_desc)}</span>
+              <span class="free-price">免费</span>
+            </div>
+            <div class="game-seller">${safeText(game.seller)}</div>
+          </div>
+          
+          <div class="game-dates">
+            <div class="free-period">
+              <span>开始：${formatDate(game.free_start)}</span>
+              <span>结束：${formatDate(game.free_end)}</span>
+            </div>
+          </div>
+          
+          <div class="game-actions">
+            <a href="${safeText(game.link)}" target="_blank" class="btn">
+              ${isFree ? '立即领取' : '查看详情'}
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  function updateStats(games) {
+    const total = games.length;
+    const freeNow = games.filter(game => game.is_free_now).length;
+    const upcoming = total - freeNow;
+    
+    els.totalGames.textContent = total;
+    els.freeNow.textContent = freeNow;
+    els.upcoming.textContent = upcoming;
+  }
+
+  function renderGames(games) {
+    if (!Array.isArray(games) || games.length === 0) {
+      els.gamesGrid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #5a7c65;">暂无游戏数据</div>';
+      return;
+    }
+
+    // 按状态排序：免费的在前
+    const sortedGames = [...games].sort((a, b) => {
+      if (a.is_free_now && !b.is_free_now) return -1;
+      if (!a.is_free_now && b.is_free_now) return 1;
+      return 0;
+    });
+
+    const html = sortedGames.map(game => createGameCard(game)).join('');
+    els.gamesGrid.innerHTML = html;
+    
+    updateStats(games);
+  }
+
+  function render(data) {
+    const games = data?.data || [];
+    renderGames(games);
+    showContent();
+  }
+
+  async function load() {
+    showLoading();
+    
+    // 初始化API接口列表
+    await API.init();
+    
+    try {
+      const data = await fetchData(false);
+      render(data);
+    } catch (e) {
+      console.error('数据获取失败：', e);
+      showError(e.message || '获取数据失败，请稍后重试');
+    }
+  }
+
+  function bindEvents() {
+    if (els.refreshBtn) {
+      els.refreshBtn.addEventListener('click', load);
+    }
+    
+    // 快捷键 Ctrl+R 刷新（不拦截浏览器默认刷新）
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.key === 'r' && !e.defaultPrevented) {
+        // 不阻止默认行为，让浏览器正常刷新
+      }
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initDom();
+    bindEvents();
+    load();
+  });
+})();
--- a/frontend/60sapi/实用功能/EpicGames免费游戏/接口集合.json
+++ b/frontend/60sapi/实用功能/EpicGames免费游戏/接口集合.json
@@ -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"
+]
--- a/frontend/60sapi/实用功能/EpicGames免费游戏/返回接口.json
+++ b/frontend/60sapi/实用功能/EpicGames免费游戏/返回接口.json
@@ -0,0 +1,66 @@
+{
+  "code": 200,
+  "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
+  "data": [
+    {
+      "id": "9aa227e2ba294bb1a95c95fde892eb31",
+      "title": "《Totally Reliable Delivery Service》 Standard Edition",
+      "cover": "https://cdn1.epicgames.com/52b90f9a982a404781b189f6a7903226/offer/EGS_TotallyReliableDeliveryService_WereFiveGames_S1-2560x1440-47e6e9562d62705a75ea7b7096d0b8dc.jpg",
+      "original_price": 52,
+      "original_price_desc": "¥52.00",
+      "description": "穿好护腰护具，发动货车，送货的时间到啦！在一个高度互动的沙盒世界中，与最多三位好友一起随意地完成送货。货物已试投，这就是我们靠谱快递（Totally Reliable Delivery Service）的品质保证！",
+      "seller": "Infogrames LLC",
+      "is_free_now": true,
+      "free_start": "2025/08/14 23:00:00",
+      "free_start_at": 1755183600000,
+      "free_end": "2025/08/21 23:00:00",
+      "free_end_at": 1755788400000,
+      "link": "https://store.epicgames.com/store/zh-CN/p/totally-reliable-delivery-service/home"
+    },
+    {
+      "id": "8ea3500dc38e4f429702bf889c172d3d",
+      "title": "Hidden Folks",
+      "cover": "https://cdn1.epicgames.com/spt-assets/7bfd56b0586348dcb139945d9e59f988/hidden-folks-1b7hh.png",
+      "original_price": 47,
+      "original_price_desc": "¥47.00",
+      "description": "Search for hidden folks in hand-drawn, interactive, miniature landscapes. Unfurl tent flaps, cut through bushes, slam doors, and poke some crocodiles! Rooooaaaarrrr!!!!!",
+      "seller": "Adriaan de Jongh",
+      "is_free_now": true,
+      "free_start": "2025/08/14 23:00:00",
+      "free_start_at": 1755183600000,
+      "free_end": "2025/08/21 23:00:00",
+      "free_end_at": 1755788400000,
+      "link": "https://store.epicgames.com/store/zh-CN/p/hidden-folks-239d16"
+    },
+    {
+      "id": "4cbb6c3704d240f19c3dd5f5cb2b0cb4",
+      "title": "Kamaeru",
+      "cover": "https://cdn1.epicgames.com/spt-assets/44313cfbb62b4df5801d0c8d541c2624/kamaeru-40asc.png",
+      "original_price": 62,
+      "original_price_desc": "¥62.00",
+      "description": "Foster a sanctuary for frogs and restore the biodiversity of the wetlands in Kamaeru, a cozy frog collecting game, where you take pictures of frogs, play mini-games and decorate your habitat. Hop right to it!",
+      "seller": "Armor Games Studios",
+      "is_free_now": false,
+      "free_start": "2025/08/21 23:00:00",
+      "free_start_at": 1755788400000,
+      "free_end": "2025/08/28 23:00:00",
+      "free_end_at": 1756393200000,
+      "link": "https://store.epicgames.com/store/zh-CN/p/kamaeru-0c301e"
+    },
+    {
+      "id": "0d9a533f0e684cc18620a8f408e8e72c",
+      "title": "Strange Horticulture",
+      "cover": "https://cdn1.epicgames.com/spt-assets/15e8e3eba65a4763a815d6eae1d763b2/strange-horticulture-offer-2wghv.png",
+      "original_price": 45,
+      "original_price_desc": "¥45.00",
+      "description": "款神秘学解谜游戏，你将扮演当地植物商店的店主，寻找并识别新的植物，悠闲撸猫，与女巫团体交谈，或加入异教。收集各种强大的植物，用它们来影响故事走向，揭开昂德米尔镇的黑暗谜团。",
+      "seller": "Iceberg Interactive",
+      "is_free_now": false,
+      "free_start": "2025/08/21 23:00:00",
+      "free_start_at": 1755788400000,
+      "free_end": "2025/08/28 23:00:00",
+      "free_end_at": 1756393200000,
+      "link": "https://store.epicgames.com/store/zh-CN/p/strange-horticulture-360e80"
+    }
+  ]
+}