Agent-n8n/web_frontend/web_result/js/router.js

// 路由系统 - 支持多订单班结果展示
class OrderClassRouter {
    constructor() {
        this.routes = {
            'wenlu': {
                name: '文旅订单班',
                path: '/result/wenlu',
                template: 'wenlu-result.html',
                title: '2024长三角国际新能源汽车与智能交通产业博览会',
                agents: ['项目策划专家', '展会设计师', '市场营销专家', '运营管理专家', '财务分析师', '风险控制专家']
            },
            'food': {
                name: '食品订单班',
                path: '/result/food',
                template: 'food-result.html',
                title: '中高端个性化轻食店铺经营方案',
                agents: ['轻食店经营管理专家', '餐饮市场调研专家', '餐饮品牌设计专家', '菜品研发专家', '餐厅选址装修专家', '餐饮团队人员管理专家', '财务预算专家']
            }
        };

        this.currentRoute = null;
        this.init();
    }

    init() {
        // 监听URL变化
        window.addEventListener('popstate', () => this.handleRoute());

        // 处理初始路由
        this.handleRoute();
    }

    handleRoute() {
        const path = window.location.pathname;
        const urlParams = new URLSearchParams(window.location.search);
        const orderClass = urlParams.get('class') || this.getClassFromPath(path);

        if (orderClass && this.routes[orderClass]) {
            this.loadRoute(orderClass);
        } else {
            // 默认加载文旅订单班
            this.loadRoute('wenlu');
        }
    }

    getClassFromPath(path) {
        // 从路径中提取订单班类型
        const match = path.match(/\/result\/(\w+)/);
        return match ? match[1] : null;
    }

    loadRoute(orderClass) {
        const route = this.routes[orderClass];
        if (!route) return;

        this.currentRoute = orderClass;

        // 更新页面标题
        document.title = route.title;

        // 更新URL（不刷新页面）
        const newUrl = `${window.location.origin}${route.path}`;
        if (window.location.href !== newUrl) {
            window.history.pushState({ orderClass }, '', newUrl);
        }

        // 加载对应的内容
        this.loadContent(route);
    }

    loadContent(route) {
        // 检查是否有特定的内容容器
        const contentContainer = document.getElementById('order-class-content');
        if (!contentContainer) {
            console.warn('未找到内容容器 #order-class-content');
            return;
        }

        // 根据订单班类型加载不同的内容
        if (route.template) {
            this.loadTemplate(route.template, contentContainer);
        } else {
            // 动态生成内容
            this.generateContent(route, contentContainer);
        }
    }

    async loadTemplate(templatePath, container) {
        try {
            const response = await fetch(`/pages/${templatePath}`);
            if (response.ok) {
                const html = await response.text();
                container.innerHTML = html;
                this.initializePageScripts();
            } else {
                this.generateContent(this.routes[this.currentRoute], container);
            }
        } catch (error) {
            console.error('加载模板失败:', error);
            this.generateContent(this.routes[this.currentRoute], container);
        }
    }

    generateContent(route, container) {
        // 动态生成页面内容
        const html = `
            <div class="order-class-result">
                <header class="result-header">
                    <h1>${route.title}</h1>
                    <p class="subtitle">基于AI Agent多角色协作生成的完整方案</p>
                </header>

                <section class="agents-section">
                    <h2>参与的AI专家团队</h2>
                    <div class="agents-grid">
                        ${route.agents.map(agent => `
                            <div class="agent-card">
                                <div class="agent-avatar">
                                    <img src="/data/订单班文档资料/${this.currentRoute === 'food' ? '食品' : '文旅'}/agent头像/${agent}.png"
                                         alt="${agent}"
                                         onerror="this.src='/data/agent头像/default.png'">
                                </div>
                                <h3>${agent}</h3>
                            </div>
                        `).join('')}
                    </div>
                </section>

                <section class="content-section">
                    <div id="dynamic-content">
                        <!-- 动态加载具体内容 -->
                    </div>
                </section>
            </div>
        `;

        container.innerHTML = html;

        // 加载具体内容
        this.loadOrderClassContent(route);
    }

    async loadOrderClassContent(route) {
        const contentDiv = document.getElementById('dynamic-content');
        if (!contentDiv) return;

        // 根据不同订单班加载不同内容
        if (this.currentRoute === 'food') {
            await this.loadFoodContent(contentDiv);
        } else if (this.currentRoute === 'wenlu') {
            await this.loadWenluContent(contentDiv);
        }
    }

    async loadFoodContent(container) {
        // 加载食品订单班的具体内容
        container.innerHTML = `
            <div class="food-content">
                <nav class="content-nav">
                    <a href="#market-research">市场调研</a>
                    <a href="#brand-design">品牌设计</a>
                    <a href="#menu-development">菜品研发</a>
                    <a href="#location-design">选址装修</a>
                    <a href="#team-management">团队管理</a>
                    <a href="#financial-budget">财务预算</a>
                    <a href="#operation-management">经营管理</a>
                </nav>

                <div class="content-sections">
                    <section id="market-research">
                        <h3>市场调研分析</h3>
                        <div class="section-content"></div>
                    </section>

                    <section id="brand-design">
                        <h3>品牌设计方案</h3>
                        <div class="section-content"></div>
                    </section>

                    <section id="menu-development">
                        <h3>菜品研发计划</h3>
                        <div class="section-content"></div>
                    </section>

                    <section id="location-design">
                        <h3>选址与装修设计</h3>
                        <div class="section-content"></div>
                    </section>

                    <section id="team-management">
                        <h3>团队人员管理</h3>
                        <div class="section-content"></div>
                    </section>

                    <section id="financial-budget">
                        <h3>财务预算规划</h3>
                        <div class="section-content"></div>
                    </section>

                    <section id="operation-management">
                        <h3>经营管理策略</h3>
                        <div class="section-content"></div>
                    </section>
                </div>
            </div>
        `;

        // 加载各部分内容
        await this.loadFoodSectionContent();
    }

    async loadWenluContent(container) {
        // 加载文旅订单班的内容（使用现有的页面）
        container.innerHTML = `
            <div class="wenlu-content">
                <nav class="content-nav">
                    <a href="/pages/overview.html">项目概览</a>
                    <a href="/pages/exhibition.html">展会设计</a>
                    <a href="/pages/marketing.html">市场营销</a>
                    <a href="/pages/operation.html">运营管理</a>
                    <a href="/pages/budget.html">财务预算</a>
                    <a href="/pages/risk.html">风险控制</a>
                </nav>

                <div class="content-frame">
                    <iframe src="/pages/overview.html" frameborder="0"></iframe>
                </div>
            </div>
        `;
    }

    async loadFoodSectionContent() {
        // 从markdown文件加载内容
        try {
            const response = await fetch('/data/订单班文档资料/食品/notion文稿/中高端个性化轻食店铺经营方案 278d463fce51805081f7cfdc7280f4a4.md');
            if (response.ok) {
                const markdown = await response.text();
                // 这里可以使用markdown解析器将内容转换为HTML
                this.parseFoodMarkdown(markdown);
            }
        } catch (error) {
            console.error('加载食品内容失败:', error);
        }
    }

    parseFoodMarkdown(markdown) {
        // 简单的markdown解析（实际项目中建议使用专门的markdown解析库）
        const sections = markdown.split(/^#{1,3}\s+/m);
        // 分配内容到各个部分
        // 这里需要根据实际的markdown结构进行解析
    }

    initializePageScripts() {
        // 初始化页面特定的脚本
        if (window.initOrderClassPage) {
            window.initOrderClassPage(this.currentRoute);
        }
    }

    // 导航到指定订单班
    navigateTo(orderClass) {
        if (this.routes[orderClass]) {
            this.loadRoute(orderClass);
        }
    }
}

// 初始化路由器
document.addEventListener('DOMContentLoaded', () => {
    window.orderClassRouter = new OrderClassRouter();
});

// 导出给其他模块使用
if (typeof module !== 'undefined' && module.exports) {
    module.exports = OrderClassRouter;
}