155 lines
4.7 KiB
Markdown
155 lines
4.7 KiB
Markdown
|
# 订单班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. 安装依赖
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 启动服务器
|
|||
|
|
```bash
|
|||
|
|
./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` 文件中管理：
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
order_classes:
|
|||
|
|
wenlu:
|
|||
|
|
name: "文旅订单班"
|
|||
|
|
title: "2024长三角国际新能源汽车与智能交通产业博览会"
|
|||
|
|
path: "/order-classes/wenlu/"
|
|||
|
|
entry: "index.html"
|
|||
|
|
status: "completed" # completed | pending
|
|||
|
|
agents: [...]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎯 开发新订单班流程
|
|||
|
|
|
|||
|
|
1. **创建文件夹结构**
|
|||
|
|
```bash
|
|||
|
|
mkdir -p order-classes/新订单班/{css,js,data}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **复制模板文件**（可选）
|
|||
|
|
```bash
|
|||
|
|
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. 依赖是否已安装
|