好的，我基于第一次生成的那个**暖米白+深翠绿+香槟金**风格的旅行App，新增一个「准备出行」的创建行程界面，所有视觉规范完全保持一致。
```json
{
"summary": "基于第一版旅行规划App的视觉风格（暖米白背景#fafaf9、深翠绿#2d6a4f、香槟金#b8a07a、大圆角卡片），新增了一个「准备出行」界面——包含旅行名称、日期选择、预算设定和行程景点添加功能。",
"widget": {
"type": "custom-template",
"isAPI": false,
"api": null,
"fullWidth": true,
"html": "<style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…;);\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n background: #fafaf9;\n min-height: 100vh;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 2rem 1rem;\n }\n\n .phone-frame {\n position: relative;\n background: #ffffff;\n border-radius: 40px;\n box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);\n padding: 12px;\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n aspect-ratio: 390 / 844;\n max-width: 380px;\n width: 100%;\n }\n\n .phone-frame:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 35px 80px -18px rgba(0, 0, 0, 0.25);\n }\n\n .phone-screen {\n width: 100%;\n height: 100%;\n border-radius: 30px;\n overflow: hidden;\n position: relative;\n background: #f8f7f4;\n display: flex;\n flex-direction: column;\n }\n\n .screen-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px 14px 6px;\n scrollbar-width: none;\n }\n\n .screen-content::-webkit-scrollbar {\n display: none;\n }\n\n /* ====== Status Bar ====== */\n .status-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 16px 4px;\n font-size: 11px;\n font-weight: 600;\n color: #1a1a2e;\n flex-shrink: 0;\n }\n\n .status-icons {\n display: flex;\n gap: 5px;\n align-items: center;\n font-size: 11px;\n }\n\n /* ====== Bottom Nav ====== */\n .bottom-nav {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 8px 10px 14px;\n border-top: 1px solid rgba(0, 0, 0, 0.05);\n flex-shrink: 0;\n }\n\n .nav-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n font-size: 9px;\n color: #aaa;\n transition: color 0.2s;\n cursor: default;\n }\n\n .nav-item.active {\n color: #2d6a4f;\n }\n\n .nav-item i {\n font-size: 16px;\n }\n\n /* ====== Card Base (same as first version) ====== */\n .card {\n background: #ffffff;\n border-radius: 16px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n padding: 14px;\n margin-bottom: 12px;\n transition: all 0.25s;\n border: 1px solid rgba(0, 0, 0, 0.03);\n }\n\n /* ====== Page Header ====== */\n .page-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 16px;\n }\n\n .page-header .back-btn {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n color: #555;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n cursor: default;\n flex-shrink: 0;\n }\n\n .page-header h2 {\n font-size: 17px;\n font-weight: 700;\n color: #1a1a2e;\n }\n\n /* ====== Form Styles ====== */\n .form-group {\n margin-bottom: 12px;\n }\n\n .form-group label {\n display: block;\n font-size: 11px;\n font-weight: 600;\n color: #888;\n margin-bottom: 6px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n .form-input {\n width: 100%;\n background: #fff;\n border: 1px solid rgba(0,0,0,0.06);\n border-radius: 12px;\n padding: 12px 14px;\n font-size: 14px;\n font-family: 'Inter', sans-serif;\n color: #1a1a2e;\n outline: none;\n transition: border-color 0.2s;\n }\n\n .form-input:focus {\n border-color: #2d6a4f;\n }\n\n .form-input::placeholder {\n color: #ccc;\n }\n\n .input-with-icon {\n position: relative;\n }\n\n .input-with-icon i {\n position: absolute;\n left: 14px;\n top: 50%;\n transform: translateY(-50%);\n color: #b8a07a;\n font-size: 14px;\n }\n\n .input-with-icon .form-input {\n padding-left: 38px;\n }\n\n .row-2 {\n display: flex;\n gap: 10px;\n }\n\n .row-2 .form-group {\n flex: 1;\n }\n\n /* ====== Budget Input ====== */\n .budget-display {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .budget-display .currency {\n font-size: 16px;\n font-weight: 600;\n color: #2d6a4f;\n }\n\n /* ====== Itinerary Section ====== */\n .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .section-header h3 {\n font-size: 13px;\n font-weight: 700;\n color: #1a1a2e;\n }\n\n .section-header .add-btn {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: #2d6a4f;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n cursor: default;\n }\n\n .day-card {\n background: #fff;\n border-radius: 14px;\n padding: 12px 14px;\n margin-bottom: 10px;\n border: 1px solid rgba(0,0,0,0.03);\n box-shadow: 0 1px 6px rgba(0,0,0,0.03);\n }\n\n .day-card .day-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .day-card .day-header .day-label {\n font-size: 12px;\n font-weight: 600;\n color: #2d6a4f;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .day-card .day-header .day-label .badge {\n background: rgba(45,106,79,0.08);\n padding: 2px 8px;\n border-radius: 4px;\n font-size: 9px;\n font-weight: 500;\n }\n\n .day-card .day-header .more-btn {\n color: #ccc;\n font-size: 12px;\n cursor: default;\n }\n\n .spot-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 6px 0;\n }\n\n .spot-item .time {\n font-size: 10px;\n color: #b8a07a;\n font-weight: 500;\n width: 40px;\n flex-shrink: 0;\n }\n\n .spot-item .spot-name {\n font-size: 12px;\n color: #444;\n font-weight: 500;\n }\n\n .spot-item .spot-category {\n font-size: 9px;\n color: #bbb;\n margin-left: auto;\n }\n\n .add-spot {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 0 2px;\n color: #b8a07a;\n font-size: 11px;\n font-weight: 500;\n cursor: default;\n border-top: 1px dashed rgba(0,0,0,0.05);\n margin-top: 6px;\n }\n\n .add-spot i {\n font-size: 11px;\n }\n\n /* ====== Save Button ====== */\n .btn-save {\n background: #2d6a4f;\n color: #fff;\n border: none;\n border-radius: 14px;\n padding: 14px 0;\n width: 100%;\n font-size: 14px;\n font-weight: 600;\n font-family: 'Inter', sans-serif;\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 4px;\n margin-bottom: 4px;\n transition: background 0.25s;\n }\n\n .btn-save i {\n font-size: 14px;\n }\n</style>\n\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n\n<div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"status-bar\">\n <span class=\"time\">9:41</span>\n <div class=\"status-icons\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div class=\"screen-content\">\n <!-- Header -->\n <div class=\"page-header\">\n <div class=\"back-btn\"><i class=\"fa-solid fa-chevron-left\"></i></div>\n <h2>准备出行</h2>\n </div>\n\n <!-- Trip Name -->\n <div class=\"form-group\">\n <label>旅行名称</label>\n <div class=\"input-with-icon\">\n <i class=\"fa-solid fa-pen\"></i>\n <input class=\"form-input\" type=\"text\" placeholder=\"给你的旅程取个名字...\" value=\"🎋 京都·岚山秋韵\">\n </div>\n </div>\n\n <!-- Date Row -->\n <div class=\"row-2\">\n <div class=\"form-group\">\n <label>出发日期</label>\n <div class=\"input-with-icon\">\n <i class=\"fa-regular fa-calendar\"></i>\n <input class=\"form-input\" type=\"text\" placeholder=\"选择日期\" value=\"2026.11.03\">\n </div>\n </div>\n <div class=\"form-group\">\n <label>结束日期</label>\n <div class=\"input-with-icon\">\n <i class=\"fa-regular fa-calendar\"></i>\n <input class=\"form-input\" type=\"text\" placeholder=\"选择日期\" value=\"2026.11.09\">\n </div>\n </div>\n </div>\n\n <!-- Duration Hint -->\n <div style=\"font-size:10px;color:#b8a07a;margin-top:-6px;margin-bottom:12px;padding-left:2px;\">\n <i class=\"fa-regular fa-clock\"></i> 共 7 天\n </div>\n\n <!-- Budget -->\n <div class=\"form-group\">\n <label>预算</label>\n <div class=\"card\" style=\"padding:12px 14px;margin-bottom:0;\">\n <div class=\"budget-display\">\n <span class=\"currency\">¥</span>\n <input class=\"form-input\" type=\"text\" placeholder=\"输入预算金额\" value=\"12,000\" style=\"border:none;padding:4px 6px;font-size:18px;font-weight:700;color:#1a1a2e;\">\n <span style=\"font-size:11px;color:#bbb;margin-left:auto;\">CNY</span>\n </div>\n <div style=\"font-size:10px;color:#bbb;margin-top:4px;padding-left:2px;\">\n 预估剩余：<span style=\"color:#2d6a4f;font-weight:600;\">¥3,200</span>\n </div>\n </div>\n </div>\n\n <!-- Itinerary Section -->\n <div class=\"section-header\">\n <h3>📋 行程规划</h3>\n <div class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></div>\n </div>\n\n <!-- Day 1 -->\n <div class=\"day-card\">\n <div class=\"day-header\">\n <div class=\"day-label\">\n Day 1\n <span class=\"badge\">11月3日 · 抵达</span>\n </div>\n <div class=\"more-btn\"><i class=\"fa-solid fa-ellipsis\"></i></div>\n </div>\n <div class=\"spot-item\">\n <span class=\"time\">14:00</span>\n <span class=\"spot-name\">关西国际机场抵达</span>\n <span class=\"spot-category\">交通</span>\n </div>\n <div class=\"spot-item\">\n <span class=\"time\">16:30</span>\n <span class=\"spot-name\">京都站 · 入住酒店</span>\n <span class=\"spot-category\">住宿</span>\n </div>\n <div class=\"spot-item\">\n <span class=\"time\">18:00</span>\n <span class=\"spot-name\">祇园 · 夜游花见小路</span>\n <span class=\"spot-category\">文化</span>\n </div>\n <div class=\"add-spot\">\n <i class=\"fa-solid fa-plus\"></i> 添加景点\n </div>\n </div>\n\n <!-- Day 2 -->\n <div class=\"day-card\">\n <div class=\"day-header\">\n <div class=\"day-label\">\n Day 2\n <span class=\"badge\">11月4日 · 岚山</span>\n </div>\n <div class=\"more-btn\"><i class=\"fa-solid fa-ellipsis\"></i></div>\n </div>\n <div class=\"spot-item\">\n <span class=\"time\">07:00</span>\n <span class=\"spot-name\">岚山竹林 · 清晨漫步</span>\n <span class=\"spot-category\">自然</span>\n </div>\n <div class=\"spot-item\">\n <span class=\"time\">09:00</span>\n <span class=\"spot-name\">天龙寺 · 枯山水庭园</span>\n <span class=\"spot-category\">文化</span>\n </div>\n <div class=\"spot-item\">\n <span class=\"time\">11:30</span>\n <span class=\"spot-name\">% Arabica 岚山店</span>\n <span class=\"spot-category\">美食</span>\n </div>\n <div class=\"add-spot\">\n <i class=\"fa-solid fa-plus\"></i> 添加景点\n </div>\n </div>\n\n <!-- Day 3 Preview -->\n <div class=\"day-card\" style=\"opacity:0.6;\">\n <div class=\"day-header\">\n <div class=\"day-label\">\n Day 3\n <span class=\"badge\" style=\"background:#f0efec;color:#999;\">待规划</span>\n </div>\n <div class=\"more-btn\"><i class=\"fa-solid fa-ellipsis\"></i></div>\n </div>\n <div style=\"text-align:center;padding:12px 0 6px;font-size:11px;color:#bbb;\">\n <i class=\"fa-solid fa-plus\" style=\"margin-right:4px;\"></i> 点击添加行程\n </div>\n </div>\n\n <!-- Save Button -->\n <button class=\"btn-save\">\n <i class=\"fa-regular fa-circle-check\"></i> 创建行程\n </button>\n\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\"><i class=\"fa-solid fa-house\"></i><span>首页</span></div>\n <div class=\"nav-item active\"><i class=\"fa-solid fa-map\"></i><span>行程</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-compass\"></i><span>探索</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-user\"></i><span>我的</span></div>\n </div>\n </div>\n</div>",
"next": ["添加更多天数","增加目的地搜索","预算可视化图表","添加酒店预订模块","保存后跳转到行程详情"]
}
}
```
---
## ✅ 变更说明
| 项目 | 说明 |
|------|------|
| **风格一致性** | 完全沿用第一版：暖米白 `#fafaf9` 背景、纯白卡片、16px大圆角、`#2d6a4f` 绿 + `#b8a07a` 香槟金配色 |
| **新增功能** | 旅行名称输入 / 起止日期 / 预算设置（带剩余预估） / 每日行程规划（景点 + 时间 + 分类） |
| **交互保留** | 保持悬停抬升效果、底部导航、状态栏 |
| **未改动部分** | 手机框架、圆角、阴影、字体、间距体系全部继承第一版 |
这个界面成为你App的**第5个界面** — **「准备出行」创建行程页** 🚀