Avatar Progress Border (Beta)

Modify avatar border to show progress
当前为 2024-10-16 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Avatar Progress Border (Beta)
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Modify avatar border to show progress
// @author       卡洛驰
// @match        *blog.csdn.net/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 目标值
    const targetValues = [10, 100, 1000, 10000, 100000, 10000000];
    // 颜色数组，每两个目标值使用一个颜色
    const colors = ['#badc58', '#22a6b3', '#eb4d4b', '#f9ca24', '#4f4f4f', '#262626'];


    // 获取粉丝数
    const fanCountElement = document.querySelectorAll('.user-profile-head-info-r-c .user-profile-statistics-num')[3];

    if (fanCountElement) {
        const currentValue = parseInt(fanCountElement.textContent.replace(/,/g, ''), 10);

        // 找到最接近的目标值
        let targetValue = targetValues[0];
        for (let i = 0; i < targetValues.length; i++) {
            if (currentValue < targetValues[i]) {
                targetValue = targetValues[i];
                break;
            }
        }

        console.log(currentValue, targetValue);
        const progressPercentage = Math.min((currentValue / targetValue) * 100, 100); // 计算进度百分比，最大为100%

        // 获取对应的颜色
        const colorIndex = targetValues.indexOf(targetValue);
        const progressColor = colors[colorIndex];
        console.log(colorIndex, progressColor);

        // 创建样式
        const style = document.createElement('style');
        style.textContent = `
            .user-profile-head .user-profile-head-info .user-profile-head-info-l .user-profile-head-info-ll .user-profile-avatar[data-v-d1dbb6f8] {
                position: absolute;
                top: -12px;
                width: 102px;
                height: 102px;
                border-radius: 50%;
                background: #fff;
                border: 4px solid transparent !important; /* 边框颜色设置为透明 */
                background-image: conic-gradient(
                    ${progressColor} 0% ${progressPercentage}%, /* 进度 */
                    #f0f0f2 ${progressPercentage}% 100% /* 灰色部分表示剩余 */
                );
                background-origin: border-box;
                background-clip: border-box;
            }

            .user-profile-avatar img {
                border-radius: 50%;
                width: 100%;
                height: 100%;
                display: block;
            }

            .user-profile-head-info-ll .data-display {
                position: absolute;
                top: -40px; /* 悬浮于头像上面10px */
                left: 50%; /* 水平居中 */
                transform: translateX(-50%); /* 使其真正居中 */
                background-color: #33333380; /* 背景色，半透明 */
                color: white; /* 字体颜色 */
                padding: 5px 10px; /* 内边距 */
                border-radius: 5px; /* 圆角边框 */
                font-size: 14px; /* 字体大小 */
                text-align: center; /* 文本居中 */
            }
        `;

        // 将样式添加到文档头部
        document.head.appendChild(style);

        // 创建数据展示模块
        const dataDisplay = document.createElement('div');
        dataDisplay.className = 'data-display';
        dataDisplay.textContent = `${currentValue}/${targetValue}`; // 格式为“23/100”

        // 将数据展示模块添加到头像上方
        const avatarElement = document.querySelector('.user-profile-head .user-profile-head-info .user-profile-head-info-l .user-profile-head-info-ll .user-profile-avatar[data-v-d1dbb6f8]');
        avatarElement.appendChild(dataDisplay);
    }
})();