非遗·油纸伞

非遗·油纸伞

项目简介

非遗·油纸伞 是一个面向非物质文化遗产（油纸伞）主题的纯前端 Web 展示与互动项目。项目以「传承千年工艺 · 守望文化之美」为理念，通过历史叙事、工艺解读、3D 交互、DIY 创作、知识问答与虚拟展厅等模块，帮助用户了解、体验与传播油纸伞文化。

当前版本为 纯前端 Demo：无后端服务，数据来自本地 Mock 与浏览器 localStorage 持久化。

---

技术栈

类别	技术
页面结构	HTML5
样式	CSS3（Design Tokens、响应式布局、动画）
脚本	原生 JavaScript（ES5/ES6 混用）
3D 渲染	Three.js v0.157.0（CDN）
画布绘制	Fabric.js v5.3.0（CDN）
字体	Google Fonts — Noto Serif SC（思源宋体）
数据存储	localStorage（前缀 umbrella_）

---

功能模块

1. 首页（index.html）

• 左侧 历史时间轴：春秋末期 → 东汉 → 唐代 → 宋代 → 明清 → 近现代，共 6 个节点
• 右侧 画卷式幻灯片：Ken Burns 背景动效、墨染切换、文字渐显
• 支持 滚轮切换、点击时间轴跳转、自动轮播（约 5.5 秒/帧）
• 展示各时期油纸伞发展脉络与文字介绍

2. 工艺解读（craft.html）

• 五大核心工序：选竹 → 制骨 → 裱纸 → 绘花 → 上油
• 左侧工序轨道：环形进度、节点状态（当前/已完成）
• 右侧详情卡片：工序标签、关键数据、工艺要点、文字说明
• 每道工序配套 工艺演示视频（assets/mp4/），弹窗播放
• 支持上/下步切换与工序间平滑过渡动画

3. 3D 交互（model3d.html）

基于 Three.js 的油纸伞 3D 场景，提供沉浸式换装体验：

• 伞面色：8 种预设（朱砂、桃粉、靛蓝、翡翠、赤金、紫藤、素絹、墨染）
• 纹样：梅花、竹影、水纹、祥云、锦纹、牡丹、素色、墨染
• 伞柄颜色：8 种可选
• 开合 / 透明度 滑块调节
• 自动旋转、流苏穗子、花瓣飘落 开关
• 鼠标拖拽旋转、滚轮缩放、右键平移
• 水墨背景、自定义光标、诗词浮层

4. DIY 工坊（diy.html）

基于 Fabric.js 的圆形伞面绘画工具：

• 笔墨工具：硬笔 / 毛笔 / 软笔
• 墨色调配：预设传统色盘
• 伞面底色：纯色 / 渐变
• 笔触粗细：2–50px 可调
• 传统纹样：梅花、兰花、牡丹、竹子等贴图素材
• 绘画 / 选择 双模式切换
• 撤销 / 重做、删除选中、清空画布
• 保存下载：导出带伞骨装饰线的 PNG 图片
• 快捷键：Ctrl/Cmd+Z 撤销、Ctrl/Cmd+S 保存等

5. 知识回顾（quiz.html + quiz-detail.html）

• 三大题库分类：
  • 油纸伞历史（10 题 · 入门）
  • 制作工艺（8 题 · 进阶）
  • 文化内涵（6 题 · 精通）
• 单选题答题流程：选项高亮、即时判题、答案解析
• 答题结束展示得分，记录保存至本地（最多 20 条）
• 首页展示 近期答题记录（分类、时间、分数）

6. 虚拟展厅（gallery.html + gallery-detail.html + gallery-create.html）

展厅列表

• 展示平台预设作品 + 用户发布作品
• 排序：最新 / 最热
• 标题关键词搜索
• 卡片展示封面、作者、点赞/收藏/评论数

作品详情

• 伞面造型展示、标签印章、作品描述卷轴
• 赏（点赞）、藏（收藏）、评（评论）互动
• 评论列表与留言输入（需登录）

发布作品（gallery-create.html）

• 填写标题、描述、标签
• 上传封面图片（Base64 本地存储）
• 需登录后发布，作品写入 localStorage

7. 用户系统（login.html + profile.html）

登录 / 注册

• 同一页面切换登录与注册模式
• 表单校验：用户名 3–20 字符，密码 6–20 字符
• 模拟登录（任意合法账号密码均可），Token 存本地
• 支持登录后重定向（?redirect= 参数）

个人中心

• 头像、昵称展示与编辑
• 数据统计：作品数、获赞数、收藏数
• 我的作品：查看、删除已发布作品
• 我的收藏：查看已收藏作品

8. 公共组件（js/common.js + css/common.css）

• 统一 导航栏：6 个主模块入口 + 登录态 / 用户下拉菜单
• 统一 页脚
• 滚动时导航栏样式切换
• Toast 提示、时间格式化等工具函数
• 非遗主题 Design Tokens（赭石、朱砂、宣纸、墨色等）

---

项目目录结构

oil-paper-umbrella/
├── index.html              # 首页 — 历史时间轴与画卷幻灯
├── craft.html              # 工艺解读 — 五大工序详解与视频
├── model3d.html            # 3D 交互 — Three.js 油纸伞换装
├── diy.html                # DIY 工坊 — Fabric.js 伞面绘画
├── quiz.html               # 知识回顾 — 题库分类列表
├── quiz-detail.html        # 答题页 — 单选题与结果
├── gallery.html            # 虚拟展厅 — 作品列表
├── gallery-detail.html     # 作品详情 — 点赞/收藏/评论
├── gallery-create.html     # 发布作品 — 上传与表单
├── login.html              # 登录 / 注册
├── profile.html            # 个人中心
│
├── css/
│   └── common.css          # 全局样式、导航栏、按钮、Design Tokens
│
├── js/
│   ├── common.js           # 导航栏、Footer、页面初始化
│   └── mock-data.js        # Mock 数据、Storage、UserAuth、WorkState、QuizRecord
│
├── assets/
│   ├── imgs/               # 图片资源
│   │   ├── 春秋末期.png … 近现代.png    # 首页历史背景图
│   │   ├── login-bg.jpg               # 登录页背景
│   │   ├── 梅花.png / 兰花.png / 牡丹.png / 竹子.png  # DIY 纹样素材
│   │   └── …
│   ├── mp4/                # 工艺演示视频
│       ├── 选竹.mp4
│       ├── 制骨.mp4
│       ├── 裱纸.mp4
│       ├── 绘花.mp4
│       └── 上油.mp4
│
├── 演示材料/
│   └── 演示视频.mp4        # 项目整体演示录屏
│
└── 项目说明.md             # 本文件

---

本地数据说明

所有用户相关数据通过 localStorage 存储，键名前缀为 umbrella_：

键名	说明
umbrella_token	登录 Token
umbrella_userInfo	用户信息（昵称、头像等）
umbrella_likedWorks	已点赞作品 ID 列表
umbrella_favedWorks	已收藏作品 ID 列表
umbrella_myWorks	用户发布的作品列表
umbrella_quizRecords	答题记录（最多 20 条）

核心业务逻辑集中在 js/mock-data.js：

• Storage — 本地存储封装
• UserAuth — 登录态管理
• WorkState — 作品点赞/收藏/发布
• QuizRecord — 答题记录

---

运行方式

本项目为静态站点，无需构建步骤。

方式一：直接打开

用浏览器打开 index.html 即可（部分功能在 file:// 协议下可能受限，推荐方式二）。

方式二：本地 HTTP 服务（推荐）

# 进入项目目录
cd oil-paper-umbrella

# Python 3
python3 -m http.server 8080

# 或 Node.js（需安装 npx）
npx serve .

浏览器访问 http://localhost:8080。

---

页面导航关系

index.html（首页）
  ├── craft.html（工艺解读）
  ├── model3d.html（3D 交互）
  ├── diy.html（DIY 工坊）
  ├── quiz.html（知识回顾）
  │     └── quiz-detail.html（答题）
  ├── gallery.html（虚拟展厅）
  │     ├── gallery-detail.html（作品详情）
  │     └── gallery-create.html（发布作品）
  ├── login.html（登录/注册）
  └── profile.html（个人中心）

---

外部依赖（CDN）

页面	依赖
model3d.html	https://unpkg.com/three@0.157.0/build/three.min.js
diy.html	https://unpkg.com/fabric@5.3.0/dist/fabric.min.js

3D 交互与 DIY 工坊需联网加载 CDN 资源；虚拟展厅部分封面使用 Unsplash 外链图片。

---

注意事项

1. 无真实后端：登录、注册、发布、评论均为前端模拟，刷新或清除浏览器数据后部分信息会丢失（除已写入 localStorage 的内容）。
2. 图片体积较大：assets/imgs/ 中历史背景图为高清 PNG，首次加载可能较慢。
3. 浏览器兼容：建议使用 Chrome、Edge、Safari 等现代浏览器；3D 页面需 WebGL 支持。
4. 演示材料：演示材料/演示视频.mp4 为项目功能演示录屏，可用于答辩或展示。

---

版权说明

© 2024 非遗·油纸伞 — 传承千年工艺 · 守望文化之美

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-oil-paper-umbrella