zhangmenu/static/js/app.js

// 应用入口

const App = {
    // 初始化应用
    async init() {
        console.log('应用初始化...');

        // 初始化事件监听
        this.initEventListeners();

        // 加载初始数据
        await this.loadInitialData();

        // 显示默认页面
        this.switchPage('menu');

        console.log('应用初始化完成');
    },

    // 初始化事件监听
    initEventListeners() {
        // 底部导航点击
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                const page = item.dataset.page;
                if (page) {
                    App.switchPage(page);
                }
            });
        });

        // FAB按钮 - 根据当前页面决定行为
        const fab = document.getElementById('fab-add');
        if (fab) {
            fab.addEventListener('click', () => {
                if (AppState.currentPage === 'menu') {
                    // 菜单页：创建新菜品
                    showDishModal();
                } else if (AppState.currentPage === 'orders') {
                    // 订单页：创建新订单
                    showOrderModal();
                }
            });
        }

        // 搜索按钮
        const searchBtn = document.getElementById('search-btn');
        if (searchBtn) {
            searchBtn.addEventListener('click', () => {
                const keyword = document.getElementById('search-input').value;
                AppState.setPage('search');
                document.getElementById('search-panel').classList.add('active');
                MenuPage.searchDishes(keyword);
            });
        }

        // 搜索面板关闭
        const searchBackBtn = document.getElementById('search-panel-back');
        if (searchBackBtn) {
            searchBackBtn.addEventListener('click', () => {
                document.getElementById('search-panel').classList.remove('active');
                App.switchPage(AppState.currentPage || 'menu');
            });
        }
    },

    // 加载初始数据
    async loadInitialData() {
        try {
            // 并行加载所有数据
            const [categoriesRes, dishesRes, ordersRes] = await Promise.all([
                fetch(`${API_BASE}/categories/`),
                fetch(`${API_BASE}/dishes/`),
                fetch(`${API_BASE}/orders/`)
            ]);

            const categories = await categoriesRes.json();
            const dishes = await dishesRes.json();
            const orders = await ordersRes.json();

            AppState.setCategories(categories);
            AppState.setDishes(dishes);
            AppState.setOrders(orders);

        } catch (e) {
            console.error('加载初始数据失败:', e);
        }
    },

    // 切换页面
    switchPage(page) {
        // 更新状态
        AppState.setPage(page);

        // 更新导航
        document.querySelectorAll('.nav-item').forEach(item => {
            item.classList.toggle('active', item.dataset.page === page);
        });

        // 更新页面显示
        document.querySelectorAll('.page').forEach(p => {
            p.classList.remove('active');
        });

        const pageEl = document.getElementById(`${page}-page`);
        if (pageEl) {
            pageEl.classList.add('active');
        }

        // 根据页面执行对应初始化
        if (page === 'menu') {
            MenuPage.init();
        } else if (page === 'orders') {
            OrdersPage.init();
        } else if (page === 'stats') {
            StatsPage.init();
        }
    }
};

// DOM 加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    // 初始化全局变量（保持向后兼容）
    window.API_BASE = '/api';

    // 初始化应用
    App.init();
});

// 导出
window.App = App;