开源项目地址:https://gitee.com/teanary/teanary_template
项目地址:https://teanary.com/zh_CN/index.html
这是一个独立的模板仓库，包含了 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 内存数据库
- 缓存：数组驱动
- 队列：同步驱动
编写新模板测试
如果添加了新模板，建议创建对应的测试：
<?phpnamespace 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 许可证
更多信息
- GNU AGPL-3.0 许可证全文
- GNU 官方网站
- 许可证常见问题
🤝 支持
如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件至: hello@teanary.com
- 访问项目主页: https://github.com/TeanaryService/teanary_srvice
📚 相关资源
- Laravel 文档
- Livewire 文档
- Tailwind CSS 文档
- Alpine.js 文档
注意: 这些模板文件是从 resources/views/ 目录复制而来，保持与主项目同步更新。
