feat: 接入火山引擎 API 并完善前端 #20
Conversation
Walkthrough后端在 Chat 处理器中接入火山引擎接口，支持可选图片消息，解析并返回回答，同时持久化历史。主程序改为基于环境变量加载、初始化数据库与增加 CORS。新增基于 Vite+React 的前端与代理配置以对接后端 /api/v1。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as 用户浏览器
participant FE as 前端(React/Vite)
participant BE as 后端(Gin)
participant VK as 火山引擎API
participant DB as 数据库
U->>FE: 输入问题/图片URL
FE->>BE: POST /api/v1/chat {question, image_url?}
BE->>VK: POST /v1/chat/completions {messages}
VK-->>BE: 200 {choices[0].message.content}
BE->>DB: 保存{question, answer}
DB-->>BE: OK
BE-->>FE: 200 {reply: answer}
FE-->>U: 显示 AI 回复
rect rgba(230,240,255,0.5)
note right of FE: 开发模式代理\n /api → /api/v1
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (6)
AmberJc1/frontend/package.json (1)
11-12: 考虑升级 React 到最新稳定版本当前使用的 React 18.2.0 已过时。React 19.2.0 是最新稳定版本(2025年10月),提供了新的 UI 原语、性能改进和更好的 SSR 支持。建议升级以获得最新功能和性能优化。
基于学习记录
AmberJc1/frontend/src/index.css (1)
1-63: 样式定义功能完整CSS 样式提供了清晰的聊天界面布局和视觉区分。考虑到项目已配置 Tailwind CSS,可以选择将这些自定义样式重构为 Tailwind 工具类,以提高可维护性和一致性。
AmberJc1/frontend/src/App.jsx (2)
9-27: 建议增强用户体验当前实现功能正常,但可以通过以下改进提升用户体验:
- 添加加载状态: 在请求期间显示加载指示器
- 输入验证: 防止发送空消息
- 详细的错误反馈: 向用户显示更具体的错误信息
示例增强代码:
function App() { const [input, setInput] = useState(""); const [response, setResponse] = useState(""); + const [loading, setLoading] = useState(false); const sendMessage = async () => { + if (!input.trim()) { + setResponse("请输入内容"); + return; + } + setLoading(true); try { const res = await fetch("/api/v1/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ question: input }), }); if (!res.ok) { throw new Error("HTTP " + res.status); } const data = await res.json(); setResponse(data.reply || "无响应"); } catch (error) { console.error("发送失败:", error); - setResponse("出错了"); + setResponse(`请求失败: ${error.message}`); + } finally { + setLoading(false); } };
29-42: UI 渲染功能完整组件的渲染逻辑正确,用户界面简洁明了。由于项目已配置 Tailwind CSS,可以考虑将内联样式替换为 Tailwind 工具类,以保持项目样式的一致性。
AmberJc1/frontend/src/components/Chat.jsx (1)
6-29: 建议阻止发送空消息当前
handleSend没有判空，用户连续敲回车会多次触发空请求，后端要么报错要么返回空响应，体验较差。建议在调用onSend前trim()判空（同时禁用按钮）。- const handleSend = () => { - onSend(input) + const handleSend = () => { + if (!input.trim()) return + onSend(input.trim())若按钮也需要防抖，可一并处理。 -->
AmberJc1/controllers/chat.go (1)
160-175: 补齐关键错误处理
json.Marshal、http.NewRequest、io.ReadAll目前直接忽略错误，一旦返回异常（例如内存不足、URL 非法、网络读失败）会继续执行并返回难以诊断的结果。建议显式检查并及时返回 500。示例：
- bodyBytes, _ := json.Marshal(reqBody) + bodyBytes, err := json.Marshal(reqBody) + if err != nil { + c.JSON(http.StatusInternalServerError, gin.H{"error": "构造请求失败", "detail": err.Error()}) + return + }
http.NewRequest与io.ReadAll同理处理。 -->
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
AmberJc1/frontend/package-lock.jsonis excluded by!**/package-lock.jsonAmberJc1/go.sumis excluded by!**/*.sum
📒 Files selected for processing (12)
AmberJc1/controllers/chat.go(8 hunks)AmberJc1/frontend/index.html(1 hunks)AmberJc1/frontend/package.json(1 hunks)AmberJc1/frontend/postcss.config.js(1 hunks)AmberJc1/frontend/src/App.jsx(1 hunks)AmberJc1/frontend/src/components/Chat.jsx(1 hunks)AmberJc1/frontend/src/index.css(1 hunks)AmberJc1/frontend/src/main.jsx(1 hunks)AmberJc1/frontend/tailwind.config.js(1 hunks)AmberJc1/frontend/vite.config.mjs(1 hunks)AmberJc1/go.mod(1 hunks)AmberJc1/main.go(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
AmberJc1/frontend/src/components/Chat.jsx (1)
AmberJc1/controllers/chat.go (1)
Chat(113-218)
AmberJc1/frontend/src/App.jsx (1)
AmberJc1/frontend/src/components/Chat.jsx (1)
input(4-4)
AmberJc1/go.mod (4)
Yyzfddsdf/MyGo/main.go (1)
main(25-151)Yyzfddsdf/MyGo/models/user.go (2)
ID(35-40)Model(10-19)Yyzfddsdf/MyGo/middleware/auth_middleware.go (1)
AuthMiddleware(46-171)Yyzfddsdf/MyGo/database/setup.go (1)
ConnectDB(16-49)
AmberJc1/main.go (2)
AmberJc1/config/config.go (1)
InitDB(11-21)AmberJc1/routes/routes.go (1)
InitRoutes(9-22)
AmberJc1/controllers/chat.go (1)
AmberJc1/models/models.go (1)
Chat(13-19)
🔇 Additional comments (8)
AmberJc1/frontend/postcss.config.js (1)
1-6: PostCSS 配置正确配置符合 Tailwind CSS 标准设置,插件配置正确。
AmberJc1/frontend/package.json (2)
14-19: 开发依赖配置合理Vite、Tailwind CSS、PostCSS 和 Autoprefixer 的版本配置符合当前最佳实践。
10-10: @vitejs/plugin-react 5.0.4 已是最新稳定版本
npm registry 上 dist-tags.latest 指向 5.0.4，beta 和 alpha 分别指向 5.0.0-beta.0 和 3.0.0-alpha.2，无需回退至 4.x 系列。Likely an incorrect or invalid review comment.
AmberJc1/frontend/index.html (1)
1-12: HTML 入口文件配置正确HTML 结构符合 Vite + React 应用的标准配置,语言属性设置恰当,模块脚本引用正确。
AmberJc1/frontend/src/main.jsx (1)
1-10: React 应用初始化代码正确使用 React 18 的
createRootAPI 和StrictMode包装,符合最佳实践,能够在开发环境中及早发现潜在问题。AmberJc1/frontend/tailwind.config.js (1)
1-8: Tailwind 配置符合标准配置的 content 路径涵盖了 HTML 和源文件,确保 Tailwind 能够正确检测和生成所需的样式类。
AmberJc1/frontend/src/App.jsx (1)
1-5: 状态管理设置正确组件使用
useState管理输入和响应数据,符合 React 状态管理最佳实践。AmberJc1/go.mod (1)
5-11: GORM 版本号已验证
gorm.io/gorm v1.31.0在 GitHub Release 与 Go 代理中均可找到，是最新稳定版本。
| resp, err := http.DefaultClient.Do(req) | ||
| if err != nil { | ||
| c.JSON(http.StatusInternalServerError, gin.H{"error": "调用火山引擎失败", "detail": err.Error()}) | ||
| return | ||
| } | ||
| defer resp.Body.Close() |
There was a problem hiding this comment.
为外部 HTTP 调用设置超时
http.DefaultClient 默认无超时，若火山接口网络抖动或响应挂起，请求会一直阻塞占用 Gin 处理线程，造成雪崩风险。建议自建 &http.Client{Timeout: ...} 或为请求设置 context.WithTimeout。
- resp, err := http.DefaultClient.Do(req)
+ client := &http.Client{Timeout: 10 * time.Second}
+ resp, err := client.Do(req)按需调整超时并复用 client。 -->
🤖 Prompt for AI Agents
In AmberJc1/controllers/chat.go around lines 166 to 171, the code uses
http.DefaultClient.Do(req) which has no timeout; change it to use a client with
a timeout or perform the request with a context that has a deadline to avoid
blocking Gin handlers: create or reuse an &http.Client{Timeout: <reasonable
duration>} (or wrap the request with context.WithTimeout and pass
req.WithContext(ctx)), use that client to Do the request, handle the context
timeout error and still defer resp.Body.Close() only after a successful
response; ensure the client is reused (e.g., package-level variable) instead of
creating a new client per request if appropriate.
|
|
||
| const sendMessage = async () => { | ||
| try { | ||
| const res = await fetch("http://localhost:8080/api/v1/chat", { |
There was a problem hiding this comment.
修复硬编码的 localhost URL
硬编码的 http://localhost:8080 会导致生产环境部署失败。根据 Vite 代理配置,应使用相对路径 /api/v1/chat,这样开发环境会通过代理转发,生产环境会使用实际部署的后端地址。
应用此修改:
- const res = await fetch("http://localhost:8080/api/v1/chat", {
+ const res = await fetch("/api/v1/chat", {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const res = await fetch("http://localhost:8080/api/v1/chat", { | |
| const res = await fetch("/api/v1/chat", { |
🤖 Prompt for AI Agents
In AmberJc1/frontend/src/App.jsx around line 11, the fetch call uses a hardcoded
backend URL "http://localhost:8080/api/v1/chat" which breaks production; change
it to a relative path "/api/v1/chat" so Vite dev proxy handles local forwarding
and production will call the deployed backend (or alternatively read BASE_API
from env and use `${BASE_API}/api/v1/chat`), then test in dev and production
builds.
| log.Printf("🚀 服务已启动，监听端口 %s ...", port) | ||
| if err := r.Run(fmt.Sprintf(":%s", port)); err != nil { | ||
| log.Fatalf("❌ 启动失败: %v", err) | ||
| } | ||
| fmt.Println("API Key:", os.Getenv("ARK_API_KEY")) |
There was a problem hiding this comment.
不要在日志中输出 API 密钥
fmt.Println("API Key:", os.Getenv("ARK_API_KEY")) 会把密钥写入日志，属于敏感信息泄露风险（可能落盘、被采集或出现在监控中）。请删除这行或改成只输出配置是否存在。
- fmt.Println("API Key:", os.Getenv("ARK_API_KEY"))如需诊断，可改为记录布尔状态，例如 log.Printf("ARK_API_KEY loaded: %t", os.Getenv("ARK_API_KEY") != "")。 -->
🤖 Prompt for AI Agents
In AmberJc1/main.go around lines 57 to 61, remove the sensitive output
fmt.Println("API Key:", os.Getenv("ARK_API_KEY")) because it logs the secret;
instead log only a non-sensitive existence check (e.g. log whether ARK_API_KEY
is loaded) or delete the line entirely; ensure no other code prints environment
secrets to stdout/stderr.
2 participants
Summary by CodeRabbit