# Teanary Template前端默认模板

**Repository Path**: teanary/teanary_template

## Basic Information

- **Project Name**: Teanary Template前端默认模板
- **Description**: 这是一个独立的模板仓库，包含了 Teanary 电商系统的所有前端视图模板文件。这个仓库的目的是方便开发者快速开发、定制或贡献自己的模板。
- **Primary Language**: PHP
- **License**: AGPL-3.0
- **Default Branch**: main
- **Homepage**: https://teanary.com/zh_CN/index.html
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-24
- **Last Updated**: 2026-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## 🚀 使用方法

### 安装到项目

1. **直接复制**
   ```bash
   cp -r templates/* resources/views/
   ```

2. **使用 Git 子模块**
   ```bash
   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 的 `__()` 函数进行国际化：
```blade
{{ __('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 编码规范
- 使用有意义的变量名
- 添加必要的注释
- 确保响应式设计

### 测试
- 在不同浏览器中测试
- 检查移动端适配
- 验证多语言显示
- **运行单元测试验证模板正确性**（见下方测试部分）

## 🧪 测试

### 运行模板测试

项目已包含完整的模板测试套件，可以在开发中或上线前运行测试来验证模板是否正确。

#### 运行所有测试

```bash
# 运行所有测试（包括模板测试）
php artisan test

# 或使用 PHPUnit
./vendor/bin/phpunit
```

#### 运行特定测试套件

```bash
# 运行功能测试（包含所有模板测试）
php artisan test --testsuite=Feature

# 运行单元测试
php artisan test --testsuite=Unit
```

#### 运行特定模板测试

```bash
# 测试首页模板
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/
```

#### 使用测试脚本（推荐）

为了方便运行测试，项目提供了一个交互式测试脚本：

```bash
# 运行测试脚本
./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. **开发前**: 运行测试确保基础环境正常
   ```bash
   php artisan test
   ```

2. **开发中**: 修改模板后运行相关测试
   ```bash
   php artisan test tests/Feature/Livewire/ProductTest.php
   ```

3. **提交前**: 运行完整测试套件
   ```bash
   php artisan test
   ```

4. **上线前**: 确保所有测试通过
   ```bash
   php artisan test --stop-on-failure
   ```

#### 测试配置

测试使用 SQLite 内存数据库，配置在 `phpunit.xml` 中：
- 环境：`APP_ENV=testing`
- 数据库：SQLite 内存数据库
- 缓存：数组驱动
- 队列：同步驱动

#### 编写新模板测试

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

```php
<?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) 文件。

### 许可证要求

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

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

### 更多信息

- [GNU AGPL-3.0 许可证全文](LICENSE)
- [GNU 官方网站](https://www.gnu.org/licenses/agpl-3.0.html)
- [许可证常见问题](https://www.gnu.org/licenses/gpl-faq.html)

## 🤝 支持

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件至: hello@teanary.com
- 访问项目主页: https://github.com/TeanaryService/teanary_srvice

## 📚 相关资源

- [Laravel 文档](https://laravel.com/docs)
- [Livewire 文档](https://livewire.laravel.com/docs)
- [Tailwind CSS 文档](https://tailwindcss.com/docs)
- [Alpine.js 文档](https://alpinejs.dev/)

---

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