# lang-Chatbot

**Repository Path**: chehl-0110/lang-chatbot

## Basic Information

- **Project Name**: lang-Chatbot
- **Description**: 基于 **LangUI** 设计风格的轻量级 AI 聊天机器人，使用 Vue 3 + TypeScript + Vite + Tailwind CSS 构建。
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: tailwindcss, TypeScript, vue3, AI, 轻量级聊天机器人

## README

# Lang AI 聊天助手

基于 **LangUI** 设计风格的轻量级 AI 聊天机器人，使用 Vue 3 + TypeScript + Vite + Tailwind CSS 构建。

## 预览

![lang1](src/assets/lang1.png)
![lang2](src/assets/lang2.png)
![lang3](src/assets/lang3.png)

## 特性

- **LangUI 风格**：slate + blue 双色、深色/浅色模式、响应式布局
- **Vue 3 + TypeScript**：组合式 API，类型安全
- **Tailwind CSS**：零额外 UI 依赖，按需样式
- **简单对话**：内置演示回复逻辑，可替换为真实 AI API

## 快速开始

```bash
# 安装依赖
npm install

# 开发
npm run dev

# 构建
npm run build

# 预览构建结果
npm run preview
```

## 项目结构

```
src/
├── assets/          # 全局样式
├── components/      # 聊天面板、消息气泡
├── composables/    # useChat 聊天逻辑
├── types/          # 类型定义
├── App.vue
└── main.ts
```

## 扩展为真实 AI

在 `src/composables/useChat.ts` 中，将 `mockReply()` 替换为你的 API 调用，例如：

```ts
async function fetchReply(userText: string): Promise<string> {
  const res = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ message: userText }),
    headers: { 'Content-Type': 'application/json' },
  })
  const data = await res.json()
  return data.reply
}
```

然后在 `sendMessage` 里用 `await fetchReply(trimmed)` 替代 `mockReply(trimmed)` 即可。

## 许可

MIT

## 作者与日期

- **作者**：chehl-0110
- **日期**：2026-03-11