1
(function() {
2
    const STATUS_CACHE_KEY = "statusTagsData";
3
    const STATUS_JSON_URL = "https://check-flink.mcxiaochen.top/result.json"; // 这里设为你自己的url
4

5
    let latestData = [];
6

7
    // 渲染状态标签
8
    function addStatusTags(data) {
9
        if (!Array.isArray(data)) return;
10

11
        document.querySelectorAll(".flink-list-item").forEach(item => {
12
            // 防止重复添加
13
            if (item.querySelector(".status-tag")) return;
14

15
            // 获取显示名字
16
            const nameEl = item.querySelector(".flink-item-name, .cf-friends-name");
17
            if (!nameEl) return;
18
            const nameText = nameEl.textContent.trim();
19

20
            // 根据名字匹配 JSON 数据
21
            const status = data.find(s => s.name === nameText);
22
            if (!status) return;
23

24
            // 创建状态标签
25
            const tag = document.createElement("div");
26
            tag.classList.add("status-tag");
27

28
            let text = "未知";
29
            let colorClass = "status-tag-red";
30

31
            if (status.latency >= 0) {
32
                text = status.latency.toFixed(2) + " s";
33
                colorClass = status.latency <= 2 ? "status-tag-green"
34
                           : status.latency <= 5 ? "status-tag-light-yellow"
35
                           : status.latency <= 10 ? "status-tag-dark-yellow"
36
                           : "status-tag-red";
37
            }
38

39
            tag.textContent = text;
40
            tag.classList.add(colorClass);
41

42
            // 保证父容器相对定位
43
            item.style.position = "relative";
44
            item.appendChild(tag);
45
        });
46
    }
47

48
    // 获取 JSON 数据（带缓存）
49
    function fetchStatusData() {
50
        const cache = localStorage.getItem(STATUS_CACHE_KEY);
51
        if (cache) {
52
            try {
53
                const parsed = JSON.parse(cache);
54
                const cachedData = Array.isArray(parsed.data) ? parsed.data : (parsed.data?.link_status || []);
55
                if (Date.now() - new Date(parsed.timestamp).getTime() < 18e5) { // 30分钟有效
56
                    latestData = cachedData;
57
                    addStatusTags(latestData);
58
                }
59
            } catch (e) {
60
                console.warn("❌ 解析缓存失败，忽略缓存", e);
61
            }
62
        }
63

64
        fetch(`${STATUS_JSON_URL}?t=${Date.now()}`)
65
            .then(r => r.json())
66
            .then(json => {
67
                latestData = Array.isArray(json) ? json : (json.link_status || []);
68
                addStatusTags(latestData);
69
                localStorage.setItem(STATUS_CACHE_KEY, JSON.stringify({ data: latestData, timestamp: new Date().toISOString() }));
70
            })
71
            .catch(err => console.error("❌ 获取 result.json 出错:", err));
72
    }
73

74
    // 监听 DOM 变化，自动渲染新增卡片
75
    function observeNewItems() {
76
        const observer = new MutationObserver(() => addStatusTags(latestData));
77
        observer.observe(document.body, { childList: true, subtree: true });
78
    }
79

80
    // 初始化
81
    document.addEventListener("DOMContentLoaded", () => {
82
        fetchStatusData();
83
        observeNewItems();
84
    });
85

86
    document.addEventListener("pjax:complete", () => {
87
        fetchStatusData();
88
    });
89
})();

1
.status-tag {
2
    position: absolute;
3
    bottom: 0;
4
    right: 0;
5
    padding: 0 3px;
6
    border-radius: 6px 0 12px 0;
7
    font-size: 10px;
8
    color: #fff;
9
    font-weight: 700;
10
    transition: font-size .3s ease-out, opacity .3s ease-out;
11
}
12

13
.flink-list-item:hover .status-tag {
14
    font-size: 0;
15
    opacity: 0;
16
}
17

18
.status-tag-green { background-color: #599e0b; }
19
.status-tag-light-yellow { background-color: #fed101; }
20
.status-tag-dark-yellow { background-color: #f0b606; }
21
.status-tag-red { background-color: #b90000; }

1
inject:
2
  head:
3
    - <link rel="stylesheet" href="/css/custom.css">
4

5
  bottom:
6
    - <script src="/js/flink.js"></script>