|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>智能行程规划系统 - 交互设计 v2</title>
|
|
|
<style>
|
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
|
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:#f5f7fa;color:#1a1a2e;line-height:1.6}
|
|
|
.top-bar{background:#fff;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px rgba(0,0,0,0.06);position:sticky;top:0;z-index:100}
|
|
|
.top-bar .brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:#2d3436}
|
|
|
.top-bar .brand span.icon{font-size:24px}
|
|
|
.top-bar .steps{display:flex;align-items:center;gap:6px}
|
|
|
.top-bar .step{display:flex;align-items:center;gap:6px;font-size:13px;color:#b2bec3}
|
|
|
.top-bar .step.active{color:#6c5ce7;font-weight:600}
|
|
|
.top-bar .step .num{width:22px;height:22px;border-radius:50%;background:#dfe6e9;color:#636e72;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
|
|
|
.top-bar .step.active .num{background:#6c5ce7;color:#fff}
|
|
|
.top-bar .step .line{width:28px;height:2px;background:#dfe6e9}
|
|
|
.top-bar .step.active .line{background:#6c5ce7}
|
|
|
.top-bar .step.done .num{background:#00b894;color:#fff}
|
|
|
.top-bar .step.done .line{background:#00b894}
|
|
|
.top-bar .back-btn{background:none;border:none;color:#636e72;cursor:pointer;font-size:14px;padding:6px 12px;border-radius:6px}
|
|
|
.top-bar .back-btn:hover{background:#f5f7fa}
|
|
|
.container{max-width:1100px;margin:0 auto;padding:24px 32px}
|
|
|
.page{display:none}.page.active{display:block}
|
|
|
.home-header{text-align:center;padding:48px 0 36px}
|
|
|
.home-header h1{font-size:28px;font-weight:800;color:#2d3436;margin-bottom:8px}
|
|
|
.home-header p{color:#636e72;font-size:15px}
|
|
|
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
|
|
|
.mode-card{background:#fff;border-radius:14px;padding:28px 22px;cursor:pointer;transition:all 0.25s;border:2px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
|
|
|
.mode-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(108,92,231,0.12);border-color:#6c5ce7}
|
|
|
.mode-card .mc-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px}
|
|
|
.mode-card:nth-child(1) .mc-icon{background:#e8e4ff}
|
|
|
.mode-card:nth-child(2) .mc-icon{background:#fff3e0}
|
|
|
.mode-card:nth-child(3) .mc-icon{background:#e0f7fa}
|
|
|
.mode-card h3{font-size:17px;font-weight:700;margin-bottom:6px;color:#2d3436}
|
|
|
.mode-card p{font-size:13px;color:#636e72;margin-bottom:14px;min-height:36px}
|
|
|
.mode-card .mc-tags{display:flex;flex-wrap:wrap;gap:6px}
|
|
|
.mode-card .mc-tag{font-size:11px;padding:3px 10px;border-radius:12px;background:#f0f0f5;color:#636e72}
|
|
|
.form-wrap{max-width:580px;margin:0 auto;background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 20px rgba(0,0,0,0.05)}
|
|
|
.form-wrap h2{font-size:20px;font-weight:700;margin-bottom:24px;color:#2d3436;text-align:center}
|
|
|
.fg{margin-bottom:18px}
|
|
|
.fg label{display:block;font-size:13px;font-weight:600;color:#2d3436;margin-bottom:6px}
|
|
|
.fg input,.fg select,.fg textarea{width:100%;padding:10px 14px;border:1.5px solid #dfe6e9;border-radius:10px;font-size:14px;outline:none;transition:border 0.2s;font-family:inherit}
|
|
|
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:#6c5ce7}
|
|
|
.fg textarea{min-height:120px;resize:vertical}
|
|
|
.fg .hint{font-size:12px;color:#b2bec3;margin-top:4px}
|
|
|
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
|
|
.btn-primary{width:100%;padding:13px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s}
|
|
|
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(108,92,231,0.35)}
|
|
|
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
|
|
|
.load-panel{max-width:580px;margin:20px auto 0;background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,0.05);overflow:hidden}
|
|
|
.load-panel .lp-head{padding:14px 20px;background:#f8f9fa;border-bottom:1px solid #eee;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px}
|
|
|
.load-panel .lp-head .spin{width:18px;height:18px;border:2.5px solid #dfe6e9;border-top-color:#6c5ce7;border-radius:50%;animation:spin 0.7s linear infinite}
|
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
|
.load-panel .lp-body{padding:16px 20px;max-height:200px;overflow-y:auto}
|
|
|
.load-panel .lp-step{display:flex;gap:8px;font-size:13px;color:#636e72;margin-bottom:8px}
|
|
|
.load-panel .lp-step .ck{color:#00b894;font-weight:700}
|
|
|
.plan-list{max-width:760px;margin:0 auto}
|
|
|
.plan-list .pl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
|
|
|
.plan-list .pl-head h2{font-size:20px;font-weight:700}
|
|
|
.plan-card{background:#fff;border-radius:14px;padding:22px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,0.04);border:2px solid #eee;transition:all 0.2s;cursor:pointer}
|
|
|
.plan-card:hover{border-color:#6c5ce7;box-shadow:0 4px 16px rgba(108,92,231,0.1)}
|
|
|
.plan-card .pc-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
|
|
|
.plan-card .pc-badge{font-size:11px;padding:3px 10px;border-radius:6px;font-weight:700}
|
|
|
.plan-card .pc-badge.a{background:#fff3e0;color:#e17055}
|
|
|
.plan-card .pc-badge.b{background:#e0f2fe;color:#0984e3}
|
|
|
.plan-card .pc-badge.c{background:#d1fae5;color:#00b894}
|
|
|
.plan-card .pc-title{font-size:17px;font-weight:700;color:#2d3436}
|
|
|
.plan-card .pc-meta{display:flex;gap:16px;font-size:13px;color:#636e72;margin-bottom:10px}
|
|
|
.plan-card .pc-route{background:#f8f9fa;padding:8px 12px;border-radius:8px;font-size:13px;color:#636e72;margin-bottom:10px}
|
|
|
.plan-card .pc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
|
|
|
.plan-card .pc-tag{font-size:12px;padding:3px 10px;border-radius:6px;background:#f0f0f5;color:#636e72}
|
|
|
.plan-card .pc-actions{text-align:right}
|
|
|
.plan-card .pc-btn{padding:8px 22px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
|
|
|
.chat-wrap{max-width:800px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 130px)}
|
|
|
.chat-msgs{flex:1;overflow-y:auto;padding:20px 0;display:flex;flex-direction:column;gap:18px}
|
|
|
.chat-bubble{display:flex;gap:10px;max-width:75%}
|
|
|
.chat-bubble.bot{align-self:flex-start}
|
|
|
.chat-bubble.user{align-self:flex-end;flex-direction:row-reverse}
|
|
|
.chat-bubble .cb-av{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
|
|
|
.chat-bubble.bot .cb-av{background:#e8e4ff}
|
|
|
.chat-bubble.user .cb-av{background:#d1fae5}
|
|
|
.chat-bubble .cb-body{padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.6}
|
|
|
.chat-bubble.bot .cb-body{background:#fff;color:#2d3436;border-bottom-left-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
|
|
|
.chat-bubble.user .cb-body{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border-bottom-right-radius:4px}
|
|
|
.chat-input-bar{padding:14px 0;display:flex;gap:10px}
|
|
|
.chat-input-bar input{flex:1;padding:12px 18px;border:1.5px solid #dfe6e9;border-radius:24px;font-size:14px;outline:none}
|
|
|
.chat-input-bar input:focus{border-color:#6c5ce7}
|
|
|
.chat-input-bar button{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;cursor:pointer;font-size:16px}
|
|
|
.chat-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
|
|
|
.chat-cards .cc{background:#fff;border-radius:12px;padding:16px;border:1.5px solid #eee;cursor:pointer;transition:all 0.2s}
|
|
|
.chat-cards .cc:hover{border-color:#6c5ce7}
|
|
|
.chat-cards .cc .cc-badge{font-size:11px;padding:2px 8px;border-radius:4px;background:#fff3e0;color:#e17055;font-weight:600}
|
|
|
.chat-cards .cc h4{font-size:14px;margin:6px 0 4px}
|
|
|
.chat-cards .cc .cc-meta{font-size:12px;color:#636e72}
|
|
|
.chat-cards .cc .cc-link{margin-top:10px;font-size:12px;color:#6c5ce7;font-weight:600}
|
|
|
.wb-wrap{display:grid;grid-template-columns:220px 300px 1fr;gap:14px;height:calc(100vh - 120px)}
|
|
|
.wb-left{background:#2d3436;border-radius:12px;padding:16px;overflow-y:auto}
|
|
|
.wb-left .wl-title{color:#fff;font-size:13px;font-weight:600;margin-bottom:14px}
|
|
|
.wb-left .wl-item{display:flex;gap:10px;padding:8px 6px;cursor:pointer;color:rgba(255,255,255,0.5);transition:all 0.2s;border-radius:6px}
|
|
|
.wb-left .wl-item:hover,.wb-left .wl-item.active{color:#fff;background:rgba(108,92,231,0.3)}
|
|
|
.wb-left .wl-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.3);margin-top:7px}
|
|
|
.wb-left .wl-item.active .wl-dot{background:#6c5ce7}
|
|
|
.wb-left .wl-name{font-size:13px}
|
|
|
.wb-left .wl-day{font-size:11px;opacity:0.5}
|
|
|
.wb-left .wl-nav{margin-top:16px;display:flex;gap:8px}
|
|
|
.wb-left .wl-nav button{flex:1;padding:8px;border-radius:8px;border:none;font-size:12px;cursor:pointer}
|
|
|
.wb-left .wl-nav .prev{background:rgba(255,255,255,0.1);color:#fff}
|
|
|
.wb-left .wl-nav .next{background:#6c5ce7;color:#fff}
|
|
|
.wb-mid{background:#fff;border-radius:12px;overflow-y:auto}
|
|
|
.wb-mid .wm-hero{height:140px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);position:relative}
|
|
|
.wb-mid .wm-hero .wm-ov{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,0.5));color:#fff}
|
|
|
.wb-mid .wm-hero .wm-ov h3{font-size:16px}
|
|
|
.wb-mid .wm-hero .wm-ov p{font-size:12px;opacity:0.8}
|
|
|
.wb-mid .wm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
|
|
|
.wb-mid .wm-stat{text-align:center;padding:10px;background:#f8f9fa;border-radius:10px}
|
|
|
.wb-mid .wm-stat .ws-val{font-size:15px;font-weight:700;color:#6c5ce7}
|
|
|
.wb-mid .wm-stat .ws-lbl{font-size:11px;color:#636e72}
|
|
|
.wb-mid .wm-sec{padding:14px 16px;border-top:1px solid #f0f0f0}
|
|
|
.wb-mid .wm-sec h4{font-size:13px;margin-bottom:8px}
|
|
|
.wb-mid .wm-si{display:flex;gap:8px;font-size:12px;margin-bottom:6px}
|
|
|
.wb-mid .wm-si .si-time{color:#6c5ce7;font-weight:600;min-width:32px}
|
|
|
.wb-mid .wm-foods,.wb-mid .wm-spots{display:flex;flex-wrap:wrap;gap:5px}
|
|
|
.wb-mid .wm-foods span,.wb-mid .wm-spots span{font-size:11px;padding:3px 8px;border-radius:5px;background:#f0f0f5;color:#636e72}
|
|
|
.wb-mid .wm-tips{background:#fff8e1;border-left:3px solid #f39c12;padding:10px 12px;border-radius:0 8px 8px 0;font-size:12px;color:#856404}
|
|
|
.wb-right{background:#dfe6e9;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#636e72;font-size:14px;position:relative;overflow:hidden}
|
|
|
.wb-right .wb-map-demo{width:100%;height:100%;background:#e8e8e8}
|
|
|
.wb-top{grid-column:1/-1;background:#fff;padding:12px 20px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
|
|
|
.wb-top .wb-plan-selector{display:flex;gap:8px}
|
|
|
.wb-top .wb-plan-btn{padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;border:1.5px solid #dfe6e9;background:#fff;color:#636e72;transition:all 0.2s}
|
|
|
.wb-top .wb-plan-btn.active{background:#6c5ce7;color:#fff;border-color:#6c5ce7}
|
|
|
.wb-top .wb-back-btn{padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;border:1.5px solid #6c5ce7;background:#fff;color:#6c5ce7;transition:all 0.2s}
|
|
|
.wb-top .wb-back-btn:hover{background:#6c5ce7;color:#fff}
|
|
|
.divider{margin:50px 0 24px;text-align:center;padding-top:30px;border-top:2px dashed #dfe6e9}
|
|
|
.divider h2{font-size:20px;color:#2d3436;margin-bottom:6px}
|
|
|
.divider p{color:#636e72;font-size:13px}
|
|
|
.btn-sm{padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;border:none;font-weight:500}
|
|
|
.btn-sm.outline{background:#fff;border:1.5px solid #dfe6e9;color:#636e72}
|
|
|
.btn-sm.outline:hover{border-color:#6c5ce7;color:#6c5ce7}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<nav class="top-bar">
|
|
|
<div class="brand"><span class="icon">🗺️</span> 智能行程规划</div>
|
|
|
<div class="steps" id="navSteps">
|
|
|
<div class="step active" id="s1"><div class="num">1</div><span>选择方式</span><div class="line"></div></div>
|
|
|
<div class="step" id="s2"><div class="num">2</div><span>输入需求</span><div class="line"></div></div>
|
|
|
<div class="step" id="s3"><div class="num">3</div><span>方案选择</span><div class="line"></div></div>
|
|
|
<div class="step" id="s4"><div class="num">4</div><span>工作台</span></div>
|
|
|
</div>
|
|
|
<button class="back-btn" onclick="goHome()">← 首页</button>
|
|
|
</nav>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<!-- 页面1：首页 -->
|
|
|
<div class="page active" id="p-home">
|
|
|
<div class="home-header">
|
|
|
<h1>智能行程规划</h1>
|
|
|
<p>选择一种方式开始你的旅行规划</p>
|
|
|
</div>
|
|
|
<div class="mode-grid">
|
|
|
<div class="mode-card" onclick="goTo('p-quick');setStep(2)">
|
|
|
<div class="mc-icon"></div>
|
|
|
<h3>快速规划</h3>
|
|
|
<p>输入目的地和天数，一键生成多个旅行方案供你选择</p>
|
|
|
<div class="mc-tags"><span class="mc-tag">快速生成</span><span class="mc-tag">多方案对比</span><span class="mc-tag">即输即得</span></div>
|
|
|
</div>
|
|
|
<div class="mode-card" onclick="goTo('p-chat');setStep(2)">
|
|
|
<div class="mc-icon">💬</div>
|
|
|
<h3>聊天问答式</h3>
|
|
|
<p>通过对话交流，我逐步了解你的需求，为你量身定制完美行程</p>
|
|
|
<div class="mc-tags"><span class="mc-tag">多轮对话</span><span class="mc-tag">逐步收集信息</span><span class="mc-tag">个性化规划</span></div>
|
|
|
</div>
|
|
|
<div class="mode-card" onclick="goTo('p-custom');setStep(2)">
|
|
|
<div class="mc-icon">✏️</div>
|
|
|
<h3>自定义行程</h3>
|
|
|
<p>输入你已规划的行程，AI 评估合理性并给出优化建议</p>
|
|
|
<div class="mc-tags"><span class="mc-tag">行程评估</span><span class="mc-tag">智能建议</span><span class="mc-tag">优化方案</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 页面2：快速规划表单 -->
|
|
|
<div class="page" id="p-quick">
|
|
|
<div class="home-header"><h1>⚡ 快速规划</h1><p>输入目的地和天数，立即生成多个旅行方案</p></div>
|
|
|
<div class="form-wrap">
|
|
|
<div class="form-row">
|
|
|
<div class="fg"><label>目的地</label><input placeholder="如：云南、贵州、四川" value="四川"></div>
|
|
|
<div class="fg"><label>出行天数</label><select><option>2天</option><option selected>3天</option><option>5天</option><option>7天</option></select></div>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
<div class="fg"><label>出发日期</label><input type="date" value="2026-07-02"></div>
|
|
|
<div class="fg"><label>出行方式</label><select><option selected>自驾</option><option>公共交通</option><option>步行/骑行</option></select></div>
|
|
|
</div>
|
|
|
<div class="fg"><label>其他需求（选填）</label><input placeholder="如：带老人小孩、预算范围、必去景点等"></div>
|
|
|
<button class="btn-primary" onclick="simulateLoading()">立即生成方案</button>
|
|
|
</div>
|
|
|
<div class="load-panel" id="quick-load" style="display:none">
|
|
|
<div class="lp-head"><div class="spin"></div><span>AI 正在规划中...</span><span style="margin-left:auto;font-size:12px;color:#b2bec3">收起</span></div>
|
|
|
<div class="lp-body">
|
|
|
<div class="lp-step"><span class="ck">✓</span> 分析用户需求：目的地四川，3天，自驾</div>
|
|
|
<div class="lp-step"><span class="ck">✓</span> 检索当地景点与路线数据</div>
|
|
|
<div class="lp-step"><span class="ck">✓</span> 计算交通时间与距离</div>
|
|
|
<div class="lp-step"><span class="ck">✓</span> 生成 3 个差异化方案</div>
|
|
|
<div class="lp-step" style="opacity:0.5">⏳ 正在优化方案详情...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 页面3：快速规划方案列表 -->
|
|
|
<div class="page" id="p-quick-plans">
|
|
|
<div class="plan-list">
|
|
|
<div class="pl-head"><h2>📋 为你生成了 3 个方案</h2><button class="btn-sm outline" onclick="goTo('p-quick')">🔄 重新生成</button></div>
|
|
|
<div class="plan-card" onclick="goToWorkbench('方案A')">
|
|
|
<div class="pc-top"><span class="pc-badge a">方案A</span><span class="pc-title">经典熊猫与古堰休闲游</span></div>
|
|
|
<div class="pc-meta"><span> 3天</span><span>🚗 ~650km</span><span>💰 ¥3200</span></div>
|
|
|
<div class="pc-route">成都→都江堰→青城山→成都</div>
|
|
|
<div class="pc-tags"><span class="pc-tag">世界遗产都江堰水利工程</span><span class="pc-tag">青城山道教清幽</span><span class="pc-tag">成都熊猫基地</span></div>
|
|
|
<div class="pc-actions"><button class="pc-btn">选择此方案 →</button></div>
|
|
|
</div>
|
|
|
<div class="plan-card" onclick="goToWorkbench('方案B')">
|
|
|
<div class="pc-top"><span class="pc-badge b">方案B</span><span class="pc-title">川西深度生态游</span></div>
|
|
|
<div class="pc-meta"><span>📅 3天</span><span>🚗 ~1200km</span><span>💰 ¥4500</span></div>
|
|
|
<div class="pc-route">成都→九寨沟→黄龙→若尔盖→成都</div>
|
|
|
<div class="pc-tags"><span class="pc-tag">九寨沟彩林与瀑布群</span><span class="pc-tag">黄龙钙华池与雪山</span><span class="pc-tag">若尔盖湿地草原星空</span></div>
|
|
|
<div class="pc-actions"><button class="pc-btn">选择此方案 →</button></div>
|
|
|
</div>
|
|
|
<div class="plan-card" onclick="goToWorkbench('方案C')">
|
|
|
<div class="pc-top"><span class="pc-badge c">方案C</span><span class="pc-title">川南秘境探索线</span></div>
|
|
|
<div class="pc-meta"><span>📅 3天</span><span>🚗 ~850km</span><span>💰 ¥2800</span></div>
|
|
|
<div class="pc-route">成都→宜宾→蜀南竹海→兴文石海→成都</div>
|
|
|
<div class="pc-tags"><span class="pc-tag">蜀南竹海翡翠长廊</span><span class="pc-tag">兴文天坑溶洞奇观</span><span class="pc-tag">宜宾长江第一城文化</span></div>
|
|
|
<div class="pc-actions"><button class="pc-btn">选择此方案 →</button></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 页面4：聊天问答 -->
|
|
|
<div class="page" id="p-chat">
|
|
|
<div class="chat-wrap">
|
|
|
<div class="chat-msgs">
|
|
|
<div class="chat-bubble bot">
|
|
|
<div class="cb-av">🤖</div>
|
|
|
<div class="cb-body">你好！我是你的行程规划助手。请告诉我：<br>• 想去哪里？（单个地点或多个地点组合）<br>• 几月出发？几天行程？<br>• 交通方式？（自驾/公共交通/步行）<br>• 有什么特殊需求？（带老人/小孩/特定景点）<br><br><em style="color:#b2bec3">示例：9月去云南，5天，自驾，带老人</em></div>
|
|
|
</div>
|
|
|
<div class="chat-bubble user">
|
|
|
<div class="cb-av">👤</div>
|
|
|
<div class="cb-body">9月去四川，大概5天时间，自驾</div>
|
|
|
</div>
|
|
|
<div class="chat-bubble bot">
|
|
|
<div class="cb-av">🤖</div>
|
|
|
<div class="cb-body">已为你生成 2 个方案，请查看下方卡片。<br><br><strong>【方案A】九寨黄龙秋韵线</strong><br>路线：成都-绵阳-九寨沟-黄龙-松潘-成都<br>5天 · 1150km · ¥3500<br><br><strong>【方案B】四姑娘山丹巴环线</strong><br>路线：成都-四姑娘山-丹巴甲居藏寨-康定-成都<br>5天 · 980km · ¥3200</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chat-cards">
|
|
|
<div class="cc" onclick="goToWorkbench('方案A')">
|
|
|
<span class="cc-badge">方案A</span>
|
|
|
<h4>九寨黄龙秋韵线</h4>
|
|
|
<div class="cc-meta">🚗 ~1150km ⏱ 18h 📅 5天 💰 ¥3500</div>
|
|
|
<div class="cc-link">选择此方案进入工作台 →</div>
|
|
|
</div>
|
|
|
<div class="cc" onclick="goToWorkbench('方案B')">
|
|
|
<span class="cc-badge" style="background:#e0f2fe;color:#0984e3">方案B</span>
|
|
|
<h4>四姑娘山丹巴环线</h4>
|
|
|
<div class="cc-meta">🚗 ~980km ⏱ 16h 📅 5天 💰 ¥3200</div>
|
|
|
<div class="cc-link">选择此方案进入工作台 →</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chat-input-bar">
|
|
|
<input placeholder="例如：9月去云南，5天，自驾">
|
|
|
<button>发送</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 页面5：自定义行程 -->
|
|
|
<div class="page" id="p-custom">
|
|
|
<div class="home-header">
|
|
|
<h1>✏️ 自定义行程</h1>
|
|
|
<p>输入你已规划的行程，AI 评估合理性并给出优化建议</p>
|
|
|
</div>
|
|
|
<div class="form-wrap">
|
|
|
<div class="fg">
|
|
|
<label>行程安排</label>
|
|
|
<textarea class="form-textarea" placeholder="例如： Day 1: 昆明 -> 大理，上午出发，下午逛大理古城 Day 2: 大理 -> 丽江，上午游览洱海，下午前往丽江 Day 3: 丽江一日游，游览玉龙雪山、束河古镇 Day 4: 丽江返程 也可以自由描述，AI 会自动解析..."></textarea>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
<div class="fg">
|
|
|
<label>出行方式</label>
|
|
|
<select>
|
|
|
<option selected>自驾</option>
|
|
|
<option>公共交通</option>
|
|
|
<option>步行/骑行</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="fg">
|
|
|
<label>同行人员</label>
|
|
|
<select>
|
|
|
<option selected>独自</option>
|
|
|
<option>情侣/夫妻</option>
|
|
|
<option>家庭（带老人小孩）</option>
|
|
|
<option>朋友结伴</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button class="btn-primary" onclick="alert('AI 正在评估行程合理性...')">AI 评估行程</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 页面6：工作台（沉浸式编辑） -->
|
|
|
<div class="page" id="p-workbench">
|
|
|
<div class="wb-wrap">
|
|
|
<!-- 工作台顶部：方案选择 + 返回按钮 -->
|
|
|
<div class="wb-top">
|
|
|
<div class="wb-plan-selector">
|
|
|
<button class="wb-plan-btn active" onclick="switchPlan(this,'A')">方案A</button>
|
|
|
<button class="wb-plan-btn" onclick="switchPlan(this,'B')">方案B</button>
|
|
|
<button class="wb-plan-btn" onclick="switchPlan(this,'C')">方案C</button>
|
|
|
</div>
|
|
|
<button class="wb-back-btn" onclick="goBackFromWorkbench()">← 返回方案列表</button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 左侧：时间线 -->
|
|
|
<div class="wb-left">
|
|
|
<div class="wl-title">📋 行程时间线</div>
|
|
|
<div class="wl-item active">
|
|
|
<div class="wl-dot"></div>
|
|
|
<div>
|
|
|
<div class="wl-name">成都市区</div>
|
|
|
<div class="wl-day">Day 1 · 0km</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wl-item">
|
|
|
<div class="wl-dot"></div>
|
|
|
<div>
|
|
|
<div class="wl-name">都江堰景区</div>
|
|
|
<div class="wl-day">Day 2 · 60km</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wl-item">
|
|
|
<div class="wl-dot"></div>
|
|
|
<div>
|
|
|
<div class="wl-name">青城山</div>
|
|
|
<div class="wl-day">Day 3 · 25km</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wl-nav">
|
|
|
<button class="prev">← 上一站</button>
|
|
|
<button class="next">下一站 →</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 中间：详情面板 -->
|
|
|
<div class="wb-mid">
|
|
|
<div class="wm-hero">
|
|
|
<div class="wm-ov">
|
|
|
<h3>成都市区</h3>
|
|
|
<p>天府之国核心，美食与慢生活之都</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wm-stats">
|
|
|
<div class="wm-stat">
|
|
|
<div class="ws-val">0km</div>
|
|
|
<div class="ws-lbl">行驶里程</div>
|
|
|
</div>
|
|
|
<div class="wm-stat">
|
|
|
<div class="ws-val">—</div>
|
|
|
<div class="ws-lbl">驾驶时间</div>
|
|
|
</div>
|
|
|
<div class="wm-stat">
|
|
|
<div class="ws-val">Day 1</div>
|
|
|
<div class="ws-lbl">第几天</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wm-sec">
|
|
|
<h4> 行程安排</h4>
|
|
|
<div class="wm-si"><span class="si-time">上午</span><span>参观大熊猫繁育研究基地</span></div>
|
|
|
<div class="wm-si"><span class="si-time">下午</span><span>逛宽窄巷子、武侯祠，品尝火锅</span></div>
|
|
|
</div>
|
|
|
<div class="wm-sec">
|
|
|
<h4>🍽️ 美食推荐</h4>
|
|
|
<div class="wm-foods">
|
|
|
<span>担担面</span><span>龙抄手</span><span>麻辣火锅</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wm-sec">
|
|
|
<h4>🏨 住宿推荐</h4>
|
|
|
<div style="font-size:13px;color:#636e72">春熙路商圈精品酒店</div>
|
|
|
</div>
|
|
|
<div class="wm-sec">
|
|
|
<h4>💡 注意事项</h4>
|
|
|
<div class="wm-tips">市区早晚高峰拥堵，建议错峰出行</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wb-right">
|
|
|
<div class="wb-map-demo">🗺️ 地图交互区域</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 底部说明 -->
|
|
|
<div class="divider">
|
|
|
<h2>交互设计说明</h2>
|
|
|
<p>本原型展示了从需求输入到方案生成的完整流程，风格统一、简洁。</p>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
function goTo(pageId) {
|
|
|
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
|
|
const target = document.getElementById(pageId);
|
|
|
if (target) target.classList.add('active');
|
|
|
}
|
|
|
|
|
|
function goHome() {
|
|
|
goTo('p-home');
|
|
|
setStep(1);
|
|
|
}
|
|
|
|
|
|
function setStep(n) {
|
|
|
const steps = document.querySelectorAll('.top-bar .step');
|
|
|
steps.forEach((s, i) => {
|
|
|
s.classList.remove('active', 'done');
|
|
|
if (i + 1 === n) s.classList.add('active');
|
|
|
else if (i + 1 < n) s.classList.add('done');
|
|
|
});
|
|
|
if (n === 4) {
|
|
|
steps[0].classList.add('done');
|
|
|
steps[1].classList.add('done');
|
|
|
steps[2].classList.add('done');
|
|
|
steps[3].classList.add('active');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function simulateLoading() {
|
|
|
const loadPanel = document.getElementById('quick-load');
|
|
|
loadPanel.style.display = 'block';
|
|
|
setTimeout(() => {
|
|
|
loadPanel.style.display = 'none';
|
|
|
goTo('p-quick-plans');
|
|
|
setStep(3);
|
|
|
}, 2000);
|
|
|
}
|
|
|
|
|
|
function goToWorkbench(scheme) {
|
|
|
goTo('p-workbench');
|
|
|
setStep(4);
|
|
|
}
|
|
|
|
|
|
function goBackFromWorkbench() {
|
|
|
goTo('p-quick-plans');
|
|
|
setStep(3);
|
|
|
}
|
|
|
|
|
|
function switchPlan(btn, scheme) {
|
|
|
document.querySelectorAll('.wb-plan-btn').forEach(b => b.classList.remove('active'));
|
|
|
btn.classList.add('active');
|
|
|
console.log("切换到: " + scheme);
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
