deotalandAi/.trae/documents/Implement Qixi Greeting Card Feature.md

我将在 apps/frontend/src/views/GreetingCard/GreetingCard.vue 中实现七夕情人节贺卡功能。

根据您的要求：

1. 不使用 Tailwind CSS。
2. 图片功能为文件上传（非填写地址）。我将实现本地文件读取（转换为 Base64）来模拟上传效果，确保用户可以直接选择本地图片进行预览和保存。

实施计划如下：

1. 功能概览与用户提示:

   • 在页面顶部添加美观的提示区域，说明：“下单时可选择绑定贺卡，收到货时将额外赠送一张带有二维码的贺卡，扫码即可查看您的祝福。”

   • 使用自定义 CSS (<style scoped>) 实现浪漫粉色系视觉风格。

2. 贺卡管理 (增删改查):

   • 列表视图: 使用 Grid 布局展示贺卡列表。

   • 添加/编辑弹窗: 使用 Element Plus (el-dialog) 组件。

     • 图片上传: 使用 el-upload 组件。

       • 设置为点击选择文件模式。

       • 拦截默认上传行为，使用 FileReader 将图片转换为 Base64 格式进行本地预览和存储。

     • 祝福寄语: el-input (type="textarea") 用于输入祝福。

   • 删除操作: el-popconfirm 确认后删除。

3. 模拟数据:

   • 初始化包含示例贺卡的数据列表。

   • 数据结构: id, imageUrl (Base64字符串), message, createTime.

4. 技术栈:

   • Vue 3 组合式 API

   • Element Plus (Upload, Dialog, Button, Card, etc.)

   • CSS / SCSS (Scoped styles)

实施步骤:

1. 清理文件并搭建基础 UI 结构。
2. 实现图片上传并转 Base64 的核心逻辑。
3. 完成添加、编辑、删除功能的逻辑绑定。
4. 编写 CSS 样式美化页面。
5. 验证功能流程。