kevisual/light-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add card

Browse Source
This commit is contained in:
熊潇
2025-10-21 03:26:49 +08:00
parent b5430eb8d0
commit df859762ad
19 changed files with 2750 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
web/src/apps/muse/base/docs/README.md Normal file
View File

@@ -0,0 +1,191 @@
# 文档组件 (DocsComponent)
一个现代化的左侧导航右侧内容的文档显示组件，支持多种内容类型和优雅的样式设计。
## 特性
- 🎨 **现代化设计**: 清新的UI设计，优雅的色彩搭配
- 📱 **响应式布局**: 支持桌面和移动端适配
- 📝 **Markdown支持**: 使用 marked 库，支持 GitHub Flavored Markdown
- 🔄 **多内容类型**: 支持Markdown、代码、JSON、图片等多种类型
- ⚡ **流畅交互**: 带加载状态和平滑过渡动画
- 🏷️ **标签系统**: 支持文档标签和分类
- 🔍 **清晰导航**: 左侧树形导航，快速定位文档
- ✨ **丰富语法**: 支持表格、任务列表、代码高亮等 GFM 特性
## 使用方法
### 基础用法
```tsx
import React from 'react';
import { DocsComponent } from './docs';
import { mockMarks } from './mock/collection';
function App() {
return (
<div style={{ height: '100vh' }}>
<DocsComponent dataSource={mockMarks} />
</div>
);
}
```
### 自定义数据
```tsx
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对象包含：
```typescript
type Mark = {
id: string; // 唯一标识
title?: string; // 文档标题
description?: string; // 文档描述
tags?: string[]; // 标签数组
markType?: string; // 内容类型
data: any; // 内容数据
createdAt: Date; // 创建时间
updatedAt: Date; // 更新时间
// ... 其他字段
}
```
## 支持的内容类型
### Markdown
```typescript
{
markType: 'markdown',
data: {
content: '# 标题\n\n这是Markdown内容...'
}
}
```
### 代码
```typescript
{
markType: 'code',
data: {
code: 'const hello = "world";',
language: 'javascript'
}
}
```
### JSON数据
```typescript
{
markType: 'json',
data: {
// 任何JSON数据
}
}
```
### 图片
```typescript
{
markType: 'image',
data: {
src: 'https://example.com/image.jpg',
alt: '图片描述'
}
}
```
## 样式定制
组件使用CSS类名，你可以通过覆盖这些类名来定制样式：
```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` 文件获取完整的使用示例。
## 开发
```bash
# 安装依赖
npm install marked
# 或
pnpm install marked
```
组件使用 `marked` 库进行 Markdown 渲染，支持：
- ✅ GitHub Flavored Markdown (GFM)
- ✅ 表格语法
- ✅ 任务列表
- ✅ 代码块语法高亮
- ✅ 自动链接识别
- ✅ 删除线语法
## 注意事项
1. 确保容器有足够的高度（建议设置为 `100vh`）
2. 组件会自动选中第一个文档项
3. 支持键盘导航和无障碍访问
4. 在移动端会自动调整为上下布局
## 更新日志
- v1.0.0: 初始版本，支持基础的文档显示功能
- 支持Markdown、代码、JSON、图片等内容类型
- 响应式设计和现代化UI

542
web/src/apps/muse/base/docs/docs.css Normal file
View File

@@ -0,0 +1,542 @@
/* 文档组件样式 */
.docs-container {
display: flex;
height: 100%;
background: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 左侧导航区域 */
.docs-nav {
width: 280px;
background: #ffffff;
border-right: 1px solid #e2e8f0;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.docs-nav-header {
padding: 20px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
position: sticky;
top: 0;
z-index: 10;
flex-shrink: 0;
}
.docs-nav-title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.docs-nav-list {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
overflow-y: auto;
}
.docs-nav-item {
border-bottom: 1px solid #f1f5f9;
transition: all 0.2s ease;
}
.docs-nav-item:last-child {
border-bottom: none;
}
.docs-nav-link {
display: block;
padding: 16px 20px;
color: #64748b;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
border-left: 3px solid transparent;
}
.docs-nav-link:hover {
background: #f8fafc;
color: #334155;
border-left-color: #e2e8f0;
}
.docs-nav-link.active {
background: #eff6ff;
color: #2563eb;
border-left-color: #2563eb;
font-weight: 500;
}
.docs-nav-link-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
line-height: 1.4;
}
.docs-nav-link-desc {
font-size: 12px;
color: #94a3b8;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.docs-nav-link.active .docs-nav-link-desc {
color: #60a5fa;
}
/* 右侧内容区域 */
.docs-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.docs-content-header {
padding: 20px 32px;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.docs-content-title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
line-height: 1.3;
}
.docs-content-meta {
display: flex;
gap: 16px;
align-items: center;
margin-top: 8px;
}
.docs-content-tag {
display: inline-flex;
align-items: center;
padding: 4px 8px;
background: #f1f5f9;
color: #475569;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.docs-content-date {
font-size: 12px;
color: #94a3b8;
}
.docs-content-body {
flex: 1;
padding: 32px;
overflow-y: auto;
background: #ffffff;
}
.docs-content-body.empty {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #94a3b8;
}
.docs-empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.docs-empty-text {
font-size: 16px;
text-align: center;
line-height: 1.5;
}
/* Markdown内容样式 */
.docs-markdown {
max-width: none;
color: #374151;
line-height: 1.7;
}
.docs-markdown h1,
.docs-markdown h2,
.docs-markdown h3,
.docs-markdown h4,
.docs-markdown h5,
.docs-markdown h6 {
color: #111827;
font-weight: 600;
margin: 24px 0 16px 0;
line-height: 1.25;
}
.docs-markdown h1 {
font-size: 32px;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 12px;
}
.docs-markdown h2 {
font-size: 24px;
border-bottom: 1px solid #f3f4f6;
padding-bottom: 8px;
}
.docs-markdown h3 {
font-size: 20px;
}
.docs-markdown h4 {
font-size: 16px;
}
.docs-markdown p {
margin: 16px 0;
line-height: 1.7;
}
.docs-markdown ul,
.docs-markdown ol {
margin: 16px 0;
padding-left: 24px;
}
.docs-markdown li {
margin: 8px 0;
line-height: 1.6;
}
.docs-markdown blockquote {
margin: 16px 0;
padding: 16px 20px;
background: #f9fafb;
border-left: 4px solid #d1d5db;
color: #6b7280;
font-style: italic;
}
.docs-markdown code {
background: #f3f4f6;
color: #e11d48;
padding: 2px 6px;
border-radius: 4px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 0.875em;
}
.docs-markdown pre {
background: #1f2937;
color: #f9fafb;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
margin: 16px 0;
}
.docs-markdown pre code {
background: none;
color: inherit;
padding: 0;
border-radius: 0;
}
.docs-markdown a {
color: #2563eb;
text-decoration: none;
}
.docs-markdown a:hover {
text-decoration: underline;
}
.docs-markdown img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 16px 0;
}
.docs-markdown table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
.docs-markdown th,
.docs-markdown td {
border: 1px solid #e5e7eb;
padding: 12px;
text-align: left;
}
.docs-markdown th {
background: #f9fafb;
font-weight: 600;
}
/* 响应式设计 */
@media (max-width: 768px) {
.docs-container {
flex-direction: column;
height: auto;
}
.docs-nav {
width: 100%;
max-height: 300px;
display: flex;
flex-direction: column;
}
.docs-nav-header {
position: sticky;
top: 0;
z-index: 10;
}
.docs-nav-list {
flex: 1;
overflow-y: auto;
}
.docs-content-header {
padding: 16px 20px;
}
.docs-content-body {
padding: 20px;
}
.docs-content-title {
font-size: 20px;
}
}
/* 滚动条样式 */
.docs-nav-list::-webkit-scrollbar,
.docs-content-body::-webkit-scrollbar {
width: 6px;
}
.docs-nav-list::-webkit-scrollbar-track,
.docs-content-body::-webkit-scrollbar-track {
background: #f1f5f9;
}
.docs-nav-list::-webkit-scrollbar-thumb,
.docs-content-body::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.docs-nav-list::-webkit-scrollbar-thumb:hover,
.docs-content-body::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* 不同内容类型的样式 */
.docs-json-content {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
color: #374151;
overflow-x: auto;
}
.docs-code-content {
background: #1e293b;
color: #f1f5f9;
border-radius: 8px;
padding: 20px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.6;
overflow-x: auto;
margin: 16px 0;
}
.docs-code-content code {
background: none;
color: inherit;
padding: 0;
border-radius: 0;
}
.docs-image-content {
text-align: center;
margin: 20px 0;
}
.docs-image-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.docs-default-content {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
}
.docs-default-content pre {
background: none;
color: #374151;
padding: 0;
margin: 0;
font-size: 14px;
line-height: 1.5;
}
/* 内容区域优化 */
.docs-content-body .docs-markdown h1:first-child {
margin-top: 0;
}
.docs-content-body .docs-markdown h1:last-child,
.docs-content-body .docs-markdown h2:last-child,
.docs-content-body .docs-markdown h3:last-child,
.docs-content-body .docs-markdown p:last-child {
margin-bottom: 0;
}
/* 导航项类型标识 */
.docs-nav-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
background: #2563eb;
transition: height 0.2s ease;
}
.docs-nav-item {
position: relative;
}
.docs-nav-link.active ~ ::before,
.docs-nav-item:has(.docs-nav-link.active)::before {
height: 100%;
}
/* 标签优化 */
.docs-content-tag.type-markdown {
background: #dbeafe;
color: #1e40af;
}
.docs-content-tag.type-code {
background: #f3e8ff;
color: #7c3aed;
}
.docs-content-tag.type-json {
background: #ecfdf5;
color: #059669;
}
.docs-content-tag.type-image {
background: #fef3c7;
color: #d97706;
}
/* 加载状态 */
.docs-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
color: #94a3b8;
}
.docs-loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #e2e8f0;
border-top: 2px solid #2563eb;
border-radius: 50%;
animation: docs-spin 1s linear infinite;
margin-right: 12px;
}
@keyframes docs-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 搜索和过滤功能样式 */
.docs-nav-search {
padding: 16px 20px;
border-bottom: 1px solid #e2e8f0;
background: #ffffff;
position: sticky;
top: 0;
z-index: 10;
flex-shrink: 0;
}
.docs-nav-search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease;
}
.docs-nav-search-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.docs-nav-search-input::placeholder {
color: #9ca3af;
}
/* 内容区域的打印样式 */
@media print {
.docs-nav {
display: none;
}
.docs-content {
width: 100%;
}
.docs-content-body {
padding: 0;
}
.docs-markdown {
color: #000;
}
}

222
web/src/apps/muse/base/docs/example.tsx Normal file
View File

@@ -0,0 +1,222 @@
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)
- 图片支持: ![示例](https://via.placeholder.com/150)
---
希望你喜欢这个使用 **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;

222
web/src/apps/muse/base/docs/index.tsx Normal file
View File

@@ -0,0 +1,222 @@
import React, { useState, useEffect, useMemo } from 'react';
import { marked } from 'marked';
import dayjs from 'dayjs';
import { Mark } from '../mock/collection';
import './docs.css';
type Props = {
dataSource?: Mark[];
}
// 配置 marked 选项
marked.setOptions({
breaks: true,
gfm: true,
});
// Markdown渲染组件
const MarkdownRenderer: React.FC<{ content: string }> = ({ content }) => {
const [htmlContent, setHtmlContent] = useState<string>('');
useEffect(() => {
const renderMarkdown = async () => {
try {
const html = await marked(content);
setHtmlContent(html);
} catch (error) {
console.error('Markdown rendering error:', error);
const errorMessage = error instanceof Error ? error.message : '未知错误';
setHtmlContent(`<p>渲染错误: ${errorMessage}</p>`);
}
};
renderMarkdown();
}, [content]);
return (
<div
className="docs-markdown"
dangerouslySetInnerHTML={{ __html: htmlContent }}
/>
);
};
// 内容渲染组件
const ContentRenderer: React.FC<{ mark: Mark }> = ({ mark }) => {
const renderContent = () => {
if (!mark.data) {
return <div className="docs-empty-text">暂无内容</div>;
}
if (mark.description) {
return <MarkdownRenderer content={mark.description} />;
}
// 根据markType渲染不同类型的内容
switch (mark.markType) {
case 'markdown':
if (mark.data.content) {
return <MarkdownRenderer content={mark.data.content} />;
}
break;
case 'json':
return (
<pre className="docs-json-content">
{JSON.stringify(mark.data, null, 2)}
</pre>
);
case 'code':
return (
<pre className="docs-code-content">
<code>{mark.data.code || JSON.stringify(mark.data, null, 2)}</code>
</pre>
);
case 'image':
if (mark.data.src) {
return (
<div className="docs-image-content">
<img src={mark.data.src} alt={mark.data.alt || mark.title} />
</div>
);
}
break;
default:
// 对于其他类型，尝试显示内容字段
if (mark.data.content) {
return <MarkdownRenderer content={mark.data.content} />;
}
// 如果没有内容字段，显示JSON格式
return (
<div className="docs-default-content">
<pre>{JSON.stringify(mark.data, null, 2)}</pre>
</div>
);
}
return <div className="docs-empty-text">无法显示此类型的内容</div>;
};
return <>{renderContent()}</>;
};
// 主要的Docs组件
export const DocsComponent: React.FC<Props> = ({ dataSource = [] }) => {
const [selectedMarkId, setSelectedMarkId] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
// 过滤和处理数据源
const validMarks = useMemo(() => {
return dataSource.filter(mark => mark.title || mark.description);
}, [dataSource]);
// 获取当前选中的Mark
const selectedMark = useMemo(() => {
return validMarks.find(mark => mark.id === selectedMarkId) || null;
}, [validMarks, selectedMarkId]);
// 默认选中第一项
useEffect(() => {
if (validMarks.length > 0 && !selectedMarkId) {
setSelectedMarkId(validMarks[0].id);
}
}, [validMarks, selectedMarkId]);
// 处理导航项点击
const handleNavItemClick = (markId: string) => {
if (markId !== selectedMarkId) {
setIsLoading(true);
setSelectedMarkId(markId);
// 模拟加载时间
setTimeout(() => {
setIsLoading(false);
}, 200);
}
};
// 格式化日期
const formatDate = (date: Date) => {
return dayjs(date).format('YYYY年MM月DD日');
};
return (
<div className="docs-container">
{/* 左侧导航 */}
<nav className="docs-nav">
<div className="docs-nav-header">
<h2 className="docs-nav-title">文档导航</h2>
</div>
<ul className="docs-nav-list">
{validMarks.map((mark) => (
<li key={mark.id} className="docs-nav-item">
<a
className={`docs-nav-link ${selectedMarkId === mark.id ? 'active' : ''}`}
onClick={() => handleNavItemClick(mark.id)}
>
<div className="docs-nav-link-title">
{mark.title || '未命名文档'}
</div>
{mark.description && (
<div className="docs-nav-link-desc">
{mark.description}
</div>
)}
</a>
</li>
))}
</ul>
{validMarks.length === 0 && (
<div className="docs-loading">
<div className="docs-empty-text">暂无文档</div>
</div>
)}
</nav>
{/* 右侧内容 */}
<main className="docs-content">
{selectedMark ? (
<>
{/* 内容标题栏 */}
<header className="docs-content-header">
<h1 className="docs-content-title">
{selectedMark.title || '未命名文档'}
</h1>
<div className="docs-content-meta">
{selectedMark.tags && selectedMark.tags.map((tag, index) => (
<span key={index} className="docs-content-tag">
{tag}
</span>
))}
<span className="docs-content-date">
{formatDate(selectedMark.updatedAt)}
</span>
</div>
</header>
{/* 内容主体 */}
<div className="docs-content-body">
{isLoading ? (
<div className="docs-loading">
<div className="docs-loading-spinner"></div>
<span>加载中...</span>
</div>
) : (
<ContentRenderer mark={selectedMark} />
)}
</div>
</>
) : (
<div className="docs-content-body empty">
<div className="docs-empty-icon">📄</div>
<div className="docs-empty-text">
{validMarks.length === 0 ? '暂无文档可显示' : '请选择一个文档查看'}
</div>
</div>
)}
</main>
</div>
);
};
// 兼容性导出
export const App = DocsComponent;