# 数学公式渲染系统 - 快速开始

## 已有文件（已创建）

如果您看到此文件，说明所有必需文件已创建完成。以下是快速使用指南：

## 已创建的文件清单

### 1. 核心组件
- ✅ `resources/views/components/math-render.blade.php` - Blade 组件
- ✅ `app/Filament/Fields/MathEditor.php` - Filament 字段
- ✅ `app/Livewire/Traits/WithMathRender.php` - Livewire Trait
- ✅ `public/js/math-render.js` - 全局渲染脚本

### 2. 样式资源
- ✅ `public/css/katex/katex.min.css` - KaTeX 样式
- ✅ `public/js/katex.min.js` - KaTeX 脚本

### 3. 示例和文档
- ✅ `resources/views/examples/math-render-example.blade.php` - 示例页面
- ✅ `app/Livewire/MathRenderTest.php` - 测试组件
- ✅ `resources/views/livewire/math-render-test.blade.php` - 测试视图
- ✅ `docs/math-render-system.md` - 完整文档

## 快速开始

### 步骤 1: 在布局中加载资源

在 `resources/views/layouts/app.blade.php` 或您的主布局文件中添加：

```blade
@push('scripts')
    <script src="/js/math-render.js"></script>
@endpush

@push('styles')
    <link rel="stylesheet" href="/css/katex/katex.min.css">
@endpush
```

### 步骤 2: 在页面中使用

```blade
<x-math-render content="已知函数 $f(x) = ax^2 + bx + c$，求......" />
```

### 步骤 3: 在 Livewire 组件中使用

```php
<?php
namespace App\Livewire;

use App\Livewire\Traits\WithMathRender;
use Livewire\Component;

class QuestionList extends Component
{
    use WithMathRender;

    public function render()
    {
        return view('livewire.question-list');
    }
}
```

```blade
<div class="math-render">
    {{ $this->getMathContent($question['content']) }}
</div>
```

### 步骤 4: 在 Filament 表单中使用

```php
use App\Filament\Fields\MathEditor;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // ...
            MathEditor::make('stem')
                ->label('题目内容')
                ->required(),
        ]);
}
```

## 支持的格式

### 行内公式
```latex
已知函数 $f(x) = ax^2 + bx + c$
```

### 块级公式
```latex
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
```

### 完整示例

```latex
已知二次函数 $f(x) = ax^2 + bx + c$，求：
1. $f(2)$ 的值
2. 顶点坐标：$\left(-\frac{b}{2a}, \frac{4ac-b^2}{4a}\right)$
3. 判别式：$\Delta = b^2 - 4ac$

如果 $\Delta > 0$，方程有两个不同的实数根：
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
```

## 测试

访问以下 URL 查看示例：
- `/math-render-example` - 查看渲染示例
- `/livewire/math-render-test` - 测试 Livewire 组件

## 故障排除

### 公式不显示

1. 检查控制台是否有错误
2. 确认资源文件已加载
3. 验证 LaTeX 语法

### Livewire 更新后不刷新

系统会自动处理，如有问题可手动触发：

```javascript
document.dispatchEvent(new Event('math:render'));
```

## 更多文档

- 完整文档：`docs/math-render-system.md`
- API 参考：查看文档中的相应章节
- 示例代码：查看 `examples/` 和 `livewire/` 目录

## 需要帮助？

1. 查看完整文档：`docs/math-render-system.md`
2. 检查浏览器控制台的错误信息
3. 参考示例代码