zhongyidianandClaude
6b84a5ed98
- 创建 router.js 统一管理路由配置 - App.jsx 重构为使用 RouterProvider - 创建 pages 目录结构： - Layout.jsx: 主布局组件，包含 header 和 footer - Home.jsx: 首页实验列表（原 App.jsx 内容） - ExperimentDetail.jsx: 实验详情页，展示完整实验信息 - NotFound.jsx: 404 页面 - 实现页面导航功能： - 点击实验项目可跳转到详情页 - 详情页支持返回列表 - 完善的错误处理和 404 页面 - 实验详情页功能： - 展示实验目标、步骤、注意事项 - 实验信息卡片（时长、难度、类型） - 交互式按钮（开始实验、下载资料） - 所有代码通过 ESLint 检查 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
传感器及检测技术 - 实验课件系统
这是一个基于 React 的传感器及检测技术实验课件交互式平台。
技术栈
- 框架: React 19 + Vite 7
- 样式: Tailwind CSS 4
- 路由: React Router Dom 7
- 拖拽: @dnd-kit
- HTTP 客户端: Axios
- 图标: Lucide React
- 包管理器: pnpm
开发环境要求
- Node.js 18+
- pnpm 10+
安装依赖
pnpm install
开发命令
# 启动开发服务器
pnpm dev
# 构建生产版本
pnpm build
# 预览生产构建
pnpm preview
# 代码检查
pnpm lint
项目特性
- 支持拖拽交互的实验课件展示
- 响应式设计，适配多种设备
- 模块化组件架构
- 现代化的 UI 设计
项目结构
sensor-lab/
├── src/
│ ├── components/ # 可复用组件
│ ├── assets/ # 静态资源
│ ├── App.jsx # 主应用组件
│ └── main.jsx # 应用入口
├── public/ # 公共资源
└── index.html # HTML 模板
开发说明
本项目使用 pnpm 作为包管理工具，请勿使用 npm 或 yarn 安装依赖，以保持依赖的一致性。