# 我的任务（前端）

**Repository Path**: sglforever/my-task---front-end

## Basic Information

- **Project Name**: 我的任务（前端）
- **Description**: 这是我的任务的前端仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-04
- **Last Updated**: 2026-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 任务清单 — 前端

基于 Vue 3 + Vite 构建，提供任务管理、笔记记录、定时提醒、通知中心、用户管理等功能。

## 技术栈

- **Vue 3** — 组合式 API（`<script setup>`）
- **Vite** — 构建工具
- **Vue Router 4** — 路由 + 导航守卫
- **Pinia** — 状态管理
- **Axios** — HTTP 请求（拦截器 + Token 自动注入）
- **Teleport** — 抽屉/弹框/通知面板渲染到 body

## 页面路由

| 路径 | 页面 | 权限 |
|------|------|------|
| `/login` | 登录 | 仅未登录 |
| `/register` | 注册 | 仅未登录 |
| `/` | 主页（任务+笔记+提醒） | 需登录 |
| `/admin` | 管理后台 | ADMIN 角色 |
| `/profile` | 个人信息 | 需登录 |
| `/reminders` | 提醒列表 | 需登录 |

## 项目结构

```
src/
├── api/                    # API 模块
│   ├── index.js            # Axios 实例、拦截器
│   ├── task.js             # 任务 CRUD
│   ├── note.js             # 笔记 CRUD
│   ├── reminder.js         # 提醒 CRUD
│   ├── message.js           # 消息查询 + 未读数 + 标记已读
│   ├── user.js             # 用户认证/资料
│   └── admin.js            # 管理员接口
├── components/
│   ├── TaskForm.vue        # 任务输入框 + 优先级选择
│   ├── TaskList.vue        # 任务列表 + 筛选
│   ├── TaskItem.vue        # 单条任务（完成/编辑/删除）
│   ├── NoteForm.vue        # 笔记输入框 + 标签
│   ├── NoteList.vue        # 笔记列表 + 分页
│   ├── NoteItem.vue        # 单条笔记（编辑/删除）
│   ├── Pagination.vue      # 通用分页控件
│   ├── AvatarUpload.vue    # 头像上传
│   └── ReminderBell.vue    # 通知铃铛 + 下拉面板（badge 轮询，无弹框）
├── stores/
│   └── user.js             # Pinia 用户状态（token/登录/角色）
├── views/
│   ├── LoginView.vue       # 登录页
│   ├── RegisterView.vue    # 注册页
│   ├── TaskView.vue        # 主页：双列卡片 + 提醒抽屉 + 悬浮按钮
│   ├── AdminView.vue       # 管理后台
│   ├── ProfileView.vue     # 个人信息/改密码
│   └── RemindersView.vue   # 提醒独立管理页
├── router/index.js         # 路由 + 导航守卫
├── App.vue
├── main.js
└── style.css               # 全局设计 Token
```

## 核心交互

### 提醒系统
- 右下角悬浮 `⏰ 提醒` 按钮 → 右侧抽屉
- 创建提醒：标题 + 补充说明 + 时间 + 邮件通知
- 勾选邮件 → 显示邮箱输入框（自动填入用户资料邮箱）
- 列表分"待提醒"/"已完成"两个 Tab，各自独立分页
- 可编辑提醒内容/时间/邮件/邮箱
- 状态由后端 `status` 字段驱动（并非时差计算）

### 通知中心
- 顶栏铃铛 `🔔` + 红色 badge（每 30 秒轮询未读数）
- 点击展开下拉面板，显示最近消息
- 消息带类型标签（提醒/系统）和未读/已读状态
- 点击消息标记已读，badge 实时减 1

### 任务 + 笔记
- 主页双列卡片布局，各自带标题
- 任务：输入框 + 优先级 + 状态筛选（全部/待办/已完成）
- 笔记：输入框 + 标签 + 分页浏览

### 用户
- 头像上传（JPG/PNG/GIF/WebP）
- 修改密码、邮箱、性别、简介

## 快速启动

```bash
cd front
npm install        # 安装依赖
npm run dev        # 启动开发服务器 → http://localhost:5173
npm run build      # 生产构建 → dist/
npm run preview    # 预览生产构建
```

Vite 自动将 `/api` 请求代理到 `http://localhost:9099`。