CatOJ 美化脚本更新日志
v1.0
Code
// ==UserScript==
// @name CatOJ美化
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 为号家军OJ添加美化效果，优化性能和视觉体验
// @author Dickseep
// @match https://oj.hjjoi.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// 添加全局样式 - 优化性能和视觉效果
GM_addStyle(`
/* 优化动画性能 */
* {
will-change: transform, opacity;
backface-visibility: hidden;
}
/* ==== 修复hljs代码块纯白背景问题 ==== */
.hljs {
background-color: rgba(15, 25, 45, 0.7) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 12px !important;
padding: 15px !important;
margin: 15px 0 !important;
overflow: auto;
box-shadow: 0 4px 12px rgba(0, 20, 60, 0.3) !important;
}
.hljs code {
background: transparent !important;
color: #e0f7ff !important;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
color: #ff79c6 !important; /* 粉色 */
}
.hljs-number,
.hljs-string,
.hljs-meta .hljs-string {
color: #f1fa8c !important; /* 黄色 */
}
.hljs-comment {
color: #6272a4 !important; /* 灰色蓝 */
font-style: italic;
}
.hljs-title,
.hljs-section {
color: #50fa7b !important; /* 绿色 */
}
.hljs-built_in,
.hljs-name {
color: #8be9fd !important; /* 青色 */
}
/* ==== 全局字体颜色设置 ==== */
body, body *,
.ant-typography, .description-content,
.ant-select-selection-item, .ant-btn,
.loginstatus-username, .avatarname-username,
.ant-page-header-heading-title, .ant-layout-footer,
.ant-menu-title-content, .ant-menu-item-icon svg,
.anticon svg, .ant-dropdown-trigger,
.bg-toggle-btn, .particles-toggle-btn,
.ant-dropdown-menu-item, .ant-dropdown-menu-title-content,
.ant-table-cell, .ant-tag, .ant-list-item,
.ant-alert-message, .ant-statistic-content,
.ant-input, .ant-input-number-input,
.ant-radio-wrapper, .ant-checkbox-wrapper,
.ant-form-item-label > label,
.ant-tabs-tab, .ant-tabs-tab-btn,
.ant-result-title, .ant-result-subtitle,
.ant-comment-content-author-name, .ant-comment-content-detail {
color: #e0f7ff !important; /* 所有文字使用浅色 */
}
/* ==== 特定元素颜色定制 ==== */
/* 空间项使用浅绿色 */
.ant-space-item {
color: #7df9ff !important; /* 浅绿色 */
}
/* 标签使用绿色 */
.ant-tag.css-bzolti.css-var {
color: #00ff7f !important; /* 亮绿色 */
border-color: #00ff7f !important;
background: rgba(0, 255, 127, 0.1) !important;
box-shadow: 0 0 8px rgba(0, 255, 127, 0.5) !important;
}
/* 内容区域使用浅蓝色 */
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
color: #7df9ff !important; /* 浅蓝色 */
}
/* 修复所有白色背景问题 */
body, .ant-layout, .css-bzolti,
.ant-card, .app-content, .ant-select-selector,
.ant-page-header, .ant-space-item,
.ant-divider, .ant-btn-default,
.loginstatus-dropdown, .avatarname-username,
.ant-tag, .ant-input, .ant-input-affix-wrapper,
.ant-alert, .ant-list-item, .ant-table-cell,
.ant-popover-inner, .ant-modal-content {
background: transparent !important;
}
/* 修复表格表头透明 */
.ant-table-thead > tr > th {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* 修复表格行透明 */
.ant-table-tbody > tr > td {
background: rgba(15, 25, 45, 0.3) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 表格行悬停效果 */
.ant-table-tbody > tr:hover > td {
background: rgba(64, 128, 255, 0.2) !important;
}
/* 修复头像用户名背景问题 */
.avatarname-username, .loginstatus-username {
background: transparent !important;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}
/* 修复边框颜色问题 */
.ant-card, .app-content, .ant-select-selector,
.ant-divider, .ant-btn-default,
.ant-input, .ant-input-affix-wrapper,
.ant-tag {
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* 渐变背景 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f1a3d, #2a0b3a, #0d2b4e);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
z-index: -3;
opacity: 1;
transition: opacity 0.5s ease;
}
/* 图片背景 */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://t.alcy.cc/fj') center/cover no-repeat;
z-index: -4;
opacity: 0;
transition: opacity 0.5s ease;
}
/* 图片背景激活状态 */
body.image-bg::after {
opacity: 1;
}
/* 禁用彩色背景 */
body.image-bg::before {
opacity: 0;
}
/* 背景动画 */
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 亚克力效果 - 导航栏 */
.app-header {
background: rgba(15, 25, 45, 0.7) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 12px !important;
margin: 15px !important;
padding: 12px 25px !important;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 修复导航栏布局 */
.app-logo {
color: #4fc3f7 !important;
font-size: 1.8rem !important;
font-weight: bold !important;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.5) !important;
}
.app-menu {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}
.ant-menu-overflow-item.ant-menu-item {
font-weight: 500;
font-size: 1.1rem;
padding: 8px 15px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.ant-menu-overflow-item.ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
transform: translateY(-2px);
text-shadow: 0 0 5px white;
}
.ant-menu-item-icon {
margin-right: 8px !important;
color: #4fc3f7 !important;
}
/* 用户区域移到最右侧 */
.user-area-container {
display: flex;
align-items: center;
margin-left: auto; /* 关键：推到最右边 */
gap: 15px;
}
/* 设置按钮样式 */
.bg-toggle-btn, .particles-toggle-btn {
background: rgba(64, 128, 255, 0.25) !important;
border: none !important;
border-radius: 20px !important;
padding: 8px 15px !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 500;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.bg-toggle-btn:hover, .particles-toggle-btn:hover {
background: rgba(79, 195, 247, 0.4) !important;
transform: scale(1.05);
box-shadow: 0 0 15px rgba(79, 195, 247, 0.7);
}
/* 按钮图标样式 */
.bg-toggle-btn svg, .particles-toggle-btn svg {
width: 18px;
height: 18px;
}
/* 亚克力效果 - 卡片 */
.ant-card {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
margin-top: 15px !important;
padding: 20px !important;
}
/* 亚克力效果 - 内容区域 */
.app-content {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
margin: 15px !important;
padding: 25px !important;
}
/* 头像展开效果 - 高度优化 */
.loginstatus-dropdown {
display: flex !important;
align-items: center !important;
transition: all 0.4s ease !important;
padding: 5px 10px !important;
border-radius: 30px !important;
background: rgba(25, 45, 75, 0.5) !important;
height: 36px !important;
margin-left: auto; /* 确保在容器内靠右 */
}
.loginstatus-username {
max-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
margin-left: 0 !important;
font-weight: bold !important;
font-size: 1rem !important;
text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}
.loginstatus-dropdown:hover .loginstatus-username {
max-width: 200px !important;
opacity: 1 !important;
margin-left: 10px !important;
}
.loginstatus-avatar {
transition: transform 0.3s ease !important;
border: 2px solid rgba(79, 195, 247, 0.5);
width: 26px !important;
height: 26px !important;
}
.loginstatus-dropdown:hover .loginstatus-avatar {
transform: scale(1.15) !important;
box-shadow: 0 0 15px rgba(79, 195, 247, 0.6) !important;
}
/* 修复下拉箭头颜色 */
.anticon-down svg {
fill: #e0f7ff !important;
}
.loginstatus-dropdown:hover .anticon-down svg {
fill: #4fc3f7 !important;
}
/* 按钮美化 */
.ant-btn {
transition: all 0.3s ease !important;
border-radius: 8px !important;
font-weight: 500 !important;
}
.ant-btn-primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4) !important;
}
.ant-btn-primary:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 标题美化 */
.ant-page-header-heading-title {
color: #4fc3f7 !important;
font-size: 2rem !important;
text-shadow: 0 0 15px rgba(79, 195, 247, 0.5) !important;
}
/* 页脚美化 */
.ant-layout-footer {
background: rgba(15, 25, 45, 0.7) !important;
padding: 20px !important;
text-align: center !important;
border-top: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 12px !important;
margin: 15px !important;
backdrop-filter: blur(5px);
}
.ant-layout-footer a {
color: #4fc3f7 !important;
text-decoration: none;
transition: all 0.3s ease;
}
.ant-layout-footer a:hover {
color: #81d4fa !important;
text-shadow: 0 0 5px rgba(129, 212, 250, 0.5);
}
/* 粒子画布 */
#particles-canvas {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: -1 !important;
}
/* 快速提交区域美化 */
#quick-submit-file {
background: rgba(25, 45, 75, 0.5) !important;
border-radius: 8px !important;
padding: 10px !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
width: 100% !important;
margin-top: 10px !important;
transition: all 0.3s ease;
}
#quick-submit-file:hover {
background: rgba(35, 65, 105, 0.6) !important;
border-color: rgba(79, 195, 247, 0.5) !important;
}
/* 右下角按钮美化 */
.ant-btn-circle.ant-btn-lg {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
background: linear-gradient(45极光效果, #1e88e5, #0d47a1) !important;
border: none !important;
}
.ant-btn-circle.ant-btn-lg:hover {
transform: scale(1.1) rotate(10deg) !important;
box-shadow: 0 8px 20px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 修复选择框文本颜色 */
.ant-select-selection-item {
color: #e0f7ff !important;
}
/* 修复所有图标颜色 */
.anticon svg {
fill: #e0f7ff !important;
}
.ant-menu-item:hover .anticon svg {
fill: #4fc3f7 !important;
}
/* 修复分隔线颜色 */
.ant-divider {
background: rgba(64, 128, 255, 0.25) !important;
}
`);
// 创建粒子效果画布
const canvas = document.createElement('canvas');
canvas.id = 'particles-canvas';
document.body.appendChild(canvas);
// 粒子系统 - 增强效果
const initParticles = function() {
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 根据屏幕大小调整粒子数量（性能优化）
const particleCount = Math.min(250, Math.floor((window.innerWidth * window.innerHeight) / 5000));
const particles = [];
// 创建粒子
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 5 + 3, // 增大粒子尺寸
speedX: (Math.random() - 0.5) * 1.2, // 提高速度
speedY: (Math.random() - 0.5) * 1.2,
color: `rgba(79, 195, 247, ${Math.random() * 0.6 + 0.4})` // 提高透明度
});
}
let animationId = null;
let isRunning = true;
let lastTime = 0;
const frameRate = 30; // 限制帧率提高性能
const frameInterval = 1000 / frameRate;
// 绘制粒子
function draw(timestamp) {
if (!lastTime) last极光效果 = timestamp;
const deltaTime = timestamp - lastTime;
if (deltaTime > frameInterval) {
lastTime = timestamp - (deltaTime % frameInterval);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制连接线
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 180) { // 增大连接距离
ctx.beginPath();
ctx.strokeStyle = `rgba(79, 195, 247, ${0.5 * (1 - distance/180)})`; // 提高透明度
ctx.lineWidth = 1.0; // 加粗线条
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
// 绘制粒子
particles.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
// 添加发光效果
const gradient = ctx.createRadialGradient(
p.x, p.y, 0,
p.x, p.y, p.radius
);
gradient.addColorStop(0, `rgba(79, 195, 247, 1)`);
gradient.addColorStop(0.7, `rgba(79, 195, 247, 0.5)`);
gradient.addColorStop(1, `rgba(79, 195, 247, 0.2)`);
ctx.fillStyle = gradient;
ctx.fill();
// 更新位置
p.x += p.speedX;
p.y += p.speedY;
// 边界检查
if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
});
}
if (isRunning) {
animationId = requestAnimationFrame(draw);
}
}
draw();
// 控制函数
return {
start: function() {
if (!isRunning) {
isRunning = true;
canvas.style.display = 'block';
lastTime = 0;
draw();
}
},
stop: function() {
if (isRunning) {
isRunning = false;
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
}
canvas.style.display = 'none';
}
},
toggle: function() {
if (isRunning) {
this.stop();
} else {
this.start();
}
return isRunning;
}
};
};
let particlesControl = null;
// 背景切换功能
function initBackgroundToggle() {
// 创建背景切换按钮
const bgToggleBtn = document.createElement('button');
bgToggleBtn.className = 'bg-toggle-btn';
bgToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z"></path>
</svg>
背景切换
`;
// 切换背景函数
function toggleBackground() {
const isImageBg = document.body.classList.toggle('image-bg');
GM_setValue('useImageBackground', isImageBg);
bgToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="${isImageBg ? 'M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z' : 'M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z'}"></path>
</svg>
${isImageBg ? '渐变背景' : '图片背景'}
`;
}
bgToggleBtn.addEventListener('click', toggleBackground);
return bgToggleBtn;
}
// 粒子效果开关
function initParticlesToggle() {
const particlesToggleBtn = document.createElement('button');
particlesToggleBtn.className = 'particles-toggle-btn';
particlesToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z"></path>
</svg>
粒子效果
`;
// 从存储中获取粒子状态
const particlesEnabled = GM_getValue('particlesEnabled', true);
if (!particlesEnabled && particlesControl) {
particlesControl.stop();
particlesToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 Z M10,12 C10,13.1045695 10.8954305,14 12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 Z"></path>
</svg>
粒子效果
`;
}
// 切换粒子效果
particlesToggleBtn.addEventListener('click', function() {
if (particlesControl) {
const nowEnabled = particlesControl.toggle();
GM_setValue('particlesEnabled', nowEnabled);
particlesToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="${nowEnabled ? 'M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z' : 'M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 Z M10,12 C10,13.1045695 10.8954305,14 12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 Z'}"></path>
</svg>
${nowEnabled ? '关闭粒子' : '开启粒子'}
`;
}
});
return particlesToggleBtn;
}
// 确保页面加载完成后初始化
window.addEventListener('DOMContentLoaded', function() {
// 创建用户区域容器（确保在导航栏最右侧）
const userAreaContainer = document.createElement('div');
userAreaContainer.className = 'user-area-container';
userAreaContainer.style.marginLeft = 'auto'; // 确保在导航栏最右侧
userAreaContainer.style.display = 'flex';
userAreaContainer.style.alignItems = 'center';
userAreaContainer.style.gap = '15px';
// 添加背景切换按钮
const bgToggleBtn = initBackgroundToggle();
userAreaContainer.appendChild(bgToggleBtn);
// 添加粒子切换按钮
const particlesToggleBtn = initParticlesToggle();
userAreaContainer.appendChild(particlesToggleBtn);
// 获取现有用户区域
const userArea = document.querySelector('.loginstatus-dropdown');
if (userArea) {
// 确保用户名在容器内靠右
userArea.style.marginLeft = 'auto';
userAreaContainer.appendChild(userArea);
}
// 将用户容器添加到导航栏
const header = document.querySelector('.app-header');
if (header) {
// 确保容器在导航栏最右侧
header.appendChild(userAreaContainer);
}
// 应用保存的背景设置
const useImageBackground = GM_getValue('useImageBackground', false);
if (useImageBackground) {
document.body.classList.add('image-bg');
}
// 延迟初始化粒子系统（提高页面加载速度）
setTimeout(() => {
particlesControl = initParticles();
// 应用粒子效果状态
const particlesEnabled = GM_getValue('particlesEnabled', true);
if (!particlesEnabled) {
particlesControl.stop();
}
}, 1000);
// 窗口大小改变时重置画布
window.addEventListener('resize', function() {
if (canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
});
});
})();
-
作者：@vernal_blossom
-
更新时间：2025-07-25
-
更新内容：
- 将本插件成功地写出来
v1.1
Code
// ==UserScript==
// @name CatOJ美化
// @namespace http://tampermonkey.net/
// @version 1.1
// @description 为号家军OJ添加美化效果，优化性能和视觉体验
// @author vernal_blossom
// @match https://oj.hjjoi.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// ==== 第一部分：样式定义 ====
GM_addStyle(`
/* 优化动画性能 */
* {
will-change: transform, opacity;
backface-visibility: hidden;
}
/* ==== 修复hljs代码块纯白背景问题 ==== */
.hljs {
background-color: rgba(15, 25, 45, 0.7) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 12px !important;
padding: 15px !important;
margin: 15px 0 !important;
overflow: auto;
box-shadow: 0 4极光效果12px rgba(0, 20, 60, 0.3) !important;
}
.hljs code {
background: transparent !important;
color: #e0f7ff !important;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
color: #ff79c6 !important; /* 粉色 */
}
.hljs-number,
.hljs-string,
.hljs-meta .hljs-string {
color: #f1fa8c !important; /* 黄色 */
}
.hljs-comment {
color: #6272a4 !important; /* 灰色蓝 */
font-style: italic;
}
.hljs-title,
.hljs-section {
color: #50fa7b !important; /* 绿色 */
}
.hljs-built_in,
.hljs-name {
color: #8be9fd !important; /* 青色 */
}
/* ==== 全局字体颜色设置 ==== */
body, body *,
.ant-typography, .description-content,
.ant-select-selection-item, .ant-btn,
.loginstatus-username, .avatarname-username,
.ant-page-header-heading-title, .ant-layout-footer,
.ant-menu-title-content, .ant-menu-item-icon svg,
.anticon svg, .ant-dropdown-trigger,
.bg-toggle-btn, .particles-toggle-btn,
.ant-dropdown-menu-item, .ant-dropdown-menu-title-content,
.ant-table-cell, .ant-tag, .ant-list-item,
.ant-alert-message, .ant-statistic-content,
.ant-input, .ant-input-number-input,
.ant-radio-wrapper, .ant-checkbox-wrapper,
.ant-form-item-label > label,
.ant-tabs-tab, .ant-tabs-tab-btn,
.ant-result-title, .ant-result-subtitle,
.ant-comment-content-author-name, .ant-comment-content-detail {
color: #e0f7ff !important; /* 所有文字使用浅色 */
}
/* ==== 特定元素颜色定制 ==== */
/* 空间项使用浅绿色 */
.ant-space-item {
color: #7df9ff !important; /* 浅绿色 */
}
/* 标签使用绿色 */
.ant-tag.css-bzolti.css-var {
color: #00ff7f !important; /* 亮绿色 */
border-color: #00ff7f !important;
background: rgba(0, 255, 127, 0.1) !important;
box-shadow: 0 0 8px rgba(0, 255, 127, 0.5) !important;
}
/* 内容区域使用浅蓝色 */
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
color: #7df9ff !important; /* 浅蓝色 */
}
/* 修复所有白色背景问题 */
body, .ant-layout, .css-bzolti,
.ant-card, .app-content, .ant-select-selector,
.ant-page-header, .ant-space-item,
.ant-divider, .ant-btn-default,
.loginstatus-dropdown, .avatarname-username,
.ant-tag, .ant-input, .ant-input-affix-wrapper,
.ant-alert, .ant-list-item, .ant-table-cell,
.ant-popover-inner, .ant-modal-content {
background: transparent !important;
}
/* 修复表格表头透明 */
.ant-table-thead > tr > th {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* 修复表格行透明 */
.ant-table-tbody > tr > td {
background: rgba(15, 25, 45, 0.3) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !极光效果;
}
/* 表格行悬停效果 */
.ant-table-tbody > tr:hover > td {
background: rgba(64, 128, 255, 0.2) !important;
}
/* 修复头像用户名背景问题 */
.avatarname-username, .loginstatus-username {
background: transparent !important;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}
/* 修复边框颜色问题 */
.ant-card, .app-content, .ant-select-selector,
.ant-divider, .ant-btn-default,
.ant-input, .ant-input-affix-wrapper,
.ant-tag {
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* 渐变背景 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f1a3d, #2a0b3a, #0d2b4e);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
z-index: -3;
opacity: 1;
transition: opacity 0.5s ease;
}
/* 图片背景 */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://t.alcy.cc/fj') center/cover no-repeat;
z-index: -4;
opacity: 0;
transition: opacity 0.5s ease;
}
/* 图片背景激活状态 */
body.image-bg::after {
opacity: 1;
}
/* 禁用彩色背景 */
body.image-bg::before {
opacity: 0;
}
/* 背景动画 */
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 亚克力效果 - 导航栏 */
.app-header {
background: rgba(15, 25, 45, 0.7) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 12px !important;
margin: 15px !important;
padding: 12px 25px !important;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 修复导航栏布局 */
.app-logo {
color: #4fc3f7 !important;
font-size: 1.8rem !important;
font-weight: bold !important;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.5) !important;
}
.app-menu {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}
.ant-menu-overflow-item.ant-menu-item {
font-weight: 500;
font-size: 1.1rem;
padding: 8px 15px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.ant-menu-overflow-item.ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
transform: translateY(-2px);
text-shadow: 0 0 5px white;
}
.ant-menu-item-icon {
margin-right: 8px !important;
color: #4fc3f7 !important;
}
/* 用户区域移到最右侧 */
.user-area-container {
display: flex;
align-items: center;
margin-left: auto; /* 关键：推到最右边 */
gap: 15px;
}
/* 设置按钮样式 */
.bg-toggle-btn, .particles-toggle-btn {
background: rgba(64, 128, 255, 0.25) !important;
border: none !important;
border-radius: 20px !important;
padding: 8px 15px !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 500;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.bg-toggle-btn:hover, .particles-toggle-btn:hover {
background: rgba(79, 195, 247, 0.4) !important;
transform: scale(1.05);
box-shadow: 0 0 15px rgba(79, 195, 247, 0.7);
}
/* 按钮图标样式 */
.bg-toggle-btn svg, .particles-toggle-btn svg {
width: 18px;
height: 18px;
}
/* 亚克力效果 - 卡片 */
.ant-card {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
margin-top: 15px !important;
padding: 20px !important;
}
/* 亚克力效果 - 内容区域 */
.app-content {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
margin: 15px !important;
padding: 25px !important;
}
/* 头像展开效果 - 高度优化 */
.loginstatus-dropdown {
display: flex !important;
align-items: center !important;
transition: all 0.4s ease !important;
padding: 5px 10px !important;
border-radius: 30px !important;
background: rgba(25, 45, 75, 0.5) !important;
height: 36px !important;
margin-left: auto; /* 确保在容器内靠右 */
}
.loginstatus-username {
max-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
margin-left: 0 !important;
font-weight: bold !important;
font-size: 1rem !important;
text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}
.loginstatus-dropdown:hover .loginstatus-username {
max-width: 200px !important;
opacity: 1 !important;
margin-left: 10px !important;
}
.loginstatus-avatar {
transition: transform 0.3s ease !important;
border: 2px solid rgba(79, 195, 247, 0.5);
width: 26px !important;
height: 26px !important;
}
.loginstatus-dropdown:hover .loginstatus-avatar {
transform: scale(1.15) !important;
box-shadow: 0 0 15px rgba(79, 195, 247, 0.6) !important;
}
/* 修复下拉箭头颜色 */
.anticon-down svg {
fill: #e0f7ff !important;
}
.loginstatus-dropdown:hover .anticon-down svg {
fill: #4fc3f7 !important;
}
/* 按钮美化 */
.ant-btn {
transition: all 0.3s ease !important;
border-radius: 8px !important;
font-weight: 500 !important;
}
.ant-btn-primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4) !important;
}
.ant-btn-primary:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 标题美化 */
.ant-page-header-heading-title {
color: #4fc3f7 !important;
font-size: 2rem !important;
text-shadow: 0 0 15px rgba(79, 195, 247, 0.5) !important;
}
/* 页脚美化 */
.ant-layout-footer {
background: rgba(15, 25, 45, 0.7) !important;
padding: 20px !important;
text-align: center !important;
border-top: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 12px !important;
margin: 15px !important;
backdrop-filter: blur(5px);
}
.ant-layout-footer a {
color: #4fc3f7 !important;
text-decoration: none;
transition: all 0.3s ease;
}
.ant-layout-footer a:hover {
color: #81d4fa !important;
text-shadow: 0 0 5px rgba(129, 212, 250, 0.5);
}
/* 粒子画布 */
#particles-canvas {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: -1 !important;
}
/* 快速提交区域美化 */
#quick-submit-file {
background: rgba(25, 45, 75, 0.5) !important;
border-radius: 8px !important;
padding: 10px !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
width: 100% !important;
margin-top: 10px !important;
transition: all 0.3s ease;
}
#quick-submit-file:hover {
background: rgba(35, 65, 105, 0.6) !important;
border-color: rgba(79, 195, 247, 0.5) !important;
}
/* 右下角按钮美化 */
.ant-btn-circle.ant-btn-lg {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
}
.ant-btn-circle.ant-btn-lg:hover {
transform: scale(1.1) rotate(10deg) !important;
box-shadow: 0 8px 20px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 修复选择框文本颜色 */
.ant-select-selection-item {
color: #e0f7ff !important;
}
/* 修复所有图标颜色 */
.anticon svg {
fill: #e0f7ff !important;
}
.ant-menu-item:hover .anticon svg {
fill: #4fc3f7 !important;
}
/* 修复分隔线颜色 */
.ant-divider {
background: rgba(64, 128, 255, 0.25) !important;
}
`);
// ==== 第二部分：功能函数 ====
// 创建粒子效果画布
const canvas = document.createElement('canvas');
canvas.id = 'particles-canvas';
document.body.appendChild(canvas);
// 背景切换功能
function initBackgroundToggle() {
// 创建背景切换按钮
const bgToggleBtn = document.createElement('button');
bgToggleBtn.className = 'bg-toggle-btn';
bgToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418极光效果 4,12 C4,7.581722 7.581722,4 12,4 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z"></path>
</svg>
背景切换
`;
// 切换背景函数
function toggleBackground() {
const isImageBg = document.body.classList.toggle('image-bg');
GM_setValue('useImageBackground', isImageBg);
bgToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="${isImageBg ? 'M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z' : 'M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z'}"></path>
</svg>
${isImageBg ? '渐变背景' : '图片背景'}
`;
}
bgToggleBtn.addEventListener('click', toggleBackground);
return bgToggleBtn;
}
// 粒子系统 - 增强效果
function initParticles() {
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 根据屏幕大小调整粒子数量（性能优化）
const particleCount = Math.min(250, Math.floor((window.innerWidth * window.innerHeight) / 5000));
const particles = [];
// 创建粒子
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 5 + 3, // 增大粒子尺寸
speedX: (Math.random() - 0.5) * 1.2, // 提高速度
speedY: (Math.random() - 0.5) * 1.2,
color: `rgba(79, 195, 247, ${Math.random() * 0.6 + 0.4})` // 提高透明度
});
}
let animationId = null;
let isRunning = true;
let lastTime = 0;
const frameRate = 30; // 限制帧率提高性能
const frameInterval = 1000 / frameRate;
// 绘制粒子
function draw(timestamp) {
if (!lastTime) lastTime = timestamp;
const deltaTime = timestamp - lastTime;
if (deltaTime > frameInterval) {
lastTime = timestamp - (deltaTime % frameInterval);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制连接线
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 180) { // 增大连接距离
ctx.beginPath();
ctx.strokeStyle = `rgba(79, 195, 247, ${0.5 * (1 - distance/180)})`; // 提高透明度
ctx.lineWidth = 1.0; // 加粗线条
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
// 绘制粒子
particles.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
// 添加发光效果
const gradient = ctx.createRadialGradient(
p.x, p.y, 0,
p.x, p.y, p.radius
);
gradient.addColorStop(0, `rgba(79, 195, 247, 1)`);
gradient.addColorStop(0.7, `rgba(79, 195, 247, 0.5)`);
gradient.addColorStop(1, `rgba(79, 195, 247, 0.2)`);
ctx.fillStyle = gradient;
ctx.fill();
// 更新位置
p.x += p.speedX;
p.y += p.speedY;
// 边界检查
if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
});
}
if (isRunning) {
animationId = requestAnimationFrame(draw);
}
}
draw();
// 控制函数
return {
start: function() {
if (!isRunning) {
isRunning = true;
canvas.style.display = 'block';
lastTime = 0;
draw();
}
},
stop: function() {
if (isRunning) {
isRunning = false;
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
}
canvas.style.display = 'none';
}
},
toggle: function() {
if (isRunning) {
this.stop();
} else {
this.start();
}
return !isRunning;
}
};
}
// 粒子效果开关
function initParticlesToggle() {
const particlesToggleBtn = document.createElement('button');
particlesToggleBtn.className = 'particles-toggle-btn';
particlesToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z"></path>
</svg>
粒子效果
`;
// 切换粒子效果
particlesToggleBtn.addEventListener('click', function() {
if (particlesControl) {
const nowEnabled = particlesControl.toggle();
GM_setValue('particlesEnabled', nowEnabled);
particlesToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="${nowEnabled ? 'M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,极光效果18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.极光效果861 9.790861,8 12,8 Z' : 'M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 Z M10,12 C10,13.1045695 10.8954305,14 12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 Z'}"></path>
</svg>
${nowEnabled ? '关闭粒子' : '开启粒子'}
`;
}
});
return particlesToggleBtn;
}
let particlesControl = null;
// 初始化用户区域
function initUserArea() {
// 创建用户区域容器
const userAreaContainer = document.createElement('div');
userAreaContainer.className = 'user-area-container';
userAreaContainer.style.display = 'flex';
userAreaContainer.style.alignItems = 'center';
userAreaContainer.style.gap = '15px';
userAreaContainer.style.marginLeft = 'auto'; // 关键：确保在导航栏最右侧
// 添加背景切换按钮
const bgToggleBtn = initBackgroundToggle();
userAreaContainer.appendChild(bgToggleBtn);
// 添加粒子切换按钮
const particlesToggleBtn = initParticlesToggle();
userAreaContainer.appendChild(particlesToggleBtn);
// 获取现有用户区域
const userArea = document.querySelector('.loginstatus-dropdown');
if (userArea) {
// 确保用户名在容器内靠右
userArea.style.marginLeft = '0'; // 重置原有margin
userAreaContainer.appendChild(userArea);
} else {
// 备用方案：创建临时用户区域占位
const placeholder = document.createElement('div');
placeholder.className = 'loginstatus-dropdown';
placeholder.style.minWidth = '40px';
placeholder.style.height = '36px';
userAreaContainer.appendChild(placeholder);
}
// 将用户容器添加到导航栏
const header = document.querySelector('.app-header');
if (header) {
// 确保容器在导航栏最右侧
header.appendChild(userAreaContainer);
// 修复布局：确保导航栏是flex布局
header.style.display = 'flex';
header.style.alignItems = 'center';
header.style.justifyContent = 'space-between';
} else {
// 备用方案：添加到body顶部
document.body.insertBefore(userAreaContainer, document.body.firstChild);
}
console.log('用户区域初始化完成');
}
// ==== 第三部分：主初始化 ====
function mainInit() {
// 应用保存的背景设置
const useImageBackground = GM_getValue('useImageBackground', false);
if (useImageBackground) {
document.body.classList.add('image-bg');
}
// 初始化用户区域
initUserArea();
// 延迟初始化粒子系统（提高页面加载速度）
setTimeout(() => {
try {
particlesControl = initParticles();
// 应用粒子效果状态
const particlesEnabled = GM_getValue('particlesEnabled', true);
if (!particlesEnabled) {
particlesControl.stop();
}
// 更新粒子按钮状态
const particlesToggleBtn = document.querySelector('.particles-toggle-btn');
if (particlesToggleBtn) {
particlesToggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="${particlesEnabled ? 'M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z' : 'M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z M4,12 C4,9.87867966 4.84285512,7.84314513 6.34314575,6.34314575 C7.84343637,4.84314637 9.87867966,4 12,4 C14.1213203,4 16.1565636,4.84314637 17.6568542,6.34314575 C19.1571449,7.84314513 20,9.87867966 20,12 C20,14.1213203 19.1571449,16.1568549 17.6568542,17.6568542 C16.1565636,19.1568536 14.1213203,20 12,20 C9.87867966,20 7.84343637,19.1568536 6.34314575,17.6568542 C4.84285512,16.1568549 4,14.1213203 4,12 Z M8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 Z M10,12 C10,13.1045695 10.8954305,14 12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 Z'}"></path>
</svg>
${particlesEnabled ? '关闭粒子' : '开启粒子'}
`;
}
} catch (e) {
console.error('粒子系统初始化失败:', e);
}
}, 1500); // 增加延迟确保页面完全渲染
// 窗口大小改变时重置画布
window.addEventListener('resize', function() {
if (canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
});
}
// ==== 第四部分：执行入口 ====
// 页面加载完成后执行
if (document.readyState === 'complete' || document.readyState === 'interactive') {
setTimeout(mainInit, 500);
} else {
window.addEventListener('DOMContentLoaded', mainInit);
}
// 添加重试机制：如果初始化失败，5秒后重试
setTimeout(() => {
if (!document.querySelector('.user-area-container')) {
console.log('检测到用户区域未初始化，正在重试...');
try {
initUserArea();
} catch (e) {
console.error('重试初始化失败:', e);
}
}
}, 5000);
})();
-
作者：@vernal_blossom
-
更新时间：2025-07-26
-
更新内容：
- 优化性能，增加成功加载的概率
v1.2
Code
// ==UserScript==
// @name CatOJ美化
// @namespace http://tampermonkey.net/
// @version 1.2
// @description 为号家军OJ添加美化效果，优化性能和视觉体验
// @author vernal_blossom
// @match https://oj.hjjoi.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// ==== 第一部分：样式定义 ====
GM_addStyle(`
/* 优化动画性能 */
* {
will-change: transform, opacity;
backface-visibility: hidden;
}
/* 修复背景覆盖问题 */
body {
min-height: 100vh;
overflow-x: hidden;
background-attachment: fixed;
}
/* 固定背景不滚动 */
.fixed-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -3;
opacity: 1;
transition: opacity 0.5s ease;
}
/* ==== 代码编辑器圆角效果 ==== */
.overflow-guard {
border-radius: 20px !important;
overflow: hidden !important;
}
/* ==== 代码块圆角效果 ==== */
.monaco-editor {
border-radius: 20px !important;
overflow: hidden !important;
}
/* ==== 全局字体颜色设置 ==== */
body, body *,
.ant-typography, .description-content,
.ant-select-selection-item, .ant-btn,
.loginstatus-username, .avatarname-username,
.ant-page-header-heading-title, .ant-layout-footer,
.ant-menu-title-content, .ant-menu-item-icon svg,
.anticon svg, .ant-dropdown-trigger,
.bg-toggle-btn, .refresh-bg-btn,
.ant-dropdown-menu-item, .ant-dropdown-menu-title-content,
.ant-table-cell, .ant-tag, .ant-list-item,
.ant-alert-message, .ant-statistic-content,
.ant-input, .ant-input-number-input,
.ant-radio-wrapper, .ant-checkbox-wrapper,
.ant-form-item-label > label,
.ant-tabs-tab, .ant-tabs-tab-btn,
.ant-result-title, .ant-result-subtitle,
.ant-comment-content-author-name, .ant-comment-content-detail {
color: #e0f7ff !important; /* 所有文字使用浅色 */
}
/* ==== 特定元素颜色定制 ==== */
/* 空间项使用浅绿色 */
.ant-space-item {
color: #7df9ff !important; /* 浅绿色 */
}
/* 标签使用绿色 */
.ant-tag.css-bzolti.css-var {
color: #00ff7f !important; /* 亮绿色 */
border-color: #00ff极光效果7f !important;
background: rgba(0, 255, 127, 0.1) !important;
box-shadow: 0 0 8px rgba(0, 255, 127, 0.5) !important;
}
/* 修复所有白色背景问题 */
body, .ant-layout, .css-bzolti,
.ant-card, .app-content, .ant-select-selector,
.ant-page-header, .ant-space-item,
.ant-divider, .ant-btn-default,
.loginstatus-dropdown, .avatarname-username,
.ant-tag, .ant-input, .ant-input-affix-wrapper,
.ant-alert, .ant-list-item, .ant-table-cell,
.ant-popover-inner, .ant-modal-content {
background: transparent !important;
}
/* 修复表格表头透明 */
.ant-table-thead > tr > th {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* 修复表格行透明 */
.ant-table-tbody > tr > td {
background: rgba(15, 25, 45, 0.3) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 表格行悬停效果 */
.ant-table-tbody > tr:hover > td {
background: rgba(64, 128, 255, 0.2) !important;
}
/* 修复头像用户名背景问题 */
.avatarname-username, .loginstatus-username {
background: transparent !important;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}
/* 修复边框颜色问题 */
.ant-card, .app-content, .ant-select-selector,
.ant-divider, .ant-btn-default,
.ant-input, .ant-input-affix-wrapper,
.ant-tag {
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* 渐变背景 - 固定位置 */
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f1a3d, #2a0b3a, #0d2b4e);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
z-index: -3;
opacity: 1;
transition: opacity 0.5s ease;
}
/* 图片背景 - 固定位置 */
.image-bg-element {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-image-url, url('https://t.alcy.cc/fj')) center/cover no-repeat;
z-index: -4;
opacity: 0;
transition: opacity 0.5s ease;
}
/* 图片背景激活状态 */
body.image-bg .image-bg-element {
opacity: 1;
}
/* 禁用彩色背景 */
body.image-bg .gradient-bg {
opacity: 0;
}
/* 背景动画 */
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 亚克力效果 - 导航栏 (高度优化) */
.app-header {
background: rgba(15, 25, 45, 0.7) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 12px !important;
margin: 10px !important; /* 减少外边距 */
padding: 8px 20px !important; /* 减少内边距 */
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px) !important; /* 宽度调整 */
max-width: none !important; /* 移除最大宽度限制 */
box-sizing: border-box;
height: auto !important; /* 修复高度问题 */
min-height: 50px; /* 最小高度 */
}
/* 修复导航栏布局 */
.app-logo {
color: #4fc3f7 !important;
font-size: 1.6rem !important; /* 减小字体 */
font-weight: bold !important;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.5) !important;
white-space: nowrap;
margin-right: 15px; /* 减少间距 */
flex-shrink: 0;
}
/* 优化菜单容器 */
.app-menu-container {
flex: 1;
min-width: 0; /* 允许内容溢出时截断 */
display: flex;
justify-content: flex-start; /* 菜单左对齐 */
margin-left: 15px; /* 减少左边距 */
height: 100%;
align-items: center; /* 垂直居中 */
}
.app-menu {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
flex: 1;
max-width: 100%; /* 使用全部可用空间 */
height: 100%;
display: flex;
align-items: center; /* 垂直居中 */
}
/* ==== 下拉菜单亚克力效果 ==== */
.ant-menu-submenu-popup {
background: rgba(15, 25, 45, 0.8) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 15px !important;
overflow: hidden;
padding: 10px 0 !important;
}
.ant-menu-submenu-popup .ant-menu {
background: transparent !important;
}
.ant-menu-submenu-popup .ant-menu-item {
color: #e0f7ff !important;
padding: 10px 25px !important;
margin: 5px 0 !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.ant-menu-submenu-popup .ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
}
/* 确保菜单项可以折叠 */
.ant-menu-overflow {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start; /* 菜单项左对齐 */
height: 100%;
align-items: center; /* 垂直居中 */
}
.ant-menu-overflow-item-rest {
display: flex;
align-items: center;
height: 100%;
}
.ant-menu-overflow-item.ant-menu-item {
font-weight: 500;
font-size: 1.0rem; /* 减小字体 */
padding: 6px 15px !important; /* 减少宽度 */
border-radius: 8px !important;
transition: all 0.3s ease !important;
white-space: nowrap;
margin: 0 3px !important; /* 减少间距 */
height: auto;
line-height: normal;
}
.ant-menu-overflow-item.极光效果ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
transform: translateY(-2px);
text-shadow: 0 0 5px white;
}
.ant-menu-item-icon {
margin-right: 6px !important; /* 减小间距 */
font-size: 0.9em; /* 减小图标大小 */
color: #4fc3f7 !important;
}
/* 用户区域移到最右侧 */
.user-area-container {
display: flex;
align-items: center;
margin-left: auto; /* 关键：推到最右边 */
gap: 8px; /* 减少间隙 */
flex-shrink: 0; /* 防止被压缩 */
height: 100%;
}
/* ==== 用户图标美化 ==== */
.loginstatus-avatar {
border: 2px solid rgba(79, 195, 247, 0.5) !important;
box-shadow: 0 0 10px rgba(79, 195, 247, 0.3) !important;
transition: all 0.3s ease !important;
width: 32px !important; /* 固定尺寸 */
height: 32px !important;
}
.loginstatus-dropdown:hover .loginstatus-avatar {
transform: scale(1.15) !important; /* 减小放大比例 */
box-shadow: 0 0 15px rgba(79, 195, 247, 0.6) !important;
border-color: rgba(79, 195, 247, 0.8) !important;
}
/* 设置按钮样式 */
.bg-toggle-btn, .refresh-bg-btn {
background: rgba(64, 128, 255, 0.25) !important;
border: none !important;
border-radius: 16px !important; /* 减小圆角 */
padding: 4px 10px !important; /* 减小尺寸 */
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px; /* 减小间隙 */
font-size: 0.85rem; /* 减小字体 */
font-weight: 500;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 28px; /* 固定高度 */
}
.bg-toggle-btn:hover, .refresh-bg-btn:hover {
background: rgba(79, 195, 247, 0.4) !important;
transform: scale(1.05);
box-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
}
/* 按钮图标样式 - 使用CSS图标 */
.bg-toggle-btn::before {
content: "?️"; /* 图片图标 */
font-size: 12px; /* 减小图标 */
}
.refresh-bg-btn::before {
content: "?"; /* 刷新图标 */
font-size: 12px; /* 减小图标 */
}
/* 亚克力效果 - 卡片 */
.ant-card {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
margin-top: 12px !important;
padding: 15px !important; /* 减少内边距 */
}
/* ==== 内容区域宽度优化 ==== */
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 50px) !important;
max-width: none !important;
margin-left: 25px !important;
margin-right: 25px !important;
box-sizing: border-box;
}
/* 亚克力效果 - 内容区域 */
.app-content {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 20px !important; /* 减少内边距 */
}
/* 头像展开效果 - 高度优化 */
.loginstatus-dropdown {
display: flex !important;
align-items: center !important;
transition: all 0.4s ease !important;
padding: 4px 8px !important; /* 减少内边距 */
border-radius: 30px !important;
background: rgba(25, 45, 75, 0.5) !important;
height: 32px !important; /* 减小高度 */
margin-left: auto; /* 确保在容器内靠右 */
flex-shrink: 0;
}
.loginstatus-username {
max-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
margin-left: 0 !important;
font-weight: bold !important;
font-size: 0.9rem !important; /* 减小字体 */
text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
white-space: nowrap;
}
.loginstatus-dropdown:hover .loginstatus-username {
max-width: 180px !important; /* 减小最大宽度 */
opacity: 1 !important;
margin-left: 8px !important; /* 减小间距 */
}
/* 修复下拉箭头颜色 */
.anticon-down svg {
fill: #e0f7ff !important;
width: 14px !important; /* 减小尺寸 */
height: 14px !important;
}
.loginstatus-dropdown:hover .anticon-down svg {
fill: #4fc3f7 !important;
}
/* 按钮美化 */
.ant-btn {
transition: all 0.3s ease !important;
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 0.9rem; /* 减小字体 */
padding: 4px 10px; /* 减小内边距 */
}
.ant-btn-primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4) !important;
}
.ant-btn-primary:hover {
transform: translateY(-2px) !important; /* 减小动画幅度 */
box-shadow: 0 5px 15px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 标题美化 */
.ant-page-header-heading-title {
color: #4fc3f7 !important;
font-size: 1.8rem !important; /* 减小字体 */
text-shadow: 0 0 12px rgba(79, 195, 247, 0.5) !important;
}
/* 页脚美化 */
.ant-layout-footer {
background: rgba(15, 25, 45, 0.7) !important;
padding: 15px !important; /* 减小内边距 */
text-align: center !important;
border-top: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 12px !important;
margin: 10px !important; /* 减小外边距 */
backdrop-filter: blur(5px);
width: calc(100% - 40px) !important;
margin-left: 20px !important;
margin-right: 20px !important;
box-sizing: border-box;
}
.ant-layout-footer a {
color: #4fc3f7 !important;
text-decoration: none;
transition: all 0.3s ease;
}
.ant-layout-footer a:hover {
color: #81d4fa !important;
text-shadow: 0 0 4px rgba(129, 212, 250, 0.5);
}
/* 快速提交区域美化 */
#quick-submit-file {
background: rgba(25, 45, 75, 0.5) !important;
border-radius: 8px !important;
padding: 8px !important; /* 减小内边距 */
border: 1px solid rgba(64, 128, 255, 0.25) !important;
width: 100% !important;
margin-top: 8px !important; /* 减小间距 */
transition: all 0.3s ease;
}
#quick-submit-file:hover {
background: rgba(35, 65, 105, 0.6) !important;
border-color: rgba(79, 195, 247, 0.5) !important;
}
/* 右下角按钮美化 */
.ant-btn-circle.ant-btn-lg {
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
width: 45px !important; /* 减小尺寸 */
height: 45px !important;
}
.ant-btn-circle.ant-btn-lg:hover {
transform: scale(1.08) rotate(8deg) !important; /* 减小动画幅度 */
box-shadow: 0 7px 18px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 修复选择框文本颜色 */
.ant-select-selection-item {
color: #e0f7ff !important;
font-size: 0.9rem; /* 减小字体 */
}
/* 修复所有图标颜色 */
.anticon svg {
fill: #e0f7ff !important;
width: 16px !important; /* 减小尺寸 */
height: 16px !important;
}
.ant-menu-item:hover .anticon svg {
fill: #4fc3f7 !important;
}
/* 修复分隔线颜色 */
.ant-divider {
background: rgba(64, 128, 255, 0.25) !important;
margin: 10px 0 !important; /* 减小间距 */
}
/* ==== 代码块亚克力效果 ==== */
.hljs {
background: rgba(15, 25, 45, 0.5) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 15px !important; /* 减小内边距 */
}
/* 保留monaco-editor默认字体颜色 */
.monaco-editor, .monaco-editor *,
.view-lines, .mtk1, .mtk2, .mtk3, .mtk4, .mtk5, .mtk6, .mtk7, .mtk8,
.monaco-editor .line-numbers,
.monaco-editor .cldr.codicon.codicon-folding-expanded,
.monaco-editor .cldr.codicon.codicon-folding-collapsed {
color: inherit !important;
}
/* ===== 响应式设计 ===== */
/* 小屏幕设备 */
@media (max-width: 768px) {
.app-header {
flex-direction: column;
padding: 6px !important;
margin: 8px !important;
width: calc(100% - 16px) !important;
}
.app-logo {
margin-bottom: 6px;
margin-right: 0;
font-size: 1.3rem !important;
}
.app-menu-container {
width: 100%;
margin-bottom: 6px;
margin-left: 0 !important;
justify-content: center;
}
.user-area-container {
margin-top: 6px;
margin-left: 0 !important;
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.ant-menu-overflow-item.ant-menu-item {
font-size: 0.85rem !important;
padding: 4px 8px !important;
margin: 0 2px !important;
}
.app-content, .ant-card {
margin: 8px !important;
padding: 12px !important;
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
}
.bg-toggle-btn, .refresh-bg-btn {
padding: 4px 8px !important;
font-size: 0.75rem;
height: 26px;
}
.ant-layout-footer {
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
padding: 12px !important;
}
}
/* 中等屏幕设备 */
@media (min-width: 769px) and (max-width: 1024px) {
.app-header {
padding: 6px 15px !important;
}
.app-content, .ant-card {
padding: 15px !important;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 12px !important;
}
}
/* 超大屏幕 */
@media (min-width: 1600px) {
.app-header {
width: calc(100% - 60px) !important;
padding: 8px 25px !important;
}
.app-menu-container {
margin-left: 30px;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 20px !important;
margin: 0 6px !important;
}
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 60px) !important;
margin-left: 30px !important;
margin-right: 30px !important;
}
}
`);
// ==== 第二部分：功能函数 ====
// 创建背景元素
function createBackgroundElements() {
// 创建渐变背景
const gradientBg = document.createElement('div');
gradientBg.className = 'gradient-bg fixed-bg';
// 创建图片背景
const imageBg = document.createElement('div');
imageBg.className = 'image-bg-element fixed-bg';
// 添加到body
document.body.appendChild(gradientBg);
document.body.appendChild(imageBg);
// 设置CSS变量
document.documentElement.style.setProperty('--bg-image-url', 'url("https://t.alcy.cc/fj")');
}
// 背景切换功能
function createBackgroundToggleButton() {
const bgToggleBtn = document.createElement('button');
bgToggleBtn.className = 'bg-toggle-btn';
bgToggleBtn.textContent = ' 背景切换';
// 切换背景函数
function toggleBackground() {
const isImageBg = document.body.classList.toggle('image-bg');
GM_setValue('useImageBackground', isImageBg);
// 更新按钮文本
bgToggleBtn.textContent = isImageBg ? ' 渐变背景' : ' 图片背景';
// 更新刷新按钮可见性
if (window.refreshBtn) {
window.refreshBtn.style.display = isImageBg ? 'flex' : 'none';
}
}
bgToggleBtn.addEventListener('click', toggleBackground);
return bgToggleBtn;
}
// 刷新背景功能
function createRefreshButton() {
const refreshBtn = document.createElement('button');
refreshBtn.className = 'refresh-bg-btn';
refreshBtn.textContent = ' 刷新背景';
// 初始隐藏刷新按钮
refreshBtn.style.display = 'none';
refreshBtn.addEventListener('click', function() {
// 添加随机参数避免缓存
const timestamp = new Date().getTime();
document.documentElement.style.setProperty(
'--bg-image-url',
`url('https://t.alcy.cc/fj?refresh=${timestamp}')`
);
// 添加刷新动画效果
const originalText = refreshBtn.textContent;
refreshBtn.textContent = ' 刷新中...';
// 1秒后恢复按钮文本
setTimeout(() => {
refreshBtn.textContent = originalText;
}, 1000);
});
return refreshBtn;
}
// 优化导航栏结构 - 安全版本
function optimizeHeaderStructure() {
const header = document.querySelector('.app-header');
if (!header) {
console.log('未找到导航栏元素');
return;
}
// 克隆原始元素
const headerClone = header.cloneNode(true);
headerClone.id = 'temp-header-clone';
headerClone.style.display = 'none';
document.body.appendChild(headerClone);
// 获取原始元素
const logo = header.querySelector('.app-logo');
const menu = header.querySelector('.app-menu');
const userArea = header.querySelector('.loginstatus-dropdown');
// 创建菜单容器
const menuContainer = document.createElement('div');
menuContainer.className = 'app-menu-container';
// 清空header
header.innerHTML = '';
// 添加logo
if (logo) {
header.appendChild(logo);
}
// 添加菜单容器
header.appendChild(menuContainer);
// 添加菜单到容器
if (menu) {
menuContainer.appendChild(menu);
}
// 添加用户区域容器
const userAreaContainer = document.createElement('div');
userAreaContainer.className = 'user-area-container';
header.appendChild(userAreaContainer);
// 添加用户区域
if (userArea) {
userAreaContainer.appendChild(userArea);
}
// 删除临时克隆
document.getElementById('temp-header-clone')?.remove();
}
// ==== 第三部分：主初始化 ====
function initUserArea() {
try {
// 创建用户区域容器
const userAreaContainer = document.querySelector('.user-area-container') || document.createElement('div');
userAreaContainer.className = 'user-area-container';
userAreaContainer.style.display = 'flex';
userAreaContainer.style.alignItems = 'center';
userAreaContainer.style.gap = '8px';
userAreaContainer.style.marginLeft = 'auto';
// 添加背景切换按钮
const bgToggleBtn = createBackgroundToggleButton();
userAreaContainer.appendChild(bgToggleBtn);
// 添加刷新背景按钮
window.refreshBtn = createRefreshButton();
userAreaContainer.appendChild(window.refreshBtn);
return userAreaContainer;
} catch (error) {
console.error('用户区域初始化失败:', error);
return null;
}
}
function mainInit() {
try {
// 创建背景元素
createBackgroundElements();
// 应用保存的背景设置
const useImageBackground = GM_getValue('useImageBackground', false);
if (useImageBackground) {
document.body.classList.add('image-bg');
}
// 优化导航栏结构
optimizeHeaderStructure();
// 初始化用户区域
const userAreaContainer = initUserArea();
if (userAreaContainer) {
// 尝试添加到导航栏
const header = document.querySelector('.app-header');
if (header) {
// 确保用户区域容器在导航栏中
const existingContainer = header.querySelector('.user-area-container');
if (existingContainer) {
header.replaceChild(userAreaContainer, existingContainer);
} else {
header.appendChild(userAreaContainer);
}
} else {
// 备用方案：添加到body顶部
document.body.insertBefore(userAreaContainer, document.body.firstChild);
}
}
// 设置刷新按钮初始可见性
if (window.refreshBtn) {
window.refreshBtn.style.display = useImageBackground ? 'flex' : 'none';
}
console.log('美化脚本初始化完成');
} catch (error) {
console.error('主初始化失败:', error);
}
}
// ==== 第四部分：执行入口 ====
// 等待页面加载完成后执行
if (document.readyState === 'complete') {
mainInit();
} else {
window.addEventListener('load', mainInit);
}
// 添加重试机制
setTimeout(() => {
if (!document.querySelector('.user-area-container') ||
!document.querySelector('.bg-toggle-btn')) {
console.log('检测到用户区域未初始化，正在重试...');
mainInit();
}
}, 2000);
})();
-
作者：@vernal_blossom
-
更新时间：2025-07-26
-
更新内容：
- 进一步优化性能
- 删除粒子效果
- 处理了一些 Bug
v1.3
Code
// ==UserScript==
// @name CatOJ美化 - 专业代码查看优化版1.3
// @namespace http://tampermonkey.net/
// @version 1.3
// @description 为号家军OJ添加美化效果，特别优化代码查看体验
// @author zhexj
// @match https://oj.hjjoi.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// ==== 第一部分：样式定义 ====
GM_addStyle(`
/* ====== 代码查看部分专业优化 ====== */
/* 整体容器优化 */
.monaco-editor.no-user-select.showUnused.showDeprecated.vs {
background: rgba(15, 25, 45, 0.15) !important;
border: 1px solid rgba(64, 128, 255, 0.3) !important;
border-radius: 20px !important;
overflow: hidden !important;
padding: 15px !important;
box-shadow: 0 4px 20px rgba(0, 20, 60, 0.3) !important;
backdrop-filter: blur(5px);
margin: 15px 0 !important;
}
/* 编辑器内部容器 */
.monaco-editor .overflow-guard {
border-radius: 15px !important;
}
/* 代码行优化 */
.view-line {
padding: 3px 12px !important;
margin: 2px 0 !important;
border-radius: 4px !important;
transition: all 0.2s ease;
line-height: 1.6 !important;
}
.view-line:hover {
background: rgba(64, 128, 255, 0.15) !important;
}
/* 代码文本清晰显示 */
.mtk1, .mtk2, .mtk3, .mtk4, .mtk5, .mtk6, .mtk7, .mtk8 {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
font-weight: 500 !important;
font-size: 14px !important;
}
/* 行号样式优化 */
.line-numbers {
color: #7df9ff !important;
text-shadow: 0 0 4px rgba(125, 249, 255, 0.4) !important;
font-weight: bold !important;
font-size: 13px !important;
padding-right: 15px !important;
min-width: 40px !important;
text-align: right !important;
}
/* 当前行高亮 */
.current-line {
background: rgba(79, 195, 247, 0.15) !important;
box-shadow: 0 0 10px rgba(79, 195, 247, 0.2) !important;
}
/* 代码折叠区域 */
.folding {
background: rgba(79, 195, 247, 0.15) !important;
border-radius: 4px !important;
padding: 0 5px !important;
}
/* 滚动条美化 */
.monaco-scrollable-element > .scrollbar > .slider {
background: rgba(125, 249, 255, 0.4) !important;
border-radius: 4px !important;
}
.monaco-scrollable-element > .scrollbar > .slider:hover {
background: rgba(79, 195, 247, 0.7) !important;
}
/* 光标样式 */
.cursors-layer > .cursor {
background-color: #4fc3f7 !important;
box-shadow: 0 0 5px #4fc3f7 !important;
width: 2px !important;
}
/* 选中文本样式 */
.selected-text {
background: rgba(64, 128, 255, 0.3) !important;
border-radius: 3px !important;
}
/* 代码差异标记 */
.line-insert, .line-delete {
border-left: 3px solid;
padding-left: 12px !important;
}
.line-insert {
border-left-color: #00ff7f !important;
background: rgba(0, 255, 127, 0.1) !important;
}
.line-delete {
border-left-color: #ff5252 !important;
background: rgba(255, 82, 82, 0.1) !important;
}
/* ==== 分页按钮透明化 ==== */
.ant-pagination-item.ant-pagination-item-active {
background: transparent !important;
border-color: rgba(64, 128, 255, 0.25) !important;
}
.ant-pagination-item {
background: transparent !important;
border-color: rgba(64, 128, 255, 0.15) !important;
}
.ant-pagination-item:hover {
border-color: rgba(79, 195, 247, 0.5) !important;
}
.ant-pagination-item a {
color: #e0f7ff !important;
}
.ant-pagination-item.ant-pagination-item-active a {
color: #4fc3f7 !important;
text-shadow: 0 0 8px rgba(79, 195, 247, 0.5) !important;
}
.ant-pagination-prev, .ant-pagination-next, .ant-pagination-jump-prev, .ant-pagination-jump-next {
background: transparent !important;
}
/* 修复背景固定问题 */
body {
min-height: 100vh;
overflow-x: hidden;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 固定背景不滚动 */
.fixed-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -3;
opacity: 1;
transition: opacity 0.5s ease;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* 防止背景被拉伸 */
.gradient-bg {
background-size: 400% 400% !important;
}
.image-bg-element {
background-size: cover !important;
}
/* 问题容器和回复容器效果 */
.question-container,
.reply-container {
background: rgba(15, 25, 45, 0.15) !important;
border: 1px solid rgba(64, 128, 255, 0.2) !important;
box-shadow: 0 4px 16px rgba(0, 20, 60, 0.2) !important;
border-radius: 20px !极光效果important;
padding: 20px !important;
margin: 15px 0 !important;
}
/* 内容区域透明 */
.ant-layout-content.app-content.css-bzolti.css-var {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* ==== 全局字体颜色设置 ==== */
body, body *,
.ant-typography, .description-content,
.ant-select-selection-item, .ant-btn,
.loginstatus-username, .avatarname-username,
.ant-page-header-heading-title, .ant-layout-footer,
.ant-menu-title-content, .ant-menu-item-icon svg,
.anticon svg, .ant-dropdown-trigger,
.bg-toggle-btn, .refresh-bg-btn,
.ant-dropdown-menu-item, .ant-dropdown-menu-title-content,
.ant-table-cell, .ant-tag, .ant-list-item,
.ant-alert-message, .ant-statistic-content,
.ant-input, .ant-input-number-input,
.ant-radio-wrapper, .ant-checkbox-wrapper,
.ant-form-item-label > label,
.ant-tabs-tab, .ant-tabs-tab-btn,
.ant-result-title, .ant-result-subtitle,
.ant-comment-content-author-name, .ant-comment-content-detail {
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}
/* ==== 特定元素颜色定制 ==== */
/* 空间项使用浅绿色 */
.ant-space-item {
color: #7df9ff !important;
}
/* 标签使用绿色 */
.ant-tag.css-bzolti.css-var {
color: #00ff7f !important;
border-color: #00ff7f !important;
background: rgba(0, 255, 127, 0.1) !important;
box-shadow: 0 0 8px rgba(0, 255, 127, 0.5) !important;
}
/* 修复所有白色背景问题 */
body, .ant-layout, .css-bzolti,
.ant-card, .app-content, .ant-select-selector,
.ant-page-header, .ant-space-item,
.ant-divider, .ant-btn-default,
.loginstatus-dropdown, .avatarname-username,
.ant-tag, .ant-input, .ant-input-affix-wrapper,
.ant-alert, .ant-list-item, .ant-table-cell,
.ant-popover-inner, .ant-modal-content {
background: transparent !important;
}
/* 修复表格表头透明 */
.ant-table-thead > tr > th {
background: rgba(15, 25, 45, 0.15) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* 修复表格行透明 */
.ant-table-tbody > tr > td {
background: rgba(15, 25, 45, 0.1) !important;
border-bottom: 1极光效果px solid rgba(255, 255, 255, 0.1) !important;
}
/* 表格行悬停效果 */
.ant极光效果-table-tbody > tr:hover > td {
background: rgba(64, 128, 255, 0.15) !important;
}
/* 修复头像用户名背景问题 */
.avatarname-username, .loginstatus-username {
background: transparent !important;
}
/* 修复边框颜色问题 */
.ant-card, .app-content, .ant-select-selector,
.ant-divider, .ant-btn-default,
.ant-input, .ant-input-affix-wrapper,
.ant-tag {
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* 渐变背景 - 固定位置 */
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f1a3d, #2a0b3a, #0d2b4e);
z-index: -3;
opacity: 1;
transition: opacity 0.5s ease;
}
/* 图片背景 - 固定位置 */
.image-bg-element {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-image-url, url('https://t.alcy.cc/fj')) center/cover no-repeat;
z-index: -4;
opacity: 0;
transition: opacity 0.5s ease;
}
/* 图片背景激活状态 */
body.image-bg .image-bg-element {
opacity: 1;
}
/* 禁用彩色背景 */
body.image-bg .gradient-bg {
opacity: 0;
}
/* 背景动画 */
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 导航栏效果 */
.app-header {
background: rgba(15, 25, 45, 0.3) !important;
border: 1px solid rgba(64, 128, 255, 0.2) !important;
box-shadow: 0 4px 16px rgba(0, 20, 60, 0.2) !important;
border-radius: 12px !important;
margin: 10px !important;
padding: 8px 20px !important;
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px) !important;
max-width: none !important;
box-sizing: border-box;
height: auto !important;
min-height: 50px;
}
/* 修复导航栏布局 */
.app-logo {
color: #4fc3f7 !important;
font-size: 1.6rem !important;
font-weight: bold !important;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.5) !important;
white-space: nowrap;
margin-right: 15px;
flex-shrink: 0;
}
/* 优化菜单容器 */
.app-menu-container {
flex: 1;
min-width: 0;
display: flex;
justify-content: flex-start;
margin-left: 15px;
height: 100%;
align-items: center;
}
.app-menu {
background: transparent !important;
border: none !important;
box-shadow: none !important;
flex: 1;
max-width: 100%;
height: 100%;
display: flex;
align-items: center;
}
/* ==== 下拉菜单效果 ==== */
.ant-menu-submenu-popup {
background: rgba(15, 25, 45, 0.5) !important;
border: 1px solid rgba(64, 128, 255, 0.2) !important;
box-shadow: 0 4px 16px rgba(0, 20, 60, 0.2) !important;
border-radius: 15px !important;
overflow: hidden;
padding: 10px 0 !important;
}
.ant-menu-submenu-popup .ant-menu {
background: transparent !important;
}
.ant-menu-submenu-popup .ant-menu-item {
color: #e0f7ff !important;
padding: 10px 25px !important;
margin: 5px 0 !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.ant-menu-submenu-popup .ant-menu-item:hover {
background: rgba(64, 128, 255, 0.15) !important;
}
/* 确保菜单项可以折叠 */
.ant-menu-overflow {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
height: 100%;
align-items: center;
}
.ant-menu-overflow-item-rest {
display: flex;
align-items: center;
height: 100%;
}
.ant-menu-overflow-item.ant-menu-item {
font-weight: 500;
font-size: 1.0rem;
padding: 6px 15px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
white-space: nowrap;
margin: 0 3px !important;
height: auto;
line-height: normal;
}
.ant-menu-overflow-item.ant-menu-item:hover {
background: rgba(64, 128, 255, 0.15) !important;
transform: translateY(-2px);
}
.ant-menu-item-icon {
margin-right: 6px !important;
font-size: 0.9em;
color: #4fc3f7 !important;
}
/* 用户区域移到最右侧 */
.user-area-container {
display: flex;
align-items: center;
margin-left: auto;
gap: 8px;
flex-shrink: 0;
height: 100%;
}
/* ==== 用户图标美化 ==== */
.loginstatus-avatar {
border: 2px solid rgba(79, 195, 247, 0.5) !important;
box-shadow: 0 0 10px rgba(79, 195, 247, 0.3) !important;
transition: all 0.3s ease !important;
width: 32px !important;
height: 32px !important;
}
.loginstatus-dropdown:hover .loginstatus-avatar {
transform: scale(1.15) !important;
box-shadow: 0 0 15px rgba(79, 195, 247, 0.6) !important;
border-color: rgba(79, 195, 247, 0.8) !important;
}
/* 设置按钮样式 */
.bg-toggle-btn, .refresh-bg-btn {
background: rgba(64, 128, 255, 0.2) !important;
border: none !important;
border-radius: 16px !important;
padding: 4px 10px !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 28px;
}
.bg-toggle-btn:hover, .refresh-bg-btn:hover {
background: rgba(79, 195, 247, 0.3) !important;
transform: scale(1.05);
box-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
}
/* 按钮图标样式 - 使用CSS图标 */
.bg-toggle-btn::before {
content: "?️";
font-size: 12px;
}
.refresh-bg-btn::before {
content: "?";
font-size: 12px;
}
/* 卡片效果 */
.ant-card {
background: rgba(15, 25, 45, 0.15) !important;
border: 1px solid rgba(64, 128, 255, 0.2) !important;
box-shadow: 0 4px 16px rgba(0, 20, 60, 0.2) !important;
border-radius: 20px !important;
margin-top: 12px !important;
padding: 15px !important;
}
/* ==== 内容区域宽度优化 ==== */
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 50px) !important;
max-width: none !important;
margin-left: 25px !important;
margin-right: 25px !important;
box-sizing: border-box;
}
/* 内容区域效果 */
.app-content {
background: rgba(15, 25, 45, 0.15) !important;
border: 1px solid rgba(64, 128, 255, 0.2) !important;
box-shadow: 0 4px 16px rgba(0, 20, 60, 0.2) !important;
border-radius: 20px !important;
padding: 20px !important;
}
/* 头像展开效果 */
.loginstatus-dropdown {
display: flex !important;
align-items: center !important;
transition: all 0.4s ease !important;
padding: 4px 8px !important;
border-radius: 30px !important;
background: rgba(25, 45, 75, 0.3) !important;
height: 32px !important;
margin-left: auto;
flex-shrink: 0;
}
.loginstatus-username {
max-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
margin-left: 0 !important;
font-weight: bold !important;
font-size: 0.9rem !important;
text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
white-space: nowrap;
}
.loginstatus-dropdown:hover .loginstatus-username {
max-width: 180px !important;
opacity: 1 !important;
margin-left: 8px !important;
}
/* 修复下拉箭头颜色 */
.anticon-down svg {
fill: #e0f7ff !important;
width: 14px !important;
height: 14px !important;
}
.loginstatus-dropdown:hover .anticon-down svg {
fill: #4fc3f7 !important;
}
/* 按钮美化 */
.ant-btn {
transition: all 0.3s ease !important;
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 0.9rem;
padding: 4px 10px;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.ant-btn-primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4) !important;
}
.ant-btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 标题美化 */
.ant-page-header-heading-title {
color: #4fc3f7 !important;
font-size: 1.8rem !important;
text-shadow: 0 0 12px rgba(79, 195, 247, 0.5) !important;
}
/* 页脚美化 */
.ant-layout-footer {
background: rgba(15, 25, 45, 0.3) !important;
padding: 15px !important;
text-align: center !important;
border-top: 1px solid rgba(64, 128, 255, 0.2) !important;
border-radius: 12px !important;
margin: 10px !important;
width: calc(100% - 40px) !important;
margin-left: 20px !important;
margin-right: 20px !important;
box-sizing: border-box;
}
.ant-layout-footer a {
color: #4fc3f7 !important;
text-decoration: none;
transition: all 0.3s ease;
}
.ant-layout-footer a:hover {
color: #81d4fa !important;
text-shadow: 0 0 4px rgba(129, 212, 250, 0.5);
}
/* 快速提交区域美化 */
#quick-submit-file {
background: rgba(25, 45, 75, 0.15极光效果) !important;
border-radius: 8px !important;
padding: 8px !important;
border: 1px solid rgba(64, 128, 255, 0.2) !important;
width: 100% !important;
margin-top: 8px !important;
transition: all 0.3s ease;
}
#quick-submit-file:hover {
background: rgba(35, 65, 105, 0.25) !important;
border-color: rgba(79, 195, 247, 0.5) !important;
}
/* 右下角按钮美化 */
.ant-btn-circle.ant-btn-lg {
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
background: linear-gradient(45deg, #1e88e5, #0d47a1) !极光效果important;
border: none !important;
width: 45px !important;
height: 45px !important;
}
.ant-btn-circle.ant-btn-lg:hover {
transform: scale(1.08) rotate(8deg) !important;
box-shadow: 0 7px 18px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 修复选择框文本颜色 */
.ant-select-selection-item {
color: #e0f7ff !important;
font-size: 0.9rem;
}
/* 修复所有图标颜色 */
.anticon svg {
fill: #e0f7ff !important;
width: 16px !important;
height: 16px !important;
}
.ant-menu-item:hover .anticon svg {
fill: #4fc3f7 !important;
}
/* 修复分隔线颜色 */
.ant-divider {
background: rgba(64, 128, 255, 0.25) !important;
margin: 10px 0 !important;
}
/* ==== 代码块效果 ==== */
.hljs {
background: rgba(15, 25, 45, 0.15) !important;
border: 1px solid rgba(64, 128, 255, 0.2) !important;
box-shadow: 0 4px 16px rgba(0, 20, 60, 0.2) !important;
border-radius: 20px !important;
padding: 15px !important;
}
/* 提高文本对比度 */
.description-content, .ant-typography {
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}
/* ===== 响应式设计 ===== */
/* 小屏幕设备 */
@media (max-width: 768px) {
.app-header {
flex-direction: column;
padding: 6px !important;
margin: 8px !important;
width: calc(100% - 16px) !important;
}
.app-logo {
margin-bottom: 6px;
margin-right: 0;
font-size: 1.3rem !important;
}
.app-menu-container {
width: 100%;
margin-bottom: 6px;
margin-left: 0 !important;
justify-content: center;
}
.user-area-container {
margin-top: 6px;
margin-left: 0 !important;
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.ant-menu-overflow-item.ant-menu-item {
font-size: 0.85rem !important;
padding: 4px 8px !important;
margin: 0 2px !important;
}
.app-content, .ant-card {
margin: 8px !important;
padding: 12px !important;
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
}
.bg-toggle-btn, .refresh-bg-btn {
padding: 4px 8px !important;
font-size: 0.75rem;
height: 26px;
}
.ant-layout-footer {
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
padding: 12px !important;
}
}
/* 中等屏幕设备 */
@media (min-width: 769px) and (max-width: 1024px) {
.app-header {
padding: 6px 15px !important;
}
.app-content, .ant-card {
padding: 15px !important;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 12px !important;
}
}
/* 超大屏幕 */
@media (min-width: 1600px) {
.app-header {
width: calc(100% - 60px) !important;
padding: 8px 25px !important;
}
.app-menu-container {
margin-left: 30px;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 20px !important;
margin: 0 6px !important;
}
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 60px) !important;
margin-left: 30px !important;
margin-right: 30px !important;
}
}
`);
// ==== 第二部分：功能函数 ====
// 创建背景元素
function createBackgroundElements() {
// 创建渐变背景
const gradientBg = document.createElement('div');
gradientBg.className = 'gradient-bg fixed-bg';
// 创建图片背景 - 使用您指定的图片
const imageBg = document.createElement('div');
imageBg.className = 'image-bg-element fixed-bg';
// 添加到body
document.body.appendChild(gradientBg);
document.body.appendChild(imageBg);
// 设置CSS变量
document.documentElement.style.setProperty('--bg-image-url', 'url("https://t.alcy.cc/fj")');
}
// 背景切换功能
function createBackgroundToggleButton() {
const bgToggleBtn = document.createElement('button');
bgToggleBtn.className = 'bg-toggle-btn';
bgToggleBtn.textContent = ' 背景切换';
// 切换背景函数
function toggleBackground() {
const isImageBg = document.body.classList.toggle('image-bg');
GM_setValue('useImageBackground', isImageBg);
// 更新按钮文本
bgToggleBtn.textContent = isImageBg ? ' 渐变背景' : ' 图片背景';
// 更新刷新按钮可见性
if (window.refreshBtn) {
window.refreshBtn.style.display = isImageBg ? 'flex' : 'none';
}
}
bgToggleBtn.addEventListener('click', toggleBackground);
return bgToggleBtn;
}
// 刷新背景功能
function createRefreshButton() {
const refreshBtn = document.createElement('button');
refreshBtn.className = 'refresh-bg-btn';
refreshBtn.textContent = ' 刷新背景';
// 初始隐藏刷新按钮
refreshBtn.style.display = 'none';
refreshBtn.addEventListener('click', function() {
// 添加随机参数避免缓存
const timestamp = new Date().getTime();
document.documentElement.style.setProperty(
'--极光效果bg-image-url',
`url('https://t.alcy.cc/fj?refresh=${timestamp}')`
);
// 添加刷新动画效果
const originalText = refreshBtn.textContent;
refreshBtn.textContent = ' 刷新中...';
// 1秒后恢复按钮文本
setTimeout(() => {
refreshBtn.textContent = originalText;
}, 1000);
});
return refreshBtn;
}
// 优化导航栏结构 - 安全版本
function optimizeHeaderStructure() {
const header = document.querySelector('.app-header');
if (!header) {
console.log('未找到导航栏元素');
return;
}
// 克隆原始元素
const headerClone = header.cloneNode(true);
headerClone.id = 'temp-header-clone';
headerClone.style.display = 'none';
document.body.appendChild(headerClone);
// 获取原始元素
const logo = header.querySelector('.app-logo');
const menu = header.querySelector('.app-menu');
const userArea = header.querySelector('.loginstatus-dropdown');
// 创建菜单容器
const menuContainer = document.createElement('div');
menuContainer.className = 'app-menu-container';
// 清空header
header.innerHTML = '';
// 添加logo
if (logo) {
header.appendChild(logo);
}
// 添加菜单容器
header.appendChild(menuContainer);
// 添加菜单到容器
if (menu) {
menuContainer.appendChild(menu);
}
// 添加用户区域容器
const userAreaContainer = document.createElement('div');
userAreaContainer.className = 'user-area-container';
header.appendChild(userAreaContainer);
// 添加用户区域
if (userArea) {
userAreaContainer.appendChild(userArea);
}
// 删除临时克隆
document.getElementById('temp-header-clone')?.remove();
}
// ==== 第三部分：主初始化 ====
function initUserArea() {
try {
// 创建用户区域容器
const userAreaContainer = document.querySelector('.user-area-container') || document.createElement('div');
userAreaContainer.className = 'user-area-container';
userAreaContainer.style.display = 'flex';
userAreaContainer.style.alignItems = 'center';
userAreaContainer.style.gap = '8px';
userAreaContainer.style.marginLeft = 'auto';
// 添加背景切换按钮
const bgToggleBtn = createBackgroundToggleButton();
userAreaContainer.appendChild(bgToggleBtn);
// 添加刷新背景按钮
window.refreshBtn = createRefreshButton();
userAreaContainer.appendChild(window.refreshBtn);
return userAreaContainer;
} catch (error) {
console.error('用户区域初始化失败:', error);
return null;
}
}
function mainInit() {
try {
// 创建背景元素
createBackgroundElements();
// 应用保存的背景设置
const useImageBackground = GM_getValue('useImageBackground', false);
if (useImageBackground) {
document.body.classList.add('image-bg');
}
// 优化导航栏结构
optimizeHeaderStructure();
// 初始化用户区域
const userAreaContainer = initUserArea();
if (userAreaContainer) {
// 尝试添加到导航栏
const header = document.querySelector('.app-header');
if (header) {
// 确保用户区域容器在导航栏中
const existingContainer = header.querySelector('.user-area-container');
if (existingContainer) {
header.replaceChild(userAreaContainer, existingContainer);
} else {
header.appendChild(userAreaContainer);
}
} else {
// 备用方案：添加到body顶部
document.body.insertBefore(userAreaContainer, document.body.firstChild);
}
}
// 设置刷新按钮初始可见性
if (window.refreshBtn) {
window.refreshBtn.style.display = useImageBackground ? 'flex' : 'none';
}
console.log('美化脚本初始化完成');
} catch (error) {
console.error('主初始化失败:', error);
}
}
// ==== 第四部分：执行入口 ====
// 等待页面加载完成后执行
if (document.readyState === 'complete') {
mainInit();
} else {
window.addEventListener('load', mainInit);
}
// 添加重试机制
setTimeout(() => {
if (!document.querySelector('.user-area-container') ||
!document.querySelector('.bg-toggle-btn')) {
console.log('检测到用户区域未初始化，正在重试...');
mainInit();
}
}, 2000);
})();
-
作者：@zhexj
-
更新日期：2025-07-26
-
更新内容：
- 优化视觉效果，使背景更清晰
v2.0
Code
// ==UserScript==
// @name CatOJ美化 - 优化版
// @namespace http://tampermonkey.net/
// @version 2.0
// @description 为号家军OJ添加美化效果，优化性能和视觉体验
// @author vernal_blossom
// @match https://oj.hjjoi.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// ==== 第一部分：样式定义 ====
GM_addStyle(`
/* 修复背景固定问题 */
body {
min-height: 100vh;
overflow-x: hidden;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 固定背景不滚动 */
.fixed-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -3;
opacity: 1;
transition: opacity 0.3s ease;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* 图片背景 - 固定位置 */
.image-bg-element {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-image-url, url('https://t.alcy.cc/fj')) center/cover no-repeat;
z-index: -4;
opacity: 1;
transition: opacity 0.3s ease;
}
/* ==== 全局字体颜色设置 ==== */
body, body *,
.ant-typography, .description-content,
.ant-select-selection-item, .ant-btn,
.loginstatus-username, .avatarname-username,
.ant-page-header-heading-title, .ant-layout-footer,
.ant-menu-title-content, .ant-menu-item-icon svg,
.anticon svg, .ant-dropdown-trigger,
.settings-btn, .refresh-bg-btn,
.ant-dropdown-menu-item, .ant-dropdown-menu-title-content,
.ant-table-cell, .ant-tag, .ant-list-item,
.ant-alert-message, .ant-statistic-content,
.ant-input, .ant-input-number-input,
.ant-radio-wrapper, .ant-checkbox-wrapper,
.ant-form-item-label > label,
.ant-tabs-tab, .ant-tabs-tab-btn,
.ant-result-title, .ant-result-subtitle,
.ant-comment-content-author-name, .ant-comment-content-detail {
color: #e0f7ff !important;
}
/* ==== 特定元素颜色定制 ==== */
/* 空间项使用浅绿色 */
.ant-space-item {
color: #7df9ff !important;
}
/* 标签使用绿色 */
.ant-tag.css-bzolti.css-var {
color: #00ff7f !important;
border-color: #00ff7f !important;
background: rgba(0, 255, 127, 0.1) !important;
box-shadow: 0 0 8px rgba(0, 255, 127, 0.5) !important;
}
/* 修复所有白色背景问题 */
body, .ant-layout, .css-bzolti,
.ant-card, .app-content, .ant-select-selector,
.ant-page-header, .ant-space-item,
.ant-divider, .ant-btn-default,
.loginstatus-dropdown, .avatarname-username,
.ant-tag, .ant-input, .ant-input-affix-wrapper,
.ant-alert, .ant-list-item, .ant-table-cell,
.ant-popover-inner, .ant-modal-content {
background: transparent !important;
}
/* ==== 修复代码编辑器中的白色块 ==== */
.monaco-editor,
.no-user-select,
.showUnused,
.showDeprecated,
.vs,
.view-lines,
.margin-view-overlays,
.glyph-margin,
.minimap,
.monaco-scrollable-element {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
overflow: hidden !important;
padding: 15px !important;
color: #e0f7ff !important;
}
/* 问题容器和回复容器亚克力效果 */
.question-container,
.reply-container {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 20px !important;
margin: 15px 0 !important;
}
/* 内容区域透明 */
.ant-layout-content.app-content.css-bzolti.css-var,
.ant-layout-content.app-content.css-bzolti.css-var- {
background: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
}
/* 修复表格表头透明 */
.ant-table-thead > tr > th {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* 修复表格行透明 */
.ant-table-tbody > tr > td {
background: rgba(15, 25, 45, calc(var(--acrylic-opacity, 0.5) * 0.6)) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 表格行悬停效果 */
.ant-table-tbody > tr:hover > td {
background: rgba(64, 128, 255, 0.2) !important;
}
/* 修复头像用户名背景问题 */
.avatarname-username, .loginstatus-username {
background: transparent !important;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}
/* 修复边框颜色问题 */
.ant-card, .app-content, .ant-select-selector,
.ant-divider, .ant-btn-default,
.ant-input, .ant-input-affix-wrapper,
.ant-tag {
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* 亚克力效果 - 导航栏 (高度优化) */
.app-header {
background: rgba(15, 25, 45, calc(var(--acrylic-opacity, 0.5) * 1.4)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 12px !important;
margin: 10px !important;
padding: 8px 20px !important;
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px) !important;
box-sizing: border-box;
height: auto !important;
min-height: 50px;
}
/* 修复导航栏布局 */
.app-logo {
color: var(--logo-color, #4fc3f7) !important;
font-size: 1.6rem !important;
font-weight: bold !important;
text-shadow: 0 0 10px var(--logo-color-shadow, rgba(79, 195, 247, 0.5)) !important;
white-space: nowrap;
margin-right: 15px;
flex-shrink: 0;
}
/* 优化菜单容器 */
.app-menu-container {
flex: 1;
min-width: 0;
display: flex;
justify-content: flex-start;
margin-left: 15px;
height: 100%;
align-items: center;
}
.app-menu {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
flex: 1;
max-width: 100%;
height: 100%;
display: flex;
align-items: center;
}
/* ==== 下拉菜单亚克力效果 ==== */
.ant-menu-submenu-popup {
background: rgba(15, 25, 45, calc(var(--acrylic-opacity, 0.5) * 1.6)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 15px !important;
overflow: hidden;
padding: 10px 0 !important;
}
.ant-menu-submenu-popup .ant-menu {
background: transparent !important;
}
.ant-menu-submenu-popup .ant-menu-item {
color: #e0f7ff !important;
padding: 10px 25px !important;
margin: 5px 0 !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.ant-menu-submenu-popup .ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
}
/* 确保菜单项可以折叠 */
.ant-menu-overflow {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
height: 100%;
align-items: center;
}
.ant-menu-overflow-item-rest {
display: flex;
align-items: center;
height: 100%;
}
.ant-menu-overflow-item.ant-menu-item {
font-weight: 500;
font-size: 1.0rem;
padding: 6px 15px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
white-space: nowrap;
margin: 0 3px !important;
height: auto;
line-height: normal;
}
.ant-menu-overflow-item.ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
transform: translateY(-2px);
text-shadow: 0 0 5px white;
}
.ant-menu-item-icon {
margin-right: 6px !important;
font-size: 0.9em;
color: #4fc3f7 !important;
}
/* 用户区域移到最右侧 */
.user-area-container {
display: flex;
align-items: center;
margin-left: auto;
gap: 8px;
flex-shrink: 0;
height: 100%;
}
/* ==== 用户图标美化 ==== */
.loginstatus-avatar {
border: 2px solid rgba(79, 195, 247, 0.5) !important;
box-shadow: 0 0 10px rgba(79, 195, 247, 0.3) !important;
transition: all 0.3s ease !important;
width: 32px !important;
height: 32px !important;
}
.loginstatus-dropdown:hover .loginstatus-avatar {
transform: scale(1.15) !important;
box-shadow: 0 0 15px rgba(79, 195, 247, 0.6) !important;
border-color: rgba(79, 195, 247, 0.8) !important;
}
/* 设置按钮样式 */
.settings-btn {
background: rgba(64, 128, 255, 0.25) !important;
border: none !important;
border-radius: 16px !important;
padding: 4px 10px !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 28px;
}
.settings-btn:hover {
background: rgba(79, 195, 247, 0.4) !important;
transform: scale(1.05);
box-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
}
/* 刷新按钮样式 */
.refresh-bg-btn {
background: rgba(64, 128, 255, 0.25) !important;
border: none !important;
border-radius: 16px !important;
padding: 4px 10px !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 28px;
}
.refresh-bg-btn:hover {
background: rgba(79, 195, 247, 0.4) !important;
transform: scale(1.05);
box-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
}
/* 亚克力效果 - 卡片 */
.ant-card {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
margin-top: 12px !important;
padding: 15px !important;
}
/* ==== 内容区域宽度优化 ==== */
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 50px) !important;
max-width: none !important;
margin-left: 25px !important;
margin-right: 25px !important;
box-sizing: border-box;
}
/* 亚克力效果 - 内容区域 */
.app-content {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 20px !important;
}
/* 头像展开效果 - 高度优化 */
.loginstatus-dropdown {
display: flex !important;
align-items: center !important;
transition: all 0.4s ease !important;
padding: 4px 8px !important;
border-radius: 30px !important;
background: rgba(25, 45, 75, 0.5) !important;
height: 32px !important;
margin-left: auto;
flex-shrink: 0;
}
.loginstatus-username {
max-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
margin-left: 0 !important;
font-weight: bold !important;
font-size: 0.9rem !important;
text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
white-space: nowrap;
}
.loginstatus-dropdown:hover .loginstatus-username {
max-width: 180px !important;
opacity: 1 !important;
margin-left: 8px !important;
}
/* 修复下拉箭头颜色 */
.anticon-down svg {
fill: #e0f7ff !important;
width: 14px !important;
height: 14px !important;
}
.loginstatus-dropdown:hover .anticon-down svg {
fill: #4fc3f7 !important;
}
/* 按钮美化 */
.ant-btn {
transition: all 0.3s ease !important;
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 0.9rem;
padding: 4px 10px;
}
.ant-btn-primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4) !important;
}
.ant-btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 标题美化 */
.ant-page-header-heading-title {
color: #4fc3f7 !important;
font-size: 1.8rem !important;
text-shadow: 0 0 12px rgba(79, 195, 247, 0.5) !important;
}
/* 页脚美化 */
.ant-layout-footer {
background: rgba(15, 25, 45, 0.7) !important;
padding: 15px !important;
text-align: center !important;
border-top: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 12px !important;
margin: 10px !important;
backdrop-filter: blur(5px);
width: calc(100% - 40px) !important;
margin-left: 20px !important;
margin-right: 20px !important;
box-sizing: border-box;
}
.ant-layout-footer a {
color: #4fc3f7 !important;
text-decoration: none;
transition: all 0.3s ease;
}
.ant-layout-footer a:hover {
color: #81d4fa !important;
text-shadow: 0 0 4px rgba(129, 212, 250, 0.5);
}
/* 快速提交区域美化 */
#quick-submit-file {
background: rgba(25, 45, 75, 0.5) !important;
border-radius: 8px !important;
padding: 8px !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
width: 100% !important;
margin-top: 8px !important;
transition: all 0.3s ease;
}
#quick-submit-file:hover {
background: rgba(35, 65, 105, 0.6) !important;
border-color: rgba(79, 195, 247, 0.5) !important;
}
/* 右下角按钮美化 */
.ant-btn-circle.ant-btn-lg {
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
width: 45px !important;
height: 45px !important;
}
.ant-btn-circle.ant-btn-lg:hover {
transform: scale(1.08) rotate(8deg) !important;
box-shadow: 0 7px 18px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 修复选择框文本颜色 */
.ant-select-selection-item {
color: #e0f7ff !important;
font-size: 0.9rem;
}
/* 修复所有图标颜色 */
.anticon svg {
fill: #e0f7ff !important;
width: 16px !important;
height: 16px !important;
}
.ant-menu-item:hover .anticon svg {
fill: #4fc3f7 !important;
}
/* 修复分隔线颜色 */
.ant-divider {
background: rgba(64, 128, 255, 0.25) !important;
margin: 10px 0 !important;
}
/* ==== 代码块亚克力效果 ==== */
.hljs {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 15px !important;
}
/* 修复分页组件白色背景 */
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-jump-prev,
.ant-pagination-jump-next,
.ant-pagination-options {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(8px) saturate(180%) !important;
-webkit-backdrop-filter: blur(8px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 8px !important;
color: #e0f7ff !important;
}
.ant-pagination-item a,
.ant-pagination-item-link {
color: #e0f7ff !important;
}
.ant-pagination-item-active {
background: rgba(64, 128, 255, 0.3) !important;
border-color: #4fc3f7 !important;
}
.ant-pagination-item:hover,
.ant-pagination-item-link:hover {
background: rgba(79, 195, 247, 0.25) !important;
}
/* ===== 设置面板样式 ===== */
#catoj-settings-panel {
position: fixed;
top: 60px;
right: 20px;
background: rgba(15, 25, 45, 0.85) !important;
backdrop-filter: blur(15px) saturate(180%) !important;
-webkit-backdrop-filter: blur(15px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 10px 40px rgba(0, 20, 60, 0.4) !important;
border-radius: 20px !important;
padding: 20px;
width: 300px;
z-index: 9999;
transform: translateX(110%);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#catoj-settings-panel.open {
transform: translateX(0);
}
.settings-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.settings-panel-title {
font-size: 1.2rem;
font-weight: bold;
color: #4fc3f7 !important;
text-shadow: 0 0 8px rgba(79, 195, 247, 0.5);
}
.settings-panel-close {
background: transparent;
border: none;
color: #e0f7ff;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.settings-panel-close:hover {
color: #ff6b6b;
transform: rotate(90deg);
}
.settings-group {
margin-bottom: 20px;
}
.settings-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #e0f7ff;
}
.settings-input {
width: 100%;
padding: 8px 12px;
background: rgba(25, 45, 75, 0.6) !important;
border: 1px solid rgba(64, 128, 255, 0.3) !important;
border-radius: 8px;
color: #e0f7ff !important;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.settings-input:focus {
outline: none;
border-color: #4fc3f7 !important;
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
}
.settings-slider-container {
display: flex;
align-items: center;
gap: 10px;
}
.settings-slider {
flex: 1;
-webkit-appearance: none;
height: 6px;
border-radius: 3px;
background: rgba(64, 128, 255, 0.3);
outline: none;
}
.settings-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #4fc3f7;
cursor: pointer;
box-shadow: 0 0 8px rgba(79, 195, 247, 0.6);
}
.settings-slider-value {
min-width: 40px;
text-align: center;
background: rgba(25, 45, 75, 0.6);
padding: 3px 8px;
border-radius: 6px;
font-weight: 500;
}
.settings-color-picker {
width: 100%;
height: 36px;
border-radius: 8px;
border: 1px solid rgba(64, 128, 255, 0.3);
background: rgba(25, 45, 75, 0.6);
cursor: pointer;
}
.settings-buttons {
display: flex;
gap: 10px;
margin-top: 15px;
}
.settings-btn {
flex: 1;
padding: 8px;
border: none;
border-radius: 8px;
background: rgba(64, 128, 255, 0.3);
color: #e0f7ff;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.settings-btn:hover {
background: rgba(79, 195, 247, 0.5);
transform: translateY(-2px);
}
.settings-btn.primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1);
}
.settings-btn.primary:hover {
background: linear-gradient(45deg, #2196f3, #1565c0);
}
/* ===== 响应式设计 ===== */
/* 小屏幕设备 */
@media (max-width: 768px) {
.app-header {
flex-direction: column;
padding: 6px !important;
margin: 8px !important;
width: calc(100% - 16px) !important;
}
.app-logo {
margin-bottom: 6px;
margin-right: 0;
font-size: 1.3rem !important;
}
.app-menu-container {
width: 100%;
margin-bottom: 6px;
margin-left: 0 !important;
justify-content: center;
}
.user-area-container {
margin-top: 6px;
margin-left: 0 !important;
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.ant-menu-overflow-item.ant-menu-item {
font-size: 0.85rem !important;
padding: 4px 8px !important;
margin: 0 2px !important;
}
.app-content, .ant-card {
margin: 8px !important;
padding: 12px !important;
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
}
#catoj-settings-panel {
top: 80px;
right: 10px;
width: calc(100% - 20px);
max-width: 280px;
}
}
/* 中等屏幕设备 */
@media (min-width: 769px) and (max-width: 1024px) {
.app-header {
padding: 6px 15px !important;
}
.app-content, .ant-card {
padding: 15px !important;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 12px !important;
}
}
/* 超大屏幕 */
@media (min-width: 1600px) {
.app-header {
width: calc(100% - 60px) !important;
padding: 8px 25px !important;
}
.app-menu-container {
margin-left: 30px;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 20px !important;
margin: 0 6px !important;
}
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 60px) !important;
margin-left: 30px !important;
margin-right: 30px !important;
}
}
`);
// ==== 第二部分：功能函数 ====
// 创建背景元素
function createBackgroundElements() {
// 创建图片背景
const imageBg = document.createElement('div');
imageBg.className = 'image-bg-element fixed-bg';
// 添加到body
document.body.appendChild(imageBg);
}
// 创建设置按钮
function createSettingsButton() {
const settingsBtn = document.createElement('button');
settingsBtn.className = 'settings-btn';
settingsBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 极光效果2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> 设置';
settingsBtn.addEventListener('click', function() {
const settingsPanel = document.getElementById('catoj-settings-panel');
if (settingsPanel) {
settingsPanel.classList.toggle('open');
}
});
return settingsBtn;
}
// 创建设置面板
function createSettingsPanel() {
// 创建面板容器
const settingsPanel = document.createElement('div');
settingsPanel.id = 'catoj-settings-panel';
// 面板标题和关闭按钮
settingsPanel.innerHTML = `
<div class="settings-panel-header">
<div class="settings-panel-title">美化设置</div>
<button class="settings-panel-close">×</button>
</div>
<div class="settings-group">
<label class="settings-label">背景图片 URL</label>
<input type="text" id="bg-image-url" class="settings-input" placeholder="https://example.com/image.jpg">
</div>
<div class="settings-group">
<label class="settings-label">背景透明度</label>
<div class="settings-slider-container">
<input type="range" min="0.1" max="1" step="0.05" value="0.8" class="settings-slider" id="bg-opacity">
<div class="settings-slider-value">80%</div>
</div>
</div>
<div class="settings-group">
<label class="settings-label">亚克力效果透明度</label>
<div class="settings-slider-container">
<input type="range" min="0.1" max="1" step="0.05" value="0.5" class="settings-slider" id="acrylic-opacity">
<div class="settings-slider-value">50%</div>
</div>
</div>
<div class="settings-group">
<label class="settings-label">Logo 颜色</label>
<input type="color" id="logo-color" class="settings-color-picker" value="#4fc3f7">
</div>
<div class="settings-buttons">
<button class="settings-btn refresh-bg-btn" id="refresh-bg">刷新背景</button>
<button class="settings-btn" id="reset-settings">重置设置</button>
<button class="settings-btn primary" id="save-settings">保存设置</button>
</div>
`;
// 添加关闭按钮事件
const closeBtn = settingsPanel.querySelector('.settings-panel-close');
closeBtn.addEventListener('click', function() {
settingsPanel.classList.remove('open');
});
// 添加背景刷新事件
const refreshBtn = settingsPanel.querySelector('#refresh-bg');
refreshBtn.addEventListener('click', function() {
refreshBackground();
});
// 添加保存设置事件
const saveBtn = settingsPanel.querySelector('#save-settings');
saveBtn.addEventListener('click', function() {
saveSettings();
});
// 添加重置设置事件
const resetBtn = settingsPanel.querySelector('#reset-settings');
resetBtn.addEventListener('click', function() {
resetSettings();
});
// 添加透明度滑块事件
const opacitySlider = settingsPanel.querySelector('#acrylic-opacity');
const opacityValue = settingsPanel.querySelectorAll('.settings-slider-value')[1];
opacitySlider.addEventListener('input', function() {
const value = parseFloat(this.value);
opacityValue.textContent = `${Math.round(value * 100)}%`;
});
// 添加背景透明度滑块事件
const bgOpacitySlider = settingsPanel.querySelector('#bg-opacity');
const bgOpacityValue = settingsPanel.querySelectorAll('.settings-slider-value')[0];
bgOpacitySlider.addEventListener('input', function() {
const value = parseFloat(this.value);
bgOpacityValue.textContent = `${Math.round(value * 100)}%`;
});
// 添加到文档
document.body.appendChild(settingsPanel);
return settingsPanel;
}
// 刷新背景功能
function refreshBackground() {
// 添加随机参数避免缓存
const timestamp = new Date().getTime();
document.documentElement.style.setProperty(
'--bg-image-url',
`url('https://t.alcy.cc/fj?refresh=${timestamp}')`
);
// 添加刷新动画效果
const refreshBtn = document.getElementById('refresh-bg');
const originalText = refreshBtn.textContent;
refreshBtn.textContent = '刷新中...';
// 1秒后恢复按钮文本
setTimeout(() => {
refreshBtn.textContent = originalText;
}, 1000);
}
// 保存设置
function saveSettings() {
const bgImageUrl = document.getElementById('bg-image-url').value;
const bgOpacity = document.getElementById('bg-opacity').value;
const acrylicOpacity = document.getElementById('acrylic-opacity').value;
const logoColor = document.getElementById('logo-color').value;
// 保存到GM存储
GM_setValue('bgImageUrl', bgImageUrl);
GM_setValue('bgOpacity', bgOpacity);
GM_setValue('acrylicOpacity', acrylicOpacity);
GM_setValue('logoColor', logoColor);
// 应用设置
applySettings();
// 关闭面板
document.getElementById('catoj-settings-panel').classList.remove('open');
}
// 重置设置
function resetSettings() {
// 重置表单值
document.getElementById('bg-image-url').value = 'https://t.alcy.cc/fj';
document.getElementById('bg-opacity').value = 0.8;
document.getElementById('acrylic-opacity').value = 0.5;
document.getElementById('logo-color').value = '#4fc3f7';
// 更新显示
document.querySelectorAll('.settings-slider-value')[0].textContent = '80%';
document.querySelectorAll('.settings-slider-value')[1].textContent = '50%';
// 保存并应用
saveSettings();
}
// 应用设置
function applySettings() {
const bgImageUrl = GM_getValue('bgImageUrl', 'https://t.alcy.cc/fj');
const bgOpacity = GM_getValue('bgOpacity', 0.8);
const acrylicOpacity = GM_getValue('acrylicOpacity', 0.5);
const logoColor = GM_getValue('logoColor', '#4fc3f7');
// 应用背景图片
document.documentElement.style.setProperty('--bg-image-url', `url('${bgImageUrl}')`);
// 应用背景透明度
const imageBg = document.querySelector('.image-bg-element');
if (imageBg) {
imageBg.style.opacity = bgOpacity;
}
// 应用亚克力效果透明度
document.documentElement.style.setProperty('--acrylic-opacity', acrylicOpacity);
// 应用Logo颜色
document.documentElement.style.setProperty('--logo-color', logoColor);
document.documentElement.style.setProperty('--logo-color-shadow', `${logoColor}80`);
// 更新表单值
const settingsPanel = document.getElementById('catoj-settings-panel');
if (settingsPanel) {
document.getElementById('bg-image-url').value = bgImageUrl;
document.getElementById('bg-opacity').value = bgOpacity;
document.getElementById('acrylic-opacity').value = acrylicOpacity;
document.getElementById('logo-color').value = logoColor;
document.querySelectorAll('.settings-slider-value')[0].textContent = `${Math.round(bgOpacity * 100)}%`;
document.querySelectorAll('.settings-slider-value')[1].textContent = `${Math.round(acrylicOpacity * 100)}%`;
}
}
// 优化导航栏结构 - 安全版本
function optimizeHeaderStructure() {
const header = document.querySelector('.app-header');
if (!header) {
console.log('未找到导航栏元素');
return;
}
// 克隆原始元素
const headerClone = header.cloneNode(true);
headerClone.id = 'temp-header-clone';
headerClone.style.display = 'none';
document.body.appendChild(headerClone);
// 获取原始元素
const logo = header.querySelector('.app-logo');
const menu = header.querySelector('.app-menu');
const userArea = header.querySelector('.loginstatus-dropdown');
// 创建菜单容器
const menuContainer = document.createElement('div');
menuContainer.className = 'app-menu-container';
// 清空header
header.innerHTML = '';
// 添加logo
if (logo) {
header.appendChild(logo);
}
// 添加菜单容器
header.appendChild(menuContainer);
// 添加菜单到容器
if (menu) {
menuContainer.appendChild(menu);
}
// 添加用户区域容器
const userAreaContainer = document.createElement('div');
userAreaContainer.className = 'user-area-container';
header.appendChild(userAreaContainer);
// 添加用户区域
if (userArea) {
userAreaContainer.appendChild(userArea);
}
// 删除临时克隆
document.getElementById('temp-header-clone')?.remove();
return userAreaContainer;
}
// ==== 第三部分：主初始化 ====
function initUserArea(userAreaContainer) {
try {
// 添加设置按钮
const settingsBtn = createSettingsButton();
userAreaContainer.appendChild(settingsBtn);
return userAreaContainer;
} catch (error) {
console.error('用户区域初始化失败:', error);
return null;
}
}
function mainInit() {
try {
// 创建背景元素
createBackgroundElements();
// 优化导航栏结构
const userAreaContainer = optimizeHeaderStructure();
// 初始化用户区域
if (userAreaContainer) {
initUserArea(userAreaContainer);
}
// 创建设置面板
createSettingsPanel();
// 应用保存的设置
applySettings();
console.log('美化脚本初始化完成');
} catch (error) {
console.error('主初始化失败:', error);
}
}
// ==== 第四部分：执行入口 ====
// 使用requestIdleCallback优化加载性能
if ('requestIdleCallback' in window) {
window.requestIdleCallback(mainInit, { timeout: 2000 });
} else {
// 备用方案
setTimeout(mainInit, 500);
}
// 添加重试机制
setTimeout(() => {
if (!document.querySelector('.user-area-container') ||
!document.querySelector('#catoj-settings-panel')) {
console.log('检测到用户区域未初始化，正在重试...');
mainInit();
}
}, 2000);
})();
-
作者：@vernal_blossom
-
更新时间：2025-07-26
-
更新内容：
- 添加设置功能，提高用户自由度
- 优化脚本性能
v2.2
Code
// ==UserScript==
// @name CatOJ美化
// @namespace http://tampermonkey.net/
// @version 2.2
// @description 为号家军OJ添加美化效果，优化性能和视觉体验
// @author vernal_blossom
// @match https://oj.hjjoi.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// ==== 第一部分：样式定义 ====
GM_addStyle(`
/* 修复背景固定问题 */
body {
min-height: 100vh;
overflow-x: hidden;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 固定背景不滚动 */
.fixed-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -3;
opacity: 1;
transition: opacity 0.3s ease;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* 图片背景 - 固定位置 */
.image-bg-element {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-image-url, url('https://t.alcy.cc/fj')) center/cover no-repeat;
z-index: -4;
opacity: 1;
transition: opacity 0.3s ease;
}
/* ==== 全局字体颜色设置 ==== */
body, body *,
.ant-typography, .description-content,
.ant-select-selection-item, .ant-btn,
.loginstatus-username, .avatarname-username,
.ant-page-header-heading-title, .ant-layout-footer,
.ant-menu-title-content, .ant-menu-item-icon svg,
.anticon sv极光效果 g, .ant-dropdown-trigger,
.settings-btn, .refresh-bg-btn,
.ant-dropdown-menu-item, .ant-dropdown-menu-title-content,
.ant-table-cell, .ant-tag, .ant-list-item,
.ant-alert-message, .ant-statistic-content,
.ant-input, .ant-input-number-input,
.ant-radio-wrapper, .ant-checkbox-wrapper,
.ant-form-item-label > label,
.ant-tabs-tab, .ant-tabs-tab-btn,
.ant-result-title, .ant-result-subtitle,
.ant-comment-content-author-name, .ant-comment-content-detail {
color: #e0f7ff !important;
}
/* ==== 特定元素颜色定制 ==== */
/* 空间项使用浅绿色 */
.ant-space-item {
color: #7df9ff !important;
}
/* 标签使用绿色 */
.ant-tag.css-bzolti.css-var {
color: #00ff7f !important;
border-color: #00ff7f !important;
background: rgba(0, 255, 127, 0.1) !important;
box-shadow: 0 0 8px rgba(0, 255, 127, 0.5) !important;
}
/* 修复所有白色背景问题 */
body, .ant-layout, .css-bzolti,
.ant-card, .app-content, .ant-select-selector,
.ant-page-header, .ant-space-item,
.ant-divider, .ant-btn-default,
.loginstatus-dropdown, .avatarname-username,
.ant-tag, .ant-input, .ant-input-affix-wrapper,
.ant-alert, .ant-list-item, .ant-table-cell,
.ant-popover-inner, .ant-modal-content {
background: transparent !important;
}
/* ==== 代码编辑器优化 ==== */
.monaco-editor,
.no-user-select,
.showUnused,
.showDeprecated,
.vs,
.view-lines,
.margin-view-overlays,
.glyph-margin,
.minimap,
.monaco-scrollable-element {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 15px !important;
color: #e0f7ff !important;
}
/* 编辑器行号区域 */
.monaco-editor .margin-view-overlays .line-numbers {
color: rgba(224, 247, 255, 0.6) !important;
padding-right: 8px !important;
}
/* 编辑器活动行 */
.monaco-editor .view-overlays .current-line {
border: none !important;
background-color: rgba(64, 128, 255, 0.15) !important;
}
/* 编辑器选中文本 */
.monaco-editor .view-overlays .selected-text {
background-color: rgba(79, 195, 247, 0.3) !important;
}
/* 编辑器光标 */
.monaco-editor .cursor {
background-color: #4fc3f7 !important;
box-shadow: 0 0 5px #4fc3f7 !important;
}
/* 问题容器和回复容器亚克力效果 */
.question-container,
.reply-container {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 20px !important;
margin: 15px 0 !important;
}
/* 内容区域透明 */
.ant-layout-content.app-content.css-bzolti.css-var,
.ant-layout-content.app-content.css-bzolti.css-var- {
background: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
}
/* 修复表格表头透明 */
.ant-table-thead > tr > th {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(var(--acrylic-bl极光效果 ur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* 修复表格行透明 */
.ant-table-tbody > tr > td {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), calc(var(--acrylic-opacity, 0.5) * 0.6)) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 表格行悬停效果 */
.ant-table-tbody > tr:hover > td {
background: rgba(64, 128, 255, 0.2) !important;
}
/* 修复头像用户名背景问题 */
.avatarname-username, .loginstatus-username {
background: transparent !important;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}
/* 修复边框颜色问题 */
.ant-card, .app-content, .ant-select-selector,
.ant-divider, .ant-btn-default,
.ant-input, .ant-input-affix-wrapper,
.ant-tag {
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* 亚克力效果 - 导航栏 (高度优化) */
.app-header {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), calc(var(--acrylic-opacity, 0.5) * 1.4)) !important;
backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 12px !important;
margin: 10px !important;
padding: 8px 20px !important;
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px) !important;
box-sizing: border-box;
height: auto !important;
min-height: 50px;
}
/* 修复导航栏布局 */
.app-logo {
color: var(--logo-color, #4fc3f7) !important;
font-size: 1.6rem !important;
font-weight: bold !important;
text-shadow: 0 0 10px var(--logo-color-shadow, rgba(79, 195, 247, 0.5)) !important;
white-space: nowrap;
margin-right: 15px;
flex-shrink: 0;
}
/* 优化菜单容器 */
.app-menu-container {
flex: 1;
min-width: 0;
display: flex;
justify-content: flex-start;
margin-left: 15px;
height: 100%;
align-items: center;
}
.app-menu {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
flex: 1;
max-width: 100%;
height: 100%;
display: flex;
align-items: center;
}
/* ==== 下拉菜单亚克力效果 ==== */
.ant-menu-submenu-popup {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), calc(var(--acrylic-opacity, 0.5) * 1.6)) !important;
backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 15px !important;
overflow: hidden;
padding: 10px 0 !important;
}
.ant-menu-submenu-popup .ant-menu {
background: transparent !important;
}
.ant-menu-submenu-popup .ant-menu-item {
color: #e0f7ff !important;
padding: 10px 25px !important;
margin: 5px 0 !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.ant-menu-submenu-popup .ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
}
/* 确保菜单项可以折叠 */
.ant-menu-overflow {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
height: 100%;
align-items: center;
}
.ant-menu-overflow-item-rest {
display: flex;
align-items: center;
height: 100%;
}
.ant-menu-overflow-item.ant-menu-item {
font-weight: 500;
font-size: 1.0rem;
padding: 6px 15px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
white-space: nowrap;
margin: 0 3px !important;
height: auto;
line-height: normal;
}
.ant-menu-overflow-item.ant-menu-item:hover {
background: rgba(64, 128, 255, 0.25) !important;
transform: translateY(-2px);
text-shadow: 0 0 5px white;
}
.ant-menu-item-icon {
margin-right: 6px !important;
font-size: 0.9em;
color: #4fc3f7 !important;
}
/* 用户区域移到最右侧 */
.user-area-container {
display: flex;
align-items: center;
margin-left: auto;
gap: 8px;
flex-shrink: 0;
height: 100%;
}
/* ==== 用户图标美化 ==== */
.loginstatus-avatar {
border: 2px solid rgba(79, 195, 247, 0.5) !important;
box-shadow: 0 0 10px rgba(79, 195, 247, 0.3) !important;
transition: all 0.3s ease !important;
width: 32px !important;
height: 32px !important;
}
.loginstatus-dropdown:hover .loginstatus-avatar {
transform: scale(1.15) !important;
box-shadow: 0 0 15px rgba(79, 195, 247, 0.6) !important;
border-color: rgba(79, 195, 247, 0.8) !important;
}
/* 设置按钮样式 */
.settings-btn {
background: rgba(64, 128, 255, 0.25) !important;
border: none !important;
border-radius: 16px !important;
padding: 4px 10px !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 28px;
}
.settings-btn:hover {
background: rgba(79, 195, 247, 0.4) !important;
transform: scale(1.05);
box-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
}
/* 刷新按钮样式 */
.refresh-bg-btn {
background: rgba(64, 128, 极光效果 255, 0.25) !important;
border: none !important;
border-radius: 16px !important;
padding: 4px 10px !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4极光效果 px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
white-space: nowrap;
height: 28px;
}
.refresh-bg-btn:hover {
background: rgba(79, 195, 247, 0.4) !important;
transform: scale(1.05);
box-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
}
/* 亚克力效果 - 卡片 */
.ant-card {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
margin-top: 12px !important;
padding: 15px !important;
}
/* ==== 内容区域宽度优化 ==== */
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 50px) !important;
max-width: none !important;
margin-left: 25px !important;
margin-right: 25px !important;
box-sizing: border-box;
}
/* 亚克力效果 - 内容区域 */
.app-content {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 20px !important;
}
/* 头像展开效果 - 高度优化 */
.loginstatus-dropdown {
display: flex !important;
align-items: center !important;
transition: all 0.4s ease !important;
padding: 4px 8px !important;
border-radius: 30px !important;
background: rgba(25, 45, 75, 0.5) !important;
height: 32px !important;
margin-left: auto;
flex-shrink: 0;
}
.loginstatus-username {
max-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
margin-left: 0 !important;
font-weight: bold !important;
font-size: 0.9rem !important;
text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
white-space: nowrap;
}
.loginstatus-dropdown:hover .loginstatus-username {
max-width: 180px !important;
opacity: 1 !important;
margin-left: 8px !important;
}
/* 修复下拉箭头颜色 */
.anticon-down svg {
fill: #e0f7ff !important;
width: 14px !important;
height: 14px !important;
}
.loginstatus-dropdown:hover .anticon-down svg {
fill: #4fc3f7 !important;
}
/* 按钮美化 */
.ant-btn {
transition: all 0.3s ease !important;
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 0.9rem;
padding: 4px 10px;
}
.ant-btn-primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4) !important;
}
.ant-btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 标题美化 */
.ant-page-header-heading-title {
color: #4fc3f7 !important;
font-size: 1.8rem !important;
text-shadow: 0 0 12px rgba(79, 195, 247, 0.5) !important;
}
/* 页脚美化 */
.ant-layout-footer {
background: rgba(15, 25, 45, 0.7) !important;
padding: 15px !important;
text-align: center !important;
border-top: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 12px !important;
margin: 10px !important;
backdrop-filter: blur(5px);
width: calc(100% - 40px) !important;
margin-left: 20px !important;
margin-right: 20px !important;
box-sizing: border-box;
}
.ant-layout-footer a {
color: #4fc3f7 !important;
text-decoration: none;
transition: all 0.3s ease;
}
.ant-layout-footer a:hover {
color: #81d4fa !important;
text-shadow: 0 0 4px rgba(129, 212, 250, 0.5);
}
/* 快速提交区域美化 */
#quick-submit-file {
background: rgba(25, 45, 75, 0.5) !important;
border-radius: 8px !important;
padding: 8px !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
width: 100% !important;
margin-top: 8px !important;
transition: all 0.3s ease;
}
#quick-submit-file:hover {
background: rgba(35, 65, 105, 0.6) !important;
border-color: rgba(79, 195, 247, 0.5) !important;
}
/* 右下角按钮美化 */
.ant-btn-circle.ant-btn-lg {
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
background: linear-gradient(45deg, #1e88e5, #0d47a1) !important;
border: none !important;
width: 45px !important;
height: 45px !important;
}
.ant-btn-circle.ant-btn-lg:hover {
transform: scale(1.08) rotate(8deg) !important;
box-shadow: 0 7px 18px rgba(30, 136, 229, 0.6) !important;
background: linear-gradient(45deg, #2196f3, #1565c0) !important;
}
/* 修复选择框文本颜色 */
.ant-select-selection-item {
color: #e0f7ff !important;
font-size: 0.9rem;
}
/* 修复所有图标颜色 */
.anticon svg {
fill: #e0f7ff !important;
width: 16px !important;
height: 16px !important;
}
.ant-menu-item:hover .anticon svg {
fill: #4fc3f7 !important;
}
/* 修复分隔线颜色 */
.ant-divider {
background: rgba(64, 128, 255, 0.25) !important;
margin: 10px 0 !important;
}
/* ==== 代码块亚克力效果 ==== */
.hljs {
background: rgba(var(--acrylic-r, 15), var(--acrylic-g, 25), var(--acrylic-b, 45), var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
-webkit-backdrop-filter: blur(var(--acrylic-blur, 12px)) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 20, 60, 0.3) !important;
border-radius: 20px !important;
padding: 15px !important;
}
/* 修复分页组件白色背景 */
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-jump-prev,
.ant-pagination-jump-next,
.ant-pagination-options {
background: rgba(15, 25, 45, var(--acrylic-opacity, 0.5)) !important;
backdrop-filter: blur(8px) saturate(180%) !important;
-webkit-backdrop-filter: blur(8px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
border-radius: 8px !important;
color: #e0f7ff !important;
}
.ant-pagination-item a,
.ant-pagination-item-link {
color: #e0f7ff !important;
}
.ant-pagination-item-active {
background: rgba(64, 128, 255, 0.3) !important;
border-color: #4fc3f7 !important;
}
.ant-pagination-item:hover,
.ant-pagination-item-link:hover {
background: rgba(79, 195, 247, 0.25) !important;
}
/* ===== 设置面板样式 ===== */
#catoj-settings-panel {
position: fixed;
top: 60px;
right: 20px;
background: rgba(15, 25, 45, 0.85) !important;
backdrop-filter: blur(15px) saturate(180%) !important;
-webkit-backdrop-filter: blur(15px) saturate(180%) !important;
border: 1px solid rgba(64, 128, 255, 0.25) !important;
box-shadow: 0 10px 40px rgba(0, 20, 60, 0.4) !important;
border-radius: 20px !important;
padding: 20px;
width: 300px;
z-index: 9999;
transform: translateX(110%);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#catoj-settings-panel.open {
transform: translateX(0);
}
.settings-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.settings-panel-title {
font-size: 1.2rem;
font-weight: bold;
color: #4fc3f7 !important;
text-shadow: 0 0 8px rgba(79, 195, 247, 0.5);
}
.settings-panel-close {
background: transparent;
border: none;
color: #e0f7ff;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.settings-panel-close:hover {
color: #ff6b6b;
transform: rotate(90deg);
}
.settings-group {
margin-bottom: 20px;
}
.settings-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #e0f7ff;
}
.settings-input {
width: 100%;
padding: 8px 12px;
background: rgba(25, 45, 75, 0.6) !important;
border: 1px solid rgba(64, 128, 255, 0.3) !important;
border-radius: 8px;
color: #e0f7ff !important;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.settings-input:focus {
outline: none;
border-color: #4fc3f7 !important;
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
}
.settings-slider-container {
display: flex;
align-items: center;
gap: 10px;
}
.settings-slider {
flex: 1;
-webkit-appearance: none;
height: 6px;
border-radius: 3px;
background: rgba(64, 128, 255, 0.3);
outline: none;
}
.settings-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #4fc3f7;
cursor: pointer;
box-shadow: 0 0 8px rgba(79, 195, 247, 0.6);
}
.settings-slider-value {
min-width: 40px;
text-align: center;
background: rgba(25, 45, 75, 0.6);
padding: 3px 8px;
border-radius: 6px;
font-weight: 500;
}
.settings-color-picker {
width: 100%;
height: 36px;
border-radius: 8px;
border: 1px solid rgba(64, 128, 255, 0.3);
background: rgba(25, 45, 75, 0.6);
cursor: pointer;
}
.settings-buttons {
display: flex;
gap: 10px;
margin-top: 15px;
}
.settings-btn {
flex: 1;
padding: 8px;
border: none;
border-radius: 8px;
background: rgba(64, 128, 255, 0.3);
color: #e0f7ff;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.settings-btn:hover {
background: rgba(79, 195, 247, 0.5);
transform: translateY(-2px);
}
.settings-btn.primary {
background: linear-gradient(45deg, #1e88e5, #0d47a1);
}
.settings-btn.primary:hover {
background: linear-gradient(45deg, #2196f3, #1565c0);
}
/* ===== 响应式设计 ===== */
/* 小屏幕设备 */
@media (max-width: 768px) {
.app-header {
flex-direction: column;
padding: 6px !important;
margin: 8px !important;
width: calc(100% - 16px) !important;
}
.app-logo {
margin-bottom: 6px;
margin-right: 0;
font-size: 1.3rem !important;
}
.app-menu-container {
width: 100%;
margin-bottom: 6px;
margin-left: 0 !important;
justify-content: center;
}
.user-area-container {
margin-top: 6px;
margin-left: 0 !important;
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.ant-menu-overflow-item.ant-menu-item {
font-size: 0.85rem !important;
padding: 4px 8px !important;
margin: 0 2px !important;
}
.app-content, .ant-card {
margin: 8px !important;
padding: 12px !important;
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
}
#catoj-settings-panel {
top: 80px;
right: 10px;
width: calc(100% - 20px);
max-width: 280px;
}
}
/* 中等屏幕设备 */
@media (min-width: 769px) and (max-width: 1024px) {
.app-header {
padding: 6px 15px !important;
}
.app-content, .ant-card {
padding: 15px !important;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 12px !important;
}
}
/* 超大屏幕 */
@media (min-width: 1600px) {
.app-header {
width: calc(100% - 60px) !important;
padding: 8px 25px !important;
}
.app-menu-container {
margin-left: 30px;
}
.ant-menu-overflow-item.ant-menu-item {
padding: 6px 20px !important;
margin: 0 6px !important;
}
.ant-layout-content.app-content.css-bzolti.css-var,
.app-content.css-bzolti.css-var,
.ant-layout-content.css-bzolti.css-var {
width: calc(100% - 60px) !important;
margin-left: 30px !important;
margin-right: 30px !important;
}
}
`);
// ==== 第二部分：功能函数 ====
// 创建背景元素
function createBackgroundElements() {
// 创建图片背景
const imageBg = document.createElement('div');
imageBg.className = 'image-bg-element fixed-bg';
// 添加到body
document.body.appendChild(imageBg);
}
// 创建设置按钮
function createSettingsButton() {
const settingsBtn = document.createElement('button');
settingsBtn.className = 'settings-btn';
settingsBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 极光效果 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> 设置';
settingsBtn.addEventListener('click', function() {
const settingsPanel = document.getElementById('catoj-settings-panel');
if (settingsPanel) {
settingsPanel.classList.toggle('open');
}
});
return settingsBtn;
}
// 创建设置面板
function createSettingsPanel() {
// 创建面板容器
const settingsPanel = document.createElement('div');
settingsPanel.id = 'catoj-settings-panel';
// 面板标题和关闭按钮
settingsPanel.innerHTML = `
<div class="settings-panel-header">
<div class="settings-panel-title">美化设置</div>
<button class="settings-panel-close">×</button>
</div>
<div class="settings-group">
<label class="settings-label">背景图片 URL</label>
<input type="text" id="bg-image-url" class="settings-input" placeholder="https://example.com/image.jpg">
</div>
<div class="settings-group">
<label class="settings-label">背景透明度</label>
<div class="settings-slider-container">
<input type="range" min="0.1" max="1" step="0.05" value="0.8" class="settings-slider" id="bg-opacity">
<div class="settings-slider-value">80%</div>
</div>
</div>
<div class="settings-group">
<label class="settings-label">亚克力效果透明度</label>
<div class="settings-slider-container">
<input type="range" min="0.1" max="1" step="0.05" value="0.5" class="settings-slider" id="acrylic-opacity">
<div class="settings-slider-value">50%</div>
</div>
</div>
<div class="settings-group">
<label class="settings-label">亚克力模糊度 (px)</label>
<div class="settings-slider-container">
<input type="range" min="2" max="24" step="1" value="12" class="settings-slider" id="acrylic-blur">
<div class="settings-slider-value">12px</极光效果 div>
</div>
</div>
<div class="settings-group">
<label class="settings-label">亚克力颜色</label>
<input type="color" id="acrylic-color" class="settings-color-picker" value="#0f192d">
</div>
<div class="settings-group">
<label class="settings-label">Logo 颜色</label>
<input type="color" id="logo-color" class="settings-color-picker" value="#4fc3f7">
</div>
<div class="settings-buttons">
<button class="settings-btn refresh-bg-btn" id="refresh-bg">刷新背景</button>
<button class="settings-btn" id="reset-settings">重置设置</button>
<button class="settings-btn primary" id="save-settings">保存设置</button>
</div>
`;
// 添加关闭按钮事件
const closeBtn = settingsPanel.querySelector('.settings-panel-close');
closeBtn.addEventListener('click', function() {
settingsPanel.classList.remove('open');
});
// 添加背景刷新事件
const refreshBtn = settingsPanel.querySelector('#refresh-bg');
refreshBtn.addEventListener('click', function() {
refreshBackground();
});
// 添加保存设置事件
const saveBtn = settingsPanel.querySelector('#save-settings');
saveBtn.addEventListener('click', function() {
saveSettings();
});
// 添加重置设置事件
const resetBtn = settingsPanel.querySelector('#reset-settings');
resetBtn.addEventListener('click', function() {
resetSettings();
});
// 添加透明度滑块事件
const opacitySlider = settingsPanel.querySelector('#acrylic-opacity');
const opacityValue = settingsPanel.querySelectorAll('.settings-slider-value')[1];
opacitySlider.addEventListener('input', function() {
const value = parseFloat(this.value);
opacityValue.textContent = `${Math.round(value * 100)}%`;
});
// 添加背景透明度滑块事件
const bgOpacitySlider = settingsPanel.querySelector('#bg-opacity');
const bgOpacityValue = settingsPanel.querySelectorAll('.settings-slider-value')[0];
bgOpacitySlider.addEventListener('input', function() {
const value = parseFloat(this.value);
bgOpacityValue.textContent = `${Math.round(value * 100)}%`;
});
// 添加模糊度滑块事件
const blurSlider = settingsPanel.querySelector('#acrylic-blur');
const blurValue = settingsPanel.querySelectorAll('.settings-slider-value')[2];
blurSlider.addEventListener('input', function() {
const value = parseInt(this.value);
blurValue.textContent = `${value}px`;
});
// 添加到文档
document.body.appendChild(settingsPanel);
return settingsPanel;
}
// 刷新背景功能
function refreshBackground() {
// 添加随机参数避免缓存
const timestamp = new Date().getTime();
document.documentElement.style.setProperty(
'--bg-image-url',
`url('https://t.alcy.cc/fj?refresh=${timestamp}')`
);
// 添加刷新动画效果
const refreshBtn = document.getElementById('refresh-bg');
const originalText = refreshBtn.textContent;
refreshBtn.textContent = '刷新中...';
// 1秒后恢复按钮文本
setTimeout(() => {
refreshBtn.textContent = originalText;
}, 1000);
}
// 保存设置
function saveSettings() {
const bgImageUrl = document.getElementById('bg-image-url').value;
const bgOpacity = document.getElementById('bg-opacity').value;
const acrylicOpacity = document.getElementById('acrylic-opacity').value;
const acrylicBlur = document.getElementById('acrylic-blur').value;
const acrylicColor = document.getElementById('acrylic-color').value;
const logoColor = document.getElementById('logo-color').value;
// 提取RGB值
const rgb = hexToRgb(acrylicColor);
// 保存到GM存储
GM_setValue('bgImageUrl', bgImageUrl);
GM_setValue('bgOpacity', bgOpacity);
GM_setValue('acrylicOpacity', acrylicOpacity);
GM_setValue('acrylicBlur', acrylicBlur);
GM_setValue('acrylicR', rgb.r);
GM_setValue('acrylicG', rgb.g);
GM_setValue('acrylicB', rgb.b);
GM_setValue('logoColor', logoColor);
// 应用设置
applySettings();
// 关闭面板
document.getElementById('catoj-settings-panel').classList.remove('open');
}
// 将十六进制颜色转换为RGB
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : {r: 15, g: 25, b: 45}; // 默认值
}
// 重置设置
function resetSettings() {
// 重置表单值
document.getElementById('bg-image-url').value = 'https://t.alcy.cc/fj';
document.getElementById('bg-opacity').value = 0.8;
document.getElementById('acrylic-opacity').value = 0.5;
document.getElementById('acrylic-blur').value = 12;
document.getElementById('acrylic-color').value = '#0f192d';
document.getElementById('logo-color').value = '#4fc3f7';
// 更新显示
document.querySelectorAll('.settings-slider-value')[0].textContent = '80%';
document.querySelectorAll('.settings-slider-value')[1].textContent = '50%';
document.querySelectorAll('.settings-slider-value')[2].textContent = '12px';
// 保存并应用
saveSettings();
}
// 应用设置
function applySettings() {
const bgImageUrl = GM_getValue('bgImageUrl', 'https://t.alcy.cc/fj');
const bgOpacity = GM_getValue('bgOpacity', 0.8);
const acrylicOpacity = GM_getValue('acrylicOpacity', 0.5);
const acrylicBlur = GM_getValue('acrylicBlur', 12);
const acrylicR = GM_getValue('acrylicR', 15);
const acrylicG = GM_getValue('acrylicG', 25);
const acrylicB = GM_getValue('acrylicB', 45);
const logoColor = GM_getValue('logoColor', '#4fc3f7');
// 应用背景图片
document.documentElement.style.setProperty('--bg-image-url', `url('${bgImageUrl}')`);
// 应用背景透明度
const imageBg = document.querySelector('.image-bg-element');
if (imageBg) {
imageBg.style.opacity = bgOpacity;
}
// 应用亚克力效果透明度
document.documentElement.style.setProperty('--acrylic-opacity', acrylicOpacity);
// 应用亚克力模糊度
document.documentElement.style.setProperty('--acrylic-blur', `${acrylicBlur}px`);
// 应用亚克力颜色
document.documentElement.style.setProperty('--acrylic-r', acrylicR);
document.documentElement.style.setProperty('--acrylic-g', acrylicG);
document.documentElement.style.setProperty('--acrylic-b', acrylicB);
// 应用Logo颜色
document.documentElement.style.setProperty('--logo-color', logoColor);
document.documentElement.style.setProperty('--logo-color-shadow', `${logoColor}80`);
// 更新表单值
const settingsPanel = document.getElementById('catoj-settings-panel');
if (settingsPanel) {
document.getElementById('bg-image-url').value = bgImageUrl;
document.getElementById('bg-opacity').value = bgOpacity;
document.getElementById('acrylic-opacity').value = acrylicOpacity;
document.getElementById('acrylic-blur').value = acrylicBlur;
document.getElementById('acrylic-color').value = rgbToHex(acrylicR, acrylicG, acrylicB);
document.getElementById('logo-color').value = logoColor;
document.querySelectorAll('.settings-slider-value')[0].textContent = `${Math.round(bgOpacity * 100)}%`;
document.querySelectorAll('.settings-slider-value')[1].textContent = `${Math.round(acrylicOpacity * 100)}%`;
document.querySelectorAll('.settings-slider-value')[2].textContent = `${acrylicBlur}px`;
}
}
// 将RGB值转换为十六进制颜色
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
// 优化导航栏结构 - 安全版本
function optimizeHeaderStructure() {
const header = document.querySelector('.app-header');
if (!header) {
console.log('未找到导航栏元素');
return;
}
// 克隆原始元素
const headerClone = header.cloneNode(true);
headerClone.id = 'temp-header-clone';
headerClone.style.display = 'none';
document.body.appendChild(headerClone);
// 获取原始元素
const logo = header.querySelector('.app-logo');
const menu = header.querySelector('.app-menu');
const userArea = header.querySelector('.loginstatus-dropdown');
// 创建菜单容器
const menuContainer = document.createElement('div');
menuContainer.className = 'app-menu-container';
// 清空header
header.innerHTML = '';
// 添加logo
if (logo) {
header.appendChild(logo);
}
// 添加菜单容器
header.appendChild(menuContainer);
// 添加菜单到容器
if (menu) {
menuContainer.appendChild(menu);
}
// 添加用户区域容器
const userAreaContainer = document.createElement('div');
userAreaContainer.className = 'user-area-container';
header.appendChild(userAreaContainer);
// 添加用户区域
if (userArea) {
userAreaContainer.appendChild(userArea);
}
// 删除临时克隆
document.getElementById('temp-header-clone')?.remove();
return userAreaContainer;
}
// ==== 第三部分：主初始化 ====
function initUserArea(userAreaContainer) {
try {
// 添加设置按钮
const settingsBtn = createSettingsButton();
userAreaContainer.appendChild(settingsBtn);
return userAreaContainer;
} catch (error) {
console.error('用户区域初始化失败:', error);
return null;
}
}
function mainInit() {
try {
// 创建背景元素
createBackgroundElements();
// 优化导航栏结构
const userAreaContainer = optimizeHeaderStructure();
// 初始化用户区域
if (userAreaContainer) {
initUserArea(userAreaContainer);
}
// 创建设置面板
createSettingsPanel();
// 应用保存的设置
applySettings();
console.log('美化脚本初始化完成');
} catch (error) {
console.error('主初始化失败:', error);
}
}
// ==== 第四部分：执行入口 ====
// 使用requestIdleCallback优化加载性能
if ('requestIdleCallback' in window) {
window.requestIdleCallback(mainInit, { timeout: 2000 });
} else {
// 备用方案
setTimeout(mainInit, 500);
}
// 添加重试机制
setTimeout(() => {
if (!document.querySelector('.user-area-container') ||
!document.querySelector('#catoj-settings-panel')) {
console.log('检测到用户区域未初始化，正在重试...');
mainInit();
}
}, 2000);
})();
-
作者：@vernal_blossom
-
更新时间：2025-07-28
-
更新内容：
- 添加可设置选项数量，提高用户自由度
- 优化脚本性能
浙公网安备 33010602011771号