@linyjs/plugin-docs 0.1.0

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

@@ -0,0 +1,410 @@
+import React from 'react';
+import type { IModule } from '@linyjs/client-module-interface';
+
+const API_BASE = '/api/analytics';
+
+/**
+ * 实时统计卡片组件
+ */
+function StatsCard({ title, value, unit = '', description }: {
+  title: string;
+  value: React.ReactNode;
+  unit?: string;
+  description?: string;
+}) {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-md">
+      <h3 className="text-sm font-medium text-gray-500 mb-2">{title}</h3>
+      <div className="flex items-baseline mb-2">
+        <span className="text-3xl font-bold text-gray-900">{value}</span>
+        {unit && <span className="text-lg text-gray-500 ml-1">{unit}</span>}
+      </div>
+      {description && <p className="text-sm text-gray-600">{description}</p>}
+    </div>
+  );
+}
+
+/**
+ * 图表组件 (简化版)
+ */
+function SimpleChart({ data, title, type = 'line' }: {
+  data: any[];
+  title: string;
+  type?: 'line' | 'bar';
+}) {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-md">
+      <h3 className="text-lg font-semibold mb-4">{title}</h3>
+      <div className="space-y-2 max-h-64 overflow-y-auto">
+        {data.map((item, index) => {
+          if (typeof item === 'object' && item.name && typeof item.count === 'number') {
+            const maxCount = Math.max(...data.map(d => d.count || 1));
+            const widthPercent = (item.count / maxCount) * 100;
+
+            return (
+              <div key={index} className="flex items-center space-x-2">
+                <div className="w-24 text-sm text-gray-600 truncate">
+                  {item.name}
+                </div>
+                <div className="flex-1 bg-gray-200 rounded-full h-4">
+                  <div
+                    className="bg-blue-600 h-4 rounded-full"
+                    style={{ width: `${widthPercent}%` }}
+                  ></div>
+                </div>
+                <div className="w-12 text-sm text-gray-900 font-medium">
+                  {item.count}
+                </div>
+              </div>
+            );
+          }
+          return null;
+        })}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 留存分析组件
+ */
+function RetentionChart({ data }: { data: any }) {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-md">
+      <h3 className="text-lg font-semibold mb-4">用户留存分析</h3>
+
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div>
+          <h4 className="font-medium text-gray-900 mb-2">新用户</h4>
+          <div className="space-y-1">
+            {data.newUsers?.map((count: number, index: number) => (
+              <div key={index} className="flex justify-between text-sm">
+                <span>{data.dayIntervals[index]}</span>
+                <span className="font-medium">{count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h4 className="font-medium text-gray-900 mb-2">回访用户</h4>
+          <div className="space-y-1">
+            {data.returningUsers?.map((count: number, index: number) => (
+              <div key={index} className="flex justify-between text-sm">
+                <span>{data.dayIntervals[index]}</span>
+                <span className="font-medium">{count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h4 className="font-medium text-gray-900 mb-2">留存率</h4>
+        <div className="space-y-1">
+          {data.retentionRates?.map((rate: string, index: number) => (
+            <div key={index} className="flex justify-between text-sm">
+              <span>{data.dayIntervals[index]}</span>
+              <span className={parseFloat(rate) > 60 ? 'text-green-600' : parseFloat(rate) > 30 ? 'text-yellow-600' : 'text-red-500'}>
+                {rate}%
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 分析仪表盘主组件
+ */
+function AnalyticsDashboard() {
+  const [stats, setStats] = React.useState<any>(null);
+  const [realtimeStats, setRealtimeStats] = React.useState<any>(null);
+  const [retentionData, setRetentionData] = React.useState<any>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [activeTab, setActiveTab] = React.useState<'overview' | 'retention'>('overview');
+
+  React.useEffect(() => {
+    loadAnalytics();
+    
+    // 实时数据每30秒更新一次
+    const interval = setInterval(loadRealTimeStats, 30000);
+    loadRealTimeStats();
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadAnalytics = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`${API_BASE}/summary`);
+      const data = await response.json();
+      setStats(data);
+    } catch (error) {
+      console.error('加载分析数据失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadRealTimeStats = async () => {
+    try {
+      const response = await fetch(`${API_BASE}/realtime`);
+      const data = await response.json();
+      setRealtimeStats(data);
+    } catch (error) {
+      console.error('加载实时数据失败:', error);
+    }
+  };
+
+  const loadRetentionData = async () => {
+    try {
+      const response = await fetch(`${API_BASE}/retention`);
+      const data = await response.json();
+      setRetentionData(data);
+    } catch (error) {
+      console.error('加载留存数据失败:', error);
+    }
+  };
+
+  React.useEffect(() => {
+    if (activeTab === 'retention' && !retentionData) {
+      loadRetentionData();
+    }
+  }, [activeTab, retentionData]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">加载分析数据中...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* 导航栏 */}
+      <nav className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4">
+          <div className="flex justify-between items-center py-4">
+            <h1 className="text-2xl font-bold text-gray-900">分析仪表盘</h1>
+            <button
+              onClick={loadAnalytics}
+              className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
+            >
+              刷新数据
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* 标签页导航 */}
+      <div className="max-w-7xl mx-auto px-4 py-6">
+        <div className="flex space-x-1 mb-6">
+          <button
+            onClick={() => setActiveTab('overview')}
+            className={`px-4 py-2 text-sm font-medium rounded-md ${
+              activeTab === 'overview'
+                ? 'bg-blue-600 text-white'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            概览
+          </button>
+          <button
+            onClick={() => setActiveTab('retention')}
+            className={`px-4 py-2 text-sm font-medium rounded-md ${
+              activeTab === 'retention'
+                ? 'bg-blue-600 text-white'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            留存分析
+          </button>
+        </div>
+
+        {activeTab === 'overview' ? (
+          /* 概览页面 */
+          <div className="space-y-6">
+            {/* 实时统计卡片 */}
+            {realtimeStats && (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                <StatsCard
+                  title="当前在线用户"
+                  value={realtimeStats.onlineUsers || 0}
+                  description="实时活跃用户数"
+                />
+                <StatsCard
+                  title="当前事件数"
+                  value={realtimeStats.currentEvents || 0}
+                  description="每分钟处理的事件"
+                />
+                <StatsCard
+                  title="服务器时间"
+                  value={new Date(realtimeStats.serverTime).toLocaleTimeString()}
+                  description="数据更新时间"
+                />
+              </div>
+            )}
+
+            {/* 统计摘要卡片 */}
+            {stats && (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <StatsCard
+                  title="总事件数"
+                  value={stats.totalEvents || 0}
+                  description="过去7天事件总数"
+                />
+                <StatsCard
+                  title="活跃用户数"
+                  value={stats.activeUsers || 0}
+                  description="过去7天活跃用户"
+                />
+                <StatsCard
+                  title="事件类型数"
+                  value={Object.keys(stats.eventTypes || {}).length}
+                  description="不同类型的事件"
+                />
+              </div>
+            )}
+
+            {/* 图表展示 */}
+            {stats && stats.topEvents && (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <SimpleChart
+                  data={stats.topEvents}
+                  title="热门事件分析"
+                />
+
+                <div className="bg-white p-6 rounded-lg shadow-md">
+                  <h3 className="text-lg font-semibold mb-4">事件类型分布</h3>
+                  <div className="space-y-2">
+                    {Object.entries(stats.eventTypes || {}).map(([name, count]) => (
+                      <div key={name} className="flex justify-between items-center">
+                        <span className="text-sm text-gray-600">{name}</span>
+                        <span className="font-medium">{count as number}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          /* 留存分析页面 */
+          retentionData ? (
+            <div className="grid grid-cols-1 gap-6">
+              <RetentionChart data={retentionData} />
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <button
+                onClick={loadRetentionData}
+                className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+              >
+                加载留存数据
+              </button>
+            </div>
+          )
+        )}
+
+        {/* 无数据提示 */}
+        {!loading && !stats && (
+          <div className="text-center py-12">
+            <p className="text-gray-500 mb-4">暂无分析数据</p>
+            <p className="text-sm text-gray-400">开始收集应用使用数据后，这里将显示详细的分析报告</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 分析事件追踪组件（可嵌入其他页面）
+ */
+function AnalyticsTracker({ eventName, userId, children }: {
+  eventName: string;
+  userId?: string;
+  children: React.ReactNode;
+}) {
+  const trackEvent = async () => {
+    try {
+      await fetch(`${API_BASE}/track`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          eventName,
+          userId: userId || 'anonymous-' + Date.now(),
+          data: { timestamp: new Date().toISOString() }
+        })
+      });
+    } catch (error) {
+      console.error('追踪事件失败:', error);
+    }
+  };
+
+  return (
+    <div onClick={trackEvent}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * 客户端模块
+ */
+export const analyticsClientModule: IModule = {
+  name: 'analyticsClient',
+  serviceDefs: [
+    {
+      serviceTag: 'analyticsRoute',
+      serviceImpl: class AnalyticsRouteService {
+        basePath = '/analytics';
+
+        getRoutes() {
+          return [
+            {
+              path: '/',
+              component: AnalyticsDashboard,
+              key: 'analytics-dashboard',
+              meta: {
+                title: '分析仪表盘 - linyjs分析插件',
+                description: '查看应用使用统计和用户行为分析'
+              }
+            }
+          ];
+        }
+      },
+      meta: { usageType: 'route' }
+    },
+
+    {
+      serviceTag: 'analyticsComponent',
+      serviceImpl: class AnalyticsComponentService {
+        getComponents() {
+          return {
+            AnalyticsDashboard,
+            AnalyticsTracker,
+            StatsCard,
+            SimpleChart
+          };
+        }
+      },
+      meta: { usageType: 'component' }
+    }
+  ]
+};
+
+// 导出组件
+export {
+  AnalyticsDashboard,
+  AnalyticsTracker,
+  StatsCard,
+  SimpleChart
+};

package/examples/analytics-plugin/src/index.ts

@@ -0,0 +1,71 @@
+import { analyticsServerModule } from './server';
+import { analyticsClientModule } from './client';
+
+export { analyticsServerModule } from './server';
+export { analyticsClientModule } from './client';
+
+// 默认导出两个模块（同时适用于服务端和客户端）
+const analyticsPlugin = {
+  server: analyticsServerModule,
+  client: analyticsClientModule
+};
+
+export default analyticsPlugin;
+
+/**
+ * @module @linyjs/example-analytics-plugin
+ * 
+ * Analytics Plugin Example
+ * ===============
+ * 
+ * Features:
+ * - 📊 Real-time analytics dashboard
+ * - 📈 User behavior tracking
+ * - 🔄 Hourly data aggregation (cron job)
+ * - 📈 User retention analysis
+ * - 🌊 Live metrics monitoring
+ * - 📱 Responsive web interface
+ * 
+ * Server-side:
+ * - AnalyticsService: Core analytics logic
+ * - AnalyticsController: REST API endpoints
+ * - AnalyticsCronService: Background aggregation task
+ * 
+ * Client-side:
+ * - AnalyticsDashboard: Main dashboard UI
+ * - AnalyticsTracker: Event tracking utility
+ * - Visual charts and metrics display
+ * 
+ * API Endpoints:
+ * - POST /api/analytics/track - Track events
+ * - GET /api/analytics/summary - Get analytics summary
+ * - GET /api/analytics/realtime - Get real-time stats
+ * - GET /api/analytics/retention - Get user retention
+ * - POST /api/analytics/aggregate - Manual aggregation
+ * 
+ * Usage:
+ * 
+ * 1. Include in your Linyjs app:
+ * ```typescript
+ * import { analyticsServerModule } from '@linyjs/example-analytics-plugin';
+ * 
+ * // In server config
+ * plugins: [analyticsServerModule]
+ * ```
+ * 
+ * 2. Track events from client:
+ * ```javascript
+ * fetch('/api/analytics/track', {
+ *   method: 'POST',
+ *   headers: { 'Content-Type': 'application/json' },
+ *   body: JSON.stringify({
+ *     eventName: 'page_view',
+ *     userId: 'user123',
+ *     data: { page: '/home' }
+ *   })
+ * });
+ * ```
+ * 
+ * 3. View analytics dashboard:
+ * Access at `/analytics` route in your app
+ */