mirror of
https://github.com/dartdavros/chatballs.git
synced 2026-10-05 09:14:58 +03:00
AndreyandClaude Opus 5
90be94af43
Требование к open-source публикации: в репозитории не должно остаться CustoCRM и eDevs Hub. В docs/ это сделано ранее, здесь — код и дизайн. Дизайн-система (design/design-system): - заголовки, брендинг и примерные данные переведены на Chatballs; - переименованы глобали справочника: CUSTOCRM_ICON_SPRITE → CHATBALLS_ICON_SPRITE, CUSTOCRM_INVENTORY → CHATBALLS_INVENTORY, data-атрибут спрайта — обе стороны замкнуты внутри справочника; - в README поправлены пути открытия: справочник живёт в design/, а не в apps/internal-ui/; - личный адрес andrey@edevs.tech в примере таблицы заменён на example.com. Макеты (design/baseline): - каталоги _ds/edevs-hub-design-system-<uuid>/ переименованы в _ds/design-system/, ссылки в .dc.html обновлены; - JS-namespace бандла EdevsHubDesignSystem_e4c9df → ChatballsDesignSystem_e4c9df (21 вхождение: бандл, манифест, все x-import в макетах); - readme.md внутри бандлов удалён — это описание прежнего продукта (hub.edevs.tech, checkout, командный центр), к текущему отношения не имеет; - assets/custocrm-mark.svg → chatballs-mark.svg; - удалён каталог «Каналы обработки» целиком: макеты сущности, упразднённой ADR-CHATBALLS-0041. Восстанавливается из истории git, если понадобится. Тесты: tests/cli/test_custocrm_cli.py → test_chatballs_cli.py, набор проходит (9 passed). Ссылки в макетах и справочнике проверены: из 121 ссылки битых 6, и все шесть — в «Сотрудники/Сотрудники (новая модель).dc.html», где каталог _ds отсутствовал и до этих правок. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
182 lines
12 KiB
HTML
182 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Паттерны · Chatballs Design System</title>
|
||
<link rel="stylesheet" href="assets/base.css">
|
||
<link rel="stylesheet" href="assets/docs.css">
|
||
<link rel="stylesheet" href="assets/components.css">
|
||
<link rel="stylesheet" href="assets/data.css">
|
||
<link rel="stylesheet" href="assets/patterns.css">
|
||
<link rel="stylesheet" href="assets/layouts.css">
|
||
<link rel="stylesheet" href="assets/responsive.css">
|
||
</head>
|
||
<body data-page="patterns">
|
||
<div class="ds-shell">
|
||
<aside class="ds-sidebar" data-ds-sidebar></aside>
|
||
<div class="ds-main">
|
||
<header class="ds-topbar">
|
||
<div class="ds-breadcrumbs"><span>Design System</span><i>/</i><strong>Паттерны</strong></div>
|
||
<span class="ds-version">Compositions</span>
|
||
</header>
|
||
<main class="ds-content">
|
||
<header class="ds-page-header">
|
||
<div>
|
||
<div class="ds-eyebrow">Patterns</div>
|
||
<h1>Композиции компонентов</h1>
|
||
<p>Устоявшиеся конструкции текущего интерфейса: заголовок страницы, фильтры, таблица, состояния, меню и диалоги решений.</p>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="ds-section">
|
||
<div class="ds-section-heading">
|
||
<div><h2>Заголовок страницы</h2><p>Название, пояснение и основное действие справа.</p></div>
|
||
<span class="ds-source">PageHeader · layout/page.css</span>
|
||
</div>
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>PageHeader</strong><code>.page-header</code></div>
|
||
<div class="ds-specimen-body is-column" style="background:#f0f2f5">
|
||
<div class="page-header">
|
||
<div><h1>Сотрудники</h1><p>Управление доступом и ролями сотрудников организации.</p></div>
|
||
<button class="primary-button"><svg class="icon"><use href="#i-plus"></use></svg>Добавить сотрудника</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="ds-section">
|
||
<div class="ds-section-heading">
|
||
<div><h2>Таблица со служебной панелью</h2><p>Filter bar, стандартная таблица, row actions и пагинация.</p></div>
|
||
<span class="ds-source">table-controls.css · feature tables</span>
|
||
</div>
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>List table pattern</strong><code>.filter-bar · .baseline-table</code></div>
|
||
<div class="ds-specimen-body is-column" style="background:#f0f2f5">
|
||
<div class="filter-bar">
|
||
<label class="search-control" style="width:260px"><svg class="icon"><use href="#i-search"></use></svg><input placeholder="Поиск сотрудников" aria-label="Поиск сотрудников"></label>
|
||
<div class="filter-group"><span>Статус</span><div class="segmented" data-segmented><button class="active">Все</button><button>Активные</button><button>Архив</button></div></div>
|
||
</div>
|
||
<div class="table-card">
|
||
<div class="table-scroll">
|
||
<table class="baseline-table">
|
||
<thead><tr><th>Сотрудник</th><th>Роль</th><th>Статус</th><th>Продукты</th><th></th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="person-cell"><span class="avatar">АЕ</span><div><a class="link is-neutral is-strong" href="#">Андрей Ермолаев</a><small>andrey@example.com</small></div></div></td>
|
||
<td><span class="role-badge owner">Владелец</span></td>
|
||
<td><span class="status-pill is-active"><i></i>Активен</span></td>
|
||
<td><span class="product-mark"><i style="background:#0958d9"></i>Chatballs</span></td>
|
||
<td><button class="row-menu-button" aria-label="Меню"><svg class="icon"><use href="#i-more"></use></svg></button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="person-cell"><span class="avatar">ИК</span><div><a class="link is-neutral is-strong" href="#">Ирина Ковалева</a><small>irina@example.ru</small></div></div></td>
|
||
<td><span class="role-badge admin">Администратор</span></td>
|
||
<td><span class="status-pill is-invited"><i></i>Приглашён</span></td>
|
||
<td><span class="product-mark"><i style="background:#722ed1"></i>FoxRay</span></td>
|
||
<td><button class="row-menu-button" aria-label="Меню"><svg class="icon"><use href="#i-more"></use></svg></button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="person-cell"><span class="avatar">МС</span><div><a class="link is-neutral is-strong" href="#">Максим Серов</a><small>max@example.ru</small></div></div></td>
|
||
<td><span class="role-badge employee">Сотрудник</span></td>
|
||
<td><span class="status-pill is-disabled"><i></i>Неактивен</span></td>
|
||
<td><span class="product-mark"><i style="background:#0958d9"></i>FirePage</span></td>
|
||
<td><button class="row-menu-button" aria-label="Меню"><svg class="icon"><use href="#i-more"></use></svg></button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="table-footer">
|
||
<div class="ui-table-pagination"><span>Показано 1–3 из 18</span><nav><button disabled>‹</button><button class="active">1</button><button>2</button><button>3</button><button>›</button></nav></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="ds-section">
|
||
<div class="ds-section-heading">
|
||
<div><h2>Состояния контента</h2><p>Пустой раздел, предупреждение и загрузка.</p></div>
|
||
<span class="ds-source">ContentState · EmptyState · LoadingState</span>
|
||
</div>
|
||
<div class="ds-grid cols-3">
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>Primary state</strong><code>ContentState</code></div>
|
||
<div class="ds-specimen-body" style="background:#f0f2f5">
|
||
<div class="content-state"><span class="content-state-icon"><svg class="icon"><use href="#i-list"></use></svg></span><strong>Данных пока нет</strong><p>Создайте первый элемент, чтобы начать работу.</p><button class="primary-button">Создать</button></div>
|
||
</div>
|
||
</article>
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>Warning state</strong><code>tone="warning"</code></div>
|
||
<div class="ds-specimen-body" style="background:#f0f2f5">
|
||
<div class="content-state"><span class="content-state-icon is-warning"><svg class="icon"><use href="#i-warning"></use></svg></span><strong>Подключение требует внимания</strong><p>Проверьте параметры интеграции.</p><button class="secondary-button">Открыть настройки</button></div>
|
||
</div>
|
||
</article>
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>Inline states</strong><code>EmptyState · LoadingState</code></div>
|
||
<div class="ds-specimen-body is-column">
|
||
<div style="min-height:72px;display:grid;place-items:center;color:#595959"><strong style="font-size:13px">Загрузка…</strong></div>
|
||
<div style="min-height:72px;display:grid;place-items:center;color:#595959;border-top:1px solid #f0f0f0"><strong style="font-size:13px">Нет результатов</strong></div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="ds-section">
|
||
<div class="ds-section-heading">
|
||
<div><h2>Выпадающее меню</h2><p>Единая структура пунктов действий и семантических состояний.</p></div>
|
||
<span class="ds-source">menu.css</span>
|
||
</div>
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>App dropdown</strong><code>.app-dropdown</code></div>
|
||
<div class="ds-specimen-body">
|
||
<div class="dropdown-demo">
|
||
<button><svg class="icon"><use href="#i-edit"></use></svg>Редактировать</button>
|
||
<button class="success"><svg class="icon"><use href="#i-check"></use></svg>Активировать</button>
|
||
<button class="warning"><svg class="icon"><use href="#i-warning"></use></svg>Приостановить</button>
|
||
<button class="danger"><svg class="icon"><use href="#i-trash"></use></svg>Удалить</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="ds-section">
|
||
<div class="ds-section-heading">
|
||
<div><h2>Decision dialogs</h2><p>Предупреждающее и опасное подтверждение.</p></div>
|
||
<span class="ds-source">DecisionDialog.tsx · design-components.css</span>
|
||
</div>
|
||
<div class="ds-grid cols-2">
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>Warning</strong><code>tone="warning"</code></div>
|
||
<div class="ds-specimen-body"><button class="secondary-button" data-open-dialog="warning-dialog">Открыть предупреждение</button></div>
|
||
</article>
|
||
<article class="ds-specimen">
|
||
<div class="ds-specimen-header"><strong>Danger</strong><code>tone="danger"</code></div>
|
||
<div class="ds-specimen-body"><button class="danger-outline" data-open-dialog="danger-dialog">Открыть удаление</button></div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dialog-backdrop" id="warning-dialog">
|
||
<section class="decision-dialog is-warning" role="dialog" aria-modal="true">
|
||
<header class="decision-dialog-header"><span class="decision-dialog-icon"><svg class="icon"><use href="#i-warning"></use></svg></span><div><h3>Приостановить канал?</h3><p>Новые обращения перестанут поступать в этот канал до повторной активации.</p></div></header>
|
||
<div class="decision-dialog-body"><div class="key-value"><span>Канал</span><strong>Telegram · Продажи</strong></div></div>
|
||
<footer class="decision-dialog-footer"><button class="secondary-button" data-close-dialog>Отмена</button><button class="primary-button" data-close-dialog>Приостановить</button></footer>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="dialog-backdrop" id="danger-dialog">
|
||
<section class="decision-dialog is-danger" role="dialog" aria-modal="true">
|
||
<header class="decision-dialog-header"><span class="decision-dialog-icon"><svg class="icon"><use href="#i-trash"></use></svg></span><div><h3>Удалить подключение?</h3><p>Подключение и связанные с ним настройки будут удалены.</p></div></header>
|
||
<div class="decision-dialog-body"><div class="key-value"><span>Подключение</span><strong>Email · support@company.ru</strong></div></div>
|
||
<footer class="decision-dialog-footer"><button class="secondary-button" data-close-dialog>Отмена</button><button class="danger-outline" data-close-dialog>Удалить</button></footer>
|
||
</section>
|
||
</div>
|
||
<script src="assets/icons-data.js"></script>
|
||
<script src="assets/design-system.js"></script>
|
||
</body>
|
||
</html>
|