[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 提交改进
• 分享最佳实践和设计模式

🚀 使用方法

安装到项目

模板结构说明

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

📝 贡献指南

提交模板

代码规范

• 遵循 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()）
• ✅ 组件交互是否正常
• ✅ 权限控制是否正确
• ✅ 表单验证是否有效

开发流程建议

测试配置

测试使用 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 文件。

许可证要求

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

更多信息

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

🤝 支持

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

• 提交 Issue
• 发送邮件至: hello@teanary.com
• 访问项目主页: https://github.com/TeanaryService/teanary_srvice

📚 相关资源

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

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