📊 食堂后台入口 · 管理主页主菜单(/pages/home/indx.html)
📋 今天待办
日常工作任务和待办事项管理系统，支持任务分类、优先级设置和状态跟踪。
文件位置：
/pages/home/todo/
查看功能详情
🍽️ 套餐录入
完整的菜单录入、编辑和管理系统，包含厨房出品、团餐录菜、社餐录菜、当日菜单和菜单日历功能。
功能文件位置：
/pages/home/menu-input/
子功能对应JS文件：
• 厨房出品 → menu-output.js
• 团餐录菜 → group-input.js
• 社餐录菜 → public-input.js
• 当日菜单 → menu-daily.js
• 菜单日历 → menu-calendar.js
查看功能详情
🛒 采购管理
食材采购、供应商管理和库存预警系统，支持采购流程全生命周期管理。
文件位置：
/pages/home/purchase/
查看功能详情
📦 库存管理
食材库存、出入库管理和盘点系统，提供实时库存监控和预警功能。
文件位置：
/pages/home/inventory/
查看功能详情
🌍 全局菜单
系统级菜单数据管理和共享功能，为其他模块提供标准化的菜单数据接口。
文件位置：
/pages/home/globalmeal/
数据库访问API：
- /api/mealoutput - 厨房出品数据API
- /api/db/groupmeal - 团餐数据API
- /api/publicmeal - 社餐数据API
数据来源： 统一从
daily_dishes 表读取数据
查询条件： 使用
menu_date 参数（如"20250501"）作为查询条件
查看功能详情
🔍 厨房出品模块编码规范分析
📁 主页面结构
主文件：
/pages/home/index.html index.html 有一个主调度 Js 当你按了子菜单， 交互区就交给 子菜单功能 JS ， 同时 主调度 js 把 发送绑到 子功能
， 当切到下一个子菜单， 主调度解绑， 再绑新 JS
主页面包含以下核心区域, 是各子菜单的功能承载区：
- 日期显示区： 显示当前日期信息
- 母菜单区： 主要功能分类导航
- 子菜单区： 具体功能选项
- 交互区：各子菜单功能工作区域
- 输入条： 用户命令输入区域
🏠 home.js 对浮动按钮的处理机制
现在 home.js 遵循了正确的浮动按钮管理流程：
正确的浮动按钮管理流程：
- home.js切换菜单时：
- 调用当前模块的 cleanup() 函数
- 调用新模块的 init()/handleXxx() 函数
- 子功能模块在初始化函数中：
- 子功能模块在清理函数中：
- 框架层解耦：
- home.js不再知晓具体模块名称，只调用通用接口
这样的设计确保了：
- 框架层与具体模块解耦
- 模块自治管理自己的浮动按钮
- 清理和初始化逻辑正确执行
- 符合依赖倒置原则
子功能菜单编码规范
✅ 功能菜单 JS 基本函数规范
home js 在子菜单切换时，通过 home_callChildMenuHandler 函数中 switch 的对应关系，找到对应的子功能 js （如：menuOutput_handleKitchenOutput），初始化交互区的交互操作，使交互由子功能 JS 完成。 HOME （如：menuOutput_setSendButtonForKitchenOutput）重新给主页绑定命令发送框按钮，使命令交互给新的子功能 js 处理。
子菜单切换时清理机制：
- 母菜单切换触发清理：
home_selectParentMenu 函数调用 home_notifyActiveModuleCleanup()
- 发送按钮重新绑定： 通过
home_setSendButtonHandler() 函数重新绑定命令处理
- 模块自行清理： 各模块需实现自己的
cleanup() 函数
所有子菜单点击都是由 home_setupEventListeners 函数中设置的事件监听器统一响应，通过事件委托机制确保可靠绑定。当用户点击子菜单时，home js 调用各子功能的初始化函数来设置交互区内容和命令处理逻辑。
home js 调用各子功能的初始化函数：
- 厨房出品模块：
menuOutputMenuOutput.menuOutput_init()
- 团餐录菜模块：
groupInputGroupInput.groupInput_init()
- 对象定义： ✅ 使用menuOutput_前缀命名所有函数和对象
- 内容输出： ✅ 通过innerHTML动态生成交互区HTML内容
- 现场清理： ✅ 提供cleanup函数用于清理创建的DOM对象
- 事件绑定： ✅ 在handleKitchenOutput函数中绑定所有事件监听器
- 命令响应： ✅ 实现自定义命令处理函数
🎯 正确的浮动按钮管理流程
浮动按钮应该采用"子功能模块自主管理"的设计原则，避免框架层过度干预：
正确的流程应该是：
- home.js 切换菜单时：
- 调用当前模块的 cleanup() 函数
- 调用新模块的 init() 或 handleXxx() 函数
- 子功能模块在自己的初始化函数中：
- 显示自己的浮动按钮（display = 'block'）
- 绑定按钮事件
- 显示交互区内容
- 子功能模块在自己的清理函数中：
- 隐藏自己的浮动按钮（display = 'none'）
- 解绑按钮事件
设计优势：
- 框架层解耦： home.js 不需要知道具体有哪些子功能模块
- 模块自治： 每个子功能模块完全控制自己的浮动按钮
- 易于扩展： 新增模块时无需修改框架层代码
- 职责清晰： 框架负责调度，模块负责具体实现
🔄 交互机制
系统采用模块化的交互设计：
- 模块化加载： 每个子菜功能模块，把自己的功能独立加载到交互区， 在交互区里定义本子菜单进行交互的 显示对象 和 id
- 事件绑定： 模块调入时对 index.html 命令发送按键监听器绑定
- 现场清理： 从当前子菜单切换出来时， 要自动清理创建的DOM对象
- 命令响应： index.html 发送按钮，把消息发送到当前子菜单 Js ，每个功能模块自定义命令处理功能
- 编码规范： 所有函数和对象命令为方便区分， 统一使用文件名作为前缀命名
🔧 子菜单清理机制规范
确保在切换子菜单时，前一个模块的界面内容和事件监听器被正确清理，避免内容"停在页面上"的问题：
清理调用流程：
- 子菜单切换触发 →
home_selectChildMenu()
- 清理当前模块 →
home_notifyActiveModuleCleanup()
- 恢复默认按钮 →
home_restoreDefaultSendButton()
- 调用新模块 →
home_callChildMenuHandler()
- 模块自行清理 → 各模块的
cleanup() 函数
关键要点：
- 自动清理： 子菜单切换时自动调用清理函数
- 按钮恢复： 发送按钮监听器恢复到默认状态
- 模块清理： 各模块需实现自己的cleanup函数
- 避免残留： 防止界面内容和事件监听器残留
🎯 浮动按钮设计最佳实践
🔄 浮动按钮设计方法
子功能的浮动按钮采用"静态定义，动态控制"的设计理念：
设计原则：
- 静态定义： 浮动按钮在HTML中静态定义
- 动态控制： 通过CSS的
display属性控制显示/隐藏
- 直接清理： 清理时直接移除DOM元素
<div id="menuOutput_saveButton" class="menuOutput_save-button"
style="display: none; position: fixed; bottom: 20px; right: 20px;"
onclick="menuOutputMenuOutput.menuOutput_saveData()">
保存
</div>
// 显示按钮
menuOutput_enableSaveButton: function() {
const saveButton = document.getElementById('menuOutput_saveButton');
if (saveButton) {
saveButton.style.display = 'block';
}
}
// 清理按钮
menuOutput_cleanup: function() {
const saveButton = document.getElementById('menuOutput_saveButton');
if (saveButton) {
saveButton.remove();
}
}
设计优势：
- 按钮生命周期管理简单： 按钮在HTML中定义，清理时直接移除DOM元素
- 无复杂事件监听器： 按钮使用简单的
onclick属性绑定事件，不需要额外的事件监听器清理
- 状态重置彻底： 清理函数不仅移除按钮，还移除整个界面内容，确保完全重置
🎯 主框架控制函数（home.js中）
🔄 浮动按钮显示开关控制函数
主框架通过以下核心函数实现浮动按钮的模块化显示控制：
1. floatingButtonManager.switchModule(moduleName)
- 功能：模块切换时的总调度函数
- 处理：先隐藏当前模块按钮，再显示新模块按钮
- 调用时机：每次子菜单切换时
2. floatingButtonManager.showModuleButtons(moduleName)
- 功能：显示指定模块的浮动按钮
- 处理：根据模块名显示对应的按钮组，并绑定事件
- 支持模块：group-meal（团餐）、todo（待办）
3. floatingButtonManager.hideModuleButtons(moduleName)
- 功能：隐藏指定模块的浮动按钮
- 处理：隐藏按钮组并清理事件监听器
4. home_callChildMenuHandler(parentMenu, childMenu)
- 功能：子菜单切换的主入口
- 处理：调用floatingButtonManager进行按钮状态切换
- 逻辑：menu-input+group-meal时显示团餐按钮，todo+todo时显示待办按钮
设计原则：
- 模块化控制： 每个模块独立管理自己的浮动按钮
- 状态同步： 按钮显示状态与当前活动模块同步
- 自动清理： 切换模块时自动清理前一个模块的按钮
- 条件触发： 根据特定菜单组合条件显示对应按钮
🔧 各子功能JS函数浮动按钮控制
🔄 浮动按钮函数分工体系
系统采用分层设计，主框架统一调度，各模块负责具体功能实现：
### 主框架控制函数（home.js中）
1. floatingButtonManager.switchModule(moduleName)
- 功能：模块切换时的总调度函数
- 处理：先隐藏当前模块按钮，再显示新模块按钮
- 调用时机：每次子菜单切换时
2. floatingButtonManager.showModuleButtons(moduleName)
- 功能：显示指定模块的浮动按钮
- 处理：根据模块名显示对应的按钮组，并绑定事件
- 支持模块：group-meal（团餐）、todo（待办）
3. floatingButtonManager.hideModuleButtons(moduleName)
- 功能：隐藏指定模块的浮动按钮
- 处理：隐藏按钮组并清理事件监听器
4. home_callChildMenuHandler(parentMenu, childMenu)
- 功能：子菜单切换的主入口
- 处理：调用floatingButtonManager进行按钮状态切换
- 逻辑：menu-input+group-meal时显示团餐按钮，todo+todo时显示待办按钮
### 模块级函数（各模块JS中）
5. groupInput_bindFloatingButtonEvents() （团餐模块）
- 功能：绑定团餐按钮的点击和拖拽事件
- 注意：只负责功能逻辑，不控制显示
6. groupInput_cleanup() （团餐模块）
- 功能：清理团餐按钮的事件监听器
- 注意：只负责清理，不控制隐藏
7. todo_bindFloatingButtonEvents() （待办模块）
### 状态管理函数
8. home_cleanupFloatingButtons(parentMenu, childMenu)
- 功能：根据菜单条件清理浮动按钮
- 处理：隐藏所有按钮组，然后按条件显示特定按钮
9. 全局状态变量
- home_currentActiveModule：记录当前活动模块
- floatingButtonManager.currentModule：记录当前显示的按钮模块
设计优势：
- 职责分离： 主框架负责调度，模块负责具体功能
- 模块独立： 各模块可以独立开发和维护
- 状态同步： 全局状态变量确保状态一致性
- 扩展性强： 新增模块只需实现对应函数即可
食堂后台管理系统 © 2025 - 专业餐饮管理解决方案