n8n_Demo/web_frontend/web_result

订单班AI生成方案展示系统

📁 项目结构

web_result/
├── order-classes/          # 12个订单班独立文件夹
│   ├── wenlu/             # 文旅订单班（已完成）
│   │   ├── index.html     # 主页
│   │   ├── overview.html  # 项目概览
│   │   ├── exhibition.html# 展会设计
│   │   ├── marketing.html # 市场营销
│   │   ├── operation.html # 运营管理
│   │   ├── budget.html    # 财务预算
│   │   ├── risk.html      # 风险控制
│   │   ├── css/           # 专属CSS文件
│   │   ├── js/            # 专属JS文件
│   │   └── data/          # 专属数据资源
│   │
│   ├── food/              # 食品订单班（已完成）
│   │   ├── index.html     # 轻食店铺经营方案
│   │   ├── css/           # 专属CSS文件
│   │   ├── js/            # 专属JS文件
│   │   └── data/          # 专属数据资源
│   │
│   ├── caijing/           # 财经商贸订单班（待开发）
│   ├── jiankang/          # 大健康订单班（待开发）
│   ├── huagong/           # 化工订单班（待开发）
│   ├── huanbao/           # 环保订单班（待开发）
│   ├── jiaotong/          # 交通物流订单班（待开发）
│   ├── nengyuan/          # 能源订单班（待开发）
│   ├── shijue/            # 视觉设计订单班（待开发）
│   ├── tumu/              # 土木订单班（待开发）
│   ├── zhineng-dev/       # 智能开发订单班（待开发）
│   └── zhineng-mfg/       # 智能制造订单班（待开发）
│
├── app.js                 # Node.js Express服务器
├── routes.yaml            # 路由配置文件
├── package.json           # 项目依赖配置
├── start-router.sh        # 启动脚本
└── README.md              # 项目说明文档

🚀 快速启动

1. 安装依赖

npm install

2. 启动服务器

./start-router.sh
# 或
node app.js

3. 访问地址（端口4155）

• 首页：http://localhost:4155/
• 文旅订单班：http://localhost:4155/order-class/wenlu
• 食品订单班：http://localhost:4155/order-class/food

📝 文件管理原则

重要原则

每个订单班的所有资源必须完全独立存放在其专属文件夹内

1. HTML文件：所有页面文件放在订单班根目录
2. CSS文件：所有样式文件放在 订单班/css/ 目录
3. JS文件：所有脚本文件放在 订单班/js/ 目录
4. 数据资源：所有数据、图片等放在 订单班/data/ 目录

示例结构

order-classes/wenlu/
├── index.html         # 主页
├── [其他页面].html    # 子页面
├── css/
│   ├── styles.css     # 主样式
│   └── animations.css # 动画样式
├── js/
│   ├── main.js        # 主脚本
│   └── [其他脚本].js  # 功能脚本
└── data/
    └── 会展策划/      # 数据资源
        └── image/     # 图片资源

🔧 路由配置

路由配置在 routes.yaml 文件中管理：

order_classes:
  wenlu:
    name: "文旅订单班"
    title: "2024长三角国际新能源汽车与智能交通产业博览会"
    path: "/order-classes/wenlu/"
    entry: "index.html"
    status: "completed"  # completed | pending
    agents: [...]

🎯 开发新订单班流程

1. 创建文件夹结构

mkdir -p order-classes/新订单班/{css,js,data}

2. 复制模板文件（可选）

cp -r order-classes/wenlu/* order-classes/新订单班/

3. 开发页面内容

• 创建 index.html 主页
• 添加所需的子页面
• 编写专属的CSS和JS

4. 更新路由配置 在 routes.yaml 中添加新订单班配置，并将 status 改为 "completed"

5. 测试访问 重启服务器后访问：http://localhost:4155/order-class/新订单班

⚠️ 注意事项

1. 端口必须是 4155（硬性要求）
2. 每个订单班完全独立，不共享资源
3. 所有路径使用相对路径
4. 保持文件结构整洁规范
5. 开发完成后更新 routes.yaml 的状态

📊 当前进度

• ✅ 文旅订单班（100%完成）
• ✅ 食品订单班（100%完成）
• ⏳ 其他10个订单班（待开发）

🛠️ 技术栈

• Node.js + Express
• YAML配置管理
• Tailwind CSS
• 原生JavaScript
• Font Awesome图标

📞 问题反馈

如有问题，请检查：

1. 端口是否为4155
2. 文件路径是否正确
3. routes.yaml配置是否正确
4. 依赖是否已安装