hera/oil-formula-calculator
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

存为我的提示界面修改 #10

New Issue
Closed
opened 2026-04-07 22:47:15 +00:00 by hera · 9 comments
hera commented 2026-04-07 22:47:15 +00:00
Owner
Copy Link

点击存为我的按钮以后，提示词界面修改的好看一点，去参考一下主分支

点击存为我的按钮以后，提示词界面修改的好看一点，去参考一下主分支
yoyo commented 2026-04-07 22:47:17 +00:00
Collaborator
Copy Link

PR 已开好：#11

改动很小，只动了两行：

RecipeDetailOverlay.vue

  1. 新增 import：

    import { showPrompt } from '../composables/useDialog'

  2. saveToDiary() 里把原生 prompt() 换成自定义的 showPrompt()：

    // 之前
const name = prompt('保存为我的配方，名称：', recipe.value.name)

// 之后
const name = await showPrompt('保存为我的配方，名称：', recipe.value.name)

这样点「存为我的」弹出来的就是全站统一的圆角卡片样式（渐变绿色确定按钮 + 轮廓取消按钮），不再是浏览器原生灰色弹窗了。

PR 已开好：https://git.euphon.cloud/hera/oil-formula-calculator/pulls/11 --- 改动很小，只动了两行： **`RecipeDetailOverlay.vue`** 1. 新增 import： ```js import { showPrompt } from '../composables/useDialog' ``` 2. `saveToDiary()` 里把原生 `prompt()` 换成自定义的 `showPrompt()`： ```js // 之前 const name = prompt('保存为我的配方，名称：', recipe.value.name) // 之后 const name = await showPrompt('保存为我的配方，名称：', recipe.value.name) ``` 这样点「存为我的」弹出来的就是全站统一的圆角卡片样式（渐变绿色确定按钮 + 轮廓取消按钮），不再是浏览器原生灰色弹窗了。
hera commented 2026-04-08 19:38:58 +00:00
Author
Owner
Copy Link

点击存为我的以后，应该在配方查询-我的配方里显示，还应该在管理配方里显示，两个地方都没有

点击存为我的以后，应该在配方查询-我的配方里显示，还应该在管理配方里显示，两个地方都没有
yoyo commented 2026-04-08 19:38:59 +00:00
Collaborator
Copy Link

已更新 PR #11，找到根本原因并修好了。

问题所在

saveToDiary() 原来调用的是 POST /api/diary，数据写入 user_diary 表，只有 /mydiary 路由（我的配方日记）会读这个表。

而「配方查询-我的配方」和「管理配方」两个地方，都是从 recipeStore.recipes 过滤 _owner_id === 当前用户，数据源是 recipes 表 —— 完全不同的地方，所以当然看不到。

修改内容（一处）

RecipeDetailOverlay.vue 的 saveToDiary()：把 api.post('/api/diary', ...) 换成 recipesStore.saveRecipe(...) （POST 到 /api/recipes）。

- await api.post('/api/diary', {
+ await recipesStore.saveRecipe({
    name,
-   source_recipe_id: recipe.value._id || null,
-   ingredients: recipe.value.ingredients.map(i => ({ oil: i.oil, drops: i.drops })),
    note: recipe.value.note || '',
+   ingredients: recipe.value.ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
+   tags: recipe.value.tags || [],
  })

这样存完之后：

  • saveRecipe() 内部自动调用 loadRecipes() 刷新 store
  • 「配方查询-我的配方」和「管理配方」立即能看到新条目
已更新 PR #11，找到根本原因并修好了。 --- **问题所在** `saveToDiary()` 原来调用的是 `POST /api/diary`，数据写入 `user_diary` 表，只有 `/mydiary` 路由（我的配方日记）会读这个表。 而「配方查询-我的配方」和「管理配方」两个地方，都是从 `recipeStore.recipes` 过滤 `_owner_id === 当前用户`，数据源是 `recipes` 表 —— 完全不同的地方，所以当然看不到。 **修改内容（一处）** `RecipeDetailOverlay.vue` 的 `saveToDiary()`：把 `api.post('/api/diary', ...)` 换成 `recipesStore.saveRecipe(...)` （POST 到 `/api/recipes`）。 ```diff - await api.post('/api/diary', { + await recipesStore.saveRecipe({ name, - source_recipe_id: recipe.value._id || null, - ingredients: recipe.value.ingredients.map(i => ({ oil: i.oil, drops: i.drops })), note: recipe.value.note || '', + ingredients: recipe.value.ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })), + tags: recipe.value.tags || [], }) ``` 这样存完之后： - `saveRecipe()` 内部自动调用 `loadRecipes()` 刷新 store - 「配方查询-我的配方」和「管理配方」立即能看到新条目
hera commented 2026-04-08 19:56:07 +00:00
Author
Owner
Copy Link

合并到pr5

合并到pr5
yoyo commented 2026-04-08 19:56:08 +00:00
Collaborator
Copy Link

已更新 PR#5。

把 PR#11 的核心 commit（b07b97b，改写入 recipes 表）cherry-pick 进了 feature/qr-upload-hint 分支并推送完毕。

PR#5 现在包含：

  • 自定义 showPrompt 弹框（之前已有）
  • 「存为我的」写入 recipes 表，确保在「配方查询-我的配方」和「管理配方」中显示（新增）
已更新 PR#5。 把 PR#11 的核心 commit（`b07b97b`，改写入 `recipes` 表）cherry-pick 进了 `feature/qr-upload-hint` 分支并推送完毕。 PR#5 现在包含： - 自定义 `showPrompt` 弹框（之前已有） - 「存为我的」写入 `recipes` 表，确保在「配方查询-我的配方」和「管理配方」中显示（新增）
hera commented 2026-04-08 20:00:50 +00:00
Author
Owner
Copy Link
  1. 在点击存为我的之后，修改名字时，不要把我在中文输入法中想要输入英文点击的回车键当成确认按钮，确保我是真的点了回车再确认
  2. 现在存为我的之后，还是看不到
1. 在点击存为我的之后，修改名字时，不要把我在中文输入法中想要输入英文点击的回车键当成确认按钮，确保我是真的点了回车再确认 2. 现在存为我的之后，还是看不到
yoyo commented 2026-04-08 20:00:50 +00:00
Collaborator
Copy Link

PR#5 已更新，找到了根本原因。

两个问题其实是同一个 bug。

根本原因

CustomDialog.vue 的 submitPrompt() 没有判断 IME 合字状态。中文输入法工作流程是：

  1. 用户清空输入框，开始用拼音输入新名字
  2. Vue 3 的 v-model 在 IME 合字阶段（composing） 会暂停更新 — inputValue.value 此时仍是合字前的值（空字符串 ""）
  3. 用户按 Enter 选字 → @keydown.enter 触发 → closeDialog("") 用空值关闭弹框
  4. if (!name) return 判断空字符串为假值 → 配方从未保存
  5. 「我的配方」自然什么也看不到

修复内容（CustomDialog.vue）

+ @compositionstart="isComposing = true"
+ @compositionend="onCompositionEnd"
  @keydown.enter="submitPrompt"

+ function onCompositionEnd(e) {
+   isComposing.value = false
+   inputValue.value = e.target.value  // 手动同步合字结果
+ }

  function submitPrompt(e) {
+   if (e.isComposing || isComposing.value) return  // IME 选字时忽略
    closeDialog(inputValue.value)
  }

双重保险：e.isComposing（标准 API）+ 自己维护的 isComposing flag（兜底旧浏览器），确保只有用户真正独立按下 Enter 时才确认提交。

PR#5 已更新，找到了根本原因。 --- 两个问题其实是同一个 bug。 **根本原因** `CustomDialog.vue` 的 `submitPrompt()` 没有判断 IME 合字状态。中文输入法工作流程是： 1. 用户清空输入框，开始用拼音输入新名字 2. Vue 3 的 `v-model` 在 IME **合字阶段（composing）** 会暂停更新 — `inputValue.value` 此时仍是合字前的值（空字符串 `""`） 3. 用户按 Enter 选字 → `@keydown.enter` 触发 → `closeDialog("")` 用空值关闭弹框 4. `if (!name) return` 判断空字符串为假值 → **配方从未保存** 5. 「我的配方」自然什么也看不到 **修复内容（`CustomDialog.vue`）** ```diff + @compositionstart="isComposing = true" + @compositionend="onCompositionEnd" @keydown.enter="submitPrompt" ``` ```js + function onCompositionEnd(e) { + isComposing.value = false + inputValue.value = e.target.value // 手动同步合字结果 + } function submitPrompt(e) { + if (e.isComposing || isComposing.value) return // IME 选字时忽略 closeDialog(inputValue.value) } ``` 双重保险：`e.isComposing`（标准 API）+ 自己维护的 `isComposing` flag（兜底旧浏览器），确保只有用户**真正独立按下 Enter** 时才确认提交。
hera commented 2026-04-08 20:12:27 +00:00
Author
Owner
Copy Link

enter的问题解决了，但是还是没保存进来

enter的问题解决了，但是还是没保存进来
yoyo commented 2026-04-08 20:12:29 +00:00
Collaborator
Copy Link

PR#5 已更新。

我把所有可能的静默失败路径都堵上了，同时增加了调试日志。现在麻烦你做两件事：

1. 再试一次存为我的，观察：

  • 是否看到 toast？内容是什么？（成功应该显示「已保存！可在「配方查询 → 我的配方」查看」）
  • 如果显示「保存失败：xxx」，xxx 是什么？

2. 打开浏览器开发者工具（F12）→ Console，存为我的的时候看看有没有：

  • [saveToDiary] saving recipe: {...} 这条日志出现了吗？payload 内容是什么？
  • 有没有红色报错？

我目前的主要嫌疑：

if (!name) return 之前是把「空字符串」和「取消」一视同仁静默跳过。现在改成：

  • null → 静默返回（确实取消）
  • 空字符串 → 弹出「请输入配方名称」
  • 有名字 → 正常保存

如果你输入完名字后点确定/按回车，但还是没看到任何 toast，说明问题在 dialog 层，console 里会有 [saveToDiary] 的日志帮助定位。

PR#5 已更新。 --- 我把所有可能的静默失败路径都堵上了，同时增加了调试日志。**现在麻烦你做两件事**： **1. 再试一次存为我的**，观察： - 是否看到 toast？内容是什么？（成功应该显示「已保存！可在「配方查询 → 我的配方」查看」） - 如果显示「保存失败：xxx」，xxx 是什么？ **2. 打开浏览器开发者工具（F12）→ Console**，存为我的的时候看看有没有： - `[saveToDiary] saving recipe: {...}` 这条日志出现了吗？payload 内容是什么？ - 有没有红色报错？ --- **我目前的主要嫌疑**： `if (!name) return` 之前是把「空字符串」和「取消」一视同仁静默跳过。现在改成： - `null` → 静默返回（确实取消） - 空字符串 → 弹出「请输入配方名称」 - 有名字 → 正常保存 如果你输入完名字后点确定/按回车，但还是没看到任何 toast，说明问题在 dialog 层，console 里会有 `[saveToDiary]` 的日志帮助定位。
hera closed this issue 2026-04-10 19:36:09 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yoyo hera
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: hera/oil-formula-calculator#10
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?