// ==UserScript== // @name Steam 徽章卡片视图 Pro // @namespace https://github.com/steam-badges-card-view // @version 1.3.4 // @description 将Steam徽章页面改为卡片网格展示，支持社区市场价格、徽章价值分析、未解锁徽章预览、智能分析浮窗、可合卡勋章标记、全部卡牌游戏列表（含最大徽章等级）、鉴赏家推荐聚合。v1.3.4: 修复分组视图卡牌图片模糊问题(市场卡牌iconUrl从64fx64f升级为256fx256f、徽章页cardImgs提取时统一调用upgradeCardImageUrl升级到高分辨率)。v1.3.3: 修复SBC_COVER_PLACEHOLDER单引号导致SyntaxError、Steam游戏库页面迁移React后rgGames提取失败改用dynamicstore/userdata API、鉴赏家API失效优雅降级。更新日志见脚本目录 README。 // @author SmallRob // @match https://steamcommunity.com/id/*/badges* // @match https://steamcommunity.com/profiles/*/badges* // @match https://store.steampowered.com/curator/* // @include https://store.steampowered.com/curator/* // @icon https://store.steampowered.com/favicon.ico // @connect steamcommunity.com // @connect steamcardexchange.net // @connect store.steampowered.com // @connect api.steampowered.com // @connect steampowered.com // @connect cdn.cloudflare.steamstatic.com // @grant GM_addStyle // @grant GM_registerMenuCommand // @grant GM_setValue // @grant GM_getValue // @grant GM_xmlhttpRequest // @run-at document-idle // @license MIT // ==/UserScript== (function () { 'use strict'; // ============================================================ // 配置 // ============================================================ const CONFIG = { CARDS_PER_PAGE: 48, DEBOUNCE_DELAY: 300, MARKET_CACHE_TTL: 10 * 60 * 1000, MARKET_REQUEST_DELAY: 450, // v1.2.10: 600ms → 450ms(并发 3→4 后放慢些避免被限流) MARKET_REQUEST_CONCURRENCY: 4, // v1.2.10: 3 → 4 // v1.2.10: 性能优化 MARKET_RERENDER_THROTTLE_MS: 120, // 局部重渲染节流(rAF 兜底) MARKET_PAGE_START_DELAY: 250, // 页面渲染完成后等 250ms 再后台启动价格加载 MARKET_RESUME_KEY: 'sbc_market_resume_v1', // 断点续传存储键 MARKET_MAX_CONSECUTIVE_FAILS: 6, // 连续失败次数超过则暂停 30s 避免被限流 MARKET_FAIL_COOLDOWN_MS: 30 * 1000, // v1.2.14: 卡牌抓取增强(参考 steam-store-card-prices) MARKET_QUERY_FOIL_CARDS: true, // 是否同时抓取闪卡(tag_cardborder_1) MARKET_QUERY_BUY_ORDERS: false, // 是否抓取求购价(需额外请求挂单页,默认关闭避免限流;详情浮窗按需触发) MARKET_BUY_ORDER_CONCURRENCY: 3, // 求购价并发数 MARKET_BUY_ORDER_RETRY: 1, // 求购价失败重试次数 MARKET_BUY_ORDER_RETRY_DELAY: 600, // 求购价重试间隔(ms) STEAM_TRANSACTION_FEE_PERCENT: 0.05, // Steam 交易手续费(5%) DEFAULT_PUBLISHER_FEE_PERCENT: 0.10, // 默认游戏发行商手续费(10%) // v1.2.1: SteamCardExchange 卡牌数据库 CARD_DB_API: 'https://www.steamcardexchange.net/api/request.php?GetInventory', CARD_DB_CACHE_KEY: 'sbc_card_db_cache', CARD_DB_CACHE_TTL: 24 * 60 * 60 * 1000, // 24小时 VALUE_SCORE_WEIGHTS: { // v1.2.2: 重构价值评分权重，引入升级潜力与性价比维度 // 升级潜力（核心修复：基于游戏最大等级，Lv.3/Max15 > Lv.3/Max5） upgradePotential: 0.28, // 经验值（绝对归一化，避免与等级重复计权） xp: 0.18, // 卡牌成本（低成本=高性价比合卡） cardPrice: 0.18, // 性价比（每元 XP，高 XP 低成本优先） costEfficiency: 0.12, // 卡牌收集进度（接近完成的沉没成本激励） completionBonus: 0.12, // 剩余掉落（即时可行动奖励） dropBonus: 0.12, }, // v1.2.2: 卡牌均价半饱和点（分），用于 cardPriceScore 平滑曲线 CARD_PRICE_HALF_SAT: 80, // v1.2.2: 性能比归一化基准（XP/分），用于 costEfficiencyScore COST_EFFICIENCY_BENCH: 5, // v1.2.2: 升级潜力公式权重（剩余空间 vs 已完成激励） UPGRADE_POTENTIAL_REMAIN_WEIGHT: 0.65, UPGRADE_POTENTIAL_DONE_WEIGHT: 0.35, // v1.2.3: 游戏徽章合成上限 GAME_BADGE_MAX_LEVEL: 5, // 普通合成最高等级 FOIL_BADGE_MAX_LEVEL: 1, // 闪卡合成最高等级 // v1.2.13: 事件/季节徽章识别（Steam 事件 appId 通常 > 300 万） EVENT_APPID_THRESHOLD: 3000000, EVENT_KEYWORDS: [ 'Summer Sale', 'Summer Collection', 'Summer Mini', 'Winter Sale', 'Winter Collection', 'Winter Mini', 'Autumn Sale', 'Autumn Collection', 'Halloween', 'Lunar New Year', 'Spring Cleaning', 'Steam Awards', 'Steam Replay', 'Steam Next Fest', 'Steam Cup', 'Clorthax', 'Paradox Party', 'The Great Steam', ], // v1.2.4: 统一游戏视图配置 UNIFIED_VIEW: { DEFAULT_TAB: 'all', // 默认分类: all/ready/progress/locked/maxed SHOW_FOIL_DETAIL: true, // 是否在展开面板中显示闪卡 COLLAPSE_BY_DEFAULT: false // 展开面板默认是否折叠 }, // v1.2.12: 活动勋章图标 CDN 基础 URL ACTIVITY_ICON_CDN: 'https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/items/', // v1.2.16: 鉴赏家推荐聚合配置 CURATOR_CACHE_TTL: 12 * 60 * 60 * 1000, // 鉴赏家推荐缓存 12 小时 CURATOR_REQUEST_CONCURRENCY: 3, // 3 个并发 worker CURATOR_REQUEST_DELAY: 1000, // 请求间隔 1 秒 CURATOR_LIST_COUNT: 50, // 单次拉取推荐列表数量 CURATOR_BADGE_PAGE_MAX_APPS: 120, // 徽章页聚合维度最多拉取的游戏数(避免 API 过载) CURATOR_TOP_N: 5, // TOP N 展示数 // v1.3.1: 性能与 UI 交互增强配置 LAZY_IMG_ROOT_MARGIN: '200px', // IntersectionObserver 预加载距离 LAZY_IMG_THRESHOLD: 0.01, // 触发懒加载的可见比例阈值 CARD_RENDER_BATCH_SIZE: 12, // rAF 批量渲染每帧卡片数 VIEW_TRANSITION_MS: 280, // 视图切换过渡动画时长(ms) SCROLL_TO_TOP_OFFSET: 80, // 翻页后滚动停留位置(距顶部偏移) TOAST_STACK_GAP: 8, // Toast 堆叠间距(px) TOAST_DEFAULT_DURATION: 2800, // Toast 默认显示时长(ms) // v1.3.1 R2: 智能并发池与网络优化（参考 sglv-core.lib.js 最佳实践） CONCURRENT_POOL_MAX_RETRY: 2, // 并发池单任务最大重试次数 CONCURRENT_POOL_BACKOFF_1: 1000, // 第一次重试退避(ms) CONCURRENT_POOL_BACKOFF_2: 2000, // 第二次重试退避(ms) CONCURRENT_POOL_MIN_CONCURRENCY: 3, // 429 降并发下限 CONCURRENT_POOL_DECREASE_RATIO: 0.7, // 429 降并发比例 NEG_CACHE_TTL: 30 * 60 * 1000, // 负缓存 TTL(30 分钟) GM_FETCH_DEFAULT_TIMEOUT: 15000, // GM_xmlhttpRequest 默认超时(ms) GM_FETCH_DEFAULT_RETRIES: 2, // GM_xmlhttpRequest 默认重试次数 // v1.3.1 R2: 多 CDN 回退链 CDN_CHAIN: [ 'https://cdn.cloudflare.steamstatic.com/steam/apps/', 'https://cdn.akamai.steamstatic.com/steam/apps/', 'https://shared.cloudflare.steamstatic.com/steam/apps/', ], // v1.3.1 R2: 缓存版本控制 MARKET_CACHE_VERSION: 2, // 市场缓存结构版本 CARD_DB_CACHE_VERSION: 2, // 卡牌数据库缓存结构版本 }; // ============================================================ // v1.2.3: Steam 活动勋章静态数据库 // 数据来源: SteamDB (https://steamdb.info/badges/) // 用于全量对比用户是否获取到所有活动勋章（含绝版/限定） // appId: 卡牌类活动勋章的应用ID（在 /gamecards/ URL 中出现） // badgeId: 非卡牌类特殊勋章的 badge_type ID // maxLevel: -1 表示无上限, 0 表示未知 // isRetired: 是否已绝版（无法再获取/合成） // ============================================================ const STEAM_ACTIVITY_BADGES = [ // ---- 2026 ---- { name: 'Summer Sale 2026', appId: '4761370', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: false, year: 2026, season: 'summer' }, { name: 'Summer Collection 2026', appId: '4844660', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: false, year: 2026, season: 'summer' }, // ---- 2025 ---- { name: 'Winter Sale 2025', appId: '3558940', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2025, season: 'winter' }, { name: 'Winter Collection 2025', appId: '4228010', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2025, season: 'winter' }, { name: 'Steam Awards Nomination Committee 2025', badgeId: 70, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2025, season: 'awards' }, { name: 'Steam Replay 2025', badgeId: 69, type: 'replay', maxLevel: 1, hasFoil: false, isRetired: true, year: 2025, season: 'special' }, { name: 'Summer Sale 2025', appId: '3558920', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2025, season: 'summer' }, { name: 'Summer Collection 2025', appId: '3812610', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2025, season: 'summer' }, // ---- 2024 ---- { name: 'Winter Collection 2024', appId: '3412320', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2024, season: 'winter' }, { name: 'Winter Sale 2024', appId: '2861720', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2024, season: 'winter' }, { name: 'Steam Replay 2024', badgeId: 68, type: 'replay', maxLevel: 1, hasFoil: false, isRetired: true, year: 2024, season: 'special' }, { name: 'Steam Awards Nomination Committee 2024', badgeId: 67, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2024, season: 'awards' }, { name: 'Summer Sale 2024', appId: '2861690', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2024, season: 'summer' }, { name: 'Summer Collection 2024', appId: '3027110', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2024, season: 'summer' }, // ---- 2023 ---- { name: 'Winter Sale 2023', appId: '2640280', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2023, season: 'winter' }, { name: 'Winter Collection 2023', appId: '2750340', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2023, season: 'winter' }, { name: 'Steam Replay 2023', badgeId: 66, type: 'replay', maxLevel: 1, hasFoil: false, isRetired: true, year: 2023, season: 'special' }, { name: 'Steam Awards Nomination Committee 2023', badgeId: 65, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2023, season: 'awards' }, { name: 'Summer Sale 2023', appId: '2459330', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2023, season: 'summer' }, { name: 'Summer Collection 2023', appId: '2460510', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2023, season: 'summer' }, // ---- 2022 ---- { name: 'Steam Replay 2022', badgeId: 64, type: 'replay', maxLevel: 1, hasFoil: false, isRetired: true, year: 2022, season: 'special' }, { name: 'Steam Awards 2022', appId: '2243720', type: 'awards', maxLevel: -1, hasFoil: true, isRetired: true, year: 2022, season: 'awards' }, { name: 'Winter Collection 2022', appId: '2243810', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2022, season: 'winter' }, { name: 'Steam Awards Nomination Committee 2022', badgeId: 63, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2022, season: 'awards' }, { name: 'Steam Next Fest October 2022', badgeId: 62, type: 'event', maxLevel: 6, hasFoil: false, isRetired: true, year: 2022, season: 'special' }, { name: 'Summer Sale 2022', appId: '2021850', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2022, season: 'summer' }, { name: "Clorthax's Paradox Party 2022", badgeId: 61, type: 'event', maxLevel: 10, hasFoil: false, isRetired: true, year: 2022, season: 'special' }, { name: 'Summer Collection 2022', appId: '2055870', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2022, season: 'summer' }, { name: 'Steam Next Fest June 2022', badgeId: 60, type: 'event', maxLevel: -1, hasFoil: false, isRetired: true, year: 2022, season: 'special' }, { name: '2022 Steam Cup', badgeId: 59, type: 'event', maxLevel: 1, hasFoil: false, isRetired: true, year: 2022, season: 'special' }, // ---- 2021 ---- { name: 'Steam Awards 2021', appId: '1797760', type: 'awards', maxLevel: -1, hasFoil: true, isRetired: true, year: 2021, season: 'awards' }, { name: 'Winter Sale 2021', appId: '1846860', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2021, season: 'winter' }, { name: 'Steam Awards Nomination Committee 2021', badgeId: 56, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2021, season: 'awards' }, { name: 'Steam Awards Nomination Committee 2021 Classic', badgeId: 57, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2021, season: 'awards' }, { name: 'Summer Collection 2021', appId: '1659580', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2021, season: 'summer' }, { name: 'The Masked Avenger', badgeId: 51, type: 'event', maxLevel: 1, hasFoil: false, isRetired: true, year: 2021, season: 'special' }, { name: 'The Trailblazing Explorer', badgeId: 52, type: 'event', maxLevel: 1, hasFoil: false, isRetired: true, year: 2021, season: 'special' }, { name: 'The Gorilla Scientist', badgeId: 53, type: 'event', maxLevel: 1, hasFoil: false, isRetired: true, year: 2021, season: 'special' }, { name: 'The Paranormal Professor', badgeId: 54, type: 'event', maxLevel: 1, hasFoil: false, isRetired: true, year: 2021, season: 'special' }, { name: 'The Ghost Detective', badgeId: 55, type: 'event', maxLevel: 1, hasFoil: false, isRetired: true, year: 2021, season: 'special' }, { name: 'Summer Sale 2021', appId: '1658760', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2021, season: 'summer' }, { name: 'Spring Collection 2021', appId: '1615900', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2021, season: 'spring' }, // ---- 2020 ---- { name: 'Winter Sale 2020', appId: '1465680', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2020, season: 'winter' }, { name: 'Winter Collection 2020', appId: '1492660', type: 'collection', maxLevel: 40, hasFoil: false, isRetired: true, year: 2020, season: 'winter' }, { name: 'Steam Awards Nomination Committee 2020', badgeId: 50, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2020, season: 'awards' }, { name: 'Community Contributor', badgeId: 48, type: 'community', maxLevel: -1, hasFoil: false, isRetired: true, year: 2020, season: 'special' }, { name: 'Community Patron', badgeId: 49, type: 'community', maxLevel: -1, hasFoil: false, isRetired: true, year: 2020, season: 'special' }, { name: 'Summer Sale 2020', appId: '1343890', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2020, season: 'summer' }, // ---- 2019 ---- { name: 'Winter Sale 2019', appId: '1264260', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2019, season: 'winter' }, { name: 'Steam Grand Prix 2019', badgeId: 45, type: 'event', maxLevel: -1, hasFoil: false, isRetired: true, year: 2019, season: 'summer' }, { name: 'Steam Awards Nomination Committee 2019', badgeId: 47, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2019, season: 'awards' }, { name: 'Lunar New Year Sale 2019', appId: '1264280', type: 'sale', maxLevel: -1, hasFoil: false, isRetired: true, year: 2019, season: 'lunar' }, // ---- 2018 ---- { name: 'Winter Sale 2018', appId: '1264290', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2018, season: 'winter' }, { name: 'Steam Awards Nomination Committee 2018', badgeId: 44, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2018, season: 'awards' }, { name: 'Summer Sale 2018', appId: '1264300', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2018, season: 'summer' }, { name: 'Lunar New Year Sale 2018', appId: '1264310', type: 'sale', maxLevel: -1, hasFoil: false, isRetired: true, year: 2018, season: 'lunar' }, // ---- 2017 ---- { name: 'Winter Sale 2017', appId: '1264320', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2017, season: 'winter' }, { name: 'Steam Awards 2017', appId: '1264340', type: 'awards', maxLevel: -1, hasFoil: true, isRetired: true, year: 2017, season: 'awards' }, { name: 'Steam Awards Nomination Committee 2017', badgeId: 43, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2017, season: 'awards' }, { name: 'Summer Sale 2017', appId: '1264330', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2017, season: 'summer' }, // ---- 2016 ---- { name: 'Winter Sale 2016', appId: '1264350', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2016, season: 'winter' }, { name: 'Steam Awards Nomination Committee 2016', badgeId: 42, type: 'nomination', maxLevel: 4, hasFoil: false, isRetired: true, year: 2016, season: 'awards' }, { name: 'Summer Sale 2016', appId: '1264360', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2016, season: 'summer' }, // ---- 2015 ---- { name: 'Winter Sale 2015', appId: '1264370', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2015, season: 'winter' }, { name: 'Summer Sale 2015', appId: '1264380', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2015, season: 'summer' }, // ---- 2014 ---- { name: 'Winter Sale 2014', appId: '1264390', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2014, season: 'winter' }, { name: 'Summer Sale 2014', appId: '1264400', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2014, season: 'summer' }, // ---- 2013 ---- { name: 'Winter Sale 2013', appId: '1264410', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2013, season: 'winter' }, { name: 'Summer Sale 2013', appId: '1264420', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2013, season: 'summer' }, // ---- 2012 ---- { name: 'Winter Sale 2012', appId: '1264430', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2012, season: 'winter' }, { name: 'Summer Sale 2012', appId: '1264440', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2012, season: 'summer' }, // ---- 2011 ---- { name: 'Winter Sale 2011', appId: '1264450', type: 'sale', maxLevel: -1, hasFoil: true, isRetired: true, year: 2011, season: 'winter' }, { name: 'Summer Sale 2011', appId: '1264460', type: 'sale', maxLevel: -1, hasFoil: false, isRetired: true, year: 2011, season: 'summer' }, // ---- 社区/特殊勋章 ---- { name: 'Years of Service', badgeId: 1, type: 'community', maxLevel: 1, hasFoil: false, isRetired: false, year: 0, season: 'special' }, { name: 'Community Badge', badgeId: 2, type: 'community', maxLevel: 1, hasFoil: false, isRetired: false, year: 0, season: 'special' }, { name: 'Steam Gem Store', badgeId: 4, type: 'community', maxLevel: 1, hasFoil: false, isRetired: true, year: 2014, season: 'special' }, { name: 'Steam Community Profile', badgeId: 5, type: 'community', maxLevel: 1, hasFoil: false, isRetired: false, year: 0, season: 'special' }, ]; // ============================================================ // CSS 变量 & 样式（v1.3.0: 紫蓝渐变主题 + 玻璃拟态） // ============================================================ const CSS = ` /* ====== 设计令牌 ====== */ :root { --sbc-bg-primary: #0f1628; --sbc-bg-secondary: #0b1120; --sbc-bg-card: rgba(20, 27, 50, 0.9); --sbc-bg-hover: rgba(40, 55, 90, 0.6); --sbc-bg-kpi: rgba(15, 23, 42, 0.5); --sbc-bg-kpi-section: rgba(15, 23, 42, 0.4); --sbc-text-primary: #e2e8f0; --sbc-text-secondary: #94a3b8; --sbc-text-bright: #f8fafc; --sbc-accent: #8b5cf6; --sbc-accent-blue: #66c0f4; --sbc-border: rgba(139, 92, 246, 0.15); --sbc-border-hover: rgba(139, 92, 246, 0.35); --sbc-success: #4ade80; --sbc-warning: #fbbf24; --sbc-danger: #f87171; --sbc-gold: #c7a02e; --sbc-purple: #a855f7; --sbc-emerald: #10b981; --sbc-cyan: #06b6d4; /* KPI 卡片颜色变体 */ --sbc-kpi-blue: #66c0f4; --sbc-kpi-green: #22c55e; --sbc-kpi-amber: #fbbf24; --sbc-kpi-purple: #a78bfa; --sbc-kpi-red: #f44336; --sbc-kpi-cyan: #22d3ee; --sbc-kpi-border-blue: rgba(102, 192, 244, 0.35); --sbc-kpi-border-green: rgba(34, 197, 94, 0.35); --sbc-kpi-border-amber: rgba(245, 158, 11, 0.35); --sbc-kpi-border-purple: rgba(139, 92, 246, 0.35); --sbc-kpi-border-red: rgba(244, 67, 54, 0.35); --sbc-kpi-border-cyan: rgba(34, 211, 238, 0.35); --sbc-radius: 8px; --sbc-radius-lg: 12px; --sbc-radius-xl: 16px; --sbc-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); --sbc-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.6); --sbc-shadow-panel: 0 16px 56px rgba(0, 0, 0, 0.7); --sbc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); color-scheme: dark; } /* ====== 主容器 ====== */ .sbc-root { font-family: "Motiva Sans", Arial, Helvetica, sans-serif; color: var(--sbc-text-primary); padding: 0 16px; max-width: 1400px; margin: 0 auto; } /* ====== v1.2.7: 用户信息头部面板 (参考 Steam 原版 + 第三方设计图) ====== * v1.2.10: UI 美化——参考 html-demo/steam-dashboard.html 的玻璃拟态 + 渐变光带 * - 顶层加高斯模糊的渐变光带(冷色 + 暖色双色叠加) * - 整体加 backdrop-filter 模糊,响应 hover 微浮起 * - 头像区域加渐变光晕 * ====== */ .sbc-user-header { display: flex; align-items: stretch; gap: 16px; background: radial-gradient(ellipse at 12% -20%, rgba(139, 92, 246, 0.14), transparent 55%), radial-gradient(ellipse at 95% 120%, rgba(6, 182, 212, 0.08), transparent 55%), linear-gradient(135deg, rgba(14, 20, 40, 0.96), rgba(20, 27, 50, 0.94)); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius-xl); padding: 12px 16px; margin-bottom: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, var(--sbc-shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease; } .sbc-user-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.6) 30%, rgba(6, 182, 212, 0.5) 70%, transparent 100%); } /* v1.2.10: 头部右下角动态光晕 */ .sbc-user-header::after { content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 65%); border-radius: 50%; pointer-events: none; animation: sbc-header-glow 8s ease-in-out infinite; } @keyframes sbc-header-glow { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } } /* 左侧:头像 + 用户名 + 进度 */ .sbc-user-left { display: flex; gap: 14px; align-items: center; flex: 1; min-width: 0; } .sbc-user-avatar-wrap { position: relative; flex-shrink: 0; } .sbc-user-avatar-frame { position: absolute; top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px); pointer-events: none; z-index: 1; } /* v1.2.10 修复: 默认装饰边框(SVG ring),即使没有 Steam 头像框也给个像样的描边 */ .sbc-user-avatar-ring { position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); pointer-events: none; z-index: 0; border-radius: 14px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.45), rgba(6, 182, 212, 0.3), rgba(139, 92, 246, 0.25)); padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: background 0.3s ease; } .sbc-user-header:hover .sbc-user-avatar-ring { background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(6, 182, 212, 0.5), rgba(59, 130, 246, 0.5)); } .sbc-user-avatar { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #1e2d3d, #0e1a27); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 0 18px rgba(139, 92, 246, 0.12), 0 2px 12px rgba(0, 0, 0, 0.4); transition: box-shadow 0.3s ease, transform 0.3s ease; } .sbc-user-header:hover .sbc-user-avatar { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.5), 0 0 24px rgba(139, 92, 246, 0.25), 0 2px 12px rgba(0, 0, 0, 0.4); } .sbc-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; /* v1.2.10 修复: 即使图片 URL 错误也保持容器不变形 */ background: linear-gradient(135deg, #1e2d3d, #0e1a27); } .sbc-user-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: var(--sbc-accent); background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.08)); } .sbc-user-level-badge { position: absolute; bottom: -6px; right: -6px; min-width: 42px; height: 24px; padding: 0 7px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 12px; font-weight: 800; border-radius: 12px; display: flex; align-items: center; gap: 3px; border: 2px solid #16202d; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.5); z-index: 4; letter-spacing: 0.3px; } .sbc-user-level-badge svg { color: #ffd700; flex-shrink: 0; } .sbc-user-online-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #7f8c8d; border: 2px solid #16202d; z-index: 4; } .sbc-user-online--online .sbc-user-online-dot { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); animation: sbc-online-pulse 2s ease-in-out infinite; } .sbc-user-online--in-game .sbc-user-online-dot { background: #66c0f4; box-shadow: 0 0 6px rgba(102, 192, 244, 0.6); animation: sbc-online-pulse 1.5s ease-in-out infinite; } @keyframes sbc-online-pulse { 0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.9), 0 0 16px rgba(34, 197, 94, 0.4); } } /* 用户名 + ID */ .sbc-user-info { flex: 1; min-width: 0; } .sbc-user-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .sbc-user-name { font-size: 18px; font-weight: 700; color: var(--sbc-text-bright); text-decoration: none; transition: color 0.2s; } .sbc-user-name:hover { color: var(--sbc-accent); } .sbc-user-verified { flex-shrink: 0; } /* v1.2.14-fix3: 昵称后的等级展示 */ .sbc-user-name-level { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 4px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.1)); border: 1px solid rgba(167, 139, 250, 0.35); color: #c4b5fd; font-size: 12px; font-weight: 700; flex-shrink: 0; line-height: 1; } .sbc-user-name-level svg { color: #fbbf24; } .sbc-user-refresh { width: 24px; height: 24px; border: 1px solid var(--sbc-border); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--sbc-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .sbc-user-name-row .sbc-user-refresh { margin-left: auto; } .sbc-user-refresh:hover { background: rgba(139, 92, 246, 0.15); color: var(--sbc-accent); border-color: rgba(139, 92, 246, 0.4); } .sbc-user-refresh.spinning svg { animation: sbc-refresh-spin 0.8s linear infinite; } @keyframes sbc-refresh-spin { to { transform: rotate(360deg); } } /* v1.2.10: 设置按钮(齿轮),与刷新按钮一致的紧凑样式 */ .sbc-user-settings { width: 24px; height: 24px; border: 1px solid var(--sbc-border); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--sbc-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 6px; transition: all 0.2s; } .sbc-user-settings:hover { background: rgba(251, 191, 36, 0.18); color: var(--sbc-gold); border-color: rgba(251, 191, 36, 0.4); } .sbc-user-settings:hover svg { transform: rotate(45deg); transition: transform 0.3s; } .sbc-user-settings svg { transition: transform 0.3s; } /* v1.2.10: 设置模态框 */ .sbc-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: sbc-fade-in 0.2s ease-out; } @keyframes sbc-fade-in { from { opacity: 0; } to { opacity: 1; } } .sbc-modal { background: linear-gradient(135deg, #1e2530 0%, #131820 100%); border: 1px solid var(--sbc-border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1); max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; animation: sbc-modal-in 0.25s ease-out; } @keyframes sbc-modal-in { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .sbc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--sbc-border); } .sbc-modal-title { font-size: 16px; font-weight: 700; color: var(--sbc-text-bright); display: flex; align-items: center; gap: 8px; } .sbc-modal-close { width: 28px; height: 28px; border: none; background: transparent; color: var(--sbc-text-secondary); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .sbc-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--sbc-text-bright); } .sbc-modal-body { padding: 20px 22px; } .sbc-modal-footer { padding: 14px 22px; border-top: 1px solid var(--sbc-border); display: flex; justify-content: flex-end; gap: 8px; } .sbc-form-group { margin-bottom: 16px; } .sbc-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--sbc-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; } .sbc-form-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .sbc-form-hint { font-size: 11px; color: var(--sbc-text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; } .sbc-form-input { width: 100%; padding: 10px 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--sbc-border); border-radius: 8px; color: var(--sbc-text-bright); font-size: 13px; font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; transition: all 0.2s; box-sizing: border-box; } .sbc-form-input:focus { outline: none; border-color: var(--sbc-accent); background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .sbc-form-input::placeholder { color: rgba(255, 255, 255, 0.25); } .sbc-form-help { margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--sbc-text-secondary); } .sbc-form-help a { color: var(--sbc-accent); text-decoration: none; } .sbc-form-help a:hover { text-decoration: underline; } .sbc-form-status { margin-top: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px; display: none; } .sbc-form-status.success { display: block; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; } .sbc-form-status.error { display: block; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; } .sbc-form-status.loading { display: block; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); color: var(--sbc-accent); } .sbc-btn-primary { padding: 8px 16px; background: linear-gradient(135deg, var(--sbc-accent) 0%, #6366f1 100%); border: 1px solid var(--sbc-accent); border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .sbc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 192, 244, 0.4); } .sbc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .sbc-btn-ghost { padding: 8px 14px; background: transparent; border: 1px solid var(--sbc-border); border-radius: 6px; color: var(--sbc-text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; } .sbc-btn-ghost:hover { color: var(--sbc-text-bright); border-color: var(--sbc-text-secondary); } .sbc-user-steam-id { font-size: 11px; color: var(--sbc-text-secondary); font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; letter-spacing: 0.3px; } /* 等级进度条 (v1.2.14-fix3: 移除 label,数值直接展示在进度条下方) */ .sbc-user-progress { margin-top: 8px; } .sbc-user-progress-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; position: relative; } .sbc-user-progress-fill { height: 100%; background: linear-gradient(90deg, #fbbf24, #f59e0b, #facc15); border-radius: 3px; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); transition: width 0.6s ease; } /* v1.2.14-fix3: 合并为一行 - 当前等级 | XP数值 | 下一等级 | 百分比 */ .sbc-user-progress-text { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font-size: 10px; color: var(--sbc-text-secondary); white-space: nowrap; } .sbc-user-progress-text strong { color: var(--sbc-gold); font-weight: 700; } .sbc-user-progress-lvl-from { color: var(--sbc-gold); font-weight: 700; font-size: 11px; } .sbc-user-progress-lvl-to { color: var(--sbc-text-primary); font-weight: 600; font-size: 11px; } .sbc-user-progress-pct { color: var(--sbc-text-primary); font-weight: 600; } /* 右侧:4 个 KPI 卡片 (v1.2.10: 参考 dashboard .kpi 风格,加 hover 浮起 + 顶部 accent 条) */ .sbc-user-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-self: stretch; min-width: 340px; } .sbc-user-kpi { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); border: 1px solid var(--sbc-border); border-top: 2px solid transparent; /* 占位,各色 variant 覆盖 */ border-radius: var(--sbc-radius); padding: 6px 10px 6px 10px; display: flex; align-items: center; gap: 7px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background 0.25s ease; cursor: default; overflow: hidden; } /* v1.2.10: KPI 卡片顶部 accent 条 */ .sbc-user-kpi::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--sbc-accent); opacity: 0.85; transition: opacity 0.25s ease, height 0.25s ease; } .sbc-user-kpi:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .sbc-user-kpi:hover::before { opacity: 1; height: 3px; } /* v1.2.14-fix5: 可点击的 KPI 卡片(好友/游戏/徽章) */ .sbc-user-kpi--clickable { text-decoration: none; color: inherit; cursor: pointer; } .sbc-user-kpi--clickable:hover { border-color: var(--sbc-accent); background: linear-gradient(180deg, rgba(102, 192, 244, 0.08), rgba(102, 192, 244, 0.02)); } .sbc-user-kpi-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(102, 192, 244, 0.12); color: var(--sbc-accent); } .sbc-user-kpi--cyan::before { background: #22d3ee; } .sbc-user-kpi--cyan .sbc-user-kpi-icon { background: rgba(34, 211, 238, 0.15); color: #22d3ee; } .sbc-user-kpi--cyan { border-color: rgba(34, 211, 238, 0.22); } .sbc-user-kpi--purple::before { background: #a78bfa; } .sbc-user-kpi--purple .sbc-user-kpi-icon { background: rgba(167, 139, 250, 0.15); color: #a78bfa; } .sbc-user-kpi--purple { border-color: rgba(167, 139, 250, 0.22); } .sbc-user-kpi--teal::before { background: #2dd4bf; } .sbc-user-kpi--teal .sbc-user-kpi-icon { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; } .sbc-user-kpi--teal { border-color: rgba(45, 212, 191, 0.22); } .sbc-user-kpi--gold::before { background: #fbbf24; } .sbc-user-kpi--gold .sbc-user-kpi-icon { background: rgba(251, 191, 36, 0.15); color: #fbbf24; } .sbc-user-kpi--gold { border-color: rgba(251, 191, 36, 0.22); } .sbc-user-kpi-body { min-width: 0; flex: 1; } .sbc-user-kpi-value { font-size: 15px; font-weight: 800; color: var(--sbc-text-bright); line-height: 1.15; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; /* 等宽数字,数字变化不抖 */ } /* v1.2.10 修复: 空值时数字用浅灰显示,避免"0"看起来像真实数据 */ .sbc-user-kpi-empty .sbc-user-kpi-value, .sbc-user-kpi-empty { color: var(--sbc-text-secondary); } .sbc-user-kpi-empty { opacity: 0.7; } .sbc-user-kpi-empty .sbc-user-kpi-icon { opacity: 0.55; } .sbc-user-kpi-label { font-size: 9px; color: var(--sbc-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 1px; } .sbc-user-kpi-sub { font-size: 8.5px; color: var(--sbc-text-secondary); opacity: 0.7; margin-top: 0; } /* v1.2.10: KPI 卡片点击交互(可点击查看详情) */ .sbc-user-kpi--clickable { cursor: pointer; } .sbc-user-kpi--clickable:hover .sbc-user-kpi-value { color: var(--sbc-accent); } /* v1.2.7: 响应式 */ @media (max-width: 1100px) { .sbc-user-header { flex-direction: column; } .sbc-user-kpis { min-width: 0; width: 100%; } } @media (max-width: 700px) { .sbc-user-kpis { grid-template-columns: repeat(2, 1fr); } } /* ====== 工具栏 (v1.2.3: 紧凑布局，参考 sglv header) ====== * v1.2.10: 玻璃拟态 + 左/右分割 + 毛玻璃模糊 * ====== */ .sbc-toolbar { background: linear-gradient(180deg, rgba(20, 27, 50, 0.85), rgba(15, 20, 40, 0.82)); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius-lg); padding: 10px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sbc-shadow); position: relative; } /* v1.2.10: 工具栏左右分割线(在 ≥900px 宽度下) */ @media (min-width: 900px) { .sbc-toolbar::after { content: ''; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.2), transparent); pointer-events: none; } } .sbc-toolbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 300px; flex-wrap: wrap; } .sbc-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; padding-left: 4px; } /* ====== 搜索框 ====== */ .sbc-search { position: relative; flex: 1; max-width: 320px; min-width: 200px; } .sbc-search input { width: 100%; padding: 7px 10px 7px 34px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--sbc-radius); background: rgba(255, 255, 255, 0.05); color: var(--sbc-text-primary); font-size: 12px; outline: none; transition: border-color var(--sbc-transition); box-sizing: border-box; } .sbc-search input:focus { border-color: var(--sbc-accent); } .sbc-search input::placeholder { color: var(--sbc-text-secondary); } .sbc-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sbc-text-secondary); pointer-events: none; } /* ====== 下拉框 ====== */ .sbc-select { padding: 7px 28px 7px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--sbc-radius); background: rgba(255, 255, 255, 0.05); color: var(--sbc-text-primary); font-size: 12px; font-weight: 600; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238f98a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); transition: all 0.2s; } .sbc-select option { background: #1a2236; color: #e2e8f0; padding: 6px 10px; } .sbc-select option:hover, .sbc-select option:checked { background: #2d3a52; color: #fff; } .sbc-select:hover { border-color: rgba(139, 92, 246, 0.3); } .sbc-select:focus { border-color: var(--sbc-accent); } /* ====== 按钮 ====== */ .sbc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); background: rgba(255, 255, 255, 0.05); color: var(--sbc-text-primary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; user-select: none; line-height: 1.4; } .sbc-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(102, 192, 244, 0.3); color: var(--sbc-accent); } .sbc-btn:active { transform: scale(0.97); } .sbc-btn--accent { background: rgba(102, 192, 244, 0.2); color: var(--sbc-accent); border: 1px solid rgba(102, 192, 244, 0.4); font-weight: 600; } .sbc-btn--accent:hover { background: rgba(102, 192, 244, 0.3); border-color: rgba(102, 192, 244, 0.6); color: #fff; } .sbc-btn--success { background: linear-gradient(135deg, #2f7a3d 0%, #1f5a2d 100%); color: #a8e6a8; border: 1px solid #3f8a4d; } .sbc-btn--purple { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); color: #d8b4fe; border: 1px solid #8b5cf6; } .sbc-btn--purple:hover { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #ede9fe; } .sbc-btn--analysis { background: linear-gradient(135deg, #c7a02e 0%, #a67c00 100%); color: #fff; border: none; font-weight: 600; position: relative; } .sbc-btn--analysis:hover { background: linear-gradient(135deg, #d4b63e 0%, #c7a02e 100%); color: #fff; } .sbc-btn--analysis.active::after { content: ''; position: absolute; bottom: -2px; left: 12px; right: 12px; height: 2px; background: #fff; border-radius: 2px; } /* ====== 统计信息 (v1.2.3: 紧凑胶囊式，参考 sglv stats dashboard) * v1.2.10: 加玻璃背景 + 分割,数字使用 tabular-nums 防止抖动 * ====== */ .sbc-stats { display: flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: 10px; font-size: 11.5px; color: var(--sbc-text-secondary); flex-wrap: wrap; background: linear-gradient(180deg, rgba(20, 28, 40, 0.5), rgba(14, 22, 32, 0.4)); border: 1px solid rgba(102, 192, 244, 0.08); border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sbc-stats > span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 2px; } .sbc-stats-num { color: var(--sbc-accent); font-weight: 700; background: rgba(102, 192, 244, 0.14); padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; } .sbc-stats-filter { cursor: pointer; transition: all 0.18s ease; padding: 2px 6px; border-radius: 6px; } .sbc-stats-filter:hover { color: var(--sbc-accent); background: rgba(102, 192, 244, 0.10); } .sbc-stats-filter:hover .sbc-stats-num { background: rgba(102, 192, 244, 0.22); } /* ====== 卡片网格 (v1.2.4: 6列紧凑布局) * v1.2.10: 响应式增强 * - ≥1600px: 7 列(给宽屏留更多空间) * - ≥1100px: 6 列(默认) * - ≥700px : 4 列(平板) * - <700px : 2 列(手机) * ====== */ .sbc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding-bottom: 20px; } @media (min-width: 1600px) { .sbc-root { max-width: 1600px; } .sbc-grid { grid-template-columns: repeat(7, 1fr); } } @media (max-width: 1100px) { .sbc-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 700px) { .sbc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* ====== 卡片（含Pro增强） * v1.2.10: hover 过渡曲线统一为 dashboard 风格的 cubic-bezier(.16, 1, .3, 1) * 增加渐入动画 sbc-card-enter (原版只是简单的 opacity 0→1,新版加轻微上移+模糊) * ====== */ .sbc-card { background: var(--sbc-bg-card); border-radius: var(--sbc-radius-lg); overflow: hidden; border: 1px solid var(--sbc-border); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease; cursor: pointer; position: relative; display: flex; flex-direction: column; } .sbc-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.2); border-color: var(--sbc-border-hover); } /* Pro: 锁定徽章样式（参考游戏库 viewer：灰度滤镜，hover 还原） */ .sbc-card--locked .sbc-card-img-wrap img { filter: grayscale(0.85) brightness(0.55); opacity: 0.7; transition: filter 0.4s ease, opacity 0.4s ease; } .sbc-card--locked:hover .sbc-card-img-wrap img { filter: grayscale(0.2) brightness(0.95); opacity: 1; } .sbc-card--locked { border-color: rgba(255, 255, 255, 0.04); } .sbc-card--locked:hover { border-color: var(--sbc-accent); } /* Pro: 高价值徽章样式 */ .sbc-card--valuable { border-color: rgba(192, 160, 46, 0.35); } .sbc-card--valuable:hover { border-color: var(--sbc-gold); box-shadow: 0 8px 32px rgba(192, 160, 46, 0.25); } /* 自动合卡: 可合卡/合卡中/已完成状态 */ .sbc-card--craftable { border-color: rgba(243, 156, 18, 0.5); } .sbc-card--craftable::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f39c12, #e67e22); z-index: 3; } .sbc-card-craft-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; pointer-events: none; z-index: 3; white-space: nowrap; } .sbc-card-img-wrap, .sbc-db-card-img-wrap { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(102,192,244,0.10), transparent 65%), linear-gradient(135deg, #0e1a27 0%, #16202d 60%, #1a2638 100%); display: flex; align-items: center; justify-content: center; } .sbc-card-img-wrap::after, .sbc-db-card-img-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 55%, transparent 100%); pointer-events: none; z-index: 1; } .sbc-card-img-wrap img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 88%; max-height: 88%; object-fit: contain; transition: transform 0.4s ease, filter 0.4s ease; z-index: 2; } .sbc-card:hover .sbc-card-img-wrap img { transform: translate(-50%, -50%) scale(1.06); } /* 多卡牌网格展示（参考游戏库 viewer 的卡片设计） */ .sbc-card-cardgrid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; gap: 4px; width: 84%; max-height: 84%; padding: 6px; z-index: 2; } .sbc-card-cardgrid img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.25); transition: transform 0.4s ease; } .sbc-card:hover .sbc-card-cardgrid img { transform: scale(1.04); } .sbc-card-cardgrid-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--sbc-text-secondary); font-size: 11px; font-weight: 600; } .sbc-card-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--sbc-text-secondary); opacity: 0.45; z-index: 2; } .sbc-card-placeholder div { font-size: 11px; } .sbc-card-level-badge, .sbc-db-card-level-badge { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); color: var(--sbc-gold); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; pointer-events: none; z-index: 3; } .sbc-card-xp-badge { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); color: var(--sbc-accent); padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; pointer-events: none; z-index: 3; } /* Pro: 价值评分 & 市场价格角标 (v1.2.10: 加柔光阴影 + 滑入动画) */ .sbc-card-value-badge { position: absolute; bottom: 8px; right: 8px; background: linear-gradient(135deg, #c7a02e, #a67c00); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; pointer-events: none; z-index: 3; box-shadow: 0 2px 8px rgba(192, 160, 46, 0.35); animation: sbc-badge-pop-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .sbc-card-market-badge { position: absolute; bottom: 8px; left: 8px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.92), rgba(5, 150, 105, 0.92)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; pointer-events: none; z-index: 3; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35); font-variant-numeric: tabular-nums; animation: sbc-badge-pop-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes sbc-badge-pop-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } /* v1.2.10: 价格角标加载中(骨架) */ .sbc-card-market-badge--loading { background: rgba(102, 192, 244, 0.18); color: var(--sbc-accent); box-shadow: 0 0 0 1px rgba(102, 192, 244, 0.3) inset; background-size: 200% 100%; background-image: linear-gradient(90deg, rgba(102, 192, 244, 0.10) 0%, rgba(102, 192, 244, 0.30) 50%, rgba(102, 192, 244, 0.10) 100%); animation: sbc-shimmer 1.4s linear infinite; } @keyframes sbc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Pro: 锁定徽章锁图标 */ .sbc-card-locked-icon-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .sbc-card-locked-icon-inner { width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.12); } .sbc-card-info { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 3px; flex: 1; } .sbc-card-name-row { display: flex; align-items: center; gap: 4px; } .sbc-card-name { font-size: 12px; font-weight: 600; color: var(--sbc-text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; flex: 1; min-width: 0; } .sbc-card-detail-btn { flex-shrink: 0; font-size: 10px; color: var(--sbc-accent); cursor: pointer; opacity: 0.6; transition: opacity 0.2s; user-select: none; padding: 1px 4px; } .sbc-card-detail-btn:hover { opacity: 1; } .sbc-card:hover .sbc-card-detail-btn { opacity: 0.8; } .sbc-card:hover .sbc-card-name { color: var(--sbc-accent); } .sbc-card-badge-name { font-size: 10px; color: var(--sbc-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbc-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--sbc-text-secondary); } .sbc-card-progress { display: flex; align-items: center; gap: 5px; font-size: 10px; } .sbc-card-progress-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .sbc-card-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--sbc-accent), #a4d007); transition: width 0.6s ease; } .sbc-card-drops { font-size: 11px; color: var(--sbc-warning); display: flex; align-items: center; gap: 4px; } .sbc-card-drops--none { color: var(--sbc-text-secondary); } /* ====== 分页 ====== */ .sbc-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 20px 0 40px; flex-wrap: wrap; } .sbc-page-btn { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); background: var(--sbc-bg-card); color: var(--sbc-text-primary); font-size: 14px; cursor: pointer; transition: all var(--sbc-transition); padding: 0 12px; } .sbc-page-btn:hover { border-color: var(--sbc-accent); color: var(--sbc-accent); background: var(--sbc-bg-hover); } .sbc-page-btn.active { background: var(--sbc-accent); color: #fff; border-color: var(--sbc-accent); font-weight: 600; } .sbc-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .sbc-page-info { color: var(--sbc-text-secondary); font-size: 13px; padding: 0 12px; } /* ====== Toast ====== */ .sbc-toast { position: fixed; bottom: 24px; right: 24px; background: var(--sbc-bg-secondary); color: var(--sbc-text-primary); padding: 12px 20px; border-radius: var(--sbc-radius); border: 1px solid var(--sbc-accent); box-shadow: var(--sbc-shadow); font-size: 14px; z-index: 99999; animation: sbc-toast-in 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; max-width: 360px; word-break: break-word; } .sbc-toast--success { border-color: var(--sbc-success); } .sbc-toast--error { border-color: var(--sbc-danger); } .sbc-toast--warning { border-color: var(--sbc-gold, #c7a02e); } @keyframes sbc-toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ====== 卡片动画 ====== * v1.2.10: 渐入曲线改用 cubic-bezier(.16, 1, .3, 1) (dashboard 风格) * 时长 0.35s → 0.45s,起始位移 16px → 10px(更轻) * ====== */ .sbc-card-enter { animation: sbc-card-fade-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes sbc-card-fade-in { from { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ====== 空状态 ====== */ .sbc-empty { text-align: center; padding: 60px 20px; color: var(--sbc-text-secondary); } .sbc-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; } .sbc-empty-text { font-size: 16px; margin-bottom: 8px; } /* ====== 加载 ====== */ .sbc-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .sbc-loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(102, 192, 244, 0.2); border-top-color: var(--sbc-accent); border-radius: 50%; animation: sbc-spin 0.8s linear infinite; } @keyframes sbc-spin { to { transform: rotate(360deg); } } .sbc-loading-text { color: var(--sbc-text-bright); font-size: 16px; font-weight: 500; } /* ====== v1.2.1: 全部卡牌游戏视图 ====== */ .sbc-db-card { background: var(--sbc-bg-card); border-radius: var(--sbc-radius-lg); overflow: hidden; border: 1px solid var(--sbc-border); transition: all var(--sbc-transition); cursor: pointer; position: relative; display: flex; flex-direction: column; text-decoration: none; } .sbc-db-card:hover { transform: translateY(-2px); box-shadow: var(--sbc-shadow-hover); border-color: rgba(102, 192, 244, 0.3); } .sbc-db-card--owned { border-color: rgba(92, 126, 16, 0.3); } .sbc-db-card--owned:hover { border-color: var(--sbc-success); box-shadow: 0 4px 20px rgba(92, 126, 16, 0.15); } .sbc-db-card--unowned { border-color: rgba(255, 255, 255, 0.04); } .sbc-db-card--unowned:hover { border-color: var(--sbc-accent); } /* v1.2.4: 未拥有游戏灰度展示 */ .sbc-db-card--unowned .sbc-db-card-img-wrap { filter: grayscale(0.8) brightness(0.6); } .sbc-db-card--unowned:hover .sbc-db-card-img-wrap { filter: grayscale(0.4) brightness(0.8); } .sbc-db-card-icon { width: 40px; height: 40px; opacity: 0.35; color: var(--sbc-text-secondary); z-index: 2; } .sbc-db-card--owned .sbc-db-card-icon { color: var(--sbc-success); opacity: 0.5; } .sbc-db-card-status-badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; pointer-events: none; z-index: 3; } .sbc-db-card-status--owned { background: rgba(92, 126, 16, 0.85); color: #a8e6a8; } .sbc-db-card-status--unowned { background: rgba(0, 0, 0, 0.7); color: var(--sbc-text-secondary); } .sbc-db-card-info { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 3px; flex: 1; } .sbc-db-card-name-row { display: flex; align-items: center; gap: 4px; } .sbc-db-card-name { font-size: 12px; font-weight: 600; color: var(--sbc-text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .sbc-db-card-detail-btn { flex-shrink: 0; font-size: 10px; color: var(--sbc-accent); cursor: pointer; opacity: 0.6; transition: opacity 0.2s; user-select: none; padding: 1px 4px; } .sbc-db-card-detail-btn:hover { opacity: 1; } .sbc-db-card:hover .sbc-db-card-detail-btn { opacity: 0.8; } .sbc-db-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--sbc-text-secondary); margin-top: 1px; } .sbc-db-card-appid { font-family: monospace; opacity: 0.7; } .sbc-db-card-maxlvl { color: var(--sbc-gold); font-weight: 600; } /* v1.2.1: 卡片最高等级补充显示 */ .sbc-card-maxlevel-badge { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); color: var(--sbc-text-secondary); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; pointer-events: none; z-index: 4; } /* v1.2.1: 卡牌数据库加载条 */ .sbc-db-loading-bar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(102, 192, 244, 0.1); border: 1px solid rgba(102, 192, 244, 0.3); border-radius: var(--sbc-radius); font-size: 12px; color: var(--sbc-accent); } .sbc-db-loading-bar .sbc-db-spinner, .sbc-market-spinner { width: 14px; height: 14px; border: 2px solid rgba(102, 192, 244, 0.2); border-top-color: var(--sbc-accent); border-radius: 50%; animation: sbc-spin 0.8s linear infinite; } /* ====== 游戏分组模式 ====== */ .sbc-game-group { margin-bottom: 24px; background: var(--sbc-bg-secondary); border-radius: var(--sbc-radius-lg); border: 1px solid var(--sbc-border); overflow: hidden; } .sbc-game-group-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(135deg, var(--sbc-bg-primary), #1a3a4a); border-bottom: 1px solid var(--sbc-border); cursor: pointer; transition: background var(--sbc-transition); } .sbc-game-group-header:hover { background: linear-gradient(135deg, #1a3a4a, var(--sbc-bg-primary)); } .sbc-game-group-title { display: flex; align-items: center; gap: 12px; flex: 1; } .sbc-game-group-name { font-size: 16px; font-weight: 600; color: var(--sbc-text-bright); } .sbc-game-group-count { font-size: 12px; color: var(--sbc-text-secondary); background: rgba(255, 255, 255, 0.08); padding: 3px 10px; border-radius: 12px; } .sbc-game-group-stats { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--sbc-text-secondary); } .sbc-game-group-stats span { display: inline-flex; align-items: center; gap: 4px; } .sbc-game-group-toggle { color: var(--sbc-text-secondary); transition: transform var(--sbc-transition); } .sbc-game-group-toggle.collapsed { transform: rotate(-90deg); } /* v1.2.14-fix2: 分组视图详情按钮(打开大屏浮窗) */ .sbc-game-group-detail-btn { padding: 4px 12px; border-radius: var(--sbc-radius); background: rgba(102, 192, 244, 0.12); border: 1px solid rgba(102, 192, 244, 0.3); color: var(--sbc-accent); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--sbc-transition); flex-shrink: 0; } .sbc-game-group-detail-btn:hover { background: rgba(102, 192, 244, 0.25); border-color: var(--sbc-accent); } .sbc-game-group-content { padding: 16px; transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .sbc-game-group-content.collapsed { max-height: 0; padding: 0 16px; opacity: 0; } .sbc-game-group .sbc-grid { display: none; /* v1.2.6: 隐藏旧 grid,改用徽章行表格 */ } /* ====== v1.2.6: 徽章表格(原版风格) ====== */ .sbc-badge-table { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; } .sbc-badge-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 56px 70px minmax(140px, 200px) minmax(80px, 110px) 80px 56px; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); transition: all 0.15s; text-decoration: none; color: var(--sbc-text-primary); } .sbc-badge-row:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--sbc-border-hover); color: var(--sbc-text-primary); } .sbc-badge-row--completed { border-color: rgba(92, 126, 16, 0.3); background: linear-gradient(90deg, rgba(92, 126, 16, 0.08), rgba(255, 255, 255, 0.02)); } .sbc-badge-row--completed:hover { border-color: var(--sbc-success); } .sbc-badge-row--foil { border-color: rgba(199, 160, 46, 0.4); background: linear-gradient(90deg, rgba(199, 160, 46, 0.08), rgba(255, 255, 255, 0.02)); } .sbc-badge-row--locked { opacity: 0.7; } /* v1.2.14-fix2: 徽章行详情按钮 */ .sbc-badge-row-detail-btn { padding: 3px 8px; border-radius: var(--sbc-radius); background: rgba(102, 192, 244, 0.1); border: 1px solid rgba(102, 192, 244, 0.25); color: var(--sbc-accent); font-size: 11px; font-weight: 600; cursor: pointer; transition: all var(--sbc-transition); text-align: center; } .sbc-badge-row-detail-btn:hover { background: rgba(102, 192, 244, 0.22); border-color: var(--sbc-accent); } .sbc-badge-row-icon { width: 36px; height: 36px; background: var(--sbc-bg-secondary); border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sbc-badge-row-icon img { width: 100%; height: 100%; object-fit: cover; } .sbc-badge-row-img-locked { filter: grayscale(1) brightness(0.5); } .sbc-badge-row-img-placeholder { font-size: 18px; color: var(--sbc-text-secondary); } .sbc-badge-row-info { min-width: 0; overflow: hidden; } .sbc-badge-row-name { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--sbc-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbc-badge-row-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .sbc-badge-row-foil-tag { background: var(--sbc-gold); color: #1b2838; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; flex-shrink: 0; } .sbc-badge-row-meta { font-size: 10px; color: var(--sbc-text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbc-badge-row-lvl { font-size: 12px; font-weight: 800; color: var(--sbc-gold); text-align: center; } .sbc-badge-row--completed .sbc-badge-row-lvl { color: var(--sbc-success); } .sbc-badge-row-xp { font-size: 11px; font-weight: 600; color: var(--sbc-accent); text-align: right; } .sbc-badge-row-progress-wrap { min-width: 0; } .sbc-badge-row-progress { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--sbc-text-secondary); } .sbc-badge-row-progress--empty { color: var(--sbc-text-secondary); opacity: 0.4; justify-content: center; } .sbc-badge-row-progress-num { font-weight: 700; min-width: 36px; } .sbc-badge-row-progress-bar { flex: 1; height: 5px; border-radius: 2.5px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .sbc-badge-row-progress-fill { height: 100%; border-radius: 2.5px; } .sbc-badge-row-progress-pct { font-weight: 600; min-width: 30px; text-align: right; color: var(--sbc-text-primary); } .sbc-badge-row-cards { display: flex; align-items: center; gap: 4px; min-height: 28px; } .sbc-badge-row-cards img { width: 36px; height: 24px; object-fit: cover; border-radius: 3px; background: var(--sbc-bg-secondary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; } .sbc-badge-row-cards img:hover { transform: scale(1.2); z-index: 5; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .sbc-badge-row-cards-more { font-size: 10px; color: var(--sbc-text-primary); font-weight: 600; background: rgba(102, 192, 244, 0.2); color: var(--sbc-accent); padding: 3px 6px; border-radius: 3px; border: 1px solid rgba(102, 192, 244, 0.3); } .sbc-badge-row-status { text-align: center; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 4px; } .sbc-badge-row-status--done { background: rgba(92, 126, 16, 0.25); color: var(--sbc-success); } .sbc-badge-row-status--progress { background: rgba(102, 192, 244, 0.18); color: var(--sbc-accent); } .sbc-badge-row-status--locked { background: rgba(255, 255, 255, 0.04); color: var(--sbc-text-secondary); } /* ====== v1.2.6: 分组小节标题 ====== */ .sbc-game-group-section-title { font-size: 11px; font-weight: 700; color: var(--sbc-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--sbc-border); display: flex; align-items: center; gap: 6px; } .sbc-game-group-section-title--cards { color: var(--sbc-gold); } .sbc-game-group-section-hint { font-size: 10px; font-weight: 500; color: var(--sbc-text-secondary); opacity: 0.7; text-transform: none; letter-spacing: 0; } /* v1.2.8: 分组标题中的卡牌完成度提示 */ .sbc-game-group-cards-count { color: var(--sbc-gold); } .sbc-game-group-cards-pct { color: var(--sbc-accent); font-weight: 700; } .sbc-game-group-cards-100 { display: inline-block; background: var(--sbc-success); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; margin-left: 4px; } /* ====== v1.2.8: 5列卡牌紧凑网格 (参考 Steam 原版徽章页卡牌数据视图) ====== */ .sbc-card-grid-7 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 8px 0 14px; } @media (min-width: 1600px) { .sbc-card-grid-7 { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1400px) { .sbc-card-grid-7 { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1100px) { .sbc-card-grid-7 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 800px) { .sbc-card-grid-7 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 500px) { .sbc-card-grid-7 { grid-template-columns: repeat(2, 1fr); } } /* v1.2.8: 卡牌单元(参考原版) */ .sbc-card-tile { position: relative; background: var(--sbc-bg-card); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); overflow: hidden; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; animation: sbc-card-enter 0.4s ease backwards; cursor: pointer; display: flex; flex-direction: column; } .sbc-card-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); border-color: var(--sbc-accent); z-index: 2; } .sbc-card-tile-img-wrap { position: relative; width: 100%; aspect-ratio: 2/3; /* v1.2.8: 更接近原版卡牌竖版比例 */ background: var(--sbc-bg-secondary); display: flex; align-items: center; justify-content: center; } .sbc-card-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .sbc-card-tile-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1e2d3d, #16202d); display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--sbc-text-secondary); opacity: 0.3; } .sbc-card-tile--unowned img { filter: grayscale(0.85) brightness(0.4) contrast(0.85); } .sbc-card-tile--unowned:hover img { filter: grayscale(0.3) brightness(0.7); } /* 状态徽章 (右上角) */ .sbc-card-tile-badge { position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; z-index: 2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .sbc-card-tile-badge--owned { background: var(--sbc-success); color: #fff; } .sbc-card-tile-badge--locked { background: rgba(0, 0, 0, 0.7); color: var(--sbc-text-secondary); } /* v1.2.8: 卡牌信息(名称 + 价签) */ .sbc-card-tile-info { padding: 6px 8px 7px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--sbc-border); } .sbc-card-tile-name { font-size: 11px; font-weight: 600; color: var(--sbc-text-primary); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .sbc-card-tile--unowned .sbc-card-tile-name { color: var(--sbc-text-secondary); } .sbc-card-tile-price { display: flex; align-items: center; justify-content: space-between; font-size: 10px; } .sbc-card-tile-price-value { color: var(--sbc-emerald); font-weight: 700; } .sbc-card-tile-price--none .sbc-card-tile-price-value { color: var(--sbc-text-secondary); opacity: 0.5; font-weight: 400; } .sbc-card-tile-type { font-size: 9px; color: var(--sbc-text-secondary); opacity: 0.7; padding: 1px 4px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; } /* v1.2.8: 徽章行响应式 (v1.2.14-fix2: 适配新增的详情按钮列) */ @media (max-width: 1200px) { .sbc-badge-row { grid-template-columns: 32px minmax(0, 1fr) 50px 60px minmax(110px, 1fr) 90px 70px 50px; } } @media (max-width: 800px) { .sbc-badge-row { grid-template-columns: 32px minmax(0, 1fr) 60px 80px 70px 50px; } .sbc-badge-row-cards, .sbc-badge-row-xp { display: none; } } /* ============================================================ Pro: 分析浮窗 (Analysis Panel) ============================================================ */ @keyframes sbc-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sbc-panel-in { from { transform: scale(0.92) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .sbc-analysis-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(11, 17, 32, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100000; display: flex; align-items: center; justify-content: center; animation: sbc-overlay-in 0.3s ease; } .sbc-analysis-panel { width: min(960px, 95vw); max-height: 85vh; background: rgba(21, 30, 46, 0.97); border: 1px solid rgba(102, 192, 244, 0.2); border-radius: var(--sbc-radius-xl); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; animation: sbc-panel-in 0.35s ease; } .sbc-ap-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: linear-gradient(135deg, #1a2738, #16202d); border-bottom: 1px solid var(--sbc-border); flex-shrink: 0; } .sbc-ap-title { display: flex; align-items: center; gap: 8px; } .sbc-ap-title h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--sbc-text-bright); } .sbc-ap-subtitle { font-size: 12px; color: var(--sbc-text-secondary); background: rgba(255, 255, 255, 0.06); padding: 3px 10px; border-radius: 10px; } .sbc-ap-close { width: 30px; height: 30px; border: 1px solid var(--sbc-border); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--sbc-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s; } .sbc-ap-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .sbc-ap-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--sbc-border); flex-shrink: 0; padding: 0 16px; background: rgba(0, 0, 0, 0.15); } .sbc-ap-tab { padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--sbc-text-secondary); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all var(--sbc-transition); white-space: nowrap; } .sbc-ap-tab:hover { color: var(--sbc-text-bright); } .sbc-ap-tab.active { color: var(--sbc-gold); border-bottom-color: var(--sbc-gold); } .sbc-ap-content { flex: 1; overflow-y: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .sbc-ap-content::-webkit-scrollbar { width: 6px; } .sbc-ap-content::-webkit-scrollbar-track { background: transparent; } .sbc-ap-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } .sbc-ap-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* v1.2.3: 紧凑 KPI 卡片 (参考 sglv stat-dash-card / trend-kpi-card 设计) */ .sbc-ap-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; } .sbc-ap-stat-card { background: var(--sbc-bg-kpi); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius-lg); padding: 10px 12px; text-align: center; display: flex; flex-direction: column; gap: 3px; transition: border-color 0.2s; } .sbc-ap-stat-card:hover { border-color: var(--sbc-border-hover); } .sbc-ap-stat-label { font-size: 10px; color: var(--sbc-text-secondary); line-height: 1.3; } .sbc-ap-stat-value { font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; } .sbc-ap-stat-desc { font-size: 10px; color: var(--sbc-text-secondary); } /* 颜色变体 */ .sbc-ap-stat-card.blue { border-color: var(--sbc-kpi-border-blue); } .sbc-ap-stat-card.blue .sbc-ap-stat-value { color: var(--sbc-kpi-blue); } .sbc-ap-stat-card.green { border-color: var(--sbc-kpi-border-green); } .sbc-ap-stat-card.green .sbc-ap-stat-value { color: var(--sbc-kpi-green); } .sbc-ap-stat-card.amber { border-color: var(--sbc-kpi-border-amber); } .sbc-ap-stat-card.amber .sbc-ap-stat-value { color: var(--sbc-kpi-amber); } .sbc-ap-stat-card.purple { border-color: var(--sbc-kpi-border-purple); } .sbc-ap-stat-card.purple .sbc-ap-stat-value { color: var(--sbc-kpi-purple); } .sbc-ap-stat-card.red { border-color: var(--sbc-kpi-border-red); } .sbc-ap-stat-card.red .sbc-ap-stat-value { color: var(--sbc-kpi-red); } .sbc-ap-stat-card.cyan { border-color: var(--sbc-kpi-border-cyan); } .sbc-ap-stat-card.cyan .sbc-ap-stat-value { color: var(--sbc-kpi-cyan); } .sbc-ap-section { margin-bottom: 20px; } .sbc-ap-section-title { font-size: 14px; font-weight: 700; color: var(--sbc-text-bright); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .sbc-ap-section-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--sbc-gold); } .sbc-ap-rank-list { display: flex; flex-direction: column; gap: 5px; } .sbc-ap-rank-item { display: grid; grid-template-columns: 28px 46px minmax(0, 1fr) 100px 90px 70px; align-items: center; gap: 10px; padding: 7px 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); transition: all 0.2s; cursor: pointer; } .sbc-ap-rank-item:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--sbc-border-hover); } .sbc-ap-rank-cover { width: 46px; height: 22px; border-radius: 3px; object-fit: cover; background: rgba(255, 255, 255, 0.04); flex-shrink: 0; } .sbc-ap-rank-num { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--sbc-text-secondary); } .sbc-ap-rank-num--gold { background: linear-gradient(135deg, #c7a02e, #a67c00); color: #fff; } .sbc-ap-rank-num--silver { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #fff; } .sbc-ap-rank-num--bronze { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; } .sbc-ap-rank-name { font-size: 12px; font-weight: 600; color: var(--sbc-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbc-ap-rank-value { font-size: 11px; font-weight: 700; color: var(--sbc-gold); text-align: right; } .sbc-ap-rank-score { font-size: 11px; text-align: right; } .sbc-ap-rank-score--high { color: var(--sbc-emerald); } .sbc-ap-rank-score--mid { color: var(--sbc-warning); } .sbc-ap-rank-score--low { color: var(--sbc-text-secondary); } .sbc-ap-rank-tag { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; text-align: center; } .sbc-ap-rank-tag--buy { background: rgba(16, 185, 129, 0.15); color: var(--sbc-emerald); } .sbc-ap-rank-tag--trade { background: rgba(168, 85, 247, 0.15); color: var(--sbc-purple); } .sbc-ap-rank-tag--craft { background: rgba(6, 182, 212, 0.15); color: var(--sbc-cyan); } .sbc-ap-rank-tag--drop { background: rgba(245, 158, 11, 0.15); color: var(--sbc-warning); } /* 分布条 */ .sbc-ap-dist-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 8px; } .sbc-ap-dist-segment { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; transition: flex 0.2s; cursor: default; } .sbc-ap-dist-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; color: var(--sbc-text-secondary); } .sbc-ap-dist-legend-item { display: flex; align-items: center; gap: 6px; } .sbc-ap-dist-legend-dot { width: 10px; height: 10px; border-radius: 2px; } /* 价格表 */ .sbc-ap-price-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; } .sbc-ap-price-table th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--sbc-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .sbc-ap-price-table td { padding: 10px 12px; font-size: 13px; color: var(--sbc-text-primary); background: rgba(255, 255, 255, 0.02); border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .sbc-ap-price-table tbody tr { cursor: pointer; transition: background 0.2s; } .sbc-ap-price-table tbody tr:hover td { background: rgba(139, 92, 246, 0.06); } .sbc-ap-price-table td:first-child { border-left: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--sbc-radius) 0 0 var(--sbc-radius); } .sbc-ap-price-table td:last-child { border-right: 1px solid rgba(255, 255, 255, 0.04); border-radius: 0 var(--sbc-radius) var(--sbc-radius) 0; } .sbc-ap-price-value { font-weight: 600; color: var(--sbc-emerald); } .sbc-ap-price-total { font-weight: 700; color: var(--sbc-gold); } .sbc-ap-price-cover { width: 46px; height: 22px; border-radius: 3px; object-fit: cover; vertical-align: middle; background: rgba(255, 255, 255, 0.04); } .sbc-ap-no-data { text-align: center; padding: 40px 20px; color: var(--sbc-text-secondary); font-size: 14px; } .sbc-market-loading { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 12.5px; color: var(--sbc-text-primary); background: linear-gradient(180deg, rgba(20, 30, 44, 0.6), rgba(15, 22, 32, 0.5)); border: 1px solid rgba(102, 192, 244, 0.12); border-radius: 10px; margin: 12px 0; } /* v1.2.10: 加载进度条(粘性底部) */ .sbc-market-progress { position: sticky; top: 0; z-index: 5; margin-bottom: 10px; padding: 8px 12px; background: linear-gradient(135deg, rgba(20, 30, 44, 0.95), rgba(15, 22, 32, 0.95)); border: 1px solid rgba(102, 192, 244, 0.18); border-radius: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sbc-text-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .sbc-market-progress-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; position: relative; } .sbc-market-progress-fill { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, var(--sbc-accent), #4ade80); border-radius: 3px; transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 8px rgba(102, 192, 244, 0.5); } .sbc-market-progress-text { font-variant-numeric: tabular-nums; color: var(--sbc-accent); font-weight: 700; min-width: 80px; text-align: right; } /* ====== 响应式 ====== */ @media (min-width: 1600px) { .sbc-grid { grid-template-columns: repeat(7, 1fr); } } @media (max-width: 1400px) { .sbc-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1200px) { .sbc-grid { grid-template-columns: repeat(4, 1fr); } .sbc-ap-rank-item { grid-template-columns: 28px 46px minmax(0, 1fr) 80px 70px; } .sbc-ap-rank-tag { display: none; } } @media (max-width: 768px) { .sbc-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .sbc-search { max-width: 100%; } .sbc-ap-rank-item { grid-template-columns: 28px 46px minmax(0, 1fr) 70px; } .sbc-ap-rank-score, .sbc-ap-rank-tag { display: none; } .sbc-ap-tabs { overflow-x: auto; } } @media (max-width: 480px) { .sbc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* ====== v1.2.3: 勋章类型标识 ====== */ .sbc-card-type-badge { position: absolute; top: 6px; right: 6px; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; line-height: 1.4; z-index: 3; pointer-events: none; } .sbc-card-type-badge--activity { background: rgba(168, 85, 247, 0.85); color: #fff; } .sbc-card-type-badge--foil { background: rgba(199, 160, 46, 0.9); color: #1b2838; } .sbc-card-type-badge--game { background: rgba(102, 192, 244, 0.7); color: #1b2838; } .sbc-card-foil-border { border: 2px solid var(--sbc-gold) !important; box-shadow: 0 0 12px rgba(199, 160, 46, 0.4); } /* ====== v1.2.4: 统一游戏汇总视图 (卡牌+徽章聚合) ====== */ .sbc-ugv-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; background: var(--sbc-bg-kpi-section); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius-lg); margin-bottom: 12px; } .sbc-ugv-tab { padding: 5px 14px; border: 1px solid var(--sbc-border); border-radius: 14px; background: transparent; color: var(--sbc-text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px; } .sbc-ugv-tab:hover { color: var(--sbc-text-bright); border-color: var(--sbc-border-hover); } .sbc-ugv-tab.active { background: rgba(102, 192, 244, 0.2); color: var(--sbc-accent); border-color: rgba(102, 192, 244, 0.4); } .sbc-ugv-tab-num { background: rgba(255, 255, 255, 0.1); padding: 1px 6px; border-radius: 8px; font-size: 10px; color: inherit; } .sbc-ugv-tab.active .sbc-ugv-tab-num { background: rgba(102, 192, 244, 0.3); } /* ====== v1.2.5: 汇总视图网格 (3列紧凑布局) ====== */ .sbc-ugv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .sbc-ugv-card { background: var(--sbc-bg-kpi); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius-lg); overflow: hidden; transition: all var(--sbc-transition); display: flex; flex-direction: column; } .sbc-ugv-card:hover { border-color: var(--sbc-border-hover); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .sbc-ugv-card-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(135deg, rgba(27, 40, 56, 0.6), rgba(26, 58, 74, 0.3)); border-bottom: 1px solid var(--sbc-border); } .sbc-ugv-card-img { width: 40px; height: 40px; border-radius: 6px; background: var(--sbc-bg-secondary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sbc-ugv-card-img img { width: 100%; height: 100%; object-fit: cover; } .sbc-ugv-card-title { flex: 1; min-width: 0; } .sbc-ugv-card-name { font-size: 12px; font-weight: 700; color: var(--sbc-text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbc-ugv-card-sub { font-size: 10px; color: var(--sbc-text-secondary); margin-top: 1px; } .sbc-ugv-card-body { padding: 8px 10px; } .sbc-ugv-track { margin-bottom: 8px; } .sbc-ugv-track:last-child { margin-bottom: 0; } .sbc-ugv-track-header { display: flex; align-items: center; justify-content: space-between; font-size: 10px; margin-bottom: 4px; gap: 6px; } .sbc-ugv-track-label { display: inline-flex; align-items: center; gap: 4px; color: var(--sbc-text-secondary); font-weight: 600; } .sbc-ugv-track-label-foil { color: var(--sbc-gold); } .sbc-ugv-track-value { color: var(--sbc-text-primary); font-weight: 700; font-size: 11px; } .sbc-ugv-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; display: flex; gap: 1px; } .sbc-ugv-bar-fill { height: 100%; background: linear-gradient(90deg, var(--sbc-accent), #88d5ff); transition: width 0.3s; } .sbc-ugv-bar-fill--complete { background: linear-gradient(90deg, var(--sbc-success), #a4d007); } .sbc-ugv-bar-fill--foil { background: linear-gradient(90deg, var(--sbc-gold), #ffd700); } .sbc-ugv-bar-fill--locked { background: rgba(231, 76, 60, 0.4); } .sbc-ugv-craftable-tag { display: inline-flex; align-items: center; gap: 3px; background: rgba(34, 197, 94, 0.18); color: var(--sbc-kpi-green); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; } .sbc-ugv-locked-tag { display: inline-flex; align-items: center; gap: 3px; background: rgba(231, 76, 60, 0.18); color: var(--sbc-kpi-red); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; } .sbc-ugv-maxed-tag { display: inline-flex; align-items: center; gap: 3px; background: rgba(199, 160, 46, 0.18); color: var(--sbc-gold); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; } .sbc-ugv-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--sbc-border); background: rgba(0, 0, 0, 0.15); font-size: 10px; } .sbc-ugv-foot-stats { display: flex; gap: 8px; color: var(--sbc-text-secondary); } .sbc-ugv-foot-stats strong { color: var(--sbc-text-bright); } .sbc-ugv-toggle { display: inline-flex; align-items: center; gap: 3px; color: var(--sbc-accent); cursor: pointer; user-select: none; font-size: 10px; font-weight: 600; } .sbc-ugv-toggle svg { transition: transform 0.2s; } .sbc-ugv-toggle.collapsed svg { transform: rotate(-90deg); } .sbc-ugv-detail { border-top: 1px solid var(--sbc-border); background: rgba(0, 0, 0, 0.2); padding: 10px 12px; max-height: 400px; overflow-y: auto; } .sbc-ugv-detail.collapsed { display: none; } .sbc-ugv-detail-title { font-size: 10px; color: var(--sbc-text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .sbc-ugv-badge-list { display: flex; flex-direction: column; gap: 5px; } .sbc-ugv-badge-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--sbc-border); font-size: 11px; } .sbc-ugv-badge-row--foil { border-color: rgba(199, 160, 46, 0.3); background: rgba(199, 160, 46, 0.05); } .sbc-ugv-badge-row-img { width: 28px; height: 28px; border-radius: 4px; background: var(--sbc-bg-secondary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sbc-ugv-badge-row-img img { width: 100%; height: 100%; object-fit: cover; } .sbc-ugv-badge-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sbc-text-primary); } .sbc-ugv-badge-row-level { color: var(--sbc-gold); font-weight: 700; font-size: 10px; } .sbc-ugv-badge-row-xp { color: var(--sbc-accent); font-size: 10px; } .sbc-ugv-badge-row-action { color: var(--sbc-accent); cursor: pointer; font-size: 10px; opacity: 0.7; transition: opacity 0.2s; } .sbc-ugv-badge-row-action:hover { opacity: 1; } .sbc-ugv-empty { text-align: center; padding: 40px 20px; color: var(--sbc-text-secondary); } .sbc-ugv-empty-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.5; } /* ====== v1.2.3: 活动勋章对比视图 ====== */ .sbc-activity-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .sbc-activity-card { background: var(--sbc-bg-card); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); padding: 8px; transition: all var(--sbc-transition); position: relative; overflow: hidden; } .sbc-activity-card:hover { border-color: var(--sbc-accent); box-shadow: var(--sbc-shadow-hover); transform: translateY(-1px); } .sbc-activity-card--obtained { border-color: var(--sbc-success); background: linear-gradient(135deg, var(--sbc-bg-card), rgba(92, 126, 16, 0.08)); } .sbc-activity-card--retired { opacity: 0.75; } .sbc-activity-card--retired::after { content: '绝版'; position: absolute; top: 0; right: 0; background: var(--sbc-danger); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 0 0 0 4px; } .sbc-activity-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .sbc-activity-card-icon { width: 32px; height: 32px; border-radius: 4px; background: var(--sbc-bg-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .sbc-activity-card-icon img { max-width: 100%; max-height: 100%; border-radius: 3px; } .sbc-activity-card-icon svg { width: 100%; height: 100%; border-radius: 3px; } .sbc-activity-card-name { font-size: 11px; font-weight: 600; color: var(--sbc-text-bright); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sbc-activity-card-year { font-size: 9px; color: var(--sbc-text-secondary); } .sbc-activity-card-info { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .sbc-activity-tag { padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; } .sbc-activity-tag--sale { background: rgba(168, 85, 247, 0.2); color: var(--sbc-purple); } .sbc-activity-tag--collection { background: rgba(6, 182, 212, 0.2); color: var(--sbc-cyan); } .sbc-activity-tag--awards { background: rgba(199, 160, 46, 0.2); color: var(--sbc-gold); } .sbc-activity-tag--community { background: rgba(16, 185, 129, 0.2); color: var(--sbc-emerald); } .sbc-activity-tag--event { background: rgba(245, 158, 11, 0.2); color: var(--sbc-warning); } .sbc-activity-tag--obtained { background: rgba(92, 126, 16, 0.25); color: var(--sbc-success); } .sbc-activity-tag--missing { background: rgba(231, 76, 60, 0.2); color: var(--sbc-danger); } .sbc-activity-level { font-size: 10px; color: var(--sbc-text-secondary); margin-top: 3px; } /* v1.2.3: 活动勋章 KPI 汇总 (参考 sglv stats-dashboard 网格设计) */ .sbc-activity-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; background: var(--sbc-bg-kpi-section); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius-lg); padding: 12px; } .sbc-activity-summary-item { background: var(--sbc-bg-kpi); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; } .sbc-activity-summary-num { font-size: 20px; font-weight: 800; line-height: 1.2; } .sbc-activity-summary-label { font-size: 10px; color: var(--sbc-text-secondary); } /* ====== v1.2.3: 卡牌详情弹窗 ====== */ .sbc-detail-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 17, 32, 0.85); z-index: 100000; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; /* v1.2.14-fix6: 浮窗自身管理滚动,overlay 只需居中 */ padding: 20px; } .sbc-detail-overlay.active { display: flex; } .sbc-detail-panel { background: rgba(21, 30, 46, 0.97); border: 1px solid rgba(102, 192, 244, 0.2); border-radius: var(--sbc-radius-xl); max-width: 800px; width: 100%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); overflow: hidden; /* v1.2.14-fix6: 限制浮窗最大高度,超出部分滚动 */ max-height: calc(100vh - 80px); display: flex; flex-direction: column; } .sbc-detail-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgba(27, 40, 56, 0.97), rgba(26, 58, 74, 0.8)); border-bottom: 1px solid var(--sbc-border); } .sbc-detail-header img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; } .sbc-detail-title { font-size: 16px; font-weight: 700; color: var(--sbc-text-bright); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sbc-detail-subtitle { font-size: 13px; color: var(--sbc-text-secondary); margin-top: 2px; } /* v1.2.14-fix7: 地区旗帜+货币符号徽章 */ .sbc-detail-region-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; background: rgba(102, 192, 244, 0.1); border: 1px solid rgba(102, 192, 244, 0.25); font-size: 11px; font-weight: 600; color: var(--sbc-accent); flex-shrink: 0; margin-left: 4px; } .sbc-detail-region-flag { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; } .sbc-detail-region-flag svg { width: 18px; height: 14px; border-radius: 2px; display: block; } .sbc-detail-region-currency { font-variant-numeric: tabular-nums; } .sbc-detail-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--sbc-text-secondary); font-size: 22px; padding: 4px 8px; border-radius: 4px; transition: all var(--sbc-transition); flex-shrink: 0; } .sbc-detail-close:hover { background: var(--sbc-bg-hover); color: var(--sbc-text-bright); } /* v1.2.14-fix14: 标题栏右上角快捷链接组(fix15: 紧挨关闭按钮,无 margin-left:auto 避免与 close 的 auto 冲突产生间隙) */ .sbc-detail-quicklinks { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-right: 2px; } .sbc-detail-quicklink { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--sbc-text-secondary); background: rgba(102,192,244,0.06); border: 1px solid rgba(102,192,244,0.15); text-decoration: none; transition: all var(--sbc-transition); white-space: nowrap; } .sbc-detail-quicklink:hover { background: rgba(102,192,244,0.15); color: var(--sbc-accent); border-color: rgba(102,192,244,0.4); } .sbc-detail-quicklink--accent { color: var(--sbc-accent); background: rgba(102,192,244,0.1); border-color: rgba(102,192,244,0.3); } .sbc-detail-quicklink--accent:hover { background: rgba(102,192,244,0.2); } /* v1.2.14-fix14: 批量购买按钮(求购价按钮下方) */ .sbc-detail-batch-buy-btn { margin-top: 0; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5ba83e, #3d8b2a); border: 1px solid rgba(255,255,255,0.15); cursor: pointer; transition: all var(--sbc-transition); display: inline-flex; align-items: center; gap: 4px; } .sbc-detail-batch-buy-btn:hover { background: linear-gradient(135deg, #6cba4a, #4a9d33); transform: translateY(-1px); } .sbc-detail-batch-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .sbc-detail-batch-buy-wrap { display: flex; justify-content: flex-end; margin-top: 0; margin-bottom: 8px; } .sbc-detail-body { padding: 14px 16px; overflow-y: auto; flex: 1 1 auto; } /* v1.2.14-fix6: 浮窗滚动条样式 */ .sbc-detail-body::-webkit-scrollbar { width: 8px; } .sbc-detail-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; } .sbc-detail-body::-webkit-scrollbar-thumb { background: rgba(102,192,244,0.3); border-radius: 4px; } .sbc-detail-body::-webkit-scrollbar-thumb:hover { background: rgba(102,192,244,0.5); } /* v1.2.14-fix2: 大屏浮窗变体(游戏详情) */ .sbc-detail-overlay--large { padding: 24px 16px; } .sbc-detail-panel--large { max-width: 1080px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; } .sbc-detail-panel--large .sbc-detail-body { overflow-y: auto; flex: 1; padding: 16px 18px; } .sbc-detail-panel--large .sbc-detail-header { padding: 12px 18px; } .sbc-detail-panel--large .sbc-detail-header img { width: 52px; height: 52px; } .sbc-detail-panel--large .sbc-detail-title { font-size: 17px; } /* v1.2.14-fix2: 游戏详情浮窗 - 分区 */ .sbc-gdp-section { margin-bottom: 18px; } .sbc-gdp-section:last-child { margin-bottom: 0; } .sbc-gdp-section--badges { padding-bottom: 14px; border-bottom: 1px solid var(--sbc-border); } .sbc-gdp-section--cards { padding-top: 4px; } /* v1.2.14-fix2: 游戏详情浮窗 - 徽章列表 */ .sbc-gdp-badge-list { display: flex; flex-direction: column; gap: 6px; } .sbc-gdp-badge-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--sbc-bg-card); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); transition: all var(--sbc-transition); } .sbc-gdp-badge-row:hover { border-color: var(--sbc-accent); background: var(--sbc-bg-secondary); } .sbc-gdp-badge-row--foil { border-left: 3px solid #ffb84d; } .sbc-gdp-badge-row-img { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: var(--sbc-bg-secondary); } .sbc-gdp-badge-row-img img { width: 100%; height: 100%; object-fit: cover; } .sbc-gdp-badge-row-info { flex: 1; min-width: 0; } .sbc-gdp-badge-row-name { font-size: 13px; font-weight: 600; color: var(--sbc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbc-gdp-badge-row-meta { font-size: 11px; color: var(--sbc-text-secondary); margin-top: 2px; } .sbc-gdp-badge-row-action { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--sbc-radius); background: rgba(102, 192, 244, 0.12); color: var(--sbc-accent); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--sbc-transition); } .sbc-gdp-badge-row-action:hover { background: rgba(102, 192, 244, 0.25); } .sbc-detail-info-grid { /* v1.2.14-fix6: 紧凑布局,5 列自适应 */ display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin-bottom: 8px; } .sbc-detail-info-item { background: var(--sbc-bg-kpi); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); padding: 6px 8px; text-align: center; } .sbc-detail-info-item--muted .sbc-detail-info-value { color: var(--sbc-text-secondary); } .sbc-detail-info-label { font-size: 9.5px; color: var(--sbc-text-secondary); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.3px; } .sbc-detail-info-value { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; } .sbc-detail-cards-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--sbc-text-primary); } .sbc-detail-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .sbc-detail-card-item { background: var(--sbc-bg-card); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); padding: 8px; text-align: center; transition: all var(--sbc-transition); } .sbc-detail-card-item:hover { border-color: var(--sbc-accent); } .sbc-detail-card-item img { width: 100%; max-width: 100px; height: auto; border-radius: 4px; margin-bottom: 6px; } .sbc-detail-card-name { font-size: 11px; color: var(--sbc-text-secondary); line-height: 1.3; word-break: break-word; } .sbc-detail-card-price { font-size: 12px; font-weight: 600; color: var(--sbc-emerald); margin-top: 2px; } .sbc-detail-card-price--none { color: var(--sbc-text-secondary); } .sbc-detail-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } /* v1.2.14: 详情浮窗按需抓取卡牌图片/价格 */ .sbc-detail-card-link { display: block; text-decoration: none; color: inherit; } .sbc-detail-card-meta { font-size: 10px; color: var(--sbc-text-secondary); margin-top: 2px; } .sbc-detail-cards-status { display: flex; align-items: center; gap: 10px; padding: 14px 2px; font-size: 13px; color: var(--sbc-text-secondary); } .sbc-detail-cards-status .sbc-market-spinner { flex: 0 0 auto; } .sbc-detail-cards-status--error { color: #ff6b5a; } /* v1.2.14-fix4: 市场空数据提示 */ .sbc-detail-cards-status--empty { color: var(--sbc-text-secondary); background: rgba(255, 184, 77, 0.08); border: 1px dashed rgba(255, 184, 77, 0.3); border-radius: var(--sbc-radius); padding: 10px 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .sbc-detail-retry-btn { margin-left: 10px; padding: 4px 12px; border-radius: var(--sbc-radius); border: 1px solid rgba(102, 192, 244, 0.35); background: rgba(42, 71, 94, 0.9); color: var(--sbc-accent); font-size: 12px; cursor: pointer; } .sbc-detail-retry-btn:hover { border-color: var(--sbc-accent); } /* v1.2.14: 卡牌区工具栏(封面/列表切换 + 求购价按钮) */ .sbc-detail-cards-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .sbc-detail-cards-toolbar .sbc-detail-cards-title { margin-bottom: 0; flex: 1 1 auto; } .sbc-detail-cards-view-toggle { display: inline-flex; border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); overflow: hidden; background: var(--sbc-bg-secondary); } .sbc-detail-cards-view-btn { padding: 4px 12px; border: none; background: transparent; color: var(--sbc-text-secondary); font-size: 12px; cursor: pointer; transition: all var(--sbc-transition); } .sbc-detail-cards-view-btn:hover { color: var(--sbc-text-primary); } .sbc-detail-cards-view-btn.active { background: var(--sbc-accent); color: #0a1416; font-weight: 600; } .sbc-detail-cards-buyorder-btn { padding: 4px 12px; border-radius: var(--sbc-radius); border: 1px solid rgba(255, 184, 77, 0.35); background: rgba(94, 71, 42, 0.5); color: #ffb84d; font-size: 12px; cursor: pointer; transition: all var(--sbc-transition); } .sbc-detail-cards-buyorder-btn:hover:not(:disabled) { border-color: #ffb84d; background: rgba(94, 71, 42, 0.8); } .sbc-detail-cards-buyorder-btn:disabled { opacity: 0.6; cursor: wait; } .sbc-detail-cards-container { display: flex; flex-direction: column; gap: 16px; } /* v1.2.14-fix: 移除 .hidden 规则(改为只渲染当前激活视图,不再需要 CSS 切换) */ /* v1.2.14: 普通/闪卡分区 */ .sbc-detail-cards-section { display: flex; flex-direction: column; gap: 8px; } .sbc-detail-cards-section--foil .sbc-detail-cards-section-title { color: #ffb84d; } .sbc-detail-cards-section-title { font-size: 13px; font-weight: 600; color: var(--sbc-text-primary); display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--sbc-border); } .sbc-detail-cards-section-meta { font-size: 11px; font-weight: 400; color: var(--sbc-text-secondary); } /* v1.2.14: 封面视图卡牌(增强) */ .sbc-detail-card-item--foil { border-color: rgba(255, 184, 77, 0.4); box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.15); } .sbc-detail-card-item--foil:hover { border-color: #ffb84d; } /* v1.2.14-fix: 未拥有卡牌灰色遮罩 */ .sbc-detail-card-item--unowned { position: relative; } .sbc-detail-card-item--unowned img { filter: grayscale(1) brightness(0.5) opacity(0.6); } .sbc-detail-card-item--unowned::after { content: ''; position: absolute; inset: 0; border-radius: var(--sbc-radius); background: rgba(13, 17, 23, 0.45); pointer-events: none; z-index: 1; } .sbc-detail-card-item--unowned .sbc-detail-card-name { color: var(--sbc-text-secondary); opacity: 0.65; } .sbc-detail-card-item--unowned .sbc-detail-card-prices { opacity: 0.5; } .sbc-detail-card-item--unowned:hover { border-color: var(--sbc-border); } .sbc-detail-card-item--unowned:hover img { filter: grayscale(0.8) brightness(0.7) opacity(0.8); } .sbc-detail-card-img-placeholder { width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; background: var(--sbc-bg-secondary); border-radius: 4px; font-size: 24px; margin-bottom: 6px; } .sbc-detail-card-owned-mark { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; background: var(--sbc-emerald); color: #0a1416; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .sbc-detail-card-item { position: relative; } .sbc-detail-card-prices { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; } .sbc-detail-card-price { font-size: 11px; font-weight: 600; line-height: 1.3; } .sbc-detail-card-price--sell { color: var(--sbc-emerald); } .sbc-detail-card-price--net { color: var(--sbc-accent); font-size: 10px; } .sbc-detail-card-price--buy { color: #ffb84d; } .sbc-detail-card-price--none { color: var(--sbc-text-secondary); font-weight: 400; } .sbc-detail-card-price--pending { color: var(--sbc-text-secondary); font-weight: 400; opacity: 0.6; } .sbc-detail-card-price--error { color: #ff6b5a; font-size: 10px; } .sbc-detail-card-foil-tag { font-size: 9px; font-style: normal; padding: 1px 4px; border-radius: 3px; background: rgba(255, 184, 77, 0.2); color: #ffb84d; margin-left: 4px; vertical-align: middle; } /* v1.2.14: 列表视图卡牌行(参考 steam-store-card-prices.sscp-row) */ .sbc-detail-cards-list { display: flex; flex-direction: column; gap: 4px; } .sbc-detail-card-list-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--sbc-bg-card); border: 1px solid var(--sbc-border); border-radius: var(--sbc-radius); text-decoration: none; color: inherit; transition: all var(--sbc-transition); } .sbc-detail-card-list-row:hover { border-color: var(--sbc-accent); background: var(--sbc-bg-secondary); } .sbc-detail-card-list-row--foil { border-left: 3px solid #ffb84d; } /* v1.2.14-fix: 未拥有卡牌列表行灰色遮罩 */ .sbc-detail-card-list-row--unowned { opacity: 0.6; } .sbc-detail-card-list-row--unowned .sbc-detail-card-list-icon { filter: grayscale(1) brightness(0.6); } .sbc-detail-card-list-row--unowned .sbc-detail-card-list-name { color: var(--sbc-text-secondary); } .sbc-detail-card-list-row--unowned:hover { opacity: 0.85; } .sbc-detail-card-list-owned { color: var(--sbc-emerald); font-weight: 700; width: 14px; text-align: center; flex: 0 0 auto; } .sbc-detail-card-list-unowned { color: var(--sbc-text-secondary); width: 14px; text-align: center; flex: 0 0 auto; } .sbc-detail-card-list-icon { width: 32px; height: 22px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; background: var(--sbc-bg-secondary); } .sbc-detail-card-list-icon--empty { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .sbc-detail-card-list-main { flex: 1 1 auto; min-width: 0; } .sbc-detail-card-list-name { font-size: 12px; color: var(--sbc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; } .sbc-detail-card-list-prices { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .sbc-detail-card-list-prices .sbc-detail-card-price { font-size: 11px; } .sbc-detail-card-list-prices .sbc-detail-card-meta { margin-top: 0; } /* v1.2.14: 统一游戏汇总 - 卡牌分区 */ .sbc-ugv-detail-section { margin-bottom: 12px; } .sbc-ugv-detail-section:last-child { margin-bottom: 0; } .sbc-ugv-detail-section--cards { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--sbc-border); } .sbc-ugv-cards-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .sbc-ugv-cards-title { font-size: 13px; font-weight: 600; color: var(--sbc-text-primary); flex: 1 1 auto; } .sbc-ugv-cards-placeholder { padding: 16px 12px; text-align: center; font-size: 12px; color: var(--sbc-text-secondary); background: var(--sbc-bg-secondary); border-radius: var(--sbc-radius); border: 1px dashed var(--sbc-border); } /* 统一游戏卡片内的卡牌网格(略小) */ .sbc-ugv-detail-section--cards .sbc-detail-cards-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } .sbc-ugv-detail-section--cards .sbc-detail-card-item { padding: 6px; } .sbc-ugv-detail-section--cards .sbc-detail-card-item img { max-width: 84px; } /* v1.2.16: 鉴赏家推荐聚合样式 */ .sbc-curator-panel { margin: 16px 0; padding: 16px; background: var(--sbc-bg-card); border: 1px solid var(--sbc-border); border-radius: 10px; color: var(--sbc-text-primary); font-family: "Motiva Sans", Arial, sans-serif; } .sbc-curator-panel h2 { margin: 0 0 4px; font-size: 18px; color: var(--sbc-text-bright); } .sbc-curator-panel .sbc-curator-sub { font-size: 12px; color: var(--sbc-text-secondary); margin-bottom: 12px; } .sbc-curator-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; } .sbc-curator-stat { background: var(--sbc-bg-secondary); border-radius: 8px; padding: 10px; border: 1px solid var(--sbc-border); } .sbc-curator-stat-label { font-size: 11px; color: var(--sbc-text-secondary); text-transform: uppercase; letter-spacing: .5px; } .sbc-curator-stat-value { font-size: 20px; font-weight: 700; color: var(--sbc-text-bright); margin-top: 2px; } .sbc-curator-stat-desc { font-size: 11px; color: var(--sbc-text-secondary); margin-top: 2px; } .sbc-curator-dist { display: flex; gap: 6px; margin-top: 6px; } .sbc-curator-dist-seg { flex: 1; height: 10px; border-radius: 4px; } .sbc-curator-top { margin-bottom: 14px; } .sbc-curator-top-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; } .sbc-curator-top-item:hover { background: var(--sbc-bg-hover); } .sbc-curator-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--sbc-bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--sbc-accent); flex-shrink: 0; } .sbc-curator-top-item:nth-child(1) .sbc-curator-rank { background: var(--sbc-gold); color: #1b2838; } .sbc-curator-top-item:nth-child(2) .sbc-curator-rank { background: #b8c3cc; color: #1b2838; } .sbc-curator-top-item:nth-child(3) .sbc-curator-rank { background: #cd7f32; color: #fff; } .sbc-curator-top-name { flex: 1; font-size: 13px; color: var(--sbc-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbc-curator-top-count { font-size: 12px; color: var(--sbc-accent); font-weight: 600; } .sbc-curator-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .sbc-curator-btn { background: var(--sbc-bg-secondary); color: var(--sbc-text-primary); border: 1px solid var(--sbc-border); border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; transition: all .15s; } .sbc-curator-btn:hover { background: var(--sbc-bg-hover); border-color: var(--sbc-accent); } .sbc-curator-btn.active { background: var(--sbc-accent); color: #1b2838; border-color: var(--sbc-accent); font-weight: 600; } .sbc-curator-list { display: flex; flex-direction: column; gap: 8px; } .sbc-curator-item { display: flex; gap: 12px; padding: 10px; background: var(--sbc-bg-secondary); border: 1px solid var(--sbc-border); border-radius: 8px; transition: border-color .15s; } .sbc-curator-item:hover { border-color: var(--sbc-border-hover); } .sbc-curator-item img.sbc-curator-cap { width: 120px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #000; } .sbc-curator-item-body { flex: 1; min-width: 0; } .sbc-curator-item-name { font-size: 14px; color: var(--sbc-text-bright); font-weight: 600; } .sbc-curator-item-name a { color: var(--sbc-text-bright); text-decoration: none; } .sbc-curator-item-name a:hover { color: var(--sbc-accent); } .sbc-curator-rec-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(166, 111, 38, .25); color: var(--sbc-gold); border: 1px solid rgba(199, 160, 46, .5); border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight: 600; margin-left: 8px; vertical-align: middle; } .sbc-curator-rec-badge.not { background: rgba(231, 76, 60, .2); color: var(--sbc-danger); border-color: rgba(231, 76, 60, .5); } .sbc-curator-avatars { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .sbc-curator-avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--sbc-border); cursor: pointer; transition: transform .12s; } .sbc-curator-avatar:hover { transform: scale(1.15); border-color: var(--sbc-accent); } .sbc-curator-avatar-more { font-size: 11px; color: var(--sbc-text-secondary); padding: 0 4px; } .sbc-curator-status { font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; } .sbc-curator-status--rec { background: rgba(92, 126, 16, .25); color: #a4d007; } .sbc-curator-status--not { background: rgba(231, 76, 60, .2); color: var(--sbc-danger); } .sbc-curator-progress { margin-top: 8px; font-size: 12px; color: var(--sbc-text-secondary); } .sbc-curator-empty { padding: 24px; text-align: center; color: var(--sbc-text-secondary); font-size: 13px; } /* 徽章页卡片上的鉴赏家推荐标记 */ .sbc-card-curator-badge { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; background: rgba(166, 111, 38, .85); color: #fff; border: 1px solid rgba(199, 160, 46, .8); border-radius: 10px; padding: 2px 7px; font-size: 10px; font-weight: 600; cursor: pointer; } .sbc-card-curator-badge:hover { background: rgba(199, 160, 46, .95); } /* 鉴赏家推荐浮窗(徽章页点击标记展开) */ .sbc-curator-popup { position: fixed; z-index: 10000; background: var(--sbc-bg-card); border: 1px solid var(--sbc-border-hover); border-radius: 8px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 320px; } .sbc-curator-popup-title { font-size: 13px; color: var(--sbc-text-bright); font-weight: 600; margin-bottom: 8px; } .sbc-curator-popup-list { display: flex; flex-direction: column; gap: 6px; } .sbc-curator-popup-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sbc-text-primary); cursor: pointer; padding: 4px; border-radius: 4px; } .sbc-curator-popup-item:hover { background: var(--sbc-bg-hover); } .sbc-curator-popup-item img { width: 20px; height: 20px; border-radius: 50%; } /* ============================================================ v1.3.1: 性能与 UI 交互增强 CSS ============================================================ */ /* --- 视图切换过渡动画 --- */ .sbc-view-enter { animation: sbcViewFadeIn var(--sbc-transition-ms, 280ms) cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes sbcViewFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .sbc-view-exit { animation: sbcViewFadeOut var(--sbc-transition-ms, 280ms) cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes sbcViewFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* --- 加载骨架屏 --- */ .sbc-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 4px 0; } .sbc-skeleton-card { background: var(--sbc-bg-card); border: 1px solid var(--sbc-border); border-radius: 10px; overflow: hidden; animation: sbcShimmer 1.4s ease-in-out infinite; } .sbc-skeleton-img { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%); background-size: 400% 100%; } .sbc-skeleton-body { padding: 10px 12px; } .sbc-skeleton-line { height: 10px; border-radius: 4px; margin-bottom: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%); background-size: 400% 100%; } .sbc-skeleton-line--w60 { width: 60%; } .sbc-skeleton-line--w40 { width: 40%; } @keyframes sbcShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* --- 增强卡片 hover 微交互 --- */ .sbc-card { transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease, border-color 0.2s ease; will-change: transform; } .sbc-card:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--sbc-accent); } .sbc-card:active { transform: translateY(-1px) scale(1.005); } .sbc-card-img-wrap img { transition: transform 0.3s ease, filter 0.3s ease; } .sbc-card:hover .sbc-card-img-wrap img { transform: scale(1.06); } .sbc-card-detail-btn { transition: background 0.15s ease, color 0.15s ease, opacity 0.2s ease; opacity: 0.7; } .sbc-card:hover .sbc-card-detail-btn { opacity: 1; } /* --- 增强工具栏按钮交互 --- */ .sbc-btn { transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease; } .sbc-btn:hover { transform: translateY(-1px); } .sbc-btn:active { transform: translateY(0); } .sbc-btn--accent { box-shadow: 0 0 0 1px rgba(102, 192, 244, 0.3); } /* --- 响应式工具栏：小屏溢出处理 --- */ @media (max-width: 1100px) { .sbc-toolbar { flex-wrap: wrap; gap: 6px; } .sbc-toolbar-left, .sbc-toolbar-right { flex-wrap: wrap; } } @media (max-width: 768px) { .sbc-toolbar-left .sbc-select { max-width: 120px; } .sbc-btn { padding: 4px 8px; font-size: 11px; } .sbc-btn svg { width: 12px; height: 12px; } } /* --- 增强分页按钮交互 --- */ .sbc-page-btn { transition: background 0.12s ease, transform 0.12s ease; } .sbc-page-btn:not(:disabled):hover { transform: translateY(-1px); } .sbc-page-btn:not(:disabled):active { transform: translateY(0); } /* --- 增强进度条动画 --- */ .sbc-card-progress-fill { transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- 键盘快捷键提示 --- */ .sbc-kbd { display: inline-block; padding: 1px 5px; font-size: 10px; font-family: monospace; line-height: 16px; color: var(--sbc-text-secondary); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; vertical-align: middle; } .sbc-kbd-hint { position: fixed; bottom: 12px; right: 12px; z-index: 9000; display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11px; color: var(--sbc-text-secondary); background: rgba(20, 27, 50, 0.92); border: 1px solid var(--sbc-border); border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.3); opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .sbc-kbd-hint--visible { opacity: 1; transform: translateY(0); } /* --- 懒加载图片占位 --- */ .sbc-lazy-img { background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 37%, rgba(255,255,255,0.03) 63%); background-size: 200% 100%; animation: sbcShimmer 1.6s ease-in-out infinite; } .sbc-lazy-img.sbc-lazy-loaded { background: none; animation: none; } `; // ============================================================ // 全局状态 // ============================================================ let allBadges = []; let filteredBadges = []; let currentPage = 1; let cardViewVisible = true; let viewMode = 'grid'; // 'grid' | 'grouped' | 'alldb' let analysisVisible = false; let analysisActiveTab = 'overview'; let marketPrices = {}; let marketLoading = false; // v1.2.10 修复: 单一进行中 promise,防止后台预加载和手动点击并发导致计数翻倍 let _marketLoadPromise = null; // v1.2.10: 性能优化新增状态 let marketInflight = new Set(); // 正在请求中的 appId,用于去重 let marketDone = new Set(); // 已成功(或失败)处理的 appId let marketConsecutiveFails = 0; // 连续失败计数 let marketProgress = { total: 0, done: 0, successCount: 0, startedAt: 0 }; let marketPauseUntil = 0; // 被限流后暂停至该时间戳 let valueScores = {}; let craftableBadges = []; // v1.2.1: SteamCardExchange 卡牌数据库 let cardDatabase = {}; // { appId: { name, size } } let cardDbLoaded = false; let cardDbLoading = false; let ownedAppIds = {}; // 用户已拥有的 appId -> true // v1.2.3: 勋章分类状态 let activityBadges = []; // 活动勋章列表 let gameBadges = []; // 游戏勋章列表 // v1.2.16: 鉴赏家推荐聚合状态 // curatorRecs: { appId: { curators: [...], total: N, fetchedAt: ts } } let curatorRecs = {}; let curatorLoading = false; let curatorLoadProgress = { total: 0, done: 0 }; // v1.3.3: Steam 已停用 ajaxgetcuratorsforapp API（返回 HTML 而非 JSON），标记后禁用功能 let curatorApiDisabled = false; // 限流: 采用"预留位"模式,在 sleep 前更新 lastRequestTime 防止并发竞态 let curatorLastRequestTime = 0; // 共享默认 filter set 必须为 new Set 实例,防止跨组件引用共享 // 组件使用时需通过 new Set(curatorDefaultFilterSet) 复制独立副本 let curatorDefaultFilterSet = new Set(['all']); // ============================================================ // 工具函数 // ============================================================ function escapeHtml(str) { if (!str) return ''; return String(str).replace(/[&<>"']/g, function(c) { return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]; }); } // v1.3.0: 游戏封面图标 URL (参考 wishlist sidebar CDN 逻辑) var SBC_CDN_BASE = 'https://cdn.cloudflare.steamstatic.com/steam/apps/'; // v1.3.3: 占位图 data URI 中所有单引号改用 %27 编码 // 原因: SBC_COVER_PLACEHOLDER 被嵌入 onerror 内联 JS 的单引号字符串中, // 未编码的单引号会截断字符串导致 SyntaxError: Unexpected identifier 'http' var SBC_COVER_PLACEHOLDER = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2046%2022%27%3E%3Crect%20fill=%27%23141b32%27%20width=%2746%27%20height=%2722%27%20rx=%273%27/%3E%3Ctext%20x=%2750%25%27%20y=%2750%25%27%20text-anchor=%27middle%27%20dy=%27.35em%27%20fill=%27%23475569%27%20font-size=%278%27%3E🎮%3C/text%3E%3C/svg%3E"; function getGameCoverHtml(appId) { if (!appId) return '

'; // v1.3.1 R2: 多 CDN 回退链（cloudflare → akamai → shared → 占位图） var urls = CONFIG.CDN_CHAIN.map(function(cdn) { return cdn + appId + '/capsule_184x69.jpg'; }); var primaryUrl = urls[0]; var cdnUrlsAttr = JSON.stringify(urls); // onerror 逐个尝试 CDN 链中的下一个，全部失败后回退占位图 var onerrorHandler = "var i=parseInt(this.dataset.cdnIdx||'0')+1;var u=JSON.parse(this.dataset.cdnUrls||'[]');if(i'; } // v1.3.1: 增强 Toast — 支持堆叠、自定义时长、进度模式 var _toastStack = []; function showToast(message, type, opts) { type = type || 'info'; opts = opts || {}; var duration = opts.duration || CONFIG.TOAST_DEFAULT_DURATION; var stack = opts.stack !== false; // 默认堆叠 if (!stack) { // 非堆叠模式：移除旧 toast _toastStack.forEach(function(t) { t.remove(); }); _toastStack = []; } // 限制堆叠数量 if (_toastStack.length >= 4) { var oldest = _toastStack.shift(); if (oldest) oldest.remove(); } var toast = document.createElement('div'); toast.className = 'sbc-toast' + (type === 'success' ? ' sbc-toast--success' : '') + (type === 'error' ? ' sbc-toast--error' : '') + (type === 'warning' ? ' sbc-toast--warning' : ''); if (opts.html) toast.innerHTML = message; else toast.textContent = message; // 堆叠定位 if (stack && _toastStack.length > 0) { var offset = _toastStack.reduce(function(sum, t) { return sum + t.offsetHeight + CONFIG.TOAST_STACK_GAP; }, 0); toast.style.bottom = (16 + offset) + 'px'; } document.body.appendChild(toast); _toastStack.push(toast); // 进度条模式：不自动消失，由调用方关闭 if (opts.persistent) return toast; var timer = setTimeout(function() { _dismissToast(toast); }, duration); // 鼠标悬停暂停自动消失 toast.addEventListener('mouseenter', function() { clearTimeout(timer); toast.style.opacity = '1'; }); toast.addEventListener('mouseleave', function() { timer = setTimeout(function() { _dismissToast(toast); }, 1000); }); return toast; } function _dismissToast(toast) { if (!toast || !toast.parentNode) return; toast.style.opacity = '0'; toast.style.transform = 'translateX(20px)'; setTimeout(function() { toast.remove(); var idx = _toastStack.indexOf(toast); if (idx >= 0) _toastStack.splice(idx, 1); // 重新排列剩余 toast var offset = 0; _toastStack.forEach(function(t) { t.style.bottom = (16 + offset) + 'px'; offset += t.offsetHeight + CONFIG.TOAST_STACK_GAP; }); }, 300); } /** * v1.2.10: 显示/更新市场价格加载进度条(粘性顶部,实时刷新) * 用法: showMarketProgress({ done, total, success }) * showMarketProgress(null) 关闭 */ function showMarketProgress(progress) { var existing = document.getElementById('sbc-market-progress'); if (!progress) { if (existing) existing.remove(); return; } if (!existing) { existing = document.createElement('div'); existing.id = 'sbc-market-progress'; existing.className = 'sbc-market-progress'; existing.innerHTML = '

' + '加载市场价格中...' + '

' + '0/0'; // 插到 sbc-root 顶部 var root = document.getElementById('sbc-root'); if (root && root.firstChild) root.insertBefore(existing, root.firstChild); else if (root) root.appendChild(existing); else document.body.appendChild(existing); } var pct = progress.total > 0 ? Math.min(100, Math.round((progress.done / progress.total) * 100)) : 0; // v1.2.10 修复: done 兜底不超过 total,避免出现 "260/150" 这种显示异常 var shownDone = Math.min(progress.done || 0, progress.total || 0); var fillEl = existing.querySelector('.sbc-market-progress-fill'); var textEl = existing.querySelector('.sbc-market-progress-text'); var labelEl = existing.querySelector('#sbc-market-progress-label'); if (fillEl) fillEl.style.right = (100 - pct) + '%'; if (textEl) textEl.textContent = shownDone + '/' + progress.total + ' (' + pct + '%)'; if (labelEl && progress.success != null) { labelEl.textContent = '加载市场价格 · 成功 ' + progress.success; } } function debounce(fn, delay) { var timer = null; return function() { var ctx = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(ctx, args); }, delay); }; } function delay(ms) { return new Promise(function(resolve) { setTimeout(resolve, ms); }); } // ============================================================ // v1.3.1 R2: 网络与缓存增强工具集（参考 sglv-core.lib.js 最佳实践） // ============================================================ // --- gmFetchText: 带重试的 GM_xmlhttpRequest 文本包装 --- // 参考: sglv-core.lib.js#gmFetchText function gmFetchText(url, options) { options = options || {}; var timeout = options.timeout || CONFIG.GM_FETCH_DEFAULT_TIMEOUT; var retries = options.retries != null ? options.retries : CONFIG.GM_FETCH_DEFAULT_RETRIES; var method = options.method || 'GET'; var headers = options.headers || { 'Accept': 'application/json,text/html,text/plain,*/*' }; var data = options.data || null; return new Promise(function(resolve, reject) { var attempt = 0; function doRequest() { GM_xmlhttpRequest({ method: method, url: url, headers: headers, data: data, timeout: timeout, responseType: 'text', onload: function(r) { if (r.status >= 200 && r.status < 300) { resolve(r.responseText); } else if (r.status === 429 || r.status >= 500) { // 可重试的错误 if (attempt < retries) { attempt++; var backoff = attempt === 1 ? CONFIG.CONCURRENT_POOL_BACKOFF_1 : CONFIG.CONCURRENT_POOL_BACKOFF_2; setTimeout(doRequest, backoff); } else { reject(new Error('HTTP ' + r.status)); } } else { reject(new Error('HTTP ' + r.status)); } }, onerror: function() { if (attempt < retries) { attempt++; var backoff = attempt === 1 ? CONFIG.CONCURRENT_POOL_BACKOFF_1 : CONFIG.CONCURRENT_POOL_BACKOFF_2; setTimeout(doRequest, backoff); } else { reject(new Error('网络请求失败')); } }, ontimeout: function() { if (attempt < retries) { attempt++; var backoff = attempt === 1 ? CONFIG.CONCURRENT_POOL_BACKOFF_1 : CONFIG.CONCURRENT_POOL_BACKOFF_2; setTimeout(doRequest, backoff); } else { reject(new Error('请求超时')); } } }); } doRequest(); }); } // --- gmFetchJson: 带重试的 GM_xmlhttpRequest JSON 包装 --- function gmFetchJson(url, options) { return gmFetchText(url, options).then(function(text) { try { return JSON.parse(text); } catch (e) { throw new Error('JSON 解析失败: ' + e.message); } }); } // --- concurrentPool: 智能并发池（滑动窗口 + 429 降并发 + 指数退避） --- // 参考: sglv-core.lib.js#concurrentPool async function concurrentPool(tasks, concurrency, onProgress) { var results = new Array(tasks.length); var nextIndex = 0; var completed = 0; var activeConcurrency = concurrency; var MAX_RETRY = CONFIG.CONCURRENT_POOL_MAX_RETRY; async function runTask(index) { var retryCount = 0; while (retryCount <= MAX_RETRY) { try { var result = await tasks[index](); results[index] = { index: index, status: 'fulfilled', value: result }; return; } catch (e) { retryCount++; if (retryCount <= MAX_RETRY) { var delayMs = retryCount === 1 ? CONFIG.CONCURRENT_POOL_BACKOFF_1 : CONFIG.CONCURRENT_POOL_BACKOFF_2; await delay(delayMs); // 429 自动降并发 var msg = String(e && e.message || ''); if (msg.indexOf('429') >= 0 || msg.indexOf('rate') >= 0) { activeConcurrency = Math.max( CONFIG.CONCURRENT_POOL_MIN_CONCURRENCY, Math.floor(activeConcurrency * CONFIG.CONCURRENT_POOL_DECREASE_RATIO) ); } } else { results[index] = { index: index, status: 'rejected', reason: e }; } } } } async function worker() { while (nextIndex < tasks.length) { var idx = nextIndex++; await runTask(idx); completed++; if (onProgress) { try { onProgress(completed, tasks.length); } catch (e) {} } } } var workerCount = Math.min(activeConcurrency, tasks.length); var workers = []; for (var w = 0; w < workerCount; w++) workers.push(worker()); await Promise.all(workers); return results; } // --- negCache: 负缓存（避免重复请求失败项） --- // 参考: sglv-core.lib.js#negCache var negCache = (function() { var _cache = {}; return { get: function(key) { var entry = _cache[key]; if (entry && Date.now() - entry.time < CONFIG.NEG_CACHE_TTL) { return entry.value; } if (entry) delete _cache[key]; return undefined; }, set: function(key, value) { _cache[key] = { value: value, time: Date.now() }; }, has: function(key) { return this.get(key) !== undefined; }, clear: function() { _cache = {}; }, size: function() { return Object.keys(_cache).length; } }; })(); // --- ensureCacheVersion: 缓存版本控制 --- // 参考: sglv-core.lib.js#ensureCacheVersions function ensureCacheVersion(versionKey, currentVersion) { try { var cached = GM_getValue(versionKey, 0); if (cached < currentVersion) { return true; // 需要清除旧缓存 } } catch (e) {} return false; } function setCacheVersion(versionKey, currentVersion) { try { GM_setValue(versionKey, currentVersion); } catch (e) {} } // ============================================================ // v1.3.1: 性能增强工具集 // ============================================================ // --- LazyImageLoader: 基于 IntersectionObserver 的图片懒加载 --- // 用法: const img = LazyImageLoader.create(src, alt, className); // 返回一个元素，进入视口后才加载 src var LazyImageLoader = (function() { var observer = null; var pending = new Set(); function getObserver() { if (observer) return observer; if (typeof IntersectionObserver === 'undefined') return null; observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var img = entry.target; var src = img.getAttribute('data-src'); if (src) { img.src = src; img.removeAttribute('data-src'); img.classList.add('sbc-lazy-loaded'); } observer.unobserve(img); pending.delete(img); } }); }, { rootMargin: CONFIG.LAZY_IMG_ROOT_MARGIN, threshold: CONFIG.LAZY_IMG_THRESHOLD }); return observer; } return { create: function(src, alt, className) { var img = document.createElement('img'); if (alt) img.alt = alt; if (className) img.className = className + ' sbc-lazy-img'; else img.className = 'sbc-lazy-img'; img.setAttribute('data-src', src); var obs = getObserver(); if (obs) { obs.observe(img); pending.add(img); } else { // Fallback: 不支持 IntersectionObserver 时直接加载 img.src = src; img.classList.add('sbc-lazy-loaded'); } return img; }, // 批量创建图片 HTML 字符串（用于 innerHTML 场景） createLazyHtml: function(src, alt, extraClass) { var cls = 'sbc-lazy-img' + (extraClass ? ' ' + extraClass : ''); return ' ' + escapeHtml(alt) + '

'; }, // 初始化: 扫描容器内所有 data-src 图片并注册观察 scan: function(container) { if (!container) return; var obs = getObserver(); if (!obs) return; container.querySelectorAll('img[data-src]').forEach(function(img) { obs.observe(img); pending.add(img); }); }, // 清理: 断开所有观察（视图切换时调用） clear: function() { if (observer) { pending.forEach(function(img) { observer.unobserve(img); }); pending.clear(); } } }; })(); // --- DOMRefCache: 缓存频繁访问的 DOM 元素引用 --- var DOMRefCache = (function() { var cache = {}; return { get: function(id) { if (!cache[id]) cache[id] = document.getElementById(id); return cache[id]; }, invalidate: function(id) { if (id) delete cache[id]; else cache = {}; } }; })(); // --- scrollToTop: 平滑滚动到指定位置 --- function smoothScrollToTop(offset) { offset = offset || 0; var target = document.getElementById('sbc-root'); if (!target) { window.scrollTo({ top: offset, behavior: 'smooth' }); return; } var rect = target.getBoundingClientRect(); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var targetY = rect.top + scrollTop - offset; if (targetY < 0) targetY = 0; window.scrollTo({ top: targetY, behavior: 'smooth' }); } // --- showSkeleton: 显示骨架屏占位 --- function showSkeleton(container, count) { if (!container) return; count = count || 12; var html = '

'; for (var i = 0; i < count; i++) { html += '

' + '

'; } html += '

'; container.innerHTML = html; } // --- applyViewTransition: 视图切换过渡动画 --- function applyViewTransition(container, renderFn) { if (!container) { renderFn(); return; } // 退出动画 container.classList.add('sbc-view-exit'); setTimeout(function() { container.classList.remove('sbc-view-exit'); renderFn(); // 进入动画 container.classList.add('sbc-view-enter'); setTimeout(function() { container.classList.remove('sbc-view-enter'); }, CONFIG.VIEW_TRANSITION_MS); }, CONFIG.VIEW_TRANSITION_MS); } // --- KbdShortcuts: 键盘快捷键管理 --- var KbdShortcuts = (function() { var hintEl = null; var hintTimer = null; function showHint(text) { if (!hintEl) { hintEl = document.createElement('div'); hintEl.className = 'sbc-kbd-hint'; document.body.appendChild(hintEl); } hintEl.innerHTML = text; hintEl.classList.add('sbc-kbd-hint--visible'); clearTimeout(hintTimer); hintTimer = setTimeout(function() { hintEl.classList.remove('sbc-kbd-hint--visible'); }, 2000); } function handleKey(e) { // 在输入框中不触发快捷键(除了 Escape) var tag = (e.target.tagName || '').toLowerCase(); if (tag === 'input' || tag === 'textarea' || tag === 'select') { if (e.key === 'Escape') e.target.blur(); return; } // / 聚焦搜索 if (e.key === '/') { e.preventDefault(); var search = DOMRefCache.get('sbc-search-input'); if (search) { search.focus(); search.select(); } showHint('/ 搜索'); return; } // Escape 关闭浮窗 if (e.key === 'Escape') { var overlay = document.querySelector('.sbc-detail-overlay'); if (overlay) { overlay.remove(); return; } var analysis = document.getElementById('sbc-analysis-panel'); if (analysis && analysis.style.display !== 'none') { analysis.style.display = 'none'; analysisVisible = false; var btn = DOMRefCache.get('sbc-analysis-btn'); if (btn) btn.classList.remove('active'); return; } return; } // 方向键翻页(仅 grid 视图) if (viewMode === 'grid') { if (e.key === 'ArrowLeft' && currentPage > 1) { e.preventDefault(); currentPage--; renderGrid(); smoothScrollToTop(CONFIG.SCROLL_TO_TOP_OFFSET); showHint('← 第 ' + currentPage + ' 页'); } else if (e.key === 'ArrowRight') { var totalPages = Math.ceil(filteredBadges.length / CONFIG.CARDS_PER_PAGE); if (currentPage < totalPages) { e.preventDefault(); currentPage++; renderGrid(); smoothScrollToTop(CONFIG.SCROLL_TO_TOP_OFFSET); showHint('→ 第 ' + currentPage + ' 页'); } } } // 数字键 1-5 切换视图 var viewMap = { '1': 'sbc-mode-grid', '2': 'sbc-mode-unified', '3': 'sbc-mode-grouped', '4': 'sbc-mode-activity', '5': 'sbc-mode-alldb' }; if (viewMap[e.key]) { e.preventDefault(); var btn = DOMRefCache.get(viewMap[e.key]); if (btn) { btn.click(); showHint('' + e.key + ' ' + btn.title); } } } return { init: function() { document.addEventListener('keydown', handleKey); }, showHint: showHint }; })(); // ============================================================ // 数据提取（增强版：含appId、锁定徽章图标） // ============================================================ // ============================================================ // v1.2.9: 提取 Steam 页面原版用户信息 // 数据源: .profile_small_header_texture, .profile_xp_block // + g_steamID 全局变量 (权威 Steam ID 来源) // + userHint[0] (来自 MiniProfileHover 弹层) // + XML profile API (异步获取总游玩时长) // ============================================================ function detectCurrentSteamId() { // 参考 steam-friend-manager 1.0.16 的实现 try { if (typeof unsafeWindow !== 'undefined' && unsafeWindow.g_steamID) return unsafeWindow.g_steamID; } catch(e) {} try { if (typeof window.g_steamID !== 'undefined' && window.g_steamID) return window.g_steamID; } catch(e) {} // 兜底:从 HTML 中正则提取 var match = document.documentElement.innerHTML.match(/g_steamID\s*=\s*"(\d{17})"/); return match ? match[1] : ''; } function extractUserInfo() { var info = { personaName: '', profileUrl: '', steamId: '', avatarUrl: '', avatarFrameUrl: '', onlineState: 'offline', playerLevel: 0, currentXp: 0, xpForNextLevel: 0, xpRemainingToNext: 0, xpProgressPct: 0, totalGames: 0, totalBadges: 0, totalFriends: 0, totalPlaytimeMinutes: 0 // v1.2.9: 异步从 XML 拉取 }; // 1. Steam ID (v1.2.9 优先使用全局变量 g_steamID) info.steamId = detectCurrentSteamId(); // 2. 用户名 (多种兜底) // 2a. .profile_small_header_name a var personaEl = document.querySelector('.profile_small_header_name a, .persona_name_text_content'); if (personaEl) info.personaName = personaEl.textContent.trim(); // 2b. .actual_persona_name (某些页面使用) if (!info.personaName) { var actualPersona = document.querySelector('.actual_persona_name'); if (actualPersona) info.personaName = actualPersona.textContent.trim(); } // 2c. g_steamProfilePersonaName 全局变量 if (!info.personaName && typeof window.g_steamProfilePersonaName !== 'undefined') { info.personaName = window.g_steamProfilePersonaName; } // 2d. userHint 数组 (来自 MiniProfileHover) if (!info.personaName && typeof window.userHint !== 'undefined' && Array.isArray(window.userHint) && window.userHint.length > 0) { info.personaName = window.userHint[0] || ''; } // 3. 主页 URL var profileLink = document.querySelector('.profile_small_header_text a[href*="/id/"], .profile_small_header_text a[href*="/profiles/"]'); if (profileLink) info.profileUrl = profileLink.href; if (!info.profileUrl && typeof window.g_strProfileURL !== 'undefined') info.profileUrl = window.g_strProfileURL; if (!info.profileUrl && info.steamId) { info.profileUrl = 'https://steamcommunity.com/profiles/' + info.steamId; } if (!info.profileUrl && info.personaName) { info.profileUrl = 'https://steamcommunity.com/id/' + info.personaName; } // 4. 头像图片 // v1.2.14-fix2: 增强头像选择器,适配 Steam 多种 DOM 结构 var avatarImg = document.querySelector( '.profile_small_header_avatar img, ' + '.profile_small_header_avatar picture img, ' + '.profile_avatar_frame + picture img, ' + '.playerAvatarAutoSizeInner img, ' + '.playerAvatar img, ' + '.profile_header .playerAvatar img, ' + '.profile_summary .playerAvatar img' ); if (avatarImg) { info.avatarUrl = avatarImg.getAttribute('src') || avatarImg.getAttribute('data-delayed-image') || avatarImg.getAttribute('data-src') || ''; // v1.2.14-fix2: Steam 可能用空 src + data-delayed-image,过滤掉占位 if (info.avatarUrl && !/^https?:\/\//.test(info.avatarUrl) && !/^\/\//.test(info.avatarUrl)) { info.avatarUrl = ''; } } // v1.2.14-fix2: 兜底——从页面 CSS background-image 提取头像 if (!info.avatarUrl) { var avatarWrap = document.querySelector('.profile_small_header_avatar, .playerAvatar'); if (avatarWrap) { var bg = window.getComputedStyle(avatarWrap).backgroundImage; var urlMatch = bg && bg.match(/url$["']?(https?:\/\/[^"')]+)["']?$/); if (urlMatch) info.avatarUrl = urlMatch[1]; } } // 5. 头像框(头像周围的装饰图) var avatarFrame = document.querySelector('.profile_avatar_frame img, .profile_avatar_frame source, .profile_small_header_avatar .profile_avatar_frame img'); if (avatarFrame) info.avatarFrameUrl = avatarFrame.getAttribute('src') || avatarFrame.getAttribute('srcset') || ''; // 6. 在线状态 var onlineStateEl = document.querySelector('.profile_small_header_texture .persona'); if (onlineStateEl) { var classes = onlineStateEl.className; if (classes.indexOf('in-game') >= 0) info.onlineState = 'in-game'; else if (classes.indexOf('online') >= 0) info.onlineState = 'online'; else info.onlineState = 'offline'; } // 7. 等级 var levelEl = document.querySelector('.profile_xp_block_level .friendPlayerLevelNum, .friendPlayerLevelNum, .profile_xp_block .friendPlayerLevelNum'); if (levelEl) info.playerLevel = parseInt(levelEl.textContent.trim(), 10) || 0; // 8. 经验值 var xpEl = document.querySelector('.profile_xp_block_xp'); if (xpEl) { var xpMatch = xpEl.textContent.replace(/,/g, '').match(/(\d+)/); if (xpMatch) info.currentXp = parseInt(xpMatch[1], 10) || 0; } // 9. 升到下一级还差经验值 var remainingEl = document.querySelector('.profile_xp_block_remaining'); if (remainingEl) { var remMatch = remainingEl.textContent.replace(/,/g, '').match(/(\d+)/); if (remMatch) info.xpRemainingToNext = parseInt(remMatch[1], 10) || 0; } // 10. 进度条宽度 var progressBar = document.querySelector('.profile_xp_block_remaining_bar_progress'); if (progressBar) { var w = progressBar.style.width || ''; var pctMatch = w.match(/(\d+(?:\.\d+)?)/); if (pctMatch) info.xpProgressPct = parseFloat(pctMatch[1]) || 0; } // 11. 计算: 下一级所需总经验值 if (info.xpRemainingToNext > 0) info.xpForNextLevel = info.currentXp + info.xpRemainingToNext; // 12. v1.2.9: 总游戏数(从 .profile_count_link[href*="/games/"] 优先,API 兜底) var gameCountEl = document.querySelector('.profile_count_link[href*="/games/"] .profile_count_link_total, .profile_summary .game_count .count'); if (gameCountEl) { info.totalGames = parseInt(gameCountEl.textContent.replace(/,/g, '').trim(), 10) || 0; } // 兜底:从页面文本中提取 "X 款产品" / "X games" if (info.totalGames === 0) { var gamesLabel = document.querySelector('.profile_count_link[href*="/games/"]'); if (gamesLabel) { var gamesText = gamesLabel.textContent.replace(/,/g, ''); var gMatch = gamesText.match(/(\d+)/); if (gMatch) info.totalGames = parseInt(gMatch[1], 10) || 0; } } // 13. 总徽章数 var badgeCountEl = document.querySelector('.profile_count_link[href*="/badges/"] .profile_count_link_total, .profile_summary .badge_count .count'); if (badgeCountEl) info.totalBadges = parseInt(badgeCountEl.textContent.replace(/,/g, '').trim(), 10) || 0; if (info.totalBadges === 0) { var badgesLabel = document.querySelector('.profile_count_link[href*="/badges/"]'); if (badgesLabel) { var bText = badgesLabel.textContent.replace(/,/g, ''); var bMatch = bText.match(/(\d+)/); if (bMatch) info.totalBadges = parseInt(bMatch[1], 10) || 0; } } // 14. 好友数 // v1.2.14-fix5: 增强选择器,徽章页可能无 .profile_count_link,从多个位置提取 var friendsCountEl = document.querySelector( '.profile_count_link[href*="/friends/"] .profile_count_link_total, ' + '.profile_summary .friend_count .count, ' + '.profile_in_game_header .friend_count, ' + '.profile_friends .profile_count_link_total' ); if (friendsCountEl) info.totalFriends = parseInt(friendsCountEl.textContent.replace(/,/g, '').trim(), 10) || 0; if (info.totalFriends === 0) { var friendsLabel = document.querySelector('.profile_count_link[href*="/friends/"]'); if (friendsLabel) { var fText = friendsLabel.textContent.replace(/,/g, ''); var fMatch = fText.match(/(\d+)/); if (fMatch) info.totalFriends = parseInt(fMatch[1], 10) || 0; } } return info; } // v1.3.0: 通过 Steam Web API 获取好友数 (参考 steam-friend-manager GetFriendList 逻辑) // 优先使用 ISteamUser/GetFriendList/v1 API，无 API Key 时降级到 HTML 抓取 function fetchFriendsCount(steamId, profileUrl) { var apiKey = getStoredApiKey(); var useSteamId = steamId || getStoredFallbackSteamId(); // 方案1: Steam Web API (精确可靠) if (apiKey && useSteamId) { return new Promise(function(resolve) { GM_xmlhttpRequest({ method: 'GET', url: 'https://api.steampowered.com/ISteamUser/GetFriendList/v1/?key=' + encodeURIComponent(apiKey) + '&steamid=' + encodeURIComponent(useSteamId) + '&relationship=friend', timeout: 10000, onload: function(r) { try { var data = JSON.parse(r.responseText); if (data && data.friendslist && Array.isArray(data.friendslist.friends)) { resolve(data.friendslist.friends.length); } else { // API 返回但无 friendslist (私密资料) → 降级 HTML resolve(fetchFriendsCountFromHtml(profileUrl)); } } catch (e) { resolve(fetchFriendsCountFromHtml(profileUrl)); } }, onerror: function() { resolve(fetchFriendsCountFromHtml(profileUrl)); }, ontimeout: function() { resolve(fetchFriendsCountFromHtml(profileUrl)); } }); }); } // 方案2: 无 API Key → HTML 抓取降级 return Promise.resolve(fetchFriendsCountFromHtml(profileUrl)); } // v1.3.0: HTML 降级方案 — 从用户主页解析好友数 function fetchFriendsCountFromHtml(profileUrl) { if (!profileUrl) return Promise.resolve(0); return new Promise(function(resolve) { GM_xmlhttpRequest({ method: 'GET', url: profileUrl, timeout: 8000, onload: function(response) { try { var html = response.responseText || ''; var match = html.match(/href="[^"]*\/friends\/"[^>]*>[\s\S]*?(\d[\d,]*)\s*<\/span>/i); if (!match) match = html.match(/"friend_count"\s*:\s*(\d+)/i); if (!match) match = html.match(/profile_count_link_total[^>]*>(\d[\d,]*)<\/span>/i); if (match) { resolve(parseInt(match[1].replace(/,/g, ''), 10) || 0); } else { resolve(0); } } catch (e) { resolve(0); } }, onerror: function() { resolve(0); }, ontimeout: function() { resolve(0); } }); }); } /** * v1.2.9: 异步获取用户总游玩时长(从 XML profile API) * 拉取 IPlayerService 接口: OwnedGames 或 Badges? 实际用 stats API 或 games?xml=1 * 这里采用最轻量方案: 尝试 /profiles/{steamid}/games/?xml=1 */ function fetchUserPlaytime(steamId) { if (!steamId) return Promise.resolve(0); return new Promise(function(resolve) { GM_xmlhttpRequest({ method: 'GET', url: 'https://steamcommunity.com/profiles/' + steamId + '/games/?tab=all&xml=1', timeout: 8000, onload: function(response) { try { var xml = new DOMParser().parseFromString(response.responseText, 'text/xml'); // ... // 或 var games = xml.querySelectorAll('game'); var totalMinutes = 0; games.forEach(function(g) { var hrs = parseFloat(g.querySelector('hoursOnRecord')?.textContent || '0'); if (!isNaN(hrs)) totalMinutes += hrs * 60; }); resolve(totalMinutes); } catch (e) { resolve(0); } }, onerror: function() { resolve(0); }, ontimeout: function() { resolve(0); } }); }); } // v1.2.7: 用户信息缓存(模块级) var userInfo = null; /** * v1.2.7: 创建用户信息头部面板(参考 Steam 原版 + 第三方设计图) * 布局: [头像+等级徽章] [用户名/Steam ID/经验/进度] [4个KPI卡片(游戏/徽章/好友/时长)] */ function createUserHeader(info) { if (!info) return null; var header = document.createElement('div'); header.className = 'sbc-user-header'; // 头像区域 var onlineStateClass = 'sbc-user-online--' + info.onlineState; var onlineStateText = ({ 'online': '在线', 'in-game': '游戏中', 'offline': '离线' })[info.onlineState] || '离线'; var avatarHtml = '

' + // v1.2.10 修复: 有 Steam 头像框就用,没有就给个默认 ring,避免头像"光秃秃"无装饰 (info.avatarFrameUrl ? '

' : '

') + '

' + (info.avatarUrl ? '

' : '

' + (info.personaName ? info.personaName[0] : '?') + '

') + // 占位符放在 img 之后,onerror 失败时显示 '' + // v1.2.14-fix5: 移除头像右下角的等级标记(等级已展示在昵称后) '

' + '

'; // 用户名 + 等级 + ID // v1.2.14-fix3: 移除对号,等级信息展示在昵称后面 var nameHtml = '

' + '

' + '' + escapeHtml(info.personaName || 'Steam User') + '' + // v1.2.14-fix3: 等级展示在昵称后(inline) (info.playerLevel > 0 ? '' + '' + 'Lv.' + info.playerLevel + '' + '' : '') + '' + '' + '

' + (info.steamId ? '

STEAM ID: ' + escapeHtml(info.steamId) + '

' : '') + '

'; // 等级进度条(Lv.X → Lv.Y) // v1.2.14-fix3: 移除"经验值 · 等级进度"字样,直接展示数值 var progressHtml = ''; if (info.playerLevel > 0) { var currentLevelXp = info.currentXp; var earnedThisLevel = info.xpForNextLevel - info.xpRemainingToNext; // 当前等级已获得经验 var pct = info.xpProgressPct || 0; progressHtml = '

' + '

' + 'Lv.' + info.playerLevel + '' + '' + info.xpRemainingToNext + ' / ' + info.xpForNextLevel + ' XP' + 'Lv.' + (info.playerLevel + 1) + '' + '' + Math.round(pct) + '%' + '

' + '

'; } // 左侧:头像 + 名称 + 进度 var leftHtml = '

' + avatarHtml + '

' + nameHtml + progressHtml + '

' + '

'; // 右侧:4 个 KPI 卡片 // v1.2.9: 第四个改为"总时长"(由 fetchUserPlaytime 异步填充) // v1.2.10 修复: 空值显示 "—" 而不是 0(避免"游戏: 0"看起来很尴尬) // v1.2.10 修复: 用 allBadges.length 兜底 totalBadges(用户徽章页一定有徽章数据) // v1.2.14-fix5: KPI 卡片支持点击跳转(好友→好友页,游戏→游戏页,徽章→徽章页) var fallbackBadges = (typeof allBadges !== 'undefined' && Array.isArray(allBadges)) ? allBadges.length : 0; var profileBaseUrl = info.profileUrl || (info.steamId ? ('https://steamcommunity.com/profiles/' + info.steamId) : ''); var kpis = [ { label: '游戏', value: info.totalGames, color: 'cyan', icon: '', href: profileBaseUrl ? (profileBaseUrl + '/games') : '' }, { label: '徽章', value: info.totalBadges || fallbackBadges, color: 'purple', icon: '', href: profileBaseUrl ? (profileBaseUrl + '/badges') : '' }, { label: '好友', value: info.totalFriends, color: 'teal', icon: '', href: profileBaseUrl ? (profileBaseUrl + '/friends') : '' }, { label: '总时长', value: formatPlaytime(info.totalPlaytimeMinutes), color: 'gold', icon: '', dataKey: 'playtime' } ]; var kpiHtml = '

' + kpis.map(function(k) { // v1.2.10 修复: 数字 = 0 / 字符串 = "—" / null/undefined → 显示 "—" var isEmpty = (k.value === 0 || k.value === '—' || k.value === null || k.value === undefined); var displayValue; if (k.dataKey === 'playtime') { // 总时长: 总是包在 data-sbc-kpi 里方便后续更新,空值也保留 slot displayValue = '' + (isEmpty ? '—' : k.value) + ''; } else { displayValue = isEmpty ? '—' : k.value.toLocaleString(); } // v1.2.14-fix5: 支持点击跳转的卡片用包裹 var tag = k.href ? 'a' : 'div'; var hrefAttr = k.href ? (' href="' + escapeHtml(k.href) + '" target="_blank" rel="noopener"') : ''; var clickClass = k.href ? ' sbc-user-kpi--clickable' : ''; return '<' + tag + ' class="sbc-user-kpi sbc-user-kpi--' + k.color + (isEmpty ? ' sbc-user-kpi--empty' : '') + clickClass + '"' + hrefAttr + (k.href ? ' title="点击在新标签页打开"' : '') + '>' + '

' + ''; }).join('') + '

'; header.innerHTML = leftHtml + kpiHtml; return header; } /** * v1.2.9: 格式化游玩时长(分钟 → "Xh Ym" / "X.Yk" / "Xh") */ function formatPlaytime(minutes) { if (!minutes || minutes <= 0) return '—'; var hours = minutes / 60; if (hours < 100) return Math.round(hours) + 'h'; if (hours < 10000) return Math.round(hours / 10) / 100 + 'k'; // 避免过长数字 return (Math.round(hours / 100) / 10) + 'kh'; } // ============================================================ // v1.2.10: Steam Web API 集成（用户配置 + 异步数据抓取） // 持久化键: sbc_steam_api_key, sbc_fallback_steam_id // ============================================================ var STORAGE_KEY_API = 'sbc_steam_api_key'; var STORAGE_KEY_FALLBACK_ID = 'sbc_fallback_steam_id'; function getStoredApiKey() { try { return GM_getValue(STORAGE_KEY_API, ''); } catch (e) { return ''; } } function setStoredApiKey(v) { try { GM_setValue(STORAGE_KEY_API, (v || '').trim()); } catch (e) {} } function getStoredFallbackSteamId() { try { return GM_getValue(STORAGE_KEY_FALLBACK_ID, ''); } catch (e) { return ''; } } function setStoredFallbackSteamId(v) { try { GM_setValue(STORAGE_KEY_FALLBACK_ID, (v || '').trim()); } catch (e) {} } /** * v1.2.10: 通过 Steam Web API 拉取用户基础数据 * - IPlayerService/GetOwnedGames/v1 → 总游戏数 + 总游玩时长 * - ISteamUser/GetPlayerSummaries/v2 → 用户名 / 头像 / 在线状态 * 若未配置 API Key 或请求失败 → 返回 null,调用方需降级到 XML/页面提取 */ function loadUserStatsWithApi(steamId) { var apiKey = getStoredApiKey(); var useSteamId = (steamId && /^\d{17}$/.test(steamId)) ? steamId : getStoredFallbackSteamId(); if (!apiKey || !useSteamId) return Promise.resolve(null); return new Promise(function(resolve) { var result = { source: 'api', steamId: useSteamId, personaName: '', avatarUrl: '', onlineState: 'offline', totalGames: 0, totalPlaytimeMinutes: 0 }; var pending = 2; var apiSuccessCount = 0; // v1.2.12: 追踪有多少个 API 成功响应 function maybeDone() { pending--; if (pending > 0) return; // v1.2.12: 至少有一个 API 成功响应即认为 Key 有效 // (即便 game_count=0 或用户资料私密,只要 API 返回了有效 JSON 结构即说明 Key 可用) if (apiSuccessCount > 0) resolve(result); else resolve(null); } // 1. IPlayerService/GetOwnedGames GM_xmlhttpRequest({ method: 'GET', url: 'https://api.steampowered.com/IPlayerService/GetOwnedGames/v1/?key=' + encodeURIComponent(apiKey) + '&steamid=' + encodeURIComponent(useSteamId) + '&include_appinfo=0&include_played_free_games=1', timeout: 8000, onload: function(r) { try { var data = JSON.parse(r.responseText); // v1.2.12: 检查是否返回了 error 字段 (Key 无效时 Steam 返回 {response:{error:...}}) if (data && data.response) { if (data.response.error) { // API 明确返回错误 (Key 无效 / 权限不足) console.warn('[SBC-Pro] GetOwnedGames API error:', data.response.error); } else if (typeof data.response.game_count === 'number') { result.totalGames = data.response.game_count; var games = data.response.games || []; var totalMin = 0; for (var i = 0; i < games.length; i++) { totalMin += (parseInt(games[i].playtime_forever, 10) || 0); } result.totalPlaytimeMinutes = totalMin; apiSuccessCount++; } else { // response 存在但无 game_count (可能是私密资料库),仍视为 Key 有效 apiSuccessCount++; } } } catch (e) { /* parse error, keep as failure */ } maybeDone(); }, onerror: function() { maybeDone(); }, ontimeout: function() { maybeDone(); } }); // 2. ISteamUser/GetPlayerSummaries GM_xmlhttpRequest({ method: 'GET', url: 'https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v2/?key=' + encodeURIComponent(apiKey) + '&steamids=' + encodeURIComponent(useSteamId), timeout: 8000, onload: function(r) { try { var data = JSON.parse(r.responseText); var players = data && data.response && data.response.players; if (players && players.length > 0) { var p = players[0]; result.personaName = p.personaname || ''; result.avatarUrl = p.avatarfull || p.avatarmedium || p.avatar || ''; result.onlineState = p.gameid ? 'in-game' : (p.personastate === 1 ? 'online' : (p.personastate === 2 ? 'busy' : 'offline')); apiSuccessCount++; // v1.2.12: GetPlayerSummaries 成功也计入 } else if (data && data.response && !data.response.error) { // response 存在且无错误,即便 players 为空也视为 Key 有效 apiSuccessCount++; } } catch (e) { /* ignore */ } maybeDone(); }, onerror: function() { maybeDone(); }, ontimeout: function() { maybeDone(); } }); }); } /** * v1.2.10: 用 API 数据回填 KPI 卡片 + 头部信息 */ function updateUserHeaderKpis(userHeader, apiData) { if (!userHeader || !apiData) return; try { // KPI: 总时长 if (typeof apiData.totalPlaytimeMinutes === 'number') { var playtimeSlot = userHeader.querySelector('[data-sbc-kpi="playtime"]'); if (playtimeSlot) { playtimeSlot.textContent = formatPlaytime(apiData.totalPlaytimeMinutes); // 移除 empty 样式 var ptCard = playtimeSlot.closest('.sbc-user-kpi'); if (ptCard) ptCard.classList.remove('sbc-user-kpi--empty'); } if (userInfo) userInfo.totalPlaytimeMinutes = apiData.totalPlaytimeMinutes; } // KPI: 总游戏(若 API 返回 >0) if (apiData.totalGames > 0) { var gamesCard = userHeader.querySelector('.sbc-user-kpi--cyan'); var gamesKpi = gamesCard ? gamesCard.querySelector('.sbc-user-kpi-value') : null; if (gamesKpi && (!userInfo || !userInfo.totalGames)) { gamesKpi.textContent = apiData.totalGames.toLocaleString(); if (gamesCard) { gamesCard.classList.remove('sbc-user-kpi--empty'); var emptySpan = gamesCard.querySelector('.sbc-user-kpi-empty'); if (emptySpan) emptySpan.remove(); } } if (userInfo && !userInfo.totalGames) userInfo.totalGames = apiData.totalGames; } // 用户名 / 头像（如果页面提取为空,API 兜底） if (userInfo) { if (apiData.personaName && !userInfo.personaName) { userInfo.personaName = apiData.personaName; var nameEl = userHeader.querySelector('.sbc-user-name'); if (nameEl) nameEl.textContent = apiData.personaName; } if (apiData.avatarUrl && !userInfo.avatarUrl) { userInfo.avatarUrl = apiData.avatarUrl; var avatarImg = userHeader.querySelector('.sbc-user-avatar img'); if (avatarImg) avatarImg.src = apiData.avatarUrl; } if (apiData.onlineState && userInfo.onlineState === 'offline') { userInfo.onlineState = apiData.onlineState; // 同步更新 class var avatarEl = userHeader.querySelector('.sbc-user-avatar'); if (avatarEl) { avatarEl.classList.remove('sbc-user-online--online', 'sbc-user-online--in-game', 'sbc-user-online--offline'); avatarEl.classList.add('sbc-user-online--' + apiData.onlineState); } } } } catch (e) { console.warn('[SBC-Pro] updateUserHeaderKpis failed:', e); } } /** * v1.2.10: 打开用户设置模态框(Steam ID + API Key) * 数据保存到 GM_setValue,刷新后生效 */ function openUserSettings() { // 防止重复创建 var existing = document.getElementById('sbc-settings-modal'); if (existing) { existing.remove(); } var currentApiKey = getStoredApiKey(); var currentFallbackId = getStoredFallbackSteamId(); var detectedId = (userInfo && userInfo.steamId) || detectCurrentSteamId() || ''; var backdrop = document.createElement('div'); backdrop.className = 'sbc-modal-backdrop'; backdrop.id = 'sbc-settings-modal'; backdrop.innerHTML = ''; document.body.appendChild(backdrop); var inputId = backdrop.querySelector('#sbc-input-steam-id'); var inputKey = backdrop.querySelector('#sbc-input-api-key'); var statusEl = backdrop.querySelector('#sbc-form-status'); var closeBtn = backdrop.querySelector('#sbc-modal-close-btn'); var cancelBtn = backdrop.querySelector('#sbc-modal-cancel-btn'); var clearBtn = backdrop.querySelector('#sbc-modal-clear-btn'); var saveBtn = backdrop.querySelector('#sbc-modal-save-btn'); var testBtn = backdrop.querySelector('#sbc-modal-test-btn'); function close() { backdrop.remove(); } function showStatus(msg, kind) { statusEl.className = 'sbc-form-status ' + (kind || ''); statusEl.textContent = msg; } closeBtn.addEventListener('click', close); cancelBtn.addEventListener('click', close); backdrop.addEventListener('click', function(e) { if (e.target === backdrop) close(); }); document.addEventListener('keydown', function escHandler(e) { if (e.key === 'Escape') { close(); document.removeEventListener('keydown', escHandler); } }); clearBtn.addEventListener('click', function() { inputId.value = ''; inputKey.value = ''; setStoredFallbackSteamId(''); setStoredApiKey(''); showStatus('已清空所有配置', 'success'); }); saveBtn.addEventListener('click', function() { var idVal = (inputId.value || '').trim(); var keyVal = (inputKey.value || '').trim(); if (idVal && !/^\d{17}$/.test(idVal)) { showStatus('SteamID 格式不正确(应为 17 位数字)', 'error'); inputId.focus(); return; } setStoredFallbackSteamId(idVal); setStoredApiKey(keyVal); showStatus('已保存,刷新页面生效', 'success'); setTimeout(close, 800); }); testBtn.addEventListener('click', function() { var idVal = (inputId.value || '').trim() || detectedId; var keyVal = (inputKey.value || '').trim(); if (!keyVal) { showStatus('请先填写 API Key', 'error'); return; } if (!idVal) { showStatus('缺少 SteamID', 'error'); return; } testBtn.disabled = true; showStatus('正在测试连接…', 'loading'); // 临时写入以便 loadUserStatsWithApi 使用最新值 setStoredFallbackSteamId(idVal); setStoredApiKey(keyVal); loadUserStatsWithApi(idVal).then(function(data) { testBtn.disabled = false; // v1.2.12: data 非 null 即说明至少一个 API 成功响应(Key 有效) if (data) { var msg = '连接成功!'; if (data.totalGames > 0) msg += ' 游戏数 ' + data.totalGames; if (data.totalPlaytimeMinutes > 0) msg += ' · 总时长 ' + formatPlaytime(data.totalPlaytimeMinutes); if (data.personaName) msg += ' · 用户 ' + data.personaName; showStatus(msg, 'success'); } else { showStatus('连接失败,Key 无效或网络错误', 'error'); } }); }); } // ============================================================ // 数据提取（增强版：含appId、锁定徽章图标） // ============================================================ function extractBadgesFromDOM() { var badges = []; var badgeRows = document.querySelectorAll('.badge_row'); badgeRows.forEach(function(row, index) { try { var linkEl = row.querySelector('.badge_row_overlay'); var url = linkEl ? linkEl.href : ''; var appId = ''; var isFoil = false; var border = '0'; if (url) { // v1.2.3: 检测闪卡合成 (/gamecards/foil/APPID) var foilMatch = url.match(/\/gamecards\/foil\/(\d+)/); if (foilMatch) { appId = foilMatch[1]; isFoil = true; border = '1'; } else { var appMatch = url.match(/\/gamecards\/(\d+)/); if (appMatch) appId = appMatch[1]; } } var titleEl = row.querySelector('.badge_title'); var gameName = ''; if (titleEl) { gameName = titleEl.textContent.replace(/查看详情/g, '').replace(/\s+/g, ' ').trim(); } // 徽章图片（多策略提取） var badgeImg = ''; var badgeInfoImg = row.querySelector('.badge_info_image img'); if (badgeInfoImg) badgeImg = badgeInfoImg.getAttribute('data-delayed-image') || badgeInfoImg.src; // 锁定图标 var lockedIconImg = ''; var lockedIconEl = row.querySelector('.badge_empty_circle img'); if (lockedIconEl) lockedIconImg = lockedIconEl.getAttribute('data-delayed-image') || lockedIconEl.src; if (!lockedIconImg) { var emptyLeftImg = row.querySelector('.badge_empty_left img'); if (emptyLeftImg) lockedIconImg = emptyLeftImg.getAttribute('data-delayed-image') || emptyLeftImg.src; } // 没有已解锁图片时降级 if (!badgeImg) { var ownedCard = row.querySelector('.badge_progress_card.owned img'); if (ownedCard) badgeImg = ownedCard.getAttribute('data-delayed-image') || ownedCard.src; } if (!badgeImg && lockedIconImg) badgeImg = lockedIconImg; if (!badgeImg) { var emptyCircleImg = row.querySelector('.badge_empty_circle img'); if (emptyCircleImg) badgeImg = emptyCircleImg.getAttribute('data-delayed-image') || emptyCircleImg.src; } // 徽章名称 var badgeName = ''; var badgeNameEl = row.querySelector('.badge_info_title'); if (badgeNameEl) badgeName = badgeNameEl.textContent.trim(); if (!badgeName) { var emptyNameEls = row.querySelectorAll('.badge_empty_name'); if (emptyNameEls.length > 0) badgeName = emptyNameEls[0].textContent.trim(); } // 经验值 & 等级 var xp = 100, level = 1; var descEl = row.querySelector('.badge_info_description'); if (descEl) { var descText = descEl.textContent; var xpMatch = descText.match(/(\d+)\s*点经验值/); if (xpMatch) xp = parseInt(xpMatch[1]); var levelMatch = descText.match(/(\d+)\s*级/); if (levelMatch) level = parseInt(levelMatch[1]); } if (xp === 100) { var emptyRight = row.querySelector('.badge_empty_right'); if (emptyRight) { var xpMatch2 = emptyRight.textContent.match(/(\d+)\s*点经验值/); if (xpMatch2) xp = parseInt(xpMatch2[1]); } } var unlockEl = row.querySelector('.badge_info_unlocked'); var unlockTime = unlockEl ? unlockEl.textContent.replace('解锁', '').trim() : ''; // 卡牌进度 var progressEl = row.querySelector('.badge_progress_info'); var progressText = '', collected = 0, total = 0; if (progressEl) { progressText = progressEl.textContent.trim(); var match = progressText.match(/(\d+)\s*\/\s*(\d+)/); if (match) { collected = parseInt(match[1]); total = parseInt(match[2]); } } // v1.2.14-fix10: 检测 Steam 原生"收集齐全"合卡按钮(可合卡的真正信号) // .badge_progress_info 内的 .badge_craft_button 文本为"收集齐全"时,表示用户当前拥有足够卡牌可立即合成 var hasCraftButton = false; if (progressEl) { var craftBtn = progressEl.querySelector('.badge_craft_button'); if (craftBtn && /收集齐全/.test(craftBtn.textContent)) { hasCraftButton = true; // 有合卡按钮时,从进度文本补齐 collected/total(若未匹配到) if (total === 0) { var dbCardCount = appId ? getCardCountForApp(appId) : 0; if (dbCardCount > 0) { total = dbCardCount; collected = dbCardCount; } } } } // 掉落 var drops = 0, dropsText = ''; var dropsEl = row.querySelector('.badge_title_stats_drops .progress_info_bold'); if (dropsEl) { dropsText = dropsEl.textContent.trim(); var dropsMatch = dropsText.match(/(\d+)\s*张剩余卡牌掉落/); if (dropsMatch) drops = parseInt(dropsMatch[1]); } // 游玩时间 var playtime = ''; var playtimeEl = row.querySelector('.badge_title_stats_playtime'); if (playtimeEl) { playtime = playtimeEl.textContent.replace(/\u00a0/g, ' ').replace(/\s+/g, ' ').trim(); if (playtime === '' || playtime === ' ') playtime = ''; } // 卡牌图片 var cardImgs = []; row.querySelectorAll('.badge_progress_card.owned img').forEach(function(img) { var src = img.getAttribute('data-delayed-image') || img.src; if (src) cardImgs.push(upgradeCardImageUrl(src)); }); // v1.2.14-fix10: isCompleted 仅在 collected>=total 时为 true(恢复原逻辑) // 移除 fix9 错误逻辑(原把所有 level>0 的已合成徽章都标记为 isCompleted,导致 150 个全计入可合卡) // 可合卡判断改用 hasCraftButton(Steam 原生合卡按钮) 或 collected>=total var isCompleted = (collected >= total && total > 0) || hasCraftButton; var isLocked = !isCompleted && collected === 0; // v1.2.3: 勋章分类 — 无 appId 或 appId 不在卡牌数据库中则为活动勋章 // v1.2.13: 初步分类，使用 classifyBadgeType（数据库加载后再次修正） var badgeType = classifyBadgeType({ appId: appId, badgeName: badgeName, gameName: gameName, isFoil: isFoil }); if (gameName) { badges.push({ index: index, appId: appId, gameName: gameName, badgeName: badgeName || gameName, badgeImg: badgeImg, lockedIconImg: lockedIconImg, url: url, xp: xp, level: level, unlockTime: unlockTime, progressText: progressText, collected: collected, total: total, progress: total > 0 ? Math.round((collected / total) * 100) : 0, drops: drops, dropsText: dropsText, playtime: playtime, cardImgs: cardImgs, isCompleted: isCompleted, isLocked: isLocked, // v1.2.14-fix10: 新增 hasCraftButton(Steam 原生合卡按钮) hasCraftButton: hasCraftButton, // v1.2.3: 新增字段 badgeType: badgeType, isFoil: isFoil, border: border, }); } } catch (e) { console.warn('[SBC-Pro] 提取徽章数据失败:', e); } }); console.log('[SBC-Pro] 提取到 ' + badges.length + ' 个徽章'); return badges; } // ============================================================ // v1.2.1: SteamCardExchange 卡牌数据库 // 数据源: https://www.steamcardexchange.net/api/request.php?GetInventory // 返回格式: { data: [ [[appid, name], ..., [size]], ... ] } // 解析为: { appId: { name, size } } // ============================================================ /** * 获取全部有交易卡牌的游戏数据库（带本地缓存） * @returns {Promise

徽章分析中心

鉴赏家推荐聚合 v1.2.16