更新公告 · 2026-10-18
PCOS 网盘「风格模板」升级说明
一次从「能用」到「好看、好用、好维护」的整体升级:前端换成独立的风格模板,新增独立下载页,品牌与页脚全面统一,同时把 AList 内核升级到 v3.65.0。
站点:123.pcosw.cn
前端:独立风格模板
内核:AList v3.65.0
模板与内核解耦
1 套独立前端,不再受 AList 默认界面限制
2 套背景方案(蓝色玻璃光 / 奶油暖色)+ 深色
6 大块浏览、下载、品牌、页脚、移动端、运维
≈23KB首屏静态资源(gzip,不含图片)
01这次一起升级了什么
不是简单换个皮肤,而是把「界面」与「存储内核」拆开,各自升级。
- AList 内核:v3.64.0 → v3.65.0,修复了 V-001 安全漏洞、CWE-78 命令注入等问题;数据与配置原样保留,升级后正常服务。
- 前端:从 AList 官方界面换成独立风格模板,通过 nginx 中间层实现——页面由模板渲染,目录、搜索、下载仍然由 AList 提供数据。
- 品牌:重做 LOGO 与 favicon,浏览器标签、手机主屏、收藏夹都使用统一图标。
- 页面:首页列表、搜索结果、独立下载页、页脚、移动端全部重新设计。
- 主题:新增两套背景(蓝色玻璃光 / 奶油暖色)并保留深色极光主题,可一键切换。
- 运维:静态资源加版本号、HTML 禁止缓存、升级前保留完整备份。
改造前:AList 官方界面(功能齐全,但样式朴素)
改造后:独立风格模板(卡片、搜索、直链下载)
02做了哪些改动
按「架构 → 浏览 → 下载 → 品牌 → 页脚 → 背景 → 细节」七个部分说明。
A. 架构:给 AList 加一层「前端中间层」
nginx 把首页请求交给模板静态文件,只把接口与直链路径转发给本机的 AList(127.0.0.1:5244);AList 自带的官方后台仍保留在 /@manage。
| 请求路径 | 去向 |
/ | 302 跳转到 /189,直接进入资源目录 |
/api/*、/d/*、/p/* | 反代给 AList,负责目录、搜索、下载直链 |
/@manage、/s/* | 保留 AList 官方后台与分享页 |
| 其余路径 | 模板前端(单页应用,支持刷新与分享链接) |
为什么这样做:AList 没有「模板包」机制,前端是编译进程序的。加一层 nginx 中间层,才能既保留 AList 的全部能力,又完全掌控界面,且以后升级 AList 不会把界面刷回去。
B. 浏览体验:从「一张表格」到「卡片式资源库」
- 卡片 / 列表双视图,文件类型自动配图标(视频、音频、图片、文档、代码、压缩包)
- 面包屑导航、按名称/时间/大小排序、每页条数、分页
- 全盘搜索,结果直接显示文件所在路径
- 登录 / 退出、加密目录输入访问密码
- 加载骨架屏、空目录提示、错误重试、操作 Toast
C. 下载:新增独立下载页,一键直达
点击任意文件不再弹小窗,而是进入独立下载页:/download?path=/189/xxx,地址可直接分享。
- 图片 / 视频 / 音频 / PDF 显示预览窗口,右上角可关闭
- 不支持预览的格式不显示空白预览框,下载按钮直接出现在文件信息下方
- 提供「立即下载 / 复制直链 / 新窗口打开」三种方式
- 游客无需登录即可直接下载,页面上有明确标识
独立下载页:文件信息、三种下载方式、路径与返回入口
D. 品牌:LOGO 与站点图标
上传的品牌图自动裁掉多余留白,输出为网页用图;同时生成 16 / 24 / 32 / 48 / 64 / 128 / 256 共 7 种尺寸的 favicon,浏览器标签、书签、手机主屏都有清晰图标。
E. 页脚:与装机网保持同一套视觉
页脚按装机网的版式重做:深色底、白边邮箱反馈输入框、来封邮件按钮、微信与 QQ 群二维码、社交入口、免责声明与站点链接,右下角还有返回顶部按钮,年份自动更新。
新版页脚:与装机网一致的排版和配色
F. 背景:两套方案,随时切换
- 蓝色玻璃光(当前默认):浅蓝渐变 + 半透明玻璃花瓣 + 缓速漂移,参考腾讯云首页的观感
- 奶油暖色:奶油底 + 蜜桃色晕染 + 淡圆弧,参考光雅盘的观感
- 深色主题保留极光背景;手机端自动降低动效,系统「减少动态效果」时停止动画
浅色主题 · 蓝色玻璃光背景
深色主题(右上角一键切换,偏好会被记住)
G. 细节与工程化
- 移动端适配:卡片两列、按钮全宽、下载页信息单列,手机上操作不费劲
- 直达资源目录:打开
123.pcosw.cn 直接进入 /189,少点一次
- 缓存治理:CSS/JS 带版本号、HTML 不缓存,从根上避免「更新后有人看到旧页面」
- 刷新兼容:游客点击刷新时自动降级为普通刷新,不再出现「Refresh without permission」报错页
移动端:两列卡片、自适应导航
03为什么这么做
四个最直接的原因。
1. 官方界面撑不起「装机网旗下」的品牌感
AList 默认界面是一张朴素的表格,和装机网的整体风格差距较大。作为配套的网盘站点,用户从装机网过来,第一眼应该认出「这是同一家的服务」——所以页脚、配色、图标都按装机网的规范来。
2. 下载是核心动作,不该藏在多层点击后面
原来的流程是「打开目录 → 找到文件 → 点开详情 → 再点下载」。改成独立下载页后,列表点文件就进入下载页,预览、大小、时间、直链一次看全,点一下就开始下载。
3. 访客与登录用户的权限差异需要说清楚
AList 的「强制刷新存储」等操作需要管理员权限,游客点击会报错。现在页面明确标注「无需登录 · 直接下载」,刷新失败也会自动降级,不再给出让人困惑的红色报错。
4. 旧版 AList 存在安全通告,需要及时升级
v3.65.0 修复了 V-001 安全漏洞与 CWE-78 命令注入等问题。网盘承载的是大家的文件,安全更新不能拖。
还有一个很实际的教训:静态资源如果被浏览器长时间缓存,后端页面更新了、访客看到的还是旧样式,甚至会出现「页面打不开」的假故障。这次的版本号 + HTML 不缓存,就是为了不再重演。
04有什么好处
看得见的体验提升,和看不见的稳定性提升。
| 维度 | 改善 |
| 速度 | 首屏 HTML 约 4.2KB、CSS 约 7.4KB、JS 约 11KB(均为 gzip 后),页面响应约 0.15 秒 |
| 体验 | 打开即进资源目录;下载页一键直达;支持复制直链、新窗口打开;移动端可用 |
| 品牌 | LOGO、favicon、页脚与装机网统一,二维码 / 客服入口集中在一处 |
| 稳定 | 模板与 AList 内核解耦:以后升级 AList 不影响界面;资源带版本号,更新不会「串版本」 |
| 安全 | AList 升级到 v3.65.0,修复已知漏洞;升级前已完整备份,可回滚 |
| 可维护 | 整套模板可以直接复制到其他 AList 站点使用,换配色、换 LOGO、换页脚都只需改配置文件 |
卡片 / 列表双视图
大屏浏览更直观,列表视图更适合扫文件名。
独立下载页
文件信息 + 预览 + 三种下载方式,一个页面搞定。
双背景方案
蓝色玻璃光 / 奶油暖色,随时可以换一种心情。
移动端适配
手机上同样两列卡片、按钮易点、不横向滚动。
05升级时间线
-
AList 部署上线
网盘服务开始运行,接入 189、139、夸克等多个云盘存储。
-
独立风格模板上线
nginx 中间层 + 静态模板,首页、搜索、登录、预览全部换上新的界面。
-
独立下载页 + 品牌资源
文件点击进入独立下载页;LOGO、favicon、页脚按装机网规范统一。
-
背景与体验打磨
蓝色玻璃光 / 奶油暖色两套背景、直达 /189、刷新降级、缓存治理。
-
AList 升级 v3.65.0
内核升级并完成安全修复,数据与配置原样保留,升级前后均已备份。
06接下来
这一版是「打好底子」:界面、下载、品牌、内核都稳定了。后续计划包括:
- 独立分享页(现在分享链接仍走官方页面)
- 批量下载与多选操作
- 更多配色 / 背景预设,可按需切换
- 访问统计与热门资源推荐
使用中遇到问题,或有想要的功能,欢迎通过页脚的邮箱或交流群告诉我们。
小提示:如果你的浏览器还显示旧界面或旧图标,按 Ctrl + F5 强制刷新一次即可。