Очередь проверки CoreUI с реальными переменными темы 5.9, встроенными вкладками и групповым выбором флажками, а также закреплённым уведомлением, позволяющим отменить последнее локальное архивирование.
Встроенный CoreUI для Bootstrap 5.9.0 CSS и входящих в комплект Tab/Toast JavaScript. · Справочник по реализации
02
Справочник по дизайн-системе CoreUI
Значения по умолчанию для светлой темы CoreUI для Bootstrap 5.9.0 взяты из установленной скомпилированной таблицы стилей. Имена --cui-* соответствуют реальным переменным среды выполнения. В примере приложения используются бесплатные компоненты; он не предполагает наличия виджетов CoreUI PRO.
Дизайн-система CoreUI: выберите именно ту среду выполнения CoreUI, которой пользуетесь
Выберите именно ту среду выполнения CoreUI, которой пользуетесь
В этом примере используется CoreUI для Bootstrap 5.9.0 — пакет CSS и browser-JavaScript. У CoreUI также есть пакеты для конкретных фреймворков, но импорты компонентов в них несовместимы с атрибутами данных из этого примера. Настройка подключает согласованные таблицу стилей и скрипт из комплекта, не предполагая наличия провайдера React или Vue.
В рабочей панели проверки используются бесплатные карточки, таблицы, формы, вкладки и всплывающие уведомления. Вместо них незаметно не подставляются платная сетка данных PRO или расширенный платный селектор. Благодаря этому весь пример можно воспроизвести на основе указанного пакета, не приобретая шаблон, о котором не было сказано.
Дизайн-система CoreUI: используйте фактический основной фиолетовый цвет и соответствующие ему роли статусов
Используйте фактический основной фиолетовый цвет и соответствующие ему роли статусов
Основной цвет светлой темы CoreUI — #5856d6; контрастный текст для него — белый. В карточке с принципом проверки дизайн-макета вместе используются primary-bg-subtle, primary-border-subtle и primary-text-emphasis. Эти имена обозначают согласованное оформление поверхности, поэтому вспомогательный текст не помещается на тонированный фон с произвольным цветом переднего плана.
В метках высокого и среднего приоритета также сочетаются мягкие поверхности danger или warning и текст emphasis. Текстовые метки сохраняют классификацию независимо от цвета. Это приоритеты для примера проверки дизайн-макета, а не утверждение, что каждая красная метка в продукте должна обозначать одно и то же состояние предметной области.
Дизайн-система CoreUI: отделяйте основной шрифт текста от шрифта плотной рабочей таблицы
Отделяйте основной шрифт текста от шрифта плотной рабочей таблицы
В скомпилированной версии CoreUI для основного текста по умолчанию заданы размер в один rem и межстрочный интервал 1.5. В примере для текста таблицы намеренно задан размер четырнадцать пикселей, а для заголовков столбцов — двенадцать пикселей, чтобы уместить плотную очередь на проверку. Для заголовка страницы и значений сводки отдельно заданы исходные увеличенные размеры. В руководстве эти переопределения приложения не выдаются за значения по умолчанию для всей библиотеки.
В трёх контекстных карточках используются встроенная адаптивная сетка и интервал g-3. На небольших экранах «Входящие» и «Архив» остаются рядом, а третья карточка с пояснением занимает целую строку. Все числа рассчитаны по пяти видимым примерам записей; посторонние показатели панели управления и выдуманные графики роста отсутствуют.
Дизайн-система CoreUI: атрибуты данных управляют настоящими панелями вкладок
Атрибуты данных CoreUI управляют настоящими панелями вкладок
«Входящие» и «Архив» — это вкладки-кнопки с data-coreui-toggle="tab" и целевыми селекторами соответствующих панелей вкладок. В разметке указаны связи tablist, tab, tabpanel, aria-controls и aria-labelledby. Компонент CoreUI JavaScript обновляет активное состояние и видимость, а не просто меняет подчёркивание с помощью обработчика приложения.
Класс nav-underline-border задаёт визуальное оформление этого компонента. Переключение вкладки не архивирует записи и не снимает выделение. Вкладка определяет, какая часть локальной очереди отображается, а Sets выбранных и архивированных записей в приложении хранятся отдельно.
Дизайн-система CoreUI: у выбора всех элементов есть осмысленное промежуточное состояние
У выбора всех элементов есть осмысленное промежуточное состояние
У каждой заметки есть постоянный идентификатор серии R. Установка флажка в строке добавляет этот идентификатор в Set выбранных элементов. Флажок в заголовке установлен, только если выбраны все текущие записи во входящих; если выбрана часть, он находится в промежуточном состоянии, а если входящие пусты — отключён. Эти состояния пересчитываются при каждой отрисовке очереди.
Кнопка группового действия отключена, если ничего не выбрано, а соседний текст показывает текущее количество. После архивации выделение сбрасывается, чтобы уже архивированная запись случайно не попала в следующую группу. Исходные заметка и ответственный остаются прикреплены к записи, а не заменяются общей меткой «Решено».
Выберите две заметки и проверьте промежуточное состояние флажка в заголовке.
Архивируйте выбранные заметки и убедитесь, что количество входящих уменьшилось на две.
Откройте «Архив», чтобы прочитать исходные запросы и имена ответственных.
Дизайн-система CoreUI: всплывающее уведомление сообщает об одной конкретной операции, которую можно отменить
Всплывающее уведомление сообщает об одной конкретной операции, которую можно отменить
Приложение сохраняет точные идентификаторы записей из последней архивированной группы, а затем вызывает метод show встроенного экземпляра Toast. Параметр autohide имеет значение false, поскольку уведомление содержит действие «Отменить»; в примере возможность отмены не исчезает по произвольному короткому таймеру. Уведомление по-прежнему можно закрыть вручную.
Отмена удаляет из Set архивированных элементов только сохранённые идентификаторы, очищает снимок последней группы и отключает действие. Если отменить более позднюю группу, предыдущая останется в архиве. Это намеренно одноступенчатая операция, а не вводящее в заблуждение заявление о полноценной истории отмен.
Дизайн-система CoreUI: сохраняйте читаемость запроса после его архивации
Сохраняйте читаемость запроса после его архивации
В таблице входящих показаны заголовок заметки, конкретное запрошенное изменение, область, приоритет и ответственный. В «Архиве» отображается компактный список, в котором сохранены заголовок, идентификатор, ответственный и полный текст запроса. После обработки таблица выглядит лаконичнее, но необходимая для понимания внесённых изменений информация не удаляется.
На мобильных устройствах минимальная ширина таблицы составляет 740px; таблица размещена внутри table-responsive. Именованная область доступна для фокусировки с клавиатуры и имеет заметное оформление фокуса; горизонтальная прокрутка остаётся внутри таблицы, не расширяя документ. Удаление важных столбцов лишь ради избавления от полосы прокрутки ухудшило бы процесс проверки.
Дизайн-система CoreUI: используйте постоянный результат, не выдумывая серверную часть
Используйте постоянный результат, не выдумывая серверную часть
У всплывающего уведомления есть роль status с вежливым режимом объявления и атомарным озвучиванием. Дополнительное встроенное сообщение описывает результат локальной архивации или отмены. Ни одно из них не утверждает, что внешняя задача закрыта: на странице прямо указано, что трекер задач не подключён. Предпросмотр меняет только находящиеся в памяти Sets, поэтому после перезагрузки восстанавливаются исходные пять заметок.
Заголовки записей и их описания, в том числе в списке архива, вставляются с помощью textContent. Для двух известных приоритетов используются фиксированные сопоставления классов. Благодаря этому пользовательский текст отделён от структуры HTML, и за потоком данных в примере можно проследить.
Указывайте фактический размер группы и локальный характер операции.
Оставляйте кнопку отмены доступной, пока сохранённый снимок действителен.
Не называйте локальное обновление DOM успешным удалённым разрешением задачи.
Дизайн-система CoreUI: загрузите пакет CoreUI перед локальным модулем
Загрузите пакет CoreUI перед локальным модулем
Полная настройка копирует ресурсы dist пакета в локальный общедоступный путь и загружает coreui.bundle.min.js перед app.js. Bundle предоставляет coreui.Toast и обеспечивает работу вкладок с атрибутами data-coreui. Добавлять ещё одну среду выполнения Bootstrap для этой композиции не нужно: это может привести к путанице из-за дублирования ответственности.
Светлая тема явно задаётся атрибутом data-coreui-theme="light". Более крупное приложение может использовать механизм цветовых режимов CoreUI, но при этом следует проверять пары семантических цветов текста и поверхностей вместе. Локальная проверка охватывала частичный выбор, пакет из двух записей, просмотр содержимого вкладки архива, восстановление отменой и область просмотра шириной 390px.
Используйте с этим пакетом атрибуты data-coreui-*, а не скопированные из другой библиотеки data-bs-*.
Для таблицы предусмотрена именованная локальная область горизонтальной прокрутки.
Цвета приоритета сопровождаются явными подписями «Высокий» и «Средний».
Выбор пакета и отмена последнего пакета
Стабильные идентификаторы записей определяют наборы выбранных и архивированных записей, а встроенный Toast управляет видимостью уведомления.
javascript
const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false});
function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='<td><input class="form-check-input" type="checkbox"></td><td><strong></strong><p class="small text-body-secondary mb-0 mt-1"></p></td><td></td><td><span class="badge"></span></td><td></td>';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();}
function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size<total;}
q('#select-all').onchange=e=>{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render();
Ширина таблицы 740px — это принятое в приложении решение для удобства чтения, а не значение по умолчанию CoreUI.
04
Настройка AI-агента для дизайн-системы CoreUI
Отправная точка для реализации
Проверено для CoreUI и Bootstrap 5.9.0. Предоставленный app.js предполагает наличие полной разметки очереди и не выполняет сетевых операций. Обёртка HTML содержит полную разметку тела страницы; сохраните предоставленные примеры взаимодействия и CSS под указанными здесь именами файлов.
html
<!-- npm install @coreui/[email protected] -->
<!-- Copy node_modules/@coreui/coreui/dist to public/vendor/coreui. -->
<html lang="en" data-coreui-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/coreui/css/coreui.min.css">
<link rel="stylesheet" href="style.css">
<main class="review-desk"><header class="desk-heading"><div><p class="eyebrow">COREUI · REVIEW OPERATIONS</p><h1>Keep the review queue moving.</h1><p class="text-body-secondary">Archive resolved design notes and undo the last local batch.</p></div><span class="badge text-bg-primary">LOCAL WORKSPACE</span></header><div class="row g-3 mb-4"><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Inbox</div><strong id="inbox-count">5</strong><span>design notes</span></div></div></div><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Archived</div><strong id="archive-count">0</strong><span>local resolutions</span></div></div></div><div class="col-12 col-md-4"><div class="card metric context-card"><div class="card-body"><div class="text-body-secondary small">Review principle</div><p class="mt-2 mb-0">Keep the original request visible, even after the note is resolved.</p></div></div></div></div><section class="card"><div class="card-header bg-body"><ul class="nav nav-underline-border" role="tablist"><li class="nav-item" role="presentation"><button id="inbox-tab" class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#inbox-panel" type="button" role="tab" aria-controls="inbox-panel" aria-selected="true">Inbox</button></li><li class="nav-item" role="presentation"><button id="archive-tab" class="nav-link" data-coreui-toggle="tab" data-coreui-target="#archive-panel" type="button" role="tab" aria-controls="archive-panel" aria-selected="false">Archive</button></li></ul></div><div class="tab-content"><div id="inbox-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="inbox-tab" tabindex="0"><div class="batch-bar"><span id="selection" class="small text-body-secondary">No notes selected</span><button id="archive" class="btn btn-primary btn-sm" disabled>Archive selected</button></div><div class="table-responsive" tabindex="0" role="region" aria-label="Design review inbox"><table class="table table-hover align-middle mb-0"><thead><tr><th scope="col"><input id="select-all" class="form-check-input" type="checkbox" aria-label="Select all inbox notes"></th><th scope="col">Design note</th><th scope="col">Area</th><th scope="col">Priority</th><th scope="col">Owner</th></tr></thead><tbody id="inbox-rows"></tbody></table></div><p id="inbox-empty" class="empty-copy" hidden>All sample notes are archived. Open Archive to inspect them.</p></div><div id="archive-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="archive-tab" tabindex="0"><div class="p-4"><h2 class="h5">Resolved in this local session</h2><p class="text-body-secondary small">The original note and owner stay attached to the record.</p><ul id="archive-list" class="list-group list-group-flush"></ul><p id="archive-empty" class="mb-0 text-body-secondary">No notes archived yet.</p></div></div></div></section><section class="decision-key"><span class="badge bg-danger-subtle text-danger-emphasis">High</span><p>Blocks a clear next action or access to important information.</p><span class="badge bg-warning-subtle text-warning-emphasis">Medium</span><p>Creates avoidable friction while the flow remains usable.</p></section><div class="toast-container position-static mt-4"><div id="undo-toast" class="toast w-100" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Local archive updated</strong><button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Dismiss notice"></button></div><div class="toast-body"><p id="toast-copy" class="mb-3"></p><button id="undo" class="btn btn-outline-primary btn-sm">Undo last batch</button></div></div></div><p id="result" class="small text-body-secondary mt-3" role="status">No external issue tracker is connected.</p></main>
<script src="/vendor/coreui/js/coreui.bundle.min.js"></script>
<script src="app.js"></script>
</html>
Запрос для вашего проекта
Промпт для AI-агента
Начните с рабочего стола проверки дизайн-системы CoreUI 5.9.0. Сохраните встроенные вкладки и уведомление об отмене с атрибутами data-coreui, пять записей проверки и набор выбранных идентификаторов с вычисляемым состоянием частичного выбора. Архивируйте выбранный пакет, показывайте его на вкладке архива и позвольте отменить последнее действие восстановления. Ограничьте горизонтальную прокрутку таблицей и отделяйте выбранные записи от находящихся в архиве. Используйте соответствующий пакет CoreUI; не подменяйте его атрибутами Bootstrap и не утверждайте, что архивирование выполняется на сервере.
05
Источники и область применения дизайн-системы CoreUI
CoreUI для бесплатных компонентов Bootstrap версии 5.9.0. Значения тем по умолчанию отделены от первоначально выбранной плотности. Архивирование и отмена затрагивают только локальные демонстрационные записи.
