[Teanary 前端模板]我不想在核心代码中维护一个只会被使用一次的复杂模板机制，为了方便开发者快速开发、定制或贡献自己的模板，为前端单独抽出一个仓库和文档！

Teanary 前端模板仓库

项目地址:https://gitee.com/teanary/teanary_template
这是一个独立的模板仓库，包含了 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 提交改进
• 分享最佳实践和设计模式

🚀 使用方法

安装到项目

1. 使用 Composer
   如果配置了 Composer 仓库，可以通过 Composer 安装

使用 Git 子模块

git submodule add<repository-url> templates 

直接复制

cp -r templates/* resources/views/ 

模板结构说明

布局模板 (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') }} 

📝 贡献指南

提交模板

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/amazing-template)
3. 提交更改 (git commit -m 'Add amazing template')
4. 推送到分支 (git push origin feature/amazing-template)
5. 创建 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 --stop-on-failure 

提交前: 运行完整测试套件

php artisan test

开发中: 修改模板后运行相关测试

php artisan test tests/Feature/Livewire/ProductTest.php 

开发前: 运行测试确保基础环境正常

php artisan test

测试配置

测试使用 SQLite 内存数据库，配置在 phpunit.xml 中：

• 环境：APP_ENV=testing
• 数据库：SQLite 内存数据库
• 缓存：数组驱动
• 队列：同步驱动

编写新模板测试

如果添加了新模板，建议创建对应的测试：

<?phpnamespaceTests\Feature\Livewire;useTests\Feature\LivewireTestCase;classYourTemplateTestextendsLivewireTestCase{publicfunctiontest_your_template_can_be_rendered(){$component=$this->livewire(\App\Livewire\YourComponent::class);$component->assertSuccessful();}publicfunctiontest_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 文件。

许可证要求

使用本模板仓库时，您需要：

1. 保留版权声明：在所有文件中保留原始版权声明
2. 提供许可证副本：在项目中包含 LICENSE 文件
3. 公开修改：如果修改了代码并通过网络提供服务，必须公开源代码
4. 使用相同许可证：衍生作品必须使用 AGPL-3.0 许可证

更多信息

• GNU AGPL-3.0 许可证全文
• GNU 官方网站
• 许可证常见问题

🤝 支持

如有问题或建议，请通过以下方式联系：

• 提交 Issue
• 发送邮件至: [email protected]
• 访问项目主页: https://github.com/TeanaryService/teanary_srvice

📚 相关资源

• Laravel 文档
• Livewire 文档
• Tailwind CSS 文档
• Alpine.js 文档

注意: 这些模板文件是从 resources/views/ 目录复制而来，保持与主项目同步更新。