上传二维码 #12

New Issue

hera · 2026-04-07T22:52:11Z

hera commented

2026-04-07 22:52:11 +00:00

没有上传过二维码等照片时，如果点击配方卡片，会蹦出提示，（现在显示在卡片上方，我想让它变成一个提示框，如果点击上传，就直接到二维码上传页面，如果点击取消，就返回到配方卡片）。上传二维码的按钮仍然可以在下方显示（参考主分支的显示方式）
要求：点击上传二维码以后，可以选择上传二维码、背景图片等所有想要上传的图片后，有一个返回键，点击以后，返回到刚才在查看的配方卡片界面

没有上传过二维码等照片时，如果点击配方卡片，会蹦出提示，（现在显示在卡片上方，我想让它变成一个提示框，如果点击上传，就直接到二维码上传页面，如果点击取消，就返回到配方卡片）。上传二维码的按钮仍然可以在下方显示（参考主分支的显示方式）要求：点击上传二维码以后，可以选择上传二维码、背景图片等所有想要上传的图片后，有一个返回键，点击以后，返回到刚才在查看的配方卡片界面

yoyo commented

2026-04-07 22:52:12 +00:00

推送成功（已有 PR #5）。以下是本次改动的完整说明：

已完成！改动已推送到 feature/qr-upload-hint 分支，PR #5。

具体做了这些：

1. 内联提示 → 弹窗（`RecipeDetailOverlay.vue`）

移除了卡片上方那条横幅提示
改为在配方卡片打开时自动弹出确认对话框，提示文字「上传你的专属二维码，让配方卡片更专业 ✨」
两个按钮：去上传（跳转品牌设置页）和取消（留在配方卡片）
底部的「📲 上传我的二维码」按钮保留不变

2. 自定义对话框按钮文字（`useDialog.js` + `CustomDialog.vue`）

扩展了对话框系统，支持传入自定义 okText / cancelText，不影响其他地方使用

3. 品牌页面加返回按钮（`MyDiary.vue`）

从配方卡片跳转过来时，品牌设置页顶部会出现绿色横幅，显示「← 返回配方卡片」按钮
可以上传完二维码、背景图、Logo 等所有图片后，随时点击按钮返回
自动上传后跳转的逻辑（原有逻辑）保持不变

推送成功（已有 PR #5）。以下是本次改动的完整说明： --- 已完成！改动已推送到 `feature/qr-upload-hint` 分支，[PR #5](https://git.euphon.cloud/hera/oil-formula-calculator/pulls/5)。具体做了这些： ### 1. 内联提示 → 弹窗（`RecipeDetailOverlay.vue`） - 移除了卡片上方那条横幅提示 - 改为在配方卡片打开时自动弹出确认对话框，提示文字「上传你的专属二维码，让配方卡片更专业 ✨」 - 两个按钮：**去上传**（跳转品牌设置页）和**取消**（留在配方卡片） - 底部的「📲 上传我的二维码」按钮保留不变 ### 2. 自定义对话框按钮文字（`useDialog.js` + `CustomDialog.vue`） - 扩展了对话框系统，支持传入自定义 `okText` / `cancelText`，不影响其他地方使用 ### 3. 品牌页面加返回按钮（`MyDiary.vue`） - 从配方卡片跳转过来时，品牌设置页顶部会出现绿色横幅，显示「← 返回配方卡片」按钮 - 可以上传完二维码、背景图、Logo 等所有图片后，随时点击按钮返回 - 自动上传后跳转的逻辑（原有逻辑）保持不变

hera commented

2026-04-07 22:53:43 +00:00

上传背景图片以后，配方卡片的样式跟主分支不太一样，你去调整一下，让他们看起来一模一样

yoyo commented

2026-04-07 22:53:44 +00:00

已推送修复 ✅

找到问题了——feature 分支里「📔 存为我的」按钮点击后，弹出的是浏览器原生的 prompt() 对话框（灰色、系统风格），而主分支已经换成了项目内置的自定义弹窗（与全站样式一致）。这就是你看到"样式不一样"的地方。

修复内容：

RecipeDetailOverlay.vue 中 saveToDiary() 的 prompt() → await showPrompt()，对话框样式现在和主分支完全一致

已更新到 PR #5，你可以重新测试一下看看是否还有其他地方不一样~

已推送修复 ✅ 找到问题了——feature 分支里「📔 存为我的」按钮点击后，弹出的是浏览器原生的 `prompt()` 对话框（灰色、系统风格），而主分支已经换成了项目内置的自定义弹窗（与全站样式一致）。这就是你看到"样式不一样"的地方。 **修复内容：** - `RecipeDetailOverlay.vue` 中 `saveToDiary()` 的 `prompt()` → `await showPrompt()`，对话框样式现在和主分支完全一致已更新到 PR #5，你可以重新测试一下看看是否还有其他地方不一样~

hera commented

2026-04-08 07:39:54 +00:00

刚才说错了，不是主分支，是initial commit，你再重新看一下

yoyo commented

2026-04-08 07:39:56 +00:00

已修复 ✅ 已推送到 PR #5。

对照 initial commit 的 _buildBrandHtml()，具体改了这几处：

元素	之前（feature 分支）	现在（与 initial commit 一致）
背景图	`<img>` opacity 0.06	`<div>` background-image, opacity 0.12
二维码位置	top 16px / right 16px	top 36px / right 24px
二维码尺寸	64×64, object-fit: contain	54×54, object-fit: cover, 圆角 6px + 阴影
品牌名称	未显示	二维码下方 7px 小字
Logo 位置	bottom 16px, height 28px, opacity 0.3	bottom 60px, height 60px, opacity 0.2

已修复 ✅ 已推送到 PR #5。对照 initial commit 的 `_buildBrandHtml()`，具体改了这几处： | 元素 | 之前（feature 分支） | 现在（与 initial commit 一致） | |------|---------------------|-------------------------------| | 背景图 | `<img>` opacity 0.06 | `<div>` background-image, opacity **0.12** | | 二维码位置 | top 16px / right 16px | top **36px** / right **24px** | | 二维码尺寸 | 64×64, object-fit: contain | **54×54**, object-fit: cover, 圆角 6px + 阴影 | | 品牌名称 | 未显示 | 二维码下方 **7px 小字** | | Logo 位置 | bottom 16px, height 28px, opacity 0.3 | bottom **60px**, height **60px**, opacity **0.2** |

hera commented

2026-04-08 19:39:56 +00:00

上传二维码以后不要自动退出，我要用户自己选择上传哪些图片以后，再去返回到配方卡片
返回时，要返回到当时打开的那个配方卡片页面

1. 上传二维码以后不要自动退出，我要用户自己选择上传哪些图片以后，再去返回到配方卡片 2. 返回时，要返回到当时打开的那个配方卡片页面

yoyo commented

2026-04-08 19:39:57 +00:00

已修复 ✅ 已推送到 PR #5。

改动说明：

移除了 QR 上传后的自动跳转逻辑（原来上传完二维码会等 0.8 秒后自动返回）
现在上传任何图片（二维码、背景图、Logo）后只显示「上传成功」提示，页面停留在品牌设置页
顶部的「← 返回配方卡片」横幅按钮保持不变——用户可以自由上传完所有想要的图片后，再点击这个按钮返回
点击返回按钮会跳转到 /?openRecipe=<id>，RecipeSearch 会自动定位并打开当初的那张配方卡片

已修复 ✅ 已推送到 PR #5。 **改动说明：** - 移除了 QR 上传后的自动跳转逻辑（原来上传完二维码会等 0.8 秒后自动返回） - 现在上传任何图片（二维码、背景图、Logo）后只显示「上传成功」提示，页面停留在品牌设置页 - 顶部的「← 返回配方卡片」横幅按钮保持不变——用户可以自由上传完所有想要的图片后，再点击这个按钮返回 - 点击返回按钮会跳转到 `/?openRecipe=<id>`，`RecipeSearch` 会自动定位并打开当初的那张配方卡片

hera closed this issue

2026-04-09 18:42:53 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: hera/oil-formula-calculator#12

上传二维码 #12

1. 内联提示 → 弹窗（RecipeDetailOverlay.vue）

2. 自定义对话框按钮文字（useDialog.js + CustomDialog.vue）

3. 品牌页面加返回按钮（MyDiary.vue）

1. 内联提示 → 弹窗（`RecipeDetailOverlay.vue`）

2. 自定义对话框按钮文字（`useDialog.js` + `CustomDialog.vue`）

3. 品牌页面加返回按钮（`MyDiary.vue`）