プロジェクト紹介
Antdv Next Admin とは
Antdv Next Admin は、Vue 3 + TypeScript + Ant Design Vue をベースに構築された、モダンな管理システムスキャフォールドです。すぐに使える企業向けバックオフィスソリューションを提供し、開発者が機能的で優れたユーザーエクスペリエンスを持つ管理システムを迅速に構築できるようサポートします。
コア機能
モダンな技術スタック
- Vue 3.4 — Composition API +
<script setup>構文を使用 - TypeScript 5 — 厳格な型チェック、完全な型定義
- Vite 5 — 超高速開発サーバーとビルドツール
- Pinia — 次世代状態管理（Setup Store 構文）
- Vue Router 4 — 動的ルーティング、権限フィルタリング対応
権限管理
完全な RBAC（ロールベースアクセス制御）権限システム：
- ルートレベル権限 — ユーザーロールに基づいて動的にアクセス可能なルートを生成
- ボタンレベル権限 —
v-permissionディレクティブでボタン表示を制御 - プログラマティック権限 —
usePermission()コンポーザブル関数でロジック内で検証 - コンポーネント権限 —
<PermissionButton>コンポーネントでラップ
Pro コンポーネント
効率的な設定駆動型コンポーネント：
| コンポーネント | 説明 |
|---|---|
| ProTable | 高度なテーブル、検索フォーム、ツールバー、ページネーション、カラムタイプレンダリング、カラムフィルタリング、カラムドラッグ調整をサポート |
| ProForm | 高度なフォーム、20+ フィールドタイプ、グリッドレイアウト、フォーム検証、動的オプションをサポート |
| ProModal | 高度なモーダル、ドラッグ移動、エッジリサイズ、フルスクリーン切り替えをサポート |
テーマシステム
- 6 つのプリセットテーマカラー：ブルー（デフォルト）、グリーン、パープル、レッド、オレンジ、シアン
- ライト / ダーク / システムに従う の3つのモード
- サイドバー独立のライト・ダークテーマ
- 100+ CSS デザイン変数
国際化
- 中国語と英語を内蔵
- 実行時の動的切り替えをサポート
- vue-i18n ベース、新しい言語の拡張が容易
その他の機能
- マルチタブシステム（KeepAlive キャッシュ、右クリックメニュー、固定タブをサポート）
- 垂直 / 水平 2 つのレイアウトモード
- モバイルレスポンシブ対応
- Mock データシステム（faker.js ベース）
- グローバルキーボードクイック検索（
Ctrl+K） - リッチテキストエディタ（TipTap）
- ECharts チャート統合
技術スタック
| 技術 | バージョン | 説明 |
|---|---|---|
| Vue | 3.4 | プログレッシブ JavaScript フレームワーク |
| TypeScript | 5 | JavaScript スーパーセット、静的型付け |
| Vite | 5 | 次世代ビルドツール |
| Pinia | 2 | Vue 状態管理 |
| Vue Router | 4 | Vue 公式ルーター |
| vue-i18n | 11 | 国際化プラグイン |
| antdv-next | 1.x | Ant Design Vue コンポーネントライブラリ |
| Axios | 1.6 | HTTP リクエストライブラリ |
| ECharts | 5 | データビジュアライゼーションチャート |
| TipTap | 3 | リッチテキストエディタ |
ブラウザ互換性
すべてのモダンブラウザをサポート、IE は非サポート。
| ブラウザ | バージョン |
|---|---|
| Chrome | >= 87 |
| Firefox | >= 78 |
| Safari | >= 14 |
| Edge | >= 88 |
デモアカウント
| アカウント | パスワード | 説明 |
|---|---|---|
admin | 123456 | 管理者、全権限あり |
user | 123456 | 一般ユーザー、限定権限 |