feat: 配方卡片加入上传个人二维码功能 #5

Merged

hera merged 23 commits from feature/qr-upload-hint into main 2026-04-08 22:09:30 +00:00

Conversation 25 Commits 23 Files Changed 17 +1090 -371

yoyo commented 2026-04-07 21:58:31 +00:00

Collaborator

Copy Link

关联 Issue #4

改动内容

RecipeDetailOverlay.vue

• 登录用户若未设置二维码和背景图，卡片预览上方弹出提示横幅（带入场动画）
• 卡片底部新增「📲 上传我的二维码」按钮，点击后记录当前配方 ID 到 localStorage 并跳转到品牌设置页

MyDiary.vue

• 品牌设置 Tab 新增「我的二维码图片」上传区，支持上传图片文件（转 base64 → PUT /api/brand 的 qr_code 字段）
• 上传成功后若检测到来源配方 ID，显示提示并自动返回对应配方卡片
• 修复 loadBrandSettings 中字段名与后端不一致的问题（logo_url → brand_logo，bg_url → brand_bg）

RecipeSearch.vue

• 支持 ?openRecipe=<id> 查询参数，挂载时自动打开指定配方的卡片预览

使用流程

1. 点击配方 → 如未上传二维码/背景，卡片上方出现提示，下方出现上传按钮
2. 点击「上传我的二维码」→ 跳转到「我的账号 → Brand」页
3. 在「我的二维码图片」区域上传图片
4. 上传成功 → 自动返回刚才的配方卡片，卡片右下角显示二维码

关联 Issue #4 ## 改动内容 **RecipeDetailOverlay.vue** - 登录用户若未设置二维码和背景图，卡片预览上方弹出提示横幅（带入场动画） - 卡片底部新增「📲 上传我的二维码」按钮，点击后记录当前配方 ID 到 localStorage 并跳转到品牌设置页 **MyDiary.vue** - 品牌设置 Tab 新增「我的二维码图片」上传区，支持上传图片文件（转 base64 → `PUT /api/brand` 的 `qr_code` 字段） - 上传成功后若检测到来源配方 ID，显示提示并自动返回对应配方卡片 - 修复 `loadBrandSettings` 中字段名与后端不一致的问题（`logo_url` → `brand_logo`，`bg_url` → `brand_bg`） **RecipeSearch.vue** - 支持 `?openRecipe=<id>` 查询参数，挂载时自动打开指定配方的卡片预览 ## 使用流程 1. 点击配方 → 如未上传二维码/背景，卡片上方出现提示，下方出现上传按钮 2. 点击「上传我的二维码」→ 跳转到「我的账号 → Brand」页 3. 在「我的二维码图片」区域上传图片 4. 上传成功 → 自动返回刚才的配方卡片，卡片右下角显示二维码

yoyo referenced this pull request 2026-04-07 21:58:42 +00:00

配方卡片加入上传个人二维码功能 #4

hera commented 2026-04-07 22:00:00 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo referenced this pull request 2026-04-07 22:13:50 +00:00

配方卡片加入上传个人二维码功能 #4

hera commented 2026-04-07 22:14:16 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo added 2 commits 2026-04-07 22:25:19 +00:00

feat: 配方卡片加入上传个人二维码功能 ... 81ec5987b3

- RecipeDetailOverlay: 未上传二维码/背景图时，卡片上方显示提示横幅，下方出现「上传我的二维码」按钮，点击跳转到 MyDiary 品牌设置页并记录来源配方
- MyDiary: 新增二维码图片上传区域（直接上传图片文件，存为 base64 → PUT /api/brand qr_code 字段）；上传成功后若有待返回配方则自动跳回配方卡片；修复 loadBrandSettings 字段名与后端不一致的问题
- RecipeSearch: 支持 ?openRecipe= 查询参数，页面挂载时自动打开指定配方卡片，实现从 MyDiary 上传后无缝返回

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: 未登录用户也显示二维码上传提示，点击时引导登录/注册 955512d344

yoyo force-pushed feature/qr-upload-hint from 7599599910 to 955512d344 2026-04-07 22:25:19 +00:00 Compare

yoyo referenced this pull request 2026-04-07 22:25:23 +00:00

配方卡片加入上传个人二维码功能 #4

hera commented 2026-04-07 22:25:40 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

hera commented 2026-04-07 22:25:52 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:27:25 +00:00

fix: 卡片预览加入容量切换，非单次滴数四舍五入 ... dee4b1649a

- VOLUME_DROPS 新增「单次」(null，不缩放)
- 新增 scaleIngredients() 按比例缩放成分
- 卡片预览区加入容量切换按钮，切换后实时更新滴数与成本
- priceInfo 与 coconutDrops 均基于缩放后数据

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hera commented 2026-04-07 22:27:53 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:28:20 +00:00

Fix LoginModal z-index to 6000 so it appears above recipe overlay ... b9681141af

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-07 22:28:50 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:32:43 +00:00

Raise toast z-index to 9000 so it shows above all overlays ... edc053ae0e

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-07 22:33:14 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:33:18 +00:00

Remove volume selector from recipe card view ... 3bbe437616

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-07 22:33:47 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:34:09 +00:00

Shorten copy toast to just '已复制' ... 4d5e3c46e7

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-07 22:34:38 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:35:43 +00:00

Fix toast rendering: display toast.msg instead of object ... 5eba04a1fa

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-07 22:36:10 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:40:00 +00:00

Resume pending action after login (favorite, diary, QR upload) ... 96504ed1d7

Add pendingAction callback to UI store. When user clicks favorite,
save-to-diary, or upload QR while not logged in, the action is stored
and automatically executed after successful login/register instead of
reloading the page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-07 22:40:29 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo referenced this issue from a commit 2026-04-07 22:54:48 +00:00

fix: 顶部导航栏sticky修正、右上角显示角色身份、QR上传预览布局优化

yoyo added 1 commit 2026-04-07 22:54:48 +00:00

fix: 顶部导航栏sticky修正、右上角显示角色身份、QR上传预览布局优化 ... 19f4ab8abe

- 预览环境下nav-tabs top偏移36px，避免被orange banner遮挡
- 登录用户名旁显示角色身份（查看者/编辑/管理员等）
- 账户页角色改用绿色渐变徽章样式，对齐UserMenu风格
- QR图片上传区改为120x120居中方形，预览样式与二维码链接预览一致

Closes #9 (part: items 1-3, accumulated to PR #5)

Co-Authored-By: YoYo <yoyo@euphon.net>

hera commented 2026-04-07 22:55:18 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-07 22:55:42 +00:00

QR upload: replace inline hint with dialog, add back button in brand page ... 65239abc53

- Replace the inline brand-upload-hint bar in RecipeDetailOverlay with a
  confirm dialog (「去上传」/「取消」) that pops up when the card opens
- Extend useDialog/CustomDialog to support custom ok/cancel button text
- Add a 「← 返回配方卡片」banner in MyDiary brand tab when navigated
  from a recipe card, allowing return without uploading

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

yoyo referenced this pull request 2026-04-07 22:55:50 +00:00

上传二维码 #12

hera commented 2026-04-07 22:56:10 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo added 1 commit 2026-04-07 23:09:33 +00:00

fix: 存为我的改用自定义 showPrompt，与主分支保持一致 ... 4761253d73

将 saveToDiary 中的原生 prompt() 替换为项目内置的
showPrompt()，使对话框样式与主分支及全站风格保持一致。

Co-Authored-By: YoYo <yoyo@euphon.net>

hera commented 2026-04-07 23:10:04 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 1 commit 2026-04-08 07:42:49 +00:00

fix: 配方卡片品牌样式与 initial commit 保持一致 ... de74ffe638

- 背景图改用 div+background-image，opacity 从 0.06 恢复为 0.12
- 二维码位置改回 top:36px/right:24px，尺寸 54×54，加圆角和阴影
- 二维码下方新增品牌名称小字（7px）
- Logo 位置改回 bottom:60px，尺寸 height:60px，opacity 0.2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hera commented 2026-04-08 07:43:21 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo added 1 commit 2026-04-08 19:41:08 +00:00

fix: 上传图片后不再自动跳转，由用户手动点击返回配方卡片 ... 533cd2a0bd

Co-Authored-By: YoYo <yoyo@euphon.net>

hera commented 2026-04-08 19:41:38 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

fam added 2 commits 2026-04-08 19:47:25 +00:00

fix: 退出登录后跳转到配方查询页面 ... c8de1ad229

将 handleLogout 里的 window.location.reload() 改为 router.push('/')，
确保在任何需要登录的页面退出后都能回到配方查询页面。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: 移除所有权限身份显示，QR上传布局还原为initial commit样式 dcf516f2de

hera commented 2026-04-08 19:47:54 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo added 1 commit 2026-04-08 19:56:40 +00:00

fix: 存为我的改写入 recipes 表，确保在「我的配方」和「管理配方」中显示 ... cc79ae1211

之前 saveToDiary() 调用 POST /api/diary，数据写入 user_diary 表，
只在「我的配方日记」(/mydiary) 中可见。
改为调用 recipesStore.saveRecipe()，写入 recipes 表并以当前用户为 owner，
GET /api/recipes 会返回该用户自己创建的配方，
RecipeSearch 的「我的配方」预览和 RecipeManager 的配方列表均可显示。

Co-Authored-By: YoYo <yoyo@euphon.net>

hera commented 2026-04-08 19:57:11 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo added 1 commit 2026-04-08 20:03:17 +00:00

feat: 配方卡片容量切换、预览/保存流程优化、精油搜索自动补全、精油英文名编辑 ... 31b46d59b6

1. 配方卡片视图加回容量切换按钮（单次/2.5ml/5ml…），
   非单次容量的滴数通过 Math.round 取整显示
2. 编辑器「预览」按钮改为展示当前未保存数据；
   预览后点关闭询问是否保存；
   直接点「保存」后留在配方卡片视图（不再关闭弹层）
3. 添加精油改为搜索输入框 + 下拉自动补全，
   支持中文名和英文名筛选
4. 精油价目：添加/编辑表单加入英文名字段；
   编辑/删除按钮改为悬停（桌面）或点击（移动端）才显示；
   后端及数据库同步支持 oils.en_name

hera commented 2026-04-08 20:03:48 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo added 1 commit 2026-04-08 20:07:16 +00:00

fix: 输入框 Enter 键忽略 IME 输入法合字阶段，防止误触提交 ... 66766197a4

中文输入法在选字时按回车，会触发 keydown.enter 事件，
但此时 v-model 尚未更新（组合阶段未结束），导致
inputValue 仍为空字符串，造成 saveToDiary 的 if (!name) return
分支被触发，配方从未保存，「我的配方」中自然看不到。

修复方案：
- 监听 compositionstart / compositionend 事件，
  用 isComposing 标记组合状态
- compositionend 时手动同步 inputValue（确保值最新）
- submitPrompt 检查 e.isComposing || isComposing.value，
  任一为真则跳过提交，等用户真正按下独立 Enter 再确认

Co-Authored-By: YoYo <yoyo@euphon.net>

hera commented 2026-04-08 20:07:46 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

yoyo added 1 commit 2026-04-08 20:27:08 +00:00

fix: 增强存为我的调试日志和错误提示，修复空名称静默失败问题 ... 0c19153156

- 区分「取消」(null) 和「清空名称后确认」(空字符串) 两种情况
  前者静默返回，后者提示「请输入配方名称」
- 添加 console.log/error 方便在浏览器控制台定位问题
- 成功 toast 改为「已保存！可在「配方查询 → 我的配方」查看」提示去向
- 错误 toast 延长至 3s，并显示 status code
- saveRecipe：loadRecipes 失败不再抛出，保证保存成功后不误报失败

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hera commented 2026-04-08 20:27:38 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

hera added 1 commit 2026-04-08 20:45:07 +00:00

feat: 区分我的配方(diary)和公共配方库(recipes) ... 2983036388

配方查询页:
- 我的配方 → /api/diary (user_diary表)，左绿色边框区分
- 收藏配方 → 收藏的公共配方
- 公共配方库 → /api/recipes (recipes表)，所有公共配方
- 搜索同时过滤个人和公共配方

管理配方页:
- 我的配方 → diary store，支持搜索/标签过滤
- 公共配方库 → 所有公共配方，所有用户可见
- 管理员创建的公共配方不再误归为"我的配方"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-08 20:45:38 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

hera added 1 commit 2026-04-08 21:55:30 +00:00

feat: 精油价目页大量改进 ... f580aa3eee

知识卡片编辑:
- 填写功效后自动生成 emoji（关键词匹配）
- 使用方式改为三按钮点选（香薰/内用/涂抹）
- 保存后立即生成卡片，📖标记即时出现

稀释比例/使用禁忌:
- 匹配原版设计（绿色/橙色渐变头部）
- 都加了保存图片按钮（html2canvas）

精油知识卡:
- 加了保存图片按钮

UI优化:
- 新增精油框加了零售价，隐藏数字输入加减按钮
- 搜索栏: 每瓶价/每滴价（替代会员价/滴价）
- 新增按钮可展开/收起
- 植物空胶囊显示160颗
- 编辑弹窗精油名称可修改

PDF导出:
- 标题含日期，去掉副标题
- 英文名列标题格式统一
- 去掉滴数列

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-08 21:56:02 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

hera added 1 commit 2026-04-08 21:59:41 +00:00

UI: 知识卡片宽度收窄(380px)，使用方式按钮选中态更醒目 ... 4e0039d5ad

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-08 22:00:11 +00:00

Owner

Copy Link

🚀 Preview: https://pr-5.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-5.oil.oci.euphon.net DB is a copy of production.

hera merged commit 3d95db6cae into main 2026-04-08 22:09:30 +00:00

hera referenced this issue from a commit 2026-04-08 22:09:32 +00:00

Merge pull request 'feat: 配方卡片加入上传个人二维码功能' (#5) from feature/qr-upload-hint into main

hera commented 2026-04-08 22:09:46 +00:00

Owner

Copy Link

🗑️ Preview torn down.

🗑️ Preview torn down.

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

yoyo hera

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: hera/oil-formula-calculator#5