☰

Linux do Level Enhanced

Enhanced script to track progress towards next trust level on linux.do with added search functionality, adjusted posts read limit, and a breathing icon animation.

当前为 2024-05-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Linux do Level Enhanced
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.6
  5. // @description  Enhanced script to track progress towards next trust level on linux.do with added search functionality, adjusted posts read limit, and a breathing icon animation.
  6. // @author       Hua, Reno, NullUser
  7. // @match        https://linux.do/*
  8. // @icon         https://www.google.com/s2/favicons?domain=linux.do
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const StyleManager = {
  17.         styles: `
  18.             @keyframes breathAnimation {
  19.                 0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(0,0,0,0.15); }
  20.                 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(0,0,0,0.3); }
  21.             }
  22.             .breath-animation {
  23.                 animation: breathAnimation 3s ease-in-out infinite;
  24.             }
  25.             .minimized {
  26.                 border-radius: 50%;
  27.                 cursor: pointer;
  28.                 transition: transform 0.3s ease, box-shadow 0.3s ease;
  29.                 width: 50px;
  30.                 height: 50px;
  31.                 display: flex;
  32.                 justify-content: center;
  33.                 align-items: center;
  34.                 background: #f0f0f0;
  35.                 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  36.             }
  37.             .minimized:hover {
  38.                 transform: scale(1.1);
  39.                 box-shadow: 0 0 15px rgba(0,0,0,0.3);
  40.             }
  41.             .linuxDoLevelPopup {
  42.                 position: fixed;
  43.                 width: 250px;
  44.                 height: auto;
  45.                 background: #fff;
  46.                 box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  47.                 padding: 15px;
  48.                 z-index: 10000;
  49.                 font-size: 14px;
  50.                 border-radius: 15px;
  51.                 cursor: move;
  52.                 transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  53.             }
  54.             .linuxDoLevelPopup.hidden {
  55.                 opacity: 0;
  56.                 visibility: hidden;
  57.             }
  58.             .linuxDoLevelPopup:hover {
  59.                 box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  60.             }
  61.             .linuxDoLevelPopup input,
  62.             .linuxDoLevelPopup button {
  63.                 width: 100%;
  64.                 margin-top: 8px;
  65.                 padding: 10px;
  66.                 border-radius: 6px;
  67.                 border: 1px solid #ddd;
  68.                 box-sizing: border-box;
  69.                 font-size: 14px;
  70.                 transition: border-color 0.3s ease, box-shadow 0.3s ease;
  71.             }
  72.             .linuxDoLevelPopup input:focus,
  73.             .linuxDoLevelPopup button:focus {
  74.                 outline: none;
  75.                 border-color: #007BFF;
  76.                 box-shadow: 0 0 5px rgba(0,123,255,0.5);
  77.             }
  78.             .linuxDoLevelPopup button {
  79.                 background-color: #e0e0e0;
  80.                 color: #333;
  81.                 border: none;
  82.                 cursor: pointer;
  83.                 transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  84.             }
  85.             .linuxDoLevelPopup button:hover {
  86.                 background-color: #d5d5d5;
  87.                 transform: translateY(-2px);
  88.                 box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  89.             }
  90.             .minimizeButton {
  91.                 position: absolute;
  92.                 top: 5px;
  93.                 right: 5px;
  94.                 background: transparent;
  95.                 border: none;
  96.                 cursor: pointer;
  97.                 width: 25px;
  98.                 height: 25px;
  99.                 font-size: 16px;
  100.                 color: #888;
  101.                 transition: color 0.3s ease;
  102.             }
  103.             .minimizeButton:hover {
  104.                 color: #333;
  105.             }
  106.             .summary-table {
  107.                 width: 100%;
  108.                 border-collapse: collapse;
  109.                 animation: fadeIn 0.5s ease-in-out;
  110.                 font-size: 14px;
  111.             }
  112.             .summary-table td {
  113.                 padding: 4px;
  114.                 text-align: left;
  115.                 border-bottom: none;
  116.                 white-space: nowrap;
  117.             }
  118.             .progress-bar {
  119.                 position: relative;
  120.                 height: 10px;
  121.                 background-color: #f3f3f3;
  122.                 border-radius: 5px;
  123.                 overflow: hidden;
  124.                 width: 60%;
  125.                 display: inline-block;
  126.                 vertical-align: middle;
  127.                 margin-right: 10px;
  128.             }
  129.             .progress-bar-fill {
  130.                 height: 100%;
  131.                 background-color: #28a745;
  132.                 text-align: right;
  133.                 line-height: 10px;
  134.                 color: white;
  135.                 transition: width 0.4s ease-in-out;
  136.                 padding-right: 5px;
  137.                 border-radius: 5px 0 0 5px;
  138.             }
  139.             .progress-bar-fill::after {
  140.                 content: '';
  141.                 position: absolute;
  142.                 top: 0;
  143.                 left: 0;
  144.                 right: 0;
  145.                 bottom: 0;
  146.                 background-image: linear-gradient(90deg, transparent 10%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.2) 15%, transparent 15%);
  147.                 background-size: 30px 10px;
  148.                 z-index: 1;
  149.             }
  150.             .progress-text {
  151.                 display: inline-block;
  152.                 vertical-align: middle;
  153.                 font-size: 13px;
  154.                 visibility: hidden;
  155.                 position: absolute;
  156.                 top: -25px; /* 调整位置 */
  157.                 left: 0;
  158.                 background-color: #f39c12;
  159.                 color: #fff;
  160.                 border: 1px solid #e67e22;
  161.                 padding: 2px 5px;
  162.                 border-radius: 4px;
  163.                 box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  164.                 z-index: 1000;
  165.             }
  166.             .summary-row {
  167.                 display: flex;
  168.                 align-items: center;
  169.                 justify-content: space-between;
  170.                 margin-bottom: 5px;
  171.                 position: relative;
  172.             }
  173.             .summary-row:hover .progress-text {
  174.                 visibility: visible;
  175.             }
  176.         `,
  177.  
  178.         injectStyles: function() {
  179.             const styleSheet = document.createElement('style');
  180.             styleSheet.type = 'text/css';
  181.             styleSheet.innerText = this.styles;
  182.             document.head.appendChild(styleSheet);
  183.         }
  184.     };
  185.  
  186.     const DataManager = {
  187.         Config: {
  188.             BASE_URL: 'https://linux.do',
  189.             PATHS: {
  190.                 ABOUT: '/about.json',
  191.                 USER_SUMMARY: '/u/{username}/summary.json',
  192.                 USER_DETAIL: '/u/{username}.json',
  193.             },
  194.         },
  195.  
  196.         levelRequirements: {
  197.             0: { 'topics_entered': 5, 'posts_read_count': 30, 'time_read': 600 },
  198.             1: { 'days_visited': 15, 'likes_given': 1, 'likes_received': 1, 'post_count': 3, 'topics_entered': 20, 'posts_read_count': 100, 'time_read': 3600 },
  199.             2: { 'days_visited': 50, 'likes_given': 30, 'likes_received': 20, 'post_count': 10 },
  200.         },
  201.  
  202.         levelDescriptions: {
  203.             0: "新用户 🌱",
  204.             1: "基本用户 ⭐ ",
  205.             2: "成员 ⭐⭐",
  206.             3: "活跃用户 ⭐⭐⭐",
  207.             4: "领导者 🏆"
  208.         },
  209.  
  210.         fetch: async function(url, options = {}) {
  211.             try {
  212.                 const response = await fetch(url, {
  213.                     ...options,
  214.                     headers: { "Accept": "application/json", "User-Agent": "Mozilla/5.0" },
  215.                     method: options.method || "GET",
  216.                 });
  217.                 if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  218.                 return await response.json();
  219.             } catch (error) {
  220.                 console.error(`Error fetching data from ${url}:`, error);
  221.                 throw error;
  222.             }
  223.         },
  224.  
  225.         fetchAboutData: function() {
  226.             const url = this.buildUrl(this.Config.PATHS.ABOUT);
  227.             return this.fetch(url);
  228.         },
  229.  
  230.         fetchSummaryData: function(username) {
  231.             const url = this.buildUrl(this.Config.PATHS.USER_SUMMARY, { username });
  232.             return this.fetch(url);
  233.         },
  234.  
  235.         fetchUserData: function(username) {
  236.             const url = this.buildUrl(this.Config.PATHS.USER_DETAIL, { username });
  237.             return this.fetch(url);
  238.         },
  239.  
  240.         buildUrl: function(path, params = {}) {
  241.             let url = this.Config.BASE_URL + path;
  242.             Object.keys(params).forEach(key => {
  243.                 url = url.replace(`{${key}}`, encodeURIComponent(params[key]));
  244.             });
  245.             return url;
  246.         },
  247.     };
  248.  
  249.     const UIManager = {
  250.         initPopup: function() {
  251.             this.popup = this.createElement('div', { id: 'linuxDoLevelPopup', class: 'linuxDoLevelPopup' });
  252.             this.content = this.createElement('div', { id: 'linuxDoLevelPopupContent' }, '欢迎使用 Linux do 等级增强插件');
  253.             this.searchBox = this.createElement('input', { placeholder: '请输入用户名...', type: 'text', class: 'searchBox' });
  254.             this.searchButton = this.createElement('button', { class: 'searchButton' }, '搜索');
  255.             this.minimizeButton = this.createElement('button', { }, '隐藏');
  256.             this.popup.style.bottom = '20px'; // 示例：距离顶部20px
  257.             this.popup.style.right = '20px'; // 示例：距离左侧20px
  258.             this.popup.style.width = '250px'; // 初始化宽度
  259.             this.popup.style.height = 'auto'; // 高度自适应内容
  260.             this.searchButton.classList.add('btn', 'btn-icon-text', 'btn-default')
  261.             this.minimizeButton.classList.add('btn', 'btn-icon-text', 'btn-default')
  262.  
  263.             this.popup.append(this.content, this.searchBox, this.searchButton, this.minimizeButton);
  264.             document.body.appendChild(this.popup);
  265.  
  266.             this.minimizeButton.addEventListener('click', () => this.togglePopupSize());
  267.             this.searchButton.addEventListener('click', () => EventHandler.handleSearch());
  268.             // 添加输入框的回车键事件监听器
  269.             this.searchBox.addEventListener('keypress', (event) => {
  270.                 // 检查是否按下了回车键并且弹窗不处于最小化状态
  271.                 if (event.key === 'Enter' && !this.popup.classList.contains('minimized')) {
  272.                     EventHandler.handleSearch();
  273.                 }
  274.             });
  275.  
  276.             var checkInterval = setInterval(function() {
  277.                 // 查找id为current-user的li元素
  278.                 var currentUserLi = document.querySelector('#current-user');
  279.  
  280.                 // 如果找到了元素
  281.                 if(currentUserLi) {
  282.                     // 查找该元素下的button
  283.                     var button = currentUserLi.querySelector('button');
  284.  
  285.                     // 如果找到了button元素
  286.                     if(button) {
  287.                         // 获取button的href属性值
  288.                         var href = button.getAttribute('href');
  289.                         UIManager.searchBox.value = href.replace('/u/', '');
  290.                         clearInterval(checkInterval); // 停止检查
  291.                         // 这里你可以根据需要对href进行进一步操作
  292.                     }
  293.                 }
  294.             }, 1000); // 每隔1秒检查一次
  295.         },
  296.  
  297.         createElement: function(tag, attributes, text) {
  298.             const element = document.createElement(tag);
  299.             for (const attr in attributes) {
  300.                 if (attr === 'class') {
  301.                     element.classList.add(attributes[attr]);
  302.                 } else {
  303.                     element.setAttribute(attr, attributes[attr]);
  304.                 }
  305.             }
  306.             if (text) element.textContent = text;
  307.             return element;
  308.         },
  309.  
  310.         updatePopupContent: function(userSummary, user, userDetail, status) {
  311.             if (!userSummary || !user || !userDetail) return;
  312.  
  313.             // 初始化内容字符串，并添加用户信任等级
  314.             let content = `<strong>信任等级🏅：</strong>${DataManager.levelDescriptions[user.trust_level]}<br>`;
  315.  
  316.             // 获取用户的信任等级要求
  317.             const requirements = DataManager.levelRequirements[user.trust_level] || {};
  318.  
  319.             // 添加用户的 gamification_score
  320.             if (userDetail.gamification_score) {
  321.                 content += `<strong>你的点数🪙：</strong><span style="color: green;">${userDetail.gamification_score}</span><br>`;
  322.             }
  323.  
  324.             // 添加用户的最近活跃时间
  325.             content += `<strong>最近活跃🕒：</strong>${formatTimestamp(userDetail.last_seen_at)}<br>`;
  326.  
  327.             // 处理2级以下用户，调用 summaryRequired 功能
  328.             if (user.trust_level <= 2) {
  329.                 if (user.trust_level === 2) {
  330.                     requirements['posts_read_count'] = Math.min(parseInt(parseInt(status.posts_30_days) / 4), 20000);
  331.                     requirements['topics_entered'] = Math.min(parseInt(parseInt(status.topics_30_days) / 4), 500);
  332.                 }
  333.                 let summary = summaryRequired(requirements, userSummary, this.translateStat.bind(this));
  334.                 content += summary;
  335.             } else {
  336.                 // 处理2级以上用户，调用 analyzeAbility 功能
  337.                 if (userSummary.top_categories) {
  338.                     content += analyzeAbility(userSummary.top_categories);
  339.                 }
  340.             }
  341.  
  342.             // 更新弹窗内容
  343.             this.content.innerHTML = content;
  344.         },
  345.  
  346.         togglePopupSize: function() {
  347.             if (this.popup.classList.contains('minimized')) {
  348.                 this.popup.classList.remove('minimized');
  349.                 this.popup.style.width = '250px';
  350.                 this.popup.style.height = 'auto';
  351.                 this.content.style.display = 'block';
  352.                 this.searchBox.style.display = 'block';
  353.                 this.searchButton.style.display = 'block';
  354.                 this.minimizeButton.textContent = '隐藏';
  355.                 this.minimizeButton.style.color = 'black';
  356.                 this.popup.classList.remove('breath-animation');
  357.             } else {
  358.                 this.popup.classList.add('minimized');
  359.                 this.popup.style.width = '50px';
  360.                 this.popup.style.height = '50px';
  361.                 this.content.style.display = 'none';
  362.                 this.searchBox.style.display = 'none';
  363.                 this.searchButton.style.display = 'none';
  364.                 this.popup.classList.add('breath-animation');
  365.  
  366.             // 调用 updatePercentage 函数并更新按钮文本
  367.             updatePercentage().then(percentage => {
  368.                 let color;
  369.                 // 根据百分比设置颜色
  370.                 if (percentage > 50) {
  371.                     color = 'purple';
  372.                 } else if (percentage > 30) {
  373.                     color = 'red';
  374.                 } else {
  375.                     color = 'green';
  376.                 }
  377.  
  378.                 // 更新按钮的文本和文本颜色
  379.                 this.minimizeButton.textContent = `${percentage.toFixed(2)}%`;
  380.                 this.minimizeButton.style.color = color; // 设置文本颜色
  381.             }).catch(error => {
  382.                 console.error('Error calculating percentage:', error);
  383.                 // 出错时保持原有文本
  384.                 this.minimizeButton.textContent = '展开';
  385.                 this.minimizeButton.style.color = 'black';
  386.             });
  387.             }
  388.  
  389.             // 自动校正窗口位置
  390.             addDraggableFeature(this.popup);
  391.             const windowWidth = window.innerWidth;
  392.             const windowHeight = window.innerHeight;
  393.             const popupWidth = this.popup.offsetWidth;
  394.             const popupHeight = this.popup.offsetHeight;
  395.             const popupTop = parseInt(this.popup.style.top);
  396.             const popupLeft = parseInt(this.popup.style.left);
  397.  
  398.             // 初始化新的位置
  399.             let newTop = popupTop;
  400.             let newLeft = popupLeft;
  401.  
  402.             // 上下边界同时检查
  403.             newTop = Math.min(Math.max(70, popupTop), windowHeight - popupHeight);
  404.  
  405.             // 左右边界同时检查
  406.             newLeft = Math.min(Math.max(5, popupLeft), windowWidth - popupWidth - 20);
  407.  
  408.             this.popup.style.top = newTop + 'px';
  409.             this.popup.style.left = newLeft + 'px';
  410.         },
  411.  
  412.         displayError: function(message) {
  413.             this.content.innerHTML = `<strong>错误：</strong>${message}`;
  414.         },
  415.  
  416.         translateStat: function(stat) {
  417.             const translations = {
  418.                 'days_visited': '访问天数',
  419.                 'likes_given': '给出的赞',
  420.                 'likes_received': '收到的赞',
  421.                 'post_count': '帖子数量',
  422.                 'posts_read_count': '已读帖子',
  423.                 'topics_entered': '已读主题',
  424.                 'time_read': '阅读时间(秒)'
  425.             };
  426.             return translations[stat] || stat;
  427.         }
  428.     };
  429.  
  430.     const EventHandler = {
  431.         handleSearch: async function() {
  432.             const username = UIManager.searchBox.value.trim();
  433.             if (!username) return;
  434.  
  435.             try {
  436.                 const [aboutData, summaryData, userData] = await Promise.all([
  437.                     DataManager.fetchAboutData(),
  438.                     DataManager.fetchSummaryData(username),
  439.                     DataManager.fetchUserData(username)
  440.                 ]);
  441.                 if (summaryData && userData && aboutData) {
  442.                     UIManager.updatePopupContent(summaryData.user_summary, summaryData.users ? summaryData.users[0] : { 'trust_level': 0 }, userData.user, aboutData.about.stats);
  443.                 }
  444.             } catch (error) {
  445.                 console.error(error);
  446.             }
  447.         },
  448.         // 更新拖动状态
  449.         handleDragEnd: function() {
  450.             UIManager.updateDragStatus(true);
  451.         }
  452.     };
  453.  
  454.     // 添加技能分析
  455.     function analyzeAbility(topCategories) {
  456.         let resultStr = "<strong>技能分析🎯：</strong><br>";
  457.         const icons = {
  458.             "常规话题": "🌐",
  459.             "wiki": "📚",
  460.             "快问快答": "❓",
  461.             "人工智能": "🤖",
  462.             "周周热点": "🔥",
  463.             "精华神贴": "✨",
  464.             "高阶秘辛": "🔮",
  465.             "读书成诗": "📖",
  466.             "配置调优": "⚙️",
  467.             "网络安全": "🔒",
  468.             "软件分享": "💾",
  469.             "软件开发": "💻",
  470.             "嵌入式": "🔌",
  471.             "机器学习": "🧠",
  472.             "代码审查": "👀",
  473.             "new-api": "🆕",
  474.             "一机难求": "📱",
  475.             "速来拼车": "🚗",
  476.             "网络记忆": "💭",
  477.             "非我莫属": "🏆",
  478.             "赏金猎人": "💰",
  479.             "搞七捻三": "🎲",
  480.             "碎碎碎念": "🗨️",
  481.             "金融经济": "💹",
  482.             "新闻": "📰",
  483.             "旅行": "✈️",
  484.             "美食": "🍽️",
  485.             "健身": "🏋️",
  486.             "音乐": "🎵",
  487.             "游戏": "🎮",
  488.             "羊毛": "🐑",
  489.             "树洞": "🌳",
  490.             "病友": "🤒",
  491.             "职场": "💼",
  492.             "断舍离": "♻️",
  493.             "二次元": "🎎",
  494.             "运营反馈": "🔄",
  495.             "老干部疗养院": "🛌",
  496.             "活动": "🎉",
  497.         };
  498.         const totalScore = topCategories.reduce((sum, category) => sum + (category.topic_count * 2) + (category.post_count * 1), 0);
  499.         topCategories.sort((a, b) => a.name.length - b.name.length);
  500.         topCategories.forEach((category, index) => {
  501.             const score = (category.topic_count * 2) + (category.post_count * 1);
  502.             const percentage = ((score / totalScore) * 100).toFixed(1) + "%";
  503.             let numStars;
  504.             if (score >= 999) {
  505.                 numStars = 7; // 满分7颗红星
  506.             } else {
  507.                 numStars = Math.round((score / 999) * 7); // 其他按比例显示
  508.             }
  509.             const stars = "❤️".repeat(numStars) + "🤍".repeat(7 - numStars); // 显示红星和空星
  510.             let icon = icons[category.name] || "❓"; // 如果没有找到图标，显示默认图标
  511.             resultStr += `
  512.                 <div style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; opacity: 0; animation: fadeIn 0.5s forwards; animation-delay: ${index * 0.1}s; font-size: 13px;'>
  513.                     <div style='flex: 0 0 20px; text-align: center;'>${icon}</div>
  514.                     <div style='flex: 2; text-align: left;'>${category.name}</div>
  515.                     <div style='flex: 4; text-align: left;'>${stars}</div>
  516.                     <div style='flex: 1; text-align: right;'>${percentage}</div>
  517.                 </div>`;
  518.         });
  519.  
  520.         resultStr += `
  521.             <style>
  522.                 @keyframes fadeIn {
  523.                     to { opacity: 1; }
  524.                 }
  525.             </style>
  526.         `;
  527.  
  528.         return resultStr;
  529.     }
  530.  
  531.     // 添加含水率
  532.     function updatePercentage() {
  533.         return new Promise((resolve, reject) => {
  534.             let badIds = [11, 16, 34, 17, 18, 19, 29, 36, 35, 22, 26, 25];
  535.             const badScore = [];
  536.             const goodScore = [];
  537.             const urls = [
  538.                 'https://linux.do/latest.json?order=created',
  539.                 'https://linux.do/new.json',
  540.                 'https://linux.do/top.json?period=daily'
  541.             ];
  542.  
  543.             Promise.all(urls.map(url => fetch(url).then(resp => resp.json())))
  544.                 .then(data => {
  545.                     data.forEach(({ topic_list: { topics } }) => {
  546.                         topics.forEach(topic => {
  547.                             const score = topic.posts_count + topic.like_count + topic.reply_count;
  548.                             (badIds.includes(topic.category_id) ? badScore : goodScore).push(score);
  549.                         });
  550.                     });
  551.  
  552.                     const badTotal = badScore.reduce((acc, curr) => acc + curr, 0);
  553.                     const goodTotal = goodScore.reduce((acc, curr) => acc + curr, 0);
  554.                     const percentage = (badTotal / (badTotal + goodTotal)) * 100;
  555.  
  556.                     resolve(percentage);
  557.                 })
  558.                 .catch(reject);
  559.         });
  560.     };
  561.  
  562.     // 添加时间格式化
  563.     function formatTimestamp(lastSeenAt) {
  564.         // 解析时间戳并去除毫秒
  565.         let timestamp = new Date(lastSeenAt);
  566.  
  567.         // 使用Intl.DateTimeFormat格式化时间为上海时区
  568.         let formatter = new Intl.DateTimeFormat('zh-CN', {
  569.             timeZone: 'Asia/Shanghai',
  570.             year: 'numeric',
  571.             month: 'numeric',
  572.             day: 'numeric',
  573.             hour: 'numeric',
  574.             minute: 'numeric',
  575.             second: 'numeric',
  576.         });
  577.  
  578.         // 获取格式化后的字符串
  579.         let formattedTimestamp = formatter.format(timestamp);
  580.  
  581.         return formattedTimestamp;
  582.     }
  583.  
  584.     // 添加升级进度功能
  585.     function summaryRequired(required, current, translateStat) {
  586.         let summary = '<strong>升级进度🌟：</strong><br>';
  587.  
  588.         summary += '<div class="summary-table">';
  589.  
  590.         for (const stat in required) {
  591.             if (required.hasOwnProperty(stat) && current.hasOwnProperty(stat)) {
  592.                 const reqValue = required[stat];
  593.                 const curValue = current[stat] || 0; // 使用 || 0 确保未定义的情况下使用0
  594.                 const percentage = Math.min((curValue / reqValue) * 100, 100); // 计算百分比
  595.                 let color = curValue >= reqValue ? '#28a745' : '#dc3545'; // 使用绿色或红色
  596.  
  597.                 summary += `
  598.                     <div class="summary-row">
  599.                         <div>${translateStat(stat)}</div>
  600.                         <div class="progress-bar" title="${curValue}/${reqValue}">
  601.                             <div class="progress-bar-fill" style="width: ${percentage}%; background-color: ${color};"></div>
  602.                         </div>
  603.                         <div class="progress-text">${curValue}/${reqValue}</div>
  604.                     </div>`;
  605.             }
  606.         }
  607.  
  608.         summary += '</div>';
  609.         return summary;
  610.     }
  611.  
  612.     // 添加拖动功能
  613.     function addDraggableFeature(element) {
  614.         let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  615.         let isDragging = false;
  616.  
  617.         const dragMouseDown = function(e) {
  618.             // 检查事件的目标是否是输入框，按钮或其他可以忽略拖动逻辑的元素
  619.             if (e.target.tagName.toUpperCase() === 'INPUT' || e.target.tagName.toUpperCase() === 'TEXTAREA' || e.target.tagName.toUpperCase() === 'BUTTON') {
  620.                 return; // 如果是，则不执行拖动逻辑
  621.             }
  622.  
  623.             e = e || window.event;
  624.             e.preventDefault();
  625.             pos3 = e.clientX;
  626.             pos4 = e.clientY;
  627.             document.onmouseup = closeDragElement;
  628.             document.onmousemove = elementDrag;
  629.             isDragging = true;
  630.         };
  631.  
  632.         const elementDrag = function(e) {
  633.             if (!isDragging) return;
  634.             e = e || window.event;
  635.             e.preventDefault();
  636.             pos1 = pos3 - e.clientX;
  637.             pos2 = pos4 - e.clientY;
  638.             pos3 = e.clientX;
  639.             pos4 = e.clientY;
  640.  
  641.             // 使用requestAnimationFrame优化拖动
  642.             requestAnimationFrame(() => {
  643.                 element.style.top = Math.max(0, Math.min(window.innerHeight - element.offsetHeight, element.offsetTop - pos2)) + "px";
  644.                 element.style.left = Math.max(0, Math.min(window.innerWidth - element.offsetWidth, element.offsetLeft - pos1)) + "px";
  645.                 // 为了避免与拖动冲突，在此移除bottom和right样式
  646.                 element.style.bottom = '';
  647.                 element.style.right = '';
  648.             });
  649.         };
  650.  
  651.         const closeDragElement = function() {
  652.             document.onmouseup = null;
  653.             document.onmousemove = null;
  654.             isDragging = false;
  655.             // 在拖动结束时更新拖动状态
  656.             EventHandler.handleDragEnd();
  657.         };
  658.  
  659.         element.onmousedown = dragMouseDown;
  660.     }
  661.  
  662.     const init = () => {
  663.         StyleManager.injectStyles();
  664.         UIManager.initPopup();
  665.         addDraggableFeature(document.getElementById('linuxDoLevelPopup')); // 确保已设置该ID
  666.         UIManager.togglePopupSize(); // 初始最小化
  667.     };
  668.  
  669.     init();
  670.  
  671. })();