# vite-ui

**Repository Path**: zch08029/vite-ui

## Basic Information

- **Project Name**: vite-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-01
- **Last Updated**: 2025-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 跨平台TodoList应用

基于Vue3 + Element Plus + Vant的现代化跨端TodoList应用，支持PC端和移动端自动适配。

## 🚀 项目特色

- **🎯 跨平台适配**: 自动检测设备类型，PC端使用Element Plus，移动端使用Vant
- **📱 响应式设计**: 完美适配各种屏幕尺寸
- **🎨 扁平化设计**: 现代化UI设计语言
- **⚡ 高性能**: 基于Vue3 + Vite构建
- **🔧 TypeScript**: 完整的类型支持
- **📦 组件化**: 高度模块化的组件设计

## 🛠️ 技术栈

- **前端框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **PC端UI**: Element Plus
- **移动端UI**: Vant
- **状态管理**: Pinia
- **路由管理**: Vue Router
- **代码规范**: ESLint + Prettier

## 📋 功能特性

### TodoList功能

- ✅ 添加、编辑、删除任务
- ✅ 任务状态切换（完成/未完成）
- ✅ 任务优先级设置
- ✅ 任务分类管理
- ✅ 任务搜索和筛选
- ✅ 任务截止日期设置
- ✅ 数据本地存储

### 课程成绩管理

- ✅ 学生成绩列表展示
- ✅ 成绩搜索和筛选
- ✅ 学生详情查看
- ✅ 成绩统计分析
- ✅ 移动端优化界面

### 个人成绩管理

- ✅ 个人成绩概览
- ✅ 学期成绩管理
- ✅ 成绩趋势分析
- ✅ 课程详情查看

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 代码检查

```bash
npm run lint
```

### 代码格式化

```bash
npm run format
```

## 📱 设备适配

项目会自动检测用户设备类型：

- **PC端 (>1024px)**: 使用Element Plus组件库，提供丰富的桌面端交互体验
- **平板端 (768px-1024px)**: 根据屏幕尺寸自动选择合适的UI组件
- **移动端 (<768px)**: 使用Vant组件库，提供原生移动端体验

## 🎨 设计理念

- **扁平化设计**: 采用现代扁平化设计语言，简洁美观
- **一致性**: 保持PC端和移动端的视觉一致性
- **易用性**: 优化用户交互体验，提供直观的操作方式
- **性能优化**: 组件按需加载，优化应用性能

## 📂 项目结构

```
src/
├── components/          # 组件目录
│   ├── desktop/        # PC端组件
│   ├── mobile/         # 移动端组件
│   └── icons/          # 图标组件
├── composables/        # 组合式函数
├── stores/             # 状态管理
├── types/              # 类型定义
├── utils/              # 工具函数
├── views/              # 页面组件
└── router/             # 路由配置
```

## 🔧 开发工具推荐

- **IDE**: [VSCode](https://code.visualstudio.com/)
- **插件**: [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- **调试**: Vue DevTools

## 📄 许可证

MIT License