📸 视觉一中 — 开发历程
呼和浩特第一中学 · 学生图片分享平台
从一颗记录校园生活的种子，成长为一个功能完整的图片社区。
版本一览
| 版本 | 代号 | 主题 |
|---|---|---|
| v0.1 | 🥚 萌芽 | 静态页面雏形 |
| v0.2 | 🏗️ 筑基 | OSS 接入与图片上传 |
| v0.3 | 🖼️ 画廊 | 图片展示与浏览 |
| v0.4 | ❤️ 互动 | 点赞系统上线 |
| v0.5 | 🔒 安全 | 删除密码与权限管理 |
| v0.6 | 🎨 焕颜 | UI 全面重构 — 毛玻璃设计系统 |
| v0.7 | ⚡ 极速 | 性能优化 — 图片压缩与懒加载 |
| v0.8 | 🏆 排行 | 排行榜与数据统计 |
| v0.9 | 📱 响应 | 移动端适配与管理后台 |
| v1.0 | 🚀 启航 | 正式发布 |
| v1.1 | 🧩 统一 | 导航一致性 + Bug 修复 |
| v1.2 | 📦 缓存 | 索引缓存系统 |
v0.1 — 🥚 萌芽 “从一行 HTML 开始”
2025 年秋，一个普通的晚自习后，第一行代码被敲下。
变化
- 创建项目骨架，搭建最基本的静态页面
index.html：一个简单的欢迎页，只有标题”视觉一中”和一句话介绍- 纯手工 CSS，没有任何框架依赖
- 图片来自 OSS 的静态链接，硬编码在 HTML 中
- 所有样式写在
<style>标签里，全页不超过 200 行
当时的样子
1 | index.html ← 唯一的页面 |
“先跑起来再说。”
v0.2 — 🏗️ 筑基 “让图片真正属于云端”
接入阿里云 OSS，上传不再是梦。
变化
- 引入
ali-ossSDK，打通 STS 临时授权流程 - 创建
utils.js：封装 STS 凭证获取、过期刷新逻辑 - 创建
upload.js：实现单张图片上传、进度条反馈 upload.html：第一个交互页面诞生- 图片不再硬编码，而是从 OSS 动态获取
新增文件
1 | js/ |
“能传图了！虽然一次只能传一张。”
v0.3 — 🖼️ 画廊 “让作品被看见”
图片有了展示的舞台，画廊页面诞生。
变化
shows.html：全新画廊页面，网格布局展示所有图片show.js：从 OSS 拉取图片列表，动态渲染卡片- 引入 Viewer.js：点击图片可放大查看、缩放、旋转
- 引入
ossManager.js：统一管理 OSS 客户端实例 show.css：卡片式布局，阴影 + 圆角- 首页
index.html新增”每周精选”板块，展示点赞最多的 5 张图
新增文件
1 | js/ |
“看着图片一张张渲染出来，成就感拉满。”
v0.4 — ❤️ 互动 “每一份喜欢都值得被记录”
点赞功能上线，作品有了温度。
变化
- 图片卡片增加 ❤️ 点赞按钮，点击即时 +1
- 点赞数据同步到 OSS
index.json，持久化存储 - 引入 localStorage 缓存：已点赞记录本地保存，刷新不丢失
- 点赞防重复：同一张图只能点一次
- 首页统计数字从云端实时获取（照片数、累计点赞、创作者数）
- 排序逻辑优化：每周精选按点赞数降序排列
技术亮点
- 点赞异步批量同步（3500ms 防抖），减少 OSS 写入次数
- 本地缓存 + 远程同步双保险
“有人点赞了！这功能没白做。”
v0.5 — 🔒 安全 “你的作品你做主”
删除密码系统，让每张图都有主人。
变化
- 上传时可设置删除密码，密码经 SHA-256 哈希后存储
- 画廊卡片增加 ⋮ 菜单 →「删除」选项
- 删除需要验证密码，哈希比对，不存明文
- 管理员页面
manager.html诞生：批量管理所有索引 - 管理页支持：
- 双标签切换（图片索引 / 视频索引）
- 在线编辑标题、作者、点赞数
- 标记删除 → 批量保存 → OSS 物理删除
新增文件
1 | manager.html ← 管理员后台 |
“现在可以放心让大家上传了。”
v0.6 — 🎨 焕颜 “颜值就是生产力”
UI 全面重构，毛玻璃设计系统上线。
变化
🧩 设计系统 (command.css)
- CSS 变量体系：主色、阴影、圆角、间距、动画曲线统一管理
- 通用组件：
.btn按钮系列、.glass-card玻璃卡片、.spinner加载 - 动画系统：
reveal滚动渐入、float浮动、skeleton骨架屏 - 响应式断点：480px / 768px / 1024px 三档适配
🏠 首页重构 (index.html)
- 粒子 Hero：深色渐变背景 + 浮动粒子 + 光晕动画
- 统计计数器：数字递增动画，从云端拉取实时数据
- 功能卡片：6 张功能介绍卡片，悬停上浮动效
- CTA 召唤区：渐变背景 + 图案纹理
- Footer：四栏布局（品牌 + 导航 + 统计 + 联系）
💡 关于页 (about.html)
- Hero 横幅 + 站点实时数据
- 承诺标签 + 理念价值观三栏卡片
- 联系方式横向布局，模态框弹性动画
📤 上传页 (upload.html)
- 文件预览缩略图网格
- 上传须知侧边栏
- 进度条渐变动画
“这才像一个正经产品该有的样子。”
v0.7 — ⚡ 极速 “快，是最大的诚意”
性能全面优化，加载速度提升 3 倍。
问题诊断
- 图片原始分辨率过高（单张 3-8MB）
- 每批并发加载 11 张，网络请求拥堵
- 离屏卡片仍然参与渲染计算
setInterval每秒轮询 DOM，CPU 空转
优化措施
| 优化项 | 改动 | 效果 |
|---|---|---|
| OSS 图片压缩 | URL 追加 ?x-oss-process=image/resize,w_600 |
图片体积 ↓80% |
| 减少并发 | PAGE_SIZE: 11 → 6 |
请求数 ↓45% |
| 异步解码 | <img decoding="async"> |
不阻塞主线程 |
| 降低优先级 | fetchpriority="low" |
优先保证交互 |
| 跳过离屏渲染 | content-visibility: auto |
渲染量 ↓60% |
| 移除轮询 | setInterval → MutationObserver |
CPU 空闲 |
| 滚动节流 | requestAnimationFrame |
滚动流畅 |
| 加载降级 | onerror → 去掉处理参数重试原图 |
不显示裂图 |
数据对比
1 | 优化前: 首屏加载 ~4.2s, 滚动卡顿明显 |
“用户不会告诉你网站慢，他们只会默默关掉。”
v0.8 — 🏆 排行 “让优秀被看见”
排行榜独立页面，数据一目了然。
变化
ranking.html：全新排行榜页面- 双排序模式：
- 🔥 热门排行：按点赞数降序，取前 50 名
- 🆕 最新上传：按上传时间降序
- 前三名特殊样式：🥇 金色 / 🥈 银色 / 🥉 铜色
- 顶部统计摘要：作品总数 / 累计点赞 / 最高点赞
- 缩略图智能检测：DNG 等不支持格式自动显示 📄 占位
- 所有页面导航栏 + Footer 同步新增排行入口
“竞争是进步的动力——哪怕只是为了上个榜。”
v0.9 — 📱 响应 “大屏小屏，体验如一”
移动端全面适配，管理后台焕新。
变化
📱 响应式大修
- 所有页面适配手机端（≤768px）
- 导航栏压缩：字号缩小、间距紧凑
- 画廊网格自适应：桌面 5 列 → 平板 3 列 → 手机 2 列
- 上传页桌面双栏 → 移动端堆叠
- 排行榜卡片间距、字号逐级缩小
🔧 管理后台焕新
- 新增 Hero 横幅 + 玻璃拟态卡片容器
- 胶囊式 Tabs 替代旧式下划线
- 资源计数实时显示、输入框聚焦光晕
- 表格行悬停高亮、移除按钮悬停变实心
“在教室用手机打开，一样好看。”
v1.0 — 🚀 启航 “故事刚刚开始”
从一个人的业余项目，到一群人的校园记忆库。
最终数据
1 | 📸 25 张作品 ❤️ 104 个点赞 |
项目结构
1 | dji Osmo video--online/ |
技术栈
| 层 | 技术 |
|---|---|
| 前端 | 原生 HTML + CSS + JavaScript |
| 存储 | 阿里云 OSS (图片 + JSON 索引) |
| 授权 | 阿里云 STS 临时令牌 |
| 图片查看 | Viewer.js |
| SDK | aliyun-oss-sdk-6.x |
| 图片处理 | OSS Image Processing (resize) |
v1.1 — 🧩 统一 “看起来像一个产品了”
导航一致性大修，Bug 清扫。
导航统一
- 移除
show.css/upload.css中的导航重复样式，全局导航完全由command.css一处控制 - 所有页面导航字体、间距、悬浮效果、响应式行为完全一致
- 修复移动端导航文字换行问题（
white-space: nowrap） - 修复移动端导航字号不一致（
show.css/upload.css的font-size: 1rem覆盖了响应式字号）
Bug 修复
| Bug | 原因 | 修复 |
|---|---|---|
| 排行榜加载失败 | ranking.html 缺失 utils.js 引用 |
添加 <script src="./js/utils.js"> |
| 排行榜显示 0 条 | 过滤条件错误 > 10（最高点赞仅 8） |
改回 > 0 |
| 上传页面崩溃 | upload.js 被加载两次，let client 重复声明 |
移除重复的 script 标签 |
| 加载更多不消失 | allMediaFiles 是局部变量，外部检测不到 |
暴露 _galleryFiles / _galleryAllLoaded |
| 缩略图加载失败 | OSS 图片处理部分图片返回 400 | 添加 retryImage 降级函数 |
| 合并冲突 | Git 合入导致 manager.html 结构错乱 | 手动解决 3 处冲突 |
其他
- Toast 通知美化：全屏遮罩 → 顶部悬浮毛玻璃条，不阻塞页面操作
- 移动端 Footer 精简：移除
h4::after装饰线，链接改为横向排列
“每一个细节都对得起用户。”
v1.2 — 📦 缓存 “快，还要再快”
索引缓存系统上线，页面加载速度再提升。
本地缓存系统
在 utils.js 中新增统一的索引缓存：
| 函数 | 说明 |
|---|---|
getIndexData(forceRefresh?) |
获取图片索引，优先走 30 分钟本地缓存 |
clearIndexCache() |
清除缓存，供刷新/上传/删除后调用 |
接入页面
| 页面 | 使用方式 |
|---|---|
index.html |
loadStats() 和 loadWeeklyPhotos() 改用 getIndexData() |
shows.html |
工具栏统计 + show.js 元数据获取改用 getIndexData() |
ranking.html |
loadRanking() 改用 getIndexData() |
缓存更新策略
1 | 页面打开 → 缓存未过期？→ 直接用 |
控制台提示
1 | [索引] 使用本地缓存 (还剩 24 分钟过期) |
版本一览更新
| 版本 | 代号 | 主题 |
|---|---|---|
| v1.1 | 🧩 统一 | 导航一致性 + Bug 修复 |
| v1.2 | 📦 缓存 | 索引缓存系统 |
“数据有源，心里有数。”
致谢
感谢每一位上传作品的同学，是你们让这个平台有了生命。
感谢每一个点赞，让创作者感受到被看见的喜悦。
感谢每一次反馈，让这个项目变得更好。
视觉一中 — 用镜头记录青春
项目始于 2025 年秋 · 持续维护中
✨ 如果你喜欢这个项目，欢迎赞助支持 ☕
说些什么吧！