222 lines
5.0 KiB
TypeScript
222 lines
5.0 KiB
TypeScript
import React from 'react';
|
||
import { DocsComponent } from './index';
|
||
import { mockMarks, generateMarkWithType } from '../mock/collection';
|
||
|
||
// 创建一些示例文档数据
|
||
const createSampleDocs = () => {
|
||
const markdownDoc = generateMarkWithType('markdown');
|
||
markdownDoc.title = '项目介绍';
|
||
markdownDoc.description = '了解我们的项目背景和目标';
|
||
markdownDoc.tags = ['介绍', '项目'];
|
||
markdownDoc.data = {
|
||
content: `# 欢迎使用文档系统
|
||
|
||
这是一个现代化的文档展示系统，现在使用 **marked** 库进行 Markdown 渲染。
|
||
|
||
## 主要功能
|
||
|
||
- **响应式设计**: 适配各种屏幕尺寸
|
||
- **左侧导航**: 清晰的文档结构
|
||
- **Markdown支持**: 使用 marked 库，支持 GitHub Flavored Markdown
|
||
- **多种内容类型**: 支持文本、代码、图片等多种内容
|
||
|
||
## 技术特性
|
||
|
||
### 样式设计
|
||
使用了现代化的CSS设计，包括：
|
||
|
||
1. 清新的配色方案
|
||
2. 优雅的阴影和边框
|
||
3. 流畅的过渡动画
|
||
|
||
### 功能特性
|
||
|
||
> **提示**: 这是一个引用块，展示了 marked 的渲染能力
|
||
|
||
- [x] 点击导航自动切换内容
|
||
- [x] 加载状态提示
|
||
- [x] 标签和日期显示
|
||
- [ ] 响应式布局
|
||
|
||
## 代码示例
|
||
|
||
### TypeScript 代码
|
||
|
||
\`\`\`typescript
|
||
import { DocsComponent } from './docs';
|
||
import { mockMarks } from './mock/collection';
|
||
|
||
const App: React.FC = () => {
|
||
return <DocsComponent dataSource={mockMarks} />;
|
||
};
|
||
\`\`\`
|
||
|
||
### 内联代码
|
||
|
||
使用 \`marked\` 库可以更好地处理 Markdown 语法。
|
||
|
||
## 表格支持
|
||
|
||
| 功能 | 状态 | 描述 |
|
||
|------|------|------|
|
||
| Markdown | ✅ | 完整支持 |
|
||
| 代码高亮 | ✅ | 语法高亮 |
|
||
| 表格 | ✅ | GFM 表格 |
|
||
| 任务列表 | ✅ | 支持复选框 |
|
||
|
||
## 链接和图片
|
||
|
||
- 外部链接: [GitHub](https://github.com)
|
||
- 图片支持: 
|
||
|
||
---
|
||
|
||
希望你喜欢这个使用 **marked** 的文档系统！🎉`
|
||
};
|
||
|
||
const apiDoc = generateMarkWithType('markdown');
|
||
apiDoc.title = 'API 文档';
|
||
apiDoc.description = 'API接口使用说明和示例';
|
||
apiDoc.tags = ['API', '开发'];
|
||
apiDoc.data = {
|
||
content: `# API 文档
|
||
|
||
## 🔐 用户认证
|
||
|
||
### 登录接口
|
||
|
||
**请求地址**: \`POST /api/auth/login\`
|
||
|
||
**请求参数**:
|
||
|
||
| 参数 | 类型 | 必填 | 描述 |
|
||
|------|------|------|------|
|
||
| username | string | ✅ | 用户名 |
|
||
| password | string | ✅ | 密码 |
|
||
|
||
**响应示例**:
|
||
|
||
\`\`\`json
|
||
{
|
||
"code": 200,
|
||
"message": "success",
|
||
"data": {
|
||
"token": "eyJhbGciOiJIUzI1NiIs...",
|
||
"user": {
|
||
"id": 1,
|
||
"username": "admin",
|
||
"email": "admin@example.com"
|
||
}
|
||
}
|
||
}
|
||
\`\`\`
|
||
|
||
## 📊 数据操作
|
||
|
||
### 获取列表
|
||
|
||
**请求地址**: \`GET /api/data/list\`
|
||
|
||
**查询参数**:
|
||
|
||
- \`page\`: 页码 (默认: 1)
|
||
- \`size\`: 每页数量 (默认: 10)
|
||
- \`keyword\`: 搜索关键词
|
||
|
||
### 创建数据
|
||
|
||
**请求地址**: \`POST /api/data/create\`
|
||
|
||
**请求体**:
|
||
|
||
\`\`\`json
|
||
{
|
||
"title": "标题",
|
||
"content": "内容",
|
||
"tags": ["tag1", "tag2"]
|
||
}
|
||
\`\`\`
|
||
|
||
## ⚠️ 错误码
|
||
|
||
| 错误码 | 描述 | 解决方案 |
|
||
|--------|------|----------|
|
||
| 400 | 请求参数错误 | 检查请求参数格式 |
|
||
| 401 | 未授权 | 重新登录获取 token |
|
||
| 403 | 禁止访问 | 检查用户权限 |
|
||
| 500 | 服务器错误 | 联系技术支持 |
|
||
|
||
> **注意**: 所有 API 请求都需要在 Header 中包含 \`Authorization: Bearer <token>\`
|
||
|
||
更多 API 详情请参考 [完整文档](https://docs.example.com) 📖`
|
||
};
|
||
|
||
const codeDoc = generateMarkWithType('code');
|
||
codeDoc.title = '代码示例';
|
||
codeDoc.description = '常用的代码片段和最佳实践';
|
||
codeDoc.tags = ['代码', '示例'];
|
||
codeDoc.data = {
|
||
code: `// React Hook 示例
|
||
import { useState, useEffect, useCallback } from 'react';
|
||
|
||
const useDocuments = (initialData = []) => {
|
||
const [docs, setDocs] = useState(initialData);
|
||
const [loading, setLoading] = useState(false);
|
||
const [selectedId, setSelectedId] = useState(null);
|
||
|
||
// 获取文档列表
|
||
const fetchDocs = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const response = await fetch('/api/docs');
|
||
const data = await response.json();
|
||
setDocs(data);
|
||
} catch (error) {
|
||
console.error('Failed to fetch docs:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
// 选择文档
|
||
const selectDoc = useCallback((id) => {
|
||
setSelectedId(id);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
fetchDocs();
|
||
}, [fetchDocs]);
|
||
|
||
return {
|
||
docs,
|
||
loading,
|
||
selectedId,
|
||
selectDoc,
|
||
refetch: fetchDocs
|
||
};
|
||
};
|
||
|
||
export default useDocuments;`,
|
||
language: 'typescript'
|
||
};
|
||
|
||
const configDoc = generateMarkWithType('json');
|
||
configDoc.title = '配置说明';
|
||
configDoc.description = '系统配置项说明和默认值';
|
||
configDoc.tags = ['配置', '设置'];
|
||
|
||
return [markdownDoc, apiDoc, codeDoc, configDoc];
|
||
};
|
||
|
||
// 示例组件
|
||
export const DocsExample: React.FC = () => {
|
||
const sampleDocs = createSampleDocs();
|
||
|
||
return (
|
||
<div style={{ height: '100vh' }}>
|
||
<DocsComponent dataSource={sampleDocs} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DocsExample; |