# Дизайн-система Naive UI

## Предварительный просмотр интерфейса дизайн-системы Naive UI

Ищите записи, раскрывайте контекст проверки, выбирайте строки на разных страницах и отмечайте локальный пакет как проверенный.

## Справочник по дизайн-системе Naive UI

Объект общей светлой темы Naive UI 2.45.3, изученный в установленном пакете. Эти свойства в camelCase — переопределения темы, а не схема именования общедоступных переменных --token CSS. Пользовательские переопределения common в предварительном просмотре перечислены отдельно.

### Стандартные общие цвета

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| primaryColor | #18a058 | Стандартный основной зелёный цвет. |
| primaryColorHover | #36ad6a | Вариант при наведении. |
| primaryColorPressed | #0c7a43 | Вариант при нажатии. |
| primaryColorSuppl | #36ad6a | Дополнительный основной цвет. |
| infoColor | #2080f0 | Информационная роль. |
| successColor | #18a058 | Роль успешного состояния. |
| warningColor | #f0a020 | Роль предупреждения. |
| errorColor | #d03050 | Роль ошибки. |
| textColor1 | rgb(31, 34, 37) | Жирное начертание. |
| textColor2 | rgb(51, 54, 57) | Обычный текст. |
| textColor3 | rgb(118, 124, 130) | Вторичный текст. |
| borderColor | rgb(224, 224, 230) | Граница по умолчанию. |
| dividerColor | rgb(239, 239, 245) | Ненавязчивые разделители. |
| tableHeaderColor | rgb(250, 250, 252) | Фон заголовка таблицы. |
### Типографика и геометрия элементов управления

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| fontFamily | v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Предпочтительный стек шрифтов интерфейса; v-sans не загружается автоматически. |
| fontSize | 14px | Стандартный размер шрифта — 14px. |
| fontSizeMini | 12px | Размер миниатюрного текста. |
| fontSizeSmall | 14px | Текст мелких элементов управления. |
| fontSizeMedium | 14px | Текст элементов управления среднего размера. |
| fontSizeLarge | 15px | Текст крупных элементов управления. |
| fontSizeHuge | 16px | Текст очень крупных элементов управления. |
| lineHeight | 1.6 | Стандартный межстрочный интервал. |
| heightTiny | 22px | Высота крошечных элементов управления. |
| heightSmall | 28px | Высота небольшого элемента управления. |
| heightMedium | 34px | Высота элементов управления среднего размера. |
| heightLarge | 40px | Высота большого элемента управления. |
| heightHuge | 46px | Высота очень крупных элементов управления. |
| borderRadius | 3px | Стандартный радиус скругления — 3px. |
| borderRadiusSmall | 2px | Стандартный радиус скругления для маленьких элементов — 2px. |
### Фактические переопределения темы в предварительном просмотре

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| common.primaryColor | #176b57 | Исходный основной цвет действия — более тёмный зелёный. |
| common.primaryColorHover | #238a71 | Исходное согласованное значение при наведении. |
| common.primaryColorPressed | #115340 | Исходное согласованное значение при нажатии. |
| common.borderRadius | 6px | Исходное переопределение радиуса скругления; значение по умолчанию — 3px. |
| Layout spacing | 32px outer / 24px section gaps / 16px toolbar gap | Исходные интервалы на странице, а не заявленная глобальная шкала отступов Naive. |
## Полное руководство по дизайн-системе Naive UI

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система 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. При сортировке или переходе на другую страницу расположение записи меняется, но её идентификатор для пакетного действия остаётся прежним. Использование вместо него индексов массива сделало бы эту связь ненадёжной при изменении порядка строк.

В столбце выбора нельзя выбрать записи со статусом «В архиве». Они остаются видимыми для исторического контекста, но не могут попасть в пакет проверки. При выполнении действия приложение также проверяет статус, чтобы изменение данных соответствовало видимому ограничению. В реальной системе авторизацию должен дополнительно проверять сервер: отключённый флажок не является границей безопасности.

1. Выберите одну запись, доступную для проверки, на первой странице.

2. Перейдите на следующую страницу и проверьте, сохранилось ли количество выбранных записей.

3. Выполните пакетное действие и убедитесь, что статус выбранной записи изменился, а запись в архиве осталась нетронутой.

Прочитать вспомогательную спецификацию

## Дизайн-система Naive UI: у фильтрации и пагинации раздельное состояние

### У фильтрации и пагинации раздельное состояние

Поиск выполняется по названиям справочных материалов и владельцам. При изменении значения текущая страница сбрасывается на первую, чтобы после фильтрации пользователь не остался на странице, которая теперь пуста. В пагинации задан размер страницы 4 и обработчик onChange; благодаря шести записям в локальном примере можно увидеть переходы между страницами.

Выбор намеренно хранится отдельно от отфильтрованного массива и может включать записи с разных страниц. Панель инструментов показывает их общее количество. В рабочем пакетном действии скрытые при фильтрации записи следует сохранять или снимать с выбора в соответствии с заранее определённым правилом; в этом примере они сохраняются. Фильтрация не изменяет исходные записи для проверки.

Прочитать вспомогательную спецификацию

## Дизайн-система Naive UI: раскройте строки, прежде чем принимать решение по пакету

### Раскройте строки, прежде чем принимать решение по пакету

В раскрываемой области каждой строки приведена конкретная задача, например проверка перемещения по навигации с клавиатуры или сравнение разных значений пустого состояния. Благодаря этому раскрытая область содержит полезные сведения для принятия решения, а не повторяет общее описание. Столбец раскрытия использует renderExpand, чтобы показывать обычное содержимое под соответствующей записью.

На узких экранах структура столбцов сохраняется, а таблице задаётся scroll-x=640. Поэтому область таблицы можно прокручивать по горизонтали, не выходя за границы окна. На мобильных устройствах панель инструментов перестраивается в столбец, но данные не скрываются ради более аккуратного снимка экрана.

Прочитать вспомогательную спецификацию

## Дизайн-система Naive UI: пакетная проверка — локальное преобразование данных

### Пакетная проверка — локальное преобразование данных

Кнопка «Отметить выбранные как проверенные» отключена, если массив контролируемых ключей пуст. После нажатия для записей выполняется map: статус меняется на «Проверено» только у выбранных записей, не находящихся в архиве. Затем выбор очищается, а нативное уведомление об успехе точно сообщает, какое локальное действие выполнено. Счётчик проверенных записей в заголовке карточки вычисляется на основе массива records, а не увеличивается независимо от него.

Изменения не затрагивают репозиторий, службу проверки или внешние документы. Для реальной асинхронной реализации потребуется обработка загрузки, ошибок и частичных сбоев. Нельзя очищать выбор, пока не станет известно, какие изменения прошли успешно. В этом примере действие выполняется синхронно и явно локально, поэтому сообщение об успехе соответствует коду.

- Кнопка пакетного действия показывает, выбраны ли записи.

- Количество проверенных записей вычисляется по тем же данным, что отображаются в таблице.

- В уведомлении указано, что репозиторий не изменялся.

Прочитать вспомогательную спецификацию

## Дизайн-система Naive UI: компонент Vue без обязательного импорта CSS

### Компонент Vue без обязательного импорта CSS

Установите naive-ui@2.45.3 в проект Vue 3 и импортируйте компоненты, используемые в App.vue. Naive UI применяет стили компонентов во время выполнения; в отличие от многих библиотек, в первую очередь ориентированных на CSS, для этих компонентов не требуется импортировать глобальную таблицу стилей пакета. Файл style.css содержит только исходную разметку рабочей области.

NConfigProvider получает английские локали компонентов и дат, а также общие переопределения темы. Полный SFC можно скомпилировать стандартным плагином Vue для Vite. Автономный пример включает скомпилированный компонент, сохраняя доступ к нативным компонентам и поведению приложения без сетевых запросов.

Прочитать вспомогательную спецификацию

## Границы темы и данных дизайн-системы Naive UI остаются доступными для проверки

### Границы темы и данных легко проверить

Рабочая панель — это небольшая библиотека примеров, а не универсальная административная панель с выдуманными метриками. Каждая строка содержит демонстрационные данные, у каждого статуса есть чёткое значение, а текст раскрытой строки указывает конкретную причину для проверки. Таблица темы и полный SFC позволяют воспроизвести оформление и поведение.

При интеграции Naive UI в более крупную систему согласуйте общие переопределения с переопределениями на уровне компонентов. Основные цвета по умолчанию, при наведении и нажатии следует проверять вместе. Не начинайте настройку с оформления генерируемых внутренних элементов, если провайдер предоставляет поддерживаемую поверхность для настройки темы.

Прочитать вспомогательную спецификацию

## Примеры компонентов дизайн-системы Naive UI

### Очередь проверки Vue целиком

Настройка столбцов DataTable, стабильные ключи строк, выбор, раскрытие и управляемая пагинация.

```
<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>
```

Справочник по коду

- Выбор выполняется по стабильным идентификаторам ссылок.

- Архивные строки нельзя выбрать: это задаёт условие в столбце выбора.

- Общие переопределения темы задаются через NConfigProvider.

### Исходная компоновка рабочей панели

Типографика страницы и адаптивные отступы вокруг нативной таблицы данных.

```
*{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#1f2225;font-family:system-ui,sans-serif;font-size:14px;line-height:1.6}.review-desk{max-width:1120px;margin:auto;padding:32px}header{max-width:720px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#426258}.toolbar{display:flex;align-items:center;gap:16px}.toolbar .n-input{max-width:360px}.selection-note,.row-id{font-size:12px;color:#767c82}.row-id{margin-top:4px}.row-note{padding:12px 16px;max-width:65ch;color:#335547}.notice{margin-top:20px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.notes section{border-top:2px solid #c8d7cf;padding:18px 0}.notes h2{font-size:18px;margin:0 0 10px}.notes p{margin:0}footer{font-size:12px;color:#767c82;margin-top:20px}@media(max-width:700px){.review-desk{padding:20px 16px}h1{font-size:28px}.toolbar{align-items:stretch;flex-direction:column}.toolbar .n-input{max-width:none}.notes{grid-template-columns:1fr}.n-card>.n-card__content{padding:16px!important}}
```

Справочник по коду

- Naive UI добавляет стили компонентов; эта таблица стилей содержит только стили компоновки приложения.

## Настройка агента дизайн-системы Naive UI

### Отправная точка для реализации

Проверено с Vue 3 и Naive UI 2.45.3. Используется стандартная компиляция SFC. Все записи примеров хранятся локально.

```
// 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 naive-ui@2.45.3
// 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
```

### Запрос для вашего проекта

```
Используйте очередь проверки ссылок из Naive UI 2.45.3 с NConfigProvider и нативными столбцами NDataTable, раскрытием строк, сортировкой, пагинацией и выбором. Сохраняйте стабильные ключи ссылок при фильтрации и переключении страниц, а пакетное действие применяйте к выбранным записям, а не только к видимым строкам. Привязывайте состояния пустого списка и недоступных действий к реальному содержимому коллекции. Сохраняйте заданные themeOverrides как переопределения приложения, отдельно от значений по умолчанию в пакете, и оставляйте исходную компоновку без изменений. Это очередь локальной проверки ссылок, а не сервис импорта наборов данных.
```

## Источники и область применения дизайн-системы Naive UI

Naive UI 2.45.3. Значения темы по умолчанию и исходные переопределения указаны отдельно. Записи проверки и пакетные изменения остаются локальными.

- Официальный репозиторий Vue 3, стили во время выполнения и настройка темы.

- Примеры DataTable Шаблоны нативных таблиц данных и примеры API.

- Общая светлая тема Фактическая палитра по умолчанию и производные роли.

- Общая геометрия Размеры шрифта, высота элементов управления и радиусы.

- Провайдер конфигурации Настройка темы провайдера.

## Связанные ресурсы дизайн-системы Naive UI

### Nuxt UI

Создайте полноценный редактор брифов на Nuxt UI 4.11.3 с реальными компонентами Vue, семантическими ссылками на тему, проверкой ввода и явным управлением локальными черновиками.

### Oruga UI

Встроенный редактор каталога Oruga с поиском и удалением тематических тегов, ограничениями словаря, реальными токенами необязательной темы и динамической карточкой, которая отражает выбранные метки.

### Pico CSS

Pico CSS стилизует семантический HTML с адаптивной шкалой типографики в rem и переменными темы. Стандартная, безклассовая и условная сборки рассчитаны на разные сценарии интеграции; в этом руководстве используется стандартная сборка для формы предпочтений чтения со встроенными раскрывающимися блоками и диалогом.


- [Справочник по реализации](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Источник](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [Источник](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)
- [Прочитать вспомогательную спецификацию](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [Прочитать вспомогательную спецификацию](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Прочитать вспомогательную спецификацию](https://github.com/tusen-ai/naive-ui)
- [Прочитать вспомогательную спецификацию](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)
- [Справочник по коду](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Справочник по коду](https://github.com/tusen-ai/naive-ui)
- [Официальный репозиторий Vue 3, стили во время выполнения и настройка темы.](https://github.com/tusen-ai/naive-ui)
- [Примеры DataTable Шаблоны нативных таблиц данных и примеры API.](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Общая светлая тема Фактическая палитра по умолчанию и производные роли.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [Общая геометрия Размеры шрифта, высота элементов управления и радиусы.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/_common.ts)
- [Провайдер конфигурации Настройка темы провайдера.](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)