# Kylin Modules 视图管理

## 1. 视图管理概述

Kylin Modules 支持模块的视图管理，每个模块可以有自己的视图文件，用于渲染 HTML 页面。

## 2. 视图创建

### 2.1 基本视图

在模块的 `Views` 目录中创建视图文件：

**index.blade.php**：博客列表视图

```blade
@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>博客列表</h1>
        <a href="{{ route('blog.create') }}" class="btn btn-primary">创建博客</a>
        <table class="table mt-3">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>作者</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @foreach($posts as $post)
                    <tr>
                        <td>{{ $post->id }}</td>
                        <td>{{ $post->title }}</td>
                        <td>{{ $post->user->name }}</td>
                        <td>{{ $post->status }}</td>
                        <td>
                            <a href="{{ route('blog.show', $post->id) }}" class="btn btn-sm btn-info">查看</a>
                            <a href="{{ route('blog.edit', $post->id) }}" class="btn btn-sm btn-primary">编辑</a>
                            <form action="{{ route('blog.destroy', $post->id) }}" method="POST" style="display: inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">删除</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {{ $posts->links() }}
    </div>
@endsection
```

**create.blade.php**：创建博客视图

```blade
@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>创建博客</h1>
        <form action="{{ route('blog.store') }}" method="POST">
            @csrf
            <div class="form-group">
                <label for="title">标题</label>
                <input type="text" class="form-control" id="title" name="title" required>
            </div>
            <div class="form-group">
                <label for="content">内容</label>
                <textarea class="form-control" id="content" name="content" rows="5" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
@endsection
```

**edit.blade.php**：编辑博客视图

```blade
@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>编辑博客</h1>
        <form action="{{ route('blog.update', $post->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="form-group">
                <label for="title">标题</label>
                <input type="text" class="form-control" id="title" name="title" value="{{ $post->title }}" required>
            </div>
            <div class="form-group">
                <label for="content">内容</label>
                <textarea class="form-control" id="content" name="content" rows="5" required>{{ $post->content }}</textarea>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
@endsection
```

**show.blade.php**：博客详情视图

```blade
@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>{{ $post->title }}</h1>
        <p class="text-muted">作者：{{ $post->user->name }} | 发布时间：{{ $post->created_at }}</p>
        <div class="mt-3">
            {{ $post->content }}
        </div>
        <div class="mt-5">
            <h3>评论</h3>
            <form action="{{ route('comment.store') }}" method="POST">
                @csrf
                <input type="hidden" name="post_id" value="{{ $post->id }}">
                <div class="form-group">
                    <label for="content">评论内容</label>
                    <textarea class="form-control" id="content" name="content" rows="3" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">提交评论</button>
            </form>
            <div class="mt-3">
                @foreach($post->comments as $comment)
                    <div class="card mb-2">
                        <div class="card-body">
                            <p class="card-text">{{ $comment->content }}</p>
                            <p class="text-muted">评论者：{{ $comment->user->name }} | 评论时间：{{ $comment->created_at }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection
```

## 3. 视图加载配置

### 3.1 视图配置

在 `config/modules.php` 文件中配置视图加载：

```php
'views' => [
    'enabled' => true,
    'path' => 'Views',
    'namespace' => '',
],
```

### 3.2 服务提供者中的视图加载

在模块的服务提供者中加载视图：

```php
public function boot()
{
    // 加载模块视图
    $this->loadViewsFrom(__DIR__.'/../Views', 'blog');
}
```

## 4. 视图引用

### 4.1 基本引用

使用模块视图的命名空间引用视图：

```php
return view('blog::index', compact('posts'));
```

### 4.2 视图继承

模块视图可以继承应用的布局视图：

```blade
@extends('layouts.app')

@section('content')
    <!-- 内容 -->
@endsection
```

### 4.3 视图包含

在模块视图中包含其他视图：

```blade
@include('blog::partials.header')

<!-- 内容 -->

@include('blog::partials.footer')
```

## 5. 视图组件

### 5.1 基本组件

在模块的 `Views/components` 目录中创建组件：

**button.blade.php**：按钮组件

```blade
<button type="{{ $type ?? 'button' }}" class="btn btn-{{ $variant ?? 'primary' }}">
    {{ $slot }}
</button>
```

### 5.2 组件使用

在模块视图中使用组件：

```blade
<x-blog::button type="submit" variant="success">
    提交
</x-blog::button>
```

## 6. 视图共享数据

### 6.1 全局共享

在模块的服务提供者中共享全局数据：

```php
public function boot()
{
    // 共享全局数据
    view()->share('siteName', 'My Blog');
}
```

### 6.2 局部共享

在控制器中共享局部数据：

```php
public function index()
{
    $posts = Post::all();
    
    return view('blog::index', compact('posts'))->with('title', '博客列表');
}
```

## 7. 视图缓存

### 7.1 生成视图缓存

为了提高性能，可以生成视图缓存：

```bash
php artisan view:cache
```

### 7.2 清除视图缓存

当视图发生变化时，需要清除视图缓存：

```bash
php artisan view:clear
```

## 8. 常见问题

### 8.1 视图未找到

**问题**：模块视图未找到
**解决方案**：
1. 检查视图文件是否存在
2. 检查视图路径是否正确
3. 检查视图命名空间是否正确
4. 检查服务提供者中的视图加载是否正确

### 8.2 视图继承错误

**问题**：模块视图继承错误
**解决方案**：
1. 检查父视图是否存在
2. 检查继承语法是否正确
3. 检查@section 和 @endsection 是否匹配

### 8.3 视图变量未定义

**问题**：模块视图变量未定义
**解决方案**：
1. 检查控制器中是否传递了变量
2. 检查变量名称是否正确
3. 使用 isset() 或 empty() 检查变量是否存在

### 8.4 组件未找到

**问题**：模块组件未找到
**解决方案**：
1. 检查组件文件是否存在
2. 检查组件路径是否正确
3. 检查组件命名是否正确

## 9. 最佳实践

1. **视图组织**：为每个模块创建独立的视图目录
2. **命名规范**：使用清晰、描述性的视图文件名称
3. **视图继承**：使用布局视图，减少代码重复
4. **组件使用**：使用视图组件，提高代码的可复用性
5. **数据传递**：合理传递视图数据，避免过度传递
6. **视图缓存**：在生产环境中使用视图缓存，提高性能
7. **响应式设计**：使用响应式设计，适应不同设备

## 10. 总结

Kylin Modules 提供了灵活的视图管理功能，支持模块的视图创建和自动加载。通过合理的视图设计，可以实现页面的高效渲染和代码的可维护性，提高用户体验和开发效率。
