感谢@青团佬开发的优秀项目，自定义样式优化文件下载：
链接：自定义样式优化custom.zip
自定义文件功能说明与优化效果
本文档详细说明了 PC/custom 目录下各个自定义文件的用途、使用方法以及实现的优化效果。
食用方法
上传并解压 custom.zip 到 Docker 部署的 FlatNAS 映射的本地 PC/custom 目录下。
1. CSS 样式加载
在 WebUI 页面 设置 > 开放中心 > 自定义 CSS 中输入如下代码 (可自行选取需要加载的样式文件)：
/* 引入你在 PC 目录下准备好的 CSS 脚本 */
@import url('/backgrounds/custom/font.css');
@import url('/backgrounds/custom/聚合搜索框.css');
@import url('/backgrounds/custom/桌面组件全量毛玻璃化.css');
@import url('/backgrounds/custom/分组卡片优化.css');
2. JS 脚本加载
同样可以在 外观布局 > 自定义页脚内容 (HTML) 中输入如下代码加载 JS 脚本：
<div class="custom-footer"></div>
<img src="x" style="display:none" onerror="if(!window.customScriptsInjected){
const scripts = [
'/backgrounds/custom/点击.js',
'/backgrounds/custom/页脚.js',
'/backgrounds/custom/聚合搜索框.js'
];
scripts.forEach(src => {
const s = document.createElement('script');
s.src = src;
s.async = true;
document.head.appendChild(s);
});
window.customScriptsInjected = true;
}">
1. 核心美化类 (CSS)
桌面组件全量毛玻璃化.css
- 功能：这是核心样式文件，为整个桌面系统提供“毛玻璃（Glassmorphism）”风格的视觉大修。
- 使用方法：在项目入口文件（如
main.ts 或 style.css）中全局引入。
- 优化效果：
- 全量毛玻璃：将桌面小组件、分组卡片、搜索框等背景改为半透明，并添加
blur(12px) 高斯模糊效果，提升高级感。
- 文字增强：强制将主要文字颜色改为白色，并添加文字阴影，确保在半透明背景上的可读性。
- 组件定制：专门针对网络状态（内网绿/外网蓝）、音乐播放器（滚动歌名）、计算器、待办事项等组件进行了精细化磨砂适配。
- 移动端适配：优化了移动端的栅格布局。
分组卡片优化.css
- 功能：针对桌面应用分组卡片的布局进行微调。
- 使用方法：配合全局 CSS 引入。
- 优化效果：
- 极简模式：去除分组图标的 SVG 背景色，使界面更清爽。
- 紧凑布局：减小卡片内边距和间距，隐藏默认的分组操作按钮（仅悬停时显示），减少视觉干扰。
聚合搜索框.css
- 功能：定义“胶囊型”聚合搜索框的样式。
- 使用方法：需与
聚合搜索框.js 配合使用。
- 优化效果：
- 将默认搜索框改为圆角胶囊形状（
border-radius: 9999px）。
- 添加磨砂背景和淡入动画。
- 隐藏原生下拉菜单，为自定义引擎图标选择器提供样式支持。
font.css
- 功能：全局字体替换。
- 使用方法：引入此文件，并确保
PC/custom/字体/猫啃圆珠体.ttf 文件存在。
- 优化效果：
- 应用“猫啃圆珠体”作为全站默认字体，使界面风格更加可爱、圆润。
2. 功能增强类 (JS)
聚合搜索框.js
- 功能：增强搜索框的交互逻辑和视觉表现。
- 使用方法：在页面加载后执行（通常通过
<script> 引入或在 main.ts 中导入）。
- 优化效果：
- 图标化引擎选择：将默认的文字版搜索引擎下拉框（Baidu/Google/Bing等）替换为可视化的图标选择器。
- 交互优化：支持点击切换引擎，并自动处理输入框焦点。
页脚.js
- 功能：自动在页面底部注入个功能丰富的页脚区域。
- 使用方法：引入即可，脚本会自动寻找
.custom-footer 元素注入内容，或在 body 变动时自动注入。
- 使用建议：使用此脚本时建议关掉 【显示访客统计】和【每日一言】功能。
- 优化效果：
- 信息展示：显示网站运行天数、当前传统时辰（如“子时”）、页面加载耗时。
- 核心价值观：显示滚动的核心价值观文本。
- 版权与链接：提供 ICP 备案号及相关链接的统一样式。
3. 交互特效类 (JS)
Mouse.js
- 功能：鼠标点击粒子特效。
- 使用方法：引入即可，脚本会初始化
CursorSpecialEffects 实例。
- 优化效果：
- 点击鼠标时产生类似烟花/**的彩色粒子散开效果，增加点击的爽快感和趣味性。
点击.js
- 功能：鼠标点击文字特效与拖尾特效。
- 使用方法：引入即可，脚本为自执行函数。
- 优化效果：
- 点击浮字：左键/右键点击时，随机浮现“富强、**、文明...”等正能量词汇，配合 Emoji 符号。
- 鼠标拖尾：鼠标移动时，身后会留下一串彩色的圆点拖尾轨迹，增加动态美感。
总结建言
推荐的组合使用方式是将所有 CSS 文件统一引入以获得最佳视觉体验，并根据性能偏好按需引入 JS 特效（Mouse.js 和 点击.js 可能会消耗少量 GPU 资源）。
