light-code/web/src/apps/muse/base/docs

文档组件 (DocsComponent)

一个现代化的左侧导航右侧内容的文档显示组件，支持多种内容类型和优雅的样式设计。

特性

• 🎨 现代化设计: 清新的UI设计，优雅的色彩搭配
• 📱 响应式布局: 支持桌面和移动端适配
• 📝 Markdown支持: 使用 marked 库，支持 GitHub Flavored Markdown
• 🔄 多内容类型: 支持Markdown、代码、JSON、图片等多种类型
• ⚡ 流畅交互: 带加载状态和平滑过渡动画
• 🏷️ 标签系统: 支持文档标签和分类
• 🔍 清晰导航: 左侧树形导航，快速定位文档
• ✨ 丰富语法: 支持表格、任务列表、代码高亮等 GFM 特性

使用方法

基础用法

import React from 'react';
import { DocsComponent } from './docs';
import { mockMarks } from './mock/collection';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <DocsComponent dataSource={mockMarks} />
    </div>
  );
}

自定义数据

import { DocsComponent, Mark } from './docs';

const customDocs: Mark[] = [
  {
    id: '1',
    title: '快速开始',
    description: '了解如何快速开始使用我们的产品',
    tags: ['入门', '指南'],
    markType: 'markdown',
    data: {
      content: `# 快速开始

这里是文档内容...`
    },
    createdAt: new Date(),
    updatedAt: new Date()
  }
];

function App() {
  return <DocsComponent dataSource={customDocs} />;
}

数据结构

组件接受一个 Mark[] 类型的数据源，每个Mark对象包含：

type Mark = {
  id: string;                    // 唯一标识
  title?: string;                // 文档标题
  description?: string;          // 文档描述
  tags?: string[];              // 标签数组
  markType?: string;            // 内容类型
  data: any;                    // 内容数据
  createdAt: Date;              // 创建时间
  updatedAt: Date;              // 更新时间
  // ... 其他字段
}

支持的内容类型

Markdown

{
  markType: 'markdown',
  data: {
    content: '# 标题\n\n这是Markdown内容...'
  }
}

代码

{
  markType: 'code',
  data: {
    code: 'const hello = "world";',
    language: 'javascript'
  }
}

JSON数据

{
  markType: 'json',
  data: {
    // 任何JSON数据
  }
}

图片

{
  markType: 'image',
  data: {
    src: 'https://example.com/image.jpg',
    alt: '图片描述'
  }
}

样式定制

组件使用CSS类名，你可以通过覆盖这些类名来定制样式：

/* 主容器 */
.docs-container { }

/* 导航区域 */
.docs-nav { }
.docs-nav-item { }
.docs-nav-link { }

/* 内容区域 */
.docs-content { }
.docs-content-header { }
.docs-content-body { }

/* Markdown内容 */
.docs-markdown { }

组件API

Props

属性	类型	默认值	描述
dataSource	Mark[]	[]	文档数据源

导出组件

• DocsComponent: 主要的文档组件
• App: DocsComponent的别名，保持向后兼容

示例

查看 example.tsx 文件获取完整的使用示例。

开发

# 安装依赖
npm install marked
# 或
pnpm install marked

组件使用 marked 库进行 Markdown 渲染，支持：

• ✅ GitHub Flavored Markdown (GFM)
• ✅ 表格语法
• ✅ 任务列表
• ✅ 代码块语法高亮
• ✅ 自动链接识别
• ✅ 删除线语法

注意事项

1. 确保容器有足够的高度（建议设置为 100vh）
2. 组件会自动选中第一个文档项
3. 支持键盘导航和无障碍访问
4. 在移动端会自动调整为上下布局

更新日志

• v1.0.0: 初始版本，支持基础的文档显示功能
• 支持Markdown、代码、JSON、图片等内容类型
• 响应式设计和现代化UI