构建您的应用程序 ​

介绍 ​

安装 Jetstream 后，您可能想知道如何开始构建您的应用程序。值得庆幸的是，由于 Jetstream 处理所有初始身份验证和应用程序脚手架的配置，因此您可以立即开始！

安装 Jetstream 后，代码就归您所有。模板属于您的应用程序，可以根据需要进行修改。Jetstream 只是一个起点。您无需担心保持用户界面与未来的 Jetstream 版本“兼容”，因为每个 Jetstream 版本只是一个全新的入门套件迭代。换句话说，Jetstream 不是您将来会“更新”的软件包或管理仪表板。它是一个 Laravel 的入门套件脚手架，安装后，模板完全由您维护。

应用程序仪表板 ​

使用您的应用程序进行身份验证后，您将被重定向到 /dashboard 路由。此路由是您应用程序的主页/仪表板屏幕。当您使用 Livewire 堆栈时，此页面由 resources/views/dashboard.blade.php Blade 模板呈现。当使用 Inertia 堆栈时，屏幕使用 resources/js/Pages/Dashboard.vue 组件呈现。

如果您打开应用程序的仪表板模板/组件，您会看到它扩展了应用程序的主要“布局”组件。此布局定义了应用程序内部的整体外观和感觉。使用 Livewire 时，此布局由 `resources/views/layouts/app.blade.php` 模板定义，并通过 `App\View\Components\AppLayout` 组件类呈现。使用 Inertia 时，您的应用程序布局由 `resources/js/Layouts/AppLayout.vue` 组件定义。

熟悉仪表板和应用程序布局模板后，可以随意开始编辑它们。例如，您可能希望删除应用程序仪表板上呈现的“欢迎”组件。为此，您可以从仪表板模板中删除它。接下来，您可以自由编写构建应用程序所需的 HTML。请记住，Jetstream 使用强大的 Tailwind CSS 框架，因此请务必通过查阅 Tailwind 文档 来了解更多关于 Tailwind 的信息。

添加其他页面 ​

默认情况下，Jetstream 的顶部导航菜单包含指向应用程序仪表板的链接。当然，您可以随意编辑此导航菜单以添加指向应用程序中可用的其他页面的链接。使用 Livewire 时，导航菜单由 `resources/views/navigation-menu.blade.php` Blade 模板定义。使用 Inertia 时，导航菜单在 `resources/js/Layouts/AppLayout.vue` 组件中定义。

用户资料 ​

在构建 Jetstream 应用程序时，您可能需要在用户资料管理屏幕中添加自己的表单和面板。默认情况下，用户的资料屏幕包含面板，用于更新用户的联系信息、密码、管理其双重身份验证设置等等。但是，您可以随意在此页面中添加自己的其他面板。为此，您只需编辑定义页面的模板即可。

使用 Livewire 时，用户的资料管理屏幕由 `resources/views/profile/show.blade.php` Blade 模板定义。使用 Inertia 时，此屏幕由 `resources/js/Pages/Profile/Show.vue` 组件呈现。要向用户资料添加其他面板或表单，您只需根据应用程序的需要编辑这些模板即可。

团队管理 ​

您可能还需要在 Jetstream 呈现的团队管理屏幕中添加其他表单和面板。这些包括用于管理现有团队的“团队设置”屏幕以及在用户创建新团队时呈现的“创建团队”屏幕。

创建团队屏幕 ​

启用团队支持后，Jetstream 包含一个屏幕，允许用户创建新团队。您可以随意向此屏幕中包含的表单添加其他表单字段。您添加的任何其他表单字段都将通过 `$input` 参数传递到 Jetstream 的 `App\Actions\Jetstream\CreateTeam` 操作中。

使用 Livewire 时，团队创建屏幕由 `resources/views/teams/create.blade.php` Blade 模板定义。使用 Inertia 时，此屏幕由 `resources/js/Pages/Teams/Create.vue` 组件渲染。

团队设置屏幕 ​

启用团队支持后，Jetstream 会包含一个屏幕，允许用户管理其现有团队的设置，例如更改团队名称或邀请其他团队成员。您可以自由地向这些页面添加自己的其他面板。为此，您只需编辑定义页面的模板。

使用 Livewire 时，团队设置屏幕由 `resources/views/teams/show.blade.php` Blade 模板定义。使用 Inertia 时，此屏幕由 `resources/js/Pages/Teams/Show.vue` 组件渲染。

横幅提醒 ​

Jetstream 包含一个通知横幅，可以在应用程序 UI 的顶部显示。

如果您使用的是 Livewire 堆栈，您的应用程序将在 `resources/views/components/banner.blade.php` 中包含横幅组件。如果您使用的是 Inertia 堆栈，您的横幅组件将包含在 `resources/js/Components/Banner.vue` Vue 组件中。

要指示 Jetstream 显示横幅，您必须将 `flash.banner` 消息闪存到会话中。除了横幅消息之外，您还可以指示 Jetstream 以 `success` 样式或 `danger` 样式显示横幅。

$request->session()->flash('flash.banner', 'Yay it works!');
$request->session()->flash('flash.bannerStyle', 'success');

return redirect('/');

您也可以通过在重定向响应实例上调用 `banner`、`warningBanner` 或 `dangerBanner` 方法来指示 Jetstream 显示横幅。

return redirect()->route('subscriptions')->banner('Subscription created successfully.');
return redirect()->route('subscriptions')->warningBanner('Subscription pending approval.');
return redirect()->route('subscriptions')->dangerBanner('Subscription cancellation failed.');