# 绿水青山，零碳行者

**Repository Path**: yibeigen/green

## Basic Information

- **Project Name**: 绿水青山，零碳行者
- **Description**: 本项目是一个 生态低碳互动平台 ，包含五大核心模块： 首页 展示动态画卷背景与导航入口； 闯关主页面 提供五大生态篇章的答题闯关玩法； AI互动专区 支持智能环保问答； 环保案例库 展示生态保护案例； 数字成就页 呈现用户解锁的成就画卷； 用户中心 管理个人信息与打卡记录。通过游戏化学习，引导用户践行低碳生活
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 绿水青山·零碳行者

环保游戏化互动网页 -  Vue3 + Pinia + Element Plus

## 项目概述

**项目名称**：绿水青山·零碳行者  
**作品定位**：环保主题游戏化互动网页  
**技术栈**：Vue3 + Vue Router + Pinia + Element Plus + Less  
**开发周期**：2026.3.19 - 2026.3.28  
**团队成员**：小雪、小艺、小彭

## 核心功能

### 1. 游戏化闯关系统
- **五大生态篇章**：森林、湿地、江河、城市、乡村
- **三阶关卡**：科普站 → 知识闯关 → 低碳行动营
- **能量体系**：答题正确、完成行动可获得生态能量
- **成就徽章**：能量累计解锁成就徽章，点亮数字画卷

### 2. AI 智能互动
- **AI 环保智囊团**：个性化低碳生活解决方案
- **AI 趣味科普官**：通俗化、趣味化拆解环保知识
- **AI 低碳打卡助手**：核算环保价值，生成鼓励话术

### 3. 环保案例科普
- **生态保护案例**：真实生态保护故事
- **校园低碳案例**：大学生环保实践
- **全国典型案例**：各地环保先进经验
- **环保知识点**：双碳目标、生物多样性等

### 4. 数字画卷成就
- **横向长卷**：五大生态区域对应五大篇章
- **解锁动画**：完成篇章解锁对应画卷场景
- **成就统计**：能量、徽章、闯关进度一目了然

## 技术架构

```
src/
├── views/              # 页面视图
│   ├── home/          # 首页（小雪）
│   ├── game/          # 闯关主页面（小雪）
│   ├── achievement/   # 成就画卷页（小艺）
│   ├── ai/            # AI 互动页（小艺）
│   ├── library/       # 案例库页（小彭）
│   └── user/          # 个人中心页（小彭）
├── components/         # 组件
│   ├── game/          # 游戏关卡组件
│   └── modal/         # 弹窗组件
├── stores/            # Pinia 状态管理
│   ├── gameStore.js   # 游戏状态（小雪）
│   ├── userStore.js   # 用户状态（小彭）
│   └── aiStore.js     # AI 状态（小艺）
├── data/              # 静态数据
│   ├── questions.js   # 题目数据（小雪）
│   └── cases.js       # 案例数据（小彭）
├── utils/             # 工具函数
│   ├── storage.js     # 本地存储（小彭）
│   └── aiService.js   # AI 服务（小艺）
├── styles/            # 全局样式
│   └── global.less    # Less 变量和通用样式（小雪）
├── router/            # 路由配置
├── App.vue            # 根组件
└── main.js            # 入口文件
```

## 开发规范

### 命名规范
- **Vue 组件**：大驼峰，如 `ChapterCard.vue`
- **JS 文件**：小驼峰，如 `gameStore.js`
- **CSS 类名**：BEM 规范或短横线连接，如 `.chapter-card__title`

### 代码风格
- 使用 ES6+ 语法
- 组件使用 Composition API（`<script setup>`）
- 样式使用 Less 预处理器
- 遵循全局样式变量命名

### 提交规范
```
[模块] 动作：描述
```
示例：
- `[Game] Feat: 完成闯关主页面篇章导航逻辑`
- `[Common] Fix: 修复弹窗遮罩层无法关闭的问题`

### 本地存储规范
- 所有 Key 带 `zc_` 前缀（Zero Carbon）
- 统一使用 `src/utils/storage.js` 工具函数

## 安装与运行

### 1. 安装依赖
```bash
npm install
```

### 2. 启动开发服务器
```bash
npm run dev
```

### 3. 构建生产版本
```bash
npm run build
```

### 4. 预览生产构建
```bash
npm run preview
```

## 核心接口

### gameStore.js（小雪维护）
```javascript
// 状态
state: {
  energy: 0,                // 生态能量
  unlockedChapters: [],     // 已解锁篇章
  currentChapterProgress: {} // 篇章进度
}

// 动作
actions: {
  addEnergy(val),           // 增加能量
  unlockChapter(id),        // 解锁篇章
  updateChapterProgress()   // 更新进度
}
```

### userStore.js（小彭维护）
```javascript
// 状态
state: {
  userInfo: {},             // 用户信息
  checkInRecords: [],       // 打卡记录
  favorites: []             // 收藏夹
}

// 动作
actions: {
  updateUserInfo(info),     // 更新用户信息
  addCheckInRecord(record), // 添加打卡记录
  addFavorite(item)         // 添加收藏
}
```

### aiStore.js（小艺维护）
```javascript
// 动作
actions: {
  async askAi(type, question),  // AI 提问
  clearHistory(type)            // 清空历史
}
```

## 对接说明

### AI API 对接
在 `src/utils/aiService.js` 中配置 API Key：
```javascript
const API_CONFIG = {
  tongyi: {
    baseURL: 'https://dashscope.aliyuncs.com/api/v1',
    apiKey: 'YOUR_API_KEY',  // 替换为真实 API Key
    model: 'qwen-turbo'
  }
}
```

### 数据持久化
所有进度自动保存到 localStorage，Key 前缀为 `zc_`：
- `zc_game_progress`：游戏进度
- `zc_user_info`：用户信息
- `zc_checkin_records`：打卡记录
- `zc_favorites`：收藏夹

## 测试要点

### 功能测试
- [ ] 首页动态画卷背景动画流畅
- [ ] 闯关流程完整（科普→答题→行动）
- [ ] 弹窗正确触发与关闭
- [ ] 能量数值实时更新
- [ ] 篇章解锁状态同步
- [ ] 本地存储数据持久化

### 兼容性测试
- [ ] Chrome 浏览器
- [ ] Edge 浏览器
- [ ] Firefox 浏览器
- [ ] Safari 浏览器
- [ ] 分辨率适配（1920*1080、1366*768、1440*900）

## 项目亮点

1. **游戏化设计**：完整的闯关体系、即时反馈、成就激励
2. **AI 赋能**：轻量化 AI 大模型应用，个性化互动体验
3. **主题契合**：紧扣"绿水青山就是金山银山"理念
4. **视觉体验**：中国风美学 + 动态画卷 + 解锁动画
5. **纯前端实现**：无后端依赖，localStorage 数据持久化

## 赛事信息

**大赛主题**：绿水青山·数字画卷  
**参赛组别**：软件工程学院  
**展示时间**：6 分钟现场演示  
**评审标准**：技术实现、创意设计、主题契合度、用户体验

## 版权说明

© 2026 绿水青山·零碳行者 团队制作  
所有代码、设计、内容均为原创

---

**开发团队**：小雪、小艺、小彭  
**开发日期**：2026.3.19 - 2026.3.28