Teanary多语言商城前端模板开发文档
27 / 0 / 创建于 3周前
teanary 的个人博客
Teanary 前端模板仓库
我不想在核心代码中维护一个只会被使用一次的复杂模板机制，为了方便开发者快速开发、定制或贡献自己的模板，为前端单独抽出一个仓库和文档！
这是一个独立的模板仓库，包含了 Teanary 电商系统的所有前端视图模板文件。这个仓库的目的是方便开发者快速开发、定制或贡献自己的模板。
📁 目录结构
templates/
├── auth/ # 认证相关模板
│ └── verify-email.blade.php
├── components/ # 组件模板
│ ├── layouts/ # 布局组件
│ │ ├── app.blade.php
│ │ ├── manager.blade.php
│ │ └── seo.blade.php
│ ├── manager/ # 管理后台组件
│ ├── payment/ # 支付相关组件
│ ├── users/ # 用户相关组件
│ ├── widgets/ # 小部件组件
│ └── ...
├── errors/ # 错误页面模板
│ ├── 404.blade.php
│ ├── 500.blade.php
│ └── ...
├── livewire/ # Livewire 组件模板
│ ├── components/ # Livewire 子组件
│ ├── manager/ # 管理后台页面
│ ├── payment/ # 支付页面
│ ├── users/ # 用户中心页面
│ └── ...
├── LICENSE # AGPL-3.0 许可证文件
├── README.md # 本文件
└── test-templates.sh # 模板测试脚本
🎯 用途
1. 快速开发
开发者可以直接使用这些模板作为起点
所有模板都遵循 Laravel Blade 语法规范
使用 Tailwind CSS 进行样式设计
2. 定制开发
可以根据业务需求修改模板
支持多语言和国际化
响应式设计，适配各种设备
3. 贡献模板
开发者可以贡献自己的模板设计
通过 Pull Request 提交改进
分享最佳实践和设计模式
🚀 使用方法
安装到项目
- 直接复制
cp -r templates/* resources/views/
- 使用 Git 子模块
git submodule add <repository-url> templates
- 使用 Composer
如果配置了 Composer 仓库，可以通过 Composer 安装
模板结构说明
布局模板 (components/layouts/)
app.blade.php- 前端主布局manager.blade.php- 管理后台布局seo.blade.php- SEO 元数据组件
Livewire 组件模板 (livewire/)
所有 Livewire 组件的视图文件
遵循 Livewire 命名规范
支持组件间的数据传递
组件模板 (components/)
widgets/- 可复用的小部件manager/- 管理后台专用组件users/- 用户中心专用组件
🎨 设计规范
样式框架
CSS 框架: Tailwind CSS 4.x
JavaScript: Alpine.js
响应式: 移动优先设计
命名规范
文件名使用 kebab-case（如：
product-detail.blade.php）组件类名使用 PascalCase（如：
ProductDetail）变量名使用 camelCase
多语言支持
所有文本内容使用 Laravel 的 __() 函数进行国际化：
{{ __('index.title') }}
📝 贡献指南
提交模板
Fork 本仓库
创建功能分支 (
git checkout -b feature/amazing-template)提交更改 (
git commit -m 'Add amazing template')推送到分支 (
git push origin feature/amazing-template)创建 Pull Request
代码规范
遵循 PSR-12 编码规范
使用有意义的变量名
添加必要的注释
确保响应式设计
测试
在不同浏览器中测试
检查移动端适配
验证多语言显示
运行单元测试验证模板正确性（见下方测试部分）
🧪 测试
运行模板测试
项目已包含完整的模板测试套件，可以在开发中或上线前运行测试来验证模板是否正确。
运行所有测试
# 运行所有测试（包括模板测试）
php artisan test
# 或使用 PHPUnit
./vendor/bin/phpunit
运行特定测试套件
# 运行功能测试（包含所有模板测试）
php artisan test --testsuite=Feature
# 运行单元测试
php artisan test --testsuite=Unit
运行特定模板测试
# 测试首页模板
php artisan test tests/Feature/Livewire/IndexPageTest.php
# 测试产品相关模板
php artisan test tests/Feature/Livewire/ProductTest.php
php artisan test tests/Feature/Livewire/ProductDetailTest.php
# 测试购物车模板
php artisan test tests/Feature/Livewire/CartTest.php
# 测试管理后台模板
php artisan test tests/Feature/Livewire/Manager/
# 测试用户中心模板
php artisan test tests/Feature/Livewire/Users/
使用测试脚本（推荐）
为了方便运行测试，项目提供了一个交互式测试脚本：
# 运行测试脚本
./templates/test-templates.sh
脚本提供以下选项：
运行所有模板测试
运行前端页面模板测试
运行管理后台模板测试
运行用户中心模板测试
运行组件模板测试
运行特定测试文件
运行所有测试（包括非模板测试）
测试覆盖范围
测试套件覆盖了以下模板：
✅ 前端页面模板
首页 (
IndexPageTest)产品列表 (
ProductTest)产品详情 (
ProductDetailTest)购物车 (
CartTest)结算页面 (
CheckoutTest)文章列表 (
ArticleListTest)文章详情 (
ArticleDetailTest)搜索页面 (
SearchTest)✅ 管理后台模板
仪表盘 (
Manager/DashboardTest)产品管理 (
Manager/ProductsTest)订单管理 (
Manager/OrdersTest)分类管理 (
Manager/CategoriesTest)用户管理 (
Manager/UsersTest)以及其他所有管理后台页面
✅ 用户中心模板
订单列表 (
Users/OrdersTest)个人资料 (
Users/ProfileTest)地址管理 (
Users/AddressesTest)登录/注册 (
Users/LoginTest,Users/RegisterTest)✅ 组件模板
购物车下拉菜单 (
Components/CartDropdownTest)产品评论 (
Components/ProductReviewsTest)推荐产品 (
Components/RecommendProductsTest)以及其他所有组件
测试验证内容
每个模板测试会验证：
✅ 模板能否正确渲染（
assertSuccessful()）✅ 数据是否正确显示（
assertSee()）✅ 组件交互是否正常
✅ 权限控制是否正确
✅ 表单验证是否有效
开发流程建议
- 开发前: 运行测试确保基础环境正常
php artisan test
- 开发中: 修改模板后运行相关测试
php artisan test tests/Feature/Livewire/ProductTest.php
- 提交前: 运行完整测试套件
php artisan test
- 上线前: 确保所有测试通过
php artisan test --stop-on-failure
测试配置
测试使用 SQLite 内存数据库，配置在 phpunit.xml 中：
环境：
APP_ENV=testing数据库：SQLite 内存数据库
缓存：数组驱动
队列：同步驱动
编写新模板测试
如果添加了新模板，建议创建对应的测试：
<?php
namespace Tests\Feature\Livewire;
use Tests\Feature\LivewireTestCase;
class YourTemplateTest extends LivewireTestCase
{
public function test_your_template_can_be_rendered()
{
$component = $this->livewire(\App\Livewire\YourComponent::class);
$component->assertSuccessful();
}
public function test_your_template_displays_data()
{
// 创建测试数据
$data = $this->createYourData();
$component = $this->livewire(\App\Livewire\YourComponent::class);
$component->assertSuccessful();
$component->assertSee($data->name);
}
}
🔧 技术栈
Laravel: 12.x
Livewire: 4.x
Tailwind CSS: 4.x
Alpine.js: 3.x
Blade: Laravel 模板引擎
PHPUnit: 测试框架
📄 许可证
本模板仓库采用 GNU Affero General Public License v3.0 (AGPL-3.0) 许可证。
许可证说明
本项目采用 AGPL-3.0 许可证，这意味着：
✅ 可以自由使用、修改和分发
✅ 可以用于商业项目
⚠️ 必须保留版权声明和许可证
⚠️ 修改后的代码也必须使用 AGPL-3.0 许可证
⚠️ 如果通过网络提供服务，必须公开源代码
完整许可证文本
完整的许可证文本请查看 LICENSE 文件。
许可证要求
使用本模板仓库时，您需要：
保留版权声明：在所有文件中保留原始版权声明
提供许可证副本：在项目中包含 LICENSE 文件
公开修改：如果修改了代码并通过网络提供服务，必须公开源代码
使用相同许可证：衍生作品必须使用 AGPL-3.0 许可证
更多信息
🤝 支持
如有问题或建议，请通过以下方式联系：
提交 Issue
发送邮件至: hello@teanary.com
📚 相关资源
注意: 这些模板文件是从 resources/views/ 目录复制而来，保持与主项目同步更新。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号