{"id":51238627,"url":"https://github.com/i5anin/order-book.vue3","last_synced_at":"2026-06-28T22:30:41.189Z","repository":{"id":169982876,"uuid":"646082321","full_name":"i5anin/order-book.vue3","owner":"i5anin","description":"BTC orter book UI Element Plus","archived":false,"fork":false,"pushed_at":"2023-10-03T17:18:16.000Z","size":947,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-28T17:32:16.803Z","etag":null,"topics":["priority","ui-element-plus","vue"],"latest_commit_sha":null,"homepage":"https://order-btc-vue3.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/i5anin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-27T08:18:26.000Z","updated_at":"2024-11-17T13:53:02.000Z","dependencies_parsed_at":"2023-07-01T14:00:33.090Z","dependency_job_id":null,"html_url":"https://github.com/i5anin/order-book.vue3","commit_stats":null,"previous_names":["i5anin/order-book-vue3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/i5anin/order-book.vue3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i5anin%2Forder-book.vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i5anin%2Forder-book.vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i5anin%2Forder-book.vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i5anin%2Forder-book.vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i5anin","download_url":"https://codeload.github.com/i5anin/order-book.vue3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i5anin%2Forder-book.vue3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34906700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-28T02:00:05.809Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["priority","ui-element-plus","vue"],"created_at":"2026-06-28T22:30:39.685Z","updated_at":"2026-06-28T22:30:41.184Z","avatar_url":"https://github.com/i5anin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📈 Order Book — биржевой стакан Binance\n\nДемо-приложение «биржевой стакан» (BTC/USDT) на **Vue 3 + TypeScript + Pinia + Vite**: подписка на стрим ордеров Binance, расчёт спреда и подсветка собственных ордеров.\n\n🔗 **[Живое демо](https://order-btc-vue3.vercel.app/)** · 📄 **[Описание задания](./doc/README.md)**\n\n## 🚀 Запуск\n\n```bash\nnpm install      # установка зависимостей\nnpm run dev      # дев-сервер Vite → http://localhost:8080\n```\n\n| Скрипт | Команда | Назначение |\n| --- | --- | --- |\n| `npm run dev` / `serve` | `vite` | дев-сервер с HMR |\n| `npm run build` | `vue-tsc -b \u0026\u0026 vite build` | проверка типов + прод-сборка в `dist/` |\n| `npm run preview` | `vite preview` | предпросмотр прод-сборки |\n| `npm run type-check` | `vue-tsc -b` | проверка типов TypeScript |\n| `npm run lint` | `eslint . --fix` | линтинг + автоисправление |\n\n## Выполнены задачи:\n\n1. Создан компонент `\"Биржевой стакан\"` на `Vue.js`, отображающий цены и количества для каждого ордера.\n\n1. Вычисляется и отображается спред, представляющий разницу между лучшей ценой на покупку и продажу.\n\n1. Реализована подписка на стрим биржевого стакана с использованием `API` метода `GET` `/orderbook-stream`.\n\n1. Получение наших ордеров осуществляется через API метод `GET` `/orders`.\n\n1. Обеспечена корректная обработка обновлений данных, получаемых из стрима.\n\n1. Предусмотрена обработка ошибок и исключительных ситуаций при взаимодействии с `API`.\n\nТестовая версия доступна по ссылке:\n[![Ссылка на тестовую версию](./doc/show.png)](https://order-btc-vue3.vercel.app/)\n\n## Структура файлов:\n\n```bash\npublic\n├── favicon.ico\n├── index.html\n├── assets\n│   └── logo.png\n└── fonts\n    └── UniSansHeavy.otf\nsrc\n├── App.vue\n├── main.js\n├── components\n│   ├── LoadingSpinner.vue\n│   ├── OrderBook.vue\n│   ├── OrderTable.vue\n│   └── SpreadInfo.vue\n└── store\n    ├── api.js\n    └── store.js\n```\n\n1. `OrderBook.vue`: Это главный компонент, отвечающий за отображение списка ордеров и расчет разницы в ценах (спреда). Он содержит заголовки, две таблицы с ордерами (продажа и покупка) и компонент `Spread` для отображения спреда. Он также обрабатывает данные, полученные через `WebSocket` и `API` запросы.\n2. `OrderTable.vue`: Это компонент, отвечающий за отображение таблицы с ордерами. Он принимает массив ордеров через свойство `orders` и отображает их в виде строк таблицы. Компонент также проверяет, является ли ордер пользовательским и применяет соответствующий стиль. Он также имеет методы для форматирования цены, количества и общей стоимости ордера.\n3. `SpreadInfo.vue`: Это компонент, отвечающий за отображение разницы в ценах (спреда). Он принимает значение спреда через свойство `spread` и отображает его на странице. Компонент также имеет метод для форматирования значения спреда.\n4. `LoadingIndicator.vue`: является компонентом, отвечающим за отображение индикатора загрузки. Он использует фреймворк `UI Element Plus` для создания интерфейса.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi5anin%2Forder-book.vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi5anin%2Forder-book.vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi5anin%2Forder-book.vue3/lists"}