油猴，悬浮评论区窗口模版

// ==UserScript==
// @name         平面设计
// @namespace    http://tampermonkey.net/
// @version      2025-09-27
// @description  try to take over the world!
// @author       You
// @match        https://mooc1.chaoxing.com/mooc-ans/mooc2/work/dowork?courseId=219677395&classId=126038130&cpi=348640146&workId=46096055&answerId=54960267&standardEnc=de4011821d1eda064eba54c7b2afdc72&enc=7bc3e6a393df3815cab162f1388574ba
// @icon         https://www.google.com/s2/favicons?sz=64&domain=chaoxing.com
// @grant        none
// ==/UserScript==(function () {'use strict';//#region 创建面板容器const panel = document.createElement('div');panel.id = 'floating-panel';panel.style.cssText = `position: fixed;width: 300px;background-color: rgba(255, 255, 255, 0.28); /* 最后一个值是透明度0-1 */border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);z-index: 9999;overflow: hidden;left: 50px;top: 50px;`;// 创建标题栏（可拖动区域）const titleBar = document.createElement('div');titleBar.style.cssText = `padding: 8px 15px;background-color: #d87d89;color: white;font-weight: bold;cursor: move;display: flex;justify-content: space-between;align-items: center;user-select: none;gap: 10px;`;// 添加头像区域const avatarContainer = document.createElement('div');avatarContainer.style.cssText = `width: 28px;height: 28px;border-radius: 50%;background-color: #3498db;overflow: hidden;flex-shrink: 0;display: flex;align-items: center;justify-content: center;font-size: 12px;`;// 可以替换为实际头像图片avatarContainer.innerHTML = `<img src="#">`;// 标题文本容器const titleText = document.createElement('div');titleText.textContent = '柯';titleText.style.cssText = `flex-grow: 1;color:black;font-size:20px;`;// 添加关闭按钮const closeBtn = document.createElement('span');closeBtn.style.cssText = `cursor: pointer;font-size: 18px;padding: 0 5px;flex-shrink: 0;`;closeBtn.textContent = '×';closeBtn.addEventListener('click', () => {panel.style.display = 'none';localStorage.setItem('PanelBox.State', 'hide');});// 组装标题栏titleBar.appendChild(avatarContainer);titleBar.appendChild(titleText);titleBar.appendChild(closeBtn);panel.appendChild(titleBar);// 创建内容区域const content = document.createElement('div');content.style.cssText = `padding: 15px;// max-height: 400px;overflow-y: auto;// /* 半透明背景和背景图片设置 */// background-color: rgba(255, 255, 255, 0.55); /* 最后一个值是透明度0-1 */// background-image: url('https://picsum.photos/800/600'); /* 背景图片 */// background-size: cover; /* 图片自适应 */// background-position: center; /* 图片居中 */// background-blend-mode: overlay; /* 混合模式，使半透明背景和图片融合 */`;// 工具内容示例const HeadImg = "url";// 工具内容和评论区// <div style="display: flex; gap: 10px; margin-bottom: 20px;">//         <button class="panel-btn" style="flex: 1;">工具1</button>//         <button class="panel-btn" style="flex: 1;">工具2</button>//     </div>content.innerHTML = `<div style="margin-bottom: 15px;"><p style="margin: 0 0 10px; color: #34495e; font-size: 14px;">这是一个带评论区的控制面板。</p></div><!-- 评论区标题 --><div style="font-weight: bold;font-size:20px;color:pink; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #eee;">与爱莉希雅的交流</div><!-- 评论区容器 - 最多显示3条评论，超出滚动 --><div class="comments-container" style="max-height: 390px; /* 大约可容纳3条评论的高度 */overflow-y: auto;padding-right: 5px; /* 为滚动条预留空间 */"><!-- 评论1 - 短评论，不需要展开 --><div style="display: flex; gap: 10px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;"><div style="width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;"><img src="${HeadImg}" alt="粉色小妖精" style="width:100%;height:100%;object-fit:cover;"></div><div style="flex-grow: 1;"><div style="font-weight: 500; font-size: 13px; margin-bottom: 4px; color: #333;">用户小明</div><div class="comment-text" style="font-size: 14px; color: #555; line-height: 1.4;">温馨提示：F9 可以控制 显示 ！</div></div></div></div>`;// content.innerHTML = `//     <div style="margin-bottom: 15px;">//         <p style="margin: 0 0 10px; color: #34495e; font-size: 14px;">这是一个带评论区的控制面板。</p>//     </div>//     <!-- 评论区标题 -->//     <div style="font-weight: bold; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #eee;">//         与爱莉希雅的交流//     </div>//     <!-- 评论区容器 - 最多显示3条评论，超出滚动 -->//     <div class="comments-container" style="//         max-height: 390px; /* 大约可容纳3条评论的高度 *///         overflow-y: auto;//         padding-right: 5px; /* 为滚动条预留空间 *///     ">//         <!-- 评论1 - 短评论，不需要展开 -->//         <div style="display: flex; gap: 10px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;">//             <div style="width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;">//                 <img src="https://picsum.photos/36/36?random=2" alt="评论用户头像" style="width:100%;height:100%;object-fit:cover;">//             </div>//             <div style="flex-grow: 1;">//                 <div style="font-weight: 500; font-size: 13px; margin-bottom: 4px; color: #333;">用户小明</div>//                 <div class="comment-text" style="//                     font-size: 14px; //                     color: #555; //                     line-height: 1.4;//                 ">这个工具太实用了，帮了我很大忙！</div>//             </div>//         </div>//         <!-- 评论2 - 长评论，可展开 -->//         <div style="display: flex; gap: 10px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;">//             <div style="width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;">//                 <img src="https://picsum.photos/36/36?random=3" alt="评论用户头像" style="width:100%;height:100%;object-fit:cover;">//             </div>//             <div style="flex-grow: 1;">//                 <div style="font-weight: 500; font-size: 13px; margin-bottom: 4px; color: #333;">用户小红</div>//                 <div class="comment-text expandable" style="//                     font-size: 14px; //                     color: #555; //                     line-height: 1.4;//                     max-height: 63px;//                     overflow: hidden;//                     text-overflow: ellipsis;//                     display: -webkit-box;//                     -webkit-line-clamp: 3;//                     -webkit-box-orient: vertical;//                 ">希望能增加更多功能，支持开发者！目前的功能已经很不错了，但如果能添加自定义选项会更好。比如可以让用户自己调整面板的透明度和大小，这样适用性会更强。还希望能增加数据导出功能，方便用户保存和分享信息。</div>//                 <button class="expand-btn" style="//                     border: none;//                     background: none;//                     color: #3498db;//                     font-size: 12px;//                     cursor: pointer;//                     padding: 5px 0 0;//                     margin: 0;//                 ">展开</button>//             </div>//         </div>//         <!-- 评论3 - 长评论，可展开 -->//         <div style="display: flex; gap: 10px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;">//             <div style="width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;">//                 <img src="https://picsum.photos/36/36?random=4" alt="评论用户头像" style="width:100%;height:100%;object-fit:cover;">//             </div>//             <div style="flex-grow: 1;">//                 <div style="font-weight: 500; font-size: 13px; margin-bottom: 4px; color: #333;">用户小刚</div>//                 <div class="comment-text expandable" style="//                     font-size: 14px; //                     color: #555; //                     line-height: 1.4;//                     max-height: 63px;//                     overflow: hidden;//                     text-overflow: ellipsis;//                     display: -webkit-box;//                     -webkit-line-clamp: 3;//                     -webkit-box-orient: vertical;//                 ">界面很简洁，操作也很方便，推荐大家使用！我已经用了一段时间了，发现这个工具不仅功能实用，而且非常稳定，从来没有出现过崩溃的情况。作者的更新也很及时，提出的问题都能很快得到回应和解决。希望未来能加入团队协作功能，这样我们团队可以一起使用这个工具提高工作效率。</div>//                 <button class="expand-btn" style="//                     border: none;//                     background: none;//                     color: #3498db;//                     font-size: 12px;//                     cursor: pointer;//                     padding: 5px 0 0;//                     margin: 0;//                 ">展开</button>//             </div>//         </div>//         <!-- 评论4 - 长评论，可展开 -->//         <div style="display: flex; gap: 10px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;">//             <div style="width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;">//                 <img src="https://picsum.photos/36/36?random=5" alt="评论用户头像" style="width:100%;height:100%;object-fit:cover;">//             </div>//             <div style="flex-grow: 1;">//                 <div style="font-weight: 500; font-size: 13px; margin-bottom: 4px; color: #333;">用户小丽</div>//                 <div class="comment-text expandable" style="//                     font-size: 14px; //                     color: #555; //                     line-height: 1.4;//                     max-height: 63px;//                     overflow: hidden;//                     text-overflow: ellipsis;//                     display: -webkit-box;//                     -webkit-line-clamp: 3;//                     -webkit-box-orient: vertical;//                 ">刚使用了一下，体验很好，拖动也很流畅，比我之前用过的类似工具好多了。之前用过的工具要么功能太简单满足不了需求，要么太复杂很难上手，这个工具刚好平衡了功能和易用性，非常适合像我这样的普通用户使用。唯一的小建议是希望能有更详细的使用教程，帮助新用户快速掌握所有功能。</div>//                 <button class="expand-btn" style="//                     border: none;//                     background: none;//                     color: #3498db;//                     font-size: 12px;//                     cursor: pointer;//                     padding: 5px 0 0;//                     margin: 0;//                 ">展开</button>//             </div>//         </div>//     </div>// `;panel.appendChild(content);//#endregion function createPanel() {// 添加到页面document.body.appendChild(panel);localStorage.setItem('PanelBox.State', 'show');}createPanel();// 为评论添加展开/折叠功能function setupCommentExpansion() {const expandButtons = document.querySelectorAll('.expand-btn');expandButtons.forEach(button => {button.addEventListener('click', function() {const commentText = this.previousElementSibling;const isExpanded = commentText.style.maxHeight !== '63px';if (isExpanded) {// 折叠评论commentText.style.maxHeight = '63px';commentText.style.overflow = 'hidden';commentText.style.textOverflow = 'ellipsis';commentText.style.display = '-webkit-box';commentText.style.webkitLineClamp = '3';commentText.style.webkitBoxOrient = 'vertical';this.textContent = '展开';} else {// 展开评论commentText.style.maxHeight = 'none';commentText.style.overflow = 'visible';commentText.style.textOverflow = 'none';commentText.style.display = 'block';commentText.style.webkitLineClamp = 'none';this.textContent = '收起';}// 触发评论区滚动条重新计算const commentsContainer = document.querySelector('.comments-container');commentsContainer.scrollTop = commentsContainer.scrollTop;});});}// 初始化评论展开功能setupCommentExpansion();//#region 拖拽功能// 实现简洁的拖动功能let isDragging = false;let startX, startY;let initialLeft, initialTop;titleBar.addEventListener('mousedown', (e) => {isDragging = true;// 记录初始位置和鼠标位置startX = e.clientX;startY = e.clientY;initialLeft = panel.offsetLeft;initialTop = panel.offsetTop;// 拖动时略微改变样式，提供视觉反馈panel.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.3)';e.preventDefault();});document.addEventListener('mousemove', (e) => {if (!isDragging) return;// 计算移动距离（鼠标移动多少，面板就移动多少）const deltaX = e.clientX - startX;const deltaY = e.clientY - startY;// 直接设置新位置，没有动画panel.style.left = (initialLeft + deltaX) + 'px';panel.style.top = (initialTop + deltaY) + 'px';e.preventDefault();});document.addEventListener('mouseup', () => {if (isDragging) {isDragging = false;// 恢复样式panel.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.2)';}});//#endregion// 按钮样式const buttons = document.querySelectorAll('.panel-btn');buttons.forEach(btn => {btn.style.cssText = `padding: 8px 12px;border: none;border-radius: 5px;background-color: #3498db;color: white;cursor: pointer;font-size: 14px;`;btn.addEventListener('click', () => {alert(`你点击了${btn.textContent}`);});});// F9显示隐藏界面按键事件监听$(document).keydown(function (e) {if (e.keyCode == 120) {// 切换显示状态并更新 localStorage 的值if (localStorage.getItem('PanelBox.State') == 'hide') {$(panel).css('display', 'block');localStorage.setItem('PanelBox.State', 'show');// logger('F9显隐界面');} else {$(panel).css('display', 'none');localStorage.setItem('PanelBox.State', 'hide');}}});})();