前端架构设计：极致轻量化方案

为什么不用 React/Vue/Next.js？

在2核2G的服务器上，前端框架的内存开销是不可忽视的：

方案	基础内存	构建需求	适合2G？
Streamlit	150-300MB	Python	❌
Next.js (SSR)	150-400MB	Node.js + 1-2GB构建	❌
Gradio	100-200MB	Python	❌
Go + 原生JS	10-30MB	无	✅

选择Go + 原生HTML/CSS/JS的核心原因：

零运行时依赖：不需要Node.js、Python前端进程
embed.FS：所有静态文件编译进Go二进制，零文件系统IO
SSE原生支持：Go的http.Flusher天然支持流式推送

首页双区域布局

采用CSS Grid实现聊天+博客双区域：

.main-container {
    display: grid;
    grid-template-columns: 1fr 360px;
    height: calc(100vh - 56px);
}

左侧（主区域）：聊天界面，SSE流式接收Agent回复
右侧（边栏）：博客文章列表，点击阅读全文

响应式设计

移动端通过媒体查询切换为上下布局：

@media (max-width: 768px) {
    .main-container {
        grid-template-columns: 1fr;
    }
    .blog-aside { display: none; }
    .mobile-tabs { display: flex; }
}

底部Tab切换器让用户在"对话"和"博客"之间切换。

SSE流式通信

前端通过fetch + ReadableStream接收后端SSE推送：

const reader = response.body.getReader();
// 逐块读取，实时渲染Markdown

每条SSE消息包含agent字段，前端根据Agent类型显示不同颜色的卡片：

🗺️ 路线规划（绿色）
🏨 住宿安排（紫色）
🍜 美食推荐（橙色）
🗣️ 目的地讲解（青色）

Markdown渲染

使用marked.js（CDN加载，~12KB gzipped）在浏览器端实时渲染Agent回复，支持表格、代码块、图片、链接等富文本格式。