Laravel 中复用 UI 模板分三路径：① @include 复用静态片段，需存为 resources/views/includes/xxx.blade.php 并显式传参；② Blade 组件封装动态逻辑，用 php artisan make:component 生成，支持属性约束与插槽；③ 布局继承统一规范，子页必须 @extends('layouts.app') 并包裹 @section('content')。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在 Laravel 项目中快速复用已验证的 UI 设计模板与标准化创作流程，避免每次从零写布局、重复定义卡片结构或手动拼接图表容器——这要求你明确区分“静态结构复用”和“动态逻辑封装”两种路径。
用 @include 复用轻量级设计片段
当你有一段纯 HTML+内联 JS 的图表卡片、状态徽章或统计数字块，且不依赖复杂 PHP 逻辑时，@include 是最快落地的方式。
第一步：把设计稿切好的 HTML 片段（比如一个带阴影、圆角、响应式 padding 的卡片）存为 resources/views/includes/card-stats.blade.php，内容不含任何 PHP 控制结构，只保留可变量占位符：{{ $title }}、{{ $value }}、{{ $icon ?? 'trending-up' }}。
第二步：在目标页面（如 dashboard.blade.php）中直接插入：@include('includes.card-stats', ['title' => '月度营收', 'value' => '$24,890'])。
注意：路径中不能含 .blade.php 后缀，也不能用斜杠开头；变量必须显式传入，否则会报错 Undefined variable。
用 Blade 组件封装带行为的设计单元
当设计模板需要响应用户交互、校验输入、切换状态或绑定 Livewire 属性时，必须升级为正式 Blade 组件——它自带 PHP 类层，支持构造函数参数类型约束、mount() 初始化、属性默认值和插槽组合。
方法一：命令行生成标准组件
运行 php artisan make:component StatCard，系统自动生成类文件 app/View/Components/StatCard.php 和视图 resources/views/components/stat-card.blade.php。
方法二：在组件类中声明可配置属性并设置默认值
编辑 StatCard.php，在构造函数里接收 $type、$showTrend、$precision = 0 等参数，并赋值给公共属性；render() 方法返回对应视图即可。
方法三：在视图中使用命名插槽组织内容区域
在 stat-card.blade.php 中用 {{ $title }} 渲染标题，用 {{ $slot }} 插入主数值，再用 <x-slot name="footer">实时更新于 {{ now()->diffForHumans() }}</x-slot> 注入页脚信息——这样调用时就能自由组合：<x-stat-card type="revenue" :show-trend="true"><span class="text-3xl font-bold">$18,420</span></x-stat-card>。
用布局继承统一全局视觉规范
所有页面共用的导航栏高度、字体栈、间距系统、暗色模式开关位置，必须收口到一个顶层布局中，否则设计一致性会在两周内瓦解。
① 在 resources/views/layouts/app.blade.php 中定义基础 HTML 结构，用 @yield('styles') 预留 CSS 注入点，用 @stack('scripts') 管理 JS 加载顺序。
② 所有子页面第一行必须是 @extends('layouts.app')，且所有内容必须包裹在 @section('content')...@endsection 内——漏掉 @extends 会导致原始 Blade 语法被浏览器原样输出，页面彻底白屏。
③ 若需覆盖某页面的全局字体，就在该页面顶部加 @push('styles')<style>body{font-family:'Inter',sans-serif;}</style>@endpush，而非直接写 style 标签。
