add card

web/src/apps/muse/base/docs/example.tsx

@@ -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;