# DiDaWeb

**Repository Path**: changenen/di-da-web

## Basic Information

- **Project Name**: DiDaWeb
- **Description**: 一款仿照滴答清单UI风格和交互逻辑的时间管理应用，支持移动端和PC端自适应
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-23
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DiDaWeb - 仿滴答清单时间管理系统

> 一款仿照滴答清单UI风格和交互逻辑的时间管理应用，支持移动端和PC端自适应

---

## 🙏 特别致谢

本项目由以下 AI 编程助手通过 **Vibe Coding** 方式迭代构建完成，全程无手敲代码：

| 产品 | 说明 |
|------|------|
| **Lingma** | 阿里云通义灵码 |
| **Qoder** | AI 编程助手 |
| **Trae CN** | 字节跳动 Trae 中文版 |
| **Trae** | 字节跳动 Trae |
| **CodeBuddy CN** | 腾讯云代码助手中文版 |
| **CodeBuddy** | 腾讯云代码助手 |
| **Comate** | 百度智能代码助手 |

感谢这些优秀的 AI 产品，让开发效率提升了前所未有的高度！

---

## 📖 目录

- [系统概述](#系统概述)
- [适配规范](#适配规范)
- [功能特性](#功能特性)
- [技术架构](#技术架构)
- [数据存储规范](#数据存储规范)
- [快速开始](#快速开始)
- [部署说明](#部署说明)

---

## 🎯 系统概述

仿造滴答清单的UI风格以及交互逻辑，支持移动端以及PC端浏览器自适应。

---

## 📐 适配规范

### 移动端（iOS/Android 主流机型）

- 覆盖机型：iPhone 12-15、华为 Mate 系列、小米旗舰机型
- 设计稿基准：750px / 375px（视觉稿 750px 按 2x 还原为 375px）
- rem/em 换算：1rem = 16px（根字号）；1em = 当前元素字号；750 设计稿按尺寸除以 2
- 适配断点：1024（平板/横屏）、768（大屏手机/小平板）、576（常规手机）、480（小屏手机）

### Web 端（响应式断点与容器宽度）

| 断点 | 布局尺寸 | 容器宽度 |
|------|----------|----------|
| 320px | 单列紧凑布局 | 视口宽度 - 24px |
| 768px | 单列/两列过渡 | 视口宽度 - 30px |
| 1024px | 多列布局 | 视口宽度 - 40px |
| 1200px | 标准桌面布局 | 1200px |
| 1920px | 大屏居中布局 | 1440px |

### PC 端（主流分辨率适配）

| 分辨率 | 页面适配尺寸 | 最小可视区域 | 边距规范（左右） |
|--------|--------------|--------------|------------------|
| 1366×768 | 内容区 1200px | ≥1024×768 | 约 83px |
| 1920×1080 | 内容区 1440px | ≥1024×768 | 240px |
| 2560×1440 | 内容区 1440px | ≥1024×768 | 560px |

---

## ✨ 功能特性

### 1. 用户认证

| 功能 | 说明 |
|------|------|
| 用户注册 | 用户名、密码、昵称注册 |
| 用户登录 | 用户名密码登录，支持"记住我"功能 |
| JWT认证 | 基于JWT Token的无状态认证机制 |
| 登录拦截 | 未登录用户自动跳转登录页 |
| 个人信息 | 支持修改昵称、邮箱、手机号 |
| 头像管理 | 支持本地上传图片或使用外部链接 |
| 密码修改 | 需验证原密码后修改 |
| **国际化** | 🌐 支持中英文双语切换，语言持久化 |
| **安全增强** | 🔒 用户名格式验证、密码强度验证、登录失败锁定机制 |

### 2. 效率工具

#### 🍅 番茄专注

- 25分钟专注 + 5分钟休息循环
- 记录专注时长，支持白噪音滴答声
- 专注完成弹框支持取消操作
- 与任务关联

#### 📅 习惯打卡

- 预设 **60+** 习惯模板
- 自定义打卡规则，支持习惯删除
- 打卡日历展示，支持年份/月份快速切换
- 中国节假日显示（2025-2027年数据）
- 连续打卡天数统计
- 打卡日志功能（支持按习惯/按日期查看）
- 打卡心情记录（很棒/还行/一般/累了）

#### 📊 数据统计

- 任务完成率、专注时长、习惯打卡趋势
- 多维度复盘分析

### 3. 提醒系统

| 提醒类型 | 说明 |
|----------|------|
| 时间提醒 | 单次/多次提醒，支持提前提醒（5分钟/1小时/1天） |
| 持续提醒 | 响铃至任务处理，避免遗漏 |
| 微信提醒 | 绑定微信接收提醒，跨设备同步 |
| 艾宾浩斯提醒 | 按记忆曲线设置复习提醒，适配学习场景 |

### 4. 数据导出

#### 导出内容

- 📋 习惯数据导出：Excel格式，包含习惯详情
- ✅ 打卡记录导出：日期、习惯名称、心情、备注
- ⏱️ 专注记录导出：日期、时长、类型、状态
- 📝 任务数据导出：标题、优先级、状态、截止时间

#### 导出特性

- ✨ 所有编码字段转换为中文描述（人类可读格式）
- 📐 Excel列宽自适应内容长度
- 🔐 支持JWT认证的文件下载
- **安全增强**：导出接口添加用户权限验证

### 5. 更新历史

- 📜 时间线样式展示版本更新记录
- ⭐ 最新版本高亮显示
- 🔍 支持新增/修复/优化/重构等类型标识
- 🎬 动画过渡效果
- **国际化支持**：更新历史页面支持中英文显示

### 6. 用户反馈

- 🐛 支持四种反馈类型：Bug反馈、功能建议、使用问题、其他
- 📊 支持优先级设置（一般/重要/紧急）
- 📧 支持联系方式填写
- 💬 显示反馈状态（待处理/已回复）
- 📝 支持官方回复展示
- **国际化支持**：反馈页面支持中英文显示

---

## 🛠️ 技术架构

### 前端技术栈

| 技术 | 说明 |
|------|------|
| jQuery 3.7.0 | DOM操作与Ajax |
| HTML5 + CSS3 | 页面结构与样式 |
| JavaScript (ES6+) | 交互逻辑 |
| Bootstrap 5.3.0 | 响应式UI框架 |
| Bootstrap Icons 1.11.0 | 图标库 |
| Font Awesome 6.4.0 | 图标库 |
| Chart.js | 数据可视化 |

### 后端技术栈

| 技术 | 说明 |
|------|------|
| Maven | 项目构建管理 |
| Spring Boot 3.2.0 | 核心框架 |
| MySQL 8.0+ | 数据库 |
| JDK 17 | 运行环境 |
| Liquibase | 数据库版本管理 |
| MyBatis-Plus | ORM框架（表关联使用XML映射） |
| Hutool | 工具库 |
| Knife4j | API文档 |
| Forest | HTTP客户端（第三方接口调用） |
| JJWT | Token生成与验证 |
| Redis | 缓存（可选） |

### 静态资源本地化

所有前端依赖已本地化存储，无需外部网络访问：

| 资源 | 路径 |
|------|------|
| jQuery | `/lib/jquery/jquery.min.js` |
| Bootstrap CSS | `/lib/bootstrap/css/bootstrap.min.css` |
| Bootstrap Icons | `/lib/bootstrap-icons/` |
| Font Awesome | `/lib/font-awesome/` |
| Chart.js | `/lib/chartjs/chart.min.js` |

---

## 💾 数据存储规范

> **重要**：所有日期字段统一使用字符串格式存储

| 字段类型 | 数据库类型 | 格式示例 |
|----------|------------|----------|
| 日期 | `VARCHAR(10)` | `2026-02-23` |
| 日期时间 | `VARCHAR(19)` | `2026-02-23 15:30:00` |

---

## 🚀 快速开始

### 环境要求

- JDK 17+
- Maven 3.9+
- MySQL 8.0+

### 安装步骤

1. **克隆项目**

```bash
git clone <repository-url>
cd DiDaWeb
```

2. **创建数据库**

```sql
CREATE DATABASE dida_web CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

3. **修改配置**

编辑 `src/main/resources/application.yml`：

```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/dida_web?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: your_password

jwt:
  secret: your-jwt-secret-key-must-be-at-least-256-bits-long
  expiration: 86400000

file:
  upload:
    path: ./uploads
    max-size: 5242880
```

4. **构建并运行**

```bash
mvn clean compile
mvn spring-boot:run
```

5. **访问应用**

- 登录页面：http://localhost:9090/login.html
- 应用首页：http://localhost:9090
- API文档：http://localhost:9090/doc.html

---

## 📦 部署说明

### 打包

```bash
mvn clean package -DskipTests
```

**打包输出结构**：
```
target/
├── dida-web-1.0.0.jar    # 应用主包（约1-2MB）
└── lib/                   # 依赖库目录（约50-80MB）
```

### 部署方式

#### 首次部署

上传所有文件：
```
dida-web-1.0.0.jar
lib/
start.bat (Windows)
start.sh (Linux)
```

#### 后续更新

只需上传小的jar文件（约1-2MB）

#### 运行方式

**Windows**:
```cmd
start.bat
```

**Linux**:
```bash
chmod +x start.sh
./start.sh
```

或手动运行：
```bash
java -Dloader.path=lib -jar dida-web-1.0.0.jar
```

---

## 📝 开发规范

### 代码规范

- 实体类使用 MyBatis-Plus 注解（`@TableName`, `@TableId`, `@TableField`）
- Service 继承 `ServiceImpl<Mapper, Entity>`
- Controller 使用 Swagger 注解（`@Tag`, `@Operation`）
- 表关联查询使用 XML 映射文件
- **日期字段统一使用String类型**，不使用LocalDate/LocalDateTime
- if语句必须使用大括号

### 提交规范

```
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
test: 测试相关
chore: 构建/工具相关
```

---

## 📚 相关文档

- [PROJECT.MD](./PROJECT.MD) - 详细的项目文档和开发指南
- [API文档](http://localhost:9090/doc.html) - 启动项目后访问

---

### 📄 版本历史
### v1.4.3 (2026-02-26)
- 🌙 **新增**：主题切换暗黑/明亮模式
- ?? **优化**：暗黑模式下各页面适配
- 🔄 **新增**：统计页面重新统计按钮
- ⏪ **新增**：支持历史日期打卡与打卡撤销功能
- 🐛 **修复**：多个UI优化与国际化问题

### v1.4.2 (2026-02-24)
- 🛠️ 优化：移除系统配置接口，直接使用默认文档链接地址
  - 修复：支持文档链接地址从配置表获取（默认地址：https://gitee.com/changenen/di-da-web）
  - 优化：简化代码结构，提高可维护性
  - 修复：避免因后端接口未实现导致的异常
- ✨ 新增：支持文档链接地址从配置表获取
- ?? 安全增强：移除了不必要的配置接口调用
- 📝 文档更新：更新了项目文档中的相关说明

### v1.4.1 (2026-02-23)
- 🎵 修复：番茄专注白噪音问题，不同类型现在有独特音效（雨声、森林、海浪、篝火、咖啡厅）
- ?? 新增：白噪音试听按钮，选择前可预听效果
- ✨ 优化：专注完成弹框重新设计，更加精致美观
- 🎯 新增：专注完成后支持用户选择休息或继续专注
- 📝 新增：业务数据库表/字段注释，实体类添加完整JavaDoc
- 🌐 修复：国际化遗漏问题
  - 统计、提醒页面导航菜单国际化
  - 习惯页面打卡日志国际化
  - 更新历史页面国际化
  - 反馈页面完整国际化

### v1.4.0 (2026-02-23)

- ✨ 新增：**国际化支持**（i18n模块）
  - 支持中文/英文双语切换
  - 语言设置持久化存储
  - 所有页面添加语言切换按钮
  - 翻译覆盖：登录、任务、习惯、番茄钟、统计、提醒、个人信息等模块
- 🔒 新增：**安全增强功能**
  - 用户名格式验证（3-20位字母数字下划线）
  - 密码强度验证（至少6位）
  - 登录失败次数限制（5次失败锁定10分钟）
  - 任务CRUD操作添加完整权限验证
  - 数据字段长度验证和安全控制
- 🎨 优化：登录页面添加语言切换器
- 🎨 优化：统一各页面导航栏国际化支持

### v1.3.2 (2026-02-23)

- ✨ 新增：构建信息功能（打包记录Git提交信息、启动打印、API查询）
- ✨ 新增：习惯与专注联动（右键习惯开始专注、自动填充任务名称）
- ✨ 新增：专注页面显示任务名称
- ✨ 新增：打卡日历默认选中当天
- 🎨 优化：Maven打包配置（资源过滤、二进制文件排除）
- 🎨 优化：外部配置文件支持config目录
- 🐛 修复：主类名称错误问题

### v1.3.1 (2026-02-23)

- ✨ 新增：更新历史记录页面（changelog.html）
- ✨ 新增：用户反馈功能（feedback.html）
- ✨ 新增：版本历史管理API
- ✨ 新增：用户反馈管理API
- 🎨 优化：页面UI全面优化（统一风格、层次分明）
- 🎨 优化：添加过渡动画效果（丝滑流畅）
- 🎨 优化：交互反馈效果增强
- 🎨 优化：性能优化（GPU加速、减少重排）
- 🐛 修复：Auth.getAuthHeaders方法缺失问题
- 🐛 修复：版本历史API认证拦截问题

### v1.3 (2026-02-23)

- ✨ 新增：个人信息管理页面（profile.html）
- ✨ 新增：头像上传功能（支持本地上传和外部链接）
- ✨ 新增：密码修改功能
- ✨ 新增：网站favicon图标
- 🎨 优化：前端资源本地化（无需外部网络访问）
- 🎨 优化：Maven打包分离依赖（减少更新上传时间）
- 🎨 优化：导航栏头像支持显示自定义图片

### v1.2 (2026-02-23)

- ✨ 新增：打卡日志功能（支持按习惯/按日期查看）
- ✨ 新增：日历年份/月份快速切换功能
- ✨ 新增：中国节假日显示（2025-2027年）
- ✨ 新增：节假日管理API
- 🎨 优化：导出数据编码字段转换为人类可读格式
- 🎨 优化：Excel列宽自适应内容长度
- 🎨 优化：专注完成弹框添加取消按钮
- 🎨 优化：习惯卡片添加删除按钮
- 🐛 修复：打卡心情选择功能
- 🐛 修复：导出数据401认证错误
- ♻️ 重构：所有日期字段改为字符串格式存储

### v1.1 (2026-02-22)

- 🎉 初始版本发布
- 实现用户认证、任务管理、番茄专注、习惯打卡等核心功能

---

## 📞 联系方式

如有问题，请联系项目负责人或在项目仓库提交Issue。

---

<p align="center">
  Made with ❤️ by DiDaWeb Team
</p>