Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

【2026飞猪AI旅行创新大赛】TripBlocks — 模块化旅行计划台

Aberta
  • Algo errado?
#203 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
25/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
javascript, node.js, react, tailwindcss, vite
Domínio
ai, frontend, web-dev

Direção de pesquisa

The issue describes a complete travel planning application and lists React, Vite, Tailwind CSS, dnd-kit, and the Node server bridge, but does not point to a specific change or file. Start by reviewing the project structure and local setup with npm install and npm run dev:all; the issue does not define a specific completion condition for a contribution.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

参赛项目名称

TripBlocks — A calmer way to plan a trip, block by block.

团队 / 作者与奖品领取人

  • 团队名称：TripBlocks
  • 主要提交人 GitHub ID（仅 1 位，必填）：37chengshan
  • 其他成员（可选，仅用于署名）：无

旅行场景与目标用户

面向 5–10 天城市自由行的个人 / 双人旅行者。真实痛点是：跨天排期、交通衔接、预算、体力节奏和「搜索结果很多但无法取舍」同时发生；传统行程表只能记录，不能帮助做决定。

TripBlocks 把行程变成可以拖拽、可以呼吸的模块：交通、住宿、体验、吃饭和留白都是块；AI 和真实飞猪库存一起参与「这一周怎么过」，而不是再做一个一次性攻略聊天框。

我做了什么

  • 模块化 board：7 天横向计划板，跨天拖拽；点击块可编辑时间、地点、预算、备注。
  • FlyAI 实时库存：接入官方 @fly-ai/flyai-cli，服务端 /api/flyai 调用 search-hotel / search-poi；展示真实酒店与京都景点、图片、价格和飞猪预订链接，支持直接加入某一天。
  • Wander（百炼 Managed Agent）：读取完整行程上下文，针对「Day 5 太重」这类问题给出具体调整；建议以 block 卡呈现，用户确认后才写入，不自动改行程。
  • Route map / Budget：路线可视化、每日消费构成、预算余量、已知冲突提示。
  • 工程完整度：React + Vite + Tailwind v4 + dnd-kit；本地持久化；生产构建；服务端不向前端暴露 Key。

百炼使用说明（必填）

  • 百炼能力 / 模型：阿里云百炼 Managed Agent（托管会话、工具执行、事件流）；Agent 侧使用 auto 模型路由（账单商品名为 AutoModel）。
  • 调用方式：百炼 CLI bl → bl managed-agent session run；由本地 Node /api/agent 代理调用，前端不保存任何 Key。
  • 使用环节与输入输出：用户主动提问时，服务端把当前 7 天行程（天、时间、地点、花费、备注）作为上下文送入 Managed Agent；Agent 返回 2–4 句具体建议，并可附一个结构化建议块；前端展示、用户确认后写入计划。无轮询、无自动改行程。
  • Skill 名称：FlyAI（官方 alibaba-flyai/flyai-skill，运行时通过 @fly-ai/flyai-cli 调用 search-hotel / search-poi）。
  • 其他工具 / 技术栈：React 19、Vite 7、Tailwind CSS v4、dnd-kit、Node HTTP bridge。

效果展示

30 秒 Demo 视频（MP4）

TripBlocks cover

TripBlocks home

FlyAI live stays

移动端：https://raw.githubusercontent.com/37chengshan/tripblocks/main/docs/screenshots/mobile-home.png

项目链接与复现方式

  • GitHub：https://github.com/37chengshan/tripblocks
  • 运行： 
    npm install
npm run dev:all
    打开 http://127.0.0.1:5173。
  • FlyAI：npx flyai config set FLYAI_API_KEY "your-key"（Key 不进入仓库）。
  • Managed Agent：agent/agents.yaml + agent/agents.state.json；服务端通过 bl managed-agent session run 调用。
  • 说明：当前没有在线 Demo 域名；本地运行即可复现。截图来自真实运行。

踩坑记录（可选）

比赛环境里百炼账号的 API Key / 模型权限当前返回 401/403，因此演示时 Agent 不可用会明确降级到本地 fallback（前端仍保留不调用模型的确定性草稿）。Managed Agent 的调用链、Vault 绑定和 /api/agent 已接好，恢复有权限的 Key 后即可直接走百炼；FlyAI 实时酒店/景点库存当前独立可用。

Linguagem predominante
HTML
Estrelas
11
Forks
3
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de modelstudioai/modelstudioai.github.io

Todas as issues de modelstudioai/modelstudioai.github.io

Issues semelhantes

Mais issues de AI Infra & Agents

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.