Рабочая среда для таблиц на основе Naive UI: проверенные значения объектов темы, выбор строк, раскрытие, сортировка, пагинация и локальное действие для пакетной проверки.
Нативные Naive UI 2.45.3 и Vue 3 с переопределениями темы NConfigProvider. · Справочник по реализации
02
Справочник по дизайн-системе Naive UI
Объект общей светлой темы Naive UI 2.45.3, изученный в установленном пакете. Эти свойства в camelCase — переопределения темы, а не схема именования общедоступных переменных --token CSS. Пользовательские переопределения common в предварительном просмотре перечислены отдельно.
Дизайн-система Naive UI: объект темы JavaScript, а не конвейер Sass
Объект темы JavaScript, а не конвейер Sass
Naive UI — библиотека компонентов для Vue 3, настройка темы которой задаётся объектом JavaScript. Очередь проверок передаёт themeOverrides в NConfigProvider. В секции common переопределяются primaryColor, primaryColorHover, primaryColorPressed и borderRadius, а остальные стандартные настройки компонентов доступны через провайдер.
В справочной таблице приведены фактические значения общей светлой темы по умолчанию из установленного пакета версии 2.45.3. Имена переменных CSS здесь не выдуманы на основе ключей в camelCase. Стандартный основной цвет — #18a058, а стандартный радиус скругления — три пикселя; более тёмный зелёный и радиус в шесть пикселей в этом примере явно заданы как исходные переопределения.
Дизайн-система Naive UI: плотная типографика и высота элементов управления
Плотная типографика и высота элементов управления
В общей теме используется шрифт размером 14px с межстрочным интервалом 1.6. Размеры текста для маленьких и средних элементов одинаковы — 14px, но высота самих элементов различается. heightSmall равен двадцати восьми пикселям, а heightMedium — тридцати четырём. Следовательно, названия размеров описывают геометрию компонентов, а не только изменение размера шрифта.
Предпочтительный стек шрифтов начинается с v-sans, но библиотеке не требуется загружать этот шрифт для отображения примера. На окружающей странице используются system-ui, заголовок размером 34px и дополнительные заголовки разделов размером 18px. Эти стили страницы заданы отдельно. При использовании библиотеки важно различать шкалу элементов управления в теме и более крупную редакционную иерархию целевой страницы.
Дизайн-система Naive UI: определения столбцов задают поведение
Определения столбцов задают поведение
В NDataTable передаются массив columns и массив records. В примере сначала идёт столбец выбора, затем столбец раскрытия, а за ними — именованные столбцы с данными. В столбце Reference отображаются выделенное имя и меньший по размеру постоянный ID. Для Entries используется числовой компаратор, а в столбце с именем — сортировщик по умолчанию. В столбце Review отображается нативный NTag, соответствующий статусу записи.
Такая конфигурация задаёт реальное поведение, а не просто добавляет к таблице декоративные заголовки для снимка экрана. При сортировке столбца Entries сравниваются числовые значения, а не строки с форматированными числами. В раскрытом содержимом приводится конкретный вопрос для проверки каждой записи. Таблица управляет отображением строк, а приложение определяет, что означают эти записи.
Дизайн-система Naive UI: выбор должен сохраняться при сортировке
Выбор должен сохраняться при сортировке
Функция row-key возвращает постоянный ID каждой записи. Свойство checked-row-keys и событие update:checked-row-keys позволяют управлять выбором из состояния Vue. При сортировке или переходе на другую страницу расположение записи меняется, но её идентификатор для пакетного действия остаётся прежним. Использование вместо него индексов массива сделало бы эту связь ненадёжной при изменении порядка строк.
В столбце выбора нельзя выбрать записи со статусом «В архиве». Они остаются видимыми для исторического контекста, но не могут попасть в пакет проверки. При выполнении действия приложение также проверяет статус, чтобы изменение данных соответствовало видимому ограничению. В реальной системе авторизацию должен дополнительно проверять сервер: отключённый флажок не является границей безопасности.
Выберите одну запись, доступную для проверки, на первой странице.
Перейдите на следующую страницу и проверьте, сохранилось ли количество выбранных записей.
Выполните пакетное действие и убедитесь, что статус выбранной записи изменился, а запись в архиве осталась нетронутой.
Дизайн-система Naive UI: у фильтрации и пагинации раздельное состояние
У фильтрации и пагинации раздельное состояние
Поиск выполняется по названиям справочных материалов и владельцам. При изменении значения текущая страница сбрасывается на первую, чтобы после фильтрации пользователь не остался на странице, которая теперь пуста. В пагинации задан размер страницы 4 и обработчик onChange; благодаря шести записям в локальном примере можно увидеть переходы между страницами.
Выбор намеренно хранится отдельно от отфильтрованного массива и может включать записи с разных страниц. Панель инструментов показывает их общее количество. В рабочем пакетном действии скрытые при фильтрации записи следует сохранять или снимать с выбора в соответствии с заранее определённым правилом; в этом примере они сохраняются. Фильтрация не изменяет исходные записи для проверки.
Дизайн-система Naive UI: раскройте строки, прежде чем принимать решение по пакету
Раскройте строки, прежде чем принимать решение по пакету
В раскрываемой области каждой строки приведена конкретная задача, например проверка перемещения по навигации с клавиатуры или сравнение разных значений пустого состояния. Благодаря этому раскрытая область содержит полезные сведения для принятия решения, а не повторяет общее описание. Столбец раскрытия использует renderExpand, чтобы показывать обычное содержимое под соответствующей записью.
На узких экранах структура столбцов сохраняется, а таблице задаётся scroll-x=640. Поэтому область таблицы можно прокручивать по горизонтали, не выходя за границы окна. На мобильных устройствах панель инструментов перестраивается в столбец, но данные не скрываются ради более аккуратного снимка экрана.
Дизайн-система Naive UI: пакетная проверка — локальное преобразование данных
Пакетная проверка — локальное преобразование данных
Кнопка «Отметить выбранные как проверенные» отключена, если массив контролируемых ключей пуст. После нажатия для записей выполняется map: статус меняется на «Проверено» только у выбранных записей, не находящихся в архиве. Затем выбор очищается, а нативное уведомление об успехе точно сообщает, какое локальное действие выполнено. Счётчик проверенных записей в заголовке карточки вычисляется на основе массива records, а не увеличивается независимо от него.
Изменения не затрагивают репозиторий, службу проверки или внешние документы. Для реальной асинхронной реализации потребуется обработка загрузки, ошибок и частичных сбоев. Нельзя очищать выбор, пока не станет известно, какие изменения прошли успешно. В этом примере действие выполняется синхронно и явно локально, поэтому сообщение об успехе соответствует коду.
Кнопка пакетного действия показывает, выбраны ли записи.
Количество проверенных записей вычисляется по тем же данным, что отображаются в таблице.
В уведомлении указано, что репозиторий не изменялся.
Дизайн-система Naive UI: компонент Vue без обязательного импорта CSS
Компонент Vue без обязательного импорта CSS
Установите [email protected] в проект Vue 3 и импортируйте компоненты, используемые в App.vue. Naive UI применяет стили компонентов во время выполнения; в отличие от многих библиотек, в первую очередь ориентированных на CSS, для этих компонентов не требуется импортировать глобальную таблицу стилей пакета. Файл style.css содержит только исходную разметку рабочей области.
NConfigProvider получает английские локали компонентов и дат, а также общие переопределения темы. Полный SFC можно скомпилировать стандартным плагином Vue для Vite. Автономный пример включает скомпилированный компонент, сохраняя доступ к нативным компонентам и поведению приложения без сетевых запросов.
Границы темы и данных дизайн-системы Naive UI остаются доступными для проверки
Границы темы и данных легко проверить
Рабочая панель — это небольшая библиотека примеров, а не универсальная административная панель с выдуманными метриками. Каждая строка содержит демонстрационные данные, у каждого статуса есть чёткое значение, а текст раскрытой строки указывает конкретную причину для проверки. Таблица темы и полный SFC позволяют воспроизвести оформление и поведение.
При интеграции Naive UI в более крупную систему согласуйте общие переопределения с переопределениями на уровне компонентов. Основные цвета по умолчанию, при наведении и нажатии следует проверять вместе. Не начинайте настройку с оформления генерируемых внутренних элементов, если провайдер предоставляет поддерживаемую поверхность для настройки темы.
<script setup>
import {ref,computed,h} from 'vue';
import {NConfigProvider,NDataTable,NButton,NInput,NTag,NAlert,NCard,NSpace,enUS,dateEnUS} from 'naive-ui';
const themeOverrides={common:{primaryColor:'#176b57',primaryColorHover:'#238a71',primaryColorPressed:'#115340',borderRadius:'6px'}};
const rows=ref([{id:'DS-101',name:'Navigation patterns',owner:'Maya',items:18,status:'Needs review',note:'Check keyboard movement between primary and overflow navigation.'},{id:'DS-102',name:'Empty-state copy',owner:'Alex',items:9,status:'Needs review',note:'Compare first-use guidance with filtered-empty and permission-empty states.'},{id:'DS-103',name:'Color role mapping',owner:'Jules',items:24,status:'Reviewed',note:'Semantic aliases were compared in light and dark appearances.'},{id:'DS-104',name:'Form error summary',owner:'Sam',items:12,status:'Needs review',note:'Verify error links focus the corresponding input.'},{id:'DS-105',name:'Legacy icon export',owner:'Maya',items:36,status:'Archived',note:'Historical export retained for reference; batch review is disabled.'},{id:'DS-106',name:'Density variants',owner:'Alex',items:15,status:'Needs review',note:'Check compact controls with long translated labels.'}]);
const query=ref(''),checked=ref([]),page=ref(1),notice=ref('');const filtered=computed(()=>rows.value.filter(r=>(r.name+' '+r.owner).toLowerCase().includes(query.value.toLowerCase())));
const columns=[{type:'selection',disabled:r=>r.status==='Archived'},{type:'expand',renderExpand:r=>h('div',{class:'row-note'},r.note)},{title:'Reference',key:'name',sorter:'default',width:240,render:r=>h('div',[h('strong',r.name),h('div',{class:'row-id'},r.id)])},{title:'Owner',key:'owner',width:100},{title:'Entries',key:'items',sorter:(a,b)=>a.items-b.items,width:95},{title:'Review',key:'status',width:140,render:r=>h(NTag,{type:r.status==='Reviewed'?'success':r.status==='Archived'?'default':'warning',bordered:false},{default:()=>r.status})}];
const pagination=computed(()=>({page:page.value,pageSize:4,onChange:p=>page.value=p}));function apply(){rows.value=rows.value.map(r=>checked.value.includes(r.id)&&r.status!=='Archived'?{...r,status:'Reviewed'}:r);notice.value=`Marked ${checked.value.length} selected references reviewed in this preview. No repository was changed.`;checked.value=[];}
</script>
<template><NConfigProvider :locale="enUS" :date-locale="dateEnUS" :theme-overrides="themeOverrides"><main class="review-desk"><header><p class="eyebrow">NAIVE UI / REFERENCE REVIEW</p><h1>A review queue with context.</h1><p>Search, expand a row, compare entry counts, and apply a local batch action.</p></header><NCard title="Reference library"><template #header-extra><NTag :bordered="false" type="success">{{rows.filter(r=>r.status==='Reviewed').length}} reviewed</NTag></template><div class="toolbar"><NInput v-model:value="query" placeholder="Search reference or owner" clearable aria-label="Search reference or owner" @update:value="page=1"/><NButton type="primary" :disabled="!checked.length" @click="apply">Mark selected reviewed</NButton></div><p class="selection-note">{{checked.length}} selected · Selection uses stable IDs and can span pages.</p><NDataTable :columns="columns" :data="filtered" :row-key="r=>r.id" :checked-row-keys="checked" @update:checked-row-keys="keys=>checked=keys" :pagination="pagination" :scroll-x="640" :single-line="false"/><NAlert v-if="notice" type="success" class="notice">{{notice}}</NAlert></NCard><div class="notes"><section><h2>Expand before judging</h2><p>The expand control reveals a concrete review question for each reference. A title alone is not enough context for a meaningful batch decision.</p></section><section><h2>Archived is a separate state</h2><p>Archived records stay visible but cannot join the batch selection. Search and pagination never change the underlying review data.</p></section></div><footer>Native Naive UI 2.45.3 DataTable, Input, Button, Tag, Card and Alert. All records and mutations are local examples.</footer></main></NConfigProvider></template>
Naive UI добавляет стили компонентов; эта таблица стилей содержит только стили компоновки приложения.
04
Настройка агента дизайн-системы Naive UI
Отправная точка для реализации
Проверено с Vue 3 и Naive UI 2.45.3. Используется стандартная компиляция SFC. Все записи примеров хранятся локально.
javascript
// Create the project first:
// npm create vite@latest naive-ui-specimen -- --template vue
// cd naive-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete component above as App.vue and layout as style.css.
import {createApp} from 'vue';
import App from './App.vue';
import './style.css';
createApp(App).mount('#app');
// index.html contains <div id="app"></div>.
// NConfigProvider, locales, themeOverrides and component imports are in App.vue.
// No Naive UI global CSS import is required for these components.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Используйте очередь проверки ссылок из Naive UI 2.45.3 с NConfigProvider и нативными столбцами NDataTable, раскрытием строк, сортировкой, пагинацией и выбором. Сохраняйте стабильные ключи ссылок при фильтрации и переключении страниц, а пакетное действие применяйте к выбранным записям, а не только к видимым строкам. Привязывайте состояния пустого списка и недоступных действий к реальному содержимому коллекции. Сохраняйте заданные themeOverrides как переопределения приложения, отдельно от значений по умолчанию в пакете, и оставляйте исходную компоновку без изменений. Это очередь локальной проверки ссылок, а не сервис импорта наборов данных.
05
Источники и область применения дизайн-системы Naive UI
Naive UI 2.45.3. Значения темы по умолчанию и исходные переопределения указаны отдельно. Записи проверки и пакетные изменения остаются локальными.
