示例

{/* 配置选项 */} 配置选项自定义 HTML 格式化行为

{/* 缩进空格数 */}

缩进:

{[2, 4].map((spaces) => ( ))}

{/* 格式化模式 */}

模式:

{(['pretty', 'compact'] as const).map((mode) => ( ))}

{/* 输入输出区域 */}

{/* 收起/展开切换按钮 */} {/* 输入区域 */} {!isInputCollapsed && (

输入 HTML 粘贴或输入 HTML 数据

{input && ( )}

setInput(e.target.value)}
                    className="w-full h-96 p-4 font-mono text-sm bg-muted rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary"
                    placeholder="在此输入 HTML..."
                    spellCheck={false}
                  />
                  {/* 验证状态指示器 */}
                  {validation && (
                    <div className="absolute top-2 right-2">
                      {validation.isValid ? (
                        <Badge variant="default" className="gap-1 bg-green-500 hover:bg-green-600">
                          <CheckCircle2 className="w-3 h-3" />
                          有效
                        </Badge>
                      ) : (
                        <Badge variant="destructive" className="gap-1">
                          <XCircle className="w-3 h-3" />
                          无效
                        </Badge>
                      )}
                    </div>
                  )}
                </div>

{/* 错误信息 */}
                {validation && !validation.isValid && validation.errorMessage && (
                  <div className="mt-3 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
                    <p className="text-sm text-destructive font-medium">
                      {validation.errorMessage}
                    </p>
                    {validation.errorLine && (
                      <p className="text-xs text-destructive/80 mt-1">
                        位置: 行 {validation.errorLine}
                      </p>
                    )}
                  </div>
                )}

{/* 操作按钮 */}
                <div className="flex gap-2 mt-4">
                  <Button
                    onClick={formatHtml}
                    disabled={!input.trim() || isProcessing}
                    className="flex-1 gap-2"
                  >
                    {isProcessing ? (
                      <>
                        <Sparkles className="w-4 h-4 animate-spin" />
                        处理中...
                      </>
                    ) : (
                      <>
                        <Sparkles className="w-4 h-4" />
                        格式化
                      </>
                    )}
                  </Button>
                  <Button
                    onClick={compactHtml}
                    variant="outline"
                    disabled={!input.trim() || isProcessing}
                  >
                    <Minimize2 className="w-4 h-4 mr-1" />
                    压缩
                  </Button>
                </div>
              </CardContent>
            </Card>
            )}

{/* 输出区域 */}
            <Card className={isInputCollapsed ? 'lg:col-span-2' : ''}>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-lg">格式化结果</CardTitle>
                    <CardDescription>格式化后的 HTML</CardDescription>
                  </div>
                  {output && (
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={copyToClipboard}
                      className="gap-2"
                    >
                      {copied ? (
                        <>
                          <Check className="w-4 h-4" />
                          已复制
                        </>
                      ) : (
                        <>
                          <Copy className="w-4 h-4" />
                          复制
                        </>
                      )}
                    </Button>
                  )}
                </div>
              </CardHeader>
              <CardContent>
                <CodeHighlighter
                  code={output}
                  language="html"
                  className="w-full"
                  maxHeight="24rem"
                  showLineNumbers={true}
                  wrapLongLines={false}
                />

{/* 统计信息 */}
                {output && (
                  <div className="flex gap-4 mt-4 text-sm text-muted-foreground">
                    <span>字符数: {output.length}</span>
                    <span>行数: {output.split('\n').length}</span>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

{/* 使用说明 */}
          <Card>
            <CardHeader>
              <CardTitle>使用说明</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2 text-sm text-muted-foreground">
              <p>1. 在左侧输入框中粘贴或输入 HTML 数据</p>
              <p>2. 工具会自动验证 HTML 有效性，右上角显示验证状态</p>
              <p>3. 选择配置选项：缩进空格数、格式化模式</p>
              <p>4. 点击"格式化"按钮美化 HTML，或"压缩"按钮去除空格</p>
              <p>5. 点击"复制"按钮将结果复制到剪贴板</p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}

欢迎

HTML 格式化工具