create-fullstack-scaffold 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fullstack-scaffold",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "bin": {
     "create-fullstack-scaffold": "dist/cli/index.js"

package/template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "biomimic-todo-app",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "bin": {
     "biomimic": "./dist/cli/index.js"

package/template/src/client/App.tsx

@@ -19,7 +19,9 @@ export const App: React.FC<{ presetId?: string }> = ({ presetId = 'todo' }) => {
           mobileTabs={mobileTabs}
         >
           <Routes>
-            <Route path="/" element={<Navigate to={defaultRoute} replace />} />
+            {defaultRoute !== '/' && (
+              <Route path="/" element={<Navigate to={defaultRoute} replace />} />
+            )}
             {routes
               .filter(
                 (r): r is RouteDef & { component: NonNullable<RouteDef['component']> } =>

package/template/src/client/pages/ContentListPage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Link } from 'react-router-dom'
 import { Helmet } from 'react-helmet-async'
-import type { Content, ContentCategory } from '@shared/modules/content'
+import type { Content, ContentCategory, ContentStatus } from '@shared/modules/content'
 import { apiClient } from '@client/services/apiClient'
 
 const CATEGORIES: { value: ContentCategory | ''; label: string }[] = [
@@ -66,6 +66,15 @@ export const ContentListPage: React.FC = () => {
     })
   }
 
+  const statusConfig = (status: ContentStatus) => {
+    const configs = {
+      draft: { color: 'bg-yellow-100 text-yellow-700', label: '草稿' },
+      published: { color: 'bg-green-100 text-green-700', label: '已发布' },
+      archived: { color: 'bg-gray-100 text-gray-700', label: '已归档' },
+    }
+    return configs[status]
+  }
+
   return (
     <>
       <Helmet>
@@ -137,16 +146,39 @@ export const ContentListPage: React.FC = () => {
               >
                 <div className="flex items-start justify-between gap-4">
                   <div className="flex-1">
-                    <div className="flex items-center gap-2 mb-2">
+                    <div className="flex items-center gap-2 mb-2 flex-wrap">
                       <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">
                         {categoryLabel(content.category)}
                       </span>
+                      <span
+                        className={`px-2 py-1 text-xs font-medium rounded ${
+                          statusConfig(content.status).color
+                        }`}
+                      >
+                        {statusConfig(content.status).label}
+                      </span>
                       <span className="text-sm text-gray-500">{content.author}</span>
                     </div>
                     <h2 className="text-xl font-semibold text-gray-900 mb-2">{content.title}</h2>
                     <p className="text-gray-600 line-clamp-2">{content.content.slice(0, 150)}...</p>
-                    <div className="flex items-center gap-4 mt-3 text-sm text-gray-400">
-                      {content.publishedAt && <span>{formatDate(content.publishedAt)}</span>}
+                    {content.tags && content.tags.length > 0 && (
+                      <div className="flex gap-1.5 flex-wrap mt-3">
+                        {content.tags.map(tag => (
+                          <span
+                            key={tag}
+                            className="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded"
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                    <div className="flex items-center gap-4 mt-3 text-sm text-gray-400 flex-wrap">
+                      {content.createdAt && <span>创建于 {formatDate(content.createdAt)}</span>}
+                      {content.updatedAt && content.updatedAt !== content.createdAt && (
+                        <span>更新于 {formatDate(content.updatedAt)}</span>
+                      )}
+                      {content.publishedAt && <span>发布于 {formatDate(content.publishedAt)}</span>}
                       <span>👁 {content.viewCount}</span>
                       <span>❤ {content.likeCount}</span>
                     </div>

package/template/src/client/pages/PluginsPage.tsx

@@ -10,10 +10,27 @@ import {
   Sparkles,
   TrendingUp,
   Zap,
+  Eye,
+  ExternalLink,
+  Star,
+  Shield,
 } from 'lucide-react'
 import { usePluginStore } from '@client/stores/pluginStore'
 import { LoadingSpinner, EmptyState } from '@client/components'
-import { StatusBadge } from '@client/components'
+import { StatusBadge, type ColorScheme } from '@client/components'
+
+const getStatusColor = (status: string): ColorScheme => {
+  switch (status?.toLowerCase()) {
+    case 'approved':
+      return 'green'
+    case 'pending':
+      return 'yellow'
+    case 'rejected':
+      return 'red'
+    default:
+      return 'gray'
+  }
+}
 
 export const PluginsPage: React.FC = () => {
   const plugins = usePluginStore(state => state.plugins)
@@ -141,37 +158,112 @@ export const PluginsPage: React.FC = () => {
                     <Link
                       key={plugin.id}
                       to={`/plugins/${plugin.slug}`}
-                      className="group relative p-5 bg-white rounded-2xl border border-gray-100 hover:border-violet-200 hover:shadow-xl hover:shadow-violet-500/5 transition-all duration-300 block overflow-hidden"
+                      className="group relative bg-white rounded-2xl border border-gray-100 hover:border-violet-200 hover:shadow-xl hover:shadow-violet-500/5 transition-all duration-300 block overflow-hidden"
                     >
                       <div className="absolute inset-0 bg-gradient-to-br from-violet-500/0 to-fuchsia-500/0 group-hover:from-violet-500/[0.02] group-hover:to-fuchsia-500/[0.04] transition-all duration-300" />
                       <div className="relative">
-                        <div className="flex items-start justify-between gap-3 mb-3">
-                          <div className="flex items-center gap-3">
-                            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-100 to-fuchsia-100 flex items-center justify-center text-lg font-bold text-violet-600 shrink-0">
-                              {plugin.name.charAt(0).toUpperCase()}
+                        {/* Screenshot thumbnail */}
+                        <div className="relative">
+                          {plugin.screenshotUrl ? (
+                            <img
+                              src={plugin.screenshotUrl}
+                              alt={plugin.name}
+                              className="w-full h-32 object-cover"
+                            />
+                          ) : (
+                            <div className="w-full h-20 bg-gradient-to-br from-violet-100 to-fuchsia-100" />
+                          )}
+                          {plugin.featured && (
+                            <div className="absolute top-2 right-2">
+                              <div className="p-1.5 bg-amber-400 rounded-full shadow-lg">
+                                <Star className="w-3.5 h-3.5 text-white fill-white" />
+                              </div>
                             </div>
-                            <div className="min-w-0">
-                              <h3 className="text-base font-semibold text-gray-900 truncate group-hover:text-violet-700 transition-colors">
-                                {plugin.name}
-                              </h3>
-                              <p className="text-xs text-gray-400">by {plugin.authorName}</p>
+                          )}
+                        </div>
+
+                        <div className="p-5">
+                          <div className="flex items-start justify-between gap-3 mb-3">
+                            <div className="flex items-center gap-3">
+                              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-100 to-fuchsia-100 flex items-center justify-center text-lg font-bold text-violet-600 shrink-0">
+                                {plugin.name.charAt(0).toUpperCase()}
+                              </div>
+                              <div className="min-w-0">
+                                <h3 className="text-base font-semibold text-gray-900 truncate group-hover:text-violet-700 transition-colors">
+                                  {plugin.name}
+                                </h3>
+                                <p className="text-xs text-gray-400">by {plugin.authorName}</p>
+                              </div>
                             </div>
+                            <StatusBadge label={`v${plugin.version}`} colorScheme="purple" />
                           </div>
-                          <StatusBadge label={`v${plugin.version}`} colorScheme="purple" />
-                        </div>
-                        <p className="text-sm text-gray-500 line-clamp-2 mb-4 leading-relaxed">
-                          {plugin.description}
-                        </p>
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-3 text-xs text-gray-400">
+
+                          {/* Status and License */}
+                          <div className="flex items-center gap-2 mb-3">
+                            <StatusBadge
+                              label={plugin.status || 'Unknown'}
+                              icon={Shield}
+                              colorScheme={getStatusColor(plugin.status || '')}
+                            />
+                            {plugin.license && (
+                              <span className="inline-flex items-center px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs font-medium">
+                                {plugin.license}
+                              </span>
+                            )}
+                          </div>
+
+                          <p className="text-sm text-gray-500 line-clamp-2 mb-4 leading-relaxed">
+                            {plugin.description}
+                          </p>
+
+                          {/* Download + View counts */}
+                          <div className="flex items-center gap-3 text-xs text-gray-400 mb-3">
                             <span className="flex items-center gap-1">
                               <Download className="w-3.5 h-3.5" />
                               {plugin.downloadCount}
                             </span>
+                            {plugin.viewCount !== undefined && (
+                              <span className="flex items-center gap-1">
+                                <Eye className="w-3.5 h-3.5" />
+                                {plugin.viewCount}
+                              </span>
+                            )}
                           </div>
+
+                          {/* External links */}
+                          {(plugin.repositoryUrl || plugin.homepageUrl) && (
+                            <div className="flex items-center gap-1.5 mb-3">
+                              {plugin.repositoryUrl && (
+                                <a
+                                  href={plugin.repositoryUrl}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  onClick={e => e.stopPropagation()}
+                                  className="p-1.5 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-400 hover:text-violet-600 transition-colors"
+                                  title="Repository"
+                                >
+                                  <ExternalLink className="w-3.5 h-3.5" />
+                                </a>
+                              )}
+                              {plugin.homepageUrl && (
+                                <a
+                                  href={plugin.homepageUrl}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  onClick={e => e.stopPropagation()}
+                                  className="p-1.5 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-400 hover:text-violet-600 transition-colors"
+                                  title="Homepage"
+                                >
+                                  <ExternalLink className="w-3.5 h-3.5" />
+                                </a>
+                              )}
+                            </div>
+                          )}
+
+                          {/* Tags - show all */}
                           {plugin.tags && plugin.tags.length > 0 && (
-                            <div className="flex items-center gap-1">
-                              {plugin.tags.slice(0, 2).map(tag => (
+                            <div className="flex flex-wrap items-center gap-1">
+                              {plugin.tags.map(tag => (
                                 <span
                                   key={tag}
                                   className="inline-flex items-center px-2 py-0.5 bg-gray-50 text-gray-500 rounded-md text-xs"

package/template/src/client/pages/TodoPage.tsx

@@ -112,7 +112,10 @@ export const TodoPage: React.FC = () => {
         <title>Todo List - Biomimic App</title>
         <meta name="description" content="Manage your todo items with full CRUD operations" />
         <meta property="og:title" content="Todo List - Biomimic App" />
-        <meta property="og:description" content="Manage your todo items with full CRUD operations" />
+        <meta
+          property="og:description"
+          content="Manage your todo items with full CRUD operations"
+        />
       </Helmet>
       <div className="mb-8">
         <h1
@@ -275,6 +278,11 @@ export const TodoPage: React.FC = () => {
                     </select>
                     <span className="text-xs text-gray-400">
                       {new Date(todo.createdAt).toLocaleString()}
+                      {todo.updatedAt && todo.updatedAt !== todo.createdAt && (
+                        <span className="ml-2">
+                          · Updated {new Date(todo.updatedAt).toLocaleString()}
+                        </span>
+                      )}
                     </span>
                   </div>
                 </div>

package/template/src/client/preset-ui-config.ts

@@ -1,6 +1,6 @@
 import { lazy, type ComponentType } from 'react'
 
-export type PresetType = 'todo' | 'plugin' | 'ecommerce' | 'community' | 'saas'
+export type PresetType = 'todo' | 'plugin' | 'ecommerce' | 'community' | 'forum' | 'saas'
 
 export type AppType = 'client' | 'admin'
 export type LayoutType = 'top-nav' | 'minimal'
@@ -481,10 +481,87 @@ export const PRESET_UI_CONFIGS: Record<PresetType, PresetUIConfig> = {
       },
     ],
   },
+
+  // forum is an alias for community — same config, different preset ID
+  forum: {
+    id: 'community',
+    name: 'Community',
+    appType: 'client',
+    layout: 'top-nav',
+    theme: COMMUNITY_THEME,
+    navigation: {
+      visible: true,
+      showLogo: true,
+      showSearch: false,
+      showCart: false,
+      authStyle: 'avatar',
+      navItems: 'desktop',
+    },
+    desktopNav: [
+      { label: 'Topics', icon: 'Hash', path: '/topics' },
+      { label: 'Popular', icon: 'TrendingUp', path: '/popular' },
+      { label: 'Notifications', icon: 'Bell', path: '/notifications' },
+      { label: 'Profile', icon: 'User', path: '/profile' },
+    ],
+    mobileTabs: [
+      { label: 'Topics', icon: 'Hash', path: '/topics' },
+      { label: 'Popular', icon: 'TrendingUp', path: '/popular' },
+      { label: 'Notifications', icon: 'Bell', path: '/notifications' },
+      { label: 'Me', icon: 'User', path: '/profile' },
+    ],
+    defaultRoute: '/topics',
+    routes: [
+      {
+        path: '/topics',
+        component: lazy(() => import('./pages/TopicsPage').then(m => ({ default: m.TopicsPage }))),
+        label: 'Topics',
+      },
+      {
+        path: '/popular',
+        component: lazy(() => import('./pages/TopicsPage').then(m => ({ default: m.TopicsPage }))),
+        label: 'Popular',
+      },
+      {
+        path: '/notifications',
+        component: lazy(() =>
+          import('./pages/NotificationPage').then(m => ({ default: m.NotificationPage }))
+        ),
+        label: 'Notifications',
+      },
+      {
+        path: '/profile',
+        component: lazy(() =>
+          import('./pages/ProfilePage').then(m => ({ default: m.ProfilePage }))
+        ),
+        label: 'Profile',
+      },
+      {
+        path: '/login',
+        component: lazy(() => import('./pages/LoginPage').then(m => ({ default: m.LoginPage }))),
+        label: 'Login',
+      },
+      {
+        path: '/register',
+        component: lazy(() =>
+          import('./pages/RegisterPage').then(m => ({ default: m.RegisterPage }))
+        ),
+        label: 'Register',
+      },
+    ],
+  },
+}
+
+// Preset ID aliases: deployed preset IDs may differ from internal config keys
+const PRESET_ALIASES: Record<string, PresetType> = {
+  forum: 'community',
+  'xbrowser-marketplace': 'plugin',
+  'fullstack-admin': 'saas',
+  'todo-app': 'todo',
 }
 
 export function getPresetUIConfig(id: string): PresetUIConfig {
-  return PRESET_UI_CONFIGS[id as PresetType] ?? PRESET_UI_CONFIGS.todo
+  const resolvedId = PRESET_ALIASES[id] ?? (id as PresetType)
+  return PRESET_UI_CONFIGS[resolvedId] ?? PRESET_UI_CONFIGS.todo
 }
 
 export function getPresetUIConfigs(): Record<PresetType, PresetUIConfig> {

package/template/src/server/db/init.ts

@@ -571,6 +571,395 @@ async function seedPluginsIfEmpty() {
       screenshotUrl: 'https://picsum.photos/seed/notify/800/400',
       tags: '["notification","email","push"]',
     },
+    {
+      id: generateUUID(),
+      slug: 'form-builder',
+      name: 'Form Builder',
+      description:
+        'Drag-and-drop form creation with validation rules, conditional logic, and file uploads.',
+      readme:
+        '# Form Builder\n\nCreate complex forms with ease using our visual drag-and-drop builder.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/form-builder',
+      homepageUrl: 'https://form-builder.example.com',
+      license: 'MIT',
+      version: '3.2.1',
+      status: 'approved' as const,
+      downloadCount: 3420,
+      viewCount: 8900,
+      featured: true,
+      screenshotUrl: 'https://picsum.photos/seed/formbuilder/800/400',
+      tags: '["forms","validation","drag-drop"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'image-optimizer',
+      name: 'Image Optimizer',
+      description:
+        'Automatic image compression and format conversion with lazy loading and responsive srcset support.',
+      readme: '# Image Optimizer\n\nOptimize images automatically for faster page loads.',
+      authorId: '2',
+      authorName: 'customerservice',
+      repositoryUrl: 'https://github.com/example/image-optimizer',
+      license: 'MIT',
+      version: '2.0.0',
+      status: 'approved' as const,
+      downloadCount: 2890,
+      viewCount: 6500,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/imgopt/800/400',
+      tags: '["image","optimization","performance"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'cache-manager',
+      name: 'Cache Manager',
+      description:
+        'Redis-powered caching layer with TTL management, cache invalidation, and tag-based purging.',
+      readme: '# Cache Manager\n\nSmart caching for high-performance applications.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/cache-manager',
+      homepageUrl: 'https://cache-manager.example.com',
+      license: 'Apache-2.0',
+      version: '1.8.0',
+      status: 'approved' as const,
+      downloadCount: 1560,
+      viewCount: 4200,
+      featured: true,
+      screenshotUrl: 'https://picsum.photos/seed/cache/800/400',
+      tags: '["cache","redis","performance"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'auth-guard',
+      name: 'Auth Guard',
+      description:
+        'Advanced authentication flows with OAuth2, SAML, and biometric support including session management.',
+      readme: '# Auth Guard\n\nEnterprise-grade authentication for modern apps.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/auth-guard',
+      homepageUrl: 'https://auth-guard.example.com',
+      license: 'MIT',
+      version: '4.1.0',
+      status: 'approved' as const,
+      downloadCount: 4210,
+      viewCount: 9800,
+      featured: true,
+      screenshotUrl: 'https://picsum.photos/seed/authguard/800/400',
+      tags: '["auth","oauth","security"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'payment-gateway',
+      name: 'Payment Gateway',
+      description:
+        'Stripe and PayPal integration with subscription management, invoicing, and refund handling.',
+      readme: '# Payment Gateway\n\nAccept payments globally with multiple providers.',
+      authorId: '2',
+      authorName: 'customerservice',
+      repositoryUrl: 'https://github.com/example/payment-gateway',
+      homepageUrl: 'https://payment-gateway.example.com',
+      license: 'MIT',
+      version: '2.3.0',
+      status: 'approved' as const,
+      downloadCount: 3100,
+      viewCount: 7800,
+      featured: true,
+      screenshotUrl: 'https://picsum.photos/seed/payment/800/400',
+      tags: '["payment","stripe","subscription"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'chat-widget',
+      name: 'Chat Widget',
+      description:
+        'Real-time customer support chat with AI-powered auto-replies and conversation routing.',
+      readme: '# Chat Widget\n\nLive chat support for your customers.',
+      authorId: '3',
+      authorName: 'user1',
+      repositoryUrl: 'https://github.com/example/chat-widget',
+      license: 'ISC',
+      version: '1.4.2',
+      status: 'approved' as const,
+      downloadCount: 1870,
+      viewCount: 5200,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/chatwidget/800/400',
+      tags: '["chat","support","real-time"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'backup-manager',
+      name: 'Backup Manager',
+      description:
+        'Automated database backups with scheduling, encryption, and cloud storage integration.',
+      readme: '# Backup Manager\n\nNever lose data with automated backups.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/backup-manager',
+      license: 'MIT',
+      version: '1.1.0',
+      status: 'approved' as const,
+      downloadCount: 980,
+      viewCount: 2900,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/backup/800/400',
+      tags: '["backup","database","scheduling"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'rate-limiter',
+      name: 'Rate Limiter',
+      description:
+        'API rate limiting middleware with sliding window, token bucket, and fixed window algorithms.',
+      readme: '# Rate Limiter\n\nProtect your APIs from abuse.',
+      authorId: '2',
+      authorName: 'customerservice',
+      repositoryUrl: 'https://github.com/example/rate-limiter',
+      homepageUrl: 'https://rate-limiter.example.com',
+      license: 'MIT',
+      version: '2.0.0',
+      status: 'approved' as const,
+      downloadCount: 1340,
+      viewCount: 3800,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/ratelimit/800/400',
+      tags: '["rate-limit","api","middleware"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'email-templates',
+      name: 'Email Templates',
+      description:
+        'Responsive email builder with template variables, preview mode, and SMTP integration.',
+      readme: '# Email Templates\n\nBeautiful emails that work everywhere.',
+      authorId: '3',
+      authorName: 'user1',
+      repositoryUrl: 'https://github.com/example/email-templates',
+      license: 'Apache-2.0',
+      version: '1.6.0',
+      status: 'approved' as const,
+      downloadCount: 2100,
+      viewCount: 5600,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/emailtpl/800/400',
+      tags: '["email","templates","smtp"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'search-engine',
+      name: 'Search Engine',
+      description:
+        'Elasticsearch integration with faceted search, autocomplete, and relevance tuning.',
+      readme: '# Search Engine\n\nPowerful full-text search for your application.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/search-engine',
+      homepageUrl: 'https://search-engine.example.com',
+      license: 'MIT',
+      version: '3.0.0',
+      status: 'approved' as const,
+      downloadCount: 2560,
+      viewCount: 7100,
+      featured: true,
+      screenshotUrl: 'https://picsum.photos/seed/searcheng/800/400',
+      tags: '["search","elasticsearch","full-text"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'cdn-manager',
+      name: 'CDN Manager',
+      description:
+        'Content delivery network controls with cache purging, URL signing, and geo-routing.',
+      readme: '# CDN Manager\n\nDeliver content faster globally.',
+      authorId: '2',
+      authorName: 'customerservice',
+      repositoryUrl: 'https://github.com/example/cdn-manager',
+      license: 'MIT',
+      version: '1.3.0',
+      status: 'approved' as const,
+      downloadCount: 870,
+      viewCount: 2400,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/cdn/800/400',
+      tags: '["cdn","caching","delivery"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'logger-pro',
+      name: 'Logger Pro',
+      description:
+        'Structured logging with severity levels, log rotation, and remote aggregation support.',
+      readme: '# Logger Pro\n\nEnterprise logging made simple.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/logger-pro',
+      license: 'BSD-3-Clause',
+      version: '2.1.0',
+      status: 'approved' as const,
+      downloadCount: 1190,
+      viewCount: 3300,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/logger/800/400',
+      tags: '["logging","monitoring","structured"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'task-scheduler',
+      name: 'Task Scheduler',
+      description:
+        'Cron job management with retry policies, concurrency controls, and execution history.',
+      readme: '# Task Scheduler\n\nAutomate recurring tasks with confidence.',
+      authorId: '3',
+      authorName: 'user1',
+      repositoryUrl: 'https://github.com/example/task-scheduler',
+      homepageUrl: 'https://task-scheduler.example.com',
+      license: 'MIT',
+      version: '1.5.0',
+      status: 'approved' as const,
+      downloadCount: 1780,
+      viewCount: 4900,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/tasksched/800/400',
+      tags: '["scheduler","cron","automation"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'ab-testing',
+      name: 'A/B Testing',
+      description:
+        'Experiment framework with statistical significance calculation and variant allocation.',
+      readme: '# A/B Testing\n\nData-driven decisions through controlled experiments.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/ab-testing',
+      license: 'Apache-2.0',
+      version: '1.0.0',
+      status: 'approved' as const,
+      downloadCount: 640,
+      viewCount: 2100,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/abtest/800/400',
+      tags: '["testing","experiment","analytics"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'markdown-editor',
+      name: 'Markdown Editor',
+      description:
+        'Rich text editing with Markdown support, syntax highlighting, and live preview.',
+      readme: '# Markdown Editor\n\nWrite beautifully with Markdown.',
+      authorId: '2',
+      authorName: 'customerservice',
+      repositoryUrl: 'https://github.com/example/markdown-editor',
+      homepageUrl: 'https://md-editor.example.com',
+      license: 'MIT',
+      version: '2.4.0',
+      status: 'approved' as const,
+      downloadCount: 2950,
+      viewCount: 7400,
+      featured: true,
+      screenshotUrl: 'https://picsum.photos/seed/mdeditor/800/400',
+      tags: '["markdown","editor","rich-text"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'webhook-manager',
+      name: 'Webhook Manager',
+      description:
+        'Outgoing webhook automation with retry logic, payload templating, and delivery tracking.',
+      readme: '# Webhook Manager\n\nReliable webhook delivery for your integrations.',
+      authorId: '3',
+      authorName: 'user1',
+      repositoryUrl: 'https://github.com/example/webhook-manager',
+      license: 'MIT',
+      version: '1.2.0',
+      status: 'pending' as const,
+      downloadCount: 520,
+      viewCount: 1800,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/webhook/800/400',
+      tags: '["webhook","automation","integration"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'two-factor-auth',
+      name: 'Two-Factor Auth',
+      description: '2FA/MFA support with TOTP, SMS OTP, and hardware key authentication methods.',
+      readme: '# Two-Factor Auth\n\nAdd an extra layer of security.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/two-factor-auth',
+      license: 'MIT',
+      version: '1.7.0',
+      status: 'approved' as const,
+      downloadCount: 2340,
+      viewCount: 6100,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/2fa/800/400',
+      tags: '["2fa","security","authentication"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'database-browser',
+      name: 'Database Browser',
+      description:
+        'GUI interface for browsing tables, running queries, and visualizing schema relationships.',
+      readme: '# Database Browser\n\nExplore your data visually.',
+      authorId: '2',
+      authorName: 'customerservice',
+      repositoryUrl: 'https://github.com/example/database-browser',
+      license: 'GPL-3.0',
+      version: '1.0.0',
+      status: 'pending' as const,
+      downloadCount: 340,
+      viewCount: 1200,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/dbbrowser/800/400',
+      tags: '["database","gui","query"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'performance-monitor',
+      name: 'Performance Monitor',
+      description:
+        'Core Web Vitals tracking with real user monitoring, alerts, and performance budgets.',
+      readme: '# Performance Monitor\n\nKeep your app fast and responsive.',
+      authorId: '1',
+      authorName: 'superadmin',
+      repositoryUrl: 'https://github.com/example/performance-monitor',
+      homepageUrl: 'https://perf-monitor.example.com',
+      license: 'MIT',
+      version: '2.0.0',
+      status: 'approved' as const,
+      downloadCount: 1890,
+      viewCount: 5300,
+      featured: true,
+      screenshotUrl: 'https://picsum.photos/seed/perfmon/800/400',
+      tags: '["performance","monitoring","web-vitals"]',
+    },
+    {
+      id: generateUUID(),
+      slug: 'i18n-manager',
+      name: 'i18n Manager',
+      description:
+        'Internationalization toolkit with translation memory, pluralization, and RTL support.',
+      readme: '# i18n Manager\n\nGo global with multilingual support.',
+      authorId: '3',
+      authorName: 'user1',
+      repositoryUrl: 'https://github.com/example/i18n-manager',
+      license: 'MIT',
+      version: '1.3.0',
+      status: 'approved' as const,
+      downloadCount: 1450,
+      viewCount: 4100,
+      featured: false,
+      screenshotUrl: 'https://picsum.photos/seed/i18n/800/400',
+      tags: '["i18n","translation","localization"]',
+    },
   ]
 
   await db.insert(plugins).values(samplePlugins)

package/template/src/server/module-content/routes/topics-routes.ts

@@ -101,6 +101,256 @@ const MOCK_TOPICS = [
     author: { name: 'Emma Wilson', initials: 'EW' },
     createdAt: '12h ago',
   },
+  {
+    id: '7',
+    title: 'Optimizing React components with useMemo and useCallback',
+    excerpt:
+      'Understanding when and how to use React hooks for performance optimization. Real-world examples and benchmarks showing measurable improvements.',
+    votes: 45,
+    replyCount: 15,
+    viewCount: 678,
+    status: 'discussion' as const,
+    tags: [
+      { label: 'React', color: 'bg-cyan-100 text-cyan-700' },
+      { label: 'Performance', color: 'bg-amber-100 text-amber-700' },
+    ],
+    author: { name: '张伟', initials: 'ZW' },
+    createdAt: '1d ago',
+  },
+  {
+    id: '8',
+    title: 'PostgreSQL query optimization for large datasets',
+    excerpt:
+      'Strategies for handling millions of rows with efficient indexing, query planning, and materialized views. Includes EXPLAIN ANALYZE walkthrough.',
+    votes: 89,
+    replyCount: 23,
+    viewCount: 1567,
+    status: 'hot' as const,
+    tags: [
+      { label: 'PostgreSQL', color: 'bg-blue-100 text-blue-700' },
+      { label: 'Database', color: 'bg-indigo-100 text-indigo-700' },
+      { label: 'Performance', color: 'bg-amber-100 text-amber-700' },
+    ],
+    author: { name: 'Raj Sharma', initials: 'RS' },
+    createdAt: '1d ago',
+  },
+  {
+    id: '9',
+    title: 'Implementing JWT authentication with refresh tokens',
+    excerpt:
+      'Secure authentication flow with JWT access tokens and refresh tokens. Best practices for token storage, rotation, and revocation.',
+    votes: 72,
+    replyCount: 18,
+    viewCount: 1245,
+    status: 'solved' as const,
+    tags: [
+      { label: 'Auth', color: 'bg-rose-100 text-rose-700' },
+      { label: 'Security', color: 'bg-red-100 text-red-700' },
+      { label: 'JWT', color: 'bg-pink-100 text-pink-700' },
+    ],
+    author: { name: '田中太郎', initials: 'TT' },
+    createdAt: '2d ago',
+  },
+  {
+    id: '10',
+    title: 'Building microservices with Docker and Kubernetes',
+    excerpt:
+      'Complete guide to containerizing Node.js applications and orchestrating them with Kubernetes. Includes service discovery, load balancing, and autoscaling.',
+    votes: 103,
+    replyCount: 31,
+    viewCount: 1890,
+    status: 'hot' as const,
+    tags: [
+      { label: 'Docker', color: 'bg-sky-100 text-sky-700' },
+      { label: 'Kubernetes', color: 'bg-blue-100 text-blue-700' },
+      { label: 'Microservices', color: 'bg-violet-100 text-violet-700' },
+    ],
+    author: { name: 'Marie Dubois', initials: 'MD' },
+    createdAt: '2d ago',
+  },
+  {
+    id: '11',
+    title: 'Writing accessible React applications',
+    excerpt:
+      'Essential ARIA patterns and semantic HTML for building inclusive web apps. Screen reader testing checklist and common accessibility pitfalls.',
+    votes: 58,
+    replyCount: 14,
+    viewCount: 923,
+    status: 'open' as const,
+    tags: [
+      { label: 'Accessibility', color: 'bg-emerald-100 text-emerald-700' },
+      { label: 'React', color: 'bg-cyan-100 text-cyan-700' },
+      { label: 'A11y', color: 'bg-lime-100 text-lime-700' },
+    ],
+    author: { name: '김민수', initials: 'KM' },
+    createdAt: '3d ago',
+  },
+  {
+    id: '12',
+    title: 'TypeScript utility types explained with examples',
+    excerpt:
+      'Deep dive into TypeScript utility types like Pick, Omit, Partial, Record, and more. Practical examples for everyday use.',
+    votes: 81,
+    replyCount: 22,
+    viewCount: 1456,
+    status: 'hot' as const,
+    tags: [
+      { label: 'TypeScript', color: 'bg-blue-100 text-blue-700' },
+      { label: 'Guide', color: 'bg-emerald-100 text-emerald-700' },
+    ],
+    author: { name: 'Anna Müller', initials: 'AM' },
+    createdAt: '3d ago',
+  },
+  {
+    id: '13',
+    title: 'Redis caching strategies for high-traffic APIs',
+    excerpt:
+      'Implementing Redis caching layers for REST APIs. Cache invalidation strategies, TTL policies, and handling cache stampedes.',
+    votes: 64,
+    replyCount: 9,
+    viewCount: 1012,
+    status: 'solved' as const,
+    tags: [
+      { label: 'Redis', color: 'bg-red-100 text-red-700' },
+      { label: 'Caching', color: 'bg-orange-100 text-orange-700' },
+      { label: 'API', color: 'bg-sky-100 text-sky-700' },
+    ],
+    author: { name: 'Carlos Silva', initials: 'CS' },
+    createdAt: '3d ago',
+  },
+  {
+    id: '14',
+    title: 'GraphQL Federation for microservices architecture',
+    excerpt:
+      'Combining multiple GraphQL services into a unified API with Apollo Federation. Schema stitching, type composition, and distributed tracing.',
+    votes: 47,
+    replyCount: 0,
+    viewCount: 623,
+    status: 'unanswered' as const,
+    tags: [
+      { label: 'GraphQL', color: 'bg-pink-100 text-pink-700' },
+      { label: 'Microservices', color: 'bg-violet-100 text-violet-700' },
+    ],
+    author: { name: '李明', initials: 'LM' },
+    createdAt: '4h ago',
+  },
+  {
+    id: '15',
+    title: 'Testing React components with Vitest and Testing Library',
+    excerpt:
+      'Modern testing setup with Vitest and React Testing Library. Writing maintainable tests, mocking external dependencies, and snapshot testing.',
+    votes: 76,
+    replyCount: 17,
+    viewCount: 1234,
+    status: 'discussion' as const,
+    tags: [
+      { label: 'Testing', color: 'bg-amber-100 text-amber-700' },
+      { label: 'React', color: 'bg-cyan-100 text-cyan-700' },
+      { label: 'Vitest', color: 'bg-purple-100 text-purple-700' },
+    ],
+    author: { name: 'Elena Popova', initials: 'EP' },
+    createdAt: '5h ago',
+  },
+  {
+    id: '16',
+    title: 'RESTful API design best practices',
+    excerpt:
+      'Comprehensive guide to designing REST APIs. Resource naming, HTTP methods, status codes, pagination, filtering, and versioning strategies.',
+    votes: 92,
+    replyCount: 28,
+    viewCount: 1678,
+    status: 'hot' as const,
+    tags: [
+      { label: 'API Design', color: 'bg-sky-100 text-sky-700' },
+      { label: 'REST', color: 'bg-emerald-100 text-emerald-700' },
+      { label: 'Architecture', color: 'bg-orange-100 text-orange-700' },
+    ],
+    author: { name: '佐藤健', initials: 'SK' },
+    createdAt: '6h ago',
+  },
+  {
+    id: '17',
+    title: 'CSS Grid vs Flexbox — when to use which?',
+    excerpt:
+      'Practical comparison of CSS Grid and Flexbox layouts. Use cases, browser support, and examples of combining both for complex layouts.',
+    votes: 39,
+    replyCount: 8,
+    viewCount: 567,
+    status: 'open' as const,
+    tags: [
+      { label: 'CSS', color: 'bg-indigo-100 text-indigo-700' },
+      { label: 'Layout', color: 'bg-purple-100 text-purple-700' },
+    ],
+    author: { name: 'Olga Ivanova', initials: 'OI' },
+    createdAt: '8h ago',
+  },
+  {
+    id: '18',
+    title: 'Setting up CI/CD pipeline with GitHub Actions',
+    excerpt:
+      'Automating testing, building, and deployment with GitHub Actions. Multi-environment configs, secrets management, and deployment strategies.',
+    votes: 68,
+    replyCount: 13,
+    viewCount: 1102,
+    status: 'solved' as const,
+    tags: [
+      { label: 'CI/CD', color: 'bg-rose-100 text-rose-700' },
+      { label: 'GitHub', color: 'bg-slate-100 text-slate-700' },
+      { label: 'DevOps', color: 'bg-blue-100 text-blue-700' },
+    ],
+    author: { name: '黄志强', initials: 'HZ' },
+    createdAt: '30m ago',
+  },
+  {
+    id: '19',
+    title: 'Node.js event loop explained in depth',
+    excerpt:
+      'Understanding the Node.js event loop, call stack, and asynchronous operations. Performance implications and best practices for event-driven apps.',
+    votes: 55,
+    replyCount: 11,
+    viewCount: 845,
+    status: 'discussion' as const,
+    tags: [
+      { label: 'Node.js', color: 'bg-green-100 text-green-700' },
+      { label: 'Performance', color: 'bg-amber-100 text-amber-700' },
+    ],
+    author: { name: 'Giovanni Rossi', initials: 'GR' },
+    createdAt: '45m ago',
+  },
+  {
+    id: '20',
+    title: 'Handling file uploads in multipart/form-data with Hono',
+    excerpt:
+      'Implementing secure file upload endpoints in Hono. Validation, storage with R2, handling large files, and progress tracking.',
+    votes: 71,
+    replyCount: 16,
+    viewCount: 1323,
+    status: 'solved' as const,
+    tags: [
+      { label: 'Hono', color: 'bg-sky-100 text-sky-700' },
+      { label: 'File Upload', color: 'bg-indigo-100 text-indigo-700' },
+      { label: 'R2', color: 'bg-amber-100 text-amber-700' },
+    ],
+    author: { name: 'Priya Patel', initials: 'PP' },
+    createdAt: '2h ago',
+  },
+  {
+    id: '21',
+    title: 'Debouncing and throttling in React applications',
+    excerpt:
+      'Implementing debouncing and throttling for search inputs, scroll events, and API calls. Custom hooks and performance considerations.',
+    votes: 33,
+    replyCount: 5,
+    viewCount: 445,
+    status: 'open' as const,
+    tags: [
+      { label: 'React', color: 'bg-cyan-100 text-cyan-700' },
+      { label: 'Performance', color: 'bg-amber-100 text-amber-700' },
+      { label: 'Hooks', color: 'bg-pink-100 text-pink-700' },
+    ],
+    author: { name: '山本花子', initials: 'YH' },
+    createdAt: '1w ago',
+  },
 ]
 
 const MOCK_PROFILE_ACTIVITY = [

package/template/src/server/module-content/services/content-service.ts

@@ -42,7 +42,7 @@ export async function seedContentsIfEmpty(): Promise<void> {
       JSON.stringify(['最佳实践', '经验']),
     ]
 
-    for (let i = 0; i < 20; i++) {
+    for (let i = 0; i < 25; i++) {
       const category = randomElement(CATEGORIES)
       const status = randomElement(STATUSES)
       const createdAt = new Date(randomDate(new Date('2024-01-01'), new Date()))

package/template/src/server/module-todos/services/todo-service.ts

@@ -45,7 +45,7 @@ export async function seedTodosIfEmpty(): Promise<void> {
   const existing = await db.select().from(todos)
   if (existing.length === 0) {
     const STATUS = ['pending', 'in_progress', 'completed'] as const
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 25; i++) {
       const createdAt = new Date(randomDate(new Date('2024-01-01'), new Date()))
       await db.insert(todos).values({
         title: TODO_TITLES[i % TODO_TITLES.length],