“ 目录：Vibe Coding -> 3 开发小程序 ”

一、明确规范要求

参考开源项目下的design_wise.md和AGENTS.md文件

开源地址：https://github.com/wuzuniao/yao

二、初始化项目

先通过网页版DeepSeek对话，确定目录结构

联网读取 `https://chat.deepseek.com/share/jkk069nz6leeaai5iu` 对话，根据要求在当前项目文件夹下创建目录结构，并将当前目录结构保存为“目录结构.json”，并在文件中对每个目录的作用进行准确、易懂的描述

根据之前提供的链接，创建对应目录下的文件，若对应文件有通用配置，一并在文件中生成。然后将创建的文件更新到“目录结构.json”，并写入文件作用。
再创建“更新记录.md”，将当前更新的主要变动写入。并在此文件中生成引导，提示后续每次有功能完成时，都应写入此文件进行记录

删除关于商品的目录和文件，但不要删除通用配置文件

当前MariaDB数据库已部署并可链接，连接地址是127.0.0.1:3306，数据库账密是root/root。
请在项目中适当位置生成测试链接数据库的测试py脚本，并执行返回结果

数据库已重新启动，测试当前连接

三、设计数据库

先通过网页版DeepSeek对话，确定数据库结构

联网读取 `https://chat.deepseek.com/share/xsksbz1wowub0w4q3y` 对话，在 `d:\wuzuniao\yao\backend\sql\` 目录下创建对应文件

首先验证是否加载根目录下Agents.md文件。
数据库mysql命令已添加到环境变量，数据库安装在D:\MariaDB 12.3\bin。首页尝试用数据库命令创建
我已对数据库文件做了细微调整，请根据调整后文件，执行创建操作

按 `d:\wuzuniao\yao\Agents.md` 要求，更新 `目录结构.json`和`更新记录.md`

更新 `d:\wuzuniao\yao\Agents.md` 文件，要求每次新会话开启时，需要保证上下文中有 `d:\wuzuniao\yao\Agents.md` `d:\wuzuniao\yao\目录结构.json` 这两个文件最新记录，若存在则不用重复读取，若不存在需重新加载

将 `d:\wuzuniao\yao\Agents.md` 改名为 “AGENTS.md” ，并同步更新项目中关于此文件的命名

四、根据Figma文件，在项目中创建前端页面

你是一个前端专家，对前端技术栈有非常全面、深入的理解，请先理解项目根目录下的开发规范、设计规范、目录结构
我已创建Figma设计搞，稍后需要按我指令生成前端页面

开发 `d:\wuzuniao\yao\frontend\src\pages\index\index.vue` 页面，要求和 `https://www.figma.com/design/AQgkZxALXxdKt8NLWpdMmf/%E6%8C%89%E6%97%B6%E5%90%83%E8%8D%AF%EF%BC%88%E4%BC%98%E5%8C%96%EF%BC%89?node-id=1-437&t=Q1640pjdTDcYI3DG-4` 一模一样，像素级还原。
页面中所需图片我已存放在 `d:\wuzuniao\yao\frontend\src\assets\images\` 目录。以下为首页各个位置所需图片的简单说明。
左上角通知图标：无通知时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\tongzhi_0.png` ；有通知时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\tongzhi_1.png` 。
页面中间打卡大按钮使用的图标：未打卡时使用 `d:\wuzuniao\yao\frontend\src\assets\images\daka_0.png` ,已打卡时使用 `d:\wuzuniao\yao\frontend\src\assets\images\daka_1.png` 。
页面底部导航栏：首页图标，当前页面就是首页时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\dh_shouye_1.png` ,当前页面不是首页时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\dh_shouye_0.png` ；记录图标：当前页面不是记录页时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\dh_jilu_0.png` ,当前页面是记录页面时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\dh_jilu_1.png` ；设置图标：当前页面不是设置页面时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\dh_shezhi_0.png` ,当前页面是设置页面时，使用 `d:\wuzuniao\yao\frontend\src\assets\images\dh_shezhi_1.png` 。


# 这一步后，发现无法通过HBuilder X工具运行到微信小程序测试，所以单独调整了目录结构


目前首页已完成，我需要先将可复用组件抽象。
请将页面左上角通知功能抽象为可给其他页面复用的模板，方便后续创建其他页面时直接复用

请将 `d:\wuzuniao\yao\frontend\src\pages\index\index.vue` 页面底部导航栏，抽象为可给其他页面复用的模板，方便后续创建其他页面时直接复用

#其他页面也按上面步骤操作，不重复记录了

五、生成后端逻辑，将前端交互与数据库关联

你是全栈专家，尤其精通Python和各种复杂逻辑实现，精通各种Python库的运用。在行动中，代码风格简单易懂，对技术的运用按简单实用地进行，严格遵守代码规范和任务要求。
请先理解项目根目录下的开发规范、设计规范、目录结构

我现在需要打通前台页面和后端数据库，请理解 #register.vue 前端页面和后端数据库 #sql 结构，方便稍后实现注册功能。
注册时，前端和后端都要有对输入校验的方法，当输入错误时，前端给出友好提示。各字段校验要求如下：
用户名：仅允许中文、英文、数字
密码：8-20位，至少有大小写字母、数字、特殊符号的其中三种
邮箱：标准邮箱格式，但是需要通过后台发送验证码，验证通过后才能允许提交表单；后端需对验证码是否匹配进行重复验证，验证通过后才允许入库

前端校验用户是否有勾选“查看并同意《隐私政策》”，只有勾选才允许提交表单；未勾选依旧点了提交，弹窗确认和取消两个按钮，用户点确认后自动勾选上“查看并同意《隐私政策》”并自动提交表单，点取消则取消弹窗。

后端Python的实现中，应定义两个类，一个用户类处理用户注册、登录逻辑，注册时进行的邮箱验证调用邮箱类。邮箱类定义对邮件的操作，本次只实现将用户提交的注册表单中电子邮箱作为目的邮箱进行发件，发送邮件的源邮箱读取环境变量。当前还未设置，稍后在环境变量中设置对应字段，提示我填值。发件使用smtp，腾讯企业邮。


针对 `d:\wuzuniao\yao\frontend\src\pages\user\register.vue` 页面，需实现以下功能优化与问题修复：

1. 表单验证逻辑优化：
   - 为用户名、密码等所有输入框添加失焦(blur)事件监听器
   - 确保在用户输入完成并将鼠标移出输入框时立即触发对应字段的验证策略
   - 验证结果应实时反馈给用户，包括视觉提示(如错误边框颜色)和文字提示
   - 保持表单提交时的完整验证机制作为最终校验

2. "获取验证码"功能错误修复：
   - 复现"网络连接错误"问题，执行完整的注册流程进行验证
   - 检查验证码请求的API端点、请求方法及参数是否正确
   - 验证网络请求配置、跨域设置及错误处理逻辑
   - 修复导致网络连接错误的根本原因，确保验证码能正常获取
   - 添加适当的错误提示和重试机制，提升用户体验

完成后需进行全面测试，确保表单验证在失焦时正确触发，且"获取验证码"功能能够正常工作，无网络连接错误提示。


在 `d:\wuzuniao\yao\frontend\src\pages\user\login.vue` 页面的"欢迎回来"功能模块中，完整参考 `d:\wuzuniao\yao\frontend\src\pages\user\register.vue` 页面实现的前后端验证逻辑，包括但不限于表单输入验证、数据格式校验、错误提示机制及后端API交互流程。实现登录成功后的自动跳转功能，确保用户成功登录后无缝重定向至 `d:\wuzuniao\yao\frontend\src\pages\index\settings.vue` 页面。同时，在登录成功后，需实时更新用户资料卡片信息，准确显示当前登录用户的用户名、个人签名及头像。将用户资料卡片的点击跳转链接修改为 `d:\wuzuniao\yao\frontend\src\pages\user\profile.vue` 页面。此外，对 `d:\wuzuniao\yao\frontend\src\pages\index\settings.vue` 页面进行修改，实现用户未登录状态下的用户名占位显示功能，当检测到无用户登录时，用户名区域应显示"请登录"提示文本。所有功能实现需保证代码质量，符合项目编码规范，并进行充分的功能测试和边界条件验证。

#其他页面交互逻辑也按上面步骤操作，不重复记录了

六、安全加固、代码功能抽象、优化UX交互体验等

持续优化