create-fullstack-scaffold 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fullstack-scaffold",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "type": "module",
   "bin": {
     "create-fullstack-scaffold": "dist/cli/index.js"
@@ -107,6 +107,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.13.1",
     "ws": "^8.18.3",
+    "tsx": "^4.21.0",
     "zod": "^4.4.3",
     "zustand": "^5.0.2"
   },
@@ -150,7 +151,6 @@
     "tailwindcss": "^4.2.1",
     "ts-import": "^5.0.0-beta.1",
     "tsup": "^8.5.0",
-    "tsx": "^4.21.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.25.0",
     "vite": "^6.2.3",

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> {