56 lines
9.3 KiB
Markdown
56 lines
9.3 KiB
Markdown
# Дашборд KPI Казахтелеком
|
||
|
||
Подготовь презу на базе этого дашборда.
|
||
|
||
Цель: Визуализировать ключевые показатели эффективности компании в формате презентации
|
||
|
||
Пользователи: Руководители и аналитики
|
||
|
||
Экраны:
|
||
- Главный экран: сводные карточки с выручкой, абонентами и NPS
|
||
- Экран динамики: графики роста по месяцам и регионам
|
||
- Экран услуг: диаграмма распределения по продуктам
|
||
|
||
Данные: Выручка, количество активных абонентов, индекс удовлетворенности (NPS), динамика по месяцам, доля услуг (интернет, мобильная связь, ТВ)
|
||
|
||
Правила брифа: интерфейс в стиле Казахтелекома (светлый, синий акцент #0077c8), на русском; адаптивно для телефона; без регистрации. Если настоящих данных нет — наполни приложение правдоподобными примерами. Не пиши на экране пометок «демо», «демонстрационная версия», «тестовые данные» и не утверждай, откуда взяты данные.
|
||
|
||
## Объём работы
|
||
|
||
Собирай ровно то, что написано в задании. Не добавляй лишние разделы, журналы и настройки. Для статичной страницы достаточно index.html. Если запрошен статичный макет, не добавляй серверную часть на этом этапе.
|
||
Если задача требует общего хранения, настоящей регистрации или рабочего приложения, реализуй серверную часть и базу данных средствами Vibe AI. Создай необходимые файлы, таблицы и обработчики, даже если владелец не перечислил их отдельно. Не подменяй общее хранение localStorage или демонстрационным списком. Собственная база приложения не требует интеграции с системами КТ и отдельного утверждения дизайна в экспрессе. При доработке существующего проекта это правило заменяет прежнее ограничение одним HTML-файлом.
|
||
Проверь сохранение записи, чтение из другой сессии, обработку ошибок и ограничения доступа. Личные данные доступны только уполномоченному пользователю, секреты не попадают в браузерный код. Не придумывай доступы или готовые интеграции. Если публикация серверной части недоступна, укажи конкретную причину и не объявляй функцию работающей. Закончив, опубликуй приложение и сообщи фактический адрес и результаты проверки; сохраняй прежний адрес, если платформа это позволяет.
|
||
|
||
## Имена файлов
|
||
|
||
Если серверная часть не нужна, скрипт интерфейса называй script.js, стили — style.css. Не создавай в корне проекта файлы app.js, main.js, index.js, server.js, bot.js, app.py, main.py, server.py и package.json со scripts.start: платформа примет проект за серверное приложение и не опубликует статичный сайт. Эти имена — только для настоящего сервера.
|
||
|
||
## Дизайн — дизайн-система KT AI
|
||
|
||
Весь интерфейс собирай на дизайн-системе KT AI, которая уже лежит в папке проекта `design-system/`.
|
||
Перед первой строкой вёрстки прочитай `design.md` и `design-system/AGENTS.md` и следуй им.
|
||
Подключай файлы ДС относительными путями и в этом порядке: `./design-system/kt-ai-fonts.css`,
|
||
`./design-system/kt-ai-tokens.css`, `./design-system/kt-ai-components.css`, `./design-system/kt-ai-page.css`.
|
||
Тема по умолчанию — светлая: `<html lang="ru" data-theme="light">`; не ставь `dark` и не ставь `auto`
|
||
(auto уходит в тёмную по системной теме). Переключатель темы можно оставить, но открываться страница должна светлой.
|
||
Цвета, отступы и размеры — только токенами `var(--kt-ai-…)`, иконки — из `design-system/icons/kt-ai-lucide-sprite.svg`.
|
||
Плашки показателей — `.kt-ai-kpi` (`.value`, `.label`, `.hint`) в полосе `.kt-ai-kpi-strip`; таблицы — по правилам ДС (frameless, `.kt-ai-table-wrap`, числа вправо, `tabular-nums`);
|
||
графики — чистый SVG/div высотой 190–220px, столбцы 20–28px с радиусом 2px, цвета только `var(--kt-ai-chart-blue|green|orange|pink|red|salmon)`, подсказки значений — `data-kt-tip` + `./design-system/kt-ai-chart-tip.js`.
|
||
Имена токенов не выдумывай — только существующие в `design-system/kt-ai-tokens.css`: --kt-ai-fg / -fg-muted / -fg-faint, --kt-ai-bg / -bg-soft, --kt-ai-card-bg / -card-border, --kt-ai-border / -border-strong, --kt-ai-primary, --kt-ai-radius-xl / -3xl, --kt-ai-font-sans / -mono, --kt-ai-chart-blue / -green / -orange / -pink / -red / -salmon, --kt-ai-status-ok-fg / -warn-fg / -risk-fg.
|
||
Несуществующий токен (`--kt-ai-text-primary`, `--kt-ai-bg-surface`, `--kt-ai-font-family`) молча не применится — страница выйдет в Times New Roman без рамок.
|
||
Классы ДС (`.kt-ai-kpi`, `.kt-ai-card`, `.kt-ai-table`, `.kt-ai-btn`, `.kt-ai-chip`, `.kt-ai-input`) в своём `<style>` не переопределяй — ДС рисует их сама; свой `<style>` — только сетка и отступы. `<body class="kt-ai-app">`.
|
||
Перед публикацией проверь сам: в HTML не меньше десятка классов `kt-ai-*`, каждый `var(--kt-ai-…)` есть в tokens.css, свои hex-цвета — только внутри логотипа. Иначе это не дизайн-система, а перекраска.
|
||
Фильтры и пустое состояние тоже из ДС (`.kt-ai-select`, `.kt-ai-filter-chip`, `.kt-ai-empty`): каждый выведенный фильтр обязан менять все представления, которые задевает — таблицу, показатели, график и текст объяснения.
|
||
Таблицы, списки, журналы, дашборды и формы собирай из готовых классов ДС (`design-system/COMPONENTS.md`),
|
||
архетип экрана выбирай по `design-system/docs/ARCHETYPES.md`. Каркас страницы — из `design.md`, с обычными `<link>`.
|
||
Шаблон `design-system/templates/kt-ai-app-shell.html` целиком не копируй: его скрипты-загрузчики (`data-kt-ai-base-resolver`,
|
||
`data-kt-ai-boot`) тянут CSS с корня сайта по абсолютному пути `/design-system/…`, а сайт публикуется в подпапке — стили не загрузятся.
|
||
Подключай только файлы, которые реально лежат в `design-system/` (проверь `ls design-system`): файла `kt-ai-components.js` там нет.
|
||
Шапка страницы: слева логотип Казахтелекома — `<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">`, рядом название приложения.
|
||
Свой стиль не выдумывай, Bootstrap/Tailwind/Material/Google Fonts не подключай, сырые hex-цвета не пиши.
|
||
Папку `design-system/` закоммить вместе с проектом — иначе опубликованная страница останется без стилей.
|
||
|
||
## Без пометок «демо»
|
||
|
||
Не пиши на экране «Демо-данные», «демонстрационная версия», «тестовые данные», «макет» и похожие пометки. Если настоящих данных нет — наполни приложение правдоподобными примерами. Не утверждай, откуда взяты данные.
|