# study-plan-ui

**Repository Path**: zhang_fei_123/study-plan-ui

## Basic Information

- **Project Name**: study-plan-ui
- **Description**: 学习任务打卡app
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-30
- **Last Updated**: 2026-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📚 学习任务打卡 App

<div align="center">


一款现代化的学习任务管理与打卡应用，帮助用户养成良好的学习习惯，提高学习效率。支持任务创建、完成打卡、历史记录查看和数据统计分析。

[![uni-app](https://img.shields.io/badge/uni--app-4.03-brightgreen)](https://uniapp.dcloud.io/)
[![Vue](https://img.shields.io/badge/Vue-3.x-brightgreen)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/badge/license-MIT-blue)](LICENSE)

</div>

---

## 📖 目录

- [项目简介](#项目简介)
- [页面预览](#页面预览)
- [核心功能](#核心功能)
- [技术栈](#技术栈)
- [项目结构](#项目结构)
- [快速开始](#快速开始)
- [功能说明](#功能说明)
- [主题系统](#主题系统)
- [API文档](#api文档)
- [开发规范](#开发规范)
- [贡献指南](#贡献指南)

---

## 🎯 项目简介

**学习任务打卡App** 是一款基于 uni-app 开发的跨平台学习管理应用，支持 H5、小程序、App 等多端运行。应用提供了完善的任务管理、历史记录、数据统计和个人中心功能，帮助用户建立良好的学习习惯，提高学习效率。

### ✨ 特色亮点

- 📝 **智能任务管理** - 支持学习任务和家务任务分类管理，自定义图标和分数
- 📊 **可视化统计** - 使用 qiun-data-charts 展示任务完成趋势和统计数据
- 🎨 **6种精美主题** - 支持实时切换，包含默认风格、柠檬绿、清新薄荷、梦幻紫、梦幻粉、暗夜黑
- 📅 **历史记录追踪** - 完整的任务完成历史，支持补卡和数据查询
- 🔐 **安全认证** - 使用 crypto-js 进行数据加密，支持用户登录注册
- 📱 **响应式设计** - 完美适配各种屏幕尺寸和设备
- 🎭 **现代化UI** - 采用渐变色、阴影、动画等现代设计元素

---

## 📱 页面预览

### 主要页面展示

<div align="center">

#### 登录注册页面
<img src="static/preview/20251129205550_102_9.png" width="300" alt="登录页面" />
<img src="static/preview/20251129205607_103_9.png" width="300" alt="注册页面" />

#### 任务管理
<img src="static/preview/20251129205621_104_9.png" width="300" alt="任务列表" />
<img src="static/preview/20251129205634_105_9.png" width="300" alt="任务创建" />

#### 历史记录
<img src="static/preview/20251129205642_106_9.png" width="300" alt="历史记录" />
<img src="static/preview/20251129205652_107_9.png" width="300" alt="历史详情" />

#### 数据统计
<img src="static/preview/20251129205703_108_9.png" width="300" alt="统计图表" />
<img src="static/preview/20251129205712_109_9.png" width="300" alt="统计概览" />

#### 个人中心与设置
<img src="static/preview/20251129205550_102_9.png" width="300" alt="个人中心" />
<img src="static/preview/20251129205607_103_9.png" width="300" alt="主题选择" />

</div>

### 应用特色

- **🎨 多主题支持**：6种精美主题随心切换
- **📝 智能任务管理**：学习任务和家务任务分类管理
- **📊 数据可视化**：图表展示任务完成趋势
- **📅 历史追踪**：完整的任务完成记录
- **🔐 安全可靠**：数据加密存储，隐私保护

---

## 🚀 核心功能

### 1️⃣ 任务管理
- ✅ **任务创建**：支持自定义任务名称、图标上传、分数设置、标签分类
- ✏️ **任务编辑**：随时修改任务信息，支持图标更换和属性调整
- 🗑️ **任务删除**：安全删除不需要的任务，带确认提示
- ✓ **任务完成**：一键标记任务完成状态，实时更新统计数据
- 🏷️ **智能分类**：学习任务、家务任务自动分类管理
- 🔍 **快速筛选**：按标签快速筛选任务，支持全部、学习、家务视图

### 2️⃣ 历史记录
- 📅 **灵活查询**：支持自定义日期范围查询历史记录
- 📊 **智能分组**：按日期自动分组展示，今天/昨天/其他日期
- 📌 **补卡功能**：漏打卡可以随时补上，保持记录完整性
- 🏆 **完成统计**：实时统计任务完成情况和得分
- 🔖 **详细信息**：展示任务序号、标签、分数、完成时间等

### 3️⃣ 数据统计
- 📈 **可视化图表**：使用柱状图展示近期完成量趋势
- 📊 **多维度统计**：按周/月/年/全部时间维度统计
- 🎯 **完成率分析**：学习任务、家务任务分别统计完成率
- 📉 **趋势分析**：历史数据趋势展示，帮助用户了解学习规律

### 4️⃣ 个人中心
- 👤 **个人资料**：头像上传、昵称设置、联系方式管理
- 🎨 **主题系统**：6种精美主题随心切换，支持暗色模式
- ⚙️ **系统设置**：个性化配置，用户偏好设置
- 🔐 **账户安全**：登录注册、密码修改、安全退出

### 5️⃣ 扩展功能
- 📝 **内容发布**：支持图文分享学习心得（规划中）
- 🎬 **快速建任务**：通过发布页面快速创建新任务
- ❓ **学习讨论**：学习问题讨论社区（规划中）
- 🔄 **数据同步**：支持多端数据同步和备份

---

## 🛠️ 技术栈

### 前端框架
- **uni-app** `v4.03+` - 跨平台应用开发框架
- **Vue 3** - 渐进式 JavaScript 框架，使用 Composition API
- **TypeScript** `v5.x` - JavaScript 的超集，提供类型安全

### UI组件库
- **uni-ui** - uni-app 官方UI组件库，提供丰富的基础组件
- **qiun-data-charts** - 高性能跨全端图表组件，用于数据可视化
- **自定义组件** - ThemeSelector、用户概览等业务组件

### 核心依赖
- **crypto-js** `v4.2.0` - JavaScript 加密库，用于密码加密和数据安全
- **Pinia** - Vue 3 状态管理，管理用户状态和主题
- **uni.request** - uni-app 内置HTTP请求，API调用封装

### 开发工具
- **HBuilderX** `v3.1.0+` - 官方IDE开发环境
- **SCSS** - CSS 预处理器，支持嵌套和变量
- **TypeScript** - 静态类型检查，提高代码质量

---

## 📁 项目结构

```
study-plan-ui/
├── components/              # 全局组件
│   ├── user-overview.vue   # 用户概览组件
│   └── ThemeSelector.vue   # 主题选择器组件
├── pages/                   # 页面文件
│   ├── index/              # 首页（任务列表）
│   │   ├── index.vue       # 首页主页面
│   │   └── form.vue        # 任务表单组件
│   ├── history/            # 历史记录页
│   │   └── history.vue     # 历史记录查询
│   ├── stats/              # 统计页
│   │   ├── index.vue       # 统计主页面
│   │   └── components/     # 统计组件
│   │       └── stats.vue   # 统计数据组件
│   ├── my/                 # 个人中心
│   │   ├── index.vue       # 个人中心主页
│   │   ├── profile-edit.vue # 个人资料编辑
│   │   ├── theme-selector.vue # 主题选择器
│   │   └── level-description.vue # 等级说明
│   ├── login/              # 登录相关
│   │   ├── index.vue       # 登录注册页
│   │   └── forget-password.vue # 忘记密码
│   └── addTarbar/          # 发布页面
│       ├── index.vue       # 发布入口
│       └── detail/         # 发布详情
│           ├── video-detail.vue      # 建任务
│           ├── release-detail.vue    # 发图文
│           └── qa-detail.vue         # 提问
├── services/               # API服务层
│   ├── task.ts            # 任务相关API
│   ├── user.ts            # 用户相关API
│   └── login.ts           # 登录认证API
├── stores/                 # 状态管理
│   ├── theme.ts           # 主题管理store
│   └── user.ts            # 用户状态store
├── types/                  # TypeScript类型定义
│   ├── business/          # 业务类型
│   │   ├── task.ts        # 任务相关类型
│   │   └── user.ts        # 用户相关类型
│   ├── common/            # 通用类型
│   │   └── enums.ts       # 枚举类型定义
│   └── index.ts           # 类型统一导出
├── utils/                  # 工具函数
│   ├── http.ts            # HTTP请求封装
│   ├── config.ts          # 配置文件
│   └── technology.ts      # 技术栈工具函数
├── static/                 # 静态资源
│   └── img/               # 图片资源
│       └── tabbar/        # 底部导航图标
├── uni_modules/            # uni-app插件
│   ├── qiun-data-charts/  # 图表组件
│   └── uni-ui/            # UI组件库
├── App.vue                 # 应用入口
├── main.js                 # 主入口文件
├── pages.json              # 页面路由配置
├── manifest.json           # 应用配置
└── uni.scss               # 全局样式变量
```

---

## 🏃 快速开始

### 环境要求

- **HBuilderX** 3.1.0+
- **Node.js** 14.0+
- **npm** 或 **yarn** 或 **pnpm**

### 安装步骤

#### 1. 克隆项目

```bash
git clone https://gitee.com/your-username/study-plan-ui.git
cd study-plan-ui
```

#### 2. 安装依赖

```bash
# 安装 qiun-data-charts（图表组件）
# 在 HBuilderX 中通过插件市场安装

# 安装 uni-ui（UI组件库）
# 在 HBuilderX 中通过插件市场安装

# 安装 crypto-js（加密库）
npm install crypto-js --save
```

#### 3. 配置后端接口

修改 `utils/config.ts` 文件：

```typescript
// 环境检测
const isDevelopment = (typeof __wxConfig !== 'undefined' && __wxConfig.envVersion === 'develop') ||
                     (typeof uni !== 'undefined' && uni.getSystemInfoSync().platform === 'devtools');

// 开发环境配置
export const baseURL = isDevelopment 
  ? 'http://127.0.0.1:9999'     // 开发环境
  : 'https://your-api.com';     // 生产环境

// API前缀配置
export const getTaskApiPrefix = () => `${baseURL}/api/task`;
export const getUserApiPrefix = () => `${baseURL}/api/user`;
export const getAuthApiPrefix = () => `${baseURL}/api/auth`;
```

#### 4. 运行项目

**H5端运行**
```bash
# 在 HBuilderX 中点击"运行 -> 运行到浏览器"
```

**小程序运行**
```bash
# 在 HBuilderX 中点击"运行 -> 运行到小程序模拟器"
```

**App运行**
```bash
# 在 HBuilderX 中点击"运行 -> 运行到手机或模拟器"
```

---

## 📖 功能说明

### 首页 - 任务管理中心

#### 用户概览区域
- **任务统计**: 显示总任务数、学习任务数、家务任务数
- **完成情况**: 实时显示已完成任务数和完成率
- **可视化展示**: 圆环图直观展示任务完成进度

#### 任务卡片展示
- **图标**: 显示任务自定义图标，支持发光效果和完成徽章
- **标题**: 任务名称，支持多行显示
- **标签**: 学习📚/家务🏠分类徽章，颜色区分
- **分数**: 任务完成可获得的分数（1-100分）
- **操作**: 完成、编辑、删除按钮，支持展开菜单

#### 任务管理流程
1. **创建任务**: 点击右下角➕按钮，填写任务信息并上传图标
2. **分类筛选**: 支持全部、学习、家务三种视图切换
3. **完成打卡**: 一键标记任务完成，实时更新统计
4. **编辑修改**: 随时修改任务属性，支持图标更换
5. **安全删除**: 带确认提示的安全删除功能

### 历史记录页

#### 日期筛选
- 默认查询近7天数据
- 支持自定义日期范围
- 点击"🔍 查询历史"按钮获取数据

#### 任务展示
- **按日期分组**: 今天/昨天/其他日期
- **任务状态**: 已完成/未完成标记
- **任务序号**: 显示任务在当天的序号
- **补卡功能**: 未完成任务可点击"立即补卡"

#### 任务详情
每个任务卡片显示：
- 任务图标和完成徽章
- 任务序号（#1、#2...）
- 任务标签（📚学习、🏠家务）
- 完成时间和分数
- 完成状态/补卡按钮

### 统计页

#### 数据展示
- **总任务数**: 当前所有任务数量
- **已完成数**: 今日已完成任务数
- **完成率**: 圆环图展示完成百分比
- **分类统计**: 学习任务、家务任务分别统计

### 个人中心

#### 用户信息
- 用户头像
- 用户昵称
- 当前日期显示

#### 功能入口
- 🎨 **主题切换**: 6种主题可选
- ⚙️ **系统设置**: 个人信息、密码修改
- 📊 **数据统计**: 个人学习数据分析
- 🚪 **退出登录**: 安全退出账号

---

## 🎨 主题系统

### 主题列表

| 主题名称 | 主题值 | 主色调 | 渐变效果 | 适用场景 |
|---------|--------|--------|---------|---------|
| 默认风格 | default | 紫粉渐变 | 径向渐变 | 现代活力风 |
| 清新绿 | green | 绿色系 | 线性渐变 | 清新自然风 |
| 彩虹风格 | orange | 彩虹色 | 三色渐变 | Instagram风 |
| 科技蓝 | blue | 蓝色系 | 深蓝渐变 | 科技感十足 |
| 梦幻粉 | pink | 粉蓝渐变 | 径向渐变 | 柔和梦幻风 |
| 暗夜黑 | dark | 深色系 | 暗色渐变 | 护眼暗色模式 |

### 主题配置

主题配置位于 `stores/theme.ts`，包含以下颜色系统：

```typescript
interface ThemeConfig {
  // 主色系
  primaryColor: string       // 主色
  primaryLight: string       // 主色-浅
  primaryDark: string        // 主色-深
  primaryGradient: string    // 主渐变色
  
  // 辅助色系
  secondaryColor: string     // 辅助色
  secondaryLight: string     // 辅助色-浅
  
  // 文字色系
  textPrimary: string        // 主要文字
  textSecondary: string      // 次要文字
  textTertiary: string       // 三级文字
  textPlaceholder: string    // 占位文字
  
  // 背景色系
  bgPrimary: string          // 主背景
  bgSecondary: string        // 次背景
  bgTertiary: string         // 三级背景
  bgCard: string             // 卡片背景
  
  // 功能色
  successColor: string       // 成功色
  warningColor: string       // 警告色
  errorColor: string         // 错误色
  infoColor: string          // 信息色
  
  // 边框和阴影
  borderColor: string        // 边框颜色
  borderLight: string        // 浅边框
  cardShadow: string         // 卡片阴影
  buttonShadow: string       // 按钮阴影
  hoverShadow: string        // 悬浮阴影
}
```

### 使用主题

#### 在组件中使用

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { getThemeStyles } from '@/stores/theme'

const themeStyles = computed(() => getThemeStyles())
</script>

<style lang="scss">
.my-component {
  background: v-bind('themeStyles.bgCard');
  color: v-bind('themeStyles.textPrimary');
  border: 1rpx solid v-bind('themeStyles.borderLight');
}
</style>
```

#### 切换主题

```typescript
import { setTheme } from '@/stores/theme'

// 切换到清新绿主题
setTheme('green')
```

---

## 🔌 API文档

### 基础配置

**Base URL**: `/api`

**请求头**:
```json
{
  "Content-Type": "application/json",
  "Authorization": "Bearer {token}"
}
```

### 任务相关API

#### 1. 获取任务列表

```typescript
GET /task/list

Response:
{
  code: number,
  data: TaskItem[],
  message: string
}
```

#### 2. 添加任务

```typescript
POST /task/add

Body: {
  taskName: string,
  icon: string,
  score: number,
  tags: string,
  status: number
}

Response: CommonResult
```

#### 3. 更新任务

```typescript
POST /task/update

Body: TaskItem

Response: CommonResult
```

#### 4. 删除任务

```typescript
DELETE /task/delete?id={taskId}

Response: CommonResult
```

#### 5. 完成任务

```typescript
POST /task/complete?id={taskId}

Response: CommonResult
```

#### 6. 查询历史任务

```typescript
GET /task/history

Params: {
  startDate: string,  // YYYY-MM-DD
  endDate: string     // YYYY-MM-DD
}

Response: {
  code: number,
  data: TaskItem[],
  message: string
}
```

### 用户相关API

#### 1. 登录

```typescript
POST /user/login

Body: {
  userName: string,
  password: string
}

Response: {
  code: number,
  data: {
    token: string,
    userInfo: UserInfo
  },
  message: string
}
```

#### 2. 注册

```typescript
POST /user/register

Body: RegisterParam

Response: CommonResult
```

#### 3. 获取用户信息

```typescript
GET /user/info

Response: {
  code: number,
  data: UserInfo,
  message: string
}
```

#### 4. 上传头像

```typescript
POST /user/avatar/upload

FormData: file

Response: {
  code: number,
  data: { url: string },
  message: string
}
```

### 类型定义

```typescript
// 任务项
interface TaskItem {
  id?: number
  taskName?: string
  sequenceNumber?: number
  icon?: string
  score?: number
  tags?: string
  status?: number
  completeDate?: string
  modifyTime?: string
}

// 用户信息
interface UserInfo {
  id?: number
  userName?: string
  avatar?: string
  phone?: string
  email?: string
}

// 通用响应
interface CommonResult {
  code: number
  data: any
  message: string
}
```

---

## 📐 开发规范

### 代码风格

#### 1. 命名规范

- **文件名**: 小写kebab-case，如 `user-info.vue`
- **组件名**: PascalCase，如 `UserOverview`
- **变量/函数**: camelCase，如 `getUserInfo`
- **常量**: UPPER_SNAKE_CASE，如 `BASE_URL`
- **类型**: PascalCase，如 `TaskItem`

#### 2. 组件结构

```vue
<template>
  <!-- HTML结构 -->
</template>

<script setup lang="ts">
// 1. 导入依赖
import { ref } from 'vue'

// 2. 类型定义
interface Props {
  // ...
}

// 3. Props定义
const props = defineProps<Props>()

// 4. 响应式数据
const data = ref()

// 5. 计算属性
const computed = computed(() => {})

// 6. 方法
const method = () => {}

// 7. 生命周期
onMounted(() => {})
</script>

<style lang="scss" scoped>
// 样式
</style>
```

#### 3. CSS/SCSS规范

```scss
// 外层容器使用完整业务前缀
.page-container {
  // 容器样式
  
  // 内层元素简化类名
  .section-card {
    // 卡片样式
    
    .card-header {
      // 头部样式
    }
    
    .card-body {
      // 内容样式
    }
  }
}
```

### Git提交规范

```bash
# 功能开发
feat: 添加任务编辑功能

# Bug修复
fix: 修复任务删除后页面不刷新的问题

# 样式更新
style: 优化任务卡片样式

# 文档更新
docs: 更新README文档

# 代码重构
refactor: 重构主题管理模块

# 性能优化
perf: 优化任务列表渲染性能

# 测试相关
test: 添加任务API单元测试
```

---

## 🤝 贡献指南

### 参与贡献

1. **Fork 本仓库**
   ```bash
   # 点击页面右上角的 Fork 按钮
   ```

2. **克隆你的仓库**
   ```bash
   git clone https://gitee.com/your-username/study-plan-ui.git
   cd study-plan-ui
   ```

3. **创建功能分支**
   ```bash
   git checkout -b feat/your-feature-name
   ```

4. **提交代码**
   ```bash
   git add .
   git commit -m "feat: 添加新功能"
   ```

5. **推送到远程仓库**
   ```bash
   git push origin feat/your-feature-name
   ```

6. **创建 Pull Request**
   - 在 Gitee 上打开你的仓库
   - 点击"Pull Request"按钮
   - 填写 PR 描述信息
   - 提交等待审核

### 开发建议

- 遵循项目的代码规范
- 添加必要的注释和文档
- 确保代码通过测试
- PR 描述清晰，说明改动原因
- 及时响应 Code Review 意见

---

## 📄 许可证

本项目采用 [MIT License](LICENSE)

---

## 🔗 相关链接

- [uni-app 官方文档](https://uniapp.dcloud.io/)
- [Vue 3 官方文档](https://cn.vuejs.org/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)
- [qiun-data-charts 文档](https://www.ucharts.cn/)
- [uni-ui 组件库](https://uniapp.dcloud.io/component/uniui/uni-ui.html)

---

## 👥 联系我们

- **Issues**: [提交问题](https://gitee.com/your-username/study-plan-ui/issues)
- **Email**: your-email@example.com
- **QQ群**: 123456789

---

## 🙏 致谢

感谢以下开源项目和贡献者：

- [uni-app](https://uniapp.dcloud.io/) - 跨平台开发框架
- [qiun-data-charts](https://www.ucharts.cn/) - 图表组件
- [uni-ui](https://github.com/dcloudio/uni-ui) - UI组件库
- [crypto-js](https://github.com/brix/crypto-js) - 加密库

---

<div align="center">

**如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！**

Made with ❤️ by [Your Name]

</div>