非遗文化传承平台

让千年技艺重焕新生，用数字科技守护文化根脉

一个基于 React 18 + Ant Design 5 的中国非物质文化遗产数字化传承与推广平台。

📋 项目概述

项目定位： 中国非物质文化遗产数字化传承与推广平台，面向文化爱好者、研究者、教育工作者及公众，打造集展示、学习、互动、传播于一体的综合性文化平台。

核心价值：

• 🏛️ 传承千年 - 保护和传承中华民族优秀传统文化
• 🎨 匠心独运 - 展现非遗项目的精湛技艺和艺术价值
• 🌱 活态传承 - 让非遗文化在当代社会焕发新生命力

✨ 功能特性

核心功能模块

• 非遗项目展示

  • 分类浏览（传统技艺、传统美术、传统音乐、传统戏剧等）
  • 详细介绍（历史渊源、技艺特点、文化意义）
  • 多媒体展示（图片、视频、虚拟展馆）

• 传承人档案

  • 代表性传承人资料库
  • 个人简介、代表作品、技艺展示
  • 荣誉成就、学习路径

• 互动体验

  • 在线课程学习
  • 虚拟展馆（360° 全景）
  • 线下工坊预约
  • 非遗时间轴

• 活动资讯

  • 展览活动信息
  • 行业动态新闻
  • 政策法规解读

🎨 设计系统

视觉主题

基于中国传统色彩体系设计，采用朱砂红、金沙黄、墨绿、青黛蓝等传统色彩：

• 主色调

  • 朱砂红 #C8363D - 象征传统文化的热情与活力
  • 金沙黄 #D4A574 - 象征精湛与珍贵
  • 墨绿 #2A5E4D - 象征沉稳与生命力
  • 青黛蓝 #4A5F7F - 象征深邃与智慧

• 背景色系

  • 宣纸色 #FAFAF8 - 基础背景
  • 纯白 #FFFFFF - 容器背景
  • 浅米黄 #F5F0E8 - 布局背景

• 字体系统

  • 标题：思源宋体 / Noto Serif SC（衬线）
  • 正文：思源黑体 / Noto Sans SC（无衬线）

组件定制

完整覆盖 Ant Design 全组件族的主题定制，包括：

• 通用组件：Button、Icon、Typography
• 布局组件：Layout、Grid、Space
• 导航组件：Menu、Breadcrumb、Tabs、Pagination
• 数据录入：Input、Select、Form、Upload
• 数据展示：Card、Table、Carousel、Tag
• 反馈组件：Modal、Message、Notification

🚀 技术栈

• 前端框架： React 18.3
• UI 组件库： Ant Design 5.15
• 路由： React Router 6.22
• 状态管理： Zustand 4.5
• 构建工具： Vite 5.1
• 语言： TypeScript 5.3
• 动画： Framer Motion 11.0

📦 项目结构

heritage-ui/
├── public/                 # 静态资源
├── src/
│   ├── assets/            # 图片、字体等资源
│   ├── components/        # 通用业务组件
│   │   ├── HeritageCard/  # 非遗项目卡片
│   │   └── InheritorCard/ # 传承人卡片
│   ├── layout/            # 布局组件
│   │   ├── Header.tsx     # 头部导航
│   │   ├── Footer.tsx     # 页脚
│   │   └── MainLayout.tsx # 主布局
│   ├── pages/             # 页面组件
│   │   ├── Home/          # 首页
│   │   ├── Heritage/      # 非遗项目
│   │   ├── Inheritors/    # 传承人
│   │   └── About/         # 关于我们
│   ├── router/            # 路由配置
│   ├── services/          # API 服务层
│   │   ├── api.ts         # API 接口
│   │   └── mockData.ts    # Mock 数据
│   ├── styles/            # 全局样式
│   │   └── global.css     # 全局 CSS
│   ├── theme/             # 主题配置
│   │   ├── tokens.ts      # Token 配置
│   │   ├── components.ts  # 组件样式
│   │   └── index.ts       # 主题入口
│   ├── types/             # TypeScript 类型定义
│   ├── utils/             # 工具函数
│   ├── App.tsx            # 根组件
│   └── main.tsx           # 入口文件
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

🛠️ 开始使用

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

开发模式

npm run dev

访问 http://localhost:3001

生产构建

npm run build

预览构建结果

npm run preview

📊 数据管理

当前版本使用 Mock 数据进行开发演示，数据文件位于 src/services/mockData.ts。

接入真实后端

修改 src/services/api.ts 中的接口实现，替换为真实的 API 调用：

// 示例：替换 Mock 数据为真实 API
export const getHeritageList = async (params) => {
  const response = await fetch('/api/heritage/list', {
    method: 'POST',
    body: JSON.stringify(params)
  })
  return response.json()
}

🎯 开发规范

代码风格

• 组件命名：PascalCase
• 文件命名：PascalCase（组件）、camelCase（工具函数）
• CSS 类名：kebab-case
• 类型定义：统一在 src/types/index.ts 中管理

提交规范

feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
perf: 性能优化
test: 测试相关
chore: 构建/工具链相关

🔮 后续优化方向

• 完善非遗项目详情页
• 完善传承人详情页
• 实现在线学习模块
• 实现虚拟展馆（WebGL / Three.js）
• 添加用户系统（登录、收藏、评论）
• 实现搜索功能（全文检索）
• 添加数据可视化（图表、地图）
• 移动端适配优化
• PWA 支持
• 性能优化（懒加载、代码分割）
• SEO 优化（SSR / SSG）
• 国际化支持（i18n）

📄 许可证

MIT License

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

---

联系我们

• 邮箱：heritage@example.com
• 电话：400-123-4567
• 地址：北京市朝阳区文化创意产业园

让我们一起守护中华文化根脉！