Skip to content

feat: 新增份量等比缩放条,可等比例调整所有食材重量 - #210

Open
huiihao wants to merge 1 commit into
Gar-b-age:vitepressfrom
huiihao:feat/quantity-scaler
Open

feat: 新增份量等比缩放条,可等比例调整所有食材重量#210
huiihao wants to merge 1 commit into
Gar-b-age:vitepressfrom
huiihao:feat/quantity-scaler

Conversation

@huiihao

@huiihao huiihao commented Aug 17, 2026

Copy link
Copy Markdown

背景

老乡鸡菜谱的分量基本是中央厨房批量出品的规格(如 200g 大豆油、575g 鸡蛋液、1800g 西红柿),在家照做时量太大。本 PR 给每道菜加一个可调滑杆,把页面里所有食材/调料的重量按比例等比缩放。

效果

  • 滑杆范围 0.1× ~ 2×,默认 1×,另配快捷档位 ¼份 / ½份 / 1份 / 2份 和「重置」按钮。
  • 例如调到 ×0.1:200g 大豆油 → 20g575g 鸡蛋液 → 57.5g1800g 西红柿 → 180g
  • 缩放实时生效,切换菜谱页后保持当前比例(方便整桌按同一比例做)。

实现

  1. markdown-it 插件.vitepress/quantity-markdown.mjs):渲染时把正文里的「数字+单位」包成 <span class="qty" data-qty="…" data-unit="…">不改动任何源 .md 文件
  2. Vue 组件 QuantityScaler:滑杆 + 档位,读取页面所有 .qty 按比例改写文字。
  3. 自定义 Layout 挂载该组件(浮动在页面左下角,仅在有分量的菜谱页显示)。

缩放范围(单位)

  • ✅ 重量/体积:g / kg / ml / l / 克 / 千克 / 毫升 / 升 / 斤 / 两
  • ✅ 计数单位:个 / 只 / 片 / 根 / 块 / 瓣 / 朵 / 条 / 份 / 颗 / 粒 / 段 / 节 / 勺 / 匙 / 滴 / 杯 / 碗 / 把
  • ❌ 不缩放(自动跳过):营养成分表(热量/Kcal、钠/mg 等)、长度 cm、时间「分钟/秒」、包装单位「包/袋/盒/瓶」

说明:config.tsconfig.mjs 同时存在(分别对应主站与 GitHub Pages 部署),本 PR 两个文件都加了相同的 markdown 配置,保证两种部署都生效。

测试

  • 插件核心逻辑:19 项单元测试全部通过(g 单位、带空格的计数单位、份数、跳过营养成分表/时间/长度/热量、步序号不缩放、缩放算法精度)。
  • 全量 vitepress build 通过;产出 HTML 中 .qty span 正确生成、营养成分表保持原样、缩放组件正常打包。

- 新增 markdown-it 插件:渲染时把「数字+单位」包成 <span class="qty">,不改动任何源 .md 文件
- 新增 QuantityScaler 组件:滑杆 + 快捷档位(¼/½/1/2 份),范围 0.1×~2×,可一键重置
- 支持重量/体积(g/kg/ml/升/斤/两…)与计数单位(个/只/片/根/块/…/份)等比缩放
- 自动跳过营养成分表、长度(cm)、时间、热量(Kcal)等不可缩放内容
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant