# ai-test

**Repository Path**: leerolee/ai-test

## Basic Information

- **Project Name**: ai-test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-06
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 待办事项应用

一个基于 Vue 3 和 Vite 构建的现代化待办事项管理应用，支持拖拽排序、数据持久化、编辑功能等高级特性。

## 📸 项目截图

![Vue 3 Todo App](./src/assets/home.png)

## ✨ 功能特性

- ➕ **添加待办事项** - 快速添加新的任务
- ✏️ **编辑功能** - 双击任务即可编辑内容
- ✅ **完成状态切换** - 一键标记任务完成/未完成
- 🗑️ **删除任务** - 快速删除不需要的任务
- 🎯 **任务筛选** - 支持全部/进行中/已完成三种视图
- 🧹 **一键清除** - 快速清除所有已完成任务
- 🔄 **拖拽排序** - 支持鼠标拖拽调整任务顺序
- 💾 **数据持久化** - 自动保存到浏览器本地存储
- 📊 **任务统计** - 实时显示未完成任务数量
- 🎨 **响应式设计** - 完美适配各种屏幕尺寸

## 🚀 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **vuedraggable** - Vue拖拽排序组件
- **localStorage** - 浏览器本地存储
- **Composition API** - Vue 3 组合式API

## 📦 安装与运行

### 环境要求

- Node.js (推荐 16.x 或更高版本)
- pnpm (推荐) 或 npm/yarn

### 快速开始

1. **克隆项目**
   ```bash
   git clone [项目地址]
   cd vue-todo-app
   ```

2. **安装依赖**
   ```bash
   pnpm install
   # 或者
   npm install
   ```

3. **启动开发服务器**
   ```bash
   pnpm dev
   # 或者
   npm run dev
   ```

4. **构建生产版本**
   ```bash
   pnpm build
   # 或者
   npm run build
   ```

## 🎯 使用方法

### 基本操作

1. **添加任务**：在输入框中输入任务内容，按回车键添加
2. **完成任务**：点击任务前的复选框标记完成状态
3. **编辑任务**：双击任务文本进入编辑模式，按回车保存修改
4. **删除任务**：点击任务右侧的删除按钮
5. **筛选任务**：点击底部的筛选按钮切换视图

### 高级功能

- **拖拽排序**：按住任务左侧的拖拽手柄，拖动到目标位置
- **批量操作**：使用底部的"清除已完成"按钮一键清理
- **数据同步**：所有操作自动保存，刷新页面不会丢失数据

## 📁 项目结构

```
vue-todo-app/
├── public/              # 静态资源
├── src/
│   ├── components/      # Vue组件
│   │   ├── TodoHeader.vue   # 头部输入组件
│   │   ├── TodoList.vue     # 任务列表组件
│   │   ├── TodoItem.vue     # 单个任务组件
│   │   └── TodoFooter.vue   # 底部筛选组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
│   └── style.css       # 全局样式
├── package.json        # 项目配置
└── vite.config.js      # Vite配置
```

## 🎨 样式说明

项目采用现代化的CSS设计：
- **响应式布局**：适配手机、平板、桌面设备
- **交互动画**：流畅的过渡效果
- **主题色彩**：清爽的蓝色主色调
- **组件化样式**：每个组件独立维护样式

## 🛠️ 开发说明

### 组件职责

- **TodoHeader**：处理新任务输入
- **TodoList**：管理任务列表展示和拖拽排序
- **TodoItem**：单个任务的展示、编辑、删除
- **TodoFooter**：任务统计和视图筛选

### 状态管理

使用 Vue 3 的 `reactive` 和 `computed` 实现响应式状态管理：
- `todos`：任务列表数据
- `filter`：当前筛选条件
- `editingTodo`：正在编辑的任务

## 📱 浏览器兼容性

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目！

## 📄 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 🙋‍♂️ 联系方式

如有问题或建议，欢迎通过以下方式联系：
- 提交 Issue
- 发送邮件

---

**享受高效的任务管理体验！** 🚀