# Naive UI デザインシステム

## Naive UIデザインシステムのインターフェースプレビュー

レコードを検索し、レビューの詳細を展開して、複数ページにわたる行を選択し、ローカルの項目を一括でレビュー済みにします。

## Naive UIデザインシステムのデザインリファレンス

インストール済みパッケージから確認したNaive UI 2.45.3のcommonライトテーマオブジェクト。これらのcamelCaseプロパティはテーマのオーバーライドであり、公開されている--token CSSの変数命名規則ではありません。プレビュー独自のcommonオーバーライドは別途記載しています。

### デフォルトの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" | 推奨UIフォントスタック。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デザインシステム：Sassパイプラインではなく、JavaScriptのテーマオブジェクト

### Sassパイプラインではなく、JavaScriptのテーマオブジェクト

> Naive UIはVue 3のコンポーネントライブラリで、テーマのカスタマイズにはJavaScriptオブジェクトを使用します。レビューキューではthemeOverridesをNConfigProviderに渡します。commonセクションではprimaryColor、primaryColorHover、primaryColorPressed、borderRadiusをオーバーライドし、その他のコンポーネントのデフォルト値はプロバイダーから引き続き利用できます。

リファレンステーブルには、インストール済みの2.45.3から取得したcommonライトテーマの実際の値を記載しています。camelCaseのキーをもとにCSS変数名を作り出してはいません。デフォルトのプライマリーカラーは#18a058、デフォルトの角丸は3pxです。この例で使う濃い緑と6pxの角丸は、明示的にオリジナルのオーバーライドとして設定しています。

関連する仕様を確認する

## Naive UIデザインシステム：高密度UIの文字サイズとコントロールの高さ

### 高密度UIの文字サイズとコントロールの高さ

commonテーマでは、文字サイズ14px、行の高さ1.6を使用します。小サイズと中サイズの文字サイズはいずれも14pxですが、コントロールの高さは異なります。heightSmallは28px、heightMediumは34pxです。したがって、サイズ名が表すのは単なる文字サイズの段階ではなく、コンポーネントの寸法です。

推奨フォントスタックの先頭には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. 最初のページで、レビュー可能なレコードを1件選択します。

2. 次のページに移動し、選択件数が維持されていることを確認します。

3. 一括処理を実行し、選択したレコードのステータスだけが変わり、アーカイブ済みレコードには影響しないことを確認します。

関連する仕様を確認する

## Naive UI デザインシステムでは、フィルタリングとページネーションの状態を分けて管理します

### フィルターとページネーションは別々の状態で管理する

検索入力では、リファレンス名とオーナーを照合します。値を変更すると現在のページが1に戻るため、フィルタリング後に結果のないページが表示され続けることはありません。ページネーションの1ページあたりの件数は4件で、onChangeハンドラーを使用しています。6件のレコードがあるため、ローカルのサンプルでもページ遷移を確認できます。

選択状態はフィルタリング後の配列とは意図的に分けて管理され、ページをまたいで保持できます。ツールバーの件数がその範囲を示します。本番環境の一括処理では、非表示の選択項目を保持するか解除するか、明確なルールを定める必要があります。この例では選択を保持します。フィルターによって元のレビュー記録が変更されたものとして扱うことはありません。

関連する仕様を確認する

## Naive UI デザインシステムでは、行を展開してから一括処理を判断します

### 一括判断の前に行を展開する

各行を展開すると、ナビゲーションでのキーボード操作の確認や、空状態の意味の違いの比較など、具体的なタスクが表示されます。展開領域は、汎用的な説明を繰り返すのではなく、レビュー判断に役立つ情報を提供します。展開列ではrenderExpandを使い、該当レコードの下に通常のコンテンツを表示します。

狭い画面でもテーブルの列構成を維持し、scroll-x=640を指定します。これにより、ページをビューポート内に保ったまま、テーブル領域を水平方向にスクロールできます。モバイルではツールバーを縦に並べますが、スクリーンショットをすっきり見せるためにデータを暗黙に省くことはありません。

関連する仕様を確認する

## Naive UI デザインシステムの一括レビューは、ローカルデータの変換です

### 一括レビューはローカルデータの変換処理

制御対象のキー配列が空の場合、「選択項目をレビュー済みにする」ボタンは無効になります。実行するとレコードをマッピングし、選択済みでアーカイブされていない項目だけを「レビュー済み」に変更します。その後、選択を解除し、ローカルで実行した処理の内容を正確に示すネイティブの成功アラートを表示します。カードヘッダーのレビュー済み件数は、独立して加算するのではなく、レコードから算出します。

リポジトリ、レビューサービス、外部ドキュメントは変更されません。実際に非同期処理を実装する場合は、読み込み中、拒否、部分的な失敗への対応が必要です。どの更新が成功したか判明する前に選択を解除してはいけません。このサンプルでは処理を同期的かつ明示的にローカルで行い、成功メッセージがコードの動作と一致するようにしています。

- 一括処理ボタンは、何かが選択されているかどうかに応じて状態が変わります。

- レビュー済み件数は、テーブルに表示されている同じレコードから算出されます。

- 結果の通知では、リポジトリが変更されていないことを明示します。

関連する仕様を確認する

## Naive UI デザインシステムのVueコンポーネントにはCSSのインポートが不要です

### CSSのインポートが必須ではないVueコンポーネント

Vue 3プロジェクトにnaive-ui@2.45.3をインストールし、App.vueで使用するコンポーネントをインポートします。Naive UIは実行時にコンポーネントのスタイルを適用します。CSSを前提とする多くのライブラリとは異なり、これらのコンポーネントではパッケージのスタイルシートをグローバルにインポートする必要はありません。付属のstyle.cssには、元のワークベンチのレイアウトだけが含まれています。

NConfigProviderには、コンポーネントと日付の英語ロケールに加え、共通テーマのオーバーライドを渡します。完全なSFCは、標準のVite Vueプラグインでコンパイルできます。単体で動作するサンプルにはコンパイル済みコンポーネントが含まれており、ネットワークリクエストなしでネイティブコンポーネントとアプリケーションの動作を確認できます。

関連する仕様を確認する

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

コードリファレンス

- 選択状態は、安定したリファレンスIDをキーとして管理します。

- 選択列の条件により、アーカイブ済みの行は選択できません。

- 共通テーマのオーバーライドは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

実際の Vue コンポーネント、セマンティックなテーマ参照、入力検証、明示的なローカル下書きの動作を備えた、完全な Nuxt UI 4.11.3 のブリーフ作成画面を構築します。

### Oruga UI

ネイティブのOrugaカタログエディター。検索・削除できるトピックタグ、語彙数の上限、任意テーマの実際のトークンを備え、選択したラベルを反映するカードをライブ表示します。

### Pico CSS

Pico CSSのスタイルは、レスポンシブなremベースの文字サイズスケールとテーマ変数を備えたセマンティックなHTMLです。標準版、クラスレス版、条件付き版では統合できる範囲が異なります。このガイドでは標準ビルドを使い、ネイティブの開閉要素とダイアログ動作を備えた読みやすさ設定フォームを作成します。


- [実装リファレンス](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)