# 4C-web

**Repository Path**: jieyujun/4-c-web

## Basic Information

- **Project Name**: 4C-web
- **Description**: 25届全国大学生计算机设计大赛——数据可视化赛道：千年观天-基于Three .js的天文三维可视化平台。
——已晋级
——此仓库为项目作品之一：“关于中国古代天文成就数量对比的数据大屏web项目”
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-04-07
- **Last Updated**: 2025-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 4C-web

### 4C-web介绍

中国古代文化数字展示平台，采用现代Web技术实现多维度可视化呈现。项目包含：

- 朝代专题模块（先秦/秦汉/魏晋南北朝/唐宋/元明清）
- 天文学可视化（星图/历法/天文仪器三维展示）
- 文学发展时间轴（带交互式大事记年表）
- 技术发展雷达图（农业/冶金/纺织等领域对比）

### 软件架构
![alt text](/public/image/jiegou2.png)
### 安装教程

```
bash# 克隆仓库
git clone https://gitee.com/your-repo/4C-web.git

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build
```

### 使用说明

1. 启动服务后访问 `localhost:3000`

2. 主展厅选择朝代：

   ![alt text](/public/image/jiegou1.png)

3. 特色功能入口：

   - `/spaceHistoryLine` 时空走廊
   - `/dataScreen` 数据全景
   - `/details` 专题详情

### 参与贡献

1. Fork 本仓库

2. 新建特性分支（Feat_xxx/Fix_xxx）

3. 提交代码前执行：

   ```bash
   npm run lint # 代码规范检查
   npm test # 基础功能测试
   ```

4. 发起 Pull Request

### 特技

1. **3D时空走廊** - 基于[Three.js粒子系统](vscode-webview://0uh4p6dkrqdmaqi2e6bbaqpps4npv1v19qbs0g076imq09ph683e/src/view/spaceHistoryLine/script.js#L0-L710)实现的星轨效果
2. **动态图表** - 使用[ECharts Liquidfill](vscode-webview://0uh4p6dkrqdmaqi2e6bbaqpps4npv1v19qbs0g076imq09ph683e/src/view/dataScreen/qin-han/css/index.css#L240-L372)实现流体效果
3. **响应式布局** - 适配从移动端到8K屏幕的[自适应方案](vscode-webview://0uh4p6dkrqdmaqi2e6bbaqpps4npv1v19qbs0g076imq09ph683e/src/view/transitionPage/jin-nanbei/css/3.css#L205-L314)
4. **性能优化** - 采用按需加载策略，动态加载[朝代模块JS](vscode-webview://0uh4p6dkrqdmaqi2e6bbaqpps4npv1v19qbs0g076imq09ph683e/src/js/xian-qin/main.js)
5. **交互动效** - 使用GSAP实现[导航按钮动画](vscode-webview://0uh4p6dkrqdmaqi2e6bbaqpps4npv1v19qbs0g076imq09ph683e/src/view/museum/jin_nanbei.html#L248-L327)
6. **主题系统** - 各朝代专属配色方案（参见[先秦主题](vscode-webview://0uh4p6dkrqdmaqi2e6bbaqpps4npv1v19qbs0g076imq09ph683e/src/view/museum/xian_qin.html#L162-L247)与[元明清主题](vscode-webview://0uh4p6dkrqdmaqi2e6bbaqpps4npv1v19qbs0g076imq09ph683e/src/view/museum/yuan_ming_qing.html#L166-L251)）