# chessboard

**Repository Path**: walnutsss/chessboard

## Basic Information

- **Project Name**: chessboard
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-05
- **Last Updated**: 2025-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 象棋回放应用

这是一个基于 Vue3 的中国象棋回放应用，支持从真实API获取棋局数据并进行回放。

## 功能特性

- 🎯 **真实API集成**: 支持从智慧象棋API获取真实棋局数据
- 🎮 **完整回放**: 支持完整的棋局回放，包括步骤控制和走法显示
- 📱 **响应式设计**: 适配不同屏幕尺寸
- 🎨 **精美UI**: 采用中国传统风格的设计
- ⚡ **实时数据**: 支持实时获取最新棋局状态

## API接口

应用集成了以下API接口：

1. **获取完整回放数据**
   - 接口: `GET /api/work/data/getNoExceptionData?battleRecordId={id}`
   - 用途: 获取指定棋局的完整回放数据

2. **获取最新数据**
   - 接口: `GET /api/work/data/getLastData?battleRecordId={id}&competitionId={competitionId}`
   - 用途: 获取棋局的最新状态

3. **获取棋盘列表**
   - 接口: `GET /api/work/record/playerList`
   - 用途: 获取可回放的棋盘列表

## 项目结构

```
src/
├── components/
│   ├── ChessBoard.vue          # 棋盘组件
│   ├── ChessBoardList.vue      # 棋盘列表组件
│   └── ChessBoardReplay.vue    # 回放页面组件
├── services/
│   └── chessApi.js             # API服务
├── views/
│   └── TestPage.vue            # 测试页面
├── assets/
│   ├── images/                 # 图片资源
│   └── gameEffect/             # 游戏特效
└── router.js                   # 路由配置
```

## 使用方法

### 1. 安装依赖
```bash
npm install
```

### 2. 启动开发服务器
```bash
npm run serve
```

### 3. 访问应用
- 主页: `http://localhost:8080/`
- 测试页面: `http://localhost:8080/#/test`
- 回放页面: `http://localhost:8080/#/replay/{battleRecordId}`

## 测试功能

访问测试页面 (`/test`) 可以：

1. **测试真实API数据**: 点击按钮测试从API获取真实回放数据
2. **测试默认数据**: 测试默认的演示数据
3. **导航测试**: 测试页面跳转功能

## 数据格式

### 回放数据格式
每个步骤包含以下字段：
```json
{
  "battleRecordId": "棋局ID",
  "chessPieceTrend": "走法描述",
  "chessPieceType": 1, // 1=黑方, 2=红方
  "chessboardContent": [
    {
      "chessPieceState": 1, // 1=存在, 0=被吃
      "chessPieceType": 1,  // 1=黑方, 2=红方
      "endPosition": [x, y], // 位置坐标
      "pieces": "棋子名称"
    }
  ],
  "currentStep": 0,
  "stepTime": 5
}
```

## 技术栈

- **前端框架**: Vue 3
- **路由**: Vue Router 4
- **HTTP客户端**: Axios
- **构建工具**: Vue CLI

## 开发说明

### 添加新的API接口
1. 在 `src/services/chessApi.js` 中添加新的API函数
2. 在组件中导入并使用

### 自定义棋盘样式
1. 修改 `src/components/ChessBoard.vue` 中的样式
2. 调整 `getPieceStyle` 函数中的定位参数

### 添加新的棋子图片
1. 将图片文件放入 `src/assets/images/` 目录
2. 在 `getPieceImg` 函数中添加映射关系

## 注意事项

1. 确保网络连接正常，API接口可访问
2. 棋子图片需要按照约定的命名规则放置
3. 棋盘定位参数需要根据实际图片尺寸调整

## 许可证

MIT License