智慧矿山联合实验室平台 - 成果大厅

基于Vue 3 + Element Plus + Vue Router的前端项目，用于展示和对接矿山技术创新成果。

🌐 在线演示

启动开发服务器后访问：http://localhost:5175（端口可能自动调整）

🚀 技术栈

• 前端框架: Vue 3 (Composition API + <script setup>)
• UI组件库: Element Plus
• 路由管理: Vue Router
• 构建工具: Vite
• 开发语言: JavaScript

✨ 功能特性

成果大厅页面

• ✅ 智能搜索：支持关键词搜索成果名称，搜索区域占页面约1/5高度
• ✅ 分类筛选：技术领域、成熟度、拟转化方式、所在地区，左侧属性列，右侧选项按钮行
• ✅ 分页展示：响应式卡片布局，支持分页浏览
• ✅ 三层卡片设计：标题区（成果名称+浏览量）、详情信息区（三列网格展示成果编号、应用方向、拟转化方式、成熟度、所在地区、成果持有人）、交互区（右侧「我要对接」按钮）
• ✅ 完整筛选：支持搜索、技术领域、成熟度、转化方式、地区筛选，包含「全部」选项

成果详情页面

• ✅ 完整展示：技术参数、经济效益、应用领域等详细信息
• ✅ 附件下载：支持技术文档、用户手册等资料下载
• ✅ 相关推荐：智能推荐同类技术成果

对接服务功能

• ✅ 智能客服：机器人引导式提问，模板化回答
• ✅ 人工客服：支持请求人工客服介入
• ✅ 收藏功能：支持成果收藏管理

导航与布局

• ✅ 响应式设计：适配桌面端和移动端
• ✅ 顶部导航：7个主要功能模块导航
• ✅ 现代化UI：基于Element Plus的优雅界面设计

📁 项目结构

chengguo-web/
├── src/
│   ├── assets/         # 静态资源（图片等）
│   ├── views/          # 页面组件
│   │   ├── HomePage.vue           # 首页
│   │   ├── AchievementCenter.vue  # 成果大厅（核心页面）
│   │   └── AchievementDetail.vue  # 成果详情
│   ├── router/         # 路由配置
│   └── main.js         # 应用入口
├── public/             # 静态资源
├── index.html          # HTML模板
├── vite.config.js      # Vite配置
└── package.json        # 项目依赖

🛠️ 安装与运行

环境要求

• Node.js 16+
• npm 8+

开发环境

1. 克隆项目

git clone -b web_chengguo git@github.com:Survivor0102/web.git
cd web
git checkout web_chengguo

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

访问 http://localhost:5173

生产构建

npm run build

构建产物位于 dist/ 目录

🚀 快速开始

1. 访问主页，查看平台简介
2. 点击"成果大厅"进入成果展示页面
3. 使用筛选功能查找感兴趣的技术成果
4. 点击"查看详情"了解成果详细信息
5. 使用"我要对接"功能联系技术方

📝 设计规范

页面架构

• 主页: 平台介绍和功能导航
• 成果大厅: 成果列表、搜索筛选、分页展示
• 成果详情: 详细信息展示、附件下载、对接服务

筛选条件

• 技术领域: 采矿技术、安全技术、自动化技术、环保技术、能源技术、数字化技术
• 成熟度: 实验室阶段、小试阶段、中试示范、产业化
• 转化方式: 技术转让、技术许可、合作开发、技术入股、技术服务
• 所在地区: 华北地区、华东地区、华南地区、华中地区、东北地区、西北地区、西南地区

对接流程

1. 用户选择成果 → 2. 点击"我要对接" → 3. 智能客服引导 → 4. 选择问题类型 → 5. 获取模板回答或转人工

🔧 配置说明

环境变量

项目支持以下环境变量：

• VITE_API_BASE_URL: API基础地址（开发中）
• VITE_APP_TITLE: 应用标题

路由配置

// 主要路由
{
  path: '/',                    // 主页
  path: '/achievement-center',  // 成果大厅
  path: '/achievement-detail/:id' // 成果详情
}

📱 响应式设计

• 桌面端 (≥1200px): 成果卡片宽度自适应，筛选器横向排列，左侧属性列，右侧选项按钮行
• 平板端 (768px-1199px): 筛选器调整为纵向排列，成果卡片保持单列布局
• 移动端 (≤767px): 筛选器堆叠排列，成果卡片内信息区调整为单列布局，交互按钮移至卡片底部

🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目遵循 MIT 许可证 - 查看 LICENSE 文件了解详情

📞 联系支持

如有问题或建议，请通过GitHub Issues提交。

---

项目状态: 🟢 开发中
最后更新: 2026年4月9日
版本: 1.0.1