Vue3+SpringBoot构建茶文化AI互动平台实践

1. 项目概述与设计思路

作为一个长期关注传统文化数字化传播的技术从业者，我注意到茶道文化在年轻群体中的认知度正在下降。传统的信息展示方式缺乏互动性和深度解读能力，这正是我们开发这套系统的初衷。系统采用前后端分离架构，前端基于Vue3生态链，后端使用SpringBoot框架，特别引入AI能力增强交互体验。

技术选型上，我们放弃了传统的SSR方案，选择Vite+Vue3的组合。实测中，Vite的冷启动速度比Webpack快3-8倍，HMR更新几乎瞬时完成。Element Plus作为UI库，其预设的茶色系配色方案与茶文化主题高度契合。后端采用SpringBoot 2.7.x版本，这是LTS版本，确保长期维护支持。

关键决策：使用LangChain4j而非直接调用API，主要是考虑未来可能对接多模型的需求。实测显示，通过LangChain4j的抽象层，切换模型时的代码改动量减少70%。

2. 核心架构解析

2.1 前端工程化实践

项目采用monorepo管理，通过pnpm workspace划分多个子模块：

code复制├── apps
│   ├── admin  # 管理端
│   └── web    # 用户端
├── packages
│   ├── ai     # AI通用组件
│   ├── types  # 类型定义
│   └── utils  # 工具库

特别值得分享的是AI悬浮助手的实现方案。我们在main.ts中全局注册组件：

typescript复制import AIChatFloat from '@packages/ai/components/FloatChat.vue'

app.component('AIChatFloat', AIChatFloat)

然后在App.vue中使用teleport实现跨路由悬浮：

html复制<teleport to="body">
  <AIChatFloat v-if="!isMobile" />
</teleport>

2.2 后端微服务设计

采用经典的三层架构，但增加了AI服务层：

code复制com.tea.culture
├── config       # 配置类
├── controller   # 控制器
├── service      
│   ├── ai       # AI服务
│   └── impl     # 业务实现
├── mapper       # MyBatis接口
└── model        # 实体类

AI服务层的核心是TeaAIService类，封装了五种AI场景的调用：

java复制public class TeaAIService {
    private final ChatLanguageModel chatModel;
    
    public String genera