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. 直接复制

   cp -r templates/* resources/views/
   

2. 使用 Git 子模块

   git submodule add <repository-url> templates
   

3. 使用 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') }}

📝 贡献指南

提交模板

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

开发流程建议

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

   php artisan test
   

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

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

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

   php artisan test
   

4. 上线前: 确保所有测试通过

   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 文件。

许可证要求

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

1. 保留版权声明：在所有文件中保留原始版权声明
2. 提供许可证副本：在项目中包含 LICENSE 文件
3. 公开修改：如果修改了代码并通过网络提供服务，必须公开源代码
4. 使用相同许可证：衍生作品必须使用 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/ 目录复制而来，保持与主项目同步更新。