# menu-manager-wireless

**Repository Path**: xiaaoke/menu-manager-wireless

## Basic Information

- **Project Name**: menu-manager-wireless
- **Description**: 菜单管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-04
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小刘菜单管理系统使用文档

## 项目地址

Gitee 仓库：[https://gitee.com/xiaaoke/menu-manager-wireless](https://gitee.com/xiaaoke/menu-manager-wireless)

GitHub 仓库：[https://github.com/suipianma/menu-manager-wireless](https://github.com/suipianma/menu-manager-wireless)

## 系统概述

小刘菜单管理系统是一个基于HTML、CSS和JavaScript开发的单页面应用，用于管理和维护菜品菜单。系统无需后端服务器，可直接在浏览器中运行。

### 主要特点
- 响应式设计，适配各种屏幕尺寸
- 支持深色/浅色主题切换
- 完整的菜品管理功能
- 数据备份与恢复
- 图片上传与预览
- 强大的筛选和排序功能

## 版本说明

系统提供两个版本，推荐优先使用 `menu-manager-wireless.html`：

### 1. menu-manager-wireless.html（推荐）
- **存储方式**：使用 IndexedDB 存储数据，存储空间更大（约50MB）
- **文件操作**：使用现代 File System API 进行数据导入导出
- **技术特性**：使用 async/await 等现代 JavaScript 特性
- **容错能力**：更健壮的错误处理和数据迁移机制
- **存储限制**：存储空间使用超过80%时会提示用户导出数据

### 2. menu-manager.html（传统版）
- **存储方式**：使用 localStorage 存储数据，存储空间较小（约5MB）
- **文件操作**：使用传统的文件下载方式进行数据备份
- **技术特性**：使用传统 JavaScript 回调方式
- **存储限制**：localStorage 空间有限，大量图片可能导致存储不足

## 系统功能

### 1. 菜品管理

#### 添加菜品
1. 点击页面上方的"添加菜品"按钮
2. 在弹出的表单中填写以下信息：
   - 菜品名称（必填）
   - 价格（必填，需大于0）
   - 分类（热菜、凉菜、汤品、主食、饮品）
   - 描述（可选）
   - 图片（可选，支持各种图片格式）
3. 点击"添加菜品"按钮保存

#### 编辑菜品
1. 在菜品列表中找到要编辑的菜品
2. 点击该菜品右侧的"修改"按钮
3. 在弹出的表单中修改相应信息
4. 点击"保存修改"按钮完成编辑

#### 删除菜品
1. 在菜品列表中找到要删除的菜品
2. 点击该菜品右侧的"删除"按钮
3. 在确认对话框中点击"确定"按钮

### 2. 筛选与搜索

#### 搜索功能
- 在搜索框中输入菜品名称关键词，系统会实时筛选匹配的菜品

#### 分类筛选
- 在分类下拉菜单中选择特定分类，系统会筛选出该分类下的所有菜品
- 选择"全部分类"可查看所有菜品

#### 排序功能
- 按名称升序/降序排序
- 按价格升序/降序排序

### 3. 数据管理

#### 导出数据
1. 点击页面底部的"导出数据"按钮
2. **menu-manager-wireless.html**：系统会打开文件保存对话框，选择保存位置
3. **menu-manager.html**：系统会生成一个JSON格式的备份文件并自动下载
4. 文件名格式为：menu-backup-YYYY-MM-DD.json（传统版）或 menu-data.json（无线版）

#### 导入数据
1. 点击页面底部的"导入数据"按钮
2. **menu-manager-wireless.html**：系统会打开文件选择对话框，选择之前导出的JSON文件
3. **menu-manager.html**：选择之前导出的JSON备份文件
4. 系统会自动导入数据并刷新页面

### 4. 其他功能

#### 主题切换
- 点击页面右上角的主题切换按钮（🌙/☀️）可在深色和浅色主题之间切换
- 主题设置会保存在本地，下次打开时会自动应用

#### 图片预览
- 点击菜品图片可在模态框中查看大图
- 点击模态框外部或关闭按钮可关闭预览

## 使用指南

### 首次使用
1. **推荐**：直接在浏览器中打开 `menu-manager-wireless.html` 文件
2. 系统会自动初始化，显示空状态提示
3. 点击"添加菜品"按钮开始创建菜单

### 日常使用
1. **添加新菜品**：使用"添加菜品"按钮
2. **管理现有菜品**：使用菜品列表中的"修改"和"删除"按钮
3. **查找菜品**：使用搜索框和分类筛选
4. **调整显示顺序**：使用排序功能
5. **定期备份**：使用"导出数据"功能备份菜单数据

### 数据恢复
1. 在系统中点击"导入数据"按钮
2. 选择之前导出的备份文件
3. 系统会自动导入数据并刷新页面

## 技术特性

### menu-manager-wireless.html（推荐）
- **数据存储**：使用 IndexedDB 存储数据，存储空间更大（约50MB）
- **数据迁移**：自动从 localStorage 迁移数据到 IndexedDB
- **文件操作**：使用现代 File System API 进行文件操作
- **错误处理**：更健壮的错误处理机制
- **性能优化**：使用 async/await 提高代码可读性和性能

### menu-manager.html（传统版）
- **数据存储**：使用 localStorage 存储数据，存储空间较小（约5MB）
- **文件操作**：使用传统的文件下载方式
- **兼容性**：支持更旧版本的浏览器

### 共同特性
- **图片处理**：支持上传图片作为菜品配图，自动压缩图片以节省存储空间
- **响应式设计**：适配桌面、平板和移动设备
- **实时操作**：实时筛选和排序，无需页面刷新
- **本地存储**：数据存储在本地，无需网络请求

## 注意事项

1. **数据安全**：数据存储在浏览器本地，清除浏览器数据会导致菜单数据丢失。请定期使用"导出数据"功能备份数据。

2. **存储空间**：
   - **menu-manager-wireless.html**：使用 IndexedDB，存储空间较大（约50MB）
   - **menu-manager.html**：使用 localStorage，存储空间有限（约5MB），大量图片可能会占用较多空间

3. **图片大小**：为确保系统性能和存储空间合理使用，建议上传的图片不要过大，系统会自动压缩图片。

4. **浏览器兼容性**：
   - **menu-manager-wireless.html**：需要支持 IndexedDB 和 File System API 的现代浏览器
   - **menu-manager.html**：支持更多旧版本浏览器

5. **数据导入**：导入数据会覆盖现有数据，请在导入前确保已备份当前数据。

## 故障排除

### 常见问题

1. **无法添加菜品**
   - 检查菜品名称和价格是否已填写
   - 确保价格大于0

2. **图片上传失败**
   - 检查图片格式是否支持
   - 确保图片大小合理

3. **数据丢失**
   - 检查是否清除了浏览器数据
   - 使用之前导出的备份文件恢复数据

4. **存储空间不足**
   - 导出数据并清除浏览器数据
   - 减少图片使用或使用更小的图片
   - **推荐**：切换到 `menu-manager-wireless.html` 版本以获得更大的存储空间

5. **导入/导出失败**
   - 确保文件格式正确（JSON格式）
   - 检查浏览器是否支持相应的文件操作API
   - **menu-manager-wireless.html**：确保浏览器支持 File System API

### 联系支持

如果您在使用过程中遇到其他问题，请联系系统管理员获取帮助。