@linyjs/plugin-docs 0.1.0

package/examples/blog-plugin/src/client/index.tsx

@@ -0,0 +1,405 @@
+import React from 'react';
+import type { IModule } from '@linyjs/client-module-interface';
+
+const API_BASE = '/api/articles';
+
+/**
+ * 文章列表组件
+ */
+function ArticleList() {
+  const [articles, setArticles] = React.useState<any[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    loadArticles();
+  }, []);
+
+  const loadArticles = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(API_BASE);
+      const result = await response.json();
+      setArticles(result.data || result);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load articles');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <div className="text-center py-8">加载中...</div>;
+  if (error) return <div className="text-red-500 text-center py-8">错误: {error}</div>;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">文章列表</h1>
+        <button
+          onClick={() => window.location.href = '/blog/new'}
+          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        >
+          写文章
+        </button>
+      </div>
+
+      {articles.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-gray-500 mb-4">暂无文章</p>
+          <button
+            onClick={() => window.location.href = '/blog/new'}
+            className="text-blue-600 hover:underline"
+          >
+            写第一篇文章
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {articles.map((article) => (
+            <div key={article.id} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+              <h2 className="text-xl font-semibold mb-2 text-gray-900">
+                <a
+                  href={`/blog/${article.id}`}
+                  className="hover:text-blue-600"
+                >
+                  {article.title}
+                </a>
+              </h2>
+              <p className="text-gray-600 mb-4 line-clamp-3">
+                {article.content?.substring(0, 120)}...
+              </p>
+              <div className="flex justify-between items-center text-sm text-gray-500">
+                <span className="font-medium">{article.author || '匿名'}</span>
+                <span>{new Date(article.createdAt).toLocaleDateString()}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 文章详情组件
+ */
+function ArticleDetail() {
+  const [article, setArticle] = React.useState<any>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // 获取URL参数
+  const urlParams = new URLSearchParams(window.location.search);
+  const id = urlParams.get('id');
+
+  React.useEffect(() => {
+    if (id) {
+      loadArticle(id);
+    }
+  }, [id]);
+
+  const loadArticle = async (articleId: string) => {
+    try {
+      setLoading(true);
+      const response = await fetch(`${API_BASE}/${articleId}`);
+      const result = await response.json();
+      setArticle(result);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load article');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <div className="text-center py-8">加载中...</div>;
+  if (error) return <div className="text-red-500 text-center py-8">错误: {error}</div>;
+  if (!article) return <div className="text-center py-8">文章不存在</div>;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      <button
+        onClick={() => window.history.back()}
+        className="mb-4 text-blue-600 hover:underline"
+      >
+        ← 返回列表
+      </button>
+
+      <article className="bg-white rounded-lg shadow-md p-8">
+        <h1 className="text-4xl font-bold mb-4 text-gray-900">{article.title}</h1>
+
+        <div className="flex justify-between items-center mb-8 pb-4 border-b">
+          <div className="text-gray-600">
+            <span className="font-medium">作者: {article.author || '匿名'}</span>
+          </div>
+          <div className="text-gray-500">
+            <span>发布于 {new Date(article.createdAt).toLocaleString()}</span>
+          </div>
+        </div>
+
+        <div className="prose prose-lg max-w-none">
+          <div dangerouslySetInnerHTML={{ __html: formatContent(article.content) }} />
+        </div>
+
+        {article.updatedAt && article.updatedAt !== article.createdAt && (
+          <div className="mt-8 pt-4 border-t text-sm text-gray-500">
+            <span>最后编辑于 {new Date(article.updatedAt).toLocaleString()}</span>
+          </div>
+        )}
+      </article>
+    </div>
+  );
+}
+
+/**
+ * 文章编辑表单组件
+ */
+function ArticleForm() {
+  const [title, setTitle] = React.useState('');
+  const [content, setContent] = React.useState('');
+  const [author, setAuthor] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // 检查是否为编辑模式
+  const urlParams = new URLSearchParams(window.location.search);
+  const editId = urlParams.get('edit');
+  const isEdit = Boolean(editId);
+
+  React.useEffect(() => {
+    if (isEdit && editId) {
+      loadArticleForEdit(editId);
+    }
+  }, [isEdit, editId]);
+
+  const loadArticleForEdit = async (articleId: string) => {
+    try {
+      const response = await fetch(`${API_BASE}/${articleId}`);
+      const article = await response.json();
+      setTitle(article.title || '');
+      setContent(article.content || '');
+      setAuthor(article.author || '');
+    } catch (err: any) {
+      setError('加载文章失败: ' + err.message);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!title.trim() || !content.trim()) {
+      setError('标题和内容不能为空');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const method = isEdit ? 'PUT' : 'POST';
+      const url = isEdit ? `${API_BASE}/${editId}` : API_BASE;
+
+      const response = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title, content, author })
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        // 重定向到文章列表
+        window.location.href = '/blog';
+      } else {
+        throw new Error(result.data?.error || '保存失败');
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      <button
+        onClick={() => window.history.back()}
+        className="mb-4 text-blue-600 hover:underline"
+      >
+        ← 返回
+      </button>
+
+      <div className="bg-white rounded-lg shadow-md p-8">
+        <h1 className="text-3xl font-bold mb-8 text-gray-900">
+          {isEdit ? '编辑文章' : '写新文章'}
+        </h1>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 text-red-700 rounded">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              标题 *
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="输入文章标题"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              作者
+            </label>
+            <input
+              type="text"
+              value={author}
+              onChange={(e) => setAuthor(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="作者姓名 (可选)"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              内容 *
+            </label>
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              rows={12}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="在这里写下你的文章内容..."
+              required
+            />
+          </div>
+
+          <div className="flex justify-end space-x-4">
+            <button
+              type="button"
+              onClick={() => window.history.back()}
+              className="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
+            >
+              取消
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+            >
+              {loading ? '保存中...' : (isEdit ? '更新' : '发布')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 博客主页组件
+ */
+function BlogHome() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          <div className="flex justify-between items-center">
+            <h1 className="text-2xl font-bold text-gray-900">
+              <a href="/blog" className="hover:text-blue-600">我的博客</a>
+            </h1>
+            <div className="flex space-x-4">
+              <a href="/blog" className="text-gray-600 hover:text-blue-600">文章列表</a>
+              <a href="/blog/new" className="text-gray-600 hover:text-blue-600">写文章</a>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <main>
+        {/* 根据URL参数显示不同组件 */}
+        <div id="blog-content">
+          {window.location.search.includes('id=') ? (
+            <ArticleDetail />
+          ) : window.location.pathname.includes('/new') || window.location.search.includes('edit=') ? (
+            <ArticleForm />
+          ) : (
+            <ArticleList />
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+/**
+ * 简单的markdown格式化（支持基本的HTML标签）
+ */
+function formatContent(content: string): string {
+  return content
+    .replace(/\n/g, '<br>')
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    .replace(/`(.*?)`/g, '<code>$1</code>');
+}
+
+/**
+ * 客户端模块定义
+ */
+export const blogClientModule: IModule = {
+  name: 'blogClient',
+  serviceDefs: [
+    {
+      serviceTag: 'blogRoute',
+      serviceImpl: class BlogRouteService {
+        basePath = '/blog';
+
+        getRoutes() {
+          return [
+            {
+              path: '/',
+              component: BlogHome,
+              key: 'blog-home',
+              meta: {
+                title: '博客首页 - linyjs示例',
+                description: '一个简单的博客示例，展示linyjs插件开发'
+              }
+            }
+          ];
+        }
+      },
+      meta: { usageType: 'route' }
+    },
+
+    {
+      serviceTag: 'blogComponent',
+      serviceImpl: class BlogComponentService {
+        // 注册全局组件
+        getComponents() {
+          return {
+            BlogHome,
+            ArticleList,
+            ArticleDetail,
+            ArticleForm
+          };
+        }
+      },
+      meta: { usageType: 'component' }
+    }
+  ]
+};
+
+// 导出组件方便其他模块使用
+export {
+  BlogHome,
+  ArticleList,
+  ArticleDetail,
+  ArticleForm
+};

package/examples/blog-plugin/src/server/index.ts

@@ -0,0 +1,240 @@
+import type { IModule } from '@linyjs/server-module-interface';
+
+/**
+ * 文章服务 - 处理文章的业务逻辑
+ */
+class ArticleService {
+  private articles: any[] = [];
+  private nextId = 1;
+
+  /**
+   * 获取所有文章(支持分页)
+   */
+  async getArticles(page: number = 1, limit: number = 10) {
+    const skip = (page - 1) * limit;
+    const total = this.articles.length;
+    const items = this.articles.slice(skip, skip + limit);
+    
+    return {
+      data: items,
+      total,
+      page,
+      limit,
+      totalPages: Math.ceil(total / limit)
+    };
+  }
+
+  /**
+   * 根据ID获取文章
+   */
+  async getArticleById(id: number) {
+    const article = this.articles.find(a => a.id === id);
+    if (!article) {
+      throw new Error('Article not found');
+    }
+    return article;
+  }
+
+  /**
+   * 创建文章
+   */
+  async createArticle(data: any) {
+    const article = {
+      id: this.nextId++,
+      title: data.title,
+      content: data.content,
+      author: data.author || 'Anonymous',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString()
+    };
+    
+    this.articles.push(article);
+    return article;
+  }
+
+  /**
+   * 更新文章
+   */
+  async updateArticle(id: number, data: any) {
+    const index = this.articles.findIndex(a => a.id === id);
+    if (index === -1) {
+      throw new Error('Article not found');
+    }
+    
+    this.articles[index] = {
+      ...this.articles[index],
+      ...data,
+      updatedAt: new Date().toISOString()
+    };
+    
+    return this.articles[index];
+  }
+
+  /**
+   * 删除文章
+   */
+  async deleteArticle(id: number) {
+    const index = this.articles.findIndex(a => a.id === id);
+    if (index === -1) {
+      throw new Error('Article not found');
+    }
+    
+    this.articles.splice(index, 1);
+    return { success: true };
+  }
+}
+
+/**
+ * 文章控制器 - 定义API路由
+ */
+class ArticleController {
+  private articleService: ArticleService;
+
+  constructor() {
+    this.articleService = new ArticleService();
+  }
+
+  getRoutes() {
+    return [
+      // GET /api/articles - 获取文章列表
+      {
+        method: 'GET' as const,
+        path: '/api/articles',
+        middlewares: [],
+        responseType: 'json' as const,
+        handler: async (params: any, ctx: any) => {
+          const page = parseInt(params.query?.page || '1');
+          const limit = parseInt(params.query?.limit || '10');
+          
+          try {
+            const result = await this.articleService.getArticles(page, limit);
+            return result;
+          } catch (error: any) {
+            return {
+              status: 500,
+              data: { error: error.message }
+            };
+          }
+        }
+      },
+
+      // GET /api/articles/:id - 获取单篇文章
+      {
+        method: 'GET' as const,
+        path: '/api/articles/:id',
+        middlewares: [],
+        responseType: 'json' as const,
+        handler: async (params: any, ctx: any) => {
+          try {
+            const id = parseInt(params.id);
+            const article = await this.articleService.getArticleById(id);
+            return article;
+          } catch (error: any) {
+            return {
+              status: 404,
+              data: { error: error.message }
+            };
+          }
+        }
+      },
+
+      // POST /api/articles - 创建文章
+      {
+        method: 'POST' as const,
+        path: '/api/articles',
+        middlewares: [],
+        responseType: 'json' as const,
+        handler: async (params: any, ctx: any) => {
+          try {
+            const { title, content, author } = params.body;
+            
+            if (!title || !content) {
+              return {
+                status: 400,
+                data: { error: 'Title and content are required' }
+              };
+            }
+            
+            const article = await this.articleService.createArticle({
+              title,
+              content,
+              author
+            });
+            
+            return {
+              success: true,
+              data: article
+            };
+          } catch (error: any) {
+            return {
+              status: 500,
+              data: { error: error.message }
+            };
+          }
+        }
+      },
+
+      // PUT /api/articles/:id - 更新文章
+      {
+        method: 'PUT' as const,
+        path: '/api/articles/:id',
+        middlewares: [],
+        responseType: 'json' as const,
+        handler: async (params: any, ctx: any) => {
+          try {
+            const id = parseInt(params.id);
+            const article = await this.articleService.updateArticle(id, params.body);
+            
+            return {
+              success: true,
+              data: article
+            };
+          } catch (error: any) {
+            return {
+              status: 404,
+              data: { error: error.message }
+            };
+          }
+        }
+      },
+
+      // DELETE /api/articles/:id - 删除文章
+      {
+        method: 'DELETE' as const,
+        path: '/api/articles/:id',
+        middlewares: [],
+        responseType: 'json' as const,
+        handler: async (params: any, ctx: any) => {
+          try {
+            const id = parseInt(params.id);
+            await this.articleService.deleteArticle(id);
+            
+            return {
+              success: true,
+              message: 'Article deleted successfully'
+            };
+          } catch (error: any) {
+            return {
+              status: 404,
+              data: { error: error.message }
+            };
+          }
+        }
+      }
+    ];
+  }
+}
+
+/**
+ * 服务端模块定义
+ */
+export const blogServerModule: IModule = {
+  name: 'blogServer',
+  serviceDefs: [
+    {
+      serviceTag: 'articleController',
+      serviceImpl: ArticleController,
+      meta: { usageType: 'controller' }
+    }
+  ]
+};

package/examples/blog-plugin/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*"]
+}