vue-vben-crud

Vue Vben CRUD ジェネレーター

必須の実行手順（どのステップも省略できません）

1. 要件の収集（最初に必ず質問し、省略できません）

コードを生成する前に、ユーザーから以下の情報が提供されていない場合は、 1つずつ質問し、ステップ2に進む前に確認を待ってください。 文脈から推測して、そのまま生成してはいけません。

• モジュール名（英語、例：user、product）
• フィールドの一覧と型（名前、型、必須かどうか、バリデーションルール）
• 複数タブが必要かどうか
• 特別な機能要件（インポート／エクスポート、一括操作など）
• ユーザーが多言語対応を明示的に希望しない限り、i18n は使用しないことをデフォルトとします

2. 参照ドキュメントを読む（生成前に必ず読むこと）

デフォルトの CRUD テンプレート assets/crud-template.md を優先して読んでください。

コンポーネントを生成する前に、必ず該当するドキュメントを読んでください。記憶を頼りに生成してはいけません。

useVbenModal、useVbenDrawer、useVbenVxeGrid を使う前に、プロジェクトを検索して実際のインポートパスを確認してください。推測してはいけません。

コンポーネントの種類	最初に読むドキュメント	次に参照するテンプレート
フォーム	references/vben-form.md	assets/form-template.md
テーブル	references/vben-table.md	assets/table-usage-template.md
モーダル	references/vben-modal.md	assets/modal-template.md
ドロワー	references/vben-drawer.md	assets/drawer-template.md
ページ	なし	assets/page-template.md
カウントアニメーター	references/vben-count-animator.md	assets/count-to-template.md
省略テキスト	references/vben-ellipsis-text.md	assets/ellipsis-text-template.md
アラート	references/vben-alert.md	assets/alert-template.md

3. ファイル構成を生成する

以下のファイルをすべて生成してください。ユーザーからすでに情報が提供されている場合でも、1つも省略できません。

src/
├── api/
│   └── [module]/
│       ├── types.ts              # Type definitions, must generate
│       └── index.ts              # API interfaces, must generate
├── router/
│   └── routes/
│       └── modules/
│           └── [module].ts       # Route config, must generate
└── views/
    └── [module]/                 # e.g. push/
        ├── index.vue             # Main page, must generate
        └── modules/              # Sub-component directory
            ├── form.vue          # Form component, must generate
            └── data.ts           # Data config, must generate

重要：index.vue と data.ts は [module]/ のルートに配置します。form.vue、drawer.vue およびその他のコンポーネントは [module]/modules/ に配置します。さらに [module] のサブディレクトリをネストしないでください。

各ファイルの役割：

• types.ts：リクエスト／レスポンスの型とエンティティ型を定義します
• index.ts：CRUD API メソッド（作成、読み取り、更新、削除）をカプセル化します
• [module].ts：ルート設定。メニューとページのルートを定義します
• form.vue：useVbenModal または useVbenDrawer を使用するフォームコンポーネント
• data.ts：テーブル列の設定と検索フォームのスキーマ
• index.vue：useVbenVxeGrid を使用してテーブルを統合するメインページ

4. コード品質チェック（要約を出力する前に必ず完了し、省略できません）

4.1 自動スクリプトによるチェック（最初に実行）

bash .claude/skills/vue-vben-crud/scripts/check.sh <api-path> <views-path>
# Example: bash .claude/skills/vue-vben-crud/scripts/check.sh src/api/system/push src/views/system/push

スクリプトが exit 1 を出力した場合は、エラーを修正して再実行してください。 スクリプトが「🎉 All checks passed」と出力した後にのみ、4.2 に進んでください。

4.2 ドキュメントとの手動照合（スクリプトの成功後に実行）

スクリプトではコンポーネント API の使い方を検証できません。ドキュメントと手動で照合してください。

• references/vben-form.md を読み、form.vue のフォーム API の使い方を確認します
• references/vben-table.md を読み、data.ts のテーブル列の設定を確認します
• references/vben-modal.md または vben-drawer.md を読み、モーダル／ドロワーの使い方を確認します
• types.ts の型定義が form.vue、data.ts、index.ts での使用方法と一致していることを確認します
• API メソッドのパラメーターが types.ts で定義されたリクエスト型と一致していることを確認します

不整合が見つかった場合は修正してください。すべてのチェックに合格した後にのみ、最終的な要約を出力してください。

---

出力形式

生成が完了したら、次の正確な形式で要約を出力してください。

✅ [Module Name] CRUD Module Generation Complete

📁 Generated Files:
- src/api/[module]/types.ts
- src/api/[module]/index.ts
- src/router/routes/modules/[module].ts
- src/views/[module]/index.vue
- src/views/[module]/modules/form.vue
- src/views/[module]/data.ts

🎯 Next Steps:
1. Adjust API endpoint URLs to match actual backend paths
2. Add route configuration
3. Adjust field validation and display logic based on business requirements

---

基本原則

• すべてのコードは TypeScript の strict モードに準拠する必要があります
• Vben Admin のベストプラクティスとコードスタイルに従ってください
• フレームワークが提供するコンポーネントとユーティリティのみを使用し、独自の実装を作成しないでください
• コードは簡潔に保ち、過剰な設計を避けてください
• 実行時エラーを減らすため、型安全性を確保してください