# teacher-demo

**Repository Path**: dujinyan/teacher-demo

## Basic Information

- **Project Name**: teacher-demo
- **Description**: 测试测试测试测试测试测试测试测试
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-26
- **Last Updated**: 2025-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 故障诊断考核系统 (Fault Diagnosis Assessment System)

基于 Vite + Vue 3 构建的汽车故障诊断考核系统教师端应用。

## 功能特性

- 🔐 **教师端登录** - 账号密码登录系统
- 🚗 **车辆可视化** - 交互式车辆图像展示
- 🔧 **故障训练** - 故障设置和管理功能
- 📊 **数据流监控** - 实时数据仪表盘显示
- 🎨 **现代化UI** - 基于 Tailwind CSS 的美观界面

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **路由管理**: Vue Router 4
- **样式框架**: Tailwind CSS
- **图标库**: Lucide Vue Next

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 页面结构

### 1. 登录页面 (`/login`)
- 教师端账号密码登录
- 记住密码功能
- 响应式设计

### 2. 主控制台 (`/dashboard`)
- 车辆3D可视化展示
- 交互式热点标记
- 图像轮播功能

### 3. 故障训练 (`/fault-training`)
- 故障列表管理
- 故障状态设置 (无/断路/短路/虚连)
- 批量操作功能

### 4. 数据流监控 (`/data-flow`)
- 实时数据仪表盘
- 12个监控点显示
- 动态数值更新

## 项目结构

```
src/
├── components/      # 公共组件
│   ├── Layout.vue   # 布局组件
│   ├── Navbar.vue   # 导航栏组件
│   └── Sidebar.vue  # 侧边栏组件
├── views/           # 页面组件
│   ├── Login.vue
│   ├── Dashboard.vue
│   ├── FaultTraining.vue
│   └── DataFlow.vue
├── App.vue          # 根组件
├── main.js          # 应用入口
└── style.css        # 全局样式
```

## 组件说明

### 公共组件
- **Layout.vue**: 统一的页面布局组件，包含导航栏和侧边栏
- **Navbar.vue**: 顶部导航栏，支持动态页面标题
- **Sidebar.vue**: 左侧导航菜单，自动高亮当前页面

## 开发说明

### CSS 警告说明
项目中的 Tailwind CSS 相关警告是正常现象，这些警告会在安装依赖并运行项目后自动解决。

### 自定义配置
- Tailwind 配置: `tailwind.config.js`
- Vite 配置: `vite.config.js`
- PostCSS 配置: `postcss.config.js`

## 浏览器支持

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 许可证

MIT License