math_cms/README-MATH-RENDER.md

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

已有文件（已创建）

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

已创建的文件清单

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 或您的主布局文件中添加：

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

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

步骤 2: 在页面中使用

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

步骤 3: 在 Livewire 组件中使用

<?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');
    }
}

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

步骤 4: 在 Filament 表单中使用

use App\Filament\Fields\MathEditor;

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

支持的格式

行内公式

已知函数 $f(x) = ax^2 + bx + c$

块级公式

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

完整示例

已知二次函数 $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 更新后不刷新

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

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

更多文档

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

需要帮助？

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