https://github.com/i5anin/order-book.vue3
BTC orter book UI Element Plus
https://github.com/i5anin/order-book.vue3
priority ui-element-plus vue
Last synced: 10 days ago
JSON representation
BTC orter book UI Element Plus
- Host: GitHub
- URL: https://github.com/i5anin/order-book.vue3
- Owner: i5anin
- Created: 2023-05-27T08:18:26.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-03T17:18:16.000Z (almost 3 years ago)
- Last Synced: 2026-04-28T17:32:16.803Z (2 months ago)
- Topics: priority, ui-element-plus, vue
- Language: Vue
- Homepage: https://order-btc-vue3.vercel.app
- Size: 925 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📈 Order Book — биржевой стакан Binance
Демо-приложение «биржевой стакан» (BTC/USDT) на **Vue 3 + TypeScript + Pinia + Vite**: подписка на стрим ордеров Binance, расчёт спреда и подсветка собственных ордеров.
🔗 **[Живое демо](https://order-btc-vue3.vercel.app/)** · 📄 **[Описание задания](./doc/README.md)**
## 🚀 Запуск
```bash
npm install # установка зависимостей
npm run dev # дев-сервер Vite → http://localhost:8080
```
| Скрипт | Команда | Назначение |
| --- | --- | --- |
| `npm run dev` / `serve` | `vite` | дев-сервер с HMR |
| `npm run build` | `vue-tsc -b && vite build` | проверка типов + прод-сборка в `dist/` |
| `npm run preview` | `vite preview` | предпросмотр прод-сборки |
| `npm run type-check` | `vue-tsc -b` | проверка типов TypeScript |
| `npm run lint` | `eslint . --fix` | линтинг + автоисправление |
## Выполнены задачи:
1. Создан компонент `"Биржевой стакан"` на `Vue.js`, отображающий цены и количества для каждого ордера.
1. Вычисляется и отображается спред, представляющий разницу между лучшей ценой на покупку и продажу.
1. Реализована подписка на стрим биржевого стакана с использованием `API` метода `GET` `/orderbook-stream`.
1. Получение наших ордеров осуществляется через API метод `GET` `/orders`.
1. Обеспечена корректная обработка обновлений данных, получаемых из стрима.
1. Предусмотрена обработка ошибок и исключительных ситуаций при взаимодействии с `API`.
Тестовая версия доступна по ссылке:
[](https://order-btc-vue3.vercel.app/)
## Структура файлов:
```bash
public
├── favicon.ico
├── index.html
├── assets
│ └── logo.png
└── fonts
└── UniSansHeavy.otf
src
├── App.vue
├── main.js
├── components
│ ├── LoadingSpinner.vue
│ ├── OrderBook.vue
│ ├── OrderTable.vue
│ └── SpreadInfo.vue
└── store
├── api.js
└── store.js
```
1. `OrderBook.vue`: Это главный компонент, отвечающий за отображение списка ордеров и расчет разницы в ценах (спреда). Он содержит заголовки, две таблицы с ордерами (продажа и покупка) и компонент `Spread` для отображения спреда. Он также обрабатывает данные, полученные через `WebSocket` и `API` запросы.
2. `OrderTable.vue`: Это компонент, отвечающий за отображение таблицы с ордерами. Он принимает массив ордеров через свойство `orders` и отображает их в виде строк таблицы. Компонент также проверяет, является ли ордер пользовательским и применяет соответствующий стиль. Он также имеет методы для форматирования цены, количества и общей стоимости ордера.
3. `SpreadInfo.vue`: Это компонент, отвечающий за отображение разницы в ценах (спреда). Он принимает значение спреда через свойство `spread` и отображает его на странице. Компонент также имеет метод для форматирования значения спреда.
4. `LoadingIndicator.vue`: является компонентом, отвечающим за отображение индикатора загрузки. Он использует фреймворк `UI Element Plus` для создания интерфейса.