create-fullstack-scaffold 0.1.0

package/template/src/client/main.tsx

@@ -0,0 +1,25 @@
+/**
+ * Application entry point
+ */
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { HelmetProvider } from 'react-helmet-async'
+import { App } from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
+  </React.StrictMode>
+)
+
+if (typeof window !== 'undefined') {
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      document.dispatchEvent(new CustomEvent('prerender-ready'))
+    }, 100)
+  })
+}

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

@@ -0,0 +1,142 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { Helmet } from 'react-helmet-async'
+import type { Content } from '@shared/modules/content'
+import { apiClient } from '@client/services/apiClient'
+
+export const ContentDetailPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>()
+  const [content, setContent] = useState<Content | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (id) fetchContent(id)
+  }, [id])
+
+  const fetchContent = async (contentId: string) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await apiClient.api.public.contents[':id'].$get({
+        param: { id: contentId },
+      })
+      if (!res.ok) {
+        if (res.status === 404) {
+          setError('内容不存在')
+        } else {
+          setError('加载失败')
+        }
+        return
+      }
+      const result = await res.json()
+      if (result.success) {
+        setContent(result.data ?? null)
+      } else {
+        setError('Failed to fetch content')
+      }
+    } catch {
+      setError('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const formatDate = (dateStr: string | null | undefined) => {
+    if (!dateStr) return ''
+    return new Date(dateStr).toLocaleDateString('zh-CN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  }
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto p-6">
+        <div className="text-center py-12 text-gray-500">加载中...</div>
+      </div>
+    )
+  }
+
+  if (error || !content) {
+    return (
+      <div className="max-w-4xl mx-auto p-6">
+        <div className="text-center py-12">
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+            {error || '内容不存在'}
+          </h1>
+          <Link to="/content" className="text-blue-600 hover:underline">
+            ← 返回内容列表
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{content.title} - Biomimic App</title>
+        <meta name="description" content={content.content.slice(0, 160)} />
+        <meta property="og:title" content={content.title} />
+        <meta property="og:description" content={content.content.slice(0, 200)} />
+        <meta property="og:type" content="article" />
+        {content.publishedAt && (
+          <meta property="article:published_time" content={content.publishedAt} />
+        )}
+        {content.author && <meta property="article:author" content={content.author} />}
+        {content.tags?.map(tag => (
+          <meta key={tag} property="article:tag" content={tag} />
+        ))}
+      </Helmet>
+
+      <div className="max-w-4xl mx-auto p-6" data-testid="content-detail-page">
+        <nav className="mb-6 text-sm text-gray-500">
+          <Link to="/content" className="hover:text-blue-600">
+            内容中心
+          </Link>
+          <span className="mx-2">/</span>
+          <span className="text-gray-900">{content.category}</span>
+        </nav>
+
+        <article className="bg-white rounded-xl border border-gray-200 p-8">
+          <header className="mb-8 pb-6 border-b border-gray-100">
+            <div className="flex items-center gap-2 mb-3">
+              <span className="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
+                {content.category}
+              </span>
+              {content.tags?.map(tag => (
+                <span
+                  key={tag}
+                  className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-4">{content.title}</h1>
+            <div className="flex items-center gap-4 text-sm text-gray-500">
+              {content.author && <span>✍ {content.author}</span>}
+              {content.publishedAt && <span>📅 {formatDate(content.publishedAt)}</span>}
+              <span>👁 {content.viewCount} 阅读</span>
+              <span>❤ {content.likeCount} 喜欢</span>
+            </div>
+          </header>
+
+          <div className="prose prose-gray max-w-none">
+            <div className="whitespace-pre-wrap text-gray-700 leading-relaxed">
+              {content.content}
+            </div>
+          </div>
+        </article>
+
+        <div className="mt-6">
+          <Link to="/content" className="text-blue-600 hover:underline">
+            ← 返回内容列表
+          </Link>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,169 @@
+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 { apiClient } from '@client/services/apiClient'
+
+const CATEGORIES: { value: ContentCategory | ''; label: string }[] = [
+  { value: '', label: '全部' },
+  { value: 'article', label: '文章' },
+  { value: 'announcement', label: '公告' },
+  { value: 'tutorial', label: '教程' },
+  { value: 'news', label: '新闻' },
+  { value: 'policy', label: '政策' },
+]
+
+export const ContentListPage: React.FC = () => {
+  const [contents, setContents] = useState<Content[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [category, setCategory] = useState<ContentCategory | ''>('')
+  const [search, setSearch] = useState('')
+
+  const fetchContents = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await apiClient.api.public.contents.$get({
+        query: {
+          ...(category ? { category } : {}),
+          ...(search ? { search } : {}),
+          limit: 20,
+        },
+      })
+      const result = await res.json()
+      if (result.success) {
+        const data = result.data
+        setContents(Array.isArray(data) ? data : [])
+      } else {
+        setError('Failed to fetch contents')
+      }
+    } catch {
+      setError('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }, [category, search])
+
+  useEffect(() => {
+    fetchContents()
+  }, [fetchContents])
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    fetchContents()
+  }
+
+  const categoryLabel = (cat: ContentCategory) => {
+    return CATEGORIES.find(c => c.value === cat)?.label ?? cat
+  }
+
+  const formatDate = (dateStr: string | null | undefined) => {
+    if (!dateStr) return ''
+    return new Date(dateStr).toLocaleDateString('zh-CN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>内容 - Biomimic App</title>
+        <meta name="description" content="浏览最新的文章、公告、教程和新闻" />
+        <meta property="og:title" content="内容 - Biomimic App" />
+        <meta property="og:description" content="浏览最新的文章、公告、教程和新闻" />
+      </Helmet>
+
+      <div className="max-w-4xl mx-auto p-6" data-testid="content-list-page">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">内容中心</h1>
+          <p className="mt-2 text-gray-600">浏览最新的文章、公告、教程和新闻</p>
+        </div>
+
+        <div className="mb-6 flex flex-col sm:flex-row gap-4">
+          <div className="flex gap-2 flex-wrap">
+            {CATEGORIES.map(cat => (
+              <button
+                key={cat.value}
+                onClick={() => setCategory(cat.value)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  category === cat.value
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                {cat.label}
+              </button>
+            ))}
+          </div>
+
+          <form onSubmit={handleSearch} className="flex gap-2 sm:ml-auto">
+            <input
+              type="text"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="搜索内容..."
+              className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+            />
+            <button
+              type="submit"
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              搜索
+            </button>
+          </form>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+            {error}
+          </div>
+        )}
+
+        {loading && (
+          <div className="text-center py-12 text-gray-500">加载中...</div>
+        )}
+
+        {!loading && !error && contents.length === 0 && (
+          <div className="text-center py-12 text-gray-500">暂无内容</div>
+        )}
+
+        {!loading && contents.length > 0 && (
+          <div className="space-y-4">
+            {contents.map(content => (
+              <Link
+                key={content.id}
+                to={`/content/${content.id}`}
+                className="block p-6 bg-white rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">
+                        {categoryLabel(content.category)}
+                      </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>}
+                      <span>👁 {content.viewCount}</span>
+                      <span>❤ {content.likeCount}</span>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,288 @@
+/**
+ * Notification Page
+ * Demonstrates SSE (Server-Sent Events) with Hono RPC
+ */
+
+import { useState, useEffect } from 'react'
+import { Helmet } from 'react-helmet-async'
+import {
+  Bell,
+  Wifi,
+  WifiOff,
+  CheckCheck,
+  Trash2,
+  Send,
+  Info,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+} from 'lucide-react'
+import { useNotificationStore } from '../stores/notificationStore'
+import { LoadingSpinner, EmptyState, StatusBadge } from '@client/components'
+import type { NotificationType } from '@shared/schemas'
+
+export const NotificationPage: React.FC = () => {
+  const notifications = useNotificationStore(state => state.notifications)
+  const unreadCount = useNotificationStore(state => state.unreadCount)
+  const sseConnected = useNotificationStore(state => state.sseConnected)
+  const loading = useNotificationStore(state => state.loading)
+  const error = useNotificationStore(state => state.error)
+  const {
+    fetchNotifications,
+    createNotification,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    connectSSE,
+    disconnectSSE,
+  } = useNotificationStore()
+
+  const [title, setTitle] = useState('')
+  const [message, setMessage] = useState('')
+  const [type, setType] = useState<NotificationType>('info')
+
+  useEffect(() => {
+    fetchNotifications()
+  }, [fetchNotifications])
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!title.trim() || !message.trim()) return
+
+    await createNotification({ type, title, message })
+    setTitle('')
+    setMessage('')
+  }
+
+  const typeConfig = {
+    info: {
+      icon: Info,
+      colorScheme: 'blue' as const,
+      border: 'border-blue-400',
+      lightBg: 'bg-blue-50',
+    },
+    warning: {
+      icon: AlertTriangle,
+      colorScheme: 'yellow' as const,
+      border: 'border-yellow-400',
+      lightBg: 'bg-yellow-50',
+    },
+    success: {
+      icon: CheckCircle,
+      colorScheme: 'green' as const,
+      border: 'border-green-400',
+      lightBg: 'bg-green-50',
+    },
+    error: {
+      icon: XCircle,
+      colorScheme: 'red' as const,
+      border: 'border-red-400',
+      lightBg: 'bg-red-50',
+    },
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto p-6" data-testid="notification-container">
+      <Helmet>
+        <title>Notifications - Biomimic App</title>
+        <meta name="description" content="Real-time notifications powered by Server-Sent Events" />
+        <meta property="og:title" content="Notifications - Biomimic App" />
+        <meta property="og:description" content="Real-time notifications powered by Server-Sent Events" />
+      </Helmet>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-2">
+          <Bell className="w-8 h-8 text-purple-500" />
+          Notifications
+        </h1>
+        <p className="text-gray-500 mt-2">
+          Demonstrates SSE (Server-Sent Events) with Hono RPC type inference
+        </p>
+      </div>
+
+      <div className="mb-6 p-4 bg-white rounded-xl shadow-sm border border-gray-200 flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-gray-700">SSE Status:</span>
+            {sseConnected ? (
+              <span
+                className="flex items-center gap-1 text-green-600"
+                data-testid="sse-status-connected"
+              >
+                <Wifi className="w-4 h-4" />
+                Connected
+              </span>
+            ) : (
+              <span
+                className="flex items-center gap-1 text-red-500"
+                data-testid="sse-status-disconnected"
+              >
+                <WifiOff className="w-4 h-4" />
+                Disconnected
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-gray-700">Unread:</span>
+            <span
+              className="px-2.5 py-0.5 bg-blue-500 text-white text-sm font-medium rounded-full"
+              data-testid="unread-count"
+            >
+              {unreadCount}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={connectSSE}
+            disabled={sseConnected}
+            className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              sseConnected
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-green-500 text-white hover:bg-green-600'
+            }`}
+            data-testid="connect-sse-button"
+          >
+            <Wifi className="w-4 h-4" />
+            Connect
+          </button>
+          <button
+            onClick={disconnectSSE}
+            disabled={!sseConnected}
+            className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              !sseConnected
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-red-500 text-white hover:bg-red-600'
+            }`}
+            data-testid="disconnect-sse-button"
+          >
+            <WifiOff className="w-4 h-4" />
+            Disconnect
+          </button>
+          <button
+            onClick={markAllAsRead}
+            className="flex items-center gap-1.5 px-4 py-2 bg-gray-500 text-white rounded-lg text-sm font-medium hover:bg-gray-600 transition-colors"
+            data-testid="mark-all-read-button"
+          >
+            <CheckCheck className="w-4 h-4" />
+            Mark All Read
+          </button>
+        </div>
+      </div>
+
+      <form
+        onSubmit={handleCreate}
+        className="mb-8 p-6 bg-white rounded-xl shadow-sm border border-gray-200"
+      >
+        <div className="flex gap-4 mb-4">
+          <select
+            value={type}
+            onChange={e => setType(e.target.value as NotificationType)}
+            className="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none"
+            data-testid="notification-type-select"
+          >
+            <option value="info">Info</option>
+            <option value="warning">Warning</option>
+            <option value="success">Success</option>
+            <option value="error">Error</option>
+          </select>
+          <input
+            type="text"
+            value={title}
+            onChange={e => setTitle(e.target.value)}
+            placeholder="Title..."
+            className="flex-1 px-4 py-3 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none"
+            data-testid="notification-title-input"
+          />
+        </div>
+        <div className="mb-4">
+          <textarea
+            value={message}
+            onChange={e => setMessage(e.target.value)}
+            placeholder="Message..."
+            className="w-full px-4 py-3 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none resize-none min-h-[100px]"
+            data-testid="notification-message-input"
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={!title.trim() || !message.trim() || loading}
+          className="flex items-center gap-2 px-6 py-3 text-base font-medium text-white bg-purple-500 rounded-lg hover:bg-purple-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+          data-testid="create-notification-button"
+        >
+          {loading ? <LoadingSpinner size="sm" color="text-white" /> : <Send className="w-5 h-5" />}
+          Create Notification
+        </button>
+      </form>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
+          {error}
+        </div>
+      )}
+
+      <div className="space-y-4">
+        {notifications.map(notification => {
+          const config = typeConfig[notification.type] ?? typeConfig.info
+          const TypeIcon = config.icon
+          return (
+            <div
+              key={notification.id}
+              className={`p-5 rounded-xl border-l-4 transition-all ${
+                notification.read
+                  ? 'bg-gray-50 border-gray-200'
+                  : 'bg-white border-gray-200 shadow-sm'
+              } ${config.border}`}
+              data-testid={
+                notification.read ? 'notification-item-read' : 'notification-item-unread'
+              }
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <StatusBadge
+                      label={notification.type.toUpperCase()}
+                      icon={TypeIcon}
+                      colorScheme={config.colorScheme}
+                    />
+                    <span className="font-medium text-gray-900" data-testid="notification-title">
+                      {notification.title}
+                    </span>
+                  </div>
+                  <p className="text-gray-600 text-sm" data-testid="notification-message">
+                    {notification.message}
+                  </p>
+                  <span className="text-xs text-gray-400 mt-2 block">
+                    {new Date(notification.createdAt).toLocaleString()}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  {!notification.read && (
+                    <button
+                      onClick={() => markAsRead(notification.id)}
+                      className="p-2 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-lg transition-colors"
+                      title="Mark as read"
+                      data-testid="mark-as-read-button"
+                    >
+                      <CheckCheck className="w-5 h-5" />
+                    </button>
+                  )}
+                  <button
+                    onClick={() => deleteNotification(notification.id)}
+                    className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                    data-testid="delete-notification-button"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {!loading && notifications.length === 0 && (
+        <EmptyState icon={Bell} title="No notifications yet. Create one above!" className="py-12" />
+      )}
+    </div>
+  )
+}