7abc7becee
- 添加TypeScript配置 - 添加Vite构建配置 - 添加项目依赖（React 18, Ant Design 5, React Router等） - 添加.gitignore配置
232 lines
6.0 KiB
Markdown
232 lines
6.0 KiB
Markdown
# 非遗文化传承平台
|
||
|
||
> 让千年技艺重焕新生，用数字科技守护文化根脉
|
||
|
||
一个基于 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
|
||
- 地址：北京市朝阳区文化创意产业园
|
||
|
||
让我们一起守护中华文化根脉！
|