AI智能对话前端

git clone https://github.com/yelingdenghe/spring-ai-frontend.git
cd spring-ai-frontend-vue

npm install
# 或使用 pnpm
pnpm install

# 开发环境
cp .env.example .env.development

# 生产环境
cp .env.example .env.production

NODE_ENV=development

# 后端服务地址
VITE_BACKEND_URL=http://localhost:9009

# API Base URL (开发环境留空使用代理)
VITE_API_BASE_URL=

# WebSocket 地址
VITE_WS_BASE_URL=ws://localhost:5173

# 开发工具
VITE_ENABLE_DEV_TOOLS=true
VITE_ENABLE_CONSOLE_LOG=true

npm run dev

npm run build

spring-ai-frontend-vue/
├── src/
│   ├── api/                      # API 接口定义
│   │   ├── chat.ts              # 聊天相关 API
│   │   ├── media.ts             # 媒体处理 API
│   │   └── index.ts             # API 统一导出
│   │
│   ├── components/               # 可复用组件
│   │   ├── ASRControls.vue      # 语音识别控制组件
│   │   ├── ChatHeader.vue       # 聊天页头部组件
│   │   ├── ChatInput.vue        # 消息输入组件
│   │   ├── ChatMessages.vue     # 消息列表组件
│   │   ├── ChatSidebar.vue      # 侧边栏组件
│   │   ├── FrameVideoControls.vue   # 关键帧视频控制
│   │   ├── ImageDescUpload.vue  # 图像描述上传组件
│   │   ├── KnowledgeUpload.vue  # 知识库上传组件
│   │   ├── ModelSelector.vue    # 模型选择器
│   │   ├── ModeSelector.vue     # 模式选择器
│   │   ├── RealtimeASR.vue      # 实时语音识别组件
│   │   ├── RecognizedTextDialog.vue # 识别文本对话框
│   │   └── VideoControls.vue    # 视频控制组件
│   │
│   ├── composables/              # 组合式函数
│   │   ├── useRealtimeASR.ts    # 实时语音识别逻辑
│   │   ├── useRecording.ts      # 录音功能逻辑
│   │   ├── useScrollToBottom.ts # 自动滚动逻辑
│   │   ├── useSSE.ts            # SSE 连接逻辑
│   │   └── index.ts             # 统一导出
│   │
│   ├── stores/                   # 状态管理
│   │   ├── app.ts               # 应用全局状态
│   │   └── chat.ts              # 聊天状态管理
│   │
│   ├── types/                    # TypeScript 类型定义
│   │   ├── chat.ts              # 聊天相关类型
│   │   ├── response.ts          # API 响应类型
│   │   └── index.ts             # 类型统一导出
│   │
│   ├── utils/                    # 工具函数
│   │   └── request.ts           # Axios 封装
│   │
│   ├── views/                    # 页面视图
│   │   └── ChatView.vue         # 聊天主页面
│   │
│   ├── router/                   # 路由配置
│   │   └── index.ts             # 路由定义
│   │
│   ├── assets/                   # 静态资源
│   │   └── styles/
│   │       └── global.css       # 全局样式
│   │
│   ├── App.vue                   # 根组件
│   └── main.ts                   # 应用入口
│
├── public/                       # 公共静态资源
│   └── favicon.ico              # 网站图标
│
├── dist/                         # 构建输出目录（生成）
│
├── .env.example                  # 环境变量示例
├── .env.development              # 开发环境配置
├── .env.production               # 生产环境配置
│
├── Dockerfile                    # Docker 镜像构建文件
├── Dockerfile.simple             # 简化版 Docker 构建
├── nginx.conf                    # Nginx 配置文件
│
├── vite.config.ts                # Vite 配置
├── tsconfig.json                 # TypeScript 配置
├── package.json                  # 项目依赖配置
├── .gitignore                    # Git 忽略配置
├── .editorconfig                 # 编辑器配置
├── .prettierrc.json              # Prettier 配置
├── eslint.config.ts              # ESLint 配置
└── README.md                     # 项目文档（本文件）

# 运行环境
NODE_ENV=development|production

# 后端服务地址（用于 Vite 代理）
VITE_BACKEND_URL=http://localhost:9009

# API 基础地址
# 开发环境建议留空，使用 Vite 代理
# 生产环境填写完整后端地址
VITE_API_BASE_URL=

# WebSocket 地址
# 开发环境：ws://localhost:5173（通过 Vite 代理）
# 生产环境：ws://your-server:9009
VITE_WS_BASE_URL=ws://localhost:5173

# 开发工具开关
VITE_ENABLE_DEV_TOOLS=true
VITE_ENABLE_CONSOLE_LOG=true

# 构建镜像
docker build -t spring-ai-frontend:latest .

# 运行容器
docker run -d \
  --name spring-ai-frontend \
  -p 80:80 \
  spring-ai-frontend:latest

# 先在本地构建
npm run build

# 使用简化版 Dockerfile
docker build -f Dockerfile.simple -t spring-ai-frontend:latest .

# 运行容器
docker run -d \
  --name spring-ai-frontend \
  -p 80:80 \
  spring-ai-frontend:latest

// 标准对话
doChat(data: ChatRequest): Promise<ApiResponse>

// RAG 知识库搜索
ragSearch(data: ChatRequest): Promise<ApiResponse>

// 联网搜索
internetSearch(data: ChatRequest): Promise<ApiResponse>

// 上传知识库文档
uploadRagDoc(formData: FormData): Promise<ApiResponse>

// 图像生成
generateImage(data: ImageGenerateRequest): Promise<ApiResponse>

// 图像描述
describeImage(formData: FormData): Promise<ApiResponse>

// 语音合成（TTS）
generateTTS(data: TTSGenerateRequest): Promise<ApiResponse>

// 视频生成
generateVideo(data: VideoGenerateRequest): Promise<ApiResponse>

// 关键帧视频生成
generateFrameVideo(formData: FormData): Promise<ApiResponse>

// 查询视频任务状态
getVideoTaskStatus(taskId: string): Promise<VideoTaskResponse>

// 使用示例
const { initSSE } = useSSE()
initSSE(userId)

// 使用示例
const { startRecording, stopRecording } = useRealtimeASR()
startRecording()

# 代码检查
npm run lint

# 代码格式化
npm run format

# TypeScript 类型检查
npm run type-check

<script setup lang="ts">
/**
 * 聊天输入组件
 * 功能：消息输入、发送、文件上传等
 */
import { ref } from 'vue'

interface Props {
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
})

const emit = defineEmits<{
  send: [message: string]
}>()
</script>

server: {
  port: 5174, // 修改为其他端口
}

# 开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 仅构建（不进行类型检查）
npm run build-only

# 类型检查
npm run type-check

# 代码检查
npm run lint

# 代码格式化
npm run format