AI 生成: 一个面向个人/团队/家庭的智能旅游规划工具，支持AI行程生成、地图标注与景点打卡记录。

2026-09-29 04:31:48 +08:00
commit 7e7bd600e4
8 changed files with 678 additions and 0 deletions
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Travel Planner · 智能旅游规划</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="logo">🌍 Travel Planner</div>
+    <div class="user-area" id="userArea">
+      <button id="loginBtn" class="btn">登录 / 注册</button>
+    </div>
+  </header>
+
+  <main class="layout">
+    <aside class="sidebar">
+      <section class="panel">
+        <h3>AI 智能规划</h3>
+        <label>目的地
+          <input id="destInput" type="text" placeholder="例如：杭州" value="杭州" />
+        </label>
+        <label>天数
+          <input id="daysInput" type="number" min="1" max="15" value="3" />
+        </label>
+        <label>偏好
+          <select id="prefInput">
+            <option value="自然风光">自然风光</option>
+            <option value="历史文化">历史文化</option>
+            <option value="美食购物">美食购物</option>
+            <option value="亲子家庭">亲子家庭</option>
+          </select>
+        </label>
+        <button id="genBtn" class="btn primary">生成行程</button>
+      </section>
+
+      <section class="panel">
+        <h3>显示模式</h3>
+        <div class="filter-group">
+          <label><input type="radio" name="filter" value="all" checked /> 全部</label>
+          <label><input type="radio" name="filter" value="visited" /> 去过</label>
+          <label><input type="radio" name="filter" value="wish" /> 想去</label>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h3>我的景点</h3>
+        <ul id="spotList" class="spot-list"></ul>
+      </section>
+
+      <section class="panel">
+        <h3>行程结果</h3>
+        <div id="planResult" class="plan-result">还没有生成行程，试试点击「生成行程」吧～</div>
+      </section>
+    </aside>
+
+    <section class="map-wrap">
+      <div id="map"></div>
+      <div class="hint">💡 在地图上点击任意位置可添加景点标注</div>
+    </section>
+  </main>
+
+  <!-- 登录弹窗 -->
+  <div id="loginModal" class="modal hidden">
+    <div class="modal-content">
+      <h3 id="modalTitle">登录</h3>
+      <input id="usernameInput" type="text" placeholder="用户名" />
+      <input id="passwordInput" type="password" placeholder="密码" />
+      <div class="modal-actions">
+        <button id="doLogin" class="btn primary">登录</button>
+        <button id="doRegister" class="btn">注册</button>
+        <button id="closeModal" class="btn ghost">取消</button>
+      </div>
+      <p class="tip">数据保存在本地浏览器，仅用于演示。</p>
+    </div>
+  </div>
+
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="js/auth.js"></script>
+  <script src="js/map.js"></script>
+  <script src="js/ai.js"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>