# 产品需求文档(PRD) ## 掐日子(qia)- AI 纪念日·提醒 | 项目 | 内容 | |-----|------| | **版本号** | v1.0.2 | | **状态** | 开发中 | | **创建日期** | 2026-01-28 | | **最近更新** | 2026-02-04 | | **目标用户** | 需要管理纪念日、提醒任务的普通用户 | | **产品定位** | 轻便、灵活的倒数日和提醒App,专注提醒功能 | --- ## 1 产品概述 ### 1.1 产品定位 掐日子(qia)是一款AI驱动的纪念日和提醒网页应用,旨在帮助用户轻松管理生活中的重要日期和待办事项。产品以"轻便、灵活"为核心设计理念,通过自然语言处理技术降低用户添加纪念日和提醒的门槛,让日期管理变得简单自然。产品专注于提醒功能的核心体验,不追求功能的堆砌,而是将每一个核心功能打磨到极致,为用户提供流畅、高效的日期管理工具。 掐日子的核心竞争力在于其AI智能解析能力。用户无需手动选择日期类型、重复方式等复杂选项,只需用自然语言描述(如"提醒我下周三交论文"、"农历三月初三吃荠菜煮蛋"),系统即可自动识别公历或农历、解析日期语义、判断是否需要重复,并以自然语言展示解析结果供用户确认。这种交互方式大大降低了用户的学习成本和操作负担,使得各类用户都能快速上手使用。 ### 1.2 目标用户 掐日子的目标用户群体主要分为以下几类: 第一类是**学生群体**,他们需要管理各种学业相关的截止日期、考试时间、作业提交日期,同时也有生日、纪念日等社交需求。这类用户对产品的易用性要求较高,偏好简洁直观的界面设计,对新技术接受度高,能够快速适应AI交互方式。学生群体通常拥有较为固定的作息时间,适合接收固定时段的提醒通知。 第二类是**职场人士**,他们面临繁忙的工作任务,需要管理项目截止日期、会议时间、客户生日、节假日安排等各类事项。这类用户对产品的效率要求极高,希望能够快速添加和查看提醒,对通知的及时性和准确性有较高要求。职场人士通常同时使用多个设备,对跨平台体验和数据同步有一定需求。 第三类是**家庭用户**,他们关注家庭成员的生日、纪念日、传统节日(如春节、中秋、端午等),需要安排家庭聚会、送礼物等事宜。这类用户对中国传统节日和农历日期有特殊需求,产品内置的法定节假日和农历支持正好满足他们的痛点。家庭用户对界面的温馨感和易读性有较高要求。 ### 1.3 核心价值 掐日子的核心价值主张可以概括为三个关键词:**智能、便捷、可靠**。 **智能**体现在AI驱动的自然语言交互。用户可以用日常语言描述日期和任务,系统自动完成复杂的解析工作。这种智能不是炫技,而是真正为用户省去繁琐的操作步骤,让添加纪念日和提醒变得像发消息一样简单。AI还能够记住用户的偏好和习惯,在后续使用中提供更加个性化的服务。 **便捷**体现在产品设计的每一个细节。从登录态的自动保持到数据的实时同步,从清晰的界面布局到流畅的交互体验,产品致力于消除用户使用过程中的任何摩擦。用户可以在任何设备上随时访问自己的数据,无需担心数据丢失或同步问题。便签功能支持富文本编辑,自动保存机制确保用户的创意和想法不会丢失。 **可靠**体现在产品的稳定性和数据的安全性。所有数据存储在专业的云端数据库中,用户的登录信息经过加密处理,重要日期和提醒不会因为网络波动或设备故障而丢失。浏览器桌面通知功能确保用户不会错过重要的提醒,即使在忙碌的工作中也能及时收到通知。 ### 1.4 竞品分析 当前市场上的日期管理应用主要分为两类:一类是传统的日历应用(如Google Calendar、Apple Calendar),功能强大但界面复杂,学习成本高;另一类是轻量级的倒数日应用(如倒数日Days Matter),功能单一但专注易用。掐日子的定位介于两者之间,既保持了轻量级应用的易用性,又通过AI技术提供了超越传统应用的智能化体验。 与竞品相比,掐日子的差异化优势主要体现在三个方面。首先是AI自然语言解析能力,这是传统应用不具备的,用户无需在复杂的表单中反复选择;其次是对中国用户的深度适配,包括农历支持和中国法定节假日内置;最后是简洁的界面设计,将纪念日、提醒、便签、AI对话等功能整合在一个页面中,减少用户的认知负担和操作切换成本。 --- ## 2 用户故事 ### 2.1 典型用户场景 **场景一:快速添加生日提醒** 小李是一名大学生,他的好朋友小王下周就要过生日了。小李想提前准备生日祝福和礼物,需要设置一个提醒。他在掐日子的AI对话中输入:"小王3月15号生日,每年提醒我"。系统自动识别出这是公历日期、生日为每年重复,并以自然语言展示解析结果:"已识别到:纪念日『小王生日』,日期为每年3月15日(公历),重复方式为年度重复"。小李确认后,纪念日卡片就创建完成了。在小王生日到来的前一周,系统会通过浏览器通知提醒小李。 **场景二:管理学业任务截止日期** 小张是一名研究生,最近需要提交一篇课程论文,截止日期是下个月的第一周。他不确定具体是哪一天,于是先在AI对话中输入:"提醒我下个月第一周提交机器学习课程论文"。系统解析后显示:"已识别到:提醒『提交机器学习课程论文』,时间暂定为下个月第一周的某天,请确认具体日期"。小张确认了日期后,提醒被创建。当截止日期临近时,系统会提前三天和当天分别发送提醒通知。 **场景三:追踪传统节日** 王女士是一名家庭主妇,她需要记住家里每个月的传统节日和家人生日。她在AI对话中输入:"春节是农历正月初一,每年的提醒我买年货"。系统识别出这是农历日期,转换为对应的公历日期,并创建年度重复的纪念日。王女士还添加了家庭成员的农历生日,设置好重复规则后,系统会自动计算每年的公历对应日期并提前提醒。她还可以查看内置的中国法定节假日,快速了解放假安排。 **场景四:整理每日待办事项** 刘先生是一名项目经理,每天需要处理大量的任务和会议。他习惯在每天早上打开掐日子,把当天需要完成的工作事项添加到提醒列表中。通过AI对话,他可以快速输入"上午十点开项目例会"、"下午三点前提交工作报告"这样的自然语言描述。系统会自动识别时间并创建提醒。完成的任务可以点击checkbox标记完成,已完成的事项会自动归类到列表底部。临时想到的事项也可以随时添加,保持待办列表的整洁有序。 **场景五:记录临时想法** 陈小姐是一名创意工作者,她经常有一些好的想法需要及时记录。她使用掐日子的便签功能,把灵感、待办事项、会议要点等内容记录下来。便签支持富文本编辑,可以格式化文字、添加列表、插入链接等。便签内容会自动保存,无需手动点击保存按钮。当她在其他地方需要查阅这些内容时,只需登录掐日子就能看到。 **场景六:处理过期提醒** 赵先生周末外出没有及时查看手机,周一上班时发现有几个提醒已经错过了。他打开掐日子,在提醒列表的底部"已错过"分类中看到了这些提醒。系统按照过期时间排序,最紧急的事项排在最前面。赵先生处理完这些过期提醒后,可以选择删除或者修改时间后重新激活。 ### 2.2 用户旅程地图 用户在掐日子的完整旅程可以分为以下几个阶段: **发现阶段**:用户通过搜索引擎、社交媒体或朋友推荐了解到掐日子产品。用户被产品的slogan"AI 纪念日·提醒"吸引,被其简洁的宣传页面设计打动,决定点击登录按钮开始体验。 **注册阶段**:用户点击登录后进入注册流程。用户输入邮箱和密码完成注册,系统发送验证邮件(可选,MVP阶段可简化)。注册成功后用户进入Home页面,看到空白的纪念日和提醒列表。 **探索阶段**:用户开始尝试使用各个功能。用户首先尝试AI对话功能,输入第一个纪念日或提醒,体验智能解析的便捷性。用户查看内置的法定节假日,了解如何添加传统节日。用户尝试编辑便签,熟悉富文本编辑器的操作。 **使用阶段**:用户开始日常使用产品。用户每天早上查看当天的提醒事项,添加新的待办。用户定期查看即将到来的纪念日,提前准备。用户使用便签记录工作笔记和生活感悟。AI对话成为用户添加新事项的主要入口。 **依赖阶段**:用户对产品形成依赖,重要日期和提醒都记录在掐日子中。用户开始设置浏览器通知,确保不会错过任何提醒。用户在不同设备上访问掐日子,数据实时同步。当用户有自然语言描述的日期需求时,第一时间想到使用掐日子。 --- ## 3 功能详细描述 ### 3.1 登录与认证 #### 3.1.1 功能概述 登录与认证是用户进入产品的第一道门槛,也是数据安全的重要保障。本模块提供邮箱密码注册、登录、登出以及登录态保持功能。MVP阶段采用简化方案,支持邮箱密码认证,后续可扩展第三方登录(如微信、Google)。 #### 3.1.2 功能详细描述 **注册功能**:用户在注册页面输入邮箱地址和密码。系统对邮箱格式进行校验,确保邮箱格式正确。密码要求至少8位,包含字母和数字,提高安全性。用户提交注册信息后,系统检查该邮箱是否已被注册。若未注册,系统在用户表中创建新记录,密码经过哈希处理后存储。注册成功后,系统自动创建一条便签记录供用户使用。用户登录态保存在localStorage中,下次访问自动登录。 **登录功能**:用户在登录页面输入邮箱和密码。系统校验邮箱格式和密码非空。系统查询用户表,验证邮箱和密码是否匹配。验证通过后,系统生成登录态(可使用JWT或session),保存在localStorage中。系统跳转到Home页面,并在界面上显示用户邮箱,标识已登录状态。若验证失败,系统显示"邮箱或密码错误"提示,不区分具体错误原因,防止信息泄露。 **登出功能**:用户点击界面上的登出按钮。系统清除localStorage中的登录态。系统跳转到宣传页。用户在登录态过期或被清除后,需要重新登录才能访问Home页面。 **登录态保持**:用户登录后,登录态保存在localStorage中,有效期为30天(可配置)。用户访问应用时,系统检查localStorage中的登录态是否有效。若有效,自动跳转到Home页面;若无效或不存在,显示宣传页,用户可选择登录或注册。登录态与用户邮箱绑定,后端不存储session状态,采用无状态认证设计。 #### 3.1.3 业务规则 邮箱格式必须符合标准邮箱格式(username@domain.extension)。密码长度至少8位,必须包含字母和数字。同一邮箱只能注册一个账户。登录态有效期为30天,续期可在用户活跃时自动延长。登录态存储在localStorage中,前端代码中不应暴露密码明文。 ### 3.2 纪念日管理 #### 3.2.1 功能概述 纪念日功能用于管理用户的重要日期,如生日、纪念日、节日等。纪念日支持倒计时显示和自动重复(年度、月度),同时内置中国法定节假日,方便用户快速添加。纪念日卡片支持点击展开详情,支持二次编辑。 #### 3.2.2 功能详细描述 **查看纪念日列表**:用户在Home页面左侧查看纪念日列表。列表显示所有纪念日卡片,按日期从近到远排序。每个卡片显示纪念日名称、倒计时天数、日期信息。公历纪念日显示"公历"标识,农历纪念日显示"农历"标识。年度重复的纪念日显示重复图标。法定节假日显示节日标识。点击卡片可展开详情弹窗,显示更多信息和操作选项。 **添加纪念日**:用户可通过AI对话或手动添加两种方式创建纪念日。AI对话方式:用户输入自然语言描述,系统自动解析并展示解析结果,用户确认后创建。手动添加方式:用户点击纪念日列表上方的添加按钮,弹出添加弹窗。手动添加需要填写:纪念日名称(必填)、日期(必填)、是否为农历(必选)、重复方式(必选:仅一次、年度重复、月度重复)。系统验证必填字段,验证通过后创建纪念日。 **内置法定节假日**:系统预置中国法定节假日列表,包括:元旦(1月1日)、春节(农历正月初一)、清明节(4月5日前后)、劳动节(5月1日)、端午节(农历五月初五)、中秋节(农历八月十五)、国庆节(10月1日)。用户点击"添加节假日"按钮,可选择内置节日快速添加。节假日作为纪念日的一种,默认设置为年度重复。 **倒计时显示**:对于未到来的纪念日,系统计算并显示倒计时天数。倒计时从当前日期计算到纪念日的下一个日期。公历纪念日每年日期固定,农历纪念日需要转换为公历后计算。倒计时大于365天时显示"还有X年",1-365天时显示"还有X天",小于1天时显示"今日"。对于已过的纪念日,显示"已过X天"。 **重复规则**:纪念日支持三种重复方式。仅一次:仅在设置的日期提醒,不自动重复。年度重复:每年到达纪念日日期时自动重复,可选择是否保留历史记录。月度重复:每月到达纪念日日期时自动重复,适用于每月固定日期的任务或事件。重复规则在创建时可设置,创建后可修改。 **二次编辑**:用户点击纪念日卡片,弹出详情弹窗。弹窗显示纪念日的完整信息:名称、日期、是否农历、重复方式、创建时间、更新时间。用户可修改除ID和创建时间外的所有字段。修改后点击保存,系统更新数据库记录。弹窗同时提供删除操作,用户确认后删除纪念日。 #### 3.2.3 业务规则 纪念日名称最大长度为100字符。日期不能早于创建时间(仅一次的纪念日)。农历日期需要转换为公历进行存储和计算。倒计时以天为单位,不计算小时和分钟。重复纪念日不自动删除历史记录,但界面只显示下一个即将到来的日期。删除纪念日后不可恢复,需谨慎操作。 ### 3.3 提醒管理 #### 3.3.1 功能概述 提醒功能用于管理短期任务和待办事项。提醒按时间分组显示(今天、明天、更久之后),支持标记完成。过期提醒归入"已错过"分类。提醒不支持长周期重复,适合短期任务的追踪。 #### 3.3.2 功能详细描述 **查看提醒列表**:用户在Home页面左侧查看提醒列表。列表分为三个分组:今天(今日24:00前的提醒)、明天(明日0:00-24:00的提醒)、更久之后(明日之后的提醒)。底部单独显示"已错过"分组,包含所有已过期未完成的提醒。每个分组内的提醒按时间顺序排序。用户可在分组间快速切换和浏览。 **添加提醒**:用户可通过AI对话或手动添加两种方式创建提醒。AI对话方式:用户输入自然语言描述(如"提醒我明天下午三点开会"),系统自动解析时间、事件内容,以自然语言展示解析结果,用户确认后创建。手动添加方式:用户点击提醒列表上方的添加按钮,弹出添加弹窗。手动添加需要填写:提醒内容(必填)、提醒时间(必填,支持日期和时间选择)。系统验证必填字段,验证通过后创建提醒。 **标记完成**:用户点击提醒卡片左侧的checkbox,完成该提醒。完成后的提醒移动到所在分组的底部,显示完成状态和完成时间。用户可点击取消完成,提醒恢复原位置。未过期提醒完成不进入"已错过"分组。已完成提醒可选择删除。 **过期提醒处理**:当提醒时间已过且未完成时,提醒自动归入"已错过"分组。"已错过"分组按过期时间从远到近排序,最紧急的排在最前面。用户点击过期提醒可查看详情,可选择修改时间后重新激活,或直接删除。系统不自动删除过期提醒,由用户手动处理。 **二次编辑**:用户点击提醒卡片,弹出详情弹窗。弹窗显示提醒的完整信息:内容、时间、完成状态、创建时间、更新时间。用户可修改内容和时间,完成状态不可直接修改(需通过checkbox操作)。修改后点击保存,系统更新数据库记录。弹窗提供删除操作,用户确认后删除提醒。 #### 3.3.3 业务规则 提醒内容最大长度为500字符。提醒时间不能早于当前时间(创建时)。完成后的提醒不触发通知。过期提醒不自动删除,保留供用户处理。提醒不支持重复规则,如需重复应使用纪念日功能。"已错过"分组只显示未完成的过期提醒。 ### 3.4 便签功能 #### 3.4.1 功能概述 便签功能提供富文本编辑能力,帮助用户记录想法、笔记、待办清单等内容。便签支持自动保存,确保用户的创作不会丢失。MVP阶段限制每用户仅支持一条便签记录,后续可扩展为多条便签管理。 #### 3.4.2 功能详细描述 **查看便签**:用户在Home页面右侧查看便签区域。便签区域显示富文本内容,采用类似文档的布局。当便签为空时,显示占位提示文字"开始记录你的想法..."。便签内容自动换行显示,支持多种文本格式。 **编辑便签**:用户点击便签区域进入编辑模式。编辑器采用Quill富文本组件,支持以下格式:标题(H1、H2)、正文段落、无序列表、有序列表、加粗、斜体、下划线、删除线、链接。用户输入内容后,编辑器自动聚焦。编辑完成后,用户可点击便签区域外任意位置退出编辑模式,系统自动保存。 **自动保存**:用户在编辑过程中无需手动保存。系统监听编辑器的change事件,在内容变化后500毫秒内自动保存。保存时显示"保存中"状态指示,保存完成后显示"已保存"。网络断开时显示"离线保存"提示,恢复网络后自动同步。便签数据实时保存到后端,确保数据不会因意外丢失。 **清空便签**:用户可点击便签工具栏中的清空按钮。清空前系统弹出确认提示"确定要清空便签内容吗?此操作不可恢复"。用户确认后,便签内容被清空,但便签记录本身保留,可重新编辑。 #### 3.4.3 业务规则 便签内容存储为HTML格式,支持 Quill输出的标准HTML标签。每用户限制一条便签记录,便签ID固定为用户ID(或生成唯一标识)。便签内容最大长度为10000字符,超出时提示用户。便签的创建时间和更新时间随保存操作更新。自动保存间隔为500毫秒防抖。 ### 3.5 AI对话功能 #### 3.5.1 功能概述 AI对话是掐日子的核心特色功能,通过自然语言处理技术,让用户以日常语言描述纪念日或提醒,系统自动解析并创建。AI对话降低了用户添加日期的门槛,提升了使用效率,是产品的核心竞争力所在。 #### 3.5.2 功能详细描述 **发起对话**:用户在Home页面右侧的AI对话区域发起对话。对话区域包含:对话历史列表、输入框、发送按钮。用户点击输入框聚焦,输入描述文字后点击发送。发送后,用户描述显示在对话列表中,AI开始解析。 **自然语言解析**:AI接收用户输入的自然语言,进行语义解析。解析内容包括:事件名称(标题)、日期类型(公历/农历)、日期时间、重复方式(仅一次/年度重复/月度重复/不重复)、语义分类(纪念日/提醒)。解析完成后,AI生成自然语言的解析结果供用户确认。示例:用户输入"提醒我下周三交论文",AI解析结果为"已识别到:提醒『交论文』,时间暂定为下周三(如2026年2月5日),请确认具体日期和内容"。 **确认与创建**:用户看到AI的解析结果后,有两个选择。确认:用户点击"确认创建"按钮,系统根据解析结果创建对应的纪念日或提醒,创建成功后显示成功提示,跳转到对应列表并高亮新创建的卡片。修改:用户发现解析结果有误,可直接输入修正信息,AI重新解析,或用户手动在详情弹窗中修改。 **解析结果展示**:AI以卡片形式展示解析结果,包含:事件标题、日期类型、日期时间、重复方式、来源文本。卡片上提供"确认创建"和"重新输入"两个操作按钮。解析结果应尽可能准确,对于不确定的日期(如"下周三"需确认具体日期),应标注并提示用户确认。 **错误处理**:当AI无法解析用户输入时,显示友好提示"抱歉,我没有理解您的意思。请尝试描述得更具体一些,例如:提醒我明天下午三点开会"。用户可重新输入或切换到手动添加模式。 #### 3.5.3 业务规则 AI对话是创建纪念日和提醒的主要入口,但不应是唯一入口,需保留手动添加功能。解析结果必须经过用户确认后才能创建,不可自动创建。AI无法处理时,应引导用户使用手动添加而非报错。对话历史保留最近10条,更早的自动清理。解析准确率作为AI模块的核心指标持续优化。 ### 3.6 浏览器通知 #### 3.6.1 功能概述 浏览器桌面通知功能确保用户不会错过重要的纪念日和提醒。用户在首次使用时授权通知权限,系统在纪念日到来或提醒时间到达时发送桌面通知。通知支持点击跳转,方便用户快速查看详情。 #### 3.6.2 功能详细描述 **请求权限**:用户首次访问Home页面时,系统检测通知权限状态。若未授权,显示通知授权提示条"启用通知,确保不错过重要日期"。用户点击"启用"按钮,系统调用浏览器通知API请求权限。用户允许或拒绝后,提示条隐藏。用户在浏览器设置中可随时修改通知权限。 **发送通知**:系统在以下场景发送通知。纪念日通知:在纪念日当天早上9:00发送,提醒用户"今天是XX纪念日"。提醒通知:在提醒时间到达时立即发送,支持精确到分钟的提醒。过期通知:对于过期未处理的提醒,每天早上9:00发送汇总通知。 **通知内容**:通知标题显示应用名称"掐日子"。通知内容根据类型显示:纪念日类型显示"今天是[纪念日名称]"[可选倒计时];提醒类型显示"[提醒内容]"[时间]。通知支持点击操作,点击后打开应用并跳转到对应详情。 **通知设置**:用户可在设置中管理通知偏好。开关控制:总开关、纪念日通知开关、提醒通知开关、过期提醒汇总开关。通知时间:可设置每日通知的发送时间(默认9:00)。静默模式:可设置免打扰时段(如22:00-8:00),该时段内不发送通知。 #### 3.6.3 业务规则 通知权限依赖浏览器支持,不支持的浏览器不显示通知功能。纪念日通知只在当天发送一次,不过期补发。提醒通知在精确时间发送,支持多设备同步。用户可随时在浏览器设置中禁用通知。通知不包含敏感信息,即使在锁屏界面也只显示脱敏内容。 --- ## 4 用户流程图 ### 4.1 用户登录流程 ``` ┌─────────────────────────────────────────────────────────────┐ │ 用户登录流程 │ └─────────────────────────────────────────────────────────────┘ ┌──────────┐ │ 访问应用 │ └────┬─────┘ │ ▼ ┌──────────────┐ │检查登录态 │ └──────┬───────┘ │ ┌─────┴─────┐ │ │ ▼ ▼ ┌──────┐ ┌─────────────┐ │有效 │ │无效/不存在 │ └──┬───┘ └──────┬──────┘ │ │ ▼ ▼ ┌─────────┐ ┌─────────────────┐ │跳转Home │ │ 显示宣传页 │ │页面 │ │ 登录/注册入口 │ └────┬────┘ └────────┬────────┘ │ │ │ ┌──────┴──────┐ │ │ │ │ ▼ ▼ │ ┌─────────┐ ┌─────────┐ │ │ 登录 │ │ 注册 │ │ └────┬────┘ └────┬────┘ │ │ │ │ ▼ ▼ │ ┌───────────────────────┐ │ │ 验证邮箱密码 │ │ └───────────┬───────────┘ │ │ │ ┌──────┴──────┐ │ │ │ │ ▼ ▼ │ ┌─────────┐ ┌─────────────┐ │ │ 验证通过 │ │ 验证失败 │ │ └────┬────┘ │ 显示错误 │ │ │ └─────────────┘ │ ▼ │ ┌─────────────────┐ │ │保存登录态 │ │ │跳转Home页面 │ │ └─────────────────┘ │ ▼ ┌────────────────┐ │ 显示Home页面 │ │ 用户可使用功能│ └────────────────┘ ``` ### 4.2 添加纪念日流程 ``` ┌─────────────────────────────────────────────────────────────┐ │ 添加纪念日流程 │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────┐ │ 用户想添加纪念日 │ └────────────┬────────────┘ │ ┌───────────┴───────────┐ │ │ ▼ ▼ ┌────────────────┐ ┌────────────────┐ │ AI对话输入 │ │ 点击添加按钮 │ │ "妈妈生日6月..."│ │ 打开手动添加 │ └───────┬────────┘ └───────┬────────┘ │ │ │ ▼ │ ┌────────────────────┐ │ │ 填写纪念日信息 │ │ │ 名称/日期/农历 │ │ │ 重复方式 │ │ └───────┬────────────┘ │ │ │ ▼ │ ┌────────────────────┐ │ │ 验证必填字段 │ │ └───────┬────────────┘ │ │ │ ┌────────┴────────┐ │ │ │ │ ▼ ▼ │ ┌─────────┐ ┌─────────────┐ │ │ 验证通过│ │ 验证失败 │ │ └────┬────┘ │ 显示错误提示│ │ │ └─────────────┘ │ ▼ │ ┌─────────────────┐ │ │ 保存纪念日 │ │ │ 更新列表显示 │ │ └─────────────────┘ │ ▼ ┌─────────────────────────────────────────┐ │ AI解析用户输入 │ │ 识别:名称/日期/农历/重复 │ └────────────────┬────────────────────────┘ │ ▼ ┌─────────────────┐ │ 展示解析结果 │ │ "识别到:妈妈 │ │ 生日6月15日 │ │ 年度重复" │ └────────┬────────┘ │ ┌───────────┴───────────┐ │ │ ▼ ▼ ┌─────────────┐ ┌─────────────────┐ │ 确认创建 │ │ 修改/重新输入 │ └──────┬──────┘ └─────────────────┘ │ ▼ ┌─────────────────┐ │ 保存纪念日 │ │ 更新列表显示 │ └─────────────────┘ ``` ### 4.3 AI对话创建流程 ``` ┌─────────────────────────────────────────────────────────────┐ │ AI对话创建流程 │ └─────────────────────────────────────────────────────────────┘ ┌──────────────────┐ │ 用户输入描述 │ │ "提醒我明天下午3 │ │ 点开会" │ └────────┬─────────┘ │ ▼ ┌──────────────────┐ │ 发送至AI服务 │ └────────┬─────────┘ │ ▼ ┌──────────────────┐ │ NLP语义解析 │ │ 提取:类型/内容 │ │ /时间/重复方式 │ └────────┬─────────┘ │ ┌───────┴───────┐ │ │ ▼ ▼ ┌──────────┐ ┌─────────────────┐ │解析成功 │ │ 解析失败 │ └────┬─────┘ │ "无法理解" │ │ └────────┬────────┘ │ │ ▼ ▼ ┌─────────────────┐ ┌─────────────────┐ │ 生成解析结果 │ │ 提示重新输入 │ │ 自然语言展示 │ │ 或手动添加 │ └────────┬────────┘ └─────────────────┘ │ ▼ ┌─────────────────┐ │ 用户确认/修改 │ └────────┬────────┘ │ ┌─────┴─────┐ │ │ ▼ ▼ ┌─────────┐ ┌─────────────────┐ │确认创建 │ │ 修改描述 │ └────┬────┘ │ 重新解析 │ │ └─────────────────┘ ▼ ┌─────────────────┐ │ 调用创建API │ │ 纪念日/提醒 │ └────────┬────────┘ │ ▼ ┌─────────────────┐ │ 返回结果 │ │ 成功:列表高亮 │ │ 失败:错误提示 │ └─────────────────┘ ``` ### 4.4 提醒处理流程 ``` ┌─────────────────────────────────────────────────────────────┐ │ 提醒处理流程 │ └─────────────────────────────────────────────────────────────┘ ┌──────────────────┐ │ 显示提醒列表 │ │ 按时间分组显示 │ └────────┬─────────┘ │ ┌───────┴───────┐ │ │ ▼ ▼ ┌──────────────┐ ┌─────────────────┐ │ 用户操作 │ │ 时间流逝 │ │ 查看/添加 │ │ 提醒过期 │ │ 完成/删除 │ └────────┬────────┘ └───────┬──────┘ │ │ ▼ │ ┌─────────────────┐ │ │ 自动移入 │ │ │ "已错过"分组 │ │ └────────┬────────┘ │ │ │ ▼ │ ┌─────────────────┐ │ │ 用户处理过期 │ │ │ 修改时间/删除 │ │ └────────┬────────┘ │ │ └───────┬──────────┘ │ ▼ ┌───────────────────────┐ │ 完成提醒(checkbox) │ └───────────┬───────────┘ │ ▼ ┌───────────────┐ │ 更新状态 │ │ 移动到底部 │ │ 显示完成时间 │ └───────────────┘ ``` --- ## 5 页面原型说明 ### 5.1 宣传页 #### 5.1.1 页面布局 宣传页采用极简设计,分为三个主要区域:顶部导航区、内容展示区、底部信息区。 **顶部导航区**:高度60px,全宽布局。左侧显示产品Logo"掐日子"和Slogan"AI 纪念日·提醒"。右侧显示"登录"和"注册"两个按钮。背景色为白色,Logo使用品牌色。 **内容展示区**:页面主体,高度自适应。居中显示核心价值主张:"让重要日期不再错过"。下方显示功能亮点:AI智能解析、轻松管理纪念日、浏览器即时提醒。底部显示"开始使用"大按钮,点击后跳转登录/注册。整体采用留白设计,突出核心信息。 **底部信息区**:显示版权信息、隐私政策链接、服务条款链接。采用浅灰色背景,与主体区分。 #### 5.1.2 交互说明 页面加载时检查登录态。若登录态有效,自动跳转到Home页面。点击"登录"按钮,跳转到登录页面。点击"注册"按钮,跳转到注册页面。点击"开始使用"按钮,若未登录则跳转登录页面,若已登录则跳转Home页面。 ### 5.2 登录/注册页面 #### 5.2.1 页面布局 登录和注册采用同一页面布局,通过Tab切换。 页面居中显示卡片,宽度400px。卡片顶部显示产品Logo。卡片内显示两个Tab:"登录"和"注册"。 **登录Tab**:包含邮箱输入框、密码输入框、登录按钮、登录后显示"登录成功,正在跳转..."提示。底部显示"还没有账号?点击注册"链接。 **注册Tab**:包含邮箱输入框、密码输入框、确认密码输入框、注册按钮、注册后显示"注册成功,正在跳转..."提示。底部显示"已有账号?点击登录"链接。 #### 5.2.2 交互说明 Tab切换无刷新,切换时清空表单。输入框失焦时进行格式校验。点击登录/注册按钮后,禁用按钮防止重复提交。成功后跳转到Home页面,失败时显示错误提示并恢复按钮状态。 ### 5.3 Home页面 #### 5.3.1 整体布局 Home页面采用三栏布局,总宽度1200px,居中显示。 ``` ┌─────────────────────────────────────────────────────────────────────┐ │ 顶部导航栏(60px) │ ├───────────────┬───────────────────────────────────────┬─────────────┤ │ │ │ │ │ 纪念日列 │ 主内容区 │ 便签区 │ │ 表(40%) │ │ (20%) │ │ │ │ │ │ + 提醒列表 │ │ │ │ (40%) │ │ │ │ │ │ │ │ │ │ ┌─────────┐│ │ │ │ │ 便签 ││ │ │ │ │ 编辑器 ││ │ │ │ └─────────┘│ │ │ │ │ │ │ │ ┌─────────┐│ │ │ │ │ AI ││ │ │ │ │ 对话 ││ │ │ │ │ 区域 ││ │ │ │ └─────────┘│ │ │ │ │ ├───────────────┴───────────────────────────────────────┴─────────────┤ │ 底部版权信息 │ └─────────────────────────────────────────────────────────────────────┘ ``` #### 5.3.2 纪念日列表区域 **位置**:左侧40%宽度,高度自适应。 **区域结构**: - 区域标题:"纪念日" + 添加按钮(+图标) - 空状态提示:"还没有纪念日,AI对话添加或点击+创建" - 卡片列表容器 **卡片样式**:卡片高度60px,圆角8px,左侧色条标识类型。卡片元素:左侧复选框(纪念日不需要checkbox,为保持统一可省略或用于快捷操作)、纪念日名称(主标题)、倒计时(副标题)、日期标签(公历/农历)、重复标识。点击卡片弹出详情弹窗。 **分组显示**:纪念日不分组,按日期排序。即将到来的(30天内)高亮显示。 #### 5.3.3 提醒列表区域 **位置**:左侧40%宽度,高度自适应。 **区域结构**: - 区域标题:"提醒" + 添加按钮(+图标) - 空状态提示:"还没有提醒,AI对话添加或点击+创建" - 分组容器:今天、明天、更久之后、已错过 **分组样式**:分组标题使用灰色小字,左侧显示分组名称,右侧显示数量。分组内卡片列表。已错过分组使用红色提示。 **卡片样式**:卡片高度50px,圆角8px。卡片元素:左侧checkbox、内容文本、时间信息。点击卡片弹出详情弹窗。完成状态:checkbox选中、灰色划线、移到底部。 #### 5.3.4 便签区域 **位置**:右侧20%宽度,高度占右侧区域的50%。 **区域结构**: - 区域标题:"便签" + 清空按钮 - 富文本编辑器容器 **编辑器样式**:采用Quill编辑器,工具栏简化版。编辑器高度200px,支持基础格式化。编辑状态显示边框和光标,非编辑状态不显示边框。自动保存状态指示器(右上角):"已保存"或"保存中"。 #### 5.3.5 AI对话区域 **位置**:右侧20%高度,占据便签区域下方。 **区域结构**: - 对话历史区域:可滚动,显示最近对话 - 输入区域:输入框 + 发送按钮 **对话历史样式**:气泡样式,用户消息右对齐(浅色背景),AI消息左对齐(深色背景)。解析确认卡片样式区别于普通消息。 **输入区域样式**:输入框高度100px,支持多行输入。发送按钮在输入框内右下角。发送后输入框清空。 #### 5.3.6 详情弹窗 点击纪念日或提醒卡片时弹出详情弹窗。 **弹窗结构**: - 标题:"编辑纪念日"或"编辑提醒" - 表单区域:根据类型显示不同字段 - 操作按钮:"保存"、"删除"、"取消" **纪念日弹窗字段**:纪念日名称(输入框)、日期(日期选择器)、是否农历(开关)、重复方式(下拉选择:仅一次、年度重复、月度重复)。 **提醒弹窗字段**:提醒内容(文本域)、提醒时间(日期时间选择器)。 --- ## 6 数据模型 ### 6.1 用户表(users) 存储用户账户信息,是整个应用的数据根节点。 | 字段名 | 类型 | 约束 | 说明 | |--------|------|------|------| | id | UUID | PRIMARY KEY, DEFAULT uuid_generate_v4() | 用户唯一标识 | | email | VARCHAR(255) | UNIQUE, NOT NULL | 登录邮箱 | | password_hash | VARCHAR(255) | NOT NULL | 密码哈希值 | | created_at | TIMESTAMP | DEFAULT NOW() | 创建时间 | | updated_at | TIMESTAMP | DEFAULT NOW() | 更新时间 | **说明**:id作为主键,采用UUID格式保证分布式唯一性。email作为登录账号,唯一索引保证不重复。password_hash存储bcrypt哈希后的密码,不存储明文。created_at和updated_at用于审计追踪。 ### 6.2 纪念日表(anniversaries) 存储用户的纪念日数据,支持公历和农历两种日期类型。 | 字段名 | 类型 | 约束 | 说明 | |--------|------|------|------| | id | UUID | PRIMARY KEY, DEFAULT uuid_generate_v4() | 纪念日唯一标识 | | user_id | UUID | FOREIGN KEY, NOT NULL | 所属用户ID | | title | VARCHAR(100) | NOT NULL | 纪念日名称 | | date | DATE | NOT NULL | 日期(公历) | | is_lunar | BOOLEAN | DEFAULT FALSE | 是否农历 | | repeat_type | VARCHAR(20) | DEFAULT 'once' | 重复类型:once/yearly/monthly | | is_holiday | BOOLEAN | DEFAULT FALSE | 是否法定节假日 | | created_at | TIMESTAMP | DEFAULT NOW() | 创建时间 | | updated_at | TIMESTAMP | DEFAULT NOW() | 更新时间 | **说明**:user_id关联用户表,建立外键约束。date字段存储公历日期,农历日期需转换为公历后存储。is_lunar标识原始输入是否为农历。repeat_type枚举值:'once'(仅一次)、'yearly'(年度重复)、'monthly'(月度重复)。is_holiday标识是否为内置法定节假日。 ### 6.3 提醒表(reminders) 存储用户的提醒任务数据,支持按时间分组和完成状态追踪。 | 字段名 | 类型 | 约束 | 说明 | |--------|------|------|------| | id | UUID | PRIMARY KEY, DEFAULT uuid_generate_v4() | 提醒唯一标识 | | user_id | UUID | FOREIGN KEY, NOT NULL | 所属用户ID | | content | VARCHAR(500) | NOT NULL | 提醒内容 | | reminder_time | TIMESTAMP | NOT NULL | 提醒时间 | | is_completed | BOOLEAN | DEFAULT FALSE | 是否已完成 | | completed_at | TIMESTAMP | NULL | 完成时间 | | created_at | TIMESTAMP | DEFAULT NOW() | 创建时间 | | updated_at | TIMESTAMP | DEFAULT NOW() | 更新时间 | **说明**:content存储用户输入的提醒文本,最大长度500字符。reminder_time存储精确到分钟的提醒时间。is_completed标记完成状态,completed_at记录完成时刻。 ### 6.4 便签表(notes) 存储用户的便签数据,MVP阶段每用户仅一条记录。 | 字段名 | 类型 | 约束 | 说明 | |--------|------|------|------| | id | UUID | PRIMARY KEY, DEFAULT uuid_generate_v4() | 便签唯一标识 | | user_id | UUID | FOREIGN KEY, UNIQUE, NOT NULL | 所属用户ID | | content | TEXT | DEFAULT '' | 便签HTML内容 | | created_at | TIMESTAMP | DEFAULT NOW() | 创建时间 | | updated_at | TIMESTAMP | DEFAULT NOW() | 更新时间 | **说明**:user_id建立唯一索引,保证每用户只有一条便签。content存储HTML格式的富文本内容,TEXT类型支持较长内容。updated_at在每次保存时自动更新。 ### 6.5 数据关系图 ``` ┌─────────────┐ ┌─────────────────┐ │ users │ 1 ── * │ anniversaries │ └─────────────┘ └─────────────────┘ │ │ * ── 1 │ ┌─────────────┐ ┌─────────────────┐ │ notes │ 1 ── * │ reminders │ └─────────────┘ └─────────────────┘ ``` 用户表与纪念日表、提醒表为一对多关系。用户表与便签表为一对一关系。 --- ## 7 接口设计 ### 7.1 认证模块 #### 7.1.1 用户注册 **接口**:POST /api/auth/register **请求参数**: ```json { "email": "user@example.com", "password": "password123" } ``` **响应成功**(201): ```json { "success": true, "message": "注册成功", "data": { "user": { "id": "uuid-xxx", "email": "user@example.com" }, "token": "jwt-token-here" } } ``` **响应失败**(400/409): ```json { "success": false, "message": "邮箱已被注册", "errors": null } ``` #### 7.1.2 用户登录 **接口**:POST /api/auth/login **请求参数**: ```json { "email": "user@example.com", "password": "password123" } ``` **响应成功**(200): ```json { "success": true, "message": "登录成功", "data": { "user": { "id": "uuid-xxx", "email": "user@example.com" }, "token": "jwt-token-here" } } ``` **响应失败**(401): ```json { "success": false, "message": "邮箱或密码错误" } ``` ### 7.2 纪念日模块 #### 7.2.1 获取纪念日列表 **接口**:GET /api/anniversaries **请求参数**:无 **响应成功**(200): ```json { "success": true, "data": [ { "id": "uuid-xxx", "title": "妈妈生日", "date": "2026-06-15", "is_lunar": false, "repeat_type": "yearly", "countdown": 138, "created_at": "2026-01-28T10:00:00Z" } ] } ``` #### 7.2.2 创建纪念日 **接口**:POST /api/anniversaries **请求参数**: ```json { "title": "爸爸生日", "date": "1960-05-20", "is_lunar": false, "repeat_type": "yearly" } ``` **响应成功**(201): ```json { "success": true, "message": "创建成功", "data": { "id": "uuid-xxx", "title": "爸爸生日", "date": "2026-05-20", "is_lunar": false, "repeat_type": "yearly", "countdown": 82 } } ``` #### 7.2.3 更新纪念日 **接口**:PUT /api/anniversaries/:id **请求参数**: ```json { "title": "爸爸生日(改)", "date": "1960-05-20", "is_lunar": false, "repeat_type": "monthly" } ``` **响应成功**(200): ```json { "success": true, "message": "更新成功" } ``` #### 7.2.4 删除纪念日 **接口**:DELETE /api/anniversaries/:id **响应成功**(200): ```json { "success": true, "message": "删除成功" } ``` ### 7.3 提醒模块 #### 7.3.1 获取提醒列表 **接口**:GET /api/reminders **响应成功**(200): ```json { "success": true, "data": { "today": [ { "id": "uuid-xxx", "content": "提交报告", "reminder_time": "2026-01-28T15:00:00Z", "is_completed": false } ], "tomorrow": [], "later": [], "missed": [] } } ``` #### 7.3.2 创建提醒 **接口**:POST /api/reminders **请求参数**: ```json { "content": "下午三点开会", "reminder_time": "2026-01-28T15:00:00Z" } ``` **响应成功**(201): ```json { "success": true, "message": "创建成功", "data": { "id": "uuid-xxx", "content": "下午三点开会", "reminder_time": "2026-01-28T15:00:00Z", "is_completed": false } } ``` #### 7.3.3 更新提醒 **接口**:PUT /api/reminders/:id **请求参数**: ```json { "content": "下午三点开项目会", "reminder_time": "2026-01-29T15:00:00Z" } ``` **响应成功**(200): ```json { "success": true, "message": "更新成功" } ``` #### 7.3.4 标记提醒完成 **接口**:PATCH /api/reminders/:id/complete **响应成功**(200): ```json { "success": true, "message": "已完成" } ``` #### 7.3.5 取消完成 **接口**:PATCH /api/reminders/:id/uncomplete **响应成功**(200): ```json { "success": true, "message": "已取消完成" } ``` #### 7.3.6 删除提醒 **接口**:DELETE /api/reminders/:id **响应成功**(200): ```json { "success": true, "message": "删除成功" } ``` ### 7.4 便签模块 #### 7.4.1 获取便签 **接口**:GET /api/notes **响应成功**(200): ```json { "success": true, "data": { "id": "uuid-xxx", "content": "

今日待办

", "updated_at": "2026-01-28T12:00:00Z" } } ``` #### 7.4.2 保存便签 **接口**:PUT /api/notes **请求参数**: ```json { "content": "

今日待办

" } ``` **响应成功**(200): ```json { "success": true, "message": "保存成功", "data": { "id": "uuid-xxx", "updated_at": "2026-01-28T12:30:00Z" } } ``` ### 7.5 AI模块 #### 7.5.1 自然语言解析 **接口**:POST /api/ai/parse **请求参数**: ```json { "text": "提醒我下周三交论文" } ``` **响应成功**(200): ```json { "success": true, "data": { "type": "reminder", "title": "交论文", "date": "2026-02-05", "time": "09:00", "is_lunar": false, "repeat_type": null, "confidence": 0.85, "raw_output": "已识别到:提醒『交论文』,时间暂定为2026年2月5日,请确认具体日期。" } } ``` #### 7.5.2 解析并创建 **接口**:POST /api/ai/create **请求参数**: ```json { "text": "提醒我下周三交论文", "confirmed": true, "adjustments": { "date": "2026-02-06" } } ``` **响应成功**(201): ```json { "success": true, "message": "创建成功", "data": { "type": "reminder", "id": "uuid-xxx" } } ``` ### 7.6 通用错误响应 所有接口的错误响应格式统一: **400 Bad Request**: ```json { "success": false, "message": "请求参数错误", "errors": { "email": "邮箱格式不正确" } } ``` **401 Unauthorized**: ```json { "success": false, "message": "未登录或登录已过期" } ``` **403 Forbidden**: ```json { "success": false, "message": "无权访问该资源" } ``` **404 Not Found**: ```json { "success": false, "message": "资源不存在" } ``` **500 Internal Server Error**: ```json { "success": false, "message": "服务器错误,请稍后重试" } ``` --- ## 8 验收标准 ### 8.1 登录与认证模块 **注册功能验收标准**: - 用户能够通过邮箱和密码完成注册 - 注册时邮箱格式校验正确,无效邮箱无法提交 - 密码要求至少8位且包含字母数字,强度不足时提示 - 已注册邮箱无法重复注册,提示"邮箱已被注册" - 注册成功后自动登录并跳转到Home页面 - 注册成功后自动创建一条空便签记录 **登录功能验收标准**: - 用户能够通过邮箱和密码完成登录 - 登录时邮箱格式校验正确 - 邮箱或密码错误时统一提示"邮箱或密码错误" - 登录成功后显示成功提示并跳转到Home页面 - 登录成功后登录态保存到localStorage,有效期30天 - 已登录用户刷新页面或重新访问,自动跳转到Home页面 **登出功能验收标准**: - 用户点击登出按钮后清除登录态 - 登出后自动跳转到宣传页 - 登出后重新访问需要重新登录 **登录态保持验收标准**: - 登录后关闭浏览器再打开,无需重新登录 - 登录态过期后自动登出,提示登录 - 多Tab页面一个Tab登出后,其他Tab同步更新状态 ### 8.2 纪念日管理模块 **查看纪念日验收标准**: - Home页面左侧显示纪念日列表 - 列表显示所有纪念日卡片,按日期排序 - 卡片显示名称、倒计时、日期类型、重复标识 - 公历纪念日显示"公历"标识,农历纪念日显示"农历"标识 - 法定节假日显示节日图标 - 点击卡片弹出详情弹窗 **添加纪念日验收标准**: - 点击添加按钮弹出添加弹窗 - 手动添加时名称、日期、是否农历、重复方式为必填 - 日期选择器支持公历日期选择 - 农历开关切换后日期选择器支持农历(可用农历选择器组件) - 重复方式支持下拉选择(仅一次、年度重复、月度重复) - 提交后验证必填字段,验证失败显示错误提示 - 验证通过后创建成功,列表更新显示新卡片 - 纪念日创建后倒计时正确计算 **内置节假日验收标准**: - 系统预置中国法定节假日列表 - 点击"添加节假日"按钮显示节假日选择列表 - 选择节假日后自动创建对应的纪念日 - 节假日默认设置为年度重复 **倒计时显示验收标准**: - 未到来的纪念日显示倒计时天数 - 倒计时大于365天显示"还有X年" - 倒计时1-365天显示"还有X天" - 当天纪念日显示"今日" - 已过纪念日显示"已过X天" **二次编辑验收标准**: - 点击纪念日卡片弹出详情弹窗 - 弹窗显示纪念日的完整信息 - 用户可修改名称、日期、是否农历、重复方式 - 修改后点击保存,系统更新数据库 - 弹窗提供删除功能,确认后删除纪念日 - 删除后列表更新,纪念日不再显示 ### 8.3 提醒管理模块 **查看提醒列表验收标准**: - Home页面左侧显示提醒列表 - 列表分为四个分组:今天、明天、更久之后、已错过 - 每个分组只显示该时间范围内的提醒 - 已过期未完成的提醒自动归入"已错过"分组 - 分组标题显示分组名称和提醒数量 - 提醒卡片显示内容摘要和时间 - 点击卡片弹出详情弹窗 **添加提醒验收标准**: - 点击添加按钮弹出添加弹窗 - 手动添加时内容和时间为必填 - 日期时间选择器支持精确到分钟 - 提交后验证必填字段,验证失败显示错误提示 - 验证通过后创建成功,列表更新显示新卡片 - 新创建的提醒正确归入对应分组 **标记完成验收标准**: - 点击提醒卡片左侧checkbox标记完成 - 完成的提醒显示灰色划线效果 - 完成的提醒移动到所在分组的底部 - 取消checkbox勾选可撤销完成状态 - 撤销后提醒恢复原位置 - 已完成提醒不进入"已错过"分组 **过期提醒验收标准**: - 提醒时间过期且未完成时自动归入"已错过"分组 - "已错过"分组按过期时间从远到近排序 - 过期提醒使用红色高亮提示 - 点击过期提醒可修改时间或删除 - 修改时间后提醒重新归入对应分组 **二次编辑验收标准**: - 点击提醒卡片弹出详情弹窗 - 弹窗显示提醒的完整信息 - 用户可修改内容和时间 - 修改后点击保存,系统更新数据库 - 弹窗提供删除功能,确认后删除提醒 ### 8.4 便签功能验收标准** **查看便签验收标准**: - Home页面右侧显示便签区域 - 便签区域显示富文本内容 - 便签为空时显示占位提示文字 - 便签内容正确换行显示 **编辑便签验收标准**: - 点击便签区域进入编辑模式 - 编辑器支持基础格式化:标题、加粗、斜体、列表 - 编辑器支持插入链接 - 用户可正常输入和编辑内容 - 编辑器显示光标和选中文本 **自动保存验收标准**: - 用户编辑内容变化后自动保存 - 保存间隔不超过500毫秒 - 保存期间显示"保存中"状态指示 - 保存完成显示"已保存"状态指示 - 网络断开时显示"离线保存"提示 - 恢复网络后自动同步未保存内容 - 刷新页面后内容不丢失 **清空便签验收标准**: - 点击清空按钮弹出确认提示 - 确认后便签内容清空 - 便签记录保留,可重新编辑 ### 8.5 AI对话功能验收标准 **发起对话验收标准**: - AI对话区域显示对话历史 - 用户可在输入框中输入文字 - 点击发送按钮提交输入 - 输入非空校验,空白输入不发送 **自然语言解析验收标准**: - 系统正确解析用户输入的日期描述 - 能够识别公历和农历日期 - 能够识别重复方式(年度、月度) - 能够区分纪念日和提醒类型 - 解析结果以自然语言展示 - 无法解析时显示友好提示 **确认与创建验收标准**: - 解析结果显示确认卡片 - 用户点击确认后创建对应的纪念日或提醒 - 创建成功后显示成功提示 - 创建成功后列表高亮显示新项目 - 用户可修改解析结果后创建 **对话历史验收标准**: - 对话历史保留最近10条 - 用户发送和AI回复交替显示 - 对话历史在页面刷新后保持 - 新对话从底部开始 ### 8.6 浏览器通知验收标准 **请求权限验收标准**: - 首次访问Home页面时检测通知权限 - 未授权时显示通知授权提示条 - 点击"启用"按钮调用浏览器通知API - 用户选择允许或拒绝后提示条隐藏 - 权限状态在界面上显示 **发送通知验收标准**: - 纪念日当天早上9:00发送通知 - 提醒在设定时间到达时发送 - 过期提醒每天早上9:00发送汇总 - 通知标题显示"掐日子" - 通知内容正确显示纪念日名称或提醒内容 **通知设置验收标准**: - 用户可在设置中开启/关闭通知 - 可分别控制纪念日通知和提醒通知 - 可设置每日通知的发送时间 - 设置修改后立即生效 --- ## 9 里程碑规划 ### 9.1 阶段一:基础架构搭建(预估3天) **目标**:完成项目初始化和基础架构搭建,为后续功能开发提供基础。 **交付物**: - Git仓库初始化,代码规范和提交规范确定 - React 18 + Vite项目搭建完成 - Tailwind CSS和Mantine组件库集成 - Supabase项目创建,数据库表结构创建完成 - 基础路由和页面结构搭建 - 项目目录结构和代码规范文档 **技术要点**: - 配置ESLint和Prettier代码格式化 - 配置Tailwind CSS主题和设计变量 - 配置Supabase客户端和认证状态管理 - 搭建基础Layout组件和页面框架 **评审标准**: - 项目能够正常运行,npm run dev无报错 - 代码符合ESLint规范 - 数据库表结构与PRD设计一致 - 路由配置正确,页面能够正常切换 ### 9.2 阶段二:认证模块开发(预估2天) **目标**:完成用户注册、登录、登出功能,实现登录态保持。 **交付物**: - 宣传页(登录态有效时跳转Home) - 登录页面 - 注册页面 - 登录态管理和认证中间件 - Supabase认证集成 **技术要点**: - Supabase Auth认证集成 - localStorage登录态管理 - 路由守卫实现 - 错误处理和提示 **评审标准**: - 用户能够成功注册和登录 - 登录态保持正确,有效期内无需重新登录 - 未登录用户访问Home页面自动跳转到宣传页 - 登出功能正常,登录态清除 ### 9.3 阶段三:纪念日模块开发(预估3天) **目标**:完成纪念日的增删改查、倒计时显示、重复规则、内置节假日。 **交付物**: - 纪念日列表页面组件 - 添加纪念日弹窗 - 编辑纪念日弹窗 - 内置节假日数据 - 纪念日API服务 - 倒计时计算逻辑 **技术要点**: - 纪念日数据CRUD API - 农历日期转换(使用lunar-javascript) - 倒计时计算算法 - 重复规则逻辑实现 **评审标准**: - 能够添加、查看、编辑、删除纪念日 - 纪念日支持公历和农历两种类型 - 倒计时显示正确 - 重复规则(年度、月度)正确实现 - 内置节假日可快速添加 - 纪念日按日期排序显示 ### 9.4 阶段四:提醒模块开发(预估3天) **目标**:完成提醒的增删改查、分组显示、过期处理、完成标记。 **交付物**: - 提醒列表页面组件 - 添加提醒弹窗 - 编辑提醒弹窗 - 提醒分组逻辑 - 完成/取消完成功能 - 过期提醒处理 **技术要点**: - 提醒数据CRUD API - 提醒时间分组算法 - 过期检测和分组逻辑 - 完成状态管理 **评审标准**: - 能够添加、查看、编辑、删除提醒 - 提醒按时间分组显示(今天、明天、更久之后、已错过) - 过期提醒正确归入"已错过"分组 - 完成/取消完成功能正常 - 提醒按时间排序显示 ### 9.5 阶段五:便签模块开发(预估2天) **目标**:完成便签的富文本编辑和自动保存功能。 **交付物**: - 便签编辑区域组件 - Quill富文本集成 - 自动保存逻辑 - 便签API服务 **技术要点**: - Quill编辑器配置和自定义 - 自动保存防抖实现 - HTML内容存储和渲染 - 离线保存状态处理 **评审标准**: - 便签支持富文本编辑(标题、加粗、列表等) - 内容编辑后自动保存,无需手动操作 - 保存状态正确显示(保存中、已保存) - 网络断开时显示离线保存提示 - 页面刷新后内容不丢失 ### 9.6 阶段六:AI对话模块开发(预估3天) **目标**:完成AI对话的自然语言解析和创建功能。 **交付物**: - AI对话区域组件 - 自然语言解析API集成 - 解析结果展示和确认界面 - 解析后创建纪念日/提醒功能 **技术要点**: - AI服务API集成 - NLP语义解析逻辑 - 解析结果自然语言展示 - 用户确认后创建流程 **评审标准**: - 能够以自然语言描述创建纪念日或提醒 - AI能够正确识别日期类型(公历/农历) - AI能够识别重复方式 - 解析结果以自然语言展示供用户确认 - 用户确认后正确创建 - 无法解析时显示友好提示 ### 9.7 阶段七:浏览器通知开发(预估1天) **目标**:完成浏览器桌面通知功能。 **交付物**: - 通知权限请求逻辑 - 纪念日通知发送 - 提醒通知发送 - 过期提醒汇总通知 - 通知设置界面 **技术要点**: - 浏览器通知API调用 - 通知权限状态管理 - 定时任务或定时轮询发送通知 - 通知设置持久化 **评审标准**: - 首次访问时能够请求通知权限 - 纪念日当天发送通知 - 提醒时间到达时发送通知 - 过期提醒发送汇总通知 - 通知设置能够开启/关闭各类通知 ### 9.8 阶段八:联调测试与修复(预估3天) **目标**:完成全功能联调、问题修复和体验优化。 **交付物**: - 全功能联调测试 - Bug修复和问题解决 - 界面细节优化 - 性能优化 - 测试用例编写 **工作内容**: - 各模块集成测试 - 跨模块流程测试 - 响应式布局适配 - 加载状态和错误状态优化 - 与QA工程师协作完成测试 **评审标准**: - 所有功能模块正常运行 - 各模块间数据流转正确 - 界面交互流畅,无明显卡顿 - 错误处理完善,用户体验良好 - 通过QA验收测试 ### 9.9 阶段九:部署上线(预估1天) **目标**:完成生产环境部署和发布。 **交付物**: - 生产环境配置 - 域名和SSL配置 - 监控和日志配置 - 上线检查清单 - 上线文档 **工作内容**: - 构建生产版本 - 部署到Vercel/Netlify - 配置自定义域名 - 配置环境变量 - 验证生产环境功能正常 **评审标准**: - 生产环境能够正常访问 - 所有功能在生产环境正常运行 - 页面加载速度满足要求 - 监控和日志配置完成 - 回滚方案准备就绪 ### 9.10 里程碑总览 | 阶段 | 内容 | 预估工期 | 累计工期 | |------|------|----------|----------| | 阶段一 | 基础架构搭建 | 3天 | 3天 | | 阶段二 | 认证模块开发 | 2天 | 5天 | | 阶段三 | 纪念日模块开发 | 3天 | 8天 | | 阶段四 | 提醒模块开发 | 3天 | 11天 | | 阶段五 | 便签模块开发 | 2天 | 13天 | | 阶段六 | AI对话模块开发 | 3天 | 16天 | | 阶段七 | 浏览器通知开发 | 1天 | 17天 | | 阶段八 | 联调测试与修复 | 3天 | 20天 | | 阶段九 | 部署上线 | 1天 | 21天 | **总体预估工期**:21个工作日 **风险提示**: - AI服务API集成可能需要额外时间调优 - 农历日期处理可能遇到边界情况 - 浏览器通知在不同浏览器上表现可能不一致 - 建议预留3天缓冲时间应对意外情况 --- ## 附录 ### A. 术语表 | 术语 | 说明 | |------|------| | MVP | Minimum Viable Product,最小可行产品 | | Supabase | 开源的后端即服务(BaaS)平台 | | Quill | 富文本编辑器库 | | lunar-javascript | 农历日期处理库 | | date-fns | 日期处理工具库 | | JWT | JSON Web Token,用于身份认证 | ### B. 参考资料 - [React 18官方文档](https://react.dev/) - [Vite官方文档](https://vitejs.dev/) - [Mantine官方文档](https://mantine.dev/) - [Tailwind CSS官方文档](https://tailwindcss.com/) - [Supabase官方文档](https://supabase.com/docs) - [Quill官方文档](https://quilljs.com/) - [date-fns官方文档](https://date-fns.org/) - [lunar-javascript GitHub](https://github.com/6tail/lunar-javascript) ### C. 修改记录 | 版本 | 日期 | 修改内容 | 修改人 | |------|------|----------|--------| | v1.0.0 | 2026-01-28 | 初稿完成 | 产品经理 | | v1.0.1 | 2026-02-03 | 完善提醒模块,实现归档页、设置页、优化样式 | 产品经理 | --- ## 10 实施状态追踪 ### 10.1 功能实现状态 | 模块 | 功能点 | 状态 | 备注 | |------|--------|------|------| | **认证模块** | 用户注册 | ✅ 已完成 | 邮箱密码认证 | | | 用户登录 | ✅ 已完成 | JWT登录态 | | | 登录态保持 | ✅ 已完成 | localStorage 30天 | | | 登出功能 | ✅ 已完成 | | | **纪念日模块** | 查看列表 | ✅ 已完成 | 倒计时显示 | | | 添加纪念日 | ✅ 已完成 | AI+手动添加 | | | 编辑纪念日 | ✅ 已完成 | 详情弹窗 | | | 删除纪念日 | ✅ 已完成 | | | | 内置节假日 | ✅ 已完成 | 农历转换修复 | | | 倒计时计算 | ✅ 已完成 | | | **提醒模块** | 查看列表 | ✅ 已完成 | 分组显示 | | | 添加提醒 | ✅ 已完成 | AI+手动添加 | | | 编辑提醒 | ✅ 已完成 | 详情弹窗 | | | 删除提醒 | ✅ 已完成 | | | | 标记完成 | ✅ 已完成 | checkbox交互 | | | 过期检测 | ✅ 已完成 | 精确到时间点 | | | 已过期分组 | ✅ 已完成 | 红色高亮 | | | 归档功能 | ✅ 已完成 | 独立归档页 | | **便签模块** | 查看便签 | ✅ 已完成 | | | | 编辑便签 | ✅ 已完成 | Markdown支持 | | | 自动保存 | ✅ 已完成 | | | **AI对话** | 自然语言解析 | ✅ 已完成 | | | | 解析确认 | ✅ 已完成 | | | | 创建纪念日/提醒 | ✅ 已完成 | | | **设置** | 显示设置 | ✅ 已完成 | 节假日显示开关 | | **其他** | 归档页 | ✅ 已完成 | 恢复/删除功能 | | | 设置页 | ✅ 已完成 | 基础框架 | | | 重复提醒完成移除设置 | ✅ 已完成 | 勾选完成后移除repeat_type等字段 | | | 逾期列表展开收起 | ✅ 已完成 | 默认收起,最多3条,点击展开 | | | 无时间提醒显示优化 | ✅ 已完成 | 只显示日期,不显示00:00 | ### 10.2 提醒模块当前实现详情 #### 10.2.1 分组逻辑 ``` 提醒按以下规则分组显示: - 今天:eventDate < tomorrow (今晚24点前) - 明天:tomorrow <= eventDate < dayAfterTomorrow - 更久之后:eventDate >= dayAfterTomorrow - 已错过:eventDate < now (精确到时间点,不只是日期) ``` #### 10.2.2 状态样式 | 状态 | 边框 | 背景 | 文字颜色 | 时间颜色 | |------|------|------|----------|----------| | 默认 | 浅灰 | 透明 | #1a1a1a | #666 | | 已过期 | 浅红(左边框3px) | 浅红 | #666 | #c41c1c | | 已完成 | 浅灰 | 透明 | #999 | #bbb | #### 10.2.3 交互效果 - **checkbox点击**:切换完成状态,已过期提醒有淡出动画 - **卡片点击**:打开编辑弹窗 - **悬停效果**:卡片轻微上浮,更多按钮渐显 - **勾选动画**:checkbox 脉冲动画 ### 10.3 技术优化项 | 项目 | 状态 | 说明 | |------|------|------| | 乐观更新 | ✅ 已完成 | UI即时响应,失败回滚 | | 状态持久化 | ✅ 已完成 | localStorage + 后端 | | API数据覆盖 | ✅ 已修复 | 避免undefined覆盖有效值 | | 后端is_completed | ✅ 已修复 | zod schema添加字段 | --- ## 11 后续开发计划 ### 11.1 短期计划(v1.0.2)- 核心体验优化 **目标**:打磨核心功能,提升用户体验稳定性 | 优先级 | 功能 | 描述 | 预估工时 | |--------|------|------|----------| | P0 | 提醒弹窗完善 | 添加日期时间选择器、表单验证 | 0.5天 | | P0 | 纪念日弹窗完善 | 添加农历选择、重复方式下拉 | 0.5天 | | P1 | 节日显示开关 | 设置页控制是否显示法定节假日 | 0.25天 | | P1 | 移动端适配 | 响应式布局优化 | 0.5天 | | P2 | 加载状态优化 | 添加骨架屏、loading动画 | 0.25天 | | P2 | 错误提示优化 | 统一错误处理和提示样式 | 0.25天 | ### 11.2 中期计划(v1.1.0)- 功能增强 **目标**:增强核心功能,添加辅助功能 | 优先级 | 功能 | 描述 | 预估工时 | |--------|------|------|----------| | P1 | 浏览器通知 | 纪念日/提醒通知权限和发送 | 1天 | | P1 | AI对话优化 | 解析结果编辑、多轮对话 | 1天 | | P2 | 数据导出 | 导出纪念日/提醒为JSON/CSV | 0.5天 | | P2 | 批量操作 | 批量删除、批量完成 | 0.5天 | | P3 | 搜索功能 | 搜索纪念日和提醒 | 0.5天 | ### 11.3 长期计划(v1.2.0+)- 生态扩展 **目标**:扩展使用场景,提升产品价值 | 功能 | 描述 | 预估工时 | |------|------|----------| | 微信小程序 | 跨平台覆盖,方便移动端使用 | 3天 | | 数据统计 | 纪念日统计、提醒完成率 | 1天 | | 主题切换 | 浅色/深色/主题色 | 0.5天 | | 分享功能 | 分享纪念日卡片 | 0.5天 | | 重复规则增强 | 自定义重复周期、结束日期 | 1天 | ### 11.4 技术债 | 项目 | 描述 | 优先级 | |------|------|--------| | 代码规范 | ESLint/Prettier配置完善 | P2 | | 单元测试 | 核心函数测试覆盖 | P3 | | 性能优化 | 大数据量场景优化 | P3 | | 文档完善 | API文档、开发者文档 | P2 | ### 11.5 里程碑更新 | 版本 | 内容 | 状态 | 预计完成 | |------|------|------|----------| | v1.0.0 | MVP基础功能 | ✅ 已完成 | 2026-01-28 | | v1.0.1 | 提醒模块完善、归档页 | ✅ 已完成 | 2026-02-03 | | v1.0.2 | 核心体验优化、重复提醒完成移除设置、逾期列表展开收起 | ✅ 已完成 | 2026-02-04 | | v1.1.0 | 功能增强 | 计划中 | 待定 | | v1.2.0 | 生态扩展 | 计划中 | 待定 | --- ## 12 重复提醒功能设计 ### 12.1 功能概述 重复提醒功能允许用户创建周期性的提醒任务,系统自动按照设定的周期计算下一次提醒时间。当前支持三种重复模式:每天、每周、每年。重复提醒从用户设置的首次提醒时间开始,按固定周期循环显示。 ### 12.2 重复模式定义 | 重复类型 | 描述 | 示例 | |----------|------|------| | **每天(daily)** | 每天同一时间提醒 | 每天早上8点吃药 | | **每周(weekly)** | 每周同一星期同一时间提醒 | 每周五下午3点开会 | | **每年(yearly)** | 每年同一日期同一时间提醒 | 每年3月15日交论文 | ### 12.3 数据模型扩展 #### 12.3.1 提醒表扩展(reminders) 在现有提醒表基础上增加重复相关字段: | 字段名 | 类型 | 约束 | 说明 | |--------|------|------|------| | id | UUID | PRIMARY KEY | 提醒唯一标识 | | user_id | UUID | FOREIGN KEY | 所属用户ID | | type | VARCHAR(20) | DEFAULT 'reminder' | 类型:reminder/anniversary | | title | VARCHAR(200) | NOT NULL | 提醒标题 | | content | VARCHAR(500) | | 提醒内容 | | date | TIMESTAMP | NOT NULL | 当前提醒日期(展示用) | | is_lunar | INTEGER | DEFAULT 0 | 是否为农历日期 | | repeat_type | VARCHAR(20) | DEFAULT 'none' | 重复类型:none/daily/weekly/monthly/yearly | | repeat_interval | INTEGER | | 周数间隔(仅 weekly 类型使用) | | next_reminder_date | TIMESTAMP | | 下一次提醒日期(计算用,基于周期推算) | | is_holiday | INTEGER | DEFAULT 0 | 是否为节假日(仅纪念日) | | is_completed | INTEGER | DEFAULT 0 | 是否已完成 | | created_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 创建时间 | | updated_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 更新时间 | **字段说明**: - `date`:当前提醒日期(展示用),用于分组和展示 - `next_reminder_date`:下一次提醒日期,基于周期推算得出。创建时自动计算,勾选完成时用于计算下一条记录 - `repeat_type`:'none'表示不重复,'daily'每天,'weekly'每周,'monthly'每月,'yearly'每年 - `repeat_interval`:周数间隔,仅 weekly 类型使用 #### 12.3.2 重复周期计算规则 **每天重复**: ``` next_date = current_date + 1天 时间保持不变 ``` **每周重复**: ``` next_date = current_date + 7天 时间保持不变 星期几根据repeat_base_date确定 ``` **每年重复**: ``` next_date = current_date + 1年 如果下一年该日期不存在(如2月29日),则调整为2月28日 时间保持不变 ``` ### 12.4 功能详细描述 #### 12.4.1 添加重复提醒 **手动添加**: 用户点击提醒列表上方的添加按钮,弹出添加弹窗。表单字段: - 提醒内容(必填) - 提醒时间(必填,日期+时间) - 重复方式(下拉选择):不重复 / 每天 / 每周 / 每月 / 每年 **AI对话添加**: 用户输入自然语言描述,系统自动识别重复规则: - "每天早上8点吃药" → 自动识别为每天重复 - "每周五下午3点开会" → 自动识别为每周重复 - "每年3月15日交论文" → 自动识别为每年重复 - "提醒我明天下午3点开会" → 不重复 #### 12.4.2 卡片显示规则 **正常提醒卡片**(未逾期、未完成): ``` ┌─────────────────────────────────────────────────────────┐ │ [checkbox] 标题 [循环icon] 2月3日 14:00 │ │ 内容... │ └─────────────────────────────────────────────────────────�循环icon位置:在日期时间左侧 ``` **逾期提醒卡片**(已过期、未完成): ``` ┌─────────────────────────────────────────────────────────┐ │ [checkbox] 标题 [循环icon] │ │ 内容... 2月1日 14:00 (已错过) │ └─────────────────────────────────────────────────────────┘ 循环icon位置:在标题右侧 ``` **循环icon设计**: - 样式:循环箭头图标(类似⟳) - 颜色:与重复类型相关 - 每天:蓝色 - 每周:绿色 - 每年:紫色 - 悬停提示:显示重复类型("每天重复"、"每周重复"、"每年重复") #### 12.4.3 列表显示规则 **常规分组显示**(今天、明天、更久之后): - 每个重复提醒在常规列表中**只显示最近1条未逾期、未完成的记录** - 当用户勾选完成当前提醒后: 1. 当前记录标记完成,移入归档 2. 自动计算下一周期日期 3. 下一周期记录出现在对应分组中 - 始终保持每个重复提醒只有1条可见记录 **示例**: 用户创建"每天早上8点吃药",首次日期为2月3日: - 2月3日显示在"今天"分组 - 用户勾选完成后,2月3日记录归档,2月4日自动出现在"明天"分组 - 依此类推 **已错过分组显示**: - **所有逾期未勾选的重复提醒都显示**,不只显示1条 - 按过期时间从远到近排序 - 勾选完成后,自动计算下一周期并显示 #### 12.4.4 重复提醒完成流程 ``` 用户勾选完成当前重复提醒 │ ▼ ┌─────────────────────────────────────────────────────────┐ │ 1. 当前记录标记完成 │ │ - is_completed = true │ │ - 移除重复设置:repeat_type = 'none' │ │ repeat_interval = null │ │ next_reminder_date = null │ │ - 移入归档页 │ └───────────┬─────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ 2. 从 原始next_reminder_date 开始循环计算 │ │ 直到找到 >= 当前日期 的日期作为新提醒日期 │ │ (注意:使用计算后的日期,不使用已清空的字段) │ │ │ │ 示例: │ │ - 原始next_reminder_date = 02-04 08:00 │ │ - 当前日期 = 02-05 │ │ - 02-04 < 02-05 → 不满足 │ │ - 02-05 >= 02-05 → 满足 │ │ - 新提醒日期 = 02-05 08:00 │ └───────────┬─────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ 3. 检查是否已存在相同提醒(去重) │ │ 条件:title + date + repeat_type 完全相同 │ │ - 存在:跳过,不创建 │ │ - 不存在:创建新记录 │ └───────────┬─────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ 4. 创建新记录 │ │ - date = 新提醒日期 │ │ - repeat_type = 原始重复类型 │ │ - repeat_interval = 原始间隔 │ │ - next_reminder_date = 新提醒日期 + 周期 │ └───────────┬─────────────────────────────────────────────┘ │ ▼ 新记录出现在对应时间分组中(带循环图标) ``` **去重规则**: 创建新提醒时检查是否存在完全相同的记录: - 条件:title + date + repeat_type 完全相同 - 存在:跳过,不创建 - 不存在:创建新记录 #### 12.4.5 二次编辑 用户点击重复提醒卡片,弹出详情弹窗: - 可修改:标题、内容、日期时间、重复方式 - 修改重复方式后,下次周期按新规则计算 - 修改日期时间后: - **不自动更新 next_reminder_date** - 下次勾选完成时,会从原来的 next_reminder_date 继续计算 - 这样可以保持原始周期不被打破 #### 12.4.6 顺延逻辑(仅逾期提醒) **场景**:用户错过了提醒日期,想要将提醒顺延到今天 - 只更改 `date`(当前提醒日期) - **不更改** `next_reminder_date`(下一次提醒日期) - 这样下次勾选完成时,会从原始的 next_reminder_date 继续计算周期 **示例**: 原始记录(2月1日创建): ``` date = 02-01 08:00 next_reminder_date = 02-02 08:00 ``` 顺延到今天(2月3日)后: ``` date = 02-03 08:00 ← 改变 next_reminder_date = 02-02 08:00 ← 不变! ``` 2月3日勾选完成后: ``` 从 next_reminder_date (02-02 08:00) 开始计算 02-02 < 当前日期(02-03) → 不满足 02-03 >= 当前日期 → 满足 新记录:date = 02-03 08:00, next_reminder_date = 02-04 08:00 ``` ### 12.5 交互流程图 ``` ┌─────────────────────────────────────────────────────────────┐ │ 重复提醒创建流程 │ └─────────────────────────────────────────────────────────────┘ ┌──────────────────┐ │ 用户添加提醒 │ └────────┬─────────┘ │ ┌───────┴───────┐ │ │ ▼ ▼ ┌─────────┐ ┌─────────────────┐ │ 手动添加 │ │ AI对话添加 │ └────┬────┘ └────────┬────────┘ │ │ ▼ ▼ ┌─────────────────────────────┐ │ 填写/识别重复方式 │ │ none / daily / weekly / │ │ yearly │ └─────────────┬───────────────┘ │ ▼ ┌─────────────────────────────┐ │ 设置重复基准日期 │ │ repeat_base_date │ │ (首次提醒时间) │ └─────────────┬───────────────┘ │ ▼ ┌─────────────────────────────┐ │ 创建提醒记录 │ │ date = repeat_base_date │ │ repeat_type = 设置值 │ └─────────────┬───────────────┘ │ ▼ ┌─────────────────────────────────────────┐ │ 显示在对应分组中 │ │ 并显示循环icon │ └─────────────────────────────────────────┘ ``` ### 12.6 业务规则 1. **重复基准**:所有重复从用户设置的首次时间开始,不支持"从下周一才开始"等偏移 2. **时间不变**:重复时只改变日期,时间分量保持不变 3. **闰年处理**:2月29日出生的用户,每年2月28日提醒 4. **批量操作限制**:重复提醒不支持批量删除,需要逐条确认 5. **归档保留**:已完成的历史记录保留在归档页,供用户追溯 6. **数量限制**:单用户最多100个有效重复提醒(防止滥用) ### 12.7 验收标准 | 场景 | 验收标准 | |------|----------| | 创建每天重复 | 创建后显示在对应分组,日期时间正确 | | 创建每周重复 | 创建后显示在对应分组,日期+7天计算正确 | | 创建每年重复 | 创建后显示在对应分组,跨年日期正确 | | 循环icon显示 | 正常卡片在日期时间左侧,逾期卡片在标题右侧 | | 勾选完成 | 当前记录归档,下一周期记录出现 | | 逾期列表 | 所有逾期未完成记录都显示,不只1条 | | 编辑重复方式 | 修改后按新规则计算后续周期 | | 闰年日期 | 2月29日创建的每年重复,2月28日提醒 | --- ## 13 交互优化设计 ### 13.1 退出后跳转优化 **当前行为**:退出后跳转到登录页 **优化行为**:退出后跳转到宣传页 **修改位置**:`HomePage.tsx` 的 `handleLogout` 函数 ```typescript const handleLogout = async () => { await logout(); navigate('/landing'); // 改为跳转到宣传页 }; ``` ### 13.2 提醒列表归档入口优化 **当前状态**: - Home页面右上角有归档入口 - 提醒列表Header有归档入口 **优化方案**: - 移除Home页面右上角的归档入口 - 保留提醒列表Header中的归档入口(与归档页功能一致) ### 13.3 归档图标抖动动画 **触发时机**:用户勾选完成逾期提醒后 **动画效果**: 1. 卡片播放淡出动画(300ms) 2. 动画完成后,归档图标触发缩放抖动动画(400ms) 3. 示意"该提醒已收入归档" **实现方式**:CSS animation `@keyframes archive-shake` ### 13.4 分类折叠功能 **位置**:提醒列表的"今天"、"明天"、"更久之后"分类 **功能描述**: - 每个分类标题右侧显示展开/折叠图标 - 默认全部展开 - 点击分类标题或图标切换展开/折叠状态 - 折叠后隐藏该分类下所有卡片 **图标设计**: - 展开状态:下箭头 `IconChevronDown` - 折叠状态:右箭头 `IconChevronRight` ### 13.5 逾期列表展开/收起功能 **位置**:提醒列表的"已错过"分组 **功能描述**: - 默认收起状态,最多显示3条逾期提醒 - 超过3条时显示"还有 X 个逾期提醒..."链接,点击展开 - 展开后显示所有逾期提醒,底部显示"收起"按钮 - 收起后恢复显示前3条 **交互效果**: - 点击"还有 X 个逾期提醒..."展开全部逾期列表 - 展开后底部显示收起按钮,点击可收起 - 收起/展开切换时有平滑过渡效果 **业务规则**: - 无论逾期数量多少,默认只显示前3条 - 展开后显示所有逾期未完成提醒 - 已过期且已完成的提醒自动移入归档页,不显示在逾期列表 ### 13.6 无时间提醒显示优化 **问题场景**: - 用户创建的提醒未设置具体时间(00:00) - 自动创建的重复提醒时间显示异常 **优化方案**: - 判断逻辑:检查小时和分钟是否全为0 - 如果 hours === 0 && minutes === 0,视为"未设置时间" - 显示格式:只显示日期(如"2月5日"),不显示时间 - 归档列表同样适用此规则 --- ### C. 修改记录 | 版本 | 日期 | 修改内容 | 修改人 | |------|------|----------|--------| | v1.0.0 | 2026-01-28 | 初稿完成 | 产品经理 | | v1.0.1 | 2026-02-03 | 完善提醒模块,实现归档页、设置页、优化样式 | 产品经理 | | v1.0.2 | 2026-02-04 | 退出跳转宣传页、移除重复归档入口、归档抖动动画、分类折叠、重复提醒完成移除设置、逾期列表展开收起、无时间提醒显示优化 | 产品经理 | | v1.1.0 | 待定 | 重复提醒功能:每天/每周/每年重复、循环图标、列表显示优化 | 产品经理 |