# DataTalkWeb

**Repository Path**: chehongwei/data-talk-web

## Basic Information

- **Project Name**: DataTalkWeb
- **Description**: DataTalkWeb - AI 聊天应用
一个基于 Vue 3 和 TypeScript 构建的现代化 AI 聊天应用，使用 SocketD 协议实现高效的实时双向通信。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-14
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DataTalkWeb - AI 聊天应用

一个基于 Vue 3 和 TypeScript 构建的现代化 AI 聊天应用，使用 SocketD 协议实现高效的实时双向通信。

## 🌟 项目概述

DataTalkWeb 是一个功能完善的 AI 聊天客户端应用，支持多会话管理、实时消息传输和响应式界面设计。应用采用现代化的前端技术栈，提供流畅的用户体验和可靠的实时通信能力。

## 🛠 技术栈

- **框架**: Vue 3 (Composition API)
- **语言**: TypeScript
- **构建工具**: Vite
- **实时通信**: SocketD (@noear/socket.d)
- **UI 设计**: 原生 CSS (无第三方 UI 库)
- **类型检查**: Vue TSC

## ✨ 核心特性

### 🔧 功能特性
- **实时聊天**: 基于 SocketD 协议的低延迟双向通信
- **多会话管理**: 支持创建、切换、重命名和删除多个聊天会话
- **消息持久化**: 本地存储会话数据和聊天记录
- **连接状态监控**: 实时显示 SocketD 连接状态
- **错误处理**: 完善的异常捕获和用户友好的错误提示

### 🎨 界面特性
- **响应式设计**: 完美适配桌面端、平板和移动端
- **现代化 UI**: 简洁美观的设计风格，支持深浅主题
- **流畅动画**: 平滑的过渡效果和交互动画
- **移动端优化**: 触摸友好的交互设计和汉堡菜单布局

## 📁 项目结构

```
DataTalkWeb/
├── src/
│   ├── components/
│   │   ├── ChatArea.vue          # 聊天主区域组件
│   │   ├── SessionList.vue       # 会话列表组件
│   │   └── HelloWorld.vue        # 示例组件
│   ├── composables/
│   │   └── useChatStore.ts       # 聊天状态管理组合式函数
│   ├── services/
│   │   └── socketService.ts      # SocketD 通信服务
│   ├── types/
│   │   └── chat.ts               # 类型定义文件
│   ├── App.vue                   # 根组件
│   ├── main.ts                   # 应用入口文件
│   └── style.css                 # 全局样式文件
├── public/
├── index.html                    # HTML 模板
├── package.json                  # 项目配置和依赖
├── tsconfig.json                 # TypeScript 配置
├── vite.config.ts                # Vite 构建配置
└── README.md                     # 项目文档
```

## 🚀 安装与运行

### 环境要求
- Node.js >= 20.19.6
- npm >= 10.8.2

### 安装步骤

1. **克隆项目**
```bash
git clone <repository-url>
cd DataTalkWeb
```

2. **安装依赖**
```bash
npm install
```

3. **启动开发服务器**
```bash
npm run dev
```

4. **构建生产版本**
```bash
npm run build
```

5. **预览生产构建**
```bash
npm run preview
```

## 💡 使用指南

### 基本操作

1. **创建新会话**
   - 点击左侧会话列表中的 "+" 按钮
   - 新会话会自动成为当前活动会话

2. **切换会话**
   - 在左侧会话列表中点击任意会话
   - 当前会话会在右侧聊天区域显示

3. **重命名会话**
   - 将鼠标悬停在会话项上
   - 点击编辑图标，在弹出的输入框中修改名称

4. **删除会话**
   - 将鼠标悬停在会话项上
   - 点击删除图标并确认操作

5. **发送消息**
   - 在底部输入框中输入消息内容
   - 按 Enter 键或点击发送按钮发送
   - 支持 Shift+Enter 换行

### 连接状态说明

- 🟢 **已连接**: 正常与 SocketD 服务器通信
- 🟡 **连接中**: 正在建立连接
- 🔴 **连接错误**: 连接出现问题
- ⚪ **未连接**: 尚未建立连接

## 📄 关键文件说明

### 核心组件

#### `ChatArea.vue`
- **功能**: 聊天主界面组件
- **职责**: 
  - 显示当前会话的聊天记录
  - 处理消息发送逻辑
  - 管理 SocketD 连接状态
  - 提供移动端适配的顶部导航栏

#### `SessionList.vue`
- **功能**: 会话管理侧边栏
- **职责**:
  - 展示所有聊天会话列表
  - 提供会话的增删改查操作
  - 处理会话切换逻辑
  - 移动端汉堡菜单交互

#### `App.vue`
- **功能**: 应用根组件
- **职责**:
  - 整体布局管理
  - 移动端响应式布局控制
  - 侧边栏状态管理

### 状态管理

#### `useChatStore.ts`
- **功能**: 聊天状态管理组合式函数
- **提供功能**:
  - 会话数据管理 (创建、删除、重命名、切换)
  - 消息数据管理 (添加、查询)
  - 当前会话状态跟踪
  - 数据持久化支持

### 通信服务

#### `socketService.ts`
- **功能**: SocketD 通信服务封装
- **核心功能**:
  - WebSocket 连接管理
  - 消息发送和接收处理
  - 连接状态监控
  - 错误处理和重连机制
  - 事件监听器管理

### 类型定义

#### `chat.ts`
- **Message**: 消息接口定义
- **Session**: 会话接口定义

## 📦 依赖项说明

### 生产依赖
```json
{
  "@noear/socket.d": "^2.5.20",  // SocketD 通信协议库
  "vue": "^3.5.24"               // Vue 3 核心框架
}
```

### 开发依赖
```json
{
  "@types/node": "^24.10.1",     // Node.js 类型定义
  "@vitejs/plugin-vue": "^6.0.1", // Vite Vue 插件
  "@vue/tsconfig": "^0.8.1",     // Vue TypeScript 配置
  "typescript": "~5.9.3",        // TypeScript 编译器
  "vite": "npm:rolldown-vite@7.2.5", // 构建工具
  "vue-tsc": "^3.1.4"            // Vue TypeScript 类型检查
}
```

## ⚙️ 开发环境配置

### 推荐开发工具
- **IDE**: VS Code (推荐安装 Volar 插件)
- **浏览器**: Chrome/Firefox 最新版
- **Node.js 版本**: 16.x 或更高版本

### 环境变量配置
```bash
# .env.development
VITE_SOCKET_URL=sd:ws://localhost:8602
```

### SocketD 服务器配置
默认连接地址: `sd:ws://127.0.0.1:8602`
可根据实际需求在 `socketService.ts` 中修改连接地址。

## ⚠️ 注意事项

### 已知限制
1. **浏览器兼容性**: 需要现代浏览器支持 (ES6+)
2. **WebSocket 支持**: 必须支持 WebSocket 协议
3. **本地存储**: 会话数据存储在浏览器 localStorage 中
4. **网络要求**: 需要能够访问配置的 SocketD 服务器

### 最佳实践
1. **会话管理**: 建议定期清理不需要的历史会话
2. **网络环境**: 确保网络连接稳定以获得最佳体验
3. **浏览器设置**: 建议启用本地存储和 Cookie 支持

### 故障排除
1. **连接失败**: 检查 SocketD 服务器是否正常运行
2. **消息发送失败**: 确认连接状态为"已连接"
3. **界面异常**: 尝试清除浏览器缓存后刷新页面

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进项目！

### 开发流程
1. Fork 项目仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

---

**项目状态**: 🚀 活跃开发中  
**最后更新**: 2026年1月  
**作者**: DataTalk 开发团队