菜单
Create the Index.tsx page component for a Goravel entity. Uses CrudPage wrapper with i18n useTranslation hook, responsive columns, and section imports.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create a broadcast notification system that sends notifications and messages to eligible users based on entity-specific criteria. Use when adding a new entity type that needs to notify users when records are created, updated, or published.
Guide for building non-CRUD pages with consistent design. Use when creating portal pages, custom views, detail modals, sidebar widgets, notification drawers, or any page that is not a standard CRUD table. Covers fullscreen modals, minimal text patterns, calendar widgets, doorbell notifications, optimistic updates, and CrudPage read-only integration.
Guide for building dashboards, charts, KPI cards, and data visualizations. Use when creating dashboard pages, adding charts to features, building stat displays, aggregating data for visual presentation, or implementing export (CSV/PNG/fullscreen) for charts. Based on the Books dashboard implementation using Recharts and shadcn/ui chart components.
Deploy the application to staging or production. Validates, builds, pushes Docker image, deploys via Helm, and runs smoke tests.
Run a comprehensive E2E browser test suite for a newly scaffolded Goravel entity. Tests navigation, CRUD operations, search, filters, row actions, form validation, FK dropdowns, and cross-entity integration using Playwright MCP.
Create a Go database seeder for a Goravel entity with 25+ realistic records. Covers all status/enum values, diverse data for sorting/pagination testing, and proper nullable field handling.
| name | inertia-page |
| description | Create the Index.tsx page component for a Goravel entity. Uses CrudPage wrapper with i18n useTranslation hook, responsive columns, and section imports. |
| argument-hint | [EntityName] |
| allowed-tools | Bash, Read, Write, Edit, Grep, Glob |
Create Index page for $ARGUMENTS.
resources/js/pages/<EntityName>/Index.tsx
Note: Use make:ui to generate the initial structure, then customize:
go run . artisan make:ui --page=$ARGUMENTS --request=$ARGUMENTS
import React from 'react';
// @ts-ignore
import { Head, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { Entity, EntityListResponse, EntityListRequest, EntityStats } from '@/types/entity';
import { CrudPage } from '@/components/Crud/CrudPage';
import {
EntityCreateForm,
EntityEditForm,
EntityDetailView,
getEntityColumns,
getEntityColumnsMobile,
getEntityFilters,
getEntityStatsConfigs,
getEntitySimpleFilters,
getEntityPageActions,
getEntityBulkActions,
} from './sections';
import {
renderStatsCards,
createPageActions,
createSimpleFilters,
} from '@/lib/crud-page-utils';
import { useIsMobile } from '@/hooks/use-mobile';
import Admin from '@/layouts/Admin';
interface EntityIndexProps {
data: EntityListResponse;
filters: EntityListRequest;
stats?: EntityStats;
permissions: {
canCreate: boolean;
canEdit: boolean;
canDelete: boolean;
};
meta?: {
pagination: {
defaultPageSize: number;
maxPageSize: number;
allowedSizes: number[];
};
};
}
export default function EntityIndex({
data,
filters,
stats,
permissions,
meta,
}: EntityIndexProps) {
const isMobile = useIsMobile();
const { t } = useTranslation('entities'); // <-- entity namespace
const handleRefresh = () => {
router.reload({ only: ['data', 'stats'] });
};
// Use i18n-aware configurations — pass t to all config functions
const simpleFilters = createSimpleFilters(getEntitySimpleFilters(t, stats));
const pageActions = createPageActions(
getEntityPageActions(t, permissions, {
onExport: () => {/* TODO */},
})
);
return (
<Admin title={t('page.title')}>
<Head title={t('page.headTitle')} />
<div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
{/* Statistics Cards */}
{renderStatsCards(stats, getEntityStatsConfigs(t))}
{/* Main CRUD Component */}
<div className="px-0">
<CrudPage<Entity>
data={data}
filters={filters}
title={t('page.myEntities')}
resourceName="entities"
columns={isMobile ? getEntityColumnsMobile(t) : getEntityColumns(t)}
customFilters={getEntityFilters(t)}
simpleFilters={simpleFilters}
pageActions={pageActions}
paginationConfig={meta?.pagination}
createForm={EntityCreateForm}
editForm={EntityEditForm}
detailView={EntityDetailView}
onRefresh={handleRefresh}
canCreate={permissions.canCreate}
canEdit={permissions.canEdit}
canDelete={permissions.canDelete}
canView={true}
/>
</div>
</div>
</Admin>
);
}
const { t } = useTranslation('entities'); // Use the entity's own namespace
<Admin title={t('page.title')}>
<Head title={t('page.headTitle')} />
t to Config FunctionsAll section config functions receive t: TFunction as first parameter:
getEntityColumns(t) // Columns get translated headers
getEntityFilters(t) // Filters get translated labels
getEntitySimpleFilters(t, stats) // Simple filters get translated labels
getEntityPageActions(t, permissions, handlers) // Actions get translated labels
getEntityStatsConfigs(t) // Stats get translated titles
title={t('page.myEntities')} // Translated resource title
The GenericPageController.Index() passes:
data - Paginated entity listfilters - Current page/sort/search statepermissions - canCreate, canEdit, canDeletestats - Optional statistics (if StatsEnabled=true)meta - Pagination configAfter wiring up the Index page:
# TypeScript compiles (catches missing imports, wrong prop types)
npx tsc --noEmit
# Lint the page
npx eslint "resources/js/pages/<EntityName>/Index.tsx" --max-warnings=0
See resources/js/pages/Books/Index.tsx for a complete i18n-aware example.