CodeView.tsx

基本信息

• 类型: React 组件 (自定义)
• 路径: ./src/components/ui/code-view.tsx

功能描述

代码展示组件，支持代码视图和树形视图切换。内置 JSON/YAML 语法高亮，支持行号显示、最大行数限制、展开/折叠全部等功能。

导出内容

• CodeView - 代码展示组件
• SideBySideDiff - 并排对比视图（从 diff-view 导入）

Props 接口

CodeView

属性	类型	必填	默认值	说明
content	string	是	-	代码内容
language	`'json' \	'yaml'`	否	'json'	代码语言
className	string	否	-	自定义CSS类名
maxLines	number	否	-	最大显示行数
fontSize	`'xs' \	'sm' \	'base'`	否	'xs'	字体大小
wordWrap	boolean	否	false	是否自动换行
preview	boolean	否	false	预览模式（无滚动）

依赖

• next-intl - 国际化
• @/lib/utils - 工具函数 (cn)
• @/components/ui/button - 按钮组件
• lucide-react - 图标库
• ./json-tree-view - JSON 树形视图

使用示例

import { CodeView } from "@/components/ui/code-view";

// 基础用法
<CodeView content={jsonString} language="json" />

// YAML 格式
<CodeView content={yamlString} language="yaml" />

// 限制显示行数
<CodeView 
  content={longJson} 
  language="json" 
  maxLines={20} 
/>

// 自动换行
<CodeView 
  content={jsonString} 
  language="json" 
  wordWrap 
  fontSize="sm"
/>

// 预览模式
<CodeView 
  content={jsonString} 
  language="json" 
  preview 
  className="my-4"
/>