# 非遗文化传承平台

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

一个基于 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

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3001

### 生产构建

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 📊 数据管理

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

### 接入真实后端

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

```typescript
// 示例：替换 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
- 地址：北京市朝阳区文化创意产业园

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