\ud83e\udded \u667a\u80fd\u884c\u7a0b\u89c4\u5212\u7cfb\u7edf

\u4e00\u7ad9\u5f0f\u65c5\u884c\u884c\u7a0b\u89c4\u5212\u5e73\u53f0\uff0c\u4ece\u201c\u7075\u611f\u8f93\u5165\u201d\u5230\u201c\u6700\u7ec8\u4ea4\u4ed8\u201d\u7684\u5b8c\u6574\u95ed\u73af\u3002

\u9879\u76ee\u6982\u8ff0

\u57fa\u4e8e Vue 3 + Vite + Leaflet \u6784\u5efa\u7684\u4ea4\u4e92\u5f0f\u884c\u7a0b\u89c4\u5212\u7cfb\u7edf\uff0c\u5b9e\u73b0\u4e86 PRD \u4e2d\u5b9a\u4e49\u7684\u4e09\u9636\u6bb5\u4ea4\u4e92\u67b6\u6784\u3002

\u6280\u672f\u6808

• \u524d\u7aef\u6846\u67b6: Vue 3 (Composition API)
• \u6784\u5efa\u5de5\u5177: Vite 5
• \u72b6\u6001\u7ba1\u7406: Pinia
• \u5730\u56fe\u5e93: Leaflet
• \u62d6\u62fd\u6392\u5e8f: SortableJS
• \u8def\u7531 API: OSRM (\u5f00\u6e90\u514d\u8d39)

\u5feb\u901f\u5f00\u59cb

# \u5b89\u88c5\u4f9d\u8d56
NODE_ENV=development npm install

# \u5f00\u53d1\u6a21\u5f0f
npm run dev

# \u6784\u5efa\u751f\u4ea7\u7248\u672c
npm run build

# \u9884\u89c8\u751f\u4ea7\u7248\u672c
npm run preview

\u9879\u76ee\u7ed3\u6784

src/
\u251c\u2500\u2500 components/
\u2502   \u251c\u2500\u2500 App.vue              # \u6839\u7ec4\u4ef6\uff0c\u9636\u6bb5\u5207\u6362
\u2502   \u251c\u2500\u2500 ChatInterface.vue    # Phase 1: \u5bf9\u8bdd\u63a5\u53e3
\u2502   \u251c\u2500\u2500 ComparisonView.vue   # Phase 2: \u65b9\u6848\u5bf9\u6bd4
\u2502   \u251c\u2500\u2500 Workbench.vue        # Phase 3: \u6c89\u6d78\u5de5\u4f5c\u53f0
\u2502   \u251c\u2500\u2500 TimelinePanel.vue    # \u5de6\u4fa7\u65f6\u95f4\u7ebf\uff08SortableJS\u62d6\u62fd\uff09
\u2502   \u251c\u2500\u2500 DetailPanel.vue      # \u4e2d\u95f4\u8be6\u60c5\u9762\u677f
\u2502   \u251c\u2500\u2500 MapView.vue          # Leaflet \u5730\u56fe\u7ec4\u4ef6\uff08\u771f\u5b9e\u8def\u7ebf\uff09
\u2502   \u251c\u2500\u2500 ModeToggle.vue       # \u9884\u89c8/\u7f16\u8f91\u6a21\u5f0f\u5207\u6362
\u2502   \u2514\u2500\u2500 ReplacementPanel.vue # \u667a\u80fd\u66ff\u6362\u63a8\u8350\u9762\u677f\uff08\u60ac\u505c\u9884\u6f14\uff09
\u251c\u2500\u2500 stores/
\u2502   \u2514\u2500\u2500 itinerary.js         # Pinia \u72b6\u6001\u7ba1\u7406\uff08\u8def\u7ebf\u4f18\u5316\uff09
\u251c\u2500\u2500 data/
\u2502   \u2514\u2500\u2500 sampleData.js        # \u4e91\u53574\u5929\u884c\u7a0b\u793a\u4f8b\u6570\u636e + AI\u6a21\u677f
\u251c\u2500\u2500 services/
\u2502   \u2514\u2500\u2500 routeService.js      # OSRM \u8def\u5f84\u8ba1\u7b97\u670d\u52a1 + \u7ed5\u8def\u68c0\u6d4b
\u251c\u2500\u2500 utils/
\u2502   \u2514\u2500\u2500 exporter.js          # \u9759\u6001 HTML \u5bfc\u51fa\u5668
\u2514\u2500\u2500 main.js                  # \u5165\u53e3\u6587\u4ef6

\u5df2\u5b9e\u73b0\u529f\u80fd\u2705

Phase 1: \u5bf9\u8bdd\u63a5\u53e3

• ChatGPT \u98ce\u683c\u5bf9\u8bdd\u6d41
• \u7528\u6237\u8f93\u5165\u4e0e AI \u54cd\u5e94\u6a21\u62df
• \u65b9\u6848\u5361\u7247\u5f39\u51fa\u52a8\u753b
• \u601d\u8003\u4e2d\u52a8\u753b\u6548\u679c

Phase 2: \u65b9\u6848\u5bf9\u6bd4

• \u4e09\u65b9\u6848\u5e76\u5217\u5c55\u793a
• \u5bf9\u6bd4\u7ef4\u5ea6\uff1a\u91cc\u7a0b/\u9a7e\u9a76/\u9884\u7b97/\u666f\u70b9\u5bc6\u5ea6
• \u8def\u7ebf\u6982\u89c8\u4e0e\u6838\u5fc3\u4eae\u70b9
• \u70b9\u51fb\u9009\u62e9\u8fdb\u5165\u5de5\u4f5c\u53f0

Phase 3: \u6c89\u6d78\u5de5\u4f5c\u53f0

• \u9884\u89c8\u6a21\u5f0f\uff1a\u5168\u5c4f\u5730\u56fe + \u81ea\u52a8\u64ad\u653e\u5c0f\u8f66\u52a8\u753b + \u7cbe\u7f8e\u8be6\u60c5\u5361
• \u7f16\u8f91\u6a21\u5f0f\uff1a\u62d6\u62fd\u624b\u67c4 + \u5220\u9664/\u66ff\u6362\u6309\u94ae + \u865a\u7ebf\u8def\u7ebf
• \u53cc\u6a21\u5f0f\u65e0\u7f1d\u5207\u6362
• \u5730\u56fe\u6807\u8bb0\u70b9\u51fb\u4ea4\u4e92
• \u5c0f\u8f66\u6cbf\u8def\u7ebf\u52a8\u753b\uff08requestAnimationFrame\uff09
• \u65f6\u95f4\u7ebf\u5bfc\u822a\uff08\u4e0a\u4e00\u7ad9/\u4e0b\u4e00\u7ad9/\u952e\u76d8\u65b9\u5411\u952e\uff09
• \u884c\u7a0b\u7edf\u8ba1\uff08\u603b\u91cc\u7a0b/\u9a7e\u9a76\u65f6\u95f4/\u5929\u6570\uff09

Phase 4: \u667a\u80fd\u4e0e\u63a8\u8350

• \u667a\u80fd\u66ff\u6362\u63a8\u8350\u9762\u677f
• \u60ac\u505c\u865a\u7ebf\u9884\u6f14 - \u9f20\u6807\u60ac\u505c\u5373\u53ef\u5728\u5730\u56fe\u4e0a\u9884\u89c8\u66ff\u6362\u540e\u7684\u8def\u7ebf
• \u771f\u5b9e\u8def\u7ebf\u83b7\u53d6 - \u8c03\u7528 OSRM \u514d\u8d39 API \u83b7\u53d6\u771f\u5b9e\u9a7e\u8f66\u8def\u7ebf
• \u667a\u80fd\u7ea0\u504f - \u81ea\u52a8\u68c0\u6d4b\u7ed5\u8def\u5e76\u5f39\u51fa\u4f18\u5316\u63d0\u793a
• \u4e00\u952e\u4f18\u5316 - \u81ea\u52a8\u6309\u5730\u7406\u987a\u5e8f\u91cd\u6392\u884c\u7a0b\u8282\u70b9
• \u62d6\u62fd\u6392\u5e8f - SortableJS \u5b9e\u73b0\u65f6\u95f4\u7ebf\u62d6\u62fd\uff0c\u5730\u56fe\u5b9e\u65f6\u66f4\u65b0

Phase 5: \u5bfc\u51fa\u4e0e\u5206\u4eab

• \u5bfc\u51fa\u9759\u6001 HTML - \u5c06\u5f53\u524d\u7f16\u8f91\u597d\u7684\u884c\u7a0b\u5bfc\u51fa\u4e3a\u72ec\u7acb HTML \u6587\u4ef6
• \u5bfc\u51fa\u6587\u4ef6\u5305\u542b\u5b8c\u6574\u5730\u56fe\u3001\u52a8\u753b\u3001\u8be6\u60c5\u5c55\u793a
• \u53ef\u76f4\u63a5\u6253\u5f00\u6d4f\u89c8\uff0c\u65e0\u9700\u670d\u52a1\u5668

\u5f85\u5b9e\u73b0\u529f\u80fd

• \u771f\u5b9e AI \u63a5\u53e3\u8c03\u7528\uff08\u5df2\u6709\u914d\u7f6e\u9875\u9762\uff0c\u5f85\u63a5\u5165\u5b9e\u9645\u751f\u6210\uff09
• \u751f\u6210\u5206\u4eab\u94fe\u63a5\uff08\u9700\u540e\u7aef\u652f\u6301\uff09
• \u591a\u884c\u7a0b\u6587\u4ef6\u7ba1\u7406
• \u7528\u6237\u6536\u85cf\u4e0e\u5386\u53f2\u8bb0\u5f55

\u2699\ufe0f \u540e\u53f0\u914d\u7f6e

\u7cfb\u7edf\u652f\u6301\u901a\u8fc7\u53f3\u4e0a\u89d2\u9f7f\u8f6e\u6309\u94ae\u8fdb\u5165 AI \u6a21\u578b\u914d\u7f6e\u9875\u9762\uff0c\u76ee\u524d\u4ec5\u652f\u6301 \u963f\u91cc\u4e91 DashScope\uff08\u901a\u4e49\u5343\u95ee\uff09\uff1a

\u914d\u7f6e\u9879	\u8bf4\u660e
API Key	\u4ece\u963f\u91cc\u4e91\u767e\u70bc\u63a7\u5236\u53f0\u83b7\u53d6
\u6a21\u578b\u9009\u62e9	Qwen-Turbo\uff08\u5feb\u901f\uff09\u3001Qwen-Plus\uff08\u5747\u8861\uff09\u3001Qwen-Max\uff08\u9ad8\u8d28\u91cf\uff09\u3001Qwen-Long\uff08\u957f\u6587\u672c\uff09
Base URL	\u9ed8\u8ba4 https://dashscope.aliyuncs.com/compatible-mode/v1
Temperature	\u521b\u9020\u6027\u63a7\u5236\uff080=\u7cbe\u786e\uff0c1=\u968f\u673a\uff09
Max Tokens	\u6700\u5927\u8f93\u51fa\u957f\u5ea6
\u6d4b\u8bd5\u8fde\u63a5	\u9a8c\u8bc1 API Key \u548c\u6a21\u578b\u662f\u5426\u53ef\u7528

\u914d\u7f6e\u6570\u636e\u901a\u8fc7 localStorage \u6301\u4e45\u5316\u5b58\u50a8\uff0c\u5237\u65b0\u9875\u9762\u4e0d\u4e22\u5931\u3002

\u6838\u5fc3\u4ea4\u4e92\u7ec6\u8282

\u66ff\u6362\u9884\u6f14

1. \u70b9\u51fb\u8282\u70b9 \u2192 \u9009\u62e9\u201c\u66ff\u6362\u201d
2. \u4fa7\u8fb9\u6ed1\u51fa\u63a8\u8350\u5217\u8868
3. \u60ac\u505c\u9884\u89c8: \u9f20\u6807\u60ac\u505c\u5373\u5728\u5730\u56fe\u4e0a\u663e\u793a\u865a\u7ebf\u9884\u6f14
4. \u786e\u8ba4\u66ff\u6362 \u2192 \u5b9e\u7ebf\u66f4\u65b0\uff0c\u8def\u7ebf\u81ea\u52a8\u91cd\u7b97

\u667a\u80fd\u7ea0\u504f

• \u5f53\u7528\u6237\u62d6\u62fd\u5bfc\u81f4\u987a\u5e8f\u4e0d\u5408\u7406\uff0c\u9876\u90e8\u5f39\u51fa\u63d0\u793a
• \u70b9\u51fb\u201c\u4e00\u952e\u4f18\u5316\u201d\u5373\u53ef\u81ea\u52a8\u91cd\u6392\u4e3a\u6700\u77ed\u8def\u5f84

\u5b9e\u65f6\u53cd\u9988

• \u6bcf\u6b21\u4fee\u6539\u540e\uff0c\u9876\u90e8\u6570\u636e\u6761\u5b9e\u65f6\u66f4\u65b0\u603b\u91cc\u7a0b\u3001\u603b\u8017\u65f6
• \u7ed5\u8def\u6bb5\u4ee5\u7ea2\u8272\u7a81\u51fa\u663e\u793a